/* CSS Document */
.wf-loading body {
  opacity: 0;
}

.wf-active body,
.wf-inactive body {
  opacity: 1;
  transition: opacity 0.5s ease;
}

body{
  width: 100%;
  overflow-x: hidden;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* common
------------------------------------------------------------*/

.mb0{
  margin-bottom: 0 !important;
}

.contents{
  width: 100%;
  max-width: 1220px;
  margin: 0 auto;
  padding: 0 20px;
}

.sub_kv{
  width: 100%;
  height: 460px;
  background: linear-gradient(180deg, #416759 0%, #274D3F 100%);
  padding-top: 68px;
  overflow: hidden;
  position: relative;
}

.sub_kv_cloud{
  width: 1440px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 68px;
}

.sub_kv_cloud li{
  position: absolute;
  z-index: 1;
}

.sub_kv_cloud li:nth-child(1){
  top: 182px;
  left: 22px;
}
.sub_kv_cloud li:nth-child(2){
  top: 148px;
  left: 278px;
}
.sub_kv_cloud li:nth-child(3){
  top: 87px;
  right: 54px;
}
.sub_kv_cloud li:nth-child(4){
  top: 234px;
  right: 129px;
}

.sub_kv .sub_kv_inner{
  display: flex;
  justify-content: center;
  align-items: center;;
  flex-wrap: wrap;
  height: 100%;
  flex-direction: column;
  position: relative;
  z-index: 2;
}

.sub_kv .sub_kv_inner h2{
  color: #FFF;
  text-align: center;
  font-family: new-spirit, serif;
  font-size: 48px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 1.92px;
  width: 100%;
}

.sub_kv .sub_kv_inner p{
  color: #FFF;
  font-family: source-han-serif-japanese, serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 180%; /* 27px */
  letter-spacing: 1.2px;
  width: 100%;
  text-align: center;
  margin-top: 25px;
}

.anc{
  display: block;
  padding-top: 68px;
  margin-top: -68px;
  height: 1px;
}

@media screen and (max-width: 768px) {
  .contents{
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 24px;
  }

  .sub_kv{
    width: 100%;
    height: 320px;
    background: linear-gradient(180deg, #416759 0%, #274D3F 100%);
    padding-top: 54px;
  }

  .sub_kv_cloud{
    width: 100%;
    position: absolute;
    left: 0%;
    transform: translateX(-0%);
    top: 54px;
  }

  .sub_kv_cloud li{
    position: absolute;
    z-index: 1;
  }

  .sub_kv_cloud li:nth-child(1){
    width: 55px;
    top: 24px;
    left: 39px;
  }
  .sub_kv_cloud li:nth-child(2){
    width: 106px;
    top: 45px;
    left: -53px;
  }
  .sub_kv_cloud li:nth-child(3){
    width: 210px;
    top: 36px;
    right: -98px;
  }
  .sub_kv_cloud li:nth-child(4){
    width: 61px;
    top: 219px;
    right: -9px;
  }


  .sub_kv .sub_kv_inner h2{
    font-size: 36px;
    letter-spacing: 1.44px;
  }

  .sub_kv .sub_kv_inner p{
    font-size: 13px;
    font-weight: 700;
    line-height: 180%; /* 23.4px */
    letter-spacing: 1.04px;
    width: 100%;
    text-align: center;
    margin-top: 15px;
  }

  .anc{
    padding-top: 56px;
    margin-top: -56px;
  }
}

.sub_contents .head_image{
  width: 100%;
  height: 380px;
  background: url(../images/menu/kv.jpg) no-repeat center center;
  background-size: cover;
}

.sub_contents .head_image.party{
  background: url(../images/party/kv.jpg) no-repeat center center;
  background-size: cover;
}

.sub_contents .head_image.ambience{
  background: url(../images/ambience/kv.jpg) no-repeat center center;
  background-size: cover;
}

.sub_contents .head_image.access{
  background: url(../images/access/kv.jpg) no-repeat center center;
  background-size: cover;
}

.sub_contents .head_image.reservation{
  background: url(../images/reservation/kv.jpg) no-repeat center center;
  background-size: cover;
}

.sub_contents .sub_contents_inner{
  width: calc(100% - 40px);
  max-width: 1360px;
  margin: 0 auto 200px;
  padding: 0 20px;
  background: #FFF;
  border-radius: 6px;
  position: relative;
  top: -60px;
  padding-top: 100px;
}

.sub_contents .sub_contents_inner.top0{
  top: 0;
}

.sub_contents .sub_contents_inner.mb_min{
  margin-bottom: 150px;
}

.sub_contents h2{
  color: #254B3D;
  text-align: center;
  font-family: new-spirit, serif;
  font-size: 48px;
  font-weight: 500;
  line-height: 100%; /* 72px */
  letter-spacing: 1.92px;
}

.sub_contents h2 span{
  display: block;
  width: 19px;
  margin: 0 auto 10px;
}

.ambience_area03{
  margin-top: 240px;
}

@media screen and (max-width: 768px) {

  .sub_contents .head_image{
    width: 100%;
    height: 190px;
    background: url(../images/menu/kv.jpg) no-repeat center center;
    background-size: cover;
  }

  .sub_contents .head_image.party{
    background: url(../images/party/kv.jpg) no-repeat center center;
    background-size: cover;
  }

  .sub_contents .head_image.ambience{
    background: url(../images/ambience/kv.jpg) no-repeat center center;
    background-size: cover;
  }

  .sub_contents .head_image.access{
    background: url(../images/access/kv.jpg) no-repeat center center;
    background-size: cover;
  }

  .sub_contents .head_image.reservation{
    background: url(../images/reservation/kv.jpg) no-repeat center center;
    background-size: cover;
  }

  .sub_contents .sub_contents_inner{
    width: calc(100% - 48px);
    max-width: 100%;
    margin: 0 auto 80px;
    padding: 0 ;
    top: -48px;
    padding-top: 48px;
  }

  .sub_contents .sub_contents_inner.top0{
    top: 0;
    padding-top: 0;
  }

  .sub_contents .sub_contents_inner.mb_min{
    margin-bottom: 30px;
  }

  .sub_contents h2{
    font-size:  32px;
    font-weight: 500;
    letter-spacing: 1.28px;
  }

  .ambience_area03{
    margin-top: 0px;
  }
}

/*/common------------------------------------------------------------*/

/* TOP KV アニメーション
------------------------------------------------------------*/
.top-kv .txt{
  font-size: 14px;
  font-family: source-han-serif-japanese, serif;
  font-weight: 500;
  color: #FFF;
  position: absolute;
  left: 0;
  bottom: 100px;
  width: 100%;
  text-align: center;
  z-index: 5;
}

.top-kv .txt .r{
  display: inline-block;
  color: #D1180A;
  margin-right: 7px;
}

.top-kv .txt .g{
  display: inline-block;
  color: #179D4C;
  margin-left: 7px;
}

.top-kv .btm_cloud{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -120px;
  width: 100%;
  height: 234px;
  z-index: 2;
  background: url(../images/top/btm_cloud.png) repeat-x center bottom;
  background-size: 3372px 234px;
}

.top-kv .btm_cloud img{
  max-width: none;;
}

.top-kv__center{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  z-index: 1;
}

.top-kv__center svg {
  /* 回転のアニメーション設定 */
  /* 20s = 20秒で1回転（ここを大きくするとより遅くなります） */
  animation: rotation 80s linear infinite;

  /* 回転の中心をSVGの中心に設定 */
  transform-origin: center;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@media screen and (max-width: 768px) {
  .top-kv .btm_cloud{
    bottom: -110px;
    width: 882px;
    z-index: 2;
    max-width: none;
    background: none;
  }

  .top-kv__center svg {
    width: 395px;
    height: auto;
    max-width: none;
  }

  .top-kv .txt{
    bottom: 120px;
  }
}
/* 鳥と雲 */
.top-kv {
  position: relative;
  overflow: hidden; /* 画面外にはみ出た雲を隠す */
}

/* --- アニメーションパーツの親枠 --- */
.kv-assets {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2; /* ロゴなどのメイン要素より下にする */
  pointer-events: none; /* 雲や鳥をクリックできないようにする（誤動作防止） */
}

/* --- 雲・鳥の共通設定 --- */
.asset-cloud,
.asset-bird {
  position: absolute;
  z-index: 2;
}
.asset-cloud img,
.asset-bird img {
  width: 100%;
  height: auto;
  display: block;
}

/* --- 個別の初期位置（パーセントで指定するとレスポンシブに強いです） ---
.cloud-01 {
  width: 119px;
  top: 18.3%;
  left: 19.305%;
}
.cloud-02 {
  top: 24.523%;
  left: 2.361%;
  width: 331px;
}
.cloud-03 {
  top: 26.54%;
  right: 33.3%;
  width: 123px;
}

.cloud-04 {
  top: 12.26%;
  right: -5.83%;
  width: 420px;
}

.cloud-05 {
  top: 35.71%;
  right: 14.583%;
  width: 316px;
}
.cloud-06 {
  top: 35.71%;
  right: 14.583%;
  width: 260px;
}
.cloud-07 {
  top: 35.71%;
  right: 14.583%;
  width: 269px;
}
/* ...他の雲も同様に配置... */

.bird-01 {
  top: 76.904%;
  left: 5.972%;
  width: 36px;
}
.bird-02 {
  top: 63.69%;
  right: 1.94%;
  width: 37px;
}
.bird-03 {
  top: 72.97%;
  right: 38.95%;
  width: 28px;
}
/* ...他の鳥も同様に配置... */

/* =======================================
   1. 待ち時間を極限まで減らした横移動
   （画面のすぐ外 -15% から、逆のすぐ外 110% へ）
======================================= */
@keyframes fly-ltr {
  0%   { left: -15%; }
  100% { left: 110%; }
}
@keyframes fly-ltr2 {
  0%   { left: -25%; }
  100% { left: 110%; }
}
@keyframes fly-rtl {
  0%   { right: -15%; }
  100% { right: 110%; }
}
@keyframes fly-rtl2 {
  0%   { right: -25%; }
  100% { right: 110%; }
}

/* =======================================
   2. 各パーツの設定（スピードゆったり）
   ★カンプの配置になるよう、delayを計算済！
======================================= */
/* --- 左から右へ（LTR） --- */
.cloud-01 {
  width: 119px;
  top: 18.3%;
  animation: fly-ltr 120s linear infinite;
  animation-delay: -33s; /* 19.3%の位置から逆算 */
}
.cloud-02 {
  width: 331px;
  top: 24.523%;
  animation: fly-ltr2 100s linear infinite;
  animation-delay: -14s; /* 2.3%の位置から逆算 */
}
.bird-01 {
  width: 36px;
  top: 76.904%;
  animation: fly-ltr 80s linear infinite;
  animation-delay: -13s; /* 5.9%の位置から逆算 */
}

/* --- 右から左へ（RTL） --- */
.cloud-03 {
  width: 123px;
  top: 26.54%;
  animation: fly-rtl 130s linear infinite;
  animation-delay: -50s; /* 33.3%の位置から逆算 */
}
.cloud-04 {
  width: 420px;
  top: 12.26%;
  animation: fly-rtl 110s linear infinite;
  animation-delay: -8s; /* -5.83%の位置から逆算 */
}
.cloud-05 {
  width: 316px;
  top: 35.71%;
  animation: fly-rtl2 110s linear infinite;
  animation-delay: -17s; /* 4.58%の位置から逆算 */
}
.cloud-06 {
  width: 260px;
  top: 65.71%;
  animation: fly-rtl2 120s linear infinite;
  animation-delay: -15s; /* 4.58%の位置から逆算 */
}
.cloud-07 {
  width: 269px;
  top: 68.71%;
  animation: fly-rtl2 100s linear infinite;
  animation-delay: -23s; /* 4.58%の位置から逆算 */
}
.bird-02 {
  width: 37px;
  top: 63.69%;
  animation: fly-rtl 60s linear infinite;
  animation-delay: -9s; /* 1.94%の位置から逆算 */
}
.bird-03 {
  width: 28px;
  top: 72.97%;
  animation: fly-rtl 60s linear infinite;
  animation-delay: -26s; /* 38.95%の位置から逆算 */
}


/* =======================================
   3. 子要素(img)で上下にフワフワ
   （スタートのタイミングと方向を完全にバラす）
======================================= */
.asset-cloud img,
.asset-bird img {
  animation: floatY 4s ease-in-out infinite alternate;
}

@keyframes floatY {
  0%   { transform: translateY(-10px); }
  100% { transform: translateY(10px); }
}

/* 揺れのリズム(duration)だけでなく、
  開始位置(delay)と、動く方向(direction)を混ぜる！
*/

.cloud-01 img {
  animation-duration: 5s;
  animation-delay: -2.5s; /* 中間からスタート（最初は平行気味に動く） */
}
.cloud-02 img {
  animation-duration: 7s;
  animation-direction: alternate-reverse; /* 最初は下から上へ向かう */
}
.cloud-03 img {
  animation-duration: 6s;
  animation-delay: -1.5s; /* 少しズレて下がる */
}
.cloud-04 img {
  animation-duration: 8s;
  animation-delay: -4s; /* 中間からスタート */
  animation-direction: alternate-reverse;
}
.cloud-05 img,
.cloud-06 img,
.cloud-07 img{
  animation-duration: 9s;
  animation-delay: -6s;
}


/* 鳥も同様にバラバラに */
.bird-01 img  {
  animation-duration: 3s;
  animation-delay: -1.5s; /* 平行気味にスタート */
}
.bird-02 img  {
  animation-duration: 2.5s;
  animation-direction: alternate-reverse; /* 上に向かってスタート */
}
.bird-03 img  {
  animation-duration: 3.5s;
  animation-delay: -1s;
}

@keyframes floatY {
  0%   { transform: translateY(-10px); }
  100% { transform: translateY(10px); }
}
@media screen and (max-width: 768px) {
  /* --- 左から右へ（LTR） --- */
  .cloud-01,
  .cloud-01 img{
    width: 60px;
    height: auto;
  }
  .cloud-02,
  .cloud-02 img{
    width: 165px;
    height: auto;
  }
  .bird-01,
  .bird-01 img{
    width: 20px;
    height: auto;
  }

  /* --- 右から左へ（RTL） --- */
  .cloud-03,
  .cloud-03 img{
    width: 61px;
    height: auto;
  }
  .cloud-04,
  .cloud-04 img{
    width: 210px;
    height: auto;
  }
  .cloud-05,
  .cloud-05 img{
    width: 153px;
    height: auto;
  }
  .cloud-06,
  .cloud-06 img{
    width: 126px;
    height: auto;
  }
  .cloud-07,
  .cloud-07 img{
    width: 130px;
    height: auto;
  }
  .bird-02,
  .bird-02 img{
    width: 20px;
  }
  .bird-03,
  .bird-03 img{
    width: 18px;
  }

  .cloud-05 {
    top: 50.71%;
  }
  .cloud-06 {
    top: 65.71%;
  }
  .cloud-07 {
    top: 68.71%;
  }
  .
}
/*------------------------------------------------------------*/

/* TOP
------------------------------------------------------------*/
.top-kv{
  width: 100%;
  height: 100vh;
  min-height: 500px;
  background: linear-gradient(180deg, #416759 0%, #274D3F 100%);
  overflow: hidden;
  position: relative;
}

.top-kv__inner{
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
  width: 100%;
  max-width: 1185px;
  margin: 0 auto;
  position: relative;
  z-index: 3;
  height: 100%;
  justify-content: space-between;
  align-items: center;
}

@media screen and (max-width: 768px) {
  .top-kv{
    height: 650px;
    min-height: 650px;
  }

  .top-kv__inner{
    padding: 0 0px;
    width: 293px;

  }
}

.news-ticker {
  width: 100%;
  background-color: #8b1000;
  overflow: hidden;
  padding: 15px 0;
}

.news-ticker__inner {
  display: flex;
  /*width: max-content; 一旦消し*/
  width: 100%;
  justify-content: center;
}

.news-list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  /*animation: ticker 30s linear infinite; 一旦消し*/
}

.news-item,
.news-item .title{
  display: flex;
  align-items: center; /* テキスト（.date, .title）の中央揃え */
  color: #fff;
  font-size: 13px;
  white-space: nowrap;
  padding: 0 40px; /* 左右の余白 */
  position: relative;
  line-height: 100%; /* 13px */
  letter-spacing: 0.52px;
}

/* 区切り線（バー）の再現 - 修正版 */
.news-item::after {
  content: "|";
  position: absolute;
  right: 0;
  color: #fff;
  opacity: 0.8;
  /* 垂直方向の中央揃えを強制 */
  top: 50%;
  transform: translateY(-50%);
  /* パイプ文字のフォントをサンセリフに固定 */
}

.news-item.after_none::after {
  display: none;
}

.news-item .date {
  margin-right: 24px;
}


/* アニメーションの設定 */
@keyframes ticker {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* マウスホップで一時停止 */
.news-ticker:hover .news-list {
  animation-play-state: paused;
}

.top-concept{
  display: flex;
  justify-content: space-between;
  margin-top: 280px;
  align-items: flex-start;
  width: 100%;
  /*overflow: clip;*/
}

.top-concept .top-concept__l{
  width: 496px;
  padding-right: 30px;
}

.top-concept .top-concept__l li{
  margin-bottom: 56px;
}

.top-concept .top-concept__l li{
  position: relative;
}

.top-concept .top-concept__l li > img{
  position: relative;
  z-index: 2;
}

.top-concept .top-concept__l li .bg{
  position: absolute;
  left: 472px;
  top: -14px;
  z-index: 1;
}

.top-concept .top-concept__l li .bg .icon{
  position: absolute;
  right: 280px;
  top: -0px;
  transition: top 1.6s ease-in-out;
}

.top-concept .top-concept__l li .bg .icon.active{
  top: -40px;
}

.top-concept .top-concept__l li .bg span{
  position: relative;
  z-index: 3;
}

.top-concept .top-concept__l li .bg img{
  max-width: none;;
}

.top-concept .top-concept__l li:last-child{
  margin-bottom: 0;
}

.top-concept .top-concept__r{
  width: 580px;
  padding-top: 0px;
  position: sticky;
  top: 100px;
  z-index: 2;
}

.top-concept .top-concept__r h3{
  color: #254B3D;
  font-family: new-spirit, serif;
  font-size: 48px;
  font-weight: 500;
  line-height: 100%; /* 72px */
  letter-spacing: 1.92px;
  position: relative;
}

.top-concept .top-concept__r h3 span{
  position: absolute;
  left: 0;
  top: -29px;
}

.top-concept .top-concept__r .txt01{
  margin-top: 45px;
  font-family: source-han-serif-japanese, serif;
  font-size: 32px;
  font-weight: 700;
  line-height: 150%; /* 57.6px */
  letter-spacing: 1.28px;
}

.top-concept .top-concept__r .txt02{
  margin-top: 30px;
  font-size: 15px;
  font-weight: 400;
  line-height: 175%; /* 22.5px */
  letter-spacing: 0.6px;
}

.top-concept .top-concept__r .txt02 span{
  display: block;
  margin-bottom: 15px;
}

.top-pic{
  display: flex;
  justify-content: space-between;
  margin-top: 240px;
  align-items: top;
  position: relative;
  z-index: 2;
  gap: 20px;
}

.top-pic .bg{
  left: -120px;
  top: -164px;
  position: absolute;
}

.top-pic .top-pic__l{
  padding-left: 112px;
  padding-top: 326px;
}

.top-pic .top-pic__r{
  position: relative;
  z-index: 3;
}

.top-illust{

  width: 100%;
  height: 843px;
  background: url(../images/top/btm_cloud.png) repeat-x center 680px, linear-gradient(180deg, #416759 0%, #274D3F 100%);
  background-size: 3372px auto;
  overflow: hidden;
  position: relative;
  top: -120px;
}

/* =======================================================
   top-illust アニメーション（KV風のフワフワ＆シームレス横移動）
======================================================= */

/* 大枠の設定（はみ出た雲を隠す） */
.top-illust {
  position: relative;
  overflow: hidden;
  /* 背景などの元の設定はそのまま残してOK */
}

/* 1. 元々の「グループごとの横移動」をキャンセル */
.top-illust .anim-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  animation: none !important; /* 元の横移動をストップ */
  transform: none !important;
}

.top-illust ul {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}

.top-illust li {
  position: absolute;
}

.top-illust li img {
  width: 100%;
  height: auto;
  display: block;
}

/* 2. 新しい横移動のキーフレーム（画面の端から端へ） */
@keyframes fly-ltr-illust {
  0%   { left: -20%; }
  100% { left: 120%; }
}
@keyframes fly-rtl-illust {
  0%   { right: -20%; }
  100% { right: 120%; }
}

/* 3. 各アイテムの横移動設定（スピードとスタート位置をバラバラにする） */
/* ※ animation-delayのマイナス値で、初期表示位置をずらしています */
.top-illust .cloud li:nth-child(1) { width: 100px;  top: 24%; animation: fly-ltr-illust 120s linear infinite; animation-delay: -30s; }
.top-illust .cloud li:nth-child(2) { width: 421px; top: 32%; animation: fly-ltr-illust 140s linear infinite; animation-delay: -10s; }
.top-illust .cloud li:nth-child(3) { width: 119px;  top: 12%; animation: fly-rtl-illust 130s linear infinite; animation-delay: -50s; }
.top-illust .cloud li:nth-child(4) { width: 284px; top: 15%; animation: fly-rtl-illust 135s linear infinite; animation-delay: -15s; }
.top-illust .cloud li:nth-child(5) { width: 119px;  top: 48%; animation: fly-rtl-illust 85s linear infinite; animation-delay: -55s; }

.top-illust .bird01 li:nth-child(1) { width: 28px;   top: 46%; animation: fly-rtl-illust 80s linear infinite; animation-delay: -13s; }
.top-illust .bird01 li:nth-child(2) { width: 37px; top: 55%; animation: fly-rtl-illust 85s linear infinite; animation-delay: -9s; }
.top-illust .bird02 li:nth-child(1) { width: 36px; top: 58%; animation: fly-ltr-illust 70s linear infinite; animation-delay: -40s; }

/* 4. 画像自体の上下フワフワアニメーション */
@keyframes floatY-illust {
  0%   { transform: translateY(-10px); }
  100% { transform: translateY(10px); }
}

.top-illust li img {
  animation: floatY-illust 4s ease-in-out infinite alternate;
}

/* フワフワのタイミング・向きをずらして自然に見せる */
.top-illust .cloud li:nth-child(1) img { animation-duration: 5s; animation-delay: -2s; }
.top-illust .cloud li:nth-child(2) img { animation-duration: 7s; animation-direction: alternate-reverse; }
.top-illust .cloud li:nth-child(3) img { animation-duration: 6s; animation-delay: -1.5s; }
.top-illust .cloud li:nth-child(4) img { animation-duration: 8s; animation-direction: alternate-reverse; }
.top-illust .cloud li:nth-child(5) img { animation-duration: 9s; animation-delay: -4s; }

.top-illust .bird01 li:nth-child(1) img { animation-duration: 3s; }
.top-illust .bird01 li:nth-child(2) img { animation-duration: 3.5s; animation-direction: alternate-reverse; }
.top-illust .bird02 li:nth-child(1) img { animation-duration: 2.5s; animation-delay: -1s; }

/* --- コンテンツエリア全体 --- */
/* --- コンテンツエリア全体 --- */
.top-main {
  position: relative;
  z-index: 3;
  width: calc(100% - 96px);
  max-width: 1344px;
  padding: 0 ;
  margin: 0 auto;
  padding-top: 175px;
  margin: -208px auto 0;
  background: #FFF;
  border-radius: 6px 6px 0 0;
}

.top-main .icon{
  text-align: center;
  padding-bottom: 150px;
}

.top-main .icon svg{
  display: inline;
}

/* --- 各項目のリンクパネル（ここがパララックスの要！） --- */

.content-item {
  position: sticky; /* ★追加：画面上部にくっつく魔法 */
  top: 0;           /* ★追加：画面の[上端]でピタッと止まる */

  display: block;
  width: 100%;
  max-width: 994px;
  /* 高さはお好みですが、パララックス感を出すなら
     画面いっぱい（100vh）や、高め（400px〜600px）にするのが最近のトレンドです。
     （元の 280px のままでも被さる動きはちゃんと機能します！） */
  height: 464px; /* または 400px など */

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  text-decoration: none;
  color: #fff;
  text-decoration: none;
  top: 68px;
  margin:0 auto 120px;
  border-radius: 6px;
}

.content-item:hover{
  text-decoration: none;
}

/* --- 中のテキストと矢印の配置 --- */
.content-item__inner {
  position: relative;
  z-index: 2; /* 黒フィルターより手前に文字を出す */
  display: flex;
  justify-content: space-between; /* 左右に振り分ける */
  align-items: center; /* 上下中央揃え */
  width: 100%;
  max-width: 100%; /* テキストが左右に広がりすぎないように制限 */
  margin: 0 auto;
  height: 100%;
  padding: 0 110px; /* 画面が狭い時の左右の余白 */
  box-sizing: border-box;
}

.text-box {
  flex: 1;
}

.content-item__inner .title {
  color: #FFF;
  font-family: new-spirit, serif;
  font-size: 40px;
  font-weight: 500;
  line-height: 140%; /* 56px */
  letter-spacing: 1.6px;
}

.content-item__inner .desc {
  color: #FFF;
  font-size: 15px;
  font-weight: 400;
  line-height: 150%; /* 22.5px */
  letter-spacing: 1.2px;
}

.content-item__inner .arrow {
  transition: transform 0.3s ease;
}

/* ホバー時に矢印が右にスッと動くアニメーション */
.content-item:hover .arrow {
  transform: translateX(10px);
}

main.top{
  padding-bottom: 350px;
  background: url(../images/top/main_bg.png) repeat-x center bottom;
  background-size:4380px auto ;
}

.content-item.item1 {
  background-image: url('../images/top/image06.jpg');
}
.content-item.item2 {
  background-image: url('../images/top/image07.jpg');
}
.content-item.item3 {
  background-image: url('../images/top/image08.jpg');
}
.content-item.item4 {
  background-image: url('../images/top/image09.jpg');
}
.content-item.item5 {
  background-image: url('../images/top/image10.jpg');
}

@media screen and (max-width: 1100px) {
  .top-concept .top-concept__l li .bg {
    left: 100px;
  }

  .top-concept{
    overflow: clip;
  }
}
@media screen and (max-width: 768px) {

  .news-item,
  .news-item .title{
    font-size: 10px;
  }

  .news-item,
  .news-item .title{
    padding: 0 10px; /* 左右の余白 */
  }

  .news-item .date {
    margin-right: 0px;
  }

  .top-concept{
    display: block;
    margin-top: 0px;
    padding-top: 170px;
    width: 100%;
    overflow-x: hidden;
  }

  .top-concept .top-concept__l{
    width: 100%;
    position: relative;
    padding-right: 0;
  }

  .top-concept .top-concept__l li{
    margin-bottom: 50px;
    width: 40.53%;
  }

  .top-concept .top-concept__l li:nth-child(1) {
    left: -24px;

  }

  .top-concept .top-concept__l li:nth-child(2) {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: -24px;
  }

  .top-concept .top-concept__l li:nth-child(3) {
    left: 16px;
  }

  .top-concept .top-concept__l li:nth-child(4) {
    width: 471px;
    top: -150px;
    right: -160px;
    left: auto;
    position: absolute;
  }

  .top-concept .top-concept__l li:nth-child(4) span{
    position: relative;
    z-index: 2;
  }

  .top-concept .top-concept__l li:nth-child(4) .icon{
    position: absolute;
    left: 280px;
    top: 10px;
    transition: top 1.6s ease-in-out;
  }

  .top-concept .top-concept__l li:nth-child(4) .icon.active{
    top: 0px;
  }

  .top-concept .top-concept__l li > img{
    position: relative;
    z-index: 2;
  }

  .top-concept .top-concept__l li .bg{
    position: absolute;
    left: 0;
    top: -0px;
  }

  .top-concept .top-concept__l li .bg img{
    max-width: none;
  }

  .top-concept .top-concept__l li:last-child{
    margin-bottom: 0;
  }

  .top-concept .top-concept__r{
    width: 100%;
    position: relative;
    top: 0px;
    z-index: 2;
    margin-top: 100px;
  }

  .top-concept .top-concept__r h3{
    font-size: 36px;
    letter-spacing: 1.44px;
  }

  .top-concept .top-concept__r h3 span{
    position: absolute;
    left: 0;
    width: 19px;
    top: -24px;
  }

  .top-concept .top-concept__r .txt01{
    margin-top: 30px;
    font-size: 20px;
    line-height: 200%; /* 40px */
    letter-spacing: 0.8px;
  }

  .top-concept .top-concept__r .txt02{
    margin-top: 30px;
    font-size: 15px;
    font-weight: 400;
    line-height: 200%; /* 30px */
    letter-spacing: 0.6px;
  }

  .top-concept .top-concept__r .txt02 span{
    display: block;
    margin-bottom: 15px;
  }

  .top-pic{
    margin-top: 120px;
  }

  .top-pic .bg{
    width: 289px;
    left: -30px;
    top: -83px;
  }

  .top-pic .top-pic__l{
    padding-left: 0px;
    padding-top: 91px;
    width: 35.73%;
  }

  .top-pic .top-pic__r{
    width: 48%;
    position: relative;
    right: -24px;
  }

  .top-illust{
    width: 100%;
    height: 304px;
    background: url(../images/top/illust_bg_sp.png) repeat-x center 200px, linear-gradient(180deg, #416759 0%, #274D3F 100%);
    background-size: 1000px auto;
    overflow: hidden;
    position: relative;
    top: -40px;
  }

  /* 各レイヤー（ul）を親要素いっぱいに広げる */
  .top-illust ul {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
    pointer-events: none; /* 鳥や雲がクリックを邪魔しないようにする */
  }

  /* 雲と鳥の共通設定 */
  .top-illust li {
    position: absolute;
  }

  /* SVG画像をliの幅に合わせて可変にする */
  .top-illust li img {
    width: 100%;
    height: auto;
    display: block;
  }

  /* --- 雲の配置（左から右へ順番に） --- */
  /* 1. 左上の小さい雲 */
  .cloud li:nth-child(1) { top: 24%; left: 5%; width: 50px; }
  /* 2. 左側の長い雲 */
  .cloud li:nth-child(2) { top: 32%; left: 10%; width: 210px; }
  /* 3. 中央上の小さい雲 */
  .cloud li:nth-child(3) { top: 12%; left: 52%; width: 60px; }
  /* 4. 右側の大きい雲 */
  .cloud li:nth-child(4) { top: 30%; left: 68%; width: 142px; }
  /* 5. 右端の小さい雲 */
  .cloud li:nth-child(5) { top: 35%; left: 90%; width: 60px; }


  /* --- 鳥01の配置（右から左へ飛ぶ・画像中央と右） --- */
  /* 中央の鳥 */
  .bird01 li:nth-child(1) { top: 46%;  width: 28px; }
  /* 右側の鳥 */
  .bird01 li:nth-child(2) { top: 55%;  width: 37px; }


  /* --- 鳥02の配置（左から右へ飛ぶ・画像左） --- */
  /* 左側の鳥 */
  .bird02 li:nth-child(1) { top: 58%;  width: 36px; }


  .top-main {
    width: calc(100% - 48px);
    padding-top: 64px;
    margin: -80px auto 0;
  }

  .top-main .icon{
    width: 40px;
    text-align: center;
    margin: 0 auto;
    padding-bottom: 56px;
  }

  .top-main .icon svg{
    display: inline;
  }

  /* --- 各項目のリンクパネル（ここがパララックスの要！） --- */
  .content-item {
    top: 56px;           /* ★追加：画面の[上端]でピタッと止まる */
    display: block;
    width: 100%;
    /* 高さはお好みですが、パララックス感を出すなら
       画面いっぱい（100vh）や、高め（400px〜600px）にするのが最近のトレンドです。
       （元の 280px のままでも被さる動きはちゃんと機能します！） */
    height: 420px; /* または 400px など */
    margin-bottom: 24px;

  }

  /* --- 中のテキストと矢印の配置 --- */
  .content-item__inner {
    height: 100%;
    padding: 0 24px; /* 画面が狭い時の左右の余白 */
    display: block;
    position: relative;
  }

  .text-box {
    flex: none;
  }

  .content-item__inner .title {
    font-size: 28px;
    letter-spacing: 1.12px;
    width: 100%;
    padding-top: 75px;
  }

  .content-item__inner .desc {
    color: #FFF;
    font-size: 15px;
    font-weight: 400;
    line-height: 150%; /* 22.5px */
    letter-spacing: 1.2px;
    margin-top: 10px;
  }

  .content-item__inner .arrow {
    transition: transform 0.3s ease;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 80px;
  }

  /* ホバー時に矢印が右にスッと動くアニメーション */
  .content-item:hover .arrow {
    transform: translateX(10px);
  }

  main.top{
    padding-bottom: 175px;
    background: url(../images/top/main_bg_sp.png) repeat-x center bottom;
    background-size:770px 94px ;
  }

  .content-item.item1 {
    background-image: url('../images/top/image06_sp.jpg');
  }
  .content-item.item2 {
    background-image: url('../images/top/image07_sp.jpg');
  }
  .content-item.item3 {
    background-image: url('../images/top/image08_sp.jpg');
  }
  .content-item.item4 {
    background-image: url('../images/top/image09_sp.jpg');
  }
  .content-item.item5 {
    background-image: url('../images/top/image10_sp.jpg');
  }

  .top-illust .cloud li:nth-child(1) { width: 50px; }
  .top-illust .cloud li:nth-child(2) { width: 210px; }
  .top-illust .cloud li:nth-child(3) { width: 59px; }
  .top-illust .cloud li:nth-child(4) { width: 142px; }
  .top-illust .cloud li:nth-child(5) { width: 59px; }

  .top-illust .bird01 li:nth-child(1) { width: 14px; }
  .top-illust .bird01 li:nth-child(2) { width: 18px; }
  .top-illust .bird02 li:nth-child(1) { width: 18px; }


}

/* =======================================================
   スマホ(SP)用の控えめな上下フワフワアニメーション
======================================================= */
/* 揺れ幅をPCの半分の 5px に設定（もっと小さくしたい場合は 3px などに変更） */
@keyframes floatY-sp {
  0%   { transform: translateY(-5px); }
  100% { transform: translateY(5px); }
}

@keyframes floatY-illust-sp {
  0%   { transform: translateY(-5px); }
  100% { transform: translateY(5px); }
}

@media screen and (max-width: 768px) {
  /* top-kv (元のKVパーツ) の揺れ幅をSP用に変更 */
  .asset-cloud img,
  .asset-bird img {
    animation-name: floatY-sp;
  }

  /* top-illust (ループするパーツ) の揺れ幅をSP用に変更 */
  .top-illust li img {
    animation-name: floatY-illust-sp;
  }
}


/*TOP------------------------------------------------------------*/

/* MENU
------------------------------------------------------------*/

/* 全体レイアウト */
.menu-section {
  max-width: 1240px;
  margin: 80px auto 0;
  padding: 0px 20px;
}

/* フィルター部分 */
.filter-row {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
}
.filter-label {
  width: 80px;
  font-size: 16px;
}
.btn-tab, .btn-course {
  border: none;
  margin-right: 8px;
  cursor: pointer;
  border-radius: 6px;
  transition: 0.3s;
  height: 54px;
  box-sizing: border-box;
  color: #FFF;
  font-family: source-han-serif-japanese, serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  background: rgba(37, 75, 61, 0.10);
  color: #929292;
  padding: 0px 32px;
  font-weight: 500;
}

.btn-tab:last-child, .btn-course:last-child{
  margin-right: 0;
}

.btn-tab.active, .btn-course.active {
  background: #254B3D; /* 深緑 */
  color: #fff;
}

/* 注釈 */
.menu-note {
  text-align: left;
  font-size: 16px;
  color: #888;
  margin: 0px 0 15px;
}

/* メインコンテンツ（Flexboxで左右分割） */
.menu-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 70px;
}

/* 左側リストのライン装飾 */
/* 左側リストのライン装飾 */
.menu-list {
  list-style: none;
  padding-left: 20px;
  position: relative;
  margin-top: 35px;
}

.menu-list li {
  margin-bottom: 25px; /* ここで項目間の余白を作る */
  position: relative;
  color: #929292;
  font-size: 16px;
  font-weight: 400;
}

.menu-list li:last-child {
  margin-bottom: 0; /* 最後の項目の余白を消す */
}

/* 丸ポッチ */
.menu-list li::before {
  content: "";
  position: absolute;
  left: -25px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border: 1px solid #929292;
  border-radius: 50%;
  background: #fff;
  z-index: 2; /* 縦線より上に表示させる */
  box-sizing: border-box; /* 線の太さを含めて10pxにする */
}

.menu-list li.current {
  color: #8B140B; /* 臙脂色 */
}
.menu-list li.current::before {
  background: #8B140B;
  border-color: #8B140B;
}

/* 縦線（次の項目への橋渡し） */
.menu-list li::after {
  content: "";
  position: absolute;
  left: -20px; /* 丸(-25px)の中心に合わせて微調整 */
  top: 50%; /* 丸の中心（50%）からスタートさせる */
  width: 1px;
  height: calc(100% + 25px); /* 要素の高さ(100%) ＋ 下の余白(25px) 分だけ線を伸ばす */
  background: #ccc;
  z-index: 1;
}

/* 最後の項目は線を引かない */
.menu-list li:last-child::after {
  display: none;
}

/* 右側画像スライダー */
.menu-slider {
  position: relative;
  max-width: 800px;
  width: 100%;
}
.slide-image img {
  width: 100%;
  display: block;
}

/* スライダーボタン */
.prev-btn, .next-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
  padding: 0;
}
.prev-btn { left: -20px; }
.next-btn { right: -20px; }

/* 画像を囲む枠（ここでハミ出した分を隠す） */
.slide-image {
  display: flex; /* 画像を横並びにする */
  overflow: hidden; /* 枠からはみ出た画像を隠す */
  border-radius: 8px; /* 角丸はこちらに移動 */
  width: 100%;
}

/* スライドする画像本体 */
.slide-image img {
  flex: 0 0 100%; /* 1枚の幅をコンテナの100%に固定 */
  width: 100%;
  display: block;
  /* ↓ ここがスライドのアニメーション設定（0.4秒でスムーズに動く） */
  transition: transform 0.4s ease-in-out;
}

@media screen and (max-width: 950px) {
  .btn-tab, .btn-course {
    margin-right: 8px;
    padding: 0px 12px;
    font-size: 18px;
  }
}
@media screen and (max-width: 768px) {
  .menu-section {
    max-width: 100%;
    margin: 30px auto 0;
    padding: 0px 0px;
  }

  /* フィルター部分 */
  .filter-row {
    display: block;
    margin-bottom: 12px;
  }
  .filter-label {
    display: block;
    width: 100%;
    text-align: center;
    margin-bottom: 12px;

  }
  .filter-options{
    display: flex;
    justify-content: space-between;;
    flex-wrap: wrap;;
  }
  .btn-tab, .btn-course {
    width: 48%;
    margin-right: 0px;
    height: 48px;
    font-size: 18px;
    padding: 0px;
  }

  .btn-course{
    width: 100%;
    margin-bottom: 8px;
  }

  /* 注釈 */
  .menu-note {
    font-size: 12px;

  }

  /* メインコンテンツ（Flexboxで左右分割） */
  .menu-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: 70px;
  }

  /* 左側リストのライン装飾 */
  /* 左側リストのライン装飾 */
  .menu-list {
    list-style: none;
    padding-left: 20px;
    position: relative;
    margin-top: 35px;
  }

  .menu-list li {
    margin-bottom: 25px; /* ここで項目間の余白を作る */
    position: relative;
    color: #929292;
    font-size: 16px;
    font-weight: 400;
  }

  .menu-list li:last-child {
    margin-bottom: 0; /* 最後の項目の余白を消す */
  }

  /* 丸ポッチ */
  .menu-list li::before {
    content: "";
    position: absolute;
    left: -25px;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    border: 1px solid #929292;
    border-radius: 50%;
    background: #fff;
    z-index: 2; /* 縦線より上に表示させる */
    box-sizing: border-box; /* 線の太さを含めて10pxにする */
  }

  .menu-list li.current {
    color: #8B140B; /* 臙脂色 */
  }
  .menu-list li.current::before {
    background: #8B140B;
    border-color: #8B140B;
  }

  /* 縦線（次の項目への橋渡し） */
  .menu-list li::after {
    content: "";
    position: absolute;
    left: -20px; /* 丸(-25px)の中心に合わせて微調整 */
    top: 50%; /* 丸の中心（50%）からスタートさせる */
    width: 1px;
    height: calc(100% + 25px); /* 要素の高さ(100%) ＋ 下の余白(25px) 分だけ線を伸ばす */
    background: #ccc;
    z-index: 1;
  }

  /* 最後の項目は線を引かない */
  .menu-list li:last-child::after {
    display: none;
  }

  /* 右側画像スライダー */
  .menu-slider {
    position: relative;
    width: 894px;
  }
  .slide-image img {
    width: 100%;
    display: block;
  }

  /* スライダーボタン */
  .prev-btn, .next-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    padding: 0;
  }
  .prev-btn { left: -20px; }
  .next-btn { right: -20px; }

  /* 画像を囲む枠（ここでハミ出した分を隠す） */
  .slide-image {
    display: flex; /* 画像を横並びにする */
    overflow: hidden; /* 枠からはみ出た画像を隠す */
    border-radius: 8px; /* 角丸はこちらに移動 */
    width: 100%;
  }

  /* スライドする画像本体 */
  .slide-image img {
    flex: 0 0 100%; /* 1枚の幅をコンテナの100%に固定 */
    width: 100%;
    display: block;
    /* ↓ ここがスライドのアニメーション設定（0.4秒でスムーズに動く） */
    transition: transform 0.4s ease-in-out;
  }
}

/* =========================================
   料理カテゴリタブ
========================================= */
.course-category-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 24px; /* タブ間の余白 */
  border-bottom: 1px solid #E1E1E1;
  margin-top: 110px;
  margin-bottom: 40px;
}

.btn-category {
  background: none;
  border: none;
  font-size: 16px;
  color: #929292;
  padding: 10px 12px;
  cursor: pointer;
  position: relative;
}


/* アクティブ時の緑文字＋下線 */
.btn-category.active {
  color: #254B3D;
  font-weight: 500;
}
.btn-category.active::after {
  content: '';
  position: absolute;
  bottom: -1px; /* 下のグレー線に被せる */
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #254B3D;
}


/* =========================================
   メニュー詳細（左右分割レイアウト）
========================================= */
.course-detail-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 98px;
  margin-top: 120px;
}

.course-detail-content.mt0 {
  margin-top: 0;
}

/* --- 左側（テキスト・サムネイル） --- */
.course-detail-left {
  width: 420px; /* 左側の幅を固定して右側を広く取る */
  flex-shrink: 0;
}

.selection-note {
  font-size: 16px;
  margin-bottom: 10px;
}

/* パスタA〜Dボタン */
.selection-buttons {
  display: flex;
  flex-wrap: wrap; /* カンプ通り折り返す設定 */
  gap: 6px 8px;
  margin-bottom: 26px;
}

.btn-sel {
  border: 1px solid #929292;
  background: #FFF;
  color: #929292;
  border-radius: 999px;
  padding: 0px 32px;
  font-size: 18px;
  cursor: pointer;
  transition: 0.3s;
  height: 38px;
  font-family: source-han-serif-japanese, serif;
}

.btn-sel.active {
  background: #254B3D;
  border-color: #254B3D;
  color: #FFF;
}

/* メニュー名・説明文 */
.course-item-title {
  font-family: source-han-serif-japanese, serif;
  font-size: 22px;
  color: #254B3D;
  line-height: 1.5;
  font-weight: 700;
  line-height: 175%; /* 38.5px */
  margin-bottom: 15px;
  word-break: auto-phrase;
}

.course-item-desc {
  font-size: 13px;
  font-weight: 400;
  line-height: 175%; /* 22.75px */
  letter-spacing: 0.52px;
  margin-bottom: 80px;
}

/* サムネイル画像（5列グリッド） */
.course-thumbnails {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px; /* 画像間の隙間 */
  list-style: none;
  padding: 0;
  margin-bottom: 15px;
}

.course-thumbnails li {
  cursor: pointer;
  border-radius: 6px;
}

.course-thumbnails img {
  width: 100%;
  height: auto;
  display: block;
  /* 枠線が後から付いてもレイアウトがズレないように透明な枠を引いておく */
  border: 2px solid transparent;
  box-sizing: border-box;
  border-radius: 6px;
}

/* 選択中のサムネイルに緑の枠線 */
.course-thumbnails li.current img {
  border-color: #254B3D;
}

.caution-note {
  color: #929292;
  font-size: 13px;
  font-weight: 400;
  line-height: 150%; /* 19.5px */
  letter-spacing: 0.52px;
}

.course-detail-left .lunch_menu{
  margin-bottom: 20px;
}

.course-detail-left .lunch_menu li{
  font-family: source-han-serif-japanese, serif;
  font-size: 15px;
  line-height: 200%; /* 30px */
  letter-spacing: 0.6px;
}

.course-detail-left .lunch_menu_detail{
  border-radius: 6px;
  border: 1px dashed var(--text_gray, #929292);
  padding: 16px;
  margin-bottom: 90px;
}

.course-detail-left .lunch_menu_detail p,
.course-detail-left .lunch_menu_detail li{
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 175%; /* 24.5px */
  letter-spacing: 0.56px;
  font-family: source-han-serif-japanese, serif;
}

.course-detail-left .lunch_menu_detail li{
  text-indent: -1em;
  padding-left: 1em;
}

.course-detail-left .lunch_menu_detail li span{
  font-size: 13px;
}

/* --- 右側（メイン画像） --- */
.course-detail-right {
  /* ここがキモ！「基本は800px」と強く主張させます */
  flex-basis: 680px;
  max-width: 680px;

  /* 画面が狭い時（800pxを確保できない時）は縮むのを許可します */
  flex-shrink: 1;
  flex-grow: 1;
  min-width: 0;
}

.course-detail-right a{
  display: none;
}

/* 直指定した背景画像用のスタイル */
.main-bg-image {
  width: 100%;
  max-width: 100%;
  /* カンプの比率に合わせて高さを確保（ここはお好みで微調整OK） */
  aspect-ratio: 17 / 13;
  height: 520px;
  min-height: 520px;
  /* 画像が中央を基準に両端から綺麗にトリミングされます */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  border-radius: 8px;
}


@media screen and (max-width: 1340px) {

  br.long{
    display: none;;
  }

  br.mid{
    display: block;
  }

  .course-detail-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 50px;
    margin-top: 120px;
  }

  /* --- 左側（テキスト・サムネイル） --- */
  .course-detail-left {
    width: 380px;
    flex-shrink: 0;
  }

  .main-bg-image {

    min-height: auto;
    height: auto;
  }

  /* サムネイル画像（5列グリッド） */
  .course-thumbnails {
    grid-template-columns: repeat(4, 1fr);
  }
  .btn-sel{
    padding: 0 26px;
  }
}

/* --- スマホ用 --- */
@media screen and (max-width: 1000px) {

  .course-detail-right{
    touch-action: pan-y;
  }

  .course-detail-right a{
    display: block;
  }
  .course-detail-right {
    flex-basis: auto;
    max-width: 100%;
    position: relative;
    width: 100%;
  }

  .course-detail-right .main-bg-image{
    z-index: 2;
    position: relative;
    width: 100%;
  }

  .course-detail-right .prev,
  .course-detail-right .next{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -16px;
    z-index: 10;
  }

  .course-detail-right .next{
    left: auto;
    right: -16px;

  }
}

/* --- レスポンシブ対応（スマホ用） --- */
@media screen and (max-width: 1000px) {
  .course-detail-content {
    flex-direction: column-reverse; /* スマホではメイン画像を上に配置 */
    gap: 16px;
  }
  .course-detail-content {
    margin-top: 40px;
  }

  .course-detail-content.mt0 {
    margin-top: 0;
  }

  /* --- 左側（テキスト・サムネイル） --- */
  .course-detail-left {
    width: 100%; /* 左側の幅を固定して右側を広く取る */
    flex-shrink: 0;
  }

  .selection-note {
    font-size: 16px;
    margin-bottom: 10px;
  }

  /* パスタA〜Dボタン */
  .selection-buttons {
    gap: 4px 8px;
    margin-bottom: 16px;
  }

  .btn-sel {

    padding: 0px 20px;
    font-size: 16px;
    height: 36px;
  }


  /* メニュー名・説明文 */
  .course-item-title {
    font-size: 18px;
    margin-bottom: 15px;
  }

  .course-item-desc {
    font-size: 14px;
    margin-bottom: 20px;
  }

  /* サムネイル画像（5列グリッド） */
  .course-thumbnails {
    margin-bottom: 13px;
    grid-template-columns: repeat(5, 1fr);
  }

  .caution-note {
    font-size: 12px;
  }

  .course-detail-left .lunch_menu{
    margin-bottom: 15px;
  }

  .course-detail-left .lunch_menu li{
    line-height: 175%; /* 30px */
  }

  .course-detail-left .lunch_menu_detail{
    margin-bottom: 24px;
  }
  /* --- 右側（メイン画像） --- */
  .course-detail-right {
    /* ここがキモ！「基本は800px」と強く主張させます */
    flex-basis: 100%;
    max-width: 100%;

  }

  /* 直指定した背景画像用のスタイル */
  .main-bg-image {
    width: 100%;
    max-width: 100%;
    /* カンプの比率に合わせて高さを確保（ここはお好みで微調整OK） */
    height: auto;
    min-height: auto;
  }

  /* =========================================
     料理カテゴリタブ（SP横スクロール用）
  ========================================= */
  .course-category-nav {
    flex-wrap: nowrap;     /* 折り返しを禁止して1行にする */
    overflow-x: auto;      /* はみ出た分を横スクロール可能に */
    -webkit-overflow-scrolling: touch; /* iOSでのスクロールを滑らかにするおまじない */

    width: calc(100% + 48px);
    position: relative;
    left: -24px;
    gap: 0 16px;         /* タブ同士の隙間（スマホ用に少し調整。お好みで！） */
    padding:0 24px ;

    /* スマホでスクロールバーが見えるとデザインの邪魔になるので隠す */
    -ms-overflow-style: none; /* IE, Edge */
    scrollbar-width: none;    /* Firefox */
    margin-top: 40px;
    margin-bottom: 24px;
    touch-action: pan-x;
  }

  /* Chrome, Safari用のスクロールバー非表示 */
  .course-category-nav::-webkit-scrollbar {
    display: none;
  }

  .btn-category {
    white-space: nowrap;   /* テキストが途中で改行されるのを防ぐ */
    flex-shrink: 0;        /* タブが無理やり縮められて潰れるのを防ぐ（超重要） */

    /* 左右のpaddingを少し詰めると、画面内に多くのタブが見えてスワイプを促しやすくなります */
    padding: 10px 4px;
  }

  /* 下線の長さをテキスト幅に合わせるための微調整 */
  .btn-category.active::after {
    /* 左右のpadding分（4px）を引いて、文字の下にだけ綺麗に線を引く */
    left: 4px;
    width: calc(100% - 8px);
  }

}

@media screen and (max-width: 768px) {


}

/*MENU------------------------------------------------------------*/

/* PARTY
------------------------------------------------------------*/
/* コンテンツ全体のラッパー */
.info-content {
  max-width: 1240px;
  margin: 40px auto 0;
  padding: 0 20px;
  font-size: 15px;
}

.info-list {
  margin: 0;
  padding: 0;
}

/* 各行のレイアウト */
.info-row {
  display: flex;
  padding: 40px 0;
  border-bottom: 1px solid #CCC;
}

/* 左側の見出し（収容人数など） */
.info-row dt {
  width: 132px; /* 左側の幅を固定 */
  font-weight: bold;
  flex-shrink: 0;
}

/* 右側の内容 */
.info-row dd {
  margin: 0;
  flex-grow: 1;
  line-height: 1.8;
}

/* -----------------------------
  メニュー部分のレイアウト
------------------------------ */
.menu-detail {
  display: flex;
  margin-bottom: 15px;
}
.menu-detail:last-child {
  margin-bottom: 0;
}
.menu-label {
  width: 90px; /* 「フード」「ドリンク」の幅を固定して右のテキスト位置を揃える */
  flex-shrink: 0;
}

/* -----------------------------
  設備部分の画像レイアウト
------------------------------ */
.equip-text {
  margin: 0 0 25px 0;
}

.equip-images {
  display: flex;
  gap: 2.7%; /* 画像と画像の隙間 */
}

.equip-images img {
  width: 31.58%; /* 3等分してgapの隙間分を引く計算 */
  max-width: 314px;
  display: block;
  height: auto;
}
@media screen and (max-width: 768px) {

  /* コンテンツ全体のラッパー */
  .info-content {
    max-width: 100%;
    margin: 0px auto 0;
    padding: 10px 0px 0;
    font-size: 15px;
  }

  .info-list {
    margin: 0;
    padding: 0;
  }

  /* 各行のレイアウト */
  .info-row {
    display: block;
    padding: 20px 0;
  }

  /* 左側の見出し（収容人数など） */
  .info-row dt {
    width: 100%; /* 左側の幅を固定 */
    font-weight: bold;
    flex-shrink: 0;
    padding-bottom: 10px;
  }

  /* 右側の内容 */
  .info-row dd {
    margin: 0;
    flex-grow: 1;
    line-height: 1.8;
  }

  /* -----------------------------
    メニュー部分のレイアウト
  ------------------------------ */
  .menu-detail {
    display: flex;
    margin-bottom: 15px;
  }
  .menu-detail:last-child {
    margin-bottom: 0;
  }
  .menu-label {
    width: 80px; /* 「フード」「ドリンク」の幅を固定して右のテキスト位置を揃える */
    flex-shrink: 0;
  }


  .equip-text {
    margin: 0 0 25px 0;
  }

  .equip-images {
    display: block;
  }

  .equip-images img {
    width: 100%; /* 3等分してgapの隙間分を引く計算 */
    max-width: 314px;
    display: block;
    margin: 0 auto 20px;
    object-fit: cover; /* 画像が歪まないようにトリミング */
  }

  .equip-images img:last-child{
    margin-bottom: 0;
  }
}

/* ================================
  パーティープランのレイアウト（全体）
================================ */
.party-cards {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0px 56px; /* 縦の余白60px、横の余白40px */
  color: #333;
}

/* ================================
  各パーツのデザイン
================================ */
/* タイトル */
.party-title {
  margin: 80px 0 20px 0;
  color: #262626;
  font-family: source-han-serif-japanese, serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 140%; /* 33.6px */
  letter-spacing: 1.2px;
}

/* 画像 */
.party-image {
  margin-bottom: 35px;
}
.party-image img {
  width: 100%;
  object-fit: cover;
  display: block;
}

/* 人数・予算エリア */
.party-info {
  display: flex;
  gap: 30px; /* 「人数」と「予算」の間の隙間 */
  margin-bottom: 20px;
  color: #262626;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 150%; /* 24px */
  letter-spacing: 0.64px;
}
.party-info-item .party-label {
  font-weight: bold;
  margin-right: 12px; /* ラベルと値の間の隙間 */
}

/* メニュー構成エリア */
.party-menu-title {
  font-size: 16px;
  font-weight: bold;
  margin: 0 0 12px 0;
}

.party-menu-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.party-menu-list li {
  position: relative;
  font-size: 16px;
  line-height: 1.5;
  padding-left: 1em; /* 「・」の分のスペースを空ける */
  margin-bottom: 4px; /* 行間を少し詰めてリストっぽく */
}

/* リストの「・」をキレイに配置 */
.party-menu-list li::before {
  content: "・";
  position: absolute;
  left: 0;
  top: 0;
}

@media screen and (max-width: 768px) {
  /* ================================
  パーティープランのレイアウト（全体）
================================ */
  .party-cards {
    max-width: 100%;
    padding: 0 0px;
    display: block;
    gap: 0px; /* 縦の余白60px、横の余白40px */
  }

  /* ================================
    各パーツのデザイン
  ================================ */
  /* タイトル */
  .party-title {
    margin: 40px 0 20px 0;
    font-size: 20px;
  }

  /* 画像 */
  .party-image {
    margin-bottom: 20px;
  }

  /* 人数・予算エリア */
  .party-info {
    display: block;
    font-size: 15px;
  }
  .party-info-item .party-label {
    font-weight: bold;
    margin-right: 12px; /* ラベルと値の間の隙間 */
  }

  /* メニュー構成エリア */
  .party-menu-title {
    font-size: 16px;
    font-weight: bold;
    margin: 0 0 12px 0;
  }

  .party-menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .party-menu-list li {
    position: relative;
    font-size: 16px;
    line-height: 1.5;
    padding-left: 1em; /* 「・」の分のスペースを空ける */
    margin-bottom: 4px; /* 行間を少し詰めてリストっぽく */
  }

  /* リストの「・」をキレイに配置 */
  .party-menu-list li::before {
    content: "・";
    position: absolute;
    left: 0;
    top: 0;
  }
}

/* ================================
  お問い合わせエリアのレイアウト
================================ */
.party-contact-section {
  max-width: 100%;
  margin: 0px auto 0; /* 上のプランエリアとの余白 */
  padding: 110px 0; /* 枠線とコンテンツの上下の余白 */
  border-top: 1px solid #CCC; /* デザイン通り上の線を追加 */
  border-bottom: 1px solid #CCC;
}

.party-contact-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 105px; /* 左右がギリギリにならないよう少し内側に余白 */
}

/* --- 左側のテキストエリア --- */
.party-contact-left {
  width: 50%;
}

.party-contact-title {
  font-family: source-han-serif-japanese, serif;
  font-size: 32px;
  font-weight: 700;
  line-height: 150%; /* 48px */
  letter-spacing: 1.28px;
  margin-bottom: 20px;
}

.party-contact-text {
  font-size: 16px;
  font-weight: 400;
  line-height: 150%; /* 24px */
  letter-spacing: 0.64px;
}

/* --- 右側の電話番号エリア --- */
.party-contact-right {
  width: 45%;
  max-width: 420px; /* グレーの箱が広がりすぎないように制限 */
}

.party-tel-box {
  background-color: #E3E3E3;
  text-align: center;
  margin-bottom: 12px;
  border-radius: 6px;
  height: 88px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: source-han-serif-japanese, serif;
  font-size: 28px;
  font-weight: 700;
  line-height: 100%; /* 28px */
  letter-spacing: 1.12px;
}

.party-tel-time {
  font-size: 12px;
  color: #333;
  text-align: center;
  margin: 15px 0 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 150%; /* 21px */
  letter-spacing: 0.56px;
}

.party-contact-right .btn{
  display: flex;
  border-radius: 6px;
  background: #254B3D;
  height: 88px;
  color: #FFF;
  text-align: center;
  font-family: source-han-serif-japanese, serif;
  font-size: 28px;
  font-weight: 700;
  line-height: 100%; /* 28px */
  letter-spacing: 1.12px;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  margin-bottom: 12px;
}

@media screen and (max-width: 768px) {
  /* ================================
    お問い合わせエリアのレイアウト
  ================================ */
  .party-contact-section {
    max-width: 100%;
    margin: 0px auto 0; /* 上のプランエリアとの余白 */
    padding: 30px 0; /* 枠線とコンテンツの上下の余白 */
    border-top: 1px solid #CCC; /* デザイン通り上の線を追加 */
    border-bottom: 1px solid #CCC;
  }

  .party-contact-inner {
    display: block;
    justify-content: space-between;
    align-items: center;
    padding: 0 ; /* 左右がギリギリにならないよう少し内側に余白 */
  }

  /* --- 左側のテキストエリア --- */
  .party-contact-left {
    width: 100%;
  }

  .party-contact-title {
    font-size: 24px;
    margin-bottom: 20px;
  }

  .party-contact-text {
    font-size: 14px;
  }

  /* --- 右側の電話番号エリア --- */
  .party-contact-right {
    width: 100%;
    max-width: 100%; /* グレーの箱が広がりすぎないように制限 */
    margin-top: 15px;
  }

  .party-tel-box {
    margin-bottom: 19px;
    border-radius: 6px;
    height: 60px;
    font-size: 20px;
  }

  .party-tel-time {
    font-size: 12px;
    margin: 10px 0 0;
  }

  .party-contact-right .btn{
    height: 60px;
    font-size: 20px;
    margin-bottom: 12px;
  }
}

.plan_ex{
  margin-top: 80px;
}

.plan_ex .inner{
  margin: 40px 16px 0;
}

.plan_ex .inner .txt01{
  font-size: 16px;
  font-weight: 400;
  line-height: 175%; /* 28px */
  letter-spacing: 0.8px;
  margin-bottom: 35px;
}

.plan_ex .inner table{
  border-top: 1px solid #E9EDEC;
}

.plan_ex .inner table th,
.plan_ex .inner table td{
  border-bottom: 1px solid #E9EDEC;
  vertical-align: middle;
  padding: 40px 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 180%; /* 28.8px */
  letter-spacing: 0.64px;
  text-align: left;
}

.plan_ex .inner table th{
  font-family: source-han-serif-japanese, serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 150%; /* 30px */
  letter-spacing: 1px;
  width: 480px;
}

.plan_ex .inner table td span{
  font-size: 14px;
}

@media screen and (max-width: 1100px) {
  .plan_ex .inner table th{
    width: 280px;
  }
}

@media screen and (max-width: 768px) {
  .plan_ex{
    margin-top: 35px;
  }

  .plan_ex .inner{
    margin: 20px 0px 0;
  }

  .plan_ex .inner .txt01{
    font-size: 15px;
    line-height: 175%; /* 26.25px */
    letter-spacing: 0.75px;
  }

  .plan_ex .inner table{
    border-top: 1px solid #E9EDEC;
  }

  .plan_ex .inner table th,
  .plan_ex .inner table td{
    display: block;
    width: 100%;
    vertical-align: middle;
    padding: 0px 0 20px;
    font-size: 15px;
    line-height: 180%; /* 27px */
    letter-spacing: 0.6px;
  }

  .plan_ex .inner table th{
    font-size: 18px;
    font-weight: 500;
    line-height: 150%; /* 27px */
    letter-spacing: 0.9px;
    width: 100%;
    padding: 20px 0 13px;
    border-bottom: none;
  }

  .plan_ex .inner table td span{
    font-size: 12px;
  }
}

/*PARTY------------------------------------------------------------*/

/* ambience
------------------------------------------------------------*/
.ambience_area01{
  margin-top: 105px;
  display: flex;
  align-items: center;
}

.ambience_area01 .ambience_area01_l{
  position: relative;
  left: -60px;
}
.ambience_area01 .ambience_area01_r{
  margin-left: 70px;
}
.ambience_area01 .ambience_area01_r h3,
.ambience_area02 h3{
  font-family: source-han-serif-japanese, serif;
  font-size: 48px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 1.92px;
}

.ambience_area01 .ambience_area01_r p,
.ambience_area02 p{
  font-size: 15px;
  font-weight: 400;
  line-height: 150%; /* 22.5px */
  letter-spacing: 0.6px;
  margin-top: 10px;
}

.ambience_area01 .ambience_area01_r .image{
  margin-top: 120px;
}

.ambience_area02{
  padding-top: 120px;
}

.ambience_area02 ul{
  display: flex;
  margin-top: 120px;
  justify-content: space-between;
}

.ambience_area02 ul li:nth-child(2){
  padding-top: 240px;
}

.ambience_area02 ul li img{
  max-width: none;
}

.sub_contents_inner.ambience{
  margin-bottom: 0;
}

@media screen and (max-width: 1175px) {
  .ambience_area02 ul li:nth-child(1){
    width: calc(100% - 300px);
  }

  .ambience_area02 ul li:nth-child(1) img{
    width: 100%;
    height: auto;
  }
}

@media screen and (max-width: 1100px) {
  .ambience_area01 .ambience_area01_r{
    margin-left: 40px;
  }
  .ambience_area01 .ambience_area01_r h3,
  .ambience_area02 h3{
    font-size: 40px;
  }
}

@media screen and (max-width: 950px) {
  .ambience_area01 .ambience_area01_r h3,
  .ambience_area02 h3{
    font-size: 32px;
  }
}

@media screen and (max-width: 768px) {
  .ambience_area01{
    margin-top: 30px;
    display: block;

  }

  .ambience_area02{
    padding-top:40px;
  }

  .ambience_area01 .ambience_area01_l{
    position: relative;
    left: -60px;
  }
  .ambience_area01 .ambience_area01_r{
    margin-left: 0px;
  }
  .ambience_area01 .ambience_area01_r h3,
  .ambience_area02 h3{
    font-size: 28px;
  }

  .ambience_area01 .ambience_area01_r p,
  .ambience_area02 p{
    font-size: 14px;
    margin-top: 15px;
  }

  .ambience_area01 .image2{
    display: flex;
    justify-content: right;
    flex-wrap: wrap;
  }

  .ambience_area01 .ambience_area01_r .image{
    margin-top: 40px;
  }

  .ambience_area01 .ambience_area01_r .image.sp{
    width: 70%;
    position: relative;
    left: -24px;
  }

  .ambience_area01 .ambience_area01_r .image2 img{
    width: 50%;
    position: relative;
    right: -24px;
  }

  .ambience_area02 ul{
    display: flex;
    flex-wrap: wrap;;
    margin-top: 60px;
  }

  .ambience_area02 ul li{
    margin-right: 0px;
    margin-bottom: 40px;
  }

  .ambience_area02 ul li img{
    max-width: 100%;
  }

}

.ambience_area04{
  width: 100%;
  display: flex;
  justify-content: end;
  margin-top: 45px;
  position: relative;
}

.ambience_area04 .ambience_area03_l{
  position: absolute;
  top: 167px;
  left: -167px;
}

.ambience_area04 .ambience_area03_r{
  position: relative;
  z-index: 2;
}

@media screen and (max-width: 768px) {
  .ambience_area04{
    width: 100%;
    display: block;
    margin-top: 45px;
  }

  .ambience_area04 .ambience_area03_l{
    position: relative;
    top: auto;
    left: -40px;
    margin-top: 40px;
  }
}

/*ambience------------------------------------------------------------*/

/* ACCESS
------------------------------------------------------------*/
/* ================================
  アクセスエリア全体のレイアウト
================================ */
.access-section {
  max-width: 1240px;
  margin: 100px auto 0;
  padding: 0 20px;
}

/* 各ブロック（道順 / 駐車場） */
.access-block {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 80px; /* ブロック同士の縦の余白 */
}
.access-block:last-child {
  margin-bottom: 0; /* 最後のブロックの下余白は消す */
}

/* --- 左側：テキストコンテンツ --- */
.access-content {
  width: 40.5%; /* 左側の幅 */
  padding-top: 30px; /* 見出しの高さを地図の上のラインと微調整 */
}

.access-title {
  font-size: 32px;
  font-family: source-han-serif-japanese, serif;
  font-style: normal;
  font-weight: 700;
  line-height: 150%; /* 48px */
  letter-spacing: 1.28px;
  margin-bottom: 30px;
}

.access-text {
  font-size: 15px;
  font-weight: 400;
  line-height: 150%; /* 22.5px */
  letter-spacing: 0.6px;
  margin-bottom: 22px;
}

/* グレーの注意書きボックス */
.access-note {
  border-radius: 6px;
  background: #F3F3F3;
  padding: 20px;
  color: #262626;
  font-size: 12px;
  font-weight: 400;
  line-height: 150%; /* 18px */
  letter-spacing: 0.48px;
  margin-bottom: 30px;
}
.access-note p {
  font-size: 12px;
  line-height: 1.6;
  color: #555;
  margin: 0;
}

/* 住所・電話番号 */
.access-info p {
  font-size: 15px;
  margin: 0 0 5px 0;
  line-height: 150%;
}
.access-info p:last-child {
  margin-bottom: 0;
}

/* --- 右側：地図画像 --- */
.access-map {
  width: 55%; /* 右側の幅 */
}
.access-map img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px; /* 地図の角も少し丸めて柔らかい印象に */
}

.access-info p.map_link{
  margin-top: 20px;
}

.access-info p.map_link a{
  display: inline-flex;
  align-items: center;
  border-bottom: 1px solid var(--black_5, #262626);
}

.access-info p.map_link a:hover{
  border-bottom: none;
  text-decoration: none;
  border-bottom: 1px solid var(--black_5, #FFF);
}

.access-info p.map_link a span{
  display: block;
  margin-left: 8px;
}

.access-map .explanation{
  display: flex;
  align-items: center;
  margin-top: 10px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
}

.access-map .explanation:before{
  content: "";
  display: block;
  width: 34px;
  height: 14px;
  background: #8B140B;
  border-radius: 2px;
  margin-right: 9px;
}

@media screen and (max-width: 768px) {
  .access-section {
    max-width: 100%;
    margin: 30px auto 0;
    padding: 0 0px;
  }

  /* 各ブロック（道順 / 駐車場） */
  .access-block {
    display: block;
    margin-bottom: 40px; /* ブロック同士の縦の余白 */
  }
  .access-block:last-child {
    margin-bottom: 0; /* 最後のブロックの下余白は消す */
  }

  /* --- 左側：テキストコンテンツ --- */
  .access-content {
    width: 100%; /* 左側の幅 */
    padding-top: 0px; /* 見出しの高さを地図の上のラインと微調整 */
  }

  .access-title {
    font-size: 28px;
    margin-bottom: 15px;
  }

  .access-text {
    font-size: 14px;
    margin-bottom: 15px;
  }

  /* グレーの注意書きボックス */
  .access-note {
    border-radius: 6px;
    padding: 10px;
    font-size: 12px;
    margin-bottom: 30px;
  }
  .access-note p {
    font-size: 12px;
  }

  /* 住所・電話番号 */
  .access-info p {
    font-size: 15px;
    margin: 0 0 5px 0;
    line-height: 150%;
  }
  .access-info p:last-child {
    margin-bottom: 0;
  }

  /* --- 右側：地図画像 --- */
  .access-map {
    width: 100%; /* 右側の幅 */
    margin-top: 20px;
  }

  .access-info p.map_link{
    margin-bottom: 15px;
  }
}

/*ACCESS------------------------------------------------------------*/

/* Calendar
------------------------------------------------------------*/

.calendar{
  width: 100%;
  max-width: 1240px;
  padding: 0 20px;
  margin: 100px auto 0;
}

.calendar p.txt01{
  font-size: 14px;
  font-weight: 400;
  line-height: 150%; /* 21px */
}

/* ================================
  カレンダー全体のレイアウト
================================ */
.calendar-container {
  max-width: 1240px;
  padding: 0 20px;
  margin: 0 auto;
}

/* ================================
  テーブルの装飾
================================ */
.calendar-table {
  width: 100%;
  border-collapse: collapse; /* 罫線を1本にまとめる */
  text-align: center;
  margin-bottom: 20px;
}

/* --- 曜日ヘッダー --- */
.calendar-table th {
  background-color: #F5F5F5; /* 薄いグレーの背景 */
  padding: 10px 0;
  font-size: 18px;
  font-weight: 400;
}

.calendar-table tr th:nth-child(1) {
  border-left: solid 1px #F5F5F5;
}

.calendar-table tr th:last-child{
  border-right: solid 1px #F5F5F5;
}

/* --- 各日付セル --- */
.calendar-table td {
  border: 1px solid #D9D9D9;
  padding: 24px 0 34px; /* 数字と記号のバランスをとる上下余白 */
  width: 14.28%; /* 100% ÷ 7日分 で均等割 */
  vertical-align: top;
}

/* --- 今月以外の日付（not-current）の処理 --- */
.calendar-table td.not-current {
  background-color: #FAFAFA; /* 少しだけ背景を暗く */
}

@media screen and (max-width: 768px) {
  .calendar{
    width: 100%;
    max-width: 100%;
    padding: 0 0px;
    margin: 30px auto 0;
  }

  .calendar p.txt01{
    font-size: 14px;
  }

  /* ================================
    カレンダー全体のレイアウト
  ================================ */
  .calendar-container {
    max-width: 100%;
    padding: 0 ;
    margin: 0 auto;
  }

  /* ================================
    テーブルの装飾
  ================================ */
  .calendar-table {
    width: 100%;
    border-collapse: collapse; /* 罫線を1本にまとめる */
    text-align: center;
    margin-bottom: 20px;
  }

  /* --- 曜日ヘッダー --- */
  .calendar-table th {
    padding: 7px 0;
    font-size: 10px;
    font-weight: 400;
  }

  /* --- 各日付セル --- */
  .calendar-table td {
    padding: 14px 0 13px; /* 数字と記号のバランスをとる上下余白 */
    width: 14.28%; /* 100% ÷ 7日分 で均等割 */
  }

  .cal-mark a{
    display: inline-block;
    border-bottom: solid 1px #254B3D;
  }

}

/* ================================
  セルの中身（数字と記号）
================================ */
/* 日付の数字 */
.cal-day {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px; /* 下の記号との隙間 */
}

/* 記号を囲む箱 */
.cal-mark {
  text-align: center;
}

.cal-mark svg{
  display: inline;
}

/* ================================
  凡例（〇空席あり... の部分）
================================ */
.reservation-legend {
  display: flex;
  justify-content: flex-start;
  gap: 24px;
  font-size: 16px;
  font-weight: 500;
  line-height: 140%; /* 22.4px */
  letter-spacing: 0.64px;
}

.legend-item {
  display: flex;
  align-items: center;
}

.legend-item .res-mark {
  margin-right: 8px;
}

/* ================================
  カレンダー 切り替えヘッダー
================================ */
.calendar-header {
  display: flex;
  justify-content: center;
  margin: 55px 0 30px;
}

/* 枠線が繋がったボタングループを作る箱 */
.calendar-header-inner {
  display: flex;
  align-items: stretch; /* 高さを揃える */
  border: 1px solid #D9D9D9; /* 全体を囲む薄いグレーの線 */
  border-radius: 8px; /* 両端の角丸 */
  overflow: hidden; /* 角丸からはみ出た部分を隠す */
  background-color: #fff;
}

/* 左右の矢印ボタン */
.cal-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px; /* ボタンの幅 */
  text-decoration: none;
  background-color: #fff;
  transition: background-color 0.2s;
  cursor: pointer;
}
.cal-nav-btn:hover {
  background-color: #D9D9D9; /* マウスオーバーで少し暗くする */
}

/* 真ん中の年月表示テキスト */
.cal-current-month {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 23px; /* 上下左右のゆったりとした余白 */
  font-size: 24px;
  font-weight: 700;
  border-left: 1px solid #D9D9D9;
  border-right: 1px solid #D9D9D9;
}


@media screen and (max-width: 768px) {
  /* ================================
  セルの中身（数字と記号）
================================ */
  /* 日付の数字 */
  .cal-day {
    font-size: 12px;
    margin-bottom: 5px; /* 下の記号との隙間 */
  }

  .calendar-table svg{
    width: 14px;
    height: auto;
  }

  /* ================================
    凡例（〇空席あり... の部分）
  ================================ */
  .reservation-legend {
    display: block;
    font-size: 14px;
  }

  .legend-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }

  .legend-item svg{
    width: 18px;
    height: auto;
  }

  .legend-item .res-mark {
    margin-right: 8px;
  }

  /* ================================
    カレンダー 切り替えヘッダー
  ================================ */
  .calendar-header {
    display: flex;
    justify-content: center;
    margin: 30px 0 30px;
  }


  /* 左右の矢印ボタン */
  .cal-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px; /* ボタンの幅 */
    text-decoration: none;
    background-color: #fff;
    transition: background-color 0.2s;
    cursor: pointer;
  }
  .cal-nav-btn:hover {
    background-color: #D9D9D9; /* マウスオーバーで少し暗くする */
  }

  /* 真ん中の年月表示テキスト */
  .cal-current-month {
    padding: 10px 20px; /* 上下左右のゆったりとした余白 */
    font-size: 20px;
  }
}

/*Calendar------------------------------------------------------------*/

/* reservation_form
------------------------------------------------------------*/
.reservation_form header{
  display: flex;
  width: 100%;
  height: 169px;
  justify-content: center;
  align-items: center;
  background: linear-gradient(180deg, #416759 0%, #274D3F 100%);
}

.reservation_form header h1{
  color: #FFF;
  font-family: new-spirit, serif;
  font-size: 48px;
  font-weight: 500;
  line-height: 100%;
  letter-spacing: 1.92px;
}

/* 全体のリセットとベース設定 */
.reservation-wrapper {
  max-width: 1000px; /* 必要に応じて調整してください */
  margin: 80px auto 0;
}

/* ヘッダーのグレー背景 */
.reservation-header {
  background-color: #F5F5F5;
  padding: 16px 24px;
  margin-bottom: 35px;
}

.reservation-header h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 100%; /* 16px */
}

/* コンテンツエリアの余白 */
.reservation-content {
  padding: 0 102px;
}

/* 各種見出し */
.notice-heading {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 20px 0;
}

.section-heading {
  font-size: 20px;
  font-weight: bold;
  margin: 0 0 15px 0;
}

/* 営業時間のテキスト */
.hours-text {
  font-size: 15px;
  font-weight: 400;
  line-height: 150%; /* 22.5px */
  margin: 0 0 30px 0;
}

/* 注意書きリスト（▶ の実装） */
.notice-list {
  list-style: none;
  padding: 0;
  margin: 0 0 25px 0;
}

.notice-list li {
  position: relative;
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 22.5px */
  letter-spacing: 0.6px;
  padding-left: 1.2em;
  margin-bottom: 3px;
}

.notice-list li::before {
  content: '▶';
  position: absolute;
  left: 0;
  top: 0;
}

/* お問い合わせ情報 */
.contact-info {
  font-size: 15px;
  margin: 0 0 30px 0;
}

.contact-info a {
  color: #262626;
  font-weight: bold;
  text-decoration: underline; /* 画像の通り下線を引く */
}

/* 同意チェックボックスエリア */
.agreement-area {
  margin-top: 0px;
  margin-bottom: 50px;
}

.agreement-label {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.agreement-label input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 0 10px 0 0;
  cursor: pointer;
  accent-color: #0d6efd; /* チェックボックスを画像に近い青色にする設定 */
}

.label-text {
  font-size: 15px;
}

@media screen and (max-width: 768px) {
  .reservation_form header{
     height: 100px;
  }

  .reservation_form header h1{
    font-size: 30px;
  }

  /* 全体のリセットとベース設定 */
  .reservation-wrapper {
    max-width: 100%; /* 必要に応じて調整してください */
    margin: 40px auto 0;
    padding: 0 24px;
  }

  /* ヘッダーのグレー背景 */
  .reservation-header {
    background-color: #F5F5F5;
    padding: 10px 16px;
    margin-bottom: 24px;
  }

  .reservation-header h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 100%; /* 16px */
  }

  /* コンテンツエリアの余白 */
  .reservation-content {
    padding: 0 ;
  }

  /* 各種見出し */
  .notice-heading {
    font-size: 14px;
    margin: 0 0 15px 0;
  }

  .section-heading {
    font-size: 16px;
    margin: 0 0 10px 0;
  }

  /* 営業時間のテキスト */
  .hours-text {
    font-size: 14px;
    margin: 0 0 20px 0;
  }

  /* 注意書きリスト（▶ の実装） */
  .notice-list {
    margin: 0 0 15px 0;
  }

  .notice-list li {
    font-size: 14px;
    margin-bottom: 3px;
  }

  /* お問い合わせ情報 */
  .contact-info {
    font-size: 14px;
    margin: 0 0 30px 0;
  }

  .contact-info a {
    color: #262626;
    font-weight: bold;
    text-decoration: underline; /* 画像の通り下線を引く */
  }

  /* 同意チェックボックスエリア */
  .agreement-area {
    margin-bottom: 40px;
  }


  .label-text {
    font-size: 13px;
  }
}

/* フォームセクション全体の囲み */
.reservation-form-section {
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
  padding: 0 24px 10px;
}

/* 行のレイアウト設定 */
.form-row {
  margin-bottom: 24px;
}
.mb-more { margin-bottom: 32px; }
.mt-more { margin-top: 40px; }

/* 3カラムレイアウト（PCは横並び、スマホは縦並び） */
.three-cols {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.three-cols > .form-group {
  flex: 1 1 200px; /* 最小200pxで均等に広がる */
}

/* スマホ時を考慮したハーフ幅（未就学児用） */
.half-width {
  width: calc(33.333% - 11px);
  min-width: 200px;
}

/* アイコンと入力エリアのグループ */
.icon-group {
  display: flex;
  align-items: center;
  gap: 12px;
}
.icon-wrap {
  width: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.form-icon {
  width: 20px;
  height: 20px;
  fill: #111;
}

/* セレクトボックスの装飾 */
.select-wrap {
  width: 100%;
  position: relative;
}
.select-wrap select,
.select-wrap input{
  width: 100%;
  padding: 10px 36px 10px 12px;
  font-size: 14px;
  color: #333;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  cursor: pointer;
  appearance: none; /* デフォルトの矢印を消す */
}
/* カスタム矢印 */
.select-wrap::after {
  content: '';
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  border-width: 5px 5px 0 5px;
  border-style: solid;
  border-color: #666 transparent transparent transparent;
  pointer-events: none; /* クリックを貫通させる */
}

/* 席タイプのトグルスイッチ（テーブル/個室） */
.seat-toggle {
  display: inline-flex;
  background-color: #efefef;
  border-radius: 6px;
  padding: 4px;
}
.seat-toggle input[type="radio"] {
  display: none; /* 元のラジオボタンを隠す */
}
.seat-toggle label {
  display: inline-block;
  padding: 8px 24px;
  font-size: 14px;
  font-weight: bold;
  color: #555;
  text-align: center;
  cursor: pointer;
  border-radius: 4px;
  min-width: 110px;
  transition: all 0.2s ease;
}
.seat-toggle input[type="radio"]:checked + label {
  background-color: #fff;
  color: #111;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1); /* 選択状態の立体感 */
}

/* ランチ/ディナーのトグルボタン */
.meal-toggle {
  display: flex;
  gap: 16px;
}
.meal-toggle input[type="radio"] {
  display: none;
}
.meal-toggle .btn-meal {
  display: inline-block;
  padding: 14px 0;
  width: 160px;
  text-align: center;
  font-size: 18px;
  font-family: "Times New Roman", Times, serif; /* エレガントな明朝/セリフ体 */
  font-weight: bold;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.2s ease;
  background-color: #efefef;
  color: #999;
}
/* 選択時の色（画像の深い緑色を再現） */
.meal-toggle input[type="radio"]:checked + .btn-meal {
  background-color: #2b4b3b;
  color: #fff;
}

/* ※前回のチェックボックスCSSと同じ場合は省略可 */
.agreement-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0 10px 0 0;
  accent-color: #0d6efd;
  vertical-align: middle;
}

@media screen and (max-width: 768px) {

  /* 行のレイアウト設定 */
  .form-row {
    margin-bottom: 20px;
  }
  .mb-more { margin-bottom: 30px; }
  .mt-more { margin-top: 35px; }

  /* 3カラムレイアウト（PCは横並び、スマホは縦並び） */
  .three-cols {
    display: block;
  }

  /* スマホ時を考慮したハーフ幅（未就学児用） */
  .half-width {
    width: 100%;
    min-width: 100%;
  }

  /* アイコンと入力エリアのグループ */
  .icon-group {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
  }
  .icon-wrap {
    width: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .form-icon {
    width: 20px;
    height: 20px;
    fill: #111;
  }

  /* セレクトボックスの装飾 */
  .select-wrap {
    width: 100%;
    position: relative;
  }
  .select-wrap select,
  .select-wrap input{
    width: 100%;
    padding: 10px 36px 10px 12px;
    font-size: 14px;
    color: #333;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    cursor: pointer;
    appearance: none; /* デフォルトの矢印を消す */
  }
  /* カスタム矢印 */
  .select-wrap::after {
    content: '';
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    border-width: 5px 5px 0 5px;
    border-style: solid;
    border-color: #666 transparent transparent transparent;
    pointer-events: none; /* クリックを貫通させる */
  }


  .seat-toggle label {
    display: inline-block;
    padding: 8px 14px;
    min-width: 110px;
    transition: all 0.2s ease;
  }
  .seat-toggle input[type="radio"]:checked + label {
    background-color: #fff;
    color: #111;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1); /* 選択状態の立体感 */
  }

  .meal-toggle .btn-meal {
    display: inline-block;
    padding: 10px 0;
    width: 100%;
    font-size: 15px;
  }
  /* 選択時の色（画像の深い緑色を再現） */
  .meal-toggle input[type="radio"]:checked + .btn-meal {
    background-color: #2b4b3b;
    color: #fff;
  }

  /* ※前回のチェックボックスCSSと同じ場合は省略可 */
  .agreement-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0 10px 0 0;
    accent-color: #0d6efd;
    vertical-align: middle;
  }
}

/* メニューリスト全体の囲み */
.reservation-menu-list-section {
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
  padding: 0 24px;
}

/* メニューカード1件分 */
.reservation-menu-item {
  display: flex;
  gap: 40px;
  padding: 32px 0;
  border-bottom: 1px solid #e0e0e0;
}
.reservation-menu-item:last-child {
  border-bottom: none;
}

/* 画像部分 */
.reservation-menu-img {
  width: 280px;
  flex-shrink: 0;
}
.reservation-menu-img img {
  width: 100%;
  height: auto;
  display: block;
}

/* コンテンツ部分（テキストと右側のボタン類を分ける） */
.reservation-menu-content {
  display: flex;
  flex: 1;
  justify-content: space-between;
}

/* 左側：タイトルと詳細リスト */
.reservation-menu-info {
  flex: 1;
}
.reservation-menu-title {
  font-family: new-spirit, serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%; /* 30px */
  letter-spacing: 0.8px;
  margin-bottom: 10px;
}

.reservation-menu-details {
  list-style: none;
  padding: 0;
  margin: 0;
}
.reservation-menu-details li {
  font-size: 15px;
  line-height: 150%;
}
.reservation-menu-details li::before {
  content: "・";
  margin-right: 2px;
}

/* 右側：価格とボタン類 */
.reservation-menu-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 20px;
  width: 140px;
}

.reservation-menu-price {
  color: var(--black_5, #262626);
  text-align: right;
  font-size: 24px;
  font-weight: 500;
  line-height: 100%; /* 24px */
  letter-spacing: 0.96px;
}
.reservation-menu-price .reservation-tax {
  font-size: 12px;
  font-weight: normal;
}

/* 「選択する」ボタン */
.reservation-btn-select,
.reservation-select-box select{
  width: 100%;
  padding: 10px 0;
  background-color: #fff;
  border: 1px solid #D9D9D9;
  border-radius: 8px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
}
.reservation-btn-select:hover {
  background-color: #f9f9f9;
}

.reservation-menu-item.active .reservation-btn-select{
  border-color: #254B3D;
  background: #254B3D;
  color: #FFF;
}

/* 「ドルチェあり」プルダウン */
.reservation-select-box {
  width: 100%;
  position: relative;
}
.reservation-select-box select {
  padding-left: 12px;
}

/* --- レスポンシブ対応（スマホサイズ） --- */
@media screen and (max-width: 600px) {
  .reservation-menu-item {
    flex-direction: column;
    gap: 16px;
    padding: 24px 0;
  }
  .reservation-menu-img {
    width: 100%;
  }
  .reservation-menu-content {
    flex-direction: column;
    gap: 24px;
  }
  .reservation-menu-actions {
    width: 100%;
    align-items: flex-start;
    gap: 12px;
  }
  .reservation-btn-select, .reservation-select-box {
    max-width: 200px;
  }
}

@media screen and (max-width: 768px) {

}

/* 全体コンテナ */
.reservation-form-container {
  max-width: 1000px;
  margin: 50px auto 0;
  padding: 0 24px 60px;
}

/* セクションタイトル（グレー背景） */
.reservation-section-title {
  background-color: #f5f5f5;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: bold;
  margin: 0px 0 72px 0;
}

/* フォームの行（ラベルと入力エリアのセット） */
.reservation-form-group {
  display: flex;
  margin-bottom: 37px;
}

/* 左側のラベル部分 */
.reservation-form-label {
  width: 200px;
  flex-shrink: 0;
  padding-top: 10px;
  font-weight: bold;
  font-size: 15px;
  display: flex;
  justify-content: right;
}

/* 右側の入力エリア部分 */
.reservation-form-content {
  width: calc(100% - 200px);
  padding-left: 32px;
}

/* --- 入力要素の共通スタイル --- */
.reservation-input-text,
.reservation-textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #B3B3B3;
  border-radius: 4px;
  font-size: 15px;
  box-sizing: border-box;
}
.reservation-textarea {
  resize: vertical;
}
.reservation-w-half {
  width: 50%;
  min-width: 200px;
}

/* 横並び入力（姓・名） */
.reservation-flex-inputs {
  display: flex;
  gap: 16px;
}

/* プルダウン（ご利用回数） */
.reservation-select-box {
  position: relative;
  width: 100%;
}
.reservation-select-box select {
  width: 100%;
  padding: 12px;
  font-size: 15px;
  border: 1px solid #B3B3B3;
  border-radius: 4px;
  background-color: #fff;
  font-weight: normal;
  cursor: pointer;
}

/* --- アレルギー情報ブロック --- */
.reservation-allergy-block {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.reservation-input-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.reservation-sub-label {
  font-size: 15px;
  font-weight: 400;
  display: block;
  margin-bottom: 3px;
}

/* チェックボックス群 */
.reservation-checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 4px;
}
.reservation-checkbox-group label {
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  cursor: pointer;
}
.reservation-checkbox-group input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0 6px 0 0;
}

/* アレルギー追加ボタン */
.reservation-btn-add-allergy {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 8px 16px;
  background-color: #333;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  margin-top: 8px;
}
.reservation-icon-plus {
  margin-right: 6px;
  font-size: 14px;
}

/* 注記テキスト */
.reservation-note {
  font-size: 15px;
  margin: 8px 0 0 0;
}

/* 必須バッジ（赤） */
.reservation-badge-required {
  background-color: #ED3838;
  color: #fff;
  font-size: 13px;
  padding: 4px 8px;
  border-radius: 4px;
  margin-left: 8px;
  vertical-align: middle;
}

/* 青いアラートボックス */
.reservation-alert-info {
  background-color: #CAF2FC; /* 画像に近い水色 */
  padding: 8px 8px;
  border-radius: 4px;
  margin-top: 15px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.reservation-icon-info {
  width: 18px;
  height: 18px;
  fill: #008eb0;
  flex-shrink: 0;
}

/* --- 送信エリア --- */
.reservation-submit-area {
  margin-top: 60px;
  text-align: center;
}
.reservation-privacy-text {
  font-size: 15px;
  font-weight: 400;
  line-height: 150%; /* 22.5px */
  margin-bottom: 35px;
}

.reservation-privacy-text a {
  color: #262626;
  text-decoration: underline;
}

.reservation-privacy-text a:hover{
  text-decoration: none;
}

.reservation-btn-submit {
  background-color: #254B3D; /* メインカラーの深い緑 */
  color: #fff;
  border: none;
  width: 432px;
  height: 72px;
  color: #FFF;
  text-align: center;
  font-family: source-han-serif-japanese, serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%; /* 24px */
  letter-spacing: 0.96px;
  border-radius: 6px;
}

.reservation-btn-submit.reservation-btn-submit2{
  width: auto;
  height: auto;
  padding: 10px 20px 8px;
  font-size: 18px;
}

.reservation-btn-submit:hover {
  opacity: 0.9;
}


@media screen and (max-width: 768px) {

  /* 全体コンテナ */
  .reservation-form-container {
    max-width: 100%;
    margin: 30px auto 0;
    padding: 0 24px 60px;
  }

  /* セクションタイトル（グレー背景） */
  .reservation-section-title {
    background-color: #f5f5f5;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: bold;
    margin: 0px 0 24px 0;
  }

  /* フォームの行（ラベルと入力エリアのセット） */
  .reservation-form-group {
    display: block;
    margin-bottom: 20px;
  }

  /* 左側のラベル部分 */
  .reservation-form-label {
    width: 100%;
    padding-top: 0px;
    font-size: 14px;
    display: flex;
    justify-content: left;
  }

  /* 右側の入力エリア部分 */
  .reservation-form-content {
    width: 100%;
    padding-left: 0;
    margin-top: 15px;
  }

  /* --- 入力要素の共通スタイル --- */
  .reservation-input-text,
  .reservation-textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #B3B3B3;
    border-radius: 4px;
    font-size: 15px;
    box-sizing: border-box;
  }
  .reservation-textarea {
    resize: vertical;
  }
  .reservation-w-half {
    width: 50%;
    min-width: 200px;
  }

  /* 横並び入力（姓・名） */
  .reservation-flex-inputs {
    display: flex;
    gap: 16px;
  }

  /* プルダウン（ご利用回数） */
  .reservation-select-box {
    position: relative;
    width: 100%;
  }
  .reservation-select-box select {
    width: 100%;
    padding: 12px;
    font-size: 15px;
    border: 1px solid #B3B3B3;
    border-radius: 4px;
    background-color: #fff;
    font-weight: normal;
    cursor: pointer;
  }

  /* --- アレルギー情報ブロック --- */
  .reservation-allergy-block {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .reservation-input-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .reservation-sub-label {
    font-size: 15px;
    font-weight: 400;
    display: block;
    margin-bottom: 3px;
  }

  /* チェックボックス群 */
  .reservation-checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 4px;
  }
  .reservation-checkbox-group label {
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    cursor: pointer;
  }
  .reservation-checkbox-group input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0 6px 0 0;
  }

  /* アレルギー追加ボタン */
  .reservation-btn-add-allergy {
    margin-top: 13px;
  }
  .reservation-icon-plus {
    margin-right: 6px;
    font-size: 14px;
  }

  /* 注記テキスト */
  .reservation-note {
    font-size: 14px;
    margin: 8px 0 0 0;
  }

  /* 必須バッジ（赤） */
  .reservation-badge-required {
    background-color: #ED3838;
    color: #fff;
    font-size: 13px;
    padding: 4px 8px;
    border-radius: 4px;
    margin-left: 8px;
    vertical-align: middle;
  }

  /* 青いアラートボックス */
  .reservation-alert-info {
    gap: 8px;
    font-size: 12px;
  }

  .reservation-alert-info svg{
    width: 20px;
  }

  .reservation-alert-info span{
    display: block;
    width: calc(100% - 28px);
  }

  .reservation-icon-info {
    width: 18px;
    height: 18px;
    fill: #008eb0;
    flex-shrink: 0;
  }

  /* --- 送信エリア --- */
  .reservation-submit-area {
    margin-top: 30px;
  }

  .reservation-privacy-text {
    font-size: 15px;
    font-weight: 400;
    line-height: 150%; /* 22.5px */
    margin-bottom: 35px;
  }

  .reservation-privacy-text a {
    color: #262626;
    text-decoration: underline;
  }

  .reservation-privacy-text a:hover{
    text-decoration: none;
  }

  .reservation-btn-submit {
    width: 100%;
    height: 50px;
    font-size: 20px;
  }

  .reservation-btn-submit.reservation-btn-submit2{
    width: auto;
    height: auto;
    padding: 10px 20px 8px;
    font-size: 18px;
  }

  .reservation-btn-submit:hover {
    opacity: 0.9;
  }

}

/*reservation_form------------------------------------------------------------*/


/* error
------------------------------------------------------------*/
.error-message-area{
  color: #ff4d4d;
  font-weight: bold;
  margin-bottom: 15px;
  padding: 10px;
  border: 2px solid #ff4d4d;
  border-radius: 5px;
  background-color: #fff0f0;
  display: none;
}

.error-message-area.view{
  display: block;
}

@media screen and (max-width: 768px) {
}

/*error------------------------------------------------------------*/

/* modal
------------------------------------------------------------*/

body.is-fixed {
  overflow: hidden;
}

/* モーダル背景 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8); /* 背景を暗く */
  z-index: 9999;
  justify-content: center;
  align-items: center;
  padding: 20px;
  display: none;
}

/* モーダルコンテンツ */
/* --- 追加：モーダル表示時の背景スクロール防止 --- */
body.is-fixed {
  position: fixed;
  width: 100%;
  left: 0;
  overflow: hidden;
}

.openModal{
  cursor: pointer;
  transition: opacity 0.3s ease; /* 0.3秒かけてフワッと変化させる */
  cursor: pointer; /* マウスカーソルを指のマークにする */
}

/* ホバー（カーソルが乗った時）の設定を追加 */
.openModal:hover {
  opacity: 0.7; /* 70%の濃さに透過させる（数値はお好みで調整してください） */
}

/* --- 変更：.modal-content を確実な中央配置に変更 --- */
.modal-content {

  background: #fff;
  width: 100%;
  max-width: 1140px;
  box-sizing: border-box;
  /* ↓ ここから下を変更・追加 ↓ */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 6px;
}

/* --- 追加：中身のテキストエリアの設定 --- */
.modal-inner {
  padding: 60px; /* 余白をこちらに移動 */
  max-height: 90vh;   /* 高さ制限をこちらに移動 */
  overflow-y: auto;   /* スクロールをこちらに移動 */
  box-sizing: border-box;
}

/* 閉じるボタン */
.modal-close {
  position: absolute;
  top: -54px;
  right: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: #fff;
  display: block;
}


/* テキストエリア */
.modal-inner h3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 180%; /* 43.2px */
  letter-spacing: 0.96px;
  margin-bottom: 30px;
  font-family: source-han-serif-japanese, serif;
}

.modal-text p {
  font-size: 14px;
  font-weight: 400;
  line-height: 150%; /* 21px */
  letter-spacing: 0.56px;
}

@media screen and (max-width: 1160px) {
  .modal-content {
    /* 画面幅100%から、左右の余白分(24px + 24px = 48px)を引く */
    width: calc(100% - 48px);
  }
}

/* レスポンシブ対応 */
@media screen and (max-width: 768px) {
  .modal-inner {
    padding: 24px; /* 余白をこちらに移動 */
    max-height: 75vh;   /* 高さ制限をこちらに移動 */
  }

  /* テキストエリア */
  .modal-inner h3 {
    font-size: 18px;
    line-height: 180%; /* 32.4px */
    letter-spacing: 0.72px;
  }

}
/*modal------------------------------------------------------------*/