@charset "utf-8";
/* CSS Document */
.room-nav ul {
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  width: 58%;
  margin: 0 auto;
  list-style: none;
  justify-content: space-between;
  align-items: flex-end;
}
.room-nav img {
  width: 100%;
}
.room-nav a:hover{opacity: 0.6;}
.toroom-1 {
  width: calc(100% * (237 / 1095));
}
.toroom-2 {
  width: calc(100% * (243 / 1095));
}
.toroom-3 {
  width: calc(100% * (410 / 1095));
}
.to-booking {
  position: relative;
  width: 13%;
}
.to-booking a:hover{opacity: 0.6;}
.to-booking1 {
  top: -14.5%;
  right: -65.8%;
}
.to-booking img {
  width: 100%;
}
.to-booking2 {
  top: -14.5%;
  right: -21.2%;
}
/* 外枠：はみ出た部分を隠す */
.slide-container {
  width: 100%;
  overflow: hidden;
  /*background: #f0f0f0;*/ /* 確認用背景色 */
}
/* スライドの器：画像を横に並べる */
.slide-track {
  display: flex;
  width: fit-content; /* 中身のサイズに合わせる */
  animation: loop-slide 20s linear infinite; /* 20秒で一周、等速、無限 */
}
.slide-track img {
  width: 100vw; /* 画像の幅（画面いっぱいに表示する場合） */
  height: auto;
  display: block;
  padding-right: 1.5%;
}
/* アニメーション：左へ1枚分（50%）移動したらリセット */
@keyframes loop-slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
.room-slider-box1, .room-slider-box3, .room-slider-box5, .room-slider-box7 {
  max-width: 820px;
  top: 0;
  left: 17%;
}
.room-slider-box2, .room-slider-box4, .room-slider-box6 {
  max-width: 820px;
  top: 0;
  left: 40%;
}
/* --- スライダー共通設定 --- */
[class^="room-slider-box"] {
  position: relative;
  width: 100%; /* 横幅100% */
  overflow: hidden;
  width: calc(100% * (820 / 1920));
}
[class^="room-slider-box"] .base-img {
  display: block;
  width: 100%;
  height: auto;
  visibility: hidden; /* 土台は見えなくてOK（高さ維持用） */
}
[class^="room-slider-box"] .in img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transition: .5s;
  z-index: 0;
}
[class^="room-slider-box"] input {
  display: none;
}
[class^="room-slider-box"] .in {
  display: flex;
  justify-content: center;
  padding-top: 1.8%
}
/* ナビゲーションドット（ボタン） */
[class^="room-slider-box"] label span {
  display: block;
  width: 10px;
  height: 10px;
  padding: 7px;
  margin: 30% 0 0; /* 画像の下の方に浮かせる */
  border-radius: 100%;
  cursor: pointer;
  position: relative;
  z-index: 2;
}
[class^="room-slider-box"] label span::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: #777;
  opacity: 0.5;
  border-radius: 100%;
}
/* アニメーション定義 */
@keyframes slide {
  0% {
    opacity: 0;
  }
  3.5% {
    opacity: 1;
    z-index: 1;
  }
  25% {
    opacity: 1;
  }
  28.5% {
    opacity: 0;
    z-index: 0;
  }
}
@keyframes slidebutton {
  0% {
    opacity: 0.5;
    background: #777;
  }
  3.5% {
    opacity: 1;
    background: #94363d;
  }
  25% {
    opacity: 1;
    background: #94363d;
  }
  28.5% {
    opacity: 0.5;
    background: #777;
  }
}
/* アニメーション一括適用 */
[class^="room-slider-box"] .in img {
  animation: slide 14s infinite;
}
[class^="room-slider-box"] label span::before {
  animation-duration: 14s;
  animation-iteration-count: infinite;
}
/* 共通：チェックされた時の挙動 */
[class^="room-slider-box"] input:checked ~ .in img, [class^="room-slider-box"] input:checked ~ .in span::before {
  animation: none; /* 手動選択時はアニメを止める */
}
[class^="room-slider-box"] .in:hover img, [class^="room-slider-box"] .in:hover span::before {
  animation-play-state: paused; /* ホバーで一時停止 */
}
/* 個別チェック時の表示設定（1〜4枚目共通） */
[class^="room-slider-box"] input:nth-of-type(1):checked ~ .in label:nth-of-type(1) span::before, [class^="room-slider-box"] input:nth-of-type(2):checked ~ .in label:nth-of-type(2) span::before, [class^="room-slider-box"] input:nth-of-type(3):checked ~ .in label:nth-of-type(3) span::before, [class^="room-slider-box"] input:nth-of-type(4):checked ~ .in label:nth-of-type(4) span::before {
  background: #000;
  opacity: 1;
}
[class^="room-slider-box"] input:nth-of-type(1):checked ~ .in label:nth-of-type(1) img, [class^="room-slider-box"] input:nth-of-type(2):checked ~ .in label:nth-of-type(2) img, [class^="room-slider-box"] input:nth-of-type(3):checked ~ .in label:nth-of-type(3) img, [class^="room-slider-box"] input:nth-of-type(4):checked ~ .in label:nth-of-type(4) img {
  opacity: 1;
  z-index: 1;
}
/* --- 各画像の表示タイミング調整 --- */
[class^="room-slider-box"] label:nth-of-type(1) span::before, [class^="room-slider-box"] label:nth-of-type(1) img {
  animation-delay: 0s;
}
[class^="room-slider-box"] label:nth-of-type(2) span::before, [class^="room-slider-box"] label:nth-of-type(2) img {
  animation-delay: 3.5s;
}
[class^="room-slider-box"] label:nth-of-type(3) span::before, [class^="room-slider-box"] label:nth-of-type(3) img {
  animation-delay: 7s;
}
[class^="room-slider-box"] label:nth-of-type(4) span::before, [class^="room-slider-box"] label:nth-of-type(4) img {
  animation-delay: 10.5s;
}
/* --- room-slider-box1 専用の色 --- */
.room-slider-box1 {
  input:nth-of-type(1):checked ~ .in label:nth-of-type(1) span::before, input:nth-of-type(2):checked ~ .in label:nth-of-type(2) span::before, input:nth-of-type(3):checked ~ .in label:nth-of-type(3) span::before, input:nth-of-type(4):checked ~ .in label:nth-of-type(4) span::before {
    background: #b43627; /* 例えばオレンジ */
    opacity: 1;
  }
}
.room-slider-box2 {
  input:nth-of-type(1):checked ~ .in label:nth-of-type(1) span::before, input:nth-of-type(2):checked ~ .in label:nth-of-type(2) span::before, input:nth-of-type(3):checked ~ .in label:nth-of-type(3) span::before, input:nth-of-type(4):checked ~ .in label:nth-of-type(4) span::before {
    background: #fbb03b; /* 例えばオレンジ */
    opacity: 1;
  }
}
.room-slider-box3 {
  input:nth-of-type(1):checked ~ .in label:nth-of-type(1) span::before, input:nth-of-type(2):checked ~ .in label:nth-of-type(2) span::before, input:nth-of-type(3):checked ~ .in label:nth-of-type(3) span::before, input:nth-of-type(4):checked ~ .in label:nth-of-type(4) span::before {
    background: #c76846; /* 例えばオレンジ */
    opacity: 1;
  }
}
.room-slider-box4 {
  input:nth-of-type(1):checked ~ .in label:nth-of-type(1) span::before, input:nth-of-type(2):checked ~ .in label:nth-of-type(2) span::before, input:nth-of-type(3):checked ~ .in label:nth-of-type(3) span::before, input:nth-of-type(4):checked ~ .in label:nth-of-type(4) span::before {
    background: #a3a85a; /* 例えばオレンジ */
    opacity: 1;
  }
}
.room-slider-box5 {
  input:nth-of-type(1):checked ~ .in label:nth-of-type(1) span::before, input:nth-of-type(2):checked ~ .in label:nth-of-type(2) span::before, input:nth-of-type(3):checked ~ .in label:nth-of-type(3) span::before, input:nth-of-type(4):checked ~ .in label:nth-of-type(4) span::before {
    background: #61a3bd; /* 例えばオレンジ */
    opacity: 1;
  }
}
.room-slider-box6 {
  input:nth-of-type(1):checked ~ .in label:nth-of-type(1) span::before, input:nth-of-type(2):checked ~ .in label:nth-of-type(2) span::before, input:nth-of-type(3):checked ~ .in label:nth-of-type(3) span::before, input:nth-of-type(4):checked ~ .in label:nth-of-type(4) span::before {
    background: #ffffff; /* 例えばオレンジ */
    opacity: 1;
  }
}
.room-slider-box7 {
  input:nth-of-type(1):checked ~ .in label:nth-of-type(1) span::before, input:nth-of-type(2):checked ~ .in label:nth-of-type(2) span::before, input:nth-of-type(3):checked ~ .in label:nth-of-type(3) span::before, input:nth-of-type(4):checked ~ .in label:nth-of-type(4) span::before {
    background: #94363d; /* 例えばオレンジ */
    opacity: 1;
  }
}
/* --- 各ボックス専用の設定（色とアニメーション名） --- */
.room-slider-box1 {
  label span::before {
    animation-name: slidebutton1;
  }
  input:checked ~ .in label span::before {
    background: #b43627 !important;
    opacity: 1;
    animation: none !important;
  }
}
@keyframes slidebutton1 {
  0%, 28.5% {
    opacity: 0.5;
    background: #777;
  }
  3.5%, 25% {
    opacity: 1;
    background: #b43627;
  }
}
.room-slider-box2 {
  label span::before {
    animation-name: slidebutton2;
  }
  input:checked ~ .in label span::before {
    background: #fbb03b !important;
    opacity: 1;
    animation: none !important;
  }
}
@keyframes slidebutton2 {
  0%, 28.5% {
    opacity: 0.5;
    background: #777;
  }
  3.5%, 25% {
    opacity: 1;
    background: #fbb03b;
  }
}
.room-slider-box3 {
  label span::before {
    animation-name: slidebutton3;
  }
  input:checked ~ .in label span::before {
    background: #c76846 !important;
    opacity: 1;
    animation: none !important;
  }
}
@keyframes slidebutton3 {
  0%, 28.5% {
    opacity: 0.5;
    background: #777;
  }
  3.5%, 25% {
    opacity: 1;
    background: #c76846;
  }
}
.room-slider-box4 {
  label span::before {
    animation-name: slidebutton4;
  }
  input:checked ~ .in label span::before {
    background: #a3a85a !important;
    opacity: 1;
    animation: none !important;
  }
}
@keyframes slidebutton4 {
  0%, 28.5% {
    opacity: 0.5;
    background: #777;
  }
  3.5%, 25% {
    opacity: 1;
    background: #a3a85a;
  }
}
.room-slider-box5 {
  label span::before {
    animation-name: slidebutton5;
  }
  input:checked ~ .in label span::before {
    background: #61a3bd !important;
    opacity: 1;
    animation: none !important;
  }
}
@keyframes slidebutton5 {
  0%, 28.5% {
    opacity: 0.5;
    background: #777;
  }
  3.5%, 25% {
    opacity: 1;
    background: #61a3bd;
  }
}
.room-slider-box6 {
  label span::before {
    animation-name: slidebutton6;
  }
  input:checked ~ .in label span::before {
    background: #ffffff !important;
    opacity: 1;
    animation: none !important;
  }
}
@keyframes slidebutton6 {
  0%, 28.5% {
    opacity: 0.5;
    background: #777;
  }
  3.5%, 25% {
    opacity: 1;
    background: #ffffff;
  }
}
.room-slider-box7 {
  label span::before {
    animation-name: slidebutton7;
  }
  input:checked ~ .in label span::before {
    background: #94363d !important;
    opacity: 1;
    animation: none !important;
  }
}
@keyframes slidebutton7 {
  0%, 28.5% {
    opacity: 0.5;
    background: #777;
  }
  3.5%, 25% {
    opacity: 1;
    background: #94363d;
  }
}
/* 共通設定 */
.room-container div {
  /*width: 100%;*/
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* 各セクションの設定 */
.room1 {
  background-image: url('../img/room/room_r1_c1.png');
  aspect-ratio: 1920 / 900;
}
.room2 {
  background-image: url('../img/room/room_r2_c1.png');
  aspect-ratio: 1920 / 556;
}
.room3 {
  background-image: url('../img/room/room_r3_c1.png');
  aspect-ratio: 1920 / 204;
}
.room4 {
  background-color: #F9F5F2; /*background-image: url('../img/room/room_r4_c1.png');*/ aspect-ratio: 1920 / 201;
}
.room5 {
  background-color: #F9F5F2; /*background-image: url('../img/room/room_r5_c1.png');*/ aspect-ratio: 1920 / 232;
}
.room6 {
  background-image: url('../img/room/room_r6_c1.png');
  aspect-ratio: 1920 / 309;
}
.room7 {
  background-image: url('../img/room/room_r7_c1.png');
  aspect-ratio: 1920 / 651;
}
.room8 {
  background-image: url('../img/room/room_r8_c1.png');
  aspect-ratio: 1920 / 390;
}
.room9 {
  background-image: url('../img/room/room_r9_c1.png');
  aspect-ratio: 1920 / 237;
}
.room10 {
  background-image: url('../img/room/room_r10_c1.png');
  aspect-ratio: 1920 / 653;
}
.room11 {
  background-image: url('../img/room/room_r11_c1.png');
  aspect-ratio: 1920 / 389;
}
.room12 {
  background-image: url('../img/room/room_r12_c1.png');
  aspect-ratio: 1920 / 236;
}
.room13 {
  background-image: url('../img/room/room_r13_c1.png');
  aspect-ratio: 1920 / 651;
}
.room14 {
  background-image: url('../img/room/room_r14_c1.png');
  aspect-ratio: 1920 / 391;
}
.room15 {
  background-image: url('../img/room/room_r15_c1.png');
  aspect-ratio: 1920 / 237;
}
.room16 {
  background-image: url('../img/room/room_r16_c1.png');
  aspect-ratio: 1920 / 651;
}
.room17 {
  background-image: url('../img/room/room_r17_c1.png');
  aspect-ratio: 1920 / 393;
}
.room18 {
  background-image: url('../img/room/room_r18_c1.png');
  aspect-ratio: 1920 / 235;
}
.room19 {
  background-image: url('../img/room/room_r19_c1.png');
  aspect-ratio: 1920 / 651;
}
.room20 {
  background-image: url('../img/room/room_r20_c1.png');
  aspect-ratio: 1920 / 395;
}
.room21 {
  background-image: url('../img/room/room_r21_c1.png');
  aspect-ratio: 1920 / 230;
}
.room22 {
  background-image: url('../img/room/room_r22_c1.png');
  aspect-ratio: 1920 / 652;
}
.room23 {
  background-image: url('../img/room/room_r23_c1.png');
  aspect-ratio: 1920 / 395;
}
.room24 {
  background-image: url('../img/room/room_r24_c1.png');
  aspect-ratio: 1920 / 121;
}
.room25 {
  background-image: url('../img/room/room_r25_c1.png');
  aspect-ratio: 1920 / 762;
}
.room26 {
  background-color: #F9F5F2; /*background-image: url('../img/room/room_r26_c1.png');*/ aspect-ratio: 1920 / 564;
}
.room27 {
  background-image: url('../img/room/room_r27_c1.png');
  aspect-ratio: 1920 / 1360;
}
/*.room28,.nanuka-footer { background-image: url('../img/room/room_r28_c1.png'); aspect-ratio: 1920 / 656; }*/