@charset "utf-8";

/* =============================================
	名護商工×沖縄県建設業協会×日建
============================================= */

/*---------------------------------------------
	記事コンテンツ
---------------------------------------------*/
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);
}


.btn_bg_nago,
.nago_bg{
	background-color: #3290b5;
}
.btn_bg_okinawa,
.okinawa_bg{
	background-color: #f6a82a;
}

/*****
記事ヘッダー
*****/
#page_header{
	background-color: #bed3ed;
}

.page_header{
	width: 100%;
	max-width: 1400px;
	margin: 0 auto;
	position: relative;
}
.page_header img{
	max-width: 100%;
	height: auto;
}

.page_header .page_ttl_area{
	width: 43%;
	max-width: 600px;
	position: absolute;
	top: 15%;
	left: 7%;
}

.page_ttl_area li.header_ttl{
	position: relative;
}
.page_ttl_area li.header_ttl::before{
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	right: 100%;
}
.page_ttl_area li.h2_nago::before{
	background-color: rgba(50,144,181,0.25);
}
.page_ttl_area li.h2_okinawa::before{
	background-color: rgba(246,168,42,0.25);
}
.page_ttl_area li.h2_nikken::before{
	background-color: rgba(230,0,18,0.25);
}
.page_ttl_area li.icon_x{
	width: 7.5%;
	max-width: 44px;
	margin: 4% 5%;
}

.page_header .photo_copy{
	font-weight: bold;
	color: #fff;
	text-align: right;
	padding: 0.5em;
	border-radius: 0.25em;
	background-color: rgba(0,0,0,0.47);
	position: absolute;
	bottom: 1em;
	right: 7%;
	text-shadow: 1px 1px 0 #000;
}


.anim_drop01{
	opacity: 0;
	animation-name: anim_down;
	animation-duration: 0.8s;
	animation-delay: 0.5s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
.anim_drop02{
	opacity: 0;
	animation-name: anim_down;
	animation-duration: 0.8s;
	animation-delay: 0.8s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
.anim_drop03{
	opacity: 0;
	animation-name: anim_down;
	animation-duration: 0.8s;
	animation-delay: 1.1s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}


/*****
タイトルアニメーション設定
*****/
@keyframes anim_down{
	0%{
		opacity: 0;
		transform: translateY(-200%);
	}
	100%{
		opacity: 1;
		transform: translateY(0%);
	}
}


/*****
記事内容
*****/
.section_wrap{
	margin-top: 6em;
	padding: 20px 0;
}
.normal_section{
 font-size: 1.6rem;
	width: 970px;
	margin: 4em auto 0 auto;
	padding: 20px 0;
	box-sizing: border-box;
}
.section_wrap .normal_section{
	margin: 0 auto;
}

.p_line p{
	padding-bottom: 0.5em;
}
.p_line p:last-of-type{
	padding-bottom: 0;
}

/*****
アンカーナビ
*****/
.select_anc_nav{
	margin-top: 4em;
}
.select_anc_nav ul{
	display: flex;
}
.select_anc_nav ul li{
	font-size: 2em;
	font-weight: bold;
	width: 50%;
}
.select_anc_nav ul li.anc_nago{
	text-align: right;
	/*background-color: #7fb8cf;*/
	background-color: #a6c4d0;
}
.select_anc_nav ul li.anc_okinawa{
	/*background-color: #f8cf8d;*/
	background-color: #f8e2c0;
}
.select_anc_nav ul li a{
	display: inline-block;
	color: #333;
	padding: 0.5em;
	position: relative;
	transition: background 0.5s;
}
.select_anc_nav ul li a:hover{
	background-color: rgba(255,255,255,0.5);
}
.select_anc_nav ul li a::before,
.select_anc_nav ul li a::after{
	width: 3em;
	height: 4.5em;
	border-radius: 50%;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center center;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}
.select_anc_nav ul li.anc_nago a{
	color: #3290b5;
	margin-right: 1em;
}
.select_anc_nav ul li.anc_nago a::before{
	content: '';
	display: block;
	background-image: url("../img/icon_anc_face_nago.jpg");
	left: -5em;
}
.select_anc_nav ul li.anc_okinawa a{
	color: #f6a82a;
	margin-left: 1em;
}
.select_anc_nav ul li.anc_okinawa a::after{
	content: '';
	display: block;
	background-image: url("../img/icon_anc_face_okinawa.jpg");
	right: -5em;
}


/*****
各インタビュー記事
******/
/***記事ヘッダー部分***/
#nago_header,
#okinawa_header{
	width: 80%;
	padding: 4em 0 2em 0;
	position: relative;
	box-sizing: border-box;
}
#nago_header{
	margin: 4em auto 0 0;
	background-image: url("../img/section_header_nago_bg.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
}
#okinawa_header{
	margin: 4em 0 0 auto;
	background-image: url("../img/section_header_okinawa_bg.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.ttl_type03{
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -60%);
}

.section_header{
	display: flex;
	justify-content: center;
	align-items: flex-start;
	/*width: 970px;*/
	margin: 0 auto;
}
#nago_header .section_header{
	flex-direction: row-reverse;
}
#okinawa_header .section_header{}

.section_header .ttl_type01{
	padding: 1em;
	border-radius: 0.5em;
	position: relative;
}
#nago_header .ttl_type01{
	margin: 3em 0 0 -2em;
}
#okinawa_header .ttl_type01{
	margin: 2.5em -2em 0 0;
}

.ttl_type01 h3{
	font-size: 2.4rem;
	color: #fff;
}

.ttl_type01 .btn_video{
	margin-top: 1em;
}
.ttl_type01 .btn_video a{
	display: block;
	padding: 0.5em 1em;
	border-radius: 1em;
	background-color: #fff;
}

.section_header .face_area{
	flex-shrink: 0;
}

/***記事部分***/
#nago_area{
	background-image: linear-gradient(to bottom, rgba(50,144,181,0.8) 0%, rgba(50,144,181,0.2) 25%, rgba(50,144,181,0.8) 75%, rgba(50,144,181,0.2) 100%);
}
#okinawa_area{
	background-image: linear-gradient(to bottom, rgba(246,168,42,0.8) 0%, rgba(246,168,42,0.2) 25%, rgba(246,168,42,0.8) 75%, rgba(246,168,42,0.2) 100%);
}

#nago_area .normal_section{
	background-image: url("../img/bg_illust01.png");
	background-repeat: no-repeat;
	background-position: right top 240px;
	background-size: auto 280px;
}
#okinawa_area .normal_section{
	background-image: url("../img/bg_illust02.png");
	background-repeat: no-repeat;
	background-position: left top 380px;
	background-size: 200px auto;
}

.text_area{
	margin-top: 4em;
}
.text_area p{
	padding-bottom: 0.5em;
}
.text_area p:last-of-type{
	padding-bottom: 0;
}
.text_area::after{
	content: '';
	display: block;
	clear: both;
}

.text_area_white{
	padding: 1em;
	background-color: #fff;
}
.text_area .right_img{
	margin: -2em -4em 1em 1em;
	padding: 0;
	box-shadow: -0.5em 0.5em 0 0 rgba(0,0,0,0.2);
	position: relative;
}
.text_area .left_img{
	margin: -2em 1em 1em -4em;
	padding: 0;
	box-shadow: 0.5em 0.5em 0 0 rgba(0,0,0,0.2);
	position: relative;
}
.img_caption{
	display: inline-block;
	font-size: 0.8em;
	padding: 0.25em 0.5em;
	background-color: rgba(255,255,255,0.8);
	position: absolute;
	bottom: 0.5em;
	right: 0.5em;
}

.ttl_type02_area{
	display: flex;
	align-items: center;
	position: relative;
	margin-top: 6em;
}
.ttl_type02_area::after{
	content: '';
	display: block;
	flex-grow: 1;
	width: auto;
	height: 2px;
}
#nago_area .ttl_type02_area::after{
	background-color: #3290b5;
}
#okinawa_area .ttl_type02_area{
	flex-direction: row-reverse;
}
#okinawa_area .ttl_type02_area::after{
	background-color: #f6a82a;
}

.ttl_type02{
	flex-shrink: 0;
	font-size: 3rem;
	padding: 0.5em 1em;
	background-color: #fff;
}
#nago_area .ttl_type02{
	color: #3290b5;
	border: solid 2px #3290b5;
}
#okinawa_area .ttl_type02{
	color: #f6a82a;
	border: solid 2px #f6a82a;
}

#nago_area .fukidashi{
	position: absolute;
	bottom: 0;
	left: 60%;
}
#okinawa_area .fukidashi{
	position: absolute;
	bottom: 0;
	right: 55%;
}

#nago_area .icon_ttl{
	position: absolute;
	bottom: 0;
	right: 1em;
}
#okinawa_area .icon_ttl{
	position: absolute;
	bottom: 0;
	left: 1em;
}


.info_area{
	color: #7d694e;
	margin-top: 4em;
	padding: 1em;
	background-color: #fff;
}

.info_area h3{
	font-size: 1.3em;
	color: #fff;
	text-align: center;
	margin: -1em -1em 1em -1em;
	padding: 0.5em;
}

.info_area .info_detail{
	display: flex;
	justify-content: space-between;
}
.info_area .info_detail .detail_box{
	width: 48%;
}

.info_area h4{
	font-size: 1.3em;
	color: #7d694e;
	margin: 1em 0;
	padding: 0.5em;
	border-bottom: solid 1px #7d694e;
}

.info_area ul{
	display: flex;
	flex-wrap: wrap;
}
.info_area ul li{
	font-size: 1.2em;
	margin-right: 2em;
	padding-bottom: 0.5em;
}


/*****
講座紹介（例）
*****/
.ttl_nikken{
	font-size: 2.4rem;
	color: #fff;
	text-align: center;
	margin-bottom: 1em;
	padding: 0.5em;
	background-color: #b53b32;
}

/* ===========================================
	MediaQueries
=========================================== */
/* PC----------------------------- */
@media screen and (min-width: 768px){
}

/* スマホ----------------------------- */
@media screen and (max-width: 767px){
	
	
	/*---------------------------------------------
	記事コンテンツ
	---------------------------------------------*/
	/*****
	記事ヘッダー
	*****/
	.page_header .page_ttl_area{
		width: 60%;
		top: 10%;
	}
	
	.page_header .photo_copy{
		font-size: 1.2rem;
		position: static;
	}
	
	/*****
	記事内容
	*****/
	.normal_section{
		font-size: 1.4rem;
		width: 94%;
		margin: 2em auto 0 auto;
		padding: 0.5em;
	}
	
	/*****
	アンカーナビ
	*****/
	.select_anc_nav ul li{
		font-size: 1em;
	}
	.select_anc_nav ul li.anc_nago a::before{
		display: none;
	}
	.select_anc_nav ul li.anc_okinawa a::after{
		display: none;
	}
	
	/*****
	各インタビュー記事
	******/
	/***記事ヘッダー部分***/
	#nago_header,
	#okinawa_header{
		width: 100%;
		margin: 2em auto;
		padding: 3em 1em 2em 1em;
	}
	
	.section_header{}
	#nago_header .section_header{
		flex-direction: column-reverse;
	}
	#okinawa_header .section_header{
		flex-direction: column-reverse;
	}
	
	.ttl_type03{
		width: 60%;
	}
	
	.ttl_type01 h3{
		font-size: 1.6rem;
	}
	#nago_header .ttl_type01,
	#okinawa_header .ttl_type01{
		width: 100%;
		margin: 1em auto 0 auto;
		box-sizing: border-box;
	}
	
	.section_header .face_area{
		width: 65%;
	}
	#okinawa_header .section_header .face_area{
		margin-left: auto;
	}
	
	/***記事部分***/
	.section_wrap{
		margin-top: 4em;
	}
	#nago_area .normal_section{
		background-image: none;
		/*background-size: 25% auto;
		background-position: top right;*/
	}
	#okinawa_area .normal_section{
		background-image: none;
		/*background-size: 25% auto;
		background-position: top right;*/
	}
	
	.text_area{
		margin-top: 3em;
	}
	
	.text_area .right_img{
		width: 50%;
		margin: -2em -1em 1em 1em;
	}
	.text_area .left_img{
		width: 50%;
		margin: -2em 1em 1em -1em;
	}
	.img_caption{
		display: block;
		text-align: center;
		position: static;
	}
	
	.ttl_type02_area{
		margin-top: 3em;
	}
	.ttl_type02{
		font-size: 1.6rem;
		max-width: 70%;
	}
	
	#nago_area .ttl_type02_fukidashi{
		margin-top: 6em;
	}
	#okinawa_area .ttl_type02_fukidashi{
		margin-top: 8em;
	}
	.fukidashi img{
		height: 100%;
		width: auto;
	}
	#nago_area .fukidashi{
		height: 5em;
		bottom: 102%;
		left: auto;
		right: 0;
	}
	#okinawa_area .fukidashi{
		height: 7em;
		bottom: 102%;
		left: 0;
		right: auto;
	}
	
	.icon_ttl{
		width: 15%;
	}
	#nago_area .icon_ttl{
		bottom: auto;
		right: 0.5em;
	}
	#okinawa_area .icon_ttl{
		bottom: auto;
		left: 0.5em;
	}
	
	.info_area{
		margin-top: 2em;
	}
	.info_area .info_detail{
		display: block;
	}
	.info_area .info_detail .detail_box{
		width: 100%;
	}
	
	/*****
	講座紹介（例）
	*****/
	
	
}