@charset "utf-8";

/**************************************************************************************

--------------------------------------------------------------------------------------
共通パーツ
***************************************************************************************/

/* 見出し
========================================== */

/* ---------------------------
セクション見出し
----------------------------- */

.titSec {
	text-align:center;
	position:relative;
	line-height:1.6;
	margin-top:50px;
}
.titSec::before {
	content:"";
	display:block;
	width:100%;
	height:1px;
	background-color:#231815;
	position:absolute;
	top:48%;
	left:0;
	right:0;
	z-index:1;
}
.titSec em {
	display:inline-block;
	color:#044a80;
	font-size:26px;
	font-weight:bold;
	position:relative;
	z-index:2;
	background-color:#fff;
	padding:0 25px;
	text-align:center;
}
.titSec span {
	display:block;
	text-align:center;
	color:#898989;
	font-size:16px;
	margin-top:5px;
}

/* 色違い */
.titSec.colorBG em {color:#00a8ba;}
.titSec.colorPK em {color:#f26e50;}
.titSec.colorGr em {color:#1aa488;}

@media only screen and (max-width:768px) {
	.titSec {
		margin-top:30px;
	}
	.titSec em {
		font-size:22px;
		padding:0 15px;
	}
	.titSec span {
		font-size:14px;
		margin-top:3px;
	}
}
@media only screen and (max-width:320px) {
	.titSec em {
		max-width:280px;
	}
}

/* ---------------------------
ベタ塗見出し
----------------------------- */

.titSub {
	background-color:#004294;
	color:#fff;
	font-weight:bold;
	font-size:22px;
	text-align:center;
	line-height:1.6;
	padding:10px 20px;
	margin-top:50px;
}
@media only screen and (max-width:768px) {
	.titSub {
		font-size:18px;
	}
}

/* テーブル
========================================== */

table {
	width:100%;
	line-height:1.6;
}

/* ---------------------------
Type1 - th水色ベース
----------------------------- */

table.tblType1 {
}
table.tblType1 th,
table.tblType1 td {
	padding:10px 20px;
}
table.tblType1 th {
	background-color:#ccd9ea;
	color:#044a80;
	font-weight:bold;
	border-top:2px solid #fff;
	width:180px;
}
table.tblType1 td {
	border-top:2px solid #bebebe;
	padding-right:60px;
	vertical-align:middle;
}
table.tblType1 tbody tr:first-child th,
table.tblType1 tbody tr:first-child td {
	border-top:none;
}
@media only screen and (max-width:768px) {
	table.tblType1 th,
	table.tblType1 td {
		display:block;
		padding:10px;
		width:100%;
		border-top:none;
	}
}

/* ---------------------------
Type2 - th,td水色下線
----------------------------- */

table.tblType2 {
}
table.tblType2 th,
table.tblType2 td {
	padding:30px 20px 10px;
	border-bottom:1px solid #00a8ba;
}
table.tblType2 th {
	text-align:center;
	font-weight:bold;
	vertical-align:bottom;
	width:200px;
}
@media only screen and (max-width:768px) {
	table.tblType2 {
		border-top:1px solid #00a8ba;
	}
	table.tblType2 th,
	table.tblType2 td {
		display:block;
		padding:10px;
		width:100%;
	}
	table.tblType2 th {
		text-align:left;
		border-bottom-style:dotted;
	}
}

/* ---------------------------
Type3 - th,td背景色あり
----------------------------- */

table.tblType3 {
}
table.tblType3 th,
table.tblType3 td {
	padding:10px 30px;
}
table.tblType3 th {
	font-weight:bold;
	text-align:center;
}
table.tblType3 thead th {
	color:#fff;
}
table.tblType3.level1 thead th {background-color:#6892b3;}
table.tblType3.level2 thead th {background-color:#366e9a}
table.tblType3.level3 thead th {background-color:#044a80;}

table.tblType3 tbody th {
	width:250px;
	border-right:1px solid #646b6c;
}
table.tblType3 tbody th,
table.tblType3 tbody td {
	background-color:#e5f6f8;
}
table.tblType3 tbody tr:nth-child(even) th,
table.tblType3 tbody tr:nth-child(even) td {
	background-color:#cceef1;
}
@media only screen and (max-width:768px) {
	table.tblType3 th,
	table.tblType3 td {
		display:block;
		padding:10px;
		width:100%!important;
	}
	table.tblType3 tbody th {
		border-right:none;
		border-bottom:1px dotted #646b6c;
		text-align:left;
	}
}

/* ボタン類
========================================== */

/* ---------------------------
PREV / NEXT ボタン
----------------------------- */
.btnPNArea {
	display:flex;
	justify-content:space-between;
}
.btnPNArea a {
	display:block;
	font-size:16px;
	color:#fff;
	font-weight:bold;
	background-color:#1aa488;
	width:175px;
	height:35px;
	line-height:35px;
	padding:0 50px;
	position:relative;

}
.btnPNArea a.prev {
	padding-left:80px;
	border-radius:25px 0 0 25px;
	text-align:left;
}
.btnPNArea a.next {
	padding-right:80px;
	border-radius:0 25px 25px 0;
	text-align:right;	
}
.btnPNArea a::before {
	content:"";
	display:block;
	background:url("../img/staff/ic_arrow.png") center / 18px 14px no-repeat;
	width:18px;
	height:14px;	
	position:absolute;
	top:50%;
	transform:translateY(-50%);
}
.btnPNArea a.prev::before {
	left:30px;
}
.btnPNArea a.next::before {
	right:30px;
	transform:translateY(-50%) rotate(180deg);
}
body.project .btnPNArea,
body.international .btnPNArea {
	margin-top:50px;
	padding:0 20px;
}
@media only screen and (max-width:1060px) {
	.btnPNArea a {
		height:46px;
		line-height:46px;
		width:30%;
		text-align:center!important;
		padding:0;
	}
	.btnPNArea a.prev {padding-left:3%;}
	.btnPNArea a.next {padding-right:3%;}
}
@media only screen and (max-width:768px) {
	.btnPNArea a {
		width:40%;
	}
	.btnPNArea a.prev::before {left:15px;}
	.btnPNArea a.next::before {right:15px;}
	
	body.project .btnPNArea,
	body.international .btnPNArea {
		margin-top:30px;
	}
}
@media only screen and (max-width:320px) {
	.btnPNArea a {
		width:45%;
	}
}

/* 冒頭のお知らせ（青BOX）
========================================== */

#main #introBox {
	background-color:#044a80;
	padding:30px;
	margin-top:50px;
}
#main #introBox p {
	font-size:22px;
	text-align:center;
	color:#fff;
	font-weight:bold;
}
#main #introBox p em {
	display:block;
	font-size:19px;
	text-align:center;
	color:#044a80;
	font-weight:bold;
	background-color:#fff;
	width:200px;
	padding:5px;
	margin:0 auto 20px;
}
#main #introBox + p.cmt {
	font-size:22px;
	text-align:center;
	color:#044a80;
	font-weight:bold;
	margin-top:80px;
	padding-bottom:30px;
}
@media only screen and (max-width:768px) {
	#main #introBox {
		margin-top:30px;
		padding:15px;
	}
	#main #introBox p {
		font-size:20px;
	}
	#main #introBox p em {
		font-size:16px;
		margin-bottom:15px;
	}
	#main #introBox + p.cmt {
		font-size:20px;
		margin-top:50px;
		padding-bottom:0;
	}
}

/* 内容は取材当時のものです
========================================== */

.note_intv {
	display: block;
	font-size: 13px;
	margin-top: 5px;
}
body.international .note_intv,
body.project .note_intv {
	margin-top: 30px;
}
body.woman .note_intv {
	margin-top: 30px;
	padding-bottom: 10px;
}
body.expert .note_intv {
	margin-left:5%;
	margin-right:auto;
	width:65%;
}
@media only screen and (max-width:768px) {
	body.expert .note_intv {
		width: 100%;
	}
}

/**************************************************************************************

--------------------------------------------------------------------------------------
ピンチアウトアイコン（スマホ）
***************************************************************************************/

.pinchArea {
	position:relative;
}
.pinchArea .flick_t {
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	right:0;
	bottom:0;
	left:0;
}
.pinchArea .flick_t span {
	display:block;
	width:30%;
	position:absolute;
	top:50%;
	right:50%;
	transform:translate(50%,-50%);
}

/**************************************************************************************

--------------------------------------------------------------------------------------
アニメーション
***************************************************************************************/

/* フェードイン
========================================== */

.fadein {
    opacity:0;
    transform:translate(0,50px);
    transition:all 0.7s;
}
.typeSide .fadein {
	transform:translate(50px,0);
}
.fadein.scrollin {
    opacity:1;
    transform:translate(0,0);
}
@media only screen and (max-width:768px) {
	#main #talk .photoArea.typeSide .fadein {
		transform:translate(20px,0);
	}
	#main #talk .photoArea.typeSide .fadein.scrollin {
		opacity:1;
		transform:translate(0,0);
	}
}