@charset "utf-8";

/* =============================================
	旭川工業×日建
============================================= */
#collabo_wrap *{
	box-sizing: border-box;
}
/*---------------------------------------------
	アニメーション
---------------------------------------------*/
.anim_ttl{
	animation-name: anim_ttl;
	animation-duration: 0.8s;
	animation-delay: 0s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
.anim_lr{
	opacity: 0;
	animation-name: anim_lr;
	animation-duration: 0.8s;
	animation-delay: 0.5s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
.anim_rl{
	opacity: 0;
	animation-name: anim_rl;
	animation-duration: 0.8s;
	animation-delay: 0.5s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}


/*****
アニメーション設定
*****/
.slide_wrap{
	opacity: 0;
}
@keyframes anim_ttl{
	0%{
		opacity: 0;
		transform: skewX(-10deg) translateX(50%);
	}
	100%{
		opacity: 1;
		transform: skewX(-10deg) translateX(0);
	}
}

@keyframes anim_lr{
	0%{
		opacity: 0;
		transform: translateX(-100%);
	}
	100%{
		opacity: 1;
		transform: translateX(0);
	}
}
@keyframes anim_rl{
	0%{
		opacity: 0;
		transform: translateX(100%);
	}
	100%{
		opacity: 1;
		transform: translateX(0);
	}
}


/*---------------------------------------------
	記事コンテンツ
---------------------------------------------*/
.font_yell{
	color: #FFFF00;
}
.bg_red{
	background-color: #b31c36;
}

a.arrow_link{}
a.arrow_link::before{
	content: '▲';
	display: inline-block;
	font-size: 0.8em;
	margin-right: 0.25em;
	padding-right: 0.2em;
	transform: rotateZ(90deg);
}

/*****
記事ヘッダー
*****/
#asahikawa_header{
	width: 100%;
	overflow: hidden;
	position: relative;
}
.page_ttl_area{
	width: 100%;
}
.page_ttl_area .ttl_area{}
.ttl_area .ttl_asahikawa{}

.page_header{
	position: relative;
}
.page_header .header_bg_l{
	background-image: url("../img/header_bg01.jpg");
	background-repeat: no-repeat;
	background-position: right top;
	position: relative;
}
.header_bg_l .hdr_txt_l{
	text-align: right;
	color: #fff;
	padding: 0.5em;
	background-color: #b31c36;
}
.page_header .header_bg_r{
	background-color: #b31c36;
}
.header_bg_r .rimg{}
.header_bg_r .rimg img{
	border-radius: 1.5em;
}
.header_bg_r .hdr_txt_r{
	font-weight: bold;
	color: #483813;
	background-color: #fff;
}

/*****
記事内容
*****/
.section_wrap{
	padding: 2em 0 4em 0;
	background-image: url("../img/section_bg.jpg");
}

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

.ttl_type01{
	margin: 0 0 2em 5em;
}
.ttl_type01::before{
	content: '';
	display: block;
	width: 10em;
	height: 10em;
	margin: 0 0 -7em -5em;
	background-color: #b31c36;
}
.ttl_type01 h2{
	font-size: 3rem;
	position: relative;
}
.ttl_type01 .ttl_box{
	display: inline-block;
	margin-bottom: 4px;
	padding: 0.5em;
	border: solid 1px #555;
	background-color: #fff;
}
.ttl_type01 .sub_ro{
	margin-left: -1em;
}

/*****
リード
*****/
.lead_area{
	font-size: 1.8rem;
	width: 80%;
	margin: 0 0 0 auto;
	padding: 1em;
	background-color: rgba(255,255,255,0.85);
}


/*****
インタビュー
*****/
.single_interview{
	padding: 2em;
	border-radius: 1em;
	background-color: #fff;
	position: relative;
}
.student_box{
	border: solid 4px #ED7D31;
}
.teacher_box{
	border: solid 4px #70AD47;
}

.single_interview p{
	margin-bottom: 0.75em;
}
.single_interview p:last-of-type{
	margin-bottom: 0;
}

.prof_area{
	display: flex;
	align-items: center;
	margin-bottom: 2em;
}

.face{
	flex-shrink: 0;
	width: 200px;
	margin-right: 3em;
	position: relative;
	transform: rotateZ(-3deg);
}
.face img{
	border-radius: 1em;
	position: relative;
	z-index: 99;
}
.face::before{
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 1em;
	position: absolute;
	top: 1em;
	left: 1em;
	z-index: 98;
	transform: rotateZ(8deg);
}
.student_box .face::before{
	border: solid 1px #ffbe00;
	background-color: #FFF2CC;
}
.teacher_box .face::before{
	border: solid 1px #5ec61b;
	background-color: #E2F0D9;
}

.name{
	font-size: 2.6rem;
	margin-bottom: 0.5em;
}

.ttl_type02{
	font-size: 2rem;
	color: #fff;
}
.ttl_type02 span{
	display: inline-block;
	margin-bottom: 0.25em;
	padding: 0.5em;
}
.student_box .ttl_type02 span{
	background-color: #ED7D31;
}
.teacher_box .ttl_type02 span{
	background-color: #70AD47;
}

.face_img{}
.face_img img{
	border-radius: 1em;
	position: relative;
	z-index: 99;
}
.face_img::before{
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 1em;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 98;
	transform: rotateZ(-10deg);
}
.student_box .face_img::before{
	border: solid 1px #ffbe00;
	background-color: #FFF2CC;
}
.teacher_box .face_img::before{
	border: solid 1px #5ec61b;
	background-color: #E2F0D9;
}

/*****
学校紹介エリア
*****/
.school_text_wrap{
	width: 100%;
	margin: 2em auto 0 auto;
	padding: 0.5em;
	border-radius: 0.75em;
	background-color: #b31c36;
	box-sizing: border-box;
}
.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;
}

/*****
合格率
*****/
.goukaku_area{
	padding: 2em;
	background-color: rgba(255,255,255,0.85);
}

.ttl_type03{
	font-size: 2.4rem;
	text-align: center;
	color: #b31c36;
}

.comment_box{
	font-size: 3rem;
	text-align: center;
	color: #fff;
	margin: 1em 0 2em 0;
	padding: 0.5em;
	background-color: #b31c36;
	position: relative;
}
.comment_box::after{
	content: '';
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 1em 0.5em 0 0.5em;
	border-color: #b31c36 transparent transparent transparent;
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
}
.comment_box .white_box{
	color: #b31c36;
	margin-bottom: 0.5em;
	padding: 0.25em 0.5em;
	background-color: #fff;
}

.ttl_type04{
	font-size: 1.8rem;
	color: #b31c36;
	margin-bottom: 0.5em;
}
.icon_shikaku{
	display: inline-block;
	color: #fff;
	margin-right: 1em;
	padding: 0.25em 1em;
	border-radius: 1.5em;
	background-color: #b31c36;
}

/*****
リンクボタン
*****/
.linkbtn_area{
	display: flex;
	justify-content: center;
	margin: 2em auto;
}

.linkbtn_area li{
	margin: 0 1em;
}


/* ===========================================
	MediaQueries
=========================================== */
/* PC----------------------------- */
@media screen and (min-width: 768px){
	/*---------------------------------------------
	記事コンテンツ
	---------------------------------------------*/
	/*****
	記事ヘッダー
	*****/
	.page_ttl_area{
		position: absolute;
		top: 35%;
		left: 0;
		z-index: 999;
	}
	.page_ttl_area .ttl_area{
		width: 94%;
		max-width: 1200px;
		margin: 0 auto;
	}
	.ttl_area .ttl_asahikawa{
		width: 60.5%;
		max-width: 726px;
	}
	
	.page_header{
		display: flex;
	}
	.page_header .header_bg_l{
		width: 50%;
		background-size: cover;
	}
	.header_bg_l .hdr_txt_l{
		font-size: 1.8rem;
		width: 70%;
		position: absolute;
		bottom: 0;
		left: 0;
	}
	.page_header .header_bg_r{
		width: 50%;
	}
	.header_bg_r .rimg{
		width: 95%;
		max-width: 860px;
		margin: 2.5% auto 0 auto;
	}
	.header_bg_r .hdr_txt_r{
		font-size: 2rem;
		margin: 1em 0 0 2.5%;
		padding: 0.5em 0.5em 1em 1em;
		border-radius: 1.5em 0 0 0;
	}
	
	/*****
	インタビュー
	*****/
	.face_img{
		position: absolute;
		top: -15px;
		right: -100px;
		transform: rotateZ(5deg);
	}
	.face_img img{
		border: solid 3px #fff;
	}
	
}

/* スマホ----------------------------- */
@media screen and (max-width: 767px){
	
	
	/*---------------------------------------------
	記事コンテンツ
	---------------------------------------------*/
	/*****
	記事ヘッダー
	*****/
	.page_ttl_area{
		position: absolute;
		top: 0;
		left: 0;
		z-index: 99;
	}
	.page_ttl_area .ttl_area{
		width: 94%;
		margin: 2% auto 0 auto;
	}
	
	.page_header .header_bg_l{
		padding: 35% 0 0 0;
		background-size: 100% auto;
		z-index: 98;
	}
	.header_bg_l .hdr_txt_l{
		width: 60%;
	}
	
	.page_header .header_bg_r{
		padding: 0.5em 0 0 0;
	}
	.header_bg_r .rimg{
		width: 80%;
		margin: 0 1em 1em auto;
	}
	.header_bg_r .hdr_txt_r{
		padding: 0.5em;
	}
	
	/*****
	記事内容
	*****/
	.section_wrap{}
	.normal_section{
		font-size: 1.4rem;
		padding: 2em 0;
	}
	
	.ttl_type01{
		margin: 0 0 2em 3em;
	}
	.ttl_type01::before{
		width: 5em;
		height: 5em;
		margin: 0 0 -4em -3em;
	}
	.ttl_type01 h2{
		font-size: 1.8rem;
	}
	
	/*****
	リード
	*****/
	.lead_area{
		font-size: 1.4rem;
		width: 100%;
	}
	
	/*****
	インタビュー
	*****/
	.single_interview{
		padding: 1em;
	}
	
	.face{
		width: 35%;
		max-width: 200px;
		margin-right: 1.5em;
	}
	.face::before{
		top: 0.5em;
		left: 0.5em;
	}
	
	.name{
		font-size: 1.5rem;
	}
	
	.ttl_type02{
		font-size: 1.4rem;
	}
	
	.face_img{
		text-align: center;
	}
	.face_img::before{
		display: none;
	}
	
	/*****
	学校紹介エリア
	*****/
	.school_text{
		display: block;
	}
	.school_text .school_outer{
		width: 100%;
		margin: 0 0 0.5em 0;
	}
	
	/*****
	合格率
	*****/
	.goukaku_area{
		padding: 2em 1em;
	}
	
	.ttl_type03{
		font-size: 1.6rem;
	}
	.comment_box{
		font-size: 1.6rem;
	}
	
	.ttl_type04{
		font-size: 1.5rem;
	}
	
	/*****
	リンクボタン
	*****/
	
	.linkbtn_area{
		display: block;
	}
	.linkbtn_area li{
		margin: 1em auto;
	}
	
	
}