@CHARSET "UTF-8";

/* =========================================
   全体・基本レイアウト
   ========================================= */
.class-tpimg-box img{
	width:100%;
}
.top-classlist{
	margin:3.0em 0;
}

/* =========================================
   学年ラベル（elem, junior, high）
   ========================================= */
.col_class-gakunen{
	height:2.0em;
	width:100%;
	border-bottom:none;
	text-align:center;
	font-size:1.0em;
	margin-bottom:6px;
}
.class-gakunen{
	padding:0.2em 0.8em;
	color:#fff;
	border-radius:15px;
	font-weight:bold;
}

/* 学年ごとの背景色 */
.class-gakunen.elem{background-color:#FC8328;}
.class-gakunen.junior{background-color:#2A9BE6;}
.class-gakunen.high{background-color:#009944;}

/* 無効状態 */
.class-gakunen.elem.disabled,
.class-gakunen.junior.disabled,
.class-gakunen.high.disabled{
	opacity:0.2;
}

/* =========================================
   クラスエリア（index_class_area）
   ========================================= */
.index_class_area{
	width:70%;
	margin:5.0em auto 0;
}

/* 背景パターン */
.index_class_area.elem{
	background:repeating-linear-gradient(-45deg, rgba(252, 131, 40, 0.24), rgba(252, 131, 40, 0.24) 6px, #ffffee 6px, #ffffee 10px);
}
.index_class_area.junior{
	background:repeating-linear-gradient(-45deg, #cce7ec, #cce7ec 6px, #ffffee 6px, #ffffee 10px);
}
.index_class_area.high{
	background:repeating-linear-gradient(-45deg, #c1e8cb, #c1e8cb 6px, #ffffee 6px, #ffffee 10px);
}
.index_class_area.kousotsu{
	background:repeating-linear-gradient(-45deg, #c6cedd, #c6cedd 6px, #ffffee 6px, #ffffee 10px);
}

/* フレックスボックス設定 */
.index_class_area > .flex_box{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	align-items:center;
	width:calc(100% + 20%);
	margin:0 -10% 0 -10%;
	transform:translate(0, -10vw);
}

.index_class_area > .flex_box > .col_ttl{
	width:55%;
}
.index_class_area > .flex_box > .col_ttl img{
	width:100%;
}

.index_class_area > .flex_box > .col_image{
	width:45%;
	padding:0 0 0 1.0em;
}
.index_class_area > .flex_box > .col_image img{
	width:100%;
	border:5px solid #fff;
}

.index_class_area > .flex_box > .col_list{
	width:100%;
	margin:1.5em 0 0;
}
.index_class_area > .flex_box > .col_list img{
	width:100%;
	margin:0 0 0.4em 0;
}

.index_class_area > .flex_box > .col_list2{
	width:100%;
	margin:1.5em 0 0;
}

/* =========================================
   クラスボタン（class-btn）
   ========================================= */
.class-btn{
	border:3px solid #FC8328;
	color:#FC8328;
	display:block;
	width:100%;
	text-align:left;
	margin:0 auto 0.5em;
	border-radius:15px;
	background-color:#FFF;
	padding:1.0em;
	font-size:0.8em;
	font-weight:300;
	position:relative;
}

/* ボタン色分け */
.class-btn.elem{border:3px solid #FC8328;color:#FC8328;}
.class-btn.junior{border:3px solid #2A9BE6;color:#2A9BE6;}
.class-btn.high{border:3px solid #009944;color:#009944;}
.class-btn.kousotsu{border:3px solid #1134A9;color:#1134A9;}

/* ボタンタイトル */
.class-btn-ttl{
	color:#374034;
	border-bottom:5px solid #fedfc8;
	display:inline-block;
	position:relative;
	top:-4px;
	left:50%;
	transform:translateX(-50%);
	font-size:1.5em;
	font-weight:600;
	text-underline-offset:-15px;
	padding:0 0.3em;
	line-height:1;
}

.class-btn-ttl.elem{border-bottom:5px solid #fedfc8;}
.class-btn-ttl.junior{border-bottom:5px solid #cce7ec;}
.class-btn-ttl.high{border-bottom:5px solid #c1e8cb;}
.class-btn-ttl.kousotsu{border-bottom:5px solid #c2cbe9;}

/* 三角形アイコン */
.class-triangle{
	display:block;
	height:0;
	width:0;
	position:absolute;
	bottom:8px;
	right:8px;
	border-left:15px solid transparent;
}

.class-triangle.elem{border-bottom:15px solid #FC8328;}
.class-triangle.junior{border-bottom:15px solid #2A9BE6;}
.class-triangle.high{border-bottom:15px solid #009944;}
.class-triangle.kousotsu{border-bottom:15px solid #1134A9;}

/* =========================================
   その他コンテンツ（医系・合格実績など）
   ========================================= */
.ikei{
	width:80%;
	margin:1.5em auto 0;
}
.list-gokaku{
	width:90%;
	margin:0 auto;
	display:flex;
	flex-wrap:wrap;
	align-items:stretch;
	justify-content:space-between;
}

.gokaku-box{
	width:48%;
	background:url(/cmn/img/success/gokaku_box_header.jpg) no-repeat top left, url(/cmn/img/success/gokaku_box_footer.jpg) repeat-x bottom left;
	background-color:#fff;
	border:5px solid #EEEEEF;
	margin:0 0 1.0em 0;
}
.gokaku-box ul{
	margin:0px 0px 4px;
	padding-top:60px;
	padding-left:10px;
	height:6.5em;
	overflow:hidden;
}
.gokaku-box ul li{
	font-size:clamp(0.5em, 0.9vw, 0.6em);
	color:#D83282;
	list-style-type:none;
	text-indent:-1em;
	padding-left:1em;
}
.gokaku-box h2{
	font-size:clamp(0.5em, 1vw, 0.6em);
	color:#666;
	background-image:none;
	margin-bottom:3px;
	padding-left:4px;
	border-left:4px solid #AB1A28;
	margin-left:10px;
	padding-top:0px;
	padding-bottom:0px;
}
.gb-comment{
	margin:0 0 10px 0;
	background-color:#D83282;
	padding:3px;
}
.gb-comment p{
	font-size:clamp(0.8em, 1vw, 0.9em);
	line-height:1.2;
	color:#FFF;
	margin:0px;
	padding:5px;
	border:1px solid #FFF;
	height:6.5em;
	overflow:hidden;
	font-weight:300;
}
.gb-btn{
	text-align:center;
}
.trip-btn{
	text-align:center;
	margin-top:3.0em;
}
.trip-btn a{
	color:#fff;
	padding:0.8em 4.0em;
	border-radius:40px;
}

/* =========================================
   タブ・エリア切り替え
   ========================================= */
.tab{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	border-bottom:4px solid #1134A9;
}
.tab li{
	width:30%;
	border:4px solid #1134A9;
	border-radius:15px 15px 0 0;
	margin:0 1%;
	background:#1134A9;
	color:#fff;
	text-align:center;
}
.tab li a{
	display:block;
	margin:0 2px;
	padding:10px 20px;
}

/* アクティブ時のタブ形状 */
.tab li.active{
	background:#FFFFEE;
	color:#1134A9;
	border-bottom:4px solid #FFFFEE;
	margin-bottom:-4px;
}

/* コンテンツエリア */
.area{
	display:none;
	opacity:0;
}
.area.is-active{
	display:block;
	animation-name:displayAnime;
	animation-duration:2s;
	animation-fill-mode:forwards;
}

@keyframes displayAnime{
	from{opacity:0;}
	to{opacity:1;}
}

.kousotubox02{
	width:95%;
	margin:0 auto;
	padding:2.0em 0;
}


/* =========================================
   PC用スタイル（min-width:900px 〜 1000px）
   ========================================= */
@media only screen and (min-width:900px){
	/* 学年ラベル */
	.col_class-gakunen{
		text-align:right;
		font-size:0.9em;
		display:block;
		margin-bottom:-20px;
	}

	/* クラスエリア */
	.index_class_area{
		width:750px;
	}
	
	/* 背景パターン（PC用） */
	.index_class_area.elem{background:repeating-linear-gradient(-45deg, rgba(252, 131, 40, 0.24), rgba(252, 131, 40, 0.24) 13px, #ffffee 13px, #ffffee 20px);}
	.index_class_area.junior{background:repeating-linear-gradient(-45deg, #cce7ec, #cce7ec 13px, #ffffee 13px, #ffffee 20px);}
	.index_class_area.high{background:repeating-linear-gradient(-45deg, #c1e8cb, #c1e8cb 13px, #ffffee 13px, #ffffee 20px);}
	.index_class_area.kousotsu{background:repeating-linear-gradient(-45deg, #c6cedd, #c6cedd 13px, #ffffee 13px, #ffffee 20px);}

	/* フレックスボックス（PC用） */
	.index_class_area > .flex_box{
		align-items:stretch;
		width:calc(100% + 6.0em);
		margin:0 -3.0em 0 -3.0em;
		transform:translate(0, -2.0em);
	}
	.index_class_area > .flex_box > .col_ttl{
		width:100%;
	}
	.index_class_area > .flex_box > .col_ttl img{
		width:35%;
	}
	.index_class_area > .flex_box > .col_image{
		width:30%;
		padding:1.0em 0 0 1.0em;
	}
	.index_class_area > .flex_box > .col_list{
		width:65%;
		margin:0;
	}
	.index_class_area > .flex_box > .col_list2{
		width:70%;
		margin:1.5em 0 0 296px;
	}

	/* クラスボタン（PC用） */
	.class-btn-ttl{
		position:initial;
		transform:none;
		font-size:1.4em;
		position:relative;
		top:-3px;
		left:0;
	}
	.class-btn{
		padding:1.1em 1.5em 0.8em;
		font-size:0.8em;
	}

	/* その他 */
	.ikei{
		width:65%;
	}
	.tab li{
		width:27%;
	}
	.kousotubox02{
		width:950px;
		padding:2.0em 4.0em;
	}
}

/* =========================================
   PC用スタイル（min-width:1000px）
   ========================================= */
@media only screen and (min-width:1000px){
	.list-gokaku{
		width:600px;
	}
	.gokaku-box{
		width:30%;
	}
}

/*各クラスごとの紹介ページの設定*/
.main_content img{width:100%;vertical-align:top;}
.main_content .target{background-color:#374034;border-radius:10px;padding:0.5em 1.0em;color:#FEFFCF;}
.main_info{padding:1.0em;}
.main_info p{padding:1.0em 0 0;}
.main_info.high{background-color:#47B985;}
.main_info.dvd{background-color:#94D4A7;}
.achievement{width:100%;margin:15px auto 0;background-color:#FFFFEE;border-radius:10px;color:#FF4242;padding:1.0em;}
.achievement_ttl{color:#FFFFEE;background-color:#FF4242;border-radius:15px;padding:0.4em 0.7em;}
.colw20{width:100%;text-align:center;}
.colw80{width:100%;margin-top:1.0em;}
.colw80 p:first-child{padding-top:0;}
/* PC */
@media only screen and (min-width:900px) {
	.main_info p{padding:1.0em 1.0em 0;}
	.achievement{width:85%;}
	.colw20{width:20%;}
	.colw80{width:80%;margin-top:0;}
	.colw80 p{padding:1.0em 0 0;}
	.colw80 p:first-child{padding:0;}
}

/*各クラスごとの紹介ページ版「3つのポイント」の設定*/
.col3-ttl01 p{font-size:1.4em;}
.col3-ttl01 p.tx_c{text-align:center;}
.col3-ttl01 p > span{color:#FFFFFF;padding:0.4em 1.0em;border-radius:5px;}
.col3-ttl01 p > span.elem{background-color:#FC8328;}
.col3-ttl01 p > span.high{background-color:#009944;}
.col3-box{width:100%;margin:0 auto;}
.col3-ttl01, .intro{padding:1.0em 0 0.5em;}
.intro span.elem{color:#FC8328;}
.intro span.high{color:#009944;}
.col3-box{display:flex;justify-content:center;flex-wrap:wrap;}
.col3-box > div{width:100%;padding:1.0em 0 0.5em;}
.col3-box > div > img,.col3-box > div > .bnrfree img{width:44%;float:left;margin-right:1.0em;}/*.col3-box > div > img{width:100%;vertical-align:top;}*/
.col3-box > div > p{font-weight:normal;}
.col3-box > div > p > span{margin:0 0 0.5em 0;display:block;text-align:center;}
.col3-box-ttl{font-weight:bold;padding:0;text-align:center;display:block;padding:0.5em 0;font-size:1.2em;margin:0 0 0.5em;}
.col3-box-ttl.elem{border-bottom:2px solid #FC8328;}
.col3-box-ttl.high{border-bottom:2px solid #009944;}
/* PC */
@media only screen and (min-width:900px) {
	.col3-box > div{width:33.3%;padding:1.0em 0.5em;}
	.col3-box > div > img,.col3-box > div > .bnrfree img{width:100%;vertical-align:top;float:none;margin:0;}
	.col3-box > div > p{padding:1.0em 0;font-weight:normal;}
}

/*各クラスごとの紹介ページ版「教場リンクボタン」の設定*/
.class_title01{padding:0.3em 1.0em;background-color:#374034;border-radius:12px;color:#FFFFEE;position:absolute;top:-0.8em;left:50%;transform:translateX(-50%);-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);}
.class_box02.class-intro{text-align:center;position:relative;}
.class-subject-box01{padding:2.0em 1.0em;text-align:left;}
.class-subject-box01 p, .class-subject-box01 table{margin-top:0.5em;}
.class_box03{width:100%;border:3px solid #374034;background-color:#fff;}
.col3to2{width:50%;padding:0.5em;position:relative;font-size:0.6em;}
.col3to2.high{color:#41bf8b;}
.col3to2 a{border-radius:5px;color:#FFFFEE;padding:0.5em 0;display:block;width:100%;font-size:1.4em;}
.col3to2 a.high{background-color:#41bf8b;}
.class-place-triangle{display:block;height:0;width:0;position:absolute;bottom:11px;right:11px;border-left:10px solid transparent;border-bottom:10px solid #FFFFEE;}
.flexbox01.class-place{padding:2.0em 1.0em 1.0em;}
.class-place_txt{text-align:right;padding-bottom:1.0em;padding-right:1.0em;font-size:0.9em;}
/* PC */
@media only screen and (min-width:900px){
	.col3to2{width:33%;font-size:0.7em;}
	.class-place_txt{font-size:initial;}
}
/*各クラスごとの紹介ページ版「最寄り学校情報付きの教場リンクボタン」の設定*/
.place_area ul{display:flex;justify-content:start;flex-wrap:wrap;padding:2.0em 0 1.0em;align-items:flex-end;}
.place_area ul li{width:50%;padding:0.5em;}
.place_area ul li a{position:relative;border-radius:5px;color:#FFFFEE;padding:0.5em 0;display:block;width:100%;font-size:0.8em;text-align:center;line-height:1.0em;height:30px;}
.place_area ul li a.high{background-color:#259F6D;}
.place_area ul li a span{display:block;height:0;width:0;position:absolute;bottom:7px;right:7px;border-left:8px solid transparent;border-bottom:8px solid #FFFFEE;}
.place_area ul br.sp{display:block;}
.place_area ul li a p{text-align:center;position:relative;top:50%;transform:translateY(-50%);line-height:1.2em;}
.place_area p{text-align:center;}
.kayoi{padding-bottom:5px;display:block;text-align:center;font-size:0.7em;}
.kayoi span{color:initial;}
/* PC */
@media only screen and (min-width:900px){
	.place_area ul{padding:2.5em 0 1.0em 0.5em;}
	.place_area ul li{width:33%;}
	.place_area ul li a{font-size:1.1em;height:auto;height:40px;}
	.place_area ul li a span{border-left:10px solid transparent;border-bottom:10px solid #FFFFEE;}
	.place_area p{text-align:right;}
	.kayoi{font-size:0.9em;}
	.place_area ul br.sp{display:none;}
	.place_area ul li a p{position:initial;top:initial;transform:initial;}
}