@charset "utf-8";
/*======================================
common CSS
========================================*/
/*------------------------------
ページヘッダー
------------------------------*/
.page_header_wrap{
	font-size: clamp(1.2rem,1.33vw,1.6rem);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}
.page_header{
	font-size: clamp(1.4rem,1.28vw,1.8rem);
	line-height: 1.6;
	text-align: center;
	width: 94%;
	max-width: 1400px;
	margin: 0 auto;
}

.page_ttl_wrap{}

.title_cap{
	display: inline-block;
	padding: 0.25em 1em;
	border: solid 1px #ccc;
	background-color: #fff;
}
.page_caption{
	font-size: clamp(1.6rem,2.14vw,3rem);
	text-stroke: 6px #fff;
	-webkit-text-stroke: 6px #fff;
	paint-order: stroke;
}

.page_ttl{
	font-size: clamp(2.4rem,5.14vw,7.2rem);
	font-weight: bold;
	color: var(--sub_color);
	text-stroke: 8px #fff;
	-webkit-text-stroke: 8px #fff;
	paint-order: stroke;
}

/*****
受講料エリア
*****/
.header_price_area{
	border-top: solid 2px var(--main_color);
	background-color: #fff;
}
.header_price{
	font-size: clamp(1.4rem,1.42vw,2rem);
	width: 94%;
	max-width: 1400px;
	margin: 0 auto;
	padding: 0.75em 0;
}

.jukouryo{}
.juko_price{}

/*****
申し込み関連のナビ
*****/
.header_apply_area{}
.header_apply_nav{}

.btn_header_apply{
	font-size: clamp(1.6rem,1.35vw,2.6rem);
	text-align: center;
	position: relative;
}
.btn_header_apply::before{
	content: '';
	display: block;
	width: 0;
	height: 100%;
	background-color: rgba(0,0,0,0.35);
	position: absolute;
	top: 0;
	left: 0;
	transition: width 0.5s;
}
.btn_header_apply:hover::before{
	width: 100%;
}
.btn_header_apply a{
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
	text-decoration: none;
	padding: 1em 2em 1em 1em;
	position: relative;
}
.btn_header_apply a::after{
	content: '';
	display: block;
	width: 1em;
	height: 1em;
	background-image: url("../img/arrow_white.svg");
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	top: 50%;
	right: 0.5em;
	transform: translateY(-50%);
}

.icon_apply{
	width: 1.5em;
	height: 1.5em;
	margin-right: 0.5em;
}

/*------------------------------
ページナビゲーション
------------------------------*/
#pagenav_wrap{
	font-size: clamp(1.2rem,1.33vw,1.6rem);
	width: 100%;
	margin: 0;
}
.nav_bar{
	background-color: var(--sub_color);
}
.lesson_nav{
	font-size: clamp(1.5rem,1.1vw,1.8rem);
	line-height: 1;
	width: 94%;
	margin: 0 auto;
}
.lesson_nav_box{}
.lesson_nav_box ul{}
.lesson_nav_box ul li{
	margin: 0.25em 0.5em;
}
.lesson_nav_box ul li a{
	display: block;
	text-decoration: none;
	color: #fff;
	padding: 0.5em;
	transition: background 0.5s;
}
/*カレントクラス*/
.lesson_nav_box ul li a.on_current{
	background-color: var(--yell_color);
}

.lesson_nav_box ul.in_page li a::before{
	content: '';
	display: inline-block;
	width: 1em;
	height: 0.5em;
	margin: 0 0.25em 0 0;
	background-color: #fff;
	clip-path: polygon(0 0,3px 0,50% calc(100% - 3px),calc(100% - 3px) 0,100% 0,50% 100%);
}
.lesson_nav_box ul.out_page li a::before{
	content: '';
	display: inline-block;
	width: 1em;
	height: 1em;
	margin: 0 0.25em 0 0;
	background-image: url("../img/page_nav_outpage.svg");
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-position: center center;
	transform: translateY(12.5%);
}
.lesson_nav_box ul.login_page li a::before{
	content: '';
	display: inline-block;
	width: 1em;
	height: 1em;
	margin: 0 0.25em 0 0;
	background-image: url("../img/page_nav_login.svg");
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-position: center center;
	transform: translateY(12.5%);
}

.pagenav_spbtn{}


/*------------------------------
コンテンツ
------------------------------*/
/*****
リードエリア
*****/
.lead_section_wrap{
	padding: 8em 0;
	background-color: var(--base_color);
}
.lead_section{
	font-size: clamp(1.4rem,2vw,2.5rem);
	line-height: 1.8;
	width: 94%;
	max-width: 1200px;
	margin: 0 auto;
}

/*****
本文エリア
*****/
.section_wrap{
	font-size: clamp(1.4rem,0.93vw,1.8rem);
	padding: 6em 0;
}
.page_section{
	font-size: clamp(1.4rem,1.5vw,1.8rem);
	line-height: 1.6;
	width: 94%;
	max-width: 1200px;
	margin: 6em auto 0 auto;
}

.section_wrap .page_section:first-of-type{
	margin-top: 0;
}

.important_wrap{
	margin: 2em auto;
	padding: 1em;
	border: solid 2px var(--red_color);
	border-radius: 0.5em;
}
.important_wrap_ttl{
	font-size: 1.1em;
	font-weight: bold;
	color: var(--red_color);
	margin-bottom: 0.5em;
}

.important_wrap02{
	margin: 2em auto;
	padding: 1em;
	background-color: var(--base_color);
	border: solid 2px var(--sub_color);
	border-radius: 0.5em;
}
.important_wrap02_ttl{
	font-size: 1.1em;
	font-weight: bold;
	color: var(--sub_color);
	margin: 2em 0 1em 0;
	padding-bottom: 0.25em;
	border-bottom: solid 2px var(--sub_color);
}
.important_wrap02 .important_wrap02_ttl:first-of-type{
	margin-top: 0;
}

.border_wrap{
	margin: 2em auto;
	padding: 1em;
	border: solid 4px var(--main_color);
	border-radius: 0.5em;
}

.border_box{
	margin: 2em auto;
	padding: 1em;
	border: solid 1px var(--tbl_border);
	border-radius: 0.5em;
}

/*****
リンクボタン
*****/
.btn_normal,
.btn_anchor,
.btn_pdf{
	font-size: clamp(1.6rem,1.833vw,2.2rem);
	width: 100%;
	max-width: 780px;
	margin: 1.5em auto;
	border-radius: 0.25em;
	position: relative;
}

.p_line p.btn_normal,
.p_line p.btn_anchor,
.p_line p.btn_pdf{
	margin-bottom: 1.5em;
}

.btn_normal::before,
.btn_anchor::before,
.btn_pdf::before{
	content: '';
	display: block;
	border-radius: 0.25em;
	background-color: rgba(0,0,0,0.35);
	position: absolute;
	top: 0;
	left: 0;
}

.btn_normal::before,
.btn_pdf::before{
	width: 0;
	height: 100%;
	transition: width 0.5s;
}
.btn_normal:hover::before,
.btn_pdf:hover::before{
	width: 100%;
}

.btn_anchor::before{
	width: 100%;
	height: 0;
	transition: height 0.5s;
}
.btn_anchor:hover::before{
	height: 100%;
}

.btn_normal a,
.btn_anchor a,
.btn_pdf a{
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	color: #fff;
	width: 100%;
	height: 100%;
	padding: 0.5em 2em 0.5em 0.5em;
	border-radius: 0.25em;
	background-repeat: no-repeat;
	background-size: 1em auto;
	background-position: right 0.5em center;
	position: relative;
}
.btn_normal a{
	background-image: url("../img/arrow_white.svg");
}
.btn_anchor a{
	background-image: url("../img/arrow_white_down.svg");
}
.btn_pdf a{
	background-image: url("../img/icon_download_white.svg");
}


/*****
表組
*****/
table th{
	font-weight: bold;
}
/***標準フリー***/
.tbl_default{
	margin: 0.5em auto;
	border-top: solid 1px var(--tbl_border);
	border-left: solid 1px var(--tbl_border);
}
.tbl_default th,
.tbl_default td{
	padding: 0.5em;
	border-right: solid 1px var(--tbl_border);
	border-bottom: solid 1px var(--tbl_border);
}

/***標準 固定***/
.tbl_standard{
	width: auto;
	margin: 0.5em auto;
	border-top: solid 1px var(--tbl_border);
	border-left: solid 1px var(--tbl_border);
}
.tbl_standard th,
.tbl_standard td{
	padding: 0.5em;
	border-right: solid 1px var(--tbl_border);
	border-bottom: solid 1px var(--tbl_border);
}
.tbl_standard th{
	background-color: var(--tbl_color);
	white-space: nowrap;
}
.tbl_standard td{}

/***ブロック組***/
.tbl_block{
	width: 100%;
	margin: 0.5em auto;
}
.tbl_block th,
.tbl_block td{
	padding: 0.5em;
}
.tbl_block th{
	background-color: var(--tbl_color);
}
.tbl_block td{}

/***属性データ組***/
.tbl_data{
	width: 100%;
	margin: 0.5em auto;
}
.tbl_data .tbl_data_th{}
.tbl_data th,
.tbl_data td{
	padding: 0.5em;
}
.tbl_data th{
	background-color: var(--tbl_color);
}
.tbl_data td{}

/*テーブルの左寄せ*/
.tbl_left{
	margin: 0.5em auto 0.5em 0;
}

/*****
表組のスクロール
*****/
.scroll_wrap{}
.scroll_wrap .scroll_table{}
.scroll_wrap .scroll_table table{}

/*****
動画埋め込み
*****/
.in_youtube{
	aspect-ratio: 560 / 315;
	width: 100%;
	max-width: 800px;
	margin: 2em auto;
}
.in_youtube iframe{
	width: 100%;
	height: 100%;
}

/*------------------------------
GMO決済
------------------------------*/
.pay_icon_area{
	display: flex;
	flex-wrap: wrap;
	margin: 1em 0 0 0;
}
.pay_icon_box{
	text-align: center;
	margin-bottom: 2em;
	padding: 1em;
	border-radius: 0.25em;
	background-color: #eee;
}

/*------------------------------
共通
------------------------------*/



/* ===========================================
	MediaQueries
=========================================== */
/* PC----------------------------- */
@media (min-width: 768px){
	/*------------------------------
	ページヘッダー
	------------------------------*/
	.page_header_wrap{
		margin-top: 4.5em;
	}
	.page_header{
		padding: 8em 0;
	}
	
	/*****
	受講料エリア
	*****/
	.header_price{
		display: flex;
		justify-content: center;
		align-items: flex-end;
	}
	
	.jukouryo::after{
		content: '';
		display: inline-block;
		width: 1.2em;
		height: 1em;
		margin-left: 0.25em;
		background-color: #888;
		clip-path: polygon(0 25%,65% 25%,65% 0,100% 50%,65% 100%,65% 75%,0 75%);
		transform: translateY(12%);
	}
	
	.juko_price{
		margin-left: 2em;
	}
	
	/*****
	申し込み関連のナビ
	*****/
	.header_apply_area{}
	.header_apply_nav{
		display: flex;
		justify-content: space-between;
	}
	
	/*------------------------------
	ページナビゲーション
	------------------------------*/
	.lesson_nav{
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		text-align: center;
	}
	
	.lesson_nav_box{
		display: inline-block;
	}
	.lesson_nav_box ul li{
		display: inline-block;
	}
	.lesson_nav_box ul li a{
		border-radius: 0.25em;
	}
	.lesson_nav_box ul li a:hover{
		background-color: var(--yell_color);
	}
	
	.pagenav_spbtn{
		display: none;
	}
	
	/***固定時のクラス***/
	.fix_pagenav{
		position: fixed;
		top: 4.5em;
		left: 0;
		z-index: 8888;
	}
	
	/*------------------------------
	コンテンツ
	------------------------------*/
	/*****
	本文エリア
	*****/
	.flex_between_pc > .btn_normal,
	.flex_between_pc > .btn_anchor,
	.flex_between_pc > .btn_pdf{
		width: 48%;
	}
	
	/*****
	表組
	*****/
	/***ブロック組***/
	.tbl_block{
		border-top: solid 1px var(--tbl_border);
		border-left: solid 1px var(--tbl_border);
	}
	.tbl_block th,
	.tbl_block td{
		border-right: solid 1px var(--tbl_border);
		border-bottom: solid 1px var(--tbl_border);
	}
	.tbl_block th{}
	.tbl_block td{}
	
	/***属性データ組***/
	.tbl_data{
		border-top: solid 1px var(--tbl_border);
		border-left: solid 1px var(--tbl_border);
	}
	.tbl_data th,
	.tbl_data td{
		border-right: solid 1px var(--tbl_border);
		border-bottom: solid 1px var(--tbl_border);
	}
	.tbl_data th{}
	.tbl_data td{}
	
	
	/*------------------------------
	GMO決済
	------------------------------*/
	.pay_icon_box{
		width: 18%;
		margin-left: 1%;
		margin-right: 1%;
	}
	
	/*------------------------------
	共通
	------------------------------*/
	
}

/* スマホ----------------------------- */
@media (max-width: 767px){
	/*------------------------------
	ページヘッダー
	------------------------------*/
	.page_header_wrap{
		margin-top: 4em;
	}
	.page_header{
		padding: 5em 0;
	}
	
	/*****
	受講料エリア
	*****/
	.header_price{
		line-height: 1.4;
	}
	.jukouryo{
		display: inline-block;
		padding: 0 0.5em;
		border-bottom: solid 2px #888;
	}
	
	/*****
	申し込み関連のナビ
	*****/
	
	/*------------------------------
	ページナビゲーション
	------------------------------*/
	#pagenav_wrap{
		position: fixed;
		top: 4em;
		left: 0;
		z-index: 8888;
	}
	
	.nav_bar{
		display: none;
	}
	
	.lesson_nav{
		overflow: auto;
		max-height: 70vh;
		padding: 1em 0;
	}
	.lesson_nav_box ul li{
		border-bottom: solid 1px #fff;
	}
	
	.pagenav_spbtn{
		display: flex;
		align-items: center;
		font-size: clamp(1.4rem,2vw,1.6rem);
		line-height: 1;
		color: var(--sub_color);
		width: 100%;
		padding: 1em;
		border-bottom: solid 4px var(--sub_color);
		background-color: var(--base_color);
		position: absolute;
		top: 100%;
		left: 0;
	}
	.pagenav_spbtn::before{
		content: '';
		display: inline-block;
		width: 1em;
		height: 0.5em;
		margin: 0 0.25em 0 0;
		background-color: var(--sub_color);
		clip-path: polygon(0 0,3px 0,50% calc(100% - 3px),calc(100% - 3px) 0,100% 0,50% 100%);
		transform: all 0.5s;
	}
	
	.pagenav_spbtn.spbtn_open{}
	.pagenav_spbtn.spbtn_open::before{
		transform: rotateZ(180deg);
	}
	
	/*------------------------------
	コンテンツ
	------------------------------*/
	/*****
	リードエリア
	*****/
	.lead_section_wrap{
		padding: 3em 0;
	}
	
	/*****
	本文エリア
	*****/
	.section_wrap{
		padding: 3em 0;
	}
	.page_section{
		margin: 3em auto 0 auto;
	}
	
	/*****
	表組
	*****/
	/***ブロック組***/
	.tbl_block{
		border: solid 1px var(--tbl_border);
	}
	.tbl_block th,
	.tbl_block td{
		display: block;
	}
	.tbl_block th{
		border-top: solid 1px var(--tbl_border);
	}
	.tbl_block tr:first-of-type th{
		border-top: none;
	}
	.tbl_block td{
		padding-bottom: 1em;
	}
	.tbl_block tr:last-of-type td{
		padding-bottom: 0.5em;
	}
	
	/***属性データ組***/
	.tbl_data{}
	.tbl_data tr{
		border: solid 1px var(--tbl_border);
	}
	.tbl_data .tbl_data_th{
		display: none;
	}
	.tbl_data th,
	.tbl_data td{display: block;}
	.tbl_data th{}
	.tbl_data td{
		/*display: block;*/
	}
	.tbl_data th::before,
	.tbl_data td::before{
		content: attr(data-label);
		display: inline-block;
		font-weight: bold;
	}
	
	/*****
	表組のスクロール
	*****/
	.scroll_wrap{}
	.scroll_wrap::before,
	.scroll_wrap::after{
		content: '←スクロール→';
		display: block;
		text-align: center;
	}
	.scroll_wrap .scroll_table{
		width: 94%;
		margin: 0 auto;
		overflow-x: scroll;
	}
	
	.scroll_wrap .scroll_table::before{}
	.scroll_wrap .scroll_table::after{}
	.scroll_wrap .scroll_table table{
		width: 720px;
	}
	
	/*------------------------------
	GMO決済
	------------------------------*/
	.pay_icon_area{
		justify-content: space-between;
	}
	
	.pay_icon_box{
		width: 48%;
	}
	
	.pay_logo_img{
		width: 30%;
	}
	
	/*------------------------------
	共通
	------------------------------*/
	
}