@charset "utf-8";
/* CSS Document */
/* 共通設定：aspect-ratioで高さを自動計算 */
.room-section {
  width: 100%;
  height: auto; /* 高さは比率に任せる */
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  position: relative;
}
/* 各セクションの縦横比と背景 (aspect-ratio: 幅 / 高さ) */
.room1 {
  aspect-ratio: 1920 / 702;
  background-image: url('../img/room/room_r1_c1.png');
}
.room2 {
  aspect-ratio: 1920 / 646;
  background-image: url('../img/room/room_r2_c1.png');
}
.room3 {
  aspect-ratio: 1920 / 96;
  background-image: url('../img/room/room_r3_c1.png');
}
.room4 {
  aspect-ratio: 1920 / 134;
  background-image: url('../img/room/room_r4_c1.png');
}
.room5 {
  aspect-ratio: 1920 / 693;
  background-image: url('../img/room/room_r5_c1.png');
}
.room6 {
  aspect-ratio: 1920 / 627;
  background-image: url('../img/room/room_r6_c1.png');
}
.room7 {
  aspect-ratio: 1920 / 695;
  background-image: url('../img/room/room_r7_c1.png');
}
.room8 {
  aspect-ratio: 1920 / 655;
  background-image: url('../img/room/room_r8_c1.png');
}
.room9 {
  aspect-ratio: 1920 / 693;
  background-image: url('../img/room/room_r9_c1.png');
}
.room10 {
  aspect-ratio: 1920 / 567;
  background-image: url('../img/room/room_r10_c1.png');
}
.room11 {
  aspect-ratio: 1920 / 1648;
  background-image: url('../img/room/room_r11_c1.png');
}
.room12 {
  aspect-ratio: 1920 / 434;
  background-image: url('../img/room/room_r12_c1.png');
}
.room-nav ul {
  display: flex;
  list-style: none;
  width: 51.5%;
  margin: 0 auto;
  padding: 0.4vw 0 0 0;
  justify-content: space-between;
}
.room-nav li {
  margin: 0;
  padding: 0;
}
/*.sariake-booking {
  position: fixed;
  top: 30px;
  right: 30px;
}*/
.gallery-container img {
  width: 100%;
}
.gallery-container {
  display: flex;
  width: 62.5%;
  margin: auto;
  justify-content: space-between;
  align-items: stretch; /* これで左右の高さを揃える */
}
/* メイン画像エリア */
.gallery-main {
  width: 80.8%; /* 100% - 17.3% - 隙間(約2.9%) */
  position: relative;
  aspect-ratio: 966 / 690;
  overflow: hidden;
  /* margin-bottom: 10px; は横並びなら不要なので削除 */
}
/* サムネイルエリア */
.gallery-thumbs {
  display: flex;
  flex-direction: column;
  width: 17.3%;
  /* aspect-ratioは削除：メイン画像(gallery-main)の高さに自動で合わせます */
  justify-content: space-between;
}
.gallery-thumbs label {
  display: block;
  width: 100%;
  /* 4枚の場合、高さを24%程度に指定することで space-between が効くようになります */
  height: 22.3%;
  cursor: pointer;
  border: 2px solid transparent;
  box-sizing: border-box; /* 枠線を含めたサイズ計算 */
  transition: border-color 0.2s;
  border-radius: 22px;
    aspect-ratio: 205 / 153;

}
.gallery-thumbs label img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 比率が違う画像が来ても隙間なく埋める */
  display: block;
  border-radius: 20px;
}
/* ラジオボタンは隠す */
.gallery-container input[type="radio"] {
  display: none;
}
/* メイン画像の表示切り替え */
.gallery-main img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.3s ease;
}
/*シングルルーム用*/
/* --- 切り替えのロジック --- */
/* 1番目がチェックされたら1番目の画像を表示、他も同様 */
#sg1-1:checked ~ .gallery-main .img1, #sg1-2:checked ~ .gallery-main .img2, #sg1-3:checked ~ .gallery-main .img3, #sg1-4:checked ~ .gallery-main .img4 {
  opacity: 1;
  z-index: 1;
}
/* 選択中のサムネイルに枠線を出す（任意） */
#sg1-1:checked ~ .gallery-thumbs label:nth-child(1), #sg1-2:checked ~ .gallery-thumbs label:nth-child(2), #sg1-3:checked ~ .gallery-thumbs label:nth-child(3), #sg1-4:checked ~ .gallery-thumbs label:nth-child(4) {
  border-color: #67b012; /* 金色などアクセントカラー */
  border-radius: 22px;
}
/*ツインルーム用*/
/* --- 切り替えのロジック（sgとtwの両方に対応） --- */
/* メイン画像の表示切り替え */
#sg1-1:checked ~ .gallery-main .img1, #tw1-1:checked ~ .gallery-main .img1, #sg1-2:checked ~ .gallery-main .img2, #tw1-2:checked ~ .gallery-main .img2, #sg1-3:checked ~ .gallery-main .img3, #tw1-3:checked ~ .gallery-main .img3, #sg1-4:checked ~ .gallery-main .img4, #tw1-4:checked ~ .gallery-main .img4 {
  opacity: 1;
  z-index: 1;
}
/* 選択中のサムネイル枠線（任意） */
#sg1-1:checked ~ .gallery-thumbs label:nth-child(1), #tw1-1:checked ~ .gallery-thumbs label:nth-child(1), #sg1-2:checked ~ .gallery-thumbs label:nth-child(2), #tw1-2:checked ~ .gallery-thumbs label:nth-child(2), #sg1-3:checked ~ .gallery-thumbs label:nth-child(3), #tw1-3:checked ~ .gallery-thumbs label:nth-child(3), #sg1-4:checked ~ .gallery-thumbs label:nth-child(4), #tw1-4:checked ~ .gallery-thumbs label:nth-child(4) {
  border-color: #67b012;
  border-radius: 22px;
}
/*和室*/
/* IDが「-1」で終わるもの（sg1-1, tw1-1, wa1-1など）がチェックされた時の挙動 */
[id$="-1"]:checked ~ .gallery-main .img1, [id$="-2"]:checked ~ .gallery-main .img2, [id$="-3"]:checked ~ .gallery-main .img3, [id$="-4"]:checked ~ .gallery-main .img4 {
  opacity: 1;
  z-index: 1;
}
/* 選択中のサムネイル枠線も一括制御 */
[id$="-1"]:checked ~ .gallery-thumbs label:nth-child(1), [id$="-2"]:checked ~ .gallery-thumbs label:nth-child(2), [id$="-3"]:checked ~ .gallery-thumbs label:nth-child(3), [id$="-4"]:checked ~ .gallery-thumbs label:nth-child(4) {
  border-color: #67b012;
  border-radius: 22px;
}
.room-nav ul a:hover {
  opacity: 0.6;
}