/* =============================================================
   28. /room：カード & MetaSlider レイアウト（PC/SP 共通）
   ============================================================= */

/* === コンテナ：Room cards grid（SP1列 / TB2列 / PC3列） === */
#room {
  display: grid !important;
  grid-template-columns: 1fr;  /* SP: 1列 */
  gap: 24px 24px;              /* 行×列の間隔 */
}

/* タブレット：2列 */
@media (min-width: 720px) {
  #room {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* PC：3列 */
@media (min-width: 1024px) {
  #room {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* === カード本体 === */
#room .room-block {
  margin: 0 !important;
  border: 1px solid #e5e5e5;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 10px;              /* ★ 四方に余白を付ける */
}

/* === 比率ボックス（4:3）＋ MetaSlider 絶対配置フィット === */
#room .room-media {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 8px;
  background: #f4f1ed;
  aspect-ratio: 4 / 3;
  margin: 0 0 12px;           /* ★ 下だけ少し空ける（左右はpadding任せ） */
}

/* MetaSlider を比率ボックスにピッタリ重ねる */
#room .room-media > .metaslider {
  position: absolute;
  inset: 0;       /* top/right/bottom/left:0 */
  width: 100%;
  height: 100%;
}

/* Flexslider の余白・枠をリセット（/room 内だけ） */
#room .metaslider,
#room .metaslider .flexslider {
  margin: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* スライダーラッパ */
#room .metaslider .flexslider {
  position: relative;
}

/* スライドリストの余白を殺す */
#room .metaslider .slides {
  margin: 0 !important;
  padding: 0;
}

/* 画像をフィット（高さは親に合わせる） */
#room .metaslider .slides img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* === ナビゲーション（矢印 & ドット） === */

/* 矢印：常に中央（下寄せ指定を打ち消し） */
#room .metaslider .flexslider .flex-direction-nav a {
  position: absolute;
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  line-height: 44px;
  z-index: 5;
  opacity: 0.95;
}

/* 左右位置 */
#room .metaslider .flexslider .flex-direction-nav .flex-prev {
  left: 10px;
}
#room .metaslider .flexslider .flex-direction-nav .flex-next {
  right: 10px;
}

/* アイコンフォントサイズ */
#room .metaslider .flexslider .flex-direction-nav a:before {
  font-size: 28px;
}

/* ドットナビの位置 */
#room .metaslider .flex-control-nav {
  bottom: 8px;
}

/* === タイトル === */
#room .room-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 8px;           /* ★ 上下だけ */
  color: #000;
}
#room .room-media + .room-title {
  margin-top: 8px;           /* 画像との間を少し空ける */
}

/* === スペックボックス === */
#room .room-spec {
  background: #f5f5f5;
  border-radius: 8px;
  padding: 10px;
  margin: 0;                 /* ★ 外側marginなし（カードpaddingで揃える） */
  line-height: 1.7;
  font-size: 16px;
  color: #333;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* 段落（空行→段落） */
#room .room-spec p {
  margin: 0 0 1em;
}
#room .room-spec p:last-child {
  margin-bottom: 0;
}

/* === アメニティ見出し & ボード === */
#room .section-title {
  font-weight: 700;
  margin: 28px 0 12px;
  padding: 0.4em 0.6em;
  background: #f0e9df;
  color: #5f3f28;
  border-radius: 8px;
}
#room .amenity-board {
  margin-top: 8px;
}

/* h1直下を詰める（空段落対策） */
.h1_title + #room {
  margin-top: 12px;
}

/* グリッドぶち抜き（設備・備品・アメニティは全幅） */
#room .section-title,
#room .amenity-board {
  grid-column: 1 / -1;
}

/* アメニティ見出しとリストの間を約10pxにする */
#room .chip-list {
  margin: 12px 0 8px;
}

/* row-gap:24px → 10px 相当に詰めるための微調整 */
#room .section-title {
  margin-bottom: 0 !important;
}
#room .amenity-board {
  margin-top: -14px !important; /* 24px(row-gap) − 10px = 14px */
}

/* =========================
   Amenity / Service Chips（スコープ版）
   - グローバルに漏らさない
========================= */

/* /room 配下だけ */
#room .chip-list{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:8px 0 0;
  padding:0;
  list-style:none;
}

/* チップのすぐ後ろに見出しが来る場合だけ余白 */
#room .chip-list + .section-title{
  margin-top:30px;
}

/* li自体をチップにする（/roomだけ） */
#room .chip-list li,
#room .chip-list .chip{
  display:inline-flex;
  align-items:center;
  gap:.35em;
  padding:.8em;
  border-radius:8px;
  border:1px solid #cfd4d9;
  background:#fff;
  font-size:.9rem;
  line-height:1.4;
  color:#333;
  white-space:normal;
  word-break:break-word;
}

/* .chip 単独でも使える保険（/roomだけ） */
#room .chip{
  display:inline-flex;
  align-items:center;
  gap:.35em;
  padding:.8em;
  border-radius:8px;
  border:1px solid #cfd4d9;
  background:#fff;
  font-size:.9rem;
  line-height:1.4;
  color:#333;
}


/* ========== /service でも使う場合（必要なものだけ残す） ==========
   ※ ここは “serviceページの外側ラッパ” に合わせて1つに絞るのが理想。
   どのクラスが付いてるか不明なので候補を並べてる。
   実際のDOMに合わせて 1つだけ残してOK。
*/

/* service の親ラッパ候補：.service / body.page-service / #service など */
.service .chip-list,
body.page-service .chip-list,
#service .chip-list{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:8px 0 0;
  padding:0;
  list-style:none;
}

.service .chip-list li,
.service .chip-list .chip,
body.page-service .chip-list li,
body.page-service .chip-list .chip,
#service .chip-list li,
#service .chip-list .chip{
  display:inline-flex;
  align-items:center;
  gap:.35em;
  padding:.8em;
  border-radius:8px;
  border:1px solid #cfd4d9;
  background:#fff;
  font-size:.9rem;
  line-height:1.4;
  color:#333;
  white-space:normal;
  word-break:break-word;
}

.service .chip,
body.page-service .chip,
#service .chip{
  display:inline-flex;
  align-items:center;
  gap:.35em;
  padding:.8em;
  border-radius:8px;
  border:1px solid #cfd4d9;
  background:#fff;
  font-size:.9rem;
  line-height:1.4;
  color:#333;
}