@charset "utf-8";
/*======================================
定期講習の特徴
========================================*/
/*------------------------------
ページヘッダー
------------------------------*/
.page_header_wrap{
	background-image: url("../img/page_header.jpg");
}

/*------------------------------
特徴
------------------------------*/
.point_area{
	display: flex;
 flex-wrap: wrap;
	margin: 1em 0;
}
.point_box{
	border: solid 2px #dddcdc;
}
.point_inner{
	padding: 0.5em 1em 1em 1em;
}
.ttl_point{
	font-size: 1.1em;
	font-weight: bold;
	color: var(--sub_color);
}

/*****
受講者様の声
*****/
.voice_area{}
.voice_box{
	margin-top: 2em;
}
.voice_icon{
	display: inline-block;
	text-align: center;
}
.voice_text{
	padding: 1em;
	border-radius: 0.5em;
	background-color: #ffefa7;
	position: relative;
}
.voice_text::before{
	content: '';
	display: block;
	width: 1.5em;
	height: 1.2em;
	background-color: #ffefa7;
}

/*****
よくあるご質問
*****/
.faq_set{
	margin-bottom: 3em;
}

.faq_q,
.faq_a{
	display: flex;
	align-items: flex-start;
	width: 80%;
}
.faq_q{}
.faq_a{
	justify-content: flex-end;
	margin: 1em 0 0 auto;
}

.icon_q,
.icon_a{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-shrink: 0;
	font-size: 1.5em;
	font-weight: bold;
	line-height: 1;
	color: #fff;
	aspect-ratio: 1 / 1;
	width: 2em;
	padding: 0.5em;
	border-radius: 50%;
}
.icon_q{
	background-color: #0e993c;
}
.icon_a{
	background-color: #ff6900;
}

.balloon_q,
.balloon_a{
	padding: 1em;
	border-radius: 0.5em;
	position: relative;
}
.balloon_q{
	margin-left: 2em;
	background-color: #9fd7b2;
}
.balloon_a{
	margin-right: 2em;
	background-color: #ffd6ba;
}

.balloon_q::before,
.balloon_a::before{
	content: '';
	display: block;
	width: 1.5em;
	height: 1.2em;
	position: absolute;
	top: 1em;
}
.balloon_q::before{
	background-color: #9fd7b2;
	clip-path: polygon(0 50%,100% 0,100% 100%);
	right: 100%;
}
.balloon_a::before{
	background-color: #ffd6ba;
	clip-path: polygon(0 0,100% 50%,0 100%);
	left: 100%;
}

/* ===========================================
	MediaQueries
=========================================== */
/* PC----------------------------- */
@media (min-width: 768px){
	/*------------------------------
	特徴
	------------------------------*/
	.point_area{}
	.point_box{
		width: 30%;
		margin-right: 5%;
		margin-bottom: 3em;
	}
	.point_box:nth-of-type(3n){
		margin-right: 0;
	}
	
	/*****
	受講者様の声
	*****/
	.voice_box{
		display: flex;
		align-items: center;
	}
	.voice_icon{
		flex-shrink: 0;
		margin-right: 2em;
	}
	.voice_text{}
	.voice_text::before{
		clip-path: polygon(0 50%,100% 0,100% 100%);
		position: absolute;
		top: 50%;
		right: 100%;
		transform: translateY(-50%);
	}
}

/* スマホ----------------------------- */
@media (max-width: 767px){
	/*------------------------------
	ページヘッダー
	------------------------------*/
	.page_header_wrap{
		margin-top: 7.498em;
	}
	
	
	/*------------------------------
	特徴
	------------------------------*/
	.point_area{
		justify-content: space-between;
	}
	.point_box{
		width: 48%;
		margin-bottom: 2em;
	}
	
	/*****
	受講者様の声
	*****/
	.voice_box{}
	.voice_icon{}
	.voice_text{
		margin-top: 1.5em;
	}
	.voice_text::before{
		clip-path: polygon(50% 0,100% 100%,0 100%);
		position: absolute;
		bottom: 100%;
		left: 3em;
	}
}