@charset "UTF-8";
/* ============================================================
   ホテル・ボーネン｜デザインの定義（色・書体・寸法）
   ------------------------------------------------------------
   出典：デザイン仕様書_採寸_2026-08-14.md
   ここの数値だけを直せば、サイト全体の見た目が変わります。
   ※現行サイトのCSSは開いていません（描画結果の実測値のみ）
   ============================================================ */

:root {

  /* --- 色 -------------------------------------------------
     現行サイトは「白ベース＋金1色」。濃紺・黒背景は存在しない  */

  --hw-text:        #333333;  /* 本文・メニュー・パンくず           */
  --hw-text-en:     #303030;  /* 2段見出しの英語（本文より気持ち濃い）*/
  --hw-gold:        #BF8F45;  /* 金＝唯一のアクセント色             */
  --hw-white:       #FFFFFF;  /* 写真の上の文字・ボタン文字          */
  --hw-bg-footer:   #F2F2F2;  /* フッター背景                      */
  --hw-sub:         #666666;  /* 補助                             */
  --hw-sub-light:   #999999;  /* 補助（薄い）                      */
  --hw-line:        #333333;  /* 罫線（枠線・見出し下の線）          */


  /* --- 書体 ----------------------------------------------- */

  /* 日本語はすべて明朝 */
  --hw-font-ja: "Noto Serif JP", "Yu Mincho", YuMincho, "游明朝",
                "Hiragino Mincho ProN", "Hiragino Mincho Pro", serif;

  /* 英語の見出し（2段見出しの上段・ヒーローのコピー） */
  --hw-font-en: "Playfair Display SC", "Noto Serif JP", serif;


  /* --- 横幅（3種類しかない） ------------------------------- */

  --hw-w-wide:  1520px;  /* トップの主要ブロック・フッター        */
  --hw-w-main:  1200px;  /* 下層の標準コンテンツ・FAQ・お知らせ    */
  --hw-w-lead:   900px;  /* 見出し直下のリード文                 */


  /* --- 縦の余白 ------------------------------------------- */

  --hw-gap-130: 130px;   /* セクション上下（スマホでは70px）       */
  --hw-gap-140: 140px;   /* セクション上下（スマホでは70px）       */
  --hw-gap-vis: 200px;   /* 写真つきブロックの内側の上下           */

  /* 左右の余白（スマホ時のみ効く） */
  --hw-pad-side: 3%;


  /* --- ヘッダーの高さ ------------------------------------- */

  --hw-header-h: 101px;  /* スマホでは83px                      */

  /* スマホ下部の固定バーの高さ */
  --hw-spbar-h: 60px;
}


/* --- スマホ（767px以下）で変わる値 ------------------------- */

@media screen and (max-width: 767px) {
  :root {
    --hw-gap-130: 70px;
    --hw-gap-140: 70px;
    --hw-gap-vis: 70px;
    --hw-header-h: 83px;
  }
}