@charset "utf-8";

@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

/*
■社員紹介
0_社員紹介トップ
1_社員インタビュー
2_とある1日
3_職種紹介
*/

body {
	font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', 'Noto Sans Japanese', 'ヒラギノ角ゴ ProN W3', Meiryo, sans-serif;
}

hr {
	height: 0;
	margin: 0 0 50px 0;
	padding: 0;
	border: 0;
	border-top: 1px solid #e3e3e3;
}

h1, h2, h3, h4, h5 {margin: 0; padding: 0;}

p {
	text-align: justify;
	text-justify: inter-ideograph;
}


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

   	0_社員紹介トップ

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

#staff{}

#staff .nextContentsTop {
	padding: 185px 0 50px 0 !important;
}

#staff nav {
	margin-bottom: 50px;
}

#staff nav #anchor2 li {
	width: 582px;
	margin-right: 12px;
}

#staff nav #anchor2 li a {
	width: 90%;
	padding: 5px 5%;
}

#staff .wrapBox {
	margin-bottom: 0;
}

#staff .nextContentsTop #interview {
	margin-bottom: 50px;
}

#staff .nextContentsTop #interview #memberList {
	padding-top: 20px;
}

#staff .wrapBox #anchor_toaru {
	margin-bottom: 90px;
}

#staff .wrapBox .btnToaruWrap {
	margin: 0 auto 70px;
	border: #00a7ac 3px solid;
}

#staff #interview #memberList {
	padding-top: 50px;
	width: 1200px;
	margin: 0 auto;
}

#staff #interview #memberList ul {
	font-size: 0;
	display: box;
	display: box;
	display: flexbox;
	display: flex;
	display: -moz-flex;
	display: flex;
	-webkit-box-lines: multiple;
	-moz-box-lines: multiple;
	flex-wrap: wrap;
	flex-wrap: wrap;
	flex-wrap: wrap;
	flex-wrap: wrap;
}

#staff #interview #memberList ul li {
	display: inline-block;
	width: 400px;
	padding-top: 267px;/* 画像は247px */
	padding-bottom: 20px;
	transition: all 0.2s;
}

#staff #interview #memberList ul li:hover {
	background-blend-mode: multiply;
}

#staff #interview #memberList ul li p {
	text-align: center;
	margin: 0 auto;
	font-size: 15px;
}

#staff #interview #memberList ul li p.member_copy {
	font-family: 'Noto Sans Japanese', sans-serif;
	font-size: 25px;
	letter-spacing: 1px;
	font-weight: 800;
	line-height: 1.3;
}

#staff #interview #memberList ul li p.member_copy::after {
	content: '';
	width: 150px;
	display: block;
	border-bottom: 1px solid #000;
	padding-top: 20px;
	margin: 0 auto 8px;
}

#staff #interview #memberList ul li p span {
	background-color: #000;
	color: #fff;
	padding: 3px 6px;
}

#staff #interview #memberList ul li p:nth-of-type(2) {
	letter-spacing: 2px;
	font-size: 16px;
	font-weight: 600;
	text-align: center;
}

#staff #interview #memberList ul li p:nth-of-type(3) {
	text-align: center;
	font-size: 13px;
	letter-spacing: 1px;
}

#staff #interview #memberList ul li.member_kmu {
	background: url('../../person/interview/images/img_member_kmu.jpg') left top no-repeat;
	background-size: contain;}

#staff #interview #memberList ul li.member_kmu:hover {
	background: #bfe9ea url('../../person/interview/images/img_member_kmu.jpg') left top no-repeat;
	background-size: contain;}

#staff #interview #memberList ul li.member_rf {
	background: url('../../person/interview/images/img_member_rf.jpg') left top no-repeat;
	background-size: contain;}

#staff #interview #memberList ul li.member_rf:hover {
	background: #bfe9ea url('../../person/interview/images/img_member_rf.jpg') left top no-repeat;
	background-size: contain;}

#staff #interview #memberList ul li.member_ky {
	background: url('../../person/interview/images/img_member_ky.jpg') left top no-repeat;
	background-size: contain;}

#staff #interview #memberList ul li.member_ky:hover {
	background: #bfe9ea url('../../person/interview/images/img_member_ky.jpg') left top no-repeat;
	background-size: contain;}

#staff #interview #memberList ul li.member_ym {
	background: url('../../person/interview/images/img_member_ym.jpg') left top no-repeat;
	background-size: contain;}

#staff #interview #memberList ul li.member_ym:hover {
	background: #bfe9ea url('../../person/interview/images/img_member_ym.jpg') left top no-repeat;
	background-size: contain;}

#staff #interview #memberList ul li.member_kg {
	background: url('../../person/interview/images/img_member_kg.jpg') left top no-repeat;
	background-size: contain;}

#staff #interview #memberList ul li.member_kg:hover {
	background: #bfe9ea url('../../person/interview/images/img_member_kg.jpg') left top no-repeat;
	background-size: contain;}

#staff #interview #memberList ul li.member_yr {
	background: url('../../person/interview/images/img_member_yr.jpg') left top no-repeat;
	background-size: contain;}

#staff #interview #memberList ul li.member_yr:hover {
	background: #bfe9ea url('../../person/interview/images/img_member_yr.jpg') left top no-repeat;
	background-size: contain;}

#staff #interview #memberList ul li.member_km {
	background: url('../../person/interview/images/img_member_km.jpg') left top no-repeat;
	background-size: contain;}

#staff #interview #memberList ul li.member_km:hover {
	background: #bfe9ea url('../../person/interview/images/img_member_km.jpg') left top no-repeat;
	background-size: contain;}

#staff #interview #memberList ul li.member_km p.member_copy {
	font-size: 1.1vw;
}


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

   	1_社員インタビュー

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

/*** メインV+キャッチコピー ***/

#staff .nextContents {
	padding: 145px 0 50px 0;/* top 145pxでぴったり */
}

#staff #catch {
	text-align: center;
	padding-bottom: 50px;
	margin-bottom: 50px;
	border-bottom: 1px solid #00a7ac;
}

#staff #catch #mainV {
	width: 100%;
	height: 650px;
	margin-bottom: 50px;
}

#staff .muroi #catch #mainV {
	background: url(../../person/interview/kmu/images/img_mainV.jpg) center top no-repeat;
	background-size: cover;}

#staff .fuji #catch #mainV {
	background: url(../../person/interview/rf/images/img_mainV.jpg) center top no-repeat;
	background-size: cover;}

#staff .mihara #catch #mainV {
	background: url(../../person/interview/kmi/images/img_mainV.jpg) center top no-repeat;
	background-size: cover;}

#staff .kushiro #catch #mainV {
	background: url(../../person/interview/hk/images/img_mainV.jpg) center top no-repeat;
	background-size: cover;}

#staff .nakajima #catch #mainV {
	background: url(../../person/interview/sn/images/img_mainV.jpg) center top no-repeat;
	background-size: cover;}

#staff .hamada #catch #mainV {
	background: url(../../person/interview/mh/images/img_mainV.jpg) center top no-repeat;
	background-size: cover;}

#staff .rm #catch #mainV {
	background: url(../../person/interview/rm/images/img_mainV.jpg) center top no-repeat;
	background-size: cover;}

#staff .sa #catch #mainV {
	background: url(../../person/interview/sa/images/img_mainV.jpg) center top no-repeat;
	background-size: cover;}

#staff .mk #catch #mainV {
	background: url(../../person/interview/km/images/img_mainV.jpg) center top no-repeat;
	background-size: cover;}

#staff .sw #catch #mainV {
	background: url(../../person/interview/sw/images/img_mainV.jpg) center top no-repeat;
	background-size: cover;}

#staff .km #catch #mainV {
	background: url(../../person/interview/km/images/img_mainV.jpg) center top no-repeat;
	background-size: cover;}

#staff .hs #catch #mainV {
	background: url(../../person/interview/hs/images/img_mainV.jpg) center top no-repeat;
	background-size: cover;}

#staff .ky #catch #mainV {
	background: url(../../person/interview/ky/images/img_mainV.jpg) center top no-repeat;
	background-size: cover;}

#staff .mc #catch #mainV {
	background: url(../../person/interview/mc/images/img_mainV.jpg) center top no-repeat;
	background-size: cover;}

#staff .ym #catch #mainV {
	background: url(../../person/interview/ym/images/img_mainV.jpg) center top no-repeat;
	background-size: cover;}

#staff .kg #catch #mainV {
	background: url(../../person/interview/kg/images/img_mainV.jpg) center top no-repeat;
	background-size: cover;}

#staff .yr #catch #mainV {
	background: url(../../person/interview/ry/images/img_mainV.jpg) center top no-repeat;
	background-size: cover;}

#staff .mk #catch #mainV {
	background: url(../../person/interview/km/images/img_mainV.jpg) center top no-repeat;
	background-size: cover;}

#staff #catch h3 {
	font-family: 'Noto Sans Japanese', sans-serif;
	font-size: 62px;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: 2px;
	margin-bottom: 50px;
}

#staff #catch p {
	text-align: center;
	letter-spacing: 2px;
}

#staff #catch p:nth-of-type(1) {
	background-color: #000;
	color: #fff;
	margin-bottom: 5px;
	padding: 0 5px;
	display: inline-block;
}

#staff #catch p:nth-of-type(2) {
	font-size: 18px;
	font-weight: 700;
}

#staff #catch p span {
	font-size: 17px;
	font-weight: 100;
}

#staff #catch p:last-child {
	font-size: 82%;
	letter-spacing: 1px;
	line-height: 1.6;
}

/*** インタビュー ***/

#staff #interview{}

#staff #interview .interviewBox {
	position: relative;
	margin: 0 auto 80px;
}
#staff #interview .width650 {width: 650px;}
#staff #interview .width950 {width: 950px;}

#staff #interview .width950 .floatL,
#staff #interview .width950 .floatR {width: 445px;}

#staff #interview .interviewBox h4 {
	letter-spacing: 1px;
}

#staff #interview .interviewBox h4.question {
	color: #00a7ac;
	font-size: 16px;
	font-weight: 500;
}

#staff #interview .interviewBox h4.question::after {
	content: '';
	display: block;
	width: 50px;
	padding-top: 3px;
	border-bottom: 1px solid #00a7ac;
	margin-bottom: 20px;
}

#staff #interview .interviewBox h4.answer {
	font-family: 'Noto Sans Japanese', sans-serif;
	font-size: 23px;
	font-weight: 700;
	line-height: 1.4;
	margin-bottom: 10px;
}

#staff #interview .interviewBox p {
	font-size: 15px;
	line-height: 2.2;
}

#staff #interview .interviewBox span {
	background-color: #daf4f5;
	padding: 3px 5px;
}

#staff #interview .offtime {
	position: relative;
	height: auto;
}

#staff #interview .offtime::before {
	content: '';
	display: block;
	padding-top: 352px;
}

#staff .fuji #interview .offtime::before {
	content: '';
	display: block;
	padding-top: 430px;
}

#staff #interview .offtime .floatL,
#staff #interview .offtime .floatR {
	width: 520px;
	float: none;
}

#staff #interview .offtime .floatL {
	border: 1px solid #00a7ac;
	box-sizing: border-box;
	padding: 40px 50px;
	background-color: #fff;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 15;
}

#staff #interview .offtime .floatR {
	position: absolute;
	top: 30px;
	right: 0;
	z-index: 10;
}

#staff #interview .offtime_nophoto {
	border: 1px solid #00a7ac;
	box-sizing: border-box;
	padding: 40px 50px;
	background-color: #fff;
}

/*** オフタイム左右逆 ***/

#staff #interview .offtime.reverse .floatR {
	border: 1px solid #00a7ac;
	box-sizing: border-box;
	padding: 40px 50px;
	background-color: #fff;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 15;
}

#staff #interview .offtime.reverse .floatL {
	position: absolute;
	top: 30px;
	left: 0;
	z-index: 10;
	border: none;
	padding: 0;
}


/*** 人物相関図 ***/

#staff #interview #diagram {
	background: url(../../person/interview/images/bg_diagram.jpg) center center no-repeat;
	background-size: cover;
	position: relative;
	height: auto;
	padding-bottom: 100px;
}

#staff #interview #diagram .width950 {
	position: relative;
	margin: 0 auto;
}

#staff #interview #diagram .width950::before {
	content: '人物相関図';
	letter-spacing: 5px;
	font-size: 20px;
	font-weight: 500;
	background: #333f48 url(../../person/interview/images/bg_diagram.jpg) center center no-repeat;
	background-blend-mode: multiply;
	background: #333f48\9; /* IE10以下 */
	color: #fff;
	padding: 20px 30px;
	position: absolute;
	top: 0;
	left: 0;
}

@media all and (-ms-high-contrast: none) {
	#staff #interview #diagram .width950::before {
		background: #333f48; /* IE10以上 */
	}
}

#staff #interview #diagram .width950::after {
	content: '';
	width: 100%;
	height: 510px;
	background-color: #fff;
	color: #fff;
	position: absolute;
	top: 120px;
	left: 0;
	z-index: 10;
}

#staff #interview #diagram .width650 {
	position: relative;
	top: 50px;
	margin: 0 auto;
	z-index: 20;
}

#staff #interview #diagram .width650 map area {
	background: rgba(0, 167, 172, 0);
	transition: all 0.3s;
	width: 154px;
	height: 154px;
	border-radius: 77px;
	border-radius: 77px;
	border-radius: 77px;
	position: absolute;
	outline: none;
}

#staff #interview #diagram .width650 map area:hover {
	background: rgba(0, 167, 172, 0.6);
}
#staff #interview #diagram .width650 map area.area_nakai {top: 125px; left: 8px;}
#staff #interview #diagram .width650 map area.area_yanagi {top: 401px; left: 2px;}
#staff #interview #diagram .width650 map area.area_shimono {top: 5px; left: 481px;}
#staff #interview #diagram .width650 map area.area_mitoma {top: 255px; left: 495px;}
#staff #interview #diagram .width650 map area.area_kitabayashi {top: 464px; left: 465px;}
#staff #interview #diagram .width650 map area.area_mori {top: 236px; left: 0;}
#staff #interview #diagram .width650 map area.area_sharuma {top: 236px; left: 494px;}






/* ------------------------------------------------------------------------------------------ */

@media screen and (max-width: 767px) {



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

   SP_あとあと汎用スタイルとして組み込めそうなもの

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

	.floatL {float: none;}
	.floatR {float: none;}

	.nextNavTitle {
		margin-top: 0;
	}

	.spmb30 {margin-bottom: 30px;}


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

   	0_SP_社員紹介トップ

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

	#staff{}

	#staff .nextContentsTop {
		padding: 0 0 40px 0 !important;
	}

	#staff nav {
		width: 90%;
		padding: 3% 5%;
		margin-bottom: 30px;
	}

	#staff nav #anchor2 li {
		width: 100%;
		margin: 0 0 8px 0;
	}

	#staff nav #anchor2 li:last-child {
		margin: 0;
	}

	#staff nav #anchor2 li a {
		width: 90%;
		height: auto;
		padding: 12px 5%;
	}

	#staff .nextContentsTop #interview {
		margin-bottom: 20px;
	}

	#staff .nextContentsTop #interview #memberList {
		padding-top: 10px;
	}

	#staff .wrapBox #anchor_toaru {
		margin-bottom: 35px;
	}

	#staff .wrapBox .btnToaruWrap {
		width: 98%;
		margin: 0 auto 30px;
		border: #00a7ac 1% solid;
	}

	#staff #interview #memberList ul li.member_km p.member_copy {
		font-size: 3.5vw;
	}




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

   	1_SP_社員インタビュー

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

	/*** メインV+キャッチコピー ***/

	#staff .nextContents {
		padding: 0 0 40px 0;
	}

	#staff #catch {
		padding-bottom: 40px;
		margin-bottom: 40px;
	}

	#staff #catch #mainV {
		margin-bottom: 30px;
		height: 360px;

		/* width:100%; */
	}

	#staff .muroi #catch #mainV {
		background: url(../../person/interview/kmu/images/img_mainV_sp.jpg) center top no-repeat;
		background-size: cover;}

	#staff .fuji #catch #mainV {
		background: url(../../person/interview/rf/images/img_mainV_sp.jpg) center top no-repeat;
		background-size: cover;}

	#staff .mihara #catch #mainV {
		background: url(../../staff/interview/kmi/images/img_mainV_sp.jpg) center top no-repeat;
		background-size: cover;}

	#staff .kushiro #catch #mainV {
		background: url(../../staff/interview/hk/images/img_mainV_sp.jpg) center top no-repeat;
		background-size: cover;}

	#staff .hamada #catch #mainV {
		background: url(../../staff/interview/mh/images/img_mainV_sp.jpg) center top no-repeat;
		background-size: cover;}

	#staff .nakajima #catch #mainV {
		background: url(../../staff/interview/sn/images/img_mainV_sp.jpg) center top no-repeat;
		background-size: cover;}

	#staff .rm #catch #mainV {
		background: url(../../staff/interview/rm/images/img_mainV_sp.jpg) center top no-repeat;
		background-size: cover;}

	#staff .sa #catch #mainV {
		background: url(../../staff/interview/sa/images/img_mainV_sp.jpg) center top no-repeat;
		background-size: cover;}

	/* #staff .mk #catch #mainV {
		background: url(../../staff/interview/km/images/img_mainV_sp.jpg) center top no-repeat;
		background-size: cover;} */

	#staff .sw #catch #mainV {
		background: url(../../staff/interview/sw/images/img_mainV_sp.jpg) center top no-repeat;
		background-size: cover;}

	/* #staff .km #catch #mainV {
		background: url(../../staff/interview/km/images/img_mainV_sp.jpg) center top no-repeat;
		background-size: cover;} */

	#staff .hs #catch #mainV {
		background: url(../../staff/interview/hs/images/img_mainV_sp.jpg) center top no-repeat;
		background-size: cover;}

	#staff .ky #catch #mainV {
		background: url(../../person/interview/ky/images/img_mainV_sp.jpg) center top no-repeat;
		background-size: cover;}

	#staff .kg #catch #mainV {
		background: url(../../person/interview/kg/images/img_mainV_sp.jpg) center top no-repeat;
		background-size: cover;}

	#staff .yr #catch #mainV {
		background: url(../../person/interview/ry/images/img_mainV_sp.jpg) center top no-repeat;
		background-size: cover;}

	#staff #catch h3 {
		font-size: 38px;
		letter-spacing: 0;
		margin-bottom: 30px;
	}

	#staff #catch p {
		letter-spacing: 1px;
	}

	#staff #catch p:last-child {
		letter-spacing: 0;
	}

	/*** インタビュー ***/

	#staff #interview{}

	#staff #interview .interviewBox {
		margin: 0 auto 40px;

		/* position:relative; */
	}

	#staff #interview .width650,
	#staff #interview .width950 {
		width: 92%;
		padding: 0 4%;
	}

	#staff #interview .width950 .floatL,
	#staff #interview .width950 .floatR {width: 100%;}

	#staff #interview .interviewBox h4 {
		letter-spacing: 0;
	}

	#staff #interview .interviewBox h4.question {
		font-size: 15px;
	}

	#staff #interview .interviewBox h4.answer {
		font-size: 20px;
	}

	#staff #interview .interviewBox p {
		line-height: 2;
	}

	#staff #interview .offtime {
		border: 1px solid #00a7ac;
		box-sizing: border-box;
		padding: 20px;
	}

	#staff #interview .offtime::before {
		padding-top: 0;
	}

	#staff .fuji #interview .offtime::before {
		padding-top: 0;
	}

	#staff #interview .offtime .floatL,
	#staff #interview .offtime .floatR {
		width: 100%;
		float: none;
	}

	#staff #interview .offtime .floatL {
		position: relative;
		padding: 0;
		margin-bottom: 10px;
		border: 0;
	}

	#staff #interview .offtime .floatR {
		position: relative;
		top: 0;
	}

	#staff #interview .offtime_nophoto {
		padding: 20px;
	}


	/*** 人物相関図 ***/

	#staff #interview #diagram .width950 {
		width: 100%;
		padding: 0;
	}

	#staff #interview #diagram .width950::before {
		font-size: 15px;
		letter-spacing: 2px;
		padding: 10px 20px;
	}

	#staff #interview #diagram .width950::after {
		height: 300px;
		top: 60px;
		width: 92%;
		margin: 0 auto;
		left: 4%;
	}

	#staff #interview #diagram .width650 map area {
		display: none;
	}

	#staff #interview #diagram .width650 map area:hover {
		background: none;
	}

	/*** オフタイム左右逆 ***/

	#staff #interview .offtime.reverse .floatR {
		position: relative;
		padding: 0;
		margin-bottom: 10px;
		border: 0;
	}

	#staff #interview .offtime.reverse .floatL {
		position: relative;
		top: 0;
	}

	#staff #interview .offtime.reverse .floatL p {
		line-height: 1;
	}

	/*** その他の社員インタビュー ***/

	#staff #interview #memberList {
		width: 100%;
		padding-top: 40px;
	}

	#staff #interview #memberList ul li {
		width: 50%;
		padding-top: 33%;
		background-size: contain;
	}

	#staff #interview #memberList ul li p {
		text-align: center;
		margin: 0 auto;
		font-size: 14px;
	}

	#staff #interview #memberList ul li p.member_copy {
		font-size: 16px;
		letter-spacing: 0;
	}

	#staff #interview #memberList ul li p.member_copy::after {
		content: '';
		width: 100px;
		display: block;
		border-bottom: 1px solid #000;
		padding-top: 20px;
		margin: 0 auto 8px;
	}

	#staff #interview #memberList ul li p span {
		padding: 2px 4px;
	}

	#staff #interview #memberList ul li p:nth-of-type(2) {
		letter-spacing: 1px;
		font-size: 14px;
	}

	#staff #interview #memberList ul li p:nth-of-type(3) {
		font-size: 12px;
		letter-spacing: 0;
	}
}

#staff #interview .column_block.interviewBox {
	background: #e6f7f7;
	padding: 40px 45px;
	box-sizing: border-box;
}

#staff #interview .column_block.interviewBox .question {
	font-family: 'Noto Sans Japanese', sans-serif;
	font-size: 23px;
	font-weight: 700;
	line-height: 1.4;
	margin-bottom: 10px;
	color: #00a7ac;
}

#staff #interview .column_block.interviewBox .question::after {
	content: none;
}

@media (min-width: 768px) {
	#staff .mk #interview .offtime::before {
		padding-top: 430px;
	}
}