@CHARSET "UTF-8";

/* -------------------------------------- */
/* 達成度・学年ボタン (achv-box01, gakunen-btn) */
/* -------------------------------------- */
.achv-box01{
	width:100%;
	padding:2.0em 0 1.0em;
	margin:0;
}
.achv-box01 div{
	width:90%;
	margin:0 auto;
	text-align:center;
}
.achv-box01 div > p{
	font-weight:300;
	text-align:left;
}
.achv-linkbtn01, .achv-linkbtn02{
	font-size:1.2em;
	padding:0.2em 1.0em;
	border-radius:40px;
	display:inline-block;
	margin:1.0em 0.5em;
	box-shadow:0px 0px 2px 0px rgba(136, 136, 136, 1);
}
.achv-linkbtn01{
	color:#FFFFFF;
	background-color:#009944;
}
.achv-linkbtn02{
	color:#009944;
	background-color:#FFFFFF;
}
.gakunen-btn span{
	margin:-4.0em 0 1.0em 0;
	display:inline-block;
	color:#fff;
	border-radius:40px;
	padding:0.3em 2.5em 0.2em 2.5em;
	font-size:1.3em;
}
.gakunen-btn.el span{
	background-color:#FC8328;
}
.gakunen-btn.ju span{
	background-color:#2A9BE6;
}
.gakunen-btn.hi span{
	background-color:#009944;
}

/* -------------------------------------- */
/* キーポイントセクション (kpt01) */
/* -------------------------------------- */
.kpt01{
	margin-top:4.0em;
}
.kpt01 h3{
	text-align:center;
	color:#009944;
	font-size:1.2em;
	margin:0;
}
.kpt01 h3 span{
	font-size:1.1em;
}
.kpt01 h3 img{
	vertical-align:top;
	width:90%;
}
.kpt01 article{
	width:95%;
	background-color:#E3F5D9;
	border-radius:40px;
	padding:1.0em;
	margin:0 auto;
}
.kpt01 article > div{
	display:flex;
	justify-content:center;
	flex-wrap:wrap;
	align-items:center;
	width:90%;
	margin:0 auto 1.0em;
	background-color:#fff;
	border-radius:20px;
}
.kpt01 article > div > div:nth-child(1){
	width:100%;
	color:#009944;
	text-align:center;
	padding:1.0em 0;
}
.kpt01 article > div > div:nth-child(2){
	width:100%;
	padding:0 1.0em;
	position:relative;
	text-align:center;
}
.kpt01 article > div > div:nth-child(2) img{
	width:90%;
	position:initial;
	border:3px solid #fff;
	box-shadow:3px 3px 3px #707070;
}
.kpt01 article > div > div:nth-child(3){
	width:100%;
	padding:1.0em;
	font-size:0.8em;
	font-weight:300;
}

/* -------------------------------------- */
/* テキストセクション (sbt01) */
/* -------------------------------------- */
.smk01{
	width:95%;
	margin:2.0em auto;
	font-weight:300;
}

/* -------------------------------------- */
/* テーブルセクション (sbt01) */
/* -------------------------------------- */
.sbt01{
	margin-top:4.0em;
	padding:1.5em 0;
}
.sbt01 table{
	width:95%;
	margin:0 auto;
	border-collapse:separate;
	border-spacing:0 5px;
	background-color:#FFFFEE;
}
.sbt01 th{
	text-align:center;
	vertical-align:middle;
	padding:1.0em;
	background-color:#4FB878;
	display:block;
	color:#fff;
}
.sbt01 td{
	padding:1.0em;
	display:block;
	background-color:#fff;
}
.sbt01 p{
	padding-left:4.0em;
	text-indent:-4.0em;
	overflow-wrap:anywhere;
}

/* -------------------------------------- */
/* テーブルセクション (tbl01) */
/* -------------------------------------- */
.tbl01{
	width:95%;
	border-spacing:0;
	margin:0 auto 15px;
	font-size:0.8em;
}
.tbl01 th{
	border:1px solid #444;
	background-color:#4FB878;
	padding:0.5em 0.2em;
	vertical-align:middle;
	color:#fff;
}
.tbl01 td{
	border:1px solid #444;
	padding:0.5em 0.6em;
	background-color:#fff;
	vertical-align:middle;
}
.tbl01 th.tx_c,.tbl01 td.tx_c{
	text-align:center;
}
.tbl01 th.fw-n,.tbl01 td.fw-n{
	font-weight:normal;
}
.tbl01 th.fw-b,.tbl01 td.fw-b{
	font-weight:bold;
}
.tbl01 span{
	color:#4FB878;
}
.tbl01 .nowrap{
	text-wrap:nowrap;
}
.sp{display:block;}

/* -------------------------------------- */
/* ページタイトル (h3ttl01-box) */
/* -------------------------------------- */
.h3ttl01-box{
	text-align:center;
	margin:3.0em 0;
}
.h3ttl01{
	text-align:center;
	display:inline-block;
	font-size:1.5em;
	background-color:#374034;
	color:#FFFFFF;
	border-radius:45px;
	padding:0.2em 2.0em;
}

/* -------------------------------------- */
/* コーナータイトル (smkttl01) */
/* -------------------------------------- */
.smkttl01{
	font-weight:bold;
	font-size:1.3em;
	margin:3.0em 0 1.0em;
	text-align:center;
	background-color:#419361;
	padding:0.5em;
	border-radius:20px 20px 0 0;
}
.smkttl01 span{
	color:#fff;
}
.smkttl01-2{
	font-weight:bold;
	font-size:1.3em;
	margin:3.0em 0 1.0em;
	text-align:center;
	background-color:#ff7545;
	padding:0.5em;
	border-radius:20px 20px 0 0;
}
.smkttl01-2 span{
	color:#fff;
}

/* -------------------------------------- */
/* コーナータイトル (smk02ttl) */
/* -------------------------------------- */
.smk02ttl02{font-size:1.4em;text-align:center;color:#4FB878;margin:1.0em 0 0.3em 0;}
.smk02ttl03{font-size:1.3em;color:#4FB878;margin:1.0em 0 0.3em 0;}


/* -------------------------------------- */
/* 講座セクション (sbb01) */
/* -------------------------------------- */
/* 注意:sbb01は achv-box01の下に配置 */
.ebg01{
	background-color:#FFE1BE;
}
.ebg02{
	background-color:#FC8328;
}
.jbg01{
	background-color:#CCE7EC;
}
.jbg02{
	background-color:#2A9BE6;
}
.hbg01{
	background-color:#C2E8CB;
}
.hbg02{
	background-color:#019F5E;
}
.sbb01{
	margin-top:4.0em;
	padding:2.5em 0 1.5em;
}
.sbb01 img{
	border-radius:10px;
}
.sbb01 > article{
	width:95%;
	margin:0 auto;
	position:relative;
}
.sbb01 > article > span{
	position:absolute;
	left:0;
	top:-3.0em;
	color:#fff;
	border-radius:40px;
	padding:0.3em 1.0em;
	font-size:1.3em;
}
.sbb01 > article > div{
	display:flex;
	justify-content:center;
	flex-wrap:wrap;
	align-items:center;
	width:100%;
	margin:0 auto 2.0em;
	padding:1.0em;
	background-color:#fff;
	border-radius:20px;
}
.sbb01 > article > div > div:nth-child(1), .sbb01 > article > div > div:nth-child(2){
	padding:1.0em 0.5em;
	width:100%;
}
.sbb01 > article > div > div:nth-child(2) > table{
	width:100%;
	border-collapse:separate;
	border-spacing:5px;
}
.sbb01 > article > div > div:nth-child(2) > table th{
	color:#fff;
	width:20%;
	text-align:center;
	vertical-align:middle;
	padding:0.2em 0;
}
.sbb01 > article > div > div:nth-child(2) > table td{
	vertical-align:middle;
	font-weight:300;
	width:80%;
	font-size:0.8em;
}
.linkbtn01{
	display:block;
	margin:10px auto 0;
	text-align:center;
	color:#fff;
	border-radius:20px;
	width:90%;
	padding:0.3em;
}
#elem, #junior, #high{
	display:block;
	position:relative;
	top:-120px;
	visibility:hidden;
}
.end0805b{
	position:absolute;
	top:0;
	left:2.5%;
	width:95%;
	height:100%;
	background-color:white;
	opacity:0.6;
	z-index:1;
	border-radius:20px;
}
.end0805s{
	position:absolute;
	z-index:2;
	color:#fff;
	padding:1.0em 3.0em;
	border-radius:20px;
	font-size:1.3em;
	text-align:center;
}

/* -------------------------------------- */
/* お問い合わせボタン (contact_box) */
/* -------------------------------------- */
.contact_btnbox{
	text-align:center;
}
.contact_box{
	text-align:center;
	display:inline-block;
	margin:1.0em;
	vertical-align:top;
}
.contact_box p{
	color:#009944;
}
.contact_box a, .contact_box span{
	background-color:#87C15C;
	display:inline-block;
	color:#FFFFFF;
	border-radius:9999px;
	padding:0.8em 0.3em;
	min-width:280px;
}
.contact_box p.close{
	color:#999999;
}
.contact_box span{
	background-color:#999999;
}
.contact_txt{
	margin-bottom:10px;
	color:#009944;
}

/* -------------------------------------- */
/* モーダル関連 (modal_contact_box, modal-wrapper) */
/* -------------------------------------- */
.modal_contact_box{
	text-align:center;
	display:block;
	font-size:1.2em;
	margin:0 auto 30px;
}
.modal_contact_box a{
	background-color:#ea3f25;
	display:inline-block;
	color:#FFFFFF;
	border-radius:5px;
	margin-bottom:20px;
	width:90%;
	padding:0.8em 0;
}
.modal_contact_box span{
	background-color:#999999;
	display:inline-block;
	color:#FFFFFF;
	border-radius:5px;
	margin-bottom:20px;
	width:90%;
	padding:0.8em 0;
}
.modal_contact_box.tx_c{
	text-align:center;
}
.modal_btn{
	cursor:pointer;
}
span.attention{
	font-size:0.6em;
	background-color:initial;
	margin-bottom:0;
	padding-top:10px;
}
/* モーダルの設定 */
.modal-toggle{
	display:none;
}
.modal-wrapper{
	visibility:hidden;
	opacity:0;
	position:fixed;
	top:0;
	right:0;
	bottom:0;
	left:0;
	display:flex;
	align-items:center;
	justify-content:center;
	background:rgba(0, 0, 0, 0.85);
	transition:opacity 0.3s, visibility 0.3s;
	z-index:999;
	padding-top:80px;
}
.modal-toggle:checked ~ .modal-wrapper{
	visibility:visible;
	opacity:1;
}
.modal-content{
	background:#fff;
	padding:1.2em;
	border-radius:8px;
	width:95%;
	max-height:450px;
	overflow-y:scroll;
	margin:0 auto;
}
.close-button{
	position:absolute;
	top:100px;
	right:30px;
	text-decoration:none;
	cursor:pointer;
	color:#fff;
}
/* 教場別申込リンク */
.school-list_wrapper h3{
	font-size:1.2em;
}
.school-list_wrapper p{
	font-size:initial;
	padding-top:15px;
}
.school-list{
	padding:0;
	margin:30px 0 0;
	list-style:none;
	display:flex;
	flex-direction:column;
}
.school-item{
	width:100%;
}
.school-item a{
	position:relative;
	display:block;
	width:100%;
	padding:0.5em 0.2em;
	background-color:#4FB878;
	border-radius:8px;
	color:#fff;
	font-size:0.9em;
	text-decoration:none;
	text-align:center;
	box-sizing:border-box;
}
/* アイコンのスタイル */
.school-item a::before{
	content:'';
	position:absolute;
	top:0;
	bottom:0;
	right:15px;
	width:30px;
	height:30px;
	margin:auto;
	border-radius:20px;
	background-color:#fff;
}
.school-item a::after{
	content:'';
	position:absolute;
	top:0;
	bottom:0;
	right:20px;
	width:0;
	height:0;
	margin:auto;
	border-top:9px solid transparent;
	border-right:0 solid transparent;
	border-left:15px solid #4FB878;
	border-bottom:9px solid transparent;
	box-sizing:border-box;
}

/* ====================================== */
/* PC (Media Queries) */
/* ====================================== */

/* 769px以上 */
@media only screen and (min-width:769px){
	/* テーブルセクション（sbt01） */
	.sbt01 table{width:1000px;}
	.sbt01 th{
		display:table-cell;
	}
	.sbt01 td{
		display:table-cell;
	}
	/* ページタイトル */
	.h3ttl01{
		font-size:2.0em;
	}
	/* 講座セクション */
	.sbb01 > article > div{
		width:95%;
	}
	.sbb01 > article > div > div:nth-child(1){
		width:40%;
	}
	.sbb01 > article > div > div:nth-child(2){
		width:60%;
	}
	.sbb01 > article > div > div:nth-child(2) > table th{
		width:15%;
	}
	.sbb01 > article > div > div:nth-child(2) > table td{
		font-size:1.0em;
	}
	/* お問い合わせボタン */
	.contact_box{
		margin:0;
	}
}

/* 900px以上 */
@media only screen and (min-width:900px){
	/* コーナータイトルセクション（smkttl01） */
	.smkttl01{
		text-align:left;
		background-color:initial;
		border-bottom:10px solid #419361;
		padding:initial;
	}
	.smkttl01 span{
		padding:10px 40px 0;
		background-color:#419361;
		border-radius:20px 20px 0 0;
		min-width:200px;
		display:inline-block;
		text-align:center;
	}
	/* コーナータイトルセクション（smk02ttl） */
	.smk02ttl02, .smk02ttl03{
		margin:1.0em 0 0.3em 0;
	}
	/* テーブルセクション（tbl01） */
	.tbl01{
		width:100%;
		border-spacing:0;
		font-size:initial;
		margin:0 auto 20px;
	}
	.sp{
		display:none;
	}
	/* 達成度・学年ボタン */
	.achv-box01{
		padding:2.0em 0 1.0em;
		margin:0;
	}
	.achv-box01 div{
		width:700px;
	}
	/* キーポイントセクション */
	.kpt01 h3{
		font-size:1.3em;
	}
	.kpt01 h3 img{
		width:722px;
	}
	.kpt01 article{
		width:80%;
		padding:0.5em 2.5em 0.5em;
	}
	.kpt01 article > div{
		margin:5.0em auto;
		width:85%;
	}
	.kpt01 article > div > div:nth-child(1){
		width:25%;
	}
	.kpt01 article > div > div:nth-child(2){
		width:25%;
		padding:2.0em;
	}
	.kpt01 article > div > div:nth-child(2) img{
		width:85%;
		position:absolute;
		top:50%;
		left:50%;
		transform:translate(-50%, -50%);
	}
	.kpt01 article > div > div:nth-child(3){
		width:50%;
		font-size:0.8em;
	}
	/* テキストセクション */
	.smk01{width:720px;}
}

/* 1000px以上 */
@media only screen and (min-width:1000px){
	/* 講座セクション */
	.sbb01 > article{
		width:1000px;
	}
}

/* 1280px以上 */
@media only screen and (min-width:1280px){
	/* モーダル関連 */
	.modal-content{
		width:1000px;
		padding:2.0em;
	}
	.modal_contact_box{
		font-size:1.5em;
	}
	.modal_contact_box a, .modal_contact_box span{
		padding:0.6em 4.0em;
		margin-bottom:30px;
		width:initial;
	}
	.close-button{
		position:absolute;
		top:130px;
		right:70px;
	}
	/* 教場別申込リンク */
	.school-list{
		flex-direction:row;
		justify-content:left;
		flex-wrap:wrap;
		gap:20px;
	}
	.school-item{
		flex:0 0 calc(33.333% - 13.333px); /* 3列表示になるように調整 */
	}
	.school-item a{
		text-align:left;
		padding-right:15px;
		font-size:0.8em;
		margin:0;
	}
}