/* ============================================================
   home-gears.net 共通スタイル
   各ページのインライン <style> の「後」に読み込むこと。
   色とサイズの調整は、以後このファイル1枚で完結する。
   ============================================================ */

/* 色は /assets/tokens.css（build/palette.mjs が生成）が持つ。
   ここで再定義しないこと。 */

body{ background: var(--paper); }

/* ── 見出しの数字を、はっきり大きく ───────────────────────── */

/* レポート本編トップの収支 */
.headline .big{
  font-size: clamp(52px, 15vw, 104px) !important;
  line-height: .95 !important;
  letter-spacing: -.045em !important;
  color: var(--gain);
}
.headline .unit{ font-size: .3em !important; color: var(--ink-70); }

/* 累計ページの回収率 */
.pct{
  font-size: clamp(56px, 16vw, 108px) !important;
  line-height: .95 !important;
  letter-spacing: -.045em !important;
}

/* 図解ページの大きな数字 */
.bignum{
  font-size: clamp(46px, 13vw, 88px) !important;
  line-height: .98 !important;
  letter-spacing: -.04em !important;
}

/* 章中の注目数値（figure の値） */
.figure .val{
  font-size: clamp(34px, 8vw, 56px) !important;
  line-height: 1.05 !important;
  letter-spacing: -.03em !important;
}

/* 数字は等幅・タブラー。桁が揃わないと比較できない */
.big, .pct, .bignum, .figure .val, .num, td.n, .breakdown dd, .flabel .val{
  font-variant-numeric: tabular-nums !important;
}

/* ── 注目させたい塊を、囲って浮かせる ───────────────────── */
.headline, .gauge-wrap, .figure{
  background: var(--wash);
  border: 1px solid var(--grid);
  border-left: 5px solid var(--solar);
  border-radius: 4px;
  padding: 22px 24px;
}
.figure{ margin: 18px 0; }

/* 表の数値を読みやすく */
td.n, .data-table td.num{ font-variant-numeric: tabular-nums; }
.pos{ color: var(--gain) !important; font-weight: 700; }
.neg{ color: var(--cost) !important; font-weight: 700; }

/* ── ナビを全ページ共通の見た目に ───────────────────────── */
nav[style]{
  background: var(--paper) !important;
  border-bottom: 1px solid var(--grid) !important;
}

/* ── スマホ ─────────────────────────────────────────────── */
@media (max-width: 640px){
  .headline, .gauge-wrap, .figure{ padding: 18px 16px; }
}


/* ============================================================
   トップのヒーロー
   要素を減らし、余白と数字の大きさで見せる。
   下の章は今までどおり密度を保つ（Appleの製品ページと同じ構造）。
   ============================================================ */

header.hero{
  border: 0 !important;
  padding: clamp(64px, 13vh, 132px) 0 clamp(56px, 11vh, 108px) !important;
  text-align: center;
  position: relative;
}

.hero-eyebrow{
  font-size: 12px; letter-spacing: .16em; font-weight: 700;
  color: var(--ink-40); margin: 0 0 clamp(20px,4vh,34px);
}

.hero-h1{
  font-size: clamp(30px, 6.4vw, 62px) !important;
  font-weight: 900; line-height: 1.28; letter-spacing: -.035em;
  margin: 0 0 clamp(36px,7vh,64px) !important;
}
.hero-h1 em{
  font-style: normal; color: var(--gain);
  border: 0 !important;   /* 下線をやめて、色だけで強調する */
}

/* 数字を主役にする */
.hero-num{
  display: flex; align-items: baseline; justify-content: center;
  gap: .02em; line-height: 1;
  margin-bottom: clamp(14px,2.4vh,22px);
}
.hero-sign{
  font-size: clamp(38px, 8vw, 84px); font-weight: 700;
  color: var(--gain); letter-spacing: -.04em;
}
.hero-big{
  font-size: clamp(66px, 19vw, 178px) !important;
  font-weight: 700; color: var(--gain);
  letter-spacing: -.055em; font-variant-numeric: tabular-nums;
}
.hero-unit{
  font-size: clamp(22px, 4.4vw, 44px); font-weight: 500;
  color: var(--gain); margin-left: .12em;
}

.hero-sub{
  font-size: 13px; letter-spacing: .06em; color: var(--ink-40);
  margin: 0 0 clamp(34px,6vh,56px);
}

/* 内訳は線を引かず、余白で並べる */
.hero-eq{
  display: inline-flex; align-items: center; justify-content: center;
  gap: clamp(20px,5vw,52px); flex-wrap: wrap;
}
.hero-eq > div{ display: flex; flex-direction: column; gap: 6px; }
.hero-eq .k{ font-size: 12px; letter-spacing: .08em; color: var(--ink-40); }
.hero-eq .v{
  font-size: clamp(21px,3.6vw,30px); font-weight: 700;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.hero-eq .v i{ font-style: normal; font-size: .55em; font-weight: 500; margin-left: 2px; }
.hero-eq .op{
  font-size: clamp(19px,3vw,26px); color: var(--ink-40);
  align-self: flex-end; padding-bottom: 3px;
}

.hero-note{
  font-size: 13px; color: var(--ink-40);
  margin: clamp(34px,6vh,56px) 0 0;
}

/* スクロールを促す細い縦線 */
.hero-scroll{
  width: 1px; height: 46px; margin: clamp(30px,5vh,50px) auto 0;
  background: linear-gradient(to bottom, var(--grid), transparent);
}

/* ヒーロー直後のリード文。ここから密度のある本編に移る */
.intro{ border-top: 1px solid var(--grid); }
.intro .lede{ max-width: 62ch; margin: 0 auto; color: var(--ink-70); }

/* ヒーローには共通の囲みスタイルを効かせない。
   トップの <header class="hero"> だけに限定すること。
   図解ページ（/infographic/）も .hero を使っていて赤い背景を持つため、
   セレクタを .hero のままにすると背景が消えて白文字が読めなくなる。 */
header.hero, header.hero *{ background: transparent !important; }


/* ── ヒーロー：素性の説明とスペック ─────────────────────── */

.hero-eyebrow{ margin-bottom: clamp(16px,3vh,26px) !important; }

.hero-lead{
  font-size: clamp(14px,1.7vw,17px); line-height: 1.95; color: var(--ink-70);
  max-width: 44ch; margin: clamp(-14px,-2vh,-8px) auto clamp(30px,5vh,44px);
}
@media (max-width: 720px){ .brpc{ display: none; } }

/* 家の素性を一列で並べる。ここで読者が「誰の何の数字か」を把握する */
.hero-spec{
  list-style: none; margin: 0 auto clamp(40px,7vh,64px); padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(10px,1.6vw,14px); max-width: 780px;
}
.hero-spec li{
  display: inline-flex; align-items: baseline; gap: 7px;
  border: 1px solid var(--grid); border-radius: 999px;
  padding: 7px 15px; background: #fff;
}
.hero-spec span{ font-size: 11px; letter-spacing: .06em; color: var(--ink-40); }
.hero-spec b{ font-size: 13px; font-weight: 700; letter-spacing: -.01em; }

/* 結果のかたまり。ここだけ淡く敷いて、素性と結果を視覚的に分ける */
.hero-result{
  background: var(--wash) !important;
  border-radius: 14px;
  padding: clamp(30px,5vh,46px) clamp(20px,4vw,40px);
  max-width: 720px; margin: 0 auto;
}
.hero-result .hero-sub{ margin: 0 0 clamp(12px,2vh,18px) !important; }
.hero-result .hero-num{ margin-bottom: clamp(18px,3vh,26px); }
.hero-big{ font-size: clamp(58px, 15vw, 148px) !important; }
.hero-sign{ font-size: clamp(32px, 6.5vw, 68px); }
.hero-unit{ font-size: clamp(20px, 3.6vw, 38px); }

/* .hero * の背景透過指定より後に置いて、結果ブロックだけ色を戻す */
header.hero .hero-result{ background: var(--wash) !important; }
header.hero .hero-spec li{ background: #fff !important; }

/* 自分の家の行を目立たせる（比較表で使う） */
tr.me td{ background:var(--mine) !important; font-weight:700; }

/* ── ナビのタップ領域 ─────────────────────────────────
   スマホでナビのリンクが高さ23pxしかなく、指では押しにくかった。
   見た目を変えずに上下の余白だけ足して、44px以上を確保する。
   （WCAG 2.5.5 のターゲットサイズの目安）
   ─────────────────────────────────────────────────── */
nav[style] a{
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
@media (max-width: 640px){
  nav[style] > div{ gap: 4px 14px !important; padding-top: 4px !important; padding-bottom: 4px !important; }
}

/* ============================================================
   サイト名（ナビの左）
   検索から個別ページに来た人が、ここが何のサイトか分かるように。
   ============================================================ */
.navwrap{
  max-width: 980px; margin: 0 auto; padding: 8px 20px;
  display: flex; align-items: center; gap: 10px 22px; flex-wrap: wrap;
}
.brand{
  display: flex; flex-direction: column; gap: 1px;
  text-decoration: none; color: var(--ink) !important;
  padding: 6px 0; min-height: 44px; justify-content: center;
  border-right: 1px solid var(--grid); padding-right: 22px;
}
.brand b{ font-size: 14px; font-weight: 900; letter-spacing: -.02em; line-height: 1.2; }
.brand span{ font-size: 10.5px; color: var(--ink-40); letter-spacing: .02em; }
.navlinks{ display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
/* スマホでは8項目が3行に折り返し、sticky なので画面の27%を
   占め続けてしまう。折り返しをやめて1行の横スクロールにする。
   サイト名は残す（どこのサイトか分からなくなるため）。 */
@media (max-width: 760px){
  .navwrap{
    display: block; padding: 6px 0 0;
  }
  .brand{
    border-right: 0; padding: 2px 20px 4px; min-height: 0;
  }
  .brand b{ font-size: 13.5px; }
  .navlinks{
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    gap: 16px; padding: 0 20px 6px; scrollbar-width: none;
  }
  .navlinks::-webkit-scrollbar{ display: none; }
  .navlinks a{ white-space: nowrap; min-height: 36px; }
}

/* ── 見出しの大きさを全ページで揃える ─────────────────
   トップだけ .hero-h1 で62px、他ページは各自の h1 指定のままで
   30〜38pxとばらついていた。回収の進捗は本文15pxの2倍しかなく
   見出しとして弱かったので、下限と上限を引き上げて統一する。
   トップが一番大きい、という序列は保つ。
   ─────────────────────────────────────────────────── */
h1:not(.hero-h1){
  font-size: clamp(28px, 6vw, 48px) !important;
  line-height: 1.32 !important;
  letter-spacing: -.03em;
}

/* ── サイトの素性（全ページ共通のフッター） ───────────── */
.site-foot{
  max-width: 980px; margin: 0 auto; padding: 26px 20px 4px;
  font-size: 11.5px; line-height: 1.9; color: var(--ink-40);
  border-top: 1px solid var(--grid);
}
.site-foot p{ margin: 0 0 6px; }
.site-foot strong{ color: var(--ink-70); }

/* 一括見積もりサイトへのリンク（/payback/）。
   広告は押し出さない方針なので、本文と同じ大きさ・同じ行送りにして
   囲みも背景も付けない。目立たせるための装飾はしないこと。 */
.quote-links{margin:14px 0 0}
.quote-links a{color:inherit;text-decoration:underline;text-underline-offset:3px}

/* ページ冒頭の広告表記（/payback/）。広告主の提携条件で
   「ファーストビュー等、わかりやすい位置」への表示が求められるため置く。
   ただし押し出さない。罫線1本と本文より小さい文字だけで、
   背景色や警告色は使わないこと。 */
.ad-top{font-size:12px;line-height:1.7;color:var(--ink-70);margin:0 0 18px;
  padding:8px 0;border-top:1px solid rgba(0,0,0,.10);border-bottom:1px solid rgba(0,0,0,.10)}
.ad-top strong{color:var(--ink)}

/* ── グラフ（figure.chart）と、長い表の折りたたみ ──
   以前はトップと /data/ と図解ページがそれぞれ同じ規則を複製していた。
   複製を増やすと、どこを直せばどこが変わるのか追えなくなるのでここに集約する。
   セレクタは element+class に限定してある（`.hero` に !important を当てて
   図解ページの赤いヒーローを消した事故があるため、汎用名は使わない）。 */
figure.chart{ margin: 0 0 26px; }
figure.chart figcaption{
  font-size: 13px; font-weight: 700; margin: 0 0 10px;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
}
figure.chart figcaption span{ font-weight: 400; font-size: 11.5px; color: var(--ink-40); }
/* viewBox のSVGは縮小するとテキストも同じ倍率で縮む。375px幅のスマホでは
   3px相当まで潰れて読めなかったので、下限幅を決めて、足りなければ
   表と同じように横スクロールさせる。 */
figure.chart{ overflow-x: auto; }
figure.chart svg{ width: 100%; min-width: 700px; height: auto; display: block; }
figure.chart .sw{ display: inline-block; width: 10px; height: 10px; vertical-align: -1px; margin-right: 2px; }

.tablefold{ margin: 0 0 8px; border-top: 1px solid var(--grid); border-bottom: 1px solid var(--grid); }
.tablefold > summary{ cursor: pointer; padding: 12px 2px; font-size: 13px; color: var(--ink-70); list-style-position: inside; }
.tablefold[open] > summary{ border-bottom: 1px solid var(--grid); margin-bottom: 14px; }

/* ── ページ間のカード（build/cards.mjs が生成） ──
   写真の代わりに「そのページの数字」を絵として使う。
   スマホでカード全体がタップ領域になるよう、高さを確保している。 */
.navcards{
  display: grid; gap: 10px; margin: 34px 0 8px;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 720px){ .navcards{ grid-template-columns: repeat(4, 1fr); gap: 12px; } }
.navcards .navcard{
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 104px; padding: 12px 13px 13px;
  border: 1px solid var(--grid); background: var(--paper);
  text-decoration: none; color: var(--ink);
}
.navcards .navcard:hover{ border-color: var(--solar); background: var(--wash); }
.navcards .nc-name{ font-size: 11.5px; color: var(--ink-70); font-weight: 700; margin-bottom: auto; }
.navcards .nc-val{
  font-family: "Roboto Mono", monospace; font-weight: 700;
  font-size: clamp(20px, 5.2vw, 26px); line-height: 1.15; letter-spacing: -.02em;
}
.navcards .nc-unit{ font-size: 10.5px; color: var(--ink-40); margin-top: 3px; }

/* ページ冒頭のカード。デスクトップは8枚（4列2行・約230px）でじゃまにならないが、
   375px幅では2列4行で446pxになり、実表示領域の7割がナビになってしまう。
   そこで狭い画面では先頭3枚だけにする。末尾のカードは常に全部出す。 */
.navcards.top{ margin: 20px 0 28px; }
@media (max-width: 719px){
  .navcards.top .navcard:nth-child(n+4){ display: none; }
}

/* 書き手の表示（build/byline.mjs が生成）。
   免責は各ページの .site-foot が持っている。ここでは繰り返さない。 */
.byline{ font-size: 12.5px; line-height: 1.9; color: var(--ink-70);
  margin: 22px 0 0; padding: 14px 0 0; border-top: 1px solid var(--grid); }
.byline strong{ color: var(--ink); }

/* 外部送信の公表（build/disclosure.mjs が生成）。
   実際に送信しているものだけを書く。文面はあのファイル1か所で持つ。 */
.disclosure{ max-width: 900px; margin: 0 auto; padding: 22px 20px 26px;
  font-size: 11.5px; line-height: 1.9; color: var(--ink-40); border-top: 1px solid var(--grid); }
.disclosure strong{ color: var(--ink-70); }
.disclosure code{ font-size: 11px; }
.disclosure a{ color: var(--ink-70); }

/* ── アクセスカウンターと、キリ番の演出（build/counter.mjs が生成） ──
   サイト全体ではアニメーションを使わない方針だが、ここだけは例外。
   100人に1人しか見ないものなので、その1回はちゃんと出す。 */
.hgcount{ margin: 14px 0 0; font-size: 11.5px; color: var(--ink-40);
  display: flex; align-items: baseline; gap: 6px; justify-content: center; }
.hgcount .hg-num{ font-family: "Roboto Mono", monospace; font-size: 15px; font-weight: 700;
  color: var(--ink-70); letter-spacing: .12em;
  background: var(--wash); border: 1px solid var(--grid); padding: 2px 8px; }

.hg-kiriban{
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 16px);
  z-index: 999; opacity: 0; transition: opacity .35s ease, transform .35s ease;
  background: var(--paper); border: 2px solid var(--solar);
  box-shadow: 0 10px 30px rgba(18,38,63,.18);
  padding: 18px 26px 16px; text-align: center; max-width: min(92vw, 340px);
}
.hg-kiriban.on{ opacity: 1; transform: translate(-50%, 0); }
.hg-kiriban p{ margin: 0; }
.hg-kiriban .hg-k-thanks{ font-size: 13px; font-weight: 700; color: var(--ink-70); }
.hg-kiriban .hg-k-num{ font-family: "Roboto Mono", monospace; font-weight: 700;
  font-size: 34px; line-height: 1.2; letter-spacing: .1em; color: var(--solar); margin: 4px 0 2px; }
.hg-kiriban .hg-k-sub{ font-size: 12.5px; color: var(--ink-70); }
.hg-kiriban .hg-k-close{ margin-top: 12px; font: inherit; font-size: 11.5px;
  color: var(--ink-40); background: none; border: 1px solid var(--grid);
  padding: 4px 14px; cursor: pointer; }
@media (prefers-reduced-motion: reduce){
  .hg-kiriban{ transition: none; transform: translate(-50%, 0); }
}

/* ── 目次（build/toc.mjs が生成） ──
   スマホ用（.toc-m／畳む）とPC用（.toc-d／常に開く）を両方出し、
   ここでどちらか一方だけを表示する。
   details を CSS だけで開いた見た目にする手は使えなかった。中身は描画される
   が details の箱の高さが追従せず、本文に143px重なった（実機で確認）。

   スマホで畳むのは、見出しを結論つきの長いものにした結果、9項目で515pxになり、
   上部カード218pxと合わせて本文の前にナビが733px積み上がっていたため。 */
.toc{ margin: 24px 0 30px; padding: 14px 16px;
  background: var(--wash); border: 1px solid var(--grid); }
.toc-h{ margin: 0; font-size: 11.5px; font-weight: 700; color: var(--ink-40);
  letter-spacing: .06em; }
.toc-m > .toc-h{ cursor: pointer; }
.toc-m[open] > .toc-h{ margin-bottom: 8px; }
.toc-d > .toc-h{ margin-bottom: 8px; }
.toc ol{ margin: 0; padding: 0; list-style: none; }
.toc li{ margin: 0; }
.toc li + li{ border-top: 1px solid var(--grid); }
.toc a{ display: block; padding: 8px 2px; font-size: 13.5px; line-height: 1.6;
  color: var(--ink); text-decoration: none; }
.toc a:hover{ color: var(--solar); }

.toc-d{ display: none; }
@media (min-width: 720px){
  .toc-m{ display: none; }
  .toc-d{ display: block; }
  .toc-d ol{ columns: 2; column-gap: 26px; }
  .toc-d li + li{ border-top: none; }
  .toc-d a{ padding: 5px 2px; }
}

/* 幅の広い比較表はページ全体ではなく、この領域内で横スクロールする。 */
.scroller { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── 広告・紹介リンクの囲み ──────────────────────────────
   以前はトップページの <style> にだけ書かれていて、色もハードコードだった。
   2ページ目（/simulator/）に貼るにあたって、ここに一本化した。
   色は build/palette.mjs の役割から取る（値は従来と同じ）。
   地の #FFFDF7 だけはパレットに無い。広告の囲みにだけ使う淡い暖色。 */
.pr-box{border:1px solid var(--grid);border-left:4px solid var(--solar);
 background:#FFFDF7;border-radius:6px;padding:18px 20px;margin:28px 0}
.pr-box h3{margin:4px 0 10px;font-size:17px}
.pr-box p{font-size:14px;line-height:1.85;margin:0 0 10px}
.pr-label{font-size:11px!important;letter-spacing:.08em;font-weight:700;
 color:var(--ink-40);margin:0 0 2px!important}
.pr-cta{margin:16px 0 12px!important}
.pr-cta a{display:inline-block;background:var(--ink);color:#fff;text-decoration:none;
 font-weight:700;font-size:14px;padding:11px 22px;border-radius:6px}
.pr-cta a:hover{background:#25406b;color:#fff}
.pr-note{font-size:12px!important;color:var(--ink-70);margin:0!important}

/* ── リンク先のOGP画像を出すカード ──────────────────────
   画像は相手のサーバーから直接読む（自サイトに複製しない）。
   そのぶん訪問者のブラウザから相手のCDNへ通信が出るので、
   外部送信の公表（build/disclosure.mjs）に書くこと。
   loading="lazy" で、そこまでスクロールした人だけが読み込む。 */
.link-card{display:block;border:1px solid var(--grid);border-radius:8px;overflow:hidden;
 text-decoration:none;color:inherit;background:var(--paper);margin:0 0 10px;
 transition:border-color .15s}
.link-card:hover{border-color:var(--solar)}
.link-card img{display:block;width:100%;height:auto;aspect-ratio:1200/628;
 object-fit:cover;background:var(--wash)}
.link-card .lc-body{padding:12px 14px}
.link-card .lc-ttl{font-size:14px;font-weight:700;margin:0 0 4px;line-height:1.5}
.link-card .lc-host{font-size:11px;color:var(--ink-40);margin:0}