@charset "utf-8";

/* =============================================
	今宮工科高校×日建
============================================= */
.font_blue{
	color: #0070c0;
}
.font_sky{
	color: #458bf9;
}

.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;
}

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

/***書き文字***/
.page_moji{
	width: 45%;
	position: absolute;
	bottom: 5%;
	right: 3%;
	transform: rotateZ(-5deg);
}

.writing{
	width: 100%;
	height: auto;
}

#txt{
	mask: url(#maskline);
}
.writing_text{
	fill: url(#gradient);
}
.writing_text_path{}

#maskline{}
#mask_path{}
.writing_mask{
	fill:none;
	stroke:#fff;
	stroke-linecap:round;
	stroke-linejoin:round;
	stroke-width:5;
	stroke-dasharray: 3000px;
	
	animation-name: handwriting;
	/*animation-delay: 0.5s;*/
	animation-duration: 6s;
	animation-timing-function: ease-in;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}

@keyframes handwriting{
	0%{
		stroke-dashoffset: 3000px;
	}
	100%{
		stroke-dashoffset: 0;
	}
}

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

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

/*****
リード
*****/
.lead_section_wrap{
	filter: drop-shadow(2px 2px 6px rgba(0,0,0,0.2));
}

.lead_section{
	text-align: center;
	width: 100%;
	padding: 2em 2em 4em 2em;
	border: solid 2px #0070c0;
	background-color: #fff;
	clip-path: polygon(0% 0%,100% 0%,100% calc(100% - 4em),calc(100% - 4em) 100%,0% 100%);
	position: relative;
}
.lead_section::after{
	content: '';
	display: block;
	width: 4em;
	height: 4em;
	border: solid 2px #0070c0;
	background-image: linear-gradient(to right bottom,#fff 20%,#ccc 80%);
	position: absolute;
	bottom: -2px;
	right: -2px;
}

.lead_title_wrap{
	display: inline-block;
	margin-bottom: 3em;
	padding: 2em;
	background-color: rgba(255,255,255,0.65);
	background-image: repeating-linear-gradient(to right,transparent 0,transparent 14px,#ffe04b 16px),repeating-linear-gradient(to bottom,transparent 0,transparent 14px,#ffe04b 16px);
	position: relative;
}
.lead_title_wrap::before,
.lead_title_wrap::after{
	content: '';
	display: block;
	background-color: #858585;
	position: absolute;
}
.lead_title_wrap::before{
	width: 2px;
	height: 100%;
	top: 0.5em;
	right: -0.5em
}
.lead_title_wrap::after{
	width: 100%;
	height: 2px;
	bottom: -0.5em;
	right: -0.5em;
}

.lead_title{
	font-size: clamp(1.6rem,3.2vw,3.2rem);
	color: #0070c0;
	text-align: center;
	margin-bottom: 0.5em;
}
.lead_title .lead_font{
	font-size: 1.5em;
	color: #458bf9;
}

.lead_copy{}

/*****
学生インタビュー
*****/
.student_section{
	border-top: solid 40px #FFFF99;
}

.ttl_type01{
	text-align: center;
}

.student_wrap{
	margin: 3em 0;
	padding: 4em 0;
	background-image: url("../img/section_bg.jpg");
	background-repeat: no-repeat;
	background-position: center top;
	position: relative;
}
.student_wrap::after{
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	background-image: linear-gradient(to bottom,#fff 0,transparent 20%,transparent 40%,#fff 80%);
	position: absolute;
	bottom: 0;
	left: 0;
}
.student_section .student_wrap:first-of-type::after{
	background-image: linear-gradient(to bottom,transparent 0,transparent 40%,#fff 80%);
}

.student_section .student_wrap:first-of-type{
	margin-top: 0;
}

.student_area{
	padding: 2em;
	border: solid 4px;
	border-radius: 2em;
	background-color: #fff;
	position: relative;
	z-index: 1;
}
/*.student_section */.student_wrap:nth-of-type(odd) .student_area{
	border-color: #ffdc10;
}
/*.student_section */.student_wrap:nth-of-type(even) .student_area{
	border-color: #9ad5e1;
}

.icon_student{}
.student_ttl_wrap{
	margin-bottom: 1em;
}
.student_face{}
.student_ttl{
	filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.2));
}


/*****
先生インタビュー
*****/
.teacher_wrap01,
.teacher_wrap02{
	margin: 3em 0;
	position: relative;
}

.teachar_ttl{
	margin-bottom: 2em;
}

/*****
キャッチ
*****/
.bg_sky{
	background-image: url("../img/header_bg.jpg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% auto;
}

.catch_area{
	text-align: center;
	padding: 4em 0;
}

.catch{
	filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.2));
}

/*****
学校紹介エリア
*****/
.bg_yell{
	background-color: #FFFF99;
}
.school_text_wrap{
	width: 100%;
	margin: 0 auto;
	padding: 1em;
	border-radius: 0.75em;
	background-color: #fff;
	background-image: repeating-linear-gradient(to right,transparent 0,transparent 14px,#ffe04b 16px),repeating-linear-gradient(to bottom,transparent 0,transparent 14px,#ffe04b 16px);
	position: relative;
}
.school_text_wrap::before,
.school_text_wrap::after{
	content: '';
	display: block;
	background-color: #858585;
	position: absolute;
}
.school_text_wrap::before{
	width: 2px;
	height: 100%;
	top: 0.5em;
	right: -0.5em
}
.school_text_wrap::after{
	width: 100%;
	height: 2px;
	bottom: -0.5em;
	right: -0.5em;
}

.school_text{
	display: flex;
	align-items: center;
	color: #0070c0;
	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: #0070c0;
	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){
	/*****
	記事ヘッダー
	*****/
	#page_header{
		background-size: cover;
	}
	
	/*****
	リード
	*****/
	
	
	
	/*****
	学生インタビュー
	*****/
	.student_wrap{
		background-size: cover;
	}
	
	.icon_student{
		width: 16%;
		max-width: 156px;
		position: absolute;
		top: 0;
		left: 48%;
		transform: translateY(95%);
	}
	.student_ttl_wrap{
		display: flex;
		justify-content: space-between;
		flex-direction: row-reverse;
		align-items: flex-end;
	}
	.student_face{
		width: 40%;
		max-width: 370px;
	}
	.student_ttl{
		width: 59.5%;
		max-width: 550px;
	}
	
	
	/*****
	先生インタビュー
	*****/
	.teacher_wrap01{}
	.teacher_wrap02{
		display: flex;
		justify-content: space-between;
	}
	
	.icon_teacher{}
	.teacher_wrap01 .icon_teacher{
		width: 6%;
		position: absolute;
		top: -0.5em;
		left: 56%;
	}
	.teacher_wrap02 .icon_teacher{
		width: 12%;
	}
	.teacher_area02{
		width: 82%;
	}
	
	.teacher_face{
		float: right;
		width: 37%;
		max-width: 370px;
		margin-top: -1em;
	}
	
	.teacher_wrap01 .teachar_ttl{
		width: 55%;
		max-width: 550px;
	}
	.teacher_wrap02 .teachar_ttl{
		width: 67.5%;
		max-width: 550px;
	}
	
	
	/*****
	オリジナル教材
	*****/
	/***教材図表***/
	.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{
		background-size: auto 100%;
	}
	
	/*****
	記事内容
	*****/
	.section_wrap{
		padding: 2em 0;
	}
	.normal_section{
		font-size: 1.4rem;
	}
	
	
	/*****
	リード
	*****/
	.lead_section{
		padding: 0.5em 0.5em 2em 0.5em;
		clip-path: polygon(0% 0%,100% 0%,100% calc(100% - 2em),calc(100% - 2em) 100%,0% 100%);
	}
	.lead_section::after{
		width: 2em;
		height: 2em;
	}
	
	.lead_title_wrap{
		margin-bottom: 2em;
		padding: 1em;
	}
	
	/*****
	学生インタビュー
	*****/
	.student_section{
		border-top: solid 10px #FFFF99;
	}
	.student_wrap{
		margin: 2em 0;
		padding: 2em 0;
		background-size: auto 100%;
	}
	
	.student_area{
		padding: 1em;
	}
	
	.icon_student{
		width: 20%;
		position: absolute;
		top: 0%;
		left: 5%;
		transform: translateY(220%);
	}
	.student_ttl_wrap{}
	.student_face{
		width: 60%;
		margin: 0 0 1em auto;
	}
	.student_ttl{
		text-align: center;
	}
	
	
	/*****
	先生インタビュー
	*****/
	.teacher_face{
		width: 60%;
		margin: 0 0 1em auto;
	}
	.teacher_wrap01{
		margin: 2em auto 0 auto;
	}
	.teacher_wrap02{
		margin: 0 auto;
	}
	.teacher_wrap01 .icon_teacher{
		width: 15%;
		position: absolute;
		top: 10%;
		left: 5%;
	}
	
	.teachar_ttl{
		margin-bottom: 1em;
	}
	
	.teacher_wrap02 .icon_teacher{
		width: 10%;
		margin: 0.5em auto;
	}
	
	/*****
	キャッチ
	*****/
	.catch_area{
		padding: 0;
	}
	
	/*****
	学校紹介エリア
	*****/
	.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;
	}
	
	
}