/*---------------------------------

  共通

---------------------------------*/

#highlights{
    counter-reset: number 0;
}

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

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

}

/*---------------------------------

  highlights_box

---------------------------------*/

.highlights_box{
    position: relative;
    min-height: 540px;
    padding-top: 176px;
    margin-top: 88px;
}
.highlights_box:first-of-type{
    margin-top: 120px;
}
.highlights_box .ttl{
    position: relative;
    margin: 0 0 24px;
    font-size: 38px;
}
.highlights_box .ttl::before{
    counter-increment: number 1;     /* number カウンタの増加数をセット */
    content: '0'counter(number);      /* 表示形式を指定 */
    position: absolute;
    top: -90px;
    color: rgba(var(--main-rgb),.3);
    font-family: 'Lato', sans-serif;
    font-size: 80px;
    font-weight: 900;
    line-height: 1;
}
.highlights_box .txt{
    line-height: 1.8;
}
.highlights_box:nth-of-type(2n-1) .ttl,
.highlights_box:nth-of-type(2n-1) .txt{
    width: 50%;
    padding: 0 80px 0 0;
}
.highlights_box:nth-of-type(2n) .ttl,
.highlights_box:nth-of-type(2n) .txt{
    width: 50%;
    padding: 0 0 0 80px;
    margin-left: 50%;
}
.highlights_box::before{
    content: '';
    position: absolute;
    top: 0;
    width: 50%;
    height: 540px;
}
.highlights_box:nth-of-type(1)::before{
    right: 0;
    background: url(../img/recruit/highlights/pic01.png) no-repeat;
    background-size: cover;
}
.highlights_box:nth-of-type(2)::before{
    background: url(../img/recruit/highlights/pic02.png) no-repeat;
    background-size: cover;
}
.highlights_box:nth-of-type(3)::before{
    right: 0;
    background: url(../img/recruit/highlights/pic03.png) no-repeat;
    background-size: cover;
}

@media screen and (max-width:1024px){
    
    .highlights_box:nth-of-type(2n-1) .ttl,
    .highlights_box:nth-of-type(2n-1) .txt{
        width: 55%;
        padding: 0 50px 0 0;
    }
    .highlights_box:nth-of-type(2n) .ttl,
    .highlights_box:nth-of-type(2n) .txt{
        width: 55%;
        padding: 0 0 0 50px;
        margin-left: 45%;
    }
    
    .highlights_box::before{
        width: 45%;
    }

}

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

    .highlights_box{
        position: relative;
        min-height: inherit;
        padding-top: 40px;
        padding-bottom: 220px;
        margin-top: 60px;
    }
    .highlights_box:first-of-type{
        margin-top: 90px;
    }
    .highlights_box .ttl{
        margin: 0 0 24px;
        font-size: 28px;
    }
    .highlights_box .ttl::before{
        top: -60px;
        font-size: 60px;
    }
    
    .highlights_box:nth-of-type(2n-1) .ttl,
    .highlights_box:nth-of-type(2n-1) .txt{
        width: 100%;
        padding: 0 0 0;
    }
    .highlights_box:nth-of-type(2n) .ttl,
    .highlights_box:nth-of-type(2n) .txt{
        width: 100%;
        padding: 0 0 0;
        margin-left: 0;
    }
.highlights_box::before{
    content: '';
    position: absolute;
    top: inherit;
    bottom: 0;
    width: 100%;
    height: 200px;
}
.highlights_box:nth-of-type(1)::before{
    right: 0;
    background: url(../img/recruit/highlights/pic01.png) no-repeat;
    background-size: cover;
}
.highlights_box:nth-of-type(2)::before{
    background: url(../img/recruit/highlights/pic02.png) no-repeat;
    background-size: cover;
}
.highlights_box:nth-of-type(3)::before{
    right: 0;
    background: url(../img/recruit/highlights/pic03.png) no-repeat;
    background-size: cover;
}
    
}