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

/* 共通 */
.container {
    position: relative;
    max-width: 1180px;
    min-width: 320px;
    margin: 0 auto;
    text-align: left;
    padding-left: 0px;
    padding-right: 0px;
}

.footer-content .container {
    padding-left: 20px;
    padding-right: 20px;
}

.scbox{
    padding: 18vh 0px;
}




.container{
    z-index: 100;
}

.scbox .ttl,
.concept .container,
.recruiting .container{
    padding-left: 20px;
    padding-right: 20px;
}

.sticyarea{
    width: 100%;
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 2em;
    
}


.sticyNav{
    width: 90px;
    position: relative;
    left: auto;
    top: auto;
    margin-top: 0px;
    margin-left: 0px;
    height: auto;
}

.sticyNav .sticyNav-content {
    height: 100%;
}

.sticyNav ul{
    display: block;
    height: 100%;
}

.sticyNav ul li {
    position: relative;
    width: 100%;
    /* height: calc(calc(100% - 34px)/2); */
    /* height: calc(calc(100% - 100px)/3); */
    height: 450px;
    margin: 0;
    color: #000;
    font-family: 'Oswald', sans-serif;
    font-size: .75rem;
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
}

.sticyNav ul li:last-child {
    /* height: 34px */
    height: 350px;
}

.sticyNav ul li:last-child::after {
    content: "";
}

.sticyarea article{
    width : 90%;
    max-width: 960px;
    margin: 0 auto;
}


.sentence-block{
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
    margin-bottom: 100px;
}

.sentence-block:last-child{
    margin-bottom: 0px;
}

.sentence-block > div{
    width: 50%;
}

.sentence-block .block-body {
    position: relative;
    height: 350px;
    background-color: #fff;
    font-size: .875rem;
    font-size: 1.4rem;
    font-weight: 300;
    line-height: 1.7857142857em;
}

.sentence-block .block-body .block-body-inner {
    padding: 10.4166666667% 10.4166666667% 18.75%;
    padding: 15% 10.4166666667% 18.75%;
}

.block-img figure{
    background-size: cover;
    background-position: center center;
    height: 100%;
}


.sentence-block .block-btn {
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 0 10.4166666667% 10.4166666667%;
    padding: 0 10.4166666667% 15%;
    text-align: center;
}







.background div{
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    height: 100%;
    min-height: auto;
    background: no-repeat center 0, no-repeat center 33.3333333333%, no-repeat center 66.6666666667%, no-repeat center bottom;
    background-image: none, none, none, none;
    background-size: auto, auto, auto, auto;
    background-size: 100% 25.001%;
    opacity: 0;
    -webkit-transition: opacity 0.8s 0s ease-in-out;
    -o-transition: opacity 0.8s 0s ease-in-out;
    transition: opacity 0.8s 0s ease-in-out;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translate(-50%, 0%) translate3d(0, 0, 0);
    transform: translate(-50%, 0%) translate3d(0, 0, 0);
    z-index: 1;
}




.bg_set_5 .background .bg01,
.bg_set_4 .background .bg02,
.bg_set_3 .background .bg03,
.bg_set_2 .background .bg04{
    opacity: 1;
}



#main section.hero{
    z-index: 110;;
}



.btnbox{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 1.4em;
}

.btnbox li{
    width: 48%;
    padding: 0.41em 0%;
    margin: 0;
}

.btnbox li a{
    display: block;
}

/* 1142px */



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

    .roles_slider_card_3{
        width: 100%;
        display: block;
        justify-content: none;
        margin: 0 auto;
    }

    .roles_slider_card_3{
        border-left: #dcdcdc solid 1px;
        border-right: #dcdcdc solid 1px;
    }
    
    .roles_slider_card_3.no_border_l{
        border-left: none;
    }
    
    .roles_slider_card_3.no_border_r{
        border-right: none;
    }
    

    .sentence-block .block-body .h3-ttl {
        font-size: 2.1929824561vw;
    }

    .sentence-block .block-body .h3-ttl span {
        font-size: 1.7543859649vw;
    }

}





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

    .roles_slider_card_2{
        width: 100%;
        display: block;
        justify-content: none;
        margin: 0 auto;
    }

    .roles_slider_card_2{
        border-left: #dcdcdc solid 1px;
        border-right: #dcdcdc solid 1px;
    }
    
    .roles_slider_card_2.no_border_l{
        border-left: none;
    }
    
    .roles_slider_card_2.no_border_r{
        border-right: none;
    }
    


    .roles_base h3{
        font-size: 26px;
        padding-bottom: 26px;
    }

    .slidercard div.card h5{
        font-size: 14px;
    }


    .bt_slider{
        transition: all 500ms 0s ease;
        position: absolute;
        width: 24px;
        height: 24px;
        top: 32px;
        right: 0px;
        background-color: #000;
        cursor: pointer;
    }

    .bt_slider::before{
        content: "";
        display: block;
        position: absolute;
        width: 10px;
        height: 10px;
        border-top: #FFF solid 3px;
        border-right: #FFF solid 3px;
        top: 50%;
        left: 40%;
        transform: translate(-50%,-50%) rotate(45deg) ;
    }

    #bt_slider_prev.bt_slider{
        right: 28px;
    }

    
    
    
}


@media (max-width: 599.98px){


    .scbox{
        padding: 10vh 0px;
    }

    
    .scbox .ttl{
        font-size: 4.8vw;
    }


    .scbox .container{
        padding-left: 5px;
        padding-right: 5px;
    }
    

    .sentence-block {
        display: block;
        justify-content: space-between;
        flex-direction: row-reverse;
        margin-bottom: 100px;
      }


    .sentence-block > div{
        width: auto;
    }

    .sentence-block .block-img figure::before {
        content: "";
        display: block;
        width: 100%;
        padding-bottom: 61.5384615385%;
    }

    
    
    .sticyNav{
        width: 40px;
    }

    .sticyNav ul li {
        position: relative;
        width: 100%;
        /* height: calc(calc(100% - 34px)/2); */
        height: calc(calc(100% - 200px)/3 + calc(100px));
        margin: 0;
        color: #000;
        font-family: 'Oswald', sans-serif;
        font-size: .75rem;
        font-size: 1.2rem;
        font-weight: 500;
        line-height: 1.5;
        text-align: center;
    }

    .sticyNav ul li:last-child {
        /* height: 34px */
        /* height: 350px; */
        height: calc(calc(100% - 200px)/3 + calc(0px));
    }

    .sticyNav ul li span {
        font-size: .85rem;
        line-height: 1.4117647059;
        padding-bottom: 12px;
        line-height: 1.015;
    }
    
    

    .sticyarea article{
        width : 90%;
        max-width: 960px;
        padding-bottom: 0px;
    }

    
    
    .sentence-block .block-body {
        position: relative;
        height: 0;
        padding: 0;
          padding-bottom: 0px;
        padding-bottom: 77.6450511945%;
        font-size: .78125rem;
        font-size: 1.25rem;
        font-size: 3.3333333333vw;
        line-height: 1.6em;
    }

    .sentence-block .block-body .block-body-inner {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
        padding: 6.1433447099% 6.1433447099% 16.0409556314%;
        padding: 15.3846% 4.3956% 16.0409556314%;
    }

    .sentence-block .block-body .h3-ttl span {
        font-size: 3.4666666667vw;
    }

    .sentence-block .block-body .h3-ttl {
        font-size: 4vw;
    }

    .sentence-block .block-btn {
        right: 0;
        padding: 0 6.1433447099% 15%;
    }

    .block-btn .btn {
        padding: 11px 42px;
        border-radius: 1.7391304348em;
        font-size: .92rem;
        font-size: 1.15rem;
        line-height: 1.1304347826;
    }

    .sentence-block .block-btn .btn {
        font-size: 3.0666666667vw;
    }

    .background div{
        background-size: 600px 25%;
    }
    
}



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

    .slidercard div.card{
        width: calc(87vw - 1px) ;
    }

    .slidercard div.slick-slide{
        width: calc(87vw - 1px) ;
       
    }
    
    .roles_slider_card_2,
    .roles_slider_card_3,
    .roles_slider_card_4{
        border-left: none;
        border-right: none;
    }
    
    

}


@media (max-width: 480px){

    .sentence-block {
        margin-bottom: 6vh;
    }

}