/* ==========================================================================
   curble-2w-footrest.css — Issue-013 Curble Two-Way Footrest page-specific 層
   wp_diversity theme / enqueue: is_page('curble-2w-footrest') のときのみ配信
   読み込み順: style.css → rebuild.css → curble-2w-footrest.css
   --------------------------------------------------------------------------
   命名根拠
   - 既存の page-specific CSS は `top.css` / `company.css` /
     `products-list.css` / `curble-chair.css` / `curble-sh-pillow.css`。
     「1 Page = 1 page-specific CSS / slug で命名」という規約に従い、
     slug `curble-2w-footrest` に一致する `curble-2w-footrest.css` を採用する。
   - class prefix は `.footrest-`（O-81）。現行本文の `.curble-footrest-`
     （55クラス）は本文差し替えで消滅するため踏襲しない。
     `.footrest-` / `.page-footrest` は theme CSS・release 成果物のいずれにも
     存在せず、衝突 0件を実測済み。
   --------------------------------------------------------------------------
   方針
   - Global Component（rebuild.css）で解決できるものは再定義しない。
     再利用: .l-inner / .sec-eyebrow / .sec-title / .cta / .cta--primary /
             .link-inline / .ext-mark / :focus-visible / .screen-reader-text /
             Design Token 一式
   - `.page-footrest` にスコープを閉じる。
     ### `.page-id-3408` に依存した設計にしない。
     （Production の <body> は body_class() を出力し `.page-id-3408` は
       実在するが（O-88）、page ID 依存の設計にはしない。配信条件は
       functions.php の `is_page( 'curble-2w-footrest' )` が持つ。）
   - curble-sh-pillow.css をコピーして無条件適用しない。共通するのは
     Section Rhythm（company / products-list / chair / pillow と同一の役割）
     のみで、Component は本ページの Asset 形状に合わせて独自に定義する。
   - `!important` は使わない。inline style も使わない。JS も追加しない。
   - breakpoint は既存に合わせる（900 / 768 / 500 / 380）。
   --------------------------------------------------------------------------
   Asset 形状（docs/audits/curble-2w-footrest-production-verification.md §5）
     正方形 1:1     AR-01(1500) / AR-02(1000) / AR-08(1000) / AR-09〜11(700) /
                    AR-12(1200) / AR-13(1200) / AR-15(1200) / AR-17〜21(1000)
     ほぼ 1:1       AR-03 (425x428) / AR-04 (431x428)  ← ### 実寸が小さい
     横長 1.46:1    AR-07 (860x587)
     縦寄り 1:0.85  AR-06 (860x730 / GIF)
     正方形 1:1     AR-22 (1500x1500 / S06 足首側 / Phase 4 で実測)
   → ### AR-03 / AR-04 は他 Asset より大幅に小さい（約428px）。
     media box を拡大して引き伸ばさない（Asset List §4.1）。
     `.footrest-twoway__figure` は max-width を与えて原寸付近に留める。
   → ### AR-05（高さ調整GIF）は REJECT のため CSS も用意しない（HR-013-10）。
     高さ×角度は `.footrest-angle` テーブルで表現する。
   --------------------------------------------------------------------------
   wpautop 注意（Issue-009 Production incident / Issue-010 O-30）
     `.footrest-hero__inner` / `.footrest-hero__facts` / `.footrest-intro__inner` /
     `.footrest-twoway__grid` / `.footrest-height__list` / `.footrest-upper__grid` /
     `.footrest-upper__sub` /
     `.footrest-stability__grid` / `.footrest-color-grid` / `.footrest-assembly__inner` /
     `.footrest-cover__grid` / `.footrest-cover__cases` / `.footrest-spec__figures` /
     `.footrest-related__grid` は Grid / Flex コンテナ。
     **直接の子の位置に HTML コメントを置かない**こと。
     加えて **行頭空白 ＋ 閉じ `</div>`** は unmatched `</p>` を生む。
     投入用 Artifact は tools/build-production-content.py で行頭空白を除去する。
   ========================================================================== */

/* --------------------------------------------------------------------------
   Page-local Token
   -------------------------------------------------------------------------- */
.page-footrest {
  /* 商品画像の下地。本ページの Asset はすべて白背景寄りの JPEG / GIF で、
     透過 PNG は関連商品カード（Chair / Pillow）の2点のみ。 */
  --c-figure-ground: var(--c-bg-figure);

  /* 仕様表のラベル列幅。日本語ラベル最長「足置き面サイズ」基準。 */
  --w-spec-label: 9.5em;

  /* 商品単体カット（カラー3点 / カバー2点 / 関連2点）の media box 内側余白。 */
  --pad-product-media: clamp(10px, 1.8vw, 26px);

  /* AR-03 / AR-04 は実寸 約428px。box を原寸付近に留めるための上限。 */
  --w-twoway-figure: 428px;
}

/* --------------------------------------------------------------------------
   Section Rhythm（Page-specific）
   company.css / products-list.css / curble-chair.css / curble-sh-pillow.css と
   同一の役割。Global へ昇格させない。理由: `class="section"` は未改修の
   商品2ページで使用されており、`.section` を素の Global セレクタにすると
   Regression になる。
   -------------------------------------------------------------------------- */
.page-footrest .section { padding: var(--sp-sec) var(--sp-gutter); }
.page-footrest .section--ground { background: var(--c-bg-sub); }
.page-footrest .section-rule {
  max-width: var(--w-page); margin-inline: auto;
  height: 1px; background: var(--c-line);
}

/* 各セクションは「見出し → 説明文 → 本体」の順。
   rebuild.css の .sec-title は margin-bottom: var(--sp-lg) だが、
   本ページは直後に説明文が入るため詰める。 */
.page-footrest .sec-title {
  margin-bottom: clamp(12px, 1.2vw, 18px);
  /* Issue-012 HR-012-26 / 27 と同種の手当て。
     Mobile で「足の置き方を、シーンに合わ／せて。」のような語中改行を避ける。
     keep-all → 対応ブラウザでは auto-phrase が後勝ち。 */
  word-break: keep-all;
  word-break: auto-phrase;
  overflow-wrap: break-word;
}

/* 図版の共通土台。形状ごとの扱いは各 Component 側で上書きする。 */
.page-footrest figure { margin: 0; }
.page-footrest img { display: block; max-width: 100%; height: auto; }

/* ==========================================================================
   S01 — Hero
   AR-01 は「デスクに向かって座る人物 ＋ 足元の本体（グレー）」の正方形カット。
   Desktop は 2カラム（左＝テキスト／右＝Hero画像）。
   ========================================================================== */
.footrest-hero {
  padding: clamp(40px, 5.2vw, 80px) var(--sp-gutter) clamp(36px, 4.4vw, 68px);
}
.footrest-hero__inner {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(28px, 3.2vw, 48px);
  align-items: center;
}
@media (min-width: 900px) {
  .footrest-hero__inner {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  }
}
.footrest-hero__body { min-width: 0; }

.footrest-hero__title {
  margin: 0 0 clamp(10px, 1vw, 16px);
  font-family: var(--f-serif); font-weight: 600;
  font-size: var(--fs-h1); letter-spacing: .04em; line-height: var(--lh-head);
  /* 「カーブル ツーウェイフットレスト」は半角スペースを1つ持つ。
     語中改行（例 「ツーウェイフットレ／スト」）を避ける。 */
  word-break: keep-all;
  word-break: auto-phrase;
  overflow-wrap: break-word;
}

/* Series Concept（SSOT `足元から着座をサポート`）に基づく Core Message。
   Claim ではなく Series の位置づけを示す1行。H1 より小さく、lead より強い。 */
.footrest-hero__message {
  margin: 0 0 clamp(14px, 1.4vw, 22px);
  font-family: var(--f-serif); font-weight: 600;
  font-size: clamp(16px, 1.5vw, 21px); letter-spacing: .06em;
  color: var(--c-text-3);
}

/* C-09 Definition Block。本ページ最重要のテキスト。 */
.footrest-hero__lead {
  margin: 0 0 clamp(18px, 1.9vw, 28px);
  font-size: var(--fs-lead); line-height: var(--lh-lead);
  color: var(--c-text-2);
}

/* 特性タグ。Claim ではなく構造・仕様の短い提示。 */
.footrest-hero__facts {
  display: flex; flex-wrap: wrap; gap: 8px 10px;
  margin: 0 0 clamp(22px, 2.2vw, 32px); padding: 0; list-style: none;
}
.footrest-hero__facts li {
  padding: 5px 12px;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  font-size: var(--fs-body-s); letter-spacing: .02em;
  color: var(--c-text-3);
}
.footrest-hero__action { margin: 0; }

.footrest-hero__figure {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 10px;
  background: var(--c-figure-ground);
}
.footrest-hero__figure img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 58%;
}
@media (max-width: 500px) {
  .footrest-hero__figure { aspect-ratio: 1 / 1; }
}

/* ==========================================================================
   S02 — Product Introduction
   ========================================================================== */
.footrest-intro__inner {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(24px, 2.8vw, 40px);
  align-items: center;
}
@media (min-width: 768px) {
  .footrest-intro__inner {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  }
}
.footrest-intro__body { min-width: 0; }
.footrest-intro__text {
  max-width: 68ch;
  margin: 0 0 1em;
  font-size: var(--fs-body); line-height: var(--lh-body);
  color: var(--c-text-2);
}
.footrest-intro__text:last-child { margin-bottom: 0; }
.footrest-intro__figure {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 10px;
  background: var(--c-figure-ground);
}
.footrest-intro__figure img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: var(--pad-product-media);
}

/* ==========================================================================
   S03 — Two-Way（LOWER / UPPER）
   AR-03 (425x428) / AR-04 (431x428) は他 Asset より大幅に小さい。
   media box に max-width を与え、拡大による劣化を避ける（Asset List §4.1）。
   ========================================================================== */
.footrest-twoway__lead {
  max-width: 68ch;
  margin: 0 0 var(--sp-lg);
  font-size: var(--fs-body); line-height: var(--lh-body);
  color: var(--c-text-2);
}
.footrest-twoway__grid {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(24px, 2.8vw, 40px);
}
@media (min-width: 768px) {
  .footrest-twoway__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.footrest-twoway__item { min-width: 0; }
.footrest-twoway__figure {
  max-width: var(--w-twoway-figure);
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 10px;
  background: var(--c-figure-ground);
}
.footrest-twoway__figure img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.footrest-twoway__tag {
  margin: 14px 0 4px;
  font-size: var(--fs-eyebrow); letter-spacing: .16em; font-weight: 600;
  color: var(--c-text-faint);
}
.footrest-twoway__title {
  margin: 0 0 8px;
  font-family: var(--f-serif); font-weight: 600;
  font-size: clamp(16px, 1.5vw, 20px); letter-spacing: .04em;
  line-height: var(--lh-head);
}
.footrest-twoway__body {
  max-width: 56ch;
  margin: 0;
  font-size: var(--fs-body); line-height: var(--lh-body);
  color: var(--c-text-2);
}

/* ==========================================================================
   S04 + S05 — 高さと角度（implementation-level H2 consolidation / HR-013-06）
   ### 画像を使わず HTML / CSS で表現する（HR-013-10 / AR-05 は REJECT）。
   高さ = 値リスト ／ 角度 = 高さ×角度のマトリクス表。
   ========================================================================== */
.footrest-adjust__lead {
  max-width: 68ch;
  margin: 0 0 var(--sp-lg);
  font-size: var(--fs-body); line-height: var(--lh-body);
  color: var(--c-text-2);
}
.footrest-adjust__block + .footrest-adjust__block {
  margin-top: clamp(32px, 3.6vw, 56px);
}
.footrest-adjust__subtitle {
  margin: 0 0 12px;
  font-family: var(--f-serif); font-weight: 600;
  font-size: clamp(17px, 1.6vw, 22px); letter-spacing: .06em;
}
.footrest-height__body,
.footrest-angle__body {
  max-width: 68ch;
  margin: 0 0 var(--sp-lg);
  font-size: var(--fs-body); line-height: var(--lh-body);
  color: var(--c-text-2);
}

/* 高さ3段階。数値を主役にし、選べる角度段階数を副情報として添える。 */
.footrest-height__list {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 1.4vw, 18px);
  margin: 0; padding: 0; list-style: none;
}
.footrest-height__list li {
  display: flex; flex-direction: column; gap: 4px;
  padding: clamp(14px, 1.8vw, 22px) clamp(10px, 1.4vw, 18px);
  border: 1px solid var(--c-line);
  border-radius: 10px;
  background: var(--c-bg-card);
  text-align: center;
}
.footrest-height__value {
  font-family: var(--f-serif); font-weight: 600;
  font-size: clamp(22px, 2.4vw, 34px); letter-spacing: .02em;
  color: var(--c-text);
}
.footrest-height__note {
  font-size: var(--fs-body-s); letter-spacing: .04em;
  color: var(--c-text-muted);
}

/* 高さ×角度マトリクス。SP は横スクロールコンテナに収め、
   **ページ全体を横スクロールさせない**。 */
.footrest-angle__scroll { overflow-x: auto; }
.footrest-angle {
  width: 100%; min-width: 380px;
  border-collapse: collapse;
  font-size: var(--fs-body);
  text-align: center;
}
.footrest-angle__caption {
  margin-bottom: 10px;
  font-size: var(--fs-body-s); letter-spacing: .08em;
  text-align: left; color: var(--c-text-muted);
}
.footrest-angle th,
.footrest-angle td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--c-line);
  line-height: var(--lh-body);
}
.footrest-angle thead th {
  border-bottom: 1px solid var(--c-line-strong);
  font-weight: 500; letter-spacing: .04em;
  color: var(--c-text-3);
}
.footrest-angle th[scope="row"] {
  width: 6.5em;
  font-weight: 500; white-space: nowrap;
  text-align: left;
  color: var(--c-text-3);
  background: var(--c-bg-figure);
}
.footrest-angle td { color: var(--c-text-2); }
.footrest-angle__off { color: var(--c-text-faint); }
.footrest-angle__note {
  margin: 12px 0 0;
  font-size: var(--fs-body-s); line-height: var(--lh-body);
  color: var(--c-text-muted);
}

/* ==========================================================================
   S06 — 上段の前後切替（Human Draft Review / 2026-08-28 で構成変更）
   --------------------------------------------------------------------------
   構成（3点）
     主 Visual  AR-06 `upper-switching.gif`（860x730）— 前後切替そのもの
     補助 1     AR-08 `uppre-thighs.jpg`   （1000x1000）— ラベル `ふくらはぎ側`
     補助 2     AR-22 `uppre-achilles.jpg` （1500x1500）— ラベル `足首側`
   レイアウト
     PC (>=768) : 2カラム。左 = 主 Visual ／ 右 = 補助2点の 2行
     SP (<768)  : 1カラム 3行（DOM 順 = GIF → ふくらはぎ側 → 足首側）
   Visual hierarchy
     主 Visual を **面積で優越**させる（右カラムの高さに合わせて伸長）。
     補助2点は **同一 aspect-ratio・同一 object-fit** で条件を揃える。
   制約
     ### AR-08 / AR-22 を耐荷重の根拠として扱わない（O-91）。
     ### Media Library の alt（`アキレス腱ケア` / `太ももケア`）を転用しない（O-98）。
     ラベルは SSOT §FAQ Row12 の語彙（`足首` / `ふくらはぎ`）のみ。説明文を足さない。
   ========================================================================== */
.footrest-upper__lead {
  max-width: 68ch;
  margin: 0 0 var(--sp-lg);
  font-size: var(--fs-body); line-height: var(--lh-body);
  color: var(--c-text-2);
}

/* SP: 1カラム。DOM 順にそのまま 3行で積む。 */
.footrest-upper__grid {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(16px, 2vw, 28px);
}
/* PC: 左（主 Visual）を広く取り、右を補助カラムにする。 */
@media (min-width: 768px) {
  .footrest-upper__grid {
    grid-template-columns: minmax(0, 1.28fr) minmax(0, 0.72fr);
    align-items: stretch;
  }
}

/* 主 Visual。SP は 4/3 の box、PC では右カラムの高さに合わせて伸長する。
   GIF の原比（860x730）を崩さないよう object-fit: contain を維持する。 */
.footrest-upper__main {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 10px;
  background: var(--c-figure-ground);
}
.footrest-upper__main img {
  width: 100%; height: 100%;
  object-fit: contain;
}
@media (min-width: 768px) {
  .footrest-upper__main { aspect-ratio: auto; height: 100%; min-height: 0; }
}

/* 補助カラム。SP では grid が 1カラムなので、そのまま 2行として積み上がる。 */
.footrest-upper__sub {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(16px, 2vw, 28px);
  min-width: 0;
}

/* 補助2点は同一サイズ・同一比率。主 Visual より小さい面積に収める。 */
.footrest-upper__figure {
  min-width: 0;
}
.footrest-upper__figure img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 10px;
  background: var(--c-figure-ground);
}
.footrest-upper__caption {
  margin: 8px 0 0;
  font-size: var(--fs-body-s); letter-spacing: .08em;
  color: var(--c-text-muted);
}

/* ==========================================================================
   S07 — 安定して支える構造
   物理仕様のみ。人物適性・身体効果へ拡張しない（HD-013-13）。
   ========================================================================== */
.footrest-stability__lead {
  max-width: 68ch;
  margin: 0 0 var(--sp-lg);
  font-size: var(--fs-body); line-height: var(--lh-body);
  color: var(--c-text-2);
}
.footrest-stability__grid {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(20px, 2.4vw, 36px);
  align-items: stretch;
}
@media (min-width: 768px) {
  .footrest-stability__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.footrest-stability__item { min-width: 0; }
.footrest-stability__figure {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 10px;
  background: var(--c-figure-ground);
  margin-bottom: 14px;
}
.footrest-stability__figure img {
  width: 100%; height: 100%;
  object-fit: cover;
}
/* 耐荷重は図版を持たない（AR-08 を耐荷重の根拠画像にしないため）。
   数値カードとして、画像側カードと視覚的な重さを揃える。 */
.footrest-stability__item--fact {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(24px, 3vw, 40px);
  border: 1px solid var(--c-line);
  border-radius: 10px;
  background: var(--c-bg-card);
}
.footrest-stability__value {
  margin: 0 0 6px;
  font-family: var(--f-serif); font-weight: 600;
  font-size: var(--fs-num); letter-spacing: .02em;
  line-height: 1.2;
  color: var(--c-text);
}
.footrest-stability__label {
  margin: 0 0 8px;
  font-size: var(--fs-body); font-weight: 500; letter-spacing: .04em;
  color: var(--c-text);
}
.footrest-stability__body {
  max-width: 56ch;
  margin: 0;
  font-size: var(--fs-body); line-height: var(--lh-body);
  color: var(--c-text-2);
}

/* ==========================================================================
   S08 — カラー
   AR-09 / 10 / 11 は 700x700 の実写（白背景寄り）。同一条件で並べる。
   ========================================================================== */
.footrest-color__lead {
  max-width: 68ch;
  margin: 0 0 var(--sp-lg);
  font-size: var(--fs-body); line-height: var(--lh-body);
  color: var(--c-text-2);
}
.footrest-color-grid {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(16px, 2vw, 28px);
}
@media (min-width: 500px) {
  .footrest-color-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.footrest-color__item { min-width: 0; }
.footrest-color__figure {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 10px;
  background: var(--c-figure-ground);
}
.footrest-color__figure img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: var(--pad-product-media);
}
.footrest-color__name {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: 10px 0 0;
  font-size: var(--fs-body-s); letter-spacing: .12em; font-weight: 600;
  color: var(--c-text-3);
}
.footrest-color__ja {
  letter-spacing: .04em; font-weight: 400;
  color: var(--c-text-muted);
}

/* ==========================================================================
   S09 — 組み立て
   ### 「工具不要」を書かない（HR-013-02）。
   AR-15 のラベル（底板 / 長いバルブ）に本文を合わせない。本文は SSOT 表記。
   ========================================================================== */
.footrest-assembly__inner {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(24px, 2.8vw, 40px);
  align-items: center;
}
@media (min-width: 768px) {
  .footrest-assembly__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}
.footrest-assembly__body { min-width: 0; }
.footrest-assembly__text {
  max-width: 68ch;
  margin: 0 0 1em;
  font-size: var(--fs-body); line-height: var(--lh-body);
  color: var(--c-text-2);
}
.footrest-assembly__text:last-child { margin-bottom: 0; }
.footrest-assembly__figure {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 10px;
  background: var(--c-figure-ground);
}
.footrest-assembly__figure img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: var(--pad-product-media);
}

/* ==========================================================================
   S10 — 専用カバー（Accessory / 別売）
   ### 「本体カラーに合わせて選べる」を書かない（HD-013-15 / O-82）。
   装着例は「作例」であり、色合わせを推奨する文脈に置かない。
   ========================================================================== */
.footrest-cover__lead {
  max-width: 68ch;
  margin: 0 0 var(--sp-lg);
  font-size: var(--fs-body); line-height: var(--lh-body);
  color: var(--c-text-2);
}
.footrest-cover__block + .footrest-cover__block {
  margin-top: clamp(32px, 3.6vw, 56px);
}
.footrest-cover__subtitle {
  margin: 0 0 14px;
  font-family: var(--f-serif); font-weight: 600;
  font-size: clamp(17px, 1.6vw, 22px); letter-spacing: .06em;
}
.footrest-cover__grid {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(16px, 2vw, 28px);
  margin-bottom: clamp(28px, 3vw, 44px);
}
@media (min-width: 500px) {
  .footrest-cover__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.footrest-cover__item { min-width: 0; }
.footrest-cover__figure {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 10px;
  background: var(--c-figure-ground);
}
.footrest-cover__figure img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: var(--pad-product-media);
}
.footrest-cover__name {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: 10px 0 0;
  font-size: var(--fs-body-s); letter-spacing: .12em; font-weight: 600;
  color: var(--c-text-3);
}
.footrest-cover__ja {
  letter-spacing: .04em; font-weight: 400;
  color: var(--c-text-muted);
}
.footrest-cover__cases-lead {
  margin: 0 0 var(--sp-lg);
  font-size: var(--fs-body); line-height: var(--lh-body);
  color: var(--c-text-2);
}
.footrest-cover__cases {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(14px, 1.8vw, 24px);
}
@media (min-width: 500px) {
  .footrest-cover__cases { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.footrest-cover__case {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 10px;
  background: var(--c-figure-ground);
}
.footrest-cover__case img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: var(--pad-product-media);
}
.footrest-cover__action { margin: clamp(28px, 3vw, 44px) 0 0; }

/* ==========================================================================
   S11 — 仕様（C-14 Specification / C-12 Business Information）
   いずれも <caption> ＋ <th scope="row">。
   AR-13 の焼き込み 344mm / 175mm を本文で引用しない（O-90）。
   ========================================================================== */
.footrest-spec__figures {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(16px, 2vw, 28px);
  margin-bottom: clamp(32px, 3.6vw, 52px);
}
@media (min-width: 500px) {
  .footrest-spec__figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.footrest-spec__figure {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 10px;
  background: #fff;
}
.footrest-spec__figure img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: var(--pad-product-media);
}
.footrest-spec__block + .footrest-spec__block {
  margin-top: clamp(28px, 3vw, 44px);
}
.footrest-spec__subtitle {
  margin: 0 0 14px;
  font-family: var(--f-serif); font-weight: 600;
  font-size: clamp(17px, 1.6vw, 22px); letter-spacing: .06em;
}
.footrest-spec__scroll { overflow-x: auto; }
.footrest-spec {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-body);
}
.footrest-spec__caption {
  margin-bottom: 10px;
  font-size: var(--fs-body-s); letter-spacing: .08em;
  text-align: left; color: var(--c-text-muted);
}
.footrest-spec th,
.footrest-spec td {
  padding: 13px 14px;
  border-bottom: 1px solid var(--c-line);
  text-align: left; vertical-align: top;
  line-height: var(--lh-body);
}
.footrest-spec th[scope="row"] {
  width: var(--w-spec-label);
  font-weight: 500; white-space: nowrap;
  color: var(--c-text-3);
  background: var(--c-bg-figure);
}
.footrest-spec td { color: var(--c-text-2); }

/* ==========================================================================
   S12 — FAQ（C-15）
   <details> / <summary>。JS に依存しない。初期状態は閉。
   <summary> 内に Heading を置かない。
   ========================================================================== */
.footrest-faq {
  border-top: 1px solid var(--c-line);
}
.footrest-faq__item {
  border-bottom: 1px solid var(--c-line);
}
.footrest-faq__q {
  display: flex; align-items: flex-start; gap: 12px;
  min-height: var(--tap);
  padding: 16px 0;
  font-size: var(--fs-body); line-height: var(--lh-head);
  color: var(--c-text);
  cursor: pointer;
  list-style: none;
}
.footrest-faq__q::-webkit-details-marker { display: none; }
.footrest-faq__q::after {
  content: "＋";
  margin-left: auto;
  font-size: 14px; color: var(--c-text-faint);
}
.footrest-faq__item[open] > .footrest-faq__q::after { content: "−"; }
.footrest-faq__q:hover { color: var(--c-primary); }
.footrest-faq__a {
  padding: 0 0 18px;
}
.footrest-faq__a p {
  max-width: 68ch;
  margin: 0;
  font-size: var(--fs-body); line-height: var(--lh-body);
  color: var(--c-text-2);
}

/* ==========================================================================
   S13 — 購入・お問い合わせ（C-06）
   価格・在庫を本文に表示しない（Shopify の責任 / HD-013-02）。
   取扱店舗 CTA は置かない（HD-013-10）。
   ========================================================================== */
.footrest-cta__block + .footrest-cta__block {
  margin-top: clamp(32px, 3.6vw, 52px);
  padding-top: clamp(28px, 3vw, 44px);
  border-top: 1px solid var(--c-line);
}
.footrest-cta__subtitle {
  margin: 0 0 10px;
  font-family: var(--f-serif); font-weight: 600;
  font-size: clamp(17px, 1.6vw, 22px); letter-spacing: .06em;
}
.footrest-cta__body {
  max-width: 68ch;
  margin: 0 0 var(--sp-lg);
  font-size: var(--fs-body); line-height: var(--lh-body);
  color: var(--c-text-2);
}
.footrest-cta__action { margin: 0; }

/* ==========================================================================
   S14 — 関連商品（C-10）
   内部リンクのため target="_blank" を付けない。
   専用カバーは S10 が持つため再掲しない（重複回避）。
   カード名は <p>（Heading 構成 H3×10 を保つため）。
   ========================================================================== */
.footrest-related__lead {
  margin: 0 0 var(--sp-lg);
  font-size: var(--fs-body); line-height: var(--lh-body);
  color: var(--c-text-2);
}
.footrest-related__grid {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(20px, 2.4vw, 36px);
}
@media (min-width: 500px) {
  .footrest-related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.footrest-related__item { min-width: 0; }
.footrest-related__figure {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 10px;
  background: var(--c-figure-ground);
}
.footrest-related__figure img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: var(--pad-product-media);
}
.footrest-related__name {
  margin: 12px 0 6px;
  font-family: var(--f-serif); font-weight: 600;
  font-size: clamp(15px, 1.4vw, 18px); letter-spacing: .04em;
}
.footrest-related__body {
  margin: 0 0 10px;
  font-size: var(--fs-body); line-height: var(--lh-body);
  color: var(--c-text-2);
}
.footrest-related__action { margin: 0; }
.footrest-related__more {
  margin: clamp(24px, 2.6vw, 36px) 0 0;
  font-size: var(--fs-body); line-height: var(--lh-body);
}

/* --------------------------------------------------------------------------
   極小幅（<=380px）の保険。
   Hero タグ・高さカード・仕様表ラベルが折り返しで壊れないようにする。
   -------------------------------------------------------------------------- */
@media (max-width: 380px) {
  .page-footrest { --w-spec-label: 7em; }
  .footrest-spec th[scope="row"] { white-space: normal; }
  .footrest-height__list { grid-template-columns: 1fr; }
  .footrest-height__list li { flex-direction: row; justify-content: space-between; align-items: baseline; text-align: left; }
}