/* CSS Document */
@charset "utf-8";
.satsuki-box {
           .room-ul{
            margin: 0;
            padding: 0;
            list-style: none;
            display: flex;
            justify-content: space-between;
            width: 68%;
            margin: auto;
        }
        .room-ul li{
            width: 15.5%;
        }
        .room-ul li a{
            display: block;
            
        }
        .room-ul li a:hover{
            opacity: 0.5;
        }
        .room-ul li a img{
            width: 100%;
            vertical-align: bottom;
        }
    
    /* ラジオボタンは隠す */
    input[name="dd-toggle"] {
      display: none;
    }

    /* クリックで画像を表示する仕組み */
    #btn-dd2:checked ~ .dd1 .img-dd2 { opacity: 1; }
    #btn-dd3:checked ~ .dd1 .img-dd3 { opacity: 1; }
    #btn-dd4:checked ~ .dd1 .img-dd4 { opacity: 1; }
    #btn-dd5:checked ~ .dd1 .img-dd5 { opacity: 1; }

    /* 以下、既存のスタイルを微調整 */
    .dd-box { position: relative; aspect-ratio: 1920 / 1555; }
    .dd-box img { width: 100%; }
    
    /* labelをボタンとして機能させる */
    .dd2, .dd3, .dd4, .dd5 { 
      position: absolute; 
      cursor: pointer; 
      z-index: 10;
      transition: transform 0.2s;
    }
    
    .dd2:hover, .dd3:hover, .dd4:hover, .dd5:hover {
      transform: scale(1.05); /* 触れることがわかるように少し拡大 */
    }

    .dd1 { position: absolute; width: 91%; top: 1%; left: 9%; }
    .dd2 { width: 21%; top: 60.4%; left: 50%; }
    .dd3 { width: 21%; top: 60.4%; left: 72.4%; }
    .dd4 { width: 21%; top: 76.4%; left: 50%; }
    .dd5 { width: 21%; top: 76.4%; left: 72.4%; }

    .dd1 .img-base { position: relative; z-index: 1; }
    .dd1 .img-dd2, .dd1 .img-dd3, .dd1 .img-dd4, .dd1 .img-dd5 {
      position: absolute;
      inset: 0;
      opacity: 0;
      z-index: 2;
      transition: opacity 0.3s ease;
    }

    .dd-txt {
      background-image: url("../img/room/dd-txt1.png");
      aspect-ratio: 661 / 333;
      background-size: cover;
      position: absolute;
      width: 34%;
      top: 46.8%;
      left: 14%;
        z-index: 4;
    }
      
.dd-txt2 {
    background-image: url(img/room/dd-txt2.png);
    aspect-ratio: 505 / 87;
    background-size: cover;
    position: absolute;
    width: 26.2%;
    top: 91.5%;
    left: 50.3%;
    z-index: 4;
}

    /* ラジオボタンを非表示にする */
    input[name="pt-toggle"] {
      display: none;
    }

    /* クリックで中央のメイン画像を表示する仕組み */
    #btn-pt2:checked ~ .pt1 .img-pt2 { opacity: 1; }
    #btn-pt3:checked ~ .pt1 .img-pt3 { opacity: 1; }
    #btn-pt4:checked ~ .pt1 .img-pt4 { opacity: 1; }
    #btn-pt5:checked ~ .pt1 .img-pt5 { opacity: 1; }

    /* 【演出】選択中のボタン（ラベル）を少し大きく保持し、明るくする */
    #btn-pt2:checked ~ .pt2, 
    #btn-pt3:checked ~ .pt3, 
    #btn-pt4:checked ~ .pt4, 
    #btn-pt5:checked ~ .pt5 {
      transform: scale(1.05);
      filter: brightness(1.1);
      z-index: 12;
    }

    /* レイアウト設定 */
    .pt-box { position: relative; aspect-ratio: 1920 / 1555; }
    .pt-box img { width: 100%; }

    .pt1, .pt2, .pt3, .pt4, .pt5 { aspect-ratio: 176 / 88; position: absolute; }
    
    .pt1 { width: 91%; top: 0%; left: 0%; }
    
    /* ボタン（ラベル）の基本スタイル */
    .pt2, .pt3, .pt4, .pt5 { 
      cursor: pointer; 
      z-index: 10; 
      width: 21%;
      transition: transform 0.2s ease, filter 0.2s ease; /* アニメーションを滑らかに */
    }

    /* 【演出】ホバー時に少し拡大 */
    .pt2:hover, .pt3:hover, .pt4:hover, .pt5:hover {
      transform: scale(1.05);
      z-index: 11;
    }

    /* ボタンの位置設定 */
    .pt2 { top: 60.4%; left: 6.5%; }
    .pt3 { top: 60.4%; left: 29%; }
    .pt4 { top: 79.4%; left: 6.5%; }
    .pt5 { top: 79.4%; left: 29%; }

    /* 画像の重なり */
    .pt1 img { display: block; width: 100%; }
    .pt1 .img-base { position: relative; z-index: 1; }
    .pt1 .img-pt2, .pt1 .img-pt3, .pt1 .img-pt4, .pt1 .img-pt5 {
      position: absolute;
      inset: 0;
      opacity: 0;
      z-index: 2;
      transition: opacity 0.3s ease;
    }

    /* テキストエリア */
    .pt-txt {
      background-image: url("../img/room/pt-txt1.png");
      aspect-ratio: 661 / 333;
      background-size: cover;
      position: absolute;
      width: 34%;
      top: 46%;
      left: 52%;
        z-index: 4;
    }
.pt-txt2 {
    background-image: url(img/room/pt-txt2.png);
    aspect-ratio: 605 / 62;
    background-size: cover;
    position: absolute;
    width: 26.5%;
    top: 94.4%;
    left: 6.8%;
    z-index: 4;
}
    
    /* ラジオボタンを非表示にする */
    input[name="tw-toggle"] {
      display: none;
    }

    /* クリックで中央のメイン画像を表示する仕組み */
    #btn-tw2:checked ~ .tw1 .img-tw2 { opacity: 1; }
    #btn-tw3:checked ~ .tw1 .img-tw3 { opacity: 1; }
    #btn-tw4:checked ~ .tw1 .img-tw4 { opacity: 1; }
    #btn-tw5:checked ~ .tw1 .img-tw5 { opacity: 1; }

    /* 【演出】選択中のボタン（ラベル）を少し大きく保持し、明るくする */
    #btn-tw2:checked ~ .tw2, 
    #btn-tw3:checked ~ .tw3, 
    #btn-tw4:checked ~ .tw4, 
    #btn-tw5:checked ~ .tw5 {
      transform: scale(1.05);
      filter: brightness(1.1);
      z-index: 12;
    }

    /* レイアウト設定 */
    .tw-box { position: relative; aspect-ratio: 1920 / 1555; }
    .tw-box img { width: 100%; }

    .tw1, .tw2, .tw3, .tw4, .tw5 { aspect-ratio: 176 / 88; position: absolute; }
    
    .tw1 { width: 91%; top: 0.3%; left: 9%; }
    
    /* ボタン（ラベル）の基本スタイル */
    .tw2, .tw3, .tw4, .tw5 { 
      cursor: pointer; 
      z-index: 10; 
      width: 21%;
      transition: transform 0.2s ease, filter 0.2s ease; /* 動きをなめらかに */
    }

    /* 【演出】ホバー時に少し拡大 */
    .tw2:hover, .tw3:hover, .tw4:hover, .tw5:hover {
      transform: scale(1.05);
      z-index: 11;
    }

    /* ボタンの位置設定 */
    .tw2 { top: 60.4%; left: 50%; }
    .tw3 { top: 60.4%; left: 72.4%; }
    .tw4 { top: 76.4%; left: 50%; }
    .tw5 { top: 76.4%; left: 72.4%; }

    /* 画像の重なり */
    .tw1 img { display: block; width: 100%; }
    .tw1 .img-base { position: relative; z-index: 1; }
    .tw1 .img-tw2, .tw1 .img-tw3, .tw1 .img-tw4, .tw1 .img-tw5 {
      position: absolute;
      inset: 0;
      opacity: 0;
      z-index: 2;
      transition: opacity 0.3s ease;
    }

    /* テキストエリア */
    .tw-txt {
      background-image: url("../img/room/tw-txt1.png");
      aspect-ratio: 661 / 333;
      background-size: cover;
      position: absolute;
      width: 34%;
      top: 46%;
      left: 14%;
        z-index: 4;
    }
.tw-txt2 {
    background-image: url(img/room/tw-txt2.png);
    aspect-ratio: 505 / 62;
    background-size: cover;
    position: absolute;
    width: 26.3%;
    top: 91.6%;
    left: 50.3%;
    z-index: 4;
}
    
    /* ラジオボタンを非表示にする */
    input[name="tr-toggle"] {
      display: none;
    }

    /* クリックで中央のメイン画像を表示する仕組み */
    #btn-tr2:checked ~ .tr1 .img-tr2 { opacity: 1; }
    #btn-tr3:checked ~ .tr1 .img-tr3 { opacity: 1; }
    #btn-tr4:checked ~ .tr1 .img-tr4 { opacity: 1; }
    #btn-tr5:checked ~ .tr1 .img-tr5 { opacity: 1; }

    /* 【演出】選択中のボタン（ラベル）を少し大きく保持し、明るくする */
    #btn-tr2:checked ~ .tr2, 
    #btn-tr3:checked ~ .tr3, 
    #btn-tr4:checked ~ .tr4, 
    #btn-tr5:checked ~ .tr5 {
      transform: scale(1.05);
      filter: brightness(1.1);
      z-index: 12;
    }

    /* レイアウト設定 */
    .tr-box { position: relative; aspect-ratio: 1920 / 1555; }
    .tr-box img { width: 100%; }

    .tr1, .tr2, .tr3, .tr4, .tr5 { aspect-ratio: 176 / 88; position: absolute; }
    
    .tr1 { width: 91%; top: 0%; left: 0%; }
    
    /* ボタン（ラベル）の基本スタイル */
    .tr2, .tr3, .tr4, .tr5 { 
      cursor: pointer; 
      z-index: 10; 
      width: 21%;
      transition: transform 0.2s ease, filter 0.2s ease; /* アニメーションを滑らかに */
    }

    /* 【演出】ホバー時に少し拡大 */
    .tr2:hover, .tr3:hover, .tr4:hover, .tr5:hover {
      transform: scale(1.05);
      z-index: 11;
    }

    /* ボタンの位置設定 */
    .tr2 { top: 60.4%; left: 6.5%; }
    .tr3 { top: 60.4%; left: 29%; }
    .tr4 { top: 76.5%; left: 6.5%; }
    .tr5 { top: 76.5%; left: 29%; }

    /* 画像の重なり */
    .tr1 img { display: block; width: 100%; }
    .tr1 .img-base { position: relative; z-index: 1; }
    .tr1 .img-tr2, .tr1 .img-tr3, .tr1 .img-tr4, .tr1 .img-tr5 {
      position: absolute;
      inset: 0;
      opacity: 0;
      z-index: 2;
      transition: opacity 0.3s ease;
    }

    /* テキストエリア */
    .tr-txt {
      background-image: url("../img/room/tr-txt.png");
      aspect-ratio: 661 / 333;
      background-size: cover;
      position: absolute;
      width: 34%;
      top: 46.4%;
      left: 52%;
        z-index: 4;
    }
.tr-txt2 {
    background-image: url(img/room/tr-txt2.png);
    aspect-ratio: 505 / 62;
    background-size: cover;
    position: absolute;
    width: 26%;
    top: 91.5%;
    left: 7%;
    z-index: 4;
}
    
    /* ラジオボタンを非表示にする */
    input[name="sg-toggle"] {
      display: none;
    }

    /* クリックで中央のメイン画像を表示する仕組み */
    #btn-sg2:checked ~ .sg1 .img-sg2 { opacity: 1; }
    #btn-sg3:checked ~ .sg1 .img-sg3 { opacity: 1; }
    #btn-sg4:checked ~ .sg1 .img-sg4 { opacity: 1; }
    #btn-sg5:checked ~ .sg1 .img-sg5 { opacity: 1; }

    /* 【演出】選択中のボタン（ラベル）を少し大きく保持し、明るくする */
    #btn-sg2:checked ~ .sg2, 
    #btn-sg3:checked ~ .sg3, 
    #btn-sg4:checked ~ .sg4, 
    #btn-sg5:checked ~ .sg5 {
      transform: scale(1.05);
      filter: brightness(1.1);
      z-index: 12;
    }

    /* レイアウト設定 */
    .sg-box { position: relative; aspect-ratio: 1920 / 1555; }
    .sg-box img { width: 100%; }

    .sg1, .sg2, .sg3, .sg4, .sg5 { aspect-ratio: 176 / 88; position: absolute; }
    
    .sg1 { width: 91%; top: 0.3%; left: 9%; }
    
    /* ボタン（ラベル）の基本スタイル */
    .sg2, .sg3, .sg4, .sg5 { 
      cursor: pointer; 
      z-index: 10; 
      width: 21%;
      transition: transform 0.2s ease, filter 0.2s ease; /* 動きをなめらかに */
    }

    /* 【演出】ホバー時に少し拡大 */
    .sg2:hover, .sg3:hover, .sg4:hover, .sg5:hover {
      transform: scale(1.05);
      z-index: 11;
    }

    /* ボタンの位置設定 */
    .sg2 { top: 60.4%; left: 50%; }
    .sg3 { top: 60.4%; left: 72.4%; }
    .sg4 { top: 76.4%; left: 50%; }
    .sg5 { top: 76.4%; left: 72.4%; }

    /* 画像の重なり */
    .sg1 img { display: block; width: 100%; }
    .sg1 .img-base { position: relative; z-index: 1; }
    .sg1 .img-sg2, .sg1 .img-sg3, .sg1 .img-sg4, .sg1 .img-sg5 {
      position: absolute;
      inset: 0;
      opacity: 0;
      z-index: 2;
      transition: opacity 0.3s ease;
    }

    /* テキストエリア */
    .sg-txt {
      background-image: url("../img/room/sg-txt1.png");
      aspect-ratio: 661 / 333;
      background-size: cover;
      position: absolute;
      width: 34%;
      top: 46.4%;
      left: 14%;
        z-index: 4;
    }
      .sg-txt2 {
    background-image: url(img/room/tw-txt2.png);
    aspect-ratio: 505 / 62;
    background-size: cover;
    position: absolute;
    width: 26%;
    top: 91.6%;
    left: 50.4%;
    z-index: 4;
}
    
    /* ラジオボタンを非表示にする */
    input[name="sd-toggle"] {
      display: none;
    }

    /* クリックで中央のメイン画像を表示する仕組み */
    #btn-sd2:checked ~ .sd1 .img-sd2 { opacity: 1; }
    #btn-sd3:checked ~ .sd1 .img-sd3 { opacity: 1; }
    #btn-sd4:checked ~ .sd1 .img-sd4 { opacity: 1; }
    #btn-sd5:checked ~ .sd1 .img-sd5 { opacity: 1; }

    /* 【演出】選択中のボタン（ラベル）を少し大きく保持し、明るくする */
    #btn-sd2:checked ~ .sd2, 
    #btn-sd3:checked ~ .sd3, 
    #btn-sd4:checked ~ .sd4, 
    #btn-sd5:checked ~ .sd5 {
      transform: scale(1.05); /* 修正：sdansform -> transform */
      filter: brightness(1.1);
      z-index: 12;
    }

    /* レイアウト設定 */
    .sd-box { position: relative; aspect-ratio: 1920 / 1555; }
    .sd-box img { width: 100%; }

    .sd1, .sd2, .sd3, .sd4, .sd5 { aspect-ratio: 176 / 88; position: absolute; }
    
    .sd1 { width: 91%; top: 0%; left: 0%; }
    
    /* ボタン（ラベル）の基本スタイル */
    .sd2, .sd3, .sd4, .sd5 { 
      cursor: pointer; 
      z-index: 10; 
      width: 21%;
      transition: transform 0.2s ease, filter 0.2s ease; /* 修正：sdansition/sdansform -> transition/transform */
    }

    /* 【演出】ホバー時に少し拡大 */
    .sd2:hover, .sd3:hover, .sd4:hover, .sd5:hover {
      transform: scale(1.05); /* 修正：sdansform -> transform */
      z-index: 11;
    }

    /* ボタンの位置設定 */
    .sd2 { top: 60.4%; left: 6.5%; }
    .sd3 { top: 60.4%; left: 29%; }
    .sd4 { top: 76.5%; left: 6.5%; }
    .sd5 { top: 76.5%; left: 29%; }

    /* 画像の重なり */
    .sd1 img { display: block; width: 100%; }
    .sd1 .img-base { position: relative; z-index: 1; }
    .sd1 .img-sd2, .sd1 .img-sd3, .sd1 .img-sd4, .sd1 .img-sd5 {
      position: absolute;
      inset: 0;
      opacity: 0;
      z-index: 2;
      transition: opacity 0.3s ease; /* 修正：sdansition -> transition */
    }

    /* テキストエリア */
    .sd-txt {
      background-image: url("../img/room/sd-txt1.png");
      aspect-ratio: 661 / 333;
      background-size: cover;
      position: absolute;
      width: 34%;
      top: 46%;
      left: 52%;
      z-index: 4;
    }
      
.sd-txt2 {
    background-image: url(img/room/tw-txt2.png);
    aspect-ratio: 505 / 62;
    background-size: cover;
    position: absolute;
    width: 26%;
    top: 91.6%;
    left: 7%;
    z-index: 4;
}
    
    
  .satsuki-box{
    width: 100%;
    margin: 0;
  }

  /* 共通：1920px幅のスライスを、画面幅にフィットさせつつ比率維持 */
  .satsuki-box__row{
    width: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover; /* 必要なら contain */
  }

  /* 画像の場所：img/room/ */

  .satsuki-box__row--1{
    background-image: url("../img/room/room_r1_c1.jpg");
    aspect-ratio: 1920 / 145;
  }
  .satsuki-box__row--2{
    background-image: url("../img/room/room_r2_c1.jpg");
    aspect-ratio: 1920 / 680;
  }
  .satsuki-box__row--3{
    background-image: url("../img/room/room_r3_c1.jpg");
    aspect-ratio: 1920 / 523;
  }
  .satsuki-box__row--4{
    background-image: url("../img/room/room2_r4_c1.jpg");
    aspect-ratio: 1920 / 93;
      background-size: 100%;
      background-position: top center;
  }
  .satsuki-box__row--5{
    background-image: url("../img/room/room_r5_c1.jpg");
    aspect-ratio: 1920 / 80;
  }
  .satsuki-box__row--6{
    background-image: url("../img/room/room_r6_c1.jpg");
    aspect-ratio: 1920 / 206;
  }
  .satsuki-box__row--7{
    background-image: url("../img/room/room2_r7_c1.jpg");
    aspect-ratio: 1920 / 1652;
  }
  .satsuki-box__row--8{
    background-image: url("../img/room/room_r8_c1.jpg");
    aspect-ratio: 1920 / 267;
  }
  .satsuki-box__row--9{
    background-image: url("../img/room/room2_r9_c1.jpg");
    aspect-ratio: 1920 / 1656;
  }
  .satsuki-box__row--10{
    background-image: url("../img/room/room_r10_c1.jpg");
    aspect-ratio: 1920 / 251;
  }
  .satsuki-box__row--11{
    background-image: url("../img/room/room2_r11_c1.jpg");
    aspect-ratio: 1920 / 1623;
  }
  .satsuki-box__row--12{
    background-image: url("../img/room/room_r12_c1.jpg");
    aspect-ratio: 1920 / 282;
  }
  .satsuki-box__row--13{
    background-image: url("../img/room/room2_r13_c1.jpg");
    aspect-ratio: 1920 / 1641;
  }
  .satsuki-box__row--14{
    background-image: url("../img/room/room_r14_c1.jpg");
    aspect-ratio: 1920 / 265;
  }
  .satsuki-box__row--15{
    background-image: url("../img/room/room2_r15_c1.jpg");
    aspect-ratio: 1920 / 1626;
  }
  .satsuki-box__row--16{
    background-image: url("../img/room/room_r16_c1.jpg");
    aspect-ratio: 1920 / 281;
  }
  .satsuki-box__row--17{
    background-image: url("../img/room/room2_r17_c1.jpg");
    aspect-ratio: 1920 / 1686;
  }
  .satsuki-box__row--18{
    background-image: url("../img/room/room_r18_c1.jpg");
    aspect-ratio: 1920 / 427;
  }
    
    
}