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

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

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

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

    .jp1, .jp2, .jp3 { aspect-ratio: 176 / 88; position: absolute; }
    
    .jp1 {
    width: 92%;
    top: 0%;
    left: 8.0%;
    max-width: 1760px;
    }
    
    /* ボタン（ラベル）の基本スタイル */
    .jp2, .jp3 { 
      cursor: pointer; 
      z-index: 10; 
      width: 21%;
      max-width: 400px;
      transition: transform 0.2s ease, filter 0.2s ease;
    }

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

    /* ボタンの位置設定 */
    .jp2 { top: 70.5%; left: 50%; }
    .jp3 { top: 73.5%; left: 72.5%; }

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

    /* テキストエリア */
    .jp-txt {
      background-image: url(../img/restaurant/jp-txt.png);
      aspect-ratio: 661 / 351;
      background-size: cover;
      position: absolute;
      width: 34%;
      top: 56.8%;
      left: 14%;
        z-index: 4;
    }
    
    /* ボタン内のaタグ位置調整 */
    .jp-txt a {
      position: absolute;
      bottom: 4%;
      left: 64%;
      width: 33%;
    }


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

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

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

    /* レイアウト設定 */
    .ch-box { position: relative; aspect-ratio: 1920 / 1271; } /* 修正: rechtive -> relative */
    .ch-box img { width: 100%; }

    .ch1, .ch2, .ch3 { aspect-ratio: 176 / 88; position: absolute; }
    
    .ch1 {
      width: 92%;
      top: 0%;
      left: 0%;
      max-width: 1760px;
    }
    
    /* ボタン（ラベル）の基本スタイル */
    .ch2, .ch3 { 
      cursor: pointer; 
      z-index: 10; 
      width: 21%;
      max-width: 400px;
      transition: transform 0.2s ease, filter 0.2s ease;
    }

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

    /* ボタンの位置設定 */
    .ch2 { top: 77.3%; left: 6.5%; }
    .ch3 { top: 74.5%; left: 29%; }

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

    /* テキストエリア */
    .ch-txt {
      background-image: url(../img/restaurant/ch-txt.png);
      aspect-ratio: 661 / 351;
      background-size: cover;
      position: absolute;
      width: 34%;
      top: 60%;
      left: 52%;
      z-index: 4;
    }
    
    /* ボタン内のaタグ位置調整 */
    .ch-txt a {
      position: absolute;
      bottom: 4%;
      left: 64%;
      width: 33%;
    }

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

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

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

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

    .bf1, .bf2, .bf3 { aspect-ratio: 176 / 88; position: absolute; }
    
    .bf1 {
    width: 92%;
    top: 0%;
    left: 8.0%;
    max-width: 1760px;
    }
    
    /* ボタン（ラベル）の基本スタイル */
    .bf2, .bf3 { 
      cursor: pointer; 
      z-index: 10; 
      width: 21%;
      max-width: 400px;
      transition: transform 0.2s ease, filter 0.2s ease;
    }

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

    /* ボタンの位置設定 */
    .bf2 { top: 69.5%; left: 50%; }
    .bf3 { top: 72.5%; left: 72.5%; }

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

    /* テキストエリア */
    .bf-txt {
      background-image: url(../img/restaurant/bf-txt.png);
      aspect-ratio: 661 / 450;
      background-size: cover;
      position: absolute;
      width: 34%;
      top: 55.8%;
      left: 14%;
        z-index: 4;
    }
    
    /* ボタン内のaタグ位置調整 */
    .bf-txt a {
      position: absolute;
      bottom: 4%;
      left: 64%;
      width: 33%;
    }
    

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

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

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

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

    .la1, .la2, .la3 { aspect-ratio: 176 / 88; position: absolute; }
    
    .la1 {
    width: 92%;
    top: 0%;
    left: 0%;
    max-width: 1760px;
    }
    
    /* ボタン（ラベル）の基本スタイル */
    .la2, .la3 { 
      cursor: pointer; 
      z-index: 10; 
      width: 21%;
      max-width: 400px;
      transition: transform 0.2s ease, filter 0.2s ease;
    }

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

    /* ボタンの位置設定 */
    .la2 { top: 77.3%; left: 6.5%; }
    .la3 { top: 74.5%; left: 29%; }

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

    /* テキストエリア */
    .la-txt {
      background-image: url(../img/restaurant/la-txt.png);
      aspect-ratio: 661 / 351;
      background-size: cover;
      position: absolute;
      width: 34%;
      top: 60%;
      left: 52%;
        z-index: 4;
    }
    
    /* ボタン内のaタグ位置調整 */
    .la-txt a {
      position: absolute;
      bottom: 4%;
      left: 64%;
      width: 33%;
    }
    

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

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

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

  .satsuki-box__row--1{
    background-image: url("../img/restaurant/restaurant_r1_c1.jpg");
    aspect-ratio: 1920 / 145;
  }
  .satsuki-box__row--2{
    background-image: url("../img/restaurant/restaurant_r2_c1.jpg");
    aspect-ratio: 1920 / 680;
  }
  .satsuki-box__row--3{
    background-image: url("../img/restaurant/restaurant_r3_c1.jpg");
    aspect-ratio: 1920 / 543;
  }
  .satsuki-box__row--4{
    background-image: url("../img/restaurant/restaurant_r4_c1.jpg");
    aspect-ratio: 1920 / 212;
  }
  .satsuki-box__row--5{
    background-image: url("../img/restaurant/restaurant2_r5_c1.jpg");
    aspect-ratio: 1920 / 1345;
      background-position: top center;
      background-size: contain;
      background-repeat: no-repeat;
  }
  .satsuki-box__row--6{
    background-image: url("../img/restaurant/restaurant_r6_c1.jpg");
    aspect-ratio: 1920 / 289;
  }
  .satsuki-box__row--7{
    background-image: url("../img/restaurant/restaurant2_r7_c1.jpg");
    aspect-ratio: 1920 / 1343;
      background-position: top center;
      background-size: contain;
      background-repeat: no-repeat;
  }
  .satsuki-box__row--8{
    background-image: url("../img/restaurant/restaurant_r8_c1.jpg");
    aspect-ratio: 1920 / 295;
  }
  .satsuki-box__row--9{
    background-image: url("../img/restaurant/restaurant2_r9_c1.jpg");
    aspect-ratio: 1920 / 1366;
            background-position: top center;
      background-size: contain;
      background-repeat: no-repeat;
  }
  .satsuki-box__row--10{
    background-image: url("../img/restaurant/restaurant_r10_c1.jpg?2");
    aspect-ratio: 1920 / 271;
  }
  .satsuki-box__row--11{
    background-image: url("../img/restaurant/restaurant2_r11_c1.jpg");
    aspect-ratio: 1920 / 1271;
  }
  .satsuki-box__row--12{
    background-image: url("../img/restaurant/restaurant_r12_c1.jpg");
    aspect-ratio: 1920 / 456;
  }
  .satsuki-box__row--13{
    background-image: url("../img/restaurant/restaurant_r13_c1.jpg");
    aspect-ratio: 1920 / 424;
  }
    
    /*とりあえず追加で乗り切るタイプのcss*/
    /* --- 和食 jp-box 設定 --- */

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

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

/* 選択中のボタンを少し大きく、明るく保持 */
#btn-jp2:checked ~ .jp2, 
#btn-jp3:checked ~ .jp3 {
  transform: scale(1.05);
  filter: brightness(1.1);
  z-index: 12;
}

/* 背景リセット用の透明ラベル */
.back-to-init {
  position: absolute;
  inset: 0;
  z-index: 1;
  cursor: default;
  display: block;
}

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

.jp1, .jp2, .jp3 { aspect-ratio: 176 / 88; position: absolute; }

.jp1 {
  width: 92%;
  top: 0%;
  left: 8.0%;
  max-width: 1760px;
  z-index: 2;
  pointer-events: none; /* 背後のリセットボタンにクリックを通す */
}

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

.jp2:hover, .jp3:hover {
  transform: scale(1.05);
  z-index: 11;
}

/* ボタンの位置 */
.jp2 { top: 70.5%; left: 50%; }
.jp3 { top: 73.5%; left: 72.5%; }

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

/* テキストエリア */
.jp-txt {
  background-image: url(../img/restaurant/jp-txt.png);
  aspect-ratio: 661 / 351;
  background-size: cover;
  position: absolute;
  width: 34%;
  top: 56.8%;
  left: 14%;
  z-index: 4;
}
    
/* --- 中華 ch-box 設定 --- */

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

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

/* 選択中のボタンを少し大きく、明るく保持 */
#btn-ch2:checked ~ .ch2, 
#btn-ch3:checked ~ .ch3 {
  transform: scale(1.05);
  filter: brightness(1.1);
  z-index: 12;
}

/* 背景リセット用の透明ラベル（jp-boxと共通のクラス名でOK） */
.ch-box .back-to-init {
  position: absolute;
  inset: 0;
  z-index: 1;
  cursor: default;
  display: block;
}

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

.ch1, .ch2, .ch3 { aspect-ratio: 176 / 88; position: absolute; }

.ch1 {
  width: 92%;
  top: 0%;
  left: 0%;
  max-width: 1760px;
  z-index: 2;
  pointer-events: none; /* 背後のリセットボタンにクリックを通す */
}

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

.ch2:hover, .ch3:hover {
  transform: scale(1.05);
  z-index: 11;
}

/* ボタンの位置 */
.ch2 { top: 77.3%; left: 6.5%; }
.ch3 { top: 74.5%; left: 29%; }

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

/* テキストエリア */
.ch-txt {
  background-image: url(../img/restaurant/ch-txt.png);
  aspect-ratio: 661 / 351;
  background-size: cover;
  position: absolute;
  width: 34%;
  top: 60%;
  left: 52%;
  z-index: 4;
}
    
    /* --- 朝食 bf-box 設定 --- */

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

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

/* 選択中のボタンを少し大きく、明るく保持 */
#btn-bf2:checked ~ .bf2, 
#btn-bf3:checked ~ .bf3 {
  transform: scale(1.05);
  filter: brightness(1.1);
  z-index: 12;
}

/* 背景リセット用の透明ラベル */
.bf-box .back-to-init {
  position: absolute;
  inset: 0;
  z-index: 1;
  cursor: default;
  display: block;
}

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

.bf1, .bf2, .bf3 { aspect-ratio: 176 / 88; position: absolute; }

.bf1 {
  width: 92%;
  top: 0%;
  left: 8.0%;
  max-width: 1760px;
  z-index: 2;
  pointer-events: none; /* 背後のリセットボタンにクリックを通す */
}

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

.bf2:hover, .bf3:hover {
  transform: scale(1.05);
  z-index: 11;
}

/* ボタンの位置 */
.bf2 { top: 69.5%; left: 50%; }
.bf3 { top: 72.5%; left: 72.5%; }

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

/* テキストエリア */
.bf-txt {
  background-image: url(../img/restaurant/bf-txt.png);
  aspect-ratio: 661 / 450;
  background-size: cover;
  position: absolute;
  width: 34%;
  top: 55.8%;
  left: 14%;
  z-index: 4;
}
    
/* --- ランチ la-box 設定 --- */

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

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

/* 選択中のボタンを少し大きく、明るく保持 */
#btn-la2:checked ~ .la2, 
#btn-la3:checked ~ .la3 {
  transform: scale(1.05);
  filter: brightness(1.1);
  z-index: 12;
}

/* 背景リセット用の透明ラベル */
.la-box .back-to-init {
  position: absolute;
  inset: 0;
  z-index: 1;
  cursor: default;
  display: block;
}

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

.la1, .la2, .la3 { aspect-ratio: 176 / 88; position: absolute; }

.la1 {
  width: 92%;
  top: 0%;
  left: 0%;
  max-width: 1760px;
  z-index: 2;
  pointer-events: none; /* 背後のリセットボタンにクリックを通す */
}

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

.la2:hover, .la3:hover {
  transform: scale(1.05);
  z-index: 11;
}

/* ボタンの位置 */
.la2 { top: 77.3%; left: 6.5%; }
.la3 { top: 74.5%; left: 29%; }

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

/* テキストエリア */
.la-txt {
  background-image: url(../img/restaurant/la-txt.png);
  aspect-ratio: 661 / 351;
  background-size: cover;
  position: absolute;
  width: 34%;
  top: 60%;
  left: 52%;
  z-index: 4;
}
    
    }