/* =============================================================
 * 事業内容ページ
 * ========================================================== */

.business--page {
    background: var(--c-white);
    color: var(--c-ink);

    &::before {
        content: none;
    }

    .biz-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-auto-rows: auto auto 1fr auto;
        column-gap: 39px;
        row-gap: 0;
    }

    & .biz-card {
        display: grid;
        grid-row: span 4;
        grid-template-rows: subgrid;
        row-gap: 0;
        margin-block-end: 64px;

        .biz-card__media {
            grid-row: 1;
            aspect-ratio: 454 / 340;
        }

        .biz-card__title {
            grid-row: 2;
            font-size: clamp(20px, 1.15vw, 22px);
        }

        .biz-card__excerpt {
            grid-row: 3;
            color: #8B93A5;
            font-size: 16px;
        }

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

/* =============================================================
 * 下層ページの共通パーツ
 * ========================================================== */

.page-label {
    gap: 14px;
    font-size: 12.5px;
    font-weight: var(--fw-regular);
    line-height: 17px;
    letter-spacing: 0.26em;
    text-transform: uppercase;

    .sub-label__rule {
        width: 40px;
        opacity: 0.4;
    }
}

.page-head {
    position: relative;
    display: flex;
    align-items: flex-end;
    height: clamp(480px, 47.92vw, var(--mv-h));
    padding: 0;
    overflow: hidden;
    color: var(--c-white);
    background: var(--c-navy-deep);
    padding-block: 40px 56px;

    .page-head__media {
        position: absolute;
        inset: 0;

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

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

    .page-head__inner {
        position: relative;
        padding-block-end: clamp(56px, 5.4vw, 103px);
    }

    .sub-label {
        color: var(--c-white);
    }

    .page-head__title {
        margin-block-start: 14px;
        font-size: clamp(32px, 2.5vw, 48px);
        font-weight: var(--fw-medium);
        line-height: 1.2;
        letter-spacing: 0.073em;
    }

    .page-head__lead {
        margin-block-start: 22px;
        font-size: var(--fz-body);
        line-height: 1.95;
        letter-spacing: var(--ls-body);
        color: var(--c-on-dark);
    }

    .page-head__action {
        position: fixed;
        inset-block-end: clamp(16px, 1.35vw, 26px);
        inset-inline-end: clamp(16px, 1.35vw, 26px);
        z-index: 90;

        .btn {
            color: var(--c-ink);
            box-shadow: 0 8px 24px rgb(11 26 51 / 18%);
        }
    }
}

/* アイキャッチ画像なし */
.page-head--plain {
    display: block;
    height: auto;
    padding-block: clamp(48px, 5vw, 96px);
    color: var(--c-ink);
    background: none;

    .page-head__inner {
        padding-block-end: 0;
    }

    .sub-label {
        color: var(--c-navy);
    }

    .page-head__lead {
        color: var(--c-text);
    }
}

/* パンくず */
.page-breadcrumb {
    border-block-end: 1px solid rgb(31 41 61 / 12%);

    .breadcrumb {
        padding-block: 30px;
        font-family: var(--ff-en);
        font-size: 12.5px;
        line-height: 17px;
        letter-spacing: 0.26em;
        text-transform: uppercase;
        color: var(--c-navy);
    }

    .breadcrumb__list {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .breadcrumb__item {
        display: flex;
        gap: 8px;
        align-items: center;

        a {
            color: rgb(13 59 135 / 34%);
            transition: color var(--dur) var(--ease);

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

        &+.breadcrumb__item::before {
            content: "";
            width: 10px;
            height: 10px;
            margin: 0;
            background: url("../img/chevron_icon.svg") center / contain no-repeat;
            rotate: -90deg;
        }
    }
}

/* =============================================================
 * 中央寄せのセクション見出し（ピル型ラベル + h2 + リード）
 * ========================================================== */
.center-head {
    display: flex;
    flex-direction: column;
    gap: 25px;
    align-items: center;
    max-width: 905px;
    margin-inline: auto;
    text-align: center;

    .center-head__label {
        padding: 8px 16px;
        font-family: var(--ff-en);
        font-size: 13px;
        font-weight: var(--fw-bold);
        line-height: 1.4;
        letter-spacing: 0.1em;
        color: rgb(13 59 135 / 92%);
        background: #eaf1ff;
        border-radius: 999px;
    }

    .center-head__title {
        font-size: clamp(24px, 1.67vw, 32px);
        font-weight: var(--fw-medium);
        line-height: 1.41;
        letter-spacing: 0.11em;
        color: var(--c-ink);
    }

    .center-head__lead {
        font-size: var(--fz-base);
        line-height: 1.75;
        color: rgb(31 41 61 / 70%);
    }
}

/* 濃紺背景の上 */
.center-head--on-dark {
    .center-head__title {
        color: var(--c-white);
    }

    .center-head__lead {
        color: var(--c-white-78);
    }
}

/* =============================================================
 * 番号付きカード（01〜）
 * ========================================================== */
.num-section {
    padding-block: 60px;
    background: #f7f9fc;

    .center-head__title {
        color: var(--c-text);
    }

    .center-head__lead {
        color: rgb(43 53 71 / 70%);
    }

    /* カードの行 = 番号 / 見出し / 画像 / 本文。この4行の並びをカードの段ごとに繰り返す */
    .num-cards {
        --num-card-w: 276px;
        --num-card-cols: 4;

        display: grid;
        grid-template-columns: repeat(var(--num-card-cols), minmax(0, var(--num-card-w)));
        grid-auto-rows: auto auto auto 1fr;
        column-gap: 24px;
        row-gap: 0;
        /* 段と段の間は .num-card の margin で空ける（subgrid 内の行間を親の gap にしないため） */
        justify-content: center;
        margin-block-start: 32px;
        counter-reset: num-card;
    }

    /* 各カードは4行を subgrid で共有し、見出し・画像・本文の位置を同じ段のカードで揃える */
    .num-card {
        display: grid;
        grid-row: span 4;
        grid-template-rows: subgrid;
        row-gap: 16px;
        align-content: start;
        margin-block-end: 24px;
        padding: 20px;
        background: var(--c-white);
        border: 1px solid #dce5f2;
        border-radius: 20px;
        box-shadow: 0 10px 12px rgb(15 23 42 / 5%);
        counter-increment: num-card;

        &::before {
            content: counter(num-card, decimal-leading-zero);
            grid-row: 1;
            justify-self: start;
            padding: 6px 12px;
            font-family: var(--ff-en);
            font-size: 13px;
            font-weight: var(--fw-bold);
            line-height: 1.4;
            letter-spacing: 0.1em;
            color: var(--c-white);
            background: rgb(13 59 135 / 92%);
            border-radius: 999px;
        }
    }

    .num-card__title {
        grid-row: 2;
        font-size: 22px;
        font-weight: var(--fw-medium);
        line-height: 32px;
        letter-spacing: 0.027em;
        color: #2b3547;
    }

    .num-card__media {
        grid-row: 3;
        width: 100%;
        height: 160px;
        margin: 0;
        overflow: hidden;
        border-radius: 16px;

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

    .num-card__text {
        grid-row: 4;
        font-size: 14px;
        line-height: 24px;
        letter-spacing: 0.047em;
        color: rgb(43 53 71 / 70%);
    }
}

/* =============================================================
 * 見出し（左）+ 中身（右）の 2 カラム
 * ========================================================== */
.split-section {
    padding-block: clamp(80px, 8.6vw, 165px);
    background: var(--c-sky);

    .split-section__inner {
        display: grid;
        grid-template-columns: minmax(0, 493fr) minmax(0, 947fr);
        align-items: start;
    }
}

/* =============================================================
 * セクション見出し（─── 英字ラベル + h2）
 * ========================================================== */
.label-head {
    .page-label {
        color: var(--c-navy);
    }

    .label-head__title {
        margin-block-start: 14px;
        font-size: clamp(32px, 2.5vw, 48px);
        font-weight: var(--fw-light);
        line-height: 1.615;
        letter-spacing: -0.016em;
        color: var(--c-ink);
    }
}

/* =============================================================
 * テーブル
 * ========================================================== */
.data-table {
    margin: 0;
    border-block-start: 1px solid var(--c-border);

    .data-table__row {
        display: grid;
        grid-template-columns: 152px minmax(0, 1fr);
        padding: 54px 9px;
        font-size: 18px;
        line-height: 1.5;
        border-block-end: 1px solid var(--c-border);
    }

    /* 次の行とまとめる行：間の罫線と余白をなくす */
    .data-table__row--join {
        padding-block-end: 0;
        border-block-end: 0;

        +.data-table__row {
            padding-block-start: 10px;
        }
    }

    .data-table__label {
        font-weight: var(--fw-medium);
        letter-spacing: 0.064em;
        color: rgb(59 68 92 / 74%);
    }

    .data-table__value {
        margin: 0;
        letter-spacing: 0.071em;
        color: var(--c-ink);
    }
}

/* =============================================================
 * 下層ページ共通 CTA 
 * ========================================================== */
.page-cta {
    position: relative;
    overflow: hidden;
    padding-block: clamp(72px, 5.6vw, 107px) clamp(64px, 4.3vw, 83px);
    color: var(--c-white);
    background: var(--c-navy);

    .page-cta__media {
        position: absolute;
        inset: 0;

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

    .page-cta__overlay {
        position: absolute;
        inset: 0;
        background:
            repeating-linear-gradient(90deg, rgb(255 255 255 / 6%) 0 1px, transparent 1px 9.1667%),
            linear-gradient(90deg, rgb(13 59 135 / 90%) 0%, rgb(13 59 135 / 60%) 52%, rgb(31 41 61 / 30%) 100%);
    }

    .page-cta__inner {
        position: relative;
    }

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

    .page-cta__text {
        margin-block-start: clamp(24px, 2.3vw, 44px);
        font-size: var(--fz-body);
        line-height: 2;
        letter-spacing: var(--ls-body);
        color: rgb(255 255 255 / 86%);
    }

    .page-cta__actions {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
        margin-block-start: 30px;
    }
}

/* =============================================================
 * お問い合わせフォーム（Contact Form 7）
 * ========================================================== */
.contact-form {
    .form-item {
        padding-block: 28px;
        border-block-end: 1px solid var(--c-border);

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

        >p {
            display: flex;
            gap: 16px 40px;
            align-items: flex-start;
            margin: 0;
        }

        br {
            display: none;
        }

        >p>label {
            display: flex;
            flex: 0 0 260px;
            gap: 12px;
            align-items: center;
            padding-block-start: 12px;
            font-weight: var(--fw-medium);
            line-height: 1.6;
        }

        .wpcf7-form-control-wrap {
            flex: 1;
            min-width: 0;
        }
    }

    .required,
    .optional {
        display: inline-block;
        padding: 3px 10px;
        font-size: 12px;
        font-weight: var(--fw-medium);
        line-height: 1.4;
        color: var(--c-white);
        border-radius: 4px;
    }

    .required {
        background: #d64545;
    }

    .optional {
        background: #9ba2b0;
    }

    input[type="text"],
    input[type="email"],
    input[type="tel"] {
        width: 50%;
    }

    textarea {
        width: 100%;
    }

    input[type="text"],
    input[type="email"],
    input[type="tel"],
    textarea {
        padding: 14px 16px;
        font: inherit;
        color: var(--c-ink);
        background: #f6f7f9;
        border: 1px solid var(--c-border);
        border-radius: 6px;
        transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);

        &:focus {
            background: var(--c-white);
            border-color: var(--c-navy);
            outline: none;
        }
    }

    textarea {
        min-height: 220px;
        width: 100%;
        resize: vertical;
    }

    .wpcf7-radio {
        display: flex;
        flex-wrap: wrap;
        gap: 12px 32px;
        padding-block-start: 12px;

        .wpcf7-list-item {
            margin: 0;
        }

        label {
            display: inline-flex;
            gap: 8px;
            align-items: center;
            cursor: pointer;
        }

        input {
            width: 18px;
            height: 18px;
            margin: 0;
            accent-color: var(--c-navy);
        }
    }

    .form-submit {
        margin-block-start: 48px;

        >p {
            display: flex;
            gap: 12px;
            align-items: center;
            justify-content: center;
            margin: 0;
        }

        .wpcf7-submit {
            min-width: 280px;
            padding: var(--btn-pad-y) var(--btn-pad-x);
            font: inherit;
            font-weight: var(--fw-medium);
            letter-spacing: var(--ls-btn);
            color: var(--c-white);
            background: var(--c-navy);
            border: 0;
            border-radius: var(--btn-radius);
            cursor: pointer;
            transition: opacity var(--dur) var(--ease);

            &:hover {
                opacity: 0.78;
            }

            &:disabled {
                opacity: 0.5;
                cursor: default;
            }
        }
    }

    .wpcf7-not-valid-tip {
        margin-block-start: 6px;
        font-size: 13px;
        color: #d64545;
    }
}

/* =============================================================
 * 前の記事 / 次の記事
 * ========================================================== */
.post-navigation {
    margin-block-end: 96px;

    .nav-links {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        border-block: 1px solid var(--c-border);
    }

    .nav-previous {
        grid-column: 1;
    }

    .nav-next {
        grid-column: 2;
        text-align: end;
        border-inline-start: 1px solid var(--c-border);
    }

    a {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 8px;
        height: 100%;
        padding: 32px 40px 32px 72px;
        color: var(--c-ink);
        transition: background-color var(--dur) var(--ease);

        &::before {
            content: "";
            position: absolute;
            inset-block-start: 50%;
            inset-inline-start: 32px;
            width: 18px;
            height: 16px;
            background: var(--c-navy);
            mask: url("../img/arrow_prev.svg") center / contain no-repeat;
            translate: 0 -50%;
            transition: translate var(--dur) var(--ease);
        }

        &:hover {
            background-color: var(--c-sky);

            &::before {
                translate: -6px -50%;
            }
        }
    }

    .nav-next a {
        padding: 32px 72px 32px 40px;

        &::before {
            inset-inline: auto 32px;
            mask-image: url("../img/arrow_next.svg");
        }

        &:hover::before {
            translate: 6px -50%;
        }
    }

    .post-nav__label {
        font-family: var(--ff-en);
        font-size: 13px;
        font-weight: var(--fw-medium);
        letter-spacing: 0.1em;
        color: var(--c-navy);
    }

    .post-nav__title {
        display: -webkit-box;
        overflow: hidden;
        font-size: 16px;
        font-weight: var(--fw-medium);
        line-height: 1.6;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
}

/* =============================================================
 * ページ送り
 * ========================================================== */
.pagination {
    margin-block-start: 64px;

    .nav-links {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
        justify-content: center;
    }

    .page-numbers {
        display: inline-grid;
        place-items: center;
        min-width: 48px;
        height: 48px;
        padding-inline: 8px;
        font-family: var(--ff-en);
        font-size: 15px;
        font-weight: var(--fw-medium);
        color: var(--c-ink);
        border: 1px solid var(--c-border);
        border-radius: 999px;
        transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);

        &:is(a):hover {
            background-color: var(--c-sky);
            border-color: var(--c-navy);
        }

        &.current {
            color: var(--c-white);
            background: var(--c-navy);
            border-color: var(--c-navy);
        }

        &.dots {
            min-width: 24px;
            border-color: transparent;
        }

        &.prev,
        &.next {
            display: inline-flex;
            gap: 10px;
            padding-inline: 22px;
            font-family: var(--ff-jp);
            font-size: 14px;

            &::before {
                content: "";
                width: 16px;
                height: 14px;
                background: currentcolor;
                mask: url("../img/arrow_prev.svg") center / contain no-repeat;
            }
        }

        &.prev {
            margin-inline-end: 8px;
        }

        &.next {
            flex-direction: row-reverse;
            margin-inline-start: 8px;

            &::before {
                mask-image: url("../img/arrow_next.svg");
            }
        }
    }
}

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

        .label-head {
            margin-block-end: 40px;
        }
    }

    .business--page {
        .biz-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    .contact-form {

        input[type="text"],
        input[type="email"],
        input[type="tel"] {
            width: 100%;
        }
    }
}

@media (width <=600px) {

    .pagination {
        .page-numbers {
            min-width: 40px;
            height: 40px;
            font-size: 14px;

            &.prev,
            &.next {
                width: 40px;
                padding-inline: 0;
                font-size: 0;
                margin-inline: 0;
            }
        }
    }

    .post-navigation {
        .nav-links {
            grid-template-columns: minmax(0, 1fr);
        }

        .nav-next {
            grid-column: 1;
            border-inline-start: 0;
            border-block-start: 1px solid var(--c-border);
        }

        a,
        .nav-next a {
            padding-block: 24px;
        }
    }

    .page-head {
        min-height: 295px;
        height: auto;
        padding-block: 20px 0;
    }

    .num-section {
        .num-cards {
            --num-card-cols: 1;
        }
    }

    .data-table {
        .data-table__row {
            grid-template-columns: minmax(0, 1fr);
            gap: 4px;
            padding-block: 28px;
            font-size: 16px;
        }
    }

    .business--page {
        .biz-grid {
            grid-template-columns: minmax(0, 1fr);
        }
    }

    .contact-form {
        .form-item {
            padding-block: 20px;

            >p {
                flex-direction: column;
                gap: 10px;
            }

            >p>label {
                flex-basis: auto;
                padding-block-start: 0;
            }
        }

        .form-submit .wpcf7-submit {
            width: 100%;
            min-width: 0;
        }

        .wpcf7-spinner {
            position: absolute;
            top: 0;
            right: 0;
        }
    }
}