@charset "utf-8";

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

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

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

/*****
記事ヘッダー
*****/
#page_header{
	background-image: url("../img/page_bg.jpg");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}
.page_header{
	width: 94%;
	max-width: 1400px;
	margin: 0 auto;
	padding: 2em 0 0 0;
	overflow: hidden;
	position: relative;
}

.page_title{
	max-width: 806px;
}
.header_copy01{
	max-width: 524px;
}
.header_copy02{
	max-width: 650px;
}
.header_img{
	max-width: 700px;
}

.anim_copy01{
	opacity: 0;
	transform: translateY(100%);
	animation-name: floatin;
	animation-delay: 0.5s;
	animation-duration: 1s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
.anim_copy02{
	opacity: 0;
	transform: translateY(100%);
	animation-name: floatin;
	animation-delay: 1s;
	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: 4em 0;
}

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

.icon_img{
	display: inline-block;
	width: 1em;
	margin: 0 0.5em;
	vertical-align: middle;
}

/*****
リード
*****/
.lead_title{
	text-align: center;
	margin-bottom: 1em;
}
.cmt_inner{
	display: inline-block;
	font-size: clamp(1.6rem,2.4vw,2.4rem);
	padding: 0 0.5em;
	position: relative;
}
.cmt_inner::before,
.cmt_inner::after{
	content: '';
	display: block;
	width: 2px;
	height: 100%;
	background-color: #858585;
	position: absolute;
}
.cmt_inner::before{
	top: 0;
	left: 0;
	transform: skewX(25deg);
}
.cmt_inner::after{
	top: 0;
	right: 0;
	transform: skewX(-25deg);
}

.lead_txt{
	font-size: clamp(1.6rem,2.4vw,2.4rem);
	margin-top: 1em;
}

.lead_img_area{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	align-items: center;
	margin-top: 2em;
	position: relative;
	z-index: 1;
}

.lead_img{
	max-width: 536px;
	border: solid 8px #fff;
	box-shadow: 4px 4px 4px 4px rgba(0,0,0,0.25);
}
.lead_img_txt{
	font-size: clamp(1.6rem,2.4vw,2.4rem);
	font-weight: bold;
	line-height: 1;
	color: #fff;
	margin: 2em;
	transform: rotateZ(-5deg);
}
.lead_img_txt_inner{
	display: inline-block;
	margin: 0.5em 0;
	padding: 0.5em;
	background-image: linear-gradient(to right,#8fd451 0,#0699f9 100%);
}

.lead_bg{
	max-width: 256px;
	position: absolute;
	bottom: 0;
	right: 0;
	z-index: 0;
}

/*****
学生インタビュー
*****/
#tokumoto{}
#chibana{}

.student_section{
	padding: 4em 0;
	position: relative;
}
.student_section::before{
	content: '';
	display: block;
	width: calc(100% + 5em);
	height: 0.5em;
	background-image: url("../img/dot_bg.png");
	background-size: auto 100%;
	background-repeat: repeat-x;
	background-position: center;
	position: absolute;
	top: 0;
	left: -2.5em;
	transform: translateY(-50%);
}

.title_area{}

.ttl_type01_wrap{
	position: relative;
}
.ttl_type01_wrap::before{
	content: '';
	display: block;
	width: 20em;
	height: 20em;
	background-image: radial-gradient(#CAEEFB 0,#CAEEFB 50%,transparent 50%,transparent 100%);
	position: absolute;
	top: 0;
	right: -5em;
	z-index: 0;
}

.ttl_type01{
	font-size: clamp(1.6rem,3vw,3rem);
	color: #1DA78D;
	padding: 0.5em;
	border-top: solid 6px #43bbe7;
	border-bottom: solid 6px #43bbe7;
	position: relative;
}
.ttl_type01::before,
.ttl_type01::after{
	content: '';
	display: block;
	width: 100%;
	height: 2px;
	background-color: #43bbe7;
	position: absolute;
	left: 0;
	z-index: 1;
}
.ttl_type01::before{
	top: 0.15em;
}
.ttl_type01::after{
	bottom: 0.15em;
}

.ttl_face{
	max-width: 182px;
	position: relative;
	z-index: 1;
}

.comment_area{
	margin-top: 2em;
	position: relative;
	z-index: 1;
}
.face_img{
	max-width: 290px;
	border-radius: 1em;
}
.face_img img{
	border-radius: 1em;
}
#tokumoto .face_img{
	box-shadow: -1em 1em 0 0 #F9F67E;
}
#chibana .face_img{
	box-shadow: 1em 1em 0 0 #F9F67E;
}

.text_img{
	max-width: 290px;
}

.text_area{}
.name_box{
	font-size: clamp(1.6rem,2.6vw,2.6rem);
	color: #6fcf19;
	margin: 1em 0;
	ruby-align: center;
}
.name_box .name_in{
	display: inline-block;
	padding: 0.75em 0.5em 0.25em 0.5em;
	border-top: solid 2px #6fcf19;
	border-bottom: solid 4px #6fcf19;
}


/*****
先生インタビュー
*****/
#azama{}
#azama .face_img{
	box-shadow: -1em 1em 0 0 #43bbe7;
}
#azama .name_box .name_in{
	padding: 0.25em 0.5em;
}


/*****
沖縄県建設業協会
*****/
#kutaka{}

.okinawa_a_wrap{
	border: solid 2px #1DA78D;
}

.ttl_type02{
	font-size: clamp(1.6rem,3vw,3rem);
	color: #fff;
	padding: 0.5em;
	background-color: #1DA78D;
	position: relative;
}
.ttl_type02::after{
	content: '';
	display: block;
	max-width: 350px;
	aspect-ratio: 350 / 168;
	background-image: url("../img/okinawa_a_img.png");
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	bottom: 0.25em;
	right: 1em;
}

.okinawa_text_area{
	padding: 1em;
}

#kutaka .face_img{
	box-shadow: -1em 1em 0 0 #bae396;
}

.ttl_type03{
	font-size: clamp(1.6rem,2.4vw,2.4rem);
	color: #4b7cb2;
}

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

#kutaka .name_box .name_in{
	font-weight: bold;
	padding: 0.25em 0.5em;
}


/*****
学校紹介エリア
*****/
.school_text_wrap{
	width: 100%;
	margin: 0 auto;
	padding: 1em;
	background-color: #CAEEFB;
	position: relative;
}
.school_text_wrap::before{
	content: '';
	display: block;
	width: 8em;
	height: 8em;
	background-image: url("../img/ttl_face_azama.png");
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	top: 0;
	left: 0;
	transform: translate(-25%,-25%);
}

.school_text{
	display: flex;
	align-items: center;
	padding: 1em;
	border-radius: 0.5em;
	background-color: #fff;
	background-image: repeating-linear-gradient(to right,transparent 0,transparent 14px,#CAEEFB 16px),repeating-linear-gradient(to bottom,transparent 0,transparent 14px,#CAEEFB 16px);
}
.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 a{
	display: block;
	font-size: 1.2em;
	font-weight: bold;
	text-align: center;
	color: #fff;
	padding: 0.5em;
	background-image: linear-gradient(to right,#8fd451 0,#0699f9 100%);
}


/*****
オリジナル教材
*****/
.kyozai_wrap{
	max-width: 1200px;
	margin: 0 auto;
}

.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: #1DA78D;
}
.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-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: 58%;
		position: absolute;
		top: 3em;
		right: 0;
	}
	.header_copy01{
		width: 37.5%;
		position: absolute;
		top: 52%;
		left: 52%;
	}
	.header_copy02{
		width: 46.5%;
		position: absolute;
		top: 65%;
		left: 52%;
	}
	.header_img{
		width: 50%;
		position: absolute;
		bottom: 5%;
		left: 0;
	}
	
	/*****
	記事内容
	*****/
	/*****
	リード
	*****/
	.lead_txt{
		text-align: center;
	}
	.lead_txt p{
		display: inline-block;
	}
	
	.lead_bg{
		width: 26%;
		transform: translate(5%,20%);
	}
	
	/*****
	学生インタビュー
	*****/
	.title_area{
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
	}
	#tokumoto .title_area{
		flex-direction: row-reverse;
	}
	#chibana .title_area{}
	#azama .title_area{
		flex-direction: row-reverse;
	}
	.ttl_face{
		flex-shrink: 0;
		width: 18.5%;
	}
	#tokumoto .ttl_face{
		transform: rotateZ(15deg);
		transform-origin: left top;
		margin: -0.5em -1.5em 0 1.5em;
	}
	#chibana .ttl_face{
		transform: rotateZ(-15deg);
		transform-origin: right top;
		margin: -0.5em 1.5em 0 -1.5em;
	}
	#azama .ttl_face{}
	
	.ttl_type01_wrap{
		flex-grow: 1;
	}
	
	.comment_area{
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
	}
	#tokumoto .comment_area:last-of-type{
		flex-direction: row-reverse;
	}
	#chibana .comment_area{
		flex-direction: row-reverse;
	}
	#chibana .comment_area:last-of-type{
		flex-direction: row;
	}
	#azama .comment_area{}
	
	.face_img{
		flex-shrink: 0;
		width: 29%;
		margin: 0 1em 1em 1em;
	}
	
	#chibana .name_box{
		text-align: right;
	}
	
	.text_img{
		flex-shrink: 0;
		width: 29%;
		margin: 0 1em 1em 1em;
	}
	
	/*****
	先生インタビュー
	*****/
	.row_reverse_pc .ttl_face{
		margin: -0.5em 0 0 0;
	}
	
	/*****
	沖縄県建設業協会
	*****/
	.ttl_type02::after{
		width: 20%;
	}
	
	/*****
	オリジナル教材
	*****/
	.kyozai_wrap{
		width: 90%;
		padding: 2em 0;
		background-image: url("../img/page_bg.jpg");
		background-repeat: no-repeat;
		background-position: center center;
		background-size: cover;
		background-attachment: fixed;
	}
	
	.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_title{
		width: 80%;
		margin: 0 auto;
	}
	
	.header_copy01{
		width: 56.5%;
		margin: 1em auto 0 auto;
	}
	.header_copy02{
		width: 70%;
		margin: 1em auto 0 auto;
	}
	.header_img{
		width: 80%;
		margin: 1em auto;
	}
	
	/*****
	記事内容
	*****/
	.section_wrap{
		padding: 2em 0;
	}
	.normal_section{}
	
	/*****
	リード
	*****/
	.lead_bg{
		width: 45%;
	}
	
	/*****
	学生インタビュー
	*****/
	.student_section{
		padding: 2em 0;
	}
	
	.ttl_face{
		display: none;
	}
	
	.face_img{
		width: 50%;
		position: relative;
	}
	
	#tokumoto .face_img{
		margin: 0 auto -2.5em 1em;
	}
	#chibana .face_img{
		margin: 0 1em -2.5em auto;
	}
	#tokumoto .face_img::before,
	#chibana .face_img::before{
		content: '';
		display: block;
		aspect-ratio: 182 / 176;
		width: 65%;
		background-repeat: no-repeat;
		background-size: contain;
		position: absolute;
		top: 0;
	}
	#tokumoto .face_img::before{
		background-image: url("../img/ttl_face_tokumoto.png");
		right: 0;
		transform: translateX(120%) rotateZ(10deg);
	}
	#chibana .face_img::before{
		background-image: url("../img/ttl_face_chibana.png");
		left: 0;
		transform: translateX(-120%) rotateZ(-10deg);
	}
	
	#tokumoto .name_box{
		text-align: right;
	}
	
	.text_img{
		width: 40%;
		margin: 0 auto 1em auto;;
	}
	
	/*****
	先生インタビュー
	*****/
	#azama .face_img{
		margin: 0 auto -2.5em 1em;
	}
	
	#azama .name_box{
		text-align: right;
	}
	
	/*****
	沖縄県建設業協会
	*****/
	.ttl_type02::after{
		width: 28%;
	}
	
	#kutaka .face_img{
		margin: 0 auto 2em auto;
	}
	
	/*****
	学校紹介エリア
	*****/
	.school_text{
		display: block;
	}
	.school_text .school_outer{
		width: 100%;
		margin: 0 0 0.5em 0;
	}
	
	/*****
	オリジナル教材
	*****/
	.kyozai_wrap{
		padding: 2em 0;
		background-image: url("../img/page_bg_sp.png"),linear-gradient(to right top,#8fd451 0,#0699f9 100%);
		background-repeat: no-repeat,repeat;
		background-size: contain,auto;
	}
	
	.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;
	}
	
	
}