@charset "UTF-8";


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

CAREER arcive

---------------------------------*/
#recruitments {background:#E0E0E0;}

.rec-mv{display:flex; justify-content:center; align-items:center; height:430px; width:100%; background:url(img/MV.jpg) no-repeat center center; background-size:cover; position:relative;}
.rec-mv .mv-txt{text-align:center; padding: 20px 60px 0; position:relative; z-index:1;}
.rec-mv .mv-txt em{font-size:72px; font-weight:700; font-style: italic; color:#8F8077; opacity: .9; display:block; line-height:1; letter-spacing:5px;}

.badges{display:flex; flex-wrap:wrap; align-items: center; gap:9px;}
.badge {-webkit-font-smoothing: antialiased; transition: .3s; cursor: pointer; display:inline-block; font-size:16px; font-weight:700; line-height:1; padding:.25em .5em; border-radius:2em; color:#828282; border: 1px solid currentColor; }
.badge input[type="checkbox"] { display:none; }
.badge._color1 {color:#2994CB;}
.badge._color2 {color:#E0801E;}
.badge._color3 {color:#229E73;}
.badge._on,
.badge:has(:checked),
.rec-list .badge {background:#828282; border-color: transparent!important; color:#FFF!important; }
.badge._color1._on,
.badge._color1:has(:checked),
.rec-list .badge._color1 {background:#2994CB; }
.badge._color2._on,
.badge._color2:has(:checked),
.rec-list .badge._color2 {background:#E0801E; }
.badge._color3._on,
.badge._color3:has(:checked),
.rec-list .badge._color3 {background:#229E73; }

.rec-search {display:flex; min-height: 188px; box-sizing: border-box;}
.rec-search .title-box {display:flex;flex-direction: column;justify-content: center;gap: 15px;align-items: center; padding: 25px 40px 25px 0; margin: 0 40px 0 0; border-right: 1px dashed #515151; }
.rec-search .title-box h2 {font-size:20px; font-weight:700; line-height: 1.25; color:#515151;}
.rec-search .search-box {padding: 25px 0; align-self: center;}
.rec-search .search-box dl {display:flex;}
.rec-search .search-box dl + dl {margin-top: 18px}
.rec-search .search-box dl dt {font-size:16px;font-weight:700;flex: 0 0 8em;}

.rec-wrap {max-width:min(1152px, 90%); margin:0 auto; padding:0 0 90px;}
.rec-search {margin-top:-75px; position:relative; background:#FFF; padding:15px 40px;}
.rec-list {padding:45px 0 60px;}
.rec-list li {border-bottom: 1px solid #C6C6C6;}
.rec-list li a {position: relative; display:flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size:18px; padding:22px 0 20px; }
.rec-list li a:after { opacity: 0; transition: .2s; content:''; display:block; width:.4em; height:.4em; border-top: 2px solid #515151; border-right: 2px solid #515151; transform: translateY(-50%) rotate(45deg); position:absolute; top:50%; right:20px; }
.rec-list li a:hover:after {opacity: 1; right: 10px;}
.rec-list li a h3 {font-weight:700;}
.rec-list li a p {width: 100%; position: relative;padding-left: 15px;line-height: 1.5;}
.rec-list li a p:before {content: ''; display: block; width: 9px; height: 16px; background:url(img/ICON_pin.png) no-repeat center center / contain;mix-blend-mode: multiply;position: absolute;top:5px;left: 0;}


.pager {font-size: 13px; display: flex; justify-content: space-between;}
.pager a { box-sizing:border-box; display:block; width:min(calc((100vw - 100px)/2),18em); line-height:3.2; padding:0 8%; font-weight:700; text-decoration: none; background: #333; color: #fff!important; border: 1px solid transparent; border-radius: 3px; position:relative; transition: all .2s ease; }
.pager .prev { text-align:right; }
.pager a:after { content:''; display:block; width:.4em; height:.4em; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: translateY(-50%) rotate(45deg); position:absolute; top:50%; right:8%; }
.pager .prev a:after { left: 8%; transform: scale(-1,1) translateY(-50%) rotate(45deg); }

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

CAREER single

---------------------------------*/
.requirement {max-width: 1152px; margin: 0 auto; padding: 180px 0 150px; box-sizing:border-box;}
.requirement .sec-ttl small:before,
.sec-ttl small:after { width: 172px; }

.requirement .requirement-block{margin:90px auto 25px; border-top:#b2b2b2 solid 1px;}
.requirement .requirement-block dl{background-color:#f2f2f2; border:#b2b2b2 solid 1px; border-top:none; padding-left:22.5%; position:relative; box-sizing:border-box;}
.requirement .requirement-block dt{position:absolute; left:60px; top:28px; font-size:18px; line-height:30px;}
.requirement .requirement-block dd{font-size:18px; line-height:30px; padding:28px 60px; box-sizing:border-box; background-color:#fff;}
.requirement .requirement-block dd div{position:relative; padding:15px 15px 15px 128px; max-width:750px; border:#b2b2b2 solid 1px; margin:15px 0 60px;}
.requirement .requirement-block dd div span{position:absolute; top:15px; left:15px;}

.bt-entry { margin:150px auto 0; }


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

BONUS

---------------------------------*/
.bonus{background: url(img/BG_bonus.jpg) no-repeat center bottom; background-size: cover; padding: 100px 0;}
.bonus .sec-ttl small:before,
.bonus .sec-ttl small:after { width: 156px; }
.bonus .desc {font-size: 20px; font-weight: 700; margin: 40px 0 10px;}
.bonus .sec-ttl + .desc {text-align: center; font-size: 16px;}
.bonus .bonus-box{max-width:1226px; margin:0 auto; padding:50px 10px;}
.bonus .bonus-contents {display: flex; flex-wrap: wrap; column-gap: 2%; row-gap: 15px;}
.bonus .bonus-contents li{background-color:#fff; padding:10px; box-sizing: border-box;}
.bonus .bonus-contents li:last-child{margin-right:0;}
.bonus .bonus-contents li a {display:block; overflow:hidden;}
.bonus .bonus-contents li .rc-img{overflow:hidden;}
.bonus .bonus-contents li .rc-img img{transition:.4s; -webkit-transition:.4s;}
.bonus .bonus-contents li a:hover .rc-img img{transform:scale(1.1); -webkit-transform:scale(1.1);}
.bonus .bonus-contents li .rc-txt{padding:20px 5%;}
.bonus .bonus-contents li .rc-txt p{font-size:16px; font-weight:bold; line-height:1.5;}

@media screen and (min-width:576px){
.bonus .bonus-contents li {flex: 0 0 48%;}
}
@media screen and (min-width:768px){
.bonus .bonus-contents li{flex: 0 0 calc((100% - 6%)/4);}
}
@media screen and (min-width:1200px){
.bonus .bonus-contents li .rc-txt p{font-size:20px;}
}


@media screen and (max-width:767px){

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

CAREER arcive

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

.rec-mv{height:220px; background-image:url(img/MV_sp.jpg);}
.rec-mv .mv-txt { padding: 0 25px 45px;}
.rec-mv .mv-txt em{font-size:36px; letter-spacing:3px;}

.badges {gap: 6px;}
.badge {font-size:13px;}
.rec-list .badges {width: 100%;}

.rec-search {display:block; min-height: inherit; margin: -45px 15px 0; padding:0 20px;}
.rec-search .title-box {flex-direction: row; justify-content: space-between; padding: 20px 0; border-right: 0; border-bottom: 1px dashed #515151; margin-right:0; }
.rec-search .title-box h2 {font-size:16px;}
.rec-search .search-box {padding: 20px 0; }
.rec-search .search-box dl {flex-direction: column; gap: 7px;}
.rec-search .search-box dl dt {font-size:13px; flex: 0 0 auto;}

.rec-wrap {max-width:100%;}
.rec-list {padding: 30px 15px 45px; }
.rec-list li a {padding: 15px 0 13px; font-size:14px; }
.rec-list li a h3 {width: 100%;}
.rec-list li a p:before {width: 7px; height: 13px; top:4px; left: 2px;}

.pager {padding: 0 15px;}

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

CAREER single

---------------------------------*/
.requirement{padding:60px 0 90px;}
.requirement .sec-ttl small:before,
.requirement .sec-ttl small:after { width: 68px; }
.requirement .requirement-block{margin:60px auto 30px; border-top:none;}
.requirement .requirement-block dl{border:none; padding-left:0;}
.requirement .requirement-block dt{position:static; left:0; top:0; font-size:12px; font-weight:bold; line-height:40px; padding-left:10px; box-sizing:border-box;}
.requirement .requirement-block dd{font-size:12px; line-height:18px; padding:16px 10px;}
.requirement .requirement-block dd div{padding:10px; margin:15px auto 30px;}
.requirement .requirement-block dd div span{position:static; top:0; left:0; display:block; margin-bottom:5px; font-weight:bold;}

.bt-entry { margin:60px auto 0; }



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

BONUS

---------------------------------*/
.bonus .sec-ttl small:before,
.bonus .sec-ttl small:after { width: 68px; }
.bonus .desc {font-size: 16px;}
.bonus .sec-ttl + .desc {font-size: 13px;}

.bonus .bonus-box{padding:30px 10px 0;}



}