@charset "utf-8";

/* =============================================
	福井工業大学×日建
============================================= */
h1, h2, h3, h4, h5, h6{
	font-size: 1em;
}
#collabo_wrap{
	overflow: hidden;
}

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

.font_mincho{
	font-family: "Noto Serif", serif;
}

.font_blue_base{
	color: #4e95d9;
}

.font_blue{
	color: #A2D8F0;
}
.font_pink{
	color: #f6c1fb;
}

.bg_blue{
	background-color: #A2D8F0;
}
.bg_pink{
	background-color: #f6c1fb;
}

.bg_red{
	background-color: #db2b32;
}

.underline_green{
	background-image: linear-gradient(to top,#A2D8F0 0,#A2D8F0 40%,transparent 40%);
}


/*****
記事ヘッダー
*****/
#page_header{
	background-image: linear-gradient(to right,#c5ebff 0,#fddff4 100%);
}
.page_header{
	font-size: clamp(1.8rem,3.57vw,5rem);
	width: 100%;
	max-width: 1400px;
	position: relative;
}
.page_img{
	max-width: 1286px;
	margin: 0 0 0 auto;
}

.header_ttl01,
.header_ttl02{
	display: inline-block;
	line-height: 1;
	padding: 0.25em 1em 0.25em 0.5em;
	background-color: rgba(255,255,255,1);
	clip-path: polygon(0 0, calc(100% - 1em) 0, 100% 100%,0 100%);
	position: absolute;
	left: 20%;
}
.header_ttl01{
	bottom: 2em;
	opacity: 0;
	transform: translateY(100%);
	animation-name: floatin;
	animation-delay: 0.5s;
	animation-duration: 1s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
.header_ttl02{
	bottom: -1px;
	opacity: 0;
	transform: translateY(100%);
	animation-name: floatin;
	animation-delay: 0.75s;
	animation-duration: 1s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}


.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: 8em 0;
}

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

.section_wrap .normal_section:first-of-type{
	margin: 0 auto;
}

/*****
リード
*****/
.lead_area{
	font-size: clamp(1.4rem,2.2vw,2.2rem);
	line-height: 1.8;
	width: 94%;
	max-width: 1000px;
	margin: 0 auto;
	padding: 0;
	position: relative;
}

.lead_txt_area{
	position: relative;
	z-index: 2;
}

.lead_bg_area{
	aspect-ratio: 1 / 1;
	width: 20%;
	position: absolute;
	bottom: 0;
	right: 2%;
	overflow: hidden;
	z-index: 1;
}
.lead_bg_area li{
	width: 45%;
	max-width: 90px;
	opacity: 0;
	animation-name: lead_blink;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	position: absolute;
}
.lead_bg_area li:nth-of-type(1){
	top: 0;
	left: 40%;
	animation-delay: 0.2s;
}
.lead_bg_area li:nth-of-type(2){
	transform: scale(0.5);
	transform-origin: left top;
	top: 28%;
	left: 0;
	animation-delay: 0.4s;
}
.lead_bg_area li:nth-of-type(3){
	transform: scale(0.7);
	transform-origin: left bottom;
	bottom: 0;
	left: 22%;
	animation-delay: 0.8s;
}
.lead_bg_area li:nth-of-type(4){
	transform: scale(0.5);
	transform-origin: right top;
	top: 50%;
	right: 0;
	animation-delay: 1s;
}

@keyframes lead_blink{
	0%{
		opacity: 0;
	}
	40%{
		opacity: 1;
	}
	60%{
		opacity: 1;
	}
	100%{
		opacity: 0;
	}
}

/*****
学生インタビュー
*****/
.student_wrap{
	padding: 12em 0;
	background-image: linear-gradient(to bottom,#72E4D6 0,#A2D8F0 50%,#f6c1fb 100%);
}
.student_wrap .normal_section{
	margin: 10em auto 0 auto;
}
.student_wrap .normal_section:first-of-type{
	margin: 0 auto;
}

.section_ttl_wrap{
	width: 100%;
	mix-blend-mode: multiply;
	position: relative;
}
.section_ttl{
	width: 100%;
	max-width: 886px;
	position: absolute;
	top: 0;
	right: 0;
	transform: translateY(calc(-12em + -70%));
}

.student_face{
	max-width: 240px;
	box-shadow: -1em -1em 0 0 rgba(255,255,255,0.5);
}

.ttl_type01_box{
	font-size: clamp(1.6rem,3vw,3rem);
	font-family: "Noto Serif", serif;
	font-weight: bold;
	color: #fff;
	text-shadow: 0 0 2px #000;
}

.name_box{
	display: inline-block;
	text-align: left;
	margin-top: 2em;
	padding: 0.5em 3.5em 0.5em 1em;
	background-image: linear-gradient(to bottom,rgba(255,255,255,0.5) 0,#fff 95%);
	clip-path: polygon(0 0,calc(100% - 3em) 0,100% 100%,0 100%);
	transform: translateY(1px);
}

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

.student_comment{
	margin-top: 2em;
}
.cmt_box{}
.cmt_box::before,
.cmt_box::after{
	content: '';
	display: block;
	background-color: #2dd091;
}
.cmt_ttl{
	font-size: clamp(1.6rem,2.4vw,2.4rem);
	color: #2dd091;
	text-align: center;
}
.cmt_face{
	max-width: 400px;
}

/*****
教授インタビュー
*****/
.tc_header{}

.tc_face{
	max-width: 240px;
	box-shadow: -1em -1em 0 0 rgba(255,255,255,0.5);
}
.ttl_type02{
	font-size: clamp(1.8rem,3vw,3rem);
	font-family: "Noto Serif", serif;
	font-weight: bold;
	margin-bottom: 2.5em;
	text-indent: -2.5em;
	padding-left: 2.5em;
	color: #fff;
	text-shadow: 0 0 2px #000;
}

.name_tc{
	padding: 0.5em 0 0.5em 1em;
	border-left: solid 6px #A2D8F0;
}

/*****
大学コラボ
*****/
.collabo_wrap{
	padding: 12em 0 4em 0;
}
.collabo_wrap .normal_section:first-of-type{
	margin: 0 auto;
}

.nikken_collabo_ttl{
	width: 100%;
	max-width: 800px;
	margin: 1em auto 2em auto;
}

.collttl_fukui,
.collttl_nikken{
	margin-bottom: 2.5em;
	padding: 0 1em;
}
.collttl_fukui{
	border-top: solid 4px #A2D8F0;
}
.collttl_nikken{
	border-top: solid 4px #f6c1fb;
}

.collttl_in{
	display: inline-block;
	font-size: clamp(1.6rem,2.6vw,2.6rem);
	color: #fff;
	transform: translateY(-1px);
}
.collttl_fukui .collttl_in{
	padding: 0.5em 3em 0.5em 1em;
	clip-path: polygon(0 0,100% 0,calc(100% - 2.5em) 100%,0 100%);
}
.collttl_nikken .collttl_in{
	padding: 0.5em 1em 0.5em 3em;
	clip-path: polygon(0 0,100% 0,100% 100%,2.5em 100%);
}

.ttl_type03{
	font-size: clamp(1.6rem,3vw,3rem);
	font-family: "Noto Serif", serif;
	font-weight: bold;
	margin-top: 0.5em;
}

.collimg{
	max-width: 360px;
}

/*****
学校紹介エリア
*****/
.bg_university{
	background-image: linear-gradient(to bottom,#A2D8F0 0,#f6c1fb 100%);
}

.ttl_type04{
	font-size: clamp(1.8rem,3vw,3rem);
	font-family: "Noto Serif", serif;
	font-weight: bold;
	color: #fff;
	margin-bottom: 1em;
	padding: 0 0.5em 0.5em 0.5em;
	border-bottom: solid 2px #fff;
}

.unv_lead{
	font-size: 1.15em;
	font-weight: bold;
	color: #fff;
	text-align: center;
	margin-bottom: 1em;
}
.unv_text{
	margin: 0 0 0 auto;
	padding: 2em;
	background-color: #fff;
	position: relative;
}
.unv_text::before{
	content: '';
	display: block;
	width: 2em;
	height: 2em;
	background-color: #fff;
	clip-path: polygon(0.5em 0,100% 0,0 100%);
	position: absolute;
	top: 100%;
	left: 4em;
}

.unv_name_area{
	display: flex;
	align-items: flex-end;
	position: relative;
}
.unv_face{
	max-width: 280px;
	margin-right: 1em;
	filter: drop-shadow(-1em -0.5em 0 rgba(255,255,255,0.5));
}
.unv_name{
	font-size: clamp(1.2rem,1.6vw,1.6rem);
}

.ttl_type05{
	font-size: clamp(1.8rem,2.6vw,2.6rem);
	font-weight: bold;
	font-family: "Noto Serif", serif;
	color: #fff;
	margin-bottom: 1.5em;
	padding: 0.5em;
}
.ttl_type05_sub{
	font-size: clamp(1.6rem,2.2vw,2.2rem);
	margin-bottom: 1em;
}

.school_outer{
	max-width: 450px;
}

.school_text_wrap{
	display: flex;
	justify-content: center;
	margin-top: 2em;
}
.school_text{
	padding: 1em;
	border: solid 2px #4e95d9;
}

.fukidashi{
	display: flex;
	justify-content: center;
	margin-bottom: 2em;
}
.fukidashi_txt{
	padding: 1em;
	border: solid 2px #A2D8F0;
	border-radius: 0.5em;
	background-color: #fff;
	position: relative;
	filter: drop-shadow(0.25em 0.25em 0 #A2D8F0);
}
.fukidashi_txt::before,
.fukidashi_txt::after{
	content: '';
	display: block;
	width: 1em;
	height: 1em;
	position: absolute;
	top: calc(100% - 1px);
	left: 30%;
}
.fukidashi_txt::before{
	background-color: #fff;
	clip-path: polygon(0 0,100% 0,100% 100%);
}
.fukidashi_txt::after{
	background-color: #A2D8F0;
	clip-path: polygon(0 0,100% calc(100% - 2px),100% 100%,0 2px);
}



/* ===========================================
	MediaQueries
=========================================== */
/* PC----------------------------- */
@media (min-width: 768px){
	.flex_pc{
		display: flex;
	}
	.flex_between_pc{
		display: flex;
		justify-content: space-between;
	}
	.align_items_start{
		align-items: flex-start;
	}
	.align_items_end{
		align-items: flex-end;
	}
	.row_reverse_pc{
		flex-direction: row-reverse;
	}
	
	/*****
	記事ヘッダー
	*****/
	#page_header{
		padding-top: 4em;
	}
	.page_header{
		margin: 0 0 0 auto;
	}
	.page_img{
		width: 92%;
	}
	
	/*****
	記事内容
	*****/
	/*****
	リード
	*****/
	.lead_txt_area{
		display: inline-block;
	}
	
	/*****
	学生インタビュー
	*****/
	.student_wrap{
		margin: 10em 0 6em 0;
	}
	
	.student_sub{
		flex-grow: 1;
	}
	.student_face{
		flex-shrink: 0;
		width: 24%;
		margin-right: 2em;
	}
	
	.student_comment{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.cmt_box{
		margin-right: 1em;
	}
	.cmt_box::before,
	.cmt_box::after{
		width: 3em;
		height: 2em;
		margin: 0.5em 0 0.5em auto;
	}
	.cmt_box::before{
		clip-path: polygon(0 0,100% calc(100% - 2px),100% 100%,0 2px);
	}
	.cmt_box::after{
		clip-path: polygon(0 calc(100% - 2px),100% 0,100% 2px,0 100%);
	}
	.cmt_ttl{
		padding-right: 1em;
	}
	.cmt_face{
		flex-shrink: 0;
		width: 41.5%;
	}
	
	/*****
	教授インタビュー
	*****/
	.tc_header{
		display: flex;
		align-items: flex-start;
		margin-bottom: 2em;
		padding: 2em 1em 0 2em;
		background-image: linear-gradient(to bottom,#f6c1fb 0,#A2D8F0 9em,transparent 9em);
	}
	
	.tc_face{
		flex-shrink: 0;
		width: 24%;
		margin-right: 2em;
	}
	
	.tc_sub{
		flex-grow: 1;
	}
	
	/*****
	大学コラボ
	*****/
	.collabo_wrap{
		margin: 10em 0 6em 0;
	}
	
	.collttl_fukui,
	.collttl_nikken{
		display: flex;
		align-items: flex-start;
	}
	.collttl_fukui{}
	.collttl_nikken{
		flex-direction: row-reverse;
	}
	.collttl_in{
		flex-shrink: 0;
	}
	
	.collimg{
		flex-shrink: 0;
		width: 36%;
		margin: 1em;
	}
	
	/*****
	学校紹介エリア
	*****/
	.unv_text{
		width: 87%;
	}
	
	.unv_name_area{
		margin-top: -7.5em;
	}
	.unv_face{
		width: 28%;
	}
	
	.school_outer{
		width: 45%;
		float: right;
		margin: 0 0 1em 1em;
	}
	
	
}

/* スマホ----------------------------- */
@media screen and (max-width: 767px){
	/*****
	記事ヘッダー
	*****/
	#page_header{
		padding-top: 2em;
	}
	.page_header{
		margin: 0 auto;
	}
	.page_img{
		width: 100%;
	}
	.header_ttl01,
	.header_ttl02{
		left: 10%;
	}
	
	/*****
	記事内容
	*****/
	.section_wrap{
		padding: 4em 0;
	}
	
	/*****
	リード
	*****/
	/*****
	学生インタビュー
	*****/
	.student_wrap{
		margin: 4em 0;
		padding: 6em 0 4em 0;
	}
	
	.student_wrap .normal_section{
		margin: 6em auto 0 auto;
	}
	
	.section_ttl{
		transform: translateY(calc(-6em + -70%));
	}
	
	.student_face{
		width: 65%;
		margin: 0 auto 1em auto;
	}
	
	.ttl_type01_box .mgn_b01{
		margin-bottom: 0.5em;
	}
	
	.student_comment{}
	.cmt_box{
		display: flex;
		justify-content: center;
		margin-bottom: 0.5em;
	}
	.cmt_box::before,
	.cmt_box::after{
		width: 1em;
		height: auto;
		margin: 0 0.5em;
	}
	.cmt_box::before{
		clip-path: polygon(0 0,2px 0,100% 100%,calc(100% - 2px) 100%);
	}
	.cmt_box::after{
		clip-path: polygon(calc(100% - 2px) 0,100% 0,2px 100%,0 100%);
	}
	
	.cmt_ttl{}
	.cmt_face{
		width: 65%;
		margin: 0 auto;
	}
	
	/*****
	教授インタビュー
	*****/
	.tc_face{
		width: 65%;
		margin: 0 auto 0.5em auto;
	}
	
	.ttl_type02{
		padding: 0.5em 0.5em 0.5em 3.5em;
		background-image: linear-gradient(to bottom,#f6c1fb 0,#A2D8F0 100%);
	}
	
	/*****
	大学コラボ
	*****/
	.collabo_wrap{
		margin: 4em 0;
		padding: 6em 0 4em 0;
	}
	
	.collimg{
		margin-top: 1em;
	}
	
	.collttl_nikken{
		text-align: right;
	}
	.collttl_nikken .ttl_type03{
		text-align: left;
	}
	
	/*****
	学校紹介エリア
	*****/
	.unv_lead{
		text-align: left;
	}
	.unv_text{
		padding: 1em;
	}
	.unv_text::before{
		left: 40%;
	}
	
	.unv_name_area{
		margin-top: -0.5em;
	}
	.unv_face{
		width: 40%;
		filter: drop-shadow(-0.25em -0.25em 0 rgba(255,255,255,0.5))
	}
	
	.school_outer{
		margin-bottom: 1em;
	}
	
}