/* ============================================================
   メニューページ(menu.html)専用のスタイルシート
   index.htmlの中の「MENU」セクションと、見た目は同じになるように
   同じCSSルールをそのままこちらにも書いています
   ============================================================ */

/* ==============================
   はみ出し防止のおまじない(index.htmlのstyle.cssと同じもの)
   ============================== */
* {
  box-sizing: border-box;
}

html {
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  overflow-x: hidden;
}

a {
  text-decoration: none;
}

/* ==============================
   ページ上部の「戻る」バー
   (メニューだけの単独ページなので、トップページに戻れるようにする)
   ============================== */
.menu-back-bar {
  background-color: #2b2620;
  padding: 16px 24px;
}

.menu-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #f6f1e7;
  font-size: 14px;
  letter-spacing: 0.05em;
}

.menu-back-link:hover {
  color: #C5A059;
}

/* ==============================
   MENU(コース・単品・つけだれ)
   ============================== */

.menu-page {
  position: relative;   /* 背景をぼかすための、位置の基準にする */
  overflow: hidden;       /* ぼかしではみ出す分を隠す */

  background-color: #e8e6e1;   /* 万が一、画像が読み込めなかったときの保険の色 */

  /* 上下左右で余白の大きさを変えたいので、4つに分けて指定する */
  /* ★修正★ 以前は一律140pxだったが、パンくずリストとの間が
     51px空いてしまい、他のページ(faq/detail:約30px)と
     揃っていなかった。パンくずリストの下から30pxになるよう、
     スマホ用の数値に変更した。PC用は下の @media で別途指定する。 */
  padding-top: 119px;
  padding-right: 24px;
  padding-bottom: 60px;
  padding-left: 24px;
}

@media (min-width: 768px) {
  .menu-page {
    /* ★追加★ PCではパンくずリストの位置が下がる(top:92px)ため、
       見出しとの間が30pxになるよう、上の余白もそれに合わせて広げる */
    padding-top: 139px;
  }
}

/* 背景専用のぼかしレイヤー(オープニング画面・他ページと同じ仕組み) */
.menu-page::before {
  content: "";
  position: absolute;

  top: -20px;
  left: -20px;
  right: -20px;
  bottom: -20px;

  background-image: url("images/opening-washi-bg.jpg");
  background-size: cover;
  background-position: center;

  filter: blur(6px);   /* 数値を大きくすると、もっとぼやける */

  z-index: 0;   /* 中身より、必ず奥に表示する */
}

/* 中身(見出し・コース・単品メニューなど)を、ぼかしレイヤーより手前に表示する */
.menu-page > * {
  position: relative;
  z-index: 1;
}

/* MENUの見出し部分 */
.menu-page-head {
  text-align: center;
  margin-bottom: 50px;
}

/* パンくずリスト:「今このページが、サイトのどの位置にあるか」を示す */
/* ★修正★ お問い合わせページ(faq.css)と同じ位置に揃えるため、
   中央揃えの見出しの一部としてではなく、position: absolute で
   ロゴの下・左端に独立して配置するように変更した。 */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: #8a8073;

  position: absolute;
  top: 74px;   /* スマホ用の位置(faq.cssと同じ数値) */
  left: 20px;  /* ロゴ画像の左端と揃える(faq.cssと同じ数値) */
}

@media (max-width: 767px) {
  .breadcrumb {
    font-size: 11px;
  }
}

@media (min-width: 768px) {
  .breadcrumb {
    top: 92px;   /* PC用の位置(faq.cssと同じ数値) */
    left: 40px;  /* PCではロゴの左端が40pxになるため、それに合わせる */
  }
}

.breadcrumb a {
  color: #8a8073;
  text-decoration: none;
}

.breadcrumb a:hover {
  color: #C5A059;
}

/* 現在のページ(リンクではない部分)は、少し濃い色にして区別する */
.breadcrumb__current {
  color: #2b2620;
}

.menu-page-eyebrow {
  font-family: "Shippori Mincho", serif;
  font-size: 36px;
  letter-spacing: 0.1em;
  color: #2b2620;   /* 背景が明るいので、濃い色にする */
  margin: 0 0 10px 0;
}

.menu-page-lead {
  font-size: 14px;
  color: #5a5346;   /* 背景が明るいので、濃い色にする */
  margin: 0;
}

/* COURSE・FOODなど、それぞれのブロックのまとまり */
.menu-block {
  max-width: 1000px;
  margin: 0 auto 60px auto;
}

/* 「COURSE コース」のような小見出し */
.menu-block-title {
  font-family: "Shippori Mincho", serif;
  font-size: 20px;
  color: #2b2620;   /* 背景が明るいので、濃い色にする */
  letter-spacing: 0.08em;
  border-bottom: 1px solid #cfc9bd;
  padding-bottom: 12px;
  margin: 0 0 24px 0;
}

.menu-block-title span {
  font-size: 13px;
  color: #7a7264;
  margin-left: 8px;
}

/* コースカードを並べる箱(スマホでは縦並び) */
.course-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* コースカード1枚 */
.course-card {
  padding: 20px 0;
}

/* コースの写真(今はプレースホルダー) */
.course-photo {
  width: 100%;
  aspect-ratio: 16 / 10;
  background-color: #cfc9bd;
  position: relative;   /* バッジを重ねて置くために必要 */
  margin-bottom: 16px;
}

/* コース1の写真(いただいた実際の写真を敷く) */
#course1-photo {
  background-image: url("images/course1-photo.jpg");
  background-size: cover;       /* 写真が枠いっぱいに広がるようにする */
  background-position: center;   /* 写真の真ん中を基準に表示する */
}

/* コース2の写真(いただいた実際の写真を敷く) */
#course2-photo {
  background-image: url("images/course2-photo.jpg");
  background-size: cover;       /* 写真が枠いっぱいに広がるようにする */
  background-position: center;   /* 写真の真ん中を基準に表示する */
}

/* 「飲み放題付き」のような、丸い形のバッジ(2行で収まる円形) */
.course-badge-circle {
  position: absolute;
  top: 12px;
  left: 12px;

  width: 74px;
  height: 74px;
  border-radius: 50%;   /* 正円にする */

  background-color: #2b2620;
  color: #C5A059;
  font-size: 11px;
  line-height: 1.4;

  display: flex;           /* 中の文字を真ん中に置くため */
  justify-content: center;
  align-items: center;
  text-align: center;

  padding: 4px;   /* 文字が端にくっつかないように */
}

/* 「1名様からご注文可能」のような、横長のバッジ */
.course-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background-color: #2b2620;
  color: #C5A059;
  font-size: 11px;
  padding: 6px 12px;
  border-radius: 999px;   /* 丸いカプセル型にする */
}

.course-name {
  font-family: "Shippori Mincho", serif;
  font-size: 19px;
  color: #2b2620;   /* 背景が明るいので、濃い色にする */
  margin: 0 0 10px 0;
}

.course-price {
  font-family: "Shippori Mincho", serif;
  font-size: 26px;
  color: #C5A059;
  margin: 0 0 16px 0;
  text-align: right;   /* 価格を右にくっつける */
}

.course-price small {
  font-size: 12px;
  color: #7a7264;
  font-family: "Noto Sans JP", sans-serif;
  margin-left: 4px;
}

/* コース内容(5品)のリスト */
.course-items-list {
  margin: 0 0 16px 0;
  padding: 0 0 0 18px;   /* ・の記号ぶんの余白 */
}

.course-items-list li {
  font-size: 13px;
  line-height: 1.8;
  color: #4a4438;   /* 背景が明るいので、濃い色にする */
  margin-bottom: 6px;
}

/* 補足・注意事項の文章 */
.course-notes {
  font-size: 11.5px;
  line-height: 1.9;
  color: #8a8274;
  margin: 0 0 18px 0;
  padding-top: 14px;
  border-top: 1px solid #e5e0d5;
}

/* 「詳細・予約はこちら→」ボタン */
.course-button {
  display: block;
  text-align: center;
  background-color: #C5A059;
  color: #2b2620;
  text-decoration: none;
  font-size: 13px;
  padding: 12px;
  transition: background-color 0.3s ease;
}

.course-button:hover {
  background-color: #a3813f;   /* 新しいゴールド色を少し暗くした色 */
}

/* ==============================
   FOOD(単品メニュー)
   ============================== */

/* 単品メニューを並べる箱(スマホでは1列) */
.food-grid {
  display: grid;
  grid-template-columns: 1fr;   /* 1列 */
  gap: 20px;
}

/* 1品ぶんのまとまり(写真+文字を横並びにする) */
.food-item {
  display: flex;
  gap: 14px;
  padding: 12px 0;
}

/* 料理の写真(今はプレースホルダー) */
.food-photo {
  width: 90px;
  height: 90px;
  flex-shrink: 0;   /* 文字側に押しつぶされて縮まないようにする */
  background-color: #cfc9bd;
  background-size: cover;       /* 写真が枠いっぱいに広がるようにする */
  background-position: center;   /* 写真の真ん中を基準に表示する */
}

/* それぞれの単品メニューの写真 */
#food1-photo { background-image: url("images/food-ezoshika-bara.jpg"); }
#food2-photo { background-image: url("images/food-lamb.jpg"); }
#food3-photo { background-image: url("images/food-ezoshika-momo.jpg"); }
#food4-photo { background-image: url("images/food-vegetable.jpg"); }
#food5-photo { background-image: url("images/food-butabara.jpg"); }
#food6-photo { background-image: url("images/food-ramen.jpg"); }

.food-info {
  flex: 1;   /* 残りの幅いっぱいに広がる */
}

.food-name {
  font-family: "Shippori Mincho", serif;
  font-size: 15px;
  color: #2b2620;
  margin: 0 0 6px 0;
}

.food-desc {
  font-size: 11.5px;
  line-height: 1.6;
  color: #7a7264;
  margin: 0 0 8px 0;
}

.food-price {
  font-size: 15px;
  color: #C5A059;
  font-family: "Shippori Mincho", serif;
  margin: 0;
  text-align: right;   /* 価格を右にくっつける */
}

.food-price small {
  font-size: 11px;
  color: #7a7264;
  font-family: "Noto Sans JP", sans-serif;
  margin-left: 2px;
}

/* ==============================
   豊富なつけだれ・薬味
   ============================== */

.condiments-block {
  max-width: 900px;
  margin: 0 auto 50px auto;
  text-align: center;
  padding: 40px 0;
}

.condiments-title {
  font-family: "Shippori Mincho", serif;
  font-size: 22px;
  color: #C5A059;
  margin: 0 0 10px 0;
}

.condiments-lead {
  font-size: 13px;
  color: #5a5346;
  margin: 0 0 24px 0;
}

/* 調味料の写真(今はプレースホルダー) */
.condiments-photo {
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: #cfc9bd;
  margin-bottom: 30px;
}

/* 薬味の写真(いただいた実際の写真を敷く) */
#condiments-photo {
  background-image: url("images/condiments-photo.jpg");
  background-size: cover;       /* 写真が枠いっぱいに広がるようにする */
  background-position: center;   /* 写真の真ん中を基準に表示する */
}

/* つけだれ・薬味のリスト(スマホでは1列) */
.condiments-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  text-align: left;
  margin-bottom: 24px;
}

.condiment-item {
  border-top: 1px solid #e5e0d5;
  padding-top: 14px;
}

.condiment-name {
  font-family: "Shippori Mincho", serif;
  font-size: 15px;
  color: #2b2620;
  margin: 0 0 6px 0;
}

.condiment-desc {
  font-size: 12.5px;
  line-height: 1.7;
  color: #7a7264;
  margin: 0;
}

.condiments-note {
  font-size: 12px;
  color: #8a8274;
  margin: 0;
}

/* MENUセクションを締めくくる一言 */
.menu-page-closing {
  text-align: center;
  font-family: "Shippori Mincho", serif;
  font-size: 15px;
  color: #5a5346;
  letter-spacing: 0.05em;
  margin: 0;
}

/* ==============================
   PC(画面が広いとき)用のレイアウト
   ============================== */
@media (min-width: 768px) {

  /* コースカードをPCでは横並びにする */
  .course-list {
    flex-direction: row;
  }

  .course-card {
    width: 50%;
  }

  /* 単品メニューをPCでは2列にする */
  .food-grid {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }

  /* つけだれ・薬味のリストをPCでは2列にする */
  .condiments-list {
    grid-template-columns: 1fr 1fr;
  }

}

/* ==========================================================
   「上に戻る」ボタン
   ==========================================================
   普段は透明で隠れていて(opacity: 0)、
   JS側(menu.js)で一定量スクロールしたときに is-visible クラスが付き、
   ふわっと見えるようになる仕組みです。
   ========================================================== */
/* ==========================================================
   予約バッジ(画面下に固定表示・丸いフレームデザイン)
   ==========================================================
   常に画面に固定表示することで、いつでもすぐに
   予約ページ(食べログ)に飛べるようにする。
   ★変更★ トップページと同じデザインに揃えるため、
   赤色→黄色、丸背景の「上に戻る」ボタン→矢印だけのデザインに
   作り替えた。
   ========================================================== */
/* ==========================================================
   右下に固定表示する「上に戻る」ボタンを入れる箱
   ==========================================================
   予約バッジ(.reserve-badge)は、矢印ボタンの斜め左上に
   独自の位置(position:fixed)で固定表示するため、
   この箱には含まれない。
   ========================================================== */
.fixed-actions {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 95;

  display: flex;
  align-items: center;
}

/* ==========================================================
   予約バッジ(丸いフレームデザイン)
   ==========================================================
   矢印ボタン(.back-to-top)の斜め左上に固定表示する。
   ========================================================== */
.reserve-badge {
  position: fixed;
  right: 58px;
  bottom: 78px;
  z-index: 95;

  width: 76px;
  height: 76px;

  display: flex;
  align-items: center;
  justify-content: center;

  text-decoration: none;

  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* スマホでは、予約バッジを標準サイズより少しだけ大きくする */
@media (max-width: 767px) {
  .reserve-badge {
    width: 81px;
    height: 81px;
  }
}

.reserve-badge.is-visible {
  opacity: 1;
  visibility: visible;
}

.reserve-badge:hover {
  opacity: 0.85;
}

/* 黄色い円(半透明ではなく、しっかりした黄色) */
.reserve-badge__fill {
  position: absolute;
  top: 12%;
  left: 12%;
  width: 76%;
  height: 76%;
  border-radius: 50%;
  background-color: #FFD400;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

/* 装飾フレーム画像(バッジ全体を覆う) */
.reserve-badge__frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* 「ご予約」「Reservation」の文字 */
.reserve-badge__txt {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #2b2620;   /* 黄色の上でもくっきり読める、濃い焦げ茶色 */
  font-family: "Shippori Mincho", serif;
  line-height: 1.3;
  text-shadow: none;
}

.reserve-badge__jp {
  font-size: 14px;
  font-weight: bold;
}

.reserve-badge__en {
  font-size: 8px;
  letter-spacing: 0.05em;
}

/* PC(画面幅768px以上)では、少し大きく表示する */
@media (min-width: 768px) {
  .reserve-badge {
    width: 110px;
    height: 110px;

    /* PCでは矢印ボタンが64pxに大きくなるため、重ならないよう調整 */
    bottom: 90px;
  }

  .reserve-badge__jp {
    font-size: 17px;
  }

  .reserve-badge__en {
    font-size: 9.5px;
  }
}


/* ==========================================================
   「上に戻る」ボタン(丸い背景をやめ、矢印だけのデザインに)
   ==========================================================
   普段は透明で隠れていて(opacity: 0)、
   JS側(menu.js)で一定量スクロールしたときに is-visible クラスが付き、
   ふわっと見えるようになる仕組みです。
   ========================================================== */
.back-to-top {
  width: 56px;
  height: 56px;

  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;

  border: none;
  background-color: transparent;

  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* 上向きの三角形(先端・動かない)、動く線、TOPの文字を縦に並べる */
.back-to-top__icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transition: transform 0.2s ease;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.25));
}

.back-to-top__arrowhead {
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 9px solid #C5A059;
}

.back-to-top__line {
  position: relative;
  width: 1px;
  height: 20px;
  overflow: hidden;
  background-color: rgba(197, 160, 89, 0.25);
}

.back-to-top__line::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 40%;
  background-color: #C5A059;
  animation: backToTopLineMove 1.8s ease-in-out infinite;
}

@keyframes backToTopLineMove {
  0% {
    bottom: -40%;
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    bottom: 100%;
    opacity: 0;
  }
}

.back-to-top__label {
  font-family: "Shippori Mincho", serif;
  font-size: 9px;
  letter-spacing: 0.15em;
  color: #C5A059;
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
}

.back-to-top:hover .back-to-top__icon {
  transform: scale(1.15);
}

/* スマホの中でも特に幅が狭い画面では、ボタンを少しだけ小さくする */
@media (max-width: 480px) {
  .back-to-top {
    width: 52px;
    height: 52px;
  }
}

/* PC(768px以上)では、矢印アイコンをさらに大きくする */
@media (min-width: 768px) {
  .back-to-top {
    width: 64px;
    height: 64px;
  }

  .back-to-top__arrowhead {
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 12px solid #C5A059;
  }

  .back-to-top__line {
    height: 26px;
  }

  .back-to-top__label {
    font-size: 10px;
  }
}

/* ==========================================================
   ハンバーガーメニューが開いているときの調整
   ==========================================================
   ドロワーメニューが開いている間は、
   ・「上に戻る」ボタン
   ・予約バッジ
   が、ドロワーの上に重なって見えてしまうため、
   メニューが開いている間だけ隠すようにしている。
   (bodyに"nav-open"というクラスが付いている間だけ効くCSS。
    このクラスはheader.js側でメニュー開閉と同時に付け外ししている)

   ★修正★ 以前はヘッダーのロゴも同じように隠していたが、
   「メニューを開くとロゴが消えて見えなくなる」という
   不具合の原因になっていたため、ロゴを隠す指定は削除した。
   ヘッダー自体がドロワーメニューより手前(z-indexが大きい)に
   表示されるようにCSSで指定してあるので、ロゴを隠さなくても
   ドロワーの上にきちんと重なって表示され、隠れる心配はない。
   ========================================================== */
body.nav-open .back-to-top,
body.nav-open .reserve-badge {
  display: none;
}

/* ==========================================================
   ドロワーメニュー・翻訳メニューの背景色を、このページの
   実際の背景色(#e8e6e1)に近づける
   ========================================================== */
body #nav-menu,
body #lang-menu {
  background-color: #f8fafa;
}


/* ==========================================================
   ★練習12で追加★ DRINK(ドリンクメニュー)
   ----------------------------------------------------------
   ・.drink-grid … 種類ごとのまとまりを並べる箱。
                    スマホは1列、PCは2列(下の @media)。
   ・.drink-item … 1行(名前は左、値段は右)。
     display: flex と justify-content: space-between で、
     名前と値段を左右の端に分けている。
   色や文字の大きさは、単品メニュー(.food-name / .food-price)に揃えている。
   ========================================================== */

/* 「※価格はすべて税込です」 */
.drink-note {
  font-size: 12px;
  color: #7a7264;
  text-align: right;
  margin: -12px 0 20px 0;   /* 見出しの下線に少し近づける */
}

.drink-grid {
  display: grid;
  grid-template-columns: 1fr;   /* スマホは1列 */
  gap: 32px;
}

/* 「BEER ビール」のような、種類ごとの見出し */
.drink-category-title {
  font-family: "Shippori Mincho", serif;
  font-size: 16px;
  color: #a0743f;               /* お店のメニュー表と同じ、落ち着いた茶色 */
  letter-spacing: 0.06em;
  margin: 0 0 10px 0;
}

.drink-category-title span {
  font-size: 12px;
  color: #7a7264;
  margin-left: 6px;
  letter-spacing: 0;
}

/* ソフトドリンクの「全品 550円」は、見出しの右端に寄せる */
.drink-category-title .drink-soft-all {
  float: right;
  font-size: 14px;
  color: #C5A059;
}

/* 箇条書きの黒丸や余白を消す */
.drink-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 1行ぶん(名前と値段) */
.drink-item {
  display: flex;
  justify-content: space-between;   /* 名前は左、値段は右の端へ */
  align-items: baseline;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px dotted #d8d2c6;   /* 行の区切りの点線 */
}

.drink-name {
  font-family: "Shippori Mincho", serif;
  font-size: 14px;
  color: #2b2620;
}

.drink-price {
  font-family: "Shippori Mincho", serif;
  font-size: 14px;
  color: #C5A059;     /* 単品メニューの値段と同じ金色 */
  white-space: nowrap;   /* 値段の途中で改行しない */
}

/* ソフトドリンクは名前だけなので、2列に並べる */
.drink-list--soft {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 20px;
}

/* PCでは、種類ごとのまとまりを2列に並べる
   ----------------------------------------------------------
   grid で2列にすると、横に並んだ2つの高さが違うとき(焼酎は8行、
   ハイボールは1行など)、短い方の下に大きなすき間ができてしまう。
   そこで、新聞の段組みのように「左の列が埋まったら右の列へ」
   流し込む columns を使っている。
   ・columns: 2 … 2段に分ける
   ・break-inside: avoid … 1つの種類が、段の途中で分かれないようにする */
@media (min-width: 768px) {
  .drink-grid {
    display: block;          /* grid をやめて、段組みにする */
    columns: 2;
    column-gap: 56px;
  }

  .drink-category {
    break-inside: avoid;
    margin-bottom: 36px;     /* 種類どうしの間のすき間 */
  }
}


/* ==========================================================
   ★練習12で追加★ ドリンクメニューのアコーディオン(スマホだけ)
   ----------------------------------------------------------
   種類の見出しを <button> にしてある。menu.js が、タップされた種類の
   .drink-category に「is-open」クラスを付けたり外したりする。

   ・スマホ(767px以下):is-open が付いていない種類は、中身(.drink-list)を
     隠して、見出しだけを並べる。右端に「＋」、開いているときは「−」。
   ・PC(768px以上):is-open に関係なく、いつも全部表示する。
     「＋」も表示しない。
   ========================================================== */

/* buttonに最初から付いている見た目(枠・背景)を消して、
   今までの見出しと同じ見た目にする */
button.drink-category-title {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  position: relative;   /* 右端の「＋」を置く基準にする */
}

@media (max-width: 767px) {

  /* 見出しを、タップしやすい高さの帯にする */
  button.drink-category-title {
    padding: 14px 32px 14px 0;
    margin: 0;
    border-bottom: 1px solid #cfc9bd;
  }

  /* 種類どうしのすき間は、帯の線で区切るので詰める */
  .drink-grid {
    gap: 0;
  }

  /* 閉じているときは、中身を隠す */
  .drink-category .drink-list {
    display: none;
  }

  /* 開いているときだけ、中身を表示する(ふわっと出す) */
  .drink-category.is-open .drink-list {
    display: block;
    animation: drinkOpen 0.3s ease;
    padding-bottom: 12px;
  }

  /* ソフトドリンクは開いたときも2列のまま */
  .drink-category.is-open .drink-list--soft {
    display: grid;
  }

  /* ソフトドリンクの「全品 550円」は、右端の「＋」とぶつからないよう少し左へ */
  .drink-category-title .drink-soft-all {
    margin-right: 6px;
  }

  /* 右端の「＋」(横線と縦線の2本で作る) */
  .drink-toggle-icon {
    position: absolute;
    right: 4px;
    top: 50%;
    width: 14px;
    height: 14px;
    transform: translateY(-50%);
  }

  .drink-toggle-icon::before,
  .drink-toggle-icon::after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 14px;
    height: 1.5px;
    background-color: #a0743f;
    transition: transform 0.3s ease;
  }

  /* 縦線(横線を90度回したもの) */
  .drink-toggle-icon::after {
    transform: rotate(90deg);
  }

  /* 開いているときは縦線を横に倒して「−」にする */
  .drink-category.is-open .drink-toggle-icon::after {
    transform: rotate(0deg);
  }
}

/* 中身がふわっと現れるアニメーション(少し上から、透明→表示) */
@keyframes drinkOpen {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* PCでは、見出しを押せる見た目にしない(いつも全部表示しているため) */
@media (min-width: 768px) {
  button.drink-category-title {
    cursor: default;
    margin: 0 0 10px 0;
  }
  .drink-toggle-icon {
    display: none;
  }
}