@charset "UTF-8";
/* ============================================================
   ホテル・ボーネン｜中身の器（客室カード・FAQ・トップの8ブロック）
   ------------------------------------------------------------
   出典：デザイン仕様書_採寸_2026-08-14.md
       ＋ 採寸追補_2026-08-16（描画結果の実測で補った分）
   ※現行サイトのCSSは開いていない
   ============================================================ */


/* ============================================================
   1. 下層ページの汎用ブロック
   ============================================================ */

/* 見出し直下のリード文（900px） */
.hw-lead { max-width: var(--hw-w-lead); margin: 0 auto 80px; }

/* 左右に分ける器（1200px・すき間60px） */
.hw-cols {
  max-width: var(--hw-w-main);
  margin: 0 auto 100px;
  display: flex;
  justify-content: space-between;
  gap: 60px;
}

/* 縦に積む器（1200px） */
.hw-stack { max-width: var(--hw-w-main); margin: 0 auto 140px; }


/* ============================================================
   2. 客室カード（560×532px）
   ------------------------------------------------------------
   写真 → 部屋名＋予約ボタン（下に線） → 英語の部屋名（大きい）
   ============================================================ */

.hw-rooms {
  max-width: var(--hw-w-main);   /* 1200px＝560×2＋すき間80px */
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 80px;
}

.hw-room { width: 560px; }

.hw-room__img {
  width: 560px;
  height: 387px;
  object-fit: cover;
  margin-bottom: 20px;
}

/* 写真が順ぐりに切り替わる枠（客室カードなど） */
.hw-fade { position: relative; overflow: hidden; }
.hw-fade img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.hw-fade img.is-on { opacity: 1; }

/* 部屋名の行（下に細い線） */
.hw-room__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 15px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--hw-text-en);
}

.hw-room__name {
  font-size: 1.5rem;        /* 15px */
  line-height: 2;           /* 30px */
  font-weight: 500;
  letter-spacing: 0.05em;   /* 0.75px */
  color: var(--hw-text);
}

/* 右側の「———— BOOK NOW」 */
.hw-room__act {
  display: flex;
  align-items: center;
  gap: 25px;
}
.hw-room__line {
  width: 182px;
  height: 1px;
  background: var(--hw-text-en);
}
/* 定員・広さなどが入った細長い画像（182×16px） */
.hw-room__spec { width: 182px; height: 16px; }
.hw-room__book {
  font-family: var(--hw-font-en);
  font-size: 1.3rem;        /* 13px */
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--hw-text-en);
  padding: 11px 0 11px 25px;
  text-align: center;
  transition: opacity .3s ease;
}
.hw-room__book:hover { opacity: .7; }

/* 英語の部屋名（大きい） */
.hw-room__en {
  display: block;
  font-family: var(--hw-font-en);
  font-size: 3.8rem;        /* 38px */
  line-height: 1.605;       /* 高さ61px */
  font-weight: 400;
  color: var(--hw-text-en);
}

@media screen and (max-width: 767px) {
  .hw-rooms { gap: 50px; }
  .hw-room  { width: 100%; }
  .hw-room__img { width: 100%; height: auto; aspect-ratio: 560 / 387; }
  .hw-room__en  { font-size: 2.6rem; }
  .hw-room__line{ width: 60px; }
  .hw-room__book{ padding-left: 15px; }
}


/* ============================================================
   3. アメニティ（13項目）
   ------------------------------------------------------------
   200×150pxの白い枠を5列。上にアイコン、下に文字。
   ⚠️ アイコン13点は現行サイトの画像を使わないので、自前で描き起こす
   ============================================================ */

/* 薄いグレーの帯（アメニティの背景など） */
.hw-greybox {
  max-width: var(--hw-w-main);   /* 1200px */
  margin: 0 auto 140px;
  padding: 100px 0;
  background: #F7F7F7;
}

.hw-amenity {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.hw-amenity__item {
  width: 200px;
  height: 150px;
  background: var(--hw-white);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hw-amenity__item p {
  padding-top: 70px;        /* この70pxがアイコンの場所 */
  font-size: 1.4rem;        /* 14px */
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.05em;   /* 0.7px */
  color: var(--hw-text);
  text-align: center;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 60px 60px;
}

/* アイコン13点（現行サイトのもの） */
.hw-amenity__item:nth-child(1) p { background-image: url(../img/_karioki/amenity01.svg); }
.hw-amenity__item:nth-child(2) p { background-image: url(../img/_karioki/amenity02.svg); }
.hw-amenity__item:nth-child(3) p { background-image: url(../img/_karioki/amenity03.svg); }
.hw-amenity__item:nth-child(4) p { background-image: url(../img/_karioki/amenity04.svg); }
.hw-amenity__item:nth-child(5) p { background-image: url(../img/_karioki/amenity05.svg); }
.hw-amenity__item:nth-child(6) p { background-image: url(../img/_karioki/amenity06.svg); }
.hw-amenity__item:nth-child(7) p { background-image: url(../img/_karioki/amenity07.svg); }
.hw-amenity__item:nth-child(8) p { background-image: url(../img/_karioki/amenity08.svg); }
.hw-amenity__item:nth-child(9) p { background-image: url(../img/_karioki/amenity09.svg); }
.hw-amenity__item:nth-child(10) p { background-image: url(../img/_karioki/amenity10.svg); }
.hw-amenity__item:nth-child(11) p { background-image: url(../img/_karioki/amenity11.svg); }
.hw-amenity__item:nth-child(12) p { background-image: url(../img/_karioki/amenity12.svg); }
.hw-amenity__item:nth-child(13) p { background-image: url(../img/_karioki/amenity13.svg); }

@media screen and (max-width: 767px) {
  .hw-amenity { gap: 10px; }
  .hw-amenity__item { width: calc(50% - 5px); height: 130px; }
}


/* ============================================================
   4. よくあるご質問
   ============================================================ */

.hw-faq { max-width: var(--hw-w-main); margin: 0 auto 140px; }

/* 最後の1問も50pxのまま（現行サイトがそうなっている） */
.hw-faq dl { margin-bottom: 50px; }

.hw-faq dt {
  font-size: 1.7rem;        /* 17px */
  line-height: 2;           /* 34px */
  font-weight: 500;
  letter-spacing: 0.05em;   /* 0.85px */
  color: var(--hw-text);
  padding-bottom: 15px;
  margin-bottom: 15px;
  border-bottom: 1px solid var(--hw-line);
}

.hw-faq dd {
  font-size: 1.5rem;        /* 15px */
  line-height: 2;           /* 30px */
  font-weight: 500;
  letter-spacing: 0.05em;   /* 0.75px */
  color: var(--hw-text);
}


/* ============================================================
   5. 汎用の説明リスト（距離表・料金・スペックに使い回す）
   ------------------------------------------------------------
   現行サイトに表組み（table）は1つも無く、この形が表の代わり
   ============================================================ */

.hw-dl dt {
  font-size: 1.5rem;        /* 15px */
  line-height: 2;           /* 30px */
  font-weight: 500;
  color: var(--hw-text);
  margin-bottom: 10px;
}
.hw-dl dd {
  font-size: 1.5rem;
  line-height: 2;
  font-weight: 500;
  color: var(--hw-text);
  padding-left: 20px;
  margin-bottom: 5px;
}
/* トップページで使うときは見出しが欧文になる */
.hw-dl--en dt { font-family: var(--hw-font-en); }


/* ============================================================
   6. トップページの器
   ============================================================ */

/* --- 6-1. 写真と文章を左右に分ける（01・08） --- */
.hw-split {
  max-width: var(--hw-w-wide);   /* 1520px */
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.hw-split--rev { flex-direction: row-reverse; }   /* 08は左右が逆 */

.hw-split__txt {
  width: 350px;
  margin: 120px 30px 0 160px;
}
.hw-split--rev .hw-split__txt { margin: 120px 160px 0 30px; }

.hw-split__fig { width: 780px; }
.hw-split__fig img { width: 780px; height: 900px; object-fit: cover; }

.hw-split-sec { padding: 0; }   /* 高さ900pxは中身で決まる */

/* --- 6-2. 背景写真の上に文章を置く（02・04・06） --- */
.hw-visual {
  position: relative;
  background-size: cover;
  background-position: 50% 0%;
  background-repeat: no-repeat;
  /* 写真が画面に貼りついたまま、文章だけが上に流れる（現行サイトと同じ） */
  background-attachment: fixed;
}
/* スマホは固定背景が正しく出ない端末があるので普通の貼り方にする */
@media screen and (max-width: 767px) {
  .hw-visual { background-attachment: scroll; }
}
.hw-visual__inner {
  max-width: var(--hw-w-wide);
  margin: 0 auto;
  padding: 200px 0;
  display: flex;
}
.hw-visual--right .hw-visual__inner { justify-content: flex-end; }
.hw-visual--left  .hw-visual__inner { justify-content: flex-start; }
.hw-visual__box { width: 480px; }
/* このブロックの見出しだけ、下に30px＋30pxのふところを取る */
.hw-visual__box .hw-ttl { padding-bottom: 30px; margin-bottom: 30px; }
/* 白ぬきの回では文字もボタンも白にする */
.hw-visual__box--white .hw-p  { color: var(--hw-white); }
.hw-visual__box--white .hw-btn { color: var(--hw-white); border-color: var(--hw-white); }

/* --- 6-3. 3枚並びのカード（03） --- */
.hw-cards3 {
  max-width: var(--hw-w-wide);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
.hw-card3 {
  position: relative;
  width: 470px;
  height: 470px;
  display: block;
  border: 1px solid var(--hw-white);
  background-size: cover;
  background-position: center;
  background-clip: padding-box;   /* 写真は白い枠の内側（468×468px）に収まる */
}

/* 見出しは中央そろえで下から70pxの位置に置く */
.hw-card3 > * {
  position: absolute;
  left: 50%;
  bottom: 70px;
  transform: translateX(-50%);
  width: 388px;
}

/* --- 6-4. 写真が自動で流れる帯（05） --- */
.hw-marquee { overflow: hidden; }
.hw-marquee ul {
  display: flex;
  width: max-content;
  /* 同じ10枚を2組並べて、1組分ずらし切ったら先頭に戻す＝つなぎ目が出ない */
  animation: hw-marquee 80s linear infinite;
}
@keyframes hw-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-5000px); }   /* 500px × 10枚 */
}
@media (prefers-reduced-motion: reduce) {
  .hw-marquee ul { animation: none; }
}
.hw-marquee li { flex: 0 0 500px; width: 500px; height: 500px; }
.hw-marquee img { width: 500px; height: 500px; object-fit: cover; }

/* --- 6-5. お知らせ（07） --- */
.hw-news { max-width: var(--hw-w-main); margin: 0 auto; }
.hw-news article {
  display: flex;
  align-items: flex-start;
  padding: 20px 40px 20px 50px;
  border-bottom: 1px solid var(--hw-sub-light);   /* #999999 */
}
.hw-news time {
  font-size: 1.4rem;        /* 14px */
  line-height: 1.8;         /* 25.2px */
  font-weight: 400;
  letter-spacing: 0.08em;   /* 1.12px */
  color: var(--hw-sub);     /* #666666 */
  margin-right: 100px;
  white-space: nowrap;
}
.hw-news h3 {
  font-size: 1.5rem;
  line-height: 1.8;
  font-weight: 500;
  color: var(--hw-text);
}

@media screen and (max-width: 767px) {
  .hw-split,
  .hw-split--rev { flex-direction: column; }
  .hw-split__txt,
  .hw-split--rev .hw-split__txt { width: auto; margin: 40px 3% 0; }
  .hw-split__fig,
  .hw-split__fig img { width: 100%; height: auto; }
  .hw-visual__inner { padding: 70px 3%; }
  .hw-visual__box { width: 100%; }
  .hw-cards3 { flex-direction: column; gap: 20px; padding: 0 3%; }
  .hw-card3 { width: 100%; height: 240px; }
  .hw-card3 > * { width: 88%; bottom: 40px; }
  .hw-marquee li,
  .hw-marquee img { flex-basis: 260px; width: 260px; height: 260px; }
  .hw-marquee ul { animation-name: hw-marquee-sp; }
  @keyframes hw-marquee-sp {
    from { transform: translateX(0); }
    to   { transform: translateX(-2600px); }   /* 260px × 10枚 */
  }
  .hw-news article { padding: 15px 0; flex-direction: column; }
  .hw-news time { margin: 0 0 5px; }
}


/* ============================================================
   7. 地図（ページ下部）
   ============================================================ */
.hw-map iframe {
  display: block;
  width: 100%;
  height: 450px;
  border: 0;
}