@charset "utf-8";
/*======================================
お知らせ
========================================*/
/*------------------------------
ページヘッダー
------------------------------*/
.page_header_wrap{
	background-image: url("../../../img/index_kenchiku2q.jpg");
}

/*------------------------------
講習について
------------------------------*/
/*****
オンライン講習と集合講習の主な相違点 表組
*****/
.tbl_default th{
	background-color: var(--tbl_color);
}
.def_w{
	text-align: center;
	color: #fff;
	width: 38%;
}

/*****
講習のポイント
*****/
.point_img{
	max-width: 540px;
}
.point_ttl{
	font-size: 1.1em;
	font-weight: bold;
	margin-top: 1.5em;
}
.point_ttl .point_icon{
	display: inline-block;
	color: #fff;
	margin-right: 0.5em;
	padding: 0.25em 0.5em;
	border-radius: 0.25em;
}
#info_online .point_ttl .point_icon{
	background-color: var(--online_color);
}
#info_school .point_ttl .point_icon{
	background-color: var(--school_color);
}
.point_text{
	margin-top: 0.5em;
}

/*****
お申込みから修了までの流れ
*****/
.apply_flow{}
.apply_flow dt{
	text-align: center;
	color: #fff;
	padding: 0.5em;
}
#info_online .apply_flow dt{
	background-color: var(--online_color);
}
#info_school .apply_flow dt{
	background-color: var(--school_color);
}
.apply_flow dd{
	padding: 0.5em;
}
#info_online .apply_flow dd{
	border: solid 1px var(--online_color);
}
#info_school .apply_flow dd{
	border: solid 1px var(--school_color);
}

/*------------------------------
インターネットでお申し込み
------------------------------*/
/*****
オンライン講習に必要なもの
*****/
.online_preparation{
	display: flex;
	justify-content: space-between;
	margin-bottom: 2em;
}
.online_need{
	padding: 1em;
	position: relative;
}

/***集合講習 顔写真***/
.face_error{}
.face_error li{
	display: inline-block;
	margin-right: 1em;
}

/*------------------------------
郵送でお申し込み
------------------------------*/
/*------------------------------
修了結果について
------------------------------*/
.tbl_result{
	text-align: center;
	width: 100%;
}


/* ===========================================
	MediaQueries
=========================================== */
/* PC----------------------------- */
@media (min-width: 768px){
	.header_apply_nav .btn_header_apply{
		width: 50%;
	}
	
	/*------------------------------
	講習について
	------------------------------*/
	/*****
	講習のポイント
	*****/
	.point_img{
		flex-shrink: 0;
		width: 32%;
		margin: 1.5em 1em 0 0;
	}
	
	/*****
	お申込みから修了までの流れ
	*****/
	.apply_flow{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.apply_flow dt{
		width: 20%;
		margin: 0 5% 3.5em 0;
		border-radius: 0.25em;
		position: relative;
	}
	.apply_flow dt::after{
		content: '';
		display: block;
		width: 3em;
		height: 1.5em;
		clip-path: polygon(0 0,100% 0,50% 100%);
		position: absolute;
		top: calc(100% + 1em);
		left: 50%;
		transform: translateX(-50%);
	}
	#info_online .apply_flow dt::after{
		background-color: var(--online_color);
	}
	#info_school .apply_flow dt::after{
		background-color: var(--school_color);
	}
	
	.apply_flow dt:last-of-type::after{
		display: none;
	}
	.apply_flow dd{
		width: 75%;
		margin-bottom: 3.5em;
		border-radius: 0.25em;
	}
	.apply_flow dt:last-of-type,
	.apply_flow dd:last-of-type{
		margin-bottom: 0;
	}
	
	/*------------------------------
	インターネットでお申し込み
	------------------------------*/
	/*****
	オンライン講習に必要なもの
	*****/
	.online_need{
		width: 25%;
	}
	.online_need::before{
		content: '';
		display: block;
		width: 1px;
		height: 80%;
		background-color: var(--tbl_border);
		position: absolute;
		top: 10%;
		right: 0;
	}
	.online_preparation .online_need:last-of-type::before{
		display: none;
	}
	
	/*------------------------------
	郵送でお申し込み
	------------------------------*/
	/*------------------------------
	修了結果について
	------------------------------*/
	.tbl_result{}
}

/* スマホ----------------------------- */
@media (max-width: 767px){
	/*------------------------------
	ページヘッダー
	------------------------------*/
	.page_header_wrap{
		margin-top: 7.498em;
	}
	
	/*------------------------------
	講習について
	------------------------------*/
	/*****
	講習のポイント
	*****/
	.point_img{
		margin: 1em auto 0 auto;
	}
	
	/*****
	お申込みから修了までの流れ
	*****/
	.apply_flow{}
	.apply_flow dt{
		border-radius: 0.25em 0.25em 0 0;
	}
	.apply_flow dd{
		margin-bottom: 3.5em;
		border-radius: 0 0 0.25em 0.25em;
		position: relative;
	}
	.apply_flow dd::after{
		content: '';
		display: block;
		width: 3em;
		height: 1.5em;
		clip-path: polygon(0 0,100% 0,50% 100%);
		position: absolute;
		top: calc(100% + 1em);
		left: 50%;
		transform: translateX(-50%);
	}
	#info_online .apply_flow dd::after{
		background-color: var(--online_color);
	}
	#info_school .apply_flow dd::after{
		background-color: var(--school_color);
	}
	
	.apply_flow dd:last-of-type{
		margin-bottom: 0;
	}
	.apply_flow dd:last-of-type::after{
		display: none;
	}
	
	/*------------------------------
	インターネットでお申し込み
	------------------------------*/
	/*****
	オンライン講習に必要なもの
	*****/
	.online_preparation{
		flex-wrap: wrap;
	}
	.online_need{
		width: 50%;
	}
	.online_need:nth-of-type(odd)::before{
		content: '';
		display: block;
		width: 1px;
		height: 80%;
		background-color: var(--tbl_border);
		position: absolute;
		top: 10%;
		right: 0;
	}
	.online_need:nth-of-type(n+3)::after{
		content: '';
		display: block;
		width: 80%;
		height: 1px;
		background-color: var(--tbl_border);
		position: absolute;
		top: 0;
		right: 10%;
	}
	
	/*------------------------------
	郵送でお申し込み
	------------------------------*/
	/*------------------------------
	修了結果について
	------------------------------*/
	.tbl_result{}
	.tbl_result th{
		font-size: 0.85em;
	}
}