@charset "UTF-8";
/************************************
Design Tokens
************************************/
:root {
  /* Color */
  --color-text: #1B3345;
  --color-text-muted: #708FAA;
  --color-accent: #2B93DB;
  --color-border: #DDEAF8;
  --color-border-strong: #DDEAF8;
  --color-surface: #F4F6F8;
  --color-surface-soft: #F3F5F8;
  --color-surface-elevated: #FFFFFF;
  --color-white: #fff;
  --color-danger: #CA0401;
  --color-gray: #A5BDD2;
  --color-navy-deep: #1B3345;
  --color-navy-mid: #1B3345;

  /* Spacing scale */
  --space-20: 20px;
  --space-40: 40px;
  --space-80: 80px;
  --space-160: 160px;

  --space-xs: var(--space-20);
  --space-sm: var(--space-40);
  --space-md: var(--space-80);
  --space-lg: var(--space-160);

  /* Section / hero rhythm（やや引き締め） */
  --section-gap: 140px;
  --section-gap-sp: 72px;
  --hero-gap: var(--space-40);
  --hero-gap-sp: var(--space-40);

  /* Type scale（やや引き締め） */
  --fs-body: 16px;
  --fs-body-sp: 14px;
  --fs-h1: 40px;
  --fs-h1-sp: 30px;
  --fs-h2: 30px;
  --fs-h2-sp: 22px;
  --fs-h3: 22px;
  --fs-h3-sp: 17px;
  --fs-lead: 40px;
  --fs-lead-sp: 26px;
  --fs-display: 64px;
  --fs-display-sp: 36px;
  --fs-eyebrow: 14px;
  --fs-eyebrow-sp: 12px;
  --fs-btn: 14px;
  --fs-caption: 12px;

  /* Line height / tracking */
  --lh-tight: 1.2;
  --lh-heading: 1.4;
  --lh-body: 1.8;
  --tracking-body: 0.04em;
  --tracking-heading: 0.04em;

  /* Radius */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 9999px;
  --radius-full: 50%;
  --radius-section-curve: 56px;
  --radius-section-curve-sp: 32px;

  --radius-control: var(--radius-sm);
  --radius-card: var(--radius-md);
  --radius-media: var(--radius-lg);
  --radius-tile: var(--radius-xl);

  /* Shadow（既存トーンを維持） */
  --shadow-xs: 0 2px 20px rgba(112, 143, 170, 0.08);
  --shadow-sm: 0 2px 20px rgba(112, 143, 170, 0.18);
  --shadow-md: 4px 4px 20px rgba(27, 51, 69, 0.24);
  --shadow-lg: 3px 3px 20px rgba(33, 37, 46, 0.32);

  /* Button */
  --btn-width: 250px;
  --btn-width-sp: 100%;
  --btn-max-width-sp: 300px;
  --btn-padding-y: 15px;
  --btn-padding-x: 24px;
  --btn-padding: var(--btn-padding-y) var(--btn-padding-x);
  --btn-radius: var(--radius-pill);

  /* Layout */
  --inner-width: 90%;
  --bp-sp: 960px;
}