/* ============================================================
   C16 — design tokens
   設計構成書 §3 準拠。ここに無い値をCSSに直書きしない。
   ============================================================ */

:root{
  /* ---- 色（§3-1） ---------------------------------------- */
  --base:    #F5F5F6;              /* ページ地 38% */
  --surface: #FFFFFF;              /* 浮く要素専用 24% */
  --navy:    #10263F;              /* ブランド軸色 14% */
  --ink:     #2F3A45;              /* 本文（純黒は使わない） */
  --ink2:    #5A6672;              /* ラベル */
  --tint:    rgba(16,38,63,.05);   /* 帯ティント 5% */
  --line:    rgba(16,38,63,.14);   /* ヘアライン（罫はこの1種のみ） */
  --line-strong: rgba(16,38,63,.20);
  --accent:  #B54A2E;              /* 辰砂。使用は4箇所のみ */

  /* 濃紺面の上 */
  --on-navy:      #E8ECF1;
  --on-navy-line: rgba(255,255,255,.20);
  --on-navy-mute: rgba(255,255,255,.55);

  /* ---- 書体（§3-2） --------------------------------------
     和文は参考3サイトの実測に合わせてシステムフォントで組む。
     M&A総研・SHIFT = 游明朝 / Speee = ヒラギノ角ゴ・游ゴシック。
     Webフォントの明朝（Shippori Mincho 等）は使わない。 */
  --mincho: "游明朝", "Yu Mincho", YuMincho, "游明朝体", "Hiragino Mincho ProN", "ヒラギノ明朝 ProN", serif;
  --gothic: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "游ゴシック", "Yu Gothic", YuGothic, "Meiryo", sans-serif;
  --en:     "Archivo", sans-serif;
  --num:    "Fraunces", "游明朝", "Yu Mincho", serif;

  /* ---- 級数スケール（§3-3 modular 1.22 / 10段のみ） ------- */
  --fs-12: 12px;
  --fs-14: 14px;
  --fs-17: 17px;   /* 本文 */
  --fs-21: 21px;
  --fs-26: 26px;
  --fs-33: 33px;
  --fs-40: 40px;
  --fs-48: 48px;
  --fs-64: 64px;
  --fs-96: 96px;

  /* ---- 余白リズム（§3-4） -------------------------------- */
  --pad-top:    96px;
  --pad-bottom: 128px;
  --gap-head:   48px;   /* セクションヘッダー→本体 */

  /* ---- コンテナ（§3-5） ---------------------------------- */
  --container: 1240px;
  --measure:   720px;   /* 本文単段の最大幅 = 1行34字 */
  --header-h:  84px;
  --edge:      24px;    /* 画面端の最小余白 */

  /* ---- モーション（§5-5） -------------------------------- */
  --ease-print: cubic-bezier(.22,1,.36,1);
  --ease-out:   cubic-bezier(.33,1,.68,1);
  --dur-cell:   .45s;
  --dur-line:   .8s;
  --dur-hover:  .3s;
  --stagger:    40ms;

  /* ---- グレイン（全ベタ面に敷く / §3-1） ------------------
     feTurbulence の data-URI。濃度は要素側の opacity で調整。 */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* グレイン層：疑似要素で敷く共通クラス */
.grain{ position:relative; }
.grain::after{
  content:"";
  position:absolute; inset:0;
  background-image:var(--grain);
  opacity:.025;                 /* 白・グレー・ネイビー面 */
  pointer-events:none;
  mix-blend-mode:multiply;
  z-index:0;
}
.grain--tint::after{ opacity:.04; }   /* ティント帯 */
.grain--navy::after{ mix-blend-mode:overlay; opacity:.035; }
.grain > *{ position:relative; z-index:1; }