@charset "UTF-8";
/* =============================================================
   MORE LIVING / 桶庄 リニューアル
   page.css — 2026-08-27 新設ページ専用の追加部品
     費用の目安・補助金／リノベ下層5本／会社情報4本／お問い合わせ／資料請求

   読み込み順： common → category → part → page（このファイルが最後）
   ・既存部品（.cards3 / .workcard / .navcard / .perf-card / .pt-item /
     .pt-faq / .pt-panel / .pt-lead / .concept__overlap など）は流用する。
     ここに書くのは「既存に無い型」だけ。
   ・色はトークン経由のみ。オレンジ(--accent)は押せるものだけ、
     押せない飾りは補色(--accent2)。影は使わない。
   ・本文は15px下限（英字ラベル・タグ・単位は意匠なので12px可）。
   ============================================================= */

/* ---- 0 ページ内ジャンプのチップ列 --------------------------- */
.jump-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 12px;
  margin-top:clamp(28px,3vw,40px)}
.jump-nav a{display:inline-block;font-size:14px;letter-spacing:.08em;line-height:1;
  color:var(--ink);background:var(--white);border:1px solid var(--line);
  border-radius:999px;padding:13px 24px;transition:border-color .3s ease,color .3s ease}
.jump-nav a:hover{color:var(--accent);border-color:var(--accent)}
.section-white .jump-nav a{background:var(--bg)}

/* ---- 1 文字だけのカード（.cards3 / .cards4 の中に置く） ------
   写真を持たない説明カード。白い面と余白だけで見せる（枠線・影なし）。 */
.infocard{background:var(--white);border-radius:var(--radius-lg);
  padding:clamp(26px,2.6vw,38px) clamp(22px,2.2vw,32px);
  display:flex;flex-direction:column;gap:12px}
.section-white .infocard{background:var(--bg)}
/* カードの写真（2026-08-29：文字ばかりの節に写真を入れる）。
   ⚠ .infocard は上下に内余白があるので、写真は左右いっぱいまで伸ばして「フタ」にする。 */
.infocard__media{margin:calc(-1 * clamp(26px,2.6vw,38px)) calc(-1 * clamp(22px,2.2vw,32px))
  clamp(4px,0.6vw,8px);
  aspect-ratio:4/3;overflow:hidden;border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  background:var(--bg)}
.infocard__media img{width:100%;height:100%;object-fit:cover;display:block}
/* 角丸を外した節（okeshoグループ）では写真の角も直角に */
#group .infocard__media{border-radius:0}

.infocard__no{font-family:var(--num);font-weight:300;font-size:clamp(20px,2.2vw,28px);
  line-height:1;letter-spacing:.06em;color:var(--accent2)}
.infocard__en{font-family:var(--en);font-size:12px;letter-spacing:.16em;line-height:1;
  text-transform:uppercase;color:var(--accent2)}
.infocard h3{font-size:clamp(17px,1.8vw,20px);font-weight:500;line-height:1.72;
  letter-spacing:.06em}
.infocard p{font-size:15px;line-height:2.05;letter-spacing:.05em;color:var(--sub)}
.infocard .chips{margin-top:2px}
/* カードにボタンが入るときは、文章の長短にかかわらず下ぞろえにする */
.infocard .btn-row{margin-top:auto;padding-top:6px}
.infocard .btn{padding:13px 26px;font-size:14px}
/* 4列に電話番号を入れると2行に折れる。この並びだけ小さくする。 */
.cards4 .telbox__num{font-size:clamp(22px,2.1vw,28px)}
/* 見出しだけの短いカードが混ざると高さが揃わないので、本文を下に押し出す */
.infocard--pushdown p:last-child{margin-top:auto}

/* ---- 2 2つ並べる比較カード（戸建て／マンション など） -------- */
.compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(20px,2.6vw,34px);align-items:start}
.compare__col{background:var(--white);border-radius:var(--radius-lg);
  padding:clamp(26px,2.6vw,40px) clamp(22px,2.4vw,36px)}
.section-white .compare__col{background:var(--bg)}
.compare__head{display:flex;align-items:baseline;gap:12px;
  padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:6px}
.compare__en{font-family:var(--en);font-size:12px;letter-spacing:.16em;line-height:1;
  text-transform:uppercase;color:var(--accent2)}
.compare__col h3{font-size:clamp(18px,2vw,22px);font-weight:500;letter-spacing:.08em}
/* 2026-08-28（/ ）：戸建て／マンションの比較を
   「4項目の表（範囲・自由度・管理費・駐車場）」から**文章**に変えた。
   ⚠ .compare__row（dt/dd）はこのページでしか使っていなかったので、
      表の型は残さず .compare__body に置き換えた。
   ⚠ 2枚の文章量が違う（戸建て2段落／マンション1段落）。.compare は align-items:start
      なので丈はそろわない＝それぞれの中身の高さで止まる。 */
/* /：戸建て／マンションに写真を入れたい。
   .infocard__media と同じ「カードのフタ」型を使う（新しく作らない）。
   ⚠ 負のマージンは **このカードの padding の値** で書く。.infocard の値を流用すると端がずれる。 */
.compare__media{
  margin:calc(-1 * clamp(26px,2.6vw,40px)) calc(-1 * clamp(22px,2.4vw,36px)) clamp(18px,2vw,24px);
  aspect-ratio:16/9;overflow:hidden;
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;background:var(--bg)}
.compare__media img{width:100%;height:100%;object-fit:cover;display:block}
/* ---- ローンの比較カードの項目（2026-08-31：項目にチェックアイコンを）----
   ⚠⚠ **`.compare__row` にはCSSが1行も無かった。** 2026-08-28 に戸建て／マンションを
      `.compare__body`（文章）に作り替えたとき、型ごと消したため。loan.html だけが取り残され、
      **dt も dd も同じ16px・同じ色で10行並ぶ**状態になっていた（項目名と値の区別が無い）。
      → チェックを足すついでに、**項目名（dt）と値（dd）の階層を戻した。**
   ⚠ `.compare__row` を使っているのは loan.html だけ（実測10行）。ほかのページには当たらない。
   ⚠ チェックの色は `--accent2`（飾り）。**オレンジは「押せる合図」に絞る決まり。**
   ⚠⚠ **`top` だけで縦中央は出せない。** 行送りを 1.7 と決め、`top` で1行目の中心
      （padding 14px ＋ .85em）に置いてから `translateY(-50%)` で半分戻す。
      **計測スクリプトが transform を無視すると嘘の値を返すので、実測は字面で取る。** */
.compare__row{position:relative;font-size:15px;line-height:1.7;
  padding:14px 0 14px 28px}
.compare__row + .compare__row{border-top:1px solid var(--line)}
.compare__row::before{content:"";position:absolute;left:0;
  top:calc(14px + .85em);transform:translateY(-50%);
  width:16px;height:16px;background:var(--accent2);
  -webkit-mask:var(--chk-ico) no-repeat center/contain;
          mask:var(--chk-ico) no-repeat center/contain}
.compare__row dt{font-size:15px;letter-spacing:.08em;color:var(--sub);line-height:1.7}
.compare__row dd{font-size:16px;letter-spacing:.05em;color:var(--ink);line-height:1.9;margin-top:2px}

.compare__body{padding-top:14px}
.compare__body p{font-size:15px;line-height:2.05;letter-spacing:.05em;color:var(--ink)}
.compare__body p + p{margin-top:clamp(12px,1.3vw,18px)}

/* ---- 3 沿革（年表） ----------------------------------------
   年と本文の2列。左の縦罫にノードを打つ。 */
.tl{max-width:900px;margin-inline:auto;border-left:1px solid var(--line);
  padding-left:clamp(24px,3vw,44px)}
.tl__row{position:relative;display:grid;
  grid-template-columns:minmax(0,190px) minmax(0,1fr);
  gap:6px clamp(18px,2.2vw,34px);padding:clamp(18px,2vw,26px) 0}
.tl__row + .tl__row{border-top:1px solid var(--line)}
.tl__row::before{content:"";position:absolute;
  left:calc(-1 * clamp(24px,3vw,44px) - 4px);top:calc(clamp(18px,2vw,26px) + 12px);
  width:7px;height:7px;border-radius:50%;background:var(--accent2)}
.tl__yr{font-size:15px;letter-spacing:.06em;line-height:1.9;color:var(--ink)}
.tl__yr small{display:block;font-family:var(--num);font-size:12px;letter-spacing:.1em;
  color:var(--accent2);margin-top:2px}
.tl__txt{font-size:15px;line-height:2.05;letter-spacing:.05em;color:var(--sub)}
.tl__txt em{font-style:normal;color:var(--ink)}

/* ---- 4 定義リスト（会社概要・保証の範囲など） ---------------- */
.deflist{display:grid;gap:0}
.deflist__row{display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr);
  gap:6px clamp(18px,2.2vw,34px);
  padding:clamp(17px,1.8vw,22px) 0;border-bottom:1px solid var(--line)}
.deflist__row:first-child{border-top:1px solid var(--line)}
.deflist__row dt{font-size:15px;letter-spacing:.08em;line-height:1.9;color:var(--ink)}
.deflist__row dd{font-size:15px;line-height:2.05;letter-spacing:.05em;color:var(--sub)}
.deflist__row dd .chips{margin-top:4px}
.deflist--2col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 clamp(30px,4vw,64px);align-items:start}
.deflist--2col .deflist__row:nth-child(2){border-top:1px solid var(--line)}

/* ---- 5 数字タイル ------------------------------------------- */
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,2.6vw,34px);margin-top:clamp(34px,4vw,52px)}
.stat{background:var(--white);border-radius:var(--radius-lg);
  padding:clamp(26px,2.8vw,38px) clamp(18px,2vw,28px);text-align:center}
.section-white .stat{background:var(--bg)}
.stat__num{font-family:var(--num);font-weight:300;font-size:clamp(42px,5.4vw,68px);
  line-height:1;letter-spacing:.02em;color:var(--ink)}
.stat__unit{font-family:var(--sans);font-size:16px;letter-spacing:.08em;
  color:var(--accent2);margin-left:5px}
.stat__cap{font-size:15px;line-height:1.9;letter-spacing:.05em;color:var(--sub);
  margin-top:14px}

/* ---- 6 絞り込みチップ（スタッフ紹介） ------------------------
   ワイヤーの filterbar。ここでは飾り（実際の絞り込みはCMS実装時）。 */
.filterbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px}
.filterbar + .filterbar{margin-top:16px}
.filterbar__label{font-size:14px;letter-spacing:.1em;color:var(--sub);
  margin-right:6px;white-space:nowrap}
.fchip{display:inline-block;font-size:14px;letter-spacing:.06em;line-height:1;
  color:var(--ink);background:var(--white);border:1px solid var(--line);
  border-radius:999px;padding:12px 20px;transition:border-color .3s ease,color .3s ease}
.section-white .fchip{background:var(--bg)}
.fchip:hover{color:var(--accent);border-color:var(--accent)}
.fchip.is-on{background:var(--ink);border-color:var(--ink);color:var(--white)}
.fchip.is-on:hover{color:var(--white)}

/* ---- 7 スタッフカード --------------------------------------- */
/* 2026-08-29：**写真の下の白い箱をやめる。背景は地の色のまま**（塗らない）。
   ⚠ 箱をやめるなら**写真を4隅とも丸める**。角丸はもともとカード側の
     `border-radius`＋`overflow:hidden` で作っていたので、そのままだと
     **写真の下2角だけ直角**で残り、箱が消えかけているように見える。
   ⚠ **本文の左右パディングも外す**。残すと写真の左端と文字の左端がずれる。 */
.staffcard{background:none;display:flex;flex-direction:column}
.staffcard__media{aspect-ratio:3/4;overflow:hidden;background:var(--bg);
  border-radius:var(--radius-lg)}
.staffcard__media img{width:100%;height:100%;object-fit:cover}
.staffcard__body{padding:clamp(16px,1.8vw,22px) 0 0;display:flex;flex-direction:column;gap:11px}
/* 所属と職種は「読ませる文字」なので15px下限（2026-08-27） */
.staffcard__cat{font-size:15px;letter-spacing:.1em;line-height:1.7;color:var(--accent2)}
.staffcard__name{font-size:clamp(18px,2vw,22px);font-weight:500;letter-spacing:.14em}
.staffcard__name small{font-family:var(--en);font-size:12px;letter-spacing:.12em;
  color:var(--accent2);margin-left:10px}
.staffcard dl{display:grid;gap:5px}
.staffcard dl + dl{margin-top:9px}
.staffcard dt{font-size:12px;letter-spacing:.1em;line-height:1.6;color:var(--accent2)}
.staffcard dd{font-size:15px;line-height:1.95;letter-spacing:.05em;color:var(--sub)}

/* スタッフ一覧は1行4枚・すきま60px（2026-08-29／当初は5枚・26px）。
   ⚠ 読ませる文章は入らないので、カードは写真＋所属/職種＋氏名＋資格チップまで。
     文章は詳細ページ側へ。
   ⚠ すきまを広げるぶんは列を1つ減らして受ける。5列のまま60pxにすると
     カードが192pxまで痩せて、職種名（インテリアコーディネーター）が折れて崩れる。
     4列にすると 1440px で 1枚282px＝5列のとき(241px)より広い。
   ⚠⚠ クラス名は `.cards4` にしてはいけない。**`.cards4` は category.css:539 にある汎用の4列**
      （すきま26px・works/nav/shop/infoカード用）で、18ページが使っている。
      2026-08-29 に `.cards5` をここへ改名したとき衝突し、page.css を読む
      **service / shops / showroom / contact の4ページのすきまが 26px → 60px に変わっていた**
      （page.css のほうが後に読まれるため）。スタッフ用は `.staffgrid` に閉じる。 */
.staffgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(16px,4.2vw,60px)}
.staffgrid .staffcard__body{padding:clamp(14px,1.4vw,18px) 0 0;gap:9px}
.staffgrid .staffcard__name{font-size:clamp(17px,1.4vw,19px)}
.staffgrid .staffcard__name small{margin-left:8px}
.staffgrid .pt-chips{gap:7px 8px}
.staffgrid .pt-chips .tag{padding:5px 11px}
@media (max-width:1000px){ .staffgrid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:640px){
  .staffgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* ⚠⚠ 白い箱をやめた（＝`overflow:hidden` が無くなった）ので、
       `.nobr` の長い職種名（インテリアコーディネーター＝195px）が
       SPのカード幅(375pxで160px)を超えて**はみ出す**。
       箱があったころは切れて見えなかっただけで、**溢れは前からあった**
       （`cdp.py` の realScroll が true になる／overN には出ない）。
       SPだけ折り返しを許す。幅が足りるときは normal でも折り返さない。 */
  .staffgrid .staffcard__cat .nobr{white-space:normal}
  .staffgrid .staffcard__cat{word-break:auto-phrase}
}

/* ---- 8 店舗カード ------------------------------------------- */
/* 2026-08-29：カードの中のボタンは**並列（横並び）**で。
   ⚠ 縦に折れていた直接の原因は `.btn-row{flex-wrap:wrap}` に対して器が狭いこと。
     ボタン2つで 302px 要るのに、1440px でも器（body の内側）は 248px しかなかった。
   ⚠ **`.cards4` のクラス名衝突でカードが 308→282px まで痩せていた**のも重なっていた（別途修正済み）。
   直し方＝(a) カードの中のボタンだけ左右の余白を詰めて 302→198px にする
          (b) **1400px以下は2列**にして器を広げる（`#shops` は4枚なので 2×2 で収まりもよい）。
     ⚠ 1400 という数字は実測で決めた。4列で並ぶには器（.btn-row）が 230px 要り、
       そのためにカード幅299px＝ページ幅1400pxが必要。1200 で切ると 1201〜1400 が縦に折れたまま残る。
     ⚠ 2026-08-29 に Showroom 節と合体して **7枚**になったので、4列→2列だと 2,2,2,1 で縦に伸びる。
       あいだに3列を挟む。3列でボタンが並ぶ下限も実測＝**1050px**（器226pxでは 4px 足りず折れる）。
   ⚠ SP（640px以下）はカードが160pxしかないので縦に積む。ここは横に並べようがない。 */
/* ⚠ ボタンの大きさは `#showrooms`（3枚のほう）と揃える。同じ「詳細を見る／来店を予約する」の
     組が2か所に出るので、片方だけ小さいとカードごとに別部品に見える。列の変更だけ #shops に閉じる。 */
.shopcard .btn-row{gap:8px}
.shopcard .btn-row .btn{padding-inline:10px}
@media (max-width:1400px){ #shops .cards4{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:1050px){ #shops .cards4{grid-template-columns:repeat(2,minmax(0,1fr))} }
/* ⚠ 640px以下は**1列**。理由は2つ。
     (1) 店舗の住所・電話・営業時間は「読ませる」情報で、2列（375pxでカード160px）だと
         「〒463-0003　名/古屋市守山区下/志段味5-413」と5行に折れて読めない。
         合体前、ショールームの3枚は `.cards3` でSPは1列だった＝**合体で読みにくくしない**。
     (2) 560で切ると **561〜640 の帯だけボタンが縦に折れる**（カード247px＝器187pxで
         ボタン2つの230pxに足りない）。640まで1列にすれば全幅でボタンが並ぶ。 */
@media (max-width:640px){ #shops .cards4{grid-template-columns:1fr} }

/* ---- お問い合わせ（/contact/ #channels）は5枚 -------------
   汎用 .cards4 は4列（category.css）。5枚だと4+1で最後が1枚だけ浮く。
   #shops（7枚）と同じ作法＝IDでこの節だけ列数を独自に持たせる。
   2026-09-25：5枚だと2行目（2枚）が左に寄って見えるとの指摘。grid の justify-content:center は
   最終行だけを中央に置けない（この案件で何度も踏んだ罠）。#troubles .cards4 と同じ
   flex + justify-content:center に変えて、3枚＋2枚のどちらの行も中央に来るようにした。 */
#channels .cards4{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(16px,2vw,26px)}
#channels .cards4 > *{flex:0 1 calc((100% - 2 * clamp(16px,2vw,26px)) / 3);min-width:0}
@media (max-width:1050px){ #channels .cards4 > *{flex-basis:calc((100% - clamp(16px,2vw,26px)) / 2)} }
@media (max-width:640px){ #channels .cards4 > *{flex-basis:100%} }
.shopcard{background:var(--white);border-radius:var(--radius-lg);overflow:hidden;
  display:flex;flex-direction:column}
.section-white .shopcard{background:var(--bg)}
.shopcard__media{aspect-ratio:16/10;overflow:hidden;background:var(--bg)}
.shopcard__media img{width:100%;height:100%;object-fit:cover}
.shopcard__body{padding:clamp(22px,2.2vw,30px);display:flex;flex-direction:column;gap:12px;
  flex:1}
.shopcard__name{font-size:clamp(18px,2vw,22px);font-weight:500;letter-spacing:.1em}
.shopcard__area{font-size:15px;letter-spacing:.08em;line-height:1.8;color:var(--accent2)}
.shopcard__addr{font-size:15px;line-height:2;letter-spacing:.04em;color:var(--sub)}
/* 展示タグの有無でボタンの高さがズレる（名古屋中央店はタグなし）。
   下ぞろえは chips ではなくボタン側に持たせる。 */
.shopcard .chips{padding-top:4px}
.shopcard .btn-row{margin-top:auto;padding-top:16px}
.shopcard .btn{padding:13px 26px;font-size:14px}

/* ---- 9 価格の一覧（費用の目安・補助金） ----------------------
   .pt-item を流用しつつ、流れる枠でなくグリッドで置く。
   ⚠ .pt-lineup は flex＋animation なので、必ずこの修飾クラスで打ち消す。 */
.pt-lineup--grid{display:grid;width:auto;animation:none;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(18px,2vw,30px)}
.pt-lineup--grid .pt-item{flex:0 0 auto;margin-right:0;margin-top:0;margin-bottom:0}
.pt-lineup--grid .pt-item:nth-child(odd),
.pt-lineup--grid .pt-item:nth-child(even){margin-top:0;margin-bottom:0}
.price-block + .price-block{margin-top:clamp(60px,7vw,96px)}
/* 2026-08-28：イラストの右に「Kitchen ／ キッチン」の2段で置く。
   （旧＝en と 和文を横並びのベースラインぞろえ） */
.price-block__head{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;
  padding-bottom:16px;border-bottom:1px solid var(--line);
  margin-bottom:clamp(24px,2.6vw,34px)}
/* ⚠ 枠は正方にしない。まな板（1091×569＝比1.92）は横長すぎて、正方の枠に
      √面積をそろえて収めようとすると幅が枠を1.08倍はみ出す（実測）。
      枠を横長（高さ×1.2）にして、素材は「高さ」で出し分ける。 */
.price-block__icon{flex:0 0 auto;display:grid;place-items:center;
  --ich:clamp(52px,4.4vw,68px);width:calc(var(--ich) * 1.2);height:var(--ich)}
/* ⚠ 同じ寸法を当てても「同じ大きさ」には見えない。縦横比がばらばらだから
      （まな板1.92／シャワー0.77／便器0.74／鏡0.70）。
      √(幅×高さ) がそろうように出し分ける＝ 高さ% ＝ 78 ÷ √(横÷縦)。
      実測の√面積は 52.7 / 53.1 / 52.8 / 53.2 でそろう（枠68pxのとき）。 */
/* ⚠ 高さを % で書かないこと。SVGのimgに対して % 高さが期待どおりに解決せず、
      その数値が「幅」に効いてしまう（実測：height:89% が幅81.6pxの89%＝72.6pxになった）。
      枠の高さ --ich から calc で実寸を出す。 */
.price-block__icon img{width:auto;height:calc(var(--ich) * .56);display:block}  /* 比1.92：まな板 */
.price-block__icon--h89 img{height:calc(var(--ich) * .89)}   /* 比0.77：シャワー */
.price-block__icon--h91 img{height:calc(var(--ich) * .91)}   /* 比0.74：便器 */
.price-block__icon--h93 img{height:calc(var(--ich) * .93)}   /* 比0.70：鏡 */
.price-block__label{display:flex;flex-direction:column;gap:6px}
.price-block__en{font-family:var(--en);font-size:12px;letter-spacing:.16em;line-height:1;
  text-transform:uppercase;color:var(--accent2)}
.price-block__title{font-size:clamp(20px,2.4vw,28px);font-weight:500;letter-spacing:.08em;
  line-height:1.2}
.price-block__incl{font-size:15px;line-height:1.9;letter-spacing:.04em;color:var(--sub);
  flex:1 1 100%}

/* ---- 10 フォーム -------------------------------------------- */
.form-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  max-width:680px;margin:0 auto clamp(34px,4vw,50px);gap:0}
.form-step{text-align:center;padding:16px 8px;border-bottom:2px solid var(--line);
  color:var(--sub)}
.form-step.is-on{border-bottom-color:var(--ink);color:var(--ink)}
.form-step__en{display:block;font-family:var(--en);font-size:12px;letter-spacing:.14em;
  line-height:1;text-transform:uppercase;color:var(--accent2);margin-bottom:8px}
.form-step.is-on .form-step__en{color:var(--accent)}
.form-step__ja{font-size:15px;letter-spacing:.08em;line-height:1.6}

.form-card{max-width:880px;margin-inline:auto;background:var(--white);
  border-radius:var(--radius-lg);padding:clamp(28px,3.4vw,56px)}
.section-white .form-card{background:var(--bg)}
.form-field + .form-field{margin-top:clamp(24px,2.6vw,34px)}
.form-field > label,
.form-field__label{display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  font-size:15px;letter-spacing:.08em;line-height:1.7;color:var(--ink);margin-bottom:11px}
.req{font-size:12px;letter-spacing:.1em;line-height:1;color:var(--white);
  background:var(--accent);border-radius:999px;padding:5px 10px}
.opt{font-size:12px;letter-spacing:.1em;line-height:1;color:var(--sub);
  border:1px solid var(--line);border-radius:999px;padding:4px 10px}
.form-input,
.form-card select,
.form-card textarea,
.form-card input[type="text"],
.form-card input[type="tel"],
.form-card input[type="email"],
.form-card input[type="date"],
.form-card input[type="file"]{
  width:100%;font-family:var(--sans);font-size:16px;line-height:1.9;letter-spacing:.05em;
  color:var(--ink);background:var(--bg);border:1px solid var(--line);
  border-radius:var(--radius);padding:15px 18px;transition:border-color .3s ease}
.section-white .form-card select,
.section-white .form-card textarea,
.section-white .form-card input{background:var(--white)}
.form-card textarea{min-height:170px;resize:vertical}
.form-card select{appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23736B63' stroke-width='1.2'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 18px center;background-size:12px 8px;
  padding-right:44px}
.form-card :is(input,select,textarea):focus{outline:none;border-color:var(--accent)}
.form-card :is(input,select,textarea)::placeholder{color:var(--sub);opacity:.7}
.form-note{font-size:15px;line-height:1.9;letter-spacing:.04em;color:var(--sub);
  margin-top:10px}
.form-checks{display:flex;flex-wrap:wrap;gap:12px 26px}
.form-check{display:flex;align-items:center;gap:10px;font-size:15px;letter-spacing:.05em;
  line-height:1.8;color:var(--ink);cursor:pointer}
.form-check input{width:19px;height:19px;flex:0 0 19px;accent-color:var(--accent);
  cursor:pointer}
.form-agree{margin-top:clamp(28px,3vw,40px);padding-top:clamp(24px,2.6vw,32px);
  border-top:1px solid var(--line);text-align:center}
.form-agree .form-check{justify-content:center}
.form-agree a{text-decoration:underline;text-underline-offset:4px}
.form-card .btn-row{margin-top:clamp(26px,3vw,38px)}
.form-card .btn.primary{min-width:280px}

/* ---- 11 連絡先の大きな電話番号 ------------------------------ */
.telbox{display:flex;flex-direction:column;gap:8px}
.telbox__num{font-family:var(--num);font-weight:300;font-size:clamp(30px,3.6vw,44px);
  line-height:1.2;letter-spacing:.04em;color:var(--ink)}
.telbox__num:hover{color:var(--accent)}
.telbox__hours{font-size:15px;line-height:1.95;letter-spacing:.05em;color:var(--sub)}

/* ---- 12 資料カード（資料請求） ------------------------------ */
/* 2026-08-30：一覧から詳細へ遷移できるようにしたので、カードは <a>。
   ⚠ a は inline なので display:block を明示する。
   ⚠ 押せる合図は `.workcard` と同じ「見出しがオレンジになる」だけ。
     **写真の hover 拡大は使わない**（このサイト全体の決めごと）。 */
/* ⚠ `display:block` から縦のflexに変えた（合図を下端にそろえるため）。
     `.infocard .btn-row{margin-top:auto}` と同じ作法。
   ⚠ **写真は `flex:0 0 auto` で守る。** flex item は既定で縮むので、
     これが無いと本文の多いカードで 4:3 の写真が潰れる。 */
.doccard{display:flex;flex-direction:column;background:var(--white);
  border-radius:var(--radius-lg);overflow:hidden}
.doccard__media{flex:0 0 auto}
.doccard__body{flex:1 1 auto}
/* ⚠ `.doccard` は document / renovation-full / renovation-used では **<div>のまま**（リンク先が無い）。
   `a` を付けずに書くと、押せないカードまでホバーで色が変わる＝嘘の合図になる。 */
a.doccard:hover h3{color:var(--accent)}
/* 2026-08-31：features.html のカードがリンクだと分かりづらい。
   ⚠ **合図が hover の見出し色だけだった＝止まっている状態では何も出ていない。**
     指で触る画面には hover が無いので、そこでは合図がゼロになる。
   ⚠ 新しい見た目は作らない。**このサイトが既に持っている「続きの合図」＝ `.eventcard__more`
     （View more →）と同じ形にそろえる**（13px・英字・字間.12em・墨色 → hoverでオレンジ）。
   ⚠ `.doccard` は document / renovation-full / renovation-used では `<div>`（リンク先が無い）。
     **そちらには span を置いていない**＝押せないカードに「続きの合図」を出さない。
   ⚠ `.doccard__body` は flex+gap:11px。上に 8px 足して、段落どうしの間隔と見分けがつくようにする。 */
/* ⚠ **カードの高さは grid でそろうが、本文の量は違う。**
     合図が本文の直後にあると3枚で高さがバラバラに見える → 下端にそろえる。 */
.doccard__more{display:inline-flex;align-items:center;gap:.5em;margin-top:auto;padding-top:8px;
  font-family:var(--en);font-size:13px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink);font-weight:300}
a.doccard:hover .doccard__more{color:var(--accent)}
.section-white .doccard{background:var(--bg)}
.doccard__media{aspect-ratio:4/3;overflow:hidden;background:var(--bg)}
.doccard__media img{width:100%;height:100%;object-fit:cover}
.doccard__body{padding:clamp(22px,2.2vw,30px);display:flex;flex-direction:column;gap:11px}
.doccard h3{font-size:clamp(17px,1.8vw,20px);font-weight:500;letter-spacing:.08em}
.doccard p{font-size:15px;line-height:2.05;letter-spacing:.05em;color:var(--sub)}

/* ---- 14 重ね組版の左右反転 ----------------------------------
   .concept__overlap は「写真が右・白ボックスが左」。同じページで
   2回以上使うと単調になるので、反転版を用意する。
   ⚠ 反転は width と left/right の入れ替えだけ。box の垂直中央寄せ
     （margin-block:auto）は触らない。 */
.concept__overlap--flip .concept__photo{margin-left:0;margin-right:auto}
.concept__overlap--flip .concept__box{left:auto;right:0}
@media (max-width:900px){
  .concept__overlap--flip .concept__photo{margin-inline:auto}
}

/* ---- 15 2列グリッド（.cards3 の2枚版） ----------------------- */
.cards2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(20px,2.6vw,34px);align-items:stretch}
@media (max-width:767px){.cards2{grid-template-columns:minmax(0,1fr)}}

/* ---- 16 重ね組版：箱が写真より背が高いときの溢れ止め ----------
   ⚠ .concept__box は absolute なので、行の高さは写真だけで決まる。
     本文が長いと箱が上下にはみ出す（TOPの #concept とキッチンの .pt-intro で
     実際に踏んだ罠）。写真と同じマスに置いて、行の高さを「高いほう」に決めさせる。
     写真の aspect-ratio:3/2 は残す＝箱が短いときの見た目は従来どおり。
   新設ページの重ね組版には必ず --fit を付ける。 */
@media (min-width:881px){
  .concept__overlap--fit{display:grid;grid-template-columns:1fr;align-items:center}
  .concept__overlap--fit .concept__photo{grid-area:1/1;align-self:stretch}
  .concept__overlap--fit .concept__box{grid-area:1/1;position:static;
    align-self:center;justify-self:start;margin-block:0}
  .concept__overlap--fit.concept__overlap--flip .concept__box{justify-self:end}
}

/* ---- 17 FV写真の見せどころ ---------------------------------
   .page-hero--cover は object-fit:cover の中央合わせ。人物写真だと
   頭が切れるので、写真ごとに上下の寄せを指定できるようにする。 */
.phero__cover--t18{object-position:center 18%}
.phero__cover--t28{object-position:center 28%}
.phero__cover--t38{object-position:center 38%}
.phero__cover--b65{object-position:center 65%}

/* ---- 18 節の中で塊を離すときの余白（インラインstyleを使わないため） ---- */
.gap-lg{margin-top:clamp(48px,5.4vw,76px)}

/* ---- 19 リード写真（21:9）の見せどころ -----------------------
   縦長の素材を21:9で敷くと人物の頭が切れる。写真ごとに寄せを指定する。 */
.pt-lead__photo--t15 img,.pt-lead__photo--t15 video{object-position:center 15%}
.pt-lead__photo--t30 img,.pt-lead__photo--t30 video{object-position:center 30%}

/* ---- 13 レスポンシブ（※ベース定義より後＝ここ） -------------- */
@media (max-width:1180px){
  .pt-lineup--grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:900px){
  .stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
  .stat{padding:24px 12px}
  .deflist--2col{grid-template-columns:minmax(0,1fr)}
  .deflist--2col .deflist__row:nth-child(2){border-top:0}
}
@media (max-width:860px){
  .pt-lineup--grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .compare{grid-template-columns:minmax(0,1fr)}
  .tl__row{grid-template-columns:minmax(0,1fr)}
  .tl__yr small{display:inline-block;margin:0 0 0 10px}
}
@media (max-width:767px){
  .deflist__row{grid-template-columns:minmax(0,1fr)}
  .form-steps{max-width:none}
  .form-step__ja{font-size:15px;letter-spacing:.02em}
  .stats{grid-template-columns:minmax(0,1fr)}
  .stat__num{font-size:44px}
  .form-card .btn.primary{min-width:0;width:100%}
  .jump-nav a{padding:11px 18px}
}
@media (max-width:600px){
  /* 重ね組版の見出しはSPで30px/50px固定のまま（既存ページは .intro / #concept に
     個別指定がある）。新設ページ用の指定をここで足す。 */
  .concept__overlap--fit .concept__title{font-size:24px;line-height:42px}
  .pt-lineup--grid{grid-template-columns:minmax(0,1fr)}
  .filterbar__label{flex:1 1 100%;margin-bottom:2px}
}

/* ---- 資金計画（renovation-shikin）「まとめて相談できます」の6項目 --------------
   2026-08-28：意匠は **お風呂の替えどきと同じ2カラム**（.pt-timing2）にそろえる。
   左＝写真スライド／右＝6項目を縦積み。丸の中身はイラスト6点。
   ⚠ お風呂は3項目、ここは6項目＝右カラムの丈が倍。写真の器はそのぶん縦に寄るので、
      写真は「縦に切っても主役が残る」絵柄を選ぶ（外観の引きの絵は左右が落ちる）。 */

/* ⚠ お風呂の丸（56〜72px）はシャワー・窓のような「モノ1つ」の絵が入る前提の寸法。
      ここは書類＋電卓＋矢印のような「場面の絵」で、線の数が多く小さいと潰れる。
      #advise だけ丸を一回り大きくする。左列が太くなるぶんは本文の折り返しで実測して決めた。 */
#advise .pt-timing2{--tic:clamp(74px,6.2vw,104px)}

/* ⚠ 6点は縦横比がばらばら（1.11〜1.52）。同じ幅で置くと「大きさが違って見える」ので、
      見かけの大きさ＝√面積 をそろえる式で幅を出し分ける（幅% = 56 × √(横÷縦)）。
      part.css の円アイコン（ic-*.svg）と同じ考え方。 */
#advise .perf-card__icon img{width:63%}                          /* 既定（比1.25前後） */
#advise .perf-card__icon img[src$="il-money.svg"]{width:69%}     /* 1134×748＝比1.52 */
#advise .perf-card__icon img[src$="il-baikyaku.svg"]{width:65%}  /* 1029×772＝比1.33 */
#advise .perf-card__icon img[src$="il-ie.svg"]{width:63%}        /*  933×728＝比1.28 */
#advise .perf-card__icon img[src$="il-zeikin.svg"]{width:64%}    /*  816×634＝比1.29 */
#advise .perf-card__icon img[src$="il-paper.svg"]{width:63%}     /*  915×734＝比1.25 */
#advise .perf-card__icon img[src$="il-hojyokin.svg"]{width:59%}  /*  822×742＝比1.11 */

/* ⚠⚠ 丸を grid-row:1/-1 で全行にまたがせると、1行目が丸の高さまで膨らむ。
      実測：grid-template-rows が「96px 66.5px 41.25px」になり、見出し(36.8px)の下に
      59px の死に空間ができた（お風呂は行数が多く中身も高いので表に出ていなかった）。
      → #advise では丸を行送りから外して絶対配置にし、本文は素直な縦組みに戻す。
      top は .pt-timing2 のカード上余白と同じ値（1枚目だけ 0）。 */
#advise .pt-timing2 .perf-card{display:block;position:relative;
  padding-left:calc(var(--tic) + clamp(13px,1.3vw,18px))}
#advise .pt-timing2 .perf-card__icon{position:absolute;left:0;
  top:clamp(20px,2.1vw,28px);grid-row:auto}
#advise .pt-timing2 .perf-card:first-child .perf-card__icon{top:0}

/* ⚠⚠ 写真を右カラムの丈まで伸ばす（part.css の既定）と、6項目では器が縦長になりすぎる。
      実測：1680で 975×1418＝比0.688、1280で 737×1447＝比0.510。
      3:2 の写真を比0.51の器に cover で入れると幅の34%しか使わず、絵が別物になる
      （担当者と書類の写真が「手のアップ」になった）。
      → #advise では伸ばさず 3:2 のまま置き、読み進める間ついてくる（sticky）。
      ⚠ body に overflow-x:hidden があると sticky は効かない（下の common.css 側の対応）。
      top は追従ヘッダー（padding 22px＋中身）の下に出る値。 */
#advise .pt-timing2{align-items:start}
#advise .pslide{position:sticky;top:clamp(88px,10vh,116px);align-self:start;height:auto}
#advise .pslide__track{height:auto;min-height:0;aspect-ratio:3/2}

/* カードの直後にボタン列が来る。注記（.pt-note）が無いので間が詰まる。 */
#advise .pt-timing2 + .btn-row{margin-top:clamp(34px,3.8vw,52px)}
/* ⚠ 見出しと本文のジャンプ率（2026-08-28）。
      .perf-card の既定は h3=16px／p=15px ＝ 比1.07 でほぼ差が無い。
      お風呂の替えどきは h3 の下に大きな数字（.pt-yrs）が入るのでそちらが跳ねを作るが、
      #advise は数字が無いので、見出し自身に跳ねを持たせる（比 1.3〜1.5）。 */
#advise .perf-card h3{font-size:clamp(19px,1.9vw,23px);line-height:1.6;
  margin-top:0;margin-bottom:clamp(8px,0.9vw,12px)}
#advise .perf-card p{line-height:1.95}
#advise .perf-card p + p{margin-top:clamp(8px,0.9vw,12px)}
/* 最終行に1〜2文字だけ残る「泣き別れ」を潰す。
   ⚠ 実測（2026-08-28・字面＝Range.getClientRects）：balance 無しだと
      1680で2件・1440で1件・1280で3件・390で2件・360で4件、最終行が1行目の1割前後になっていた
      （「物件とリノベーションの予算配 / 分」など）。左ぞろえでも balance は効く。
   ⚠ pretty は効かない（前回の実測どおり）。3行までの短い段落にしか効かないが全部その範囲。 */
#advise .perf-card h3, #advise .perf-card p{text-wrap:balance}
/* 引用の問いかけは途中で割らない（「水／まわり」と割れていた）。
   ⚠ 長い語に当てると狭い幅ではみ出す。当てるのは十数字までの短い引用だけ。
      最長は「今の家を売って住み替えたい」＝14字≒210px。SPのカード内幅より狭いことを実測で確認する。 */
#advise .perf-card .nobr{white-space:nowrap}

/* ---- 資金計画：ローンカードのイラスト（2026-08-28・/ ）----
   支給＝デザイン素材/pic/リフォーム写真/illust/money.svg・paper.svg（線画・背景なし）。
   .infocard は flex column ＋ gap:12px なので、Case 01 ラベルの上に1枚置くだけでよい。
   ⚠ 既存の ic-*.svg（替えどきの丸の中身）より情報量が多い絵なので、アイコンより大きく取る。
      小さくすると電卓の数字や紙幣の文字が潰れて何の絵か分からなくなる。 */
/* ⚠ 幅でそろえてはいけない。money は 1134×748（比1.52）、paper は 915×734（比1.25）で、
      同じ幅にすると高さが 108px と 131px に分かれ、下の「CASE 01 / 02」が23pxずれる（実測）。
      **高さ**でそろえると行頭がそろい、見かけの大きさ（√面積）の差も1割に収まる。 */
/* ⚠ .infocard は flex column（既定 align-items:stretch）。width:auto のままだと
      img がカード幅いっぱい（687px）に伸び、SVGが中で letterbox されて左に寄らない。
      align-self:flex-start で止める。 */
/* 2026-08-28（/ ）：イラストは**右端**に置く。
   ⚠ .infocard は flex column なので、左右の寄せは align-self で決まる。
      flex-end にすると、カードの padding-right（1680で32px）までで止まる＝
      「右端」＝本文の右の版面と面がそろう位置。padding を無視して端まで出さない。 */
#loan .infocard__illust{height:clamp(84px,7vw,112px);width:auto;
  align-self:flex-end;display:block}

/* 費用の目安：商品カードを1段の流れるスライドに（2026-08-28）。
   見せ方は reform-kitchen の PRICE と同じ＝.pt-lineup-marquee。
   ⚠ .pt-lineup-marquee は 100vw の全幅で、margin-inline:calc(50% - 50vw) で
      .wrap の外へ出る。見出し（.price-block__head）は wrap の中のまま。
   ⚠ 1組の枚数は「偶数」にすること。ジグザグ（nth-child odd/even）が
      継ぎ目で位相反転して段差が出る。浴室5枚・洗面3枚は2組ぶん並べて偶数にしてある。 */
#price .price-block .pt-lineup-marquee{margin-top:0}

/* ---- 中古購入＋リノベ（renovation-used）：リライト 2026-08-28 ----------
   ⚠ 原稿の見出しはどれも1行で来る。既存markupを真似て <br> を入れると、
      幅の狭い .concept__box では「まで、／で、／…」のように語中で割れる（実測：
      3行 [420, 47, 307]px＝2行目が47px）。**<br> は入れず balance に任せる。**
   ⚠ #onestop / #inspection はこのページ固有のid。リードの .intro は他ページにもあるので
      :has でこのページに限定する（サイト内で :has は既に使用実績あり）。 */
#onestop .concept__title,
#inspection .concept__title,
body:has(#onestop) .intro .concept__title{text-wrap:balance}
/* 本文・カード見出しも同じ理由で最終行が1〜2文字になる（実測：5幅で22件）。
   ⚠ .workcard__title / .workcard__cat は全ページ共通の部品なので、
      :has(#onestop) でこのページだけに閉じる（他ページの改行位置を動かさない）。 */
body:has(#onestop) .concept__lead,
body:has(#onestop) .doccard__body p,
body:has(#onestop) .workcard__title,
body:has(#onestop) .workcard__cat,
body:has(#onestop) .pt-close,
body:has(#onestop) .pt-note{text-wrap:balance}

/* ---- お問い合わせ：Contact と 4 channels を1つの節に合体（2026-08-28）----
   「4 channels までが遠くて離脱する」ため、リードの節と統合した。
   見出しは Contact の1つに畳み、「ご相談しやすい方法を、お選びください。」は
   リードの3行目に降ろしてある（＝カードの直前の一言）。
   ⚠ id="channels" は contact.html にしか無いので、このスコープでページに閉じている。
   リードが3段落になるので、段落の間だけ詰める（.sec-lead 既定の24px→14px）。
   ⚠ 見出し直下の1段落目は24pxのまま（＋隣接セレクタなので2段落目以降にしか当たらない）。 */
#channels .sec-lead + .sec-lead{margin-top:14px}
/* ⚠ リードは狭い幅で語中で割れる（実測 390px「無料／です。」・375px「無／料です。」）。
   balance で行の長さをそろえると読点で切れる。⚠ pretty は効かない（実測済み）。 */
#channels .sec-lead{text-wrap:balance}
/* で見出しが「お気軽にお問い合わせください」（13字）になった。360px以上は1行に収まるが、
   320pxだけ枠(280px)に入らず「お問い／合わせ」と語中で割れる（13字×22px×1.06＝303px）。
   ⚠ 1行に収めるのが正。balance で2行に割ると和文の切れ目は守られない。
      19pxなら 13×19×1.06＝262px で収まる（見出しなので本文16pxの下限には掛からない）。 */
@media (max-width:359px){ #channels .sec-title{font-size:19px} }

/* ---- 性能向上リノベ：耐震の節（#earthquake）の調整----
   ⚠ id="earthquake" は renovation-performance.html にしか無いので、このスコープでページに閉じている。
   ⚠ 反映前に before 値を実測して突き合わせた：
      overlap の margin＝0（コメントの「0 0 0 0」と一致）／h2＝38px（同「38px」と一致）＝要素の取り違えなし。 */
/* 写真＋白箱の下に余白を足す。before は 14px しか空いておらず、次の見出しが張りついていた。 */
#earthquake .concept__overlap{margin-bottom:80px}
/* （同じ指示が2件）見出しを 38px → 28px。
   ⚠ .sec-title は clamp(22px,3vw,38px)。**指示の38pxはPCでの計算値**なので、
      28px を「上限」に置き換える。ベタで28pxにするとSPが 22→28 と逆に大きくなる。 */
#earthquake .sec-head:has(+ .pt-troubles-marquee) .sec-title{font-size:clamp(22px,3vw,28px)}
/* 「ここの余白は少し狭くして」。見出しとマーキーの間（1680で70px）を詰める。
   ⚠ ピンは .wrap に付いていて場所が一意でない。コメントの並び順（overlap→この見出しのh2→ここ→
      マーキー内のh3）から、この見出しの下と読んだ。**要確認。** */
#earthquake .sec-head:has(+ .pt-troubles-marquee){margin-bottom:clamp(24px,2.8vw,42px)}

/* ---- 修繕・緊急修理（reform-shuzen）--------------------------
   2026-08-28 新設。ワイヤーVer2 No.42。 */

/* 対応していること＝ことばだけを並べる。飛び先が無いので**リンクにしない**
   （押せそうに見えるのに押せない、を作らない）。 */
.fixlist{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(12px,1.4vw,18px);margin-top:clamp(28px,3vw,40px);
}
.fixlist li{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(18px,1.9vw,24px) clamp(14px,1.5vw,20px);
  font-size:15px;letter-spacing:.06em;line-height:1.7;text-align:center;color:var(--ink);
}
.section-white .fixlist li{background:var(--bg)}
@media (max-width:900px){ .fixlist{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:480px){ .fixlist li{font-size:14px;padding:16px 12px} }

/* 電話の箱を節のまん中に置くとき（.infocard の中ではない使い方） */
.section > .wrap > .telbox{align-items:center;text-align:center;margin-top:clamp(26px,3vw,38px)}

/* ---- サイトマップ（sitemap.html）------------------------------
   2026-08-29 新設。列の数は中身に合わせて自動で折り返す。 */
.sitemap{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(32px,4vw,64px) clamp(24px,3vw,48px);
}
/* 2026-08-29：コンテンツが見づらいのでデザイン調整。
   罫はすでに列見出しの下に入っている（線は足さない）。効くのは「グループの頭を立てる」ことと
   「リンクを読める大きさにする」こと。列の見出し 15.5 → 17px、リンク 14 → 15px。
   ⚠ 3カラムの本文は15pxが下限（web-font-sizing）。14pxは列の見出しより小さく、
     リンクが地に沈んでいた。 */
.sitemap__head{
  font-size:17px;font-weight:500;letter-spacing:.06em;color:var(--ink);
  padding-bottom:12px;margin-bottom:18px;border-bottom:1px solid var(--line);
}
.sitemap ul{display:flex;flex-direction:column;gap:11px}
.sitemap li{position:relative;padding-left:16px}
/* ⚠ と同じ直し（メガメニューの .mm-list-in と同じ部品）。
   top だけでは中心は出ない。行送りを明示 → top で行の中心まで下ろす → transform で丸の半分を戻す。 */
.sitemap li{line-height:1.85}
.sitemap li::before{content:"";position:absolute;left:0;top:.925em;
  transform:translateY(-50%);
  width:5px;height:5px;border-radius:50%;background:var(--accent2)}
.sitemap a{font-size:15px;color:var(--sub);letter-spacing:.04em;line-height:1.75}
.sitemap a:hover{color:var(--accent)}
@media (max-width:900px){ .sitemap{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .sitemap{grid-template-columns:minmax(0,1fr)} }

/* ---- 店舗詳細（shop-*.html）------------------------------------
   2026-08-29 新設。「店舗一覧の"詳細を見る"から飛ぶページを、
   現行サイト（moreliving.co.jp/shop/*）の構成で」。 */

/* 読めない値は入れられないので、固定の店舗名は入力欄のまま色だけ落とす */
.form-card input[readonly]{color:var(--sub);cursor:default}
.form-card input[readonly]:focus{border-color:var(--line)}

/* 店内写真：正方形で並べる */
.shopgal{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(12px,1.6vw,22px)}
.shopgal__item{aspect-ratio:1/1;overflow:hidden;border-radius:var(--radius);background:var(--bg)}
.shopgal__item img{width:100%;height:100%;object-fit:cover;display:block}

/* 店長から、ひとこと
   ⚠ 2026-08-29：横幅をもう少し狭く。器いっぱい(1310px)だと本文が1行60字を超えて読めない。
     960px に絞ると本文は 662px＝**44字/行**になる（写真240＋すきま64を引いた残り）。
     ⚠ 器の幅ではなく「本文が1行何字になるか」で決める。写真列240＋すきま64は固定なので、
       器を狭めたぶんはそのまま本文の幅から引かれる。日本語本文は35〜45字が読みやすい。 */
.shopchief{display:grid;grid-template-columns:minmax(200px,240px) 1fr;
  gap:clamp(28px,4vw,64px);align-items:start;
  max-width:960px;margin-inline:auto}
.shopchief__side{text-align:center}
.shopchief__av{width:clamp(150px,17vw,220px);aspect-ratio:1/1;margin-inline:auto;
  border-radius:50%;overflow:hidden;background:var(--bg)}
.shopchief__av img{width:100%;height:100%;object-fit:cover;display:block}
.shopchief__name{margin-top:16px;font-size:19px;font-weight:500;letter-spacing:.12em}
.shopchief__name small{display:block;margin-top:6px;font-size:15px;font-weight:400;
  letter-spacing:.08em;color:var(--sub)}
.shopchief__p{font-size:16px;line-height:2.1;letter-spacing:.05em}
.shopchief__p + .shopchief__p{margin-top:18px}
.shopchief__ttl{margin-top:clamp(26px,3vw,38px);margin-bottom:14px;
  font-size:17px;font-weight:500;letter-spacing:.08em}

/* スタッフ紹介
   2026-08-29：切り抜きの集合写真をやめ、スタッフ一覧と同じカードで出していた。
   ⚠ 2026-08-31に**会社案内と同じ流れるカード帯**へ差し替え。
     カードは `.procard`（`.pt-troubles-marquee` / `.pro-marquee`）に移ったので、
     ここに残るのはリード文の中央寄せだけ。`.shopstaff__cards` と `.shopstaff .btn-row` は撤去した。 */
.shopstaff{text-align:center}
.shopstaff__lead{font-size:16px;line-height:2.1;letter-spacing:.05em}

/* 店舗情報の表：横に広げすぎると th と td が離れて読めない */
.shopinfo{max-width:880px;margin-inline:auto}
.shopinfo .spec-table th{width:30%}
.shopinfo .pt-note{margin-top:clamp(16px,2vw,24px);text-align:center}

/* アクセス（地図）
   ⚠ 2026-08-29：高すぎるので低く。16:9 は器いっぱい(1310px)だと **737px** になり、
     1画面が地図で埋まっていた。
   ⚠ **比率ではなく高さで決める。** 比率を幅ごとに切り替えると、境界で高さが逆転する
     （16/6→16/9 に切り替えた 900px で 341px → 461px と跳ねた）。
     clamp の高さなら 375px→260 / 900px→306 / 1440px→489 と、幅に対して単調に増える。 */
.shopmap{height:clamp(260px,34vw,500px);
  overflow:hidden;border-radius:var(--radius-lg);background:var(--bg)}
.shopmap iframe{width:100%;height:100%;border:0;display:block}
.shopmap__note{max-width:880px;margin:clamp(18px,2.2vw,26px) auto 0;
  font-size:15px;line-height:2;letter-spacing:.04em;color:var(--sub);text-align:center}

/* イベント個別ページ「会場のご案内」：.shopmap の直後に .btn-row が来ると
   一般の .btn-row は上余白が無いため地図に貼り付いて見える。
   .pt-note + .btn-row（part.css）と同じ間隔で揃える。 */
.shopmap + .btn-row{margin-top:clamp(28px,3.2vw,42px)}

/* 施工エリア図・駐車場案内図（2026-09-25 → 2026-09-25 改修）
   ⚠ 旧版は見出し・凡例・市町村名・注記までSVG画像の中に文字として描いていた。
   画像内の文字はSEOで読まれず、縮小すると判読できなくなる問題があったため、
   「地図（道路・行政区画の色分け・店舗ピン・番号バッジ・方位記号）だけを画像にし、
   見出し・凡例・リスト・注記は実テキストにする」構成に作り直した。
   画像から文字が無くなったぶん縮小しても判読性の問題が起きないため、900px以下の
   横スクロール表示は不要になり、通常のレスポンシブ縮小（width:100%）に一本化した。 */
.areamap__head{text-align:center;margin-bottom:clamp(28px,3.4vw,40px)}
.areamap__lead{color:var(--sub);font-size:15px;line-height:2;margin-top:10px}
.areamap__frame{border-radius:var(--radius-lg);overflow:hidden;background:var(--white)}
.areamap__frame img{width:100%;height:auto;display:block}
.areamap__note{max-width:880px;margin:clamp(18px,2.2vw,26px) auto 0;
  font-size:15px;line-height:2;letter-spacing:.04em;color:var(--sub);text-align:center}
.areamap__foot{max-width:680px;margin:clamp(14px,1.8vw,18px) auto 0;
  font-size:15px;line-height:2;letter-spacing:.04em;color:var(--sub);text-align:center}

/* 施工エリア：地図＋番号キーを左、市町村名リストを右に置く2カラム */
.areamap__body{display:grid;grid-template-columns:minmax(0,560px) 1fr;
  gap:clamp(28px,4vw,56px);align-items:start}
.areamap__pins{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 18px;
  margin-top:clamp(16px,2vw,22px)}
.areamap__pins li{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--ink)}
.areamap__pins .pin{flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;background:#A68A74;color:var(--white);
  font-size:12px;font-weight:500;letter-spacing:0}
.areamap__swatches{display:flex;flex-wrap:wrap;gap:10px 22px;
  margin-top:clamp(14px,1.8vw,18px);padding-top:clamp(14px,1.8vw,18px);
  border-top:1px solid var(--line)}
.areamap__swatches li{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--sub)}
.areamap__swatches .sw{width:14px;height:14px;border-radius:3px;flex:none}
.areamap__swatches .sw--full{background:#CEB8A6}
.areamap__swatches .sw--partial{background:#E5D8CB}
.areamap__swatches .sw--building{background:var(--accent2)}
.areamap__swatches .sw--parking{background:#B6C4BA}

.areamap__districts h4{font-size:18px;font-weight:500;color:var(--ink);
  display:flex;align-items:baseline;gap:10px}
/* ⚠ 12pxより下げない（全社のフォントサイズ規定の下限）。2026-09-26まで11pxだった。 */
.areamap__districts .areamap__pref-en{font-family:var(--en);font-size:12px;
  letter-spacing:.16em;color:var(--accent2-ink)}
.areamap__districts p{font-size:15px;line-height:2;color:var(--sub);margin-top:10px}
.areamap__pref + .areamap__pref{margin-top:clamp(22px,2.6vw,30px)}
.areamap__districts hr{border:0;border-top:1px solid var(--line);
  margin:clamp(18px,2.2vw,24px) 0}

@media (max-width:900px){
  .areamap__body{grid-template-columns:1fr;gap:clamp(24px,4vw,32px)}
}

/* 駐車場案内：周辺図／拡大図の2パネル */
.areamap__panels{display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(20px,2.6vw,28px);align-items:start}
.areamap__panel-title{font-size:16px;font-weight:500;color:var(--ink);
  margin-bottom:clamp(10px,1.4vw,14px)}
@media (max-width:700px){
  .areamap__panels{grid-template-columns:1fr}
}

/* ---- エリアマップ・駐車場マップへの指摘（2026-09-26）----------
   ⚠ どれも `.areamap` を使うページ（/shops/ と 店舗詳細7ページ＝2026-09-29〜）の話。
     `.concept__lead` は18ページで使う共通部品なので、**マップが続くときだけ**に絞る
     （`:has(+ .areamap)`。この書き方はサイト内で既に使っている＝`.troubles #timing:has(+ .pt-timing2)`）。
   ⚠ 901px を境にしているのは、`.areamap__body` が900pxで1カラムに変わるのに合わせたため。 */

/* 店舗一覧：リード文とエリアマップのあいだを空ける（32px → PC120 / SP80） */
.pt-lead__body:has(+ .areamap) .concept__lead:last-child{margin-bottom:80px}
/* 店舗詳細：地図の注記と駐車場マップのあいだを空ける（0 → PC80 / SP53） */
.shopmap__note:has(+ .areamap){margin-bottom:53px}
@media (min-width:901px){
  .pt-lead__body:has(+ .areamap) .concept__lead:last-child{margin-bottom:120px}
  .shopmap__note:has(+ .areamap){margin-bottom:80px}
}

/* 都道府県ごとの市町村：行間 30→28px（15px × 1.87）／中央寄せ→左そろえ／
   見出しとの間は PC だけ 10→15px（スマホは10pxのまま）。
   ⚠ 中央寄せは祖先（節の .center）から来ている。この段落だけ左に戻す。 */
.areamap__districts p{line-height:1.87;text-align:left}
@media (min-width:901px){ .areamap__districts p{margin-top:15px} }

/* パネルの見出しの先頭にオレンジの● */
.areamap__panel-title{display:flex;align-items:center;gap:8px}
.areamap__panel-title::before{content:"";flex:none;width:8px;height:8px;
  border-radius:50%;background:var(--accent)}

/* 拡大図パネルの凡例（店舗建物／駐車場）は上の罫を引かない。
   ⚠ 店舗一覧の凡例（対応エリア／一部対応）は罫を残す＝`.areamap__panel` の中だけに絞る。 */
.areamap__panel .areamap__swatches{border-top:0}

@media (max-width:900px){
  .shopgal{grid-template-columns:repeat(3,minmax(0,1fr))}
  .shopchief{grid-template-columns:1fr;gap:clamp(22px,4vw,32px);justify-items:center}
  /* ⚠ 1カラムになると max-width:960px が効かなくなる（器のほうが狭い）ので、
       本文だけに上限を掛ける。無いと 900px 幅で 55字/行になる。 */
  .shopchief__body{width:100%;max-width:700px}
}
@media (max-width:560px){
  .shopgal{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---- 会社案内（company.html）------------ */

/* 代表のポートレートは縦。器の既定（3:2）のままだと顔が切れる。
   2026-08-29：大きすぎるので幅を 76% → 38%（上限440px）に。
   箱（46%）と1割ほど重なる関係は残す＝重ね組版の見え方は変えない。 */
.concept__photo--portrait{width:clamp(280px,38%,440px);aspect-ratio:3/4}
@media (max-width:900px){
  .concept__photo--portrait{width:min(70%,340px);margin-inline:auto;aspect-ratio:4/5}
}

/* 見出しの英字ラベルの位置に、グループのロゴを置く */
.eyebrow--logo{display:block;line-height:0}
.eyebrow--logo img{height:clamp(26px,2.6vw,34px);width:auto;display:inline-block}
.sec-head.center .eyebrow--logo{text-align:center}

/* ブランドカードの英字ラベルの位置に、各ブランドのロゴを置く。
   ロゴは縦横比がばらばら（横長・正方形）なので、高さでそろえる。 */
.infocard__logo{display:flex;align-items:center;min-height:48px}
.infocard__logo img{height:44px;width:auto;display:block}
/* ロゴ画像が未支給のブランドは、届くまでテキストで仮置きする（showroom.html #okesho-group） */
.infocard__logo--text{display:flex;align-items:center;min-height:48px;
  font-size:20px;font-weight:600;letter-spacing:.02em;color:var(--ink)}
.infocard__logo--text.small{min-height:24px;font-size:14px;font-weight:500}

/* OKESHOグループ：4R（showroom.html #okesho-group・2026-09-25） */
.rbox{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(16px,2.4vw,32px);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(18px,2.2vw,26px) clamp(20px,2.6vw,32px);margin-top:clamp(28px,3.4vw,40px)}
.rbox__num{font-family:var(--num);font-weight:300;font-size:clamp(30px,3vw,38px);
  color:var(--accent);flex:none;line-height:1}
.rbox__list{display:flex;flex-wrap:wrap;gap:clamp(12px,1.8vw,26px);list-style:none;margin:0;padding:0}
.rbox__list li{font-size:14px;color:var(--sub)}
.rbox__list b{color:var(--ink);font-weight:600}
.rbox__list span{margin-left:2px}

/* OKESHOグループ：4R を「中心＋4つの円を点線でつなぐ図」に（2026-09-26）
   ------------------------------------------------------------
   左に図・右に説明の2カラム。横1列の箱（.rbox）は使わなくなったが、
   ほかで使うかもしれないので定義は残してある。
   ⚠ 円の位置は **中心の座標** で指定し、自分の半分を translate で戻す。
     大きさを変えるときは「中心どうしの距離 > 半径の合計」を必ず確かめること
     （対角なので距離は √2 倍＝満たさないと円が食い込む）。
     いまの値＝距離 √(26²+26²)=36.8%／半径の合計 15+16=31%。
   ⚠ 点線は円の下に敷き、中心から中心まで引く。**円は地の色で塗って**線を隠す
     （白抜きのままだと線が円の中を突き抜ける）。地が白の節では白に差し替える。
   ⚠ 円の中の文字は最小12px（全社のフォントサイズ規定）。これ以上小さくしない。 */
/* 白いボックスで囲い、上辺から縦線を1本出して前の節とのつながりを見せる（2026-09-26）。
   ⚠ 幅を決めて中央に置く。器（.wrap）は1680pxまで広がるので、そのままだと
     右の文章が節のリード文（920px・中央寄せ）より画面の端まで張り出して、
     右だけ余白が無いように見える（1920pxで実測：リード文は1420で止まるのに1728まで伸びていた）。
     1180px＝内側の余白を引くと、リード文の左右から100pxずつ外に出る幅になる。
   ⚠⚠ 縦線は **枠の ::before**。中の .rdiag は grid なので、そこに ::before を足すと
     「もう1つのマス」になって列がずれる。枠を1枚かませているのはそのため。
   ⚠ 線のぶんの余白を上に確保する（margin-top が線より短いと前の文章に重なる）。
   ⚠ 線は **枠の上辺をまたぐ**。外に出る長さと内側に入る長さを同じにするので、
     高さは外に出る長さの2倍、`top` は外に出る長さぶんだけ上へ（＝真ん中が上辺に重なる）。
     `top` と `height` の clamp は**同じ画面幅で頭打ちになる組**にしてある（片方だけずらさない）。 */
.rdiag-frame{position:relative;max-width:1180px;margin:clamp(64px,7vw,96px) auto 0;
  background:var(--white);border-radius:var(--radius-lg);
  padding:clamp(24px,3vw,44px) clamp(20px,3vw,44px)}
.rdiag-frame::before{content:"";position:absolute;left:50%;top:clamp(-56px,-4.4vw,-40px);
  width:1px;height:clamp(80px,8.8vw,112px);background:var(--accent2);transform:translateX(-50%)}
.rdiag{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(24px,4vw,72px);align-items:center}
.rdiag__fig{position:relative;width:100%;max-width:520px;aspect-ratio:1;margin-inline:auto}
.rdiag__lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.rdiag__lines line{stroke:var(--accent2);stroke-width:.5;stroke-linecap:round;stroke-dasharray:.5 2.8}
.rdiag__core,.rdiag__node{position:absolute;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;border-radius:50%;aspect-ratio:1;line-height:1.5}
.rdiag__core{left:50%;top:50%;width:30%;background:var(--sub);color:var(--white);
  font-family:var(--num);font-weight:300;font-size:clamp(24px,2.7vw,36px);letter-spacing:.02em}
.rdiag__node{width:32%;background:var(--white);border:1px solid var(--line);padding:8px}
/* ⚠ 円は flex なので、**素のテキストも1つの行になる**。英字を <b>R</b> と地の文に
   分けたままだと「R」だけが別行に落ちる（2026-09-26に実測）。必ず1つの箱で包む。 */
.rdiag__en{font-size:13px;font-weight:500;letter-spacing:.01em;color:var(--ink)}
.rdiag__en b{font-weight:700}
.rdiag__ja{margin-top:3px;font-size:12px;color:var(--sub)}
/* ⚠ 円は地の色で塗って点線を隠す。枠が白になったので既定を白にした（地がクリームの節でも枠は白）。 */
.rdiag__node--tl{left:24%;top:24%}
.rdiag__node--tr{left:76%;top:24%}
.rdiag__node--bl{left:24%;top:76%}
.rdiag__node--br{left:76%;top:76%}
.rdiag__text{font-size:15px;line-height:2.05;color:var(--sub)}
.rdiag__text p + p{margin-top:1em}
@media (max-width:900px){
  /* 縦に積むと図が横いっぱいまで伸びて円が大きくなりすぎるので、図の幅を抑える */
  .rdiag{grid-template-columns:1fr;gap:clamp(22px,4vw,34px)}
  .rdiag__fig{max-width:400px}
}

/* OKESHOグループ：ライフステージ別（showroom.html #okesho-group・2026-09-25）
   ⚠ 年代の写真は未支給。無理に他ページの写真を流用すると年代と写真が食い違うため、
     バッジ＋文言だけで組んである（写真は素材が届き次第 .lifecard__photo を足す）。 */
.lifegrid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  gap:clamp(14px,1.6vw,22px);margin-top:clamp(20px,2.4vw,30px)}
.lifecard{text-align:center;padding:clamp(16px,1.8vw,22px) 10px;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--white)}
.lifecard__cat{margin-top:10px;font-size:14px;font-weight:500;color:var(--ink);line-height:1.6}
.lifecard__brand{margin-top:14px;min-height:26px;display:flex;align-items:center;justify-content:center}
.lifecard__brand img{height:22px;width:auto}
.lifecard__note{margin-top:6px;font-size:12px;line-height:1.6;color:var(--sub)}
@media (max-width:1050px){ .lifegrid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:560px){ .lifegrid{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* OKESHOグループ：ライフステージを輪にした図（showroom #okesho-group・2026-09-26）
   ------------------------------------------------------------
   20代→70代を時計回りにたどる輪。横並びの6枚カード（.lifegrid）から作り替えた。
   ⚠ 円の位置は「半径35%・60度おき」の極座標から出した**固定値**。中心の座標で置いて、
     translate で自分の半分を戻す。大きさを変えるときは
     **円の角半幅 asin(円の半径/35) < 矢印の弧の始まり24度** を保つこと
     （いま＝円の直径27%→半径13.5%→22.7度。ここを超えると矢印が円に食い込む）。
   ⚠ 矢印のSVGは円の**下**に敷き、円は地の色で塗る（白抜きのままだと弧が円を突き抜ける）。
   ⚠ 円の中の文字は最小12px（全社のフォントサイズ規定）。 */
.ringdiag{margin-top:clamp(28px,3.6vw,48px)}
/* ⚠⚠ 回すと、**描いてある円盤は広がらないのに要素の外接矩形は√2倍になる**。
   ブラウザは外接矩形で横幅を測るので、1024pxと768pxで横スクロールが出ていた（実測11px・62px）。
   ここで切り落とす。切るのは回す前の正方形の外＝**円盤は正方形の内側（直径97%）にあるので何も欠けない**。
   `hidden` ではなく `clip`（スクロールの器を作らないので、中や祖先の sticky を殺さない）。
   ⚠ 狭い画面では円盤と枠の余りが2pxしかない。`overflow-clip-margin` で12pxだけ外へ逃がす
     （12pxなら回した角が戻ってくることはない＝外接矩形は√2倍＝数百px大きいので）。 */
.ringdiag{overflow:clip;overflow-clip-margin:12px}
.ringdiag__fig{position:relative;width:100%;max-width:820px;aspect-ratio:1;margin-inline:auto}
.ringdiag__arrows{position:absolute;inset:0;width:100%;height:100%;color:var(--accent2);overflow:visible}
.rd-arc{fill:none;stroke:currentColor;stroke-width:.45;stroke-linecap:round}
/* 輪の中央に置く文言。塗りも線も持たせない（4Rの図の塗った中心と役割を分ける）。
   ⚠ 幅は**円に囲まれた空き（半径 35%−13.5%＝21.5%）の内側**に収める。はみ出すと円に重なる。
   ⚠ 折り返す位置は語の切れ目に任せる（<br> を入れない）。 */
.ringdiag__core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:21%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.ringdiag__core-en{font-family:var(--en);font-size:12px;letter-spacing:.08em;color:var(--accent2-ink)}
.ringdiag__core-ja{margin-top:6px;font-size:clamp(15px,1.5vw,18px);font-weight:600;color:var(--ink);
  line-height:1.5;word-break:auto-phrase}
.ringdiag__node{position:absolute;transform:translate(-50%,-50%);width:27%;aspect-ratio:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  border-radius:50%;background:var(--white);border:1px solid var(--line);padding:10px}
/* グループが関わる年代。輪郭を濃くして、外に薄い輪をもう1本置く */
.ringdiag__node.is-brand{border-color:var(--accent2);box-shadow:0 0 0 8px rgba(186,162,149,.14)}
.ringdiag__age{font-family:var(--num);font-weight:300;font-size:clamp(18px,1.8vw,24px);
  color:var(--accent-ink);line-height:1}
.ringdiag__cat{margin-top:8px;font-size:14px;font-weight:500;color:var(--ink);line-height:1.6}
.ringdiag__brand{margin-top:8px;font-size:12px;line-height:1.5;color:var(--sub)}
.ringdiag__node--1{left:50.00%;top:15.00%}
.ringdiag__node--2{left:80.31%;top:32.50%}
.ringdiag__node--3{left:80.31%;top:67.50%}
.ringdiag__node--4{left:50.00%;top:85.00%}
.ringdiag__node--5{left:19.69%;top:67.50%}
.ringdiag__node--6{left:19.69%;top:32.50%}
/* 輪をゆっくり回す（2026-09-26）。
   ⚠ 円の中の文字は読めないといけないので、**輪と同じ速さで逆に回して**立てたままにする。
   ⚠ 円の位置指定は transform:translate(-50%,-50%) で作っている。transform は後から
     上書きされるので、**逆回転のキーフレームにも translate を書く**（書かないと円が飛ぶ）。
   ⚠ 描いてあるのは円盤（直径＝枠の97%）なので、回しても見た目の幅は増えない＝はみ出さない。
   ⚠ 触れている間は止める（読みたいときに止まる）。動きを減らす設定では回さない。 */
@keyframes rd-spin{to{transform:rotate(360deg)}}
@keyframes rd-spin-node{to{transform:translate(-50%,-50%) rotate(-360deg)}}
.ringdiag__fig{animation:rd-spin 90s linear infinite}
.ringdiag__node,.ringdiag__core{animation:rd-spin-node 90s linear infinite}
.ringdiag__fig:hover,
.ringdiag__fig:hover .ringdiag__node,
.ringdiag__fig:hover .ringdiag__core{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){
  .ringdiag__fig,.ringdiag__node,.ringdiag__core{animation:none}
}

@media (max-width:760px){
  /* 輪をやめて2列に積む。輪のままだと円が小さくなりすぎて年代の説明が入らない。
     ⚠ 位置指定（left/top）は position:static にすれば効かなくなるので打ち消し不要。
     ⚠⚠ 2列だと円は170px前後。14pxのままだと「住み替え・二世帯同居」「お住まいのリフォーム」が
        **円の輪郭を突き抜ける**（横スクロールは出ないので数値では気づけない。見て分かった）。
        文字は12pxまで落とす（全社のフォントサイズ規定の下限）。 */
  .ringdiag__fig{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:clamp(10px,2.6vw,18px);aspect-ratio:auto;max-width:460px}
  .ringdiag__arrows{display:none}
  /* ⚠ 2列に積むときは回転も止める（位置を transform で作っていないので、回すと文字が傾く） */
  .ringdiag__fig,.ringdiag__node,.ringdiag__core{animation:none}
  .ringdiag__node{position:static;transform:none;width:auto;padding:8px}
  /* 輪をやめると中央が無くなる。同じ文言はすぐ上の見出しにあるので、ここでは出さない。 */
  .ringdiag__core{display:none}
  .ringdiag__age{font-size:18px}
  .ringdiag__cat{margin-top:6px;font-size:12px;line-height:1.55}
  .ringdiag__brand{margin-top:6px;font-size:12px}
  /* ⚠ 12pxでも1行が円の直径いっぱいになって、輪郭をかすめる（数値では「中に入っている」が、
     見ると線に触れている）。行の幅を絞って2行に折る。折る位置は語の切れ目に任せる
     （<br> を入れない＝文言が変わると位置がずれる）。 */
  .ringdiag__cat,.ringdiag__brand{max-width:74%;margin-inline:auto;word-break:auto-phrase}
}

/* 決めごとの丸は、イラストではなく番号を入れる */
.perf-card__icon--num{font-family:var(--num);font-weight:300;
  font-size:clamp(20px,1.9vw,26px);letter-spacing:.04em;color:var(--accent2);
  background:var(--white);line-height:1}
.section-paper .perf-card__icon--num{background:var(--white)}

/* ---- 沿革（company.html #history）横スクロールのタイムライン ----
   2026-08-29。参考＝支給のキャプチャ。
   軸は1本の横線。年はその上、カードは点線でぶら下がる。
   ⚠ 送りボタンは**枠の外**に置く（中に置くとスクロールで流れていく）。 */
.tlx{position:relative;--tlx-axis:52px;--tlx-drop:56px}
.tlx__nav{position:absolute;right:0;top:calc(-1 * clamp(52px,5vw,74px));
  display:flex;gap:12px}
.tlx__btn{width:clamp(46px,4vw,56px);aspect-ratio:1;border-radius:50%;
  background:var(--white);border:1px solid var(--line);cursor:pointer;
  display:grid;place-items:center;transition:border-color .3s ease,background .3s ease}
.tlx__btn::before{content:"";width:16px;height:10px;background:var(--ink);
  -webkit-mask:var(--arw) center/contain no-repeat;mask:var(--arw) center/contain no-repeat;
  --arw:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 14'%3E%3Cpath d='M0 7h21M15 1l6 6-6 6' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E")}
.tlx__btn[data-tlx-prev]::before{rotate:180deg}
.tlx__btn:hover{border-color:var(--accent)}
.tlx__btn:hover::before{background:var(--accent)}
.tlx__btn[disabled]{opacity:.35;cursor:default;border-color:var(--line)}
.tlx__btn[disabled]:hover::before{background:var(--ink)}

/* 横スクロール枠。⚠ scroll-padding-inline が無いと、送った先の1枚目が左端に張りつく */
.tlx__scroll{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  scroll-padding-inline:0;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;
  padding-bottom:6px}
.tlx__scroll::-webkit-scrollbar{height:6px}
.tlx__scroll::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.tlx__track{position:relative;display:flex;gap:clamp(18px,2vw,28px);
  width:max-content;padding-top:0}
/* 横の軸線（トラックといっしょに流れる） */
.tlx__track::before{content:"";position:absolute;left:0;right:0;top:var(--tlx-axis);
  height:1px;background:var(--accent2);opacity:.55}

.tlx__col{position:relative;flex:0 0 clamp(258px,23vw,330px);scroll-snap-align:start;
  padding-top:calc(var(--tlx-axis) + var(--tlx-drop))}
/* 年（軸の上） */
.tlx__yr{position:absolute;left:0;top:0;font-family:var(--num);font-weight:400;
  font-size:16px;letter-spacing:.1em;line-height:1;color:var(--ink)}
/* 軸の上の点 */
.tlx__dot{position:absolute;left:0;top:calc(var(--tlx-axis) - 5px);
  width:11px;height:11px;border-radius:50%;background:var(--ink)}
/* 点からカードへ伸びる縦の点線 */
.tlx__col::before{content:"";position:absolute;left:5px;top:calc(var(--tlx-axis) + 6px);
  height:calc(var(--tlx-drop) - 6px);border-left:1px dotted var(--accent2)}

.tlx__card{background:var(--white);border-radius:var(--radius-lg);
  padding:clamp(24px,2.4vw,34px) clamp(20px,2.2vw,30px);height:100%;
  display:flex;flex-direction:column;gap:clamp(16px,1.8vw,22px)}
.section-white .tlx__card{background:var(--bg)}
.tlx__cardyr{font-family:var(--num);font-weight:400;font-size:clamp(22px,2.2vw,28px);
  line-height:1;letter-spacing:.06em;color:var(--ink)}
.tlx__item{display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:4px clamp(10px,1.2vw,16px);align-items:baseline}
.tlx__item::before{content:"";grid-column:1/-1;height:0}
.tlx__wa{position:relative;padding-left:14px;font-size:15px;line-height:1.9;
  letter-spacing:.06em;color:var(--ink);white-space:nowrap}
.tlx__wa::before{content:"";position:absolute;left:0;top:.78em;
  width:5px;height:5px;border-radius:50%;background:var(--accent2)}
.tlx__txt{font-size:15px;line-height:2;letter-spacing:.05em;color:var(--sub)}
.tlx__txt em{display:block;margin-top:6px;font-style:normal;color:var(--ink)}

@media (max-width:900px){
  .tlx{--tlx-drop:44px}
  .tlx__nav{top:auto;bottom:calc(-1 * clamp(58px,9vw,72px));right:50%;translate:50% 0}
  .tlx__col{flex-basis:clamp(230px,74vw,300px)}
}

/* ---- 会社概要は白ボックスの中／幅を狭く（2026-08-29）---- */
.panel{background:var(--white);border-radius:var(--radius-lg);
  padding:clamp(26px,3.2vw,52px) clamp(22px,3vw,52px)}
.section-white .panel{background:var(--bg)}
.panel--outline{max-width:1040px;margin-inline:auto}
/* 箱の中に入ったので、いちばん上と下の罫は要らない */
.panel--outline .deflist__row:first-child{border-top:0;padding-top:0}
.panel--outline .deflist__row:last-child{border-bottom:0;padding-bottom:0}

/* ---- okeshoグループのカードは中央寄せ（2026-08-29）---- */
#group .infocard{text-align:center;align-items:center}
#group .infocard__logo{justify-content:center}
#group .infocard .pt-chips{justify-content:center}

/* ---- メッセージ：写真と文章を寄せる（2026-08-29）----
   ⚠ --fit は写真と箱を同じマスに置く。器が広いままだと
     箱(46%)と写真(38%)のあいだに16%＝500px近い空きができる。
     器を狭め、箱の幅を「残り＋重ねる量」で決める＝重なりが必ず出る。 */
/* 2026-08-29（2回目）：重ねるのではなく、**あいだを100pxあける**。
   --fit は写真と箱を同じマスに置くので、箱の幅＝器 − 写真 − 100px で決め打つ。
   これで画面幅がいくつでも、すきまはちょうど100pxになる。 */
/* ⚠ 器の幅は「写真420 ＋ すきま100 ＋ 箱」。箱が狭いと挨拶の見出し（原稿の1行目20字）が
     収まらず「…あ／なたも、」と語中で割れる。箱には左右55pxの内余白があるので、
     見出し1行目の実測594px＋余白110px＝**箱704px以上**が要る。器＝420+100+箱 で 1250px。 */
.concept__overlap--tight{--gap:100px;max-width:1250px;margin-inline:auto}
@media (min-width:881px){
  .concept__overlap--tight .concept__photo--portrait{width:clamp(280px,40%,420px)}
  /* ⚠ --fit は写真を align-self:stretch で箱の高さまで伸ばす。挨拶は本文が長く、
       写真が 420×1292px まで縦に伸びた（2026-09-17）→ 伸ばさず上揃え、高さは500pxで止める。 */
  .concept__overlap--tight .concept__photo--portrait{align-self:start;aspect-ratio:auto;height:500px;margin-inline:auto 0}
  .concept__overlap--tight .concept__photo--portrait img{object-position:center 20%}
  .concept__overlap--tight .concept__box{
    width:calc(100% - clamp(280px,40%,420px) - var(--gap))}
}

/* ---- okeshoグループ：器を狭く／カードは白・薄い影・角丸なし（2026-08-29）---- */
#group .sec-head,
#group .cards3{max-width:1100px;margin-inline:auto}
#group .infocard{background:var(--white);border-radius:0;
  box-shadow:0 6px 22px rgba(42,42,42,.07)}

/* ---- 会社案内リライト（2026-08-29）で足りなくなった指定 ----
   原稿の**太字**は色を濃くして受ける（サイトは太さで強調しない）。 */
.concept__lead em,
.infocard p em,
.perf-card p em{font-style:normal;color:var(--ink)}

/* グループカードの分類行（ブランド名の下） */
.infocard__cat{font-size:15px;letter-spacing:.08em;line-height:1.8;color:var(--ink)}
.infocard__cat + p{margin-top:-4px}

/* 沿革カードの補足行（2011の「物件探しから…体制へ。」） */
.tlx__sub{display:block;margin-top:8px}
.tlx__txt em:first-child{margin-top:0}

/* クロージングは段落を続けて置く */
#closing .sec-lead + .sec-lead{margin-top:14px}

/* 日本語の折り返しを文節で切る。狭いカードで「リノ／ベーション」のように
   語中で割れるのを防ぐ（対応していないブラウザでは既定の折り返しに戻るだけ）。 */
.infocard p,
.infocard__cat,
.tlx__txt,
.pt-timing2 .perf-card p{word-break:auto-phrase}

/* ⚠ 打ち合わせの写真（meeting.jpg・3:2）を 16:6 の帯に入れると**上下が切られて
     立っている人の頭が枠から出る**（reform-shuzen で実測）。上を残す。
     ⚠ 器の比ごとに切れ方が変わる。同じ写真でも**器ごとに位置を決める**。 */
.bandphoto img[src$="meeting.jpg"]{object-position:center 8%}

/* ---- 文字が続く節に入れる横長の写真（2026-08-29）----
   見出しの直下に1枚はさんで、読み始める前にひと呼吸おく。 */
.bandphoto{max-width:1100px;margin:0 auto clamp(32px,3.6vw,48px);
  aspect-ratio:16/6;overflow:hidden;border-radius:var(--radius-lg);background:var(--bg)}
.bandphoto img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:640px){ .bandphoto{aspect-ratio:3/2} }

/* 記事本文のあいだにはさむ写真 */
.dphoto{aspect-ratio:16/9;overflow:hidden;border-radius:var(--radius);background:var(--bg);
  margin-block:clamp(26px,3vw,40px)}
.dphoto img{width:100%;height:100%;object-fit:cover;display:block}

/* ---- 有資格者カードのマーキー（2026-08-29）----
   写真＋名前＋資格＋所属店舗。ジグザグ（偶数を50px下げる）で右から左へ流す。
   ⚠ 流す仕掛けは .pt-troubles-marquee / .pt-troubles-track を流用する（同じ動き）。
   ⚠ ジグザグは **クラス**（.procard--down）で付ける。1組11枚＝奇数なので
     nth-child だと2組目で上下が入れ替わり、-50%の継ぎ目で段がずれる。 */
.pro-marquee{--zig:34px}
/* ⚠ 縦長を締めた（2026-08-29）：写真を 3:4 → 1:1、幅を広げ、
     文字まわりの余白と行送りを詰めた。カード 236×475(比2.01) → 実測は下の記録参照。
     幅を広げるのは見た目のためだけでなく、いちばん長い「二級福祉住環境コーディネーター」を
     1行に収めるため。**flex は align-items:stretch なので、1枚でも2行になると全枚が伸びる。** */
.pt-troubles-track .procard{flex:0 0 clamp(216px,19.5vw,280px);
  margin-right:clamp(14px,1.6vw,24px);
  background:var(--bg);border-radius:var(--radius-lg);overflow:hidden;
  display:flex;flex-direction:column}
.section-white .pt-troubles-track .procard{background:var(--bg)}
.procard--down{margin-top:var(--zig)}
.pt-troubles-track .procard:not(.procard--down){margin-bottom:var(--zig)}
.procard__media{aspect-ratio:1/1;overflow:hidden;background:var(--line)}
/* ⚠ 3:4 の人物カットを 1:1 で切ると、既定(center)では上下が同じだけ落ちて**頭が切れる**
     （s02・s06 で実害）。人物写真は顔が上寄りなので **上を残す**。
     11枚を 50%/15%/0% で並べて見比べた結果 15% が最良（全枚で頭頂が入り、顎も切れない）。 */
.procard__media img{width:100%;height:100%;object-fit:cover;object-position:center 15%;display:block}
.procard__name{margin:clamp(12px,1.2vw,16px) clamp(14px,1.4vw,18px) 0;
  font-size:16px;font-weight:500;letter-spacing:.12em}
.procard__lic{margin:6px clamp(14px,1.4vw,18px) 0;
  font-size:15px;line-height:1.6;letter-spacing:.04em;color:var(--ink)}
.procard__shop{margin:4px clamp(14px,1.4vw,18px) clamp(14px,1.4vw,18px);
  font-size:15px;letter-spacing:.06em;color:var(--sub)}

/* ---- 全面写真＋透過レイヤーの節（/）----
   .promise の型を流用。⚠ .section-white/.section-paper の地色に勝たせる必要があるので
   背景は .promise 側（common.css）で var(--ink) が入る。ここでは中の文字と枠線を白に。 */
.promise .eyebrow{color:var(--accent2)}
/* ---- 電話番号を見せるカード（2026-08-29「線を入れるなどして見やすく」）----
   組み方を **見出し → 罫 → 番号と時間 → 罫 → 説明** に固定する。
   ⚠ 見づらかった原因は装飾ではなく**階層が無かった**こと。見出し・時間・説明が同じ調子で
     縦に並び、どこを読めばいいか分からなかった。**いちばん要る情報（番号）を罫で囲って独立させる。**
   ⚠ 2枚のカードは**同じ組み方に揃える**。日中だけ .telbox があり夜間は段落だったので、
     並べたときに別部品に見えていた。 */
/* 2026-08-29：カードのテキストは中央寄せ。
   ⚠ .telbox の中も含めて1つのまとまりとして中央にそろえる（番号だけ中央だと
     見出し・時間・説明との軸がずれて、かえってバラバラに見える）。
   ⚠ 夜間カードの注記に付けていた .pt-note--left は不要になったのでHTML側から外した。 */
.infocard--tel{gap:0;text-align:center}
.infocard--tel h3{margin-bottom:clamp(16px,1.8vw,22px)}
.infocard--tel .telbox{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:clamp(18px,2vw,24px) 0;gap:6px}
.infocard--tel .telbox + p{margin-top:clamp(16px,1.8vw,22px)}
.infocard--tel p + p{margin-top:clamp(10px,1.2vw,14px)}
/* ⚠ 600px以下は part.css の @media で `.pt-note{text-align:left}` に戻る（全社の既定）。
   カードの中だけは中央のままそろえる。詳細度(0,2,0)で勝つので書く場所は問わない。 */
.infocard--tel .pt-note{text-align:center}
/* 番号は押せる（tel:）。オレンジは押せる合図なので、番号にだけホバーで色が付くのは既定のまま。 */

/* 2026-08-29：修理のご連絡先の横幅をもう少し狭く。
   器いっぱい(1310px)だと2枚のカードが横に伸びて、電話番号と本文が離れて読みにくい。
   `.shopinfo`(880px)・`.panel--outline`(1040px) と同じ考えで 1040px に絞る。 */
#repair .cards2,
#repair .pt-panel{max-width:1040px;margin-inline:auto}

/* ---- オプションのカード（2026-08-29・参考画像あり）--------------------
   白いカード＋薄い枠線／中央寄せの見出し／短い罫／**保証の年数を数字タイルで見せる**／本文／注記。
   ⚠ **色は参考画像（黄色の帯＋赤い数字）をそのままは使わない。**
     このサイトは「オレンジ＝押せる合図」に絞る決まりで、押せない飾りは `--accent2` と決めている。
     数字は**色ではなく大きさで**立てる（地＝クリーム／数字＝墨）。色も合わせるなら別途指示をもらう。
   ⚠ タイルは記号（＋）が有っても無くても崩れないよう flex で組む。
     Option 01＝「メーカー保証＋修理は何度でも」なので＋、Option 02＝別々の機器なので記号なし。 */
/* ⚠ 円はカードの上辺へ**直径の半分**はみ出す。既存の `.pt-timing-box .perf-card__icon` と同じ型。
     器の上にその半分の余白を足さないと、見出しに食い込む。 */
/* ⚠ 2026-09-25：統合でカードの情報量が増えたため、PC/タブレット/SPいずれも横並び(2列)にせず
   縦に1列で積む。空いた横幅は、カード内の電話受付・緊急駆け付け等の子カードを2列に並べて使う
   （.optcard .svc-panels、下記）。カード自体は既存の「読みやすい幅」の決めごと（1040px、#repairの
   .cards2/.pt-panelと同じ値）に収め、中央寄せにする＝全幅いっぱいまでは広げない。 */
/* ⚠ 列は `1fr` ではなく `minmax(0,1fr)`。`1fr` の最小値は `auto`＝**中身の最小幅より
   狭くなれない**ので、中に折り返せないもの（表の nowrap セルなど）が1つでもあると
   カードごと画面より広くなる。320pxで29pxの横スクロールが出ていた（2026-09-26に実測）。
   カード側の `min-width:0` だけでは効かない。**列の最小値を0にするのが要る。** */
.optcards{--oic:clamp(74px,7vw,96px);
  display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,3.4vw,48px);align-items:start;
  margin-top:calc(var(--oic) * .5)}
/* ⚠ `margin-inline:auto` を付けた grid の子は、**器いっぱいに伸びるのをやめて中身の幅で決まる**
   （auto マージンが stretch を打ち消す）。中に折り返せないものがあると、そのぶん器から
   はみ出す＝320pxで29pxの横スクロールになっていた（2026-09-26に実測）。
   `width:100%` を足して「器いっぱい。ただし1040pxまで」に戻す。 */
.optcard{position:relative;min-width:0;width:100%;max-width:1040px;margin-inline:auto;
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(26px,3.2vw,44px);display:flex;flex-direction:column;gap:clamp(12px,1.4vw,18px);
  padding-top:calc(var(--oic) * .5 + clamp(24px,2.6vw,34px))}
/* ⚠ 2026-09-25：カードに`.svc-panel`(緊急駆け付けの表を含む)を入れ子にしたら、
   表の`white-space:nowrap`セルの最小幅がgridトラック/flex子要素を押し広げてSPで横あふれした。
   `min-width:0`を通り道（.optcard→.svc-panel）に入れて、表の中の`overflow-x:auto`に逃がす。 */
.optcard .svc-panel{min-width:0}
.optcard__icon{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);
  display:grid;place-items:center;width:var(--oic);aspect-ratio:1;border-radius:50%;
  background:var(--white);border:1px solid var(--line)}
/* 既定＝ほぼ正方（キッチン 比1.05）／--wide＝横長（コンロ 比1.34）。
   ⚠ 絵の見かけの大きさを揃えるため、縦横比ごとに幅を変える（`.perf-card__icon` と同じ作法）。 */
.optcard__icon img{width:53%;height:auto;display:block}
.optcard__icon--wide img{width:60%}
.section-paper .optcard{background:var(--white)}
.optcard__en{font-family:var(--en);font-size:12px;letter-spacing:.16em;line-height:1;
  color:var(--accent2);text-align:center}
.optcard__title{font-size:clamp(18px,2vw,22px);font-weight:500;line-height:1.7;
  letter-spacing:.08em;text-align:center}
.optcard__rule{width:38px;height:1px;background:var(--accent2);margin:2px auto 6px}
.optcard__tiles{display:flex;align-items:stretch;gap:2px;margin-bottom:clamp(4px,0.8vw,10px)}
.optcard__tile{flex:1;min-width:0;background:var(--bg);border-radius:var(--radius);
  padding:clamp(16px,1.8vw,22px) clamp(10px,1.2vw,16px);text-align:center;
  display:flex;flex-direction:column;justify-content:center}
/* ⚠⚠ **`.optcard p{font-size:15px}`(0,1,1) に負けるので、タイルの中は `.optcard` を頭に付ける**(0,2,0)。
     クラス1つ（0,1,0）で書くと**要素セレクタを含む方が勝ち**、数字が22pxではなく15pxで出る。
     の「15px → 22px」は、まさにこの負けを実測で指摘されたもの。
     **効かないときは、まず詳細度負けを疑う。** */
.optcard .optcard__lab{font-size:15px;line-height:1.7;letter-spacing:.04em;color:var(--ink);
  word-break:auto-phrase}
.optcard .optcard__num{font-size:22px;font-weight:500;line-height:1.45;
  letter-spacing:.06em;margin-top:8px}
.optcard__op{flex:none;align-self:center;padding:0 clamp(6px,0.8vw,12px);
  font-size:clamp(16px,1.8vw,20px);color:var(--accent2);line-height:1}
.optcard p{font-size:15px;line-height:2.05;letter-spacing:.05em;color:var(--sub)}
.optcard .optcard__note{font-size:15px;line-height:1.9;color:var(--sub);margin-top:auto}
/* ⚠ 縦に積まれる幅では、既定のすきまだと**円が上のカードに食い込む**（円の半分＝37〜48px）。
     すきまを円の半分＋余白まで広げる（`.pt-timing-box` で同じ罠を踏んでいる）。
     ⚠ 2026-09-25：常に1列（.optcards）になったので、ここは狭い幅でのすきま調整だけ残す。 */
@media (max-width:900px){
  .optcards{gap:calc(var(--oic) * .5 + clamp(20px,2.4vw,28px))}
}

/* ---- サポート体制（3ブロック・2026-09-25・warranty #support）--------
   支給された図版セット（共有/お_桶庄/output/support-system/）に基づく実装。
   ⚠ 見出し・本文・数値・電話番号は**すべて実テキスト**（SEOで読まれる・スマホで潰れない）。
     画像として使うのは12種類の小さい線画アイコン（img/ic-sup-*.svg）と、
     「修理対応」の説明イラスト（ic-sup-van.svg を大きめに）だけ。1枚絵のカード画像は使わない。
   ・器（.svc-panel）は #support が .section-white（白地）の中にあるので var(--bg) のクリームで
     浮かせる（.infocard / .svc-card と同じ「白地セクションではクリーム地」の決めごと）。
   ・アイコンSVGは配布時点で線が --sub(#736B63)・面が --bg(#F8F3EC)・装飾が --accent2(#BAA295) と
     サイトのトークンに一致しているため、色を当て直さずそのまま <img> で使う。 */
.svc-set{display:flex;flex-direction:column;gap:clamp(48px,5.6vw,72px);margin-top:clamp(30px,3.4vw,44px)}
.svc-block__head{margin-bottom:clamp(24px,2.8vw,32px);text-align:center}
.svc-block__en{display:block;font-family:var(--en);font-size:12px;letter-spacing:.16em;
  line-height:1;text-transform:uppercase;color:var(--accent2);margin-bottom:8px}
.svc-block__title{font-size:clamp(23px,2.5vw,29px);font-weight:500;line-height:1.6;
  letter-spacing:.04em}
.svc-block__sub{font-size:14px;line-height:1.8;color:var(--sub);margin-top:4px}

.svc-panels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2vw,24px);
  align-items:stretch}
.svc-panels--2col{grid-template-columns:repeat(2,minmax(0,1fr))}
.svc-panel{background:var(--bg);border-radius:var(--radius-lg);
  padding:clamp(24px,2.4vw,32px);display:flex;flex-direction:column;gap:12px}
.svc-panel__title{font-size:20px;font-weight:500;line-height:1.7;letter-spacing:.03em;
  text-align:center;margin-bottom:6px}
.svc-panel__headrow{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.svc-panel__lead{font-size:16px;font-weight:500;line-height:1.8;letter-spacing:.03em}
.svc-panel__body{font-size:15px;line-height:1.95;letter-spacing:.03em;color:var(--sub);word-break:auto-phrase}
.svc-panel__label{font-size:13px;letter-spacing:.06em;color:var(--sub)}
.svc-panel__note{font-size:13px;line-height:1.8;letter-spacing:.03em;color:var(--sub)}
.svc-badge{font-size:13px;letter-spacing:.04em;color:var(--sub);white-space:nowrap}
.svc-rule{display:block;width:100%;height:1px;background:var(--line)}

/* 電話受付：受付日／受付時間 の2値
   ⚠ 2026-09-25：2つの白箱に余白が残り、カードの横幅いっぱいまで広がっていなかった。
     grid 1fr 1fr で均等幅にして、器の横幅いっぱいまで並べる。 */
.svc-stats{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,18px)}
.svc-stat{display:flex;align-items:center;gap:10px;min-width:0;background:var(--white);
  border-radius:var(--radius);padding:10px 14px}
.svc-stat__icon{width:30px;height:30px;flex:none;display:block}
.svc-stat__lab{font-size:12px;letter-spacing:.06em;color:var(--sub);line-height:1.6}
.svc-stat__num{font-family:var(--num);font-weight:300;font-size:clamp(20px,2vw,24px);
  line-height:1.3;letter-spacing:.02em}

/* 電話番号 */
.svc-tel{display:flex;align-items:center;gap:10px}
.svc-tel__icon{width:22px;height:22px;flex:none;display:block}
.svc-tel__num{font-family:var(--num);font-weight:300;font-size:clamp(22px,2.4vw,28px);
  line-height:1.3;letter-spacing:.03em;color:var(--ink)}
.svc-tel__num:hover{color:var(--accent)}

/* 修理対応（標準保証）：説明イラスト＋太字リード＋注記ボックス */
.svc-panel--repair{align-items:center;text-align:center}
.svc-illust{width:clamp(92px,10.5vw,132px);height:auto;margin:4px 0}
.svc-notebox{width:100%;background:var(--white);border-radius:var(--radius);
  padding:clamp(14px,1.6vw,18px);font-size:13px;line-height:1.85;letter-spacing:.02em;
  color:var(--sub);text-align:left}

/* 修理対応（有償オプション）：部品代／技術料／出張費の3アイコン */
.svc-icon3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;text-align:center}
.svc-icon3__item img{width:clamp(40px,4.4vw,52px);height:auto;margin:0 auto 6px;display:block}
.svc-icon3__item p{font-size:13px;letter-spacing:.04em;color:var(--sub)}

/* 緊急駆け付け：対応例／非会員／会員 の表 */
.svc-table-wrap{overflow-x:auto}
.svc-table{width:100%;border-collapse:collapse;font-size:13px;letter-spacing:.02em}
.svc-table th{text-align:left;font-weight:500;color:var(--sub);padding:8px 6px;
  border-bottom:1px solid var(--line);white-space:nowrap}
.svc-table td{padding:10px 6px;border-bottom:1px solid var(--line);white-space:nowrap;
  display:flex;align-items:center;gap:8px}
.svc-table th:nth-child(2),.svc-table th:nth-child(3),
.svc-table td:nth-child(2),.svc-table td:nth-child(3){text-align:right;display:table-cell}
.svc-table__icon{width:18px;height:18px;flex:none}

/* 訪問できる曜日・時間（らくらくメンテ）：帯 */
.svc-band{display:flex;align-items:center;gap:14px;background:var(--white);
  border-radius:var(--radius);padding:clamp(14px,1.6vw,18px)}
.svc-band__icon{width:28px;height:28px;flex:none}
.svc-band__lab{font-size:14px;letter-spacing:.03em;color:var(--sub)}
.svc-band__num{font-family:var(--num);font-weight:300;font-size:clamp(20px,2vw,24px);letter-spacing:.02em}

/* ---- 「もしもに備える」カードへ電話受付・緊急駆け付け等を補足として統合（2026-09-25）----
   ⚠ `.optcard p{font-size:15px;color:var(--sub)}` はクラス+要素(0,1,1)で、入れ子にした
     `.svc-panel` 内の `<p>` 系クラス単体(0,1,0)より詳細度が高く、そのままだと数字や注記の
     サイズ・色が上書きされてしまう。ここに挙げた項目はクラス2つ(0,2,0)で書いて勝たせる。
   ⚠ 電話受付／緊急駆け付け（訪問できる曜日・時間）は `.svc-panels.svc-panels--2col` で包んで
     カードが縦積みになって空いた横幅を2列で使う（900px未満は既存の1列ルールで自動的に積む）。
     このラッパーにも `min-width:0` を通しておかないと、中の表(.svc-table)が押し広げる。 */
.optcard .svc-panels{min-width:0}
.optcard .svc-panel{margin-top:4px}
.optcard .svc-panel__label,
.optcard .svc-panel__note{font-size:13px}
.optcard .svc-panel__body{line-height:1.95;letter-spacing:.03em}
.optcard .svc-stat__lab{font-size:12px}
.optcard .svc-stat__num{font-size:clamp(20px,2vw,24px);color:var(--ink)}
.optcard .svc-band__lab{font-size:14px}
.optcard .svc-band__num{font-size:clamp(20px,2vw,24px);color:var(--ink)}
.optcard .svc-icon3__item p{font-size:13px}

/* 商品情報と、補足のサポート窓口情報を分ける区切り線（.optcard__rule の全幅版） */
.optcard__rule--sup{width:100%;background:var(--line);margin:10px 0 2px}

/* 修理対応の内訳（部品代／技術料／出張費）：料金表の上に添える。
   ⚠ 2026-09-26：中身を中央に寄せていたため、カードの幅950pxに対して
     「規定内の修理代 無料」は125px・アイコン3つは176pxしか使わず、左右に約390pxずつ
     空いていた。**幅いっぱいの罫線で上下から挟む帯**にして、アイコン3つも同じ幅に広げる
     （`.svc-icon3` は3等分のgrid＝親が幅いっぱいなら自動でそろう）。中央寄せの指定はやめた。 */
.optcard__breakdown{width:100%;margin:16px 0 20px}
.svc-badge-center{display:block;width:100%;text-align:center;font-size:13px;letter-spacing:.04em;
  color:var(--sub);padding-block:11px;margin:0 0 18px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

@media (max-width:900px){
  .svc-panels,.svc-panels--2col{grid-template-columns:1fr}
}

/* ---- 2カラム：左に追従する写真／右に中身（2026-08-29・warranty #scope）----
   ⚠ **追従する側は短いほうに置く。** 長いほうを sticky にしても、はみ出して普通に流れるだけ。
   ⚠ `top` はヘッダーのぶん下げる（実測 84px＋余白24px＝108px）。
   ⚠ sticky は祖先に `overflow:hidden` があると効かない。body は `overflow-x:clip`（clip は
     スクロール容器を作らないので効く）。**hidden に戻すと黙って効かなくなる。**
   ⚠ 900px以下は縦に積む。狭い画面で写真が居座ると、読む場所が半分になる。 */
/* ⚠ **貼り付いていられる距離 ＝ 親の高さ − 写真の高さ。** 写真が大きいほど早く外れる。
     最初 38%×3:4（664px）にしたら、親1005px（アコーディオンは閉じた状態）に対して
     **341pxしか追従しなかった**。34%×4:5（536px）にして 469px に伸ばした。
     右のアコーディオンを開けば親が伸びるので、さらに長く付いてくる。 */
.stickysplit{display:grid;grid-template-columns:minmax(0,34%) minmax(0,1fr);
  gap:clamp(32px,4vw,64px);align-items:start}
.stickysplit__media{position:sticky;top:108px;align-self:start;
  aspect-ratio:4/5;overflow:hidden;border-radius:var(--radius-lg);background:var(--bg)}
.stickysplit__media img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:900px){
  .stickysplit{grid-template-columns:1fr;gap:clamp(24px,3vw,36px)}
  .stickysplit__media{position:static;aspect-ratio:16/9}
}

/* 重ね組版の白ボックスは1行13字しか入らない（30px＋字間2.7px／幅451px）。
   長い見出しが語中で折れないよう文節で切る（対応しないブラウザは既定の折り返しに戻るだけ）。 */
.intro .concept__title{word-break:auto-phrase}

/* ⚠ warranty の「3つの安心」だけ暗幕を濃くする。背景の cpt-hero.jpg は明るいキッチンで、
     既定の .70/.62 では顔や白い服の上で白文字のコントラストが 6.1:1（本文は文字色が
     rgba(255,255,255,.78) なので実効 5.0:1 まで落ちる）。**写真ごとに実測して決める。** */
#assurance.promise::after{background:linear-gradient(180deg,rgba(24,20,16,.80),rgba(24,20,16,.74))}
.promise .btn.on-photo{border-color:rgba(255,255,255,.85);color:#fff}
.promise .btn.on-photo:hover{background:#fff;color:var(--ink);border-color:#fff}

/* 決めごとの見出しは16px→20px（4つ目だけの指摘だったが、
   同じ節の h3 が不揃いになるので6つそろえた） */

/* 2026-08-29：クーリング・オフの本文は中央寄せ。
   見出し（.sec-head.center）と軸をそろえる。 */
#cooling .wrap--narrow{text-align:center}

/* ---- コラム一覧（blog.html）----
   2026-08-29：ヒーローは施工事例(works.html)と同じ「パンくず＋中央見出し」に、
   カードは12件＋ページ送り、カードの間隔はもう少し広く。
   既定の .cards3 は clamp(20px,2.6vw,34px)。`.works .cards3{gap:40px}` と同じ考えで
   この一覧だけ広げる（1440px 実測 34px → 44px）。 */
.blog-index .cards3{gap:clamp(28px,3.4vw,44px)}

/* ---- 規約系ページの本文（privacy.html / social-policy.html）----
   2026-08-29：コンテンツが見づらい。線を入れるなりデザイン調整して。
   ⚠ 見づらさの正体は実測で出た＝**階層が逆転していた**。
     項目どうしの間隔 12px < 見出しと本文の間 26px。切れ目のほうが狭ければ、
     どこで話が変わったのか分からない。→ 項目間を広げ、見出し下は詰める。
   ⚠ もうひとつは行の長さ。本文が 1行53字あった（日本語は35〜45字が上限）。
     器を 840 → 720px に絞って 45字に。
   ⚠ 箱にしない。このサイトは座布団・影・角丸を使わない（囲みは1pxの罫だけ）。 */
.policy-doc .wrap--narrow{max-width:720px}
.policy-doc .dblock + .dblock{
  border-top:1px solid var(--line);
  margin-top:clamp(34px,4vw,52px);padding-top:clamp(34px,4vw,52px)}
.policy-doc .dblock > .sec-head{margin-bottom:clamp(14px,1.4vw,18px)}

/* ---- 削除したページのぶんカードが減った並び（2026-08-30）----
   内装リフォーム／修繕・緊急修理／費用の目安・補助金／水回りの流れ の4ページを作らないことになり、
   service.html「暮らしの困りごとから」が **7枚 → 5枚**になった。
   `.cards4` は `repeat(4,minmax(0,1fr))` なので 4 + 1 で最終行の1枚が左端に取り残される。
   ⚠ **grid の justify-content:center は最終行だけを中央に置けない**（列の位置に従うため）。
     → この並びだけ flex にして、はみ出した行が中央にそろうようにする。
   ⚠ カードの幅は4列のときと同じ（308px＝(器 − すきま3つ)/4）を保つ。
   ⚠ 4ページを戻すときは、この節ごと消す。 */
#troubles .cards4{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(16px,2vw,26px)}
#troubles .cards4 > *{
  flex:0 1 calc((100% - 3 * clamp(16px,2vw,26px)) / 4);
  min-width:0}
@media (max-width:900px){
  #troubles .cards4 > *{flex-basis:calc((100% - clamp(16px,2vw,26px)) / 2)}
}
@media (max-width:600px){
  #troubles .cards4 > *{flex-basis:100%}
}

/* ---- FAQ のページ内目次（2026-08-30）----
   ヒーローの下に、各節へのアンカーを横1列で置く。
   ⚠ 新しい部品は作らず `.btn-row center` ＋ `.btn` を流用。
   ⚠ 次の節（#faq-kitchen）と同じ地色なので、節の既定余白（150px）だと目次だけが浮く。
     `.section`(0,1,0) と同じ詳細度では読込順に左右されるので (0,2,0) で確実に勝たせる。 */
.section.faq-anchors{padding-block:clamp(28px,3.4vw,48px)}
.faq-anchors .btn-row{flex-wrap:wrap}

/* ---- 記事の前後移動（news-detail。2026-08-30）----
   「前の記事 ← ／ 一覧へ戻る ／ → 次の記事」の3つ。
   ⚠ 箱にしない。このサイトは座布団・影・角丸を使わない。本文と切るのは**上の細い罫1本**だけ。
   ⚠ 前後のタイトルは長さがまちまち。2行で打ち切って高さをそろえる。
   ⚠ 前の節（.detail-body）と同じ地色なので、節の余白は詰める（(0,2,0)で確実に勝たせる）。 */
/* ⚠ 上は本文の節（.detail-body）の下余白100pxがそのまま効くので0。
   下は空けないとボタンの下端が次の節に接する（実測0pxだった）。本文と同じ100pxをとる。 */
.section.postnav{padding-block:0 100px}
/* ⚠⚠ **ここに `.section.postnav:has(+ .section){padding-bottom:0}` を書いていたが撤去した**
     （2026-08-31「ページネーションが境目にピタッとくっついている」）。
     4ページを実測して分かったこと＝
       ・blog-detail  postnav(クリーム) → 関連コラム(白)  … **地色が変わる**のに下余白0で、
                      **ボタンの下端がそのまま色の境目**になっていた（実測0px）。
       ・works-detail / works-renovation-detail  postnav(クリーム) → 関連事例(クリーム)
                      … **この上書きは効いておらず 75px** だった。同色を詰める共通規則
                      （common.css の `.section-paper:has(+ .section-paper)`）のほうが勝っている。
       ・news-detail  次が CTA（`.section` を持たない）… もともと100pxのまま。
     つまり**この上書きが実際に効いていたのは blog-detail だけで、そこが不具合だった。**
     撤去すれば、同色のときは共通規則の75pxが受け持ち、色が変わるときは下の100pxが残る。
     ⚠ **「書いた規則が効いているか」は、当たるページを全部測ってから決めること。**
        詳細度の計算だけで判断すると、:has の効き方を読み違える。 */
.postnav__inner{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:clamp(20px,3vw,48px);
  border-top:1px solid var(--line);padding-top:clamp(32px,4vw,52px)}
.postnav__side{display:block;min-width:0}
.postnav__side--next{text-align:right}
.postnav__label{
  display:block;font-family:var(--en);font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent2);margin-bottom:8px}
.postnav__ttl{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
  font-size:15px;line-height:1.85;letter-spacing:.05em;color:var(--ink)}
.postnav__side:hover .postnav__ttl{color:var(--accent)}
/* 矢印は本文の外側に置く（前は左、次は右）。飾りなので読み上げには乗せない。 */
.postnav__label::before,.postnav__label::after{color:var(--sub)}
.postnav__side--prev .postnav__label::before{content:"← "}
.postnav__side--next .postnav__label::after{content:" →"}
.postnav__index{white-space:nowrap}

@media (max-width:768px){
  /* ⚠ 3列のままだと前後のタイトルが2〜3字幅まで潰れる。縦に積んで、戻るボタンを最後に置く。 */
  .postnav__inner{grid-template-columns:minmax(0,1fr);gap:clamp(18px,3vw,24px)}
  .postnav__side--next{text-align:left}
  .postnav__index{justify-self:center;order:3}
}

/* ---- 選択肢の多いフォーム（見積り・オンライン相談。2026-08-30）----
   現行サイト（moreliving.co.jp）の項目をそのまま踏襲したので、ラジオ／チェックが増えた。
   ⚠ 既存の `.form-checks` ＋ `.form-check` をそのまま使う（新しい入力部品は作らない）。
   足したのは「縦に積む」と「選択肢の横に補足を書かせる」の2つだけ。 */

/* 補足入力が付く選択肢は横並びにすると行が割れて読めない。縦に積む。 */
.form-checks--stack{flex-direction:column;gap:12px}

/* 選択肢の横の補足入力（例：検索サイト名・誌名）。
   ⚠ `.form-card input[type=text]` が width:100% なので、ここで幅を戻さないと1行を占める。 */
.form-check__sub{display:flex;align-items:center;gap:10px;flex:1 1 auto;min-width:0}
/* ⚠ 選択肢の文言の長さがまちまち（「雑誌」2字〜「YahooやGoogleなどの検索サイト」16字）。
   そのままだと補足入力の始まる位置が行ごとにずれる。いちばん長い選択肢に合わせて揃える。 */
.form-check__sub > .form-check{flex:0 0 auto;min-width:17em}
@media (max-width:600px){
  /* 狭い画面では17emが入らない。1行に1つずつ積む。 */
  .form-check__sub{flex-wrap:wrap}
  .form-check__sub > .form-check{min-width:0;flex:1 1 100%}
}
.form-card .form-check__sub input[type="text"]{
  width:auto;flex:1 1 260px;min-width:0;
  padding:9px 14px;font-size:15px;line-height:1.7}

/* 選択肢が2桁になる項目（リフォーム予定箇所18・不満点13）は、横並びのままだと
   1行に入る数が幅で変わって読み取りにくい。列を決めて並べる。 */
.form-checks--grid{display:grid;gap:12px 26px;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
@media (max-width:600px){
  .form-checks--grid{grid-template-columns:minmax(0,1fr)}
}

/* ---- 住宅ローン（loan.html）の小見出し（2026-08-30）----
   節の h2 ではなく、節の中の区切り。sec-title を使うと大きすぎる。 */
.loan-subhead{font-size:clamp(18px,2vw,22px);font-weight:500;letter-spacing:.08em;
  margin-bottom:10px}
/* ⚠ .deflist の見出し列は既定190px。会社概要のような広い器を想定した値で、
   重ね組版の白ボックス（実測560px）に置くと本文側が229pxしか残らず、
   「2024年3月21日〜2025年3月20日」が折れて「日」だけの孤立行になった。
   ここの見出しは4字までなので88pxで足りる。
   ⚠⚠ **`@media (min-width:768px)` で囲うこと。** id で書くと(1,1,0)になり、
      767px以下で縦積みに戻す `@media` の `.deflist__row`(0,1,0) に**勝ってしまう**。
      メディアクエリは詳細度を上げないので、後ろに書いたこの1行がSPでも効き、
      dd が117pxに潰れて3行になった（実測して気づいた）。 */
@media (min-width:768px){
  #attaka .deflist__row{grid-template-columns:minmax(0,88px) minmax(0,1fr)}
}
#orico .wrap--narrow{margin-top:clamp(40px,5vw,64px)}
#orico .spec-table{margin-top:clamp(16px,2vw,22px)}
/* ⚠ 一般の `.btn-row` に上余白は無い（他ページでは前の要素の margin で空いていた）。
   ここは表の直後なので、実測0px でボタンが最終行の罫に接していた。
   既存の `.pt-note + .btn-row`(28〜42px) と同じ考えで空ける。 */
#orico .btn-row{margin-top:clamp(36px,4.5vw,60px)}
#orico .spec-table a{text-decoration:underline;text-underline-offset:4px}
#orico .spec-table a:hover{color:var(--accent)}

/* ---- 代表メッセージ（message.html）の本文 ----
   2026-08-30：代表メッセージを独立ページに。内容は現行サイトを踏襲。
   ⚠ 中央そろえは 2026-08-30 に `.wrap--narrow` の基底へ入れた。ここでは幅だけ絞る。
   ⚠ 行の長さ。1行53字あった（日本語は35〜45字が上限）。規約系と同じ720pxに。
   ⚠ ボタンは本文の直後で実測0px。空ける。 */

/* ---- 同じ職種のスタッフ（staff-detail.html の自動で流れる横1段）----
   2026-08-31：同じカテゴリーのスタッフを最大8件、1段の横スクロール・自動で。
   ⚠ 仕掛けは既存の `.pt-troubles-marquee` / `.pt-troubles-track` と同じ考え。
     **新しいJSは書かない**（CSSアニメだけ）。
   ⚠ **1組は偶数枚（8枚）にして2組ならべる。** `-50%` で送るので、奇数だと継ぎ目がずれる
     （このサイトで一度踏んだ穴）。
   ⚠ 100vw で断ち切る。器が overflow:hidden なので、cdp.py の横あふれ検査には出ない。
   ⚠ hover で止める（読みたいカードで止められないと、押せるカードとして機能しない）。
   ⚠ 動きを減らす設定の人には流さない（prefers-reduced-motion）。 */
.staff-marquee{width:100vw;margin-inline:calc(50% - 50vw);overflow:hidden;
  padding-block:clamp(10px,1.2vw,16px)}
.staff-marquee__track{display:flex;align-items:stretch;width:max-content;
  animation:staff-marquee-flow 56s linear infinite;will-change:transform}
.staff-marquee:hover .staff-marquee__track,
.staff-marquee:focus-within .staff-marquee__track{animation-play-state:paused}
.staff-marquee__track .staffcard{
  flex:0 0 clamp(216px,19.5vw,280px);
  margin-right:clamp(18px,2.2vw,34px)}
@keyframes staff-marquee-flow{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.staff-marquee__track{animation:none}}
/* 一覧と同じく、押せる合図は名前がオレンジになるだけ（写真の hover 拡大は使わない） */
a.staffcard{color:inherit}
a.staffcard:hover .staffcard__name{color:var(--accent)}

/* ---- 代表メッセージ：左に本文・右に追従する写真（スクロールで切り替わる）--------------
   2026-08-31：message.html の代表メッセージ以下の3節を、
   この組み方にする。
   ＝左に読みもの／右に写真が貼り付き、読み進めると写真が入れ替わる。

   ⚠ **既存の `.stickysplit`（warranty #scope）は写真が左・1枚きり**なので流用できない。
     ただし考え方（top はヘッダーぶん下げる／短いほうを sticky／900px以下は縦積み）は同じ。
   ⚠ **sticky は祖先に `overflow:hidden` があると死ぬ。** body は `overflow-x:clip` で逃がしてある
     （clip はスクロール容器を作らない）。**hidden に戻すと黙って効かなくなる。**
   ⚠ **写真は wrap の中に収めた（参考サイトのように画面右端まで抜いていない）。**
     このサイトは横あふれで何度も転んでいる。端まで抜くなら全幅で実測してから。
   ⚠ **貼り付いていられる距離 ＝ 左列の高さ − 写真の高さ。**
     節を `min-height:82vh` で contiguous（すきま無し）に並べ、判定線が必ずどれかの節に乗るようにした。
     すきまを空けると、そこでは「どの節も横切っていない」状態になる。 */
.storyswap__inner{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(32px,4.5vw,72px);align-items:start}

/* 左：読みもの。1節＝ほぼ1画面ぶんの高さを持たせ、中身は上下中央に置く。
   ⚠ すきま（margin）で離さない。判定線がすきまに落ちると切り替わらない区間ができる。 */
/* ⚠⚠ **節の高さは「貼り付く箱の高さ」以上でなければならない。**
     貼り付いていられる距離 ＝ 3節ぶん − 箱 ＝ 3S − B。
     1節目の中心から3節目の中心まで送る距離は 2S。
     3S − B ≥ 2S、つまり **S ≥ B**。ここを外すと**両端の節でだけ写真がずれる**
     （82vh × 3 に対し箱が100vh だったとき、実測で 1節目 +81px / 3節目 −81px ずれた）。
     いまは S=74vh・B=72vh で 2vh の余裕がある。**片方を触ったら必ず両方を見直す。** */
.storyswap__sec{
  min-height:74vh;display:grid;align-content:center;
  padding-block:clamp(24px,4vw,48px)}
/* ⚠ **行長は実測で決めた。**（1行の字数／`.story__body` は15px）
     901px→27字・1100px→34字・1200px→35字・1440px→43字・**1680px→51字**。
     日本語は35〜45字が上限（規約系ページで 53→45字 に詰めたときの基準と同じ）。
     → 器を 640px で止めて44字に収める。1440px 以下では列幅のほうが狭いので効かない。 */
.storyswap__sec{max-width:640px}
.storyswap__sec .sec-head{margin-bottom:clamp(20px,2.4vw,32px)}
.storyswap__sec .sec-title{font-size:clamp(21px,2.2vw,30px)}
.storyswap__sec .story__body + .story__body{margin-top:1.6em}
/* 節の中に置くボタン（realestate のローン → loan.html）。
   ⚠ 2カラムのときは左そろえ（見出し・本文と軸をそろえる）。縦積みでは中央に寄せる。 */
.storyswap__btns{margin-top:clamp(28px,3.2vw,40px)}

/* 右：3枚を重ねて、いま読んでいる節のものだけを見せる。 */
/* ⚠ **写真を「上から108px」で貼り付けると、本文の中心と125pxずれる**（実測）。
     本文は節の中で上下中央に置いてあるので、写真も**画面の中で上下中央**に来ないと軸が合わない。
     → 貼り付くのは「ヘッダーの下から画面いっぱいの見えない箱」。写真はその中で上下中央に置く。
     ⚠ transform で半分戻す手は使わない。節の入り口で写真が前の節にはみ出す。
     ⚠ 貼り付いていられる距離 ＝ 左列の高さ − この箱の高さ。
        左列は 82vh × 3節 ≒ 246vh、箱は約100vh なので、まだ 146vh ぶん付いてくる。 */
/* ⚠ 貼り付くのは「見えない箱」。**箱の中心が画面の中心（50vh）に来るように置く**
     ＝ top + 高さ/2 = 14vh + 36vh = 50vh。
     ヘッダーのぶんだけ下げる（top:84px）と、その半分＝42px 中心が下にずれた（実測）。
     **下げるのは箱ではなく、写真の上限（max-height）のほう。**
   ⚠ 箱を100vhにすると S ≥ B を満たせず両端がずれる（下の `.storyswap__sec` の注記を見ること）。
   ⚠ `max-height` は画面が低いときだけ効く保険。ヘッダー（実測99px）に潜らせない。
     効いたときは 3:2 より横長になるが、`object-fit:cover` が受けるので破綻しない。 */
.storyswap__stack{
  position:sticky;top:14vh;height:72vh;align-self:start;
  display:grid;align-content:center}
.storyswap__frame{
  position:relative;aspect-ratio:3/2;max-height:calc(100vh - 240px);
  overflow:hidden;border-radius:var(--radius-lg);background:var(--bg)}
/* ⚠ **1枚目は常に出しっぱなしの「下地」にする。**
     3枚とも透過で切り替えると、入れ替わる 0.6秒のあいだ両方が半透明になり、
     **枠の地色が透けて一瞬白っぽく沈む**（実測で発覚）。
     下に1枚敷いておけば、上の2枚がどう入れ替わっても地は見えない。
     JS が動かない環境でも1枚目が出るので、空の枠も残らない。 */
.storyswap__img{position:absolute;inset:0;opacity:0;transition:opacity .6s ease}
.storyswap__img img{width:100%;height:100%;object-fit:cover;display:block}
.storyswap__img.is-1{z-index:1;opacity:1}
.storyswap__img.is-2{z-index:2}
.storyswap__img.is-3{z-index:3}
.storyswap__img.is-4{z-index:4}
.storyswap[data-num="2"] .storyswap__img.is-2,
.storyswap[data-num="3"] .storyswap__img.is-3,
.storyswap[data-num="4"] .storyswap__img.is-4{opacity:1}
@media (prefers-reduced-motion:reduce){ .storyswap__img{transition:none} }

/* SP用の写真は各節の中に流し込む（PCでは隠す） */
.storyswap__inline{display:none}

/* ⚠⚠ **縦積みへの切替点は 1200px。**`.stickysplit` の900pxを流用しかけたが、
     **901pxでは本文が1行27字しか入らない**（実測）。2カラムに耐えるのは1200px以上
     （1200px→35字）。狭い画面で写真が居座ると読む場所が半分になる、という判断も同じ。
   ⚠ 縦積みでは器を中央に置く。置かないと 1199px で1行75字になる（全幅に伸びるため）。
   ⚠ 節どうしの切れ目が分からなくなるので、縦積みのときだけ上に1pxの罫を入れる。 */
@media (max-width:1199px){
  .storyswap__inner{grid-template-columns:minmax(0,1fr);gap:0}
  .storyswap__stack{display:none}
  .storyswap__sec{min-height:0;display:block;padding-block:0;margin-inline:auto}
  .storyswap__sec + .storyswap__sec{
    border-top:1px solid var(--line);
    margin-top:clamp(40px,7vw,64px);padding-top:clamp(40px,7vw,64px)}
  .storyswap__btns{justify-content:center}
  .storyswap__inline{
    display:block;margin-top:clamp(24px,4vw,32px);
    aspect-ratio:3/2;overflow:hidden;border-radius:var(--radius-lg)}
  .storyswap__inline img{width:100%;height:100%;object-fit:cover;display:block}
}

/* ---- 決めごと（message.html #rules）：同じ仕掛けを「写真が左」で使う（2026-09-26）--------
   もとは「左＝写真の自動送り（.pslide）／右＝2項目の要約」で、全文は写真の下に置いていた。
   全文を右カラムに上げ、写真は読み進めるあいだ貼り付いて切り替わる形にした。
   ⚠ **新しい仕掛けは作っていない。** 代表メッセージ #story の `.storyswap` をそのまま使う
     （JSも共通）。違いは写真が左にあることだけで、それは **HTMLの並び**で決まる。
     `order` は使わない（見た目とタブ移動の順が食い違う）。
   ⚠ 節は4つ＝「01の導入／01の4つの約束／03の導入／03の21項目」。写真も4枚で数をそろえる。
   ⚠ 縦積み（1199px以下）で節の間に引く1pxの罫は #story 用の決めごと。
     ここでは節と章が一致せず、**01を導入と約束の2つに割っている**ので、そこに線が入ると
     ゴールドスタンダードが2つの話に見える。線は引かず、余白だけで離す。
     章の切れ目は 01・03 の番号と見出しが示している。 */
/* ⚠ 節の高さと、貼り付く箱の高さ。#story は 74vh / 72vh だが、ここは中身の丈がそろわず
     （01の導入は短く、約束と21項目は長い）短い節に1画面ぶんの空きが出た。
     **56vh / 54vh に下げる**（2026-09-26「余白広すぎる」）。
     写真そのものの高さは器（列幅）× 2/3 で決まるので、ここを下げても写真は小さくならない。
     ⚠ **S ≥ B（節 ≧ 箱）は守る。** 片方を触ったらもう片方も見直すこと。
     ⚠ 箱の中心が画面の中心に来るように置く＝ top + 高さ/2 = 22vh + 27vh ≒ 50vh。 */
/* ⚠ 節の上下余白は #story（clamp(24px,4vw,48px)）より詰めてある。
     節と節のあいだが 96px あり、円の下と「第1の約束」が離れて見えた
     （2026-09-26「余白が広すぎる」との指摘。ピンは節1の下端）。 */
.storyswap--left .storyswap__sec{min-height:50vh;padding-block:clamp(16px,2vw,28px)}
.storyswap--left .storyswap__stack{top:26vh;height:48vh}

/* 桶庄ベーシックの21項目は3列。1列だと縦に長すぎる（2026-09-26）。
   ⚠ **21 ＝ 3列 × 7行ちょうど。** 行数を明示して縦に流すので、読む順は
     01-07（左）／08-14（中）／15-21（右）になる。
     **項目を増減したら 7 を直す**（直さないと4列目ができる、または列の丈がそろわない）。
   ⚠ 番号（`ol.rule-list > li::before`）の逃げ幅 44px は1列のときの値。3列では列が細いので
     見出しが2行に折り返す。折り返し前提で行の高さは auto にしてある（罫は列をまたいでそろう）。 */
.rule-list--cols3{display:grid;grid-auto-flow:column;grid-template-rows:repeat(7,auto);
  column-gap:clamp(18px,2vw,30px)}
/* 縦積み（1199px以下）では器が 640px までなので2列。600px を割ったら1列に戻す。
   ⚠ 2列のときは行送り（左→右）に変える。細い画面で縦に流すと、画面外の列を読ませることになる。 */
@media (max-width:1199px){
  .rule-list--cols3{grid-auto-flow:row;grid-template-rows:none;
    grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:599px){
  .rule-list--cols3{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:1199px){
  .storyswap--left .storyswap__sec + .storyswap__sec{
    border-top:0;margin-top:clamp(28px,5vw,44px);padding-top:0}
}

/* ---- 全面写真の帯（パララックス）--------------------------------------------
   （2026-08-31・company.html の沿革の手前）。
   ⚠ `.wrap` の外に置くので、負のマージンを使わなくても最初から全幅になる。
     **無理に画面外へ引っぱらない**（このサイトは横あふれで何度も転んでいる）。
   ⚠ 写真は器より上下に10%ずつ大きくしておき、その余りぶんだけ動かす。
     動かす量は「帯の高さの10%」ちょうど。**それ以上動かすと端に地色のすきまが出る。**
     （p=−1のとき上端 −20%・下端 100%、p=+1のとき上端 0%・下端 120%。どちらもぴったり覆う。）
   ⚠ 動きは js/main.js。`prefers-reduced-motion` で止まる（そのときは写真が中央で静止する）。 */
.paraband{position:relative;overflow:hidden;background:var(--bg);
  height:clamp(280px,42vw,520px)}
/* ⚠ **切り位置は実測で決める。** 既定（center 50%）だと帯が横長すぎて**人の頭が切れた**。
     0/15/30/50% を並べて見て 30% に決定（頭が入り、手元のカップも残る）。
     **写真を差し替えたら、この数字も測り直すこと。** */
.paraband__img{position:absolute;left:0;top:-10%;width:100%;height:120%;
  object-fit:cover;object-position:center 30%;display:block;will-change:transform}
@media (prefers-reduced-motion:reduce){
  .paraband__img{top:0;height:100%;transform:none !important}
}

/* 会社案内「専門スタッフ」からスタッフ紹介一覧へ（2026-08-31）。
   ⚠ 流れるカードの帯（`.pt-troubles-marquee`）は `.wrap` の外にあるので、
     ボタンは器に入れ直してから中央に置く。 */
.pro-more{margin-top:clamp(36px,4.5vw,60px)}

/* 店舗ページのスタッフカードは、押すとスタッフ紹介の詳細へ（2026-08-31）。
   ⚠ 押せる合図は**名前がオレンジになるだけ**（一覧・詳細と同じ。写真の拡大は使わない）。
   ⚠ 流れている帯なので、hover では止まっても**キーボードで辿ると止まらない**。
     `:focus-within` を足して、タブで入ったときも止まるようにする。 */
a.procard{color:inherit;text-decoration:none}
a.procard:hover .procard__name{color:var(--accent)}
.pt-troubles-marquee:focus-within .pt-troubles-track{animation-play-state:paused}

/* ---- コラムのカテゴリー（2026-08-31）-------------------------------
   blog-detail「あわせて読まれています」＝カードの下にカテゴリー、押すとその一覧へ。
   blog.html＝リード文の下にカテゴリーの帯。
   ⚠ **記事へのリンクの中にカテゴリーのリンクは置けない**（a の入れ子は不正）。
     → カードを `.cardunit` で包み、カテゴリーはカードの外の兄弟にする。
   ⚠ **チップの高さをそろえる。** 見出しは1行のものと2行のものが混ざるので、
     本文の直後に置くと3枚でバラバラになる（特集カードの View more で踏んだのと同じ）。
     `.cardunit` を縦のflexにして `margin-top:auto` で下端にそろえる。
   ⚠ 中の `.workcard` は `flex:0 0 auto`（flex item は既定で縮む）。 */
.cardunit{display:flex;flex-direction:column;height:100%}
.cardunit > .workcard{flex:0 0 auto}
.cardunit__cats{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:14px}

/* カテゴリーの帯を中央に寄せる（`.sec-head.center` の外に置いているため）。
   ⚠ `.filterbar` の既定（staff.html）は左そろえなので、この修飾クラスのときだけ寄せる。
   ⚠⚠ **上に付けた margin は見出しの下 margin に飲まれる**（隣り合う兄弟のマージンは相殺されて
      大きいほうだけが残る）。実測＝見出しの下72px ＋ 帯の上38px でも**上は72pxのまま、下は0px**だった。
      → 帯は**下**に余白を持たせ、上は見出し側を詰めて調整する。**「書いた値が出ているか」は実測する。**
   ⚠ 見出しを詰めるのはこのページだけ（`.blog-index`）。共通の `.sec-head` は触らない。 */
.blog-index .sec-head{margin-bottom:clamp(26px,3vw,38px)}
.filterbar--center{justify-content:center;margin-top:0;margin-bottom:clamp(40px,6vw,72px)}

/* ---- 専門スタッフのカードはプロフィールへのリンク----
   中身は [okesho_pro_staff]（inc/shortcodes.php）。a にしたので文字色と下線を戻す。
   所属店舗が空の人は .procard__shop を出さない＝最後の行の下の余白を資格の行が持つ。 */
a.procard{color:inherit;text-decoration:none}
a.procard .procard__lic:last-child{margin-bottom:clamp(14px,1.4vw,18px)}
a.procard:hover .procard__name{color:var(--accent)}
/* ⚠ スタッフ投稿から出すと資格名の長さがまちまち（最長「ファイナンシャルプランニング技能士3級」19字）。
     stretch のままだと1枚が2行になっただけで**全カードが2行ぶん伸び**、資格の下が空く。
     この帯だけ高さをそろえない＝2行の人のカードだけ少し長くなる。 */
.pro-marquee .pt-troubles-track{align-items:flex-start}

/* 沿革カードの写真（2026-09-17）。okesho-group.jp の「歴史」に写真がある年だけ、文章の下に入れる。
   カードの高さはそろえてあるので、写真は下に寄せて横の並びをそろえる。
   ⚠ 元の写真は縦・横が混ざっている。器を4:3に決めて切る。 */
.tlx__photo{margin:auto 0 0;aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;background:var(--line,#e8e2d8)}
.tlx__photo img{width:100%;height:100%;object-fit:cover;display:block}

/* 物件探し（/realestate/）のヒーロー（2026-09-17 差し替え）。看板が右寄りにあるので、
   左右が大きく切れるスマホでも看板が残るように右へ寄せる。 */
.phero__cover[src$="realestate-hero.jpg"]{object-position:68% center}

/* ---- 決めごとの「詳しく見る」とポップアップ（2026-09-17）----
   出典＝moreliving.co.jp/corporate/ の6ページ。本文が長い（桶庄ベーシックは21項目）ので、
   パネルの中だけをスクロールさせる。 */
/* ⚠ 2026-09-26：3列にして見出しを18pxに落としたので、ボタンだけが大きく見えていた。
     文字14→13px・丸34→28px・矢印16→13px に落とす（「もう少し小さくして」）。
   ⚠ **上下に5pxのpaddingを入れて、押せる範囲は38pxを保つ。** 丸を小さくすると指で押す的も
     小さくなる。paddingは透明なので見た目の間隔は変わらない（margin-top を 10→5px にして相殺）。
     28px単体だと WCAG 2.5.8 の下限24pxぎりぎりで、スマホで押しにくい。 */
.rule-more{display:inline-flex;align-items:center;gap:10px;margin-top:5px;padding:5px 0;border:0;background:none;
  font:inherit;font-size:13px;font-weight:500;letter-spacing:.06em;color:var(--ink);cursor:pointer}
/* オレンジの丸に白い矢印（2026-09-17）。文字だけでは押せると気づかれなかった。
   矢印は --arw-ico を mask で白く塗る。hover で丸が少し大きく・矢印が右へ動く。 */
.rule-more__arw{position:relative;flex:none;width:28px;height:28px;border-radius:50%;background:var(--accent);
  transition:background-color .25s ease,transform .25s ease}
.rule-more__arw::before{content:"";position:absolute;inset:0;margin:auto;width:13px;height:13px;background:var(--white);
  -webkit-mask:var(--arw-ico) center/contain no-repeat;mask:var(--arw-ico) center/contain no-repeat;
  transition:translate .25s ease}
.rule-more:hover .rule-more__arw,.rule-more:focus-visible .rule-more__arw{background:var(--accent-hover);transform:scale(1.06)}
.rule-more:hover .rule-more__arw::before,.rule-more:focus-visible .rule-more__arw::before{translate:3px 0}
.rule-more:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:20px}
html.is-rule-open{overflow:hidden}

.rule-modal{padding:0;border:0;background:transparent;max-width:none;max-height:none;
  width:100%;height:100%;margin:0;overflow:hidden}
.rule-modal[open]{display:grid;place-items:center}
.rule-modal::backdrop{background:rgba(24,20,16,.62)}
.rule-modal__panel{position:relative;width:min(760px,calc(100% - 32px));max-height:min(86vh,900px);
  overflow-y:auto;overscroll-behavior:contain;background:var(--white);border-radius:var(--radius-lg);
  padding:clamp(40px,5vw,64px) clamp(22px,5vw,64px) clamp(36px,4.5vw,56px);text-align:left}
.rule-modal__close{position:sticky;top:0;float:right;margin:calc(-1 * clamp(22px,3vw,40px)) calc(-1 * clamp(8px,3vw,40px)) 0 0;
  width:44px;height:44px;border:0;border-radius:50%;background:var(--bg);cursor:pointer;z-index:2}
.rule-modal__close::before,.rule-modal__close::after{content:"";position:absolute;left:50%;top:50%;
  width:18px;height:1.5px;background:var(--ink);translate:-50% -50%;rotate:45deg}
.rule-modal__close::after{rotate:-45deg}
.rule-modal__num{font-family:var(--num);font-size:15px;letter-spacing:.12em;color:var(--accent2)}
.rule-modal__ttl{margin-top:6px;font-size:clamp(22px,2.4vw,28px);font-weight:500;letter-spacing:.06em;line-height:1.5;color:var(--ink)}
.rule-modal__lead{margin-top:14px;font-size:15px;line-height:2;color:var(--sub)}
.rule-modal__body{margin-top:clamp(24px,3vw,36px);border-top:1px solid var(--line)}
.rule-list{list-style:none;margin:0;padding:0;counter-reset:rule}
.rule-list > li{padding:clamp(18px,2.2vw,24px) 0;border-bottom:1px solid var(--line)}
ol.rule-list > li{counter-increment:rule;position:relative;padding-left:44px}
ol.rule-list > li::before{content:counter(rule,decimal-leading-zero);position:absolute;left:0;
  top:calc(clamp(18px,2.2vw,24px) + 2px);font-family:var(--num);font-size:15px;letter-spacing:.06em;color:var(--accent2)}
/* ⚠ 見出しの大きさは指定されたもの（2026-09-26）。
     16px/27.2px → PC 24px/36px・SP(390px) 20px/30px。行間はどちらも 1.5。
     **ここは `.rule-list--cols3` の CSS より後ろにある。** 上書きを別の場所に足すと効かない
     （足しかけて実測で気づいた）。大きさを変えるときはこの1行を直す。
   ⚠ `.rule-list` は #rules の3つのリスト（4つの約束・21項目）だけ。
     ポップアップの見出しは `.rule-modal__ttl`（h3）で別物なので影響しない。 */
.rule-list h4{font-size:clamp(20px,1.7vw,24px);font-weight:500;line-height:1.667;letter-spacing:.04em;color:var(--ink)}
/* 21項目のカードだけ小さくする（20px から更に小さく。2026-09-26）。
   PC 18px/30px・SP(390px) 17px/28px。行間は上と同じ 1.667 倍が両方に合う
   （18×1.667＝30.0／17×1.667＝28.3）ので、ここはサイズだけ指定する。
   ⚠ `.rule-list--cols3 h4` は `.rule-list h4` と**特異度が同じ**（0,1,1）。
     **必ずこの順（後ろ）に置くこと。** 前に置くと効かない。 */
.rule-list--cols3 h4{font-size:clamp(17px,1.3vw,18px)}
.rule-list h4 span{display:block;font-size:13px;font-weight:400;color:var(--sub)}
.rule-list p{margin-top:8px;font-size:15px;line-height:2;color:var(--sub)}
.rule-list small{display:block;font-size:13px}
.rule-sublist{margin:10px 0 0;padding-left:1.4em;font-size:15px;line-height:2;color:var(--sub)}
.rule-sublist ul{margin:4px 0;padding-left:1.2em;list-style:disc}
/* ミッションとビジョンは、白い円をふたつ、縁が少し重なるように並べる
   （2026-09-26。もとは角丸の箱を2つ横に並べていた）。
   ⚠ **幅は % で持つ。** 52% + 52% − 4%（重なり）＝ちょうど 100%。器が狭くなっても
     はみ出さず、重なりの比率も変わらない。px の clamp で持つと、狭い画面で足して
     器を超える（390pxで実測して気づいた）。
   ⚠ 重なるところは後ろの円が上に乗る（どちらも不透明な白）。輪郭は薄い罫で見せる。
   ⚠ 円の中に入る字は、円に内接する四角（直径の約0.7倍）に収まる量しか置けない。
     文字を増やすときは 390px で必ず実測すること。 */
.rule-mv{display:flex;justify-content:center;align-items:center;gap:0;
  padding:clamp(12px,1.6vw,20px) 0}
.rule-mv > div{flex:0 0 auto;width:52%;max-width:300px;aspect-ratio:1;
  background:var(--white);border:1px solid var(--line);border-radius:50%;
  display:grid;align-content:center;justify-items:center;
  padding:6%;text-align:center}
/* ⚠ **円の中の字は「内接する四角」に収める。** 円の幅いっぱいに置くと、行の両端が
     円の外へ出る（幅300pxの円に幅270pxの行を入れると角が欠けて見える）。
     内接四角＝直径 × 0.707。余裕を見て 70% で折り返させる。
   ⚠ padding を % で持つと**親（.rule-mv）の幅**が基準になり、円ごとに縦が伸びて
     真円でなくなる（実測で 300x327 の楕円になっていた）。字幅は padding ではなく
     この max-width で決める。 */
.rule-mv > div > *{max-width:70%}
.rule-mv > div + div{margin-left:-4%;position:relative;z-index:1}
.rule-mv__label{font-size:13px;letter-spacing:.12em;color:var(--accent2)}
.rule-mv__sub{margin-top:6px;font-size:14px;color:var(--sub)}
.rule-mv__main{margin-top:4px;font-size:16px;font-weight:500;line-height:1.8;color:var(--ink);word-break:auto-phrase;text-wrap:balance}
.rule-note{padding-top:18px;font-size:14px;line-height:1.9;color:var(--sub)}
/* 600px を割ると、円を横に2つ並べた時点で直径が175pxしか取れず、中の字が円からあふれる
   （390pxで実測）。**縦に積んで、上下の縁を重ねる。** 円は大きくなるので字は余裕で収まる。 */
@media (max-width:600px){
  .rule-mv{flex-direction:column}
  .rule-mv > div{width:80%;max-width:300px}
  .rule-mv > div + div{margin-left:0;margin-top:-4%}
  ol.rule-list > li{padding-left:36px}
}

/* ============================================================
   代表メッセージ（善循環の図）・会社案内（有資格者／所属団体）・来店予約（車種欄）
   ------------------------------------------------------------
   ⚠ **もとは wp/themes/okesho/css/wp-extra.css にだけ書いてあった**（2026-09-15/09-19 に追記）。
     wp-extra.css は「WordPress版で足したぶん」を入れる場所で、**原本には読み込まれない**。
     そのため原本（html-work/message.html 等）を直接ブラウザで開くと、
     **善循環の図が巨大な黒い円に崩れる**（CSSが1行も当たらず、SVGが器なしで伸びるため）。
     見た目の決めごとなので、原本の側に移した（2026-09-26）。**wp-extra.css からは消してある。**
   ⚠ page.css に置いた理由＝message／company／reservation／shop-* はどれも
     `common, category, part, page` の組を読む（functions.php の okesho_css_set と同じ組）。
   ⚠ `.rsv-note` と flatpickr の見た目はWordPress側だけの話なので wp-extra.css に残してある。
   ⚠ concept.css にも `.zen` `.zen__fig` `.zen__ring` が残っているが、**どのページからも使われていない**
     （古い版の名残）。message.html が使うのは `.zen` `.zen__body` `.zen2*` だけ。
   ============================================================ */
/* =============================================================
   代表メッセージ・会社案内（2026-09-15）
   ============================================================= */
/* 善循環の図：核＝お客様・従業員・会社（双方向の矢印）／外の輪＝ご縁のある方々 */
.zen{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(32px,5vw,84px);align-items:center}
.zen__body .sec-head{margin-bottom:0}
.zen2{margin:0;width:100%;max-width:500px;margin-inline:auto}
.zen2 svg{display:block;width:100%;height:auto;overflow:visible}
.zen2__band{fill:var(--bg,#F6F1EA);stroke:var(--line);stroke-width:1}
.zen2__inner{fill:#fff;stroke:var(--line);stroke-width:1}
.zen2__o{font-size:13px;fill:var(--ink);text-anchor:middle;dominant-baseline:middle;letter-spacing:.04em}
.zen2__c--cust{fill:var(--accent)}
.zen2__c--staff{fill:var(--accent2-ink,#886958)}
.zen2__c--comp{fill:var(--ink)}
.zen2__ct{font-size:15px;font-weight:500;fill:#fff;text-anchor:middle;dominant-baseline:middle;letter-spacing:.08em}
.zen2__hub{font-size:15px;font-weight:500;fill:var(--ink);text-anchor:middle;dominant-baseline:middle;letter-spacing:.12em}
.zen2__arw{stroke:var(--sub);stroke-width:1.6}
.zen2 marker path{fill:var(--sub)}
.zen2__cap{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:18px;text-align:center}
.zen2__cap b{font-size:clamp(17px,1.8vw,20px);font-weight:500;letter-spacing:.12em}
.zen2__cap span{font-size:13px;color:var(--sub);letter-spacing:.04em}
@media (max-width:980px){ .zen{grid-template-columns:1fr;gap:clamp(34px,6vw,48px)} .zen2{max-width:420px} }

/* 会社案内：有資格者の人数 */
.licgrid{list-style:none;margin:0 auto;padding:0;max-width:960px;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.licgrid li{background:#fff;display:flex;flex-direction:column;justify-content:center;gap:6px;padding:18px 20px;min-height:96px}
.licgrid b{font-family:var(--num,var(--en));font-size:clamp(26px,2.6vw,32px);font-weight:400;line-height:1;color:var(--ink)}
.licgrid b small{font-family:var(--sans,inherit);font-size:13px;margin-left:4px;color:var(--sub)}
.licgrid span{font-size:14px;line-height:1.6;letter-spacing:.04em;color:var(--ink)}
.licgrid__note{max-width:960px;margin:12px auto 0;text-align:center;font-size:13px;color:var(--sub)}
@media (max-width:600px){ .licgrid{grid-template-columns:1fr 1fr} .licgrid li{padding:14px;min-height:84px} .licgrid span{font-size:13px} }
/* 会社案内：所属団体（許可・登録の下） */
.license__sub{font-size:clamp(17px,1.8vw,20px);font-weight:500;letter-spacing:.08em;text-align:center;margin:clamp(40px,4.4vw,56px) 0 clamp(18px,2vw,24px)}
.memberlist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(20px,3vw,40px)}
.memberlist li{padding:14px 0;border-bottom:1px solid var(--line);font-size:15px;line-height:1.7;letter-spacing:.04em}
@media (max-width:700px){ .memberlist{grid-template-columns:1fr} }
/* 有資格者の人数：PCは3列（18項目＝6段でそろう）。空いたマスが地の色で埋まらないよう、線はマスごとに引く */
.licgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:0;background:none;border:0;
  border-top:1px solid var(--line);border-left:1px solid var(--line)}
.licgrid li{border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
@media (max-width:900px){ .licgrid{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* 来店予約：お車でのご来場が「いいえ」のときは車種・ボディカラーを出さない。
   `.form-field` は display を持つので、hidden 属性だけでは消えない。 */
.form-field.car-detail[hidden]{display:none}