:root {
  /* ---- Color: Brand ---- */
  --color-orange-300: #E77314;
  --color-orange-400: #C96614;
  --color-orange-50: #FCECDE;
  --color-orange-100: #FBE0C7;
  --color-orange-125: #FAD8BB;
  --color-orange-200: #F5A767;

  /* ---- Color: Neutral / Cream ---- */
  --color-cream-50: #FAF8F5;
  --color-cream-100: #FDF8F0;
  --color-cream-150: #EBE3D8;
  --color-cream-200: #F7EEDD;
  --color-neutral-900: #1E1E1D;
  --color-neutral-700: #454444;
  --color-neutral-600: #6B6A69;
  --color-neutral-500: #8A8378;
  --color-neutral-400: #807F7D;
  --color-neutral-200: #E0DEDC;
  --color-white: #FFFFFF;

  /* ---- Color: Amber (SNS告知バッジ・PC版ステージ背景) ---- */
  --color-amber-50: #FEF6E0;
  --color-amber-100: #FEECBB;
  --color-amber-150: #FDE8AD;
  --color-amber-300: #FABD14;

  /* ---- Color: Orange (PC版ステージ背景のグリッド線) ---- */
  --color-orange-150: #F7C194;

  /* ---- Color: Navy (企業向け訴求バナー) ---- */
  --color-navy-50: #E5EFF9;
  --color-navy-400: #3466B1;
  --color-navy-700: #2A305C;
  --color-navy-800: #222545;

  /* ---- Color: Semantic ---- */
  --color-bg: var(--color-cream-100);
  --color-surface: var(--color-white);
  --color-text-primary: var(--color-neutral-900);
  --color-text-secondary: var(--color-neutral-700);
  --color-accent: var(--color-orange-300);
  --color-accent-hover: var(--color-orange-400);
  --color-border: var(--color-neutral-200);

  /* ---- Typography ---- */
  --font-family-base: "Zen Kaku Gothic Antique", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
  --font-family-accent: "M PLUS 1p", "Zen Kaku Gothic Antique", sans-serif;

  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 28px;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  --line-height-tight: 1.4;
  --line-height-normal: 1.7;

  /* ---- Spacing (px値そのまま) ---- */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;

  /* ---- Radius ---- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 999px;

  /* ---- Shadow ---- */
  --shadow-card: 0 4px 16px rgba(31, 27, 22, 0.08);

  /* ---- Layout ---- */
  --container-width-sp: 480px;
  --container-width-pc: 1140px;

  /* ---- Z-index ---- */
  --z-header: 100;
  --z-modal: 1000;
}

.container {
  width: 100%;
  max-width: var(--container-width-pc);
  margin-inline: auto;
  padding-inline: var(--space-16);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  min-width: 180px;
  padding: var(--space-12) var(--space-24);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  line-height: 1.5;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.2s ease, transform 0.1s ease, box-shadow 0.1s ease;
}

.btn__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}

.btn--primary {
  background-color: var(--color-accent);
  color: var(--color-white);
  box-shadow: 0 6px 0 var(--color-accent-hover);
}

.btn--primary:hover {
  background-color: var(--color-accent-hover);
}

.btn--primary:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 var(--color-accent-hover);
}

.btn--outline {
  background-color: var(--color-white);
  color: var(--color-accent);
  border: 2px solid var(--color-accent);
  box-shadow: 0 6px 0 var(--color-accent-hover);
}

.btn--outline:hover {
  background-color: var(--color-cream-100);
}

.btn--outline:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 var(--color-accent-hover);
}

.btn--navy {
  background-color: var(--color-navy-700);
  color: var(--color-white);
  box-shadow: 0 6px 0 var(--color-navy-800);
}

.btn--navy:hover {
  background-color: var(--color-navy-800);
}

.btn--navy:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 var(--color-navy-800);
}

.btn--small {
  min-width: 140px;
  padding: 10px 14px;
  font-size: var(--font-size-xs);
}

.btn--primary.btn--small {
  box-shadow: 0 4px 0 var(--color-accent-hover);
}

.btn--primary.btn--small:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--color-accent-hover);
}

.card {
  background-color: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--space-24);
}

.badge {
  display: inline-block;
  padding: var(--space-4) var(--space-12);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  background-color: var(--color-orange-100);
  color: var(--color-orange-400);
}

.badge--outline {
  padding: 4px var(--space-16) 6px;
  background-color: var(--color-white);
  border: 1.5px solid var(--color-accent);
  color: var(--color-accent);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
}