/* ==========================================================================
   デザイントークン
   出所: 09-design/tone-extraction.md（reuse-pc-flyer.pdf の実測）
   すべての値は実測値の換算です。ここに「未定」「—」の値は置きません。
   ========================================================================== */

:root {
  /* --- 色（RGB は PDF から実測） --------------------------------------- */
  --c-navy-deep: #050d59;   /* FVの地・最下部の帯。ラスタ面積 5.73% */
  --c-navy: #153b72;        /* 見出し帯・アイコン。ベクタ塗り 1.60% */
  --c-tint: #c8d6e8;        /* セクションの地。最大面積 25.45% */
  --c-tint-weak: #ebf0f6;   /* カードの地（淡）6.51% */
  --c-card: #f8fafc;        /* カードの地 13.02% */
  --c-white: #ffffff;       /* 28.16% */
  --c-line: #accfe7;        /* 商品カードの枠線 */
  --c-red: #e60013;         /* アクセント1。4.00% */
  --c-yellow: #fff100;      /* アクセント2。1.00%。濃紺の地の上でのみ */
  --c-ink: #231916;         /* 本文。真っ黒ではない */
  --c-headline: #333333;    /* 見出し・ヘッダーの文字（黒に近いグレー。担当者の指示） */
  --c-line-brand: #06c755;  /* LINE のイメージカラー（担当者の指示） */
  --c-gray-weak: #f4f4f4;   /* 薄いグレーの地（担当者の指示。よくある質問の案内） */
  --c-ink-weak: #5b5350;    /* 注記（本文を薄めた段。チラシは注記も同色だが可読性のため1段） */

  /* --- 書体（明朝は使わない。チラシは全てゴシック） --------------------- */
  --f-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium",
            "Yu Gothic", Meiryo, system-ui, sans-serif;
  --f-num: "Arial Black", "Arial", "Helvetica Neue", var(--f-sans);

  --w-heavy: 900;   /* KozGoPr6N-Heavy */
  --w-bold: 700;    /* KozGoPr6N-Bold */
  --w-medium: 500;  /* KozGoPr6N-Medium */
  --w-regular: 400; /* ShinGoPr5-Regular */

  /* --- 文字サイズ（1120px 基準。倍率 1.881 で換算） --------------------- */
  --fs-hero: 78px;      /* 41.5pt */
  --fs-hero-sub: 56px;  /* 29.8pt */
  --fs-card-title: 30px;/* 16.3pt */
  --fs-section: 30px;   /* 15.3pt ＝ 28px。担当者の指示で +2px */
  --fs-lead: 24px;      /* 12.8pt */
  --fs-body: 18px;      /* 9.9pt ＝ 基準 */
  --fs-note: 13px;      /* 7.1pt */
  --fs-mini: 11px;      /* 6.0pt */

  /* --- 字送り・行送り（実測 0.974 / 1.40） ------------------------------ */
  --ls-tight: -0.026em;
  --lh-body: 1.4;
  --lh-head: 1.2;

  /* --- 余白（8px 格子。ブロック間 128.9pt → 112px） --------------------- */
  --s-1: 8px;
  --s-2: 16px;
  --s-3: 24px;
  --s-4: 32px;
  --s-5: 48px;
  --s-6: 64px;
  --s-block: 112px;
  --wrap: 1120px;
  --pad-x: 24px;
  --sp-cta-h: 64px;      /* スマートフォンの画面下に常に出すCTAの高さ（担当者の指示） */
  --thumb-news: 150px;      /* お知らせ一覧のサムネイル。正方形（担当者の指示） */
  --thumb-news-top: 100px;  /* トップの新着だけ小さくする（担当者の指示 2026-08-26） */

  /* --- 角丸（4.0 / 5.7 / 11.3 / 14.2pt） -------------------------------- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 20px;
  --r-xl: 26px;

  /* --- 線（0.71 / 4.25 / 5.67 / 17.01pt） ------------------------------- */
  --bw-hair: 1px;
  --bw-dot: 2px;    /* ハンバーガーメニューの区切り（点線）の太さ */
  --bw-head: 5px;   /* ヘッダー下の線（担当者の指示） */
  --bw-card: 3px;   /* 線のあるカードの枠。hair より 2px 太い（担当者の指示 2026-08-26） */
  --bw-rule: 8px;
  --bw-thick: 10px;
  --bw-bar: 32px;
}

/* 画面幅ごとの調整。PC 専用の値はこの中だけで使います。 */
@media (max-width: 1279px) {
  :root {
    --fs-hero: 60px;
    --fs-hero-sub: 42px;
    --s-block: 88px;
  }
}

@media (max-width: 767px) {
  :root {
    --fs-hero: 38px;
    --fs-hero-sub: 27px;
    --fs-card-title: 22px;
    --fs-section: 24px;
    --fs-lead: 18px;
    --fs-body: 16px;
    --s-block: 64px;
    --pad-x: 16px;
  }
}