@charset "UTF-8";
/* ==========================================================================
   JOMONÖW — CSS Custom Properties
   ファイル: variables.css
   役割: サイト全体で使うカラー / フォント / サイズ / モーション変数を一元管理
   更新: 2026-05-11 (v1.0)
   ========================================================================== */

:root {
  /* --------------------------------------------------------------------------
     ビューポート基準 / Viewport basis  (v52.8)
     ---
     問題: OP-3/Home の構図は 50vh 基準だったが、iOS の `vh` は
       **ラージビューポート(アドレスバーを隠した時の高さ)**を指すため、
       アドレスバー表示中の実表示領域(= svh)より大きい。
       結果、ロゴ/境界が視覚中心より (lvh - svh)/2 だけ下にずれる。
       実測(iPhone 実機): Chrome +59px / Safari +18.5px / Brave ≒0
       (Brave は vh が実表示領域とほぼ一致するため、ずれが出ていなかった)
     対策: 構図の基準を **svh(スモールビューポート=バー表示時の高さ)** に統一。
       svh は dvh と違い伸縮しないため、v44.7 で dvh→svh とした
       「バー格納/表示で演出が動く(発振)」対策とも両立する。
       .opening(height:100svh) や footer(100svh) とも基準が揃う。
     -------------------------------------------------------------------------- */
  --vh50: 50vh;    /* フォールバック(svh非対応環境・PCは vh=svh のため同値) */
  --vh50: 50svh;

  /* --------------------------------------------------------------------------
     カラー / Color Palette
     -------------------------------------------------------------------------- */

  /* Primary — JOMONÖW ブランドカラー */
  --color-wine: #5c0b2e;          /* ディープ・ワイン (テキスト・ロゴ等 主要色) */
  --color-wine-typo: #720b2e;     /* JOMONÖWタイポ専用 (jomonow.svg と同色 / 意図的にwineより少し赤み) */
  --color-yellow: #e1b41f;        /* マニフェスト背景・アクセント */
  --color-bg-light: #f7f6f6;      /* ホーム明色背景 */

  /* Functional aliases — 用途別に呼び出しやすく */
  --color-bg: var(--color-bg-light);
  --color-text: var(--color-wine);
  --color-accent: var(--color-yellow);
  --color-bg-dark: var(--color-wine);     /* OP-1, OP-2 背景 */
  --color-text-on-dark: var(--color-yellow);

  /* Reserved — 今後拡張用 */
  --color-white: #ffffff;
  --color-black: #000000;

  /* セクション関連 */
  --color-pattern-bg: #e7e6e6;    /* Aboutパターン等の背景色 (bg-lightより少し濃い) */

  /* --------------------------------------------------------------------------
     タイポグラフィ / Typography
     -------------------------------------------------------------------------- */

  /* Adobe Fonts (Project ID: nqd8dsn) */
  --font-shuei-anti: "dnp-shuei-anti-std", serif;           /* DNP 秀英アンチック Std */
  --font-tsuku-old: "fot-tsukuaoldmin-pr6n", serif;          /* FOT-筑紫Aオールド明朝 Pr6N */

  /* Google Fonts */
  --font-goudy: "Goudy Bookletter 1911", serif;

  /* セマンティック・エイリアス */
  --font-jp-primary: var(--font-shuei-anti);    /* 日本語メイン */
  --font-jp-secondary: var(--font-tsuku-old);   /* 日本語サブ・本文 */
  --font-display: var(--font-goudy);            /* 欧文ディスプレイ (見出し) */

  /* フォントサイズ — 1440 デザイン基準 */
  --fs-header: 56px;        /* セクション見出し (Goudy 56pt) */
  --fs-body: 16px;
  --fs-small: 13px;
  --fs-large: 24px;

  /* 行送り */
  --lh-tight: 1.2;
  --lh-normal: 1.6;
  --lh-loose: 1.8;

  /* 字間 */
  --ls-tight: -0.01em;
  --ls-normal: 0.02em;
  --ls-wide: 0.1em;
  --ls-display: -0.01em;    /* v69.2: CD指示。-0.03em から変更。Illustrator のカーニング0に寄せる */

  /* 行送り (line-height)
     1.75 = JOMONÖW サイト全体の基本値
     例: tsuku-bold 28pt → 49pt 行送り (28 × 1.75 = 49)
     コピー/本文系で原則これを使う。タイトル等の1行のみのものは個別調整。 */
  --lh-base: 1.75;
  --lh-body: 2;       /* v25.8: 本文系の行間 (章本文・TOC一覧リスト) */
  --font-caption: "zen-kaku-gothic-new", "Zen Kaku Gothic New", sans-serif;   /* v26.4: Adobe優先(palt完備)・Google予備 */
  --font-zen: "zen-kaku-gothic-new", "Zen Kaku Gothic New", sans-serif;        /* v27.2: 見出し(700)・箇条書き(500)共用。Adobe優先 */

  /* --------------------------------------------------------------------------
     レイアウト / Layout
     -------------------------------------------------------------------------- */

  --site-width: 1440px;       /* デザイン基準幅 */
  --site-max-width: 1920px;   /* 最大表示幅 */

  /* セクション余白 */
  --pad-section-y: 80px;
  --pad-section-x: 40px;

  /* セクション間の余白 (全セクション共通: 上下24pxずつ) */
  --section-gap: 24px;

  /* ヘッダーパート共通: 背景パターン サイズ (v15.1 動的化)
     ---
     仕様 (CD指示):
     W ≥ 1800 : H400px, SVG=viewport幅 (vw連動で拡大)
     W 1440-1800 : H400px, SVG=1800px固定 (中央、左右はみ出し)
     W 481-1440 : H 400→200, SVG 1800→900 リニア
     W ≤ 481 : H200px, SVG=900px固定
     ---
     clamp で W481-1440 のリニア補間を実装、@media で上下端を上書きする方式は取らず、
     CSS calc + min/max でレンジ全域を1式で処理する。 */
  --header-pattern-h: clamp(200px, calc(200px + (100vw - 481px) * 200 / 959), 400px);
  --header-pattern-svg-w: max(
    clamp(900px, calc(900px + (100vw - 481px) * 900 / 959), 1800px),
    100vw
  );

  /* Z-Index 管理 */
  --z-base: 1;
  --z-content: 10;
  --z-header: 100;
  --z-overlay: 500;
  --z-opening: 1000;

  /* --------------------------------------------------------------------------
     モーション / Motion
     -------------------------------------------------------------------------- */

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);          /* easeOutQuint 風 */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-emphasized: cubic-bezier(0.3, 0, 0, 1);

  --dur-fast: 0.3s;
  --dur-normal: 0.6s;
  --dur-slow: 1.2s;
  --dur-opening: 1.5s;
}