@charset "UTF-8";
/* ============================================================
   HOTEL SANDERSON — Design Tokens
   全ページ共通の変数定義。色・タイポ・余白・モーションはここだけで管理する。
   個別ページで色やフォントを直書きしないこと。
============================================================ */

:root {

  /* --------------------------------------------------------
     Color — 赤城山と利根川の眺望から導いた配色
  -------------------------------------------------------- */
  --c-ink: #1B2A2E;
  /* 利根川の深瀬。本文・見出しの主色 */
  --c-ink-mid: #2E3D42;
  /* 中間の暗色。ダークセクション背景 */
  --c-ink-soft: #5A666A;
  /* 補助テキスト */
  --c-paper: #F7F4EE;
  /* 生成りの障子。基本背景 */
  --c-paper-deep: #EDE7DC;
  /* 一段沈めた背景 */
  --c-brass: #9A7B4F;
  /* 真鍮。アクセント（罫線・見出し添え字） */
  --c-brass-soft: #C4AC83;
  /* 淡い真鍮。暗色背景上のアクセント */
  --c-moss: #7C8B7E;
  /* 赤城の遠山。補助のくすみ緑 */
  --c-white: #FFFFFF;

  --c-line: rgba(27, 42, 46, 0.14);
  /* 罫線 */
  --c-line-light: rgba(255, 255, 255, 0.18);
  /* 暗色背景上の罫線 */

  /* --------------------------------------------------------
     Typography
     display : 見出し（和の骨格）
     body    : 本文
     latin   : 欧文の添え字・数字
  -------------------------------------------------------- */
  --f-display: "Shippori Mincho", "Zen Old Mincho", "Noto Serif JP", serif;
  /* 本文も明朝で統一。見出しより細い Noto Serif JP を主にして可読性を確保する */
  --f-body: "Noto Serif JP", "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --f-latin: "Cormorant Garamond", "EB Garamond", serif;

  /* 型スケール（clampで可変。rem固定をやめてレスポンシブ対応） */
  --fs-hero: clamp(2rem, 5.2vw, 3.75rem);
  --fs-h1: clamp(1.75rem, 4vw, 2.75rem);
  --fs-h2: clamp(1.5rem, 3.2vw, 2.25rem);
  --fs-h3: clamp(1.25rem, 2.4vw, 1.625rem);
  --fs-lead: clamp(0.975rem, 1.5vw, 1.125rem);
  --fs-body: clamp(0.9rem, 1.2vw, 1rem);
  --fs-small: clamp(0.8rem, 1vw, 0.875rem);
  --fs-caption: 0.75rem;

  --lh-tight: 1.4;
  --lh-normal: 1.8;
  --lh-loose: 2.1;

  --ls-wide: 0.18em;
  /* 欧文の添え字用 */
  --ls-normal: 0.04em;

  /* --------------------------------------------------------
     Layout
  -------------------------------------------------------- */
  --w-max: 1200px;
  /* 標準コンテンツ幅 */
  --w-narrow: 880px;
  /* 読み物幅（FAQ等） */
  --pad-x: clamp(1.25rem, 4vw, 2rem);
  /* 左右余白 */

  /* 縦の余白スケール（セクション間） */
  --sp-section: clamp(4rem, 10vw, 8rem);
  --sp-block: clamp(2.5rem, 6vw, 5rem);
  --sp-item: clamp(1.5rem, 3vw, 2.5rem);

  /* --------------------------------------------------------
     Motion
  -------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 0.3s;
  --dur-mid: 0.6s;
  --dur-slow: 1s;

  /* --------------------------------------------------------
     Header（ヘッダー高さ。個別ページのMV計算で使う）
  -------------------------------------------------------- */
  --h-header: 80px;
}

@media (max-width: 768px) {
  :root {
    --h-header: 64px;
  }
}