/* ============================================================
   base.css ── 3案 共通の「規律」
   UI竣工検査100点法（2026-09-09）の指摘 3・4・5・6・9 を先に潰すための土台。
   各案の style.css より "先に" 読み込む。案ごとに変えてよいのは色と配置だけ。

   ・文字 …… 4段（13 / 16 / 20 / 30）＋ ヒーロー専用の表示サイズ1つ
              見出し30 ÷ 本文16 ＝ 1.875倍（基準1.8〜2倍）
   ・余白 …… 3段（8 / 16 / 24）。それ以外は8の倍数だけ使う
   ・角丸 …… 3段（小6 / 大12 / ピル999）
   ・ボタン … transition と :active を必ず持つ（押した感）
   ・焦点 …… :focus-visible をライムの二重リングで統一
   ============================================================ */

:root{
  /* ── 文字：4段 ── */
  --fs-cap:13px;   /* ラベル・注記・脚注 */
  --fs-body:16px;  /* 本文・ボタン・カード本文・表 */
  --fs-sub:20px;   /* 小見出し・リード */
  --fs-h2:30px;    /* 見出し */
  /* ★表示用サイズ 1つ・ヒーロー限定（2026-09-09 検査側の判定で正式な規律に）
     規律＝「本文系4段 ＋ 表示用1」。条件は3つ：
       ①使うのは各ページのヒーロー h1 だけ（他で流用しない）
       ②スマホ幅で3行を超えないこと（超えるなら上限を52pxへ下げる）
       ③この規律は base.css に書く（各案・各ページで勝手に増やさない） */
  --fs-hero:clamp(30px,6vw,60px);

  /* ── 余白：3段（他は8の倍数） ── */
  --sp-1:8px; --sp-2:16px; --sp-3:24px;
  --sp-sec:88px;   /* セクションの上下（8の倍数） */
  --sp-sec-sp:56px;/* スマホのセクション上下（8の倍数） */

  /* ── 角丸：3段 ── */
  --r-s:6px; --r-l:12px; --r-pill:999px;

  /* ── 動き ── */
  --ease:cubic-bezier(.22,.8,.3,1);
  --dur:.18s;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",YuGothic,"Noto Sans JP",Meiryo,system-ui,sans-serif;
  font-size:var(--fs-body);
  line-height:1.9;
  letter-spacing:.01em;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}

/* ── 文字の段（この5つ以外の font-size を各案で足さない） ── */
h1{font-size:var(--fs-hero);line-height:1.18;letter-spacing:-.02em;font-weight:800;margin:0 0 var(--sp-2)}
h2{font-size:var(--fs-h2);line-height:1.35;letter-spacing:-.015em;font-weight:800;margin:0 0 var(--sp-2)}
h3{font-size:var(--fs-sub);line-height:1.5;font-weight:700;margin:0 0 var(--sp-1)}
p{margin:0 0 var(--sp-2)}
.cap{font-size:var(--fs-cap)}
.lead{font-size:var(--fs-sub)}
small,.small{font-size:var(--fs-cap)}

/* ── ボタン：押した感を必ず持たせる（指摘4） ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-1);
  min-height:56px;padding:0 var(--sp-3);border-radius:var(--r-l);
  font-size:var(--fs-body);font-weight:800;text-decoration:none;
  transition:transform var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease),
             background var(--dur) var(--ease),
             color var(--dur) var(--ease),
             border-color var(--dur) var(--ease),
             opacity var(--dur) var(--ease);
}
.btn:active{transform:translateY(1px) scale(.985);opacity:.78}
.btn[aria-disabled="true"]{cursor:default}
.btn[aria-disabled="true"]:active{transform:none;opacity:1}

/* ── 焦点：キーボードで辿る人に必ず見える（指摘9） ── */
:focus-visible{
  outline:3px solid #c3f53c;
  outline-offset:3px;
  border-radius:var(--r-s);
}

/* ── 動きを減らす設定：全部止める ── */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

/* ── スマホ ── */
@media (max-width:560px){
  /* ★見出しは小さくしない。26pxに落とすと 26÷16＝1.63倍になり、
     「見出しと本文の差は1.8〜2倍」という基準を割るため（検査の指摘1） */
  :root{--sp-sec:56px}
  .btn{width:100%}
}