:root {
    --bg: #F7F8F3;
    --main: #008D54;
}

.breadcrumb.recruit-breadcrumb {
    margin-bottom: 20px;
}

.recruit-kv {
    display: grid;
    place-content: center;
    height: 25.9rem;
    background: url(../img/saiyo/kv_bg.jpg) 50% 50% / cover no-repeat;
}

.recruit-kv__title {
    line-height: 1.4;
    font-size: 3.6rem;
    font-weight: 400;
    color: #FFF;
}

@media screen and (max-width: 768px) {
    .recruit-kv {
        height: min(12.8rem, calc(128 / 375 * 100vw));
        background-image: url(../img/saiyo/kv_bg-sp.jpg);
    }

    .recruit-kv__title {
        font-size: min(2.4rem, calc(24 / 375 * 100vw));
    }
}

.recruit-content {
    max-width: calc(945px + 40px);
    width: 100%;
    margin: 0 auto;
    padding: 0 2rem 6.3rem;
}

.recruit-head {
    padding: 9.2rem 0 5.4rem;
}

.recruit-head__title {
    margin: 0 0 2.8rem;
    padding-left: 2.4rem;
    border-left: .3rem solid var(--main);
    box-sizing: border-box;
    line-height: 1.4;
    font-size: 3.4rem;
    font-weight: 400;
}

.recruit-head__box {
    padding: 3.3rem 4.3rem 3.5rem;
    box-sizing: border-box;
    background: var(--bg);
}

.recruit-head__box_title {
    margin: 0 0 2.2rem;
    line-height: 1.5;
    font-size: 2.2rem;
    font-weight: 700;
}

.recruit-head__box_list {
    line-height: calc(35 / 20);
    font-size: 2rem;
    font-weight: 400;

    & > li {
        display: flex;
        align-items: center;
        gap: 1.4rem;

        &::before {
            content: "";
            width: 2rem;
            aspect-ratio: 1 / 1;
            background: url(../img/saiyo/icon-check.svg) 50% 50% / 100% no-repeat;
        }

        & > a {
            text-decoration: none;
        }
    }
}

.recruit-head__contact {
    max-width: 57.2rem;
    width: 100%;
    margin: 2.6rem 0 0;
    line-height: calc(30 / 16);
    font-size: 1.6rem;
    font-weight: 400;

    & > img {
        display: inline-block;
        margin: 0 .5em;
        translate: 0 -.2em;
    }
}

.recruit-head__flow {
    margin: 3.9rem 0 0;
}

.recruit-head__flow_title {
    width: fit-content;
    margin: 0 0 1.6rem;
    border-bottom: 1px solid var(--main);
    box-sizing: border-box;
    line-height: 1.4;
    font-size: 2.8rem;
    font-weight: 400;
}

.recruit-head__flow_caption {
    line-height: calc(30 / 16);
    font-size: 1.6rem;
    font-weight: 400;

    & > span {
        font-size: 1.4rem;
    }
}

@media screen and (max-width: 768px) {
    .recruit-content {
        padding: 0 min(2.9rem, calc(29 / 375 * 100vw)) min(4.6rem, calc(46 / 375 * 100vw));
    }

    .recruit-head {
        padding: min(2.8rem, calc(28 / 375 * 100vw)) 0 min(1.9rem, calc(19 / 375 * 100vw));
    }

    .recruit-head__title {
        margin-bottom: 1.1rem;
        padding-left: 1.6rem;
        font-size: 2.3rem;
    }

    .recruit-head__box {
        padding: 2.4rem 1.5rem 2.4rem 2.4rem;
    }

    .recruit-head__box_title {
        margin: 0 0 .3rem;
        font-size: 1.6rem;
    }

    .recruit-head__box_list {
        line-height: calc(36 / 16);
        font-size: 1.6rem;

        & > li {
            gap: 1.3rem;
        }
    }

    .recruit-head__contact {
        margin: 1.5rem 0 0;
        line-height: calc(22 / 14);
        font-size: 1.4rem;

        & > img {
            width: 18.1rem;
        }
    }

    .recruit-head__flow {
        margin: 2.2rem 0 0;
    }

    .recruit-head__flow_title {
        margin: 0 0 1.2rem;
        font-size: 1.9rem;
    }

    .recruit-head__flow_caption {
        line-height: calc(22 / 14);
        font-size: 1.4rem;

        & > span {
            font-size: 1.2rem;
        }
    }
}

.recruit__block {
    margin: 0 auto;
}

.recruit__block + .recruit__block {
    margin-top: 10.8rem;
}

.recruit__block_title {
    margin: 0 0 2.2rem;
    line-height: 1.4;
    font-size: 2.2rem;
    font-weight: 700;
}

.recruit__block_body {
    padding: 4.4rem 4.2rem;
    box-sizing: border-box;
    background: var(--bg);
}

@media screen and (max-width: 768px) {
    .recruit__block + .recruit__block {
        margin-top: 3rem;
    }

    .recruit__block_title {
        margin: 0 0 .7rem;
        font-size: 1.5rem;
    }

    .recruit__block_body {
        padding: 1.5rem 2rem 3rem;
    }
}

.recruit__box {
    display: grid;
    grid-template-columns: 19.4rem 1fr;
}

.recruit__box + .recruit__box {
    margin-top: 4.2rem;
}

.recruit__box_title {
    line-height: 1.4;
    font-size: 1.6rem;
    font-weight: 700;
}

.recruit__box_content {
    margin: 0;
    padding: 0;
    line-height: 1.6;
    font-size: 1.6rem;
    font-weight: 400;
}

.recruit__box_content p {
    margin: 0 auto;
}

.recruit__box_content p + p,
.recruit__box_content ul + p {
    margin-top: 1.6em;
}

.recruit__box_content ul li {
    padding-left: 1em;
    text-indent: -1em;

    &::before {
        content: "・";
    }
}

.recruit__box_content ul.recruit__box_att {
    margin-top: 1rem;
}

.recruit__box_content ul.recruit__box_att li {
    font-size: 1.3rem;

    &::before {
        content: "※";
    }
}

.recruit__contact {
    margin: 7.9rem 0 0;
    border: 1px solid #B9B9B9;
    box-sizing: border-box;
}

.recruit__contact_title {
    margin: 0;
    padding: .7rem 2.3rem;
    box-sizing: border-box;
    background: var(--main);
    line-height: 1.4;
    font-size: 1.8rem;
    font-weight: 700;
    color: #FFF;
}

.recruit__contact_body {
    padding: 1.4rem 2.4rem;
}

.recruit__contact_address {
    width: 16.3rem;
}

@media screen and (max-width: 768px) {
    .recruit__box {
        display: grid;
        grid-template-columns: 100%;
        gap: .7rem;
    }

    .recruit__box + .recruit__box {
        margin-top: 1.5rem;
    }

    .recruit__box_title {
        font-size: 1.4rem;
    }

    .recruit__box_content {
        font-size: 1.4rem;
    }

    .recruit__box_content ul.recruit__box_att {
        margin-top: .6rem;
    }

    .recruit__contact {
        margin: 3rem 0 0;
    }

    .recruit__contact_title {
        margin: 0;
        padding: .4rem 0;
        text-align: center;
        font-size: 1.6rem;
    }

    .recruit__contact_body {
        padding: 1.6rem 0;
    }

    .recruit__contact_address {
        width: min(17.2rem, calc(172 / 375 * 100vw));
        margin: 0 auto;
    }
}