@charset "utf-8";

/*=================================================
	file name: apply-style.css - chugaku
	create: 2016.Oct
	updated: 2017.7.27
===================================================*/

/* color setting
----------------------------------------------*/
.text-warning { color: #d00; }


/* Typography
----------------------------------------------*/
.section-heading {
	color: #276DB0;
}
.apply-price-section .content-heading {
	margin-bottom: 5px;
	color: #4d4d4d;
}

section[id^="price-"] > .section-heading {
	margin-bottom: -40px;
	font-size: 28px;
	font-weight: bold;
}
section[id^="price-"] > .section-heading + .text-warning {
	margin-top: 40px;
	margin-bottom: -40px;
	text-align: center;
}
@media screen and (max-width: 767px) {
	section[id^="price-"] > .section-heading {
		margin-bottom: 0;
		font-size: 21px;
	}
}
#price-new-1st-year > .section-heading { color: #86A4B3; }
#price-1st-year > .section-heading     { color: #728CBA; }
#price-2nd-year > .section-heading     { color: #DF7F3A; }
#price-3rd-year > .section-heading     { color: #6fb16b; }

.content-heading.tokushin:after { content: url(../images/icon_price-tokushin.svg); }
.content-heading.hyojun:after   { content: url(../images/icon_price-hyojun.svg); }

#simulation > .section-heading:before { content: url(../images/icon_simulation.svg); }
#premium > .section-heading:before    { content: url(../images/icon_premium.svg); }
#discount > .section-heading:before   { content: url(../images/icon_discount.svg); }
#support > .section-heading:before    { content: url(../images/icon_support.svg); }
#fees > .section-heading:before       { content: url(../images/icon_fees.svg); }
#payment > .section-heading:before    { content: url(../images/icon_payment.svg); }
#shipping > .section-heading:before   { content: url(../images/icon_shipping.svg); }
#security > .section-heading:before   { content: url(../images/icon_security.svg); }

.content-heading.tokushin:after,
.content-heading.hyojun:after,
#simulation > .section-heading:before,
#premium > .section-heading:before,
#discount > .section-heading:before,
#fees > .section-heading:before,
#payment > .section-heading:before,
#shipping > .section-heading:before,
#support > .section-heading:before,
#security > .section-heading:before {
	display: block;
	width: 40px;
	height: 40px;
	margin: 0 auto .2em;
}
@media screen and (min-width: 768px) {
	.content-heading.tokushin:after,
	.content-heading.hyojun:after,
	#simulation > .section-heading:before,
	#premium > .section-heading:before,
	#discount > .section-heading:before,
	#fees > .section-heading:before,
	#payment > .section-heading:before,
	#shipping > .section-heading:before,
	#support > .section-heading:before,
	#security > .section-heading:before { width: 72px; height: 72px; }
}

@media screen and (max-width: 767px) {
	#fees > .section-heading { margin-bottom: -1em; }
}
@media screen and (min-width: 768px) {
	#fees > .section-heading { margin-bottom: -40px; }
}


/* layout
----------------------------------------------*/
.page-catch-area + .menu {
	margin-top: 10px;
}
.simulation .content:last-child > .content-inner {
	padding-bottom: 0;
}

.table-price {
	border: 6px solid #E1EBF4;
	border-collapse: separate;
	border-spacing: 0;
	-webkit-border-radius: 8px;
	   -moz-border-radius: 8px;
	        border-radius: 8px;
	width: 100%;
	max-width: 735px;
	margin: 0 auto 1em;
	overflow: hidden;
}
.table-price thead th {
	color: #276DB0;
}
@media screen and (min-width: 768px) {
	.table-price thead th {
		font-size: 1.29em;
	}
}
.table-price tbody th {
	font-weight: normal;
}
.table-price thead th,
.table-price tbody th,
.table-price tbody td {
	padding: .4em .2em;
	text-align: center;
}
@media screen and (min-width: 768px) {
	.table-price thead th,
	.table-price tbody th,
	.table-price tbody td {
		padding: .6em .3em;
	}
}
.table-price thead th + th,
.table-price tbody td {
	background-color: #E1EBF4;
	border-right: 1px dashed #276DB0;
	width: 27%;
	position: relative;
}
.table-price thead th + th:last-child,
.table-price tbody td:last-child {
	border-right: none;
}
.table-price tbody tr:last-child th,
.table-price tbody tr:last-child td {
	border-bottom: none;
}
.table-price thead th + th:after {
	content: "";
	display: block;
	width: 1px;
	height: 4px;
	background-color: #E1EBF4;
	position: absolute;
	top: 0;
	right: -1px;
}
.table-price thead th,
.table-price tbody th {
	line-height: 1.16;
}
@media screen and (max-width: 767px) {
	.table-price thead th,
	.table-price tbody th {
		font-size: .8em;
	}
}
.table-price tbody td {
	font-weight: bold;
}
@media screen and (min-width: 768px) {
	.table-price tbody td {
		font-size: 1.6em;
		line-height: 1;
	}
	.table-price tbody td > small {
		font-size: .6em;
	}
}

@media screen and (max-width: 767px) {
	img.pull-right {
		margin-left: 15px!important;
	}
}



/* form
----------------------------------------------*/
option:disabled {
	background: #eee;
	color: #999;
}
.apply-price-section .form-area {
	background: #276DB0;
	margin-bottom: 2em;
	padding: 30px 0 18px;
	color: #fff;
}
@media screen and (max-width: 767px) {
	.apply-price-section .form-area {
		/*background: #276DB0;*/
		margin-right: -15px;
		margin-left: -15px;
		padding: 15px;
		color: #fff;
	}
}
@media screen and (min-width: 768px) {
	.form-area form {
		max-width: 820px;
		margin-right: auto;
		margin-left: auto;
	}
	.form-area .form-group > .col-sm-3 {
		width: 170px;
		padding-top: 6px;
		text-align: right;
	}
}

/* Components
----------------------------------------------*/
.btn-primary > .glyphicon {
	background: #fff;
	border-radius: 50%;
	width: 14px;
	height: 14px;
	margin-left: 8px;
	padding-top: 3px;
	font-size: 10px;
	text-align: center;
	color: #276DB0;
}



.apply-price-notesList,
.price-annotation {
	width: 100%;
	max-width: 735px;
	margin: 0 auto;
	padding: 0;
}
.apply-price-notesList .note li {
	padding-left: 1.9em;
}
.apply-price-notesList .note li:before {
	display: none;
}
.apply-price-notesList .note li > .annotation-note {
	margin-right: .2em;
	margin-left: -1.6em;
}


/* 会費シミュレーション */
@media screen and (max-width: 767px) {
	.simulation .price-box.pay-every-month dd {
		margin-bottom: 28px;
	}
}
@media screen and (min-width: 768px) {
	.simulation .price-box.pay-every-month dd {
		margin-bottom: 28px;
	}
	#price-3rd-year .price-box.pay-every-month dd {
		margin-bottom: 0;
	}
}
#price-new-1st-year .price-box { background: #dee6ea; }
#price-1st-year .price-box     { background: #e2e8f1; }
#price-2nd-year .price-box     { background: #f7decc; }
#price-3rd-year .price-box     { background: #deeddd; }

#price-new-1st-year .price-box:nth-child(2) { background: #fff; border-color: #dee6ea; }
#price-1st-year .price-box:nth-child(2)     { background: #fff; border-color: #e2e8f1; }
#price-2nd-year .price-box:nth-child(2)     { background: #fff; border-color: #f7decc; }
#price-3rd-year .price-box:nth-child(2)     { background: #fff; border-color: #deeddd; }

#price-new-1st-year .price-box dt { color: #86A4B3; }
#price-1st-year .price-box dt     { color: #728CBA; }
#price-2nd-year .price-box dt     { color: #DF7F3A; }
#price-3rd-year .price-box dt     { color: #6fb16b; }



.btn-area-page {
	width: 100%;
	max-width: 550px;
	margin: 2em auto 0;
	text-align: center;
}
.btn-area-page p {
	margin-bottom: .5em;
	font-size: .9em;
	line-height: 1.3;
	color: #777;
}
.simulation .btn-area-page {
	margin-top: 0;
}

@media screen and (max-width: 767px) {
	.table-horizontal {
		border-bottom: none;
		max-width: 735px;
		margin-right: auto;
		margin-left: auto;
	}
	.table-horizontal > tbody > tr > th {
		border-bottom: 2px solid #276DB0;
		background-color: #F2F5F9;
	}
	.table-horizontal > thead {
		display: none;
	}
	.table-horizontal > tbody > tr > th,
	.table-horizontal > tbody > tr > td {
		display: block;
		border-top: none;
		border-right: none;
		border-left: none;
	}
}

/* タブレットサポート事例 */
.case {
	max-width: 735px;
	margin: 2em auto;
}
.case h4 {
	margin-bottom: .8em;
	font-size: 16px;
	font-weight: normal;
	line-height: 1.3;
	color: #808080;
}
.case figure > img {
	max-width: 600px;
}

/* .bnr-otoku */
.bnr-otoku {
	max-width: 800px;
	margin: 1em auto 0;
}
.bnr-otoku > div {
	background-color: #DDE9F2;
	padding: 15px;
}
.bnr-otoku .text-attention { color: #D80C24; }
@media screen and (max-width: 767px) {
	.bnr-otoku div[class*=col-sm-] img {
		width: 50%;
	}
}

/*-------simulation---------*/
.apply-price-section .form-area {
	background: none;
}
.apply-price-section .form-area:after {
	content: "";
	display: block;
	width: 11.7%;
	max-width: 70px;
	height: 85px;
	margin: auto;
	background: url('../images/icon_price-arrow.png') 50% 50% no-repeat;
	background-size: 100% auto;
}
.apply-price-section .form-group {
	margin-bottom: 2em;
}
@media screen and (max-width: 767px) {
	.apply-price-section option {
		font-size: 16px;
	}
}
.apply-price-section .simu-ti {
	margin-bottom: 0;
	font-weight: bold;
	font-size: 18px;
	color: #000;
}
.apply-price-section .form-control {
	height: 40px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	background-color: #fcfcfc;
	border: solid 2px #276DB0;
	box-shadow: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
.apply-price-section .select-cover {
	position: relative;
}
.apply-price-section .select-cover select {
	cursor: pointer;
}
.apply-price-section .select-cover:after {
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	top: 0;
	bottom: 0;
	right: 5%;
	margin: auto;
	border-style: solid;
	border-width: 12px 6.75px 0 6.75px;
	border-color: #276DB0 transparent transparent transparent;
}
.apply-price-section input[type=radio],
.apply-price-section  input[type=checkbox] {
	display: none;
}
.apply-price-section .radio-inline,
.apply-price-section .checkbox{
	width: 100%;
	margin: 0;
	padding: 0;
}
.apply-price-section .radio-inline label,
.apply-price-section .checkbox label {
	display: table;
	width: 100%;
	height: 70px;
	margin-bottom: 1em;
	padding: 3px 3px 3px 30px;
	vertical-align: middle;
	font-weight: normal;
	color: #000;
	background-color: #fcfcfc;
	border: solid 2px #276DB0;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	-webkit-transition: background-color 0.2s linear;
	transition: background-color 0.2s linear;
	cursor: pointer;
}
.apply-price-section .radio-inline input[type=radio]:checked + label,
.apply-price-section .checkbox input[type=checkbox]:checked + label {
	color: #fff;
	background-color: #276DB0;
}
.apply-price-section .radio-inline label span,
.apply-price-section .checkbox label span {
	display: table-cell;
	vertical-align: middle;
}
.apply-price-section .radio-inline label:before,
.apply-price-section .checkbox label:before {
	content: "";
	position: absolute;
	display: block;
	width: 20px;
	height: 20px;
	top: 50%;
	left: 7px;
	display: block;
	border: solid 2px #276DB0;
	-webkit-transition: border-color 0.2s linear;
	transition: border-color 0.2s linear;
}
.apply-price-section .radio-inline label:before{
	margin-top: -17px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
}
.apply-price-section .checkbox label:before{
	margin-top: -11px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}
.apply-price-section .radio-inline input[type=radio]:checked + label:before,
.apply-price-section .checkbox input[type=checkbox]:checked + label:before {
	background-color: #276DB0;
	border: solid 4px #fff;
}
.apply-price-section .form-class .radio-inline {
	float: left;
	width: 49.6%;
}
.apply-price-section .form-class .radio-inline:first-child {
	margin-right: 0.8%;
}
.apply-price-section .form-pay .radio-inline {
	float: left;
	width: 32.8%;
	margin-left: 0.8%;
}
.apply-price-section .form-pay .radio-inline:first-child {
	margin-left: 0;
}
.apply-price-section .form-option .checkbox {
	width: 100%;
}
.apply-price-section .option-link {
	display: table;
	height: 70px;
	vertical-align: middle;
}
.apply-price-section .option-link a {
	display: table-cell;
	vertical-align: middle;
}
.simulation-area {
	/*max-width: 820px;*/
	margin: -60px auto 1em;
	padding: 10px;
	background-color: #E1EBF4;
}
@media screen and (max-width: 767px) {
	.simulation-area {
		margin-top: -40px;
	}
}
.simulation-area .simulation-ti {
	margin-bottom: 0.5em;
	font-weight: bold;
	font-size: 18px;
	color: #276DB0;
}
.simulation-area .simu-ti,
.simulation-area .month-price {
	margin-bottom: 0.5em;
}
.simulation-area dl,
.btn-area .sum-price{
	display: table;
	width: 100%;
}
.simulation-area dl dt,
.btn-area .sum-price dt{
	display: table-cell;
	font-weight: normal;
}
.simulation-area dl dt span.monthA,
.simulation-area dl dt span.monthC {
	padding-left: .5em;
}
[id*="table-body-3"] .simulation-area dl dt span.monthA,
[id*="table-body-3"] .simulation-area dl dt span.monthC {
	padding-left: 0;
}
.simulation-area dl dd,
.btn-area .sum-price dd{
	display: table-cell;
}
.simulation-area .sum-price{
	margin: 1em 0 0;
	padding: 5px;
	background-color: #fff;
}
.btn-area .sum-price{
	margin: 0 auto 10px;
	padding: 5px;
	background-color: #fff;
}
.simulation-area .sum-price dt,
.btn-area .sum-price dt{
	font-weight: bold;
	font-size: 18px;
}
.simulation-area .sum-price dd,
.btn-area .sum-price dd{
	font-size: 15px;
}
.simulation-area .sum-price dd .price_data,
.btn-area .sum-price dd .price_data{
	font-weight: bold;
	font-size: 18px;
	color: #f06e00;
}
a.reselect-simu{
	display: inline-block;
	margin-bottom: 4em;
}
a.reselect-simu:after {
	content: "\e113";
	margin-left: .2em;
	font-family: 'Glyphicons Halflings';
	vertical-align: -1px;
}
.btn-area .sum-price{
	width: 94%;
	max-width: 735px;
}
@media screen and (min-width: 768px){
	.form-area .form-group > .col-sm-3{
		width: 25%;
	}
	.form-area .form-group > .col-sm-3:not(:first-child){
		text-align: left;
	}
}
@media screen and (max-width: 766px){
	.apply-price-section .form-area:after{
		height: 0;
		padding-top: 13.7%;
	}
	.apply-price-section .select-cover:after{
		right: 25px;
	}
	.sp-fixed-top .price-toggle{
		display: none !important;
	}
}

.heiyou li{
	margin-bottom: 10px
}