@charset "utf-8";
/* CSS Document */

/*PC*/
@media print, screen and (min-width: 769px) {
	
.headerIn { width: 100%;}

/*index
-------------------------------*/

.index {}
.index .voiceList { width: 90%; margin: auto;}
.index .voiceList li { float: left; width: calc( 100% / 3 - 3% ); margin: 0 3% 5% 0;}
.index .voiceList li:nth-child(3n+3) { margin-right: 0;}
.index .voiceList li a {}
.index .voiceList li a img {}
.index .voiceList li a p { width: 90%; height: auto; background: #26b9eb; margin: -30px auto auto; padding: 20px 5px; box-sizing: border-box; color: #FFF; box-shadow:0px 0px 25px 6px #d3d8d0; text-align: center; position: relative; z-index: 5;}



/*detail
-------------------------------*/
.hedImg_box { width: 1200px; margin: 0 auto; position: relative; }
.hedImg { width: 800px; margin: auto auto 50px; }
.hedImg img { width: 100%; height: auto; margin: auto -200px auto auto; padding: 0 0 0 200px; }
.intro { width: 300px; height: 300px; background: #26b9eb; margin: auto; padding: 0; box-sizing: border-box; color: #FFF; position: absolute;  bottom: 100px; left: 150px; z-index: 5; box-shadow:0px 0px 25px 6px #d3d8d0; text-align: center;}
.intro_none { width: 1200px;  background: #26b9eb; margin: auto; padding: 0; box-sizing: border-box; color: #FFF;  box-shadow:0px 0px 25px 6px #d3d8d0; text-align: center; padding: 30px; margin-bottom: 50px;  }
.txt_none { margin: 15px auto; }
.intro .inBox { display: table-cell; text-align: center; vertical-align: middle; padding: 20px 20px; height: 260px; width: 260px;}
.intro .inBox h3 { font-size: 24px; margin-bottom: 20px;}
.intro .inBox p { font-size: 18px;}


.job { margin-bottom: 50px;}
.job .box { display: flex; width: 100%; margin-bottom: 70px; }
.job .box:nth-child(2n+2) { display: flex; width: 100%; flex-direction: row-reverse;}
.job .box .img { width: 50%;  padding: 0; box-sizing: border-box; }
.job .box .imgL { width: 50%; margin: 0 auto; position: relative!important; height: auto; }
.job .box .imgL::before { content: ""; width: 100%; height: 100%; display: block; border: 1px solid #26b9eb; left: -30px; top: 30px; position: absolute; z-index: -1; max-height: 400px;  }
.job .box .imgR { width: 50%; margin: 0 auto; position: relative!important; height: auto; }
.job .box .imgR::before { content: ""; width: 100%; height: 100%; display: block; border: 1px solid #26b9eb; right: -30px; top: 30px; position: absolute; z-index: -1; max-height: 400px!important;  }
.job .box .img img { width: 100%; height: auto; }
.job .txt { width: 50%; padding: 0 5%; box-sizing: border-box; align-self: center;}


.answer { background:url(../images/index/bg1.png) 0 0 repeat; padding: 20px 0;}
.answer .txt { width: 800px;}
.answer .answerIn { width: 1200px; margin: auto; }
.answer .answerIn .txt h3 { margin: 0; padding:  0 0 0 35px; font-size: 1.1em; position: relative;}
.answer .answerIn .txt h3::before { content: ""; border-top: solid 2px #26b9eb; width: 30px; position: absolute; top: 49%; left: 0;}
.answer .answerIn .txt p { margin: 10px auto 20px; padding: 0; line-height: 140%;}


.sliderVoiceBg { padding: 50px 0; background: rgba(255,84,28,0.1); margin: 50px 0;}
.sliderVoiceBg h3 { text-align: center; font-size: 24px; margin: auto auto 40px;}
.sliderVoice { margin: 0 auto; width: 80%;}
.sliderVoice li { float: left; width: calc( (100% - 6%) / 4); margin: 0 2% 2% 0;}
.sliderVoice li:nth-child(4n+4) { margin-right: 0;}
.sliderVoice li a { display: block;}
.sliderVoice li a img { width: 100%; height: auto;}
.sliderVoice li a p { width: 90%; height: auto; background: #26b9eb; margin: -30px auto auto; padding: 20px 5px; box-sizing: border-box; color: #FFF; box-shadow:0px 0px 25px 6px #d3d8d0; text-align: center; position: relative; z-index: 5;}




.detail .job p {}
.detail .job .imgL {}
.detail .job .imgL::after {}
.detail .job .imgR {}
.detail .job .imgR::after {}


.voice_list { width: 100%; margin: 0 auto; display: flex; flex-wrap: wrap; }
.voice_list li { width: 32%; margin-right: 2%; position: relative;}
.voice_list li:nth-child(3n+3) { margin-right: 0px; }
.voice_list li:nth-child(n+4) { margin-top: 50px; }
.voice_list li a { display: block; background: #fff;  box-shadow: 2px 2px 0px rgba(0,0,0,0.2);  }
.voice_list_txtbox { padding: 15px; }
.voice_list li::before { display: block; position: absolute; font-family: "Font Awesome 5 Free"; content: "\f054"; right: 8px; bottom: 0px; color: #fff; z-index: 10; font-weight: bold; font-size: 12px;  }
.voice_list li::after { width: 0;
height: 0;
content: "";
display: block;
position: absolute;
border: 34px solid transparent;
border-bottom: 34px solid #26b9eb;
right: -34px;
bottom: -34px;
transform: rotate(135deg);
-ms-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-webkit-transform: rotate(135deg);
clear: both;
}

.voice_list_type { font-size: 18px; font-weight: bold; margin-bottom: 5px; color: #E56A21; }
.voice_list_name { font-size: 16px; font-weight: bold; }



}



/*sp*/
@media only screen and (max-width: 768px) {
	
.headerIn { width: 100%;}

/*index
-------------------------------*/




/*detail
-------------------------------*/
.hedImg_box { width: 100%; margin: 0 auto; position: relative; }
.hedImg { width: 100%; height: auto; margin: auto auto ; position: inherit;}
.hedImg img { width: auto; height: auto; margin: auto auto auto auto; padding: 0 0 0 0; float: none;}
.intro { width: 80%; height: auto; background: #26b9eb; margin: -4% auto 10%; padding: 0; box-sizing: border-box; color: #FFF; position: relative; z-index: 5; box-shadow:0px 0px 25px 6px #d3d8d0;}
.intro .inBox { display: block; text-align: center; vertical-align: middle; padding: 10px 5px; height: auto; width: auto;}
.intro .inBox h3 { font-size: 18px;}
.intro .inBox p { font-size: 14px;}

.intro_none { width: 98%;  background: #26b9eb; margin: auto; padding: 0; box-sizing: border-box; color: #FFF;  box-shadow:0px 0px 25px 6px #d3d8d0; text-align: center; padding: 30px; margin-bottom: 50px;  }
.txt_none { margin: 15px auto; }

.job { margin-bottom: 50px;}
.job .box { display: block; width: 100%;}
.job .box:nth-child(2n+2) { display: block; width: 100%; flex-direction: row-reverse;}
.job .box .img { width: 90%; height: auto; min-height: inherit; padding: 0; box-sizing: border-box; margin: auto auto 2%;}
.job .box .img img { display: block;}
.job .txt { width: 90%; padding: 0; box-sizing: border-box; align-self: center; margin: auto; margin: auto auto 2%;}


.answer { background:url(../images/index/bg1.png) 0 0 repeat; padding: 20px 2%;}
.answer .txt { width: 100%;}
.answer .answerIn { width: 100%; margin: auto; }
.answer .answerIn .txt h3 { margin: 0; padding:  0 0 0 35px; font-size: 1.1em; position: relative;}
.answer .answerIn .txt h3::before { content: ""; border-top: solid 2px #26b9eb; width: 30px; position: absolute; top: 49%; left: 0;}
.answer .answerIn .txt p { margin: 10px auto 20px; padding: 0; line-height: 140%;}


.sliderVoiceBg { padding: 50px 0; background: rgba(255,84,28,0.2); margin: 50px 0;}
.sliderVoiceBg h3 { text-align: center; font-size: 24px; margin: auto auto 40px; }
.sliderVoice { margin: 0 auto; width: 90%;}
.sliderVoice li { float: left; width: calc( (100% - 2%) / 2); margin: 0 2% 2% 0;}
.sliderVoice li:nth-child(2n+2) { margin-right: 0;}
.sliderVoice li a { display: block;}
.sliderVoice li a img { width: 100%; height: auto;}
.sliderVoice li a p { width: 90%; height: auto; background: #26b9eb; margin: -30px auto auto; padding: 20px 5px; box-sizing: border-box; color: #FFF; box-shadow:0px 0px 25px 6px #d3d8d0; text-align: center; position: relative; z-index: 5;}


.voice_list { width: 100%; margin: 0 auto; display: flex; flex-wrap: wrap; }
.voice_list li { width: 100%;  position: relative;}
.voice_list li:nth-child(n+2) { margin-top: 30px; }
.voice_list li a { display: block; background: #fff;  box-shadow: 2px 2px 0px rgba(0,0,0,0.2);  }
.voice_list_txtbox { padding: 15px; }
.voice_list li::before { display: block; position: absolute; font-family: "Font Awesome 5 Free"; content: "\f054"; right: 8px; bottom: 0px; color: #fff; z-index: 10; font-weight: bold; font-size: 12px;  }
.voice_list li::after { width: 0;
height: 0;
content: "";
display: block;
position: absolute;
border: 34px solid transparent;
border-bottom: 34px solid #26b9eb;
right: -34px;
bottom: -34px;
transform: rotate(135deg);
-ms-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-webkit-transform: rotate(135deg);
clear: both;
}

.voice_list_type { font-size: 18px; font-weight: bold; margin-bottom: 5px; color: #E56A21; }
.voice_list_name { font-size: 16px; font-weight: bold; }




}