/* =============================================================
 * MV
 * ========================================================== */
.mv {
    position: relative;
    height: clamp(560px, 47.92vw, 920px);
    overflow: hidden;

    .mv__media {
        position: absolute;
        inset: 0;

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

        .mv__overlay {
            position: absolute;
            inset: 0;
            background: var(--mv-overlay);
        }
    }

    .mv__inner {
        position: absolute;
        inset-block-start: 35.1%;
        inset-inline: var(--gutter);
        color: var(--c-white);

        .mv__title {
            font-family: var(--ff-en);
            font-size: var(--fz-display);
            font-weight: var(--fw-extralight);
            line-height: var(--lh-display);
            letter-spacing: var(--ls-display);

            span {
                display: block;
            }
        }

        .mv__lead {
            margin-block-start: clamp(20px, 2.3vw, 44px);
            font-size: var(--fz-lead);
            font-weight: var(--fw-medium);
            line-height: 1.45;
            letter-spacing: var(--ls-lead);
        }

        .mv__foot {
            display: flex;
            flex-wrap: wrap;
            gap: clamp(24px, 5.1vw, 98px);
            align-items: center;
            margin-block-start: clamp(28px, 3.2vw, 61px);

            .mv__desc {
                max-width: 582px;
                font-size: var(--fz-body);
                line-height: var(--lh-body);
                color: var(--c-on-dark);
                letter-spacing: var(--ls-body);
            }

            .mv__actions {
                display: flex;
                flex-wrap: wrap;
                gap: 25px;
            }
        }
    }

    .mv__scroll {
        position: absolute;
        inset-block-end: 0;
        inset-inline-end: 44px;
        display: flex;
        flex-direction: column;
        gap: 14px;
        align-items: center;
        width: 14px;

        .mv__scroll-label {
            font-family: var(--ff-en);
            font-size: var(--fz-eyebrow);
            line-height: 1;
            color: var(--c-white-78);
            letter-spacing: var(--ls-eyebrow);
            writing-mode: vertical-rl;
        }

        .mv__scroll-rule {
            position: relative;
            width: 1px;
            height: 86px;
            overflow: hidden;
            background: rgb(255 255 255 / 20%);

            &::before {
                content: "";
                position: absolute;
                inset: 0;
                background: linear-gradient(180deg, rgb(255 255 255 / 0%), rgb(255 255 255 / 70%));
                transform: translateY(-100%);
                animation: mv-scroll-flow 2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
            }
        }
    }

}

@keyframes mv-scroll-flow {
    0% {
        transform: translateY(-100%);
    }

    100% {
        transform: translateY(100%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .mv .mv__scroll .mv__scroll-rule {
        background: linear-gradient(180deg, rgb(255 255 255 / 70%), rgb(255 255 255 / 0%));
    }

    .mv .mv__scroll .mv__scroll-rule::before {
        content: none;
    }
}

/* =============================================================
 * わたしたちの強み
 * ========================================================== */

.strengths {
    padding-block: clamp(80px, 8.75vw, 168px) clamp(80px, 8vw, 154px);

    .strengths__list {
        margin-block-start: clamp(48px, 5vw, 96px);
    }

    .strength {
        position: relative;
        display: grid;
        gap: clamp(32px, 4vw, 104px);
        grid-template-columns: minmax(0, 36.46vw) minmax(0, 1fr);
        align-items: center;
        padding-block: clamp(48px, 6.7vw, 128px);

        .strength__media {
            position: relative;
            aspect-ratio: 651.7 / 814.63;
            overflow: hidden;
            border-radius: var(--radius);
            container-type: inline-size;

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

        .strength__scrim {
            position: absolute;
            inset-block-end: 0;
            inset-inline: 0;
            height: 22.1%;
            background: linear-gradient(180deg, rgb(11 26 51 / 0%), rgb(11 26 51 / 55%));
        }

        .strength__num {
            position: absolute;
            inset-block-end: 4.4cqi;
            inset-inline: auto 3.4cqi;
            font-family: var(--ff-en);
            font-size: clamp(56px, 6.88vw, 132px);
            font-weight: var(--fw-extrabold);
            line-height: 0.85;
            color: rgb(255 255 255 / 92%);
            z-index: 1;
        }
    }

    .strength--reverse {
        grid-template-columns: minmax(0, 1fr) minmax(0, 36.46vw);

        .strength__media {
            order: 2;
        }

        .strength__num {
            inset-inline: 3.4cqi auto;
        }
    }

    .strength__title {
        margin-block-start: 27px;
        font-size: var(--fz-h3);
        font-weight: var(--fw-medium);
        line-height: 1.55;
        letter-spacing: 0.04em;
    }

    .strength__text {
        margin-block: 32px 44px;
        font-size: var(--fz-body);
        line-height: var(--lh-body);
        color: var(--c-text);
        letter-spacing: var(--ls-body);
    }
}

/* =============================================================
 * 事業内容
 * ========================================================== */
.business {
    position: relative;
    isolation: isolate;
    overflow-x: clip;
    padding-block: clamp(72px, 8.3vw, 160px) clamp(72px, 9.5vw, 182px);
    color: var(--c-white);
    background: var(--c-ink);

    &::before {
        content: "";
        position: absolute;
        inset: 0px;
        background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.035) 0px, rgba(255, 255, 255, 0.035) 1px, transparent 1px, transparent 14px);
        pointer-events: none;
    }

    .business__carousel {
        --biz-card-w: clamp(300px, 24.48vw, 470px);

        position: relative;
        margin-block-start: clamp(40px, 5.3vw, 102px);
        padding-inline-start: max(var(--gutter), (100% - var(--container)) / 2);

        .business__swiper {
            overflow: visible;
        }

        .swiper-wrapper {
            display: grid;
            grid-auto-flow: column;
            grid-auto-columns: calc(var(--biz-card-w) + 39px);
            grid-template-rows: auto auto 1fr auto;
        }

        .biz-card {
            display: grid;
            grid-row: span 4;
            grid-template-rows: subgrid;
            row-gap: 0;
            width: auto;
            padding-inline-end: 39px;

            .biz-card__media {
                grid-row: 1;
            }

            .biz-card__title {
                grid-row: 2;
            }

            .biz-card__excerpt {
                grid-row: 3;
            }

            .btn {
                grid-row: 4;
                justify-self: start;
            }
        }
    }

    .biz-card {
        height: auto;

        .biz-card__media {
            position: relative;
            aspect-ratio: 470 / 436.42;
            overflow: hidden;
            border-radius: var(--radius);

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

        .biz-card__num {
            position: absolute;
            inset-block-start: 22px;
            inset-inline-start: 22px;
            display: grid;
            place-items: center;
            width: 84px;
            height: 32px;
            font-family: var(--ff-en);
            font-size: 14px;
            font-weight: var(--fw-medium);
            line-height: 1;
            color: var(--c-white);
            background: rgb(13 59 135 / 85%);
            border-radius: 32px;
        }

        .biz-card__title {
            margin-block-start: 30px;
            font-size: clamp(20px, 1.56vw, 30px);
            font-weight: var(--fw-regular);
            line-height: 1.5;
            letter-spacing: 0.03em;
        }

        .biz-card__excerpt {
            margin-block-start: 16px;
            font-size: 15px;
            line-height: 1.75;
            letter-spacing: 0.66px;
            color: var(--c-on-dark);
            font-weight: var(--fw-light);
        }

        .btn {
            margin-block-start: 30px;
        }
    }

    .carousel-btn {
        position: absolute;
        z-index: 2;
        inset-block-start: clamp(120px, 14vw, 240px);
        display: grid;
        place-items: center;
        width: 58px;
        height: 58px;
        background-color: rgb(255 255 255 / 65%);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 18px 16px;
        border: 1px solid var(--c-white);
        border-radius: 50%;
        transition: background-color var(--dur) var(--ease);

        &[disabled] {
            opacity: 0.3;
            cursor: default;
        }

        &:hover {
            background-color: rgb(255 255 255 / 80%);
        }

        &.carousel-btn--prev {
            inset-inline-start: calc(max(var(--gutter), (100% - var(--container)) / 2) - 29px);
            background-image: url("../img/arrow_prev.svg");
        }

        &.carousel-btn--next {
            inset-inline-start: calc(max(var(--gutter), (100% - var(--container)) / 2) + (var(--biz-card-w) + 39px) * 3 - 19.5px - 29px);
            background-image: url("../img/arrow_next.svg");
        }
    }
}

/* =============================================================
 * 会社案内
 * ========================================================== */
.company {
    padding-block: clamp(72px, 8.3vw, 160px);
    background: linear-gradient(180deg, #fff 0%, #f2f4f8 50%, #eef1f6 100%);

    .section-head__title {
        margin-block-start: 20px;
    }

    .section-head__lead {
        margin-block-start: 36px;
        padding-left: 10px;
    }

    .company__inner {
        display: grid;
        gap: clamp(40px, 9.32vw, 179px);
        grid-template-columns: minmax(0, 1fr);
    }

    .company__item {
        .company-link {
            display: grid;
            gap: 0 24px;
            grid-template-columns: auto 1fr auto;
            align-items: baseline;
            min-height: 131px;
            padding-block: 44px;
            border-block-end: 1px solid var(--c-border);
            transition: color var(--dur) var(--ease);

            &:hover {
                color: var(--c-navy);
            }

            &:hover .company-link__arrow {
                transform: translateX(6px);
            }

            .company-link__ja {
                font-size: clamp(22px, 1.77vw, 34px);
                font-weight: var(--fw-medium);
                letter-spacing: 0.04em;
            }

            .company-link__en {
                font-family: var(--ff-en);
                font-size: 16px;
                color: #9BA2B0;
                letter-spacing: 0.08em;
            }

            .company-link__arrow {
                display: flex;
                flex-shrink: 0;
                transition: transform var(--dur) var(--ease);

                img {
                    display: block;
                    width: 19px;
                    height: auto;
                }
            }
        }

        &:first-child .company-link {
            border-block-start: 1px solid var(--c-border);
        }
    }
}

/* =============================================================
 * 採用
 * ========================================================== */
.recruit {
    position: relative;
    display: flex;
    align-items: center;
    min-height: clamp(420px, 29.2vw, 560px);
    overflow: hidden;
    color: var(--c-white);

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

    .recruit__inner {
        position: relative;
        padding-block: clamp(56px, 5.5vw, 80px);
    }

    .recruit__lead {
        max-width: 507px;
        margin-block-end: 36px;
        font-size: var(--fz-body);
        line-height: var(--lh-body);
        color: var(--c-on-dark);
        letter-spacing: var(--ls-body);
    }

    .recruit__media {
        position: absolute;
        inset: 0;
    }

    .section-head__title {
        font-size: 72px;
        margin-block: 24px 28px;
    }

    .recruit__overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, rgb(13 59 135 / 90%) 0%, rgb(13 59 135 / 60%) 52%, rgb(31 41 61 / 30%) 100%);
    }
}

/* =============================================================
 * お問い合わせ
 * ========================================================== */
.contact {
    padding-block: clamp(72px, 5.4vw, 104px);
    background-color: var(--c-navy-deep);
    color: var(--c-white);

    .contact__inner {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .contact__label {
        font-family: var(--ff-en);
        font-size: var(--fz-label);
        font-weight: var(--fw-medium);
        color: var(--c-blue);
        letter-spacing: var(--ls-label);
    }

    .contact__title {
        margin-block-start: 18px;
        font-size: clamp(22px, 1.67vw, 32px);
        font-weight: var(--fw-medium);
        letter-spacing: 0.04em;
    }

    .contact__tel {
        margin-block-start: 26px;
        font-family: var(--ff-en);
        font-size: clamp(36px, 2.9vw, 56px);
        font-weight: var(--fw-extralight);
        line-height: 1;
        letter-spacing: 0.02em;
    }

    .contact__hours {
        margin-block-start: 20px;
        font-size: 15px;
        color: var(--c-white-65);
    }

    .contact__text {
        margin-block-start: 26px;
        font-size: var(--fz-body);
        line-height: var(--lh-body);
        color: var(--c-white-65);
        letter-spacing: var(--ls-body);
    }

    .contact__cta {
        display: flex;
        gap: 16px;
        align-items: center;
        justify-content: center;
        width: min(460px, 100%);
        height: 80px;
        margin-block-start: 38px;
        font-size: 18px;
        font-weight: var(--fw-medium);
        color: var(--c-navy);
        background: var(--c-white);
        letter-spacing: 0.04em;
        /* transition: background var(--dur) var(--ease); */

        img {
            width: 27px;
            height: auto;
        }
    }
}

@media (width >=960px) {
    .company {
        .company__inner {
            grid-template-columns: minmax(0, 500fr) minmax(0, 933fr);
        }
    }

    .contact {
        .contact__inner {
            grid-template-columns: repeat(2, 1fr);
        }

        .contact__col--mail {
            padding-inline-start: clamp(40px, 5.7vw, 110px);
            border-left: 1px solid var(--c-white-16);
        }
    }
}

@media (width <=959px) {
    .contact {
        .contact__inner {
            grid-template-columns: minmax(0, 1fr);
        }

        .contact__col--mail {
            margin-block-start: 48px;
            padding-block-start: 48px;
            border-block-start: 1px solid var(--c-white-16);
        }
    }

    .recruit {
        .section-head__title {
            font-size: var(--fz-h2);
        }
    }

    .mv {
        display: flex;
        align-items: flex-end;
        height: auto;

        .mv__inner {
            position: relative;
            inset: auto;
            width: 100%;
            padding: 120px var(--gutter) 72px;

            .mv__title {
                font-size: 60px;
            }
        }

        .mv__scroll {
            display: none;
        }
    }

    .business {
        .business__carousel {
            --biz-card-w: min(470px, 78vw);
        }

        .carousel-btn {
            display: none;
        }
    }
}

@media (width <=600px) {
    body:has(.mv .mv__actions) {
        padding-block-end: calc(72px + env(safe-area-inset-bottom));
    }

    .mv {
        .mv__inner {
            padding-block: 96px 56px;

            .mv__title {
                font-size: var(--fz-display);
            }

            .mv__foot .mv__actions {
                position: fixed;
                inset-block-end: 0;
                inset-inline: 0;
                z-index: 90;
                flex-wrap: nowrap;
                gap: 8px;
                padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
                background: rgb(11 26 51 / 92%);
                -webkit-backdrop-filter: blur(var(--blur));
                backdrop-filter: blur(var(--blur));

                .btn {
                    flex: 1;
                    gap: 8px;
                    justify-content: center;
                    min-width: 0;
                    padding: 13px 10px;
                    font-size: 13px;
                    letter-spacing: 0.04em;
                    white-space: nowrap;
                    border-radius: 6px;

                    &::before {
                        content: "";
                        flex-shrink: 0;
                        width: 20px;
                        height: 14px;
                        background: currentcolor;
                        mask: url("../img/mail_icon.svg") center / contain no-repeat;
                    }

                    &[href^="tel:"]::before {
                        width: 15px;
                        height: 15px;
                        mask-image: url("../img/phone_icon.svg");
                    }

                    .btn__dot {
                        display: none;
                    }
                }
            }
        }
    }

    .strengths {

        .strength,
        .strength--reverse {
            grid-template-columns: minmax(0, 1fr);
        }

        .strength--reverse .strength__media {
            order: 0;
        }

        .strength__title {
            br {
                display: none;
            }
        }
    }

    .company {
        .section-head__lead {
            padding-left: 0;
        }
    }

    .recruit {
        img {
            object-position: 63%;
        }
    }
}