/*=======================================
    recruit
=======================================*/

/*---------------------------
   header
---------------------------*/

    .header_container{
        background: unset;
    }

    .sticky{
        opacity: 1;
    }

/*---------------------------
   image_url
---------------------------*/

/*-- top-recruit-images --*/

    .m-recruit{
        background-image: url(../../assets/images/4_recruit/main_recruit_sp.jpg);
    }



/*-- culture-images --*/

    .r-c-img{
        background-image: url(../../assets/images/4_recruit/r-cultue_pc.jpg);
    }

    .r-c-img-sp{
        background-image: url(../../assets/images/4_recruit/r-cultue_sp.jpg);
    }

    .r-c-img2{
        background-image: url(../../assets/images/4_recruit/r-cultue2_pc.jpg);
    }

    .r-c-img2-sp{
        background-image: url(../../assets/images/4_recruit/r-cultue2_sp.jpg);
    }



/*-- careerUp-images --*/

    .r-ca-img{
        background-image: url(../../assets/images/4_recruit/r_careerUp.jpg);
    }

    .r-ca-img-sp{
        background-image: url(../../assets/images/4_recruit/r_careerUp_sp.jpg);
    }


/*-- benefits-images --*/

    .r-bn-img{
        background-image: url(../../assets/images/4_recruit/r_benefits_pc.jpg);
    }

    .r-bn-img-sp{
        background-image: url(../../assets/images/4_recruit/r_benefits_sp.jpg);
    }



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

    .m-recruit{
        background-image: url(../../assets/images/4_recruit/main_recruit.jpg);
    }

}

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

    .header_container{
        background: rgba(0, 113, 188, 0.80);
    }

}



/*---------------------------
   main-image_Section 
---------------------------*/

    .main-image-container{
        display: block;
    }

    .r-main-image{
        width: 100%;
        height: 100vh;
        background-repeat: no-repeat;
        background-position: top;
        background-size: cover;
    }

    .r-mainImage-content_box{
        bottom: 4%;
        width: 100%;
        position: absolute;
        display: flex;
        flex-direction: column-reverse;
        justify-content: space-between;   
        padding: 0 4%;
        color: var(--white);
    }

    .m-textbox-right{
        position: relative;
        text-shadow: 0px 6px 8px #333
    }
    
    .m-textbox-right h2{
        letter-spacing: 3.2px;
        line-height: 40px;
    }

    .m-textbox-right p{
        letter-spacing: 1.12px;
        line-height: 24px;
    }

    .r-mainImage-content_box-sp{
        display: flex;
        width: 100%;
        position: absolute;
        bottom: 16%;
        padding: 0 4%;
        color: var(--white);
    }

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

    .fs-96{
        font-size: 96px;
    }

    .fs-32{
        font-size: 32px;
    }

    .fs-28{
        font-size: 28px;
    }

    .m-textbox-right h2{
        line-height: 104px !important;
        margin-bottom: 12px;
        letter-spacing: 11.52px !important;
    }

    .m-textbox-right p{
        letter-spacing: 1.12px;
        line-height: 24px;
    }

}


@media screen and (max-width: 1280px) and (min-width: 768px) {

    .m-textbox-right h2{
        letter-spacing: 4px !important; 
        line-height: 58px !important;
    }

    .tb-fs-48{
        font-size: 48px;
    }

    .tb-fs-18{
        font-size: 18px;
    }

    .tb-fs-16{
        font-size: 16px;
    }

}




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


    .m-textbox-right{
        text-shadow: 0px 2px 0px rgba(16, 16, 16, 0.25);
    }

    .m-textbox-right h2{
        letter-spacing: 5.44px;
        line-height: 84px;
    }

    .m-textbox-right p{
        letter-spacing: 2px;
        line-height: 40px;
    }

}
 


/*---------------------------
   culture_Section 
---------------------------*/

    /* .culture-section{
        
    } */

/*---------------------------
   recruit_current-opening_section

   recruit_faq_section
---------------------------*/

    .recruit_accordion-item{
        position: relative;
        border-top: 1px solid var(--middleGray);
        padding: 32px 24px;
    }

    .recruit_accordion-item:last-child{        
        border-bottom: 1px solid var(--middleGray);
    }

    .r-c-btn{
        color: var(--darkGray);
        background-color: var(--bs-accordion-btn-bg);
        border: 0;
    }
    
    .r-c-btn::after{
        position: absolute;
        flex-shrink: 0;
        top: 30px;
        right: 24px;
        content: url(../../assets/images/4_recruit/accordion-btn.svg);
        vertical-align: middle;
        margin-left: auto;
        transform:rotate(180deg); 
        transition: all .25s ease-in-out;
    }

    .r-c-btn.collapsed::after{
        position: absolute;
        top: 30px;
        right: 24px;
        transform:rotate(0deg); 
        transition: all .25s ease-in-out;
    }

    .recruit-inside-body{
        padding-top: 28px;
        display: grid;
        grid-template-columns: 1fr;
        gap: 24px;
    }
    
    .recruitment-box{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        border-radius: 4px;
        border: 1px solid #87CEEB;
        background: #FFF;
        padding: 16px 24px;
    }

    .recruitment-title{
        font-size: 15px;
        margin-bottom: 0;
    }

/*----- no-job-announcement -----*/

    .no-job-announcement-box{
        padding-top: 28px;
        display: block;
    }

    .n-body{
        color: var(--darkGray);
    }

    .accordion-button:focus {
        z-index: 3;
        border-color: unset;
        box-shadow: unset;
    }

    .accordion-button:not(.collapsed) {
        color: var(--darkGray);
        background-color: unset;
    }


/*----- faq-section -----*/

    .faq-box{
        padding-top: 28px;
        display: block;
    }


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

    .recruit-inside-body{
        padding-top: 28px;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 40px;
    }

}



/*-----------------------------
   smartPhone-CSS-definition 
------------------------------*/

    .lh-34{
        line-height: 34px;
    }


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



}

@media screen and (max-width: 768px) {
    
    .contact-section .c-l-text{
        text-align: left;
    }

}