@charset "utf-8";

/*------------------------*/
/*働く環境*/
/*-------------------------*/

/*福利厚生*/
#benefit {
    background-image: url('../img/illust04.png'), url('../img/illust05.png'), url('../img/bg_wave_single_g.svg');
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-position: right 2vw top, left 2vw center, center bottom;
    background-size: 16vw, 16vw, auto;
    padding-bottom: 140px;
}


/*一覧*/
.benefits {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px 30px;
    background-color:rgba(255,255,255,0.9);
    border: 2px #eee solid;
    border-radius: 20px;
    color: #000;
}
.benefits dl {
    margin: 0;
    padding: 15px 10px;
    background: url("../img/dot.png") repeat-x center bottom;
}
.benefits dl:last-child {
    background-image: none;
}
.benefits dl~dl {
    margin-top: 10px;
}
.benefits dt {
    /*16-20*/
    font-size: clamp(1rem, 0.95rem + 0.25vw, 1.25rem);
    font-weight: bold;
    margin-bottom: 10px;
    background: url("../img/icon_circle_blue.png") no-repeat left center;
    background-size: 20px;
    padding: 2px 0 2px 30px;
}
.benefits dd {
    margin: 0 0 0 30px;
    /*16-18*/
    font-size: clamp(1rem, 0.975rem + 0.13vw, 1.125rem);
    line-height: 140%;
}


/*-------------------------*/
/*勤務地紹介*/
/*-------------------------*/
#location {
    background: url('../img/bg_wave_blue_2.svg') no-repeat center bottom;
    background-color: #F0F5F9;
    padding-top: 1px; /*余白対策*/
    margin-top: -1px;
    padding-bottom: 200px;
}

/*地図*/
.locationmap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin: 30px auto 60px;
}
.locationmap .photo {
    width: calc(20vw - 15px);
}
.locationmap .map {
    flex: 1;
    margin: 0 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.locationmap .photo img {
    display: block;
    margin: 0 auto 10px;
    border-radius: 10px;
}
.locationmap .map img {
    display: block;
    max-width: 80%;
}
.locationmap .photo ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
.locationmap .photo li {
    padding: 15px 15px 10px;
    border: 1px #fff solid;
    border-radius: 20px;
    background-color:rgba(255,255,255,0.5);
    text-align: center;
}
.locationmap .photo li~li {
    margin-top: 20px;
}

/*メニューボタン*/
.navibtn {}


/*-------------------------*/
/*働きやすい環境*/
/*-------------------------*/
#condition {
    /*
    background: url('../img/bg_wave_single_w.svg') no-repeat center bottom;
    padding-bottom: 200px;
    */
    background-color: #E6F4FF;
    padding-bottom: 100px;
    padding-top: 1px; /*余白対策*/
    margin-top: -1px;
}
#condition .headline {
    margin-top: 30px;
}
.activities {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 60px auto 80px;
}
.activities .activity {
    width: calc((100% / 4) - 40px);
    max-width: 280px;
    margin: 0 20px;
}
.activities .activity .img {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    background: url('../img/illust03_w.png') no-repeat center center;
    background-size: 200px;
    min-height: 200px;
    margin-bottom: 30px;
}
.activities .activity .img img {
    max-width: 140px;
    display: block;
}
.activities .activity dl {
    margin: 0;
    text-align: center;
    line-height: 140%;
}
.activities .activity dt {
    /*20-22*/
    font-size: clamp(1.25rem, 1.225rem + 0.13vw, 1.375rem);
    font-weight: bold;
    margin-bottom: 30px;
}
.activities .activity dd {
    margin: 0;
}




/****************************/
/*レスポンシブ*/
/****************************/
@media screen and (max-width: 1279px) {
    #location {
        padding-bottom: 140px;
    }
    #condition {
        padding-bottom: 140px;
    }
    #condition .navibtn li {
        width: calc((100% / 3) - 30px);
        margin: 0 15px;
    }
    .activities {
        margin: 60px auto 50px;
    }
}

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

    #benefit {
        background-position: right 2vw top, left 2vw top, center bottom;
        padding-bottom: 120px;
    }
    .activities {
        margin: 60px auto 30px;
    }
    .activities .activity {
        width: calc((100% / 2) - 40px);
        max-width: 280px;
        margin: 0 20px 40px;
    }

    #location {
        padding-bottom: 100px;
    }
    #location .navibtn li {
        width: calc(100% / 3);
    }

    .locationmap .photo img {
        border-radius: 5px;
    }
    .locationmap .map img {
        max-width: 80%;
    }
    .locationmap .photo li {
        padding: 0;
        border-width: 0;
        border-radius: 0;
        background-color: transparent;
    }
}

@media screen and (max-width: 779px) {
    #benefit {
        padding-bottom: 80px;
    }
    
    #location {
        padding-bottom: 80px;
    }
    #location .read br {
        display: none;
    }
    #location .navibtn li {
        width: calc((100% / 3) - 30px);
        margin: 0 15px;
    }

    #condition .navibtn li {
        width: calc(100% / 2);
    }

}

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

    .benefits {
        padding: 20px 10px;
    }
    .benefits dl {
        padding: 10px 5px;
    }
    .benefits dt {
        background-size: 16px;
        padding: 2px 0 2px 25px;
    }
    .benefits dd {
        margin: 0 0 0 25px;
    }

    #location .navibtn li {
        width: calc((100% / 2) - 40px);
    }

    .locationmap {
        flex-direction: column;
    }
    .locationmap .photo {
        width: 100%;
    }
    .locationmap .photo ul {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
    }
    .locationmap .photo li {
        width: 50%;
        padding: 0 20px;
    }
    .locationmap .photo li~li {
        margin-top: 0;
    }
    .locationmap .map {
        margin: 30px auto;
    }

    #condition {
        padding-bottom: 80px;
    }
    #condition .navibtn li {
        width: 100%;
        margin: 0 20px;
    }
}

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

    #location {
        padding-bottom: 50px;
    }
    #location .navibtn li {
        width: 100%;
        margin: 0 20px 20px;
    }
    .locationmap {
        margin: 30px auto 40px;
    }
    .locationmap .photo li {
        width: 50%;
        padding: 0 10px;
    }

    .activities {
        margin: 0 auto 20px;
    }
    .activities .activity {
        width: 100%;
        max-width: 280px;
        margin: 0 20px 40px;
    }


}