/**
 * 固定ページ: スタジオのご案内（/showroom/）— 分類A（一枚もの）ページ固有CSS（F分類）
 * 正本: design/pages/showroom.html の <style id="page-scoped"> ＋ 末尾 .nowrap ユーティリティブロック。
 * 移植時そのまま（共有CSSは変更しない）。
 */

/* [20260821bg] ディレクター指示「house.html の『家づくりの進め方』（.step-accent）に、
   **2カラム以外を揃える**」。.step-list を .step-accent と同値にする（段組みだけ縦積みのまま）。
   ┌ 項目 ────────┬ house .step-accent ┬ .step-list（旧） ┐
   │ リスト幅        │ 720px              │ 520px            │
   │ 項目の上下padding│ 24px               │ 10px             │
   │ 丸数字          │ 18px/φ44 w200 左0 上22px │ 13px/φ30 w400 左4 上下中央 │
   │ 見出し          │ 15px w400 ls1.12px │ 15px w500 ls0.96px │
   │ 説明            │ 13px 行間1.6       │ 12px 行間2.05     │
   └────────────────┴────────────────────┴──────────────────┘
   ※2カラム（見出し左／説明右）は**採用しない**＝縦積みのまま（ディレクター指示）。
     そのため .step-accent の display:flex / gap / align-items は移植しない。
   ※丸数字の位置は house と同じ「左0・上22px」へ。項目padding が24pxに揃うため、
     数字が1行目（見出し）の高さに合う（旧＝上下中央 top:50%）。
   ※Jost ExtraLight(200) は本3ページとも読み込み済み（family=Jost:wght@200;400;500）＝
     ウェイト200にしても合成フォントにならないことを確認済み。
   ※.step-list は showroom / renovation / realestate の3ページ共通クラスのため、
     共有CSSは触らず各ページ内で上書きする。 */
.step-list{max-width:var(--c1-measure);}
.step-list__item{
  padding:24px 0 24px 62px;
}
.step-list__item::before{
  width:44px;height:44px;font-size:var(--fs-h3);
  font-weight:var(--fw-thin);
  left:0;top:22px;transform:none;
}
.step-list__item > strong{
  font-weight:var(--fw-normal);
  letter-spacing:var(--ls-2);
}
.step-list__note{
  font-size:var(--fs-caption);
  line-height:1.6;
}
/* [20260821bh] ディレクター指示「いろいろ形があるより統一されていた方がいいので、2カラムも統一」。
   .step-accent と同じ段組みにする＝SPは縦積み（折り返し）、768px以上で「見出し左／説明右」の2カラム。
   ・丸数字は position:absolute のためフレックス項目にならない（レイアウトに影響しない）
   ・見出しは flex:none + min-width:15em で列幅を固定し、説明が残りを埋める（house と同値） */
.step-list__item{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 16px;
}
.step-list__item > strong{flex:none;}
@media(min-width:768px){
  .step-list__item{padding-left:72px;align-items:center;flex-wrap:nowrap;gap:24px;}
  .step-list__item > strong{min-width:15em;}
  .step-list__note{flex:1;}
}
}
/* [20260810n] ヒーローキャッチ＝セクション見出しと同一級数（design-system.css §hero-intro の
   「キャッチ＝.section__title と同一の文字サイズ」＝2026-07-27 ディレクター指示3-1）を B確定級数で回復する。
   共有 design-system.css は .hero-intro__catch を旧C-1ペア（--fs-h2-sm 28 / --fs-h2 32）で固定しており、
   c1-theme.css §7-1 は .section__title だけを --c1-fs-h2（clamp 26〜40）へ移したため、
   PCでキャッチ32 < 見出し40、SPでキャッチ28 > 見出し26 と序列が崩れていた（実測）。
   ★恒久対応は c1-theme.css §7-1 への1行追加（全279ページ＋?v一括バンプ）＝PL/PMへ申し送り。
      本タスクは共有CSS不変の方針のため、該当12ページにページ内で同値を当てる。 */
.c1 .hero-intro__catch{font-size:var(--c1-fs-h2);letter-spacing:var(--c1-ls-h2);}

/* ============================================================================
   [20260810n] B確定トンマナ（design-rules §10）一貫性統一バッチ 適用済み
   ・級数   = --c1-fs-h2 / --c1-fs-h3 / --c1-fs-lead / --c1-fs-label-en（§10-2 L1〜L5）
   ・読み幅 = --c1-measure(720) / --c1-measure-narrow(640)（§10-5）
   ・画像幅 = 1480(--w-content) / 980 / 720 の3種のみ（§10-5）
   ・カードgap = --grid-gap(20px)／カード段組コンテナ = 980px（§10-5）
   ・セクション縦余白 = --sp-6/7/8/--sp-sec-sm の4段のみ（§10-5）
   ※本ブロック内に残る「C-1: SP22 / PC28」等のコメントは旧C-1級数時代の記述。
     現行の正は §10（B確定）＝上記トークン。
   ============================================================================ */

/* ==========================================================
   ページ固有CSS（/showroom/）
   ========================================================== */
/* できることリスト */
/* [20261019zd] 「ここで、できること」＝罫線の一覧をやめ、白い角丸のタグを中央に並べる（リノベーション「相談できること」.topic-tags と同じ形）。
   角丸の枠は線を引く動きと合わないため、一覧に data-sm-skip。 */
.can-list{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:12px;max-width:860px;margin:0 auto;padding:0;}
.can-list li{margin:0;padding:12px 24px;border:1px solid var(--c-line);border-radius:999px;background-color:var(--c-bg);font-size:var(--fs-body);line-height:1.6;text-align:center;text-wrap:balance;}
@media(max-width:767px){
  .can-list{gap:10px;}
  .can-list li{padding:10px 20px;border-radius:24px;font-size:var(--fs-caption);}
}
/* タグを中央に並べたので、下の2行も PC では中央揃えに（SP は読みやすさのため左揃えのまま）。 */
@media(min-width:768px){.can-list + p{text-align:center;}}

/* 2つのスタジオ：役割一覧カード
   20260810j: カード（.role-grid／.role-card）はQA指示②により削除＝**現在は未使用**。
   差し戻しに備えてCSSは温存する。 */
.role-grid{display:grid;gap:var(--grid-gap);}
@media(min-width:768px){.role-grid{grid-template-columns:repeat(2,1fr);max-width:980px;margin:0 auto;}}
.role-card{border:1px solid var(--c-line);padding:24px 20px;background:var(--c-bg);}
/* [20260821bi] ディレクター指摘「文字が大きい部分を調節」。
   小見出し3種が --c1-fs-h3 ＝ clamp(17px,1.5vw,22px) で、**1440pxだけ21.6px**まで伸びていた
   （768〜1024pxは下限17px＝PCだけ不連続に飛ぶ）。標準の固定トークン --fs-h3（SP16/768以上18px）へ。
   ＝house-life-id-design の .attitude__title（20260821ar）、house-process の .point-list__title
     （20260821at）と同じ扱い。 */
.role-card__name{font-size:var(--fs-h3);font-weight:500;letter-spacing:var(--ls-2);line-height:1.6;margin-bottom:4px;}
.role-card__area{font-size:var(--fs-micro);letter-spacing:.14em;color:var(--c-text-note);margin-bottom:14px;}          /* C-1: L5 */
.role-card__text{font-size:var(--fs-caption);line-height:1.9;color:var(--c-text-sub);}                                 /* C-1: L4 */

/* 拠点詳細カード（カード型・縦積み） */
/* [20260826ea] ディレクター指示（2026-08-26）「**ボックスの中は白で、ボックスの後ろに**カラーを
   つけて。consultation.html のように」。
   ----------------------------------------------------------------------------
   参照＝consultation.html「ご相談いただける場所」＝`section section--sub c1-sec--join` の**グレー帯**の中に
   `.studio{border:1px solid var(--c-line);background:var(--c-bg)}` の**白いボックス**を置く形。同じ作りに揃えた。
   ・カードの地色は **白（--c-bg）** のまま（dz でグレーにしたのを差し戻し）。
   ・**節「各拠点の詳細」に `section--sub` を付与**して、ボックスの後ろをグレーにする。
   ⚠️これで「2つのスタジオ」→「各拠点の詳細」→「ご来店までの流れ」の3節が連続してグレーになる。
     前2つは `c1-sec--join` で繋がっており「見出し＋その詳細」で1つの塊として正しいが、
     3つ目「ご来店までの流れ」との境目は色では分からなくなる（`c1-sec--air` の余白のみ）。
     → ディレクターへ報告済み。分けるなら「ご来店までの流れ」を白に戻すのが最小の手当て。 */
.base-card{
  border:1px solid var(--c-line);background:var(--c-bg);
  padding:32px 20px;max-width:980px;margin:0 auto;
}
.base-card + .base-card{margin-top:var(--sp-4);}
/* [20260821df] アンカー着地の逃げ。#base-wariishi / #base-shunan は
   ・このページ内の .role-card（前々から実装済み）
   ・about.html のスタジオごとのボタン（20260821df で追加）
   の着地点。gnav が sticky（実測 SP/PC ともレイアウト高 208px・縮小後の実バー SP162px）なので、
   逃げが無いとカード先頭がヘッダーの裏に入って見出しが見えない（既存の役割カードのリンクも同様だった）。
   --gnav-h は global-nav.js が非縮小の実測高で上書きする変数。それに 24px 足して着地させる。 */
.base-card{scroll-margin-top:calc(var(--gnav-h, 120px) + 24px);}
/* [20260826eb] ディレクター指示（2026-08-26）「『どちらの拠点でも、初めてのご相談を承っています。
   お住まいのエリアに近い拠点へどうぞ。』下のマージンを狭めて」。
   ----------------------------------------------------------------------------
   実測（1440px）＝リード下端からカード上端まで **258px** 空いていた。
   内訳＝「2つのスタジオ」節の padding-bottom **150px**（--sp-6）＋「各拠点の詳細」節の padding-top **108px**
   （--sp-sec-sm＝c1-sec--join が付けている値）。
   20260826ea で両節ともグレーになったため、この258pxが**帯の中の空白**として大きく見えるようになった。
   → 見出し節の下パディングを **0** にし、間は「各拠点の詳細」側の 108px だけにする。
     ＝**258px → 108px**。108px は §10-5 で認められた --sp-sec-sm そのもので、新しい余白値は作っていない。
     「見出し＋リード」と「その詳細」が1つのグレーの塊として続く関係も、この形のほうが素直。 */
#locations{padding-bottom:0;}
/* C-1: カード見出しは SP22 / PC28（batch1 house-quality-support .g-block>h3 と同じ扱い）。
   セクション見出し32pxを超えないことでページ内のジャンプ率の序列を保つ。 */
/* [20260826ed] ディレクター指示（2026-08-26）「consultation が整っているので、タイポはそちらに統一」。
   正本＝consultation.html の `.studio__name` / `.studio__rows`:
     名     = font-size:var(--c1-fs-h3)（§10-2 L2）・font-weight:500・letter-spacing:var(--ls-2)・line-height:1.6
     情報行 = font-size:var(--fs-caption)（13px＝L4）・color:var(--c-text-sub)
   ※`--c1-fs-h3` は clamp だが、**§10-2 が L2 として定めているトークンそのもの**。
     本日 performance.html 等でやった「clamp→固定」は“同じ役割なのにページ内で級数が割れている”のを揃える措置であり、
     3ページのスタジオ節が揃って L2 を使うのは §10-2 に沿う。中間サイズも作っていない。
   ※**揃えたのは級数・ウェイト・字間・行間・文字色のみ**。揃え（中央/左）・余白・器のレイアウトは
     ページごとの構成が違うため触っていない。 */
.base-card__name{font-size:var(--c1-fs-h3);font-weight:500;letter-spacing:var(--ls-2);line-height:1.6;text-align:center;margin-bottom:24px;}
/* [20260821bi] ご指摘の「山口エリアのメインのご相談拠点です。…」。
   --c1-fs-lead ＝ clamp(15px,1.35vw,19px) で **1440pxだけ19px**になっていた（本文は15px）。
   本日 works/interview/news/contact/faq で揃えたリードと同値（15px / 行間2.05 / 字間0.96px）へ。 */
.base-card__lead{font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:var(--ls-body);color:var(--c-text-sub);margin-bottom:36px;max-width:var(--c1-measure-narrow);margin-left:auto;margin-right:auto;}
.base-card__note{font-size:var(--fs-caption);line-height:1.9;color:var(--c-text-sub);margin-bottom:28px;max-width:var(--c1-measure-narrow);margin-left:auto;margin-right:auto;}  /* C-1: L4 */
.info-table{width:100%;border-collapse:collapse;font-size:var(--fs-caption);margin-bottom:24px;}
.info-table th{
  width:84px;text-align:left;font-weight:var(--fw-normal);
  padding:10px 8px;border-bottom:1px solid var(--c-line);
  vertical-align:top;white-space:nowrap;
}
.info-table td{padding:10px 8px;border-bottom:1px solid var(--c-line);word-break:break-word;color:var(--c-text-sub);}  /* [20260826ed] 情報行の色を consultation の .studio__rows に合わせる */
/* 拠点写真（支給写真投入 20260809a）。
   C-1 §9-2「大判 → 小組」の縦リズム：先頭の1点をカード幅いっぱいの大判に、
   残りを小組の2列に落とす。写真は原寸比3:2のまま（トリミングしない）。 */
.base-card__photos{display:grid;gap:var(--grid-gap);margin-bottom:28px;}
.base-card__photo{
  width:100%;height:auto;display:block;aspect-ratio:3/2;object-fit:cover;  /* height:auto＝width/height属性の指定を解除しaspect-ratioを効かせる */
  background:var(--c-bg-sub);   /* 読込中の白飛び防止（角丸0・影なしは不変） */
}
.base-card__photo--lead{grid-column:1/-1;}
/* 小組が1点だけになる拠点は、等幅積みにせず幅を絞って中央に置く */
.base-card__photo--solo{grid-column:1/-1;max-width:var(--c1-measure);margin-inline:auto;}
.base-card__cap{grid-column:1/-1;margin:2px 0 0;max-width:none;}  /* C-1: L4キャプション＝事実情報のみ */

/* 地図（未支給のプレースホルダ）
   20260810j QA指示③: 地図と駐車場案内を併記しない方針に変更。駐車場案内画像を削除し、
   地図は --map で親ボックス（.base-card）の幅いっぱいの1枚組にする（PCでも2列にしない）。 */
.base-card__media{display:grid;gap:var(--grid-gap);margin-bottom:28px;}
.base-card__media .ph{min-height:140px;}
.base-card__media--map{grid-template-columns:1fr;}
.base-card__media--map .ph{min-height:220px;}
.gmap-embed{display:block;width:100%;min-height:320px;border:0;}
@media(min-width:768px){
  .base-card{padding:48px 40px;}
  .base-card__photos{grid-template-columns:repeat(2,1fr);gap:var(--grid-gap);}
  .base-card__media{grid-template-columns:repeat(2,1fr);gap:var(--grid-gap);}
  .base-card__media--2col{grid-template-columns:repeat(2,1fr);}
  .base-card__media--map{grid-template-columns:1fr;}
  .base-card__media--map .ph{min-height:320px;}
}
.base-card__foot{text-align:center;}

/* あると話が進みやすいもの */
.prep-box{
  border:1px solid var(--c-line);background:var(--c-bg-sub);
  padding:24px 20px;max-width:var(--c1-measure-narrow);margin:48px auto 0;font-size:var(--fs-caption);
}
.prep-box__title{font-weight:500;font-size:var(--fs-h3);letter-spacing:var(--ls-2);margin-bottom:10px;}

/* 電話案内 */
.tel-info{font-size:var(--fs-caption);color:var(--c-text-sub);margin-top:32px;line-height:2.2;}

/* 段落ち対策ユーティリティ（基準=docs/22 §9 R08・2026-08-20）。
   本文中の <span class="nowrap"> で文節を一体で送り、最終行3字以下を防ぐ。 */
.nowrap{white-space:nowrap;}