@charset "UTF-8";

/*-------------------------
__company_style
-------------------------*/

#contents_title{background:url("images/title_back.jpg")no-repeat center center;background-size:cover; position: relative;}
#contents_title:after { content: ""; width: 100%; height: 100%; background: rgba(0,0,0,0.4); position: absolute; top: 0; left: 0; display: block;}

#company h2{ font-size: 3em; font-weight: 700; margin-bottom: 50px; text-align: center;}

.com_table{ text-align: left; margin-bottom: 80px;}
.com_table table{ font-size: 1.4em; line-height: 1.8em; border-collapse: collapse; width: 100%; max-width: 1100px; margin: 0 auto;}
.com_table table tr th{ width: 200px;}
.com_table table tr th,
.com_table table tr td{ border-bottom: 1px solid #000; padding: 20px; box-sizing: border-box;}
.com_table table tr td{ width: calc(100% - 200px);}
.com_table table tr td dl{ display: flex; margin-bottom: 15px;}
.com_table table tr td dl:last-child{ margin-bottom: 0;}
.com_table table tr td dl dt{ width: 90px;}
.com_table table tr td dl dd p{ display: flex;}
.com_table table tr td dl dd a{ display: inline-block; font-size: 11px; background-color: #777; color: #fff!important; padding: 0 6px; box-sizing: border-box; border-radius: 3px;}

.enkaku_list{ text-align: left; border-left: 2px solid #0A46B2; padding-left: 30px; padding-bottom: 5px; width: 550px; margin: 0 auto 100px;}
.enkaku_list dl{ font-size: 1.4em; margin: 35px 0; position: relative;}
.enkaku_list dl:before{ content: ''; display: block; position: absolute; top: 0; left: -38px; width: 15px; height: 15px; border-radius: 50vh; background-color: #0A46B2;}
.enkaku_list dl dt{ font-weight: 700; margin-bottom: 10px;}
.enkaku_list dl dd{}

#recruit_box{ width: 100%; max-width: 1200px; padding: 0 50px; box-sizing: border-box; margin: 0 auto;}
#recruit_box ul{ display: flex;}
#recruit_box ul li{ width: calc(50% - 40px);}
#recruit_box ul li:nth-child(1){ margin-right: 80px;}
#recruit_box ul li a{ display: block; font-size: 2em; border-top: 1px solid #000; border-bottom: 1px solid #000; padding: 40px 30px; position: relative;}
#recruit_box ul li a p{ position: absolute; top: 50%; right: 30px; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); width: 46px; height: 46px;}
#recruit_box ul li a p span{ /*position: relative;*/ display: inline-block; color: #000; vertical-align: middle; text-decoration: none; font-size: 15px;}
#recruit_box ul li a p span::before,
#recruit_box ul li a p span::after{ position: absolute; top: 0; bottom: 0; left: 0; margin: auto; content: ""; vertical-align: middle;}
#recruit_box ul li a p span::before{ width: 46px; height: 46px; background: #dcdcdc;}
#recruit_box ul li a p span::after{ left: 15px; width: 10px; height: 10px; border-top: 1px solid #000; border-right: 1px solid #000; -webkit-transform: rotate(45deg); transform: rotate(45deg);}


td.office dl dd ul li{ display: flex; margin: 0 0 10px;}
td.office dl dd ul li p:nth-child(1){ text-align: center; line-height: 1.2em; background-color: #ddd; box-sizing: border-box; padding: 5px; margin-right: 10px; position: relative; width: 150px;}
td.office dl dd ul li p:nth-child(2){ width: calc(100% - 160px);}


@media screen and (min-width: 768px) {
#recruit_box ul li a{ -webkit-transition: .2s; -ms-transition: .2s; transition: .2s;}
#recruit_box ul li a:hover{ background-color: #fff;}
.com_table table tr td dl dd a:hover{ opacity: 0.6;}
td.office dl dd ul li p:nth-child(1) span{ display: block; position: absolute; top: 50%; left: 0; z-index: 0; width: 100%; transform: translate(0, -50%);}
}

@media screen and (max-width: 767px) {
    
.sp_none{ display: none;}

#company h2{ font-size: 2em; margin-bottom: 30px;}
    
.com_table{ margin-bottom: 40px;}
.com_table table{ font-size: 1.3em; line-height: 1.6em; }
.com_table table tr th,
.com_table table tr td{ border-bottom: none; display: block; width: 100%;}
.com_table table tr th{ background-color: #ddd; padding: 5px 20px;}
.com_table table tr td{ padding: 15px 20px;}
.com_table table tr td.office dl{ display: block!important;}
.com_table table tr td.office dl dt{ font-weight: 700;}

.enkaku_list{ padding-left: 20px; width: calc(100% - 40px); margin: 0 30px 30px; box-sizing: border-box;}
.enkaku_list dl{ font-size: 1.3em; line-height: 1.5em; margin: 25px 0; position: relative;}
.enkaku_list dl:before{ content: ''; display: block; position: absolute; top: 0; left: -27px; width: 12px; height: 12px; border-radius: 50vh; background-color: #0A46B2;}
.enkaku_list dl dt{ font-weight: 700; margin-bottom: 5px;}

#recruit_box{ padding: 0 20px;}
#recruit_box ul li{ width: 50%;}
#recruit_box ul li:nth-child(1){ margin-right: 20px;}
#recruit_box ul li a{ display: block; font-size: 1.4em; padding: 20px 10px;}
#recruit_box ul li:nth-child(1) a{ border-bottom: 1px solid #000;}
#recruit_box ul li a p{ position: absolute; top: 50%; right: 0; width: 26px; height: 26px;}
#recruit_box ul li a p span{ /*position: relative;*/ display: inline-block; color: #000; vertical-align: middle; text-decoration: none; font-size: 1.4em;}
#recruit_box ul li a p span::before{ width: 26px; height: 26px; background: #dcdcdc;}
#recruit_box ul li a p span::after{ left: 5px; width: 8px; height: 8px; border-top: 1px solid #000; border-right: 1px solid #000; -webkit-transform: rotate(45deg); transform: rotate(45deg);}

td.office dl dd ul li{ display: block; margin: 10px 0;}
td.office dl dd ul li p:nth-child(1){ width: 100%; background-color: #888; color: #fff;}
td.office dl dd ul li p:nth-child(2){ width: 100%;}

}