/*　ヘッダー　************************************************/

/*  index  ***/
.recruit-group main{
    background-image: url(/-/media/HOME/recruit/new/images/group/main_group.webp);
	background-position: center bottom;
}

/*  sales-service  ***/
.recruit-group-salesservice main{
    background-image: url(/-/media/HOME/recruit/new/images/group/main_sales-service.webp);
	background-position: center bottom;
}

/*  other-industries  ***/
.recruit-group-otherindustries main{
    background-image: url(/-/media/HOME/recruit/new/images/group/main_other-industries.webp);
	background-position: center bottom;
}


/*　ヘッダー　************************************************/





/*　index　************************************************/

.recruit-group #buttonbox .triangle {
    position: absolute;
    width: 20%;
    right: 0;
    bottom: 0;
    
}

.recruit-group #buttonbox .triangle span{
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    clip-path: polygon(100% 0, 0% 100%, 100% 100%);
}

.recruit-group #buttonbox .triangle::before {
    content: "";
    display: block;
    padding-top: 137.5%;
}

.recruit-group #buttonbox ul li{
    width: 48.5%;
    padding-bottom: 50px;
}

.recruit-group #buttonbox figure{
    z-index: 1;
}

.recruit-group #buttonbox aside{
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 5;
    width: 50px;
    height: 50px;
}

.recruit-group #buttonbox .bt_more{
    width: 100%;
    height: 100%;
}

.recruit-group #buttonbox figcaption{
    padding-top: 12px;
}

.recruit-group #buttonbox figcaption strong{
    font-size: 18px;
    font-weight: 500;
    padding-bottom: 10px;
}

.recruit-group #buttonbox figcaption strong{
    font-size: 18px;
}

.recruit-group #buttonbox figcaption p{
    text-align:justify;
    text-justify:distribute;
    line-height: 2;
    font-size: 14px;
}

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

    .recruit-group #buttonbox .bt_more{
        width: 4.16666667vw;
        height: 4.16666667vw;
        min-width: 40px;
        min-height: 40px;
    }
}

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

    .recruit-group #buttonbox ul li{
        width: 100%;
        max-width: 450px;
        margin: 0 auto;
    }
    
    .recruit-group #buttonbox figcaption{
        padding-top: 7px;
    }

    .recruit-group #buttonbox .triangle {
        width: 60%;
    }
}

@media screen and (max-width: 480px){
    .recruit-group #buttonbox figcaption p{
        font-size: 13px;
    }
}

/*　index　************************************************/









/*　companybox　************************************************/

.recruit-group-common #companybox .detailbox{
    margin-top: 100px;
}

.recruit-group-common #companybox .detailbox .company_namebox{
    width: 100%;
    padding-bottom: 50px;
}

.recruit-group-common #companybox .detailbox .company_namebox h2{
    color: var(--komatsu-blue);
    font-size: 32px;
    line-height: 1.4;
    font-weight: 500;
}

.recruit-group-common #companybox .detailbox figure{
    width: 35%;
}

.recruit-group-common #companybox .detailbox .company_infobox{
    width: 60%;
    padding-bottom: 80px;
}

.recruit-group-common #companybox .detailbox .company_infobox p{
    line-height: 2;
    text-align:justify;
    text-justify:distribute;
    padding-bottom: 80px;
}

.recruit-group-common #companybox .detailbox .company_infobox dl{
    border-bottom: var(--komatsu-lightblue) solid 1px;
    padding: 20px 0;
}

.recruit-group-common #companybox .detailbox .company_infobox dl:first-of-type{
    border-top: var(--komatsu-lightblue) solid 1px;
}

.recruit-group-common #companybox .detailbox .company_infobox dl dt{
    width: 90px;
    color: var(--komatsu-blue);
}

.recruit-group-common #companybox .detailbox .company_infobox dl dd{
    width : calc(100% - 100px) ;
    text-align:justify;
    text-justify:distribute;
}

.recruit-group-common #companybox .detailbox .company_infobox dl dd strong{
    font-weight: 500;
}

.recruit-group-common #companybox .detailbox .company_btbox{
    width: 100%;
    padding: 50px;
}

.recruit-group-common #companybox .detailbox .company_btbox a{
    width: 48%;
}



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

    .recruit-group-common #companybox .detailbox{
        margin-top: 9.77517107vw;
    }
    
    .recruit-group-common #companybox .detailbox .company_namebox h2{
        font-size: 28px;
    }

    .recruit-group-common #companybox .detailbox .company_infobox{
        padding-bottom: 7.82013685vw;
    }

    .recruit-group-common #companybox .detailbox .company_infobox p{
        padding-bottom: 7.82013685vw;
    }

    .recruit-group-common #companybox .detailbox .company_btbox{
        width: 100%;
        padding: 4.88758553vw;
    }

}


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

    .recruit-group-common #companybox .detailbox figure{
        width: 100%;
        max-width: 400px;
        padding-bottom: 50px;
        margin: 0 auto 0 0;
    }

    .recruit-group-common #companybox .detailbox .company_infobox{
        width: 100%;
    }

}


@media screen and (max-width: 767px) {
    .recruit-group-common #companybox .detailbox{
        margin-top: 50px;
    }

    .recruit-group-common #companybox .detailbox .company_infobox{
        padding-bottom: 40px;
    }

    .recruit-group-common #companybox .detailbox .company_infobox p{
        padding-bottom: 40px;
    }

    .recruit-group-common #companybox .detailbox .company_namebox{
        width: 100%;
        padding-bottom: 30px;
    }

    .recruit-group-common #companybox .detailbox .company_namebox h2{
        font-size: 24px;
    }

}


@media screen and (max-width: 480px) {
    .recruit-group-common #companybox .detailbox .company_namebox h2{
        font-size: 22px;
    }

    .recruit-group-common #companybox .detailbox .company_btbox a{
        width: 100%;
    }


    .recruit-group-common #companybox .detailbox .company_btbox a:not(:first-of-type){
        margin-top: 20px;
    }
    

}



.recruit-group-common #companybox .groupbtbox{
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
}

.recruit-group-common #companybox .groupbtbox a{
    width: 48%;
}

.recruit-group-common #companybox .groupbtbox a .bt_more{
    width: 100%;
}

@media screen and (max-width: 640px) {
    .recruit-group-common #companybox .groupbtbox a .bt_more{
         height: 54px;
        border-radius: 27px;
    }
}

@media screen and (max-width: 360px) {
    .recruit-group-common #companybox .groupbtbox a .bt_more::before{
        display: none;
    }
}