/* ==========================================================================
   h-top.css — H案v2（Soup Stock Tokyo 型・無彩色）トップページ専用
   読み込み: functions_h.php が is_front_page() のときだけ style.css → h-skin.css の後に読む。
   対象: front-page.php の <main class="h-top"> の中だけ（新しいクラスは h- 接頭辞）。
   ヘッダー・フッター・右端の縦タブ・SP固定バーは h-skin.css の担当（ここでは触らない）。
   意匠の正: モック H案v2_スープストックに忠実_本文19px_20260930.html（本文列1164px・写真と文542+80+542・
            写真札335x207・枠つき札375x3・灰帯#F8F8F8上下80・節100）。
   文字: 本文はテーマの大きさ（PC 19px/500/行間2/字間.05em・SP 16px）より小さくしない。
         補助17px・注記16px・小ラベル14px。見出しはモック（h2 26px 字間.15em・h3 21px）。
   区切り: PC ≥1101px／タブレット 641〜1100px（901〜1100 と 641〜900 の2段）／スマホ ≤640px
          （テーマ style.css のスマホ境界 640px に合わせる）。
   色: 白／#F8F8F8／#333／#8a8a8a・#999（注記は #6f6f6f）／罫 #D9D9D9（枠つき札は #bbb）／#222／#111。差し色なし。
   形: 角は3pxまで（「›」の黒丸だけ円）・影なし（写真の上の文字の text-shadow のみ）・写真は saturate(.88)。
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. 土台：テーマ全体の規則（body の色・img の height:auto・strong の色・.wrap の幅）を
      この中だけ打ち消す
   -------------------------------------------------------------------------- */
.h-top{
  --ht-ink:#333; --ht-sub:#8a8a8a; --ht-sub2:#999; --ht-note:#6f6f6f; --ht-line:#D9D9D9; --ht-frame:#bbb;
  --ht-grey:#F8F8F8; --ht-dark:#222; --ht-black:#111;
  --ht-col:1164px; --ht-text:760px; --ht-gut:24px;
  display:block;color:var(--ht-ink);background:#fff;
  font-size:19px;line-height:2;letter-spacing:.08em;font-weight:500;  /* 2026-10-01 忠実化第2弾：字間 .05→.08em */
}
.h-top *,.h-top *::before,.h-top *::after{box-sizing:border-box}
.h-top h1,.h-top h2,.h-top h3,.h-top p,.h-top figure{margin:0;padding:0}
.h-top h1{font-weight:700;color:inherit}
.h-top h2,.h-top h3{font-weight:500;color:inherit}  /* 2026-10-01 忠実化：見出しは中太（SST の軽い見出しに寄せる）。冒頭の h1 だけ太字 */
.h-top strong,.h-top b{color:inherit;font-weight:700}
.h-top a{color:inherit}
.h-top img{display:block;max-width:100%}  /* 2026-10-01 忠実化：写真は自然な色（彩度.88 をやめた） */
.h-top .h-chart img,.h-top img.h-vo-scan{filter:none}

/* 節の律：節は上下100px、灰帯は80px。白い節が続くときは上を20pxに詰める（モックと同じ） */
.h-top .h-s{padding:100px 0}
.h-top .h-s.h-g{background:var(--ht-grey);padding:80px 0}
.h-top .h-s:not(.h-g) + .h-s:not(.h-g),
.h-top .h-qc + .h-s:not(.h-g){padding-top:20px}
/* 2026-10-01 忠実化（宗行さん「おすすめで」）：薄灰の帯は「初回面談のご案内」(#mendan) とフッター前の帯（.h-strip）だけに。
   他の4つ（相続税の目安・工程・ごあいさつ・面談場所）は白地にして、節の境は細い罫で区切る（SST のトップは帯1つ） */
.h-top .h-s.h-g:not(#mendan){background:#fff;border-top:1px solid var(--ht-line)}
.h-top .h-s.h-intro{padding-top:70px}
/* 本文列：.wrap（リビールのフック）の幅・余白を 1164px 列に上書き */
.h-top .h-w{max-width:calc(var(--ht-col) + var(--ht-gut) * 2);margin-inline:auto;padding-inline:var(--ht-gut)}

/* --------------------------------------------------------------------------
   1. 共通部品
   -------------------------------------------------------------------------- */
/* 題の行：左に小ラベル＋h2、右に「〜へ ›」 */
.h-top .h-th{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:44px}
.h-top .h-th-l{min-width:0}
.h-top .h-ey{display:none}  /* 2026-10-01 忠実化第2弾：見出しの上の小ラベルは出さない（SST にない・見出しと重複） */
.h-top .h-h2{font-size:24px;line-height:1.7;letter-spacing:.15em}  /* 2026-10-01 忠実化第2弾：SST の節見出し 24px に */
.h-top .h-th-r{flex:none;font-size:16px;letter-spacing:.12em;text-decoration:none;white-space:nowrap;line-height:1.8}
.h-top .h-th-r::after{content:"›";margin-left:22px;font-size:20px}
.h-top .h-th-r:hover,.h-top .h-th-r:focus-visible{text-decoration:underline;text-underline-offset:4px}
.h-top .h-th-voice{margin-top:96px}
/* 題の下の導入文（760px） */
.h-top .h-lede{max-width:var(--ht-text);margin:-24px 0 44px;font-size:19px}
.h-top .h-lede-wide{max-width:none}
.h-top .h-lede + .h-lede,.h-top .h-lede + .h-p{margin-top:-30px;margin-bottom:34px}
/* 本文・補助・注記 */
.h-top .h-p{font-size:19px;line-height:2}
.h-top .h-p + .h-p{margin-top:14px}
.h-top .h-p17{font-size:17px;line-height:1.95}
.h-top .h-sm{font-size:16px;line-height:1.85;color:var(--ht-note)}
.h-top .h-rt{text-align:right}
.h-top .h-btnrow{margin-top:26px}
/* 「文＋黒丸の ›」の導線 */
.h-top .h-dot{display:inline-flex;align-items:center;gap:14px;font-size:16px;font-weight:700;letter-spacing:.1em;line-height:1.7;text-decoration:none;text-align:left}
.h-top .h-dot::after{content:"›";flex:none;width:auto;height:auto;border-radius:0;background:none;color:var(--ht-ink);font-size:22px;line-height:20px;text-align:center;font-weight:700;letter-spacing:0}
.h-top .h-dot:hover,.h-top .h-dot:focus-visible{text-decoration:underline;text-underline-offset:4px}
/* 項目ごとの小さな導線（墨＋下線・右寄せ） */
.h-top .h-go{display:block;margin-top:10px;text-align:right;font-size:16px;letter-spacing:.06em;line-height:1.7;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--ht-sub2)}
.h-top .h-go:hover,.h-top .h-go:focus-visible{text-decoration-color:currentColor}
/* ボタン（白地に墨の枠／黒地） */
.h-top .h-btn{display:inline-block;border:1px solid var(--ht-ink);border-radius:3px;background:#fff;color:var(--ht-ink);font-size:17px;font-weight:700;line-height:1.6;letter-spacing:.06em;padding:12px 40px;text-align:center;text-decoration:none;transition:background-color .2s}
.h-top .h-btn:hover,.h-top .h-btn:focus-visible{background:var(--ht-grey)}
.h-top .h-btn.h-k{background:var(--ht-dark);border-color:var(--ht-dark);color:#fff}
.h-top .h-btn.h-k:hover,.h-top .h-btn.h-k:focus-visible{background:var(--ht-black);border-color:var(--ht-black)}
/* 注意の枠（灰帯の上では白地＋罫） */
.h-top .h-box{background:#fff;border:1px solid var(--ht-line);padding:24px 28px;margin-top:30px}
.h-top .h-box p{font-size:19px;line-height:2}
.h-top .h-box strong:first-child{display:inline-block;margin-bottom:4px}
/* 下線つきの見出しかたまり（写真＋文の行の右側） */
.h-top .h-ul{border-bottom:0;padding-bottom:0;margin-bottom:34px}  /* 2026-10-01 忠実化第2弾：見出しの下の線をやめ余白で */

/* --------------------------------------------------------------------------
   2. 冒頭の写真モザイク（左上＝題・左下＝相続発生の入口・右＝リード＋生前の入口）
   -------------------------------------------------------------------------- */
.h-top .h-mo{display:grid;grid-template-columns:1fr 1fr;height:742px;height:clamp(480px,min(51.5vw,calc(100vh - 80px)),742px);height:clamp(480px,min(51.5vw,calc(100svh - 80px)),742px);background:#555}
.h-top .h-mo-l{display:grid;grid-template-rows:1fr 1fr;min-height:0}
.h-top .h-mo-c{position:relative;overflow:hidden;min-height:0}
.h-top .h-mo-c>img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover}
.h-top .h-mo-c::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.18);pointer-events:none}
.h-top .h-mo-h1{position:absolute;z-index:2;left:60px;right:40px;top:54px;color:#fff;font-size:36px;font-weight:500;line-height:1.6;letter-spacing:.12em;text-shadow:0 2px 12px rgba(0,0,0,.45)}  /* 2026-10-01 忠実化第2弾：44px/700→36px/500（SST の冒頭文字は控えめ） */
.h-top .h-mo-lead{position:absolute;z-index:2;left:48px;right:48px;bottom:110px;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.45)}
.h-top .h-mo-sub{font-size:24px;font-weight:500;line-height:1.6;letter-spacing:.08em}  /* 2026-10-01 忠実化第2弾：28/700→24/500 */
.h-top .h-mo-ey{font-size:19px;font-weight:700;line-height:1.6;letter-spacing:.05em;margin-top:4px}
.h-top .h-bar{position:absolute;z-index:3;left:0;right:0;bottom:0;display:block;background:rgba(40,40,40,.78);color:#fff;text-align:center;font-size:22px;font-weight:700;letter-spacing:.12em;line-height:1.6;padding:16px 12px;text-decoration:none;transition:background-color .2s}
.h-top .h-bar::after{content:"›";margin-left:16px;font-weight:500}
.h-top .h-bar:hover,.h-top .h-bar:focus-visible{background:rgba(17,17,17,.88)}
.h-top .h-bar:focus-visible{outline:2px solid #fff;outline-offset:-5px}

/* --------------------------------------------------------------------------
   3. 写真＋文の行（左に写真542・右に文542・間80）
   -------------------------------------------------------------------------- */
.h-top .h-wk{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:80px;align-items:center}
.h-top .h-wk-top{align-items:start}
.h-top .h-wk.h-wk-noimg{grid-template-columns:minmax(0,760px)}  /* 2026-10-01 料金：写真を外して文だけ（長文列760） */
.h-top .h-wk-img{width:100%;height:340px;object-fit:cover}
.h-top .h-lead-t{font-size:24px;line-height:1.8;font-weight:700;letter-spacing:.15em}
.h-top .h-trust{margin-top:10px;font-size:15px;line-height:1.85;color:var(--ht-note);letter-spacing:.06em}
.h-top .h-trust span+span::before{content:"／";margin:0 .5em;color:var(--ht-sub2)}
.h-top .h-intro .h-rt{margin-top:14px}
.h-top .h-tel{gap:12px;align-items:baseline;flex-wrap:wrap;justify-content:flex-end;letter-spacing:.04em}
.h-top .h-tel::after{align-self:center}
.h-top .h-tel-l{font-size:15px;font-weight:500;color:var(--ht-note)}
.h-top .h-tel-n{font-size:22px;font-weight:700;letter-spacing:.04em}
.h-top .h-tel-h{font-size:15px;font-weight:500;color:var(--ht-note)}
/* 料金・世田谷は見出しを右の列に置く（h2 は現行どおり h2） */
.h-top .h-wk-tx .h-h2{font-size:24px;line-height:1.8}
.h-top #price .h-wk-img{height:360px}
.h-top .h-wk-img[src*="hillside-residential-view"]{height:520px}
/* 料金の計算例：条件／大きな数字／注記 */
.h-top .h-ex{display:block;border-top:1px solid var(--ht-line);margin-top:26px;padding-top:18px}
.h-top .h-ex-c{display:block;font-size:19px;font-weight:700;line-height:1.8}
.h-top .h-ex-v{display:block;font-size:46px;font-weight:700;line-height:1.4;letter-spacing:.04em;margin-top:4px}
.h-top .h-ex-n{display:block;font-size:17px;color:var(--ht-note);line-height:1.8}
/* 課税割合の図 */
.h-top .h-chart{margin:26px 0 10px}
.h-top .h-chart img{width:100%;height:auto;border:1px solid var(--ht-line);background:#fff;padding:12px}

/* --------------------------------------------------------------------------
   4. 3列の写真札（状況から探す・サービス・面談の場所）
   -------------------------------------------------------------------------- */
.h-top .h-c3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:56px 79px}
.h-top .h-cd{display:block;color:inherit;text-decoration:none;border-bottom:1px solid var(--ht-line);padding-bottom:26px}
.h-top .h-cd>img{width:100%;height:auto;aspect-ratio:335/207;object-fit:cover;margin-bottom:22px}
.h-top .h-cd-tx{display:block}
.h-top .h-cd-t{display:block;font-size:21px;line-height:1.7;letter-spacing:.06em}
.h-top .h-cd-p{display:block;font-size:17px;line-height:1.9;margin-top:4px}
.h-top .h-cd-pl{font-size:17px;line-height:1.9;font-weight:700;margin-top:8px}
.h-top .h-cd-s{display:block;font-size:15px;line-height:1.8;color:var(--ht-sub2);letter-spacing:.12em;margin-top:10px}
.h-top a.h-cd{transition:border-color .2s}
.h-top a.h-cd:hover,.h-top a.h-cd:focus-visible{border-bottom-color:var(--ht-ink)}
.h-top a.h-cd:hover .h-cd-t,.h-top a.h-cd:focus-visible .h-cd-t{text-decoration:underline;text-underline-offset:4px}
.h-top .h-flag{display:inline-block;border:1px solid var(--ht-sub2);border-radius:3px;font-size:14px;line-height:1.7;letter-spacing:.12em;padding:0 10px;margin-bottom:8px;color:var(--ht-ink)}

/* --------------------------------------------------------------------------
   5. 縦罫で区切る文字の列（お悩み・教科書・よくある質問）
   -------------------------------------------------------------------------- */
.h-top .h-nw{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.h-top .h-nw>*{padding:6px 34px 26px;border-left:1px solid var(--ht-line)}
.h-top .h-nw>:where(:nth-child(3n+1)){padding-left:0;border-left:0}
.h-top .h-nw>:where(:nth-child(n+4)){padding-top:36px}
.h-top .h-nw-t{font-size:21px;line-height:1.65;letter-spacing:.05em;margin-bottom:10px}
.h-top .h-nw-p{font-size:19px;line-height:2}
/* 教科書の記事（札全体がリンク・写真なし） */
.h-top .h-art{display:block;text-decoration:none;color:inherit}
.h-top .h-art-t{display:block;font-size:19px;line-height:1.75;letter-spacing:.04em}
.h-top .h-art-go{display:block;margin-top:10px;text-align:right;font-size:16px;color:var(--ht-note);letter-spacing:.06em}
.h-top .h-art:hover .h-art-t,.h-top .h-art:focus-visible .h-art-t{text-decoration:underline;text-underline-offset:4px}
/* 2列（よくある質問） */
.h-top .h-nw.h-n2{grid-template-columns:repeat(2,minmax(0,1fr))}
.h-top .h-nw.h-n2>*{padding:6px 40px 34px;border-left:1px solid var(--ht-line)}
.h-top .h-nw.h-n2>:where(:nth-child(2n+1)){padding-left:0;border-left:0}
.h-top .h-nw.h-n2>:where(:nth-child(n+3)){padding-top:30px}
.h-top .h-fq-q{font-size:21px;line-height:1.7;font-weight:700;letter-spacing:.04em;margin-bottom:10px}
.h-top .h-fq-a{font-size:19px;line-height:2}

/* --------------------------------------------------------------------------
   6. 灰帯（左に文・右に写真）
   -------------------------------------------------------------------------- */
.h-top .h-gb{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:80px;align-items:start}
.h-top .h-gb .h-h2{margin-bottom:22px}
.h-top .h-gb-img{width:100%;height:560px;object-fit:cover}
.h-top .h-gb-greet .h-gb-img{height:340px;object-position:center top}
.h-top .h-gb-mendan{grid-template-columns:minmax(0,1.24fr) minmax(0,.76fr);gap:64px}
.h-top .h-gb-mendan .h-gb-img{height:760px}
/* まず目安を：黒ボタン＋その下の小さな注記（1本のリンク） */
.h-top .h-cta{display:inline-block;text-decoration:none;color:inherit}
.h-top .h-cta .h-btn{display:inline-block;padding:14px 40px}
.h-top .h-cta-n{display:block;margin-top:10px;font-size:16px;line-height:1.8;color:var(--ht-note);letter-spacing:.04em}
.h-top .h-cta:hover .h-btn.h-k,.h-top .h-cta:focus-visible .h-btn.h-k{background:var(--ht-black);border-color:var(--ht-black)}
/* 初回面談：ラベル｜——｜本文 の行 */
.h-top .h-mid{font-size:21px;line-height:1.7;letter-spacing:.06em;margin-bottom:10px}
.h-top .h-rows{border-top:1px solid var(--ht-line)}
.h-top .h-row{display:grid;grid-template-columns:9.6em 2.2em minmax(0,1fr);padding:14px 0;border-bottom:1px solid var(--ht-line);font-size:19px;line-height:1.9}
.h-top .h-row>strong{font-size:19px;line-height:1.9;letter-spacing:.02em}
.h-top .h-row-d{color:var(--ht-sub2);letter-spacing:0}
.h-top .h-row a{text-decoration:underline;text-underline-offset:4px}
.h-top .h-act{margin-top:30px}
.h-top .h-tel2{display:inline-flex;align-items:baseline;gap:14px;flex-wrap:wrap;text-decoration:none;line-height:1.3}
.h-top .h-tel2-n{font-size:38px;font-weight:700;letter-spacing:.04em}
.h-top .h-tel2-h{font-size:16px;color:var(--ht-note)}
.h-top .h-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.h-top .h-links{margin-top:16px;display:flex;flex-wrap:wrap;gap:6px 28px;font-size:16px;line-height:1.8}
.h-top .h-links a{text-decoration:underline;text-underline-offset:4px}
/* ごあいさつ */
.h-top .h-sign{font-size:21px;font-weight:700;letter-spacing:.1em;margin:18px 0 14px}

/* --------------------------------------------------------------------------
   7. 選ばれる理由（枠つき札：左に小写真165・右に題、説明は札の下）
   -------------------------------------------------------------------------- */
.h-top .h-bxr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:19px}
.h-top .h-bx{display:grid;grid-template-columns:165px minmax(0,1fr);border:1px solid var(--ht-frame);min-height:142px;align-items:center}
.h-top .h-bx>img{width:165px;height:100%;min-height:142px;object-fit:cover}
.h-top .h-bx-t{font-size:19px;line-height:1.6;letter-spacing:.05em;padding:12px 18px}
.h-top .h-n{display:block;font-size:14px;line-height:1.6;color:var(--ht-sub);letter-spacing:.1em;font-weight:500}
.h-top .h-bxp{font-size:19px;line-height:2;margin-top:18px}
.h-top .h-bx-note{margin-top:22px}

/* --------------------------------------------------------------------------
   8. 見通し（5つの工程を縦罫で区切る）
   -------------------------------------------------------------------------- */
.h-top .h-n5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.h-top .h-st{padding:6px 22px 10px;border-left:1px solid var(--ht-line)}
.h-top .h-st:first-child{padding-left:0;border-left:0}
.h-top .h-st-n{display:block;font-size:14px;line-height:1.6;color:var(--ht-note);letter-spacing:.12em}
.h-top .h-st-t{display:block;font-size:19px;font-weight:700;line-height:1.6;letter-spacing:.04em;margin:4px 0 6px}
.h-top .h-st-d{display:block;font-size:16px;line-height:1.8}
.h-top .h-outlook-p{margin-top:40px;max-width:1000px}

/* --------------------------------------------------------------------------
   9. 静かな予約帯（上下に細罫・題＋電話＋WEB＋LINE）
   -------------------------------------------------------------------------- */
.h-top .h-qc{border-top:1px solid var(--ht-line);border-bottom:1px solid var(--ht-line);padding:30px 0;margin-bottom:70px}
.h-top .h-qc>.h-w{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;gap:22px;align-items:center}
.h-top .h-qc-t{font-size:21px;font-weight:700;letter-spacing:.1em;line-height:1.6}
.h-top .h-qc-p{font-size:17px;line-height:1.8}
.h-top .h-qc-tel{display:block;text-align:right;white-space:nowrap;text-decoration:none;line-height:1.25}
.h-top .h-qc-n{display:block;font-size:30px;font-weight:700;letter-spacing:.04em}
.h-top .h-qc-h{display:block;font-size:15px;font-weight:500;color:var(--ht-note)}
.h-top .h-qc .h-btn{font-size:16px;padding:12px 24px;white-space:nowrap}
.h-top .h-qc + .h-s.h-g{margin-top:0}

/* --------------------------------------------------------------------------
   10. 申告後の3つのお約束（枠つきの文字札）
   -------------------------------------------------------------------------- */
.h-top .h-b3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:19px}
.h-top .h-bn{border:1px solid var(--ht-frame);padding:28px 30px}
.h-top .h-bn-k{font-size:14px;line-height:1.6;color:var(--ht-sub);letter-spacing:.14em}
.h-top .h-bn-t{font-size:21px;line-height:1.65;letter-spacing:.04em;margin:6px 0 10px}
.h-top .h-bn-p{font-size:17px;line-height:1.95}
.h-top .h-bn-s{font-size:15px;line-height:1.85;color:var(--ht-note);margin-top:12px;padding-top:12px;border-top:1px solid var(--ht-line)}

/* --------------------------------------------------------------------------
   11. 解決事例（写真なしの文字札2枚）・お客様の声（引用＋アンケート現物）
   -------------------------------------------------------------------------- */
.h-top .h-cs2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px 79px}
.h-top .h-cs{border-top:1px solid var(--ht-ink);border-bottom:1px solid var(--ht-line);padding:26px 0}
.h-top .h-cs-t{font-size:32px;line-height:1.6;letter-spacing:.08em;margin-bottom:10px}
.h-top .h-cs-p{font-size:19px;line-height:2}
.h-top .h-vo2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0}
.h-top .h-vo{padding:6px 40px 10px;border-left:1px solid var(--ht-line)}
.h-top .h-vo:first-child{padding-left:0;border-left:0}
.h-top .h-vo:last-child{padding-right:0}
.h-top .h-vo-scan{width:100%;height:auto;border:1px solid var(--ht-line);margin-bottom:18px}
.h-top .h-vo-q{font-size:19px;line-height:2}
.h-top .h-vo-a{margin-top:10px;text-align:right;font-size:16px;color:var(--ht-note);letter-spacing:.06em}

/* --------------------------------------------------------------------------
   12. 面談の場所（駅の札・3棟の写真札・地図2枚・アクセス）
   -------------------------------------------------------------------------- */
.h-top .h-chips{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 48px}
.h-top .h-chips span{border:1px solid var(--ht-sub2);border-radius:3px;background:#fff;font-size:15px;line-height:1.9;padding:2px 16px;letter-spacing:.06em}
.h-top .h-pc{border-bottom:1px solid var(--ht-line);padding-bottom:26px}
.h-top .h-pc figure{margin:0 0 18px}
.h-top .h-pc figure img{width:100%;height:auto;aspect-ratio:335/207;object-fit:cover}
.h-top .h-pc-figs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.h-top .h-pc-figs figure img{aspect-ratio:163.5/207}
.h-top .h-pc figcaption{font-size:16px;line-height:1.7;color:var(--ht-note);margin-top:8px}
.h-top .h-pc-t{font-size:21px;line-height:1.6;letter-spacing:.08em;margin-bottom:6px}
.h-top .h-pc-p{font-size:19px;line-height:2}
.h-top .h-pc-map{text-align:left}
.h-top .h-maps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 79px;margin-top:64px}
.h-top .h-map{position:relative;width:100%;aspect-ratio:4/3;background:#EFEFEF;border:1px solid var(--ht-line);margin-bottom:18px}
.h-top .h-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.h-top .h-access{margin-top:40px;padding-top:26px;border-top:1px solid var(--ht-line)}
.h-top .h-access .h-p{font-size:19px}

/* --------------------------------------------------------------------------
   13. 最終の予約（中央寄せ）＋検討中の方の帯（灰・全幅）
   -------------------------------------------------------------------------- */
.h-top .h-s.h-final{padding-bottom:0}
.h-top .h-fin{text-align:center;padding-bottom:84px}
.h-top .h-fin-t{font-size:30px;line-height:1.6;letter-spacing:.14em}
.h-top .h-fin-p{margin-top:12px;font-size:19px}
.h-top .h-fin-pl{font-size:17px;color:var(--ht-note);line-height:1.9}
.h-top .h-fin-pl b{color:var(--ht-ink)}
.h-top .h-fin-telw{margin-top:14px}
.h-top .h-fin-tel{display:inline-flex;align-items:baseline;gap:14px;flex-wrap:wrap;justify-content:center;text-decoration:none;line-height:1.4}
.h-top .h-fin-n{font-size:46px;font-weight:700;letter-spacing:.04em}
.h-top .h-fin-h{font-size:16px;font-weight:500}
.h-top .h-fin-btns{margin-top:22px;display:flex;justify-content:center;flex-wrap:wrap;gap:16px}
.h-top .h-btn.h-btn-l{min-width:270px;padding:16px 60px;font-size:19px}
.h-top .h-strip{background:var(--ht-grey);box-shadow:0 0 0 100vmax var(--ht-grey);clip-path:inset(0 -100vmax);padding:34px 0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}
.h-top .h-strip-p{font-size:17px;line-height:1.9;padding-right:60px}
.h-top .h-strip-a{border-left:1px solid var(--ht-sub2);padding-left:60px;min-height:44px;display:flex;align-items:center}

/* ==========================================================================
   タブレット（641〜1100px）
   ========================================================================== */
@media (max-width:1100px){
  .h-top .h-s{padding:80px 0}
  .h-top .h-s.h-g{padding:64px 0}
  .h-top .h-s.h-intro{padding-top:56px}
  .h-top .h-mo{height:clamp(400px,min(56vw,calc(100vh - 68px)),600px);height:clamp(400px,min(56vw,calc(100svh - 68px)),600px)}
  .h-top .h-mo-h1{left:40px;top:40px;font-size:30px}
  .h-top .h-mo-lead{left:36px;right:36px;bottom:92px}
  .h-top .h-mo-sub{font-size:23px}
  .h-top .h-mo-ey{font-size:16px}
  .h-top .h-bar{font-size:19px;padding:14px 10px}
  .h-top .h-wk,.h-top .h-gb{gap:48px}
  .h-top .h-gb-mendan{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:40px}
  .h-top .h-gb-mendan .h-gb-img{height:640px}
  .h-top .h-c3,.h-top .h-cs2{gap:48px 40px}
  /* お悩み・教科書 → 2列 */
  .h-top .h-nw{grid-template-columns:repeat(2,minmax(0,1fr))}
  .h-top .h-nw>*{padding:6px 28px 26px;border-left:1px solid var(--ht-line)}
  .h-top .h-nw>:where(:nth-child(2n+1)){padding-left:0;border-left:0}
  .h-top .h-nw>:where(:nth-child(n+3)){padding-top:34px}
  .h-top .h-nw.h-n2>*{padding:6px 28px 30px}
  .h-top .h-nw.h-n2>:where(:nth-child(2n+1)){padding-left:0;border-left:0}
  /* 選ばれる理由・お約束 → 1列（読みやすい行長） */
  .h-top .h-bxr,.h-top .h-b3{grid-template-columns:minmax(0,1fr);gap:34px;max-width:var(--ht-text)}
  .h-top .h-b3{gap:19px}
  .h-top .h-n5{grid-template-columns:repeat(5,minmax(0,1fr))}
  .h-top .h-st{padding:6px 14px 10px}
  .h-top .h-st-t{font-size:17px}
  .h-top .h-st-d{font-size:16px}
  .h-top .h-fin-n{font-size:40px}
}
@media (max-width:900px){
  .h-top .h-mo-h1{left:28px;right:24px;top:30px;font-size:26px;letter-spacing:.06em}
  .h-top .h-mo-lead{left:24px;right:24px;bottom:84px}
  .h-top .h-mo-sub{font-size:19px;letter-spacing:.03em}
  .h-top .h-mo-ey{font-size:14px}
  .h-top .h-bar{font-size:17px}
  .h-top .h-wk,.h-top .h-gb,.h-top .h-gb-mendan{grid-template-columns:minmax(0,1fr);gap:32px}
  .h-top .h-wk-img,.h-top #price .h-wk-img,.h-top .h-wk-img[src*="hillside-residential-view"],
  .h-top .h-gb-img,.h-top .h-gb-mendan .h-gb-img{height:auto;aspect-ratio:16/9}
  .h-top .h-gb-greet .h-gb-img{aspect-ratio:1024/631;max-width:560px}
  .h-top .h-c3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .h-top .h-nw.h-n2{grid-template-columns:minmax(0,1fr)}
  .h-top .h-nw.h-n2>*{padding:24px 0;border-left:0;border-top:1px solid var(--ht-line)}
  .h-top .h-nw.h-n2>:where(:first-child){border-top:0;padding-top:6px}
  .h-top .h-maps{grid-template-columns:minmax(0,1fr);gap:24px}
  /* 工程 → 縦の一覧（STEP｜題＋所要） */
  .h-top .h-n5{display:block;border-top:1px solid var(--ht-line)}
  .h-top .h-st,.h-top .h-st:first-child{display:grid;grid-template-columns:5.2em minmax(0,1fr);column-gap:12px;padding:14px 0;border-left:0;border-bottom:1px solid var(--ht-line)}
  .h-top .h-st-n{grid-row:1/3;padding-top:3px}
  .h-top .h-st-t{margin:0}
  /* 静かな予約帯 → 2段（題／電話＋ボタン） */
  .h-top .h-qc>.h-w{grid-template-columns:auto auto auto;justify-content:start;row-gap:14px}
  .h-top .h-qc-l{grid-column:1/-1}
  .h-top .h-qc-tel{text-align:left}
  .h-top .h-strip{grid-template-columns:minmax(0,1fr);row-gap:14px}
  .h-top .h-strip-p{padding-right:0}
  .h-top .h-strip-a{border-left:0;padding-left:0;min-height:0}
}

/* ==========================================================================
   スマホ（≤640px）：本文16px（テーマの下限）・1列・「状況から探す」は小さな写真＋文の横並び
   ========================================================================== */
@media (max-width:640px){
  .h-top{font-size:16px;line-height:1.9;letter-spacing:.03em;--ht-gut:16px}
  .h-top .h-s{padding:56px 0}
  .h-top .h-s.h-g{padding:48px 0}
  .h-top .h-s:not(.h-g) + .h-s:not(.h-g),.h-top .h-qc + .h-s:not(.h-g){padding-top:8px}
  .h-top .h-s.h-intro{padding-top:36px}
  /* モザイク → 3枚を縦に */
  .h-top .h-mo{display:block;height:auto}
  .h-top .h-mo-l{display:block}
  .h-top .h-mo-c{height:300px}
  .h-top .h-mo-h1{left:20px;right:20px;top:26px;font-size:24px;letter-spacing:.06em}
  .h-top .h-mo-lead{left:20px;right:20px;bottom:74px}
  .h-top .h-mo-sub{font-size:17px;letter-spacing:.02em}
  .h-top .h-mo-ey{font-size:14px;margin-top:2px}
  .h-top .h-bar{font-size:17px;padding:13px 10px}
  /* 題の行 */
  .h-top .h-th{display:block;margin-bottom:22px}
  .h-top .h-h2,.h-top .h-wk-tx .h-h2{font-size:22px;line-height:1.6;letter-spacing:.08em}
  .h-top .h-th-r{display:inline-block;margin-top:10px;font-size:15px;white-space:normal}
  .h-top .h-th-r::after{margin-left:14px}
  .h-top .h-th-voice{margin-top:56px}
  .h-top .h-lede,.h-top .h-lede + .h-lede,.h-top .h-lede + .h-p{margin:0 0 28px}
  .h-top .h-p,.h-top .h-p17,.h-top .h-box p,.h-top .h-nw-p,.h-top .h-bxp,.h-top .h-fq-a,.h-top .h-cs-p,.h-top .h-vo-q,
  .h-top .h-pc-p,.h-top .h-row,.h-top .h-lede,.h-top .h-fin-p,.h-top .h-access .h-p{font-size:16px;line-height:1.9}
  /* 注記は14px（テーマSPの .note と同じ）、導線・札の小ラベル・写真の説明は15px（テーマSPで15〜16pxの部品） */
  .h-top .h-sm,.h-top .h-bn-s{font-size:14px}
  .h-top .h-cta-n,.h-top .h-ex-n,.h-top .h-vo-a,.h-top .h-pc figcaption,.h-top .h-art-go,.h-top .h-go,.h-top .h-links{font-size:15px}
  /* 写真＋文・灰帯 → 1列 */
  .h-top .h-wk,.h-top .h-gb,.h-top .h-gb-mendan{gap:20px}
  .h-top .h-wk-img,.h-top #price .h-wk-img,.h-top .h-wk-img[src*="hillside-residential-view"],
  .h-top .h-gb-img,.h-top .h-gb-mendan .h-gb-img{aspect-ratio:auto;height:230px}
  .h-top .h-gb-greet .h-gb-img{height:auto;aspect-ratio:1024/631}
  .h-top .h-lead-t{font-size:19px;letter-spacing:.06em}
  .h-top .h-rt{text-align:left}
  .h-top .h-tel{justify-content:flex-start;column-gap:10px;row-gap:0}
  .h-top .h-tel-l{flex-basis:100%}
  .h-top .h-tel-n{font-size:21px}
  /* 3列の写真札 → 1列（状況は小さな写真＋文の横並び） */
  .h-top .h-c3{grid-template-columns:minmax(0,1fr);gap:30px}
  .h-top .h-cd{padding-bottom:22px}
  .h-top .h-cd>img{margin-bottom:16px;aspect-ratio:16/9}
  .h-top .h-cd-t,.h-top .h-bn-t,.h-top .h-nw-t,.h-top .h-pc-t,.h-top .h-fq-q{font-size:18px}
  .h-top .h-cd-p,.h-top .h-cd-pl,.h-top .h-bn-p{font-size:16px}
  .h-top .h-cd-s{font-size:15px}
  .h-top .h-situ{gap:0}
  .h-top .h-situ .h-cd{display:grid;grid-template-columns:110px minmax(0,1fr);column-gap:14px;align-items:start;padding:16px 0}
  .h-top .h-situ .h-cd:first-child{padding-top:0}
  .h-top .h-situ .h-cd>img{width:110px;height:110px;aspect-ratio:auto;margin:0}
  .h-top .h-situ .h-cd-t{font-size:17px;line-height:1.6}
  .h-top .h-situ .h-cd-p{font-size:16px;line-height:1.75}
  .h-top .h-situ .h-cd-s{margin-top:6px}
  /* 縦罫の列 → 1列（上に細罫） */
  .h-top .h-nw,.h-top .h-nw.h-n2{display:block}
  .h-top .h-nw>*,.h-top .h-nw.h-n2>*{padding:18px 0;border-left:0;border-top:1px solid var(--ht-line)}
  .h-top .h-nw>:where(:first-child),.h-top .h-nw.h-n2>:where(:first-child){border-top:0;padding-top:0}
  .h-top .h-nw-t{margin-bottom:6px}
  .h-top .h-art-t{font-size:18px}
  /* 選ばれる理由 */
  .h-top .h-bxr{gap:30px}
  .h-top .h-bx{grid-template-columns:130px minmax(0,1fr);min-height:112px}
  .h-top .h-bx>img{width:130px;min-height:112px}
  .h-top .h-bx-t{font-size:17px;padding:10px 14px}
  .h-top .h-bxp{margin-top:12px}
  .h-top .h-bn{padding:22px 20px}
  /* 初回面談の行 → 1行目「ラベル——」、2行目から本文 */
  .h-top .h-row{display:block;padding:12px 0}
  .h-top .h-row>strong{font-size:16px;line-height:1.8}
  .h-top .h-row-b{display:block}
  .h-top .h-tel2-n{font-size:30px}
  .h-top .h-btns{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
  .h-top .h-btns .h-btn,.h-top .h-btnrow .h-btn{display:block;width:100%;padding:14px 12px}
  .h-top .h-box{padding:18px 18px;margin-top:22px}
  .h-top .h-cta,.h-top .h-cta .h-btn{display:block;width:100%}
  .h-top .h-cta .h-btn{padding:14px 12px}
  .h-top .h-ex-v{font-size:34px}
  .h-top .h-ex-c{font-size:17px}
  /* 工程 */
  .h-top .h-st-t{font-size:17px}
  /* 予約帯 → 縦積み・ボタンは全幅 */
  .h-top .h-qc{padding:26px 0;margin-bottom:40px}
  .h-top .h-qc>.h-w{display:block}
  .h-top .h-qc-t{font-size:19px;letter-spacing:.06em}
  .h-top .h-qc-p{font-size:16px}
  .h-top .h-qc-tel{text-align:left;margin:12px 0}
  .h-top .h-qc-n{font-size:28px}
  .h-top .h-qc .h-btn{display:block;width:100%;margin-top:8px;padding:14px 12px}
  /* 事例・声 */
  .h-top .h-cs2,.h-top .h-vo2{grid-template-columns:minmax(0,1fr);gap:28px}
  .h-top .h-cs-t{font-size:24px}
  .h-top .h-vo,.h-top .h-vo:first-child{padding:0;border-left:0}
  .h-top .h-vo + .h-vo{padding-top:24px;border-top:1px solid var(--ht-line)}
  /* 面談の場所 */
  .h-top .h-chips{gap:8px;margin:18px 0 32px}
  .h-top .h-chips span{padding:1px 12px}
  .h-top .h-pc figure img{aspect-ratio:16/10}
  .h-top .h-pc-figs figure img{aspect-ratio:4/5}
  .h-top .h-maps{margin-top:40px}
  .h-top .h-map{aspect-ratio:1/1}
  /* 最終の予約 */
  .h-top .h-fin{padding-bottom:48px}
  .h-top .h-fin-t{font-size:23px;letter-spacing:.08em}
  .h-top .h-fin-pl{font-size:16px}
  .h-top .h-fin-n{font-size:34px}
  .h-top .h-fin-btns{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
  .h-top .h-btn.h-btn-l{min-width:0;width:100%;padding:15px 12px;font-size:17px}
  .h-top .h-strip{padding:26px 0}
  .h-top .h-strip-p{font-size:16px}
}

/* 2026-10-01 忠実化第2弾：角は0（SST はボタンも札も角0） */
.h-top .h-btn,.h-top .h-flag,.h-top .h-chips span{border-radius:0}

/* 2026-10-01 全体見直し第3弾：ボタンの角は SST 実測の 4px、写真は角0 */
.h-top .h-btn,.h-top .h-chips span,.h-top .h-flag{border-radius:4px}
.h-top img{border-radius:0}

/* 2026-10-01 0.8.13 スマホ総点検の結論：見出しの1文字落ちを均す */
@media(max-width:640px){
  .h-top .h-h2,.h-top h3,.h-top .h-mo-sub,.h-top .h-lead-t,.h-top .h-qc-t,.h-top .h-fin-t{text-wrap:balance}
}
/* 2026-10-01 0.8.13 予約帯の「不安解消」行（LP の考え方）。クチコミ行は STGY2026H_CTA_TRUST が true のときだけ出る */
.h-top .h-qc-e{margin-top:4px;font-size:15px;line-height:1.8;color:var(--ht-note)}
.h-top .h-fin-e{margin-top:10px;font-size:17px;line-height:1.9;color:#555}
.h-top .h-fin-tr{margin-top:12px;font-size:16px;line-height:1.6;display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:6px 10px}
.h-top .h-fin-tr .ct-stars{color:#FBBC04;letter-spacing:.06em}
.h-top .h-fin-tr .ct-score{font-weight:700;color:#202124;font-variant-numeric:tabular-nums}
.h-top .h-fin-tr .ct-link{color:#333;text-decoration:underline;text-underline-offset:4px}
@media(max-width:640px){
  .h-top .h-qc-e{font-size:14px}
  .h-top .h-fin-e{font-size:16px}
}

/* 2026-10-02 0.8.16 お客様の声：3件目＝Google クチコミの一文（画像なし・2列の下に全幅） */
/* 0.8.17：Google クチコミ2件を2列目の段に（手書き2＋Google2） */
.h-top .h-vo-g{padding-top:28px;margin-top:28px;border-top:1px solid var(--ht-line)}
.h-top .h-vo-g:nth-child(3){padding-left:0;border-left:0}
.h-top .h-vo-qg{font-size:19px;font-weight:700;line-height:1.9;letter-spacing:.04em}
.h-top .h-vo-g .h-vo-a a{color:var(--ht-note);text-decoration:underline;text-underline-offset:4px}
@media(max-width:640px){
  .h-top .h-vo-g{margin-top:0;padding-top:24px}
  .h-top .h-vo-qg{font-size:17px}
}
/* 2026-10-02 0.8.21 宗行さん「Google クチコミの★に黄色を」＝お問い合わせの信頼バーと同じ Google の配色・小さく */
.h-top .h-vo-st{color:#FBBC04;font-size:14px;letter-spacing:.05em;vertical-align:1px}