:root{
  --ef-ink: #111826;
  --ef-navy: #101a30;
  --ef-blue: #255fc4;
  --ef-cyan: #33c6e0;
  --ef-paper: #ffffff;
  --ef-mist: #f3f6fa;
  --ef-line: rgba(22, 35, 63, .16);
  --ef-display: "Shippori Mincho B1", "Hiragino Mincho ProN", serif;
  --ef-heading: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  --ef-body: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", sans-serif;
  --ef-label: "Space Grotesk", sans-serif;
  --ef-serif: var(--ef-display);
  --ef-sans: var(--ef-body);

  /* 文字の色の役割（デザイン Loop 1）。地の明暗ごとに WCAG AA を満たす値。
     明るい地＝白・#f2f6fd〜#f8fafc、暗い地＝#0d1526・#101a30・#16233f・#1a2740 */
  --ef-text-sub: #5f6b84;          /* 明るい地の補助の文字（4.94〜5.35） */
  --ef-text-sub-dark: #8590a8;     /* 暗い地の補助の文字（4.65〜5.69） */
  --ef-text-accent: #255fc4;       /* 明るい地の小さな青い文字（5.52〜5.98） */
  --ef-text-accent-dark: #33c6e0;  /* 暗い地の小さな色の文字（7.31〜8.93） */
  --ef-text-alert: #d42a4a;        /* 必須の印（4.58〜4.97） */
  --ef-num-faint: rgba(43, 111, 227, .8);
  /* 文字の大きさの段階（デザイン Loop 6）。読む文字はこの6段だけを使う。
     ロゴ・記号・番号・大きな英字の透かし・数字の見せ場・引用の大きな一文は「見せる文字」で、段階の外。 */
  --ef-fs-h1: clamp(28px, 4.8vw, 56px);    /* ページの大見出し・締めの一文 */
  --ef-fs-h2: clamp(24px, 3.2vw, 38px);    /* 章の見出し */
  --ef-fs-h3: clamp(17px, 1.4vw, 19px);    /* カードの題・質問・小見出し */
  --ef-fs-body: clamp(15px, 1.25vw, 16px); /* 本文・ボタン・入力欄 */
  --ef-fs-small: 13px;                     /* 注記・ナビ・パンくず・表の見出し */
  --ef-fs-label: 11px;                     /* 英字のラベル・小さな印 */
  /* 見せる文字の段階（デザイン Loop 14）。役割ごとに1つ。ロゴ・記号・トップと理念の最初の画面・帯の文字は段階の外 */
  --ef-fs-ghost: clamp(56px, 10vw, 140px); /* 大きな英字の透かし */
  --ef-fs-num: clamp(28px, 2.4vw, 32px);   /* 手順・項目の番号 01 02 */
  --ef-fs-stat: clamp(38px, 5vw, 64px);    /* 数字の見せ場（月給・勤務時間） */
  --ef-fs-quote: clamp(17px, 1.9vw, 22px); /* 本文より大きく置く一文 */
  /* 余白の格子（デザイン Loop 7）。32px 未満は4の倍数、96px までは8の倍数、それより上は16の倍数。
     章の上下と左右の余白は、この2つだけを使う。 */
  --ef-space-section: clamp(80px, 10vw, 128px);
  --ef-gutter: clamp(20px, 5vw, 80px); /* 大きな薄い番号（白の上で 3.33） */
}
:root{ --ef-radius-control: 2px; --ef-control-height: 48px; }
:root{
  --ef-fs-hero: clamp(34px, 4.15vw, 60px);
  --ef-hero-leading: 1.42;
}
:root{
  --ef-action: #2b6fe3;
  --ef-ink-strong: #16233f;
  --ef-text-body: #4a5470;
  --ef-text-body-strong: #2b3550;
  --ef-text-light: #eef1f7;
  --ef-text-note: #44506a;
  --ef-surface-deep: #0d1526;
  --ef-text-muted-dark: #b8c1d6;
  --ef-text-caption: #5c6b85;
  --ef-text-secondary: #6b7590;
  --ef-text-neutral: #333;
  --ef-text-cool: #9fb0d6;
  --ef-surface-panel: #1a2740;
  --ef-text-menu: #c3cbdd;
  --ef-action-accent: #c637b0;
  --ef-text-neutral-strong: #222;
  --ef-surface-soft: #f4f7fa;
  --ef-surface-elevated: #22314e;
  --ef-surface-faint: #f8fafc;
  --ef-alert-decorative: #e23b5a;
  --ef-surface-blue: #f3f8ff;
}