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

/*  index  ***/
.recruit-message main{
    background-image: url(/-/media/HOME/recruit/new/images/message/main_message.webp);
	background-position: left bottom;
}


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

.recruit-message #first_titlebox h2{
    text-align: center;
    line-height: 1.8;
    font-size: 32px;
    padding: 50px 0;
}

.recruit-message #mesbox{
    padding-bottom: 120px;
    overflow: visible;
}

.recruit-message .mesbox_inner{
    padding-top: 50px;
    margin-bottom: 100px;
    overflow: visible;
}

.recruit-message .mesbox_inner h2{
    width: 520px;
}

.recruit-message .txt_left h2{
    text-align: right;
}

.recruit-message .txt_left h2 aside{
    display: inline-block;
    text-align: left;
}

.recruit-message .mesbox_inner h2 aside span{
    display: inline-block;
    font-size: 26px;
    font-weight: 500;
    line-height: 1;
    padding: 10px 15px 12px;
    background-color: var(--komatsu-blue);
    color: #FFF;
    margin-bottom: 10px;
}

.recruit-message .mesbox_inner.txt_right h2 aside span{
    background-color: var(--komatsu-yellow);
    color: var(--komatsu-blue);
}

.recruit-message .mesbox_inner p{
    width: calc(100% - 560px) ;
    padding-bottom: 80px;
    text-align:justify;
    text-justify:distribute;
    font-size: 16px;
    line-height: 2;
}

.recruit-message .mesbox_inner.txt_left p{
    padding-right: 7%;
}

.recruit-message .mesbox_inner.txt_right p{
    padding-left: 7%;
}



.recruit-message .mesbox_inner::before{
    content: "";
    display: block;
    position: absolute;
    width: 88%;
    height: 100%;
    top: 0;
    z-index: 0;
    background-color: var(--komatsu-lightgray);
}

.recruit-message .mesbox_inner.txt_left::before{
    right: 0;
    clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
}

.recruit-message .mesbox_inner.txt_left.group_set_on::before{
    clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
	animation: inview_side_animetion_rl .5s forwards cubic-bezier(.49,.15,.48,.78) .3s;
    right: 0;

}

.recruit-message .mesbox_inner.txt_right::before{
    left: 0;
    clip-path: polygon(0 0, 0% 0%, 0% 100%, 0% 100%);
}

.recruit-message .mesbox_inner.txt_right.group_set_on::before{
    left: 0;
    clip-path: polygon(0 0, 0% 0%, 0% 100%, 0% 100%);
	animation: inview_side_animetion_lr .5s forwards cubic-bezier(.49,.15,.48,.78) .3s;
}


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

    .recruit-message #first_titlebox h2{
        padding: 3.47222222vw 0;
    }

}


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

    .recruit-message #mesbox{
        padding-bottom: 11.73020528vw;
    }

    .recruit-message #first_titlebox h2{
        font-size: 28px;
    }

    .recruit-message .mesbox_inner{
        /* padding-top: 6vw; */
        padding-top: 0;
        
    }

    .recruit-message .mesbox_inner::before{
        width: 84%;
        top: 24px;
    }

    .recruit-message .mesbox_inner.flex{
        display: block;
        width: 100%;
    }

    .recruit-message .mesbox_inner.txt_left{
        margin: 0 auto 9.77517107vw ;
        padding-left:8%;
    }

    .recruit-message .mesbox_inner.txt_right{
        margin: 0 auto 9.77517107vw ;
        padding-right:8%;
    }

    .recruit-message .mesbox_inner h2{
        width: 100%;
    }

    .recruit-message .txt_left h2{
        text-align: left;
        margin: 0;
    }

    .recruit-message .txt_right h2{
        text-align: left;
        margin: 0;
        margin-left: 16%;
    }

    .recruit-message .mesbox_inner.txt_left p{
        width: 100%;
        margin: 0%;
        padding:20px 16% 80px 0%;
    }

    .recruit-message .mesbox_inner.txt_right p{
        width: 100%;
        margin: 0%;
        padding:20px 0% 80px 16%;
    }

}

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

    .recruit-message #first_titlebox h2{
        font-size: 3.11111111vw;
    }
    
}


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

    .recruit-message #mesbox{
        padding-bottom: 60px;
    }

    .recruit-message #first_titlebox h2{
        font-size: 28px;
        padding: 20px 0;
    }

    .recruit-message .mesbox_inner h2 aside span{
        font-size: 22px;
        margin-bottom: 5px;
    }

    .recruit-message .mesbox_inner p{
        font-size: 15px;
    }
}

@media screen and (max-width: 540px){
    .recruit-message .mesbox_inner.txt_right,
    .recruit-message .mesbox_inner.txt_left{
        width: 100%;
        margin: 0 auto 70px;
        padding-left: 0;
        padding-right: 0;
    }

    .recruit-message .txt_left h2{
        text-align: left;
        margin: 0;
        margin-left: 7%;
    }

    .recruit-message .txt_right h2{
        text-align: left;
        margin: 0;
        margin-left: 7%;
    }

    .recruit-message .mesbox_inner.txt_left p{
        width: 100%;
        margin: 0%;
        padding:15px 7% 80px 7%;
    }

    .recruit-message .mesbox_inner.txt_right p{
        width: 100%;
        margin: 0%;
        padding:15px 7% 80px 7%;
    }
}


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

    .recruit-message #first_titlebox h2{
        font-size: 6vw;
        padding: 0 0;
    }

    .recruit-message .mesbox_inner h2 aside span{
        font-size: 4.58333333vw;
    }

}