html,
body {
  font-family: "Shippori Mincho", serif;
  background-color: #fffbfb;
  margin: 0 auto;
}

/* 宴会ページ*/
/* 全体共通 */
.banquet {
  position: relative;
  background: url("images/yellow-wall.png") center/cover no-repeat; /* 背景は画像 */
  padding: 72px 14vw 96px;
  overflow: hidden;
  line-height: 1.9;
  font-family: "Shippori Mincho", serif; /* Shippori */
}

.banquet__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1px 0.9fr;
  gap: 32px;
  align-items: start;
}
/* 左側 */
.left {
  display: grid;
  gap: 28px;
}

.price-card {
  background: #fffbfb;
  border-radius: 5px;
  padding: 1vw 6vw;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  max-width: 35vw;
}
.price-card__title {
  text-align: center;
  letter-spacing: 0.15em;
  margin: 0 0 10px;
  font-size: 18px;
}
.price-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 4px;
  font-size: 20px;
  border-top: 1px solid #d9c6a0;
}
.price-row:first-child {
  border-top: 0;
}
.yen {
  letter-spacing: 0.15em;
}

/* 仕切り線 */

/* 右側 */
.right {
  display: grid;
  gap: 20px;
}
.hero-photo {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 2px;
}
.dl-area-wrapper {
  display: flex; /* 横並びにする */
  align-items: center; /* 縦方向の中央揃え */
}
.dl-area {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}
.dl-label {
  font-size: 16px;
  letter-spacing: 0.25em;
  text-align: center;
  padding: 8px 0;
}

.dl-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border-radius: 0 15px 0 0;
  padding: 14px 18px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  text-decoration: none;
  transition: transform 0.08s ease, box-shadow 0.2s ease;
  max-width: 300px;
}
.dl-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}
.dl-btn img {
  display: block;
  max-width: 100%;
  height: 42px;
  object-fit: contain;
}

/* 左の丸吹き出し（任意） */
.bubble {
  position: absolute;
  left: 24px;
  top: 45%;
  width: 150px;
  height: 150px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px;
  font-size: 14px;
}
.bubble::after {
  content: "";
  position: absolute;
  right: -12px;
  bottom: 28px;
  width: 28px;
  height: 28px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}
.bubble img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  margin-top: 6px;
}

/* レスポンシブ */
@media (max-width: 960px) {
  .banquet__inner {
    grid-template-columns: 1fr;
  }
  .divider {
    display: none;
  }
  .bubble {
    position: static;
    margin: 8px 0 0 auto;
  }
}
@media (max-width: 480px) {
  .lead-num {
    font-size: 32px;
  }
  .lead-title {
    font-size: 24px;
  }
  .body-text {
    font-size: 18px;
  }
  .price-row {
    font-size: 18px;
  }
  .dl-btn img {
    height: 36px;
  }
}

@media (max-width: 768px) {
  .banquet__inner {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .divider {
    display: none;
  }

  /* 並び順を変更 */
  .left {
    order: 1; /* 見出し・文章・値段表 */
  }
  .hero-photo {
    order: 2; /* 写真 */
  }
  .price-card {
    order: 3; /* 値段表（left内にあるなら不要）*/
  }
  .dl-area {
    order: 4; /* 予約サイトに飛ぶボタン */
  }

  /* 吹き出しは非表示か下に */
  .bubble {
    position: static;
    order: 5;
    margin: 0 auto;
    width: 100%;
    height: 90px;
    background: #fff;
    border-radius: 2%;
    flex-direction: row;
    gap: 20px;
  }
  .bubble::after {
    bottom: 0px;
    width: 0px;
    height: 0px;
  }

  /* 幅いっぱいに */
  .hero-photo,
  .price-card,
  .dl-btn {
    width: 100%;
    margin-bottom: 3vh;
  }
}

/* 矢印 */
.more-link {
  margin-top: 10px;
  text-align: center;
  position: relative;
  padding-bottom: 22px; /* 下線分の余白 */
  font-size: 16px;
  letter-spacing: 0.2em;
}

.more-link a {
  color: #fff; /* 画像は白文字上に薄線。背景が黄土なので白で */
  text-decoration: none;
  position: relative;
}

/* 中央から左右に伸びるのではなく、画像は中央→右に一本線＋先端の跳ね */
.more-link::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 6px;
  width: 140%;
  height: 1px;
  background: rgba(255, 255, 255, 0.7); /* 画像の白細線に寄せる */
}

/* 右端の“跳ね”矢印（細い斜線） */
.more-link::before {
  content: "";
  position: absolute;
  bottom: 6px;
  /* 下線の右端より少し右に突き出す */
  left: calc(50% + 70%); /* 右方向に半分の29%（=上の幅58%の半分） */
  width: 38px; /* 先端の斜め線の長さ */
  height: 1px;
  background: rgba(255, 255, 255, 0.7);
  transform-origin: left center;
  transform: rotate(-150deg); /* 画像の角度に近い傾き */
}
/* 矢印-短い */
.more-link-short {
  margin-top: 30px;
  text-align: center;
  position: relative;
  padding-bottom: 22px; /* 下線分の余白 */
  font-size: 16px;
  letter-spacing: 0.2em;
}

.more-link-short a {
  color: #fff; /* 画像は白文字上に薄線。背景が黄土なので白で */
  text-decoration: none;
  position: relative;
}

/* 中央から左右に伸びるのではなく、画像は中央→右に一本線＋先端の跳ね */
.more-link-short::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 6px;
  width: 58%;
  height: 1px;
  background: rgba(255, 255, 255, 0.7); /* 画像の白細線に寄せる */
}

/* 右端の“跳ね”矢印（細い斜線） */
.more-link-short::before {
  content: "";
  position: absolute;
  bottom: 6px;
  /* 下線の右端より少し右に突き出す */
  left: calc(50% + 29%); /* 右方向に半分の29%（=上の幅58%の半分） */
  width: 38px; /* 先端の斜め線の長さ */
  height: 1px;
  background: rgba(255, 255, 255, 0.7);
  transform-origin: left center;
  transform: rotate(-150deg); /* 画像の角度に近い傾き */
}
/* 黒バージョン */
.more-link-black {
  margin-top: 3vw;
  text-align: center;
  position: relative;
  padding-bottom: 22px; /* 下線分の余白 */
  font-size: 16px;
  letter-spacing: 0.2em;
}

.more-link-black a {
  color: #222; /* 黒文字 */
  text-decoration: none;
  position: relative;
}

/* 横線 */
.more-link-black::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 6px;
  width: 20%;
  height: 1px;
  background: #222; /* 黒線 */
}

/* 右端の跳ね矢印 */
.more-link-black::before {
  content: "";
  position: absolute;
  bottom: 6px;
  left: calc(50% + 10%);
  width: 38px;
  height: 1px;
  background: #222; /* 黒線 */
  transform-origin: left center;
  transform: rotate(-150deg);
}

/* 黄土背景で視認性を少し確保（PCのみ軽いシャドウ） */
@media (min-width: 901px) {
  .more-link::after,
  .more-link::before {
    box-shadow: 0 0 0.5px rgba(0, 0, 0, 0.12);
  }
}

/* スマホで少し短く */
@media (max-width: 900px) {
  .more-link {
    padding-bottom: 18px;
    font-size: 13px;
  }
  .more-link-black {
    font-size: 13px;
  }
  .more-link::after {
    width: 110%;
  }
  .more-link::before {
    left: calc(50% + 55%); /* 横線(100%)の半分だけ右へ */
    width: 32px; /* 先端の斜め線、好みで */
  }
  .more-link-black::after {
    width: 60%;
  }
  .more-link-black::before {
    left: calc(50% + 30%); /* 横線(100%)の半分だけ右へ */
    width: 32px; /* 先端の斜め線、好みで */
  }
  .more-link-short::after {
    width: 100%;
  }
  .more-link-short::before {
    left: calc(50% + 50%); /* 横線(100%)の半分だけ右へ */
    width: 32px; /* 先端の斜め線、好みで */
  }
  .more-link-short a {
    font-size: 14px;
  }
}

/* ===== 店内写真イメージ ===== */
.interior {
  position: relative;
  padding: 72px 6vw 96px;
  font-family: "Shippori Mincho", serif;
  color: #fff;
  overflow: hidden;
  background: url("images/red-wall.png") center/cover no-repeat;
}

/* 見出し：30px・字間20% */
.interior__title {
  text-align: center;
  font-size: 30px;
  letter-spacing: 0.2em; /* 文字間隔20% */
  margin: 0 0 40px;
  font-weight: 400;
}

/* ビューポート（横スクロール領域） */
.interior__viewport {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
}

/* 横スクロール本体。スナップ有りで矢印でも指でも動く */
.interior__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 4vw) / 3); /* PC=3枚見せ */
  gap: 2vw;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 0 4.5rem; /* 矢印の重なり分の余白 */
  list-style: none;
  margin: 0;
}
.interior__track::-webkit-scrollbar {
  display: none;
} /* 見た目をスッキリ */

/* 1枚 */
.interior__slide {
  scroll-snap-align: center;
}

/* 図版 */
.interior__figure {
  margin: 0;
  display: grid;
  gap: 10px;
}
.interior__figure img {
  width: 100%;
  height: auto;
  display: block;
  background: #fff; /* 端のにじみ防止の白縁 */
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
}
.interior__caption {
  text-align: center;
}

/* 横スクロール本体：3枚表示 */
.interior__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 4vw) / 3);
  gap: 2vw;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  list-style: none;
  margin: 0;
  padding: 0; /* ← trackの左右paddingは0に */
}
.interior__track::-webkit-scrollbar {
  display: none;
}

/* 矢印をビューの左右に重ねる */
.interior__viewport {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 5rem; /* ← 矢印が重なる余白はviewport側で確保 */
}

.interior__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
}
.interior__arrow--prev {
  left: 1rem;
}
.interior__arrow--next {
  right: 1rem;
}
.interior__arrow span::before {
  transform: translateY(-50%) rotate(35deg);
}
.interior__arrow span::after {
  transform: translateY(-50%) rotate(-35deg);
}

/* 右矢印は左右反転で再利用 */
.interior__arrow--next span {
  transform: scaleX(-1);
}

/* SPは1枚見せ＋矢印維持（必要なら） */
@media (max-width: 900px) {
  .interior__track {
    grid-auto-columns: 100%;
    gap: 4vw;
  }
  .interior__viewport {
    padding: 0 3rem;
  }
}

/* 矢印の色：ここだけ変えればOK */
:root {
  --arrow-color: #fffcfc;
}

/* ボタン本体（既存でOK） */
.interior__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
}

/* 横線＋くの字（右端に描く） */
.interior__arrow span {
  display: block;
  width: 44px;
  height: 1px;
  background: var(--arrow-color);
  position: relative;
  margin: 0 auto;
}
.interior__arrow span::before,
.interior__arrow span::after {
  content: "";
  position: absolute;
  right: 0; /* ← 右端に配置するのがポイント */
  top: 50%;
  width: 14px;
  height: 1px;
  background: var(--arrow-color);
  transform-origin: right center;
}
.interior__arrow span::before {
  transform: translateY(-50%) rotate(40deg);
}
.interior__arrow span::after {
  transform: translateY(-50%) rotate(-40deg);
}

/* 右ボタンはそのまま、左ボタンは左右反転して＜にする */
.interior__arrow--prev span {
  transform: scaleX(-1);
}
.interior__arrow--next span {
  transform: none;
}

/* もしボタン内に「←」「→」の文字を入れていたら非表示に */
.interior__arrow {
  color: transparent;
}

/* ===== Takeout Hero ===== */
.takeout {
  position: relative;
  min-height: 80vh; /* 高さは好みで */
  padding: 6vw 6vw 8vw;
  color: #fffcfc;
  background: url("images/cooking.png") center/cover no-repeat;
}
.takeout::after {
  /* 読みやすさ用の薄い暗幕（不要なら削除） */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.15));
  pointer-events: none;
}
.takeout__inner {
  position: relative;
  z-index: 1; /* 暗幕より前に */
}

/* タイトル（白バージョン） */
.headline-square-white {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-family: "Shippori Mincho", serif;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #fffcfc;
  font-size: clamp(16px, 2.2vw, 20px);
  margin: 0 0 2.8vw;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.headline-square-white::before,
.headline-square-white::after {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  background: #fffcfc;
}

/* 右寄せのコピー＋模様 */
.takeout__copywrap {
  margin-left: auto; /* 右側へ寄せる */
  right: 0;
  display: inline-flex;
  align-items: center;
  gap: clamp(10px, 1.8vw, 20px);
  padding-right: 1vw;
  position: absolute;
  right: 0%; /* 右からの距離 */
  top: 1000%; /* 下からの距離 */
  margin: 0;
  text-align: right;
}
.takeout__deco {
  height: clamp(100px, 16vh, 150px); /* 模様の長さ */
  width: auto;

  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
  user-select: none;
}

/* コピー文字 */
.takeout__copy {
  margin: 0;
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0.12em;
  font-size: clamp(24px, 3.6vw, 48px); /* 大小2行の雰囲気に近づける */
  color: #fffcfc;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

/* SP調整 */
@media (max-width: 900px) {
  .takeout {
    min-height: 48vh;
    padding: 8vw 5vw 10vw;
  }
  .takeout__copywrap {
    padding-right: 0;
  }
  .takeout__deco {
    height: 80px;
    opacity: 0.95;
  }
}

/* ===== Takeout Info ===== */
.takeout-info {
  background: #1f1f1f; /* 画像に近い濃いグレー */
  color: #fff;
  font-family: "Shippori Mincho", serif;
}
.takeout-info__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px 3vw;
  display: grid;
  grid-template-columns: 1.15fr 0.7fr 1fr; /* 左／中央写真／右 */
  align-items: center;
}

/* 左カラム */
.takeout-info__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.takeout-info__flower {
  width: 40px;
  height: auto;
  display: block;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
}
.takeout-info__title h3 {
  font-size: 25px; /* 指定 */
  font-weight: 400;
  letter-spacing: 0.18em;
  margin: 0;
}
.takeout-info__body {
  font-size: 18px; /* 指定 */
  line-height: 2;
  margin: 10px 0 16px;
  letter-spacing: 0.06em;
}
.takeout-info__tel {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 18px 0 8px;
  font-size: 28px;
  letter-spacing: 0.08em;
}
.takeout-info__tel-ic {
  width: 35px;
  height: auto;
  opacity: 0.9;
}
.takeout-info__tel a {
  color: #fff;
  text-decoration: none;
}
.takeout-info__note {
  margin: 8px 0 0;
  opacity: 0.8;
  font-size: 16px;
  letter-spacing: 0.12em;
}

/* 中央写真（PNG） */
.takeout-info__photo img {
  width: 80%;
  height: auto;
  display: block;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.25));
}

/* 右カラム（02の見た目に寄せる） */
.takeout-info__right {
  display: grid;
  gap: 16px;
  align-content: start;
} /* 右カラム全体を横並びに */
.takeout-info__right {
  display: flex;
  align-items: center;
  gap: 20px; /* タイトルとボタンの間 */
}

/* 各種デリバリーの縦線付きタイトル */
.delivery-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  color: #fffbfb;
}

.delivery-title span {
  text-orientation: upright;
  letter-spacing: 0.25em;
  font-size: 18px;
  line-height: 1.8;
}

/* タイトルの上下に縦線 */
.delivery-title::before,
.delivery-title::after {
  content: "";
  width: 2px; /* 太さ */
  height: 60px; /* 高さ */
  background: #fff;
}
.delivery-title::before {
  margin-bottom: 8px;
}
.delivery-title::after {
  margin-top: 8px;
}

/* ボタン群は縦並び */
.delivery-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 「各種デリバリー」ラベル＋上下縦線 */
.delivery-title {
  position: relative;
  text-align: center;
  letter-spacing: 0.25em;
  margin: 6px 0 8px;
}
.delivery-title span {
  display: inline-block;
  line-height: 1.8;
}
.delivery-title::before,
.delivery-title::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 60px; /* 指定：高さ60px・太さ2px */
  background: #fff;
  opacity: 0.8;
}
.delivery-title::before {
  top: -70px;
}
.delivery-title::after {
  bottom: -70px;
}

/* ボタン群 */
.delivery-list {
  display: grid;
  gap: 16px;
}

.delivery-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  color: #111;
  text-decoration: none;
  padding: 18px 22px 18px 24px;
  border-radius: 0 20px 0 0; /* 指定：右上だけ20px */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  min-height: 70px;
}
.delivery-btn__label {
  font-size: 20px;
  letter-spacing: 0.14em;
  line-height: 1.2;
}
.delivery-btn__arrow {
  width: 0;
  height: 0;
  border-left: 12px solid #9d1e22; /* 赤い小さな三角矢印 */
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}
.derivery-img {
  height: 35px;
  width: auto;
  object-fit: contain;
  margin-left: 40px;
}
.derivery-img2 {
  height: 35px;
  margin-left: 22px;
  width: auto;
  object-fit: contain;
}
.derivery-img3 {
  height: 35px;
  margin-right: 12px;
  width: auto;
  object-fit: contain;
}
.derivery-img4 {
  height: 30px;
  width: auto;
  object-fit: contain;
}
.derivery-img5 {
  height: 35px;
  margin-right: 100px;
  width: auto;
  object-fit: contain;
}
.derivery-img6 {
  height: 35px;
  margin-left: 16px;
  width: auto;
}
.derivery-img7 {
  height: 35px;
  margin-right: 24px;
  width: auto;
  object-fit: contain;
}

/* レスポンシブ */
@media (max-width: 960px) {
  .takeout-info__inner {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .takeout-info__photo {
    order: 2;
  }
  .takeout-info__right {
    order: 3;
  }
  .takeout-info__left {
    order: 1;
  }
  .delivery-title::before,
  .delivery-title::after {
    left: auto;
    right: auto;
    transform: none;
  }
  .delivery-title span {
    font-size: 15px;
  }
  .interior__title {
    font-size: 20px;
  }
  .interior__arrow {
    top: 40%;
  }
  .interior__caption {
    font-size: 13px;
  }
  .takeout-info__title h3 {
    font-size: 18px;
  }
  .takeout-info__note {
    font-size: 13px;
    text-align: center;
  }
  .takeout-info__photo img {
    width: 40%;
    height: auto;
    margin-left: 30%;
  }
  .takeout-info__body {
    text-align: center;
    font-size: 16px;
  }
  .takeout-info__title {
    text-align: center;
    margin-left: 5%;
  }
  .takeout-info__tel {
    margin-left: 15%;
  }
}

/* ===== Access ===== */
#access .headline-square {
  display: flex; /* 幅100%にして */
  justify-content: center; /* 中のテキストと■を中央に */
  margin: 0 auto 0.5em;
}

.access {
  background: #fffbfb;
  color: #222;
  padding: 72px 6vw 96px;
  font-family: "Shippori Mincho", serif;
}
.access__grid {
  max-width: 1200px;
  margin: 28px auto 0;
  display: grid;
  grid-template-columns: 1.05fr 1fr; /* 左：情報／右：地図 */
  gap: 40px;
  align-items: start;
}

/* 左表風 */
.access__info {
  display: grid;
  gap: 18px;
}
.access__row {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 20px;
  padding: 16px 0;
  border-top: 1px solid #222;
}
.access__row:last-child {
  border-bottom: 1px solid #222;
}

.access__th {
  letter-spacing: 0.12em;
  white-space: nowrap;
}
.access__td {
  line-height: 1.9;
  letter-spacing: 0.03em;
}
.access__tel a {
  color: #222;
  text-decoration: none;
  font-size: 24px;
  letter-spacing: 0.08em;
}

/* 右：地図・バッジ・人物 */
.access__mapwrap {
  position: relative;
  display: grid;
  gap: 16px;
  align-content: start;
}
.access__map {
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  margin-top: 10vh;
}

.access__badge {
  width: fit-content;
  margin: 8px auto 0;
  padding: 14px 28px;
  border: 1.6px solid #222;
  border-radius: 999px;
  background: #fffbfb;
  letter-spacing: 0.18em;
  box-shadow: 0 2px 0 rgba(34, 34, 34, 0.08);
  margin-top: 5vh;
}

/* 右下の人物（PNG） */
.access__person {
  position: absolute;
  right: -8px;
  bottom: -12px;
  width: 92px;
  height: auto;
  pointer-events: none;
}

/* SP：1カラム（左→下に右） */
@media (max-width: 900px) {
  .access__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .access__row {
    grid-template-columns: 120px 1fr;
    gap: 14px;
  }
  .access__tel a {
    font-size: 20px;
  }
  .access__badge {
    margin: 8px auto 40px;
  }
  .access__person {
    right: 4px;
    bottom: -6px;
    width: 72px;
  }
}
/* ===== SP（〜767px） & iPad mini縦（〜834px portrait）で順番を並べ替え ===== */
@media (max-width: 767px), (max-width: 834px) and (orientation: portrait) {
  /* セクション全体を縦フレックス化 */
  .banquet {
    display: flex;
    flex-direction: column;
    padding: 30px 11vw 50px;
  }

  /* 内側のラッパーと左右カラムの“箱”を透過して中身を同じフレックス列に参加させる */
  .banquet__inner,
  .left,
  .right {
    display: contents; /* 子要素を親の直下にいるように扱う */
  }

  /* 左右の区切り線は不要 */
  .divider {
    display: none;
  }

  /* 見出しと本文は、.feature-content-white の箱を透過して個別に並べ替えたいので */
  .feature-content-white {
    display: contents;
  }

  /* ─ 並び順（order） ─ */
   {
    order: 1;
  }
  .feature-text-white {
    order: 2;
  }

  /* 画像（右カラムの .hero-photo） */
  .hero-photo {
    order: 3;
    width: 100%;
    height: auto;
  }

  /* 価格表 */
  .price-card {
    order: 4;
    max-width: none;
    width: 100%;
    padding: 5vw 6vw;
  }

  /* 吹き出しは絶対配置をやめて通常フローに入れる */
  .bubble {
    order: 5;
    position: static;
    margin: 8px auto 0;
  }

  /* 予約サイトボタン群（右側のボックス） */
  .dl-area-wrapper {
    order: 6;
    width: 100%;
  }
  .dl-area {
    gap: 1px;
    margin-top: 8vh;
    margin-left: 2vh;
  }
}
/* デフォルトでは非表示 */
.sp-only {
  display: none;
}

/* SP版 (例: 768px以下) で表示 */
@media (max-width: 768px) {
  .sp-only {
    display: block;
  }
}
@media screen and (max-width: 768px) {
  .banquet {
    position: relative;
    background: url("images/yellow-wall-mobile.png") center/cover no-repeat; /* 背景は画像 */
    overflow: hidden;
  }
}
/* スマホ＆iPad縦：heading → text → photo → more-link-short の順に縦並び */
@media (max-width: 767px), (max-width: 834px) and (orientation: portrait) {
  .feature-white {
    display: flex;
    flex-direction: column;
    gap: 5vw;
    margin: 9vw 10%;
  }

  /* .feature-content の“箱”を透過して子要素を親の直下に参加させる */
  .feature-white .feature-content {
    display: contents;
    /* 以前の .feature-content { order: 1; } を打ち消す */
    order: initial;
  }

  /* 並び順を指定 */
  .feature-white .feature-heading {
    order: 1;
  }
  .feature-white .feature-text {
    order: 2;
  }
  .feature-white .feature-media-drink {
    order: 3;
  }
  .feature-white .more-link-short {
    order: 4;
    align-self: center;
    width: 100%;
  }

  /* 画像はモバイルで大きく */
  .feature-white .feature-media-drink img {
    width: 86vw;
    max-width: none;
    height: auto;
  }
}
@media (max-width: 850px) {
  .takeout__copywrap {
    top: 900%;
  }
}