@charset "utf-8";
/* CSS Document */
/*.satsuki-box {*/
    /* ラジオボタンを非表示にする */
    input[name="room-toggle"] {
      display: none;
    }

    /* クリックでメイン画像を表示する仕組み */
    #btn-room2:checked ~ .room1 .img-room2 { opacity: 1; }
    #btn-room3:checked ~ .room1 .img-room3 { opacity: 1; }

    /* 【演出】選択中のボタンを少し大きく保持 */
    #btn-room2:checked ~ .room2, 
    #btn-room3:checked ~ .room3 {
      transform: scale(1.05);
      filter: brightness(1.1);
      z-index: 12;
    }

    /* 基本レイアウト */
    .room-title img { width: 100%; }
    .room-title {
      position: absolute;
      top: 0;
      left: 61%;
      width: 32%;
      z-index: 99;
    }
    .room-box {
      position: relative;
      aspect-ratio: 1920 / 1555;
    }
    .room-box img { width: 100%; }

    .room1, .room2, .room3 { aspect-ratio: 176 / 88; position: absolute; }
    
    .room1 {
      width: 91%;
      top: 6%;
      left: 9%;
      max-width: 1760px;
    }

    /* ボタン（ラベル）設定 */
    .room2, .room3 { 
      cursor: pointer; 
      z-index: 10; 
      width: 21%;
      max-width: 400px;
      transition: transform 0.2s ease, filter 0.2s ease;
    }

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

    .room2 { top: 67%; left: 50%; }
    .room3 { top: 70%; left: 72.5%; }

    /* メイン画像エリアの重なり設定 */
    .room1 img { display: block; width: 100%; }
    .room1 .img-base { position: relative; z-index: 1; }
    .room1 .img-room2, .room1 .img-room3 {
      position: absolute;
      inset: 0;
      opacity: 0;
      z-index: 2;
      transition: opacity 0.3s ease;
    }

    /* テキスト・ボタンエリア */
    .room-txt {
      background-image: url(../img/top/room-txt.png);
      aspect-ratio: 661 / 401;
      background-size: cover;
      position: absolute;
      width: 34%;
      top: 51.6%;
      left: 14%;
        z-index: 4;
    }
    .room-txt a {
      position: absolute; /* inheritから変更して安定させました */
      bottom: 4%;
      left: 64%;
      width: 33%;
    }

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

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

    /* 【演出】選択中のボタンを少し大きく保持 */
    #btn-restaurant2:checked ~ .restaurant2, 
    #btn-restaurant3:checked ~ .restaurant3 {
      transform: scale(1.05);
      filter: brightness(1.1);
      z-index: 12;
    }

    /* 基本レイアウト */
    .restaurant-title img { width: 100%; }
    .restaurant-title {
      position: absolute;
      top: 0;
      left: 7%;
      width: 52.5%;
      z-index: 99;
    }
    .restaurant-box {
      position: relative;
      aspect-ratio: 1920 / 1555;
    }
    .restaurant-box img { width: 100%; }

    .restaurant1, .restaurant2, .restaurant3 { aspect-ratio: 176 / 88; position: absolute; }
    
    .restaurant1 {
      width: 91%;
      top: 6%;
      left: 0%;
      max-width: 1760px;
    }

    /* ボタン（ラベル）設定 */
    .restaurant2, .restaurant3 { 
      cursor: pointer; 
      z-index: 10; 
      width: 21%;
      max-width: 400px;
      transition: transform 0.2s ease, filter 0.2s ease;
    }

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

    .restaurant2 { top: 70%; left: 6.4%; }
    .restaurant3 { top: 67%; left: 29.1%; }

    /* メイン画像エリアの重なり設定 */
    .restaurant1 img { display: block; width: 100%; }
    .restaurant1 .img-base { position: relative; z-index: 1; }
    .restaurant1 .img-restaurant2, .restaurant1 .img-restaurant3 {
      position: absolute;
      inset: 0;
      opacity: 0;
      z-index: 2;
      transition: opacity 0.3s ease;
    }

    /* テキスト・ボタンエリア */
    .restaurant-txt {
      background-image: url(../img/top/restaurant-txt.png);
      aspect-ratio: 661 / 401;
      background-size: cover;
      position: absolute;
      width: 34%;
      top: 51.5%;
      left: 52%;
        z-index: 4;
    }
    .restaurant-txt a {
      position: absolute;
      bottom: 4%;
      left: 64%;
      width: 33%;
    }

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

    /* クリックでメイン画像を表示する仕組み */
    #btn-banquet2:checked ~ .banquet1 .img-banquet2 { opacity: 1; }
    #btn-banquet3:checked ~ .banquet1 .img-banquet3 { opacity: 1; }

    /* 【演出】選択中のボタンを少し大きく保持 */
    #btn-banquet2:checked ~ .banquet2, 
    #btn-banquet3:checked ~ .banquet3 {
      transform: scale(1.05);
      filter: brightness(1.1);
      z-index: 12;
    }

    /* 基本レイアウト */
    .banquet-title img { width: 100%; }
    .banquet-title {
      position: absolute;
      top: 0;
      left: 61%;
      width: 32%;
      z-index: 99;
    }
    .banquet-box {
      position: relative;
      aspect-ratio: 1920 / 1555;
    }
    .banquet-box img { width: 100%; }

    .banquet1, .banquet2, .banquet3 { aspect-ratio: 176 / 88; position: absolute; }
    
    .banquet1 {
      width: 91%;
      top: 6%;
      left: 9%;
      max-width: 1760px;
    }

    /* ボタン（ラベル）設定 */
    .banquet2, .banquet3 { 
      cursor: pointer; 
      z-index: 10; 
      width: 21%;
      max-width: 400px;
      transition: transform 0.2s ease, filter 0.2s ease;
    }

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

    /* 位置はroom-box等を参考に調整 */
    .banquet2 { top: 67%; left: 50%; }
    .banquet3 { top: 70%; left: 72.5%; }

    /* メイン画像エリアの重なり設定 */
    .banquet1 img { display: block; width: 100%; }
    .banquet1 .img-base { position: relative; z-index: 1; }
    .banquet1 .img-banquet2, .banquet1 .img-banquet3 {
      position: absolute;
      inset: 0;
      opacity: 0;
      z-index: 2;
      transition: opacity 0.3s ease;
    }

    /* テキスト・ボタンエリア */
    .banquet-txt {
      background-image: url(../img/top/restaurant-txt.png); /* パスは適宜変更してください */
      aspect-ratio: 661 / 401;
      background-size: cover;
      position: absolute;
      width: 34%;
      top: 51.5%;
      left: 14%;
        z-index: 4;
    }
    .banquet-txt a {
      position: absolute;
      bottom: 4%;
      left: 64%;
      width: 33%;
    }


    .banquet-title img{width: 100%;}
    .banquet-title{
        position: absolute;
        top: 0;
        left: 53.9%;
        width: 39.5%;
        z-index: 99;
    }
    .banquet-box{
aspect-ratio: 1920 / 1555;
    background-size: 100%;
    background-position: top;
    }
    .banquet-box img{width: 100%;}
    .banquet1,.banquet2,.banquet3{aspect-ratio: 176 / 88;position: absolute;}
    .banquet1{max-width: 1760px;}
    .banquet2{max-width: 400px;}
    .banquet3{max-width: 400px;}
    /*ここからクリック表示非表示。*/
.banquet-box {
    position: relative;
/*  display: flex;
  gap: 20px;*/
}

/* banquet1は画像を重ねる */
.banquet1 {
  /*width: 400px;*/
    width: 91%;
    top: 6%;
    left: 9%;
}
.banquet2 {
  /*width: 400px;*/
    width: 21%;
    top: 67%;
    left: 50%;
}
.banquet3 {
  /*width: 400px;*/
width: 21%;
    top: 70%;
    left: 72.5%;
}
.banquet-txt {
    background-image: url(../img/top/banquet-txt.png);
    aspect-ratio: 661 / 401;
    background-size: cover;

    position: absolute;
    width: 34%;
    top: 51.5%;
    left: 14%;
}
    .banquet-txt a{
    position: inherit;
    bottom: 4%;
    left: 64%;
        width: 33%;
    }
.banquet1 img {
  display: block;
  width: 100%;
}

/* 重ねる画像 */
.banquet1 .img-banquet2,
.banquet1 .img-banquet3 {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* banquet2 hover → banquet1 を banquet2画像に */
.banquet2:hover ~ .banquet1 .img-banquet2 {
  opacity: 1;
}

/* banquet3 hover → banquet1 を banquet3画像に */
.banquet3:hover ~ .banquet1 .img-banquet3 {
  opacity: 1;
}

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

    /* クリックでメイン画像を表示する仕組み */
    #btn-access2:checked ~ .access1 .img-access2 { opacity: 1; }
    #btn-access3:checked ~ .access1 .img-access3 { opacity: 1; }

    /* 【演出】選択中のボタンを少し大きく保持 */
    #btn-access2:checked ~ .access2, 
    #btn-access3:checked ~ .access3 {
      transform: scale(1.05);
      filter: brightness(1.1);
      z-index: 12;
    }

    /* 基本レイアウト */
    .access-title img { width: 100%; }
    .access-title {
      position: absolute;
      top: 0;
      left: 7%; /* restaurant等と同じ左配置を想定 */
      width: 52.5%;
      z-index: 99;
    }
    .access-box {
      position: relative;
      aspect-ratio: 1920 / 1555;
    }
    .access-box img { width: 100%; }

    .access1, .access2, .access3 { aspect-ratio: 176 / 88; position: absolute; }
    
    .access1 {
      width: 91%;
      top: 6%;
      left: 0%;
      max-width: 1760px;
    }

    /* ボタン（ラベル）設定 */
    .access2, .access3 { 
      cursor: pointer; 
      z-index: 10; 
      width: 21%;
      max-width: 400px;
      transition: transform 0.2s ease, filter 0.2s ease;
    }

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

    /* ボタンの位置設定（適宜調整してください） */
    .access2 { top: 70%; left: 6.4%; }
    .access3 { top: 67%; left: 29.1%; }

    /* メイン画像エリアの重なり設定 */
    .access1 img { display: block; width: 100%; }
    .access1 .img-base { position: relative; z-index: 1; }
    .access1 .img-access2, .access1 .img-access3 {
      position: absolute;
      inset: 0;
      opacity: 0;
      z-index: 2;
      transition: opacity 0.3s ease;
    }

    /* テキスト・ボタンエリア */
    .access-txt {
      background-image: url(../img/top/restaurant-txt.png); /* 必要に応じてパス変更 */
      aspect-ratio: 661 / 401;
      background-size: cover;
      position: absolute;
      width: 34%;
      top: 51.5%;
      left: 52%;
        z-index: 4;
    }
    .access-txt a {
      position: absolute;
      bottom: 4%;
      left: 64%;
      width: 33%;
    }


    .access-title img{width: 100%;}
    .access-title{
        position: absolute;
        top: 0;
        left: 6.5%;
        width: 32%;
        z-index: 99;
    }
    .access-box{
aspect-ratio: 1920 / 1555;
    background-size: 100%;
    background-position: top;
    }
    .access-box img{width: 100%;}
    .access1,.access2,.access3{aspect-ratio: 176 / 88;position: absolute;}
    .access1{max-width: 1760px;}
    .access2{max-width: 400px;}
    .access3{max-width: 400px;}
    /*ここからクリック表示非表示。*/
.access-box {
    position: relative;
/*  display: flex;
  gap: 20px;*/
}

/* access1は画像を重ねる */
.access1 {
  /*width: 400px;*/
    width: 91%;
    top: 6%;
    left: 0%;
}
.access2 {
  /*width: 400px;*/
    width: 21%;
    top: 70%;
    left: 6.5%;
}
.access3 {
  /*width: 400px;*/
width: 21%;
    top: 67.5%;
    left: 29%;
}
.access-txt {
    background-image: url(../img/top/access-txt.png);
    aspect-ratio: 661 / 401;
    background-size: cover;

    position: absolute;
    width: 34%;
    top: 51.5%;
    left: 52%;
    z-index: 4;
}
    .access-txt a{
    position: inherit;
    bottom: 4%;
    left: 64%;
        width: 33%;
    }
.access1 img {
  display: block;
  width: 100%;
}

/* 重ねる画像 */
.access1 .img-access2,
.access1 .img-access3 {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* access2 hover → access1 を access2画像に */
.access2:hover ~ .access1 .img-access2 {
  opacity: 1;
}

/* access3 hover → access1 を access3画像に */
.access3:hover ~ .access1 .img-access3 {
  opacity: 1;
}


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

    /* クリックでメイン画像を表示する仕組み */
    #btn-tourism2:checked ~ .tourism1 .img-tourism2 { opacity: 1; }
    #btn-tourism3:checked ~ .tourism1 .img-tourism3 { opacity: 1; }

    /* 【演出】選択中のボタンを少し大きく保持 */
    #btn-tourism2:checked ~ .tourism2, 
    #btn-tourism3:checked ~ .tourism3 {
      transform: scale(1.05);
      filter: brightness(1.1);
      z-index: 12;
    }

    /* 基本レイアウト */
    .tourism-title img { width: 100%; }
    .tourism-title {
      position: absolute;
      top: 0;
      left: 53.8%;
      width: 41%;
      z-index: 99;
    }
    .tourism-box {
      position: relative;
      aspect-ratio: 1920 / 1555;
    }
    .tourism-box img { width: 100%; }

    .tourism1, .tourism2, .tourism3 { aspect-ratio: 176 / 88; position: absolute; }
    
    .tourism1 {
      width: 91%;
      top: 6%;
      left: 9%;
      max-width: 1760px;
    }

    /* ボタン（ラベル）設定 */
    .tourism2, .tourism3 { 
      cursor: pointer; 
      z-index: 10; 
      width: 21%;
      max-width: 400px;
      transition: transform 0.2s ease, filter 0.2s ease;
    }

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

    .tourism2 { top: 68.5%; left: 50%; }
    .tourism3 { top: 71%; left: 73%; }

    /* メイン画像エリアの重なり設定 */
    .tourism1 img { display: block; width: 100%; }
    .tourism1 .img-base { position: relative; z-index: 1; }
    .tourism1 .img-tourism2, .tourism1 .img-tourism3 {
      position: absolute;
      inset: 0;
      opacity: 0;
      z-index: 2;
      transition: opacity 0.3s ease;
    }

    /* テキスト・ボタンエリア */
    .tourism-txt {
      background-image: url(../img/top/tourism-txt.png);
      aspect-ratio: 661 / 401;
      background-size: cover;
      position: absolute;
      width: 34%;
      top: 51.5%;
      left: 14%;
        z-index: 4;
    }
    .tourism-txt a {
      position: absolute;
      bottom: 4%;
      left: 64%;
      width: 33%;
    }


    .top1-slider-box{
        width: 68%;
        margin: auto;
        padding-top: 0.2%;
    }
/*一つ目のslider*/    
.top1-slider{
  position: relative;
  width: 100%;
  aspect-ratio: 1301 / 400; /* 必要なければ消してOK */
  overflow: hidden;
}

.top1-slider img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 1枚目は常に表示（ベース） */
.top1-slider img:nth-child(1){
  opacity: 1;
    
}

/* 2枚目だけフェード */
.top1-slider img:nth-child(2){
  opacity: 0;
  animation: topFade2 8s infinite ease-in-out;
    z-index: 999;
}

@keyframes topFade2{
  0%, 40%   { opacity: 0; }  /* しばらく1枚目 */
  50%       { opacity: 1; }  /* フェードイン */
  90%       { opacity: 1; }  /* 表示キープ */
  100%      { opacity: 0; }  /* フェードアウトしてループへ（ここが0なのでパチらない） */
}


  .satsuki-box{
    width: 100%;
    margin: 0;
  }

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

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

  .satsuki-box__row--1{
    background-image: url("../img/top/top2_r1_c1.jpg");
    aspect-ratio: 1920 / 676;
              margin-top: -178px;
  }
  .satsuki-box__row--2{
    background-image: url("../img/top/top2_r2_c1.jpg");
    aspect-ratio: 1920 / 410;
  }
  .satsuki-box__row--3{
    background-image: url("../img/top/top_r3_c1.jpg");
    aspect-ratio: 1920 / 514;
  }
  .satsuki-box__row--4{
    background-image: url("../img/top/top_r4_c1.jpg");
    aspect-ratio: 1920 / 518;
  }
  .satsuki-box__row--5{
    background-image: url("../img/top/top_r5_c1.jpg");
    aspect-ratio: 1920 / 204;
  }
  .satsuki-box__row--6{
    background-image: url("../img/top/top2_r6_c1.jpg");
    aspect-ratio: 1920 / 1555;
      background-size: 100%;
      background-position: top;
  }
  .satsuki-box__row--7{
    background-image: url("../img/top/top2_r7_c1.jpg");
    aspect-ratio: 1920 / 1552;
  }
  .satsuki-box__row--8{
    background-image: url("../img/top/top2_r8_c1.jpg");
    aspect-ratio: 1920 / 1555;
  }
  .satsuki-box__row--9{
    background-image: url("../img/top/top2_r9_c1.jpg");
    aspect-ratio: 1920 / 1554;
  }
  .satsuki-box__row--10{
    background-image: url("../img/top/top2_r10_c1.jpg");
    aspect-ratio: 1920 / 1529;
  }
  .satsuki-box__row--11{
    background-image: url("../img/top/top_r11_c1.jpg");
    aspect-ratio: 1920 / 886;
  }
  .satsuki-box__row--12{
    background-image: url("../img/top/top_r12_c1.jpg");
    aspect-ratio: 1920 / 502;
  }
  .satsuki-box__row--13{
    background-image: url("../img/top/top_r13_c1.jpg");
    aspect-ratio: 1920 / 425;
  }
    
    
        .to-stay{
            position: absolute;
            width: 100%;
            aspect-ratio: 1920 / 886;
        }
        .to-stay a{
position: absolute;
    bottom: 25%;
    left: 72%;
    width: 29%;
        }
/*}*/

/* --- リセット機能の後付け設定 --- */

/* 1. リセット用ラベルの基本（普段は隠す） */
.room-box .reset-overlay {
  position: absolute;
  inset: 0;
  z-index: 5; /* 画像(z-2)の上、ボタン(z-10)の下に配置 */
  cursor: default;
  display: none;
}

/* 2. 2枚目か3枚目が選ばれた時だけ、リセット用ラベルを出現させる */
#btn-room2:checked ~ .reset-overlay,
#btn-room3:checked ~ .reset-overlay {
  display: block;
}

/* 3. ボタン、タイトル、テキスト、詳細ボタンはリセット用ラベルより上に引き上げる */
.room2, .room3, .room-txt, .room-title {
  z-index: 10 !important;
}

/* 4. 切り替え画像の重なり順を確定（ベースより上でリセットラベルより下） */
.room1 .img-room2, 
.room1 .img-room3 {
  z-index: 2 !important;
}

/* --- レストラン用のリセット設定 --- */

/* 1. リセット用ラベルの表示制御 */
.restaurant-box .reset-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  cursor: default;
  display: none;
}

/* 2. 2枚目か3枚目が選ばれた時だけ、リセット用ラベルを出現させる */
#btn-restaurant2:checked ~ .reset-overlay,
#btn-restaurant3:checked ~ .reset-overlay {
  display: block;
}

/* 3. ボタン、タイトル、テキスト類を最前面に（z-indexを整理） */
.restaurant2, .restaurant3, .restaurant-txt, .restaurant-title {
  z-index: 10 !important;
}

/* 4. 切り替え画像の重なり順を固定 */
.restaurant1 .img-restaurant2, 
.restaurant1 .img-restaurant3 {
  z-index: 2 !important;
}

/* --- 宴会場用のリセット設定 --- */

/* 1. リセット用ラベルの表示制御 */
.banquet-box .reset-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  cursor: default;
  display: none;
}

/* 2. 2枚目か3枚目が選ばれた時だけ、リセット用ラベルを出現させる */
#btn-banquet2:checked ~ .reset-overlay,
#btn-banquet3:checked ~ .reset-overlay {
  display: block;
}

/* 3. ボタン、タイトル、テキスト類を最前面に保持 */
.banquet2, .banquet3, .banquet-txt, .banquet-title {
  z-index: 10 !important;
}

/* 4. 切り替え画像の重なり順を固定 */
.banquet1 .img-banquet2, 
.banquet1 .img-banquet3 {
  z-index: 2 !important;
}

/* --- アクセス用のリセット設定 --- */

/* 1. リセット用ラベルの表示制御 */
.access-box .reset-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  cursor: default;
  display: none;
}

/* 2. 2枚目か3枚目が選ばれた時だけ、リセット用ラベルを出現させる */
#btn-access2:checked ~ .reset-overlay,
#btn-access3:checked ~ .reset-overlay {
  display: block;
}

/* 3. ボタン、タイトル、テキスト類を最前面に保持 */
.access2, .access3, .access-txt, .access-title {
  z-index: 10 !important;
}

/* 4. 切り替え画像の重なり順を固定 */
.access1 .img-access2, 
.access1 .img-access3 {
  z-index: 2 !important;
}

/* --- 周辺観光用のリセット設定 --- */

/* 1. リセット用ラベルの表示制御 */
.tourism-box .reset-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  cursor: default;
  display: none;
}

/* 2. 2枚目か3枚目が選ばれた時だけ、リセット用ラベルを出現させる */
#btn-tourism2:checked ~ .reset-overlay,
#btn-tourism3:checked ~ .reset-overlay {
  display: block;
}

/* 3. ボタン、タイトル、テキスト類を最前面に保持 */
.tourism2, .tourism3, .tourism-txt, .tourism-title {
  z-index: 10 !important;
}

/* 4. 切り替え画像の重なり順を固定 */
.tourism1 .img-tourism2, 
.tourism1 .img-tourism3 {
  z-index: 2 !important;
}

.top-header .header-inner{

    padding-top: 0%;
}
.satsuki-box .top-header{
    top: 140px;
}