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

/******* 職種紹介 *******/
.filtering_box{width: 100%; margin: 50px auto; font-size: 15px;}
.filtering {list-style: none; display: flex; justify-content: center; align-items: center;}
.filtering li + li {margin: 0 0 0 17px;}
.filtering span {cursor: pointer; padding: 0 0 5px;}
.filtering span.active {font-weight: bold; border-bottom: 3px solid #0F218B;}
.filtering-list-cont {margin: 30px 0 0; padding: 0; list-style: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
.filtering-list-cont li {width:100%; max-width: 280px; margin: 0 auto 20px; position: relative;}
.filtering-list-cont li a {display: block; color: #333;}
.filtering-list-cont li a:hover {opacity: 0.7; transition: 0.3s ease-in-out;}

.filtering-list img{top:0; right: 0; position: absolute; z-index: 2;}
.bg_box{height:178px; margin: 22px 0 0; background:#e6e6e6;}

.job_type{height:178px; width: 43%; text-align: center; color: #FFF; font-weight: bold; font-size:18px; padding: 50px 0 0; position: relative; z-index: 1;}
.job_type .year{font-size: 12px; font-weight: normal; padding: 10px 0 0;}
.job_icon{position: absolute; top:10px; left:10px; font-size: 12px; font-weight: normal; border: 1px solid #FFF; line-height: 1; padding: 2px 5px;}

.gijutsu .job_type{background:#39b227}
.gijutsu .bg_box{border: 1px solid #39b227; border-bottom: none;}
.gijutsu-eigyo .job_type{background:#009ee0}
.gijutsu-eigyo .bg_box{border: 1px solid #009ee0; border-bottom: none;}
.eigyo-shien .job_type{background:#f55c72}
.eigyo-shien .bg_box{border: 1px solid #f55c72; border-bottom: none;}
.kansetsu .job_type{background:#f99b00}
.kansetsu .bg_box{border: 1px solid #f99b00; border-bottom: none;}

.chatch{font-size: 13px; font-weight: bold; line-height: 1.5em; padding: 10px;}
.chatch .link_txt{font-size: 11px; font-weight: normal;}

.gijutsu-eigyo .chatch{border: 1px solid #009ee0;}
.gijutsu .chatch{border: 1px solid #39b227;}
.eigyo-shien .chatch{border: 1px solid #f55c72;}
.kansetsu .chatch{border: 1px solid #f99b00;}

.job_detail{background: #FFF; height:80vh; margin:80px 15px 0; overflow:auto;}
.job_detail img{width: 100%; height: auto;}
.job_catch{font-size: 16px; font-weight: bold; line-height: 1.6em;}
.text_l,.text_r{padding: 20px; font-size: 15px; line-height: 1.75em;}
.job_note{font-size: 12px;}
.q{font-weight: bold; margin-top: 5px; font-size: 13px; }
.clr_g{color:#39b227;}
.clr_o{color:#f99b00;}
.clr_b{color:#009ee0;}
.clr_p{color:#f55c72;}



/******* 先輩社員インタビュー *******/
.icon{position: absolute; right: 8%; top:30px;}
.icon img{width: 100px; height: auto;}
.interview_chatch{background:rgba(0,0,0,0.3); color: #FFF; padding:15px; position: absolute; bottom: 0; width: 100%;}
.interview_chatch_main{font-size: 20px; font-weight: bold; line-height: 1.5em; margin: 0 0 5px;}
.interview_chatch_sub{font-size: 13px; line-height: 1.5em;}
.profile_box{background:#009ee0; color: #FFF; padding: 15px 0;}
.profile_job{font-size: 18px; font-weight: bold;}
.profile_note{font-size: 11px; font-weight:normal;}
.kikkake{margin: 10px 0 0; padding: 10px 0 0; border-top: 1px solid #FFF;}
.kikkake_title{font-size: 16px; font-weight: bold; line-height: 1.8em;}
.section02{background:#ecf9fe;}

.interview_txt_box{ position: relative;}
.interview_txt_box h2{font-size: 20px; padding: 20px 0; line-height: 1.5em;}
.interview_txt_box p{padding:0 0 20px;}
.interview_photo{width: 100%;}
.interview_photo img{width: 100%; height: auto;}

.memory05{background: #6c34c7; padding: 5px; color: #FFF; margin: 0;}
.memory03{background: #669628; padding: 5px; color: #FFF; margin: 0;}
.memory04{background: #133BA7; padding: 5px; color: #FFF; margin: 0;}
.memory_content{padding: 15px; border: 1px solid #FFF;}
.memory_title{width: 100%; margin:10px 0 20px; text-align: center;}
.memory_title img{width: 100%; max-width: 300px; height: auto;}
.memory_img{width: 100%; margin: 0 0 -180px 0; text-align:center;}
.memory_img img{width: 80%; max-width:240px;  height: auto; position:relative; z-index: 9998;}

.message_box{background:#a2e4ff; padding: 160px 20px 40px; text-align: center; position:relative; z-index: 9996;}
.message_box img{width: 100%; max-width: 400px; height: auto;}

/******* フッターメニュー *******/
.footer_link_box{width: 100%; margin: 40px 0 0;}
ul.footer_link{width: 100%; list-style: none;}
ul.footer_link li.footer_link_active{opacity: 0.5;}
ul.footer_link li img{width: 100%; height: auto;}
ul.footer_link>div.l_hide>li>a{ display: block; background:url(../images/arrow.png) no-repeat 94% 50%, linear-gradient(-15deg, #0f218b 0%, #2234a2 100%) ; color: #FFF; padding: 10px 0;}
ul.footer_link>div.l_hide>li>a>img{width:40px; height: auto; vertical-align: middle; margin: 0 15px 0;}

@media print, screen and (min-width: 767px) {

/******* 職種紹介 *******/
.filtering_box{width:94%; margin: 0px auto; font-size: 20px;}
.filtering li + li {margin: 0 0 0 30px;}
.filtering-list-cont {margin: 50px 0 0;}
.filtering-list-cont li {width: calc((100%/3) - 20px); max-width:inherit; margin: 0 10px 50px;}

.chatch{font-size: 14px; font-weight: bold;}

.job_detail{width:920px; height: 90vh; max-height:575px; margin:0 auto; overflow:auto;}
.job_detail img{width:380px; height: auto;}
.job_catch{font-size: 18px; font-weight: bold; line-height: 1.6em;}
.flo_l{float: left;}
.flo_r{float: right;}
.text_l{width:540px; padding: 20px 0 0 25px; font-size: 13px; line-height: 1.75em;}
.text_r{width:900px; padding: 20px 0 0 380px; font-size: 13px; line-height: 1.75em;}

#job19 .text_r{width:900px; padding: 15px 0 0 380px; font-size: 13px; line-height: 1.71em;}
#job19 .job_note, #job20 .job_note{font-size:11px; }

/******* 先輩社員インタビュー *******/
.icon{position:inherit; max-width: 960px; text-align: left; margin: 0 auto; right:auto; top:auto;}
.icon img{width:inherit; height: auto;}
.interview_chatch{background:none; color: #333; padding:0 0 0 550px; position:inherit; bottom:auto; max-width: 960px; margin: -100px auto 0;}
.interview_chatch_main{font-size: 26px; line-height: 1.4em; margin: 0 0 10px; text-shadow: 1px 1px 3px rgba(255,255,255,1);}
.interview_chatch_sub{font-size: 18px; line-height: 1.5em; text-shadow: 1px 1px 3px rgba(255,255,255,1);}
.profile_box{padding: 20px 0;}
.profile{width: 260px; float: left; padding: 0 0 0 30px;}
.kikkake{margin: 0 0 0 260px; padding: 0 30px 0 20px; border-left: 1px solid #FFF; border-top:none;}
.kikkake_title{font-size: 16px; font-weight: bold; line-height: 1.8em;}

.interview_txt_box h2{font-size: 22px; padding: 40px 0 30px; line-height: 1.5em;}
.interview_txt_box p{padding:0 0 40px; width: 620px;}
.interview_photo{width:1000px; position: absolute; top:40px; left:50%; transform: translateX(-50%); text-align: right;}
.interview_photo img{width: 300px; height: auto;}

.memory03,.memory05,.memory04{width: 300px; position: absolute; top:400px; right: 50%; transform: translateX(500px);}
.memory_content{padding: 15px; border: 1px solid #FFF;}
.memory_img{width: 240px; margin: 0 0 -170px 15px;}
.memory_img img{width:100%;}
.hexagon{width: 300px; position: absolute; top:1060px; right: 50%; transform: translateX(500px); z-index: 9997;}

.message_box{padding: 60px 0;}
.message_box img{width:841px; max-width:inherit; height: auto;}

/******* フッターメニュー *******/
.footer_link_box{margin: 40px auto 40px; width: 96%; max-width: 1000px;}
ul.footer_link{width:100%; margin: 0px auto;}
ul.footer_link li{width:25%; float: left;}
ul.footer_link li a:hover{opacity: 0.8; transition: 0.3s ease-in-out;}
}