@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: 0px;
}

#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:-webkit-box;
    display:-moz-box;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-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 .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 #000000;
	padding-top:20px;
	margin:0 auto 8px;
}
#staff #interview #memberList ul li p span{
	background-color:#000000;
	color:#ffffff;
	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(../../staff/interview/kmu/images/img_mainV.jpg) center top no-repeat;
	background-size:cover;}
#staff .fuji #catch #mainV{
	background:url(../../staff/interview/rf/images/img_mainV.jpg) center top no-repeat;
	background-size:cover;}
#staff .mihara #catch #mainV{
	background:url(../../staff/interview/kmi/images/img_mainV.jpg) center top no-repeat;
	background-size:cover;}
#staff .kushiro #catch #mainV{
	background:url(../../staff/interview/hk/images/img_mainV.jpg) center top no-repeat;
	background-size:cover;}
#staff .nakajima #catch #mainV{
	background:url(../../staff/interview/sn/images/img_mainV.jpg) center top no-repeat;
	background-size:cover;}
#staff .hamada #catch #mainV{
	background:url(../../staff/interview/mh/images/img_mainV.jpg) center top no-repeat;
	background-size:cover;}
#staff .rm #catch #mainV{
	background:url(../../staff/interview/rm/images/img_mainV.jpg) center top no-repeat;
	background-size:cover;}
#staff .sa #catch #mainV{
	background:url(../../staff/interview/sa/images/img_mainV.jpg) center top no-repeat;
	background-size:cover;}
#staff .mk #catch #mainV{
	background:url(../../staff/interview/km/images/img_mainV.jpg) center top no-repeat;
	background-size:cover;}
#staff .sw #catch #mainV{
	background:url(../../staff/interview/sw/images/img_mainV.jpg) center top no-repeat;
	background-size:cover;}
#staff .km #catch #mainV{
	background:url(../../staff/interview/km/images/img_mainV.jpg) center top no-repeat;
	background-size:cover;}
#staff .hs #catch #mainV{
	background:url(../../staff/interview/hs/images/img_mainV.jpg) center top no-repeat;
	background-size:cover;}
#staff .ky #catch #mainV{
	background:url(../../staff/interview/ky/images/img_mainV.jpg) center top no-repeat;
	background-size:cover;}
#staff .mc #catch #mainV{
	background:url(../../staff/interview/mc/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:#000000;
	color:#ffffff;
	margin-bottom:5px;
	padding:0px 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:#ffffff;
	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:#ffffff;
}

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

#staff #interview .offtime.reverse .floatR{
	border:1px solid #00a7ac;
	box-sizing:border-box;
	padding:40px 50px;
	background-color:#ffffff;
	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(../../staff/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(../../staff/interview/images/bg_diagram.jpg) center center no-repeat;
	background-blend-mode:multiply;
	background: #333f48\9; /* IE10以下 */
	color:#ffffff;
	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:#ffffff;
	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 .3s;
	width: 154px;
	height: 154px;
	-webkit-border-radius: 77px;
	-moz-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:0px;}
#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:0px 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(../../staff/interview/kmu/images/img_mainV_sp.jpg) center top no-repeat;
	background-size:cover;}
#staff .fuji #catch #mainV{
	background:url(../../staff/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(../../staff/interview/ky/images/img_mainV_sp.jpg) center top no-repeat;
	background-size:cover;}

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

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

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

#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:0px;
}
#staff #interview .interviewBox h4.question{
	font-size:15px;
}
#staff #interview .interviewBox h4.answer{
	font-size:20px;
}
#staff #interview .interviewBox p{
	line-height:2.0;
}

#staff #interview .offtime{
	border:1px solid #00a7ac;
	box-sizing:border-box;
	padding:20px;
}
#staff #interview .offtime:before{
    padding-top: 0px;
}
#staff .fuji #interview .offtime:before{
    padding-top: 0px;
}
#staff #interview .offtime .floatL,
#staff #interview .offtime .floatR{
	width:100%;
	float:none;
}
#staff #interview .offtime .floatL{
	position:relative;
	padding:0px;
	margin-bottom:10px;
	border:0px;
}
#staff #interview .offtime .floatR{
	position:relative;
	top:0px;
}
#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:0px;
	margin-bottom:10px;
	border:0px;
}
#staff #interview .offtime.reverse .floatL{
	position:relative;
	top:0px;
}
#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:0px;
}
#staff #interview #memberList ul li p.member_copy:after{
	content:"";
	width:100px;
	display:block;
	border-bottom:1px solid #000000;
	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:0px;
}
}