/* SITE 81 — HOST COMPACT ONEPAGE / design tokens
   配色（業種ファイル SITE 81 欄）:
     オフホワイト #F8F8F6 / ブラック #161616 / ブルー #4F6FAE / ライトグレー #D6D6D2
   角丸は 4px のみ（MASTER §8: 1サイト内で混在させない。67 は 8px / 74 は 12px）。
   小規模・短納期テンプレートのため、影より「罫線＋面の差」で構造を作る。影は1段階のみ使う。
   本文16px / 注記14px を最小値とする。

   コントラスト（実測・すべて 4.5:1 以上）
     #161616 on #F8F8F6 = 17.3:1   / #3D3D39 on #F8F8F6 = 10.6:1
     #55554F on #F8F8F6 = 7.0:1    / #3B558A on #FFFFFF = 7.4:1
     #4F6FAE on #F8F8F6 = 4.7:1（アイコン・罫線・見出し装飾のみ。本文には --c-accent-deep を使う）
     #FFFFFF on #4F6FAE = 5.0:1    / #1D7A4F on #FFFFFF = 5.3:1 / #B3261E on #FFFFFF = 6.5:1 */
:root {
  /* --- 面（明色） --- */
  --c-bg: #F8F8F6;
  --c-surface: #FFFFFF;
  --c-surface-2: #F1F1EE;
  --c-surface-3: #E7E9EC;
  --c-ink-panel: #161616;   /* 反転パネル（フッター） */

  /* --- 罫線 --- */
  --c-line: #D6D6D2;
  --c-line-strong: #B4B4AE;

  /* --- 文字 --- */
  --c-fg: #161616;
  --c-fg-2: #3D3D39;
  --c-muted: #55554F;
  --c-on-ink: #F8F8F6;
  --c-on-ink-2: #C6C6C0;

  /* --- アクセント（ブルー1色 + 状態色） --- */
  --c-accent: #4F6FAE;
  --c-accent-deep: #3B558A;
  --c-accent-ink: #FFFFFF;
  --c-accent-soft: #EDF1F8;
  --c-accent-line: #A9BBDB;

  --c-ok: #1D7A4F;      /* 営業中・出勤あり */
  --c-off: #8C8C86;     /* 休業・出勤なし */
  --c-alert: #B3261E;   /* エラー・注意 */
  --c-alert-soft: #FBEDEC;
  --c-focus: #3B558A;

  /* --- 角丸（4px 単一） --- */
  --radius: 4px;

  /* --- 影（1段階のみ。オーバーレイ専用） --- */
  --shadow-1: 0 12px 32px rgba(22, 22, 22, 0.18);

  /* --- 寸法 --- */
  --w-page: 1120px;
  --w-text: 720px;
  --h-header: 68px;   /* PC 64〜80px（MASTER §6） */
  --h-anchor: 48px;   /* トップのアンカーナビ（1ページ型の主導線） */
  --h-cta: 52px;      /* 固定CTA項目の最小高。上辺1pxボーダー込みの実高を 48〜56px に収める */
  --tap: 44px;

  /* --- 余白 --- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* --- 文字サイズ（最小14px） --- */
  --fs-note: 14px;
  --fs-body: 16px;
  --fs-lead: 17px;
  --fs-h4: 18px;
  --fs-h3: 20px;
  --fs-h2: clamp(23px, 2.2vw, 28px);
  --fs-h1: clamp(26px, 3.2vw, 36px);
  --fs-display: clamp(28px, 4vw, 42px);

  --lh-tight: 1.36;
  --lh-normal: 1.6;
  --lh-long: 1.8;

  /* --- 書体（SITE 81: 業種ファイル指定どおり Noto Sans JP のみ） ---
     欧文専用フォントを併用しないのが 67〜80 との書体上の差。
     数字はフォントを分けず、lining-nums / tabular-nums で揃える。 */
  --font-base: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  --font-num: var(--font-base);

  /* --- モーション（fade-up 1種のみ） --- */
  --dur: 320ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  --z-header: 60;
  --z-anchor: 55;
  --z-cta: 70;
  --z-drawer: 90;
  --z-modal: 100;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 1ms; }
}