@charset "utf-8";
@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
@import url('https://fonts.googleapis.com/css?family=Roboto:100,500,700,900&display=swap');

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

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

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

.floatL{float:left;}
.floatR{float:right;}
.flexiblebox {
	 display: -webkit-flex;
	 display: flex;
	 -webkit-align-items: center;
	 align-items: center;
}
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;}

#staff_interview p.textIndent_01 {
	text-indent: -1em;
	margin-left: 1em;
}


#data .nextNavUl li a p {text-align: center;}

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

   1_社員インタビュー（トップ）

******************************************************************/
/*
■社員紹介
0_社員紹介トップ
1_社員インタビュー
2_データ
*/

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 .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_km p.member_copy{
	font-size: 1.1vw;
}


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

   	1_社員インタビュー

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

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

#staff .nextContents{
	padding:260px 0 50px 0;
}
#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 .abe #catch #mainV{
	background:url(../../person/interview/images/abe/img_mainV.jpg) center top no-repeat;
	background-size:cover;}

#staff #catch h3{
	font-family:'Noto Sans Japanese', sans-serif;
	font-size:20px;
	font-weight:800;
	line-height:1.6;
	letter-spacing:0.15em;
}
#staff #catch p{
    font-size: 13.5px;
	line-height:1.7;
	text-align:center;
}
#staff #catch p:last-child{
    margin: 25px auto 0;
    width: 750px;
	letter-spacing:1px;
}

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

#staff #interview{}
#staff #interview .interviewBox{
	position:relative;
	margin:0 auto 60px;
}
#staff #interview .width750{width:750px;}
#staff #interview .width1000{width:1000px;}
#staff #interview .width1000 .floatL,
#staff #interview .width1000 .floatR{width:465px;}
#staff #interview .interviewBox h4{
	letter-spacing:0.02em;
}
#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:25px;
}
#staff #interview .interviewBox h4.answer{
	font-family:'Noto Sans Japanese', sans-serif;
	font-size:26px;
	font-weight:700;
    text-align: center;
	line-height:1.4;
	margin-bottom:30px;
}
#staff #interview .width1000 .floatL h4.answer,
#staff #interview .width1000 .floatR h4.answer{text-align: left;}

#staff #interview .interviewBox p{
	font-size:15px;
	line-height:2.2;
}
#staff #interview .interviewBox span{
	background-color:#daf4f5;
	padding:3px 5px;
}



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

   	2_データ

******************************************************************/
#data .nextContents{padding: 180px 0 0px 0;}
#data .nextContents #dataBox{
    background:url("../../person/data/images/bg_data.gif") left top repeat;
    padding: 50px 20px 60px 20px;
}
#data .nextContents #dataBox #dataInnerBox{
    margin: 0 auto;
	width: 1000px;
}
#data .nextContents #dataBox #dataInnerBox > ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
#data .nextContents #dataBox #dataInnerBox > ul > li{
    display: block;
    float: left;
    width: 100%;
    margin: 0 auto 1%;
    padding: 30px 20px;
    box-sizing: border-box;
    background-color: #fff;
    font-family: 'Roboto', 'Noto Sans Japanese', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
#data .nextContents #dataBox #dataInnerBox ul li.secondSize{width: 49.5%;}
#data .nextContents #dataBox #dataInnerBox ul li.thirdSize{width: calc(98% / 3);}

#data .nextContents #dataBox #dataInnerBox ul li.secondSize,
#data .nextContents #dataBox #dataInnerBox ul li.thirdSize{margin: 0 0.99% 1% 0}
#data .nextContents #dataBox #dataInnerBox ul li:nth-of-type(4),
#data .nextContents #dataBox #dataInnerBox ul li:nth-of-type(3),
#data .nextContents #dataBox #dataInnerBox ul li:nth-of-type(2){margin: 0 auto 1%;}
#data .nextContents #dataBox #dataInnerBox ul li:nth-of-type(6){margin: 0 auto 1%;}

#data .nextContents #dataBox #dataInnerBox ul li h4{
    text-align: center;
    font-size: 18px;
    font-weight: 900;
    margin-bottom: 22px;
    line-height: 1.5;
}
#data .nextContents #dataBox #dataInnerBox ul li img{
    width: 100%;
    display: block;
}

@media screen and (min-width: 768px){
	#data .nextContents #dataBox #dataInnerBox ul li:nth-of-type(1) img{
		margin: 44px auto 0;
		width: 458px;
	}
	#data .nextContents #dataBox #dataInnerBox ul li:nth-of-type(3) img{
		margin: 0 auto;
		width: 605px;
	}
	#data .nextContents #dataBox #dataInnerBox ul li:nth-of-type(5) img{
		margin: 0 auto;
		width: 448px;
	}
	#data .nextContents #dataBox #dataInnerBox ul li:nth-of-type(6) img{
		margin: 0 auto;
		width: 468px;
	}
}

#data .nextContents #dataBox #dataInnerBox ul li:nth-of-type(2) img{
	margin: 0 auto;
	width: 184px;
}
#data .nextContents #dataBox #dataInnerBox ul li .question01{
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
}
#data .nextContents #dataBox #dataInnerBox ul li .question01 p{
    color: #00a7ac;
}
#data .nextContents #dataBox #dataInnerBox ul li .question01 p:nth-child(1){
    padding-top: 0;
}
#data .nextContents #dataBox #dataInnerBox ul li .question01 p:nth-child(2){width: calc(100% - 340px);}
#data .nextContents #dataBox #dataInnerBox ul li .question01 p strong{
    display: block;
    font-size: 140px;
    line-height: 1.0;
    font-weight: 700;
    font-family: 'Roboto', 'Noto Sans Japanese', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
#data .nextContents #dataBox #dataInnerBox ul li.thirdSize p{
    width: 65%;
    margin: 0 auto;
    line-height: 1.0;
    display: table;
}
#data .nextContents #dataBox #dataInnerBox ul li.answerYN p span{
    width: 4em;
    display: inline-block;
    vertical-align: middle;
}
#data .nextContents #dataBox #dataInnerBox ul li.answerYN:last-child p span{width: 8em}
#data .nextContents #dataBox #dataInnerBox ul li.answerYN p strong{
    font-size: 42px;
    font-weight: 900;
}
#data .nextContents #dataBox #dataInnerBox ul li .answerYN_inner {
	margin: 20px auto 0;
	width: 184px;
}
#data .nextContents #dataBox #dataInnerBox ul li:nth-of-type(4) p:nth-of-type(2),
#data .nextContents #dataBox #dataInnerBox ul li:nth-of-type(4) p:nth-of-type(3){width: 82%;}
#data .nextContents #dataBox #dataInnerBox ul li:nth-of-type(4) p:nth-of-type(2) span,
#data .nextContents #dataBox #dataInnerBox ul li:nth-of-type(4) p:nth-of-type(3) span{
    width: 8em;
}
#data .nextContents #dataBox #dataInnerBox ul li p.answerY strong{color: #00a7ac;}
#data .nextContents #dataBox #dataInnerBox ul li p.answerN strong{
    color: #bbbbbb;
    font-size: 20px;
}

#data .nextContents #dataBox #dataInnerBox ul li.commentBox{
    padding: 30px 50px;
}
#data .nextContents #dataBox #dataInnerBox ul li.commentBox ul{}
#data .nextContents #dataBox #dataInnerBox ul li.commentBox ul li{
    list-style: none;
    padding: 20px 0 0 32px;
    border-top: 1px dotted #cccccc;
    margin-bottom: 20px;
    font-size: 14.5px;
    background:url("../../person/data/images/ico_comment.gif") left 23px no-repeat;
	background-size:24px;
    line-height: 1.8;
}
#data .nextContents #dataBox #dataInnerBox ul li.commentBox ul li:nth-of-type(1){border-top:0;}
#data .nextContents #dataBox #dataInnerBox ul li.commentBox ul li.border{border-top: 1px dotted #cccccc;}
#data .nextContents #dataBox #dataInnerBox ul li.commentBox .toggleBox{display:none;}
#data .nextContents #dataBox #dataInnerBox ul li.commentBox ul .toggleBtn{
    border: 1px solid #00a7ac;
    width: 100%;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.05em;
    line-height: 50px;
    color: #00a7ac;
    cursor: pointer;
    opacity: 1.0;
    transition: opacity .1s linear;
}
#data .nextContents #dataBox #dataInnerBox ul li.commentBox ul .toggleBtn:hover{
    opacity: 0.5;
}
#data .nextContents #dataBox #dataInnerBox ul li.commentBox ul .toggleBtn::before{
    content: "さらに表示する";
    padding: 1px 28px 1px 0;
    background:url("../../person/data/images/btn_toggleOn.gif") right center no-repeat;
}
#data .nextContents #dataBox #dataInnerBox ul li.commentBox ul .toggleBtn.active::before{
    content: "閉じる";
    background:url("../../person/data/images/btn_toggleOff.gif") right center no-repeat;
}



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


@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 .abe#catch #mainV{
	background:url("../../person/interview/images/abe/img_mainV_sp.jpg") center top no-repeat;
	background-size:cover;}

#staff #catch h3{
	font-size:18px;
}
#staff #catch p{
	letter-spacing:1px;
    font-size: 13px;
}

#staff #catch p:last-child{
    text-align: left;
	letter-spacing:0px;
    margin: 20px auto 0;
    width: 90%;
}

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

#staff #interview{}
#staff #interview .interviewBox{
	margin:0 auto 40px;
	/*position:relative;*/
}
#staff #interview .interviewBox:last-child{
    margin: 0 auto;
}
#staff #interview .width750,
#staff #interview .width1000{
	width:92%;
	padding:0 4%;
}
#staff #interview .width1000 .floatL,
#staff #interview .width1000 .floatR{
    width:100%;
    margin-bottom: 20px;}
#staff #interview .interviewBox h4{
	letter-spacing:0px;
}
#staff #interview .interviewBox h4.question{
	font-size:15px;
}
#staff #interview .interviewBox h4.answer{
	font-size:17px;
    text-align: left;
    margin-bottom: 20px;
}
#staff #interview .interviewBox p{
	line-height:2.0;
}


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

#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;
}




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

   	2_SP_データ

******************************************************************/
#data .nextContents{padding: 0;}
#data .nextContents #dataBox{padding: 5% 5% 40px 5%;}
#data .nextContents #dataBox #dataInnerBox{
    width: 100%;
    margin: 0 auto;
}
#data .nextContents #dataBox #dataInnerBox > ul{}
#data .nextContents #dataBox #dataInnerBox > ul > li{
    float: none;
    width: 100%;
    margin: 0 auto 1%;
    padding: 20px 15px 30px 15px;
}
#data .nextContents #dataBox #dataInnerBox ul li.secondSize{width: 100%;}
#data .nextContents #dataBox #dataInnerBox ul li.thirdSize{width: 100%;}

#data .nextContents #dataBox #dataInnerBox ul li.secondSize,
#data .nextContents #dataBox #dataInnerBox ul li.thirdSize{margin: 0 0 1% 0}
#data .nextContents #dataBox #dataInnerBox ul li:nth-of-type(4),
#data .nextContents #dataBox #dataInnerBox ul li:nth-of-type(6){margin: 0 0 1% 0;}
#data .nextContents #dataBox #dataInnerBox ul li h4{
    font-size: 16px;
    margin-bottom: 20px;
}
#data .nextContents #dataBox #dataInnerBox ul li .question01{max-width: 100%;}
#data .nextContents #dataBox #dataInnerBox ul li .question01 p{
    font-size: 15px;
    text-align: center;
    float: none;}
#data .nextContents #dataBox #dataInnerBox ul li .question01 p:nth-child(1){
    width: 100%;
    padding-top: 0;
}
#data .nextContents #dataBox #dataInnerBox ul li .question01 p:nth-child(2){width: 100%;}
#data .nextContents #dataBox #dataInnerBox ul li .question01 p strong{
    font-size: 70px;
    margin-bottom: 20px;
}
#data .nextContents #dataBox #dataInnerBox ul li.thirdSize p{
    width: 50%;
    max-width: 250px;
}
#data .nextContents #dataBox #dataInnerBox ul li.thirdSize p:nth-of-type(2){margin: 15px auto 5px;}
#data .nextContents #dataBox #dataInnerBox ul li.thirdSize p:nth-of-type(2),
#data .nextContents #dataBox #dataInnerBox ul li.thirdSize p:nth-of-type(3){width: 230px;}
#data .nextContents #dataBox #dataInnerBox ul li.thirdSize p span{font-size: 14px;}
#data .nextContents #dataBox #dataInnerBox ul li.thirdSize:last-child p span{width: 8em}
#data .nextContents #dataBox #dataInnerBox ul li.thirdSize p strong{font-size: 56px;}
#data .nextContents #dataBox #dataInnerBox ul li:nth-of-type(4) p:nth-of-type(2),
#data .nextContents #dataBox #dataInnerBox ul li:nth-of-type(4) p:nth-of-type(3){
    width: 280px;
    max-width: 100%;
}
#data .nextContents #dataBox #dataInnerBox ul li:nth-of-type(4) p:nth-of-type(2) span,
#data .nextContents #dataBox #dataInnerBox ul li:nth-of-type(4) p:nth-of-type(3) span{
    width: 8em;
}
#data .nextContents #dataBox #dataInnerBox ul li.thirdSize p.answerN strong{font-size: 24px;}
#data .nextContents #dataBox #dataInnerBox ul li.commentBox{padding: 20px;}
#data .nextContents #dataBox #dataInnerBox ul li.commentBox ul{}
#data .nextContents #dataBox #dataInnerBox ul li.commentBox ul li{
    font-size: 14px;
    line-height: 1.7;
    background:url("../../person/data/images/ico_comment.gif") left 23px no-repeat;
    background-size:24px;
}
#data .nextContents #dataBox #dataInnerBox ul li.commentBox ul li:nth-child(1){
    padding-top: 0;
    background:url("../../person/data/images/ico_comment.gif") left 3px no-repeat;
    background-size:24px;
}
#data .nextContents #dataBox #dataInnerBox ul li.commentBox ul li.border{
    padding-top: 20px;
    background: url(../../person/data/images/ico_comment.gif) left 23px no-repeat;
    background-size: 24px;
}
#data .nextContents #dataBox #dataInnerBox ul li.commentBox .toggleBox{display:none;}
#data .nextContents #dataBox #dataInnerBox ul li.commentBox ul .toggleBtn{
    font-size: 15px;
    line-height: 40px;
}
#data .nextContents #dataBox #dataInnerBox ul li.commentBox ul .toggleBtn::before{
    content: "さらに表示する";
    padding: 1px 26px 1px 0;
    background:url("../../person/data/images/btn_toggleOn.gif") right center no-repeat;
    background-size: 18px;
}
#data .nextContents #dataBox #dataInnerBox ul li.commentBox ul .toggleBtn.active::before{
    content: "閉じる";
    background:url("../../person/data/images/btn_toggleOff.gif") right center no-repeat;
    background-size: 18px;
}
#data .nextContents #dataBox #dataInnerBox ul li.thirdSize .pcBr{
    display: none;
}

}