/* ==============================
   ScrollStage 専用CSS
============================== */

.scroll-stage{
  position: relative;
  height: 600vh;
}

.sticky-frame{
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  z-index: 1;
  background: transparent;
}

.slide-img{
  position: absolute;
  inset: 0;
  width: 100%;
  object-fit: cover;
  opacity: 0;
  will-change: transform, opacity;

  -webkit-mask-image: radial-gradient(
    ellipse 70% 60% at center,
    rgba(0,0,0,1) 45%,
    rgba(0,0,0,0) 85%
  );
  mask-image: radial-gradient(
    ellipse 70% 60% at center,
    rgba(0,0,0,1) 45%,
    rgba(0,0,0,0) 85%
  );
}

/* ==============================
   テキスト装飾
============================== */
.text-block{
 max-width:900px;
 position: relative;
 height: 100vh;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 text-align: center;
 z-index: 5;
 }
 
.text-block img{ 
max-width: 200px;
 width: 40%;
 height: auto;
 margin-top: 30px;
 border-radius: 16px;
 box-shadow: 0 20px 40px rgba(0,0,0,0.15);
 }

/* 全体の本文 */
.text-block p{
  font-family: "Zen Kaku Gothic New", sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: 0.12em !important;
  line-height: 2.1 !important;
  font-size: 0.95rem !important;
}

.text-block-1 h1{
  font-family: "Helvetica Neue", sans-serif!important;
  font-weight: 400;
  letter-spacing: 0.28em;
  color: #06b6d4!important;
  font-size: 42px;
}


#scrollStage .text-block.block-1 h1{
  font-family: "Helvetica Neue", sans-serif!important;
  font-size: 2.5rem !important;
  color: #06b6d4!important;
  font-weight: 400 !important;
}

#scrollStage h2{
  font-size: 2.5rem;
  color: #ff007f !important;
}

#scrollStage h3{
  font-size: 1.8rem;
  color: #000 !important;
}

#scrollStage h4{
  font-size: 1.3rem;
  color: #06b6d4!important;
}

#scrollStage .text-block.block-2 h1{
  font-family: "Helvetica Neue", sans-serif!important;
  font-size: 2.5rem !important;
  color: #06b6d4!important;
  font-weight: 400 !important;
}

#scrollStage .text-block.block-3 h1{
  font-family: "Helvetica Neue", sans-serif!important;
  font-size: 2.5rem !important;
  color: #06b6d4!important;
  font-weight: 400 !important;
}

#scrollStage .text-block.block-4 h1{
  font-family: "Helvetica Neue", sans-serif!important;
  font-size: 2.5rem !important;
  color: #06b6d4!important;
  font-weight: 400 !important;
}
/* ==============================
   予約テーブル（完全整理版）
============================== */

#reservation-table{
  width: 100%;
  margin-top: 60px;
}

/* 横スクロールはここだけ */
.reserve-wrap{
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* テーブル本体 */
.reserve-table{
  border-collapse: collapse;
  min-width: 1100px; /* 2週間分 */
  text-align: center;
}

/* 共通セル */
.reserve-table th,
.reserve-table td{
  border: 1px solid #ddd;
  padding: 10px;
  white-space: nowrap;
}

/* 時間列 */
.time-col{
  background: #f5f5f5;
  font-weight: bold;
}

/* 予約可能 */
.reserve-table td.available{
  background: #d4f8d4 !important;
  font-weight: bold;
  cursor: pointer;
}

.reserve-table td.available:hover{
  background: #7be27b !important;
}

/* 予約不可 */
.reserve-table td.unavailable{
  background: #f0f0f0 !important;
  color: #bbb !important;
}

/* 曜日表示 */
.weekday{
  font-size: 12px;
  color: #666;
}

/* ==============================
   スマホ最適化
============================== */

@media (max-width:768px) {


  #scrollStage .text-block h1{
    font-size:2.2rem !important;
  }

  #scrollStage h2{
    font-size:1.8rem !important;
  }

  /* テーブル幅を少し縮める */
  .reserve-table{
    min-width:900px;
  }
}

.price-section{
 max-width: 600px;
 margin: 120px auto;
 /* 中央寄せ */ 
padding: 60px 40px;
 background: #ffffff;
 border-radius: 20px;
 box-shadow: 0 20px 40px rgba(0,0,0,0.1);
 text-align: center;
 }

 .price-section h1{ 
margin-bottom: 40px;
 font-size: 2.5rem;
 }

 .price-list{
 list-style: none;
 padding: 0;
 margin: 0;
 }

 .price-list li{
 display: flex;
 justify-content: space-between;
 padding: 15px 0;
 border-bottom: 1px solid #eee;
 font-size: 1.2rem;
 }

 .menu-name{
 font-weight: 600;
 } 

.menu-price{
 font-weight: 700;
 color: #06b6d4;
 }

 .store-info-section{
 max-width: 700px;
 margin: 120px auto;
 text-align: center;
 }

 .store-info-card{
 margin-top: 50px;
 padding: 60px 40px;
 background: #ffffff;
 border-radius: 20px;
 box-shadow: 0 20px 40px rgba(0,0,0,0.08);
 text-align: left;
 } 

.store-row{
 display: flex;
 justify-content: space-between;
 align-items: flex-start;
 padding: 18px 0;
 border-bottom: 1px solid #f0f0f0;
 }

 .store-row:last-child{
 border-bottom: none;
 } 

.info-label{
 font-weight: 600;
 color: #06b6d4;
 min-width: 120px;
 }

 .info-content{
 flex: 1;
 text-align: right;
 }

.store-info-card a{
 color: #06b6d4;
 text-decoration: none;
 font-weight: 600;
 } 

.store-info-card a:hover{
 opacity: 0.7;
 }

 .scroll-indicator{
 position: absolute;
 top: 75%;
 left: 50%;
 transform: translateX(-50%);
text-align: center;
 color: white;
 color: #06b6d4;
 background: rgba(255,255,255,0.7);
 padding: 8px 14px;
 border-radius: 20px;
 backdrop-filter: blur(4px);
 z-index: 0; font-size: 14px;
 letter-spacing: 2px;
 animation: fadeIn 2s ease forwards;
 }

 .scroll-indicator .arrow{
 width: 2px;
 height: 40px;
 margin: 10px auto 0;
 z-index: 0;
 background: white;
 position: relative;
 } 

.scroll-indicator .arrow::after{
 content: "";
 position: absolute;
 bottom: -6px;
 left: -4px;
 width: 10px;
 height: 10px;
 z-index: 0;
 color: #06b6d4;
 border-left: 2px solid white;
 border-bottom: 2px solid white;
 transform: rotate(-45deg);
 } 

.scroll-indicator .arrow{
 background: #0ea5a4;
 } 

.scroll-indicator .arrow::after{
 border-left: 2px solid #10b981;
 border-bottom: 2px solid #10b981;
 }

 /* ゆらゆらアニメーション */
.scroll-indicator{
 animation: bounce 2s infinite;
 }

/* 電話ボタン */

.call-row{
  align-items: center;
}

.call-button{
  display: inline-block;
  background: #06b6d4;
  color: #fff !important;
  padding: 16px 28px;
  font-size: 1.4rem;
  font-weight: 700;
  border-radius: 12px;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  transition: all 0.2s ease;
}

.call-button:hover{
  background: #0ea371;
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.2);
}

/* スマホではさらに大きく */
@media (max-width:768px){
  .call-button{
    width: 90%;
    text-align: center;
    font-size: 1.4rem;
    padding: 20px;
  }
}

}