@charset "UTF-8";

/* 全ページ共通の枠: ヘッダー・車種ラインナップのパネル・フッター・SP メニュー・お問い合わせ／見学予約のボタン（画面下の固定 CTA）・パンフレットのボタン */

/* ヘッダー（Figma「Header」）。TOP では FV の上で透明、FV を過ぎたら緑になる（main.js が is-solid を付ける） */
.site-header {
    position: fixed;
    top: var(--wp-admin--admin-bar--height, 0px);
    right: 0;
    left: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-height);
    padding-left: 16px;
    color: var(--color-white);
    background-color: var(--color-green);
    transition: background-color 0.3s ease;
}

/* 車種ラインナップを開いている間は、Figma（2041:8748）どおりヘッダーを塗る */
.site-header--overlay:not(.is-solid):not(:has(.global-nav__item.is-open)) {
    background-color: transparent;
}

/* ロゴは Figma SP 113×41、PC 120×44 */
.site-header__logo {
    display: block;
    flex-shrink: 0;
    align-self: center;
}

.site-header__logo img {
    width: 113px;
    height: auto;
}

/* 1024px 未満はロゴと TOP・メニューのボタンだけを表示する（ナビと問い合わせボタンは SP メニューと画面下の固定ボタンへ） */
.site-header__right {
    display: none;
}

.site-header__sp-actions {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 4px;
}

/* SP のヘッダーと SP メニューの「TOP」（Figma: 高さ 44px・白地に緑の枠。Page 1 で角丸なしになった） */
.header-top-button {
    display: flex;
    align-items: center;
    height: 44px;
    padding: 0 16px 0 14px;
    color: var(--color-green);
    background-color: var(--color-white);
    border: 1.5px solid var(--color-green);
    font-size: 1rem; /* 16px */
    font-weight: 700;
    text-decoration: none;
}

/* SP のメニューボタン（Figma: 60 × 60px、白い線 24 × 2px を 6px 間隔で 3 本） */
.menu-button {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    padding: 0;
    color: var(--color-white);
    background: none;
    border: 0;
}

.menu-button__lines,
.menu-button__lines::before,
.menu-button__lines::after {
    display: block;
    width: 24px;
    height: 2px;
    background-color: currentColor;
}

.menu-button__lines {
    position: relative;
}

.menu-button__lines::before,
.menu-button__lines::after {
    position: absolute;
    left: 0;
    content: "";
}

.menu-button__lines::before {
    top: -8px;
}

.menu-button__lines::after {
    top: 8px;
}

/* 項目はヘッダーの高さいっぱい（車種ラインナップからパネルへマウスを動かす間に、項目の外へ出ないように） */
.global-nav__list {
    display: flex;
    gap: 26px;
    height: 100%;
}

.global-nav__item {
    display: flex;
    align-items: center;
}

.global-nav__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    color: inherit;
    background: none;
    border: 0;
    font-size: 0.875rem; /* 14px */
    font-weight: 500;
    letter-spacing: 0.07em;
    line-height: 1.5;
    text-decoration: none;
    white-space: nowrap;
}

/* 車種ラインナップの下向きの三角（Figma: 8 × 6px） */
.global-nav__toggle::before {
    order: 1;
    width: 8px;
    height: 6px;
    background-color: currentColor;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    content: "";
}

/*
 * ホバーの下線（Figma SUZY のヘッダー「Current」92:44: 太さ 2px・角丸・文字の 4px 下・文字より左右 2px 長い）。
 * 右は最後の文字の後ろの字間（0.07em）を除いて文字の幅にそろえる
 */
.global-nav__link::after {
    position: absolute;
    top: calc(100% + 4px);
    right: calc(0.07em - 2px);
    left: -2px;
    height: 2px;
    border-radius: 1px;
    background-color: var(--color-accent-light);
    opacity: 0;
    transition: opacity 0.2s ease;
    content: "";
}

@media (hover: hover) {
    .global-nav__link:hover::after {
        opacity: 1;
    }
}

/*
 * 開いている印（Figma「開いている印」: 線 2px）。Figma は白だが、ほかの項目のホバーの線と同じ色にする
 * （2026-11-09 赤嶺さんの依頼。マウスを乗せると開くので、この項目だけ白い線になっていた）
 */
.global-nav__toggle[aria-expanded="true"]::after {
    opacity: 1;
}

/*
 * 車種ラインナップのパネル（Figma 2041:8748。template-parts/nav-dropdown.php、main.js が is-open を付ける）。
 * ヘッダーの真下に全幅で開く。カードは左から 1 列（Figma「最大 5 車種まで 1 列で並ぶ」）
 */
.nav-dropdown,
.nav-dropdown__backdrop {
    display: none;
}

.global-nav__item.is-open > .nav-dropdown,
.global-nav__item.is-open > .nav-dropdown__backdrop {
    display: block;
}

.nav-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    padding: 28px max(72px, (100% - var(--layout-max-width)) / 2 + 72px) 32px;
    background-color: rgb(47 107 86 / 0.85);
    box-shadow: 0 10px 24px rgb(0 0 0 / 0.2);
    backdrop-filter: blur(8px);
}

/* backdrop-filter の中に置くと position: fixed の基準がパネルになるので、パネルの外（兄弟）に置く */
.nav-dropdown__backdrop {
    position: fixed;
    inset: calc(var(--wp-admin--admin-bar--height, 0px) + var(--header-height)) 0 0;
    z-index: -1;
    background-color: rgb(0 0 0 / 0.15);
    pointer-events: none;
}

.nav-dropdown__list {
    display: flex;
    gap: 24px;
}

.nav-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 208px;
    height: 270px;
    padding: 14px;
    color: #333;
    background-color: var(--color-pale);
    line-height: normal;
    text-decoration: none;
}

.nav-card__thumb {
    flex-shrink: 0;
    width: 180px;
    height: 119px;
    object-fit: cover;
}

/*
 * リンクのカードの写真の枠。ホバーで写真を 1.04 倍に拡大し、枠からはみ出た分は切る
 * （オーナー様のカード .owner-card__thumb と同じ動き。2026-11-12 ユーザー指示。Figma 1663:1367・845:1054）
 */
.nav-card__photo {
    display: block;
    flex-shrink: 0;
    overflow: hidden;
    width: 180px;
    height: 119px;
}

.nav-card__photo .nav-card__thumb {
    transition: transform 0.4s ease;
}

@media (hover: hover) {
    .nav-card:hover .nav-card__photo .nav-card__thumb {
        transform: scale(1.04);
    }
}

.nav-card__name {
    color: var(--color-green);
    font-family: var(--font-en);
    font-size: 1.25rem; /* 20px */
    font-weight: 800;
}

.nav-card__lead {
    font-size: 1rem; /* 16px */
    font-weight: 700;
}

/* Figma は DIN Condensed 20px。数字の書体は Oswald（約 1.2 倍横に広い）なので小さくする */
.nav-card__soon {
    color: var(--color-green);
    font-family: var(--font-num);
    font-size: 1.0625rem; /* 17px */
    font-weight: 600;
}

/* カード全体がリンクなので見た目だけのボタン */
.nav-card__button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    color: var(--color-white);
    background-color: var(--color-green);
    font-size: 1rem; /* 16px */
    font-weight: 700;
    transition: filter 0.2s ease;
}

@media (hover: hover) {
    .nav-card:hover .nav-card__button {
        filter: brightness(1.15);
    }
}

/* 右向きの三角（Figma: 7 × 8px）。パネルのボタンと SP メニューの項目 */
.nav-card__button::after,
.sp-menu-card::after,
.sp-menu__link::after {
    flex-shrink: 0;
    width: 7px;
    height: 8px;
    background-color: currentColor;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    content: "";
}

.site-header__actions {
    display: flex;
    height: 100%;
}

.header-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 170px;
    height: 100%;
    padding: 0 20px;
    color: var(--color-white);
    font-size: 0.84375rem; /* 13.5px */
    font-weight: 500;
    letter-spacing: 0.07em;
    text-decoration: none;
    white-space: nowrap;
    transition: filter 0.2s ease;
}

@media (hover: hover) {
    .header-cta:hover {
        filter: brightness(1.1);
    }
}

.header-cta--contact {
    background-color: #24584a;
}

.header-cta--reserve {
    background-color: var(--color-accent);
}

/* 1024〜1279px は Figma の寸法だと収まらない（1171px 必要）ため、間隔・文字・ボタン幅を詰める */
@media (min-width: 1024px) {
    .site-header {
        align-items: stretch;
        padding-left: 24px;
    }

    .site-header__logo img {
        width: 120px;
    }

    .site-header__sp-actions {
        display: none;
    }

    .site-header__right {
        display: flex;
        gap: 16px;
    }

    .global-nav__list {
        gap: 14px;
    }

    .global-nav__link {
        font-size: 0.8125rem; /* 13px */
    }

    .header-cta {
        width: 140px;
        padding: 0 8px;
        font-size: 0.78125rem; /* 12.5px */
    }
}

/* 1280px 以上は Figma どおり */
@media (min-width: 1280px) {
    /* 1920px を超える画面では、ロゴと右端のボタンを 1920px の幅の両端に置く（背景は画面いっぱい） */
    .site-header {
        padding-right: max(0px, (100% - var(--layout-max-width)) / 2);
        padding-left: max(40px, (100% - var(--layout-max-width)) / 2 + 40px);
    }

    .site-header__right {
        gap: 40px;
    }

    .global-nav__list {
        gap: 26px;
    }

    .global-nav__link {
        font-size: 0.875rem; /* 14px */
    }

    .header-cta {
        width: 170px;
        padding: 0 20px;
        font-size: 0.84375rem; /* 13.5px */
    }
}

/*
 * フッター（Figma「Footer」PC 2041:5826 / SP 2041:6416）
 * 上端の山はフッターの外（上）へ出すため、その高さ分の余白をフッターの上に取る。
 */
.site-footer {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    margin-top: 7.5vw;
    padding: 64px 20px 40px;
    color: var(--color-white);
    background-color: var(--color-green);
}

.site-footer a {
    color: inherit;
}

/*
 * 右端の飾りの山（Figma SP: 幅 371.5px、PC: 幅の 58.05%）。フッター・TOP の KV（.hero__mountain）・下層ページのタイトル（.page-title__mountain）で同じ大きさ。
 * 上下の位置は、それぞれの部品の CSS で決める
 */
.deco-mountain {
    position: absolute;
    right: 0;
    width: min(371.5px, 100%);
    pointer-events: none;
}

/* 山の下端は小数のピクセルになり、高解像度の画面では下の背景が細い線のように透けるので、接する側へ 1px 重ねる（重なる先は同じ色） */
.site-footer__mountain {
    bottom: calc(100% - 1px);
}

.site-footer__main {
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: min(100%, var(--content-width));
}

.site-footer__info {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.site-footer__brand {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ロゴは Figma SP 166×61、PC 202×74 */
.site-footer__logo {
    display: block;
    align-self: flex-start;
}

.site-footer__logo img {
    width: 166px;
    height: auto;
}

.site-footer__logo-sub {
    color: rgb(255 255 255 / 0.8);
    font-size: 0.8125rem; /* 13px */
    font-weight: 500;
    letter-spacing: 0.09375rem; /* 1.5px */
    line-height: 22px;
}

.site-footer__address {
    display: flex;
    flex-direction: column;
    gap: 24px;
    font-size: 1rem; /* 16px */
    font-style: normal;
    font-weight: 500;
    line-height: 25px;
}

/*
 * 営業時間・定休日（Figma Page 1 は「営業時間　9:30～」「定休日　　水・祝…」と全角スペースで中身の書き出しを 5 文字目にそろえている）。
 * 項目名の列を「営業時間」の幅にし、1 文字分あけて中身を並べる。中身が折り返しても項目名の下には回り込まない
 */
.site-footer__hours {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 1em;
}

/*
 * 電話番号（Figma「Tel / 番号」: アイコン＋番号。行の高さ SP 32px / PC 38px、番号はそこからはみ出す）。
 * Figma の番号は DIN Condensed 42px。数字の書体は Oswald（約 1.2 倍横に広い）なので、番号の幅が Figma と同じ約 230px になる大きさにする
 */
.site-footer__tel {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    height: 32px;
    font-family: var(--font-num);
    font-size: 2.125rem; /* 34px */
    font-weight: 600;
    letter-spacing: 0.05em;
    line-height: 40px;
    text-decoration: none;
}

.site-footer__tel img {
    flex-shrink: 0;
    width: 25px;
    height: 25px;
    margin-top: 7px;
}

.site-footer__nav-area {
    display: flex;
    flex-direction: column;
    gap: 36px;
}

.site-footer__actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 60px;
    padding: 0 20px;
    font-size: 1rem; /* 16px */
    font-weight: 500;
    letter-spacing: 0.0625rem; /* 1px */
    text-decoration: none;
    transition: opacity 0.2s ease;
}

/* 矢印（base.css）の大きさ */
.footer-cta::after {
    --chevron-size: 9px;
}

@media (hover: hover) {
    .footer-cta:hover {
        opacity: 0.85;
    }
}

.site-footer .footer-cta--contact {
    color: var(--color-green);
    background-color: var(--color-white);
}

.footer-cta--reserve {
    background-color: var(--color-accent);
}

/* SP はグループを縦に積む。768px 以上は横に並べ、下端をそろえる */
.footer-nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

.footer-nav__group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer-nav__title {
    font-size: 1.0625rem; /* 17px */
    font-weight: 700;
    line-height: 34px;
}

.footer-nav__item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9375rem; /* 15px */
    font-weight: 500;
    line-height: 36px;
    white-space: nowrap;
}

/* 項目の前の「>」（base.css の矢印の大きさ） */
.footer-nav__item::before {
    --chevron-size: 6px;
}

.footer-nav__item a {
    text-decoration: none;
    transition: opacity 0.2s ease;
}

@media (hover: hover) {
    .footer-nav__item a:hover {
        opacity: 0.7;
    }
}

/*
 * 近日公開の車種（SUZY mini）: リンクにせず、矢印を消して（場所は空けたまま、ほかの車種と文字の頭をそろえる）、
 * 文字を白の 75% にし、後ろに少し小さい「近日公開」を足す（2026-11-12 ユーザー指示）
 */
.footer-nav__item--soon {
    color: rgb(255 255 255 / 0.75);
}

.footer-nav__item--soon::before {
    visibility: hidden;
}

/* 項目の中は flex（間 10px）なので、名前との間は全角の空き（約 1 文字）になるよう 4px だけ足す */
.footer-nav__soon {
    margin-left: 4px;
    font-size: 0.8125em;
}

/* SP は横幅いっぱいに縦に並べる。768px 以上は 260px 幅で横に並べる */
.site-footer__banners {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.site-footer .footer-banner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: 100%;
    height: 76px;
    color: #333;
    background-color: var(--color-white);
    font-size: 1.25rem; /* 20px */
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 24px;
    text-decoration: none;
}

a.footer-banner {
    transition: opacity 0.2s ease;
}

@media (hover: hover) {
    a.footer-banner:hover {
        opacity: 0.85;
    }
}

/* Figma では Instagram のアイコンを上下反転して配置している */
.footer-banner--instagram img {
    transform: scaleY(-1);
}

.site-footer .footer-banner--company {
    align-items: flex-end;
    padding-bottom: 7px;
}

.footer-banner__label {
    position: absolute;
    inset: 0 0 auto;
    height: 22px;
    color: var(--color-white);
    background-color: #29abe2;
    font-size: 0.8125rem; /* 13px */
    font-weight: 500;
    letter-spacing: 1px;
    line-height: 22px;
    text-align: center;
}

.site-footer__bottom {
    color: #d9d9d9;
    font-size: 1rem; /* 16px */
    font-weight: 400;
    line-height: 1.6;
    text-align: center;
}

.site-footer__bottom a {
    text-decoration: none;
}

@media (hover: hover) {
    .site-footer__bottom a:hover {
        text-decoration: underline;
    }
}

.site-footer__bottom small {
    font-size: inherit;
}

@media (min-width: 768px) {
    .site-footer__actions {
        flex-direction: row;
    }

    .site-footer__actions > li {
        flex: 1;
    }

    .footer-cta {
        font-size: 1.125rem; /* 18px */
    }

    .footer-nav {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-end;
        gap: 32px 68px;
    }

    .site-footer__banners {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 16px;
    }

    .site-footer .footer-banner {
        width: 260px;
    }
}

@media (min-width: 1024px) {
    .site-footer {
        gap: 52px;
        padding: 112px 70px 32px;
    }

    /* 画面の右端に付けたまま、大きさは 1920px のときで止める（右端から離すと山が途中で切れて見える） */
    .deco-mountain {
        width: min(58.05%, var(--layout-max-width) * 0.5805);
    }

    .site-footer__brand {
        gap: 14px;
    }

    .site-footer__logo img {
        width: 202px;
    }

    .site-footer__logo-sub {
        font-size: 0.9375rem; /* 15px */
        letter-spacing: 0.1em;
        line-height: 25px;
    }

    .site-footer__tel {
        height: 38px;
    }

    .site-footer__tel img {
        width: 38px;
        height: 38px;
        margin-top: 0;
    }

    /*
     * Figma の 2 列配置（左に会社情報、右にボタンとリンク）。1024〜1279px（1280px の画面をブラウザで 125% に拡大したときなど）も
     * 縦に積まずに 2 列のまま、右の列（Figma 730px）を残りの幅に縮める（2026-11-10 Chatwork「拡大率 125% でも 100% と同じレイアウトに」）。
     * 会社情報の列は縮めない（営業時間・定休日を折り返さない）
     */
    .site-footer__main {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        gap: 40px;
    }

    .site-footer__info {
        flex-shrink: 0;
    }

    .site-footer__nav-area {
        flex: 0 1 730px;
        gap: 48px;
        min-width: 0;
    }

    .site-footer__actions {
        gap: 0;
    }

    .footer-cta {
        height: 76px;
        letter-spacing: 0.06em;
    }

    .footer-nav__title {
        font-size: 1.25rem; /* 20px */
        line-height: 40px;
    }

    .footer-nav__item {
        font-size: 1rem; /* 16px */
        line-height: 40px;
    }
}

@media (min-width: 1280px) {
    .site-footer__nav-area {
        gap: 56px;
    }
}

/*
 * SP のメニュー（Figma 2041:10374「リリース時（3車種）」。template-parts/sp-menu.php、main.js が開く）
 * 画面全体に広げ、上からヘッダー（ロゴ・TOP・閉じる）・車種ラインナップ・リンク・SNS・お問い合わせ／見学予約のボタンを並べる。ヘッダーと下のボタンの間だけがスクロールする
 */
.sp-menu {
    flex-direction: column;
    width: 100%;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: 0;
    color: var(--color-white);
    background-color: var(--color-green);
    border: 0;
}

.sp-menu[open] {
    display: flex;
}

/* 開いたときはメニュー自体にフォーカスを置く（sp-menu.php の autofocus）。画面全体の枠は出さない（中の項目は Tab で移ると枠が出る） */
.sp-menu:focus {
    outline: none;
}

/*
 * 開くときは右からすっと入り、閉じるときは右へ出る（動きを減らす設定では動かさない）。
 * 閉じる動きは display・overlay の切り替えを遅らせて見せる（未対応のブラウザはすぐ閉じる）
 */
@media (prefers-reduced-motion: no-preference) {
    .sp-menu {
        transform: translateX(100%);
        transition:
            transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
            overlay 0.35s allow-discrete,
            display 0.35s allow-discrete;
    }

    .sp-menu[open] {
        transform: none;
    }

    /* 開いた直後の状態（ここから transform: none へ動かす）。同じ詳細度なので .sp-menu[open] より後に書く */
    @starting-style {
        .sp-menu[open] {
            transform: translateX(100%);
        }
    }
}

.sp-menu__head {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    height: 70px;
    padding-left: 16px;
}

/* 閉じるボタン（× を線 2 本で描く） */
.sp-menu__close {
    position: relative;
    display: block;
    width: 60px;
    height: 60px;
    padding: 0;
    color: var(--color-white);
    background: none;
    border: 0;
}

/* キーボードで閉じるボタンに移ったときの枠。標準の青い枠ではなく、緑の背景に合う白い線にする */
.sp-menu__close:focus-visible {
    outline: 2px solid var(--color-white);
    outline-offset: -8px;
}

.sp-menu__close::before,
.sp-menu__close::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 26px;
    height: 2px;
    background-color: currentColor;
    content: "";
}

.sp-menu__close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.sp-menu__close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.sp-menu__body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: 20px;
}

/* 車種ラインナップ（全幅の濃い緑。開閉なし）。余白は Figma Page 1（1688:386。2026-11-09 に詰めた版） */
.sp-menu__lineup {
    display: flex;
    flex-direction: column;
    padding: 0 20px 20px;
    background-color: #22513f;
}

.sp-menu__lineup-title {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 26px 0 12px;
    border-top: 1px solid rgb(255 255 255 / 0.25);
    font-size: 1.25rem; /* 20px */
    font-weight: 500;
    line-height: normal;
}

.sp-menu__cards {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 6px;
}

.sp-menu-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 12px;
    color: var(--color-green);
    background-color: var(--color-pale);
    line-height: normal;
    text-decoration: none;
}

/* 写真が無い車種は灰色の枠（Figma の SUZY mini） */
.sp-menu-card__thumb {
    flex-shrink: 0;
    width: 72px;
    height: 48px;
    background-color: #dbe3db;
    object-fit: cover;
}

.sp-menu-card__text {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.sp-menu-card__name {
    font-family: var(--font-en);
    font-size: 1.0625rem; /* 17px */
    font-weight: 800;
}

.sp-menu-card__lead {
    color: #333;
    font-size: 0.9375rem; /* 15px */
    font-weight: 700;
}

.sp-menu-card--soon .sp-menu-card__name,
.sp-menu-card--soon .sp-menu-card__lead {
    color: #737373;
}

/* 近日公開の車種は押せないので、右の三角を出さない */
.sp-menu-card--soon::after {
    content: none;
}

.sp-menu__list {
    display: flex;
    flex-direction: column;
    padding: 0 20px;
}

.sp-menu__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 0;
    color: inherit;
    border-top: 1px solid rgb(255 255 255 / 0.25);
    font-size: 1.0625rem; /* 17px */
    font-weight: 500;
    line-height: 25px;
    text-decoration: none;
}

.sp-menu__sns {
    display: flex;
    gap: 12px;
    padding: 12px 20px 16px;
}

.sp-menu__sns > li {
    flex: 1;
}

.sp-menu__sns-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 48px;
    color: #333;
    background-color: var(--color-white);
    font-size: 0.9375rem; /* 15px */
    font-weight: 700;
    letter-spacing: 0.125rem; /* 2px */
    text-decoration: none;
}

.sp-menu__sns-link--instagram img {
    transform: scaleY(-1);
}

/*
 * お問い合わせ・見学予約のボタン（Figma「Fixed CTA」2041:6542。template-parts/cta-bar.php）
 * SP メニューの下端と、ページの下端に固定する分（.fixed-cta）で使う
 */
.cta-bar {
    display: flex;
    flex-shrink: 0;
    height: var(--cta-bar-height);
}

.cta-bar > li {
    flex: 1;
    min-width: 0;
}

.cta-bar__link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 100%;
    padding: 0 8px;
    color: var(--color-white);
    font-size: 0.8125rem; /* 13px */
    font-weight: 500;
    letter-spacing: 0.0625rem; /* 1px */
    text-decoration: none;
    white-space: nowrap;
}

/* 矢印（base.css）の大きさ */
.cta-bar__link::after {
    --chevron-size: 6px;
}

.cta-bar__link--contact {
    background-color: var(--color-green);
    border-top: 1px solid rgb(255 255 255 / 0.3);
}

.cta-bar__link--reserve {
    background-color: var(--color-accent);
}

.fixed-cta {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 90;
}

/*
 * 「パンフレットを見る」（Figma 2041:12302。template-parts/catalog-float.php）
 * SP は画面右下で固定ボタンの 16px 上（100×84px）。PC は画面の右端・上から 140px の縦タブ（幅 60px）
 */
.catalog-float {
    position: fixed;
    right: 16px;
    bottom: calc(var(--cta-bar-height) + 16px);
    z-index: 80;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100px;
    height: 84px;
    color: var(--color-white);
    background-color: var(--color-green);
    border: 1.5px solid var(--color-white);
    border-radius: 4px;
    filter: drop-shadow(0 4px 7px rgb(0 0 0 / 0.18));
    font-size: 0.875rem; /* 14px */
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

@media (hover: hover) {
    .catalog-float:hover {
        background-color: #24584a;
    }
}

/* パンフレットのアイコン（枠と 3 本の線。Figma SP: 18 × 23px、線 10 × 2px を枠の内側から 5・10・15px） */
.catalog-float__icon {
    flex-shrink: 0;
    width: 18px;
    height: 23px;
    border: 2px solid currentColor;
    border-radius: 2px;
    background:
        linear-gradient(currentColor, currentColor) 2px 5px / 10px 2px no-repeat,
        linear-gradient(currentColor, currentColor) 2px 10px / 10px 2px no-repeat,
        linear-gradient(currentColor, currentColor) 2px 15px / 10px 2px no-repeat;
}

.catalog-float__label > span {
    display: block;
}

@media (min-width: 1024px) {
    /*
     * 上から 140px（Figma 1871:933。2026-11-11 Chatwork「ブラウザの拡大率 125% で上へボタンとかぶるので、もう少し上に」。前は 300px）。
     * それでも画面が低いと右下の「上へ」（下から 29px・高さ 59px）に重なるので、そのときは
     * 「上へ」の 16px 上で終わる位置まで上げる（ボタンの高さ 259px + 16px + 88px = 363px。2026-11-10 19:02 Chatwork）。ヘッダーの下 16px より上には行かない
     */
    .catalog-float {
        top: calc(var(--wp-admin--admin-bar--height, 0px) + clamp(var(--header-height) + 16px, 100vh - 363px, 140px));
        right: 0;
        bottom: auto;
        justify-content: flex-start;
        gap: 12px;
        width: 60px;
        height: auto;
        padding: 22px 0 24px;
        border-right: 0;
        border-radius: 4px 0 0 4px;
        font-size: 1.0625rem; /* 17px */
        line-height: 1;
    }

    /* Figma: 22 × 28px、線 12 × 2px を枠の内側から 6・12・18px */
    .catalog-float__icon {
        width: 22px;
        height: 28px;
        background:
            linear-gradient(currentColor, currentColor) 3px 6px / 12px 2px no-repeat,
            linear-gradient(currentColor, currentColor) 3px 12px / 12px 2px no-repeat,
            linear-gradient(currentColor, currentColor) 3px 18px / 12px 2px no-repeat;
    }

    /* 縦書き。Figma は 1 文字ずつ行の高さ 1.12（17px → 19px）で並べているので、字間 2px で同じ間隔にする */
    .catalog-float__label {
        letter-spacing: 2px;
        writing-mode: vertical-rl;
    }

    .catalog-float__label > span {
        display: inline;
    }
}

/*
 * 「上へ」（Figma Page 1 PC 2067:1334 / SP 2067:1339。template-parts/to-top.php、main.js が表示する）
 * 白地に緑の線の四角（角丸なし）の右下に、テラコッタの四角を少しずらして重ねる（影で描く）。中は上向きの矢印と「上へ」。
 * SP: 面 50px・ずらし 4px。画面の左下で、影の下端が固定ボタンの 16px 上（パンフレットのボタンの下端とそろう）
 */
.to-top {
    position: fixed;
    bottom: calc(var(--cta-bar-height) + 20px);
    left: 28px;
    z-index: 80;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5px;
    width: 50px;
    height: 50px;
    padding: 0;
    color: var(--color-green);
    background-color: var(--color-white);
    border: 1.5px solid currentColor;
    border-radius: 0;
    box-shadow: 4px 4px 0 var(--color-accent);
    font-family: var(--font-sans);
    font-size: 0.615rem; /* 9.84px */
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease, background-color 0.2s ease;
}

.to-top[hidden] {
    display: none;
}

.to-top.is-shown {
    opacity: 1;
    visibility: visible;
}

@media (hover: hover) {
    .to-top:hover {
        background-color: var(--color-pale);
    }
}

/*
 * 上向きの矢印（Figma SP: 12.5 × 6.9px・線 1.4px、PC: 14.8 × 8.1px・線 1.64px）。
 * 線を 2 本持つ正方形を 45 度回すと、上半分が「へ」の字になる。下半分の空きは負の margin で詰める
 */
.to-top__arrow {
    flex-shrink: 0;
    width: 9px;
    height: 9px;
    margin-top: 4.5px;
    margin-bottom: -2px;
    border-top: 1.4px solid currentColor;
    border-left: 1.4px solid currentColor;
    transform: rotate(45deg);
}

/* PC: 面 59px・ずらし 5px。右下に置き、影の右端と下端を画面の端から 24px（Figma は 1280 × 832px の画面の右下） */
@media (min-width: 1024px) {
    .to-top {
        right: 29px;
        bottom: 29px;
        left: auto;
        gap: 1.6px;
        width: 59px;
        height: 59px;
        box-shadow: 5px 5px 0 var(--color-accent);
        font-size: 0.7175rem; /* 11.48px */
    }

    .to-top__arrow {
        width: 10.5px;
        height: 10.5px;
        margin-top: 5px;
        margin-bottom: -2.5px;
        border-width: 1.64px;
    }
}

/* 固定ボタンの分だけページの下に余白を取り、フッターの最後が隠れないようにする */
body {
    padding-bottom: var(--cta-bar-height);
}

/* PC はヘッダーにナビと問い合わせボタンがあるので、SP メニューと固定ボタンは使わない */
@media (min-width: 1024px) {
    .sp-menu,
    .fixed-cta {
        display: none;
    }

    body {
        padding-bottom: 0;
    }
}