@charset "utf-8";
/* =============================================
	1級建築士 News
============================================= */
.bg_red{
	background-color: #cc0000;
}
.bg_blue{
	background-color: #084dbe;
}

.under_yell{
	padding: 0 0.15em;
	background-image: linear-gradient(to top,transparent 0, transparent 10%, #FFEC2E 10%, #FFEC2E 25%, transparent 25%);
}

.pass_news{
	width: 100%;
	overflow: hidden;
}

.interview_all{
	background-image: linear-gradient(to right bottom,#e8351d 0,#f18900 50%);
}

.btn_back{
	font-size: 1.6rem;
	font-weight: bold;
	text-align: center;
	margin: 1em auto;
}
.btn_back a{
	display: inline-block;
	color: #fff;
	width: 100%;
	max-width: 360px;
	padding: 1em;
	border-radius: 0.5em;
	background-color: #ed7451;
}

/*****
ヘッダー相互リンク用
*****/
.small_header_list li.mutual_link{}
.small_header_list li.mutual_link a{
	color: #fff;
	padding: 0.25em 0.5em 0.25em 1.75em;
	border-radius: 0.5em;
}
.small_header_menu .small_header_list li.mutual_link a:before{
	left: 0.5em;
}

/*---------------------------------------------
タイトル、イントロ
---------------------------------------------*/
.page_header_area{
	background-image: url("../img/2023/2023_page_header_bg.png");
	background-position: center top;
	background-size: auto 100%;
	position: relative;
}
.page_header_area .icon01,
.page_header_area .icon02,
.page_header_area .icon03,
.page_header_area .icon04,
.page_header_area .icon05,
.page_header_area .icon06{
	content: '';
	display: block;
	width: clamp(4px,0.8vw,10px);
	border-radius: 5px;
	background-color: #fff;
	position: absolute;
	z-index: 98;
	opacity: 0;
	transform-origin: bottom left;
}
.page_header_area .icon01{
	height: 400px;
	bottom: 70%;
	left: 70%;
}
.page_header_area .icon02{
	height: 400px;
	bottom: 40%;
	left: 20%;
}
.page_header_area .icon03{
	height: 400px;
	bottom: 30%;
	left: 40%;
}
.page_header_area .icon04{
	height: 200px;
	bottom: 65%;
	left: 5%;
}
.page_header_area .icon05{
	height: 400px;
	bottom: 5%;
	left: 15%;
}
.page_header_area .icon06{
	height: 300px;
	bottom: 20%;
	left: 80%;
}
.page_header_area .anim01{
	animation-name: anim_line;
	animation-duration: 2s;
	animation-delay: 2s;
	animation-iteration-count: infinite;
}
.page_header_area .anim02{
	animation-name: anim_line;
	animation-duration: 3s;
	animation-delay: 0.5s;
	animation-iteration-count: infinite;
}
.page_header_area .anim03{
	animation-name: anim_line;
	animation-duration: 4s;
	animation-delay: 1s;
	animation-iteration-count: infinite;
}
/*****
タイトルアニメーション設定
*****/
@keyframes anim_line{
	0%{
		opacity: 1;
		transform: rotateZ(45deg) scaleY(0) translateY(0);
	}
	80%{
		opacity: 0;
		transform: rotateZ(45deg) scaleY(2) translateY(-50%);
	}
	100%{
		opacity: 0;
		transform: rotateZ(45deg) scaleY(0) translateY(0);
	}
}

/*****
ページヘッダー
*****/
.page_header{
	width: 94%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 5% 0;
	position: relative;
	z-index: 99;
}

/***イントロ***/
.lead_area{
	background-image: url("../img/2023/2023_lead_bg.png");
	background-repeat: no-repeat;
	background-position: right bottom;
	background-size: 84% auto;
}

.lead_section{
	width: 94%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 6em 0 15em 0;
	position: relative;
}
.ttl_lead{
	font-size: clamp(3.2rem,4vw,5.2rem);
	text-align: center;
	color: #fff;
	margin-bottom: 1em;
}
.lead_text{
	font-size: clamp(2rem,2.1vw,2.6rem);
	line-height: 1.6;
	font-weight: bold;
	text-align: center;
}
.lead_img01{}
.lead_img02{}
.lead_img03{}

/*---------------------------------------------
インタビュー者
---------------------------------------------*/
.interview_section{
	margin-top: 6em;
	padding: 4em 0;
}

.ttl_interview{
	text-align: right;
	width: 94%;
	max-width: 1200px;
	margin: 0 auto;
}
.ttl_interview img{
	width: 66%;
	max-width: 792px;
	height: auto;
}

.interview_area{
	width: 80%;
	margin-top: 6em;
}
.l_box{}
.r_box{}

.interview_area .single_face{}

.interview_area .single_text{
	font-size: 1.8rem;
	text-align: center;
}
.single_text .ttl_type01{
	font-size: clamp(2.4rem,2vw,3.6rem);
	color: #fff;
	margin-bottom: 1em;
}
.single_text .single_name{
	display: inline-block;
	text-align: left;
}

.ttl_type02{
	font-size: 3.8rem;
	font-weight: normal;
	color: #fff;
}


/*---------------------------------------------
QA(合格者の声)
---------------------------------------------*/
.qa_area{
	font-size: 1.6rem;
	padding: 1em;
	background-image: url("../img/message_bg.png");
	background-repeat: no-repeat;
	background-position: left top;
	background-size: 100% auto;
}
.qa_area .qa_face{
	float: right;
	width: 30%;
	max-width: 180px;
	margin: 0 0 0.5em 1em;
}
.qa_area .qa_face img{
	width: 100%;
	height: auto;
}
.qa_area .qa_name{
	font-size: 2.4rem;
	color: #cc0000;
	margin-bottom: 1em;
	position: relative;
	text-shadow: 0 2px 0 #fff;
}
.qa_area .qa_name::after{
	content: '';
	display: block;
	width: 4em;
	height: 0.5em;
	border-bottom: solid 2px #858585;
	border-right: solid 2px #858585;
	position: absolute;
	bottom: 0;
	left: 3em;
	transform: skewX(15deg);
}

.qa_area .qa_comment{
	margin: 1em 0 2em 0;
	padding: 1em;
	border-radius: 0.5em;
	background-color: #FFEEBB;
}

.qa_area .qa_ttl{
	font-size: 2.4rem;
	color: #ff8800;
	text-shadow: 0 2px 1px #fff;
}
.qa_ttl .icon_q{
	display: inline-block;
	font-size: 0.8em;
	margin-right: 1em;
	padding: 0.25em 0.5em;
	border: solid 1px #ff8800;
}
.qa_area .qa_text{
	margin: 1em 0 3em 0;
	padding: 0.5em;
	border-bottom: dashed 2px #ff8800;
	text-shadow: 0 1px 1px #fff;
}


/*---------------------------------------------
	1級建築士ストレート合格への道
---------------------------------------------*/
.normal_section{
 font-size: 1.6rem;
	line-height: 1.6;
	width: 94%;
	max-width: 1000px;
 margin: 4em auto 0 auto;
	padding: 2em 0;
	background-color: #fff;
	position: relative;
}

.normal_section_wrap{
	padding: 4em 0;
	background-color: #FFEEBB;
}
.normal_section_wrap .normal_section{
	margin: 0 auto;
	padding: 2em;
}

.loadto_ttl{
	font-size: 3rem;
	text-align: center;
	color: #fff;
	margin-bottom: 0.5em;
	padding: 0.5em;
	border-bottom: solid 4px #FF8800;
	background-color: #cc0000;
	background-image: url("../img/ttl_bg.png");
	text-shadow: 0 2px 2px rgba(0,0,0,0.5);
}

.loadto_area{
	text-align: center;
	width: 100%;
	max-width: 720px;
	margin: 0 auto 1em auto;
	position: relative;
}
.loadto_area img{
	width: 100%;
	height: auto;
}
.loadto_map{}
.loadto_fukidashi01{
	width: 64%;
	max-width: 458px;
	position: absolute;
	top: 6%;
	right: 0;
}
.loadto_fukidashi02{
	width: 70%;
	max-width: 503px;
	position: absolute;
	top: 32%;
	right: 4%;
}


.icon_loadto{
	display: block;
	font-size: 1.8rem;
	font-weight: bold;
	color: #fff;
	text-align: center;
	padding: 1.5em;
	border-radius: 50%;
	background-color: #FF8800;
	position: absolute;
	top: 2em;
	right: -2em;
	transform: rotateZ(-10deg);
	box-shadow: 2px 4px 2px 0 rgba(0,0,0,0.2);
}
.icon_loadto::after{
	content: '';
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 1em 2em 1em 0;
	border-color: transparent #FF8800 transparent transparent;
	position: absolute;
	bottom: 0;
	left: -0.5em;
	transform: rotateZ(-30deg);
}


/*---------------------------------------------
	コース紹介
---------------------------------------------*/
.stady_ttl{
	font-size: 3rem;
	text-align: center;
	color: #fff;
	margin-bottom: 0.5em;
	padding: 0.5em;
	border-bottom: solid 4px #FF8800;
	background-color: #cc0000;
	background-image: url("../img/ttl_bg.png");
	text-shadow: 0 2px 2px rgba(0,0,0,0.5);
}

.icon_stady{
	display: block;
	font-size: 1.5em;
	font-weight: bold;
	color: #fff;
	text-align: center;
	padding: 1.5em;
	border-radius: 50%;
	background-color: #FF8800;
	position: absolute;
	top: -3em;
	left: -2em;
	transform: rotateZ(10deg);
	box-shadow: 2px 4px 2px 0 rgba(0,0,0,0.2);
}
.icon_stady::after{
	content: '';
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 1em 0 1em 2em;
	border-color: transparent transparent transparent #FF8800;
	position: absolute;
	bottom: 0;
	right: -0.5em;
	transform: rotateZ(30deg);
}



/*------------------------------
スライド要素のCSS
------------------------------*/
.slide_area_wrap{
	width: 100%;
	height: 100%;
	background-color: rgba(60,0,0,0.85);
	position: fixed;
	top: 0;
	left: -100%;
	z-index: 9999;
}
.slide_area_wrap::before{
	content: '×';
	display: block;
	font-size: 4vh;
	text-align: center;
	line-height: 1;
	color: #fff;
	padding: 0 0.25em;
	border: solid 1px #fff;
	position: absolute;
	top: 2%;
	right: 2%;
	cursor: pointer;
}
.slide_area_wrap .slide_area_inner{
	line-height: 1.6;
	width: 90%;
	max-width: 970px;
	max-height: 80%;
	overflow-y: scroll;
	background-color: #fff;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}


/* ===========================================
	MediaQueries
=========================================== */
/* PC----------------------------- */
@media screen and (min-width: 768px){
	/*---------------------------------------------
	タイトル、イントロ
	---------------------------------------------*/
	.page_header{
		min-width: 970px;
	}
	
	/***イントロ***/
	.lead_img01,
	.lead_img02,
	.lead_img03{
		position: absolute;
	}
	.lead_img01{
		top: 0;
		left: -5%;
	}
	.lead_img02{
		top: 25%;
		right: -5%;
	}
	.lead_img03{
		bottom: 5%;
		left: 5%;
	}
	
	/*---------------------------------------------
	インタビュー者
	---------------------------------------------*/
	.interview_section{
		background-image: url("../img/2023/2023_section_bg_l.png"), url("../img/2023/2023_section_bg_r.png");
		background-repeat: repeat-y;
		background-position: left top,right top;
		background-size: 23% auto;
	}
	
	.interview_area{
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		min-width: 970px;
	}
	.l_box{}
	.r_box{
		flex-direction: row-reverse;
		margin-left: auto;
		margin-right: 0;
	}
	
	.interview_area .single_face{
		width: 50%;
	}
	.interview_area .single_text{
		width: 50%;
	}
	
	/*****
	バナーエリア
	*****/
	.btn_bn_area .btn_banner{
		max-width: 714px;
		margin: 0 auto;
	}
	.btn_bn_area.flex_between_pc .btn_banner{
		width: 49.5%;
		max-width: 476px;
		margin: 0;
	}
}

/* スマホ----------------------------- */
@media screen and (max-width: 767px){
	.small_header_menu .small_header_list{
		display: block;
		text-align: right;
	}
	.small_header_menu .small_header_list li:last-of-type{
		margin-top: 0.5em;
	}
	
 /*---------------------------------------------
	タイトル、イントロ
	---------------------------------------------*/
	.lead_section{
		padding: 2em 0 0 0;
	}
	
	.lead_area{
		background-size: 100% auto;
	}
	
	.lead_img_sp{
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin-bottom: 1em;
	}
	.lead_img01{
		width: 20%;
		max-width: 82px;
	}
	.lead_img02{
		width: 35%;
		max-width: 120px;
	}
	.lead_img03{
		width: 65%;
		max-width: 110px;
		margin: 1em auto 0 5%;
	}
	
	.ttl_lead{
		font-size: clamp(1.8rem,5vw,2.4rem);
	}
	.lead_text{
		font-size: clamp(1.6rem,4.4vw,2.2rem);
	}
	
	
	/*---------------------------------------------
	インタビュー者
	---------------------------------------------*/
	.interview_section{
		margin-top: 2em;
		padding: 2em 0;
		background-image: url("../img/2023/2023_section_bg_r.png");
		background-repeat: repeat-y;
		background-position: right top;
		background-size: 23% auto;
	}
	
	.interview_area{
		width: 100%;
		margin-top: 2em;
	}
	.interview_area .single_text{
		font-size: 1.4rem;
		width: 80%;
		margin: 1em auto 0 auto;
	}
	
	.single_text .ttl_type01{
		font-size: clamp(1.8rem,5vw,2.4rem);
	}
	.ttl_type02{
		font-size: clamp(1.8rem,5vw,2.4rem);
	}
	
	/*---------------------------------------------
	QA(合格者の声)
	---------------------------------------------*/
	.qa_area{
		font-size: 1.4rem;
		padding: 2em 1em;
	}
	.qa_area .qa_name{
		font-size: 1.8rem;
	}
	.qa_area .qa_ttl{
		font-size: 1.6rem;
	}
	.qa_area .qa_text{}
	
	
	
	/*---------------------------------------------
	1級建築士ストレート合格への道
	---------------------------------------------*/
	.normal_section{
		font-size: 1.4rem;
		margin: 2em auto 0 auto;
		padding: 1em 0;
	}
	
	.normal_section_wrap .normal_section{
		padding: 1em 0.5em;
	}
	
	.loadto_ttl{
		font-size: 1.6rem;
	}
	
	.icon_loadto{
		font-size: 1.4rem;
		top: -5em;
	}
	
	/*---------------------------------------------
	コース紹介
	---------------------------------------------*/
	.stady_ttl{
		font-size: 1.6rem;
	}
	
	.icon_stady{
		font-size: 1em;
		top: -3em;
	}
 
}