/* =========================================================
   デザイントークン — 唯一の真実
   トーンは duskin.jp/special/air/ 準拠（白×紺×ピンクの清潔感）
   ここに無い値をコードに直接書かない
   =========================================================
   --u = min(100vw,750px)/750
   750px設計の値に掛けると、画像とCSSが同じ比率で縮む
   ========================================================= */
:root {
  /* 色 — 役割で定義。見た目で増やさない */
  --c-navy:      #1B3A5C;  /* 見出し・信頼      12.3:1 on white */
  --c-blue:      #0089CF;  /* アクセント・線 */
  --c-blue-pale: #E8F4FC;  /* カード背景 */
  --c-pink:      #E5006E;  /* CTA・強調（ダスキンのアクセント） 4.9:1 */
  --c-pink-dark: #B80059;  /* CTAの影 */
  --c-pink-pale: #FDF0F5;  /* 表の交互行 */
  --c-yellow:    #FFE100;  /* 「無料」バッジ */
  --c-gray-bg:   #F2F2F2;  /* 注釈・区切り背景 */
  --c-white:     #FFFFFF;
  --c-text:      #333333;  /* 本文  10.9:1 */
  --c-note:      #767676;  /* 注釈   4.6:1 */
  --c-line:      #DDDDDD;

  /* 文字 — 比率1.25の等比。中間値を作らない */
  --fs-hero: 62; --fs-xl: 50; --fs-lg: 40; --fs-md: 32;
  --fs-base: 26; --fs-sm: 22; --fs-note: 18;

  /* 行間 — 大きい文字ほど詰める */
  --lh-hero: 1.3; --lh-xl: 1.34; --lh-lg: 1.4;
  --lh-md: 1.5; --lh-base: 1.75; --lh-sm: 1.6; --lh-note: 1.55;

  --ls-tight: -0.01em;

  /* ウェイト — 3段階のみ（500/600は日本語で偽ボールドになる） */
  --fw-black: 900; --fw-bold: 700; --fw-normal: 400;

  /* 余白 — 8ptグリッド */
  --sp-1: 8; --sp-2: 16; --sp-3: 24; --sp-4: 32;
  --sp-5: 40; --sp-6: 56; --sp-7: 72; --sp-8: 96;

  /* 版面 */
  --gutter: 50; --sec-pad-y: 64;

  /* 形状 — 3段階＋ピル */
  --r-sm: 8; --r-md: 20; --r-lg: 32; --r-pill: 999;
  --bw-thin: 1; --bw-bold: 3;

  /* インタラクション */
  --dur: .18s; --ease: cubic-bezier(.2,.7,.3,1);
  --tap-min: 48px;                 /* 電話ボタンは主CVなので余裕を持たせる */
  --focus-w: 3px; --focus-c: #0A66FF; --focus-offset: 2px;

  --z-header: 40; --z-fixed: 50;
  --fixed-cta-h: 76px;
}
.lp { --w: min(100vw, 750px); --u: calc(var(--w) / 750); }