/* ═══════════════════════════════════════════════════════════════════
   公開ページ (LP / 機能 / 用途別 / 料金) 共通サイズトークン
   = マーケ提案 hp_structure_proposal_2026-08.md §9 (2026-08-03 デザイン引き締め)

   サイズの正本はこの 1 ファイル。各ページの <style> は var(--lp-*) で参照する
   (= 以後の「大きい/小さい」調整はここだけ直せば 4 ページ一括で効く)。
   色はここに書かない (= 色の正本は palette.css / lint が強制)。

   基準レンジ (§9-1): H1 34-40 (mobile 26-30) / H2 24-28 (20-22) /
   kicker 11-12 / 本文 14-15 lh1.7 / カード pad 20-24 (16-20) /
   カード見出し 15-16・本文 13.5-14 / コンテナ 1080-1140。
   セクション余白は基準 64-80 より一段詰めた 56 上限で統一
   (= 実測で全ページ 52-62 と既に基準未満 + オーナー指摘が「大きい」方向のため
      拡大はしない / mobile は基準どおり 44)。
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --lp-wrap: 1080px;                        /* コンテナ幅 (広げすぎない) */
  --lp-h1: clamp(27px, 3.4vw, 38px);        /* ヒーロー H1 (旧 LP 46px を基準内へ) */
  --lp-h2: clamp(21px, 2.3vw, 26px);        /* 節見出し H2 (旧 27-29px を 26 に統一) */
  --lp-kicker: 12px;                        /* eyebrow / kicker (+letter-spacing 前提) */
  --lp-body: 14.5px;                        /* 本文・ヒーローサブ (旧 LP 16.5px を統一) */
  --lp-card-pad: clamp(16px, 1.6vw, 20px);  /* カード padding */
  --lp-card-head: 15px;                     /* カード見出し (旧 14-14.5px を底上げ) */
  --lp-card-body: 13.5px;                   /* カード本文 (旧 12.5-13px を底上げ) */
  --lp-sec-pad: clamp(44px, 5vw, 56px);     /* セクション上下余白 (旧 LP 62px 固定 = mobile 過大を解消) */
}

/* ── 固定 CTA (= §8-3 / 全公開ページ共通 / 要素は lp-ui.js が挿入する) ──
   PC = 右下フローティング / モバイル = 下部固定バー (safe-area 対応)。
   色はテラコッタ (--brand2) = 10% アクセント規律の本来の使い所 (図解には使わない)。
   z-index 9 = 各ページの .nav (10) より下 = 追従ヘッダを覆わない。
   文言は「先行案内に登録」固定 (= 自走 CTA 禁止 /「無料で今すぐ」系は使わない)。 */
.lp-fab{ position:fixed; right:20px; bottom:20px; z-index:9;
         display:inline-flex; align-items:center; gap:7px;
         background:var(--brand2); color:var(--text-inverse);
         font-family:var(--font-sans); font-size:13.5px; font-weight:700; text-decoration:none;
         padding:12px 20px; border-radius:var(--radius-pill); border:none; cursor:pointer;
         box-shadow:0 4px 16px color-mix(in srgb, var(--brand2) 30%, transparent);
         opacity:0; visibility:hidden; transform:translateY(10px);
         transition:opacity .2s ease, transform .2s ease, visibility .2s ease, background .12s ease; }
.lp-fab.is-on{ opacity:1; visibility:visible; transform:none; }
.lp-fab:hover{ background:var(--brand2-dark); }
@media (max-width:768px){
  .lp-fab{ right:0; left:0; bottom:0; border-radius:0; justify-content:center;
           padding:14px 16px calc(14px + env(safe-area-inset-bottom));
           box-shadow:0 -2px 14px color-mix(in srgb, var(--accent) 14%, transparent); }
  .lp-fab.is-on{ transform:none; }
  /* 下部バーがフッターを覆わないよう逃がす (= 各ページの footer 側は触らない /
     スタイル目的の !important を新設しない = 汎用ガイド §4b-12) */
  body{ padding-bottom:64px; }
}
@media (prefers-reduced-motion: reduce){ .lp-fab{ transition:none; } }

/* ── スクロール連動フェード (= §9-4 adopt / opacity + translateY 14px / 260ms) ──
   🔴 html.js-reveal が付いたときだけ効かせる (= lp-ui.js が付与)。
   JS 読込失敗・実行不能でも本文が消えない (= 非表示のまま固まる事故を構造的に防ぐ)。 */
html.js-reveal .reveal{ opacity:0; transform:translateY(14px); }
html.js-reveal .reveal.in{ opacity:1; transform:none;
  transition:opacity .26s ease-out, transform .26s ease-out; }
@media (prefers-reduced-motion: reduce){
  html.js-reveal .reveal{ opacity:1; transform:none; }
  html.js-reveal .reveal.in{ transition:none; }
}