@charset "utf-8";
/* ==========================================================================
   ボクセル博士のCTスキャン研究所 — Design Tokens
   出典: Figma / marketing-Design → 00_Design System / Foundations
         (node-id 1312-52130)
   ※ このファイルは Figma の Variables を 1:1 で写したもの。
      値を変えるときは必ず Figma 側と揃えること。
   ========================================================================== */

:root {
  /* --------------------------------------------------------------
     Color — Blue scale
     -------------------------------------------------------------- */
  --c-bl-01: #3f8cff;
  --c-bl-02: #2878ee;
  --c-bl-03: #1761d8;
  --c-bl-04: #1550b8; /* ★ メインカラー */
  --c-bl-05: #123f91;
  --c-bl-06: #0d306f;

  --c-lbl-01: #00cbfa; /* 見出しグラデーションの終点 */

  /* Color — 淡色 / 面 */
  --c-lbl: #dcebff;      /* ライトブルー（枠・面） */
  --c-lyw: #faf8dd;      /* ライトイエロー */
  --c-lgn: #e8f9ef;      /* ライトグリーン */
  --c-floor-bl: #91b1ea; /* 研究所の床 */
  --bg-secondary: #91b1ea; /* bg/secondary（= floor bl） */

  /* Color — アクセント */
  --c-yw: #ffee00;
  --c-or: #f2994a;
  --c-gn: #50b894;

  /* Color — 基本 */
  --c-bk: #000000;
  --c-wt: #ffffff;

  /* --------------------------------------------------------------
     Background
     -------------------------------------------------------------- */
  --bg-base: #ffffff;
  --bg-tertiary: #eaeaea;
  --c-bg-subtitle: #dcebff; /* 区切り線（br）・小見出しの面 */

  /* --------------------------------------------------------------
     Button
     -------------------------------------------------------------- */
  /* primary : 塗り */
  --btn-primary-bg: #1550b8;
  --btn-primary-bg-hover: #1761d8;
  --btn-primary-bg-selected: #1761d880;
  --btn-primary-bg-disable: #1550b84d;
  --btn-primary-text: #ffffff;
  --btn-primary-text-hover: #ffffff;
  --btn-primary-text-pressed: #ffffff80;
  --btn-primary-text-disable: #ffffff4d;
  --btn-primary-stroke: #1550b8;
  --btn-primary-stroke-hover: #1761d8;
  --btn-primary-stroke-selected: #1761d880;
  --btn-primary-stroke-disable: #1550b84d;

  /* secondary : 白地 */
  --btn-secondary-bg: #ffffff;
  --btn-secondary-bg-hover: #ffffff;
  --btn-secondary-bg-selected: #ffffff80;
  --btn-secondary-bg-disable: #ffffff4d;
  --btn-secondary-text: #1550b8;
  --btn-secondary-text-hover: #1761d8;
  --btn-secondary-text-pressed: #1761d880;
  --btn-secondary-text-disable: #1550b84d;
  --btn-secondary-stroke: #1550b8;
  --btn-secondary-stroke-hover: #1761d8;
  --btn-secondary-stroke-selected: #1761d880;
  --btn-secondary-stroke-disable: #1550b84d;

  /* footerlink : 黒地のフッター内リンク（2026/10 追加） */
  --btn-footerlink-text: #ffffff;
  --btn-footerlink-text-hover: #eaeaea;
  --btn-footerlink-text-selected: #eaeaea80;
  --btn-footerlink-text-disable: #eaeaea4d;

  /* textlink */
  --btn-textlink-text: #1550b8;
  --btn-textlink-text-hover: #1550b8;
  --btn-textlink-text-selected: #1550b880;
  --btn-textlink-text-disable: #1550b84d;

  /* --------------------------------------------------------------
     Tag（カテゴリー）
     -------------------------------------------------------------- */
  --tag-report: #3f8cff;  /* 研究レポート    = bl_01 */
  --tag-seibutsu: #f2994a; /* CT生物図鑑      = or    */
  --tag-manga: #50b894;   /* マンガでわかるCT = gn    */
  --tag-movie: #dd6e93;   /* 動画でわかるCT（変数未登録） */

  /* --------------------------------------------------------------
     見出しの装飾
     -------------------------------------------------------------- */
  --c-deco-start: #0336a7; /* 見出し左の三点 */
  --c-deco-end: #05c6fa;   /* 見出し右の三点 */
  --c-badge-new-bg: #ffec00;

  /* --------------------------------------------------------------
     UI color
     Figma 上で変数化されていなかった実測値。
     Foundations の text/* が確定したら差し替える。
     -------------------------------------------------------------- */
  --c-text-primary: #000000;   /* text/primary */
  --c-text-secondary: #ffffff; /* text/secondary（タグ等の白文字） */
  --c-text-tertiary: #1550b8;  /* text/tertiary = bl_04（2026/10 Foundations で確定） */
  --c-text-attention: #ffee00; /* text/attention = yw */
  --c-text-heading: #002965;   /* 見出し（CTA タイトルなど） */
  --c-text-menu: #2355a4;      /* 左メニューのラベル */
  --c-menu-icon: #7dbbf9;      /* header のハンバーガー */
  --c-text-muted: #667fa3;     /* 補助リンク */
  --c-text-body: #000000;

  /* --------------------------------------------------------------
     Spacing  ( 4 / 8 / 12 / 16 / 24 / 32 / 48 )
     -------------------------------------------------------------- */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;

  /* --------------------------------------------------------------
     Radius
     -------------------------------------------------------------- */
  --radius-8: 8px;
  --radius-16: 16px;
  --radius-24: 24px;
  --radius-pill: 20px; /* ボタン（h44）に使用 */
  --radius-textlink: 40px;

  /* --------------------------------------------------------------
     Typography
     ※ "JMC Gothic 4.0" は社内フォント。Web フォント化の可否は要確認。
        端末に無い場合は以下のフォールバックで表示される。
     -------------------------------------------------------------- */
  --font-base: "JMC Gothic 4.0", "JMCGothic",
    "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP",
    Meiryo, sans-serif;

  --fw-regular: 400;
  --fw-demibold: 600;

  /* sm (mobile) スケール — ctscanlab/sm/* */
  --fs-h1: 32px;   /* DemiBold / line-height 1.0 */
  --fs-hero: 24px; /* DemiBold / line-height Auto — Hero のキャッチ */
  --fs-h2: 28px;   /* DemiBold / line-height 1.0 — セクション見出し */
  --fs-h3: 20px;   /* DemiBold / line-height 64px */
  --lh-h3: 64px;
  --fs-h4: 16px;   /* DemiBold / line-height 1.0 */
  --fs-h5: 12px;   /* DemiBold / line-height 1.0 — タグ・バッジ */
  --fs-h6: 12px;   /* Regular  / line-height 1.0 — 日付 */
  --fs-p: 16px;    /* Regular  / line-height 32px */
  --fs-caption: 10px;

  --lh-heading: 1;
  --lh-body: 2;    /* 16px → 32px */
  --lh-caption: 1.6;

  /* --------------------------------------------------------------
     Layout
     -------------------------------------------------------------- */
  --w-content: 375px; /* 本文カラム（モバイル実寸 = breakpoints/sm） */
  --w-menubar: 80px;  /* デスクトップ左メニュー */
  --w-cta: 280px;     /* デスクトップ右 CTA（lg のみ） */
  --bp-md: 768px;     /* breakpoints/md */
  --bp-lg: 1280px;    /* breakpoints/lg */
}