@charset "utf-8";

/* =============================================
	今宮工科高校×日建
============================================= */
#collabo_wrap *{
	box-sizing: border-box;
}

.font_blue{
	color: #0070c0;
}

.bg_blue{
	background-color: #0070c0;
}

.p_line p{
	margin-top: 0.85em;
}
.p_line p:first-of-type{
	margin-top: 0;
}

.li_indent1 > li,
.text_indent1{
	text-indent: -1em;
	padding-left: 1em;
}

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

/*****
記事ヘッダー
*****/
#page_header{
	background-image: url("../img/header_bg.png");
}
.page_header{
	width: 100%;
	max-width: 1400px;
	margin: 0 auto;
}



/*****
記事内容
*****/
.section_wrap{
	padding: 4em 0;
}

.normal_section{
	font-size: 1.6rem;
	width: 94%;
	max-width: 970px;
	margin: 0 auto;
}

/*****
リード
*****/
.lead_section{
	font-size: 1.8rem;
	width: 94%;
	max-width: 970px;
	margin: 0 auto;
	padding: 2em;
	border-radius: 1em;
	background-color: #fff;
}

.ttl_lead{
	font-size: 3rem;
	text-align: center;
	color: #0070c0;
	margin-bottom: 0.5em;
	border-bottom: solid 2px #0070c0;
}

.lead_box{}

.lead_img{
	text-align: center;
	width: 100%;
	max-width: 420px;
	margin: 0 auto;
}

.img_caption{
	font-size: 0.8em;
	text-align: left;
}

/*****
インタビュー
*****/
.interview_section{
	width: 94%;
	max-width: 1400px;
	margin: 0 auto;
	position: relative;
}

.inter_area{}
.inter_ttl{}
.inter_txt{}
.inter_img_wrap{}
.inter_img01{}
.inter_img02{}
.inter_img03{}

/***個別インタビュー***/
.single_interview{
	padding: 4em;
	margin-bottom: 4em;
	background-image: url("../img/inter_wrap_t.png"),url("../img/inter_wrap_b.png");
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-position: left top,left bottom;
	position: relative;
}
.normal_section .single_interview:last-of-type{
	margin-bottom: 0;
}

.inter_wrap_tl{
	width: 20%;
	max-width: 190px;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	transform: translate(-25%,-25%);
}
.inter_wrap_br{
	width: 23.5%;
	max-width: 226px;
	position: absolute;
	bottom: 0;
	right: 0;
	z-index: -1;
	transform: translate(25%,25%);
}

.face_box{}

.face_img_l{}
.face_img_r{}

.face_box .name_box_r{}
.face_box .name_box_l{}

.name01,
.name02,
.name03{
	font-size: 2.6rem;
}
.name01,
.name_kana01{
	color: #1e257b;
}
.name02,
.name_kana02{
	color: #e84476;
}
.name03,
.name_kana03,
.name03_sub{
	color: #c06c28;
}

.name_kana01,
.name_kana02,
.name_kana03{
	margin-bottom: 1em;
}

.ttl_type01,
.ttl_type02,
.ttl_type03{
	font-size: 3rem;
	margin-bottom: 0.5em;
	position: relative;
}
.ttl_type01::before,
.ttl_type02::before,
.ttl_type03::before{
	content: '';
	display: block;
	width: 5em;
	height: 0.65em;
	position: absolute;
	bottom: 0;
	left: -0.5em;
	z-index: -1;
	transform: rotate(8deg);
}
.ttl_type01::before{
	background-color: rgba(0,133,208,0.2);
}
.ttl_type02::before{
	background-color: rgba(234,91,134,0.2);
}
.ttl_type03::before{
	background-color: rgba(249,204,164,0.5);
}


/*****
学校紹介エリア
*****/
.school_text_wrap{
	width: 100%;
	margin: 0 auto;
	padding: 0.5em;
	border-radius: 0.75em;
	background-color: #0070c0;
}
.school_text{
	display: flex;
	align-items: center;
	color: #fff;
	padding: 0.5em 1em;
	border: dashed 1px #fff;
	border-radius: 0.5em;
}
.school_text .school_outer{
	flex-shrink: 0;
	width: 50%;
	margin-right: 1em;
}
.school_text .school_outer img{
	width: 100%;
	height: auto;
}
.school_text a{
	font-size: 1.2em;
	color: #fff;
	text-decoration: underline;
}


/*****
オリジナル教材
*****/
.sub_ttl{
	font-size: 1.2em;
	text-align: center;
	margin-bottom: 0.5em;
}
.sub_ttl .sub_inner{
	display: inline-block;
	padding: 0 1em;
	position: relative;
}
.sub_ttl .sub_inner::before,
.sub_ttl .sub_inner::after{
	content: '';
	display: block;
	width: 2px;
	height: 100%;
	background-color: #858585;
	position: absolute;
}
.sub_ttl .sub_inner::before{
	top: 0;
	left: 0;
	transform: skewX(25deg);
}
.sub_ttl .sub_inner::after{
	top: 0;
	right: 0;
	transform: skewX(-25deg);
}

.ttl_type04{
	font-size: 3.2rem;
	text-align: center;
	color: #fff;
	margin-bottom: 1em;
	padding: 0.5em 1em;
	border-radius: 1em;
	background-color: #0070c0;
}

/***教材図表***/
.origin_area{
	position: relative;
}

.text_origin{
	text-align: right;
}

.origin_comment{
	font-size: 0.85em;
	padding: 1em 0.5em 0.5em 1em;
	border: solid 1px #db2b32;
	background-color: rgba(255,255,255,0.85);
	position: relative;
}

.ori01{}
.ori02{}
.ori03{}

.origin_comment .ori_num{
	display: inline-block;
	line-height: 1;
	color: #db2b32;
	padding: 0.5em;
	border: solid 1px #db2b32;
	border-radius: 50%;
	background-color: #fff;
	position: absolute;
	top: 0;
	left: 0;
	transform: translate(-50%,-50%);
}

/***教材一覧***/
.book_area01,
.book_area02{
	display: flex;
}

.book_single{
	text-align: center;
}


/* ===========================================
	MediaQueries
=========================================== */
/* PC----------------------------- */
@media screen and (min-width: 768px){
	/*****
	リード
	*****/
	.lead_box{
		display: flex;
	}
	.lead_img{
		flex-shrink: 0;
		margin-right: 1em;
	}
	
	/*****
	インタビュー
	*****/
	.interview_section{
		font-size: clamp(2rem,2vw,2.8rem);
	}
	
	.inter_area{
		display: flex;
	}
	
	.inter_ttl{
		width: 10%;
		max-width: 134px;
		margin-right: 2.5%;
	}
	
	.inter_txt{
		flex-grow: 1;
		padding: 1em 0;
	}
	
	.inter_img01{
		width: 38.5%;
		max-width: 534px;
		position: absolute;
		bottom: 0;
		left: 15%;
	}
	.inter_img02{
		width: 35%;
		max-width: 488px;
		position: absolute;
		bottom: 8%;
		right: 0;
	}
	.inter_img03{
		width: 20%;
		max-width: 276px;
		position: absolute;
		top: 0;
		right: 5%;
	}
	
	/***個別インタビュー***/
	.single_interview::after{
		content: '';
		display: block;
		clear: both;
	}
	
	.face_img_l{
		float: left;
		margin: 0 2em 1em -2em;
	}
	.face_img_r{
		float: right;
		margin: 0 -2em 1em 2em;
	}
	
	.face_box .name_box_r{
		margin: 0 0 0 auto;
		width: calc(100% - 280px);
	}
	.face_box .name_box_l{}
	
	
	/*****
	オリジナル教材
	*****/
	/***教材図表***/
	.ori01{
		width: 30%;
		position: absolute;
		top: 32%;
		left: 0;
	}
	.ori02{
		width: 15%;
		position: absolute;
		bottom: 32%;
		right: 0;
	}
	.ori03{
		width: 22%;
		position: absolute;
		bottom: 10%;
		left: 0;
	}
	
	/***教材一覧***/
	.book_area01{
		justify-content: center;
	}
	.book_area02{
		justify-content: space-between;
	}
	
	.book_single{
		width: 300px;
		margin-top: 3em;
	}
	.book_area01 .book_single{
		margin: 3em 2em 0 2em;
	}
	
}

/* スマホ----------------------------- */
@media screen and (max-width: 767px){
	
	
	/*---------------------------------------------
	記事コンテンツ
	---------------------------------------------*/
	/*****
	記事ヘッダー
	*****/
	
	
	/*****
	記事内容
	*****/
	.section_wrap{
		padding: 2em 0;
	}
	.normal_section{
		font-size: 1.4rem;
		padding: 2em 0;
	}
	
	
	/*****
	リード
	*****/
	.lead_section{
		font-size: 1.6rem;
		padding: 1em;
	}
	.ttl_lead{
		font-size: 1.8rem;
	}
	
	
	/*****
	インタビュー
	*****/
	.interview_section{
		font-size: min(3vw,2.4rem);
	}
	
	.inter_area{
		display: flex;
	}
	.inter_ttl{
		width: 9%;
		margin-right: 1%;
	}
	.inter_txt{}
	
	.inter_img_wrap{
		position: relative;
	}
	.inter_img01{
		width: 48.5%;
		margin: 0 0 0 auto;
	}
	.inter_img02{
		width: 44%;
		position: absolute;
		top: 5%;
		left: 5%;
	}
	.inter_img03{
		width: 25%;
		margin: 0 0 0 auto;
	}
	
	/***個別インタビュー***/
	.single_interview{
		padding: 1.5em 1em;
	}
	
	.face_box{
		display: flex;
		align-items: flex-end;
		margin-bottom: 1em;
	}
	.flex_row_reverse_sp{
		justify-content: flex-end;
		flex-direction: row-reverse;
	}
	
	.face_img_l,
	.face_img_r{
		flex-shrink: 0;
		width: 40%;
		max-width: 260px;
	}
	.face_img_l{
		margin-right: 1em;
	}
	.face_img_r{
		margin-left: 1em;
	}
	
	.face_box .name_box_r{}
	.face_box .name_box_l{
		flex-grow: 1;
	}
	
	.name01,
	.name02,
	.name03{
		font-size: clamp(1.6rem,3.2vw,2.6rem);
	}
	
	.ttl_type01,
	.ttl_type02,
	.ttl_type03{
		font-size: clamp(1.6rem,3.6vw,2.8rem);
	}
	
	
	/*****
	学校紹介エリア
	*****/
	.school_text{
		display: block;
	}
	.school_text .school_outer{
		width: 100%;
		margin: 0 0 0.5em 0;
	}
	
	/*****
	オリジナル教材
	*****/
	.ttl_type04{
		font-size: 1.8rem;
		padding: 0.5em;
	}
	
	/***教材図表***/
	.origin_comment{
		margin: 1.5em 0 0 1em;
	}
	
	/***教材一覧***/
	.book_area01,
	.book_area02{
		justify-content: space-between;
		flex-wrap: wrap;
	}
	
	.book_single{
		width: 46%;
		margin: 2em 0 0 0;
	}
	
	
}