@charset "shift_jis";
/*******************************/
/***** 預金シミュレーション ****/
/*******************************/

body#simulation{
	background-color:#fff;
	font-size:1.4rem;
}
body#simulation a:active,
body#simulation a:hover{
	text-decoration:none;
}
body#simulation a{
	font-weight:bold;
}
#simulation #main{
	padding-bottom:0;
}
#simulation em{
	font-family:arial;
	font-weight:bold;
	font-style:normal;
}
#simulation .dn{
	display:none;
}
@media screen and (max-width: 767px) {
	.btn-cv-01 > a,
	.btn-cv-02 > a,
	.btn-cv-03 > a{
		min-width: 100%;
	}
}
#simulation .txtR{
	text-align:right;
}
#simulation .main-copy{
	font-size:1.2rem;
	text-align:center;
	padding:16px 16px 8px;
}

#simulation ul.tab{display:flex;}
#simulation ul.tab li{
	flex:1;
	display:flex;
	align-items:stretch;
}
#simulation ul.tab li:first-child{margin-right:8px;}
#simulation ul.tab li button{
	appearance:none;
	padding:12px;
	cursor:pointer;
	font-size:1.4rem;
	color:#606060;
	border:none;
	border-bottom:solid 2px transparent;
	background-color:transparent;
	width:100%;
	text-align:center;
	display:flex;
	justify-content:center;
	align-items:center;
}
#simulation ul.tab li button.on{
	background-color:#fff;
	color:#3895ff;
	border-bottom:solid 2px #3895ff;
}
#simulation ul.tab li button span{
	font-weight:bold;
}

#simulation ul.tab .dolyen::before,
#simulation ul.tab .stepup::before{
	content:"";
	background-size:contain;
	background-repeat:no-repeat;
	background-position:center center;
	display:inline-block;
	vertical-align:text-bottom;
	margin-right:.5em;
}

#simulation ul.tab .dolyen::before{
	width:20px;
	height:20px;
	background-image:url(/miniapp/sim/images/ic_001.svg);
}
#simulation ul.tab .stepup::before{
	width:16px;
	height:16px;
	background-image:url(/miniapp/sim/images/ic_jpn.png);
}
/* tab display */
#halfDeposit,
#fullDeposit{
	display:none;
}
#halfDeposit.active,
#fullDeposit.active{
	display:block;
}
#simulation .deposit-expand{
	border:solid 1px #ddd;
	border-radius:12px;
	padding:16px 0;
	display:flex;
	justify-content:space-around;
	margin:4px 0 12px;

}
#simulation .deposit-expand span{
	display:block;
	font-weight:bold;
}
#simulation .deposit-expand .right{
	text-align:right;
}
#simulation .deposit-expand-yen::before,
#simulation .deposit-expand-con::before{
	content:"";
	width:20px;
	height:20px;
	background-size:contain;
	background-repeat:no-repeat;
	background-position:center center;
	display:inline-block;
	vertical-align:text-bottom;
	margin-right:.5em;
}

#simulation .deposit-expand-yen::before{
	background-image:url(/miniapp/sim/images/ic_jpn.png);
}
#simulation .deposit-expand-con::before{
	background-image:url(/miniapp/sim/images/ic_usd.png);
}

#simulation .deposit-expand-yen,
#simulation .deposit-expand-con{font-size:1.1rem;}
#simulation .deposit-expand-yen em,
#simulation .deposit-expand-con em{font-size:2.0rem;}
#simulation .deposit-expand-dol{font-size:1.2rem;color:#909090;}

#simulation .deposit-expand-rate{font-size:1.0rem;color:#909090;}
#simulation .deposit-expand-rate em{font-size:1.2rem;}


#simulation .select-price-wrap{
	padding:0 16px 24px;
	margin:8px 0 28px;
	position:relative;
}
#simulation .select-price-wrap::after{
	content: "";
	position: absolute;
	left:calc(50% - 2px);
	bottom: -10px;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-top: 8px solid #bababa;
	border-radius:2px;
}
#simulation .select-price-head{
	display:flex;
	justify-content:space-between;
	font-weight:bold;
	margin-bottom:16px;
}

#simulation #halfDeposit .select-price-head{
	display:flex;
	justify-content:space-between;
	font-weight:bold;
	margin-bottom:16px;
}
#simulation #halfDeposit .deposit-expand + .select-price-head{
	margin:16px 0 0;
}
#simulation .select-price-head .ttl{
	color:#606060;
}

#simulation .select-price-head .subttl{
	display:block;
	font-size:1.0rem;
	color:#f88600;
}
#simulation .select-price-body{
	display:flex;
	justify-content:left;
	flex-wrap:wrap;
}
#simulation .select-price-body .labelBox{
	display:flex;
	cursor: pointer;
	color:#606060;
	font-size:1.2rem;
	line-height:1;
	background-color:#f7f7f7;
	border-radius:20px;
	width:fit-content;
	padding:8px 16px;
	font-weight:bold;
	margin:0 12px 12px 0;
}
#simulation .select-price-body .labelBox:last-of-type{
	margin-right:0;
}
#simulation .select-price-body input[type=radio]:checked +.labelBox{
	border-color:#3895ff;
	background-color:#3895ff;
	color:#fff;
}


/* #halfDeposit */
#simulation .copy{
	color:#20bf7a;
	background-color:#dff7ed;
	font-weight:bold;
	text-align:center;
	padding:8px 0;
}

#simulation .future-deposit {
	background:#f7f7f7;
	margin:16px;
	border:solid 1px #ddd;
	border-radius:12px;
}
#simulation .future-deposit > .ttl{
	width:100%;
	text-align:center;
	font-weight:bold;
	padding:12px 0 10px;
}
#simulation .future-deposit .ttl > em{
	font-size:2.0rem;

}
#simulation .future-deposit-head{
	padding: 0 16px;
	display:flex;
	justify-content:space-between;
}
#simulation #futureDeposit .future-deposit-head{
	padding: 0 16px 16px;
	display:block;
}

#simulation .future-deposit-head .left,
#simulation .future-deposit-head .right{
	display:flex;
	flex-direction:column;
}
#simulation .future-deposit-head .right{
	position:relative;
}
#simulation .future-deposit-head .right a{
	text-align:right;
}
#simulation .future-deposit-head .left .ttl,
#simulation .future-deposit-head .right .ttl{
	font-size:0.9rem;
	color:#909090;
}

#simulation .future-deposit-head .left .interest,
#simulation .future-deposit-head .right .rate{
	font-size:1.2rem;
	color:#20bf7a;
}
#simulation .future-deposit-head .right .maxrate{
	font-size:1.1rem;
	color:#606060;
}
#simulation .future-deposit-head .left .amount{
	font-size:1.2rem;
	color:#242323;
}
#simulation .loss .future-deposit-head .left .amount{
	color:#fd5c5c;
}
#simulation .future-deposit-head .left .amount > em,
#simulation .future-deposit-head .right .rate > em{
	font-size:2.4rem;
}

#simulation .future-deposit-head .left .interest > em{
	font-size:1.6rem;
	padding:0 2px;
}

#simulation .future-deposit-head .right::before{
	content: "";
	position: absolute;
	left:-16px;
	top: 0;
	width: 0.5px;
	height: 100%;
	background: #ddd;
}

#simulation .future-deposit-expand{
	margin:0 16px 12px;
	padding:12px;
	display:block;
	justify-content:unset;
	border-top:none;
	background-color: #ffffff;
	border-radius:12px;
}
#simulation .future-deposit-expand span{
	font-weight:bold;
	vertical-align:text-bottom;
}

#simulation .future-deposit-expand .future-deposit-expand-yenint span,
#simulation .future-deposit-expand .future-deposit-expand-conint span,
#simulation .future-deposit-expand .future-deposit-expand-dolint span{
	display:inline-block;
	font-size:1.0rem;
}
#simulation .future-deposit-expand .left,
#simulation .future-deposit-expand .right{
	text-align:right;
}
#simulation .future-deposit-expand-yendepo::before,
#simulation .future-deposit-expand-condepo::before{
	content:"";
	width:20px;
	height:20px;
	background-size:contain;
	background-repeat:no-repeat;
	background-position:center center;
	display:inline-block;
	vertical-align:text-bottom;
	margin-right:.5em;
}

#simulation .future-deposit-expand-yendepo::before{
	background-image:url(/miniapp/sim/images/ic_jpn.png);
}
#simulation .future-deposit-expand-condepo::before{
	background-image:url(/miniapp/sim/images/ic_usd.png);
}

#simulation .future-deposit-expand-yendepo,
#simulation .future-deposit-expand-condepo,
#simulation .future-deposit-expand-yenint,
#simulation .future-deposit-expand-conint{ font-size:1.2rem;}
#simulation .future-deposit-expand-yendepo em,
#simulation .future-deposit-expand-condepo em,
#simulation .future-deposit-expand-yenint em,
#simulation .future-deposit-expand-conint em{ font-size:1.6rem;}
#simulation .future-deposit-expand-doldepo{font-size:1.2rem;color:#909090;}
#simulation .future-deposit-expand-rate{font-size:1.0rem;color:#909090;}
#simulation .future-deposit-expand-rate em{font-size:1.2rem;}

#simulation .future-deposit-expand-dolint{font-size:1.2rem;}

#simulation .future-deposit-expand-yenint,
#simulation .future-deposit-expand-conint,
#simulation .future-deposit-expand-dolint{color:#20bf7a;}

#simulation .future-deposit-body{
	background: #fff;
	padding: 0 16px 16px;
	border-radius:0 0 12px 12px;
}
#simulation .future-deposit-body p{padding-top:16px;}

#simulation .future-deposit-body + .future-deposit-body::before{
	content: "";
	position: absolute;
	left:0;
	top: 0;
	width: 100%;
	height: 0.5px;
	background: #ddd;
}
#simulation .graph-container .bar.nextyear.loss .principal,
#simulation .graph-container .bar.fiveyears.loss .principal{
	background-color: #ffb2b2;
}
#simulation .graph-container .bar.tenyears.loss .principal{
	background-color: #fd5c5c;
}
#simulation .future-deposit-expand + .future-deposit-expand{
	border-top:solid 1px #ddd
}
#simulation .detailsList dd.profit{
	color:#20bf7a;
}
#simulation .detailsList dd.loss{
	color:#fd5c5c;
}

#simulation .depositList{
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding:0 16px;
}

#simulation .depositList dt{
	font-size:1.1rem;
	color:#242323;
	font-weight:bold;
}

#simulation .depositList dd{
	text-align:right;
	font-size:1.2rem;
	font-weight:bold;
}
#simulation .depositList .amount em{
	font-size:2.4rem;
}
#simulation .depositList .changeInPrincipal{
	padding:2px 8px;
	border-radius:4px;
	color:#20bf7a;
	background:#dff7ed;
}
#simulation .depositList .changeInPrincipal.loss{
	padding:2px 8px;
	border-radius:4px;
	color:#fd5c5c;
	background:#ffe5e5;
}
/**/
#simulation .detailsList{
	display:grid;
	grid-template-columns:max-content 1fr;
	align-items:center;
	border-bottom:solid 0.5px #dddddd;
	margin-bottom:8px;
	padding-bottom:8px;
}
#simulation .detailsList:last-of-type{
	border:none;
	margin-bottom:0;
	padding-bottom:0;
}
#simulation .detailsList dt,
#simulation .detailsList dd{
	font-size:1.2rem;
	color:#242323;
	font-weight:normal;
}
#simulation .detailsList dd{
	text-align:right;
}
#simulation .detailsList .mainttl,
#simulation .detailsList .maindetail{
	font-weight:bold;
}
#simulation .detailsList .maindetail em{
	font-size:1.6rem;
	margin-right:2px;
}
#simulation .detailsList .subttl{
	color:#242323;
	position:relative;
	padding-left:50px;
}
#simulation .detailsList .subdetail{
	color:#909090;
}
#simulation .detailsList .subttl::before{
	content: "";
	position: absolute;
	left: 18px;
	top: 0;
	transform: translateX(-50%);
	width: 8px;
	height: 8px;
	border:solid #242323;
	border-width:0 0 1px 1px;
}
#simulation .detailsList .subttl.jpn::after,
#simulation .detailsList .subttl.usd::after{
	content:"";
	position: absolute;
	left: 26px;
	top: 0;
	width:16px;
	height:16px;
	background-size:contain;
	background-repeat:no-repeat;
	background-position:center center;
	display:inline-block;
	vertical-align:text-bottom;
}
#simulation .detailsList .subttl.jpn::after{
	background-image:url(/miniapp/sim/images/ic_jpn.png);
}
#simulation .detailsList .subttl.usd::after{
	background-image:url(/miniapp/sim/images/ic_usd.png);
}
#simulation .future-deposit-interestrateArea{
	display:grid;
	grid-template-columns:max-content 1fr;
	padding-top:16px;
}
#simulation .future-deposit-interestrateArea dl{
	display:flex;
	flex-direction:column;
	background:#f7f7f7;
	border-radius:12px;
	padding:12px;
	font-weight:bold;
}
#simulation .future-deposit-interestrateArea dl:first-of-type{
	margin-right:8px;
}
#simulation .future-deposit-interestrateArea dl dd{
	text-align:right;
	color:#20bf7a;
	font-size:1.2rem;
}
#simulation .future-deposit-interestrateArea dl dd em{
	font-size:2.2rem;
	margin-right:2px;
}
/*graph*/

#simulation .graph-container {
	position:relative;
	height: 100px;
	border-bottom: 2px solid #ddd;
	margin: 20px auto;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	--pseudo-bottom:28px;
}
#simulation .graph-container::after{
	content:"";
	position:absolute;
	display:block;
	height: 1px;
	width: 100%;
	right:0;
	bottom:var(--pseudo-bottom);
	border-top:1px dashed #ddd;
}
#simulation .graph-container .principal{
	height: 30px;
	width: 40px;
	background-color: #bbcff2;
	margin:0 auto;
}
#simulation .graph-container .interest {
	width: 40px;
	background-color: #a1e5c8;
	margin:0 auto;
	border-radius:2px 2px 0 0;
}

#simulation .bars{
	transform-origin: bottom;
}

#simulation .grow {
	animation: growY 1s ease-out forwards;
}
@keyframes growY {
	from { transform: scaleY(0); }
	to   { transform: scaleY(1); }
}

#simulation .graph-container .bar.now,
#simulation .graph-container .bar.nextyear,
#simulation .graph-container .bar.fiveyears,
#simulation .graph-container .bar.tenyears{
	position:relative;
	width: 60px;
	display: flex;
	flex-direction: column;
	text-align:center;
}

#simulation .graph-container .bar.nextyear,
#simulation .graph-container .bar.fiveyears,
#simulation .graph-container .bar.tenyears {
	margin-left:16px;
}
#simulation .graph-container .bar.now .interest {
	height: 0;
}
#simulation .graph-container .bar.tenyears .interest {
	background-color: #20bf7a;
}
#simulation .graph-container .bar.tenyears .principal{
	background-color: #2455aa;
}
#simulation .graph-container .total-price{
	font-size:1.1rem;
}
#simulation .graph-container .interest-price{
	font-size:1.1rem;
	color:#a1e5c8;
}
#simulation .graph-container .bar.tenyears .interest-price{
	color: #20bf7a;
}
#simulation .graph-container .bar.tenyears .total-price,
#simulation .graph-container .bar.tenyears .interest-price{
	font-weight:bold;
}

#simulation .graph-container .term{
	position:absolute;
	bottom:-22px;
	left:15px;
	font-size:1.1rem;
	font-weight:bold;
	color:#999;
	display:flex;
	align-items:baseline;
}
#simulation .graph-container .term > em{
	font-size:1.6rem;
	line-height:normal;
	font-weight:bold;
}
#simulation .graph-container .bar.now .term{
	left:20px;
}
#simulation .graph-container .bar.tenyears .term{
	left:12px;
}

/* loss */

#simulation .loss .graph-container .bar.nextyear .principal,
#simulation .loss .graph-container .bar.fiveyears .principal{
	background-color: #ffb2b2;
}
#simulation .loss .graph-container .bar.tenyears .principal{
	background-color: #fd5c5c;
}


/*range*/

#simulation .rangeWrap{
	display:flex;
	justify-content:center;
	align-items:center;
	padding:32px 16px 16px;
	margin:0 auto;
}
#simulation .rangeWrap .range-content{
	position:relative;
	height:30px;
}
#simulation input[type=range] {
	-webkit-appearance: none;
	appearance: none;
	outline: none;
	cursor: pointer;
	position: relative;
	width:80vw;
}
@media screen and (min-width: 769px){
	#simulation input[type=range]{
		width:450px;
	}
}
#simulation .range-content input[type=range]:focus {
	outline: none;
}
#simulation .range-content input[type="range"]::-webkit-slider-runnable-track {
	background:#ddd;
	height:2px;
	border-radius:2px;
	position:relative;
}

#simulation .range-content input[type="range"]::-webkit-slider-thumb{
	-webkit-appearance: none;
	appearance: none;
	height: 14px;
	width: 14px;
	margin-top: -7px;
	background-color: #3895ff;
	border-radius: 50%;
	box-shadow:0px 1px 2px rgba(0, 0, 0, 0.6);
	position:relative;
	z-index:8;
}

#simulation .range-content .range-value {
	position: absolute;
	top:-30px;
	left:50%;
	transform: translateX(-50%);
	background: #3895ff;
	color: white;
	padding: 2px 16px;
	border-radius: 16px;
	font-size: 1.2rem;
	pointer-events: none;
	white-space: nowrap;
}
#simulation .range-content .range-value::before{
	content:"";
	position:absolute;
	display:block;
	width:0;
	height:0;
	border-style:solid;
	border-right:8px solid transparent;
	border-left:8px solid transparent;
	border-top:6px solid #3895ff;
	border-bottom:0;
	bottom:-5px;
	right:calc(50% - 8px);
}


#simulation .range-content .range-value-min{
	position: absolute;
	top:-15px;
	left: -30px;
	color: #909090;
	padding: 2px 12px;
	border-radius: 4px;
	font-size: 1.2rem;

}

#simulation .range-content .range-value-max{
	position: absolute;
	top:-15px;
	right:-30px;
	color: #909090;
	padding: 2px 12px;
	border-radius: 4px;
	font-size: 1.2rem;

}
#simulation .range-content .ticks {
	display: flex;
	justify-content: space-between;
	position: absolute;
	top: 8px;
	left: 0;
	right: 0;
}

#simulation .range-content .tick {
	height: 8px;
	width: 8px;
	right:0;
	top: 9px;
	background-color: #ddd;
	border-radius: 50%;
	content:"";
	display:block;
	z-index:5;
}
#simulation .range-content .range-high{
	position: absolute;
	top:25px;
	left: -20px;
	color: #fd5c5c;
	padding: 2px 8px;
	border-radius: 4px;
	font-size: 1.1rem;
	background:#ffe5e5;
}

#simulation .range-content .range-low{
	position: absolute;
	top:25px;
	right:-20px;
	color: #3895ff;
	padding: 2px 8px;
	border-radius: 4px;
	font-size: 1.1rem;
	background:#e5f1ff;
}
#simulation .range-content .range-now{
	position: absolute;
	top:40px;
	left:0;
	font-size: 1.2rem;
	font-weight:bold;
	color:#606060;
	width:100%;
	text-align:center;
}
#simulation .range-content .range-now::before{
	content:"";
	position:absolute;
	display:block;
	width:0;
	height:0;
	border-style:solid;
	border-right:6px solid transparent;
	border-left:6px solid transparent;
	border-bottom:10px solid #606060;
	border-top:0;
	top:-12px;
	right:calc(50% - 5px);
}
#simulation .commentWrap{
	padding:10px 16px 16px;
}
#simulation .commentWrap em{
	color:#20bf7a;
}
#simulation #commentValue.loss em{
	color:#fd5c5c;
}
/* bottom notice */
#simulation .text-indent{
	padding:8px 16px 16px;
	font-size:1.1rem;
	color:#909090;
}

/* #fullDeposit */
#simulation .select-price-body + .select-price-head{
	padding-top:32px;
}

#simulation .bottom-link-white{
	margin:0;
	padding:0 16px 16px;
	background-color: #fff;
	text-align:center;
}

.bottom-link-white [class^="btn-cv-"] + [class^="btn-cv-"]{
	margin-top: revert;
}
/*webview*/
#simulation .bottom-link:not(:has(*)){padding-top:50px;}
/*footer Pattern F*/
#simulation #ftrContainer{padding:48px 0 20px;}
#simulation #ftrContainer .ftrL,
#simulation #ftrContainer .logoutWrap,
#simulation #ftrContainer .ftrC{display:none;}
#simulation #ftrContainer.fixed{position:fixed;width:100%;bottom:0;}


@media screen and (min-width: 769px){
	#simulation #bodyWrapper{background:#f6f6f6;}
	#simulation #main > div{margin:0 auto;width:512px;background:#fff;}

	body#simulation a{font-size:1.4rem;}
	#simulation .select-price-body{justify-content:left;}
	#simulation .select-price-body .labelBox{margin-right:8px;}

	#simulation .graph-container{width:300px;}
	#simulation .bottom-link-white a {width:327px;padding:8px 16px;}
}