/* デザイントークン。値の出典: docs/design-notes.md §3（handoff 準拠） */
:root {
  /* Color */
  --c-cream:        #faf3e6;
  --c-cream-dark:   #f3e6d0;
  --c-cream-light:  #fdf8ee;
  --c-marker:       #f6d3b4;
  --c-navy:         #14365c;
  --c-navy-dark:    #0d2742;
  --c-orange:       #d9641c;
  --c-orange-dark:  #a84a10;
  --c-orange-light: #f0a86a;
  --c-orange-pale:  #fbeee2;
  --c-link:         #c2581a;
  --c-text:         #1f2a37;
  --c-text-sub:     #3b4654;
  --c-text-on-navy: #eef2f7;
  --c-gray:         #4b5563;
  --c-gray-bg:      #e8e6e1;
  --c-rule-dashed:  #b9b1a0;
  --c-footer-text:  #c9d6ec;
  --c-body-outside: #e6dfd2;
  --c-white:        #fff;

  /* Typography（速度優先で 3 書体） */
  --ff-body:    "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --ff-head:    "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Hiragino Sans", sans-serif;
  --ff-display: "Dela Gothic One", "M PLUS Rounded 1c", "Hiragino Sans", sans-serif;

  --fs-min:        13px;
  --fs-note:       16px;
  --fs-small:      17px;
  --fs-body:       19px;
  --fs-card-title: 21px;
  --fs-cta:        23px;
  --fs-h2:         26px;
  --fs-h2-accent:  30px;
  --fs-display-m:  40px;
  --fs-display-l:  50px;
  --fs-display-xl: 112px;
  --fs-tel:        29px;

  --lh-tight: 1.05;
  --lh-head:  1.3;
  --lh-body:  1.85;

  /* Shape */
  --radius-btn:      14px;
  --radius-btn-sm:   12px;
  --radius-img:      16px;
  --radius-img-lg:   20px;
  --radius-bubble:   14px;
  --radius-phone:    28px;
  --radius-pill:     999px;
  --radius-cloud:    90px 100px 80px 110px / 70px 80px 70px 80px;
  --radius-cloud-sm: 80px 90px 70px 100px / 60px 70px 60px 70px;

  --bw:       2.5px;
  --bw-thick: 3px;
  --rotate-label: -2deg;

  /* Shadow */
  --sh-btn:       0 6px 0 var(--c-orange-dark);
  --sh-btn-sm:    0 4px 0 var(--c-orange-dark);
  --sh-btn-navy:  0 4px 0 var(--c-navy-dark);
  --sh-offset:    6px 6px 0 var(--c-navy);
  --sh-offset-sm: 4px 4px 0 var(--c-navy);
  --sh-offset-lg: 8px 8px 0 var(--c-navy);
  --sh-band:      5px 5px 0 var(--c-orange);
  --sh-label:     3px 3px 0 var(--c-navy);
  --sh-polaroid:  0 8px 20px rgba(20, 54, 92, .22);
  --sh-phone:     0 12px 28px rgba(0, 0, 0, .35);

  /* Layout */
  --gutter:        16px;
  --gutter-wide:   20px;
  --section-pad-b: 52px;
  --wave-h:        44px;
  --sticky-cta-h:  84px;
  --max-sp:        480px;
  --max-pc:        1200px;
  --max-pc-narrow: 960px;
}