@charset "utf-8";

/* =============================================
	沖縄県立沖縄工業高等学校×日建
============================================= */
#collabo_wrap{
	overflow: hidden;
}

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

.font_orange{
	color: #ff7c47;
}

.bg_blue{
	background-color: #4b7cb2;
}

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

/*****
記事ヘッダー
*****/
#page_header{
	background-image: url("../img/header_bg.png");
	background-position: center center;
	background-size: auto 100%;
	border-bottom: solid 1px #ccc;
}
.page_header{
	width: 94%;
	max-width: 1400px;
	margin: 0 auto;
	position: relative;
}
.page_title{
	max-width: 770px;
}


.anim{
	opacity: 0;
	transform: translateY(100%);
	animation-name: floatin;
	animation-delay: 0.5s;
	animation-duration: 1s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}

@keyframes floatin{
	0%{
		opacity: 0;
		transform: translateY(100%);
	}
	100%{
		opacity: 1;
		transform: translateY(0);
	}
}

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

.normal_section{
	font-size: clamp(1.4rem,1.6vw,1.6rem);
	width: 94%;
	max-width: 1000px;
	margin: 0 auto;
	padding: 0;
	position: relative;
}

/*****
リード
*****/
.lead_area{
	padding: 1em;
	background-image: linear-gradient(to bottom,#f7add6 0,#6ad9d3 100%);
	position: relative;
}

.lead_inner{
	padding: 4em 2em;
	border-radius: 1em;
	background-color: #fff;
	position: relative;
}
.lead_inner::before,
.lead_inner::after{
	content: '';
	display: block;
	aspect-ratio: 1200 / 270;
	width: calc(100% + 2em);
	background-repeat: no-repeat;
	background-size: 100% auto;
	position: absolute;
	left: -1em;
	z-index: 1;
}
.lead_inner::before{
	background-image: url("../img/lead_bg_top.png");
	background-position: center bottom;
	top: -1em;
}
.lead_inner::after{
	background-image: url("../img/lead_bg_bottom.png");
	background-position: center top;
	bottom: -1em;
}

.lead_text{
	font-size: 1.125em;
	position: relative;
	z-index: 2;
}
.lead_title{
	font-size: clamp(1.6rem,2.4vw,2.4rem);
	color: #ff7c47;
	text-align: center;
	margin-bottom: 1em;
	padding: 0.5em;
	border: solid 2px #6ad9d3;
	border-radius: 0.5em;
	background-color: #fff;
}


/*****
学生インタビュー
*****/
#kawakami{}
#sakamoto{}
#yamasato{}

.student_area{
	padding: 2em;
	border: solid 1em #F6FABC;
	border-radius: 2em;
	background-image: linear-gradient(rgba(255,255,255,0.65) 0,rgba(255,255,255,0.65) 100%),url("../img/lead_bg_bottom.png");
	background-repeat: repeat,no-repeat;
	background-position: center center,center bottom;
	background-size: auto auto,100% auto;
	position: relative;
}
#yamasato.student_area{
	border: solid 1em #daf3fa;
}

.normal_section .student_area:last-of-type{
	margin-bottom: 0;
}

.ttl_num{
	max-width: 100px;
	position: absolute;
	top: 0;
	right: 0;
	transform: translate(25%,-25%) rotateZ(5deg);
}
.face_img{
	max-width: 280px;
}
.face_img img{
	border-radius: 50%;
}
.name_box{
	font-size: clamp(1.6rem,2vw,2rem);
	line-height: 1;
	text-align: right;
	ruby-align: center;
}
.name_box .name{
	display: inline-block;
	padding: 1em 1em 0.5em 1em;
	border: solid 2px #6ad9d3;
	border-radius: 0.5em;
	background-color: #fff;
	transform: rotateZ(-5deg);
}
#yamasato .name_box{
	text-align: left;
}
#yamasato .name_box .name{
	padding: 0.5em 1em 0.5em 1em;
}

.sub_face{
	max-width: 320px;
}
.sub_yamasato{
	max-width: 126px;
}

.ttl_type01{
	display: flex;
	align-items: center;
	font-size: clamp(1.6rem,2.4vw,2.4rem);
	color: #ff7c47;
	margin: 1em 0 0.5em 0;
}
.ttl_type01::before{
	content: '';
	display: inline-block;
	width: 2em;
	height: 2px;
	margin-right: 0.5em;
	background-color: #ff7c47;
}


/*****
合格者OB 企業 メッセージ
*****/
.ttl_type02{
	text-align: center;
}

#taira{}
#ohshiro{}

.ob_area{
	margin-top: 4em;
}

.ob_face_img{
	text-align: center;
	max-width: 200px;
}
.ob_face_img .ob_face{
	position: relative;
}
.ob_face_img .ob_face img{
	border-radius: 2em;
}
.ob_face_img .ob_face::before{
	content: '';
	display: block;
	aspect-ratio: 76 / 72;
	width: 38%;
	max-width: 76px;
	background-image: url("../img/ob_face_icon.png");
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	top: 0;
	right: 0;
	transform: translate(25%,-25%);
}

.ob_text{}

.ttl_type03{
	font-size: clamp(1.6rem,2.4vw,2.4rem);
	color: #ff7c47;
	margin: 0 0 1em 0;
	padding: 0 1em 0.5em 0.5em;
	border-bottom: solid 4px #ffd800;
	position: relative;
}
.ttl_type03::after{
	content: '';
	display: block;
	width: 1em;
	height: 1em;
	background-color: #ffd800;
	clip-path: polygon(0 0,100% 100%,0 100%);
	position: absolute;
	bottom: -1px;
	right: 0;
}

.ob_bg{
	max-width: 460px;
}

/*****
学校紹介エリア
*****/
.school_text_wrap{
	width: 100%;
	margin: 0 auto;
	padding: 1em;
	background-color: #6ad9d3;
	position: relative;
}

.sub_school_img{
	width: 13%;
	max-width: 126px;
	position: absolute;
	bottom: 0;
	right: 0;
	transform: translate(25%,50%);
}

.school_text{
	display: flex;
	align-items: center;
	padding: 1em;
	border-radius: 0.5em;
	background-color: #fff;
}
.school_text .school_outer{
	flex-shrink: 0;
	width: 50%;
	margin-right: 1em;
}
.school_text .school_outer img{
	width: 100%;
	height: auto;
}
.school_text .link_school{
	padding: 0.25em;
}
.school_text .link_school a{
	display: block;
	font-size: 1.2em;
	font-weight: bold;
	text-align: center;
	color: #ff7c47;
	padding: 0.5em;
	border: solid 2px #666666;
	position: relative;
}
.school_text .link_school a::before,
.school_text .link_school a::after{
	content: '';
	display: block;
	width: 1em;
	height: calc(100% + 0.5em);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center top,center bottom;
}
.school_text .link_school a::before{
	background-image: url("../img/link_school_bg_tl.png"),url("../img/link_school_bg_bl.png");
	position: absolute;
	top: -0.25em;
	left: -0.25em;
}
.school_text .link_school a::after{
	background-image: url("../img/link_school_bg_tr.png"),url("../img/link_school_bg_br.png");
	position: absolute;
	top: -0.25em;
	right: -0.25em;
}


/*****
オリジナル教材
*****/
.kyozai_wrap{
	max-width: 1200px;
	margin: 0 auto;
	background-image: linear-gradient(to bottom,#f7add6 0,#6ad9d3 100%);
}
.kyozai_wrap_inner{
	padding: 2em;
	border-radius: 1em;
	background-color: #fff;
	position: relative;
}
.kyozai_wrap_inner::before,
.kyozai_wrap_inner::after{
	content: '';
	display: block;
	aspect-ratio: 1200 / 270;
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	z-index: 1;
}
.kyozai_wrap_inner::before{
	background-image: url("../img/lead_bg_top.png");
}
.kyozai_wrap_inner::after{
	background-image: url("../img/lead_bg_bottom.png");
}

.kyozai_wrap_inner .normal_section{
	z-index: 2;
}

.ttl_kyozai{
	font-size: clamp(1.6rem,2.4vw,2.4rem);
	text-align: center;
	color: #fff;
	margin-bottom: 1em;
	padding: 0.5em;
	border: solid 2px #fff;
	border-radius: 1em;
	background-color: #6ad9d3;
}
.kyozai_text_area{
	text-align: center;
	padding: 0 0 4em 0;
	position: relative;
}
.kyozai_img_area{}
.kyozai_img01{
	max-width: 200px;
}
.kyozai_img02{
	max-width: 200px;
}

.kyozai_text{
	display: inline-block;
	text-align: left;
	padding: 2em;
	border: solid 2px #6ad9d3;
	border-radius: 1em;
	background-color: rgba(255,255,255,0.85);
}

.kyozai_area{
	padding: 1em;
	background-color: #fff;
}

/*大分高校と共通*/
.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: clamp(1.6rem,2.4vw,2.4rem);
	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){
	/*****
	記事ヘッダー
	*****/
	.page_header{
		aspect-ratio: 1400 / 800;
	}
	.page_title{
		width: 55%;
		position: absolute;
		top: 23.5%;
		left: 10%;
	}
	
	
	/*****
	記事内容
	*****/
	/*****
	リード
	*****/
	
	/*****
	学生インタビュー
	*****/
	.student_area{
		margin-bottom: 6em;
	}
	
	.student_area::after{
		content: '';
		display: block;
		clear: both;
	}
	
	.ttl_num{
		width: 11.5%;
	}
	#yamasato .ttl_num{
		left: 0;
		transform: translate(-25%,-25%) rotateZ(-5deg);
	}
	
	.face_img{
		float: right;
		width: 31%;
		margin: 0 0 1em 1em;
	}
	#yamasato .face_img{
		float: left;
		margin: 0 1em 1em 0;
	}
	
	.sub_face{
		width: 35.5%;
		position: absolute;
		top: -3em;
		left: -2em;
	}
	.sub_yamasato{
		width: 14%;
		position: absolute;
		top: -3em;
		right: -2em;
	}
	
	
	/*****
	合格者OB 企業 メッセージ
	*****/
	.ob_area{
		display: flex;
		flex-direction: row-reverse;
	}
	.ob_face_img{
		flex-shrink: 0;
		width: 20%;
		margin-left: 2em;
	}
	
	.ob_bg{
		width: 46%;
	}
	
	/*****
	学校紹介エリア
	*****/
	.sub_school_img{}
	
	
	/*****
	オリジナル教材
	*****/
	.kyozai_wrap{
		width: 90%;
		padding: 2em;
	}
	.kyozai_wrap_inner{}
	.kyozai_wrap_inner::before,
	.kyozai_wrap_inner::after{
		width: calc(100% + 4em);
		left: -2em;
	}
	.kyozai_wrap_inner::before{
		top: -2em;
	}
	.kyozai_wrap_inner::after{
		bottom: -2em;
	}
	
	.kyozai_img_area{}
	.kyozai_img01{
		width: 20%;
		position: absolute;
		bottom: 1em;
		left: 0;
	}
	.kyozai_img02{
		width: 20%;
		position: absolute;
		bottom: 1em;
		right: 2%;
	}
	
	.kyozai_text{
		font-size: 1.15em;
	}
	
	/***教材図表***/
	.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){
	/*---------------------------------------------
	記事コンテンツ
	---------------------------------------------*/
	/*****
	記事ヘッダー
	*****/
	#page_header{}
	.page_header{
		aspect-ratio: 1.5 / 1;
	}
	.page_title{
		width: 80%;
		position: absolute;
		top: 20%;
		left: 5%;
	}
	
	/*****
	記事内容
	*****/
	.section_wrap{
		padding: 2em 0;
	}
	.normal_section{}
	
	/*****
	リード
	*****/
	.lead_inner{
		padding: 1em;
	}
	
	/*****
	学生インタビュー
	*****/
	.student_area{
		margin-bottom: 2em;
		padding: 1em;
	}
	.ttl_num{
		width: 15%;
	}
	
	.face_img{
		width: 65%;
		margin: 0 auto;
	}
	.name_box,
	#yamasato .name_box{
		text-align: center;
		margin-top: -1em;
	}
	
	.sub_face{
		text-align: center;
		margin: 0 auto;
	}
	.sub_yamasato{
		width: 20%;
		margin: 0 auto;
	}
	
	
	/*****
	合格者OB 企業 メッセージ
	*****/
	.ob_face_img{
		margin: 0 auto 1em auto;
	}
	
	.ob_bg{
		width: 50%;
		margin: 1em auto 0 auto;
	}
	
	/*****
	学校紹介エリア
	*****/
	.school_text{
		display: block;
	}
	.school_text .school_outer{
		width: 100%;
		margin: 0 0 0.5em 0;
	}
	
	.sub_school_img{}
	
	/*****
	オリジナル教材
	*****/
	.kyozai_wrap{
		padding: 1em;
	}
	.kyozai_wrap_inner{
		padding: 1em 0;
	}
	.kyozai_wrap_inner::before,
	.kyozai_wrap_inner::after{
		width: calc(100% + 2em);
		left: -1em;
	}
	.kyozai_wrap_inner::before{
		top: -1em;
	}
	.kyozai_wrap_inner::after{
		bottom: -1em;
	}
	
	.kyozai_text{
		padding: 1em;
	}
	
	.kyozai_img_area{
		display: flex;
		justify-content: center;
		margin-top: 1em;
	}
	.kyozai_img01,
	.kyozai_img02{
		width: 25%;
	}
	
	
	.ttl_type04{
		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;
	}
	
	
}