@charset "UTF-8";

/* ==========================================================================
   SEGA SAMMY PHOENIX — Design tokens
   サイト全体で共有するデザイントークン。ページ固有の値はここに置かない。
   ========================================================================== */

:root {
  /* Color */
  --color-red: #d8270c;
  --color-red-alt: #db2c0b;
  --color-flame: #ff0d00;
  --color-flame-mid: #b74b1a;
  --color-black: #0e0600;
  --color-dark: #171717;
  --color-white: #fff;
  --color-page: #f5f5f5;
  --color-line: #262626;
  --color-gray-300: #d4d4d4;
  --color-gray-400: #a1a1a1;
  --color-gray-500: #737373;
  --color-gray-600: #404040;
  --color-news-date: #dbdbdb;
  --color-ink: #1f1f1f;      /* 白背景カード上の本文 */
  --color-ink-sub: #535353;  /* 白背景カード上の補足テキスト */

  /* Gradients (Figma linear fills) */
  --grad-hero:
    linear-gradient(90deg, rgba(0, 0, 0, .09) 0%, rgba(0, 0, 0, .09) 100%),
    linear-gradient(200.6125deg, #ff0d00 2.4748%, #b74b1a 32.296%, #000 67.066%);
  --grad-ember:
    linear-gradient(90deg, rgba(0, 0, 0, .09) 0%, rgba(0, 0, 0, .09) 100%),
    linear-gradient(35.1685deg, #ff0d00 2.4748%, #b74b1a 32.296%, #000 67.066%);
  --grad-news:
    linear-gradient(90deg, rgba(0, 0, 0, .09) 0%, rgba(0, 0, 0, .09) 100%),
    linear-gradient(195.0237deg, #ff0d00 2.4748%, #b74b1a 32.296%, #000 67.066%);
  --grad-mission:
    linear-gradient(90deg, rgba(0, 0, 0, .09) 0%, rgba(0, 0, 0, .09) 100%),
    linear-gradient(224.2539deg, #ff0d00 2.4748%, #b74b1a 32.296%, #000 67.066%);
  /* CONTACT / FAQ / NEWS / PLAYER の Figma fill は 208.00〜208.14deg。
     視覚差のない範囲なので、実値が一致する CONTACT / FAQ の値へ統合する。 */
  --grad-subpage:
    linear-gradient(90deg, rgba(0, 0, 0, .09) 0%, rgba(0, 0, 0, .09) 100%),
    linear-gradient(208.1425deg, #ff0d00 2.4748%, #b74b1a 32.296%, #000 67.066%);

  /* Typography */
  --font-en: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-jp: "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Sans",
             "Noto Sans JP", Meiryo, sans-serif;
  --font-mincho: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Noto Serif JP",
                 "MS PMincho", serif;
  --font-display: "Helvetica Neue", Helvetica, Arial, "Inter", sans-serif;
  --font-gothic-a1: "Gothic A1", var(--font-en);

  /* Layout — 1px in the 1512px Figma canvas */
  --stage: min(100vw, 1700px);
  --r: calc(var(--stage) / 1512);

  --container: 1228px;         /* PARTNER / common content width           */
  --gutter: min(9.4vw, 142px); /* content side gutter (=142px @1512)       */
  --head-inset: min(14.95vw, 226px); /* section headline inset (=226px)    */
  --tag-inset: min(12.27vw, 185px);

  --header-h: 102px;

  /* Figma Noise エフェクト ( type: NOISE / noiseType: MONOTONE / density: 1 /
     color rgba(255, 98, 0, .1412) ) を SVG feTurbulence で再現したタイル。
     色とアルファは SVG 側に焼き込んであるので opacity / mix-blend-mode は使わない
     ( Figma と同じ通常合成 )。--noise-tile は SVG の実寸と必ず一致させること。
     拡縮すると Figma の Noise Size と粒径がずれる。 */
  /* Noise Size 1.1812502145767212 — 編集用ソース: assets/svg/noise.svg */
  --noise:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320'%3E %3Cfilter id='n' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E %3CfeTurbulence type='fractalNoise' baseFrequency='0.846561' numOctaves='1' seed='3' stitchTiles='stitch'/%3E %3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 0.38333 0 0 0 0 0 1 0 0 0 0'/%3E %3CfeComponentTransfer%3E %3CfeFuncA type='table' tableValues='0 0 0 0 0 0 0.000021 0.000148 0.000669 0.002374 0.005881 0.011515 0.018943 0.028318 0.040632 0.056457 0.073236 0.087504 0.102822 0.114166 0.122875 0.129969 0.135272 0.138937 0.140613 0.141056 0.14117 0.1412 0.1412 0.1412 0.1412 0.1412 0.1412'/%3E %3C/feComponentTransfer%3E %3C/filter%3E %3Crect width='320' height='320' filter='url(%23n)'/%3E %3C/svg%3E");
  /* Noise Size 1.5580421686172485 — 編集用ソース: assets/svg/noise-lg.svg */
  --noise-lg:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320'%3E %3Cfilter id='n' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E %3CfeTurbulence type='fractalNoise' baseFrequency='0.641831' numOctaves='1' seed='3' stitchTiles='stitch'/%3E %3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 0.38333 0 0 0 0 0 1 0 0 0 0'/%3E %3CfeComponentTransfer%3E %3CfeFuncA type='table' tableValues='0 0 0 0 0 0 0.000021 0.000148 0.000669 0.002374 0.005881 0.011515 0.018943 0.028318 0.040632 0.056457 0.073236 0.087504 0.102822 0.114166 0.122875 0.129969 0.135272 0.138937 0.140613 0.141056 0.14117 0.1412 0.1412 0.1412 0.1412 0.1412 0.1412'/%3E %3C/feComponentTransfer%3E %3C/filter%3E %3Crect width='320' height='320' filter='url(%23n)'/%3E %3C/svg%3E");
  --noise-tile: 320px 320px;

  /* Motion */
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --dur: .8s;

  /* Motion tokens — hover / focus interaction.
     反応は即座、着地はゆっくり。linear と ease の乱用は避ける。 */
  --ease-premium: cubic-bezier(.16, 1, .3, 1);   /* 主役。強い減速 */
  --ease-smooth: cubic-bezier(.22, 1, .36, 1);   /* 補助。やや穏やか */
  --ease-standard: cubic-bezier(.4, 0, .2, 1);   /* 色・不透明度など */

  --motion-fast: 300ms;   /* SNS / nav / tag        */
  --motion-base: 420ms;   /* card lift / text shift */
  --motion-slow: 620ms;   /* overlay / shadow       */
  --motion-image: 700ms;  /* 画像 zoom              */

  /* Section Heading scroll-linked motion.
     start / end は heading top の viewport 高比率、travel は実測 title 幅の倍率。 */
  --heading-scroll-start: 1.05;
  --heading-scroll-end: .20;
  --heading-outline-travel: 1;
  --heading-title-travel: 1;

  /* stagger ( 20〜80ms の意識させない時間差 ) */
  --stagger-1: 20ms;
  --stagger-2: 40ms;
  --stagger-3: 60ms;
  --stagger-4: 80ms;
}

/* --------------------------------------------------------------------------
   Responsive token overrides
   ブレークポイントごとに値が変わるトークンはここへ集約する。
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  :root {
    --header-h: 72px;
    --heading-outline-travel: .68;
    --heading-title-travel: .68;
  }
}

@media (max-width: 768px) {
  :root {
    --gutter: 24px;
    --head-inset: 24px;
    --tag-inset: 24px;
    --heading-outline-travel: .46;
    --heading-title-travel: .46;
  }
}

@media (max-width: 380px) {
  :root {
    --gutter: 16px;
    --head-inset: 16px;
    --tag-inset: 16px;
  }
}