@charset "utf-8";



/*==================================================

index
==================================================*/

.entrance {
	min-height: 320px;
}
.entrance nav {
	overflow: hidden;
	margin-top: 120px;
}
.landscape .entrance nav {
	margin: 0 !important;
	position: absolute;
		left: 50%;
		top: 50%;
	transform: translateX( -50% ) translateY( -50% );
		-webkit-transform: translateX( -50% ) translateY( -50% );
		-ms-transform: translateX( -50% ) translateY( -50% );
		-o-transform: translateX( -50% ) translateY( -50% );
}
.entrance nav ul {
	margin-left: -40px;
	width: 1240px;
	zoom:1;
}
.entrance nav ul:after {
	clear: both;
	display: block;
	content: '';
	height: 0;
}
.entrance nav li a {
	border: solid 1px #C9C9C9;
	border-radius: 4px;
	height: 320px;
	width: 580px;
	margin-left: 40px;
	float: left;
	display: inline-block;
	box-sizing: border-box;
	padding: 80px 40px;
	position: relative;
}
.entrance nav li a:hover {
	text-decoration: none;
}
.entrance nav li h2,
.entrance nav li p {
	font-weight: bold;
}
.entrance nav li h2 {
	font-size: 196%;
}
.entrance nav li p {
	font-size: 150%;
	margin-top: 24px;
}
.entrance nav li a:after {
	content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 18px 18px;
    position: absolute;
    right: 12px;
    bottom: 10px;
}
.entrance nav li:nth-child(1) h2,
.entrance nav li:nth-child(1) p {
	color: #369F02;
}
.entrance nav li:nth-child(2) h2,
.entrance nav li:nth-child(2) p {
	color: #F67939;
}
.entrance nav li:nth-child(1) a::after{border-color: transparent transparent #369F02 transparent;}
.entrance nav li:nth-child(2) a::after{border-color: transparent transparent #F67939 transparent;}



/*==================================================

simulationForm
==================================================*/

.simulation_form {
	width: 320px;
    background: #fafbf1;
    border-top: solid 4px #369f02;
    padding: 24px;
    border-radius: 0 0 4px 4px;
		-moz-border-radius: 0 0 4px 4px;
		-webkit-border-radius: 0 0 4px 4px;
		-o-border-radius: 0 0 4px 4px;
		-ms-border-radius: 0 0 4px 4px;
    box-shadow: 0px 3px 3px 1px rgb(0 0 0 / 20%);
		-moz-box-shadow: 0px 3px 3px 1px rgba(0,0,0,0.2);
		-webkit-box-shadow: 0px 3px 3px 1px rgb(0 0 0 / 20%);
		-o-box-shadow: 0px 3px 3px 1px rgba(0,0,0,0.2);
		-ms-box-shadow: 0px 3px 3px 1px rgba(0,0,0,0.2);
	text-align: center;
}
.landscape .simulation_form {
	margin: 0 !important;
	position: absolute;
		left: 50%;
		top: 50%;
	transform: translateX( -50% ) translateY( -50% );
		-webkit-transform: translateX( -50% ) translateY( -50% );
		-ms-transform: translateX( -50% ) translateY( -50% );
		-o-transform: translateX( -50% ) translateY( -50% );
}
.simulation_form table{
	width: 100%;
	text-align: left;
	margin-bottom: 16px;
}
.simulation_form td,
.simulation_form th {
	padding: 16px 0;
	text-align: left;
	vertical-align: middle;
	border-bottom: dotted 2px #e2e2dd; 
}
.simulation_form th {
	color: #369f02;
	font-size: 125%;
	font-weight: bold;
	width: 80px;
}
.simulation_form input {
	font-size: 125%;
	width: 200px;
}
.simulation_form input[type="number"] {
	text-align: right;
	-moz-appearance:textfield; 
}
input[type="number"]::-webkit-outer-spin-button, 
input[type="number"]::-webkit-inner-spin-button { 
	-webkit-appearance: none; 
	margin: 0; 
} 



/*==================================================

variationSimulationForm
==================================================*/

#variationSimulationForm {
	margin: 120px auto 0;
}



/*==================================================

revolvingSimulationForm
==================================================*/

#revolvingSimulationForm {
	width: 760px;
	margin: 160px auto 0;
}
#revolvingSimulationForm .shopping {
	margin: 24px 0;
	line-height: 170%;
}
#revolvingSimulationForm .shopping {
	font-size: 20px;
}



/*==================================================

simulator
==================================================*/

.simulator #graph .chart-wrap,
.simulator #detail .detail-view,
.simulator #graph .chart-wrap>h1 {
	height: 160px;
}
.simulator #graph .chart-wrap,
.simulator #detail .detail-view {
	margin-top: 16px;
}


/*	graph	*/

.simulator #graph .chart-wrap {
	border: 1px solid rgba( 226, 236, 252, 1 );
	border-radius: 4px;
	box-sizing: border-box;
	margin-top: 16px;
	padding: 24px;
	padding-left: 80px;
	width: 100%;
	position: relative;
	overflow: hidden;
}

.simulator #graph .chart-wrap h1 {
	background: rgba( 16, 31, 168, 1 );
	width: 40px;
	color: rgba( 255, 255, 255, 1 );
	position: relative;
	position: absolute;
	left: 0;
	top: 0;
}

.simulator #graph .chart-wrap h1 span {
	writing-mode: vertical-rl;
		-webkit-writing-mode: vertical-rl;
		-ms-writing-mode: tb-rl;
		-o-writing-mode: vertical-rl;
	font-size: 125%;
	font-weight: bold;
	letter-spacing: 4px;
	position: absolute;
		left: 50%;
		top: 50%;
	transform: translateX( -50% ) translateY( -50% );
		-webkit-transform: translateX( -50% ) translateY( -50% );
		-ms-transform: translateX( -50% ) translateY( -50% );
		-o-transform: translateX( -50% ) translateY( -50% );
}


/*	detail	*/

.simulator #detail .detail-view {
	position: relative;
}
.simulator .detail-inner .money strong {
	font-size: 125%;
	margin-right: 8px;
}
.simulator .detail-inner .result {
	border-bottom: 1px solid #1A1A1A;
	padding-bottom: 8px;
	font-size: 150%;
	color: #1A1A1A;
	text-align: right;
	width: 100%;
	position: absolute;
	right: 0;
	bottom: 0;
}
.simulator .detail-inner .result .money {
	color: rgba( 0, 0, 0, 1 );
	font-size: 60% !important;
}
.simulator .detail-inner .result .money,
.simulator .detail-inner .result .money * {
}
.simulator .detail-inner h1 {
	background: #EAF3FC;
	border-top: 1px solid #4f8cdc;
	border-bottom: 1px solid #4f8cdc;
	color: rgba( 16, 31, 168, 1 );
	text-align: center;
	font-weight: bold;
	font-size: 14px;
	padding: 8px 0;
}
.simulator .detail-inner .annual_per {
	background: #4f8cdc;
	border-radius: 4px;
	color: #FFFFFF;
	padding: 4px;
	display: flex;
	justify-content: flex-end;
	margin-top: 4px;
}
.simulator .detail-inner .annual_per>span {
	display: flex;
}
.simulator .detail-inner .annual_per>span:first-child {
    text-align: right;
    font-weight: bold;
    line-height: 160%;
}
.simulator .detail-inner .annual_per>span:first-child:after {
	content: '：'
}
.simulator .detail-inner .annual_per input {
	border-radius: 4px;
	border: none;
	padding: 0 4px;
	width: 40px;
	margin-right: 4px;
	text-align: right;
	-moz-appearance:textfield; 
}
.simulator .detail-inner .annual_per input[type="number"]::-webkit-outer-spin-button,
.simulator .detail-inner .annual_per input[type="number"]::-webkit-inner-spin-button { 
	-webkit-appearance: none; 
	margin: 0; 
}



/*==================================================

variation
==================================================*/

.variation-simulation>h1 {
	font-weight: bold;
	color: rgba( 16, 31, 168, 1 );
	font-size: 125%;
	margin-top: 24px;
}


/*	graph	*/

.variation-simulation #bulkChart,
.variation-simulation #installmentChart,
.variation-simulation #revolvingChart {
	width: 792px !important;
	height: 120px !important;
	box-sizing: border-box;
}
.variation-simulation #graph .chart-wrap h1 span {
	height: 56%;
}


/*	detail	*/

.variation-simulation #detail {
	margin-top: 16px;
}
.variation-simulation .detail-inner>section dl {
	border: 1px solid #4f8cdc;
	border-radius: 4px;
	position: relative;
	width: 100%;
	zoom:1;
}
.variation-simulation .detail-inner>section dl:after {
	clear: both;
	display: block;
	content: '';
	height: 0;
}
.variation-simulation .detail-inner>section dl dt,
.variation-simulation .detail-inner>section dl dd {
	background: #FFFFFF;
	padding: 8px 16px;
	float: left;
	box-sizing: border-box;
	height: 32px;
}
.variation-simulation .detail-inner>section dl dt {
	background: #4f8cdc;
	color: #FFFFFF;
	text-align: right;
	font-weight: bold;
	line-height: 120%;
	width: 48%;
}
.variation-simulation .detail-inner>section dl dd {
	background: #FFFFFF;
	padding-top: 6px;
}
.variation-simulation .detail-inner>section dl dd select {
	border-radius: 4px;
	width: 100%;
}



/*==================================================

revolving
==================================================*/

.shopping {
	color: rgba( 16, 31, 168, 1 );
	position: relative;
	font-size: 125%;
	text-align: left;
	font-weight: bold;
	zoom:1;
}
.shopping:after {
	clear: both;
	display: block;
	content: '';
	height: 0;
}
.shopping .history li {
	margin-top: 8px;
}
.shopping .history li:first-child {
	margin-top: 0;
}
.shopping .revolving-pay {
	text-align: right;
	position: absolute;
		right: 40px;
		top: 50%;
	transform: translateY( -50% );
		-webkit-transform: translateY( -50% );
		-ms-transform: translateY( -50% );
		-o-transform: translateY( -50% );
}
.shopping .revolving-pay strong {
	font-weight: bold;
	vertical-align: middle;
}
.shopping .revolving-pay span {
	font-weight: normal;
	color: #4B4B4B;
	vertical-align: middle;
}
.shopping .revolving-pay select {
	padding-left: 24px;
	text-align: right;
}
.shopping-total {
	text-align: right;
	position: absolute;
		left: 50%;
		top: 50%;
	transform: translateY( -50% );
		-webkit-transform: translateY( -50% );
		-ms-transform: translateY( -50% );
		-o-transform: translateY( -50% );
}


/*	graph	*/

.revolving-simulation .overview {
	background: #F6F6F1;
	margin-top: 32px;
	border-radius: 4px;
	padding: 24px 40px;
	box-sizing: border-box;
}
.revolving-simulation .overview:after {
	clear: both;
	display: block;
	content: '';
	height: 0;
}
.revolving-simulation #payChart,
.revolving-simulation #balanceChart {
	width: 792px !important;
	height: 120px !important;
	box-sizing: border-box;
}
.revolving-simulation .pay,
.revolving-simulation .pay h1 {
	height: 160px !important;
}
.revolving-simulation .pay h1 span {
	height: 60%;
}
.revolving-simulation #payChart {
	height: 112px !important;
}
.revolving-simulation .balance,
.revolving-simulation .balance h1 {
	height: 208px !important;
}
.revolving-simulation #balanceChart {
	height: 160px !important;
}
.revolving-simulation .balance h1 {
	background: #D64809 !important;
}


/*	detail	*/

.revolving-simulation #detail {
	margin-top: 32px;
}
.revolving-simulation .detail-inner .total .result {
	display: block;
	position: relative;
		left: auto;
		border: auto;
	margin-top: 32px;
	font-size: 200%;	
}


/*	totalView	*/

.detail-inner {
	position: absolute !important;
		right: 0 !important;
		bottom: 0 !important;
	height: auto !important;
	margin: 0 !important;
}
#totalView .others {
	margin-bottom: 16px;
}
#totalView .others li {
	color: rgba( 0, 0, 0, 1 );
	font-size: 14px;
	margin-bottom: 4px;
}
#totalView .others li h2 {
	border-radius: 4px;
	background: #4f8cdc;
	color: #FFFFFF;
	text-align: center;
	padding: 6px;
}
#totalView .others p {
	margin-top: 8px;
	text-align: right;
}
#totalView .others p span {
	display: block;
}
#totalView .others .pay-price strong {
	margin-right: 8px;
	font-weight: bold;
}
#totalView .total > span.result > strong {
	font-weight: bold;
}