/* ==========================================================================
   Design Tokens

   2層構造にしている。
     ① プリミティブ … Figmaの注記フレームに書かれている公式の定義をそのまま写したもの。
                      デザイナーとの共通言語なので、名前も値も勝手に変えない。
     ② セマンティック … 「どこに使うか」で名付けたもの。①を組み合わせて作る。
                      PC/SPで値が変わる（同じPCサイズでも役割によってSP値が違うため）。

   CSSを書くときは原則②を使う。①を直接使うのは②を定義するときだけ。
   ========================================================================== */

:root {

  /* ======================================================================
     ① プリミティブ（Figma「Color」「Typography」より）
     ====================================================================== */

  /* --- 藍色 / Success・Info（実質のブランドカラー） --- */
  --ai-base:   #2d6d9c;
  --ai-dark:   #204765;
  --ai-bright: #4397d6;
  --ai-muted:  #6288a5;
  --ai-pale:   #85b7dc;

  /* --- 朱色 / Warning --- */
  --shu-base:   #ca4917;
  --shu-dark:   #481c17;
  --shu-bright: #c97656;
  --shu-muted:  #c48e79;
  --shu-pale:   #c8b4ad;

  /* --- 紫色 --- */
  --murasaki-base:   #7e4994;
  --murasaki-dark:   #502e5e;
  --murasaki-bright: #a072aa;
  --murasaki-muted:  #9881a1;
  --murasaki-pale:   #cbafcf;

  /* --- 紅色 / Error・Danger --- */
  --beni-base:   #b31d44;
  --beni-dark:   #320613;
  --beni-bright: #aa4962;
  --beni-muted:  #ac7381;
  --beni-pale:   #c79399;

  /* --- グレースケール --- */
  --gray-black: #000;
  --gray-ink:   #242424;
  --gray-dark:  #666;
  --gray-mid:   #999;
  --gray-light: #ddd;
  --gray-pale:  #efefef;
  --gray-white: #fff;

  /* --- 書体 --- */
  --font-sans:  "Gen Interface JP", system-ui, sans-serif;
  --font-serif: "Shippori Mincho B1", serif;

  /* --- 文字サイズ（本文系） --- */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 20px;

  /* --- 文字サイズ（見出し系） --- */
  --display-xs:  24px;
  --display-sm:  32px;
  --display-md:  40px;
  --display-lg:  48px;
  --display-xl:  64px;
  --display-2xl: 72px;
  --display-3xl: 80px;
  --display-4xl: 96px;

  /* --- 行送り --- */
  --leading-none: 1;
  --leading-sm:   1.25;
  --leading-md:   1.5;
  --leading-lg:   1.75;
  --leading-xl:   2;

  /* --- 太さ --- */
  --font-normal:   400;
  --font-semibold: 600;
  --font-bold:     700;

  /* ======================================================================
     ② セマンティック
     ====================================================================== */

  /* --- 色 --- */
  --c-text:          var(--gray-ink);
  --c-text-muted:    var(--gray-mid);
  --c-primary:       var(--ai-base);
  --c-primary-dark:  var(--ai-dark);
  --c-primary-light: var(--ai-muted);
  --c-accent:        var(--beni-base);
  --c-bg:            var(--gray-white);
  --c-bg-alt:        var(--gray-pale);
  --c-line:          var(--gray-light);
  /* フォーム用（Figma実測） */
  --c-error:         #b31d44; /* 必須の印・エラー */
  --c-placeholder:   #999999; /* 入力欄の例文・チェック枠 */
  --c-primary-soft:  #6288a5; /* 入力画面の「確認する」 */

  /* --- 書体（別名。既存のCSSがこの名前を参照している） --- */
  --ff-sans:  var(--font-sans);
  --ff-serif: var(--font-serif);

  --fw-light:    300;
  --fw-regular:  var(--font-normal);
  --fw-semibold: var(--font-semibold);
  --fw-bold:     var(--font-bold);

  /* --- 行送り --- */
  --lh-tight:   var(--leading-none);
  --lh-snug:    1.2;  /* 公式スケール外。見出しの詰め用 */
  --lh-normal:  var(--leading-md);
  --lh-relaxed: 1.8;  /* 公式スケール外。本文の実測値 */
  --lh-loose:   var(--leading-xl);

  /* --- 字間（Figmaの letterSpacing は % 指定） --- */
  --ls-tight:  -0.02em;
  --ls-normal: 0;
  --ls-wide:   0.05em;

  /* ----------------------------------------------------------------------
     文字サイズ（用途別）— SP（〜767px）の値。768px以上は下の @media で上書き。
     コメントの「text-sm → text-md」は ①のどの段階を使っているかを示す。
     ---------------------------------------------------------------------- */
  --fs-page-title:    var(--display-sm);  /* ページ最上部の英字大見出し display-sm → 4xl */
  --fs-page-label:    var(--text-xs);     /* その下の和文ラベル        text-xs → display-xs */
  --fs-hero:          28px;               /* ヒーローの明朝見出し ※28pxは公式スケール外 → display-2xl */
  --fs-section-title: var(--display-xs);  /* セクション見出し          display-xs → lg */
  --fs-section-label: var(--text-xs);     /* 英字ラベル NEWS 等        text-xs → text-md */
  --fs-heading-sm:    var(--text-xl);     /* 中見出し                  text-xl → display-sm */
  --fs-subhead:       var(--text-md);     /* 小見出し                  text-md → display-xs */
  --fs-body:          var(--text-sm);     /* 本文                      text-sm → text-md */
  --fs-small:         var(--text-xs);     /* 補足・日付                text-xs → text-sm */
  --fs-xs:            10px;               /* 最小 ※10pxは公式スケール外 → text-xs */
  --fs-nav:           var(--text-xs);     /* グローバルナビ・ボタン    text-xs → text-md */
  --fs-btn-sub:       var(--text-xs);     /* 大ボタン内の補足          text-xs → text-md */
  --fs-footer-nav:    var(--text-lg);     /* フッターのナビ            text-lg → display-sm */
  --fs-footer-mail:   var(--display-xs);  /* フッターのメール          display-xs → display-xl */
  --fs-hero-title:    var(--text-xl);     /* ヒーローの物件名          text-xl → display-lg */
  --fs-hero-count:    var(--text-xl);     /* ヒーローのスライド番号    text-xl → display-md */
  --fs-catch:         var(--text-lg);     /* セクションのキャッチコピー text-lg → display-md */
  --fs-lead:          var(--text-lg);     /* セクションのリード文      text-lg → display-xs */
  --fs-body-lg:       var(--text-sm);     /* やや大きい本文            text-sm → text-lg */

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

  /* Figmaのメモ「max-width 1600px」より。
     ページの中身はこの幅を超えず、それ以上の画面では中央に寄る。 */
  --page-max: 1600px;

  /* 同じくメモ「サイドマージン PC 40px/80px/160pxのパターン / SP 24px」。 */
  --gutter-sm: 24px;   /* PC 40  … ヘッダーなど */
  --gutter:    24px;   /* PC 80  … 標準 */
  --gutter-lg: 24px;   /* PC 160 … 狭いセクション */

  /* お知らせ系だけ左右161px。デザインの一覧は幅1118pxで、
     1440pxの中央に置くと左右161pxになる（1440 − 1118 = 322、÷2 = 161）。
     他セクション（about 160 / オーナー様 162）とは1px違うため、
     --gutter-lg とは分けて持つ。 */
  --gutter-news: 24px;

  --header-h:  80px;      /* ヘッダー高さ（PC 128） */
  --header-px: 24px;      /* ヘッダー左右の余白（PC 40） */
  --logo-w:    49.634579px; /* ロゴ幅（PC 100）。Figmaの実寸をそのまま使う */
  --nav-gap:   16px;      /* ナビ項目の間隔（PC 40） */

  --radius-pill: 999px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* 終わりの減速が目で追える、ゆるやかなイージング。
     --ease は前半でほぼ動き切るため、長めの動きだと止まって見える。 */
  --ease-out-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --dur:  0.4s;
}

/* ==========================================================================
   768px以上：SPの値からPC（1440px基準）の値へ線形に補間する。

   補間の書き方について
   「傾きと切片を手計算して calc(Apx + Bvw) と書く」方法は、係数を丸めた分だけ
   端の値がズレる（例: 1440pxで100pxのはずが99.8pxになる）。そこで下記に統一している。

     clamp(SP値, calc(SP値 + (PC値 - SP値) * (100vw - 768px) / 672), PC値)

   (100vw - 768px) / 672 は 768pxで0、1440pxで1になる。
   したがって両端では必ずSP値・PC値ちょうどになり、丸め誤差が入らない。
   ========================================================================== */
@media (min-width: 768px) {
  :root {
    --fs-page-title:    clamp(32px, calc(32px + 64 * (100vw - 768px) / 672), 96px);
    --fs-page-label:    clamp(12px, calc(12px + 12 * (100vw - 768px) / 672), 24px);
    --fs-hero:          clamp(28px, calc(28px + 44 * (100vw - 768px) / 672), 72px);
    --fs-section-title: clamp(24px, calc(24px + 24 * (100vw - 768px) / 672), 48px);
    --fs-section-label: clamp(12px, calc(12px +  4 * (100vw - 768px) / 672), 16px);
    --fs-heading-sm:    clamp(20px, calc(20px + 12 * (100vw - 768px) / 672), 32px);
    --fs-subhead:       clamp(16px, calc(16px +  8 * (100vw - 768px) / 672), 24px);
    --fs-body:          clamp(14px, calc(14px +  2 * (100vw - 768px) / 672), 16px);
    --fs-small:         clamp(12px, calc(12px +  2 * (100vw - 768px) / 672), 14px);
    --fs-xs:            clamp(10px, calc(10px +  2 * (100vw - 768px) / 672), 12px);
    --fs-nav:           clamp(12px, calc(12px +  4 * (100vw - 768px) / 672), 16px);
    --fs-btn-sub:       clamp(12px, calc(12px +  4 * (100vw - 768px) / 672), 16px);
    --fs-footer-nav:    clamp(18px, calc(18px + 14 * (100vw - 768px) / 672), 32px);
    --fs-footer-mail:   clamp(24px, calc(24px + 40 * (100vw - 768px) / 672), 64px);
    --fs-hero-title:    clamp(20px, calc(20px + 28 * (100vw - 768px) / 672), 48px);
    --fs-hero-count:    clamp(20px, calc(20px + 20 * (100vw - 768px) / 672), 40px);
    --fs-catch:         clamp(18px, calc(18px + 22 * (100vw - 768px) / 672), 40px);
    --fs-lead:          clamp(18px, calc(18px +  6 * (100vw - 768px) / 672), 24px);
    --fs-body-lg:       clamp(14px, calc(14px +  4 * (100vw - 768px) / 672), 18px);

    --gutter-sm: clamp(24px,   calc(24px   + 16   * (100vw - 768px) / 672), 40px);
    --gutter:    clamp(24px,   calc(24px   + 56   * (100vw - 768px) / 672), 80px);
    --gutter-lg: clamp(24px,   calc(24px   + 136  * (100vw - 768px) / 672), 160px);
    --gutter-news: clamp(24px, calc(24px   + 137  * (100vw - 768px) / 672), 161px);
    --header-h:  clamp(80px,   calc(80px   + 48   * (100vw - 768px) / 672), 128px);
    --header-px: clamp(24px,   calc(24px   + 16   * (100vw - 768px) / 672), 40px);
    --logo-w:    clamp(49.634579px, calc(49.634579px + 50.365421 * (100vw - 768px) / 672), 100px);
    --nav-gap:   clamp(16px,   calc(16px   + 24   * (100vw - 768px) / 672), 40px);
  }
}

/* 動きを減らす設定にしているユーザーにはアニメーションを無効化する */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur: 0.01ms;
  }
}