/*--------------------------------------------------------------------
	facilities.css
	客室・館内ページ（facilities.html）専用の追加スタイル
	共通CSS（reset/basis/structure/parts/dark-theme）で足りない
	最小限のページ固有スタイルのみをここに記述する。
--------------------------------------------------------------------*/

/* ---- 和室／洋室：見出し上の英語表記タグ（onsen.htmlのbathGenderTagと同じ意匠） ---- */
.roomTypeTag {
  display: inline-block;
  border: 1px solid currentColor;
  opacity: .9;
  padding: 5px 16px;
  font-size: 0.75rem;
  letter-spacing: .15em;
  margin-bottom: 14px;
}

/* ---- クリーム背景セクション（Garden Onsen等と同じ配色ルールを踏襲） ---- */
#wrapper01 #doNothing,
#wrapper01 #japaneseRoom,
#wrapper01 #lobby,
#wrapper01 #goat,
#wrapper01 #pingpong,
#wrapper01 #banquetHall {
  background-color: #E8E2D3 !important;
}

#doNothing h2.mincho, #doNothing h3,
#japaneseRoom h2.mincho, #japaneseRoom h3,
#lobby h2.mincho, #lobby h3,
#goat h2.mincho, #goat h3,
#pingpong h2.mincho, #pingpong h3,
#banquetHall h2.mincho, #banquetHall h3 {
  color: #2b2620 !important;
}

#doNothing .fcGray02,
#japaneseRoom .fcGray02,
#lobby .fcGray02,
#goat .fcGray02,
#pingpong .fcGray02,
#banquetHall .fcGray02 {
  color: #6b6355 !important;
}

#doNothing .fcBrown02, #doNothing .fcBrown02 a,
#japaneseRoom .fcBrown02, #japaneseRoom .fcBrown02 a,
#lobby .fcBrown02, #lobby .fcBrown02 a,
#goat .fcBrown02, #goat .fcBrown02 a,
#pingpong .fcBrown02, #pingpong .fcBrown02 a,
#banquetHall .fcBrown02, #banquetHall .fcBrown02 a {
  color: #8a6d2f !important;
}

#doNothing .kanjiWatermark,
#japaneseRoom .kanjiWatermark,
#lobby .kanjiWatermark,
#goat .kanjiWatermark,
#pingpong .kanjiWatermark,
#banquetHall .kanjiWatermark {
  color: rgba(60, 48, 24, 0.12);
}

#doNothing .buttonBlack01,
#japaneseRoom .buttonBlack01,
#lobby .buttonBlack01,
#goat .buttonBlack01,
#pingpong .buttonBlack01,
#banquetHall .buttonBlack01 {
  border: 1px solid rgba(0, 0, 0, 0.3);
}

/* ---- 客室で味わう「何もしない時間」／時間帯カード等：カード共通の縁取り ---- */
.featureList > * {
  padding: 28px 24px;
  border: 1px solid rgba(60, 48, 24, 0.18);
}

.featureListLabel {
  display: inline-block;
  color: #8a6d2f;
  font-size: 0.75rem;
  letter-spacing: .15em;
  margin-bottom: 10px;
}

/* ---- 館内のご案内：8施設の小さなティーザーカード ---- */
.joyTeaser > * {
  text-align: center;
}

.joyTeaser a {
  display: block;
}

.joyTeaser h3 {
  border-bottom: none;
  text-align: center;
}

.joyTeaser h3::after {
  content: none;
}

/* クリックでページ内の該当セクションへ飛ぶことがわかるよう、見出し横に矢印を添える */
.joyTeaserJump {
  display: inline-block;
  margin-left: 4px;
  color: #8a6d2f;
  font-size: 0.9em;
}

/* ---- テキスト＋画像の2カラム帯（和室・洋室・宴会場等で共通利用） ---- */
.splitBlock > .splitBlockImg > img {
  width: 100%;
  display: block;
  object-fit: cover;
}

@media screen and (min-width: 1251px) {
  .splitBlock > .splitBlockImg {
    height: 420px;
    overflow: hidden;
  }
  .splitBlock > .splitBlockImg > img {
    height: 100%;
  }
}

@media screen and (max-width: 1250px) {
  .splitBlock > .splitBlockImg {
    height: 260px;
    overflow: hidden;
    margin-bottom: 20px;
  }
  .splitBlock > .splitBlockImg > img {
    height: 100%;
  }
}

/* ---- 和室・洋室：写真を大きく見せるため、共通の.splitBlockImgより高さを拡大 ---- */
@media screen and (min-width: 1251px) {
  #japaneseRoom .splitBlockImg,
  #westernRoom .splitBlockImg {
    height: 560px;
  }
}

@media screen and (max-width: 1250px) {
  #japaneseRoom .splitBlockImg,
  #westernRoom .splitBlockImg {
    height: 340px;
  }
}

/* ---- 和室・洋室：写真をスクロール（スワイパー）形式で見せるバリエーション。
   .splitBlockImgの高さいっぱいに1枚ずつ表示し、矢印で前後の写真に切り替える ---- */
.experienceTimelineRoomGallery {
  height: 100%;
  margin-top: 0;
}

.experienceTimelineRoomGallery .experienceSwiper {
  height: 100%;
}

.experienceTimelineRoomGallery .experienceSubImgs {
  height: 100%;
}

.experienceTimelineRoomGallery .experienceSubItem {
  width: 100%;
  height: 100%;
}

.experienceTimelineRoomGallery .experienceSubImg {
  height: 100%;
  margin-bottom: 0;
}

.experienceTimelineRoomGallery .experienceTimelineNav {
  top: 50%;
}

.experienceTimelineRoomGallery .experienceTimelineNav--prev {
  left: 12px;
}

.experienceTimelineRoomGallery .experienceTimelineNav--next {
  right: 12px;
}

/* ---- 和室：スライド画像をビューポート左端近くまでブリードしつつ、
   左端に少し余白（LEFT_GAP）を残す。右のテキストは元の位置・幅のまま維持する。
   #japaneseRoom .splitBlockはflexCommon01でposition:relative済みなので、
   画像を position:absolute で行の高さいっぱいに敷き、テキストは
   margin-left:auto で行の右端に固定することで元の見た目を保つ。
   contents06（max-width:1200px、左右padding15px）を前提にした計算式のため、
   このブレイクポイント（1251px〜）でのみ適用する ---- */
@media screen and (min-width: 1251px) {
  #japaneseRoom .splitBlock {
    min-height: 560px;
  }
  #japaneseRoom .splitBlock > .splitBlockImg {
    position: absolute;
    top: 0;
    /* LEFT_GAP=55pxぶん、左端の開始位置を右にずらす */
    left: calc(585px - 50vw + 55px);
    /* 右端の位置は変えず、開始位置がずれた分だけ幅を55px縮める */
    width: calc(50vw + 100px - 55px) !important; /* .w58{width:58%!important}を上書きするため */
    height: 100%;
    margin: 0;
  }
  #japaneseRoom .splitBlock > .w38 {
    margin-left: auto;
  }
}

/* ---- 洋室：和室と左右反転のレイアウト（画像は右側の列のため、
   ビューポート右端近くまでブリードしつつ右端に少し余白を残す）。
   テキストは元々flexBetweenの最初の子要素で左端に固定されているため、
   画像を position:absolute にしても margin調整は不要 ---- */
@media screen and (min-width: 1251px) {
  #westernRoom .splitBlock {
    min-height: 560px;
  }
  #westernRoom .splitBlock > .splitBlockImg {
    position: absolute;
    top: 0;
    /* RIGHT_GAP=55pxぶん、右端の開始位置を左にずらす */
    right: calc(585px - 50vw + 55px);
    /* 左端の位置は変えず、開始位置がずれた分だけ幅を55px縮める */
    width: calc(50vw + 100px - 55px) !important; /* .w58{width:58%!important}を上書きするため */
    height: 100%;
    margin: 0;
  }
}

/* ---- カラオケバー：収容人数・料金の定義リスト（クリーム背景用に文字色を明示） ---- */
#karaoke dl dt {
  color: #2b2620;
}

/* ---- 表組みは明色セルのため文字色を明示（ダーク／クリームどちらの背景でも可読に） ---- */
#japaneseRoom .tableCommon01 th,
#japaneseRoom .tableCommon01 td,
#westernRoom .tableCommon01 th,
#westernRoom .tableCommon01 td {
  color: #2b2620;
}

/* ---- グランピング：テキスト下に添える2枚目の写真（室内カット） ---- */
.glampingSubImg {
  height: 264px;
  overflow: hidden;
}

.glampingSubImg img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* ---- ご案内（注意事項・館内マップ確認事項）box ---- */
.noticeBox {
  border: 1px solid rgba(202, 169, 68, 0.3);
  padding: 30px 30px 30px 45px;
}

@media screen and (max-width: 767px) {
  .noticeBox {
    padding: 20px 20px 20px 35px;
  }
}