@charset "utf-8";

/*--------------------------------------------------------------------------------------------------

   simulation

--------------------------------------------------------------------------------------------------*/

#second.simulation .contents .cont {
	width: 100%;
	font-size: 20px;
	padding: 20px 0;
}

#second.simulation .simSec01 .live {
	background-color: #EEF5E9;
	padding: 20px 20px 40px;
	margin: 60px 0;
}

#second.simulation .simSec01 .live h2 {
	margin: -50px 0 20px;
	padding: 0;
	font-size: 24px;
	font-weight: 500;
	background-color: transparent;
}

#second .contents h2 img {
	width: 32px;
	height: auto;
	margin-right: 10px;
	vertical-align: -7px;
}

#second.simulation .simSec01 .live h2:before {
	display: none;
}

#second.simulation .annai {
	padding: 0 0 0 50px;
	background: url(../image/icon-03.png) no-repeat 2px 0;
	background-size: 40px;
	font-weight: 500;
}

#second.simulation h3 .opt {
	background-color: #FCF3D3;
	margin-right: 6px;
	padding: 0 6px;
	color: #111;
	border: 1px solid #CCC;
}

.simBtn {
	text-align: center;
}

.simBtn p {
	margin: 20px 0 0 !important;
}

.simBtn button {
	width: 400px;
	height: 80px;
	margin: 0 20px;
	font-size: 20px;
	background-color: #FFF;
	border-radius: 20px;
	border: 1px solid #AAA;
	cursor: pointer;
}

.simBtn button img {
	width: 60px;
	height: auto;
	vertical-align: -22px;
	margin-right: 6px;
}

.simBtn button:hover {
	background-color: #E8F3F4;
}

#second.simulation .selectBox {
	width: 90%;
	margin: 0 auto 60px;
	background-color: #EEF5E9;
	padding: 20px;	
}

.radio-group {
 display: flex;
	justify-content: center;
}

.radio-area {
	margin: 0 20px;
 display: flex;
	text-align: center;
}

.radio-area input[type=radio] {
 position: absolute;
 -webkit-appearance: none;
 -moz-appearance: none;
 appearance: none;
}

.radio-area label {
	width: 400px;
 cursor: pointer;
 padding: 10px 0;
 color: #111;
 background-color: #FFF;
 transition: .5s;
	border: 1px solid #AAA;
	border-radius: 20px;
	line-height: 1.4;
	font-size: 20px;
	font-weight: 500;
}

.radio-group.b3 .radio-area label {
	width: 300px;
}

.radio-area input[type=radio]:hover+label,
.radio-area input[type=radio]:checked+label {
 background-color: #009E96;
	color: #FFF;
}

.radio-area label span {
	display: block;
	font-size: 18px;
	font-weight: 400;
}

.radio-area label span.sCharge {
	font-size: 14px;
}

.check-group {
}

.check-area {
	margin: 0 20px;
	border-bottom: 1px solid #CCC;
	background-color: #FFF;
}

.check-area label {
	display: flex;
	align-items: center;
	width: 100%;
	padding: 10px 20px;
	cursor: pointer;
	line-height: 1.4;
}

.check-area label:hover {
	background-color: #E8F3F4;
}

.check-area input[type=checkbox] {
	width: 28px;
	height: 28px;
	margin-right: 20px;
}

.check-area label div {
	width: 100%;
	display: flex;
	align-items: center;
}

.check-area label .pLogo {
	margin-right: 20px;
}

.check-area label div .pInfo {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
}


#second.simulation .total {
	background-color: #F5E9F4;
	margin: 0 0 60px;
	padding: 20px;
	display: flex;
	justify-content: center;
}

#second.simulation .total div {
	width: 46%;
	margin: 0 2%;
	border: 2px solid #F593ED;
	padding: 10px;
	background-color: #FFF;
}

#second.simulation .total div dl {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

#second.simulation .total div dl dd span {
	font-size: 26px;
	font-weight: 500;
	margin-right: 4px;
}

#second.simulation .simBtns {
	margin: 0 0 40px;
	text-align: center;
}

#second.simulation .simBtns a {
	display: inline-block;
	width: 240px;
	padding: 10px 0;
	border: 2px solid #009E96;
	border-radius: 100vh;
	margin: 0 20px;
	text-decoration: none;
 background: url(../../common/image/arrow-01.png) #FFF no-repeat 94% center;
	color: #009E96;
}

#second.simulation .simBtns a.next {
 background: url(../../common/image/arrow-02.png) #009E96 no-repeat 94% center;
	color: #FFF;
}

#second.simulation .simBtns a.re:hover {
 background: url(../../common/image/arrow-01.png) #E8F3F4 no-repeat 94% center;
}

#second.simulation .simBtns a.next:hover {
 background: url(../../common/image/arrow-01.png) #FFF no-repeat 94% center;
	color: #009E96;
}

.check-group02 {
	margin: 0 0 20px;
}

.check-area02 {
	width: 100%;
	background-color: #FFF;
	border-bottom: 1px solid #CCC;
}

.check-area02 input[type=checkbox] {
	width: 28px;
	height: 28px;
	margin-right: 20px;
}

.check-area02 label dl {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.check-area02 label dl dt {
	width: 80%;
	font-size: 16px;
}

.check-area02 label dl dt span {
	font-weight: 500;
	color: #009E96;
	font-size: 20px;
}

.radio-area02 label {
	width: 100%;
	cursor: pointer;
	display: block;
	padding: 10px;
	font-weight: 500;
}

.radio-area02 input[type=radio] {
	width: 20px;
	height: 20px;
	vertical-align: -3px;
}


.check-area02 label {
	width: 100%;
	cursor: pointer;
	line-height: 1.4;
	padding: 20px;
	display: flex;
	align-items: center;
	font-weight: 400;
}

.radio-area02 label.pack {
	border-bottom: 1px solid #CCC;
}

#second.simulation .simContact {
	margin: 0 0 40px;
	text-align: center;
	font-weight: 500;
}

#second.simulation .simContact a {
	display: inline-block;
	width: 400px;
	padding: 10px 0;
	border: 2px solid #fcb305;
	border-radius: 100vh;
	margin: 0 20px;
	text-decoration: none;
 background: url(../../common/image/arrow-02.png) #fcb305 no-repeat 94% center;
	color: #111;
}

#second.simulation .simContact a:hover {
 background: url(../../common/image/arrow-05.png) #fee4a6 no-repeat 94% center;
	color: #111;
}

#second.simulation .totalInfo {
	display: flex;
	justify-content: space-between;
	padding: 20px;
	margin: -30px 0 60px;
	border-top: 4px double #AAA;
	border-bottom: 4px double #AAA;
}

#second.simulation .totalInfo div {
	width: 46%;
	margin: 0 2%;
	padding: 10px;
}

.totalInfo dl {
	display: flex;
	font-size: 18px;
	border-bottom: 1px dotted #AAA;
}

.totalInfo dl dt {
	width: 70%;
	padding: 8px 4px;
}

.totalInfo dl dd {
	width: 30%;
	text-align: right;
	padding: 8px 4px;
}

.totalInfo dl.simWaribiki {
	background-color: #FAF3FA;
}

.totalInfo h3 {
	background-color: #E8F3F4;
	padding: 8px 4px !important;
}

.totalInfo h4 {
	background-color: #F3F3F3;
	font-size: 18px !important;
	padding: 8px 4px;
	font-weight: 500;
}

.totalInfo h4 img {
	width: 22px;
	height: auto;
	margin: 0 10px 0 4px;
	vertical-align: -4px;
}


@media screen and (max-width: 1199px){

#second.simulation .simSec01 .live h2 {
margin: -30px 0 20px;
font-size: 20px;
}

.simBtn button {
width: 100%;
margin: 0;
}

.simBtn p {
text-align: left;
font-size: 16px;
}

#second.simulation .selectBox {
width: 100%;
}

.radio-group {
display: block;
}

.radio-area {
margin: 0 0 20px;
}

.radio-area label {
width: 100%;
font-size: 16px;
}

.radio-group.b3 .radio-area label {
width: 100%;
}

.check-area label {
display: block;
}

.check-area label div {
display: block;
}

.check-area label div .pInfo {
display: block;
}

.check-area label .pLogo {
margin: 0;
}

.check-area label div .pInfo .pCharge {
display: block;
}

#second.simulation .total {
display: block;
}

#second.simulation .total div {
width: 100%;
margin: 0 0 20px;
}

#second.simulation .total div dl {
display: block;
}

#second.simulation .simBtns a {
margin: 0 auto 20px;
width: 90%;
}

.check-area02 label dl {
display: block;
}

.check-area02 label dl dt,
.check-area02 label dl dd {
width: 100%;
}

#second.simulation .totalInfo {
display: block;
padding: 0;
}

#second.simulation .totalInfo div {
width: 100%;
margin: 0 0 20px;
padding: 0;
}

#second.simulation .simContact a {
width: 90%;
margin: 0 auto;
}

.totalInfo dl {
display: block;
}

.totalInfo dl dt {
width: 100%;
}

.totalInfo dl dd {
width: 100%;
text-align: right;
}


}