/* Hides from IE Mac \ */
/* End Hack */

html {
    font-size: 62.5%;
    background: #fff;
    width: 100%;
    min-width: 100%;
}

body {
    font-size: 1.6rem;
    line-height: 1.5;
    background: #fff;
    color: #333;
    width: 100%;
    min-width: 100%;
}


.l-main, .l-footer{
    overflow: hidden;
}


.l-main section, .l-footer{
    position: relative;
}

p {
    font-size: 1.3rem;
    font-feature-settings: "palt" 1;
    letter-spacing: 0.05rem;
}

img {
    width: 100%;
}

a{
    color: #333;
}

a:hover{
    opacity: 0.8;
}


.inner {
    padding: 60px 10px;
    position: relative;
    z-index: 3;
}

.en {
    font-family: josefin-sans, sans-serif;
    font-weight: 700;
    font-style: italic;
    text-transform: uppercase;
}

.ttl {
    font-size: 4rem;
    line-height: 1;
    text-align: center;
    margin-bottom: 30px;
}

.ttl-ja {
    font-size: 1.5rem;
    display: block;
    margin-top: 12px;
    font-style: normal;
}



/*ヘッダー*/
.l-header {
    background: #000;
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 10px;
}

.header-logo {
    width: 100px;
}

.header-ttl {
    color: #fff;
    font-size: 1rem;
    line-height: 2.4;
    font-feature-settings: "palt" 1;
}

.main-visual img{
    display: block;
}


/*メッセージ*/
.message {
    background-image: url(../images/recruit/2021/bg_message.png);
    background-size: cover;
    background-color: #116D9A;
    color: #fff;
}

.message .contents p {
    font-size: 1.3rem;
    line-height: 2;
    text-align: center;
}


/*インタビュー*/

.interview {}

.interview-list {
    display: flex;
    flex-wrap: wrap;
}

.interview-list li {
    width: calc(50% - 10px);
    margin-left: 20px;
    margin-bottom: 40px;
}

.interview-list li:nth-child(odd) {
    margin-left: 0;
}

.interview-list li a{
    display: block;
}

.interview .list-item .detail {
    line-height: 1;
}

.name{
     color: #333;
}

.job{
    color: #116A98;
    font-weight: bold;
}

.interview .list-item .detail .name {
    font-size: 2.2rem;
}

.interview .list-item .detail .job {
    font-size: 1rem;
}




.modaal-content-container{
    padding: 0;
}


.interview-contents{
    display: none;
}

.interview-contents-inner{
    min-height: 100vh;    
    overflow: scroll;
}


.interview-contents-inner:before{
    content: '';
    display: block;
    width: 100%;
    height: 100vh;
    position:fixed;
    top:0;
  left:0;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 150px 30px;
/*    background-image: url(../images/recruit/2021/iv_01_img@2x.png);    */
    background-color: #E3EFF4;
    z-index: 0;
}



.anjyu.interview-contents-inner:before{
    background-image: url(../images/recruit/2021/iv_01_img@2x.png);    
}


.shotaro.interview-contents-inner:before{
    background-image: url(../images/recruit/2021/iv_02_img@2x.png);    
}

.reina.interview-contents-inner:before{
    background-image: url(../images/recruit/2021/iv_03_img@2x.png);    
}

.tatsuya.interview-contents-inner:before{
    background-image: url(../images/recruit/2021/iv_04_img@2x.png);    
}

.yuka.interview-contents-inner:before{
    background-image: url(../images/recruit/2021/iv_05_img@2x.png);    
}


.interview-contents-ttl, .interview-contents-text{
    position: relative;
    z-index: 1;    
    padding: 0 10px;
}

.interview-contents-ttl{
    padding-top:120px; 
}

.interview-contents-text{
    padding-bottom:60px; 
}



.interview-contents-ttl .name {
    text-align: left;
    font-size: 3.6rem;
}

.interview-contents-ttl .job {
    text-align: left;
    font-size: 1.4rem;
    display: block;
    margin-top: 10px;
}


.interview-contents-text .section-ttl{
    font-size: 1.8rem;
    font-weight: bold;
    margin-top: 30px;
}

.interview-contents-text p{
    margin-top: 8px;
    line-height: 1.75;
}


.close-btn-wrap{
    padding-top: 80px;
}


.close-btn{
    display: block;
    width: 100px;
    margin: 0 auto;
}


/*キャリア*/

.career {
    background: transparent radial-gradient(closest-side at 50% 50%, #FFFFFF 0%, #EAEAEAE6 100%) 0% 0% no-repeat padding-box;
}

.career .inner{
    padding: 60px 0;
}

.career p{
    text-align: center;
    padding: 0 10px;
    box-sizing: border-box;
}

.tab_wrap{
    margin-top: 30px;
}


input[type="radio"] {
    display: none;
}


.tab_area{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    padding: 0 10px;
}

.tab_area label {
    border: 1px solid #333;
    border-left:none; 
/*    padding: 8px 80px;*/
    width: calc(100% / 4);
    padding: 8px 0;
    font-size: 1.1rem;
    text-align: center;
    box-sizing: border-box;
}

.tab_area label:hover{
    cursor: pointer;
    opacity: 0.8;
}

.tab_area label:first-child{
    border-left: 1px solid #333;
}

/*
.panel_area{
    padding: 20px 0;
}
*/

.tab_panel{
    display: none;
}


@keyframes show{
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}

#tab1:checked ~ .tab_area .tab1_label {
    background: #116A98 0% 0% no-repeat padding-box;
    color: #fff;
    border: 1px solid #116A98;
}

#tab1:checked ~ .panel_area #panel1 {
    display: block;
animation: show 0.28s linear 0s;
}

#tab2:checked ~ .tab_area .tab2_label {
    background: #116A98 0% 0% no-repeat padding-box;
    color: #fff;
    border: 1px solid #116A98;
}

#tab2:checked ~ .panel_area #panel2 {
    display: block;
animation: show 0.28s linear 0s;
}

#tab3:checked ~ .tab_area .tab3_label {
    background: #116A98 0% 0% no-repeat padding-box;
    color: #fff;
    border: 1px solid #116A98;
}

#tab3:checked ~ .panel_area #panel3 {
    display: block;
animation: show 0.28s linear 0s;
}

#tab4:checked ~ .tab_area .tab4_label {
    background: #116A98 0% 0% no-repeat padding-box;
    color: #fff;
    border: 1px solid #116A98;
}

#tab4:checked ~ .panel_area #panel4 {
    display: block;
animation: show 0.28s linear 0s;
}


.tab_panel picture{
    height: 100vh;
    overflow: hidden;
    position: relative;
    display: block;
}

.tab_panel picture img{
/*    width: 110%;*/
    transform: translate(-50%,-50%);
    position: absolute;
    left: 50%;
    top: 50%;
}


#panel2.tab_panel picture img{
/*    width: 115%;*/
    left: 48%;
}


#panel3.tab_panel picture img{
    transform: scale(0.9,0.9) translate(-50%,-50%);
    left: 48%;
    top: 46%;
}

#panel4.tab_panel picture img{
    transform: scale(1.05,1.05) translate(-50%,-50%);
}


/*福利厚生*/

.walfare{
    background-color: #116A98;
    background-image: url(../images/recruit/2021/bg_walfare@2x.png);
    background-position: top;
    background-size: cover;
    background-repeat: no-repeat;
}

.walfare .inner{
    padding-left: 25px;
    padding-right: 25px;
}

.walfare .ttl{
    color: #fff;
}

.walfare-list li{
    background-color: #fff;
    padding: 30px;
    margin-top: 20px;
}

.walfare-list li .item-ttl{
    font-size: 1.8rem;
    font-weight: bold;
    text-align: center;
}

.walfare-list li .img{
    width: 195px;
    text-align: center;
    margin: 0 auto;
    padding: 20px 0;
}

.walfare-list li .img img{
    width: auto;
    height: 100px;
}


.entry .button{
    font-size: 2rem;
    padding: 18px;
    text-align: center;
    display: block;
    box-sizing: border-box;
    line-height: 1;
    box-shadow: 0px 3px 6px #00000029;
}

.entry .button:hover{
    box-shadow: none;
}

.button-list li{
    margin-top: 20px;
}

.button-intern{
    color: #333;
    border: 2px solid #333;
    background: #fff;
}

.button-entry{
    color: #fff;
    background: #000;
}


.l-footer{
    background: #F2F2F2;
    color: #333;
}

.scroll-top a{
    width: 103px;
    display: block;
    text-align: center;
    margin: 0 auto;
}

.scroll-top-inner{
    padding: 40px 0;
}

.footer-list{
    display: flex;
    flex-wrap: wrap;
}

.footer-list li{
    font-size: 0.9rem;
    letter-spacing: -0.025rem;
    font-weight: bold;
    width: calc(100% / 2);
    border-top: 1px solid #CCCCCC;
    border-left:1px solid #CCCCCC;
    box-sizing: border-box;
    text-align: center;
    padding: 20px 10px;
}

.footer-list li a{
    display: block;
}

.footer-list li:nth-of-type(odd){
    border-left: none;
}


.copyright-wrap{
    background: #000;
    padding: 30px 0;
    text-align: center;
    margin: 0 auto;
    color: #fff;
    font-weight: bold;
}

.copyright{
    font-size: 0.9rem;
}

.img-shutter{
    position: absolute;
    width: 300px;
    opacity: 0.15;
    z-index: 1;
}

.shutter1{
    bottom: -120px;
    right: -120px;
}

.shutter2{
    bottom: -120px;
    left: -120px;
    transform: rotate(30deg);
}

.shutter3{
    bottom: -120px;
    right: -120px;
}

.shutter4{
    display: none;
}

.shutter5{
    bottom: -120px;
    left: -120px;
    transform: rotate(-35deg);
}




@media screen and (min-width: 560px) {
    
    .interview-contents-inner:before{
    background-position: 50vw 30px;
}    

    .tab_panel picture{
        height:  480px;
    }
    
    .pc-none{
        display: none;
    }    
}


@media screen and (min-width: 960px) {

.header-inner {
    padding: 20px 50px;
}
    
    .header-logo{
        width: 172px;
        height: 20px;
}
    
    .header-logo .svg{
        height: 20px;
    }
    
    .header-ttl{
font-size: 1.6rem;
        font-feature-settings: "palt" 1;
    }
    
p {
    font-size: 1.4rem;
}

.ttl {
    font-size: 6rem;
    margin-bottom: 40px;
}

.ttl-ja {
    font-size: 1.8rem;
    margin-top: 18px;
}

    
    
.inner {
    padding: 80px 0;
    width: 1000px;
    margin: 0 auto;
}

    .panel_area{
/*        padding: 40px 0 0;*/
        height: 550px;
        text-align: center;
        box-sizing: border-box;
    }
    
    
    .tab_panel picture{
        height: 550px;
}

    
    .panel_area img{
        width: 840px;
    }
    
    
    
    .tab_area label{
        font-size: 1.6rem;
        padding: 8px 80px;
        width: auto;

    }
    
    .message{
        background-position: -50% 50%;
    }
    .message .contents p{
        font-size: 1.4rem;
    }
    
    
/*インタビュー    */
.interview-list li {
    width: calc((100% / 5) - 16px);
    margin-left: 20px;
    margin-bottom: 40px;
    box-sizing: border-box;
}
    
.interview-list li:nth-child(odd) {
    margin-left: 20px;
}

.interview-list li:first-child {
    margin-left: 0;
}

    .interview-contents-inner{
        position: relative;
        background-position: 10% 30px;
    }
    
    .interview-contents-inner:before{
    background-size: contain;
        background-position: 10vw 30px;
}    
    .interview-contents-ttl, .interview-contents-text{
        padding-left: 30vw; 
        padding-right: 10vw;
        box-sizing: border-box;
        margin: 0 auto;
    }
    .interview-contents-ttl{
            padding-top:10vw;         
    }

    .interview-contents-text{
        padding-bottom: 60px;
}
    

.close-btn{
    float: right;
}
.close-btn:hover{
    cursor: pointer;
}


    
    .walfare .inner{
        padding: 80px 0;
    }

    .walfare-list{
        display: flex;
        flex-wrap: wrap;
/*        justify-content: space-between;*/
    }
    
    .walfare-list li{
        width: calc((99% / 3) - 10px);
        margin-left: 20px;
        box-sizing: border-box;
}    
 
    .walfare-list li:nth-child(3n+1){
        margin-left: 0;
    }
    
    .walfare-list li .detail p{
        font-size: 1.4rem;
    }
    
    .button-list{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
}
    .button-list li{
        width: 400px;
        margin: 0 16px;
    }
    
    .footer-inner{
        width: 1000px;
        margin: 0 auto;
        padding-bottom: 60px;
    }
    
    .footer-list{
        width: 750px;
        margin: 0 auto;
        align-items: center;
        justify-content: center;
    }
    .footer-list li{
        display: inline-block;
        width: auto;
        border: none;
        font-size: 1.4rem;
        position: relative;
        padding: 5px 15px;
    }
    
    .footer-list li:before{
        position: absolute;
        content: '';
        display: block;
        background:url(../images/recruit/2021/icon_arrw.png) no-repeat;
        width: 6px;
        height: 9px;
        transform: translate(-50%,-50%);
        top: 50%;
        left:15px;
    }
    
    .footer-list li a{
        padding-left: 10px;
        display: inline;
        font-weight: normal;
    }
    

.img-shutter{
    width: 550px;
}

.shutter1{
    bottom: -200px;
    right: -180px;
}

.shutter2{
    bottom: -200px;
    left: -180px;
    transform: rotate(30deg);
}

.shutter3{
    bottom: -200px;
    right: -180px;
}

.shutter4{
    bottom: -500px;
    left: -180px;
    transform: rotate(-35deg);
    width: 660px;
}

.shutter5{
    bottom: -200px;
    right: -180px;
    transform: rotate(-35deg);
}


    
}