@charset "UTF-8";
/* ============================================================
   ホテル・ボーネン｜部品のCSS
   ------------------------------------------------------------
   出典：デザイン仕様書_採寸_2026-08-14.md（6章・8章）
   ※クラス名は現行サイトのものを使わず独自の名前にしている
     （見た目は同じ／「コードを写した」と言わせないため）
   ============================================================ */


/* ============================================================
   1. 2段見出し ── このサイトの背骨
   ------------------------------------------------------------
   「大きい欧文」＋「小さい和文（多くは金）」の2段組み。
   全ページこの形なので、1つの部品で全部まかなう。

   使い方：
   <h2 class="hw-ttl hw-ttl--a">
     <span class="hw-ttl__en">INTRODUCING WOHNEN</span>
     <span class="hw-ttl__ja">信州の四季を、木の温もりとともに堪能する</span>
   </h2>

   種類（現行サイトの top_ttl1〜4 に相当）：
     --a … 標準。和文が金               （例：INTRODUCING WOHNEN）
     --b … 和文が黒・字間広め           （例：ABOUT WOHNEN）
     --c … 和文が金・英語の下のあきが狭い（例：GUEST ROOMS）
     --d … 写真の上にのせる白ぬき        （例：写真ブロックの見出し）
   ============================================================ */

.hw-ttl {
  margin: 0;
  font-weight: 400;
}

/* 上段：英語 */
.hw-ttl__en {
  display: block;
  font-family: var(--hw-font-en);
  font-size: 4.6rem;          /* 46px */
  line-height: 1.2;           /* 55.2px */
  font-weight: 400;
  letter-spacing: 0.02em;     /* 0.92px */
  color: var(--hw-text-en);
  margin-bottom: 30px;
}

/* 下段：日本語 */
.hw-ttl__ja {
  display: block;
  font-family: var(--hw-font-ja);
  font-size: 1.4rem;          /* 14px */
  line-height: 1.2;           /* 16.8px */
  font-weight: 600;
  letter-spacing: 0.2em;      /* 2.8px */
  color: var(--hw-gold);
}

/* --b：日本語が黒・16px・字間4px */
.hw-ttl--b .hw-ttl__ja {
  font-size: 1.6rem;          /* 16px */
  line-height: 1.2;           /* 19.2px */
  letter-spacing: 0.25em;     /* 4px */
  color: var(--hw-text);
}

/* --c：英語の下のあきが20px・日本語は金の16px */
.hw-ttl--c .hw-ttl__en { margin-bottom: 20px; }
.hw-ttl--c .hw-ttl__ja {
  font-size: 1.6rem;          /* 16px */
  line-height: 1.2;           /* 19.2px */
  letter-spacing: 0.2em;      /* 3.2px */
  color: var(--hw-gold);
}

/* --d：写真の上にのせる白ぬき（英語が34pxと小さめ） */
.hw-ttl--d .hw-ttl__en {
  font-size: 3.4rem;          /* 34px */
  line-height: 1.2;           /* 40.8px */
  letter-spacing: 0.02em;     /* 0.68px */
  color: var(--hw-white);
  margin-bottom: 10px;
}
.hw-ttl--d .hw-ttl__ja {
  letter-spacing: 0.05em;     /* 0.7px */
  color: var(--hw-white);
}

/* 中央そろえ（下層ページの先頭の大見出しなど） */
.hw-ttl--center { text-align: center; }

/* 英語の下のあきを30pxにする（館内施設などの節見出し） */
.hw-ttl--gap30 .hw-ttl__en { margin-bottom: 30px; }

/* 白ぬきにする（暗い写真の上に置くとき） */
.hw-ttl--white .hw-ttl__en,
.hw-ttl--white .hw-ttl__ja { color: var(--hw-white); }

/* 英語の中の「&」だけ大きく見せる飾り（現行サイトの RESTAURANT & BAR） */
.hw-ttl__amp {
  font-family: var(--hw-font-en);
  font-size: 4.6rem;
  line-height: 1.2;
  font-weight: 400;
}

/* --- スマホ（767px以下） --- */
@media screen and (max-width: 767px) {
  .hw-ttl__en {
    font-size: 3.5rem;        /* 35px */
    line-height: 1.2;         /* 42px  */
    letter-spacing: 0.02em;   /* 0.7px */
    margin-bottom: 20px;
  }
  .hw-ttl--c .hw-ttl__en { margin-bottom: 20px; }

  .hw-ttl--b .hw-ttl__ja {
    font-size: 1.5rem;        /* 15px */
    letter-spacing: 0.05em;   /* 0.75px */
  }
  .hw-ttl--c .hw-ttl__ja {
    font-size: 1.5rem;        /* 15px */
    letter-spacing: 0.2em;    /* 3px */
  }
  .hw-ttl--d .hw-ttl__en {
    font-size: 3.0rem;        /* 30px */
    margin-bottom: 10px;
  }
  .hw-ttl--d .hw-ttl__ja {
    font-size: 1.2rem;        /* 12px */
    letter-spacing: 0.05em;   /* 0.6px */
  }
  .hw-ttl__amp { font-size: 3.5rem; }
}


/* ============================================================
   2. 下層ページの見出し
   ============================================================ */

/* ページの先頭に置く大見出し（中央そろえ・金） */
.hw-page-ttl {
  font-family: var(--hw-font-en);
  font-size: 1.6rem;          /* 16px */
  line-height: 1.2;           /* 19.2px */
  font-weight: 600;
  letter-spacing: 0.2em;      /* 3.2px */
  color: var(--hw-gold);
  text-align: center;
  margin-bottom: 40px;
}

/* 節の見出し（下に30pxのふところ） */
.hw-h2 {
  font-family: var(--hw-font-ja);
  font-size: 1.6rem;          /* 16px */
  line-height: 1.2;           /* 19.2px */
  font-weight: 600;
  letter-spacing: 0.2em;      /* 3.2px */
  color: var(--hw-gold);
  padding-bottom: 30px;
  margin-bottom: 30px;
}

/* 写真の上にのせるとき */
.hw-h2--white { color: var(--hw-white); }


/* ============================================================
   3. ボタン ── 2種類だけ
   ------------------------------------------------------------
   標準 … 白地に黒の枠線（Explore Rooms / Learn More など）
   強調 … 金地に白ぬき（BOOK・予約）
   角丸はゼロ。
   ============================================================ */

.hw-btn,
.hw-btn--fill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 200px;
  padding: 0 15px;
  font-family: var(--hw-font-ja);
  font-size: 1.3rem;          /* 13px */
  font-weight: 400;
  letter-spacing: 0.07em;     /* 0.91px */
  line-height: 1.4;
  text-align: center;
  border-radius: 0;
  transition: opacity .3s ease;
}

/* 標準 */
.hw-btn {
  height: 51px;
  color: var(--hw-text);
  background: transparent;
  border: 1px solid var(--hw-line);
}

/* 強調 */
.hw-btn--fill {
  height: 49px;
  color: var(--hw-white);
  background: var(--hw-gold);
  border: 0;
}

.hw-btn:hover,
.hw-btn--fill:hover { opacity: .7; }
/* ※マウスを載せたときの見え方は現行サイトで未採寸。
     公開前に実物で確認して合わせる（いまは薄くなるだけの安全な動き） */

/* ボタンの置き場所（上下のあき） */
.hw-btn-area      { margin-top: 45px; }
.hw-btn-area--fill{ margin-top: 30px; margin-bottom: 60px; }


/* ============================================================
   4. ヘッダーの予約ボタン（1つだけ大きい）
   ============================================================ */

.hw-btn-book {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 230px;
  height: 84px;
  font-family: var(--hw-font-ja);
  font-size: 1.4rem;          /* 14px */
  font-weight: 500;
  letter-spacing: 0.15em;     /* 2.1px */
  color: var(--hw-white);
  background: var(--hw-gold);
  border: 0;
  border-radius: 0;
  transition: opacity .3s ease;
}
.hw-btn-book:hover { opacity: .8; }