@charset "utf-8";
/*======================================
一級建築士定期講習
========================================*/
/*--------------------
index
--------------------*/
/***申込の開始ボタン***/
.top_btn_area{}
.btn_apply_next{
	font-size: clamp(1.4rem,2.4vw,2.4rem);
	margin: 1em auto;
	position: relative;
}
.btn_apply_next a{
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	color: #fff;
	height: 100%;
	padding: 0.5em 3.5em 0.5em 3em;
	border-radius: 0.5em;
	background-color: var(--color_orange);
	box-shadow: 0 6px 0 0 #8b410d;
	transition: transform 0.5s,box-shadow 0.5s;
	position: relative;
}
.btn_apply_next a::after{
	content: '';
	display: block;
	width: 1em;
	height: 1em;
	background-image: url("../img/btn_arrow_orange.png");
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	top: calc(50% - 0.5em);
	right: 1em;
}
.btn_apply_next a:hover{
	transform: translateY(4px);
	box-shadow: 0 0 0 0 transparent;
}

.btn_apply_next a.btn_current{
	border-radius: 0.5em 0.5em 0 0;
	box-shadow: 0 0 0 0 transparent;
	transform: translateY(calc(1em + 2px));
}
.btn_apply_next a.btn_current::after{
	transform: rotateZ(90deg);
}

.select_apply_area{
	width: 100%;
	padding: 2em;
	border: solid 2px var(--color_orange);
	position: relative;
}

.apply_area_btm{}

/*JIA注意書き*/
.apply_note{
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 1em 0;
	padding: 1em;
	border: solid 2px var(--ttl_color2);
	position: relative;
}

.jia_caption_note{
	display: block;
}

/*** end 申込の開始ボタン***/

.lead_area{
	margin: 3em 0;
	padding: 2em;
	border: solid 2px var(--color_halfgray);
	border-radius: 0.5em;
}

.lead_text{
	font-size: clamp(1.4rem,2vw,2rem);
	line-height: 2;
}

.tbl_lead_list{
	font-size: clamp(1.1rem,1.8vw,1.8rem);
	margin: 1em auto 0 auto;
}
.tbl_lead_list td{
	padding: 0.5em;
}


/*--------------------
ボトムページ
--------------------*/
.topics_box{
	margin: 2em 0;
	padding: 1em;
	border: solid 2px #ffdb4c;
	background-color: #ffc;
}
.topics_box .ttl_type03:first-of-type{
	margin-top: 0;
}

.pointTxt{
	margin: 1em 0;
	padding: 1em;
	border: 4px solid #E1EEF6;
}

.border_dash{
	padding: 1em;
	border: dashed 1px #ccc;
}

/*****
申し込み選択
*****/
/*.apply_select_area{
	display: flex;
	flex-wrap: wrap;
}

.btn_apply_select{
	font-weight: bold;
	text-align: center;
}

.btn_apply_select a{
	display: flex;
	justify-content: center;
	align-items: center;
	color: var(--color_red);
	text-decoration: none;
	height: 100%;
	padding: 1em 2em 1em 1em;
	border: solid 2px var(--color_red);
	border-radius: 0.25em;
	background-color: #fff;
	box-shadow: 0 4px 2px 0 rgba(60,30,30,0.35);
	position: relative;
	z-index: 1;
}
.btn_apply_select a::after{
	content: '';
	display: block;
	width: 0.5em;
	height: 1em;
	clip-path: polygon(0 0,2px 0,100% 50%,2px 100%,0 100%,calc(100% - 2px) 50%);
	background-color: var(--color_red);
	position: absolute;
	top: 50%;
	right: 0.5em;
	transform: translateY(-50%);
}

.btn_apply_select a.btn_current{
	border-bottom: none;
	border-radius: 0.5em 0.5em 0 0;
	box-shadow: 0 0 0 0 transparent;
}
.btn_apply_select a.btn_current::after{
	width: 1em;
	height: 0.5em;
	clip-path: polygon(0 0,50% calc(100% - 2px),100% 0,100% 2px,50% 100%,0 2px);
}*/



/*****
ページアンカーナビ
*****/
.page_nav_area{
	font-size: clamp(1.2rem,1.4vw,1.4rem);
	line-height: 1.2;
	width: 94%;
	max-width: 1000px;
	margin: 0 auto 3em auto;
}
.page_nav_area ul{
	display: flex;
	flex-wrap: wrap;
}
.page_nav_area ul li{
	margin: 0.5em 0;
}
.page_nav_area ul li a{
	display: flex;
	justify-content: center;
	align-items: center;
	text-decoration: none;
	color: #3A609A;
	height: 100%;
	padding: 0.5em 0.5em 0.5em 2em;
	border: solid 1px #3A609A;
	position: relative;
	transition: background 0.25s;
}
.page_nav_area ul li a::before{
	content: '▼';
	display: inline-block;
	font-size: 0.8em;
	padding: 0.2em;
	border: solid 1px var(--color_halfgray);
	background-color: #fff;
	position: absolute;
	top: 50%;
	left: 0.5em;
	transform: translateY(-50%);
}
.page_nav_area ul li a:hover{
	background-color: #e7eef8;
}

/*****
お申し込みについて
*****/
/***オンライン講習にて必要となるもの***/
.icon_important{
	display: inline-block;
	color: var(--color_red);
	margin-right: 1em;
	padding: 0.25em 0.5em;
	background-color: #fff;
}
.online_preparation{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-bottom: 2em;
}
.online_need{
	width: 50%;
	padding: 1em;
	position: relative;
}
.online_need:nth-of-type(odd)::before{
	content: '';
	display: block;
	width: 1px;
	height: 80%;
	background-color: #ccc;
	position: absolute;
	top: 10%;
	right: 0;
}
.online_need:nth-of-type(n+3)::after{
	content: '';
	display: block;
	width: 80%;
	height: 1px;
	background-color: #ccc;
	position: absolute;
	top: 0;
	left: 10%;
}

.flex_li{
	display: flex;
	flex-wrap: wrap;
}
.flex_li li{
	margin-right: 1em;
}
/***end オンライン講習にて必要となるもの***/

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

/*調整*/
.howpay_area{}
.howpay_area h6{
	font-size: 1.1em;
	font-weight: bold;
	margin: 1.25em 0 0.5em 0;
	border-bottom: solid 1px var(--color_halfgray);
}
.howpay_area ul{
	margin: 1em 0;
}
/***end 決済手段***/

/***ブラウザ・動作環境***/
.info1{
	padding: 1em;
	background-color: #F8D7D6;
}
/***end ブラウザ・動作環境***/

/*****
講習の概要
*****/
.about_select_btn_area{}
.about_select_btn_area .btn_normal{}

/***相違点表***/
.tbl_diffe{
	width: 100%;
	border-top: solid 1px #3887bb;
	border-left: solid 1px #3887bb;
	border-collapse: collapse;
}

.tbl_diffe th,
.tbl_diffe td{
	padding: 0.5em;
	vertical-align: top;
	border-bottom: solid 1px #3887bb;
	border-right: solid 1px #3887bb;
}

.tbl_diffe th{
	font-weight: bold;
	background-color: #d9e9f3;
}
.tbl_diffe td{}

.def_w{
	text-align: center;
	width: 40%;
}
.def_width{
	text-align: center;
	width: 27%;
}

.bg_online{
	background-color: #fadae2;
}
.bg_online02{
	background-color: #fff1f5;
}
.bg_school{
	background-color: #c4e6d0;
}
.bg_school02{
	background-color: #e6f9ed;
}
.bg_webc{
	background-color: #c4dae6;
}
.bg_webc02{
	background-color: #e6f3f9;
}

/***講習のポイント***/
.point_img{}
.point_ttl{}
.point_ttl .icon_point{
	display: inline-block;
 color: #fff;
 padding: 0.25em 1em;
	border-radius: 0.25em;
 background-color: #3887BB;
}
.point_text{
	font-weight: bold;
	color: #3887BB;
}

/***お申込みの流れ***/
.apply_flow{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.apply_flow dt{
	color: #fff;
	text-align: center;
	width: 20%;
	margin: 0 0 2.5em 0;
	padding: 0.5em;
	background-color: #3887bb;
	box-sizing: border-box;
	position: relative;
}
.apply_flow dd{
	width: 75%;
	margin: 0 0 2.5em 0;
	padding: 0 0.5em 0.5em 0.5em;
	border: solid 1px #3887bb;
	position: relative;
}
.apply_flow dd p{
	text-indent: -1em;
	margin: 0.5em 0 0 0;
	padding-left: 1em;
}

/*****
講習の内容
*****/
/*****講習スケジュール*****/
dl.dayscheduleTbl{
	margin-bottom: 0.5em;
}

dl.dayscheduleTbl dt,
dl.dayscheduleTbl dd{
	padding: 0.5em;
}

dl.dayscheduleTbl dt{
	background-color: #eee;
}

dl.dayscheduleTbl dd{}

/***スケジュールについて***/
/*オンライン講習*/
.sche_list_online{
	text-align: center;
	min-width: 60%;
	margin-bottom: 2em;
	border-spacing:0;
	border-top: solid 1px #ccc;
	border-left: solid 1px #ccc;
}
.sche_list_online th,
.sche_list_online td{
	padding: 0.5em;
	border-bottom: solid 1px #ccc;
	border-right: solid 1px #ccc;
}

.sche_list_online th{
	background-color: #eee;
}
.sche_list_online td{}

/*集合講習*/
.sche_list_box{
	width: 100%;
	margin-bottom: 2em;
	text-align: center;
	border-top: solid 1px #ccc;
	border-left: solid 1px #ccc;
}
.sche_list_box tr td:first-of-type{
	font-weight: bold;
	background-color: #eee;
}

.sche_list_box th,
.sche_list_box td{
	padding: 0.5em;
	border-bottom: solid 1px #ccc;
	border-right: solid 1px #ccc;
}
.sche_list_box th{
	background-color: #eee;
}

/*****
修了結果
*****/
.tbl_result{
	width: 100%;
	margin: 1em 0;
	border-top: solid 1px #ccc;
	border-left: solid 1px #ccc;
}
.tbl_result th,
.tbl_result td{
	text-align: center;
	width: 25%;
	padding: 0.5em;
	border-bottom: solid 1px #ccc;
	border-right: solid 1px #ccc;
}
.tbl_result th{
	font-weight: bold;
	background-color: #eee;
}
.tbl_result td{}

/*****
合格基準点
*****/
/*****
よくある質問
*****/
.qa_area{}

.qu,
.an{
	display: flex;
}

/*質問*/
.qa_area a.id_open_btn{
	text-decoration: none;
}
.qu{
	color: #333;
	margin-bottom: 1em;
	padding: 0.5em 2em 0.5em 0.5em;
	background-color: #eee;
	position: relative;
}
.qu::after{
	content: '▼';
	display: block;
	color: #858585;
	position: absolute;
	top: 50%;
	right: 0.5em;
	transform: translateY(-50%);
}

/*回答*/
.an{
	margin-bottom: 1em;
	padding: 0.5em;
	border: solid 1px #ccc;
}
.an h5{
	flex-shrink: 0;
}

.qa_txt{
	flex-grow: 1;
}

/*****
郵送で申し込み
*****/
.apply_post_btn_area{}

/*****
マイページを作らずお申し込み
*****/
.img_border{
	border: solid 1px #ccc;
}

/* ===========================================
	MediaQueries
=========================================== */
/* スマホ----------------------------- */
@media screen and (max-width: 767px){
	/*--------------------
	index
	--------------------*/
	/***申込の開始ボタン***/
	.top_btn_area{}
	
	.apply_cmnt{
		margin-bottom: 1.5em;
	}
	.apply_cmnt::before{
		content: '';
		display: block;
		width: 1em;
		height: 1em;
		background-color: #fff;
		border-style: solid;
		border-width: 1px;
		border-color: transparent var(--color_orange) var(--color_orange) transparent;
		transform-origin: center center;
		transform: translate(-50%,50%) rotateZ(45deg);
		position: absolute;
		bottom: 0;
		left: 50%;
	}
	
	.btn_apply_next{}
	.btn_apply_next a{
		display: block;
		padding: 1em 2.5em 1em 0.5em;
	}
	
	.select_apply_area{
		margin-bottom: 1em;
		padding: 1em;
	}
	
	/*JIA注意書き*/
	.apply_note{}
	
	/***end 申込の開始ボタン***/
	
	.lead_area{
		padding: 0.5em;
	}
	.lead_text{}
	
	.tbl_lead_list{}
	.tbl_lead_list td{
		padding: 0.5em 0.25em;
	}
	
	
	/*--------------------
	ボトムページ
	--------------------*/
	.pointTxt{
		padding: 0.5em;
	}
	
	/*****
	申し込み選択
	*****/
	/*.apply_select_area{
		flex-direction: column;
	}
	.btn_apply_select{
		margin-bottom: 1em;
	}
	.btn_apply_select a.btn_current{
		transform: translateY(calc(1em + 2px));
	}*/
	
	
	/*****
	ページアンカーナビ
	*****/
	.page_nav_area ul{
		justify-content: space-between;
	}
	.page_nav_area ul li{
		width: 48%;
	}
	
	/*****
	お申し込みについて
	*****/
	/***決済手段***/
	.pay_icon_area{
		justify-content: space-between;
	}
	.pay_icon_area .pay_icon_box{
		width: 48%;
	}
	
	.pay_logo_img{
		width: 30%;
	}
	/***end 決済手段***/
	
	/*****
	講習の概要
	*****/
	/***講習のポイント***/
	.point_img{
		text-align: center;
		width: 100%;
		margin-bottom: 0.5em;
	}
	.point_ttl{
		margin-bottom: 0.5em;
	}
	
	/***お申込みの流れ***/
	.apply_flow{
		display: block;
	}
	.apply_flow dt{
		width: 100%;
		margin: 0;
	}
	.apply_flow dd{
		width: 100%;
	}
	.apply_flow dd::after{
		content: '';
		display: block;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 1.5em 2em 0 2em;
		border-color: #3887bb transparent transparent transparent;
		position: absolute;
		bottom: -2em;
		left: 50%;
		transform: translateX(-50%);
	}
	.apply_flow dd:last-of-type::after{
		display: none;
	}
	
	/*****
	講習の内容
	*****/
	/*****講習スケジュール*****/
	dl.dayscheduleTbl{}
	dl.dayscheduleTbl dt,
	dl.dayscheduleTbl dd{}
	
	dl.dayscheduleTbl dt{}
	dl.dayscheduleTbl dd{
		margin-bottom: 0.5em;
		border-bottom: solid 1px #ccc;
	}
	
	/*****
	修了結果
	*****/
	/*****
	合格基準点
	*****/
	/*****
	よくある質問
	*****/
	/*****
	郵送で申し込み
	*****/
	/*****
	マイページを作らずお申し込み
	*****/
	
}

/* PC----------------------------- */
@media screen and (min-width: 768px){
	/*--------------------
	index
	--------------------*/
	/***申込の開始ボタン***/
	.top_btn_area{
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
	}
	.apply_cmnt{
		margin-right: 1em;
	}
	.apply_cmnt::before{
		content: '';
		display: block;
		width: 0.5em;
		height: 0.5em;
		background-color: #fff;
		border-style: solid;
		border-width: 1px;
		border-color: var(--color_orange) var(--color_orange) transparent transparent;
		transform-origin: center center;
		transform: translate(50%,-50%) rotateZ(45deg);
		position: absolute;
		top: 50%;
		right: 0;
	}
	
	.btn_apply_next a{}
	
	#select_nikken,
	#select_nikken2{
		order: 3;
	}
	#select_jia,
	#select_jia2{
		order: 4;
	}
	
	.apply_area_btm{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	
	.apply_area_btm .btn_normal{
		width: 48%;
	}
	
	/*JIA注意書き*/
	.apply_note{
		width: 48%;
	}
	.apply_note::before{
		content: '';
		display: block;
		width: 3em;
		height: 2em;
		background-color: var(--ttl_color2);
		clip-path: polygon(50% 0,100% 50%,70% 50%,70% 100%,30% 100%,30% 50%,0 50%);
		position: absolute;
		bottom: 100%;
		left: 50%;
		transform: translateX(-50%);
	}
	
	.jia_caption_note{
		font-size: 0.85em;
		position: absolute;
		top: -1.5em;
		left: 50%;
		transform: translateX(-50%);
		white-space: nowrap;
	}
	
	/*ナビボタンの順序*/
	.order_corp{
		order: 1;
	}
	.order_my{
		order: 3;
	}
	.order_post{
		order: 4;
	}
	.order_note{
		order: 2;
	}
	
	/***end 申込の開始ボタン***/
	
	/*--------------------
	ボトムページ
	--------------------*/
	/*****
	申し込み選択
	*****/
	/*.apply_select_area{
		justify-content: space-between;
	}
	.btn_apply_select{
		width: 32%;
		margin-bottom: 1em;
	}
	
	.btn_apply_select a{
		transition: background-color 0.5s,transform 0.25s,box-shadow 0.25s;
	}
	
	.btn_apply_select a:hover{
		background-color: #fffbd9;
		transform: translateY(4px);
		box-shadow: 0 0 0 0 transparent;
	}
	
	.btn_apply_select a.btn_current{
		transform: translateY(calc(1em + 2px));
	}
	
	#select_mypage{
		order: 4;
	}
	#select_non_mypage{
		order: 5;
	}
	.select_apply_area{}
	
	.select_apply_area .btn_normal{
		width: 48%;
	}*/
	
	
	
	/*****
	ページアンカーナビ
	*****/
	.page_nav_area ul{
		justify-content: space-between;
	}
	.page_nav_area ul li{
		width: 23%;
	}
	
	/*****
	お申し込みについて
	*****/
	/***決済手段***/
	.pay_icon_area{}
	.pay_icon_area .pay_icon_box{
		width: 31%;
		margin-right: 3%;
	}
	.pay_icon_area .pay_icon_box:nth-of-type(3n){
		margin-right: 0;
	}
	/***end 決済手段***/
	
	/*****
	講習の概要
	*****/
	.about_select_btn_area .btn_normal{
		width: 48%;
	}
	
	/***講習のポイント***/
	.point_img{
		flex-shrink: 0;
		width: 270px;
		margin-right: 2em;
	}
	.point_ttl{
		margin-right: 1em;
	}
	
	/***お申込みの流れ***/
	.apply_flow dt::after{
		content: '';
		display: block;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 1.5em 2em 0 2em;
		border-color: #3887bb transparent transparent transparent;
		position: absolute;
		bottom: -2em;
		left: 50%;
		transform: translateX(-50%);
	}
	.apply_flow dt:last-of-type::after{
		display: none;
	}
	
	/*****
	講習の内容
	*****/
	/*****講習スケジュール*****/
	dl.dayscheduleTbl{
		display: flex;
		flex-wrap: wrap;
		border-top: solid 1px #ccc;
	}
	dl.dayscheduleTbl dt,
	dl.dayscheduleTbl dd{}
	
	dl.dayscheduleTbl dt{
		flex-shrink: 0;
		text-align: center;
		width: 14em;
		border-bottom: solid 1px #ccc;
	}
	dl.dayscheduleTbl dd{
		flex-grow: 1;
		width: calc(100% - 14em);
		border-bottom: solid 1px #ccc;
	}
	
	/*****
	修了結果
	*****/
	/*****
	合格基準点
	*****/
	/*****
	よくある質問
	*****/
	/*****
	郵送で申し込み
	*****/
	.apply_post_btn_area .btn_download{
		width: 48%;
	}
	
	/*****
	マイページを作らずお申し込み
	*****/
}