@charset "utf-8";
/*------------------------------------------------------------------------------
Css name: comtent.css
Css info: 各ページスタイル
------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------
index
--------------------------------------------------------------------------*/
/*-- 全ての子どもに知ってほしい  ----------------------------------*/
.step_box{
	width: 900px;
	max-width: 90%;
	margin: 80px auto;
}
.step_title{
	margin-bottom: 1em;
	font-size: 2.8rem;
	color: #ee0083;
	font-weight: 700;
}
.step_box p + p{
	margin-top: 1em;
}

.step_fig{
	width: 600px;
	max-width: 100%;
	margin: 0 auto;
}
@media only screen and (max-width: 580px) {
	.step_title{
		font-size: 2.4rem;
	}
}

/*-- 価格  ----------------------------------*/
.price_box{
	width: 100%;
	margin: 80px auto;
}
.price_price_wrap{
	padding: 32px 0;
	text-align: center;
	color: #00afec;
	background: #fff9b1;
}
.price_txt{
	font-size: 2.8rem;
}
.price_txt small{
	font-size: .8em;
}
.price_price{
	font-weight: 700;
	font-size: 3.6rem;
}
.price_price span{
	font-size: .7em;
}
.price_price small{
	font-size: .6em;
}
@media only screen and (max-width: 580px) {
	.price_txt{
		font-size: 2.4rem;
	}
	.price_price{
		font-size: 3.2rem;
	}
}

.price_box_inner{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;

	width: 900px;
	max-width: 90%;
	margin: 40px auto 0;
}

.price_box_item{
	width: 47%;
}
.price_title{
	padding-bottom: 6px;
	margin-bottom: 1em;
	font-size: 2.2rem;
	font-weight: 700;
	border-bottom: 2px solid #009944;
}
.price_sub_title{
	margin: 1em 0 0;
	color: #eb6100;
	font-size: 1.8rem;
}
.std_list{
	margin-left: 1.5em;
}
.std_list li{
	line-height: 1.6;
	list-style: disc outside;
}
.std_list li + li{
	margin-top: 6px;
}
.std_list li::marker{
	color: #009944;
}

.schedule_list span{
	color: #00afec;
	font-weight: 700;
	margin-right: 1em;
}

@media only screen and (max-width: 580px) {
	.price_box_inner{
		display: block;
	}

	.price_box_item{
		width: 100%;
	}
	.price_box_item + .price_box_item{
		margin-top: 40px;
	}
	.price_title{
		padding-bottom: 6px;
		margin-bottom: 1em;
		font-size: 2.2rem;
		font-weight: 700;
		border-bottom: 2px solid #009944;
	}
	.price_sub_title{
		margin: 1em 0 0;
		color: #eb6100;
		font-size: 1.8rem;
	}
	.std_list{
		margin-left: 1.5em;
	}
	.std_list li{
		list-style: disc outside;
	}
	.std_list li::marker{
		color: #009944;
	}

	.schedule_list span{
		color: #00afec;
		font-weight: 700;
		margin-right: 1em;
	}
}

/*-- お申し込み  ----------------------------------*/
.contact_box{
	width: 900px;
	max-width: 90%;
	margin: 80px auto 0;
}
.contact_title{
	margin-bottom: 1em;
	font-size: 2.8rem;
	color: #ee0083;
	font-weight: 700;
	text-align: center;
}
.contact_title span{
	display: inline-block;
}
.index_reserve_web{
	margin-bottom: 32px;
}
.index_reserve_web a{
	display: block;
	width: 500px;
	max-width: 80%;
	margin: 32px auto 0;
	padding: 20px 0;
	text-align: center;
	color: #fff;
	background: #009944;
	border-radius: 4em;
}
@media (hover: hover) and (pointer: fine){
	.index_reserve_web a:hover{
		background: #00afec;
	}
}


.contact_tel{
	text-align: center;
}
.contact_tel a{
	font-weight: 700;
	font-size: 3.2rem;
}
.contact_tel_dtl{
	width: -moz-fit-content;
	width: fit-content;
	margin: .5em auto 0;
	padding: 1.3em;
	text-align: center;
	border-top: 1px solid #009944;
	border-bottom: 1px solid #009944;
}
.contact_tel_dtl p{
	line-height: 1.6;
}
.contact_tel_dtl p + p{
	margin-top: 4px;
}
.contact_tel_dtl .att{
	font-size: .8em;
}
.contact_tel_dtl small{
	display: inline-block;
}
@media only screen and (max-width: 580px) {
	.contact_title{
		font-size: 2.2rem;
	}
}

/*------------------------------------------------------------------------
はじめての方へ / brand
--------------------------------------------------------------------------*/
/*-- 理念  ----------------------------------*/
.brand_message_area{
	margin: -80px 0 100px;
	padding: 80px 0;
	background: #ecf4ed;
}
.brand_message_inner{
	width: 800px;
	max-width: 90%;
	margin: 0 auto;
}


.brand_message_title_sub{
	margin-bottom: 1em;
	font-size: 1.4rem;
	color: #ee0083;
}

.brand_message_title{
	margin-bottom: 1.5em;
	font-size: 2.8rem;
	color: #ee0083;
	font-weight: 700;
}

.brand_message_inner p + p{
	margin-top: 1em;
}
@media only screen and (max-width: 580px) {
	.brand_message_area{
	margin: -60px 0 100px;
}
	.brand_message_title{
		font-size: 2.4rem;
	}
}
/*-- ロゴの由来  ----------------------------------*/
.brand_logo_inner{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}

.brand_logo_txt{
	width: 50%;
}
.brand_logo_img{
	width: 45%;
}
@media only screen and (max-width: 580px) {
	.brand_logo_txt{
		width: 100%;
	}
	.brand_logo_img{
		width: 100%;
		margin-top: 2em;
	}
}

/*------------------------------------------------------------------------
学習の流れ / flow
--------------------------------------------------------------------------*/
.flow_step_item{
	position: relative;
	padding: 30px;
	background: #ecf4ed;
	border-radius: 20px;
	overflow: hidden;
}
.flow_step_item + .flow_step_item{
	margin-top: 32px;
}

.flow_step_title_num{
	position: absolute;
	top: -12px;
	left: -6px;

	font-size: 6.8rem;
	font-weight: 900;
	line-height: 1;
	color: #d0e4d3;
	z-index: 1;
}
.flow_step_title{
	position: relative;
	margin-bottom: 1em;
	font-size: 2.2rem;
	color: #009944;
	font-weight: 700;
	text-shadow: 2px 2px 2px rgba(255,255,255,.8);
	z-index: 2;
}

.flow_step_item .list_std{
	margin-top: 0;
	margin-bottom: 0;
}

@media only screen and (max-width: 580px) {
	.flow_step_item{
		padding: 30px 26px;
	}
	.flow_step_item + .flow_step_item{
		margin-top: 24px;
	}

	.flow_step_title{
		font-size: 2.2rem;
	}
}

.flow_schedule_list{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.flow_schedule_item{
	width: 47%;
	margin-bottom: 32px;
}
.flow_schedule_title{
	margin-bottom: .5em;
	padding-bottom: .5em;
	text-align: center;
	font-size: 1.8rem;
	color: #00afec;
	font-weight: 700;
	border-bottom: 1px solid #00afec;
}
.flow_schedule_item p{
	text-align: center;
}
@media only screen and (max-width: 580px) {
	.flow_schedule_list{
		display: block;
	}
	.flow_schedule_item{
		width: 100%;
		margin-bottom: 32px;
	}
	.flow_schedule_title{
		margin-bottom: .5em;
		padding: 0 0 .5em 8px;
		text-align: left;
		font-size: 1.8rem;
	}
	.flow_schedule_item p{
		padding-left: 8px;
		text-align: left;
	}
}

/*------------------------------------------------------------------------
学習の流れ / flow
--------------------------------------------------------------------------*/
.mbs_fee_sub_txt{
	text-align: center;
	font-size: 1.8rem;
	font-weight: 700;
	color: #009944;
}
.mbs_fee_price{
	margin-top: 8px;
	padding: .5em 0;
	font-size: 3.2rem;
	text-align: center;
	font-weight: 700;
	color: #ee0083;
	border: 1px solid #ee0083;
	border-radius: 20px;
}


.mbs_step_item{
	position: relative;
	padding: 30px;
	background: #ecf7fd;
	border-radius: 20px;
	overflow: hidden;
}
.mbs_step_item + .mbs_step_item{
	margin-top: 32px;
}

.mbs_step_title_num{
	position: absolute;
	top: -12px;
	left: -6px;

	font-size: 6.8rem;
	font-weight: 900;
	line-height: 1;
	color: #cfe5ec;
	z-index: 1;
}
.mbs_step_title{
	position: relative;
	margin-bottom: 1em;
	font-size: 2.2rem;
	color: #00afec;
	font-weight: 700;
	text-shadow: 2px 2px 2px rgba(255,255,255,.8);
	z-index: 2;
}

.mbs_step_item .list_std{
	margin-top: 0;
	margin-bottom: 0;
}

@media only screen and (max-width: 580px) {
	.mbs_step_item{
		padding: 30px 26px;
	}
	.mbs_step_item + .mbs_step_item{
		margin-top: 24px;
	}

	.mbs_step_title{
		font-size: 2.2rem;
	}
}

/*------------------------------------------------------------------------
よくある質問 / faq
--------------------------------------------------------------------------*/
/* カテゴリー選択ボタン */
.faq_content_box input[type="radio"]{
	position: absolute;
	left: -9999px;
}
.faq_content_box{
	overflow-x: hidden;

	padding-bottom: 10px;
}
.filters{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;

	margin-bottom: 100px;
}
.filters li{
	width: calc(94% / 3);
	margin: 0 1% 10px;
}
.filters label{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;

	width: 100%;
	height: 100%;
	padding: 20px .5em;
	color: #007440;
	text-align: center;
	line-height: 1.4;
	background: #d0e4d3;
	border-radius: 4em;
	transition: .3s;
}
.filters label span{
	display: inline-block;
}
@media (hover: hover) and (pointer: fine){
	.filters label:hover{
		background: #009944;
		color: #fff;
	}
}
@media screen and (max-width: 580px) {
	.filters{
		display: flex;
		justify-content: center;
	}
	.filters li{
		width: 32%;
		margin: 0 1.5% 10px 0;
	}
	.filters li:nth-of-type(3n){
		margin-right: 0;
	}
	.filters label{
		padding: 15px .5em;
		font-size: 1.3rem;
	}
	.filters label span{
		display: inline-block;
	}
}
[value="All"]:checked ~ .filters [for="All"],
[value="cat-1"]:checked ~ .filters [for="cat-1"],
[value="cat-2"]:checked ~ .filters [for="cat-2"],
[value="cat-3"]:checked ~ .filters [for="cat-3"],
[value="cat-4"]:checked ~ .filters [for="cat-4"],
[value="cat-5"]:checked ~ .filters [for="cat-5"],
[value="cat-6"]:checked ~ .filters [for="cat-6"],
[value="cat-7"]:checked ~ .filters [for="cat-7"] {
  background: #009944;
  color: #fff;
}
/* 質問&回答 */
.cat_title{
	display: none;
	width: 900px;
	margin-left: auto;
	margin-right: auto;
}
@media screen and (max-width: 580px) {
	.cat_title span{
		display: block;
	}
}
[value="All"]:checked ~ h2.cat0_title,
[value="cat-1"]:checked ~ h2.cat1_title,
[value="cat-2"]:checked ~ h2.cat2_title,
[value="cat-3"]:checked ~ h2.cat3_title,
[value="cat-4"]:checked ~ h2.cat4_title,
[value="cat-5"]:checked ~ h2.cat5_title,
[value="cat-6"]:checked ~ h2.cat6_title,
[value="cat-7"]:checked ~ h2.cat7_title{
	display: block;
}

.target{
	padding: 30px;
	background: #ecf4ed;
	border-radius: 20px;
}
.target + .target{
	margin-top: 32px;
}
.faq_q_title{
	margin-bottom: 1.5em;
	color: #009944;
	font-size: 1.8rem;
	font-weight: 700;
}
.faq_a_txt{
}
.faq_a_txt p + p{
	margin-top: 1em;
}
.faq_a_txt .pt_num_list{
	margin: 1em 0;
}
.pt_num_list li{
	margin: 0 0 0 2.5em;
}
@media screen and (max-width: 580px) {
	.faq_q_title{
		padding: 22px 15px 17px 44px;
		font-size: 1.6rem;
		background: #f9e1e0 url(../img/faq/ico_q.png) 12px 20px no-repeat;
		background-size: 24px auto;
	}
	.faq_a_txt{
		padding:  20px;
	}
	.faq_a_txt p{
		line-height: 1.6;
	}
}
.checked_animation {
	animation: checked_animation 0.4s ease-in-out both;
}

@keyframes checked_animation {
	0% {
	transform: translate(0, 10px);
	opacity: 0;
	}
	100% {
	transform: translate(0, 0);
	opacity: 1;
	}
}

/*------------------------------------------------------------------------
体験予約 / reserve
--------------------------------------------------------------------------*/
.reserve_btn{
	display: block;
	width: 300px;
	max-width: 80%;
	margin: 32px auto 0;
	padding: 20px 0;
	text-align: center;
	color: #fff;
	background: #009944;
	border-radius: 4em;
}
@media (hover: hover) and (pointer: fine){
	.reserve_btn:hover{
		background: #00afec;
	}
}

.reserve_tel{
	font-size: 3.8rem;
	font-weight: 700;
	color: #ee0083;
	text-align: center;
}
.reserve_tel a{
	color: #ee0083;
}
.reserve_tel_open{
	text-align: center;
	font-size: 1.4rem;
}


/*------------------------------------------------------------------------
おしらせ / info
--------------------------------------------------------------------------*/
.news_post_date{
	margin: -28px 0 24px;
	padding: .5em 0;
	text-align: right;
	font-size: 1.4rem;
	border-top: 1px dotted #009944;
	border-bottom: 1px dotted #009944;
}