@charset "UTF-8";

/*
 * 緑の帯（見出し + スタッフ紹介）。TOP のご相談の窓口（template-parts/top/contact.php。HIRABOについて・車種のページも同じ部品）で使う。
 * 部品は template-parts/contact-band.php。Figma「Contact」500:723 / SP 601:522、HIRABOについて 840:418 / SP 923:403
 */

/* SP: 最後のスタッフの下端から帯の下端まで 61px（重なる白いカードとの間は 25px。縦に並べていたときの Figma SP 601:522） */
.contact__band {
    position: relative;
    display: flex;
    flex-direction: column;
    padding-bottom: 61px;
    color: var(--color-white);
    background-color: var(--color-green);
}

/* 背景の写真（Figma: 不透明度 10%） */
.contact__band::before {
    position: absolute;
    inset: 0;
    background: url("../img/top/contact-bg.webp") center / cover no-repeat;
    opacity: 0.1;
    pointer-events: none;
    content: "";
}

/* 〜1023px は、見出しを Figma の SP の幅（375px = 中身 335px + 左右 20px）のまま中央に置く */
.contact__message {
    position: relative;
    width: min(100%, 375px);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 56px 20px 28px;
}

/* SP 28px / PC 35px（セクションの見出しと同じ）。文節ごとに折り返す */
.contact__title {
    font-size: 1.75rem; /* 28px */
    font-family: var(--font-serif);
    font-weight: 600;
    letter-spacing: 0.07em;
    line-height: 1.4615;
    word-break: keep-all;
}

.contact__title > span {
    display: inline-block;
}

/* SP のセクションの見出し（h2）は 20px（28px から 30% 小さく。全ページ共通。2026-10-21 先方指示）。PC は 35px のまま */
@media (max-width: 1023px) {
    .contact__title {
        font-size: 1.25rem; /* 20px */
        letter-spacing: 0.08em;
        line-height: 1.6;
    }
}

/*
 * 改行は Figma どおり（2026-10-07 ユーザー判断）: SP は幅に任せて文字単位で折り返し、
 * PC（1024px 以上）は「。」「、」の後で改行する（文を span で区切り、PC だけ block にする）
 */
.contact__lead {
    font-size: 1rem; /* 16px */
    font-weight: 500;
    line-height: 32px;
}

/*
 * SP のスタッフは縦に並べる（2026-11-09 赤嶺さんの依頼。11/6 の Figma SP 2041:6364 の横スクロールから、その前の形に戻した）。
 * 〜1023px は Figma の SP の幅（375px = 中身 335px + 左右 20px）のまま中央に置く。
 * 左に写真（209×170px）を置き、右へ緑のグラデーション（透明 → #2d4b43。96px で緑一色）を重ねて写真を緑に溶け込ませ、
 * 文字を右に置く（Figma SP 601:527。3 人とも社長の形にそろえた）。文字の大きさは 11/6 の Figma のまま
 */
.contact__staff {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: min(100%, 375px);
    margin-inline: auto;
    padding: 0 20px;
}

.staff-card {
    position: relative;
    isolation: isolate;
    min-height: 170px;
    overflow: hidden;
}

/* 紹介文が長くてカードが 170px より高くなっても、写真をカードの高さいっぱいに広げる */
.staff-card__photo img {
    position: absolute;
    top: 0;
    left: 0;
    width: 209px;
    height: 100%;
    object-fit: cover;
}

.staff-card::before {
    position: absolute;
    inset: 0 0 0 115px;
    z-index: 1;
    background: linear-gradient(to right, rgb(45 75 67 / 0), #2d4b43 96px);
    content: "";
}

.staff-card__body {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    padding: 20px 20px 20px 106px;
    text-align: right;
}

.staff-card__role {
    color: #e7c2ae;
    font-size: 0.8125rem; /* 13px */
    font-weight: 500;
    letter-spacing: 0.06em;
    line-height: 20px;
}

.staff-card__name {
    font-size: 1.5rem; /* 24px */
    font-family: var(--font-serif);
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 32px;
}

.staff-card__text {
    align-self: stretch;
    margin-top: 8px;
    font-size: 1rem; /* 16px */
    font-weight: 500;
    line-height: 25px;
    text-align: left;
}

/*
 * SP（縦並び）は文節で折り返し（「生か／し」のような語の途中で切らない）、最後の行が 1〜2 文字だけにならないようにする
 * （はるみ夫人の「か。」）。対応していないブラウザは通常の改行。PC は Figma どおりの改行のままにするため効かせない。
 * 文章も肩書き・名前と同じく右寄せにする（左寄せだと右に余白が大きく残る。2026-11-09 Chatwork の指示。Figma は左寄せ）
 */
@media (max-width: 1023px) {
    .staff-card__text {
        text-align: right;
        text-wrap: pretty;
        word-break: auto-phrase;
    }
}

/* 段落（Figma で改行している所）ごとに行を改める */
.staff-card__text > span {
    display: block;
}

@media (min-width: 1024px) {
    /* PC: スタッフ（3 × 209px）を左、見出しを右に置く */
    .contact__band {
        flex-direction: row-reverse;
        height: 574px;
        padding-bottom: 0;
    }

    .contact__message {
        flex: 1;
        width: auto;
        margin-inline: 0;
        justify-content: center;
        gap: 24px;
        min-width: 0;
        padding: 0 40px 0 64px;
    }

    /* PC の h2 はすべて 35px（1024〜1279px で見出しの欄が狭いときは文節で 2 行に折り返す） */
    .contact__title {
        font-size: 2.1875rem; /* 35px */
        letter-spacing: 0.125rem; /* 2px */
        line-height: 1.4;
    }

    .contact__lead {
        max-width: 441px;
        font-size: 1.25rem; /* 20px */
        line-height: 2.25;
    }

    .contact__lead > span {
        display: block;
    }

    .contact__staff {
        flex-direction: row;
        flex-shrink: 0;
        gap: 0;
        width: auto;
        margin-inline: 0;
        padding: 0;
    }

    .staff-card {
        width: 209px;
        height: 574px;
        min-height: 0;
    }

    .staff-card::before {
        content: none;
    }

    .staff-card__photo img {
        inset: 0;
        width: 100%;
        height: 100%;
    }

    /* 文字を読みやすくするため、写真の下 300px を暗くする */
    .staff-card::after {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        height: 300px;
        background: linear-gradient(to bottom, rgb(23 43 38 / 0), rgb(23 43 38 / 0.78) 45%, rgb(23 43 38 / 0.94));
        content: "";
    }

    /*
     * Figma Page 1（845:1103 など。2026-11-10 に文の欄を 177 → 186px に広げた）: 上から 352px、左右 11.5px。
     * 紹介文は 4 行に収まり、重なる白いカード（帯の上から 538px）より上で終わる
     */
    .staff-card__body {
        position: absolute;
        top: 352px;
        right: 11.5px;
        left: 11.5px;
        z-index: 1;
        align-items: flex-start;
        padding: 0;
        text-align: left;
    }
}

@media (min-width: 1280px) {
    /*
     * 1280px より広い画面でも Figma（1280px）と同じ並びにする: 緑の帯の背景は画面いっぱいのまま、
     * 中身（スタッフと見出し）を 1280px の幅で中央に置く（padding の % は親の幅に対する割合）。
     * 下の白いカード（1140px で中央）との位置関係も Figma と同じになる
     */
    .contact__band {
        padding-inline: max(0px, (100% - 1280px) / 2);
    }

    .contact__title {
        font-size: 2.1875rem; /* 35px */
        line-height: 56px;
    }
}