/* 欧文2書体は自己ホスト（実使用77文字にサブセット済み）。日本語はページ別に各HTMLへ埋め込む */
@font-face{font-family:'Crimson Pro';font-style:normal;font-weight:300 500;font-display:swap;src:url('/assets/fonts/crimson-sub.woff2') format('woff2')}
@font-face{font-family:'Josefin Sans';font-style:normal;font-weight:400 600;font-display:swap;src:url('/assets/fonts/josefin-sub.woff2') format('woff2')}
/* ==========================================================================
   theme.css — デザイン層（テーマ・トークン集約）／読み込み順の最後に置く
   --------------------------------------------------------------------------
   このファイルが「サイトの見た目」を決める唯一の場所。
   reset/site/top/page/home の各CSSは“構造（レイアウト・余白・骨組み）”だけを持ち、
   色・フォント・角丸・影・装飾は すべて下の変数（トークン）から受け取る。

   ■ 雰囲気を変えるとき
     原則 この1枚（:root の値）を書き換えるだけでサイト全体の雰囲気が変わる。
     ページHTML・他CSSは触らない。下部に「プリセット例（ポップ/レトロ/スタイリッシュ）」を
     コメントで同梱。使うときは :root の該当値を差し替える（or プリセットの中身を貼り替える）。

   ■ 現行テーマ = フォルメル（J-CAT風・編集的ミニマル）
     配色 = ネイビー × シャンパンゴールド（白地基調）。
     書体 = 見出し：Shippori Mincho B1（明朝）／本文：Noto Sans JP（ゴシック）／欧文：Crimson Pro。
     参考サイト j-cat.co.jp の「明朝見出し＋ゴシック本文・広い余白・細い罫線・
     角丸控えめ・平面（影ほぼ無し）」というタイポグラフィ構造を踏襲し、
     無彩色の代わりにネイビー（構造・濃色面）とシャンパンゴールド（アクセント）で構成。
   ========================================================================== */

/* フォント（J-CAT風）: 見出し=Shippori Mincho B1（明朝）／本文=Noto Sans JP（ゴシック）／欧文=Crimson Pro（細セリフ）。
   theme.css は最後に読み込まれるため、ここで @import すれば全ページに書体が行き渡る（HTMLは触らない）。 */
:root{

  /* ---- 基本パレット（ネイビー×シャンパンゴールド／白地基調） ------------- */
  --paper:#fdfcfa;     /* 背景（地）＝ごく淡いアイボリーホワイト */
  --paper-2:#f5f2ea;   /* 薄い面・セクション交互背景・カード地＝淡シャンパン */
  --sumi:#16233f;      /* 見出しの濃色＝ディープネイビー */
  --ink:#2a3450;       /* 本文＝ダークスレートネイビー */
  --mut:#63697c;       /* 補足・キャプション＝ミュートスレート（paper-2 面で 4.89:1／paper 面で 5.33:1） */
  --line:#e7e1d3;      /* 罫線（細）＝淡シャンパン */
  --line-d:#d3c39c;    /* 罫線（濃）＝シャンパンゴールド */

  /* ---- アクセント（シャンパンゴールド＝ブランド色） ---------------------- */
  /* サイトのブランド色は、原則ここ（--accent / --accent-d / --gold）だけ変える。 */
  --gold-l:#d9c48a;    /* 明るいシャンパン（暗色面＝ネイビー地の上のアクセント文字） */
  /* ★アクセント色は WCAG AA（4.5:1）を満たす深さで固定している。
     明るくするとボタンの白抜き文字と本文リンクが一斉に基準割れするため、
     変更するときは必ず次の3つを再計算すること。
       白 #ffffff 抜き（.btn）／ --paper #fdfcfa 上のリンク ／ --paper-2 #f5f2ea 上のリンク
     いずれも 4.5:1 以上。検算は .claude/skills/preflight-check/check.py の項目13。 */
  --gold-d:#836529;    /* 濃いシャンパンゴールド（主役色・白地でも判読できる深さ） */
  --accent:#836529;    /* 主役色。白抜き 5.44:1／paper 5.31:1／paper-2 4.86:1 */
  --accent-d:#6b511f;  /* アクセントの濃い側（hover）。白抜き 7.44:1 */
  --on-accent:#ffffff; /* アクセント面（ゴールド）の上に乗る文字色＝白 */
  --gold:#836529;      /* 副アクセント（.ey の線・装飾） */

  /* 旧トークン名の別名（HTML内 inline の var(--shu) 等を生かすため。値はアクセントに同期） */
  --shu:var(--accent);
  --shu-d:var(--accent-d);
  --moss:var(--accent);   /* フォーカスリング色（reset.css が参照） */

  /* ---- フォント（見出し=明朝／本文=ゴシック／欧文=細セリフ：J-CAT風） ---- */
  --fb:"Noto Sans JP",system-ui,sans-serif;  /* 本文＝ゴシック */
  --fh:"Shippori Mincho B1",serif;           /* 見出し＝明朝 */
  --fl:"Crimson Pro",serif;                  /* 欧文アクセント（.ey 等）＝細セリフ */
  --fz:"Shippori Mincho B1",serif;           /* 透かし・装飾用 */
  --fnav:"Josefin Sans",sans-serif;          /* グローバルナビ＝ロゴと同系統の幾何学的サンセリフ */
  --fw-body:400;   /* 本文ウェイト */
  --fw-head:600;   /* 見出しウェイト */
  --fw-bold:700;   /* 強調ウェイト */

  /* ---- 字間・行間（雰囲気の調整代） -------------------------------------- */
  --ls-head:.04em; /* 見出しの字間 */
  --ls-ey:.24em;   /* 英字ラベル(.ey)の字間（Crimson大文字で広めに） */
  --ls-body:.02em; /* 本文の字間 */
  --lh-body:1.85;  /* 本文の行間 */

  /* ---- かたち・質感（角丸・影・動き：編集的にシャープ＆平面） ------------ */
  --radius:2px;       /* 共通の角丸（ボタン/カード/入力）＝ほぼ直角 */
  --radius-sm:2px;    /* 小要素の角丸 */
  --shadow:none;      /* ボタン等は影なし（J-CAT風フラット） */
  --shadow-card:0 2px 22px rgba(var(--sumi-rgb),.05); /* カードのごく淡い影 */
  --ease:cubic-bezier(.2,.7,.2,1); /* トランジションのイージング */

  /* ---- ヘッダー（常時ネイビーの磨りガラス＝背景を問わず視認性を確保） ---- */
  --hd-bg:rgba(20,32,58,.66);           /* 通常時のヘッダー背景＝濃色ネイビー（半透明） */
  --hd-bg-on:rgba(var(--navy-rgb),.92);        /* スクロール後のヘッダー背景＝ほぼ不透明ネイビー */
  --hd-ink:rgba(var(--paper-rgb),.97);       /* ヘッダー主文字＝アイボリー（常に明色） */
  --hd-mut:rgba(var(--paper-rgb),.76);       /* ヘッダー補足文字（サブレーベル・受付時間） */
  --hd-line:rgba(var(--gold-l-rgb),.32);      /* ヘッダー下端の細いシャンパンゴールド罫線 */
  --hd-accent:var(--gold-l);            /* ヘッダー内ホバー・下線のアクセント＝明るいシャンパン */

  /* ---- フッター（暗色：ディープネイビー＋シャンパン） ------------------- */
  --ft-bg:#14213c;
  --ft-ink:rgba(240,238,232,.72);
  --ft-head:var(--gold-l);
  --ft-mut:rgba(240,238,232,.58);
  --ft-line:rgba(var(--gold-l-rgb),.18);
  --ft-link-hover:#ffffff;

  /* ---- CTA帯（暗色：ネイビー＋シャンパン） ----------------------------- */
  --cta-bg:#16243f;
  --cta-ink:#f4f1e8;
  --cta-mut:rgba(240,238,232,.75);
  --cta-line:rgba(var(--gold-l-rgb),.32);
  --cta-accent:var(--gold-l);

  /* ---- RGBトリプレット（rgba()で任意の透明度を作るための分解値） --------
     site/top/page/home 側で「このトークンの色を半透明にしたい」ときに使う。
     例: background:rgba(var(--sumi-rgb),.5) 。値は上のカラートークンと同期させること。 */
  --paper-rgb:253,252,250;   /* = --paper (#fdfcfa) */
  --sumi-rgb:22,35,63;       /* = --sumi (#16233f)。下層ページの写真スクリムで使用 */
  --navy-rgb:15,23,44;       /* = --hd-bg-on の地色。トップのヒーロー写真スクリムで使用（--sumi-rgb とは別トーンで意図的） */
  --gold-l-rgb:217,196,138;  /* = --gold-l (#d9c48a) */
  --cta-ink-rgb:244,241,232; /* = --cta-ink (#f4f1e8) */

  /* ---- LINE（公式ブランドカラー。サイト配色とは独立の固定値） ----------- */
  --line-green:#06C755;
  --line-ink:#0b1222;        /* LINE緑の上に乗せる文字色。白抜きは 2.26:1 でAA未達のため濃色を使う（8.28:1） */
  --line-green-d:#05a948;
  --line-green-rgb:6,199,85;
}

/* ==========================================================================
   雰囲気プリセット例（コピーして :root の値を差し替えて使う）
   ※ いずれも「色・フォント・角丸・影」を変えるだけ。HTML/他CSSは触らない。
   下のブロックの中身を上の :root にマージするか、該当変数だけ上書きする。
   ========================================================================== */

/* ---- 中立クリーン（旧既定：無彩色・サンセリフ・角丸ゼロ。別サイト複製時の素に戻す用） ----
:root{
  --paper:#ffffff; --paper-2:#f6f6f7; --sumi:#16161a; --ink:#26262b; --mut:#71717a;
  --line:#e6e6e9; --line-d:#d6d6db;
  --accent:#1b1b1f; --accent-d:#000000; --on-accent:#ffffff; --gold:#71717a;
  --fb:system-ui,-apple-system,"Segoe UI","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  --fh:var(--fb); --fl:var(--fb); --fz:var(--fb); --fw-head:600;
  --ls-head:.01em; --ls-ey:.12em; --ls-body:0;
  --radius:0px; --radius-sm:0px; --shadow:none; --shadow-card:none;
  --hd-bg-on:rgba(255,255,255,.92);
  --ft-bg:var(--paper-2); --ft-ink:var(--ink); --ft-head:var(--sumi); --ft-link-hover:var(--accent);
  --cta-bg:var(--paper-2); --cta-ink:var(--sumi); --cta-mut:var(--mut); --cta-line:var(--line-d); --cta-accent:var(--accent);
}
（書体を素に戻すときは <head> の @import を外し、上の --f* を有効化する）
*/

/* ---- POP（ポップ：明るい原色・丸み・軽い影・親しみ） ----------------------
:root{
  --paper:#fffdf7; --paper-2:#fff4e0; --sumi:#1f2937; --ink:#33373f; --mut:#7b8294;
  --line:#ffe2b8; --line-d:#ffcf8a;
  --accent:#ff5a5f; --accent-d:#e23d52; --on-accent:#ffffff; --gold:#ffb400;
  --fh:var(--fb); --fw-head:800; --fw-bold:800;
  --radius:16px; --radius-sm:10px;
  --shadow:0 6px 0 rgba(31,41,55,.12); --shadow-card:0 10px 24px rgba(255,90,95,.18);
}
*/

/* ---- RETRO（レトロ：くすみ暖色・セリフ見出し・太罫・角丸控えめ） ----------
@import url('https://fonts.googleapis.com/css2?family=Zen+Old+Mincho:wght@500;700&display=swap');
:root{
  --paper:#f7f1e3; --paper-2:#efe6d2; --sumi:#3a2b1b; --ink:#4a3a28; --mut:#8a7757;
  --line:#d9c9a8; --line-d:#c4ad84;
  --accent:#b4532a; --accent-d:#8f3d1c; --on-accent:#f7f1e3; --gold:#a8862f;
  --fh:"Zen Old Mincho",serif; --fl:"Zen Old Mincho",serif;
  --ls-head:.06em; --radius:2px; --shadow-card:0 2px 0 var(--line-d);
}
*/

/* ---- STYLISH（スタイリッシュ：暗色基調・余白広め・細字・無彩アクセント） --
:root{
  --paper:#0e0e10; --paper-2:#161619; --sumi:#fafafa; --ink:#e4e4e7; --mut:#9a9aa3;
  --line:#2a2a30; --line-d:#3a3a42;
  --accent:#fafafa; --accent-d:#d4d4d8; --on-accent:#0e0e10; --gold:#9a9aa3;
  --fw-head:500; --fw-bold:600; --ls-head:.04em; --ls-ey:.22em;
  --radius:0px; --shadow-card:none;
  --hd-bg-on:rgba(14,14,16,.85);
  --ft-bg:#0a0a0b; --ft-ink:#9a9aa3; --ft-head:#fafafa; --ft-line:#2a2a30;
  --cta-bg:#161619; --cta-ink:#fafafa; --cta-mut:#9a9aa3; --cta-line:#3a3a42;
}
*/
