/* デザインの値（色・文字・余白）はここだけに書く。他のCSSには変数名だけを書く
   2026-10-01 白×青の型（マスターの参考画像）に差し替え */
:root {
  /* 色 */
  --c-bg: #ffffff;
  --c-bg-2: #f3f7fd;
  --c-bg-3: #e9f1fb;
  --c-surface: #ffffff;
  --c-line: #e3eaf3;
  --c-line-strong: #c7d5e8;
  --c-text: #14213d;
  --c-muted: #5b6b82;
  --c-dim: #94a3b8;
  --c-accent: #1a6ff0;
  --c-accent-2: #0b57d0;
  --c-accent-soft: #e8f0fe;
  --c-accent-ink: #ffffff;
  --c-x: #0f1419;
  --c-x-ink: #ffffff;
  --c-marker: #ffe45c;
  --c-rec: #ff3b2f;
  --c-scrim: rgba(20, 33, 61, 0.55);
  --c-scrim-strong: rgba(10, 16, 30, 0.94);
  --c-shade-0: rgba(20, 33, 61, 0);
  --c-shade-1: rgba(20, 33, 61, 0.35);
  --c-shade-2: rgba(20, 33, 61, 0.8);
  --c-white-a: rgba(255, 255, 255, 0.85);
  --c-white-b: rgba(255, 255, 255, 0.6);
  --c-badge: rgba(10, 16, 30, 0.72);
  --sh-card: 0 10px 30px -14px rgba(20, 33, 61, 0.22);
  --sh-float: 0 24px 60px -20px rgba(20, 33, 61, 0.35);
  --sh-btn: 0 10px 24px -10px rgba(26, 111, 240, 0.7);

  /* 最初の演出（PCだけ・約3秒）の色 */
  --c-intro-bg: #0b2a6b;
  --c-intro-1: #1a6ff0;
  --c-intro-2: #4fc3ff;
  --c-intro-3: #7c5cff;
  --c-intro-4: #ffe45c;
  --c-intro-5: #ffffff;
  --t-intro: 3s;

  /* 商品ごとの色（札の文字色に使う） */
  --c-cat-kill: #1a6ff0;
  --c-cat-cinema: #f0731a;
  --c-cat-motion: #1aa3f0;
  --c-cat-clip: #e0447a;
  --c-cat-short: #7c5cff;

  /* 文字 */
  --f-jp: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif;
  --f-hand: "Yomogi", "Zen Kaku Gothic New", cursive;
  --fs-hero-jp: clamp(2.1rem, 3.6vw, 3.1rem);
  --fs-h2-jp: clamp(1.5rem, 3vw, 2.15rem);
  --fs-cta-jp: clamp(1.6rem, 3.6vw, 2.6rem);
  --fs-h3: 1.1rem;
  --fs-body: 1rem;
  --fs-small: 0.86rem;
  --fs-micro: 0.74rem;

  /* 余白・形 */
  --gutter: clamp(16px, 4vw, 48px);
  --gap: clamp(12px, 1.6vw, 20px);
  --sec-pad: clamp(56px, 7vw, 88px);
  --radius: 16px;
  --radius-s: 10px;
  --tap: 44px;
  --header-h: 66px;
  --max: 1200px;

  /* 動き */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --t-fast: 0.2s;
  --t-mid: 0.45s;
  --t-slow: 0.8s;
}