/* showroom-detail リニューアル 2026 — エントリ
   ショールーム詳細（single-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;
}
/*
 * Button（Figma: Component/Link/Button）
 * pill 形。Color(default/emphasis/on-emphasis) × Size(medium/large) × Icon(arrow/blank)。
 * - Medium: 48px(SP40) / Large: 64px(SP56)
 * - アイコンは stroke=currentColor で文字色に追従
 * - 注: Figma の Large は地が #4e4d4b（= --emphasis）。Large CTA は `--large --emphasis` で組む。
 * hover（news-item / text-link と同仕様）:
 *  - テキスト: 上下スワップ（移動 + 透明度フェード + scaleY ロール）
 *  - 矢印   : __icon を overflow box にして2本で入替（右へ抜け / 左から入る・75ms遅れ・0.5s）
 *  - hover 端末かつ prefers-reduced-motion 許容時のみ発火
 */
.g26-c-button {
  /* 入替の余白（roll の間）と縦つぶし量（回転感）*/
  --g26-btn-swap-gap: 0.4em;
  --g26-btn-swap-scale: 0.7;
  display: inline-flex;
  align-items: center;
  gap: var(--Spacing-Fixed-24); /* 24（テキスト↔アイコン。左右余白と揃えて固定）*/
  min-block-size: 48px;
  padding-inline: var(--Spacing-Fixed-24) var(--Spacing-Fixed-20); /* L24 R20（固定）*/
  border-radius: 9999px;
  background-color: var(--Role-Background-Subtle); /* Default: #f1efeb */
  color: var(--Role-Text-Primary);
  font-family: var(--Font-JP-Go);
  font-size: var(--TextSize-Body-M); /* 16 / SP14 */
  line-height: var(--LineHeight-Heading);
  letter-spacing: var(--LetterSpacing-Default);
  font-feature-settings: "palt" 1; /* Figma 同様 日本語プロポーショナル詰め */
  white-space: nowrap; /* CTA ラベルは常に1行（固定幅ボタンでの折返し防止）*/
  text-decoration: none;
}
/* サイト全体の a:hover{opacity:.6}（home.css）を打ち消す。hover 演出は transform/opacity のみで表現 */
.g26-c-button:hover {
  opacity: 1;
}
/* テキスト: __text を基準に __text-inner（原本）と複製を重ねる。
   inline-flex で中身の実高にぴったり合わせる（line-height 行ボックスで縦ズレしないよう）*/
.g26-c-button__text {
  position: relative;
  display: inline-flex;
}
.g26-c-button__text-inner {
  display: inline-block;
  white-space: nowrap;
}
.g26-c-button__text-inner--clone {
  position: absolute;
  inset-block-start: calc(100% + var(--g26-btn-swap-gap));
  inset-inline-start: 0;
  opacity: 0;
  transform: scaleY(var(--g26-btn-swap-scale));
  pointer-events: none;
}
/* 矢印コンベア: __icon を overflow box（1em）にして2本を入替 */
.g26-c-button__icon {
  /* サイズは font-size（SVG=1em / 基盤は g26-c-icon.css）。色は currentColor で追従 */
  position: relative;
  overflow: hidden;
  flex: none;
  inline-size: 1em;
  block-size: 1em;
  font-size: 1rem;
}
.g26-c-button__arrow {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 100%;
  block-size: 100%;
}
.g26-c-button__arrow--follow {
  transform: translateX(-100%); /* 左外に待機 */
}
/* leading-trim（Figma の text-box-trim）*/
@supports (text-box: trim-both cap alphabetic) {
  .g26-c-button__text-inner { text-box: trim-both cap alphabetic; }
}
@supports not (text-box: trim-both cap alphabetic) {
  .g26-c-button__text-inner { margin-block: var(--leading-trim); }
}
/* hover: テキストの上下スワップは廃止し、背景色を変更（ISSUE行3 の全体hover方針）
   #F1EFEB(Default)→#E7E4DF / #FFF(on-emphasis)→#E7E4DF / #4E4D4B(emphasis)→#64615D */
@media (hover: hover) {
  .g26-c-button:hover {
    background-color: #e7e4df;
  }
  .g26-c-button--emphasis:hover {
    background-color: #64615d;
  }
}
/* hover インタラクション（ポインタ端末 + 動きを許容する設定のときのみ）*/
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .g26-c-button {
    transition: background-color 0.3s ease;
  }
  .g26-c-button__arrow {
    transition: transform 0.5s var(--g26-ease-arrow);
  }
  .g26-c-button__arrow--follow {
    transition-delay: 75ms;
  }
  .g26-c-button:hover .g26-c-button__arrow--lead {
    transform: translateX(100%); /* 右へ抜ける */
  }
  .g26-c-button:hover .g26-c-button__arrow--follow {
    transform: translateX(0); /* 左から中央へ */
  }
}
/* Color */
.g26-c-button--emphasis {
  background-color: var(--Role-Background-Emphasis); /* #4e4d4b */
  color: var(--Role-Text-onEmphasis); /* #fff */
}
.g26-c-button--on-emphasis {
  background-color: var(--Role-Background-Default); /* #fff（濃色面で使用）*/
  color: var(--Role-Text-Primary);
}
/* Size: Large */
.g26-c-button--large {
  gap: var(--Spacing-Fixed-40);
  min-block-size: 64px;
  padding-inline: var(--Spacing-Fixed-40) var(--Spacing-Fixed-32); /* L40 R32（固定）*/
  font-size: var(--TextSize-Body-L); /* 18 / SP16 */
}
@media (width <= 840px) {
  .g26-c-button {
    gap: var(--Spacing-Fixed-20);
    min-block-size: 40px;
    padding-inline: var(--Spacing-Fixed-20) var(--Spacing-Fixed-16); /* L20 R16（固定）*/
  }
  .g26-c-button__icon {
    font-size: 0.875rem;
  }
  .g26-c-button--large {
    gap: var(--Spacing-Fixed-24);
    min-block-size: 56px;
    padding-inline: var(--Spacing-Fixed-32) var(--Spacing-Fixed-24); /* L32 R24（固定）*/
  }
}
/*
 * g26-c-button-outline — 枠線ピルボタン（中央テキスト・アイコン無し）
 * Figma: Button/PC (132:8707) ほか。ショールーム詳細の予約CTA等。
 * 既存 g26-c-button（塗り・アイコン付き）とは別系統。
 * 幅は文脈側で指定（既定はコンテンツ幅）。テキストは左寄せ（Figma: text は flex-1 で左詰め）。
 * <a> でも <button> でも可。
 *  - PC: h40 / px24 / Body-S
 *  - SP: h44 / px16
 * hover: テキスト上下スワップ（移動 + フェード + scaleY ロール）。矢印は無いので入替なし。
 *  - hover 端末かつ prefers-reduced-motion 許容時のみ発火。複数行（<br>）でも縦ズレしない block 複製。
 */
.g26-c-button-outline {
  /* テキスト入替の余白（roll の間）と縦つぶし量（回転感）*/
  --g26-bo-swap-gap: 0.4em;
  --g26-bo-swap-scale: 0.7;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start; /* 左寄せ */
  box-sizing: border-box;
  overflow: hidden; /* スワップするテキストをピル内にマスク（はみ出しを隠す）*/
  min-block-size: 40px;
  padding-inline: var(--Spacing-24);
  border: 1px solid var(--Role-Border-Strong);
  border-radius: 30px;
  background: transparent;
  cursor: pointer;
  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-Primary);
  text-align: left;
  text-decoration: none;
}
/* サイト全体の a:hover{opacity:.6}（home.css）と従来の暫定 0.7 を打ち消す */
.g26-c-button-outline:hover {
  opacity: 1;
}
/* hover: 背景色を #E7E4DF に（テキスト上下スワップは廃止。Figma 97:6128 / ISSUE行3）*/
@media (hover: hover) {
  .g26-c-button-outline:hover {
    background-color: #e7e4df;
  }
}
/* テキスト: __text を基準に __text-inner（原本）と複製を重ねる（block で複数行も縦ズレ防止）*/
.g26-c-button-outline__text {
  position: relative;
  display: flex;
  min-inline-size: 0;
}
.g26-c-button-outline__text-inner {
  display: block;
}
.g26-c-button-outline__text-inner--clone {
  position: absolute;
  inset-block-start: calc(100% + var(--g26-bo-swap-gap));
  inset-inline-start: 0;
  inline-size: 100%;
  opacity: 0;
  transform: scaleY(var(--g26-bo-swap-scale));
  pointer-events: none;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .g26-c-button-outline {
    transition: background-color 0.3s ease;
  }
}
@media (width <= 840px) {
  .g26-c-button-outline {
    min-block-size: 44px;
    padding-inline: var(--Spacing-16);
  }
}
/*
 * 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;
  }
}
/*
 * TextLink（Figma: Component/Link/TextLink）
 * リンクテキスト + LinkIcon バッジ。Color: Default / --on-emphasis（文字を白に）。
 * gap 16（SP 12）、本文 16/14。
 * hover（news-item と同仕様）:
 *  - テキスト: 上下スワップ（移動 + 透明度フェード + scaleY ロール）
 *  - 矢印   : LinkIcon(pill) 内で 1本目が右へ抜け、2本目が左から入る（duration 0.5s / 2本目 delay 75ms）
 *  - hover 端末かつ prefers-reduced-motion 許容時のみ発火
 */
.g26-c-text-link {
  /* 入替の余白（roll の間）と縦つぶし量（回転感）*/
  --g26-tl-swap-gap: 0.4em;
  --g26-tl-swap-scale: 0.7;
  display: inline-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;
}
.g26-c-text-link--on-emphasis {
  color: var(--Role-Text-onEmphasis); /* 文字色（バッジは link-icon 側で制御）*/
}
/* --back: 「戻る/前へ」リンク。text-link の逆向き（アイコンを左・矢印を左向き・コンベアも左方向）。*/
.g26-c-text-link--back {
  flex-direction: row-reverse; /* アイコンを左に */
  /* 幅が伸びる文脈（sidebar の flex-column stretch 等）でも左パックにする
     （row-reverse では flex-end が視覚的な左）*/
  justify-content: flex-end;
}
/* --back の反転は、アニメーションする .g26-c-icon ではなく動かない「窓」に scaleX(-1) を掛ける。
   アイコン側は hover で translateX する。同じ要素に反転を置くと transform ごと上書きされて
   反転が外れ、hover で矢印が右向きに戻ってしまう。窓を反転すれば内側の translate も鏡像になり、
   base（順方向）の移動ルールをそのまま流用できる（コンベアが自動で左方向になる）。*/
.g26-c-text-link--back .g26-c-text-link__arrow {
  transform: scaleX(-1); /* 矢印を左向きに＋内側の移動方向も鏡像化 */
}
/* サイト全体の a:hover{opacity:.6}（home.css）を打ち消す。hover 演出は transform/opacity のみで表現 */
.g26-c-text-link:hover {
  opacity: 1;
}
/* テキスト: __text を基準に __text-inner（原本）と複製を重ねる。
   inline-flex で中身の実高にぴったり合わせる（inline-block だと line-height ぶんの行ボックスが付き、
   クローンの top:100% と translateY(実高) がズレるため）。*/
.g26-c-text-link__text {
  position: relative;
  display: inline-flex;
}
.g26-c-text-link__text-inner {
  display: inline-block;
  white-space: nowrap;
}
/* 複製: 1行ぶん + 余白だけ下に、縦つぶし・不可視で待機 */
.g26-c-text-link__text-inner--clone {
  position: absolute;
  inset-block-start: calc(100% + var(--g26-tl-swap-gap));
  inset-inline-start: 0;
  opacity: 0;
  transform: scaleY(var(--g26-tl-swap-scale));
  pointer-events: none;
}
/* 矢印コンベア: LinkIcon(pill) を overflow box にして2本を入替（text-link 配下のみ）*/
.g26-c-text-link .g26-c-link-icon {
  position: relative;
  overflow: hidden;
}
/* 矢印の可動窓: ピル全幅ではなくアイコン幅相当（--g26-arrow-travel）でクリップし、
   移動距離をボタンと揃える（ISSUE行3 FB）。動くのは窓内の svg */
.g26-c-text-link__arrow {
  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-text-link__arrow--follow .g26-c-icon {
  transform: translateX(calc(-1 * var(--g26-arrow-travel, 16px))); /* 窓の左外に待機（--back は窓が反転済みなので視覚的には右外）*/
}
/* leading-trim: Figma の cap-baseline 基準に合わせ、バッジと光学的に中央を揃える。
   対応(Chrome133+/Safari18.2+): text-box / 非対応(Firefox等): margin-block 近似 */
@supports not (text-box: trim-both cap alphabetic) {
  .g26-c-text-link__text-inner {
    margin-block: var(--leading-trim);
  }
}
@supports (text-box: trim-both cap alphabetic) {
  .g26-c-text-link__text-inner {
    text-box: trim-both cap alphabetic;
  }
}
/* hover: テキストは Opacity 70% に（上下スワップは廃止。ISSUE行3 の全体hover方針）*/
@media (hover: hover) {
  .g26-c-text-link:hover .g26-c-text-link__text {
    opacity: 0.7;
  }
}
/* hover インタラクション（ポインタ端末 + 動きを許容する設定のときのみ）*/
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .g26-c-text-link__text {
    transition: opacity 0.3s ease;
  }
  .g26-c-text-link__arrow .g26-c-icon {
    transition: transform 0.5s var(--g26-ease-arrow);
  }
  .g26-c-text-link__arrow--follow .g26-c-icon {
    transition-delay: 75ms;
  }
  .g26-c-text-link:hover .g26-c-text-link__arrow--lead .g26-c-icon {
    transform: translateX(var(--g26-arrow-travel, 16px)); /* 右へ抜ける */
  }
  .g26-c-text-link:hover .g26-c-text-link__arrow--follow .g26-c-icon {
    transform: translateX(0); /* 左から中央へ（--back は窓の反転で右から中央へ）*/
  }
}
@media (width <= 840px) {
  .g26-c-text-link {
    gap: var(--Spacing-12);
  }
}
/*
 * g26-c-anchor-link — ダッシュ付きアンカーリンク（ページ内ジャンプ等）
 * Figma: ショールーム詳細 サイドバーのナビ項目（220:2928/2929）。
 * 16px 列の中央に 8px の横線（ダッシュ）+ gap8 + テキスト。
 * リストの並び（縦/2列）や gap は使う側で指定。
 * leading-trim はテキスト(__text)に適用。
 */
.g26-c-anchor-link {
  display: inline-flex;
  align-items: center;
  gap: var(--Spacing-8);
  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-Primary);
  text-decoration: none;
}
.g26-c-anchor-link::before {
  content: "";
  flex: none;
  inline-size: 16px;
  block-size: 12px;
  background: linear-gradient(var(--Role-Icon-Default), var(--Role-Icon-Default)) no-repeat center / 8px 1px;
}
/* leading-trim（Figma の text-box-trim:both / cap-alphabetic）*/
@supports (text-box: trim-both cap alphabetic) {
  .g26-c-anchor-link__text { text-box: trim-both cap alphabetic; }
}
@supports not (text-box: trim-both cap alphabetic) {
  .g26-c-anchor-link__text { margin-block: var(--leading-trim); }
}
/* hover: テキストのみ Opacity 70%（冒頭のダッシュは除く。Figma 97:6129 / ISSUE行55）*/
/* サイト全体の a:hover{opacity:.5}（common.css）を打ち消す（重なると 0.5×0.7 に薄まる）*/
.g26-c-anchor-link:hover {
  opacity: 1;
}
@media (hover: hover) {
  .g26-c-anchor-link:hover .g26-c-anchor-link__text {
    opacity: 0.7;
  }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .g26-c-anchor-link__text {
    transition: opacity 0.3s ease;
  }
}
/*
 * g26-c-link — 本文中インラインのテキストリンク（下線）。
 * 色は文脈を継承（note 内＝secondary / 本文＝primary 等、置いた場所の色に追従）。
 * Figma: 下線 solid・text-underline-position/thickness は from-font（和文で自然な位置・太さ）。
 *
 * 例: ……は<a href="…" class="g26-c-link" target="_blank" rel="noopener">こちら</a>のサイトより…
 */
.g26-c-link {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-thickness: from-font;
  text-underline-position: from-font;
  transition: opacity var(--g26-duration) var(--g26-ease);
}
.g26-c-link:hover {
  opacity: 0.7;
}
/*
 * 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); }
}
/*
 * 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; }
}
/*
 * g26-c-radio — ラジオ（○ + ラベル）。<label class="g26-c-radio"> で input + ラベルを内包。
 * Figma: 円12px / 枠 Role/Border/Strong / 選択時 Role/Text/Primary 塗り / ラベル Body-M 150%。
 *
 * 例:
 *   <label class="g26-c-radio">
 *     <input type="radio" class="g26-c-radio__input" name="..." value="...">
 *     <span class="g26-c-radio__label">ラベル</span>
 *   </label>
 */
.g26-c-radio {
  display: inline-flex;
  align-items: center;
  gap: var(--Spacing-8);
  cursor: pointer;
}
/* ○（ネイティブ外観を消して自前描画）*/
.g26-c-radio__input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  inline-size: 12px;
  block-size: 12px;
  margin: 0;
  border: 1px solid var(--Role-Border-Strong);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: border-color var(--g26-duration) var(--g26-ease);
}
.g26-c-radio__input:checked {
  border-color: var(--Role-Text-Primary);
  background: radial-gradient(var(--Role-Text-Primary) 0 45%, transparent 50%);
}
.g26-c-radio__input:focus-visible {
  outline: 2px solid var(--Role-Text-Primary);
  outline-offset: 2px;
}
/* ラベル（Body-M 150%）*/
.g26-c-radio__label {
  font-size: var(--TextSize-Body-M);
  line-height: var(--LineHeight-Body-150);
  color: var(--Role-Text-Primary);
  white-space: nowrap;
}
/* leading-trim（Figma の text-box-trim）*/
@supports (text-box: trim-both cap alphabetic) {
  .g26-c-radio__label { text-box: trim-both cap alphabetic; }
}
@supports not (text-box: trim-both cap alphabetic) {
  .g26-c-radio__label { margin-block: var(--leading-trim); }
}
/*
 * 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; }
}
/*
 * g26-c-modal — 汎用モーダル。
 * 全画面オーバーレイ（50%黒）+ 中身を中央配置。中身は任意のコンポーネントを差し込む。
 * 画面（縦）に入りきらない時はオーバーレイがスクロール（上下の余白を保ったまま）。
 * 開閉は [hidden] 属性で行う（JS）。閉じるボタンは右上固定。
 * Figma: 展示モーダル PC 190:4022 / SP 190:4032（背景 rgba(0,0,0,.5) / py48 / SP px24 py64）。
 */
.g26-c-modal {
  --g26-modal-fade-in: 0.45s;  /* open（ゆったりめ）*/
  --g26-modal-fade-out: 0.3s;  /* close */
  position: fixed;
  inset: 0;
  z-index: 1000; /* ヘッダー固定(.is-gray-nav)より上 */
  display: flex;
  overflow-y: auto;            /* 縦に溢れたらスクロール */
  padding-block: var(--Spacing-Fixed-48);
  padding-inline: calc(24 * var(--g26-u));
  background-color: rgba(0, 0, 0, 0.5);
  overscroll-behavior: contain;
  /* open/close フェード。[hidden]（display:none）切替でも効くよう display を
     allow-discrete でトランジションし、入場の初期値は @starting-style で与える。
     未対応ブラウザは即時表示（フェード無し）にフォールバック。*/
  opacity: 1;
  /* 開く側（→ 表示状態）の transition。ゆったりめ */
  transition:
    opacity var(--g26-modal-fade-in) var(--g26-ease),
    display var(--g26-modal-fade-in) allow-discrete;
}
.g26-c-modal[hidden] {
  display: none;
  opacity: 0;
  pointer-events: none;
  /* 閉じる側（→ hidden）の transition。open とは別時間に */
  transition:
    opacity var(--g26-modal-fade-out) var(--g26-ease),
    display var(--g26-modal-fade-out) allow-discrete;
}
/* 入場時の初期状態（hidden → 表示 への遷移開始値）*/
@starting-style {
  .g26-c-modal:not([hidden]) {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .g26-c-modal { transition: none; }
}
/* 中身（白ボックス）。margin:auto で中央。溢れる時は上端から並びスクロール可。
   閉じるボタンの基準（position:relative）。*/
.g26-c-modal__dialog {
  position: relative;
  margin: auto;
  inline-size: 800px;
  max-inline-size: 100%;
}
/* 閉じる（モーダル起点で右上）。Figma: dialog の右・外側、上端の高さ（オーバーレイ上＝白）。
   PC は dialog 右外側 / SP は幅が無いので dialog の上・右端揃えにフォールバック。*/
.g26-c-modal__close {
  position: absolute;
  inset-block-start: 0;                      /* dialog の上端に揃える */
  inset-inline-start: calc(100% + calc(24 * var(--g26-u)));  /* dialog の右・外側 24px */
  inline-size: 32px;
  block-size: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--Role-Text-onEmphasis); /* 白 */
  cursor: pointer;
  transition: opacity var(--g26-duration) var(--g26-ease);
}
.g26-c-modal__close:hover { opacity: 0.7; }
.g26-c-modal__close svg { inline-size: 100%; block-size: 100%; display: block; }
@media (width <= 840px) {
  .g26-c-modal { padding-block: var(--Spacing-Fixed-64); padding-inline: var(--Spacing-Fixed-24); }
  /* SP: dialog 右外側に余白が無いため、上・右端揃え（オーバーレイ上）*/
  .g26-c-modal__close {
    inset-block-start: auto;
    inset-inline-start: auto;
    inset-block-end: calc(100% + var(--Spacing-Fixed-8));
    inset-inline-end: 0;
    inline-size: 24px;
    block-size: 24px;
  }
}
/*
 * g26-c-exhibition-modal — 展示ブースのモーダル中身（白ボックス）。g26-c-modal に差し込む。
 * 画像 + ブース/レイアウト/カラー(チップ)。
 * Figma: PC 190:4024（w800 / px72 py64 / gap32）/ SP 190:4033（full / px32 pt32 pb48 / gap24）。
 */
.g26-c-exhibition-modal {
  box-sizing: border-box; /* padding 込み幅（dialog 幅にフィット）*/
  inline-size: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--Spacing-Fixed-32);
  padding: var(--Spacing-Fixed-64) 4.5rem var(--Spacing-Fixed-32); /* Figma 190:4024: pt64 / px72 / pb32（ISSUE行52 FB で下余白を是正）。FB77: 左右はリキッドをやめ固定 72 */
  background-color: var(--Role-Background-Default);
  overflow: clip;
}
.g26-c-exhibition-modal[hidden] { display: none; }
/* パネル切替（前後のブースへ移動）は opacity でクロスフェード（ISSUE行39 FB）。
   白背景はラッパー（__modals）が持ち、フェード中も白い箱は不透明のまま中身だけが入れ替わる。
   全パネルを同一グリッドセル(1/1)に重ねることで、モーダルの高さが常に「最大パネル高」で
   一定になり、切替時に高さがガタつかない。hidden の display:none は打ち消し、
   visibility で操作対象・支援技術から外す。 */
.g26-c-exhibition-modals {
  display: grid;
  align-items: start; /* 各パネルは自然高のまま重ねる（高さはラッパーを JS で追従）*/
  background-color: var(--Role-Background-Default); /* 白背景はここで一括 */
  overflow: hidden;
  /* 切替時はアクティブパネルの自然高へ JS が height を更新 → 白帯を出さず滑らかに追従（ISSUE行52 FB）*/
  transition: height 0.8s var(--g26-ease);
}
@media (prefers-reduced-motion: reduce) {
  .g26-c-exhibition-modals { transition: none; }
}
.g26-c-exhibition-modals > .g26-c-exhibition-modal {
  grid-area: 1 / 1;
  background-color: transparent; /* 白はラッパーに委譲 */
  opacity: 1;
  visibility: visible;
  transition: opacity 0.8s var(--g26-ease), visibility 0s 0s;
}
.g26-c-exhibition-modals > .g26-c-exhibition-modal[hidden] {
  display: flex; /* セルに留めてクロスフェード（高さにも寄与させ、最大高を維持）*/
  opacity: 0;
  visibility: hidden; /* フォーカス・支援技術から除外 */
  pointer-events: none;
  transition: opacity 0.8s var(--g26-ease), visibility 0s 0.8s; /* 消える側はフェード完了後に不可視化 */
}
@media (prefers-reduced-motion: reduce) {
  .g26-c-exhibition-modals > .g26-c-exhibition-modal { transition: none; }
}
.g26-c-exhibition-modal__image {
  inline-size: 100%;
  aspect-ratio: 160 / 100;
  overflow: hidden;
  background-color: var(--Role-Background-Subtle);
}
.g26-c-exhibition-modal__image img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
/* ブース/レイアウト/カラー（ラベル + 値）。Figma(190:4055): gap8、ラベル Bold w80、テキスト Body/S(14)。
   ※ISSUE行39 の改訂デザインで PC は Body-M(16)→Body-S(14) に縮小 */
.g26-c-exhibition-modal__info {
  inline-size: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-Fixed-8);
  font-family: var(--Font-JP-Go);
  font-size: var(--TextSize-Body-S);
  line-height: var(--LineHeight-Body-175);
  letter-spacing: var(--LetterSpacing-Default);
  color: var(--Role-Text-Primary);
}
.g26-c-exhibition-modal__row {
  display: flex;
  gap: var(--Spacing-16);
  align-items: baseline;
}
.g26-c-exhibition-modal__row dt {
  flex: none;
  inline-size: 5rem; /* Figma(190:4057): w80 */
  margin: 0;
  padding-block: var(--Spacing-Fixed-8); /* 値（chip 等）と高さを揃えるための微調整 */
  font-weight: 600; /* Bold */
}
.g26-c-exhibition-modal__row dd {
  flex: 1 0 0;
  min-inline-size: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: var(--Spacing-Fixed-4);
  column-gap: var(--Spacing-4);
}
/* チップ（Figma: border d8d4ce / radius2 / p8 / Body-M）。複数（カラー）は wrap。
   箱は chip（padding/border）、中身テキストは内側 span に分離し、span 側で leading-trim する
   （padding を保ったまま文字の上下アキだけ詰める）。*/
.g26-c-exhibition-modal__chip {
  display: inline-flex;
  align-items: center;
  padding-block: var(--Spacing-Fixed-8);
  padding-inline: calc(8 * var(--g26-u));
  border: 1px solid var(--Role-Border-Default);
  border-radius: 2px;
  font-size: var(--TextSize-Body-S); /* Figma(190:4084): Body/S（PC14）*/
  line-height: 1;
}
.g26-c-exhibition-modal__chip > span { display: block; }
/* ブース切替ページャー（Figma 718:2567: ←ピル48×24 / n/総数(EN 12) / →ピル。右寄せ。ISSUE行39）*/
.g26-c-exhibition-modal__pager {
  inline-size: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--Spacing-16);
}
.g26-c-exhibition-modal__count {
  margin: 0;
  font-family: var(--Font-EN);
  font-size: var(--TextSize-Body-XS); /* 12 */
  line-height: var(--LineHeight-Heading);
  letter-spacing: var(--LetterSpacing-Default);
  color: var(--Role-Text-Primary);
}
.g26-c-exhibition-modal__nav {
  appearance: none;
  border: 0;
  cursor: pointer;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 3rem;
  block-size: 1.5rem;
  border-radius: 30px;
  background-color: var(--Role-Background-Subtle);
  color: var(--Role-Icon-Default);
}
.g26-c-exhibition-modal__nav::before {
  content: ""; /* 見た目24px のまま当たり判定を44px 確保 */
  position: absolute;
  inset: -10px; /* 当たり判定は固定 */
}
/* 矢印コンベア: __nav-icon を overflow 窓（アイコン14px）にして2本で入替。
   prev は窓を scaleX(-1) 反転して「左向き＋コンベアも左方向」に（sprite は arrow-right のみ）*/
.g26-c-exhibition-modal__nav-icon {
  position: relative;
  overflow: hidden;
  inline-size: 14px;
  block-size: 14px;
}
.g26-c-exhibition-modal__nav--prev .g26-c-exhibition-modal__nav-icon {
  transform: scaleX(-1);
}
.g26-c-exhibition-modal__nav-arrow {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.g26-c-exhibition-modal__nav-arrow .g26-c-icon {
  inline-size: 100%;
  block-size: 100%;
}
.g26-c-exhibition-modal__nav-arrow--follow {
  transform: translateX(-100%); /* 左外に待機 */
}
.g26-c-exhibition-modal__nav[disabled] {
  cursor: default;
  opacity: 0.4; /* 端では薄く（Figma 1/6 時の ← 表現）*/
}
.g26-c-exhibition-modal__nav[disabled]::before { display: none; }
/* hover: 地(Subtle #f1efeb)→#E7E4DF（g26-c-button と同仕様・ISSUE行3 の全体hover方針）。disabled は除外 */
@media (hover: hover) {
  .g26-c-exhibition-modal__nav:not([disabled]):hover {
    background-color: #e7e4df;
  }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .g26-c-exhibition-modal__nav {
    transition: background-color 0.3s ease;
  }
  /* 矢印コンベア（lead=当該方向へ抜け / follow=反対から入る・75ms遅れ・0.5s）。prev は窓反転で左方向 */
  .g26-c-exhibition-modal__nav-arrow {
    transition: transform 0.5s var(--g26-ease-arrow);
  }
  .g26-c-exhibition-modal__nav-arrow--follow {
    transition-delay: 75ms;
  }
  .g26-c-exhibition-modal__nav:not([disabled]):hover .g26-c-exhibition-modal__nav-arrow--lead {
    transform: translateX(100%); /* 抜ける（prev は窓反転で視覚的に左へ）*/
  }
  .g26-c-exhibition-modal__nav:not([disabled]):hover .g26-c-exhibition-modal__nav-arrow--follow {
    transform: translateX(0); /* 反対から中央へ */
  }
}
/* leading-trim（ラベル/値のテキスト。チップは中身 span を対象に）*/
@supports (text-box: trim-both cap alphabetic) {
  .g26-c-exhibition-modal__row dt,
  .g26-c-exhibition-modal__booth-value,
  .g26-c-exhibition-modal__chip > span { text-box: trim-both cap alphabetic; }
}
@media (width <= 840px) {
  .g26-c-exhibition-modal {
    inline-size: 100%;
    gap: var(--Spacing-Fixed-24);
    /* Figma 190:4033: pt32 / px32 / pb24（ISSUE行52 FB）。
       FB77(2回目): PC だけ固定化して SP のここを直し忘れていた（左右のみリキッドのまま）*/
    padding: var(--Spacing-Fixed-32) var(--Spacing-Fixed-32) var(--Spacing-Fixed-24);
  }
  /* Figma 190:4033: 情報 ⇔ ページャー = 48（画像⇔情報の24より広い）*/
  .g26-c-exhibition-modal__pager {
    margin-block-start: var(--Spacing-Fixed-24); /* gap24 + 24 = 48 */
    gap: var(--Spacing-12); /* ボタン⇔カウンター 12 */
  }
  /* Figma 190:4033: SP のページャーボタンは 40×20・アイコン12 */
  .g26-c-exhibition-modal__nav {
    inline-size: 2.5rem;
    block-size: 1.25rem;
  }
  .g26-c-exhibition-modal__nav-icon {
    inline-size: 12px;
    block-size: 12px;
  }
  .g26-c-exhibition-modal__info { gap: var(--Spacing-Fixed-16); font-size: var(--TextSize-Body-S); }
  .g26-c-exhibition-modal__row { gap: var(--Spacing-8); }
  .g26-c-exhibition-modal__row dt { inline-size: 4rem; padding-block: 0.375rem; }
  .g26-c-exhibition-modal__chip { padding: 0.375rem; font-size: var(--TextSize-Body-S); }
}
/*
 * g26-c-visit-notice-modal — 「ご来店時のお願い」モーダル中身（白ボックス）。g26-c-modal に差し込む。
 * 見出し(JP-Min) + 本文(Body/M 200%) + ※注釈(g26-c-notes 再利用) + CTA(g26-c-button--emphasis 再利用)。
 * Figma: PC 144:10725（w800 / px72 py80 / gap64）/ SP 144:11126（full / px32 py48 / gap48）。
 */
.g26-c-visit-notice-modal {
  box-sizing: border-box; /* padding 込み幅（dialog 幅にフィット）*/
  inline-size: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--Spacing-Fixed-64);
  padding: var(--Spacing-Fixed-80) 4.5rem; /* FB77: 左右はリキッドをやめ固定 72（SP は下で 32 固定）*/
  background-color: var(--Role-Background-Default);
  overflow: clip;
  font-feature-settings: "palt" 1; /* Figma 同様 日本語プロポーショナル詰め */
  letter-spacing: var(--LetterSpacing-Default);
  word-break: break-word;
}
.g26-c-visit-notice-modal[hidden] { display: none; }
/* パネル切替（display:flex が UA hidden を上書きするため明示）*/
/* 見出し（左寄せ・w-full）。Figma: Heading/M（PC28/SP20）JP-Min・lh1.5 */
.g26-c-visit-notice-modal__title {
  inline-size: 100%;
  margin: 0;
  font-family: var(--Font-JP-Min);
  font-size: var(--TextSize-Heading-M);
  line-height: var(--LineHeight-Heading);
  color: var(--Role-Text-Primary);
}
/* 本文 + 注釈 + CTA のまとまり。Figma: gap48（SP40）*/
.g26-c-visit-notice-modal__body {
  inline-size: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--Spacing-Fixed-48);
}
/* 本文 + 注釈。Figma: gap24（SP20）*/
.g26-c-visit-notice-modal__lead {
  inline-size: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-Fixed-24);
  font-family: var(--Font-JP-Go);
}
/* 本文。Figma: Body/M 200%（PC16/SP14）lh2・primary */
.g26-c-visit-notice-modal__text {
  inline-size: 100%;
  margin: 0;
  font-size: var(--TextSize-Body-M);
  line-height: var(--LineHeight-Body-200);
  color: var(--Role-Text-Primary);
}
/* 注釈は g26-c-notes を再利用。本モーダルでは親 gap が間隔を持つので上マージンは殺す */
.g26-c-visit-notice-modal .g26-c-notes { margin-block-start: 0; }
/* leading-trim（見出し・本文。注釈/CTA は各コンポーネント側で対応済み）*/
@supports (text-box: trim-both cap alphabetic) {
  .g26-c-visit-notice-modal__title,
  .g26-c-visit-notice-modal__text { text-box: trim-both cap alphabetic; }
}
@supports not (text-box: trim-both cap alphabetic) {
  .g26-c-visit-notice-modal__title,
  .g26-c-visit-notice-modal__text { margin-block: var(--leading-trim); }
}
@media (width <= 840px) {
  .g26-c-visit-notice-modal {
    gap: var(--Spacing-Fixed-48);
    /* FB77(2回目): PC だけ固定化して SP のここを直し忘れていた（左右のみリキッドのまま）*/
    padding: var(--Spacing-Fixed-48) var(--Spacing-Fixed-32);
  }
  .g26-c-visit-notice-modal__body { gap: var(--Spacing-Fixed-40); }
  .g26-c-visit-notice-modal__lead { gap: var(--Spacing-Fixed-20); }
}
/*
 * g26-c-reservation-modal — ご来店予約フォーム（白ボックス）。g26-c-modal に差し込む。
 * ロゴ + タイトル + Q1/Q2(ラジオ) + 改装スケジュール note + CTA(外部予約URL) + ※キッチンハウス注釈。
 * Figma: PC 144:10675（w800 / px72 py80 / gap80）/ SP 144:11073（full / px32 py48 / gap48）。
 */
.g26-c-reservation-modal {
  box-sizing: border-box; /* padding 込み幅（dialog 幅にフィット）*/
  inline-size: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--Spacing-Fixed-80);
  padding: var(--Spacing-Fixed-80) 4.5rem; /* FB77: 左右はリキッドをやめ固定 72（SP は下で 32 固定）*/
  background-color: var(--Role-Background-Default);
  overflow: clip;
  font-feature-settings: "palt" 1;
  letter-spacing: var(--LetterSpacing-Default);
  word-break: break-word;
}
.g26-c-reservation-modal[hidden] { display: none; }
/* パネル切替（display:flex が UA hidden を上書きするため明示）*/
/* ヘッダ（ロゴ + タイトル）。Figma: gap24（SP20）*/
.g26-c-reservation-modal__head {
  inline-size: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--Spacing-Fixed-24);
}
/* logo.svg は白版のため、白背景上では brightness(0) で黒へ転換（Figma 361-2524 = 黒）*/
.g26-c-reservation-modal__logo { display: block; inline-size: 7.5rem; block-size: auto; filter: brightness(0); }
.g26-c-reservation-modal__title {
  inline-size: 100%;
  margin: 0;
  font-family: var(--Font-JP-Min);
  font-size: var(--TextSize-Heading-M);
  line-height: var(--LineHeight-Heading);
  color: var(--Role-Text-Primary);
}
/* 本体（質問群 + CTA群）。Figma: gap48（SP40）*/
.g26-c-reservation-modal__body {
  inline-size: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--Spacing-Fixed-48);
}
/* 質問グループ。Figma: gap24（SP20）。ラベル(Bold175) + 選択肢 */
.g26-c-reservation-modal__group {
  inline-size: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--Spacing-Fixed-24);
  font-family: var(--Font-JP-Go);
}
.g26-c-reservation-modal__q {
  inline-size: 100%;
  margin: 0;
  font-weight: 600; /* Bold */
  font-size: var(--TextSize-Body-M);
  line-height: var(--LineHeight-Body-175);
  color: var(--Role-Text-Primary);
}
/* 選択肢の並び（ラジオ自体は g26-c-radio コンポーネント）。Figma: PC=横並び(gap48) / SP=縦並び(gap20) */
.g26-c-reservation-modal__options {
  inline-size: 100%;
  display: flex;
  flex-wrap: wrap;
  row-gap: var(--Spacing-Fixed-48);
  column-gap: var(--Spacing-48);
}
/* 改装スケジュール note（bg subtle）。Figma: p24 gap32 Body-S175（SP p16 gap24 Body-S12）*/
.g26-c-reservation-modal__schedule {
  inline-size: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--Spacing-Fixed-32);
  padding-block: var(--Spacing-Fixed-24);
  padding-inline: calc(24 * var(--g26-u));
  background-color: var(--Role-Background-Subtle);
  font-family: var(--Font-JP-Go);
  font-size: var(--TextSize-Body-S);
  line-height: var(--LineHeight-Body-175);
  color: var(--Role-Text-Primary);
}
.g26-c-reservation-modal__schedule p { inline-size: 100%; margin: 0; }
/* 改築（戸建て/マンション）選択時のみ表示（ISSUE行41）。display:flex が UA の [hidden] に勝つため明示 */
.g26-c-reservation-modal__schedule[hidden] { display: none; }
/* CTA群（ボタン + ※注釈）。Figma: gap24 */
.g26-c-reservation-modal__cta {
  inline-size: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--Spacing-Fixed-24);
}
.g26-c-reservation-modal .g26-c-notes { margin-block-start: 0; }
/* 未選択クリック時のエラー（Figma 静的には無い・機能要件）*/
.g26-c-reservation-modal__error {
  margin: 0;
  font-family: var(--Font-JP-Go);
  font-size: var(--TextSize-Body-S);
  line-height: var(--LineHeight-Body-150);
  color: var(--Role-Text-Caution);
}
.g26-c-reservation-modal__error[hidden] { display: none; }
/* leading-trim */
@supports (text-box: trim-both cap alphabetic) {
  .g26-c-reservation-modal__title,
  .g26-c-reservation-modal__q,
  .g26-c-reservation-modal__schedule p { text-box: trim-both cap alphabetic; }
}
@supports not (text-box: trim-both cap alphabetic) {
  .g26-c-reservation-modal__title,
  .g26-c-reservation-modal__q,
  .g26-c-reservation-modal__schedule p { margin-block: var(--leading-trim); }
}
@media (width <= 840px) {
  .g26-c-reservation-modal { gap: var(--Spacing-Fixed-48); padding: var(--Spacing-Fixed-48) var(--Spacing-Fixed-32); }
  .g26-c-reservation-modal__head { gap: var(--Spacing-Fixed-20); }
  .g26-c-reservation-modal__logo { inline-size: 6.25rem; }
  .g26-c-reservation-modal__body { gap: var(--Spacing-Fixed-40); }
  .g26-c-reservation-modal__group { gap: var(--Spacing-Fixed-20); }
  .g26-c-reservation-modal__options { flex-direction: column; gap: var(--Spacing-Fixed-20); }
  .g26-c-reservation-modal__schedule { gap: var(--Spacing-Fixed-24); padding: var(--Spacing-Fixed-16); }
}
/* pages */
/*
 * g26-p-showroom-detail — ショールーム詳細ページ
 * Figma: PC 97:5535 / SP 128:7667
 * 構成: パンくず → ヒーロー(全幅・カルーセル) → 2カラム(左sticky サイドバー / 右本文セクション群)
 *  - PC: 左 280 sticky(上80追従) + 右 800、列間 136
 *  - SP: 縦積み（ボタン+アンカーナビ → 本文セクション → 一覧に戻る）。住所は基本情報内。
 */
/* ===== ページタイトル（H1: 店舗名 + 英字サブ。g26-c-page-title を使用）=====
   Figma: PC 128:7603（pt64 / gap32）/ SP 128:8032（pt40 / gap20）。Heading/XL + EN/L(secondary)。
   横位置はページ余白に合わせる。上余白は margin-collapse 回避のため padding で持つ。*/
.g26-p-showroom-detail__page-title {
  padding-inline: var(--g26-pad-x);
  margin-block-start: 0;
  padding-block-start: var(--Spacing-Fixed-64);
}
/* Figma の showroom EN は 1.8px/18px = 0.1em（部品既定 0.05em を上書き）*/
.g26-p-showroom-detail__page-title .g26-c-page-title__en {
  letter-spacing: var(--LetterSpacing-Default);
}
/* ===== ヒーロー（全幅・1440:720 維持／ギャラリー: ズームアウト + クロスフェード） ===== */
.g26-p-showroom-detail__hero {
  position: relative;
  margin-block-start: var(--Spacing-Fixed-64);
  inline-size: 100%;
  aspect-ratio: 1440 / 720; /* 2:1 を全幅で維持（高さは幅に追従）*/
  overflow: hidden;
  background-color: var(--Role-Background-Subtle);
}
.g26-p-showroom-detail__hero-slides { position: absolute; inset: 0; isolation: isolate; }
.g26-p-showroom-detail__hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  /* クロスフェード中も2枚を加算合成し、中間の輝度ディップ（背景透けの沈み）を防ぐ。
     View Transition API 既定のクロスフェードと同手法。非対応ブラウザは normal にフォールバック。 */
  mix-blend-mode: plus-lighter;
  transition: opacity 1200ms ease;
  will-change: opacity;
}
.g26-p-showroom-detail__hero-slide.is-active { opacity: 1; }
.g26-p-showroom-detail__hero-slide img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1);
  transform-origin: center;
  will-change: transform;
  backface-visibility: hidden;
}
/* 複数枚（自動ギャラリー）時は初期 scale(1.05) → JS で 1.0 へズームアウト（ISSUE行31で1.1から抑制） */
.g26-p-showroom-detail__hero[data-hero] .g26-p-showroom-detail__hero-slide img { transform: scale(1.05); }
/* ドット（操作可能なボタン。当たり判定 24px を確保）*/
.g26-p-showroom-detail__hero-dots {
  position: absolute;
  inset-block-end: var(--Spacing-Fixed-16);
  inset-inline: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
}
.g26-p-showroom-detail__hero-dot {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 9px; /* 6px ドット + 当たり判定 = 24px（固定・リキッド対象外）*/
  margin-inline: -5px; /* 当たり判定24pxを保ちつつ、視覚ギャップを Figma の 8px に戻す（24→14 中心間・固定）*/
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.g26-p-showroom-detail__hero-dot::before {
  content: "";
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background-color: var(--Role-Background-Default);
  opacity: 0.5;
  transition: opacity 0.3s var(--g26-ease);
}
.g26-p-showroom-detail__hero-dot.is-active::before { opacity: 1; }
.g26-p-showroom-detail__hero-dot:focus-visible { outline: 2px solid var(--Role-Background-Default); outline-offset: 2px; }
/* 動きの抑制（自動再生・ズームを止める）。prefers-reduced-motion を尊重 */
@media (prefers-reduced-motion: reduce) {
  .g26-p-showroom-detail__hero-slide { transition: none; }
  .g26-p-showroom-detail__hero[data-hero] .g26-p-showroom-detail__hero-slide img { transform: scale(1); }
}
/* ===== 2カラム本体 ===== */
.g26-p-showroom-detail__body {
  display: flex;
  /* 列間は画面幅に応じて縮むパーセンテージ（1440時 136px = content-box 1216 の約11.18%）。
     固定 px だと幅が縮んだとき本文が窮屈になるため。*/
  column-gap: 11.18%;
  padding-inline: var(--g26-pad-x);
  /* 上120 / 下160。下はフッター帯（f-footer）との間隔（PC160 / SP80）。詳細ページは
     .f-footer--2026 modifier が付かないため、本文側で余白を持つ。*/
  padding-block: var(--Spacing-Fixed-120) var(--Spacing-Fixed-160);
  align-items: flex-start;
}
/* body.loaded（common.css）の overflow:hidden は position:sticky を無効化するため、
   この詳細ページでは overflow-x:clip / overflow-y:visible に上書きして sticky を有効化する。
   clip は scrollport を作らないので sticky が効き、横はみ出しは抑止・縦スクロールは維持。*/
body.loaded {
  overflow-x: clip;
  overflow-y: visible;
}
/* サイドバー。position:sticky で追従。スクロール方向追従（高さ不足時、下=下端固定/上=上端固定）は
   JS（single-showroom.php 末尾）で top を可変化して実現。*/
.g26-p-showroom-detail__aside {
  flex: none;
  /* 画面幅に応じてリキッド。最大280（1440時）／最小220。vw(280)=19.44vw（1440基準）*/
  inline-size: clamp(220px, 19.444444444444446vw, 280px);
  position: sticky;
  inset-block-start: 80px;
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-Fixed-48);
}
.g26-p-showroom-detail__main {
  flex: 1 0 0;
  min-inline-size: 0;
}
/* ===== サイドバー ===== */
.g26-p-showroom-detail__aside-top {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-Fixed-32);
}
/* 予約ボタン群（g26-c-button-outline を使用）。
   PC: inline-flex 縦積みで「最長ラベルの幅」に2つ揃える（全幅にしない・左寄せ）。 */
.g26-p-showroom-detail__cta {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch; /* 短い方を最長ボタン幅に揃える */
  align-self: flex-start; /* 親(aside-top)の stretch を解除 → 幅は中身(最長ボタン)に */
  gap: var(--Spacing-Fixed-8);
}
/* FB64: PC のサイドバー予約ボタンは横幅をリキッドなし（固定）に。
   幅は「最長ラベル(固定size)＋固定padding」で決まるため、padding をリキッド(Spacing-24)から
   固定(Fixed-24)へ。SP は下で flex:1（全幅）なので @media(--pc) に限定し波及させない。*/
@media (width > 840px) {
  .g26-p-showroom-detail__cta .g26-c-button-outline {
    padding-inline: var(--Spacing-Fixed-24);
  }
}
/* アンカーナビ（ダッシュ + テキスト） */
/* アンカーナビの並び（リンク自体は g26-c-anchor-link コンポーネント）*/
.g26-p-showroom-detail__anchor {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-Fixed-24);
}
/* PC はダッシュ左（g26-c-anchor-link::before）。↓ピルと SP改行は SP のみ表示 */
.g26-p-showroom-detail__anchor-icon { display: none; }
.g26-p-showroom-detail__cta-br { display: none; }
/* 見出しの SP専用改行（オンライン打ち合わせのお客様 等）。PC は1行 */
.g26-p-showroom-detail__title-br { display: none; }
/* サイドバー住所（PC のみ） */
.g26-p-showroom-detail__aside-info {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-Fixed-24);
  font-family: var(--Font-JP-Go);
  font-size: var(--TextSize-Body-XS);
  line-height: var(--LineHeight-Body-175);
  letter-spacing: var(--LetterSpacing-Default);
  color: var(--Role-Text-Primary);
}
.g26-p-showroom-detail__aside-address {
  margin: 0;
}
.g26-p-showroom-detail__aside-hours {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-Fixed-16);
}
.g26-p-showroom-detail__aside-hours div { display: flex; align-items: baseline; }
.g26-p-showroom-detail__aside-hours dt { flex: none; inline-size: 4rem; margin: 0; color: var(--Role-Text-Secondary); }
.g26-p-showroom-detail__aside-hours dd { flex: 1 0 0; min-inline-size: 0; margin: 0; }
/* ===== leading-trim 既定（重要・取りこぼし根絶） =====
   Figma は本文テキストに text-box-trim:both を全面適用。個別 opt-in だと必ず取りこぼす（過去多発）ため、
   詳細ページ配下の本文ブロックテキストに「既定で」適用する。:where() でゼロ詳細度＝
   個別ルールが必要時のみ上書き可。回帰は tests/e2e/figma-text-trim.spec.ts が検出する。
   基本情報テーブルの dd は flex 子（span/a）が実テキストなので、その子にも当てる。*/
@supports (text-box: trim-both cap alphabetic) {
  :where(.g26-p-showroom-detail) :is(p, h2, h3, h4, h5, h6, dt, dd, li, figcaption, .note, .g26-p-showroom-detail__text),
  :where(.g26-p-showroom-detail__table-row dd) :is(span, a) { text-box: trim-both cap alphabetic; }
}
@supports not (text-box: trim-both cap alphabetic) {
  :where(.g26-p-showroom-detail) :is(p, h2, h3, h4, h5, h6, dt, dd, li, figcaption, .note, .g26-p-showroom-detail__text),
  :where(.g26-p-showroom-detail__table-row dd) :is(span, a) { margin-block: var(--leading-trim); }
  /* FB72: トリム非対応（Firefox等）では dd(flex列) と dt(ブロック) のトリム挙動差で
     dt が下へズレる。ラベル/値の行はベースライン揃えにして dt を dd 先頭行に合わせる。
     Chrome/Safari は上の trim で揃うため、この上書きは非対応ブラウザ限定。 */
  .g26-p-showroom-detail__table-row,
  .g26-p-showroom-detail__deflist div { align-items: baseline; }
  /* FB71/73: flex 列 gap で並ぶ定義リストの行(div)は、非対応ブラウザでは行高が cap まで
     縮まず（行高≈1lh）、gap はマージンを無視するため行間が広く見える。
     行 div に片側リーディング分の負マージンを与え、cap 基準の見た目（Chrome）に近づける。 */
  .g26-p-showroom-detail__aside-hours div,
  .g26-p-showroom-detail__deflist div { margin-block: calc((1cap - 1lh) / 2); }
}
/* 一覧に戻る */
.g26-p-showroom-detail__back {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-Fixed-32);
}
.g26-p-showroom-detail__back-sep {
  inline-size: 100%;
  block-size: 1px;
  background-color: var(--Role-Border-Default);
}
/* 「一覧に戻る」リンクは g26-c-text-link--back（コンポーネント）へ統合（旧 __back-link は廃止）。 */
/* ===== 本文セクション ===== */
.g26-p-showroom-detail__section + .g26-p-showroom-detail__section { margin-block-start: var(--Spacing-Fixed-160); }
.g26-p-showroom-detail__section-title {
  margin: 0 0 var(--Spacing-Fixed-64);
  font-family: var(--Font-JP-Min);
  font-size: var(--TextSize-Heading-L); /* 32 / SP24（Figma Heading/L。以前 Heading-S=24 で実装していた誤りを是正）*/
  line-height: var(--LineHeight-Heading);
  letter-spacing: var(--LetterSpacing-Default);
  color: var(--Role-Text-Primary);
}
/* Article 要素（見出し/本文/箇条書き/注記）
   プレースホルダの手書きクラス（__headline/__bullets/__bullet）と、
   リッチテキスト（the_field 出力＝__text 内の h3/ul/li）の双方に同じスタイルを当てる。
   Figma: Article/Headline(97:6228) / Article/Bullet(97:6229)。*/
.g26-p-showroom-detail__headline,
.g26-p-showroom-detail__text h3 {
  margin: var(--Spacing-Fixed-64) 0 0; /* Article/Headline pt-64（先頭は下で 0 にする）*/
  font-family: var(--Font-JP-Go);
  font-weight: 600; /* JP Go B */
  font-size: var(--TextSize-Body-L); /* 18 */
  line-height: var(--LineHeight-Body-175);
  letter-spacing: var(--LetterSpacing-Default);
  color: var(--Role-Text-Primary);
}
.g26-p-showroom-detail__text {
  margin: var(--Spacing-Fixed-32) 0 0;
  font-family: var(--Font-JP-Go);
  font-size: var(--TextSize-Body-M); /* 16 */
  line-height: var(--LineHeight-Body-200);
  letter-spacing: var(--LetterSpacing-Default);
  color: var(--Role-Text-Primary);
}
/* リッチテキスト本文（__text コンテナ）内の余白・ブロック間隔を Figma に合わせる。
   セクション見出し直後のコンテナ／内部の先頭要素は margin-top 0、段落は 32。*/
.g26-p-showroom-detail__section-title + .g26-p-showroom-detail__text { margin-block-start: 0; }
.g26-p-showroom-detail__text > :first-child { margin-block-start: 0; }
.g26-p-showroom-detail__text > p { margin-block-start: var(--Spacing-Fixed-32); }
/* Article/Text pt-32（記事直下の段落）*/
/* li 内の入れ子段落はタイトに（先頭は詰め、続く段落＝注記等は少しだけ空ける）*/
.g26-p-showroom-detail__text li > p { margin-block-start: 0; }
.g26-p-showroom-detail__text li > p + p { margin-block-start: var(--Spacing-Fixed-16); }
/* Figma 97:6638: bullet→note gap16 */
/* リッチテキスト内で editor が付ける注記クラス（.note）。
   行頭に ※（16px列・中央）+ gap4 のぶら下げ、Body-S・muted。
   `red` を併記（class="note red"）すると警告色 #e43030 に（Figma 97:6620: ListItem/Note 赤）。*/
.g26-p-showroom-detail__text .note {
  display: block;                        /* 行ブロック化し、箇条書き本文との間に余白を持たせる */
  /* 箇条書き本文 ⇄ 注記 の baseline→cap 間隔を 16 に（Figma 97:6638 frame gap）。
     直前は裸テキスト（Body-M）で text-box 未適用＝baseline下に descent+half-leading が約8px残る。
     これは note 自身の leading ではなく直前テキストの metrics に依存するため、note の --leading-trim では
     相殺できない（実測: 旧式は baseline→cap が PC/SP とも 20.5px ＝ 4.5px 過大）。直前余白≈8px を見込んで
     margin を 8 とし、baseline→cap を実測 SP15.5 / PC16 に収める。*/
  margin-block-start: var(--Spacing-Fixed-8);
  position: relative;
  /* ※列16 + gap4。※は箇条書きテキスト列に、本文は +20。
     FB75(2回目): マーカー列(::before)は 16px 固定なのに本文開始位置だけ全体をリキッド化していたため、
     ビューポート幅で ※⇄本文 の間隔が伸縮していた（PC1920で約10.7px / SP320で約1px）。
     マーカー列が固定 px である以上 gap もリキッドにしてはならない（列と本文の関係がズレる）ため、
     マーカー列を持つ全箇所（同ファイル箇条書き・__note / g26-c-notes / g26-c-list）で
     gap をリキッドの --Spacing-4 から固定の --Spacing-Fixed-4 に統一した。*/
  padding-inline-start: calc(16px + var(--Spacing-Fixed-4));
  color: var(--Role-Text-Secondary);
  font-size: var(--TextSize-Body-S);
  line-height: var(--LineHeight-Body-150);
}
/* 注記が連続する場合は、直前が trim 済みの .note ブロックなので leading 相殺は不要 */
.g26-p-showroom-detail__text .note + .note { margin-block-start: var(--Spacing-Fixed-16); }
/* 直前が「trim 済みの <p>」の場合（li 内で <p>本文</p><p class="note">注記</p> と書かれた形）は、
   上の margin-8 が前提とする「裸テキストの descent+half-leading ≈8px」が存在しないため 8px 不足する。
   267行の `li > p + p`(0,1,3) は `.g26-p-showroom-detail__text .note`(0,2,0) に詳細度で負けて効いていなかった。
   実測 8px / Figma 97:6638 は 16px。ここで詳細度を上げて Figma 値に戻す。*/
.g26-p-showroom-detail__text li > p + p.note { margin-block-start: var(--Spacing-Fixed-16); }
.g26-p-showroom-detail__text .note::before {
  content: "※";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  inline-size: 16px;
  line-height: 1;     /* half-leading を除去し、本文1行目(cap)に揃える */
  text-align: center;
}
@supports (text-box: trim-both cap alphabetic) {
  .g26-p-showroom-detail__text .note::before { text-box: trim-both cap alphabetic; }
}
.g26-p-showroom-detail__text .note.red { color: var(--Role-Text-Caution); }
/* 箇条書き（Article/Bullet）。マーカーは 16px 列の中央に 4px ドット（Figma: ListItem/Bullet）。*/
.g26-p-showroom-detail__bullets,
.g26-p-showroom-detail__text ul {
  list-style: none;
  margin: var(--Spacing-Fixed-32) 0 0; /* Article/Bullet pt-32 */
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-Fixed-24); /* 項目間 24 */
}
.g26-p-showroom-detail__bullet,
.g26-p-showroom-detail__text ul li {
  position: relative;
  padding-inline-start: calc(16px + var(--Spacing-Fixed-4)); /* マーカー列16 + gap4 */
  font-family: var(--Font-JP-Go);
  font-size: var(--TextSize-Body-M);
  line-height: var(--LineHeight-Body-175);
  letter-spacing: var(--LetterSpacing-Default);
  color: var(--Role-Text-Primary);
}
.g26-p-showroom-detail__bullet::before,
.g26-p-showroom-detail__text ul li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  inline-size: 16px;   /* マーカー列 */
  block-size: 1cap;    /* trim 後の1行目(cap)に合わせ、ドットを cap 中央へ */
  /* 色は Role/Icon/Muted(#8C8984)。g26-c-list と同じ Figma 同一の SVG 円（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;
}
/* ISSUE<TJM>21: __text 内の <ul> に <li class="note"> がある場合は、箇条書き(ドット)ではなく
   注釈リスト（g26-c-notes / g26-c-notes__item を割り当てたのと同じ見た目）にする。
   ・ul: 項目間 gap を notes と同じ 16 に（bullet の 24 を上書き。他の非noteリストは影響なし）
   ・li.note: bullet の dot 背景を打ち消して ※ のみに／間隔は ul gap に一元化（.note / .note+.note の margin を無効化）
   ※ 文字色(Secondary)・サイズ(Body-S)・※マーカー・padding は既存の .note 指定がそのまま効く。*/
.g26-p-showroom-detail__text ul:has(> li.note) {
  gap: var(--Spacing-Fixed-16);
}
.g26-p-showroom-detail__text ul li.note,
.g26-p-showroom-detail__text ul li.note + li.note {
  margin-block-start: 0;
}
.g26-p-showroom-detail__text ul li.note::before {
  content: "※";
  background: none;
  block-size: auto;
}
/* FB67同種: リッチテキスト本文の箇条書きドット・注記(※)マーカーは、トリム非対応（Firefox等）では
   li 上端が cap でなく行ボックス上端になり、top:0 起点のマーカーが上へズレる。行ボックス中央
   (≒cap中央)へ下げて揃える。※ 基底ルール(inset-block-start:0)の後に置き上書きする（同詳細度）。 */
@supports not (text-box: trim-both cap alphabetic) {
  .g26-p-showroom-detail__bullet::before,
  .g26-p-showroom-detail__text ul li::before {
    inset-block-start: calc((1lh - 1cap) / 2);
  }
  /* ※マーカーは line-height:1 を持つため上の calc では 1lh=1em となり補正量が不足する（木村FB: やや上にズレる）。
     行ボックスを親と同一（line-height:inherit）にして top:0 に戻すと、※のベースラインが本文1行目と一致する。 */
  .g26-p-showroom-detail__text .note::before {
    line-height: inherit;
    inset-block-start: 0;
  }
}
/* 本文・箇条書き内のリンクは下線付き（Figma: underline / from-font / 本文色を継承）。
   リッチテキスト(__text)とプレースホルダの箇条書き(__bullet)の双方。*/
.g26-p-showroom-detail__text a,
.g26-p-showroom-detail__bullet a,
.g26-p-showroom-detail__table-row dd a,
.g26-p-showroom-detail__deflist dd a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-position: from-font;
}
.g26-p-showroom-detail__text a:hover,
.g26-p-showroom-detail__bullet a:hover,
.g26-p-showroom-detail__table-row dd a:hover,
.g26-p-showroom-detail__deflist dd a:hover { opacity: 0.7; }
/* 注記（Article/Note）。上要素からの間隔は pt32、注記が連続する場合は項目間16（ListItem/Note gap）。*/
/* FB75: 旧実装は literal な ※ + text-indent のぶら下げで、他の注釈（g26-c-notes / .note の
   「16px マーカー列 + gap4 の ::before」方式）と見た目が不一致だった（※の左に余白・※と本文が密着）。
   他と同じ ::before 方式へ統一（テンプレ側の literal ※ は削除済み）。*/
.g26-p-showroom-detail__note {
  margin: var(--Spacing-Fixed-32) 0 0;
  position: relative;
  padding-inline-start: calc(16px + var(--Spacing-Fixed-4)); /* マーカー列16 + gap4（g26-c-notes と同一）*/
  font-family: var(--Font-JP-Go);
  font-size: var(--TextSize-Body-S);
  line-height: var(--LineHeight-Body-150);
  letter-spacing: var(--LetterSpacing-Default);
  color: var(--Role-Text-Secondary);
}
.g26-p-showroom-detail__note::before {
  content: "※";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  inline-size: 16px;
  line-height: 1; /* half-leading を除去し本文1行目(cap)に揃える（g26-c-notes と同一）*/
  text-align: center;
}
@supports (text-box: trim-both cap alphabetic) {
  .g26-p-showroom-detail__note::before { text-box: trim-both cap alphabetic; }
}
@supports not (text-box: trim-both cap alphabetic) {
  /* FB67と同処理: 非対応ブラウザは行ボックスを親と同一にして ※ のベースラインを本文1行目に揃える */
  .g26-p-showroom-detail__note::before { line-height: inherit; inset-block-start: 0; }
}
.g26-p-showroom-detail__note + .g26-p-showroom-detail__note { margin-block-start: var(--Spacing-Fixed-16); }
.g26-p-showroom-detail__note--caution { color: var(--Role-Text-Caution, #e43030); }
/* 住所補足事項（addressText）。住所dd内。
   ※注記は g26-c-notes（※=16px列+gap4の::before配置・Figma 144:10240）で描画。
   dd は flex-column gap24 を持つので、コンポーネント既定の上マージンは殺して dd の間隔に委ねる。*/
.g26-p-showroom-detail__address-note { margin-block-start: 0; }
/* ※の無い補足（提携店ホームページ等）はプレーン表示。本文 Body-S。リンクは dd a 既定で下線。*/
.g26-p-showroom-detail__address-link {
  margin: 0;
  font-size: var(--TextSize-Body-S);
  line-height: var(--LineHeight-Body-150);
  letter-spacing: var(--LetterSpacing-Default);
}
/* 来店/オンライン セクションの大ボタン（Figma: Button/PC 128:7608 = Large emphasis）。
   PC: 幅342固定・テキスト左/アイコン右（text を flex-1 で右端へ押す）。SP: 全幅。上余白48。*/
.g26-p-showroom-detail__section .g26-c-button {
  margin-block-start: var(--Spacing-Fixed-48);
  inline-size: 21.375rem;
}
.g26-p-showroom-detail__section .g26-c-button .g26-c-button__text {
  flex: 1 0 0;
  min-inline-size: 0;
  text-align: left;
}
/* 展示ブース グリッド（3列） */
.g26-p-showroom-detail__booths {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* FB76: 縦=固定/横=リキッドだとリキッド時に縦横の余白が不均一になる。縦もリキッドにして揃える。 */
  row-gap: var(--Spacing-16); column-gap: var(--Spacing-16);
}
.g26-p-showroom-detail__booth {
  --g26-booth-zoom: 1.05; /* hover の写真ズーム量（neie.jp 実測。ISSUE行3）*/
  margin: 0;
  position: relative; /* 拡大アイコンの基準 */
  inline-size: 100%;
  padding: 0;
  border: 0;
  appearance: none;
  -webkit-appearance: none;
  aspect-ratio: 256 / 160;
  overflow: hidden;
  background-color: var(--Role-Background-Subtle);
  cursor: pointer;
}
.g26-p-showroom-detail__booth img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
/* hover: 写真ズーム（overflow:hidden 内で scale）。hover 端末 + 動き許容時のみ */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .g26-p-showroom-detail__booth img { transition: transform 1s var(--g26-ease-zoom); }
  .g26-p-showroom-detail__booth:hover img { transform: scale(var(--g26-booth-zoom)); }
}
/* 右下の拡大アイコン（Figma: #4e4d4b 円24 / 端から7.67 / icon18 白）*/
.g26-p-showroom-detail__booth-zoom {
  position: absolute;
  /* FB76: 下=固定/右=リキッドだと右下端からの距離が不均一になる。両方リキッドで揃える。 */
  inset-block-end: var(--Spacing-8);
  inset-inline-end: var(--Spacing-8);
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 24px;
  block-size: 24px;
  border-radius: 50%;
  background-color: var(--Role-Icon-Default); /* #4e4d4b */
  color: var(--Role-Text-onEmphasis);          /* アイコン白（stroke=currentColor）*/
}
.g26-p-showroom-detail__booth-zoom .g26-c-icon { inline-size: 18px; block-size: 18px; }
/* hover: ズームピルの背景を #64615D に（Figma 97:6408 / ISSUE行38）。画像拡大は上の zoom 既存実装 */
@media (hover: hover) {
  .g26-p-showroom-detail__booth:hover .g26-p-showroom-detail__booth-zoom {
    background-color: #64615d;
  }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .g26-p-showroom-detail__booth-zoom {
    transition: background-color 0.3s ease;
  }
}
/* 基本情報テーブル（罫線区切り） */
.g26-p-showroom-detail__table { margin: 0; }
.g26-p-showroom-detail__table-row {
  display: flex;
  gap: calc(0 * var(--g26-u));
  padding-block: var(--Spacing-Fixed-32);
  border-block-start: 1px solid var(--Role-Border-Default);
  font-family: var(--Font-JP-Go);
  font-size: var(--TextSize-Body-M);
  line-height: var(--LineHeight-Body-175); /* Figma 1.75（Heading 1.5 ではない）*/
  letter-spacing: var(--LetterSpacing-Default);
}
.g26-p-showroom-detail__table-row:last-child { border-block-end: 1px solid var(--Role-Border-Default); }
/* ラベル(dt) は Body-M Bold・primary（Figma 97:6516）*/
.g26-p-showroom-detail__table-row dt { flex: none; inline-size: 6.5rem; margin: 0; font-weight: 600; color: var(--Role-Text-Primary); }
.g26-p-showroom-detail__table-row dd { flex: 1 0 0; min-inline-size: 0; margin: 0; color: var(--Role-Text-Primary); display: flex; flex-direction: column; gap: var(--Spacing-Fixed-24); }
/* dd内 gap 24 */
/* お問い合わせ等の定義リスト（ラベル+値）。Figma 97:6839: dt=Body-M Bold primary, gap20, lh1.75, pt40, dt-dd 16 */
.g26-p-showroom-detail__deflist { margin: var(--Spacing-Fixed-40) 0 0; display: flex; flex-direction: column; gap: var(--Spacing-Fixed-20); font-family: var(--Font-JP-Go); font-size: var(--TextSize-Body-M); line-height: var(--LineHeight-Body-175); letter-spacing: var(--LetterSpacing-Default); color: var(--Role-Text-Primary); }
.g26-p-showroom-detail__deflist div { display: flex; gap: var(--Spacing-16); }
.g26-p-showroom-detail__deflist dt { flex: none; inline-size: 6.5rem; margin: 0; font-weight: 600; }
.g26-p-showroom-detail__deflist dd { flex: 1 0 0; min-inline-size: 0; margin: 0; }
/* TEL/FAX deflist（Figma 97:6863）: ラベル幅40、上余白は pt-32（ナビダイヤルの 40 とは別値）*/
.g26-p-showroom-detail__deflist--narrow { margin-block-start: var(--Spacing-Fixed-32); }
.g26-p-showroom-detail__deflist--narrow dt { inline-size: 2.5rem; }
/* leading-trim は冒頭の「既定」ルール（:where(.g26-p-showroom-detail) …）で一括適用済み。
   個別 opt-in は取りこぼしの温床のため、ここには列挙しない。新規テキストも既定で trim される。*/
/* 末尾の「ショールーム一覧に戻る」（128:7632）。本文セクションと同列で main の gap-160 を受ける。
   罫線→リンクは pt-64（SP 48）。*/
.g26-p-showroom-detail__main-back {
  margin-block-start: var(--Spacing-Fixed-160);
  padding-block-start: var(--Spacing-Fixed-64);
  border-block-start: 1px solid var(--Role-Border-Default);
}
/* ===== お知らせ（詳細ページ CMS。ヒーロー前後に出る告知） =====
   赤字アラート（画像上=Figma 174:3464 / 画像下=174:3744）と、お知らせパネル（タイトル+本文=169:2602）。
   いずれもページ左右余白に合わせ、枠線は content 幅(1216)で引く。*/
.g26-p-showroom-detail__notice { padding-inline: var(--g26-pad-x); }
/* 上余白: 画像上はタイトル直下 pt48、画像下・パネルはヒーロー直下 pt80（Figma 各 wrapper の pt）*/
.g26-p-showroom-detail__notice--above { margin-block-start: var(--Spacing-Fixed-48); }
.g26-p-showroom-detail__notice--below,
.g26-p-showroom-detail__notice--panel { margin-block-start: var(--Spacing-Fixed-80); }
/* お知らせが連続する場合（画像下アラート→お知らせパネル等）のみ間を24に詰める（Figma 715:2334。単体時は上記のまま）*/
.g26-p-showroom-detail__notice + .g26-p-showroom-detail__notice { margin-block-start: var(--Spacing-Fixed-24); }
/* 赤字アラート（画像上/画像下 共通）。枠線ボックス内に Caution 色テキスト（Body/S・175%）*/
.g26-p-showroom-detail__alert {
  margin: 0;
  border: 1px solid var(--Role-Border-Default);
  padding: var(--Spacing-Fixed-32) calc(48 * var(--g26-u)); /* py32 / px48 */
  font-family: var(--Font-JP-Go);
  font-size: var(--TextSize-Body-S);
  line-height: var(--LineHeight-Body-175);
  letter-spacing: var(--LetterSpacing-Default);
  color: var(--Role-Text-Caution);
}
/* お知らせパネル。PC: ラベル(JP Min/Heading-XS)左 + 本文(タイトル+リッチ本文)右。gap48・padding48 */
.g26-p-showroom-detail__notice-panel {
  display: flex;
  gap: var(--Spacing-48);
  border: 1px solid var(--Role-Border-Default);
  padding-block: var(--Spacing-Fixed-48); padding-inline: var(--Spacing-48);
  color: var(--Role-Text-Primary);
}
.g26-p-showroom-detail__notice-label {
  flex: none;
  margin: 0;
  font-family: var(--Font-JP-Min);
  font-size: var(--TextSize-Heading-XS); /* PC20 / SP16（token のモード値）*/
  line-height: var(--LineHeight-Body-150);
  letter-spacing: var(--LetterSpacing-Default);
  white-space: nowrap;
}
.g26-p-showroom-detail__notice-content {
  flex: 1 0 0;
  min-inline-size: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--Spacing-Fixed-32);
}
.g26-p-showroom-detail__notice-title {
  margin: 0;
  font-family: var(--Font-JP-Go);
  font-weight: 600; /* JP Go B */
  font-size: var(--TextSize-Body-M);
  line-height: var(--LineHeight-Body-175);
  letter-spacing: var(--LetterSpacing-Default);
}
/* リッチ本文（wysiwyg）。Body/S・200%。段落間は 16 */
.g26-p-showroom-detail__notice-text {
  font-family: var(--Font-JP-Go);
  font-size: var(--TextSize-Body-S);
  line-height: var(--LineHeight-Body-200);
  letter-spacing: var(--LetterSpacing-Default);
}
.g26-p-showroom-detail__notice-text > :first-child { margin-block-start: 0; }
.g26-p-showroom-detail__notice-text > :last-child { margin-block-end: 0; }
.g26-p-showroom-detail__notice-text p { margin-block: 0; }
.g26-p-showroom-detail__notice-text p + p { margin-block-start: var(--Spacing-Fixed-16); }
/* ===== SP ===== */
@media (width <= 840px) {
  .g26-p-showroom-detail__page-title { padding-block-start: var(--Spacing-Fixed-40); } /* SP pt40（Figma 128:8032）*/
  .g26-p-showroom-detail__hero { margin-block-start: var(--Spacing-Fixed-40); } /* SP: タイトル/お知らせ画像上→ヒーロー=40（Figma SP 128:7667他, 画像 frame内 y40）。高さは aspect-ratio 1440:720 で追従 */
  /* SP: ヒーロードットは径4px（Figma SP は 4px/ピッチ8）。当たり判定は padding で確保 */
  .g26-p-showroom-detail__hero-dots { inset-block-end: var(--Spacing-Fixed-8); }
  /* SP は切替がスワイプ主体でドットはタップしない想定 → 当たり判定用 padding を廃し、
     ドット実体(4px)が画像下端から 8px の位置に来るレイアウトにする（中心間8px=ドット4+ギャップ4）*/
  .g26-p-showroom-detail__hero-dot { padding: 0; margin-inline: 0.125rem; }
  .g26-p-showroom-detail__hero-dot::before { inline-size: 4px; block-size: 4px; }
  .g26-p-showroom-detail__body {
    flex-direction: column;
    gap: var(--Spacing-Fixed-96); /* SP: aside(アンカー) ⇄ main(最初のセクション) = 96（Figma SP 128:7667、section間と同リズム）*/
    padding-inline: var(--g26-pad-x);
    padding-block: var(--Spacing-Fixed-48) var(--Spacing-Fixed-80); /* SP: 上48 / 下80 */
  }
  .g26-p-showroom-detail__aside {
    inline-size: 100%;
    position: static; /* SP は追従しない */
    gap: var(--Spacing-Fixed-32);
  }
  /* SP: aside-top は CTA行↔アンカーを gap24（Figma 128:7678）*/
  .g26-p-showroom-detail__aside-top { gap: var(--Spacing-Fixed-24); }
  /* SP: 予約ボタンは横2分割・中央寄せ。ご来店予約=Body/M(14)、オンライン=Body/S(12)2行 */
  .g26-p-showroom-detail__cta { display: flex; flex-direction: row; inline-size: 100%; gap: var(--Spacing-8); }
  .g26-p-showroom-detail__cta .g26-c-button-outline { flex: 1 0 0; inline-size: auto; justify-content: center; text-align: center; } /* h44/px16 は component 側 */
  .g26-p-showroom-detail__cta .g26-c-button-outline:first-child { font-size: var(--TextSize-Body-M); } /* ご来店予約 14px */
  .g26-p-showroom-detail__cta-br { display: inline; }
  .g26-p-showroom-detail__title-br { display: inline; }
  /* SP: アンカーナビは 2列（行ピッチ40＝項目24 + row-gap16）。各項目はテキスト左＋↓ピル右(justify-between)。列間中央に縦罫線(1px×24)。
     Figma(128:8049): 項目 h24・列間 33（16+線1+16）*/
  .g26-p-showroom-detail__anchor { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: calc(var(--Spacing-32) + 1px); row-gap: var(--Spacing-Fixed-16); }
  /* display:flex（ブロック化）: inline-flex だと li 側の leading-trim が行ボックスを cap 高に切り詰め、
     li(グリッド行)がリンク実高24より低くなる（行ピッチが40にならない）*/
  .g26-p-showroom-detail__anchor .g26-c-anchor-link { display: flex; justify-content: space-between; inline-size: 100%; min-block-size: 24px; font-size: var(--TextSize-Body-M); } /* テキスト 14px(Body/M)・h24（行ピッチ40）*/
  .g26-p-showroom-detail__anchor .g26-c-anchor-link::before { display: none; } /* SP はダッシュ無し（↓ピルに置換）*/
  .g26-p-showroom-detail__anchor-icon { display: inline-flex; } /* SP: ↓ピル表示 */
  .g26-p-showroom-detail__anchor li { position: relative; }
  /* 左列(奇数番目)の右側・列間中央に縦罫線。右列の相手がいない末尾項目には出さない。*/
  .g26-p-showroom-detail__anchor li:nth-child(odd):not(:last-child)::after {
    content: "";
    position: absolute;
    inset-inline-end: calc(-1 * calc(16 * var(--g26-u)) - 1px); /* 前アイテムまで16・次アイテムまで16（線幅1px・列間33）*/
    inset-block-start: 50%;
    transform: translateY(-50%);
    inline-size: 1px;
    block-size: 1.5rem;
    background-color: var(--Role-Border-Default);
  }
  /* SP: サイドバー住所は基本情報側に出すため非表示（住所は基本情報セクション内） */
  .g26-p-showroom-detail__aside-info { display: none; }
  /* SP: 一覧に戻るは本文末尾へ（サイドバー内のものは隠す） */
  .g26-p-showroom-detail__aside .g26-p-showroom-detail__back { display: none; }
  .g26-p-showroom-detail__section + .g26-p-showroom-detail__section { margin-block-start: var(--Spacing-Fixed-96); }
  .g26-p-showroom-detail__section-title { margin-block-end: var(--Spacing-Fixed-48); }
  /* SP: 箇条書きの項目間は 20（Figma SP 128:8412 Article/Bullet/SP gap）。PC は 24。
     上余白は 24（Figma SP Article/Bullet/SP 128:8567 pt24）。PC は 32 */
  .g26-p-showroom-detail__bullets,
  .g26-p-showroom-detail__text ul { gap: var(--Spacing-Fixed-20); margin-block-start: var(--Spacing-Fixed-24); }
  /* SP: 記事見出し(Article/Headline)の上余白は 48（PC64→SP48）。先頭見出しは title の margin-end(48) と相殺され同じ48に揃う＝modifier 不要 */
  .g26-p-showroom-detail__headline,
  .g26-p-showroom-detail__text h3 { margin-block-start: var(--Spacing-Fixed-48); }
  /* SP: 記事本文段落(Article/Text/SP 128:8480)の上余白は 24。PC は 32 */
  .g26-p-showroom-detail__text > p { margin-block-start: var(--Spacing-Fixed-24); }
  /* SP: 末尾「一覧に戻る」は section 間と同じ 96、罫線→リンクは 48 */
  .g26-p-showroom-detail__main-back { margin-block-start: var(--Spacing-Fixed-96); padding-block-start: var(--Spacing-Fixed-48); }
  /* SP: セクション大ボタンは全幅 */
  .g26-p-showroom-detail__section .g26-c-button { inline-size: 100%; }
  .g26-p-showroom-detail__booths { grid-template-columns: repeat(2, 1fr); }
  /* SP: 表組みは dt↔dd / dd内項目とも均等 20（Figma SP 128:8463 gap20）。PC は行16・dd内24 */
  /* SP: 行の padding-block は 24（Figma SP 128:8461 は罫線↔コンテンツが全箇所24）。PC は 32 */
  .g26-p-showroom-detail__table-row { flex-direction: column; gap: var(--Spacing-Fixed-20); padding-block: var(--Spacing-Fixed-24); }
  .g26-p-showroom-detail__table-row dt { inline-size: auto; }
  .g26-p-showroom-detail__table-row dd { gap: var(--Spacing-Fixed-20); }
  /* SP deflist は横並びのまま（Figma 128:8568）。ラベル幅 88 / TEL・FAX 32。
     ナビ deflist の上余白は 32（Figma SP 128:8568 pt32）、TEL/FAX(--narrow)は見出し直下で 24（Figma SP 128:8580 pt24） */
  .g26-p-showroom-detail__deflist { margin-block-start: var(--Spacing-Fixed-32); }
  .g26-p-showroom-detail__deflist dt { inline-size: 5.5rem; }
  .g26-p-showroom-detail__deflist--narrow { margin-block-start: var(--Spacing-Fixed-24); }
  .g26-p-showroom-detail__deflist--narrow dt { inline-size: 2rem; }
  /* SP: 注記の上余白は 24（Figma SP Article/Note/SP 128:8578 pt24）。PC は 32 */
  .g26-p-showroom-detail__note { margin-block-start: var(--Spacing-Fixed-24); }
  /* SP: お知らせ告知。上余白は 画像上 pt32 / 画像下・パネル pt48（Figma SP wrapper）*/
  .g26-p-showroom-detail__notice--above { margin-block-start: var(--Spacing-Fixed-32); }
  .g26-p-showroom-detail__notice--below,
  .g26-p-showroom-detail__notice--panel { margin-block-start: var(--Spacing-Fixed-48); }
  /* 連続時の詰めは SP=16（Figma 715:2403。PC=24）。上の --panel 指定より後に置いて勝たせる */
  .g26-p-showroom-detail__notice + .g26-p-showroom-detail__notice { margin-block-start: var(--Spacing-Fixed-16); }
  .g26-p-showroom-detail__alert { padding: var(--Spacing-Fixed-20) var(--Spacing-Fixed-24); } /* SP py20 / px24 */
  /* SP: パネルは縦積み（ラベル上）。padding px24 py32 / 本文 gap24 */
  .g26-p-showroom-detail__notice-panel { flex-direction: column; gap: var(--Spacing-Fixed-32); padding: var(--Spacing-Fixed-32) var(--Spacing-Fixed-24); }
  .g26-p-showroom-detail__notice-content { gap: var(--Spacing-Fixed-24); }
}
/* FB74: アンカー遷移（各セクションへのリンク）で見出しが固定ヘッダーに隠れて見切れるため、
   着地位置だけをヘッダー高ぶん下げる。scroll-margin は視覚的な余白を増やさない。*/
.g26-p-showroom-detail [id^="area-"] {
  scroll-margin-block-start: var(--g26-anchor-offset);
}