/* ==========================================================
   変数（色・フォント・幅）
   複数の部品で使う値だけを置く。一度しか使わない値は各部品の CSS に直接書く。
   値はデザイン（リファレンス・素材/トップ.svg）から取得。
   ブレイクポイント：SP 767px 以下（基本）／タブレット 1023px 以下（ヘッダーなど崩れる部品だけ）
   ========================================================== */
:root {
  /* 色 */
  --color-main: #7dbc7b;          /* メインの緑（見出し小・ラベル・フッター帯） */
  --color-main-dark: #579856;     /* 見出し英字（FEATURE など） */
  --color-button: #4d8a4b;        /* ボタン・WEB予約タブ */
  --color-main-light: #e8f1e3;    /* 薄い緑の背景 */
  --color-accent: #d7a075;        /* 英字の小見出し・署名 */
  --color-brown: #8e582c;         /* 胃カメラのボタン */
  --color-orange: #f7994c;        /* 事前予約制 */
  --color-text: #2d2b25;          /* 本文 */
  --color-text-green: #4d6d4c;    /* フッターの住所など */
  --color-heading: #475555;       /* カードの見出し */
  --color-line: #d1e4e0;          /* 罫線 */
  --color-bg: #fff;
  --color-bg-sub: #f3f7f4;        /* 薄いグレー緑の背景（TOPICS・フッター） */

  /* 和紙風テクスチャ（ピックアップ・院内写真・診療案内の背景） */
  --texture-green: url("../../img/common/common-texture-green.webp");

  /* フォント */
  --font-base: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;   /* 本文 */
  --font-maru: "Zen Maru Gothic", var(--font-base);                         /* 見出しほか全般 */
  --font-en: "Jost", var(--font-base);                                      /* 英字・数字 */
  --font-script: "segoe", "Segoe Script", cursive;                         /* グロナビの英字など */

  /* 幅・余白 */
  --container-width: 1200px;                     /* コンテンツの最大幅 */
  --gutter: 40px;                                /* 画面の左右の余白 */
  --section-space: clamp(64px, 7.5vw, 120px);    /* セクションの上下の余白 */
  --header-fix-height: 80px;
}

@media (max-width: 767px) {
  :root {
    --gutter: 20px;
  }
}