/* =================================================================
   base.css — design tokens, reset, typography, layout primitives
   Shared by every page. Edit tokens here to re-theme the whole site.
   ================================================================= */

:root {
  /* --- color ------------------------------------------------- */
  --c-ink: var(--c-text);  /* headings / strong text: same color, weight does the work */
  --c-blue: #2d4390;       /* brand accent (hero lines, badges) */
  --c-blue-rgb: 45, 67, 144; /* same blue, for rgba() tints/shadows */
  --c-text: #333;          /* body text */
  --c-muted: var(--c-text); /* secondary text: size/weight, not low contrast */
  --c-faint: var(--c-text); /* footer copy: keep readable */
  --c-line: #e4e4e8;       /* hairlines / borders */
  --c-bg: #fff;            /* page + card surface */
  --c-surface: #fafafb;    /* soft panel surface (inset blocks) */
  --c-surface-2: #eceef4;  /* tinted fill (e.g. map hallways) */
  --c-on-accent: #fff;     /* text / icons sitting on --c-blue */
  --c-success: #2a7d50;    /* 完了状態のみ。白文字とのコントラスト 5.0:1 */
  --c-logo: #0a0a0a;       /* ロゴ素材の墨色。ロゴ・ロゴ演出だけに使う */

  /* --- frosted glass ----------------------------------------- */
  --glass-bg: rgba(255, 255, 255, 0.35);
  --glass-panel: rgba(255, 255, 255, 0.45);
  --glass-border: rgba(255, 255, 255, 0.4);
  --glass-blur: blur(16px) saturate(180%);

  /* --- 404 glass sculpture ---------------------------------- */
  --nf-size: clamp(96px, 26vw, 220px);
  --nf-depth: 0.22em;
  --nf-perspective: 1000px;
  --nf-return-duration: 480ms;
  --nf-glass-side: linear-gradient(180deg,
    color-mix(in srgb, var(--c-blue) 64%, var(--c-bg) 18%),
    color-mix(in srgb, var(--c-blue) 72%, var(--c-bg) 10%) 50%,
    color-mix(in srgb, var(--c-blue) 66%, var(--c-bg) 16%));
  --nf-glass-frost: rgba(255, 255, 255, 0.55);
  --nf-glass-face: linear-gradient(180deg,
    var(--c-blue) 0%, rgba(var(--c-blue-rgb), 0.35) 100%);

  /* --- type: families --------------------------------------- */
  --font-en: "Inter", sans-serif;
  --font-ja: "Inter", "Noto Sans JP", "Hiragino Kaku Gothic ProN",
    "Yu Gothic", sans-serif;
  /* display face — numerals, EN labels, badges, headings */
  --font-display: "Montserrat", var(--font-en);

  /* --- type: scale (px steps) -------------------------------- */
  --text-2xs: 10px;   /* eyebrow tags, micro EN labels */
  --text-xs: 11px;    /* fine print */
  --text-sm: 12px;    /* small notes, addresses */
  --text-ms: 13px;    /* meta, dates */
  --text-base: 14px;  /* compact body */
  --text-md: 15px;    /* default body */
  --text-lg: 16px;    /* card / item titles */
  --text-xl: 17px;    /* prominent item title */
  --text-2xl: 18px;   /* small section heading */
  --text-3xl: 19px;   /* block heading */

  /* --- type: fluid display sizes ----------------------------- */
  --text-title: clamp(32px, 8vw, 56px);      /* page titles */
  --text-badge: clamp(2.4rem, 9vw, 3.5rem);  /* section badges */
  --text-hero: clamp(76px, 22vw, 140px);     /* countdown number */
  --text-hero-unit: clamp(16px, 4.5vw, 26px);/* countdown unit */

  /* --- type: weights ---------------------------------------- */
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --fw-black: 900;

  /* --- radius ------------------------------------------------ */
  --r-pill: 999px;
  --r-lg: 24px;
  --r-md: 18px;
  --r-sm: 12px;
  --r-icon: 14%;    /* 企画アイコンの角丸。パンフと同じ比率（71.5pt 角に半径10pt）。大きさが変わっても形が同じ */

  /* --- elevation --------------------------------------------- */
  --shadow-soft: 0 8px 32px rgba(0, 0, 0, 0.08);
  --shadow-pop: 0 12px 40px rgba(0, 0, 0, 0.1);

  /* --- spacing scale (4px base) ------------------------------ */
  /* Going-forward standard for margins / padding / gaps. */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 48px;
  --sp-10: 56px;
  --sp-11: 64px;
  --sp-12: 72px;

  /* --- layout ------------------------------------------------ */
  --gap-page: 24px;          /* horizontal page padding (mobile) */
  --maxw: 680px;             /* content column width */
  --header-h: 72px;          /* approx header height for offsets */

  /* --- motion ------------------------------------------------ */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: clip;
  /* keep anchored sections clear of the fixed header */
  scroll-padding-top: calc(var(--header-h) + var(--sp-6));
}

body {
  font-family: var(--font-ja);
  color: var(--c-text);
  background: var(--c-bg);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img {
  max-width: 100%;
}

a {
  color: inherit;
}

/* --- layout primitives -------------------------------------- */

.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gap-page);
}

.section {
  padding-block: var(--sp-8);
}

/* hide content visually but keep it for assistive tech */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (min-width: 768px) {
  :root {
    --gap-page: 48px;
    --maxw: 720px;
  }

  .section {
    padding-block: var(--sp-10);
  }
}