:root {
  /* Brand */
  --color-main: #0342ab;
  --color-blue: #0342ab;
  --color-sub: #e9ecf4;
  --color-cta-bg: linear-gradient(142deg, #035dab 0%, #0342ab 100%);

  /* Accent */
  --color-orange: #ef6723;

  /* Text */
  --color-text: #333333;
  --color-text-soft: #636d7d;
  --color-text-placeholder: #777f8d;
  --color-text-faint: #a6a6a6;

  /* Surface / Border */
  --color-white: #ffffff;
  --color-border: #cccccc;
  --color-control: #cccccc;

  /* Status（パレット内の色で対応） */
  --color-required: #b03030;
  --color-optional: #6c7883;
  --color-error-bg: #ffffff;
  --color-error-text: #0342ab;
  --color-error-border: #636d7d;

  /* Alpha overlays */
  --color-white-55: rgba(255, 255, 255, 0.55);
  --color-white-70: rgba(255, 255, 255, 0.7);

  /* Layout */
  --font-sans:
    "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo,
    sans-serif;
  --font-din: "URW DIN", var(--font-sans);
  --letter-spacing: 0.02em;
  --header-h: 80px;
  --radius-sm: 3px;
  --radius-md: 12px;
  --radius-pill: 999px;
  --transition: 0.3s ease;

  /* Shadows */
  --shadow-card: 0 0 8px 0 rgba(0, 0, 0, 0.1);

  @media screen and (max-width: 767px) {
    --header-h: 72px;
  }
}