/* =============================================================
 * 採用情報（導入
 * ========================================================== */
.recruit-intro {
    padding-block: clamp(80px, 10vw, 193px) clamp(80px, 6.8vw, 130px);
    color: var(--c-text);

    .recruit-intro__inner {
        display: grid;
        grid-template-columns: minmax(0, 570fr) minmax(0, 829fr);
        column-gap: 31px;
    }

    .recruit-intro__body {
        grid-area: 1 / 1;
        padding-block-start: 10px;
    }

    .recruit-intro__title {
        font-size: clamp(22px, 1.56vw, 30px);
        font-weight: var(--fw-medium);
        line-height: 1.45;
        letter-spacing: 0.117em;
    }

    .recruit-intro__text {
        margin-block-start: clamp(32px, 3.1vw, 60px);
        font-size: var(--fz-body);
        line-height: 2;
        letter-spacing: var(--ls-body);
    }

    .recruit-intro__figure {
        margin: 0;
        overflow: hidden;
        border-radius: var(--radius);

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

    .recruit-intro__figure--large {
        grid-area: 1 / 2 / 3 / 3;
        aspect-ratio: 829 / 505;
    }

    .recruit-intro__figure--small {
        position: relative;
        z-index: 1;
        grid-area: 2 / 1;
        justify-self: end;
        width: 77.4%;
        margin-block-start: clamp(32px, 5.8vw, 111px);
        margin-inline-end: -10.7%;
        aspect-ratio: 452 / 285;
    }
}

/* =============================================================
 * ヤマイチシステムで働く3つの魅力
 * ========================================================== */
.num-section {
    .recruit-point {
        --num-card-w: 350px;
        --num-card-cols: 3;
    }
}

/* =============================================================
 * 一日の仕事の流れ
 * ========================================================== */
.recruit-workflow {
    padding-block: clamp(80px, 6.25vw, 120px);
    color: var(--c-white);
    background: var(--c-ink);

    .timeline {
        position: relative;
        display: grid;
        gap: clamp(48px, 4.7vw, 90px);
        width: fit-content;
        margin: clamp(56px, 5vw, 96px) auto 0;

        &::before {
            content: "";
            position: absolute;
            inset-block: 15.5px;
            inset-inline-start: 5.5px;
            width: 1px;
            background: #d9d9d9;
        }

        .timeline__item {
            position: relative;
            display: grid;
            grid-template-columns: 104px minmax(0, 1fr);
            gap: 26px;
            align-items: center;
            min-height: 31px;
            padding-inline-start: 50px;

            &::before {
                content: "";
                position: absolute;
                inset-block-start: 50%;
                inset-inline-start: 0;
                width: 12px;
                height: 12px;
                background: url("../img/timeline_dot.svg") center / contain no-repeat;
                translate: 0 -50%;
            }
        }

        .timeline__time {
            font-family: var(--ff-en);
            font-size: clamp(19px, 1.2vw, 23px);
            font-weight: var(--fw-medium);
            line-height: 1.35;
            letter-spacing: 0.05em;
            text-align: center;
            color: var(--c-blue);
        }

        .timeline__content {
            font-size: clamp(18px, 1.15vw, 22px);
            line-height: 28px;
            letter-spacing: 0.058em;
        }
    }
}

/* =============================================================
 * 写真スライダー（左へ流れ続ける）
 * ========================================================== */
.recruit-slider {
    overflow: hidden;

    .recruit-slider__track {
        display: flex;
        width: max-content;
        animation: recruit-marquee calc(var(--slide-count, 4) * 8s) linear infinite;
    }

    &:hover .recruit-slider__track {
        animation-play-state: paused;
    }

    .recruit-slider__list {
        display: flex;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .recruit-slider__slide {
        flex-shrink: 0;
        position: relative;
        width: clamp(280px, 33.6vw, 645px);
        margin: 0;
        aspect-ratio: 645 / 429;
        overflow: hidden;

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        &::after {
            content: "";
            position: absolute;
            inset: 0;
            background: rgb(13 59 135 / 25%);
        }
    }
}

@keyframes recruit-marquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .recruit-slider {
        overflow-x: auto;

        .recruit-slider__track {
            animation: none;
        }
    }
}

/* =============================================================
 * ENTRY
 * ========================================================== */
.recruit-cta {
    padding-block: clamp(80px, 6.35vw, 122px);
    color: var(--c-white);
    background: var(--c-navy-deep);

    .recruit-cta__inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .recruit-cta__title {
        font-family: var(--ff-en);
        font-size: clamp(48px, 3.75vw, 72px);
        font-weight: var(--fw-light);
        line-height: 1.1;
        letter-spacing: -0.01em;
    }

    .recruit-cta__text {
        margin-block-start: 26px;
        font-size: var(--fz-body);
        line-height: 2;
        letter-spacing: var(--ls-body);
        color: rgb(255 255 255 / 86%);
    }

    .btn {
        margin-block-start: clamp(32px, 2.9vw, 55px);
    }

}

/* =============================================================
 * ブレイクポイント（1280px / 959px / 600px）
 * ========================================================== */
@media (width <=959px) {
    .recruit-intro {
        .recruit-intro__inner {
            grid-template-columns: minmax(0, 1fr);
            row-gap: 32px;
        }

        .recruit-intro__figure--large {
            grid-area: auto;
            width: 90%;
        }

        .recruit-intro__figure--small {
            grid-area: auto;
            width: 60%;
            margin-block-start: -80px;
            margin-inline-end: 0;
        }
    }
}

@media (width <=600px) {
    .num-section {
        .recruit-point {
            --num-card-cols: 1;
        }
    }

    .recruit-intro {
        margin-block-start: -46px;
    }

    .recruit-workflow {
        .timeline .timeline__item {
            grid-template-columns: 85px minmax(0, 1fr);
            gap: 16px;
            padding-inline-start: 32px;
        }
    }
}