@charset "utf-8";
/*============================
設計製図　本試験課題検証
=============================*/
.ttl_type01 .icon_inner{
	display: inline-block;
	position: relative;
}
.icon_inner .icon_check{
	position: absolute;
}

/*****
ページヘッダー
*****/
#page_header{
	background-color: #355980;
	background-image: url("../img/page_header_bg.png");
	background-repeat: no-repeat;
}

.page_header{
	width: 94%;
	max-width: 1200px;
	margin: 0 auto;
}
.page_lead{
	font-size: clamp(1.8rem,3.8vw,4.2rem);
	font-weight: bold;
	line-height: 1.6;
	text-align: center;
	color: #fff;
	margin: 1em 0;
}

/*****
答案プラン例ダウンロード/参考答案例(一式図)
*****/
/***申し込み方法***/
.howto_area{
	margin-top: 4em;
	padding: 2em;
	border: solid 4px #ED7D31;
	border-radius: 2em;
	background-color: #fff;
	position: relative;
}

.howto_ttl{
	display: inline-block;
	font-size: 3.2rem;
	font-weight: bold;
	line-height: 1;
	color: #fff;
	text-align: center;
	padding: 0.5em 1em;
	border-radius: 1em;
	background-color: #ED7D31;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%,-50%);
}

.howto_detail{
	padding: 1em 0;
	border-bottom: dashed 1px #ccc;
}
.howto_sub_area{
	display: flex;
	align-items: flex-start;
}
.howto_sub_area .howto_num{
	display: inline-block;
	flex-shrink: 0;
	font-size: 1.2em;
	font-weight: bold;
	line-height: 1;
	color: #fff;
	margin-right: 1em;
	padding: 0.5em;
	border-radius: 50%;
	background-color: #ED7D31;
}
.howto_sub_area .howto_sub{
	padding-top: 0.6em
}

.howto_detail .howto_img{
	text-align: center;
}

/*****
プラン無料添削
*****/
.step_box{
	margin-top: 1em;
	padding: 1em 0;
	border-top: dashed 1px #ccc;
}
.step_ttl{
	font-size: 1.2em;
	font-weight: bold;
	color: #093776;
	margin-bottom: 0.5em;
}
.step_color{
	color: #093776;
}

/*****
課題検証
*****/
/*課題*/
.release{
	font-size: 2.2rem;
	text-align: center;
	border: solid 1px #ccc;
}
.release h3{
	font-weight: bold;
	color: #fff;
	padding: 0.5em;
	background-image: linear-gradient(to bottom, #38607c 0%,#2f4e64 100%);
}
.release .subject{
	font-size: 1.2em;
	font-weight: bold;
	padding: 0.5em;
}

/***総評本文***/
.review_lv3{
	font-weight: bold;
	margin: 1em 0 0.5em 0;
}

.dl_data{}
.dl_data dt,
.dl_data dd{
	padding: 0.5em;
}
.dl_data dt{
	text-align: center;
	background-color: #efefef;
}
.dl_data dd{
	border-bottom: dashed 1px #ccc;
}


/* ===========================================
	MediaQueries
=========================================== */
/* PC----------------------------- */
@media (min-width: 768px){
	.ttl_type01 .icon_inner{}
	.icon_inner .icon_check{
		bottom: 50%;
		left: 0;
		transform: translateX(-100%);
	}
	
	/*****
	ページヘッダー
	*****/
	#page_header{
		background-size: cover;
		background-position: center center;
	}
	
	/*****
	答案プラン例ダウンロード/参考答案例(一式図)
	*****/
	.toku_plan{
		display: flex;
		justify-content: space-between;
		position: relative;
		margin-top: 4em;
	}
	.toku_plan .toku_detail{}
	.toku_plan .toku_plus{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateX(-50%);
	}
	
	/***申し込み方法***/
	.howto_detail .howto_img{
		width: 180px;
	}
	
	/*****
	プラン無料添削
	*****/
	.step_box{
		display: flex;
	}
	.step_ttl{
		flex-shrink: 0;
		margin-right: 2em;
	}
	
	/*****
	課題検証
	*****/
	/***総評本文***/
	.dl_data{
		display: flex;
		flex-wrap: wrap;
	}
	.dl_data dt,
	.dl_data dd{
		margin-bottom: 0.5em;
	}
	.dl_data dt{
		width: 25%;
		margin-right: 1%;
	}
	.dl_data dd{
		width: 74%;
	}
}

/* スマホ----------------------------- */
@media (max-width: 767px){
	.ttl_type01 .icon_inner{}
	.icon_inner .icon_check{
		bottom: 100%;
		left: 0;
	}
	
	/*****
	ページヘッダー
	*****/
	#page_header{
		background-size: auto 100%;
		background-position: center top;
	}
	
	.page_header{
		padding: 1em 0;
	}
	
	.page_lead{
		font-size: clamp(1.2rem,3.6vw,2.4rem);
	}
	
	/*****
	答案プラン例ダウンロード/参考答案例(一式図)
	*****/
	.toku_plan{
		margin-top: 3em;
		text-align: center;
	}
	.toku_plan .toku_detail{
		width: 80%;
		max-width: 450px;
		margin: 0 auto;
	}
	.toku_plan .toku_plus{
		width: 25%;
		max-width: 50px;
		margin: 1em auto 0 auto;
	}
	
	/***申し込み方法***/
	.howto_area{
		margin-top: 3em;
		padding: 1em;
	}
	
	.howto_ttl{
		font-size: 1.8rem;
	}
	
	.howto_detail .howto_img{
		width: 30%;
		margin: 0.5em auto 0 auto;
	}
	
	/*****
	プラン無料添削
	*****/
	.step_box{}
	.step_w50_sp{
		width: 50%;
	}
	
	/*****
	課題検証
	*****/
	/***総評本文***/
	.dl_data{}
	.dl_data dt{}
	.dl_data dd{
		margin-bottom: 0.5em;
	}

}