/* トップページと同じ配色・フォントのルールを使っています */
    :root {
      /* ★変更点★
         以前は「暗い背景+明るい文字」のダークテーマだったが、
         他のページと合わせて和紙の明るい背景にするため、
         ここで色を明るいテーマ用に定義し直している。
         CSS変数を使って書いてあるおかげで、ここを直すだけで
         ページ全体の色がまとめて切り替わる。 */
      --color-bg: #f4f2ee;          /* ページの背景色(明るいオフホワイト) */
      --color-surface: #f6f1e7;      /* カード・ボタンなどの下地の色(クリーム) */
      --color-accent: #c6a15b;       /* 金色のアクセントは、そのまま使う */
      --color-text: #2b2620;         /* 基本の文字色(濃い茶色) */
      --color-text-muted: #5a5346;   /* 補足文などの、少し薄い文字色 */
      --color-line: #e0d8c8;         /* 罫線・枠線の色(明るいベージュ) */
      --font-heading: "Shippori Mincho", serif;
      --font-body: "Noto Sans JP", sans-serif;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }

    html {
      position: relative;   /* 背景をぼかすための、位置の基準にする */
      overflow-x: hidden;   /* 横方向にはみ出しても、横スクロールバーを出さないようにする */
    }

    /* 背景専用のぼかしレイヤー(オープニング画面・他ページと同じ仕組み)
       ★変更点★
       bodyの横幅は480px/1100pxに制限されているため、bodyに背景を敷くと
       その外側(左右の余白)がクリーム色の「べた塗り」になってしまっていた。
       常に画面いっぱいに広がるhtml要素の方に敷くことで、
       写真が画面の端から端まで広がるようにしている。 */
    html::before {
      content: "";
      position: absolute;

      top: -20px;
      /* ★修正★ ここを -20px にしていたことが、スマホで横スクロール
         バーが出てしまう原因だった(overflow-x: hidden を付けていても、
         html自身の疑似要素がはみ出す場合はうまく隠しきれないことがある)。
         左右はどうせ画面いっぱいに背景を敷いているので、0にしても
         見た目はほとんど変わらない。 */
      left: 0;
      right: 0;
      bottom: 0;   /* ★修正★ ここが-20pxだと、ページの一番下からさらに
                      20px分はみ出してしまい、フッターの下に余計な余白が
                      出来てしまっていた。下方向だけ、はみ出させないようにした */

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

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

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

    body {
      /* 背景色は付けない(html側の和紙の写真が、そのまま透けて見えるようにする) */
      position: relative;   /* ぼかしレイヤー(html::before)より手前に表示するために必要 */
      z-index: 1;

      color: var(--color-text);
      font-family: var(--font-body);
      line-height: 1.8;
      overflow-x: hidden;   /* 横方向にはみ出しても、横スクロールバーを出さないようにする */
    }

    /* ページの中身(見出し・座席カード)だけを、細い横幅に収める箱。
       ★変更点★
       以前は body 自体の横幅を制限していたが、
       それだとフッターを画面いっぱいに広げるための特別な計算(100vw)が
       必要になり、実機のブラウザによってはズレの原因にもなっていた。
       中身だけをこの箱で囲むことで、body・footerは最初から
       画面いっぱいのまま、中身だけ細い横幅に収められる
       (計算いらずで、フッターも自然に画面いっぱいになる)。 */
    .page-content {
      max-width: 480px;
      margin: 0 auto;
    }

    a { color: inherit; text-decoration: none; }

    /* ---------------- ヘッダー(戻るリンク) ---------------- */
    .detail-header {
      padding: 20px 24px;
      border-bottom: 1px solid var(--color-line);
    }

    .back-link {
      font-size: 0.85rem;
      color: var(--color-text-muted);
      letter-spacing: 0.05em;
    }

    /* ---------------- ページ上部の見出し ---------------- */
    .detail-hero {
      /* 上に固定表示しているヘッダー(#site-header)に見出しが隠れないよう、
         上の余白を広げている(スマホの高さ:約81px + 元の40pxの余白) */
      padding: 121px 24px 32px;
      text-align: center;
    }

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

      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: var(--color-text-muted);
      text-decoration: none;
    }

    .breadcrumb a:hover {
      color: var(--color-accent);
      text-decoration: underline;
    }

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

    .detail-hero__title {
      font-family: var(--font-heading);
      font-size: 1.8rem;
      font-weight: 700;
      letter-spacing: 0.08em;
    }

    /* ---------------- 座席カード一覧 ---------------- */
    .seat-detail-list {
      padding: 0 24px 48px;
      display: flex;
      flex-direction: column;
      gap: 32px;
    }

    .seat-detail-card {
      /* ★変更:枠で囲むデザインをやめたいとのことなので、
         background-color / border / border-radius をすべて外した。
         overflow:hidden も、角丸のために付けていたものなので合わせて削除。 */
    }

    .seat-detail-card__photo {
      height: 200px;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }

    .seat-detail-card__body {
      padding: 24px;
    }

    .seat-detail-card__label {
      /* ★変更点★
         以前は border + border-radius で「丸(ピル型)に囲む」デザインだったが、
         それをやめてシンプルな文字だけの見出しにする。 */
      display: inline-block;

      /* フォントを本文用(Noto Sans JP)から、見出し用フォント
         (Shippori Mincho)に変更。detail-hero__title や
         seat-detail-card__num と同じフォントに揃えている。 */
      font-family: var(--font-heading);

      /* 0.7rem → 1.1rem → 1.6rem にして、さらに文字を大きくした */
      font-size: 1.6rem;

      letter-spacing: 0.15em;

      /* ★変更点★
         黄色っぽい色(--color-accent)から、他の見出しと同じ生成り色
         (--color-text)に変更。ページ内の他の見出しと色味を揃えている。 */
      color: var(--color-text);

      margin-bottom: 14px;

      /* スマホの狭い画面幅でも「大画面プロジェクター」などの文字が
         途中で折り返されないように指定 */
      white-space: nowrap;

      /* 下に細い線を入れるための指定。
         border-bottom で1px(細い)の線を敷き、paddingで文字と線の間に
         少しだけ隙間を作っている。 */
      padding-bottom: 10px;
      border-bottom: 1px solid var(--color-line);
    }

    .seat-detail-card__num {
      font-family: var(--font-heading);
      font-size: 1.1rem; /* ★変更:1.5rem → 1.1rem に小さくした */
      font-weight: 700;
      margin-bottom: 12px;
    }

    .seat-detail-card__text {
      font-size: 0.88rem;
      color: var(--color-text-muted);
    }

    /* ---------------- フッター(トップに戻るボタン) ---------------- */
    .detail-footer {
      padding: 0 24px 56px;
      text-align: center;
    }

    .btn {
      display: inline-block;
      padding: 14px 36px;
      border: 1px solid var(--color-accent);
      border-radius: 999px;
      font-family: var(--font-heading);
      letter-spacing: 0.05em;
      color: var(--color-accent);
      transition: background-color 0.3s ease, color 0.3s ease;
    }

    .btn:hover {
      background-color: var(--color-accent);
      color: #2b2620;   /* 金色の上でも読みやすいよう、濃い茶色に固定する */
    }

    /* ==========================================================
       スマホ幅(700px以下)専用の調整
       「大画面プロジェクター」のようにラベル文字の文字数が多いものが、
       画面の外にはみ出してしまう問題があったため、
       スマホのときだけ文字を少し小さくして、はみ出さないようにする。
       (white-space: nowrap は付けたままなので、折り返しにはならない) ========================================================== */
    @media (max-width: 700px) {
      .seat-detail-card__label {
        font-size: 1.2rem; /* ★変更:1.6rem → 1.2rem。スマホ幅にちょうど収まるサイズにした */
      }
    }

    /* ==========================================================
       ここから下は「画面の横幅が 701px 以上」のとき、つまりPC(パソコン)
       で見たときだけ効くスタイル。
       スマホで見たとき(700px以下)は、この中の指定は無視されるので、
       今までどおりの「写真が上、文字が下」の縦積みレイアウトのままになる。
       ========================================================== */
    @media (min-width: 701px) {

      /* スマホ版では横幅480pxに固定していたが、PCではもっと広く使いたいので
         中身(.page-content)の横幅の上限を広げる。 */
      .page-content {
        max-width: 1100px;
      }

      /* PCではヘッダー(#site-header)の高さが約105pxと少し高くなるので、
         見出しの上余白もそれに合わせて広げる */
      .detail-hero {
        padding-top: 145px;
      }

      /* 座席カードを1枚ずつ「横並び(写真|文字)」にするための入れ物。
         スマホ版と違って、カード同士の間隔(gap)も少し広めにしている。 */
      .seat-detail-list {
        padding: 0 40px 80px;
        gap: 56px;
      }

      /* カードの中を「写真」と「文字」の横並びに変更する。
         display:flex は元々 .seat-detail-card には指定していなかったが、
         ここで新たに指定することで、中の2つの要素(photo/body)が
         左右に並ぶようになる。 */
      .seat-detail-card {
        display: flex;
        flex-direction: row; /* 写真(左)→文字(右)の順で横に並べる */
        align-items: stretch; /* 写真と文字エリアの高さを揃える */
        min-height: 340px;
      }

      /* 写真側:横幅の半分を使い、高さはカードいっぱいまで伸ばす */
      .seat-detail-card__photo {
        flex: 1 1 50%;
        height: auto; /* スマホ版の 200px 固定をやめて、親の高さに合わせる */
      }

      /* 文字側:残りの半分を使い、内容を縦方向の中央に配置する */
      .seat-detail-card__body {
        flex: 1 1 50%;
        padding: 48px 56px;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }

      /* ★ここがポイント★
         「奇数番目(1枚目・3枚目…)」のカードは「写真が左・文字が右」のまま。
         「偶数番目(2枚目・4枚目…)」のカードだけ flex-direction を反転させて
         「文字が左・写真が右」に入れ替える。
         これで「1段目:写真→文字」「2段目:文字→写真」の
         交互デザインになる。 */
      .seat-detail-card:nth-child(even) {
        flex-direction: row-reverse;
      }
    }

    /* ==========================================================
       「上に戻る」ボタン
       ==========================================================
       普段は透明で隠れていて(opacity: 0)、
       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;
  }
}


    /* ==========================================================
       「上に戻る」ボタン(丸い背景をやめ、矢印だけのデザインに)
       ========================================================== */
    .back-to-top {
      width: 56px;
      height: 56px;

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

      border: none;
      background-color: transparent;

      /* 普段は透明・クリックできない状態にしておき、
         JSで「表示する」クラス(is-visible)が付いたときだけ見えるようにする */
      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 var(--color-accent);
    }

    .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: var(--color-accent);
      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: var(--color-accent);
    }

    .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 var(--color-accent);
      }
      .back-to-top__line {
        height: 26px;
      }
      .back-to-top__label {
        font-size: 10px;
      }
    }

    /* ==========================================================
       ヘッダーのロゴ画像について
       ==========================================================
       新しいロゴ画像(logo-full.png)は、もともと濃い茶色の
       文字・アイコンが描かれた画像なので、以前のように
       filterで色を無理やり変える必要はなくなった。
       (この場所には、以前 #site-header .logo-image に
       filter: brightness(0) を当てるための指定があったが、
       新しいロゴ画像ではこのフィルターを使わない)
       ========================================================== */

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