@charset "utf-8";
/*======================================
common CSS
========================================*/
:root{
	--main_color: #009eb9;
	--sub_color: #1da9c0;
	--sub02_color: #f9da9e;
	--base_color: #fffdef;
	--online_color: #178ed2;
	--online02_color: #e8f3f9;
	--school_color: #00b88b;
	--school02_color: #e9fffa;
	--apply_color: #f33f54;
	--red_color: #a72126;
	--blue_color: #2654bc;
	--yell_color: #feaf00;
	--orange_color: #f65d00;
	--tbl_color: #edece4;
	--tbl_border: #bbbbbb;
}

/*------------------------------
ヘッダー
------------------------------*/
#main_header{
	display: flex;
	font-size: clamp(1.2rem,1.33vw,1.6rem);
	width: 100%;
	background-color: #f2efee;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
}

/*****
グローバルナビ
*****/
#gnav_area{}
#hum_menu{
	display: block;
	aspect-ratio: 1 / 1;
	width: 4.5em;
	padding: 1.4em;
	background-color: var(--main_color);
	cursor: pointer;
}

#hum_menu .hum_inner{
	aspect-ratio: 1 / 1;
	display: block;
	width: 100%;
	position: relative;
}
#hum_menu .hum_inner::before,
#hum_menu .hum_inner::after{
	content: '';
	display: block;
	width: 100%;
	height: 2px;
	background-color: #fff;
	position: absolute;
	left: 0;
}
#hum_menu .hum_inner::before{
	top: 0;
}
#hum_menu .hum_inner::after{
	bottom: 0;
}

/***ナビ開閉中***/
#hum_menu.btn_gnav_def .hum_inner,
#hum_menu.btn_gnav_close .hum_inner{
	background-image: linear-gradient(to bottom, transparent 0,transparent calc(50% - 1px),#fff calc(50% - 1px), #fff calc(50% + 1px), transparent calc(50% + 1px), transparent 100%);
}
#hum_menu.btn_gnav_open .hum_inner{}

/*開くときの動き*/
#hum_menu.btn_gnav_open .hum_inner::before{
	animation-name: open_top_bar;
	animation-duration: 0.25s;
	animation-fill-mode: forwards;
}
#hum_menu.btn_gnav_open .hum_inner::after{
	animation-name: open_bottom_bar;
	animation-duration: 0.25s;
	animation-fill-mode: forwards;
}
@keyframes open_top_bar{
	0%{
		top: 0;
		transform: rotateZ(0);
	}
	50%{
		top: calc(50% - 1px);
		transform: rotateZ(0);
	}
	100%{
		top: calc(50% - 1px);
		transform: rotateZ(-45deg);
	}
}
@keyframes open_bottom_bar{
	0%{
		bottom: 0;
		transform: rotateZ(0);
	}
	50%{
		bottom: calc(50% - 1px);
		transform: rotateZ(0);
	}
	100%{
		bottom: calc(50% - 1px);
		transform: rotateZ(45deg);
	}
}

/*閉じるときの動き*/
#hum_menu.btn_gnav_close .hum_inner::before{
	animation-name: close_top_bar;
	animation-duration: 0.25s;
	animation-fill-mode: forwards;
}
#hum_menu.btn_gnav_close .hum_inner::after{
	animation-name: close_bottom_bar;
	animation-duration: 0.25s;
	animation-fill-mode: forwards;
}
@keyframes close_top_bar{
	0%{
		top: calc(50% - 1px);
		transform: rotateZ(-45deg);
	}
	50%{
		top: calc(50% - 1px);
		transform: rotateZ(0);
	}
	100%{
		top: 0;
		transform: rotateZ(0);
	}
}
@keyframes close_bottom_bar{
	0%{
		bottom: calc(50% - 1px);
		transform: rotateZ(45deg);
	}
	50%{
		bottom: calc(50% - 1px);
		transform: rotateZ(0);
	}
	100%{
		bottom: 0;
		transform: rotateZ(0);
	}
}


/***グローバルナビドロップ***/
#gnav{
	display: none;
	max-height: calc(100vh - 6em);
	background-color: var(--base_color);
	overflow-y: auto;
	position: absolute;
	top: 4.5em;
	left: 0;
	z-index: 9998;
}
.gnav_box{
	line-height: 1.2;
}

.gnav_ttl{
	color: #fff;
	padding: 0.75em 1em 0.75em 2.5em;
	border-top: solid 2px #fff;
	background-color: var(--main_color);
	position: relative;
}
.gnav_ttl::before{
	content: '';
	display: block;
	line-height: 1;
	width: 1em;
	height: 1em;
	border: solid 1px #fff;
	position: absolute;
	top: 50%;
	left: 1em;
	transform: translateY(-50%);
}
.gnav_ttl::after{
	content: '';
	display: block;
	line-height: 1;
	width: 0.8em;
	height: 0.8em;
	background-color: #fff;
	clip-path: polygon(calc(50% - 1px) 0,calc(50% + 1px) 0,calc(50% + 1px) calc(50% - 1px),100% calc(50% - 1px),100% calc(50% + 1px),calc(50% + 1px) calc(50% + 1px),calc(50% + 1px) 100%,calc(50% - 1px) 100%,calc(50% - 1px) calc(50% - 1px),0 calc(50% - 1px),0 calc(50% + 1px),calc(50% - 1px) calc(50% + 1px));
	position: absolute;
	top: 50%;
	left: calc(1.1em + 1px);
	transform: translateY(-50%);
}
.gnav_ttl.btn_open::after{
	clip-path: polygon(0 calc(50% - 1px),100% calc(50% - 1px),100% calc(50% + 1px),0 calc(50% + 1px));
}

.gnav_box ul.gnav_sub_nav{}
.gnav_box ul.gnav_sub_nav li{}
.gnav_box ul.gnav_sub_nav li a{
	display: block;
	text-decoration: none;
	color: #333;
	padding: 0.75em 1em 0.75em 3.5em;
	border-top: solid 2px #fff;
	background-image: url("../img/icon_nav_black.svg");
	background-repeat: no-repeat;
	background-size: auto 1em;
	background-position: left 1em center;
}
.gnav_box ul.gnav_sub_nav li a:hover{
	color: #fff;
	background-color: var(--sub_color);
	background-image: url("../img/icon_nav_white.svg");
}


/*****
ヘッダーメニュー
*****/
.h_alink_area{
	flex-grow: 1;
	display: flex;
	margin: 0 1em;
}

.h_alink_box{
	margin: 0 1.5em;
	position: relative;
}
.h_alink_box > a{
	display: block;
	text-decoration: none;
	color: #333;
}
.h_alink_box > a,
.h_alink_box > .btn_drop{
	display: flex;
	align-items: center;
	height: 100%;
}


/***ヘッダーのサブナビ***/
.h_sub_nav{
	overflow-wrap: anywhere;
	border-radius: 0.25em;
	border: solid 2px var(--main_color);
	background-color: var(--base_color);
	position: absolute;
	top: calc(100% + 0.5em);
	left: 50%;
	z-index: 9997;
	transform: translateX(-50%);
}
.h_sub_nav p a{
	display: block;
	text-decoration: none;
	color: #333;
	padding: 0.75em 1em;
	border-bottom: solid 2px var(--main_color);
	white-space: nowrap;
}
.h_sub_nav p a::before{
	display: none;
}
.h_sub_nav p:first-of-type a{
	border-radius: 0.25em 0.25em 0 0;
}
.h_sub_nav p:last-of-type a{
	border-bottom: none;
	border-radius: 0 0 0.25em 0.25em;
}
.h_sub_nav p a:hover{
	color: #fff;
	background-color: var(--main_color);
}


/***ロゴ***/
.logo{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-shrink: 0;
	width: clamp(140px,12.85vw,180px);
	padding: 0 1em;
	max-width: 180px;
	background-color: #fff;
}

/*------------------------------
コンテンツ
------------------------------*/
.ttl_type01_wrap{
	display: flex;
	align-items: center;
	font-size: clamp(2rem,2.57vw,3.6rem);
	color: var(--sub_color);
	margin-bottom: 1.5em;
}
.ttl_type01_wrap::before,
.ttl_type01_wrap::after{
	content: '';
	display: block;
	height: 4px;
	background-color: var(--sub_color);
}
.ttl_type01_wrap::before{
	flex-shrink: 0;
	width: 10%;
}
.ttl_type01_wrap::after{
	flex-grow: 1;
	width: auto;
}

.ttl_type01{
	flex-shrink: 0;
	display: inline-block;
	max-width: 80%;
	padding: 0 1em;
}

.ttl_type02{
	font-size: clamp(1.5rem,2.16vw,2.6rem);
	font-weight: bold;
	color: var(--sub_color);
	margin: 0 0 1em 0;
	padding: 0.5em 0 0.5em 1em;
	position: relative;
}
.ttl_type02::before{
	content: '';
	display: block;
	width: 4px;
	height: 100%;
	background-image: linear-gradient(var(--sub_color) 0,var(--sub_color) 100%);
	position: absolute;
	top: 0;
	left: 0;
}
.ttl_type03{
	font-size: clamp(1.5rem,1.83vw,2.2rem);
	font-weight: bold;
	margin: 3em 0 1.5em 0;
	padding: 0.25em 1em;
	border-radius: 0.25em;
	background-color: var(--sub02_color);
}
.ttl_type04{
	font-size: clamp(1.5rem,1.42vw,2rem);
	font-weight: bold;
	color: var(--sub_color);
	margin-bottom: 1.5em;
	border-bottom: solid 2px var(--sub_color);
}
.ttl_type05{
	font-size: clamp(1.4rem,1.42vw,2rem);
	font-weight: bold;
	margin: 2em 0 1em 0;
	border-bottom: solid 1px #858585;
}

/*------------------------------
バナーエリア
------------------------------*/
.bn_section_wrap{
	padding: 4em 0;
}
.bn_section{
	width: 94%;
	max-width: 1400px;
	margin: 0 auto;
}
.bn_area ul{
	display: flex;
}
.bn_area ul li{
	max-width: 222px;
	margin-right: 5%;
}
.bn_area ul li a{
	display: block;
	border-radius: 0.5em;
	border: solid 1px #ccc;
	overflow: hidden;
}

/*------------------------------
フッター
------------------------------*/
#footer{
	font-size: clamp(1.2rem,1.4vw,1.4rem);
}
#footer_pmark{
	display: none;
	width: 94%;
	max-width: 1200px;
	margin: 0 auto;
}
#index #footer_pmark{
	display: block;
}
#footer_pmark .pmark{
	max-width: 120px;
}
#copy{
	text-align: center;
	color: #fff;
	width: 100%;
	margin-top: 1em;
	padding: 0.5em;
	background-color: var(--main_color);
}

/*****
ページトップボタン
*****/
#btn_page_top{
	display: none;
	font-size: clamp(1.4rem,1.33vw,1.6rem);
	line-height: 1.2;
	text-align: center;
	color: #fff;
	padding: 0.5em;
	border-radius: 0.25em;
	background-color: rgba(0,158,185,0.8);
	position: fixed;
	bottom: 5vh;
	left: 0.5em;
	z-index: 99;
	cursor: pointer;
}

/*------------------------------
ドロップダウン用
------------------------------*/
.btn_drop{
	cursor: pointer;
}
.btn_open{}
.drop_area{
	display: none;
}
.drop_open{}

/*------------------------------
サイト共通
------------------------------*/
.font_size_s{
	font-size: 0.85em;
}
.font_size_l{
	font-size: 1.2em;
}
.font_size_ll{
	font-size: 1.4em;
}

.font_red{
	color: var(--red_color);
}
.font_blue{
	color: var(--blue_color);
}

.bg_red{
	background-color: var(--red_color);
}
.bg_blue{
	background-color: var(--blue_color);
}
.bg_yell{
	background-color: var(--yell_color);
}
.bg_orange{
	background-color: var(--orange_color);
}
.bg_online{
	background-color: var(--online_color);
}
.bg_online02{
	background-color: var(--online02_color);
}
.bg_school{
	background-color: var(--school_color);
}
.bg_school02{
	background-color: var(--school02_color);
}
.bg_apply{
	background-color: var(--apply_color);
}
.bg_tbl{
	background-color: var(--tbl_color);
}

.text_left{
	text-align: left;
}
.text_center{
	text-align: center;
}
.text_right{
	text-align: right;
}

.p_line p{
	margin-bottom: 0.75em;
}
.p_line p:last-of-type{
	margin-bottom: 0;
}

.p_line ul{
	margin: 0.75em 0;
}
.p_line ul li{
	margin-bottom: 0.25em;
}
.p_line ul li:last-of-type{
	margin-bottom: 0;
}

.text_underline{
	text-decoration: underline;
}
.text_through{
	text-decoration: line-through;
}

ul.li_indent05 > li,
.text_indent05{
	text-indent: -0.5em;
	padding-left: 0.5em;
}
ul.li_indent0_75 > li,
.text_indent0_75{
	text-indent: -0.75em;
	padding-left: 0.75em;
}
ul.li_indent1 > li,
.text_indent1{
	text-indent: -1em;
	padding-left: 1em;
}
ul.li_indent1_25 > li,
.text_indent1_25{
	text-indent: -1.25em;
	padding-left: 1.25em;
}
ul.li_indent1_5 > li,
.text_indent1_5{
	text-indent: -1.5em;
	padding-left: 1.5em;
}
ul.li_indent2 > li,
.text_indent2{
	text-indent: -2em;
	padding-left: 2em;
}
ul.li_indent2_5 > li,
.text_indent2_5{
	text-indent: -2.5em;
	padding-left: 2.5em;
}
ul.li_indent3 > li,
.text_indent3{
	text-indent: -3em;
	padding-left: 3em;
}

.br_indent1{
	display: inline-block;
	text-indent: -1em;
	padding-left: 1em;
}

.mgn_t05{
	margin-top: 0.5em;
}
.mgn_t1{
	margin-top: 1em;
}
.mgn_t1_5{
	margin-top: 1.5em;
}
.mgn_t2{
	margin-top: 2em;
}
.mgn_t2_5{
	margin-top: 2.5em;
}
.mgn_t3{
	margin-top: 3em;
}
.mgn_t4{
	margin-top: 4em;
}
.mgn_r05{
	margin-right: 0.5em;
}
.mgn_r1{
	margin-right: 1em;
}
.mgn_r2{
	margin-right: 2em;
}
.mgn_r3{
	margin-right: 3em;
}
.mgn_r4{
	margin-right: 4em;
}
.mgn_b05{
	margin-bottom: 0.5em;
}
.mgn_b1{
	margin-bottom: 1em;
}
.mgn_b2{
	margin-bottom: 2em;
}
.mgn_b3{
	margin-bottom: 3em;
}
.mgn_b4{
	margin-bottom: 4em;
}
.mgn_l05{
	margin-left: 0.5em;
}
.mgn_l1{
	margin-left: 1em;
}
.mgn_l2{
	margin-left: 2em;
}
.mgn_l3{
	margin-left: 3em;
}
.mgn_l4{
	margin-left: 4em;
}

.pdd_t05{
	padding-top: 0.5em;
}
.pdd_t1{
	padding-top: 1em;
}
.pdd_t2{
	padding-top: 2em;
}
.pdd_t3{
	padding-top: 3em;
}
.pdd_t4{
	padding-top: 4em;
}
.pdd_r05{
	padding-right: 0.5em;
}
.pdd_r1{
	padding-right: 1em;
}
.pdd_r2{
	padding-right: 2em;
}
.pdd_r3{
	padding-right: 3em;
}
.pdd_r4{
	padding-right: 4em;
}
.pdd_b05{
	padding-bottom: 0.5em;
}
.pdd_b1{
	padding-bottom: 1em;
}
.pdd_b2{
	padding-bottom: 2em;
}
.pdd_b3{
	padding-bottom: 3em;
}
.pdd_b4{
	padding-bottom: 4em;
}
.pdd_l05{
	padding-left: 0.5em;
}
.pdd_l0_75{
	padding-left: 0.75em;
}
.pdd_l1{
	padding-left: 1em;
}
.pdd_l1_5{
	padding-left: 1.5em;
}
.pdd_l2{
	padding-left: 2em;
}
.pdd_l2_5{
	padding-left: 2.5em;
}
.pdd_l3{
	padding-left: 3em;
}
.pdd_l4{
	padding-left: 4em;
}

.flex{
	display: flex;
}
.flex_center{
	display: flex;
	justify-content: center;
}
.flex_between{
	display: flex;
	justify-content: space-between;
}
.flex_around{
	display: flex;
	justify-content: space-around;
}
.flex_wrap{
	flex-wrap: wrap;
}

.flex_start{
	display: flex;
	justify-content: flex-start;
}
.flex_end{
	display: flex;
	justify-content: flex-end;
}
.item_center{
	align-items: center;
}
.item_start{
	align-items: flex-start;
}
.item_end{
	align-items: flex-end;
}


.arrowlink{
	display: inline-block;
}
.arrowlink::before{
	content: '';
	display: inline-block;
	width: 0.5em;
	height: 1em;
	margin-right: 0.5em;
	background-color: #555;
	clip-path: polygon(0 0,100% 50%,0 100%,0 calc(100% - 3px),calc(100% - 3px) 50%,0 3px);
}

.ancholink{
	display: inline-block;
	text-decoration: none;
	color: #333;
	padding: 0.25em 0.5em;
	border: solid 1px #333;
	border-radius: 0.25em;
	background-color: #fff;
	transition: background 0.5s;
}
.ancholink::before{
	content: '';
	display: inline-block;
	width: 1em;
	height: 0.5em;
	margin: 0 0.25em 0 0;
	background-color: #555;
	clip-path: polygon(0 0,3px 0,50% calc(100% - 3px),calc(100% - 3px) 0,100% 0,50% 100%);
}
.ancholink:hover{
	background-color: var(--sub02_color);
}

.otherlink{
	display: inline-block;
	margin-right: 0.25em;
	padding-right: 1em;
	background-image: url("../img/icon_outersite.svg");
	background-repeat: no-repeat;
	background-position: right center;
	background-size: 0.8em auto;
}

.othersite{
	margin-right: 0.25em;
	padding-right: 1em;
	background-image: url("../img/icon_outersite.svg");
	background-repeat: no-repeat;
	background-position: right center;
	background-size: 0.8em auto;
}

.pdflink{
	padding-left: 1.5em;
	background-image: url("../img/icon_download.svg");
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 1em auto;
}

.br_pc{}
.br_sp{}
.only_pc{}
.only_sp{}


/* ===========================================
	MediaQueries
=========================================== */
/* PC----------------------------- */
@media (min-width: 768px){
	/*------------------------------
	ヘッダー
	------------------------------*/
	/*****
	グローバルナビ
	*****/
	
	/***グローバルナビドロップ***/
	#gnav{
		width: 32%;
	}
	
	/*****
	ヘッダーメニュー
	*****/
	.h_alink_box{
		position: relative;
	}
	.h_alink_box:hover::after{
		content: '';
		display: block;
		width: 100%;
		height: 4px;
		background-color: var(--main_color);
		position: absolute;
		bottom: 0;
		left: 0;
	}
	
	.h_alink_box > a > div{
		display: flex;
		align-items: center;
	}
	
	.h_alink_box .icon_faq::before,
	.h_alink_box .icon_login::before,
	.h_alink_box .icon_lessonlist::before{
		content: '';
		display: block;
		aspect-ratio: 1 / 1;
		width: 2em;
		margin: 0 0.5em 0 0;
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center center;
	}
	.h_alink_box .icon_faq::before{
		background-image: url("../img/icon_h_contact.svg");
	}
	.h_alink_box .icon_login::before{
		background-image: url("../img/icon_h_login.svg");
	}
	.h_alink_box .icon_lessonlist::before{
		background-image: url("../img/icon_h_lessonlist.svg");
	}
	
	/*------------------------------
	コンテンツ
	------------------------------*/
	/*------------------------------
	バナーエリア
	------------------------------*/
	.bn_area ul li{
		width: 16%;
	}
	.bn_area ul li:nth-of-type(5n){
		margin-right: 0;
	}
	.bn_area ul li a:hover{
		opacity: 0.8;
	}
	/*------------------------------
	フッター
	------------------------------*/
	#footer{
		margin-top: 250px;
	}
	#index #footer{
		margin-top: 8em;
	}
	#footer_pmark .pmark{
		width: 10%;
	}
	
	/*------------------------------
	サイト共通
	------------------------------*/
	.text_left_pc{
		text-align: left;
	}
	.text_center_pc{
		text-align: center;
	}
	.text_right_pc{
		text-align: right;
	}
	
	.flex_pc{
		display: flex;
	}
	.flex_center_pc{
		display: flex;
		justify-content: center;
	}
	.flex_between_pc{
		display: flex;
		justify-content: space-between;
	}
	.flex_around_pc{
		display: flex;
		justify-content: space-around;
	}
	.flex_start_pc{
		display: flex;
		justify-content: flex-start;
	}
	.flex_end_pc{
		display: flex;
		justify-content: flex-end;
	}
	.item_center_pc{
		align-items: center;
	}
	.item_start_pc{
		align-items: flex-start;
	}
	.item_end_pc{
		align-items: flex-end;
	}
	
	.br_sp,
	.only_sp{
		display: none;
	}
}

/* スマホ----------------------------- */
@media (max-width: 767px){
	/*------------------------------
	ヘッダー
	------------------------------*/
	/*****
	グローバルナビ
	*****/
	#hum_menu{
		width: 4em;
		padding: 1em;
	}
	
	/***グローバルナビドロップ***/
	#gnav{
		width: 90%;
		top: 4em;
	}
	
	/*****
	ヘッダーメニュー
	*****/
	.h_alink_box{
		line-height: 1.2;
		margin: 0;
		border-right: solid 1px #ccc;
	}
	
	.icon_faq{
		padding: 0.5em 0.5em 0.5em 1.6em;
	}
	.icon_login,
	.icon_lessonlist{
		padding: 0.5em 0.5em 0.5em 1.8em;
	}
	.h_alink_box .icon_faq::before,
	.h_alink_box .icon_login::before,
	.h_alink_box .icon_lessonlist::before{
		content: '';
		display: block;
		background-color: var(--main_color);
		position: absolute;
		top: 50%;
		left: 0.5em;
		transform: translateY(-50%);
	}
	.h_alink_box .icon_faq::before{
		width: 0.6em;
		height: 1em;
		clip-path: polygon(0 0,100% 50%,0 100%);
	}
	.h_alink_box .icon_login::before,
	.h_alink_box .icon_lessonlist::before{
		width: 0.8em;
		height: 0.6em;
		clip-path: polygon(0 0,50% calc(100% - 2px),100% 0,100% 2px,50% 100%,0 2px);
	}
	
	/***ヘッダーのサブナビ***/
	.h_sub_nav{
		top: 4em;
	}
	
	/***ロゴ***/
	.logo{
		width: clamp(80px,30vw,100px);
	}
	
	/*------------------------------
	コンテンツ
	------------------------------*/
	.ttl_type01_wrap::before{
		width: 5%;
	}
	
	/*------------------------------
	バナーエリア
	------------------------------*/
	.bn_area ul{
		flex-wrap: wrap;
	}
	.bn_area ul li{
		width: 30%;
		margin-bottom: 1em;
	}
	.bn_area ul li:nth-of-type(3n){
		margin-right: 0;
	}
	
	/*------------------------------
	フッター
	------------------------------*/
	#footer{
		margin-top: 3em;
	}
	#footer_pmark{
		padding-left: 5em;
	}
	#footer_pmark .pmark{
		width: 20%;
	}
	
	/*------------------------------
	サイト共通
	------------------------------*/
	.text_left_sp{
		text-align: left;
	}
	.text_center_sp{
		text-align: center;
	}
	.text_right_sp{
		text-align: right;
	}
	
	.flex_sp{
		display: flex;
	}
	.flex_center_sp{
		display: flex;
		justify-content: center;
	}
	.flex_between_sp{
		display: flex;
		justify-content: space-between;
	}
	.flex_around_sp{
		display: flex;
		justify-content: space-around;
	}
	.flex_start_sp{
		display: flex;
		justify-content: flex-start;
	}
	.flex_end_sp{
		display: flex;
		justify-content: flex-end;
	}
	.item_center_sp{
		align-items: center;
	}
	.item_start_sp{
		align-items: flex-start;
	}
	.item_end_sp{
		align-items: flex-end;
	}
	
	.br_pc,
	.only_pc{
		display: none;
	}
}
/* スマホ狭い場合----------------------------- */
@media (max-width: 420px){
	/*3個以上は非表示*/
	.h_alink_area .h_alink_box:nth-of-type(n+3){
		display: none;
	}
}