/*=======================================
    Color-Definition
=======================================*/

:root {
    --white:#ffffff;
    --deepNavy: #112E51;
    --deepBlack: #15181f;
    --darkBlack: #212631;
    --middle-darkBlack: #333333;
    --darkGray: #4d505c;
    --middleGray:#e2e5e9;
    --lightGray: #fafbfb;
    --Point-Blue: #50abe7;
    --Point-darkBlue: #0071bc;
    --Point-lightBlue: #f6fafb;
}


/*=======================================
    header-image-container
=======================================*/

    .header-image-container{
        display: block;
        width: calc(100%);
        height: 280px;
        background-repeat: no-repeat;
        background-position: top left;
        background-size: cover;
        background-color: var(--Point-darkBlue);
    }

    .header-image-box{
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 0 10%;
        color: var(--white);
    }

    .header-en-title{
        letter-spacing: 1.2px;
        margin-bottom: 0px;
    }

    .header-ja-title{
        margin-bottom: 0px;
    }



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

}

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

    .header-image-container{
        height: 480px;
        background-position: center;
    }

    .header-en-title{
        letter-spacing: 3.2px;
        margin-bottom: 8px;
    }

}


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

/*-- company-header-image --*/

    .ch-img{
        background-image: url(../../assets/images/header_images/h_company.png);        
    }

/*-- service-header-image --*/

    .sh-img{
        background-image: url(../../assets/images/header_images/h_service.png);        
    }
 
/*-- recruit-header-image --*/

    .rh-img{
        background-image: url(../../assets/images/header_images/h_recruit.png);        
    }

/*-- contact-header-image --*/

    .cont-img{
        background-image: url(../../assets/images/header_images/h_contact.png);        
    }

/*-- privacyPolicy-header-image --*/

    .ph-img{
        background-image: url(../../assets/images/header_images/h_privacyPolicy.png);        
    }


/*===== SP-header-images =====*/
@media screen and (max-width:767px) {

    .ch-sp-img{
        background-image: url(../../assets/images/header_images/h_company_sp.png);        
    }

    .sh-sp-img{
        background-image: url(../../assets/images/header_images/h_service_sp.png);        
    }

    .rh-sp-img{
        background-image: url(../../assets/images/header_images/h_recruit_sp.png);        
    }

}




/*=======================================
    breadcrumb-list_container
=======================================*/

    .breadcrumb-list_container{
        display: flex;
        height: 40px;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
    }

    .breadcrumb-list-box{
        position: relative;
    }

    .breadcrumb-list-arrow{
        position: relative;
        bottom: 1px;
        padding: 0 6px;
    }


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

}

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

    .breadcrumb-list_container{
        height: 44px;
    }

    .breadcrumb-list-arrow{
        padding: 0 8px;
    }

}



/*=======================================
    Object-Component
=======================================*/

    .c-gap-20{
        gap: 20px;
    }

    .c-gap-48{
        gap: 48px;
    }

    .c-gap-40{
        gap: 0px;
    }

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

    .c-gap-40{
        gap: 40px;
    }

}

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

    .c-reverse{
        display: flex !important;
        flex-direction: column-reverse !important;
        grid-template-columns: 1fr !important;
    }

}


/*=======================================
    service-header-Component
=======================================*/

    .service-header-container{
        width: 94%;
        margin: 0 auto;
    }

    .service-header-list-box{
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px 8px;
        flex-direction: row;
        justify-content: center;
        border-radius: unset;
        border: unset;
        padding: 0px;
    }

    .service-header-list{
        display: inline-block;
        position: relative;
        text-align: center;
        border-radius: 50px;
        border: 1px solid #87CEEB;
        padding: 6px 4px 8px;
    }

    .service-header-list a{
        font-size: 13px;
        font-weight: 500;
        color: var(--deepNavy);
    }

    .service-header-list a svg{
        position: relative;
        bottom: 1px;
        margin-left: 4px;
        transform: rotate(90deg);
    }

    .service-header-list a:hover > svg{
        bottom: 0px;
        transition: .35s ease;
    }

    .service-header-list:last-child{
        margin-right: 0px;
    }


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

    .service-header-container{
        width: 94% !important;
        margin: 0 auto;
    }

    .service-header-list-box{
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 12px 8px;
        border-radius: 12px !important;
        padding: 12px 56px !important;
    }

    .service-header-list{
        text-align: center !important;
        margin-right: 0px !important;
    }

}

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

    .service-header-container{
        width: fit-content;
    }

    .service-header-list-box{
        display: flex;
        flex-direction: row;
        justify-content: center;
        border-radius: 50px;
        border: 1px solid #87CEEB;
        padding: 20px 96px;
    }

    .service-header-list{
        text-align: left;
        border-radius: unset;
        border: unset;
        margin-right: 64px;
    }

    .service-header-list a{
        font-size: 14px;
    }

}





/*=======================================
    col-1-Component
=======================================*/

    .col-1-container{
        display: grid;
        grid-template-columns: 1fr;
    }
    

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

}

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

    .col-1-container{
        display: grid;
        grid-template-columns: 1fr;
    }

}


/*=======================================
    col-2-Component
=======================================*/

    .col-2-container{
        display: grid;
        grid-template-columns: 1fr;
        justify-content: space-between;
        align-items: start;
    }


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

}

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

    .col-2-container{
        display: grid;
        grid-template-columns: 1fr 1fr;
        justify-content: space-between;
        align-items: start;
    }


}



/*=======================================
    col-3-Component
=======================================*/

.col-3-container{
    display: grid;
    grid-template-columns: 1fr;
    justify-content: space-between;
    align-items: start;
}

.col-3b-container{
    display: block;
    position: relative;
    flex-direction: row;
    justify-content: center;
}






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


    
}

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

    .col-3-container{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        justify-content: space-between;
        align-items: start;
    }

    .col-3b-container{
        display: flex;
        flex-direction: row;
        justify-content: center;
    }


}

/*=======================================
    Box-Component
=======================================*/

    .c-box-container{
        width: calc(100%);
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .c-box-image{
        position: relative;
    }

    .c-box-image img{
        outline: solid 1px #eee;
        width: 100%;
    }

    .c-box-number-box{
        display: flex;
        position: absolute;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        top: 0;
        left: 0;
        width: 40px;
        height: 40px;
        color: var(--white);
        background-color: var(--Point-darkBlue);
    }

    .c-box-title{
        color: var(--deepNavy);
        margin-bottom: 0px;
    }

    .c-box-subtitle{
        color: var(--deepNavy);
    }

    .c-box-textarea{
        color: var(--darkGray);
        text-align: justify;
        margin-bottom: 0px;
    }

    .h244{
        height: 224px;
    }

    .h260{
        height: 260px;
    }

    .h280{
        height: 280px;
    }

    .h320{
        height: 320px;
    }

    .h360{
        height: 360px;
    }



    .f-blue{
        color: var(--Point-darkBlue);
    }

    .f-dg{
        color: var(--darkGray) !important;
    }

    .b-white{
        background-color: white;
    }

    .c-b-line-gray{
        border: 1px solid #e2e5e9;
        border-radius: 4px;
    }

    .c-b-line-blue{
        border: 1px solid #87ceeb;
        border-radius: 4px;
    }

    .p-28-26{
        padding: 28px 26px;
    }

    .p-40{
        padding: 40px;
    }


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

}

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

    .c-box-container{
        justify-content: flex-start;
    }

}

/*=======================================
    col-l-Component
=======================================*/

    .c-l-title{
        /* padding: 2%; */
        letter-spacing: 2.24px;
        color: var(--darkBlack);
    }

    .c-l-subTitle{
        padding: 0 2%;
        color: var(--darkBlack);
    }

    .c-sl-subTitle{
        display: flex;
        height: 44px;
        justify-content: center;
        align-items: center;
        padding: 0;
    }

    .c-l-title-text{
        line-height: 28px;
        color: var(--darkBlack);
    }

    .c-l-inside-title{
        line-height: 24px;
        color: var(--darkBlack);
        padding: 0 2%;
    }

    .c-l-text{
        line-height: 24px;
        color: var(--darkGray);
        padding: 0 2%;
        /* margin-bottom: 0px; */
    }

    .f-blue{
        color: var(--Point-darkBlue) !important;
    }

    .c-img-box{
        display: flex;
        position: relative;
        width: 100%;
        height: 100%;
    }

    .c-img-box .i-logo{
        position: absolute;
        top: 15px;
        right: 15px;
    }

    .img-r{
        justify-content: flex-end;
    }

    .img-c{
        justify-content: center;
    }

    .img-l{
        justify-content: flex-start;
    }

    .c-img{
        width: 100%;
        height: 184px;
        max-width: 100%;
        background-repeat: no-repeat;
        background-position: top;
        background-size: cover;
    }

    .c-c-img{
        width: 100%;
        height: 400px;
        max-height: 280px;
        max-width: 100%;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    .c-s-img{
        width: 100%;
        height: 184px;
        max-width: 100%;
        background-repeat: no-repeat;
        background-position: top;
        background-size: cover;
    }

    .c-r-img{
        width: 100%;
        height: 184px;
        max-width: 100%;
        background-repeat: no-repeat;
        background-position: top;
        background-size: cover;
    }

    .massage-icon-box img{
        max-width: 48px;
    }

    .v-img{
        width: 100%;
    }

    .v-img img{
        width: 100%;
    }

    .c-h336{
        height: 336px !important;
        max-width: 100% !important;
    }

    .c-h480{
        height: 200px !important;
        max-width: 100% !important;
    }

    

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

}

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

    .c-l-title{
        padding: 0;
    }

    .c-l-title-text{
        line-height: 32px;
    }

    .c-l-subTitle{
        padding: 0;
    }

    .c-l-inside-title{
        padding: 0;
    }
    
    .c-l-text{
        padding: 0;
    }

    .c-img{
        height: 100%;
        max-width: 448px;
    }

    .c-c-img{
        height: auto;
        max-height: 100%;
        max-width: 400px;
    }

    .c-s-img{
        height: 640px;
    }

    .c-r-img{
        max-width: 448px;
        height: 560px;
    }

    .c-h336{
        height: 480px !important;
        max-width: 100% !important;
    }

    .c-h480{
        height: 480px !important;
        max-width: 100% !important;
        width: 448px;
    }

}


/*=======================================
    table-Definition
=======================================*/

    .recruit-table{
        width: calc(100%);
    }

    .recruit-table th{
        width: 18%;
        vertical-align: center;
        text-align: center;
        padding: 24px 0px;
        border: 1px solid #b4b7c0;
        border-bottom: 0px;
        /* font-definition */
        font-size: 16px;
        font-weight: 400;
        color: var(--darkBlack);
        background-color: #fafbfb;
    }

    .recruit-table tr:last-child th{
        border-bottom: 1px solid #b4b7c0;
    }


    .recruit-table td{
        width: 82%;
        padding: 24px 40px;
        border: 1px solid #b4b7c0;
        border-bottom: 0px;
        border-left: 0px;
        /* font-definition */
        font-size: 16px;
        font-weight: 400;
        color: var(--darkBlack);
    }

    .recruit-table tr:last-child td{
        border-bottom: 1px solid #b4b7c0;
    }

    .recruit-table-btn a{
        margin: 56px auto 0px;
    }

@media screen and (max-width: 768px) {
    
    .recruit-table th{  
        width: 100%;
        display: block;
        border: 1px solid #F6FAFB;
        border-left: 1px solid #F6FAFB;
        background-color: #F6FAFB;
    }

    .recruit-table td{
        width: 100%;
        display: flex;
        text-align: center;
        border-bottom: 1px;
        border: 1px solid #F6FAFB;
        border-left: 1px solid #F6FAFB;
        padding: 20px 20px 20px 20px;
        align-items: center;
        justify-content: center;
        flex-direction: column;

    }

    .recruit-table tr:last-child th{
        border-bottom: 1px solid #F6FAFB;
    }

    .recruit-table tr:last-child td{
        border-bottom: 1px solid #F6FAFB;
    }

}

/*=======================================
    btn-Definition
=======================================*/

/*---- c-btn ----*/

    .c-btn{
        display: flex;
        position: relative;
        width: 100%;
        height: 44px;
        max-width: 336px;
        justify-content: center;
        align-items: center;
        border-radius: 2px;
        border: 1px solid #4D505C;
        margin-right: auto;
        margin-left: auto;
    }

    .c-btn img{
        position: absolute;
        right: 16px;
    }

    .c-btn:hover > img{
        right: 10px;
        transition: .35s;
    }

/*---- bc-btn ----*/

    .bc-btn{
        display: flex;
        position: relative;
        width: 100%;
        max-width: 200px;
        height: 48px;
        justify-content: flex-start;
        align-items: center;
        margin-right: auto;
        margin-left: auto;
        color: var(--white) !important;
        background-color: var(--deepBlack);
        padding: 0 24px;
    }

    .bc-btn img{
        position: absolute;
        right: 16px;
    }

    .bc-btn:hover {
        color: var(--lightGray) !important;
    }

    .bc-btn:hover > img{
        right: 10px;
        transition: .35s;
    }

/*---- map-btn ----*/

    .map-btn{
        display: flex;
        position: relative;
        width: 100%;
        height: 44px;
        max-width: 336px;
        justify-content: space-between;
        align-items: center;
        border-radius: 4px;
        background-color: #E2E5E9;
        margin-right: auto;
        padding-left: 32px;
    }

    .googleMap-box{
        display: flex;
        flex-direction: row;
        align-items: center;
        color: var(--white);
    }

    .googleMap-box img{
        margin-right: 12px;
    }

    .map-btn .btnRightArrow{
        position: absolute;
        right: 16px;
    }

    .map-btn:hover{
        background-color: var(--Point-Blue);
        transition: .35s;
    }

    .map-btn:hover > .btnRightArrow{
        right: 10px;
        transition: .35s;
    }


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

}

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

    .c-btn{
        width: 100%;
        max-width: 336px;
        justify-content: center;
        align-items: center;
        margin-right: auto;
        margin-left: 0;
    }

}