/* showroom リニューアル 2026 — エントリ
   ショールーム一覧（archive-showroom）で読み込む 2026 バンドル。 */
/*
 * 2026 デザイントークン（ランタイム CSS カスタムプロパティ）
 *
 * 命名方針:
 *  - Figma の Variables にある値は **Figma 変数名をそのまま** 採用（"/"→"-"）。
 *    例: Role/Text/Primary → --Role-Text-Primary, TextSize/Heading/XL → --TextSize-Heading-XL
 *  - Figma に無いプロジェクト都合の値（左右padding・モーション等）は --g26-* を使う。
 *  - leading-trim フォールバックは既存/参考プロジェクト踏襲で --leading-trim。
 *
 * 出所: Figma get_variable_defs（file v9dvGenAQUGKvuwJbbsdXe / Component 2:55）
 * TextSize は既定=PC値。SP は @media (--sp) で上書き（モード値を反映）。
 */
:root {
  /* ── Color: Role/* ── */
  --Role-Background-Default: #ffffff;
  --Role-Background-Subtle: #f1efeb;
  --Role-Background-Muted: #d8d4ce;
  --Role-Background-Emphasis: #4e4d4b;
  --Role-Text-Primary: #4e4d4b;
  --Role-Text-Secondary: #8c8984;
  --Role-Text-onEmphasis: #ffffff;
  --Role-Text-Caution: #e43030; /* Figma Role/Text/Caution（警告・赤注記）*/
  --Role-Border-Default: #d8d4ce;
  --Role-Border-Strong: #4e4d4b; /* Figma Role/Border/Strong（濃色枠線・ボタン等）*/
  --Role-Icon-Default: #4e4d4b;
  --Role-Icon-Muted: #8c8984;
  --Role-Icon-onEmphasis: #ffffff;

  /* ── Font: Font/* （値はサイト実フォント = Typekit）── */
  --Font-JP-Min: "dnp-shuei-mincho-pr6n", serif;     /* Font/JP Min（見出し）*/
  --Font-JP-Go: "dnp-shuei-gothic-gin-std", sans-serif; /* Font/JP Go（本文）*/
  --Font-EN: "adobe-garamond-pro", serif;            /* Font/EN（英字）*/

  /* ── TextSize: TextSize/* （rem化 / 既定=PC）── */
  --TextSize-Heading-XXL: 2.5rem;
  --TextSize-Heading-XL: 2.25rem;
  --TextSize-Heading-L: 2rem;
  --TextSize-Heading-M: 1.75rem;
  --TextSize-Heading-S: 1.5rem;
  --TextSize-Heading-XS: 1.25rem;
  --TextSize-Heading-XXS: 1.125rem;
  --TextSize-Body-L: 1.125rem;
  --TextSize-Body-M: 1rem;
  --TextSize-Body-S: 0.875rem;
  --TextSize-Body-XS: 0.75rem;

  /* ── Type: lineHeight / letterSpacing（Figma type styles）── */
  --LineHeight-Heading: 1.5;
  --LineHeight-Body-150: 1.5;
  --LineHeight-Body-175: 1.75;
  --LineHeight-Body-200: 2;
  --LetterSpacing-Default: 0.1em; /* Figma letterSpacing 10% */

  /* ── 流体単位（横方向のみリキッド）──
     1px 相当の可変単位。SP=375 基準 / PC=1440 基準（下の @media で切替）。
     基準幅ちょうどでは従来の px と完全一致し、画面幅に応じて比例する。
     方針: 横方向（padding-inline / width / column-gap 等）だけ --g26-u でリキッド。
           縦方向（margin-block / padding-block / row-gap 等）は rem() で固定値とする。 */
  --g26-u: calc(100vw / 375);

  /* ── Spacing: 数値スケール（Figma）。--g26-u 掛けで全面リキッド ── */
  --Spacing-4: calc(4 * var(--g26-u));
  --Spacing-8: calc(8 * var(--g26-u));
  --Spacing-12: calc(12 * var(--g26-u));
  --Spacing-16: calc(16 * var(--g26-u));
  --Spacing-20: calc(20 * var(--g26-u));
  --Spacing-24: calc(24 * var(--g26-u));
  --Spacing-32: calc(32 * var(--g26-u));
  --Spacing-40: calc(40 * var(--g26-u));
  --Spacing-48: calc(48 * var(--g26-u));
  --Spacing-64: calc(64 * var(--g26-u));
  --Spacing-80: calc(80 * var(--g26-u));
  --Spacing-120: calc(120 * var(--g26-u)); /* XXXL */

  /* ── Spacing（固定）: 縦の余白・ボタン左右など、画面幅で伸縮させない箇所用。rem 固定。
     横方向のリキッドは上の --Spacing-*（液体）を使う。 ── */
  --Spacing-Fixed-4: 0.25rem;
  --Spacing-Fixed-8: 0.5rem;
  --Spacing-Fixed-12: 0.75rem;
  --Spacing-Fixed-16: 1rem;
  --Spacing-Fixed-20: 1.25rem;
  --Spacing-Fixed-24: 1.5rem;
  --Spacing-Fixed-32: 2rem;
  --Spacing-Fixed-40: 2.5rem;
  --Spacing-Fixed-48: 3rem;
  --Spacing-Fixed-64: 4rem;
  --Spacing-Fixed-80: 5rem;
  --Spacing-Fixed-96: 6rem;
  --Spacing-Fixed-120: 7.5rem;
  --Spacing-Fixed-160: 10rem;
  --Spacing-Fixed-200: 12.5rem;

  /* ── leading-trim フォールバック（非対応ブラウザ用）── */
  --leading-trim: calc((1em - 1lh) / 2);

  /* ── 以下 Figma 非経由（プロジェクト都合）= --g26- ── */
  --g26-header-band: 66px; /* ヘッダー高（SP 66 / PC 89）。hero 高の差引・bleed 量に使用。PCは下で上書き */
  /* FB74: アンカー着地位置の補正量。--g26-header-band は「白ロゴ帯」の高さで、実際にコンテンツへ
     覆いかぶさる固定ヘッダーの高さとは別物（実測: SP 66 / PC 110.3）。見出しが隠れないよう
     実測値 + 少し余裕を持たせる。scroll-margin 専用なので視覚的な余白は増えない。 */
  --g26-anchor-offset: 90px; /* SP: 固定ヘッダー実測 66 + 24（leading-trim で見出しの行ボックスが
                                上に出るため、文字上端で余裕が出るよう実測して決めた値）*/
  --g26-pad-x: 6.4vw;    /* 左右padding（SP 375基準24px・リキッド。ISSUE行43。Figma SP コンテンツ幅327=375-24×2）*/
  --g26-section-y: var(--Spacing-Fixed-64);   /* セクション上下（SP 64px・縦固定）*/
  --g26-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* hover 用（ISSUE行3。参考サイト実測値）:
     矢印コンベア = naturehood-pj.com/zinen（Tailwind 既定 ease / 500ms / 追走 delay 75ms）
     画像ズーム   = neie.jp（easeOutQuart / 1s / scale 1.05） */
  --g26-ease-arrow: cubic-bezier(0.4, 0, 0.2, 1);
  --g26-ease-zoom: cubic-bezier(0.25, 1, 0.5, 1);
  --g26-duration: 0.6s;
}
/* SP（width <= 840px）: TextSize をモード値へ */
@media (width <= 840px) {
  :root {
    --TextSize-Heading-XXL: 1.75rem; /* SP モード値（PC40 → SP28）。欠落していたため追加（Figma 119:7444 実測）*/
    --TextSize-Heading-XL: 1.5rem;
    --TextSize-Heading-L: 1.5rem;
    --TextSize-Heading-M: 1.25rem;
    --TextSize-Heading-S: 1.25rem;
    --TextSize-Heading-XS: 1rem; /* SP モード値（PC20 → SP16）。欠落していたため追加 */
    --TextSize-Heading-XXS: 0.875rem; /* SP モード値（PC18 → SP14）。欠落していたため追加（Figma 119:7444 / 66:832 実測）*/
    --TextSize-Body-L: 1rem;
    --TextSize-Body-M: 0.875rem;
    --TextSize-Body-S: 0.75rem;
    --TextSize-Body-XS: 0.625rem;
  }
}
/* PC（width > 840px）: 左右padding・セクション余白を拡大 */
@media (width > 840px) {
  :root {
    --g26-u: calc(100vw / 1440); /* 流体単位の PC 基準（ISSUE行4）*/
    --g26-header-band: 89px; /* PC 透過ヘッダーの白ロゴ帯の高さ */
    --g26-anchor-offset: 158px; /* PC: 従来のレガシー common.js と同値。ヘッダー実測 110.3 に対し
                                   余裕48で、これまでの見え方（指摘の無かった状態）を維持する（FB74）*/
    --g26-pad-x: 7.777777777777778vw;       /* 1440基準112px・リキッド（ISSUE行43。横余白を画面幅に比例）*/
    --g26-section-y: var(--Spacing-Fixed-160);  /* 160px（縦固定）*/
  }
}
/*
 * g26-l-main（レイアウト）: ページの <main> ラッパ。
 * h-header（既存ヘッダー）が position:absolute のため、その高さ分だけ
 * コンテンツを下げて潜り込みを防ぐ。値は実ヘッダー高に合わせる（PC155/SP66）。
 * ※構造オフセットのため px（ヘッダー高と一致させる）。
 */
.g26-l-main {
  padding-block-start: 66px; /* SP ヘッダー高 */
  -webkit-font-smoothing: antialiased; /* 文字を細く滑らかに（Mac/Chrome/Safari）*/
  -moz-osx-font-smoothing: grayscale; /* Firefox(Mac) 対応 */
}
@media (width > 840px) {
  .g26-l-main {
    padding-block-start: 155px; /* PC ヘッダー高（logo+nav） */
  }
  /* 透過ヘッダー（h-header--transparent）: 白ロゴ帯の下からヒーロー開始（ナビはヒーローに重なる）*/
  .g26-l-main--bleed {
    padding-block-start: var(--g26-header-band); /* 89px */
  }
}
/*
 * 既存ヘッダー（class: h-header / common.css 由来）への上書き。
 * ヒーローにヘッダーを重ねる画面（TOP の PC）で透過ヘッダーにする modifier。
 * Figma: PC/トップ/グロナビ（341:2477 / 341:2490）。SP は対象外（既存の不透明ヘッダー）。
 *
 * スコープ: 透過は「固定化前」のみ有効にしたいので :not(.is-gray-nav) を付与。
 *   スクロールで is-gray-nav（position:fixed + 白背景）が付くと透過上書きは外れ、
 *   common.css 既定の不透明ヘッダー（白地・暗い文字）に戻る。
 *
 * 仕様（PC のみ / 固定化前）:
 *   - h-header           : 背景を透過
 *   - h-header_title     : 白背景（暗いロゴを視認）。旧 boxPC の margin-top 分を padding-block-end に移設
 *   - h-header__boxPC    : margin 廃止 / 上罫線なし（グラデ背景は持たない）
 *   - 上位ナビ文字        : 白（ヒーロー側のグラデ上で視認）
 *
 * グラデ（黒30%→透明・高さ160）は Figma 117:7409 の "Filter" 1枚のみで、
 * 実装ではヒーロー側（.g26-c-hero__slides::before）が担う。ナビ行はその内側に
 * 完全に収まる（nav x17..1423/y89..154 ⊂ hero x16..1424/y89〜）ため、
 * ここで重ねると黒 30%→約 49% の二重掛けになりデザインより濃くなる。
 *
 * ※命名は既存クラスの modifier を踏襲（g26- は付けない）。
 */
@media (width > 840px) {
  .h-header--transparent:not(.is-gray-nav) {
    background-color: transparent;
  }

  /* ロゴ: 白背景 + 旧 boxPC の margin-top(27px) を padding-block-end へ */
  .h-header--transparent:not(.is-gray-nav) .h-header_title {
    background-color: var(--Role-Background-Default); /* #fff */
    padding-block-end: 27px;
  }

  /* ナビ行: margin 廃止 / 罫線なし（グラデはヒーロー側 __slides::before が担う。上記コメント参照）*/
  .h-header--transparent:not(.is-gray-nav) .h-header__boxPC {
    margin-block-start: 0;
    border-block-start: none;
  }

  /* 上位ナビ項目の文字を白に（ドロップダウン内は対象外）*/
  .h-header--transparent:not(.is-gray-nav) .btn_pc_listItem > .btn_pc_submenu {
    color: var(--Role-Text-onEmphasis); /* #fff */
  }

  /* 左右端をヒーローに揃える（FB行3「両端がズレている」）。
     common.css の .h-header__inner は width:calc(100% - 34px)（左右17px固定）だが、
     ヒーロー側のガターは vw(16) のリキッド。幅が広いほど差が開く（1920px で約4.3px）ため、
     透過ヘッダー時のみヒーローと同じ計算に合わせる。*/
  .h-header--transparent:not(.is-gray-nav) .h-header__inner {
    inline-size: calc(100% - 1.1111111111111112vw * 2);
    margin-inline: auto;
  }
}
/*
 * /showroom/ 系ページ（一覧 archive-showroom / 詳細 single-showroom）専用のヘッダー上書き。
 * このファイルは showroom 系バンドル（output/showroom, output/showroom-detail）からのみ import する。
 * → top 等の他ページには影響しない（h-header.css 本体は共有なので触らない）。
 *
 * ヘッダーの「ショールームを予約」ボタン(.h-header__showroom)は、
 * ショールームの一覧/詳細ページ上では冗長なため非表示にする。
 */
.h-header__showroom { display: none; }
/* showroom 系のみ: 予約ボタン非表示 */
/*
 * 既存フッター（class: f-footer / common.css 由来）への 2026 上書き。
 * TOP の 2026 デザインでは本文とフッターの間に余白が必要なため、フッター上部に
 * padding-block-start を付与する modifier を用意する（ヘッダーの h-header--transparent と同方針）。
 *
 * スコープ:
 *   2026 バンドル（top/style.css）は front page でのみ読み込まれる（header.php）。
 *   よって .f-footer--2026 のスタイルも実質 TOP 限定。他ページへ展開する際はこの
 *   modifier を付与すればよい（= 「新しいバージョンに切替できる」状態）。
 *
 * ※命名は既存クラスの modifier を踏襲（g26- は付けない）。
 */
@media (width > 840px) {
  .f-footer--2026 {
    padding-block-start: var(--Spacing-Fixed-48); /* PC */
  }
}
/*
 * Icon 基盤（参考: sony-recruit 方式）
 * - 正本は src-2026/icons/<name>.svg → ビルドで 1 枚の symbol スプライト
 *   dist/inc/svg/2026/icons.svg に合成。
 * - 使用: <svg class="g26-c-icon ..."><use href="/inc/svg/2026/icons.svg#<name>"></use></svg>
 * - サイズは 1em（font-size で制御）、色は currentColor で文字色に追従。
 */
.g26-c-icon {
  display: inline-block;
  inline-size: 1em;
  block-size: 1em;
  flex: none;
  fill: currentColor; /* 塗りアイコン用。線アイコンは SVG 側 stroke=currentColor */
}
/*
 * Heading コンポーネント（Figma: Component/Heading 358:2966）
 * - g26-c-page-title : H1（和文タイトル → 英字サブ）
 * - g26-c-heading    : H2（英字ラベル → 和文タイトル → 説明文）
 * - g26-c-heading-top: H3/Top（上罫線 + 2カラム：英字ラベル | タイトル+説明）
 *
 * トークンは Figma 変数名（--Role-* / --TextSize-* / --Font-* …）。サイズは
 * TextSize トークンが PC/SP を内包するので、コンポーネント側で size の分岐は不要。
 *
 * leading-trim:
 *   見出しは Figma の cap-baseline 基準に合わせるため text-box-trim を使う。
 *   対応(Chrome133+/Safari18.2+): text-box: trim-both cap alphabetic
 *   非対応(Firefox等):           margin-block: var(--leading-trim) で近似
 *   ※ trim で行ボックスが cap 高さに縮むため、積み重ねは flex column + gap / margin で制御。
 */
/* 見出しテキスト共通: cap-baseline トリム（@supports 分岐） */
.g26-c-page-title__title,
.g26-c-page-title__en,
.g26-c-heading__en,
.g26-c-heading__title,
.g26-c-heading__desc,
.g26-c-heading-top__en,
.g26-c-heading-top__title,
.g26-c-heading-top__desc {
  letter-spacing: var(--LetterSpacing-Default);
}
@supports not (text-box: trim-both cap alphabetic) {
  .g26-c-page-title__title,
  .g26-c-page-title__en,
  .g26-c-heading__en,
  .g26-c-heading__title,
  .g26-c-heading__desc,
  .g26-c-heading-top__en,
  .g26-c-heading-top__title,
  .g26-c-heading-top__desc {
    margin-block: var(--leading-trim);
  }
}
@supports (text-box: trim-both cap alphabetic) {
  .g26-c-page-title__title,
  .g26-c-page-title__en,
  .g26-c-heading__en,
  .g26-c-heading__title,
  .g26-c-heading__desc,
  .g26-c-heading-top__en,
  .g26-c-heading-top__title,
  .g26-c-heading-top__desc {
    text-box: trim-both cap alphabetic;
  }
}
/* ===== H1: page-title ===== */
.g26-c-page-title {
  /* 本プロジェクト方針: コンポーネントは上マージン(margin-block-start)を持つ。
     Figma コンポーネント(128:8031/128:7602)の padTop = 40(SP)/64(PC)。*/
  margin-block-start: var(--Spacing-Fixed-40); /* 40（SP）*/
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-Fixed-20); /* 20（SP）*/
}
.g26-c-page-title__title {
  font-family: var(--Font-JP-Min);
  font-size: var(--TextSize-Heading-XL);
  line-height: var(--LineHeight-Heading);
  color: var(--Role-Text-Primary);
}
.g26-c-page-title__en {
  font-family: var(--Font-EN);
  font-size: var(--TextSize-Body-L);
  line-height: var(--LineHeight-Heading);
  letter-spacing: 0.05em; /* Figma: H1 英字のみ 5% */
  text-transform: uppercase;
  color: var(--Role-Text-Secondary);
}
@media (width > 840px) {
  .g26-c-page-title {
    margin-block-start: var(--Spacing-Fixed-64);
    gap: var(--Spacing-Fixed-32);
  }
}
/* ===== H2: heading（英字→タイトルは密着、説明は離す）===== */
.g26-c-heading {
  /* 上マージン（仮: セクション見出しとしてセクション余白を流用 PC160/SP64）
     ※実セクション確定時に要調整 */
  margin-block-start: var(--g26-section-y);
  display: flex;
  flex-direction: column;
}
.g26-c-heading__en {
  font-family: var(--Font-EN);
  font-size: var(--TextSize-Body-L);
  line-height: var(--LineHeight-Heading);
  text-transform: uppercase;
  color: var(--Role-Text-Secondary);
}
.g26-c-heading__title {
  /* Figma H2: en→title gap 40(PC)/32(SP)（cap-to-cap, text-box-trim 前提）*/
  margin-block-start: var(--Spacing-Fixed-32); /* 32（SP）*/
  font-family: var(--Font-JP-Min);
  font-size: var(--TextSize-Heading-L);
  line-height: var(--LineHeight-Heading);
  color: var(--Role-Text-Primary);
}
.g26-c-heading__desc {
  margin-block-start: var(--Spacing-Fixed-40); /* 40（SP）*/
  font-family: var(--Font-JP-Go);
  font-size: var(--TextSize-Body-M);
  line-height: var(--LineHeight-Body-200);
  color: var(--Role-Text-Primary);
}
@media (width > 840px) {
  .g26-c-heading__title { margin-block-start: var(--Spacing-Fixed-40); }
  .g26-c-heading__desc { margin-block-start: var(--Spacing-Fixed-48); }
}
/* ===== H3/Top: heading-top ===== */
.g26-c-heading-top {
  /* セクション間の上マージンは使う側（ページ/セクション）が所有する。
     本コンポーネントは上罫線 + 罫線↔テキストの内側 padding のみを持つ。
     （旧: 仮の margin-block-start 80/48 を内包 → 文脈ごとに値が変わり辻褄が合わなくなるため撤廃）*/
  border-block-start: 1px solid var(--Role-Border-Default);
  padding-block-start: var(--Spacing-Fixed-24); /* 24（SP: 罫線 ⇔ ラベル。Figma 358:3292 Frame gap24）*/
}
.g26-c-heading-top__en {
  font-family: var(--Font-EN);
  font-size: var(--TextSize-Body-S); /* 14 / SP12 */
  line-height: var(--LineHeight-Heading);
  color: var(--Role-Text-Secondary);
}
.g26-c-heading-top__title {
  margin-block-start: var(--Spacing-Fixed-64); /* 64（SP: ラベル → タイトル。Figma 358:3292 外側 gap64）*/
  font-family: var(--Font-JP-Min);
  font-size: var(--TextSize-Heading-M);
  line-height: var(--LineHeight-Heading);
  color: var(--Role-Text-Primary);
}
.g26-c-heading-top__desc {
  margin-block-start: var(--Spacing-Fixed-32); /* 32（SP: タイトル → 説明。Figma gap32）*/
  font-family: var(--Font-JP-Go);
  font-size: var(--TextSize-Body-M);
  line-height: var(--LineHeight-Body-200);
  color: var(--Role-Text-Primary);
}
@media (width > 840px) {
  .g26-c-heading-top {
    padding-block-start: var(--Spacing-Fixed-80);
  }
  .g26-c-heading-top__row {
    display: flex;
    gap: var(--Spacing-32);
  }
  .g26-c-heading-top__en {
    flex: none;
    width: calc(176 / 1216 * 100%);
  }
  .g26-c-heading-top__body { flex: 1; }
  .g26-c-heading-top__title { margin-block-start: 0; }
  .g26-c-heading-top__desc { margin-block-start: var(--Spacing-Fixed-40); } /* PC: タイトル → 説明 40（Figma 358:3276 右カラム gap40）*/
}
/* FB69: PC 横並び見出しで __title の PC上書き(margin-block-start:0)により、トリム非対応
   （Firefox等）ではタイトルの cap 上端がラベル(__en)より下がる。両者を cap 上端で揃える
   （片側リーディング分だけ引き上げ）。Chrome/Safari は trim で揃うため非対応時のみ。*/
@supports not (text-box: trim-both cap alphabetic) {
  @media (width > 840px) {
    .g26-c-heading-top__en,
    .g26-c-heading-top__title { margin-block-start: calc((1cap - 1lh) / 2); }
  }
}
/* 罫線なし版（上罫線・内側 padding を持たない。上余白はセクション側で制御）。
   ※ @media より後に置き、PC でも上書きされるようにする */
.g26-c-heading-top--no-border {
  border-block-start: 0;
  padding-block-start: 0;
}
/*
 * Note List（Figma: Component/Text/ListItem/Note）
 * 行頭に ※、muted カラー。本文 14/12・行間 1.5。注釈用。
 */
.g26-c-notes {
  margin-block-start: var(--Spacing-Fixed-24); /* 24（SP）/ PC32 */
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-Fixed-16); /* 項目間 16（Figma 97-6465 Article/Note/PC）*/
  font-family: var(--Font-JP-Go);
  font-size: var(--TextSize-Body-S); /* 14 / SP12 */
  line-height: var(--LineHeight-Heading);
  letter-spacing: var(--LetterSpacing-Default);
  color: var(--Role-Text-Secondary);
}
/* li をブロック化＋マーカー(※)絶対配置で text-box-trim を本文に効かせる */
.g26-c-notes__item {
  position: relative;
  padding-inline-start: calc(16px + var(--Spacing-Fixed-4)); /* マーカー列16 + gap4 */
}
.g26-c-notes__item::before {
  content: "※";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  inline-size: 16px;   /* マーカー列 */
  line-height: 1;      /* 上の half-leading を除去（非対応ブラウザでのズレ低減）*/
  text-align: center;
}
/* leading-trim（Figma の text-box-trim）。本文だけでなくマーカー(::before)も cap で揃える */
@supports (text-box: trim-both cap alphabetic) {
  .g26-c-notes__item,
  .g26-c-notes__item::before { text-box: trim-both cap alphabetic; }
}
@supports not (text-box: trim-both cap alphabetic) {
  .g26-c-notes__item { margin-block: var(--leading-trim); }
  /* FB67: トリム非対応（Firefox等）では item 上端が cap ではなく行ボックス上端になり、
     top:0 起点の ※ マーカーが上へズレる。※は line-height:1 を持つため calc((1lh-1cap)/2) では
     1lh=1em となり補正不足（木村FB: やや上にズレる）。行ボックスを親と同一にして top:0 に戻すと
     ※のベースラインが本文1行目と一致する。 */
  .g26-c-notes__item::before {
    line-height: inherit;
    inset-block-start: 0;
  }
}
/* 注釈内のテキストリンクは下線を付ける（FB行20。色は文脈を継承）*/
.g26-c-notes__item a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: from-font;
  text-underline-position: from-font;
}
/* caution（赤注記・Figma Role/Text/Caution）。※(::before)・本文・内包リンクは currentColor を継承して赤に揃う */
.g26-c-notes__item--caution { color: var(--Role-Text-Caution, #e43030); }
@media (width > 840px) {
  .g26-c-notes { margin-block-start: var(--Spacing-Fixed-32); }
}
@media (width <= 840px) {
  .g26-c-notes__item {
    padding-inline-start: calc(14px + var(--Spacing-Fixed-4));
  }
  .g26-c-notes__item::before { inline-size: 14px; }
}
/*
 * Bullet List（Figma: Component/Text/ListItem/Bullet）
 * 行頭に 4px ドット（muted）、16px のマーカー列 + gap 4px。本文 16/14・行間 1.75。
 */
.g26-c-list {
  margin-block-start: var(--Spacing-Fixed-24); /* 24（SP）/ PC32 */
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-Fixed-8); /* 項目間（仮）*/
  font-family: var(--Font-JP-Go);
  font-size: var(--TextSize-Body-M); /* 16 / SP14 */
  line-height: var(--LineHeight-Body-175);
  letter-spacing: var(--LetterSpacing-Default);
  color: var(--Role-Text-Primary);
}
/* li をブロック化（テキストを直接の inline 内容に）し、マーカーは絶対配置。
   こうすることで text-box-trim が本文に効き、項目間 gap が cap 基準になる。
   本文は padding でぶら下げインデント（2行目以降もマーカー右に揃う）。 */
.g26-c-list__item {
  position: relative;
  padding-inline-start: calc(16px + var(--Spacing-Fixed-4)); /* マーカー列16 + gap4 */
}
.g26-c-list__item::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  inline-size: 16px;   /* マーカー列（Figma PC 97:5522: 16×12 の circle r=2）*/
  block-size: 1cap;    /* trim 後の1行目（cap 高）に合わせ、ドットを cap 中央へ */
  /* Figma と同じ SVG 円（r=2 / #8C8984）。radial-gradient はフェード分ひと回り大きく見えるため不可 */
  background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="4" height="4"%3E%3Ccircle cx="2" cy="2" r="2" fill="%238C8984"/%3E%3C/svg%3E') no-repeat center / 4px 4px;
}
/* leading-trim（Figma の text-box-trim:trim-both / edge cap alphabetic）*/
@supports (text-box: trim-both cap alphabetic) {
  .g26-c-list__item { text-box: trim-both cap alphabetic; }
}
@supports not (text-box: trim-both cap alphabetic) {
  .g26-c-list__item { margin-block: var(--leading-trim); }
  /* FB67: トリム非対応（Firefox等）では li 上端が cap ではなく行ボックス上端になり、
     top:0 起点の 1cap マーカーが上へズレる。行ボックス中央（≒cap中央）まで下げて揃える。 */
  .g26-c-list__item::before { inset-block-start: calc((1lh - 1cap) / 2); }
}
@media (width > 840px) {
  .g26-c-list { margin-block-start: var(--Spacing-Fixed-32); }
}
@media (width <= 840px) {
  /* Figma SP(128:8488): マーカー列は 14px（PC16）。ドット径・gap4 は共通 */
  .g26-c-list__item { padding-inline-start: calc(14px + var(--Spacing-Fixed-4)); }
  .g26-c-list__item::before { inline-size: 14px; }
}
/*
 * Label（Figma: Component/Text/Label）
 * 枠付きの小さなラベルチップ。text-box-trim で cap 高さに詰めて枠がテキストを包む。
 */
.g26-c-label {
  display: inline-block;
  /* Figma(Label/PC 235:3305)は枠線が内側でチップ高25px（pad8 + cap + pad8）。
     CSSのborderは外付きなので padding から1px引いて高さを一致させる */
  padding-block: calc(var(--Spacing-Fixed-8) - 1px);
  padding-inline: calc(var(--Spacing-8) - 1px);
  border: 1px solid var(--Role-Border-Default);
  border-radius: 2px;
  font-family: var(--Font-JP-Go);
  font-size: var(--TextSize-Body-XS);
  line-height: 1; /* 単一行チップ。text-box 非対応でも枠が詰まるよう 1 */
  letter-spacing: var(--LetterSpacing-Default);
  color: var(--Role-Text-Primary);
}
@supports not (text-box: trim-both cap alphabetic) {
  .g26-c-label { text-box-edge: cap alphabetic; } /* no-op 環境では padding がそのまま */
}
@supports (text-box: trim-both cap alphabetic) {
  .g26-c-label { text-box: trim-both cap alphabetic; }
}
@media (width <= 840px) {
  .g26-c-label { padding-block: calc(0.375rem - 1px); padding-inline: calc(0.375rem - 1px); }
}
/*
 * LinkIcon（Figma: Component/Link/LinkIcon）
 * アイコンを内包する pill バッジ。TextLink 内や単体で使用。
 * Color: Default(#f1efeb地) / --on-emphasis(白地)。アイコン色は常に #4e4d4b。
 * 寸法: 32x16（SP 28x14）、アイコン 12px（SP 10px）。
 */
.g26-c-link-icon {
  /* 矢印コンベアの可動窓・移動距離（ピル全幅32ではなくアイコン幅相当。
     ボタンの16px移動と揃える = naturehood 実測レンジ。ISSUE行3 FB）*/
  --g26-arrow-travel: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 32px;
  block-size: 16px;
  border-radius: 9999px;
  background-color: var(--Role-Background-Subtle); /* #f1efeb */
  color: var(--Role-Icon-Default); /* アイコン currentColor #4e4d4b */
}
.g26-c-link-icon--on-emphasis {
  background-color: var(--Role-Background-Default); /* 白（濃色面で使用）*/
}
.g26-c-link-icon .g26-c-icon {
  font-size: 0.75rem;
}
@media (width <= 840px) {
  .g26-c-link-icon {
    --g26-arrow-travel: 14px;
    inline-size: 28px;
    block-size: 14px;
  }
  .g26-c-link-icon .g26-c-icon {
    font-size: 0.625rem;
  }
}
/*
 * g26-c-anchor-nav — ページ内アンカーのナビ行（テキスト + 下矢印バッジ、列間に区切り線）。
 * Figma: PC 60:260 / SP 88:2881
 *  - PC: 4等幅を横並び（col-gap 48）。列間に区切り線（1px / h24）。
 *  - SP: 2列グリッド×2行（col-gap 16 / row-gap 16）。列間に区切り線。
 * 区切り線は ::before（h24・中央）で生成し、レイアウトに応じて表示を切替。
 * バッジ=g26-c-link-icon（arrow-down）。
 */
.g26-c-anchor-nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  /* Figma(60:260 / 90:3768): アイテム⇔線・線⇔アイテムが各48 → アイテム間の総距離 97（48+1+48）*/
  column-gap: calc(calc(96 * var(--g26-u)) + 1px);
  align-items: center;
}
.g26-c-anchor-nav__item {
  /* 入替の余白（roll の間）と縦つぶし量（回転感）*/
  --g26-anchor-swap-gap: 0.4em;
  --g26-anchor-swap-scale: 0.7;
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--Spacing-16);
  font-family: var(--Font-JP-Go);
  font-size: var(--TextSize-Body-M); /* 16 / SP14 */
  line-height: var(--LineHeight-Heading);
  letter-spacing: var(--LetterSpacing-Default);
  color: var(--Role-Text-Primary);
  text-decoration: none;
}
/* サイト全体の a:hover{opacity:.6}（home.css）を打ち消す。hover 演出は transform/opacity のみで表現 */
.g26-c-anchor-nav__item:hover {
  opacity: 1;
}
/* テキスト: __text を基準に __text-inner（原本）と複製を重ねる。
   flex で中身の実高にぴったり合わせる（line-height 行ボックスで縦ズレしないよう）*/
.g26-c-anchor-nav__text {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  min-inline-size: 0;
  /* 幅が足りない時はテキストを折り返す（アイコンに被せない。Figma 842:2441 / ISSUE行20・39）*/
}
.g26-c-anchor-nav__text-inner {
  display: inline-block;
}
.g26-c-anchor-nav__text-inner--clone {
  position: absolute;
  inset-block-start: calc(100% + var(--g26-anchor-swap-gap));
  inset-inline-start: 0;
  opacity: 0;
  transform: scaleY(var(--g26-anchor-swap-scale));
  pointer-events: none;
}
/* 矢印コンベア（縦）: LinkIcon(pill) を overflow box にして2本を上下入替（arrow-down なので下へ抜け／上から入る）*/
.g26-c-anchor-nav__item .g26-c-link-icon {
  position: relative;
  overflow: hidden;
}
.g26-c-anchor-nav__arrow {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.g26-c-anchor-nav__arrow--follow {
  transform: translateY(-100%); /* 上に待機 */
}
/* leading-trim（Figma の text-box-trim）*/
@supports (text-box: trim-both cap alphabetic) {
  .g26-c-anchor-nav__text-inner { text-box: trim-both cap alphabetic; }
}
@supports not (text-box: trim-both cap alphabetic) {
  .g26-c-anchor-nav__text-inner { margin-block: var(--leading-trim); }
}
/* hover: テキストは Opacity 70% に（上下スワップは廃止。ISSUE行3 の全体hover方針）*/
@media (hover: hover) {
  .g26-c-anchor-nav__item:hover .g26-c-anchor-nav__text {
    opacity: 0.7;
  }
}
/* hover インタラクション（ポインタ端末 + 動きを許容する設定のときのみ）*/
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .g26-c-anchor-nav__text {
    transition: opacity 0.3s ease;
  }
  .g26-c-anchor-nav__arrow {
    transition: transform 0.5s var(--g26-ease-arrow);
  }
  .g26-c-anchor-nav__arrow--follow {
    transition-delay: 75ms;
  }
  .g26-c-anchor-nav__item:hover .g26-c-anchor-nav__arrow--lead {
    transform: translateY(100%); /* 下へ抜ける */
  }
  .g26-c-anchor-nav__item:hover .g26-c-anchor-nav__arrow--follow {
    transform: translateY(0); /* 上から中央へ */
  }
}
/* 区切り線（列の左側・ギャップ中央に h24）*/
.g26-c-anchor-nav__item::before {
  content: "";
  position: absolute;
  inset-inline-start: calc(-1 * calc(48 * var(--g26-u)) - 1px); /* 前アイテムまで48・次アイテムまで48（線幅1px）*/
  inset-block-start: 50%;
  transform: translateY(-50%);
  inline-size: 1px;
  block-size: 24px;
  background-color: var(--Role-Border-Default);
}
.g26-c-anchor-nav__item:first-child::before {
  display: none; /* 先頭は線なし */
}
@media (width <= 840px) {
  .g26-c-anchor-nav {
    /* Figma 88:2881: 列幅147固定×2 + 列間33（16+線1+16）＝ナビ幅327。
       1fr の min-content 下限で長文（キッチンレイアウト）が左列を押し広げるため minmax(0,1fr) で均等化 */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: calc(var(--Spacing-32) + 1px);
    row-gap: var(--Spacing-Fixed-16);
  }
  /* Figma の行ボックスは 24px（border 高に一致）。leading-trim でテキスト箱が詰まり
     item が 14px に潰れるため、min 24px を与えて border どうしの縦間隔を 16 に保つ。
     gap は 0（Figma SP は justify-between のみ。固定gapがあると列幅147に収まらない）*/
  .g26-c-anchor-nav__item {
    min-block-size: 24px;
    gap: 0;
  }
  .g26-c-anchor-nav__item::before {
    inset-inline-start: calc(-1 * calc(16 * var(--g26-u)) - 1px); /* 前アイテムまで16・次アイテムまで16（線幅1px）*/
  }
  /* 2列: 左列(1,3)は線なし、右列(2,4)に線 */
  .g26-c-anchor-nav__item:nth-child(odd)::before {
    display: none;
  }
  .g26-c-anchor-nav__item:nth-child(even)::before {
    display: block;
  }
}
/*
 * g26-c-showroom-item — ショールーム店舗行（一覧の1店舗・リンク）
 * Figma: PC 90:3925 (Showroom/PC) / SP 136:9164 (Showroom/SP)
 *  - SP(base): 縦積み（サムネ全幅16:10 → 情報）。
 *  - PC: 横並び（サムネ384×240 + 情報(flex-1) + 右端 arrow pill）。
 * サムネが無いときは figure 自体を出力しない（プレースホルダは廃止）。
 * leading-trim は他コンポーネント同様 text-box-trim + @supports フォールバック。
 */
.g26-c-showroom-item {
  /* hover: 画像ズーム量 / 店名スワップの余白・縦つぶし量 */
  --g26-sr-zoom: 1.05; /* neie.jp 実測に合わせ縮小（ISSUE行3）*/
  --g26-sr-swap-gap: 0.4em;
  --g26-sr-swap-scale: 0.7;
  display: flex;
  flex-direction: column;
  /* SP は gap を使わず各要素の margin-block-start で制御（media↔body=32 / body↔arrow=24）。
     矢印は Figma(90:5137)では body 内 gap24 の末尾要素なので、一律 gap32 だと上が開きすぎる。*/
  align-items: flex-start;
  text-decoration: none;
  color: var(--Role-Text-Primary);
}
/* サイト全体の a:hover{opacity:.6}（home.css）を打ち消す。演出は transform のみ */
.g26-c-showroom-item:hover {
  opacity: 1;
}
/* --- サムネ --- */
.g26-c-showroom-item__media {
  flex: none;
  margin: 0;
  inline-size: 100%;
  aspect-ratio: 160 / 100; /* SP 16:10 */
  overflow: hidden;
  background-color: var(--Role-Background-Subtle); /* 無地プレースホルダ地 */
  display: flex;
  align-items: center;
  justify-content: center;
}
.g26-c-showroom-item__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
}
/* --- 情報 --- */
.g26-c-showroom-item__body {
  inline-size: 100%;
  min-inline-size: 0;
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-Fixed-24); /* SP: head群 ⇔ info群（= 全体 24 等間隔）*/
}
/* SP: サムネ ⇔ 情報（media が在るときだけ。media 無し時は body 先頭で余白不要）*/
.g26-c-showroom-item__media + .g26-c-showroom-item__body {
  margin-block-start: var(--Spacing-Fixed-32);
}
.g26-c-showroom-item__head {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-Fixed-24); /* 店名 ⇔ 住所 */
}
.g26-c-showroom-item__name {
  position: relative; /* 上下スワップの基準（__name-inner 原本 + 複製）*/
  margin: 0;
  font-family: var(--Font-JP-Min);
  font-size: var(--TextSize-Heading-S); /* 24 / SP20 */
  line-height: var(--LineHeight-Heading);
  letter-spacing: var(--LetterSpacing-Default);
}
/* block にして複数行店名でも __name 高さ＝中身の実高に一致（縦ズレ防止）*/
.g26-c-showroom-item__name-inner {
  display: block;
}
.g26-c-showroom-item__name-inner--clone {
  position: absolute;
  inset-block-start: calc(100% + var(--g26-sr-swap-gap));
  inset-inline-start: 0;
  inline-size: 100%;
  opacity: 0;
  transform: scaleY(var(--g26-sr-swap-scale));
  pointer-events: none;
}
.g26-c-showroom-item__address {
  margin: 0;
  font-family: var(--Font-JP-Go);
  font-size: var(--TextSize-Body-S); /* 14 / SP12 */
  line-height: var(--LineHeight-Body-175);
  letter-spacing: var(--LetterSpacing-Default);
}
.g26-c-showroom-item__info {
  inline-size: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-Fixed-24); /* スペック ⇔ オンラインラベル */
  align-items: flex-start;
}
/* スペック表（営業時間/定休日/展示数/施設）: ラベル固定幅 + 値 */
.g26-c-showroom-item__specs {
  margin: 0;
  inline-size: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-Fixed-12);
  font-family: var(--Font-JP-Go);
  font-size: var(--TextSize-Body-XS); /* 12 / SP10 */
  line-height: var(--LineHeight-Body-175);
  letter-spacing: var(--LetterSpacing-Default);
}
.g26-c-showroom-item__spec {
  display: flex;
  align-items: baseline;
}
.g26-c-showroom-item__spec dt {
  flex: none;
  inline-size: 3.5rem; /* SP: ラベル列 */
  color: var(--Role-Text-Secondary);
}
.g26-c-showroom-item__spec dd {
  flex: 1 0 0;
  min-inline-size: 0;
  margin: 0;
  color: var(--Role-Text-Primary);
}
/* オンライン対応ラベル（g26-c-label を流用。SP は Body/S サイズ）*/
.g26-c-showroom-item__online {
  font-size: var(--TextSize-Body-S);
}
/* arrow（g26-c-link-icon を流用）。overflow box にして矢印を横コンベア化 */
.g26-c-showroom-item__arrow {
  flex: none;
  position: relative;
  overflow: hidden;
  margin-block-start: var(--Spacing-Fixed-24); /* SP: 情報 ⇔ 矢印（Figma=24。一律gap32だと開きすぎ）*/
}
/* 矢印の可動窓: アイコン幅相当（--g26-arrow-travel）でクリップし移動距離をボタンと揃える（ISSUE行3 FB）*/
.g26-c-showroom-item__arrow-icon {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 50%;
  margin-inline-start: calc(var(--g26-arrow-travel, 16px) / -2);
  inline-size: var(--g26-arrow-travel, 16px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.g26-c-showroom-item__arrow-icon--follow .g26-c-icon {
  transform: translateX(calc(-1 * var(--g26-arrow-travel, 16px))); /* 窓の左外に待機 */
}
/* leading-trim */
@supports (text-box: trim-both cap alphabetic) {
  .g26-c-showroom-item__name-inner,
  .g26-c-showroom-item__address,
  .g26-c-showroom-item__spec dt,
  .g26-c-showroom-item__spec dd {
    text-box: trim-both cap alphabetic;
  }
}
@supports not (text-box: trim-both cap alphabetic) {
  .g26-c-showroom-item__name-inner,
  .g26-c-showroom-item__address,
  .g26-c-showroom-item__spec dt,
  .g26-c-showroom-item__spec dd {
    margin-block: var(--leading-trim);
  }
}
/* hover インタラクション（ポインタ端末 + 動きを許容する設定のときのみ）*/
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .g26-c-showroom-item__media img {
    transition: transform 1s var(--g26-ease-zoom);
  }
  .g26-c-showroom-item:hover .g26-c-showroom-item__media img {
    transform: scale(var(--g26-sr-zoom)); /* 画像ズーム */
  }
  .g26-c-showroom-item__body {
    transition: opacity 0.3s ease;
  }
  .g26-c-showroom-item__arrow-icon .g26-c-icon {
    transition: transform 0.5s var(--g26-ease-arrow);
  }
  .g26-c-showroom-item__arrow-icon--follow .g26-c-icon {
    transition-delay: 75ms;
  }
  .g26-c-showroom-item:hover .g26-c-showroom-item__arrow-icon--lead .g26-c-icon {
    transform: translateX(var(--g26-arrow-travel, 16px)); /* 右へ抜ける */
  }
  .g26-c-showroom-item:hover .g26-c-showroom-item__arrow-icon--follow .g26-c-icon {
    transform: translateX(0); /* 左から中央へ */
  }
}
/* hover: テキスト群（店舗名・住所・スペック）は Opacity 70% に
  （上下スワップは廃止。Figma 90:3897 annotation / ISSUE行3）*/
@media (hover: hover) {
  .g26-c-showroom-item:hover .g26-c-showroom-item__body {
    opacity: 0.7;
  }
}
@media (width > 840px) {
  .g26-c-showroom-item {
    flex-direction: row;
    align-items: center;
    gap: var(--Spacing-64); /* PC: サムネ ⇔ 情報 ⇔ arrow（横並びは gap で制御）*/
  }
  /* SP 用の縦 margin はリセット（PC は row なので gap が担当）*/
  .g26-c-showroom-item__media + .g26-c-showroom-item__body,
  .g26-c-showroom-item__arrow {
    margin-block-start: 0;
  }
  .g26-c-showroom-item__media {
    inline-size: 384px;
    block-size: 240px;
    aspect-ratio: auto;
  }
  .g26-c-showroom-item__body {
    flex: 1 0 0;
    gap: var(--Spacing-Fixed-32); /* PC: head群 ⇔ info群 */
  }
  .g26-c-showroom-item__spec dt {
    inline-size: 4rem; /* PC: ラベル列 */
  }
  .g26-c-showroom-item__online {
    font-size: var(--TextSize-Body-XS); /* PC online = Body/XS */
  }
}
/* pages */
/*
 * g26-p-showroom — ショールーム一覧ページ
 * Figma: PC 90:3153 / SP 90:4574
 * 構成（縦順）: タイトル(page-title) → ヒーロー(全幅) → 注意(Subtleボックス)
 *   → 地域アンカーナビ(g26-c-anchor-nav 再利用) → 地域セクション(罫線区切りの店舗行)
 * 左右ガター: PC 112 / SP 24（ヒーローのみ全幅ブリード）。
 */
.g26-p-showroom {
  padding-block-end: var(--Spacing-Fixed-160); /* 最終地域 ⇔ footer。footer 自体は f-footer--2026(pt48/TOP同仕様) */
}
/* 共通ガター付きブロック */
.g26-p-showroom__head,
.g26-p-showroom__body {
  padding-inline: var(--g26-pad-x); /* PC112 / SP24 */
}
/* --- タイトル（g26-c-page-title を使用）--- */
/* page-title 自体が margin-block-start を持つ（64/40）。ここでは追加調整なし。 */
/* --- ヒーローバナー（全幅）--- */
.g26-p-showroom__hero {
  margin-block-start: var(--Spacing-Fixed-64);
  inline-size: 100%;
  aspect-ratio: 1440 / 720; /* FB61: 高さ固定をやめ、詳細ページ同様 2:1 を全幅で維持（高さは幅に追従＝リキッド）*/
  overflow: hidden;
  background-color: var(--Role-Background-Subtle); /* 画像未指定時の無地プレースホルダ */
}
.g26-p-showroom__hero img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
}
/* --- 注意書き（Subtle ボックス + bullet list）--- */
.g26-p-showroom__notice {
  margin-block-start: var(--Spacing-Fixed-80);
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-Fixed-24);
  padding-block: var(--Spacing-Fixed-48);
  padding-inline: var(--Spacing-48);
  background-color: var(--Role-Background-Subtle);
}
.g26-p-showroom__notice .g26-c-list {
  margin-block-start: 0; /* ボックス側で余白制御 */
  gap: var(--Spacing-Fixed-24); /* Figma: 注意書きの行間 24 */
  font-size: var(--TextSize-Body-M); /* 16 / SP14 */
}
/* --- 地域アンカーナビ（g26-c-anchor-nav 再利用）--- */
.g26-p-showroom__nav {
  margin-block-start: var(--Spacing-Fixed-80);
}
/* PC は 4 列で 6 地域 → 各行頭（4n+1）の区切り線を消す（行をまたぐ縦線を防ぐ）*/
@media (width > 840px) {
  .g26-p-showroom__nav.g26-c-anchor-nav {
    row-gap: var(--Spacing-Fixed-32); /* Figma(90:3768): 行ピッチ48＝項目16 + 32 */
  }
  .g26-p-showroom__nav .g26-c-anchor-nav__item:nth-child(4n + 1)::before {
    display: none;
  }
}
/* --- 地域セクション --- */
.g26-p-showroom__regions {
  margin-block-start: var(--Spacing-Fixed-160); /* 地域ナビ ⇔ 最初の地域見出し（Figma コンテナ pt160）*/
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-Fixed-200); /* 地域 ⇔ 地域（Figma: セクション間 200）*/
}
.g26-p-showroom__region-title {
  margin: 0;
  font-family: var(--Font-JP-Min);
  font-size: var(--TextSize-Heading-L); /* 32 / SP24 */
  line-height: var(--LineHeight-Heading);
  letter-spacing: var(--LetterSpacing-Default);
  color: var(--Role-Text-Primary);
}
@supports (text-box: trim-both cap alphabetic) {
  .g26-p-showroom__region-title { text-box: trim-both cap alphabetic; }
}
@supports not (text-box: trim-both cap alphabetic) {
  .g26-p-showroom__region-title { margin-block: var(--leading-trim); }
}
/* 店舗リスト: 罫線区切り */
.g26-p-showroom__list {
  margin-block-start: var(--Spacing-Fixed-64); /* 見出し ⇔ リスト */
  list-style: none;
  padding: 0;
}
.g26-p-showroom__list-item {
  padding-block: var(--Spacing-Fixed-48);
  border-block-start: 1px solid var(--Role-Border-Default);
}
.g26-p-showroom__list-item:last-child {
  border-block-end: 1px solid var(--Role-Border-Default);
}
@media (width <= 840px) {
  /* SP は footer との間隔を 80 に（PC 用の 160 は SP では過剰）。*/
  .g26-p-showroom {
    padding-block-end: var(--Spacing-Fixed-80);
  }
  /* SP ガターは Figma 24（design-system の --g26-pad-x は 20 のため上書き）*/
  .g26-p-showroom__head,
  .g26-p-showroom__body {
    padding-inline: var(--g26-pad-x);
  }
  .g26-p-showroom__hero {
    margin-block-start: var(--Spacing-Fixed-40);
    /* FB61: SP も aspect-ratio 1440:720 を継承（固定 188px を撤廃。幅に追従）*/
  }
  .g26-p-showroom__notice {
    margin-block-start: var(--Spacing-Fixed-48);
    padding: var(--Spacing-Fixed-24) var(--Spacing-16); /* Figma(128:7579): 上下24・左右16 */
  }
  .g26-p-showroom__notice .g26-c-list {
    gap: var(--Spacing-Fixed-20); /* Figma(128:7579): SP の行間 20（PC24）*/
    font-size: var(--TextSize-Body-M); /* SP14 */
  }
  .g26-p-showroom__nav {
    margin-block-start: var(--Spacing-Fixed-64);
  }
  .g26-p-showroom__regions {
    margin-block-start: var(--Spacing-Fixed-96); /* SP: ナビ ⇔ 最初の地域見出し（Figma pt96）*/
    gap: var(--Spacing-Fixed-120); /* SP: 地域 ⇔ 地域（Figma 120）*/
  }
  .g26-p-showroom__list {
    margin-block-start: var(--Spacing-Fixed-40);
  }
  .g26-p-showroom__list-item {
    padding-block: var(--Spacing-Fixed-40);
  }
}
/* FB74: アンカー遷移（地域別リンク）で見出しが固定ヘッダーに隠れて見切れるため、
   着地位置だけをヘッダー高ぶん下げる。scroll-margin は視覚的な余白を増やさないので
   「余白は持たせず見切れのみ解消」という要望に合致する（SP 66 / PC 89 はトークン側で切替）。*/
.g26-p-showroom [id^="area-"] {
  scroll-margin-block-start: var(--g26-anchor-offset);
}