/* -----------------------------------------
   ALL ROOMS SUMMARY PAGE & GALLERY
   客室ä¸?覧・詳細ã�¾ã�¨ã‚?¼ˆã‚®ãƒ£ãƒ©ãƒªãƒ¼å®Œå?連動版??
----------------------------------------- */
.rooms-detail-list {
  margin-top: 5rem;
  display: flex;
  flex-direction: column;
  gap: 8rem; /* 部屋ã�¨éƒ¨å±‹ã?é–“ã?ã‚?�£ã�Ÿã‚Šã�¨ã�—ã�Ÿä½™ç™½ */
}

.room-detail-block {
  width: 100%;
  scroll-margin-top: 150px !important;
}

.room-detail-row {
  display: flex;
  align-items: center;
  gap: 5rem;
}

/* å¥?•°ç•ªç›®?ˆã�¾ã�Ÿã?reverseクラス?‰ã?å·¦å�³å��転ルール */
.room-detail-row.reverse {
  flex-direction: row-reverse;
}

/* =========================================
   ç”»åƒ�ギャラリーエリア?ˆç¸¦é•·ç”»åƒ�も全体表示??ƒŒæ™¯ãƒœã‚«ã‚·ã�§ä½™ç™½ã‚’消ã�™??
========================================= */
.room-detail-visual {
  flex: 1.2;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

/* メイン画åƒ�エリア??16:10ã�®ã‚µã‚¤ã‚ºã‚’完å?ã�«ç¶­æŒ�ã�™ã‚‹åœŸå�°?? */
.main-image-wrapper {
  width: 100% !important;
  aspect-ratio: 16 / 10 !important;
  overflow: hidden !important;
  border: 1px solid var(--border) !important;
  position: relative !important; /* å†??ã�®é‡�ã�ªã‚Šã‚’制御ã�™ã‚‹ã�Ÿã‚�ã�«å¿? ? */
  background: #000 !important;
}

/* メイン画�エリア??16:10�サイズを維��る土�?? */
.main-image-wrapper {
  width: 100% !important;
  aspect-ratio: 16 / 10 !important;
  overflow: hidden !important;
  /* 💡 解決?šæž ç·šã‚’ 'none' ã�«å¤‰æ›´ã�—ã�¦å®Œå?ã�«æ¶ˆåŽ»ã�—ã�¾ã�—ã�Ÿ */
  border: none !important; 
  background-color: #0a0a0a !important; 
}

/* 実際ã�«æ‰‹å‰�ã�«è¡¨ç¤ºã�•ã‚Œã‚‹ãƒ¡ã‚¤ãƒ³ç”»åƒ�ã?設定（見å?ã‚Œã�ªã�??体表示?? */
.gallery-main {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important; /* â˜?¸¦é•·ç”»åƒ�ã�§ã‚‚絶対ã�«è¦‹å?らã�›ã�šã?�上ã�‹ã‚‰ä¸‹ã�¾ã�§å…¨éƒ¨å†™ã�—ã�¾ã�? */
  object-position: center !important; 
  display: block !important;
  transition: opacity 0.2s ease !important;
  position: relative !important;
  z-index: 2 !important; /* ボカ��背景より手��表示 */
}

/* ホ�ー時�画��少�拡大�るラグジュアリー�エフェク� */
.room-detail-block:hover .main-image-wrapper img {
  transform: scale(1.03);
}

/* 真下ã�«ä¸¦ã�¶ã‚µãƒ ãƒ�イル?ˆæ¨ªä¸¦ã�³ãƒ»ç­‰é–“éš”ã�«ä¿®æ­£?? */
.thumbnail-slider {
  display: flex !important;
  gap: 10px !important; /* �?真�士�隙間�10px�強制固� */
  overflow-x: auto !important;
  white-space: nowrap !important;
  width: 100% !important;
  padding-bottom: 4px !important;
  justify-content: flex-start !important; /* 左詰��整� */
}

/* スクロールãƒ�ã??ˆé»’背景ã�«æº¶ã�‘è¾¼ã‚?極細ãƒ?‚¶ã‚¤ãƒ³?? */
.thumbnail-slider::-webkit-scrollbar {
  height: 2px;
}
.thumbnail-slider::-webkit-scrollbar-thumb {
  background: var(--border);
}

/* サムãƒ�イルå�˜ä½“ã?設定（サイズを強制固定ï¼? */
.thumb-img {
  width: 75px !important; 
  height: 75px !important;
  aspect-ratio: 1 / 1 !important; /* 正方形 */
  object-fit: cover !important;
  cursor: pointer !important;
  border: 1px solid transparent !important;
  opacity: 0.5 !important;
  transition: all 0.2s ease !important;
  flex-shrink: 0 !important; /* 横�潰れる�を絶対�防� */
}

.thumb-img:hover {
  opacity: 0.9 !important;
}

/* �択中�サム�イル */
.thumb-img.active {
  border-color: var(--gold) !important;
  opacity: 1 !important;
}

/* =========================================
   ãƒ?‚­ã‚¹ãƒˆã‚¨ãƒªã‚¢
========================================= */
.room-detail-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  text-align: left;
}

.room-detail-cat {
  font-family: 'Cinzel', serif;
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 0.8rem;
}

.room-detail-name {
  font-size: 2rem;
  color: var(--white);
  margin-bottom: 1.5rem;
  font-weight: 400;
}

.room-detail-desc {
  font-size: 0.88rem;
  color: var(--text);
  line-height: 2;
  margin-bottom: 2rem;
  text-align: justify;
}

/* 部屋���ミニスペック表 */
.room-detail-content .room-spec-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 2.5rem;
}

.room-detail-content .room-spec-table th,
.room-detail-content .room-spec-table td {
  padding: 0.8rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 0.85rem;
}

.room-detail-content .room-spec-table th {
  color: var(--gold);
  width: 25%;
  text-align: left;
  font-weight: 400;
}

.room-detail-content .room-spec-table td {
  color: var(--muted);
  font-weight: 300;
}

/* ボタンサイズを少�コンパクト�調整 */
.reserve-btn.btn-sm {
  padding: 0.7rem 2rem !important;
  font-size: 0.8rem !important;
  display: inline-block !important;
  text-decoration: none;
}

/* =========================================
   --- スマã?・タブレãƒ?ƒˆå¯¾å¿œï¼?1024px以下ã�§1列ã�«æœ?é�©åŒ–ï¼? ---
========================================= */
@media screen and (max-width: 1024px) {
  .rooms-detail-list {
    gap: 5rem;
  }
  
  .room-detail-row,
  .room-detail-row.reverse {
    flex-direction: column !important; /* 強制çš?�«ç¸¦ä¸¦ã�³ */
    gap: 2rem;
  }
  
  .room-detail-visual {
    width: 100%;
    flex: none;
  }
  
  .room-detail-content {
    width: 100%;
    flex: none;
  }
  
  .room-detail-name {
    font-size: 1.6rem;
    margin-bottom: 1rem;
  }
  
  .room-detail-content .room-spec-table th {
    width: 30%;
  }
}