@charset "utf-8";
/*======================================
監理技術者講習になるには
========================================*/
.bg_blue_grad{
	background-image: linear-gradient(#3887bb 0,#3257B8 100%);
}
.bg_white_grad{
	background-image: linear-gradient(#fff 0,#ccc 100%);
}

/*--------------------
TOP画面
--------------------*/
.pagetop_area{
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	height: calc(100vh - 78px);
}

/*--------------------
ページヘッダー
--------------------*/
#page_header{
	flex-grow: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	background-image: url("../img/page_header_bg.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	position: relative;
}
/*.crossfade_area{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
.header_bg{
	width: 100%;
	height: 100%;
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
}
#h_bg01,
#h_bg02,
#h_bg03{
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}
#h_bg01{
	background-image: url("../img/page_header_bg01.jpg");
}
#h_bg02{
	background-image: url("../img/page_header_bg02.jpg");
}
#h_bg03{
	background-image: url("../img/page_header_bg03.jpg");
}*/

.page_header{
	font-size: clamp(1.4rem,1.42vw,2rem);
	width: 94%;
	max-width: 1400px;
	margin: 0 auto;
	padding: 1em 0;
	position: relative;
}

.page_ttl{
	font-size: clamp(2.4rem,3.7vw,5.2rem);
	font-weight: bold;
	color: var(--color_blue);
	margin-bottom: 0.5em;
	-webkit-text-stroke: 0.15em #fff;
	text-stroke: 0.15em #fff;
	paint-order: stroke;
}
.page_subttl{
	font-size: clamp(1.9rem,3vw,4.2rem);
	color: var(--color_blue);
	-webkit-text-stroke: 0.15em #fff;
	text-stroke: 0.15em #fff;
	paint-order: stroke;
}

/*****
リード
*****/
.lead_area{
	font-size: clamp(1.4rem,2.5vw,3rem);
	line-height: 2;
	color: #fff;
	background-color: var(--color_blue);
}
.lead_inner{
	width: 94%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 1em 0;
}

/*--------------------
コンテンツ
--------------------*/
.article_area{
	background-color: #fdf9eb;
}

.normal_section{
	font-size: clamp(1.3rem,2vw,2rem);
}

.ttl_kanri01{
	display: flex;
	align-items: flex-start;
	font-size: clamp(1.8rem,3.8vw,3.8rem);
	font-weight: normal;
	color: var(--ttl_color);
	margin-bottom: 1.5em;
	padding: 0 0 0.25em 0.5em;
	border-bottom: solid 4px #f5c743;
	position: relative;
}
.ttl_kanri01::after{
	content: '';
	display: block;
	width: 30%;
	height: 4px;
	background-color: var(--color_orange);
	position: absolute;
	top: 100%;
	left: 3em;
}

.icon_ttl{
	display: inline-block;
	flex-shrink: 0;
	width: 2em;
	height: 2em;
	margin: -0.25em 0.5em 0 0;
}

.cont_box{}

/*****
アイコンアニメーション設定
*****/
@keyframes anim_effect{
	0%{
		transform: translateY(0);
	}
	50%{
		transform: translateY(-25%);
	}
	100%{
		transform: translateY(0);
	}
}

.icon_anim{
	animation-name: anim_effect;
	animation-duration: 3s;
	animation-delay: 0;
	animation-iteration-count: infinite;
}

/*****
お悩みはありませんか
*****/
.about_box{
	margin-bottom: 2em;
	border: solid 4px #CFD2D8;
	background-color: #fff;
}

.ttl_about{
	font-size: 1.2em;
	font-weight: bold;
	color: var(--ttl_color);
	margin-bottom: 0.75em;
}

.about_caption{
	display: flex;
	align-items: flex-start;
	font-size: 1.15em;
}

/*****
必要な条件
*****/
.condition_box{
	margin-bottom: 2em;
	border: solid 4px #CFD2D8;
	background-color: #fff;
}

.ttl_condition{
	font-size: 1.2em;
	font-weight: bold;
	color: var(--ttl_color);
	margin-bottom: 0.75em;
}

.condition_caption{
	font-size: 1.15em;
}

/*****
手続きの流れ
*****/
.flow_caption{
	font-size: 1.15em;
	margin: 1.5em 0 1em 0;
	padding: 0.5em;
	border: solid 1px var(--ttl_color);
	border-radius: 0.25em;
	background-color: #fff;
}

/*****
よくある質問
*****/
.faq_area{}
.normal_section .faq_area:last-of-type{
	margin-bottom: 0;
}

.ttl_faq{
	font-size: clamp(1.6rem,2.6vw,2.6rem);
	font-weight: bold;
	margin-bottom: 1em;
	padding: 0.5em;
	border-radius: 0.5em;
	box-shadow: 0 0 6px 6px rgba(50,87,184,0.15);
}

.faq_q{
	display: flex;
	align-items: flex-start;
	margin-bottom: 1em;
}
.faq_a{
	display: flex;
	justify-content: flex-end;
	align-items: flex-start;
	margin-bottom: 1.5em;
}

.faq_icon{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-shrink: 0;
	font-weight: bold;
	color: #fff;
	width: 2em;
	height: 2em;
	border-radius: 50%;
}
.faq_q .faq_icon{
	margin-right: 2em;
	background-color: #0e993c;
}
.faq_a .faq_icon{
	margin-left: 2em;
	background-color: var(--color_red);
}

.balloon{
	padding: 1em;
	border-radius: 0.5em;
	position: relative;
	filter: drop-shadow(0 2px 2px rgba(0,0,0,0.25));
}
.balloon::before{
	content: '';
	display: block;
	width: 1.5em;
	height: 1em;
	position: absolute;
	top: 0.75em;
}

.faq_q .balloon,
.faq_q .balloon::before{
	background-color: #c5f6d5;
}
.faq_q .balloon::before{
	right: calc(100% - 1px);
	clip-path: polygon(0 25%,100% 0,100% 100%);
}

.faq_a .balloon,
.faq_a .balloon::before{
	background-color: #f8d4d4;
}
.faq_a .balloon::before{
	left: calc(100% - 1px);
	clip-path: polygon(0 0,100% 25%,0 100%);
}


/*****
担当者へ
*****/
.attention_area{
	margin-bottom: 2em;
	padding: 1em;
	border-radius: 0.5em;
	background-color: #ffcd7a;
	background-image: url("../img/attention_bg.png");
	background-repeat: no-repeat;
	background-position: right -2% bottom 0.5em;
	background-size: auto 120%;
}

.attention_box{
	margin-bottom: 2em;
	border: solid 4px #CFD2D8;
	background-color: #fff;
}

.ttl_attention{
	font-size: 1.2em;
	font-weight: bold;
	color: var(--ttl_color);
	margin-bottom: 0.75em;
}

/*****
申し込み方法
*****/
.apply_btn_area{}
.apply_btn_area .btn_normal{}

/*****
関連リンク
*****/
.ttl_link{
	color: #3887bb;
	margin: 2em 0 0.5em 0;
}

/*****
要点まとめ
*****/
.ttl_summary{
	display: flex;
	align-items: flex-start;
	font-size: 1.2em;
	font-weight: bold;
	color: var(--ttl_color);
	margin-bottom: 0.5em;
}
.ttl_summary::before{
	flex-shrink: 0;
	content: '';
	display: block;
	width: 1em;
	height: 1em;
	margin: 0.3em 0.5em 0 0;
	background-image: url("../img/icon_summary01.png");
	background-repeat: no-repeat;
	background-size: contain;
}

.summary_box{
	position: relative;
}


/* ===========================================
	MediaQueries
=========================================== */
/* スマホ----------------------------- */
@media (max-width: 767px){
	/*--------------------
	TOP画面
	--------------------*/
	.pagetop_area{}
	
	/*--------------------
	ページヘッダー
	--------------------*/
	#page_header{}
	
	/*****
	リード
	*****/
	.lead_area{}
	
	/*--------------------
	コンテンツ
	--------------------*/
	.article_area{
		padding-top: 2em;
	}
	
	/*****
	お悩みはありませんか
	*****/
	.about_box{
		padding: 1em;
		border-radius: 0.5em;
	}
	
	/*****
	必要な条件
	*****/
	.condition_box{
		padding: 1em;
		border-radius: 0.5em;
	}
	
	/*****
	手続きの流れ
	*****/
	.flow_caption{
		margin-top: 2em;
	}
	
	/*****
	よくある質問
	*****/
	.faq_area{
		margin-bottom: 2em;
	}
	
	/*****
	担当者へ
	*****/
	.attention_box{
		padding: 1em;
		border-radius: 0.5em;
	}
	
	/*****
	申し込み方法
	*****/
	.apply_btn_area{}
	.apply_btn_area .btn_normal{
		width: 100%;
	}
	
	/*****
	関連リンク
	*****/
	/*****
	要点まとめ
	*****/
	.summary_box{
		margin-bottom: 1em;
		padding-bottom: 1em;
		border-bottom: dashed 2px var(--color_halfgray);
	}
	.cont_box .summary_box:last-of-type{
		margin-bottom: 0;
		padding-bottom: 0;
		border-bottom: none;
	}
	
}

/* PC----------------------------- */
@media (min-width: 768px){
	/*--------------------
	TOP画面
	--------------------*/
	.pagetop_area{}
	
	/*--------------------
	ページヘッダー
	--------------------*/
	#page_header{}
	
	/*****
	リード
	*****/
	.lead_area{
		text-align: center;
	}
	
	
	/*--------------------
	コンテンツ
	--------------------*/
	.article_area{
		padding-top: 4em;
	}
	
	.cont_box{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	
	/*****
	お悩みはありませんか
	*****/
	.about_box{
		width: 48%;
		padding: 1.5em;
		border-radius: 1em;
	}
	
	/*****
	必要な条件
	*****/
	.condition_box{
		width: 48%;
		padding: 1.5em;
		border-radius: 1em;
	}
	
	/*****
	手続きの流れ
	*****/
	
	/*****
	よくある質問
	*****/
	.faq_area{
		margin-bottom: 4em;
	}
	
	/*****
	担当者へ
	*****/
	.attention_box{
		width: 48%;
		padding: 1.5em;
		border-radius: 1em;
	}
	
	/*****
	申し込み方法
	*****/
	.apply_btn_area{}
	.apply_btn_area .btn_normal{
		width: 46%;
	}
	
	/*****
	関連リンク
	*****/
	/*****
	要点まとめ
	*****/
	.summary_box{
		width: 50%;
		margin-bottom: 3em;
	}
	.summary_box::after{
		content: '';
		display: block;
		width: 90%;
		height: 0;
		border-top: dashed 2px var(--color_halfgray);
		position: absolute;
		top: calc(100% + 1.5em);
	}
	.cont_box .summary_box:nth-of-type(odd)::after{
		left: 0;
	}
	.cont_box .summary_box:nth-of-type(even)::after{
		right: 0;
	}
	.cont_box .summary_box:nth-last-of-type(2)::after,
	.cont_box .summary_box:last-of-type::after{
		display: none;
	}
	
	.cont_box .summary_box:nth-of-type(odd){
		padding-right: 5%;
		border-right: dashed 2px var(--color_halfgray);
	}
	.cont_box .summary_box:nth-of-type(even){
		padding-left: 5%;
	}
	
	
	
	
}