@charset "UTF-8";
/* ==================================================================
 * tokens.css — Ordinary 2026 デザイントークン
 *
 * 一次資料:
 *   フォント : codex_handoff_静的24ページ.md §2-3 ／ CEO決定事項_20260901.md（正本）
 *   カラー   : codex_handoff_静的24ページ.md §2-4（実値解決済み）
 *
 * このファイルの責務は「フォント7種」と「カラートークン」だけ。
 * レイアウト定数（--o-container / --o-gutter）・ヘッダー定数（--o-header-*）・
 * リセット・html.lenis・palt・scroll-padding は base.css が持つ。ここには置かない。
 *
 * 読み込み順（inc/enqueue.php）:
 *   ordinary-fonts（Google Fonts） → ordinary-base（base.css）
 *   → ordinary-tokens（このファイル） → ordinary-style（style.css）
 *
 * ★変数名は STUDIO のもの（--s-font-xxxxxxxx / --s-color-xxxxxxxx）を維持している。
 *   ページ定義JSONからの移植を機械的にするため、絶対に改名しないこと。
 * ================================================================== */

:root {

  /* ---------------- フォント（CEO決定済み・2026-09-01） ----------------
   * すべて Google Fonts（無料・OFL）。有償フォントは使用しない。
   * --s-font-aca0103b は旧「A1ゴシック M JIS2004」の置換先。
   * リュウミン3種は STUDIO 側にトークン登録があるが使用箇所0件のため定義しない。
   *
   * ※ base.css も同名・同値で定義している（同値なので後勝ちしても影響なし）。
   *   TODO: 最終的にどちらか一方へ寄せる。寄せ先はこのファイル（tokens.css）を推奨。
   */
  --s-font-f88553ee: Inter, "Zen Kaku Gothic New", sans-serif;  /* 1,154箇所・基本 */
  /* 旧「A1ゴシック M JIS2004」（モリサワ・丸ゴシック）の置換先・212箇所。
   * 2026-09-01 CEO決定2で Noto Sans JP を採用 → 実装後のCEO確認で
   * 「文字が細い・字間が詰まって見える」との指摘。CSSの数値は本番と完全一致しており
   * 原因は書体差（A1ゴシックは丸ゴシックで画線が太く字面が大きい）と判明したため、
   * 同じ丸ゴシック系の Zen Maru Gothic に変更（CEO承認 2026-09-01・案A）。
   * ★ A1ゴシックは 800 を使う箇所が12件あるが Zen Maru Gothic に 800 は無い。
   *   900 で受けるため、下の --s-font-aca0103b-w800 を併用すること。 */
  --s-font-aca0103b: "Zen Maru Gothic", sans-serif;
  --s-font-aca0103b-w800: 900;                                 /* 800指定の受け皿（Zen Maru Gothicに800が無いため） */
  --s-font-dbab4593: "Noto Serif JP", serif;                    /* 37箇所 */
  --s-font-5297e0b2: "Lexend Deca", sans-serif;                 /* 24箇所 */
  --s-font-3d9f8c45: Inter, "Noto Sans JP", sans-serif;         /* 14箇所 */
  --s-font-2a993387: "Zen Kaku Gothic New", sans-serif;         /* 12箇所 */
  --s-font-46b244e0: Caveat, cursive;                           /* 9箇所・欧文手書き体（和文グリフなし） */

  /* ---------------- カラートークン（STUDIO実値・§2-4） ----------------
   * 単色。末尾の ff は不透明。CSS の 8桁HEX としてそのまま有効。
   */
  --s-color-2c90be8a: #fbf8f5ff;  /* Background_orange */
  --s-color-e89cf142: #082b34ff;  /* theme */
  --s-color-1ea1af29: #ffb1b1ff;  /* red */
  --s-color-cab15cca: #cbe9efff;  /* blue */
  --s-color-09994ca5: #caffc6ff;  /* green */
  --s-color-5598bc44: #e24d5cff;  /* Wedding */
  --s-color-629b18b6: #2d75b0ff;  /* New Color (1) */
  --s-color-96b774ed: #1d9ec1ff;  /* Border */

  /* Stories（3変数とも同名同値） */
  --s-color-9eaeaf39: #13ae67;
  --s-color-ee81bfd8: #13ae67;
  --s-color-7bb7321f: #13ae67;

  /* グラデーション。
   * background / background-image に使う。color には使えないので、
   * 文字に載せる場合は background-clip: text ＋ -webkit-text-fill-color: transparent。 */
  --s-color-3cac48cf: linear-gradient(90deg, #0893b7ff, #0828b7ff);      /* Title */
  --s-color-12a2a4e5: linear-gradient(90deg, #8aca0dff, #0eb526ff);      /* Paragraph */
  --s-color-d88ce62e: linear-gradient(90deg, #ffb11dff, #e4362cff);      /* オレンジ */
  --s-color-5993f4bc: linear-gradient(90deg, #fe9b47, #fe2d9f);          /* orange→pink */
  --s-color-c1b837d4: linear-gradient(90deg, #00c6fb 0%, #005bea 100%);  /* ReBlue */

  /* rainbow。STUDIO では b8818987 と a2a67304 の2変数が同名同値。
   * WP側では b8818987 を正とし、a2a67304 はエイリアスとして残す（§2-4）。 */
  --s-color-b8818987: linear-gradient(293deg, #7d478fff, #4f5a96ff 14%, #3a98c1ff 28%, #5aad6bff 41%, #e7dc61ff 55%, #de8a55ff 71%, #d54c5aff 86%, #cd4682ff);
  --s-color-a2a67304: var(--s-color-b8818987);

  /* ---------------- 直値で頻出する色（§2-4・トークンへ正規化） ----------------
   * 現行サイトは #ffffff / #FFFFFF / #ffffffff / #333 / #333333 と
   * 大小文字・桁数の表記が混在している。移植時は必ず以下へ寄せること。 */
  --o-c-navy:           #082b34;   /* ブランドネイビー */
  --o-c-navy-deep:      #14314a;   /* 濃紺 */
  --o-c-page-bg:        #f6f6f6;   /* ページ地 */
  --o-c-card-bg:        #f5f5f5;   /* カード地 */
  --o-c-deco-text:      #082b340d; /* 装飾文字 */
  --o-c-accordion-rule: #082b3433; /* アコーディオン罫 */
  --o-c-orange-bar:     #f0620f;   /* オレンジ棒 */
  --o-c-white:          #ffffff;
  --o-c-black:          #000000;
  --o-c-gray-333:       #333333;

  /* ------------------------------------------------------------------
   * STUDIO カラートークン全量（46件）
   * 2026-09-01 CC本体が本番サイト（/reblue/liteblue）の実CSSから document.styleSheets を
   * 全走査して抽出。**推測値はゼロ。すべて実測値。**
   * 旧TODO（--s-color-04ab6cae / --s-color-7aa853e1 の未解決）は本抽出で解消。
   * ------------------------------------------------------------------ */

  /* 単色 27件 */
  --s-color-04ab6cae: #369bdcff;
  --s-color-09994ca5: #caffc6ff;
  --s-color-0fb9de59: #ffe0ffff;
  --s-color-1ea1af29: #ffb1b1ff;
  --s-color-2c90be8a: #fbf8f5ff;
  --s-color-2fbd0fb0: #4db7e3ff;
  --s-color-3c823ec0: #13436c;
  --s-color-3c86b8a2: #13436c;
  --s-color-3cb0dcd1: #13436c;
  --s-color-52bc5276: #13436c;
  --s-color-53bb1a5b: #13436cff;
  --s-color-5598bc44: #e24d5cff;
  --s-color-629b18b6: #2d75b0ff;
  --s-color-79b3256c: #036eb8ff;
  --s-color-7aa853e1: #039552ff;
  --s-color-7bb7321f: #13ae67ff;
  --s-color-96b774ed: #1d9ec1ff;
  --s-color-9eaeaf39: #13ae67ff;
  --s-color-aa8ebb78: #036eb8ff;
  --s-color-b29328c8: #ffc68eff;
  --s-color-cab15cca: #cbe9efff;
  --s-color-d3a81055: #13436c;
  --s-color-d5a859b8: #e4362cff;
  --s-color-e89cf142: #082b34ff;
  --s-color-eba1e906: #ff2d60;
  --s-color-ee81bfd8: #13ae67ff;
  --s-color-ff9c9acb: #d8d6ffff;

  /* グラデーション 19件 */
  --s-color-04917d9e: linear-gradient(90deg, #21d9eeff, #3996f0ff);
  --s-color-12a2a4e5: linear-gradient(90deg, #8aca0dff, #0eb526ff);
  --s-color-1781a50f: linear-gradient(90deg, #32e306ff, #14c32eff);
  --s-color-3cac48cf: linear-gradient(90deg, #0893b7ff, #0828b7ff);
  --s-color-499d4f5b: linear-gradient(270deg, #15aadbff, #3ed3e8ff);
  --s-color-4b9f91ca: linear-gradient(90deg, #369bdcff, #15eefbff);
  --s-color-5993f4bc: linear-gradient(90deg, #fe9b47, #fe2d9f);
  --s-color-5dbe9421: linear-gradient(90deg, #32e306ff, #14c32eff);
  --s-color-7389c451: linear-gradient(90deg, #3399dfff, #72dfeeff);
  --s-color-8f9ad90d: linear-gradient(90deg, #00c6fbff 0%, #2ba6f4ff 100%);
  --s-color-979ee1bc: linear-gradient(#7d478fff, #4f5a96ff 14%, #3a98c1ff 28%, #5aad6bff 41%, #e7dc61ff 55%, #de8a55ff 71%, #d54c5aff 86%, #cd4682ff);
  --s-color-9bb0a5c3: linear-gradient(90deg, #369bdcff, #15eefbff);
  --s-color-a2a67304: linear-gradient(293deg, #7d478fff, #4f5a96ff 14%, #3a98c1ff 28%, #5aad6bff 41%, #e7dc61ff 55%, #de8a55ff 71%, #d54c5aff 86%, #cd4682ff);
  --s-color-aa8f933d: linear-gradient(90deg, #21d9eeff, #3996f0ff);
  --s-color-b8818987: linear-gradient(293deg, #7d478fff, #4f5a96ff 14%, #3a98c1ff 28%, #5aad6bff 41%, #e7dc61ff 55%, #de8a55ff 71%, #d54c5aff 86%, #cd4682ff);
  --s-color-c1b837d4: linear-gradient(90deg, #00c6fb 0%, #005bea 100%);
  --s-color-d88ce62e: linear-gradient(90deg, #ffb11dff, #e4362cff);
  --s-color-fb80e04b: linear-gradient(90deg, #369bdcff, #16d7e6ff);
  --s-color-ffa6e28a: linear-gradient(90deg, #ff3e71ff, #f272b8ff);

  /* ------------------------------------------------------------------
   * コントラスト用の派生色（2026-09-15・CEO決定「直してOK」）
   * ------------------------------------------------------------------
   * なぜ: 現行サイトのブランド色をそのまま移植した結果、青・赤・緑の
   *   「ボタン／帯／文字」で WCAG AA（通常 4.5:1 ／ 24px以上または
   *   18.66px以上かつ太字 3:1）を下回る箇所が全19ルートで342件あった
   *   （計測: tools/audit_page.py の lowContrast・375/1440 の全件列挙）。
   *
   * 方針（CEO指示）:
   *   1. 色相は変えない。黒方向へ一律に混ぜて明度だけ下げる
   *      （sRGB で各チャンネルを同率スケール ＝ 色相・彩度比はそのまま）。
   *   2. 上の既存トークンは値を書き換えない。ロゴ・ブランドマーク・
   *      グラデーションなど触ってはいけない箇所まで巻き込むため。
   *      ここに末尾 -d（darker）の派生を足し、**文字／面として使っている箇所だけ**
   *      を差し替える。
   *   3. 1色相につき1値。その色相の「このトークンを使う全用途」のうち
   *      最も条件の厳しい組み合わせで基準を満たす値にしてある。
   *      下のカッコ内が検算値（2026-09-15 実測）。
   *
   * ★ロゴ・キャラクター・画像・グラデーショントークンには使わない。
   * ★ページ内のインラインstyleで色が渡ってくるもの（トップ／/service の
   *   サービスカード、/forthecompany のカード、/characters のタグ、/voice の
   *   アクセント）は1件ずつ条件が違うので、ここではなく各ページCSSに
   *   固定値で置いてある。理由は front.css の該当注記を参照。
   */

  /* #369bdc（--s-color-04ab6cae）を 24% 暗く。/campain・/reblue/liteblue の
     見出し・英字ラベル・ボタン地色と、/reblue のヒーローCTA・専用ヘッダー地色。
     白地4.95 / #f5f5f5 4.54 / #fbf5ed 4.57 / #f3e9dc 4.12 /
     白文字を載せて4.95 / #fbf8f5 文字を載せて4.68（いずれも基準以上） */
  --o-c-brand-blue-d:   #2976a7;

  /* 同上を、filter:brightness(120%) が掛かる親の中で使うための前補正値。
     0x22*1.2=41 / 0x62*1.2=118 / 0x8b*1.2=167 → 描画結果が #2976a7 になる。
     使用箇所: parts.css .o-hdr-rb__bg（.o-header--reblue に brightness(120%)）。 */
  --o-c-brand-blue-d-x120: #22628b;

  /* #4db7e3（--s-color-2fbd0fb0）を 31% 暗く。/reblue の全幅帯3本の地色。
     白文字を載せて 4.54（元は 2.28）。帯の中に 13px の本文があるため 4.5 基準で決めている。 */
  --o-c-sky-d:          #357e9d;

  /* #ff2d60（--s-color-eba1e906）を 16% 暗く。/campain・/reblue/liteblue の
     英字ラベル・「先着◯名限定」・おすすめリボン地色。
     白地4.94 / #f5f5f5 4.53 / 白文字を載せて4.94 */
  --o-c-brand-red-d:    #d62651;

  /* #13ae67（--s-color-9eaeaf39 ほか Stories 緑）を 24% 暗く。
     使用箇所は /comingout の番号・見出し・罫線・LINEボタン地色。
     #fbf3e9 4.31 / #fbf8f5 4.48 / 白地4.74 /
     白文字を載せて4.74 / #f9fafb 文字を載せて4.54
     ※ トップ／/service の Lu-Lu Stories カードは 14px まで縮む断面があり
       もう一段深い #0d7646 が要るため、そちらは front.css / service.css 側に置いた。 */
  --o-c-brand-green-d:  #0e844e;

  /* #03bd0f（旧ヘッダーCTA・/reblue のLINEボタンと固定バーの緑）を 29% 暗く。
     #f9fafb 文字を載せて 4.55（元は 2.42）／白文字で 4.75。 */
  --o-c-line-green-d:   #02860b;

  /* #1d9ec1（--s-color-96b774ed / Border）を 19% 暗く。トップの
     「記事をもっと見る」ボタン地色。白文字で 4.56（元は 3.13）。 */
  --o-c-border-blue-d:  #17809c;

  /* 記事本文リンク #007cff（article.css 実測値）を 8% 暗く。白地 4.56（元は 3.94）。 */
  --o-c-link-blue-d:    #0072eb;
}