/* ============================================================
   公開ホーム「新聞一面」— 紙面（罫線）言語を玄関まで通す（2026-09-07）
   ------------------------------------------------------------
   設計判断:
   - 写真の代わりに製品画面そのもの（デモ台帳）を主役に置く。
     発電所オーナーは渲染図に飽きている —「画面はそのまま製品」が
     最も正直な証拠で、ログイン後の紙面と同じ人格を玄関で見せる。
   - スマホの最初の画面は 見出し+一文+ボタン だけ（方向1の規律）。
     台帳は2画面目。
   色・字は tokens.css の --pv-* のみ。見出しは Zen Kaku Gothic New
   （このページだけ読み込む marketing 書体）。
   ============================================================ */

body.page-home-paper { background: var(--pv-surface); }

/* order: home-v9-peach.css のスマホ側が .p9-main の子に order を振っている
   （footer=6・既定=9 — 2026-09-01 の「フッターが先頭に跳ぶ」事故の名残）。
   body 付きで特異性を上げる: ヘッダー partial が home-v9-peach.css を
   このファイルより後にもう一度読み込むため、同特異性では負ける */
.hp-wrap { max-width: 1180px; margin: 0 auto; padding: 0 32px; }
body.page-home-paper .hp-wrap { order: 1; }

/* 報頭の下の二重罫線（新聞一面の記名線） */
.hp-rule { border-top: 3px double var(--pv-ink); margin-top: 2px; }

/* ================= ヒーロー（左: 一句 / 右: 製品の証拠） ================= */
.hp-hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px;
  align-items: center; padding: 38px 0 30px; }
.hp-title { font-family: 'Zen Kaku Gothic New', var(--pv-font); font-weight: 900;
  font-size: 44px; line-height: 1.28; letter-spacing: -.015em; color: var(--pv-ink); margin: 0 0 14px; }
.hp-sub { font-size: 15px; line-height: 1.9; color: var(--pv-ink-2); margin: 0 0 24px; max-width: 30em; }
.hp-ctas { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.hp-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 54px;
  padding: 0 34px; background: var(--pv-green-600); font-size: 15px; font-weight: 700;
  border-radius: 4px; text-decoration: none; transition: background .15s; }
/* !important: app-light-theme の全リンク着色規則より特異性を上げるため（portfolio.css と同じ事情） */
body.page-home-paper a.hp-btn { color: var(--pv-surface) !important; text-decoration: none !important; }
.hp-btn:hover { background: var(--pv-green-500); }
body.page-home-paper a.hp-demo-link { font-size: 13.5px; font-weight: 700; color: var(--pv-green-700);
  text-decoration: none !important; border-bottom: 1px solid var(--pv-green-100); padding-bottom: 2px; }
body.page-home-paper a.hp-demo-link:hover { color: var(--pv-green-600); }

/* ---- 右列: デモ台帳（画面はそのまま製品）。列全体が /demo への入口 ----
   !important: home-v9-peach.css の毯式リンク装飾（下線・緑）が台帳の
   数字にまで及ぶため。text-decoration は親から伝播するので a 自身で切る */
body.page-home-paper a.hp-proof { display: block; text-decoration: none !important; color: inherit !important; }
.hp-proof:hover .hp-ledger { border-top-color: var(--pv-green-700); }
.hp-proof-label { font-size: 11px; font-weight: 700; letter-spacing: .14em; color: var(--pv-muted);
  margin-bottom: 10px; }
.hp-ledger { border-top: 2px solid var(--pv-ink); }
.hp-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 11px 4px; border-bottom: 1px solid var(--pv-border); }
.hp-row:last-child { border-bottom: 3px double var(--pv-ink); }
.hp-row-name { font-size: 14px; font-weight: 700; color: var(--pv-ink); }
.hp-row-meta { font-size: 11px; color: var(--pv-muted); margin-top: 2px; }
.hp-row-amt { font-family: var(--pv-font-num); font-size: 17px; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--pv-ink); white-space: nowrap; }
.hp-row--warn { background: var(--pv-warn-bg); margin: 0 -12px; padding: 11px 16px; }
.hp-warn-flag { font-size: 11px; font-weight: 800; color: var(--pv-warn); margin-right: 8px; }
.hp-proof-note { font-size: 11.5px; color: var(--pv-muted); line-height: 1.7; margin-top: 10px; }

/* CTA の根拠1行（統計欄の代替）: 38万件は検索の誇示でなく
   「会社名で見つかる・書類不要」の理由づけとして1行だけ（2026-09-08） */
.hp-cta-note { font-size: 11.5px; color: var(--pv-muted); margin: 14px 0 0; }

/* ================= 三本柱（新聞の段組） ================= */
.hp-feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px;
  padding: 32px 0 0; }
.hp-feat { border-top: 2px solid var(--pv-ink); padding-top: 14px; }
.hp-feat h3 { font-family: 'Zen Kaku Gothic New', var(--pv-font); font-size: 17px; font-weight: 900;
  color: var(--pv-ink); margin: 0 0 10px; line-height: 1.5; }
.hp-feat p { font-size: 12.5px; line-height: 1.9; color: var(--pv-ink-2); margin: 0; }

/* ================= 奥付（結びの惹句は置かない） ================= */
.hp-colophon { border-top: 1px solid var(--pv-border); margin-top: 32px; padding: 16px 0 28px;
  display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.hp-datasource { font-size: 11px; color: var(--pv-muted); line-height: 1.7; margin: 0; max-width: 46em; }
.hp-btn--sm { min-height: 44px; padding: 0 26px; font-size: 13.5px; flex-shrink: 0; }

/* ================= フッター（紙面の裏表紙） =================
   共用 partial（5ページ）の構造は触らず、このページの作用域だけで
   teal の実色面を白紙+墨の二重罫線に変える。頁頭の報頭二重線と対になる
   「新聞の綴じ線」。他ページが紙面化されたら body class を足すだけで揃う。
   !important: home-v9-peach.css 側が全て !important で塗っているため対抗 */
body.page-home-paper .p9-footer { background: var(--pv-bg); color: var(--pv-ink-2);
  border-top: 3px double var(--pv-ink); }
body.page-home-paper .p9-footer-logo-wrap img { display: none; }
body.page-home-paper .p9-footer-logo-wrap .pv-wordmark { color: var(--pv-ink); }
body.page-home-paper .p9-footer-logo-wrap .pv-jp { color: var(--pv-green-600); }
body.page-home-paper .p9-footer-tagline { color: var(--pv-muted); }
body.page-home-paper .p9-footer-col-title { color: var(--pv-ink); }
body.page-home-paper .p9-footer-links a { color: var(--pv-muted) !important; }
body.page-home-paper .p9-footer-links a:hover { color: var(--pv-green-700) !important; }
body.page-home-paper .p9-footer-source { color: var(--pv-muted); }
body.page-home-paper .p9-footer-source a { color: var(--pv-ink-2) !important; }
body.page-home-paper .p9-footer-source a:hover { color: var(--pv-green-700) !important; }
body.page-home-paper .p9-footer-bottom { color: var(--pv-muted); border-top-color: var(--pv-border); }
body.page-home-paper .p9-footer-bottom a { color: var(--pv-muted) !important; }
body.page-home-paper .p9-footer-bottom a:hover { color: var(--pv-green-700) !important; }

/* ── ホームだけフッターを奥付サイズに畳む（2026-09-08）──
   リンク3列は全てヘッダーと同内容、タグラインはヒーローと同文、
   出典行は奥付と同文 — 一面に二度目は要らない。残すのは
   ワードマーク + ©行（お問い合わせ・法務リンク）だけ。
   他の4ページは従来どおり全体フッターを出す */
body.page-home-paper .p9-footer { padding: 1.5rem 1.5rem 1.25rem; }
body.page-home-paper .p9-footer-grid { display: block; }
body.page-home-paper .p9-footer-grid > div:not(.p9-footer-brand) { display: none; }
body.page-home-paper .p9-footer-tagline { display: none; }
body.page-home-paper .p9-footer-source { display: none; }
body.page-home-paper .p9-footer-bottom { margin-top: .75rem; padding-top: 1rem; }

/* ================= スマホ ================= */
@media (max-width: 760px) {
  .hp-wrap { padding: 0 20px; }

  /* 最初の画面は 見出し+一文+ボタン だけ（方向1の規律）。台帳は2画面目 */
  .hp-hero { grid-template-columns: 1fr; gap: 36px; padding: 40px 0 36px; }
  .hp-title { font-size: 32px; line-height: 1.35; }
  .hp-sub { font-size: 13.5px; margin-bottom: 26px; }
  .hp-ctas { flex-direction: column; align-items: stretch; gap: 0; }
  .hp-btn { min-height: 52px; }
  body.page-home-paper a.hp-demo-link { align-self: center; margin-top: 16px; }
  .hp-row--warn { margin: 0 -20px; padding: 15px 20px; }

  .hp-cta-note { text-align: center; margin-top: 12px; }

  .hp-feats { grid-template-columns: 1fr; gap: 28px; padding-top: 40px; }
  .hp-colophon { flex-direction: column-reverse; align-items: stretch;
    margin-top: 36px; padding: 24px 0 40px; gap: 20px; }
  .hp-btn--sm { min-height: 52px; }
}