@charset "utf-8";

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

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

/* Typography
----------------------------------------------*/
.section-heading {
	color: #19b6a9;
}
.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: #77caf5; }
#price-1st-year > .section-heading     { color: #f05096; }
#price-2nd-year > .section-heading     { color: #f06e00; }
#price-3rd-year > .section-heading     { color: #faaf05; }
#price-4th-year > .section-heading     { color: #14aa32; }
#price-5th-year > .section-heading     { color: #a53c96; }
#price-6th-year > .section-heading     { color: #0082c8; }

.content-heading.hatten:after { content: url(../images/icon_price-hatten.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); }

.content-heading.hatten: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 {
	display: block;
	width: 40px;
	height: 40px;
	margin: 0 auto;
}
@media screen and (min-width: 768px) {
	.content-heading.hatten: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 { 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 #D1F0EE;
	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: #09B2A4;
}
@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: #D1F0EE;
	border-right: 1px dashed #09B2A4;
	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: #D1F0EE;
	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;
	}
}


/* form
----------------------------------------------*/
option:disabled {
	background: #eee;
	color: #999;
}
.apply-price-section .form-area {
	background: #09b2a4;
	margin-bottom: 2em;
	padding: 30px 0 18px;
	color: #fff;
}
@media screen and (max-width: 767px) {
	.apply-price-section .form-area {
		background: #09b2a4;
		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: #19b6a9;
}

.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-new-1st-year .price-box { background: #d2eefc; }
#price-1st-year .price-box     { background: #fcdcea; }
#price-2nd-year .price-box     { background: #fce1cb; }
#price-3rd-year .price-box     { background: #fef0d0; }
#price-4th-year .price-box     { background: #d8f1dd; }
#price-5th-year .price-box     { background: #f1e0ee; }
#price-6th-year .price-box     { background: #d5eaf6; }

#price-new-1st-year .price-box:nth-child(2) { background: #fff; border-color: #d2eefc; }
#price-1st-year .price-box:nth-child(2)     { background: #fff; border-color: #fcdcea; }
#price-2nd-year .price-box:nth-child(2)     { background: #fff; border-color: #fce1cb; }
#price-3rd-year .price-box:nth-child(2)     { background: #fff; border-color: #fef0d0; }
#price-4th-year .price-box:nth-child(2)     { background: #fff; border-color: #d8f1dd; }
#price-5th-year .price-box:nth-child(2)     { background: #fff; border-color: #f1e0ee; }
#price-6th-year .price-box:nth-child(2)     { background: #fff; border-color: #d5eaf6; }

#price-new-1st-year .price-box dt { color: #77caf5; }
#price-1st-year .price-box dt     { color: #f05096; }
#price-2nd-year .price-box dt     { color: #f06e00; }
#price-3rd-year .price-box dt     { color: #faaf05; }
#price-4th-year .price-box dt     { color: #14aa32; }
#price-5th-year .price-box dt     { color: #a53c96; }
#price-6th-year .price-box dt     { color: #0082c8; }



.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 #09b2a4;
		background-color: #f1f8f8;
	}
	.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;
}
.case figure > img.img-png {
	max-width: 100%;
}
select.form-control,option {
	-webkit-transition: 0.8s;
}
@media screen and (max-width: 767px) {
	select.form-control,option {
		font-size: 16px !important;
	}
}


/*-------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;
}
.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 #09b2a4;
	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: #19b6a9 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 #09b2a4;
	-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: #09b2a4;
}
.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 #09b2a4;
	-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: #09b2a4;
	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 {
	margin: -60px auto 1em;
	padding: 10px;
	background-color: #e9f8f7;
}
@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: #09b2a4;
}
.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;
}
.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,
.simulation-area .sum-price .option2 > span,
.btn-area .sum-price dd .price_data {
	font-weight: bold;
	font-size: 18px;
	color: #f06e00;
}
.simulation-area .cmt {
	margin-left: 2px;
	font-size: 10px;
	font-weight: normal;
	vertical-align: text-top;
}
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;
	}
}

/* 6年生蘭の注意書き「次年度の4月分以降は、次の学年の…で算出しています。」は非表示 */
#annotateS-6 > li:first-child,
#annotateY-6 > li:first-child,
#annotateS-progress-6 > li:first-child,
#annotateY-progress-6 > li:first-child {
	display: none;
}