/* ここに、これから少しずつCSSを書いていきます */

/* ==============================
   はみ出し防止のおまじない
   ============================== */
/* paddingやborderをつけても、要素の幅(width)がそれ以上大きくならないようにする設定 */
/* これがないと、width:100%の要素にpaddingを付けたときに、画面から少しはみ出すことがある */
* {
  box-sizing: border-box;
}

/* ==============================
   ページ全体の基本設定
   ============================== */
html {
  margin: 0;
  padding: 0;
  overflow-x: hidden;   /* 横方向にはみ出しても、横スクロールバー・横スクロールを出さないようにする */
                          /* (スマホの機種によっては、bodyだけでなくhtmlにも指定しないと
                             横スクロールが起きてしまうことがあるため、念のため両方に付けている) */
}

body {
  margin: 0;              /* ブラウザが最初から付けている余白を消す */
  padding: 0;
  font-family: sans-serif; /* 文字の書体(ゴシック体) */
  overflow-x: hidden;       /* 横方向にはみ出しても、横スクロールバーを出さないようにする */
}

/* ==============================
   ヘッダー全体のデザイン
   ============================== */
header {
  /* 背景色を消して透明にする(下のメインビジュアルが透けて見える) */
  background-color: transparent;

  color: #f6f1e7;              /* 写真の上に乗るので、白系(クリーム色)の文字にする */

  /* ★追加★ ヘッダーの文字(ナビ・言語ボタンなど)を、見出しと同じ
     明朝体(Shippori Mincho)にして、サイト全体のフォントを統一する */
  font-family: "Shippori Mincho", serif;

  /* 写真の明るい部分に文字が重なっても読みやすいよう、薄い黒の影をつける */
  /* (text-shadowは子要素にも引き継がれる性質があるので、ロゴ・ナビ・言語ボタン全部に効く) */
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);

  /* ★修正★ 上余白を20px→14pxにした。
     ハンバーガーボタンは真ん中揃え(align-items: center)で
     配置されるため、ロゴ(40px)とボタン(20px)の高さの差の半分(10px)が
     上下に均等に振り分けられる。14px + 10px = 24pxとなり、
     他のページ(header.css)のハンバーガーの位置(24px)と揃う。 */
  padding: 14px 20px 14px 20px;

  /* ロゴ・ナビを横並びにする */
  display: flex;
  align-items: center;
  gap: 40px;

  /* positionをabsoluteにして、メインビジュアルの上に重ねる */
  /* (fixedと違ってスクロールと一緒に流れるが、最初の位置はメインビジュアルの上になる) */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 20;   /* メインビジュアルより、そしてドロワーメニュー(z-index:10)よりも手前に表示する */
}

.logo {
  display: flex;        /* 文字とロゴ画像を横に並べる */
  align-items: center;   /* 縦の位置を真ん中に揃える */
  gap: 4px;               /* 文字と画像のすき間(少し詰めた) */
  min-width: 0;            /* flexの子要素が縮められるようにする(はみ出し防止) */
  flex-shrink: 0;          /* ロゴ自体は縮まないようにする */
}

/* スマホでは「Language」の文字を隠して、🌐と▾だけにする(幅を節約するため) */
.lang-button-text {
  display: none;
}

/* ロゴ画像の大きさ(アイコン+文字が1枚になった横長画像なので、高さを基準にする) */
.logo-full-image {
  height: 40px;   /* スマホでの高さ */
  width: auto;     /* 横幅は高さに合わせて自動調整(縦横比を保つ) */
  flex-shrink: 0;   /* 画像自体は縮まないようにする */
}

/* ==========================================================
   ★追加★ スマホでハンバーガーメニューが開いているとき、
   ロゴがドロワーメニューの後ろに回り込んだように見せる
   ==========================================================
   本当にz-index(重なりの順番)でロゴをドロワーの後ろに
   回してしまうと、閉じるボタン(×)まで一緒に奥に回り込んで
   見えなくなってしまう(×ボタンもヘッダーの中の要素のため)。

   そこで、z-indexの順番はそのままにして、
   「ロゴが表示できる横幅」を、ちょうどドロワーの左端の
   位置までに制限する、という方法を使っている。
   幅からはみ出した部分は overflow: hidden で表示しないので、
   見た目としては、ドロワーの左端でロゴがスパッと切れて、
   ドロワーの後ろに隠れたのと同じように見える。

   計算式の内訳:
   100vw            → 画面(ビューポート)の横幅いっぱい
   - 250px           → ドロワーメニューの横幅(header.css / style.cssの#nav-menuで指定)
   - 20px            → ヘッダーの左側の余白(padding-left)
   ＝ ロゴが安全に表示できる横幅

   画面の横幅が広くて、もともとロゴとドロワーが重ならない
   機種(414px以上など)では、この上限がロゴ本来の幅より
   広くなるだけなので、見た目には何も影響しない。
   ========================================================== */
@media (max-width: 767px) {
  body.nav-open .logo {
    overflow: hidden;                    /* 幅からはみ出した部分を隠す */
    max-width: calc(100vw - 250px - 20px);
  }
}

/* ==============================
   PC用のナビゲーション(2列)
   ============================== */

/* スマホでは、まずは非表示にしておく */
#pc-nav {
  display: none;
}

/* リストの黒い点(・)を消して、横1列に並べる */
#pc-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;

  display: flex;         /* 横並びにする */
  flex-direction: row;
  align-items: center;
  gap: 28px;               /* リンクどうしのすき間 */
  white-space: nowrap;     /* 「TOP」などが折り返さないようにする */
}

/* リンクの文字デザイン */
#pc-nav a {
  color: #f6f1e7;   /* 写真の上に乗るので、白系にする */
  text-decoration: none; /* 下線を消す */
  font-size: 14px;
}

/* リンクにマウスを乗せたときの色(ゴールド色に変える) */
#pc-nav a:hover {
  color: #C5A059;
}

/* ==========================================================
   ★追加★「ご予約はこちら」だけ目立つ色にする
   ==========================================================
   フォント(font-family)は上の「#pc-nav a」から
   そのまま受け継いでいるので、他のナビ項目と同じ明朝体のまま。
   文字の色(color)と太さ(font-weight)だけ、この項目専用に
   上書きしている。

   色は、ページの他の場所(画面右下の丸い「予約バッジ」)で
   既に「予約=赤色」として使われている赤(#E63329)に揃えた。
   サイトの中で色の意味がバラバラにならず、
   「赤色を見たら予約に関係している」と一目で伝わりやすくなる。

   ※違う色に変えたい場合は、下のcolorの値(#E63329)だけを
   　書き換えれば、そのまま見た目が変わります。
   ========================================================== */
#pcnav-reserve {
  color: #E63329;
  font-weight: bold;
}

/* マウスを乗せたときは、少し明るい赤にして「押せる」感じを出す */
#pcnav-reserve:hover {
  color: #ff5c50;
}

/* ヘッダー右側のグループ(言語ボタン + ハンバーガー) */
/* 普通のヘッダーの中身として、横並びにする */
.header-right-group {
  display: flex;        /* 「地球儀アイコン → ハンバーガー」の順番で横並びにする */
  align-items: center;
  gap: 16px;

  margin-left: auto;   /* ヘッダーの中で、右端に寄せる */
}

/* 言語ボタン・ハンバーガーどちらも、フェードで表示・非表示を切り替えるための土台 */
.lang-dropdown,
#menu-button {
  transition: opacity 0.25s ease;   /* 透明度が変わるとき、0.25秒かけてなめらかにする */
}

/* スクロールされて「隠す」ときに、JavaScriptでこのクラスを付ける */
.is-hidden {
  opacity: 0;
  pointer-events: none;   /* 見えなくなっている間は、押せないようにする */
}

/* スクロールされたときに、ハンバーガーだけを画面右上に固定するためのクラス */
/* JavaScriptで、透明にしたタイミングでこのクラスを付け外しする */
#menu-button.is-fixed {
  position: fixed;
  /* ★修正★ 通常時のヘッダーの位置(24pxに変更)と揃えるため、
     16px→24pxにした。 */
  top: 24px;
  /* ★修正★ 通常時のヘッダーの右余白(20pxに変更)と揃えるため、
     16px→20pxにした。 */
  right: 20px;
  z-index: 30;   /* nav-menu(z-index:10)やヘッダー(z-index:20)より、さらに手前に表示する */
}

/* position: relative を付けることで、中のリストを「このボタンの真下」に置けるようにする */
.lang-dropdown {
  position: relative;
}

/* 言語切り替えボタンのデザイン */
#lang-button {
  background-color: transparent; /* 背景を透明にする */
  color: #f6f1e7;                 /* 他のヘッダー文字と同じクリーム色にする(写真の上でも見えるように) */
  border: none;                    /* 枠線を消す */
  font-size: 15px;
  cursor: pointer;

  /* アイコン(svg)と文字を、横並び・真ん中揃えにする */
  display: flex;
  align-items: center;
  gap: 4px;

  height: 20px;   /* ハンバーガーの線の箱(20px)と、高さをぴったり揃える */
}

/* マウスを乗せたときは、ナビと同じゴールド色にする */
#lang-button:hover {
  color: #C5A059;
}

/* 地球儀アイコンの色(currentColorなので、ボタンの文字色をそのまま使う) */
.lang-icon {
  flex-shrink: 0;
}

/* 押すと出てくる言語の一覧(最初は隠しておく) */
#lang-menu {
  position: absolute;   /* ボタンの真下に、浮かせて配置する */
  top: 100%;              /* ボタンのすぐ下に置く */
  left: 0;

  width: 140px;
  background-color: #f8fafa; /* 白に近い色 */

  /* ヘッダーにつけた「写真に重なる文字用の影」を、ここでは打ち消す */
  /* (text-shadowは親から引き継がれる性質があり、このままだと明るい背景の上で文字がぼやけて見えるため) */
  text-shadow: none;

  max-height: 0;          /* 最初は高さ0(隠れている状態) */
  overflow: hidden;        /* はみ出た中身を隠す */

  /* max-heightが変化するとき、0.4秒かけてなめらかに変化させる(上から下に伸びる動き) */
  transition: max-height 0.4s ease;
}

/* ボタンを押して「開いている」状態のときに付けるクラス */
#lang-menu.open {
  max-height: 220px;   /* 中身が全部入るくらいの高さにする */
}

/* 言語ボタン、1つ1つのデザイン */
.lang-option {
  display: block;          /* 縦に並べる */
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 12px 16px;
  font-size: 14px;
  color: #3a2c1e;
  cursor: pointer;
}

/* 言語ボタンにマウスを乗せたときの色 */
.lang-option:hover {
  background-color: #efe7d8; /* 少し濃いクリーム色にする */
  color: #C5A059;             /* 文字をゴールド色にする */
}

/* ハンバーガーメニューのボタン(3本線)のデザイン */
#menu-button {
  background-color: transparent; /* 背景を透明にする */
  border: none;
  cursor: pointer;
  padding: 0;

  /* 中の線(.menu-button-lines)を、真ん中に置く */
  display: flex;
  align-items: center;

  /* 常にドロワーメニュー(#nav-menu, z-index:10)より手前に表示する */
  /* (positionを指定しないとz-indexが効かないため、position:relativeもセットで指定する) */
  position: relative;
  z-index: 30;
}

/* 線3本を入れる箱(この箱を基準に、線の位置を決める) */
.menu-button-lines {
  width: 28px;    /* 箱の幅 */
  height: 20px;    /* 箱の高さ */
  position: relative; /* 中の線(span)を自由な位置に置けるようにする */
}

/* ボタンの中の線(span)3本、共通のデザイン */
.menu-button-lines span {
  position: absolute;   /* 箱の中の好きな位置に置く */
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #f6f1e7; /* 閉じている間は写真の上に乗るので、他のナビ文字と同じクリーム色にする */

  /* 形が変わるとき、0.4秒かけてなめらかに変化させる */
  transition: transform 0.4s ease, opacity 0.4s ease, top 0.4s ease, background-color 0.4s ease;
}

/* 1本目の線は上に置く */
.menu-button-lines span:nth-child(1) {
  top: 0;
}
/* 2本目の線は真ん中に置く */
.menu-button-lines span:nth-child(2) {
  top: 9px;
}
/* 3本目の線は下に置く */
.menu-button-lines span:nth-child(3) {
  top: 18px;
}

/* ボタンが「開いている」状態(activeクラス)のときの形を変える */
/* JavaScriptで、開いたときにこの active クラスを付け外しします */

/* 1本目の線を、真ん中まで下げてナナメに回転させる → Xの右上から左下の線になる */
#menu-button.active .menu-button-lines span:nth-child(1) {
  top: 9px;
  transform: rotate(45deg);
}

/* 2本目の線は透明にして消す */
#menu-button.active .menu-button-lines span:nth-child(2) {
  opacity: 0;
}

/* 3本目の線を、真ん中まで上げて逆向きにナナメに回転させる → Xの左上から右下の線になる */
#menu-button.active .menu-button-lines span:nth-child(3) {
  top: 9px;
  transform: rotate(-45deg);
}

/* メニューが開いているときは、背後がクリーム色のパネルになるので、
   ボタンの線・文字の色も濃い色に変えて、見えなくならないようにする */
#menu-button.active .menu-button-lines span {
  background-color: #2b2620;
}

/* ==============================
   ナビゲーションメニューのデザイン
   ============================== */

/* メニュー全体 */
/* 画面の右端に固定して、最初は画面の外(右)に隠しておく */
#nav-menu {
  position: fixed;   /* 画面に固定して、スクロールしても付いてくるようにする */
  top: 0;
  right: 0;
  width: 250px;       /* メニューの横幅 */
  height: 100%;        /* 画面の高さいっぱいに広げる */

  background-color: #f8fafa; /* 白に近い色(不透明) */

  /* 中身(リンクの一覧・SNSアイコン)を、縦方向の真ん中に並べる */
  display: flex;
  flex-direction: column;   /* 上から下に並べる */
  justify-content: center;  /* 縦方向の真ん中に寄せる */

  /* 最初は右に250px分ずらして、画面の外に隠す */
  transform: translateX(100%);

  /* transformが変化するとき、0.4秒かけてなめらかに動かす */
  transition: transform 0.4s ease;

  z-index: 10; /* 他の要素より手前に表示する */
}

/* ボタンを押して「開いている」状態のときに付けるクラス */
/* JavaScriptで、開いたときにこの class を付け外しします */
#nav-menu.open {
  transform: translateX(0);  /* 元の位置に戻す → 画面内に見える */
}

/* ハンバーガーメニューの一番上に置く、ロゴ画像の見た目 */
.navmenu-logo-icon {
  display: block;
  width: 160px;   /* 文字も一緒に入っている画像なので、読める大きさにする */
  height: auto;
  margin: 0 auto 24px auto;   /* 上下の余白と、左右は auto で真ん中寄せにする */
}

/* リストの黒い点(・)を消す */
#nav-menu ul {
  list-style: none;   /* リストの記号(・)を消す */
  margin: 0;
  padding: 0;
}

/* リストの1つ1つの項目 */
/* 最初は少し右にずれた状態・透明にしておく */
#nav-menu li {
  border-bottom: 1px solid #e0d8c8; /* 項目の下に薄い線を引く */
  opacity: 0;                        /* 最初は透明 */
  transform: translateX(20px);       /* 最初は少し右にずらしておく */
  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* メニューが開いたときは、透明でなくして、元の位置(0)に戻す */
#nav-menu.open li {
  opacity: 1;
  transform: translateX(0);
}

/* 1つずつ、少しずつ遅れて動き出すようにする(これで「順番に出てくる」ように見える) */
#nav-menu li:nth-child(1) { transition-delay: 0.1s; }
#nav-menu li:nth-child(2) { transition-delay: 0.15s; }
#nav-menu li:nth-child(3) { transition-delay: 0.2s; }
#nav-menu li:nth-child(4) { transition-delay: 0.25s; }
#nav-menu li:nth-child(5) { transition-delay: 0.3s; }

/* ==============================
   SNSアイコン(インスタ・LINE)
   ============================== */

/* アイコンを入れている箱を、横並び・真ん中寄せにする */
.sns-icons {
  display: flex;             /* 横並びにする */
  justify-content: center;   /* 横方向の真ん中に寄せる */
  gap: 24px;                  /* アイコンとアイコンの間のすき間 */
  margin-top: 40px;           /* リンクの一覧との間に余白をあける */
}

/* アイコン1つ1つの配置(丸い背景は無し、アイコンだけ) */
.sns-icon {
  display: flex;           /* 中のsvgアイコンを真ん中に置くため */
  justify-content: center;
  align-items: center;
}

/* アイコンにマウスを乗せたときに、少し薄くする */
.sns-icon:hover {
  opacity: 0.6;
}

/* SNSアイコンの画像(LINE・Instagram・TikTok)のサイズ調整。
   元の画像は黒色のアイコンだが、フッターの背景が濃い色(暗い色)なので、
   filterを使って白色に変換して見やすくしている。
   brightness(0):まず画像を真っ黒にする → invert(1):色を反転させて真っ白にする、という2段階の変換 */
.sns-icon-image {
  width: 26px;
  height: 26px;
  filter: brightness(0) invert(1);
}

/* ハンバーガーメニュー(ドロワーメニュー)は背景が明るい色なので、
   上のfilterを打ち消して、アイコンを元の黒色のまま使う */
.sns-icon-image-dark {
  filter: none;
}

/* リンクの文字デザイン
   注意:セレクタを「#nav-menu a」から「#nav-menu ul a」に変更した。
   「#nav-menu a」のままだと、下にあるSNSアイコンのリンク(a.sns-icon)にまで
   この余白(padding)が効いてしまい、アイコン1つが26pxのはずが66pxに広がって、
   アイコンが4つに増えたときにメニューの外にはみ出す原因になっていた。
   ul(文字リンクの一覧)の中のaタグだけに絞ることで、アイコン側には影響しないようにした。 */
#nav-menu ul a {
  display: block;           /* リンクを箱のようにして、タップしやすくする */
  padding: 16px 20px;       /* 内側の余白 */
  color: #3a2c1e;            /* 文字色 */
  text-decoration: none;    /* 下線を消す */
  font-size: 15px;
}

/* リンクにマウスを乗せたときの色 */
#nav-menu ul a:hover {
  background-color: #efe7d8; /* 少し濃いクリーム色にする */
  color: #C5A059;             /* 文字をゴールド色にする */
}

/* ==========================================================
   ★追加★ ドロワーメニュー内「ご予約はこちら」だけ目立たせる
   ==========================================================
   他の項目は濃い茶色(#3a2c1e)の文字だが、ここだけは
   はっきり分かりやすい赤色にして、他のリンクと違うことが
   一目で伝わるようにしている。
   PCナビの「ご予約はこちら」(id="pcnav-reserve")と
   同じ赤色(#E63329)に揃えて、サイト全体で
   「赤色を見たら予約に関係している」と伝わるようにした。
   ========================================================== */
/* ==========================================================
   ★追加★ ドロワーメニュー内「ご予約はこちら」だけ目立たせる
   ==========================================================
   他の項目は濃い茶色(#3a2c1e)の文字だが、ここだけは
   はっきり分かりやすい赤色にして、他のリンクと違うことが
   一目で伝わるようにしている。
   PCナビの「ご予約はこちら」(id="pcnav-reserve")と
   同じ赤色(#E63329)に揃えて、サイト全体で
   「赤色を見たら予約に関係している」と伝わるようにした。

   ★修正★ 最初は「#navmenu-reserve」というセレクタ(id指定)だけで
   書いていたが、CSSには「詳しく指定されているルールほど優先される」
   というルール(詳細度)があり、既に上にあった
   「#nav-menu ul a」というルールの方が詳しく指定されている扱いになって
   しまい、色が反映されていなかった(茶色のまま変わっていなかった)。
   「#nav-menu ul a#navmenu-reserve」のように、上と同じ書き方を
   含めた上でidを追加する形にすることで、確実にこちらが
   優先されるようにした。
   ========================================================== */
#nav-menu ul a#navmenu-reserve {
  color: #E63329;
  font-weight: bold;
}

#nav-menu ul a#navmenu-reserve:hover {
  color: #ff5c50;   /* マウスを乗せたときは少し明るい赤にする */
}

/* ==============================
   背景動画
   (メインビジュアル と スクロール演出セクションの、ずっと後ろに敷く動画)
   ============================== */

/* 動画を画面全体に固定して敷く、外側の箱 */
.fixed-bg-video {
  position: fixed;  /* ページをスクロールしても、画面(ビューポート)に対して同じ場所に留まる */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  z-index: -1;   /* マイナスの値にすることで、他の全部の要素より奥(後ろ)に表示する */
  overflow: hidden;   /* 動画がはみ出た部分は、切って見えないようにする */

  background-color: #1c1a17;  /* 動画が読み込まれる前のあいだ敷いておく、濃い茶色の下地 */

  /* 万が一動画が再生できなかったときのための、保険の背景写真 */
  /* (動画の1コマを切り出した画像。動画の「後ろ」に敷いておくことで、
     JavaScriptが動画の再生失敗を検知して動画を非表示にしたときに、
     真っ黒ではなく、この写真が見えるようにする) */
  background-image: url('images/hero-video-poster.jpg');
  background-size: cover;
  background-position: center;
}

/* 動画そのもののデザイン(スマホ・PC共通のベース) */
.fixed-bg-video__player {
  width: 100%;
  height: 100%;

  /* 画面の形に合わせて、隙間なく敷き詰める(はみ出た部分は切れる) */
  object-fit: cover;

  /* 見える位置(object-position)が変わるとき、0.8秒かけてなめらかに動くようにする */
  /* (シーンごとに位置を切り替えるJavaScriptと組み合わせて使う) */
  transition: object-position 0.8s ease;
}

/* ==============================
   背景動画:PC(画面が横長)のときの調整
   ============================== */
@media (min-width: 768px) {

  /* PCでも、スマホと同じく画面いっぱいに敷き詰める(object-fit: cover のまま) */
  /* → 一度「動画全体をそのまま見せる(contain)」+「ぼかし背景」という形も試したが、
       画面いっぱいに映らず不自然に見えたため、元の「画面いっぱいに敷き詰める」形に戻した。 */
  .fixed-bg-video__player {
    object-fit: cover;
  }
}

/* ==============================
   メインビジュアル(画像が3枚、ふわーんと切り替わる。文字は写真の上に左寄せで重ねる)
   ============================== */

/* メインビジュアル全体の箱 */
.hero {
  position: relative;
  width: 100%;

  /* ★変更★ スマホでは、開いた瞬間に次のセクションが少し見えてしまうのを防ぐため、
     78vh(画面の高さの78%)→100vh(画面いっぱい)に変更した。
     (PC版は、下の @media (min-width: 768px) の中で 120vh に上書きされるので、
      ここを変更してもPC版の見た目は変わらない) */
  height: 100vh;
}


/* 画像を重ねて入れておく箱 */
.hero-slideshow {
  width: 100%;
  height: 100%;
  position: relative;

  /* 背景動画を追加したので、ここは透明にしておく */
  /* (下に敷いた .fixed-bg-video の動画が、そのまま透けて見えるようにする) */
  background-color: transparent;
}

/* 画像1枚1枚のデザイン */
/*
  背景を動画にしたので、写真のスライドショーは表示しないようにする。
  ただし、要素自体は消さずに残しておく(display:noneで見た目だけ消す)。
  → こうしておくと、script.jsの「4秒ごとに画像を切り替える」処理は
     今まで通りエラーなく動き続けるので、他の場所には影響が出ない。
*/
.hero-slide {
  display: none;   /* 画面には表示しない */

  position: absolute;  /* 3枚を同じ場所に重ねて置く(表示していたときの名残) */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;    /* 画像が枠からはみ出さず、きれいに敷き詰められるようにする(はみ出た部分は切れる) */

  opacity: 0;            /* 最初はどの画像も透明(見えない)にしておく */
  transition: opacity 2s ease; /* 透明度が変わるとき、2秒かけてなめらかに変化させる */
}

/* "active" クラスが付いている画像だけを見せる */
/* JavaScriptで、表示したい画像に、このクラスを付け替えます */
/* (画像自体は上で display:none にしているので、これが付いても実際には見えない) */
.hero-slide.active {
  opacity: 1;
}

/* 写真の左側を暗くして、文字を読みやすくするグラデーションの幕 */
/* パーセントで指定しているので、画面の幅が変わっても同じバランスで馴染む */
.hero-slideshow::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  /* 濃さと範囲を少し抑えて、写真がはっきり見えるようにする */
  background: linear-gradient(
    to right,
    rgba(43, 38, 32, 0.55) 0%,
    rgba(43, 38, 32, 0.3) 25%,
    rgba(43, 38, 32, 0) 50%
  );

  z-index: 2;   /* 画像より手前、文字より奥に重ねる */
}

/* ==========================================================
   ★追加★ ファーストビュー下端の「黒っぽい切り替わり」を、
   グラデーションでなじませる
   ----------------------------------------------------------
   このすぐ下にある.story-sectionは、黒を55%の濃さで
   重ねて暗くしている(story-section::beforeのrgba(0,0,0,0.55))。
   今までは、ファーストビュー(明るい映像)から
   story-section(暗い)へ、境目でいきなり切り替わっていたため、
   特にスマホでは、まだスクロールしていない最初の画面にも
   その境目(黒っぽい部分)が少し見えてしまっていた。

   そこで、ファーストビューの下から少しの範囲(下から45%)に、
   「透明→story-sectionと同じ黒(55%の濃さ)」のグラデーションを
   重ねることで、下にスクロールするにつれて自然に暗くなり、
   story-sectionの暗さへなめらくつながるようにした。
   ========================================================== */
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 45%;   /* ファーストビューの高さの下45%ぶんを、グラデーションの範囲にする */

  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.55) 100%   /* ★story-sectionの暗さ(0.55)と同じ濃さに揃えている */
  );

  z-index: 2;         /* 画像より手前、文字より奥に重ねる(左側のグラデーションと同じ階層) */
  pointer-events: none;   /* このグラデーションの上からでも、下のボタンなどが押せるようにする */
}

/* 写真の上に重ねる、中央寄せの文字の箱 */
.hero-text-overlay {
  position: absolute;   /* 画像の上に重ねて置く */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  /* ★修正★ 以前は「左寄せ・少し下寄り」の配置だったが、
     「画面のセンター(縦横どちらも真ん中)」に表示してほしいとの
     ことなので、位置指定を変更した。 */
  display: flex;
  flex-direction: column;
  justify-content: center;    /* 縦方向も真ん中に */
  align-items: center;         /* 横方向も真ん中に */
  text-align: center;           /* h1・pの中の文字も中央揃えにする */

  padding: 0 24px;                /* 左右の余白だけ残す(上下は center合わせなので不要) */
  z-index: 3;   /* グラデーションより、さらに手前に重ねる */

  /* 文字を表示・非表示するとき、0.6秒かけてなめらかにする */
  transition: opacity 0.6s ease;
}

/* ★修正★ 以前は「3枚目の画像が表示されているときだけ」隠していたが、
   今は「スクロールしたときだけ」隠すようにしている
   (JavaScript側:window.scrollYが0より大きくなったら
    このクラスを付ける、という処理に変更した) */
.hero-text-overlay.hide-text {
  opacity: 0;
}

/* ==========================================================
   ★追加★ スマホでは、文字全体を少しだけ下にずらす
   ==========================================================
   ファーストビューの高さを100vh(画面いっぱい)にしたことで、
   真ん中(center)の位置が少し上寄りに感じられたため、
   transform: translateY で、文字のかたまり全体を
   40pxぶん下にずらした。
   (position: absoluteでinset:0の要素なので、
    translateYで簡単に位置を微調整できる)
   ========================================================== */
@media (max-width: 767px) {
  .hero-text-overlay {
    transform: translateY(40px);
  }
}

/* 見出しの文字デザイン */
.hero-text-overlay h1 {
  font-family: "Shippori Mincho", serif; /* 明朝体フォントにする */
  color: #FFFFFF;   /* ★修正★ ゴールド色(#C5A059)から白色に変更 */
  font-size: 20px;   /* スマホ用のサイズ */
  line-height: 1.6;
  margin: 0 0 16px 0;
}

/* 説明文の文字デザイン */
.hero-text-overlay p {
  font-size: 10px;   /* スマホ用のサイズ */
  line-height: 1.9;
  color: #FFFFFF;   /* ★修正★ 見出しと同じ白色に統一(以前は#ece4d3という、少しクリームがかった色だった) */
  margin: 0;
  max-width: 340px;
}

/* ==========================================================
   ★追加★ サブコピー「蝦夷鹿を楽しむ、北海道のひとりしゃぶしゃぶ。」
   ----------------------------------------------------------
   見出し(h1)と本文(p#hero-description)の間に置く、1行の文字。
   本文よりも少しだけ目立たせたいので、太字にしている。
   ★修正★ 文字色は、最初は金色にしていたが、白に変更した
   (見出し(h1)・本文と、同じ白色に揃った)。
   ========================================================== */
.hero-subcopy {
  font-family: "Shippori Mincho", serif;
  font-size: 13px;               /* スマホ用のサイズ(本文より少し大きめ) */
  font-weight: bold;
  letter-spacing: 0.03em;
  color: #FFFFFF;                  /* ★変更★ 金色(#C5A059)→白に変更 */
  margin: 0 0 14px 0;              /* 見出しとの間に少しすき間を作る */

  /* ★追加★ スマホの画面幅によっては、この1行が2行に折り返されて
     しまうことがあったため、折り返さない(1行のまま)ように指定した。 */
  white-space: nowrap;
}

/* ==========================================================
   ★追加★ 「予約する」「お品書きを見る」ボタンをまとめる箱
   ----------------------------------------------------------
   display:flexで、2つのボタンを横に並べる。
   スマホの画面幅が狭いときは、flex-wrap:wrapによって
   自動で2段(縦)に折り返されるようにしている。
   ========================================================== */
.hero-buttons {
  display: flex;
  flex-wrap: wrap;                 /* 画面が狭いときは、自動で折り返して縦に並ぶ */
  justify-content: center;
  gap: 14px;                        /* ボタン同士の間のすき間 */
  margin-top: 26px;
}

/* ボタン2つに共通するデザイン(大きさ・形・文字など) */
.hero-btn {
  display: inline-block;
  padding: 13px 30px;
  border-radius: 999px;              /* 大きい数値でピル型(完全な楕円)にする */
  font-family: "Shippori Mincho", serif;
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 0.05em;
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease, opacity 0.3s ease;
}

/* 「予約する」:目立たせたいので、金色で塗りつぶす */
.hero-btn--primary {
  background-color: #C5A059;
  color: #2b2620;                     /* 金色の上でも読みやすい、濃い茶色の文字 */
  border: 1px solid #C5A059;
}

.hero-btn--primary:hover {
  opacity: 0.85;
}

/* 「お品書きを見る」:控えめにしたいので、枠線だけの白文字にする */
.hero-btn--secondary {
  background-color: transparent;
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.8);
}

.hero-btn--secondary:hover {
  background-color: rgba(255, 255, 255, 0.15);   /* ホバーで、うっすら白く光らせる */
}

/* ==========================================================
   ★追加★ 下にスクロールしてほしいことを伝える案内パーツ
   ========================================================== */

/* 縦線・文字をまとめて、縦に並べて中央揃えにする外側の箱 */
.hero-scroll-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 100px;   /* ★修正★ もう少し下にしたいとのことで、64px→100pxに広げた */
}

/* 縦線を表示する箱(この枠からはみ出した部分は見えなくする) */
.hero-scroll-indicator__line {
  position: relative;   /* 中の小さい線(::before)を、この位置を基準に動かすため */
  display: block;
  width: 1px;
  height: 40px;
  overflow: hidden;      /* 枠からはみ出した部分を隠す */
  background-color: rgba(255, 255, 255, 0.3);   /* 薄い、動かない背景の線 */
}

/* 縦線の中を、上から下へ動く小さい線(実際に動くのはこの部分) */
.hero-scroll-indicator__line::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 40%;
  background-color: #FFFFFF;   /* くっきりした白色にする */

  /* 下の @keyframes（アニメーションの中身）を、
     1.8秒かけて・ずっとくり返す・動きに緩急をつける、という指定 */
  animation: heroScrollLineMove 1.8s ease-in-out infinite;
}

/* ★アニメーションの中身★
   小さい線が「枠の上(見えない状態)」→「枠の中を通過(見える)」→
   「枠の下(見えない状態)」へ移動する動きを、パーセントで指定している。
   (0%が開始、100%が1回分の終わり) */
@keyframes heroScrollLineMove {
  0% {
    top: -40%;
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    top: 100%;
    opacity: 0;
  }
}

/* 「SCROLL」の文字デザイン */
.hero-scroll-indicator__text {
  font-family: "Shippori Mincho", serif;   /* 他の文字と揃える */
  font-size: 10px;
  letter-spacing: 0.25em;   /* 文字の間を少し広げて、案内文字らしくする */
  color: #FFFFFF;
}

/* ==============================================================
   共通の見出しコンポーネント(.section-label)
   ------------------------------------------------------------
   「店内の案内」で使っている、
     OUR INTERIOR ← 英語の小さいラベル(下に金色の線つき)
     店内の案内   ← 日本語のラベル
   という見出しの形を、お品書き(MENU)・新着情報(NEWS)でも
   同じフォント・同じサイズで使えるように、共通クラスとして
   切り出したもの。

   「店内の案内」側で使っている --font-heading(明朝体)・
   --color-accent(金色)という変数は、:root(このファイルの
   もっと下の方)で定義されていて、ページ全体のどこからでも
   使えるので、ここでもそのまま使っている。
   ============================================================== */
.section-label {
  text-align: center;   /* 英語ラベル・日本語ラベルの両方を、中央に揃える */
  margin-bottom: 30px;   /* 見出しの下と、本文・写真との間の余白 */
}

.section-label-en {
  /* 以前はinline-block(文字幅ぴったり)にしていたが、
     線をもっと長く見せたいので、幅を固定して
     文字を中央揃えにする形に変更した。 */
  display: block;
  width: 220px;               /* 線の長さ(この数値を変えると長さを調整できる) */
  margin-left: auto;
  margin-right: auto;
  text-align: center;

  font-family: var(--font-heading);   /* 「店内の案内」と同じ明朝体フォント */
  font-size: 1.4rem;                     /* スマホ用のサイズ(1.05rem→1.4remに拡大) */
  letter-spacing: 0.12em;
  color: #2b2620;   /* 明るい背景の上に乗るので、白ではなく濃い茶色にしている */

  padding-bottom: 8px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--color-accent);   /* 文字の下に、金色の線を引く */
}

.section-label-jp {
  font-family: var(--font-heading);   /* 「店内の案内」と同じ明朝体フォント */
  font-size: 1rem;                     /* スマホ用のサイズ(0.75rem→1remに拡大) */
  letter-spacing: 0.2em;
  color: #2b2620;
}

/* 画面の幅が768px以上のとき(パソコンなど広い画面)は、
   「店内の案内」のPC版と同じ大きさまで拡大する */
@media (min-width: 768px) {

  /* PC幅では、中央揃えではなく左揃えにする
     (「店内の案内」はスマホ・PCとも中央揃えのまま。
      この.section-labelを使っているのはお品書き・新着情報の2箇所だけなので、
      ここで変更しても他の見出しには影響しない) */
  .section-label {
    text-align: left;
  }

  .section-label-en {
    width: 280px;         /* PCでは、線をさらに長くする */
    margin-left: 0;         /* 左揃えなので、中央寄せの余白は解除する */
    margin-right: 0;

    /* ★修正★ 左揃えだと、線(280px)に対して文字が左に寄って
       見えてしまっていた。線に対してセンターにくるよう、
       中央揃えに変更した(下の.section-label-jpと同じ考え方)。 */
    text-align: center;

    font-size: 1.9rem;
    padding-bottom: 14px;
    margin-bottom: 10px;
  }

  .section-label-jp {
    font-size: 1.05rem;

    /* ★修正★ 以前は幅の指定が無く、線(.section-label-en)より
       広い範囲で左揃えになっていたため、「線に対して左寄り」に
       見えてしまっていた。線と同じ幅(280px)にして、その中で
       中央揃えにすることで、線に対して文字が中央にくるようにした。 */
    width: 280px;
    text-align: center;
  }
}

/* ==============================================================
   concept-group
   ------------------------------------------------------------
   「こだわり」(.ingredients)と「お品書き」(.concept)を
   ひとまとめにする親の箱。
   以前は .ingredients と .concept がそれぞれ自分の中だけで
   和紙の背景をぼかして敷いていたため、セクションの高さが違うことで
   模様の大きさ・位置がズレて、境目に線があるように見えてしまって
   いました。
   そこで、背景のぼかしをこの親div側にまとめて1回だけ敷くことで、
   2つのセクションをまたいでも模様が自然につながるようにしています。
   ============================================================== */
.concept-group {
  /* 背景をぼかすための、位置の基準にする */
  position: relative;
  overflow: hidden;   /* ぼかしではみ出す分を隠す */

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

/* 背景専用のぼかしレイヤー(オープニング画面と同じ仕組み) */
.concept-group::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;   /* 中身(こだわり・お品書きの中身)より、必ず奥に表示する */
}

/* ==============================
   こだわりセクション
   ------------------------------
   背景のぼかしは親(.concept-group)側で1回だけ敷いているので、
   ここでは上下左右の余白(padding)だけを指定する。
   ============================== */

.ingredients {
  padding: 60px 24px;
}


/* 見出しとアイコンをまとめて入れる、外側の箱 */
/* スマホでは、まず縦並び(文字が上、アイコンが下)にしておく */
.ingredients-inner {
  position: relative;   /* ぼかしレイヤー(::before)より手前に表示するために必要 */
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: 1000px;
  margin: 0 auto;
}

/* 見出しとリード文を入れる箱 */
.ingredients-text {
  text-align: center;

  /* 最初は透明・少し下にずらしておく(登場アニメーションの準備) */
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* 画面に入ってきたときに、JavaScriptでこのクラスが付く */
.ingredients.visible .ingredients-text {
  opacity: 1;
  transform: translateY(0);
}

.ingredients-title {
  font-family: "Shippori Mincho", serif;
  font-size: 26px;
  color: #2b2620;
  margin: 0 0 16px 0;
}

.ingredients-lead {
  font-size: 14px;
  line-height: 2;
  color: #5a5346;
  margin: 0;
}

/* アイコンが3つ並ぶ箱 */
/* スマホでは、まず縦並びにしておく */
.ingredients-list {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* アイコン1つぶんのまとまり */
.ingredient-item {
  text-align: center;

  /* 最初は透明・少し下にずらしておく */
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* 画面に入ってきたときに、見えるようにする */
.ingredients.visible .ingredient-item {
  opacity: 1;
  transform: translateY(0);
}

/* 1つずつ、少しずつ遅れて登場させる(ハンバーガーメニューのリンクと同じ仕組み) */
.ingredients.visible .ingredient-item:nth-child(1) { transition-delay: 0.15s; }
.ingredients.visible .ingredient-item:nth-child(2) { transition-delay: 0.3s; }
.ingredients.visible .ingredient-item:nth-child(3) { transition-delay: 0.45s; }
.ingredients.visible .ingredient-item:nth-child(4) { transition-delay: 0.6s; }

/* 丸いアイコンの背景 */
/* ★変更点★
   背景が「和紙(明るい色)」に変わったので、
   アイコンの見た目も、暗い背景向けの配色から見直している。
   輪郭線・文字は、サイトの基本色である濃い茶色に統一した。 */
.ingredient-icon {
  /* ★修正★ スマホでもアイコンを大きくしたので、88px→100pxにした */
  width: 100px;
  height: 100px;
  border-radius: 50%;   /* 円形にする */

  /* ★変更★ 今までの「線だけの丸」(border)はやめて、
     代わりに下の装飾フレーム画像(.ingredient-icon__frame)を
     PC版と同じように表示するようにした */
  border: none;

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

  margin: 0 auto 16px auto; /* 真ん中に置いて、下に余白 */

  /* ★追加★ フレーム画像を、この丸の位置を基準にして重ねて表示するため */
  position: relative;

  /* 大きさが変わるとき、0.3秒かけてなめらかにする(PCのカーソル拡大のため) */
  transition: transform 0.3s ease;
}

/* アイコン画像(北海道・鹿・鍋のシルエット)の大きさ */
/* ★修正★ 装飾フレーム画像(.ingredient-icon__frame)は対象から除外し、
   フレーム以外の画像だけに、このサイズを適用するようにした */
.ingredient-icon img:not(.ingredient-icon__frame) {
  /* ★修正★ 46px→56pxに少し大きくした */
  width: 56px;
  height: 56px;
  object-fit: contain;  /* 画像全体が見えるように収める */

  /* アイコン画像そのものは「白いシルエット」のPNG画像なので、
     このままだと明るい背景に馴染んで見えなくなってしまう。
     filter: brightness(0) を使うと、画像の色に関係なく、
     不透明な部分をすべて真っ黒に変えることができる
     (透明な部分はそのまま透明なので、シルエットの形は保たれる)。 */
  filter: brightness(0);
}

/* ★追加★ 4つ目(貸切にも対応)のSVGアイコンも、他の3つと同じ大きさに揃える。
   HTML側にwidth/height="46"を書いていたが、CSSの指定の方が優先されるので、
   ここで上書きするだけでよい。 */
.ingredient-icon svg {
  width: 56px;
  height: 56px;
}

.ingredient-title {
  font-size: 16px;
  font-weight: bold;
  color: #2b2620;
  margin: 0 0 8px 0;
}

.ingredient-desc {
  font-size: 13px;
  line-height: 1.8;
  color: #5a5346;
  margin: 0;
}

/* ★変更★ 装飾フレーム画像(予約バッジと同じもの)。
   以前はPCのときだけ表示していたが、今回スマホでもPC版と同じ見た目にしたいので、
   スマホ・PC共通でここに表示スタイルをまとめた。 */
.ingredient-icon__frame {
  display: block;
  position: absolute;   /* .ingredient-icon(position: relative)を基準に重ねる */
  top: 0;
  left: 0;
  width: 100%;           /* 丸(.ingredient-icon)いっぱいに広げる */
  height: 100%;
  filter: brightness(0); /* 赤色の画像を黒色に変える */
  pointer-events: none;   /* 装飾なので、クリックなどの邪魔をしないようにする */
}

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

.menu-page {
  background-color: #e8e6e1;   /* 薄いグレーの背景 */
  padding: 60px 24px;
}

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

.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行で収まる円形) */
.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;
}

/* つけだれ・薬味のリスト(スマホでは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;
}

/* ==============================
   フッター
   ============================== */

footer {
  /* 単色のダークグレーをやめて、透明にする */
  /* → 一番上で固定表示している .fixed-bg-video の動画が、ここにも透けて見えるようになる */
  /*   (fixed(固定)の動画は画面のどこにいても後ろに存在し続けるので、
       このフッターの背景を透明にするだけで、同じ動画がそのまま流れて見える) */
  background-color: transparent;

  position: relative;   /* 下の「暗くする幕」を、このフッターの中に重ねて置くために必要 */

  color: #f6f1e7;              /* 文字色は白系(クリーム色)にする */

  /* 上下の余白を増やして、フッター全体の高さを少し長くする */
  padding: 80px 20px;
}

/* 動画の上に薄く黒を重ねて、文字を読みやすくする「幕」 */
footer::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  pointer-events: none;   /* この幕がリンクのクリックなどを邪魔しないようにする */
}

/* フッターの中身(お店情報・地図・著作権)を、上の「幕」より手前に表示する */
.footer-inner,
.footer-copyright {
  position: relative;
  z-index: 1;
}

/* 左側(お店情報)と右側(地図)を入れる箱 */
/* スマホでは、まず縦並びにしておく */
.footer-inner {
  display: flex;
  flex-direction: column; /* 縦に並べる(お店情報が上、地図が下) */
  gap: 30px;                /* 上下のすき間 */
}

/* お店の名前(フッター内)
   ヘッダーのロゴ(.logo)と同じ考え方で、
   「アイコン画像」と「文字2行」を横並びにしています */
.footer-logo {
  display: flex;         /* アイコンと文字を横に並べる */
  align-items: center;    /* 縦の位置を真ん中に揃える */
  gap: 10px;                /* アイコンと文字のすき間 */
  margin: 0 0 14px 0;
}

/* フッターのロゴアイコン画像の大きさ(高さを基準に、横幅は自動調整) */
.footer-logo-icon {
  height: 40px;
  width: auto;
  flex-shrink: 0;   /* 画像がつぶれて縮まないようにする */
}

/* ロゴ文字2行(小さい文字+大きい文字)をまとめる箱 */
.footer-logo-text {
  display: flex;
  flex-direction: column;
}

/* ロゴの上の行(小さい文字):「北海道しゃぶしゃぶ」 */
.footer-logo-sub {
  font-size: 13px;   /* 11px → 13px に拡大 */
  margin: 0;
  white-space: nowrap;   /* 折り返さないようにする */
}

/* ロゴの下の行(大きい・太字):「エゾカムイ」 */
.footer-logo-main {
  font-family: "Shippori Mincho", serif;   /* 明朝体フォントにする(ヘッダーと揃える) */
  font-size: 24px;   /* 20px → 24px に拡大 */
  font-weight: bold;
  margin: 2px 0 0 0;
  white-space: nowrap;
}

/* 「住所・電話・営業時間」と「ナビゲーション」をまとめる箱。
   スマホでは縦並び(今まで通り)。PCでは下の@mediaで横並びに切り替える。 */
.footer-details {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 住所の中の「秋水ビル 3階」の前にある改行(sp-only-break)。
   PCでは横幅に余裕があるので、ここでは改行しない(非表示にする)。
   スマホ用のスタイルは、下の @media (max-width: 767px) の中で表示に切り替えている。 */
.sp-only-break {
  display: none;
}

/* 住所・営業時間の文字 */
.footer-info p {
  font-size: 16px;   /* 14px → 16px に拡大 */
  margin: 0 0 8px 0;
}

/* 電話番号のリンク部分(タップ・クリックで発信できる) */
/* 文字色や下線を、まわりの文章に合わせて自然に見えるようにする */
#footer-tel a {
  color: inherit;              /* まわりの文字と同じ色にする(リンクの初期値である青色にしない) */
  text-decoration: underline;  /* リンクだと分かるよう、下線だけは残しておく */
}

#footer-tel a:hover {
  color: #C5A059;   /* マウスを乗せたときだけ、サイトのテーマカラー(金色系)に変える */
}

/* ★追加★
   PC(画面幅768px以上)では、電話番号を「押せないただの文字」にする。
   スマホでは電話番号をタップしてそのまま発信できると便利だが、
   PCでは電話をかける操作自体ができないため、リンクにする意味が薄く、
   むしろ「クリックできそうに見えるのに何も起きない」のは不親切。
   そこで、PCのときだけ見た目・動きの両方を「ただの文字(pタグ)」と
   同じにしている。 */
@media (min-width: 768px) {
  #footer-tel a {
    color: inherit;              /* リンクらしい色を消す */
    text-decoration: none;       /* 下線も消す */
    cursor: default;             /* マウスカーソルも「指マーク」ではなく通常の矢印にする */
    pointer-events: none;        /* クリックしても電話アプリが起動しないようにする */
  }

  #footer-tel a:hover {
    color: inherit;   /* PCではマウスを乗せても色を変えない(リンクではないため) */
  }
}

/* フッター内のナビゲーション */
.footer-nav {
  margin-top: 16px;
}

/* コンセプト・メニュー・こだわり…のリンク一覧を、
   横並び(flex + wrap)から縦並びに変更。
   横一列だと、幅が狭いときに中途半端な場所で折り返されて見た目が揃わなかったため、
   1行に1つずつ表示するようにした。 */
.footer-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;   /* 横並び(row)ではなく縦並び(column)にする */
  gap: 10px;                  /* 縦のすき間 */
}

.footer-nav a {
  color: #f6f1e7;
  text-decoration: none;
  font-size: 16px;   /* 14px → 16px に拡大 */
}

/* リンクにカーソルを乗せたらゴールド色にする */
.footer-nav a:hover {
  color: #C5A059;
}

/* フッターのSNSアイコンの位置(上に少しすき間をあける) */
.footer-sns-icons {
  justify-content: flex-start; /* 左寄せにする(元のsns-iconsは真ん中寄せだったため上書き) */
  margin-top: 20px;
}

/* Googleマップを入れる箱 */
.map-box {
  position: relative;  /* 上に重ねるリンク(map-link-overlay)を置くために必要 */
  width: 100%;
  height: 250px;         /* 地図の高さ */
}

/* 地図の上に重ねる、透明なリンク */
/* これがあることで、地図のどこを押してもGoogleマップに飛べるようになる */
.map-link-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* 一番下の著作権表記 */
.footer-copyright {
  text-align: center;   /* 横方向はもともとセンター寄せ */
  font-size: 13px;   /* 12px → 13px に拡大 */
  color: #cfc3ac;
  margin: 40px 0 0 0;   /* 上に40pxの余白を付けて、文字だけを下にずらす */
}

/* ==============================
   画面の幅で見た目を切り替える(レスポンシブデザイン)
   ============================== */

/* 画面の幅が768px以上のとき(パソコンなど広い画面)だけ、
   この { } の中のCSSが使われる */
@media (min-width: 768px) {

  /* のれんの長さも、PCでは長くする */
  .noren-wrap {
    height: 170px;
  }

  /* ロゴ画像をPCでは大きくする */
  .logo-full-image {
    height: 64px;
  }

  /* ヘッダーの余白も、PCでは広めに戻す */
  header {
    padding: 20px 40px;
  }

  .header-right-group {
    gap: 20px;
  }

  /* ==============================
     PCではハンバーガーメニューを使わない
     (ナビを直接ヘッダーに1列で表示するので不要)
     ============================== */
  #menu-button {
    display: none;
  }

  /* ==============================
     PC用ヘッダーのスクロール制御
     ============================== */

  /* PCでは常に position:fixed にして、
     JSでクラスを付け外しすることで「隠す/コンパクト表示」を切り替える */
  header {
    position: fixed;
    top: 0;
    left: 0;

    /* transformとbackground-colorの変化を、ふわっとアニメーションさせる */
    transition: transform 0.3s ease, background-color 0.3s ease, padding 0.3s ease;
  }

  /* 下にスクロールしたときに付くクラス:上に隠れる */
  header.header-hidden {
    transform: translateY(-100%);
  }

  /* 上にスクロールしたときに付くクラス:コンパクトな細いバーとして再表示 */
  header.header-compact {
    /* ブランドカラーの濃茶色を、rgbaで少し透けさせる(alpha値0.85) */
    background-color: rgba(43, 38, 32, 0.85);
    padding: 12px 40px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
  }

  /* コンパクト時も、アイコンの大きさはPC通常時(64px)と同じままにする */
  /* ★修正★ 以前はここでfilter(brightness(0) invert(1))を使って
     色を無理やり白に反転させていたが、この方法だと画像の中の
     細かい模様(箸の部分など)まで真っ白になってしまい、
     絵柄が潰れて見えなくなる不具合があった。
     そのため、index.htmlのロゴ画像自体を「最初から白色で
     箸の部分は透明に抜いてある」専用の画像(logo-full-white.png)に
     差し替えることで解決した。ここではもうfilterは不要。 */
  header.header-compact .logo-full-image {
    height: 64px;
  }

  /* PCではロゴ画像を少し大きくする */
  .logo-full-image {
    height: 48px;
  }

  /* PCでは「Language」の文字も表示する */
  .lang-button-text {
    display: inline;
  }

  /* PC用の2列メニューを表示する */
  #pc-nav {
    display: block;
  }

  /* ハンバーガーメニューのボタンは、PCでも引き続き表示する */

  /* ここからメインビジュアル(PC用) */

  /* PCでは、画面の高さより少し大きくする(縦にゆったりした印象にする) */
  .hero {
    height: 120vh;
  }

  /* 見出しをもう少し大きくする */
  .hero-text-overlay h1 {
    font-size: 56px;
  }

  /* 説明文ももう少し大きくする */
  .hero-text-overlay p {
    font-size: 17px;
    max-width: 420px;
  }

  /* ★追加★ PCでは、サブコピーとボタンの文字も少し大きくする */
  .hero-subcopy {
    font-size: 19px;
    margin-bottom: 20px;
  }

  .hero-btn {
    font-size: 15px;
    padding: 15px 40px;
  }

  /* 文字の左右の余白を広げる(★修正★ 中央寄せにしたので、下方向の余白は不要になった) */
  .hero-text-overlay {
    padding: 0 80px;
  }

  /* ここまでメインビジュアル(PC用) */

  /* アイコンにカーソルを乗せたら、少し拡大する(PCだけ) */
  .ingredient-icon:hover {
    transform: scale(1.1);
  }

  /* ★追加★
     PC表示のときだけ、丸いアイコンをスマホ表示よりさらに大きくする。
     ------------------------------------------------------------
     ・装飾フレーム画像(.ingredient-icon__frame)の表示自体は、
       スマホ・PC共通のスタイル(上の方の.ingredient-icon__frame)で
       すでに指定済みなので、ここではサイズだけを上書きする。
     ・丸自体・中のアイコン画像・文字も、それぞれ大きくする。 */
  .ingredient-icon {
    /* ★修正★ 160px→190pxにさらに大きくした */
    width: 190px;
    height: 190px;
  }

  /* アイコン画像(北海道・鹿・鍋)を大きくする */
  .ingredient-icon img:not(.ingredient-icon__frame) {
    /* ★修正★ 80px→95pxにさらに大きくした */
    width: 95px;
    height: 95px;
  }

  /* 4つ目(貸切にも対応)は画像ではなくSVGなので、別に指定する */
  .ingredient-icon svg {
    width: 95px;
    height: 95px;
  }

  .ingredient-title {
    font-size: 19px;
  }

  .ingredient-desc {
    font-size: 15px;
  }

  /* こだわりセクションを2カラムにする */
  /* 普通のrowにするだけで、HTMLに書いた順番(文章→アイコン)のまま
     左:文章、右:アイコン になる */
  .ingredients-inner {
    flex-direction: row;
    align-items: center;
    gap: 60px;
  }

  .ingredients-text {
    flex: 1;              /* 残りの幅いっぱいに広がる */
    text-align: left;
  }

  /* アイコンを横並びにして、右の文章と2カラムにする */
  .ingredients-list {
    flex-direction: row;
    flex-wrap: wrap;         /* 入りきらないときは折り返す */
    flex-shrink: 0;           /* 文章側に押しつぶされないようにする */
    gap: 24px;
    /* ★修正★ 円を190pxに大きくした分、全体の最大幅も広げた(540px→600px) */
    max-width: 600px;
  }

  .ingredient-item {
    /* ★修正★ 円を190pxに大きくした分、カードの幅も広げた(240px→270px) */
    width: 270px;
  }

  /* コースカードを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;
  }

  /* フッターを横並びにする(左に文字、右に地図) */
  .footer-inner {
    flex-direction: row;             /* 横に並べる */
    justify-content: space-between;  /* 左右に離す */
    align-items: flex-start;          /* 上揃えにする */
  }

  /* 左側の情報の幅を決める(広がりすぎないように) */
  .footer-info {
    width: 45%;
  }

  /* 「住所・電話・営業時間」ブロックと「ナビゲーション」を、
     PCのときだけ横並びにする(スマホでは縦並びのまま) */
  .footer-details {
    flex-direction: row;       /* 縦並び(column)→横並び(row)に切り替える */
    gap: 48px;                    /* 左右のすき間 */
  }

  /* 横並びにしたとき、ナビゲーションの上の余白(margin-top)は不要なので消す */
  .footer-details .footer-nav {
    margin-top: 0;
  }

  /* 右側の地図の幅を決める */
  .map-box {
    width: 45%;
    height: 280px;
  }

}


/* ============================================================
   コンセプトセクション(お品書き紹介)
   「こだわり」セクションの後、「メニュー」セクションの前に表示する
   ヘッダーの「コンセプト」ナビ(#concept)から、ここにジャンプしてくる
   ============================================================ */

/* 背景のぼかしは親(.concept-group)側で1回だけ敷いているので、
   ここでは特別な指定は不要(このセクション自体はレイアウトの箱として使うだけ)。 */


/* ==========================================================
   ★削除★ スマホ限定「ご予約はこちら」バナー
   ==========================================================
   こだわりセクションの上にあった黄色いバナーは、
   「決して(=無くして)ほしい」とのことだったので、
   HTML側の要素ごと削除した。ここにあったCSSも不要になったため、
   まとめて削除している。
   ========================================================== */

/* 中身(写真・文字)を、ぼかしレイヤー(::before)より手前に表示する。
   モバイル・PCどちらのレイアウトでも効くように、
   メディアクエリの外(共通のルール)として指定している。 */
.concept__inner {
  position: relative;
  z-index: 1;
}


.concept__image {
  position: relative;
  width: 80%;
  height: 700px;
  margin-left: auto;
}

/* -----------------
   スマホ用の画像エリア(横2列、クロスフェード)
------------------ */

.concept__image--mobile {
  display: flex;        /* 左右2つのマスを、横に並べる */
  width: 100%;            /* 画面いっぱいに広げる(左右の余白なし) */
  height: 260px;           /* マスの高さ(数値を変えると高さを調整できる) */
  margin: 0;
}

/* 1つ1つのマス(左・右) */
.concept__mobile-cell {
  position: relative;   /* 中の写真を重ねて配置するために必要 */
  width: 50%;              /* 2列なので、それぞれ半分の幅にする */
  height: 100%;
  overflow: hidden;       /* 写真がマスからはみ出さないようにする */
}

/* マスの中の写真1枚ぶんの箱。同じマスの中で、2枚とも同じ場所(inset: 0)に重ねて配置する */
.concept__mobile-photo {
  position: absolute;
  inset: 0;
  background-size: cover;         /* 写真がマスいっぱいに広がるようにする */
  background-position: center;    /* 写真の真ん中を基準に表示する */
}

/* 「土台」の写真:常にopacity 1(はっきり表示)のままにしておく。
   アニメーションは付けない → ページを開いた瞬間から、必ずこの写真が見えている */
.concept__mobile-photo--base {
  opacity: 1;
}

/* 「重ねる」写真:土台の上に、ふわっと現れては、また消えていく。
   これを繰り返すことで、土台の写真とゆっくり入れ替わって見える(クロスフェード) */
.concept__mobile-photo--overlay {
  opacity: 0;   /* 最初は透明にしておき、アニメーションでふわっと現れさせる */
  animation: concept-mobile-crossfade 16s infinite;   /* PCと同じくらいゆっくり、16秒かけて1往復する */
}

/* 左のマス:土台=メイン写真 */
.concept__mobile-photo--1a {
  background-image: url("images/concept-main.jpg");

  /* ★練習13で追加★ この写真は横長で、お肉は右の方(横の約75%の位置)に写っている。
     マスは縦長なので、真ん中(center)のままだと鍋ばかりが見えて、
     お肉が右端で切れていた。表示する位置を右寄り(横78%)にずらして、
     お肉がしっかり見えるようにした。
     ・1つ目の数字 … 横の位置(0%=左端、50%=真ん中、100%=右端)
     ・2つ目の数字 … 縦の位置(center=真ん中) */
  background-position: 78% center;
}

/* 左のマス:重ねる写真=お酒の写真 */
.concept__mobile-photo--1b {
  background-image: url("images/concept-sake.jpg");
  animation-delay: 0s;
}

/* 右のマス:土台=お肉の写真 */
.concept__mobile-photo--2a {
  background-image: url("images/concept-meat.jpg");
}

/* 右のマス:重ねる写真=新しいお肉の写真。
   左のマスと同時に切り替わらないよう、半周期(8秒)ずらしてスタートする */
.concept__mobile-photo--2b {
  background-image: url("images/concept-meat2.jpg");
  animation-delay: 8s;
}

/* 「重ねる写真」が、ふわっと(ぼわーんと)現れて、またふわっと消えていくアニメーション。
   0%〜100%を16秒かけて再生する。
   0%〜35%:透明(土台の写真だけが見えている)
   35%〜50%:ゆっくり現れる
   50%〜85%:はっきり見えている(重ねる写真が土台を覆っている状態)
   85%〜100%:ゆっくり消えていき、土台の写真に戻る */
@keyframes concept-mobile-crossfade {
  0%   { opacity: 0; }
  35%  { opacity: 0; }
  50%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { opacity: 0; }
}

/* -----------------
   テキスト
------------------ */

.concept__text {
  max-width: 760px;
  margin-top: 80px;
  margin-left: 60px;
}

.concept__catch {
  font-family: "Shippori Mincho", serif;
  font-size: 28px;
  line-height: 1.6;
  color: #2b2620; /* サイトの見出しで使っている濃い茶色に統一 */
  font-weight: 500;
  letter-spacing: .08em;
  margin-bottom: 30px;
}

.concept__title {
  font-size: 18px;
  color: #2b2620; /* 薄い金色(#C5A059)だと明るい背景で読みにくいため、濃い茶色に変更 */
  letter-spacing: .18em;
  margin-bottom: 40px;
  font-weight: 500;
}

.concept__description {
  font-size: 18px;
  line-height: 2.4;
  color: #3a2c1e; /* サイトの本文で使っている濃い茶色に統一 */
  max-width: 760px;
}

/* 「詳しくはこちら」ボタン(お品書き用)
   ★変更点★
   店内案内のボタン(.hero-mobile__btn / .hero-desktop__btn)と
   見た目(角丸のピル型・金色の枠線・ホバーで塗りつぶす動き)を揃えて、
   サイト全体で「詳しくはこちら」ボタンの見た目を統一している。
   このセクションは背景が明るい色なので、文字色だけは
   読みやすいダークブラウンのままにしている。 */
.concept__btn {
  display: inline-block;
  margin-top: 40px;
  padding: 14px 40px;
  border: 1px solid #C5A059;   /* 店内案内ボタンと同じ、金色の枠線に統一 */
  border-radius: 999px;          /* 大きい数値を指定すると、完全な楕円(ピル型)になる */
  font-family: "Shippori Mincho", serif;   /* 店内案内ボタンと同じ、見出し用の明朝体に統一 */
  letter-spacing: 0.05em;
  color: #2b2620;
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.concept__btn:hover {
  background-color: #C5A059;   /* ホバー時は金色で塗りつぶす */
  color: #2b2620;                 /* 金色の上でも読みやすいよう、濃い茶色の文字のままにする */
}


/* -----------------
   レスポンシブ(このセクションは元のコードのまま、
   max-widthを使った書き方になっている)
------------------ */

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

  .concept {
    padding: 100px 0 120px;
  }

  .concept__catch {
    font-size: 46px;
  }

}


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

  .concept {
    padding: 80px 0;
  }

  .concept__text {
    margin-top: 50px;
    margin-left: 15px;   /* スマホでは、文字の余白を左右で少なめ・非対称にする */
    margin-right: 20px;
  }

  .concept__catch {
    font-size: 51px;
    line-height: 1.7;
  }

  .concept__description {
    font-size: 16px;
    line-height: 2.2;
  }

}


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

  .concept__catch {
    font-size: 28px;
  }

}


/* ============================================================
   お品書きセクション:PC版だけ、新しいデザインに差し替え
   ------------------------------------------------------------
   スマホ(767px以下)は、今まで通り「写真を重ねて配置する」デザインの
   ままにしておき、768px以上(PC)のときだけ、
   ・写真が3枚ふわっと入れ替わるスライドショーになる
   ・「テキスト(左)」「写真(右)」の横並びレイアウトになる
   という、新しいデザインに切り替える。
   ============================================================ */

/* PC用の写真(スライドショー)は、スマホでは使わないので、まず非表示にしておく */
.concept__image--pc {
  display: none;
}

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

  /* 以前の設計では、画面幅によって .concept(外側の箱)自体にも
     padding(余白)が付いていた。
     新しいデザインでは、余白は .concept__inner の方だけで管理するので、
     .concept 自体の余白はここで打ち消しておく(二重に余白がつくのを防ぐ) */
  .concept {
    padding: 0;
  }

  /* ---- スマホ用の写真(重ねて配置するデザイン)を非表示にする ---- */
  .concept__image--mobile {
    display: none;
  }

  /* ---- PC用の写真(スライドショー)を表示する ---- */
  .concept__image--pc {
    display: block;

    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;   /* 横4:縦3の比率をキープしたまま、幅に応じて高さが自動で決まる */
    overflow: hidden;       /* 写真が箱からはみ出さないようにする */
    border-radius: 4px;
  }

  /* 写真1枚ぶんの箱。4枚とも同じ場所(inset: 0)に重ねて配置する */
  .concept__photo {
    position: absolute;
    inset: 0;                       /* top:0; right:0; bottom:0; left:0; をまとめて書ける便利な指定 */
    background-size: cover;         /* 写真が箱いっぱいに広がるようにする */
    background-position: center;    /* 写真の真ん中を基準に表示する */
    opacity: 0;                     /* 最初はすべて透明にしておき、アニメーションで順番に表示させる */
    animation: concept-crossfade 16s infinite;   /* 16秒かけて4枚をぐるぐるループさせる */
  }

  /* それぞれの写真の画像を指定する。
     animation-delay(アニメーションの開始タイミング)を4秒ずつずらすことで、
     常にどれか1枚だけが見えている「クロスフェード(ふわっと入れ替わる)」状態を作る */
  .concept__photo--1 {
    background-image: url("images/concept-main.jpg");
    animation-delay: 0s;
  }

  .concept__photo--2 {
    background-image: url("images/concept-meat.jpg");
    animation-delay: 4s;
  }

  .concept__photo--3 {
    background-image: url("images/concept-sake.jpg");
    animation-delay: 8s;
  }

  .concept__photo--4 {
    background-image: url("images/concept-meat2.jpg");
    animation-delay: 12s;
  }

  /* ---- テキストと写真を、横並びにする ---- */
  .concept__inner {
    display: flex;
    flex-direction: row;   /* 横並びにする */
    align-items: center;   /* 上下の真ん中で揃える */
    gap: 60px;              /* テキストと写真のあいだの余白 */
    padding: 120px 60px;
  }

  .concept__text {
    order: 1;   /* 左側に表示する */
    flex: 1;    /* 写真エリアと幅を半分ずつ分け合う */

    /* 重ねて配置するデザイン用に付けていた余白は、もう不要なのでリセットする */
    max-width: none;
    margin-top: 0;
    margin-left: 0;
  }

  .concept__image--pc {
    order: 2;   /* 右側に表示する */
    flex: 1;    /* テキストエリアと幅を半分ずつ分け合う */
  }

}

/* 写真がふわっと(ぼやーんと)現れて、また消えていくアニメーション。
   0%〜100%を16秒かけて再生する(1枚あたりの持ち時間になる)
   4枚それぞれが4秒ずつスタートをずらしているので、
   1枚が消えかけている間に、次の1枚が現れ始める→自然な入れ替わりになる */
@keyframes concept-crossfade {
  0%   { opacity: 0; }   /* スタート地点では透明 */
  8%   { opacity: 1; }   /* ふわっと現れて、はっきり見える状態になる */
  33%  { opacity: 1; }   /* そのまま、くっきり表示され続ける */
  42%  { opacity: 0; }   /* ふわっと透明になり、消えていく */
  100% { opacity: 0; }   /* 次の自分の番(16秒後)が来るまで、透明のまま待っている */
}


/* ============================================================
   スクロール演出セクション(GSAP + ScrollTrigger)
   「メインビジュアル」と「こだわり」の間に表示する
   ============================================================ */

/* このセクションの中だけ、余白(margin/padding)を0にリセットする */
/* (元のデモコードは * { margin:0; padding:0; } とページ全体に効かせていたが、
   サイト全体に影響してしまうため、このセクションの中だけに絞った) */
.story-section * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ------------------------------------------------------------
   ストーリーセクション(一番上のしゃぶしゃぶ写真を、文字の背景として使う)
   ------------------------------------------------------------ */

.story-section {
  position: relative;

  /* 元のデモコードでは html, body 全体に指定されていた文字色・フォントを、
     このセクションだけに絞って指定し直した(サイト全体に影響しないようにするため) */
  color: #f2ede3;
  font-family: "Noto Sans JP", sans-serif;

  /*
    背景動画を追加したので、このセクション自体の背景(色・画像)は無くしておく。
    → 背景色も背景画像もセットしなければ、ここは"透明"になり、
       下に固定表示している .fixed-bg-video の動画が、そのまま透けて見える。
    (以前ここに敷いていた mv-photo.jpg は使わなくなったので、指定を削除した)
  */
  background-color: transparent;

  border-radius: 0;   /* 角を丸くしない */

  /*
    以前ここには、上端に影をつける box-shadow: 0 -40px 80px rgba(0,0,0,0.55) を指定していた。
    これは「メインビジュアルの写真」と「このセクションの写真(mv-photo.jpg)」が
    別々の画像だった頃、境目をなじませるためのものだった。
    今はメインビジュアルとこのセクションが同じ1本の動画を共有しているため、
    この影があるとかえって境目に「線」のようなものが見えてしまう。
    そのため、この影の指定を削除した。
  */

  padding: 140px 24px 200px 24px;
}

/* 背景写真の上に、半透明の黒を重ねて暗くする。
   ここに文字を乗せても、読みやすくなる */
.story-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.55);   /* 数値を上げ下げすると、暗さを調整できる */
  border-radius: inherit;
  pointer-events: none;
}

/* 中身は、暗くするオーバーレイ(::before)より必ず手前に表示する */
.story-inner {
  position: relative;
  z-index: 1;

  max-width: 1100px;
  margin: 0 auto;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
}

/* ------------------------------------------------------------
   1. 縦書きのキャッチコピー(3行に改行してある)
   ------------------------------------------------------------ */
.story-vertical {
  writing-mode: vertical-rl;   /* 文字を縦書きにする */
  font-family: "Shippori Mincho", serif;
  font-size: 27px;
  font-weight: 700;
  line-height: 2.1;
  letter-spacing: 0.15em;
  color: #FFFFFF;   /* ★修正★ ゴールド系(#c9a25c)から白色に変更 */

  /* ------------------------------------------------------------
     ★修正:高さを固定値(280px)からautoに変更
     ------------------------------------------------------------
     縦書きの文章では、高さ(height)が「1列に入る文字数」の上限になる。
     以前は高さを280pxに固定していたが、文章の一区切り
     (「一人ひと鍋スタイルで」など)がその高さに収まりきらず、
     文の途中で勝手に次の列へ折り返されてしまい、
     見た目が崩れる原因になっていた。

     height: auto にし、さらに white-space: nowrap を指定することで、
     「区切り(<br>タグ)を入れた場所だけで改行し、それ以外では
     絶対に折り返さない」という、意図した通りの見た目にしている。
     ------------------------------------------------------------ */
  height: auto;
  white-space: nowrap;   /* <br>で指定した場所以外では、絶対に折り返さない */

  margin: 0 auto 40px auto;
}

/* 「一人ひと鍋スタイル」の部分だけ、周りより太くして目立たせる */
/* (.story-vertical自体がすでにfont-weight:700なので、900にしてさらに太くする) */
.story-vertical-bold {
  font-weight: 900;
}

/* ==========================================================
   ★追加★ 英語のときだけ、縦書き→横書きに切り替える
   ==========================================================
   日本語・中国語・韓国語は、縦書き(vertical-rl)のままでも
   問題なく読めるが、英語(アルファベット)を縦書きにすると、
   1文字ずつ横向きに回転して並んでしまい、非常に読みにくくなる。

   そこで、<body>に「lang-en」というクラスが付いているとき
   (script.js側で、英語が選ばれたときに付けている)だけ、
   writing-mode を horizontal-tb(普通の横書き)に上書きする。
   ========================================================== */
body.lang-en .story-vertical {
  writing-mode: horizontal-tb;   /* 普通の横書きに戻す */
  text-align: center;             /* 横書きになるので、中央揃えにする */
  white-space: normal;            /* 横書きでは、画面幅に応じて折り返してよい */
  height: auto;
}

/* ------------------------------------------------------------
   2・3. 横書きの本文と、その周りに非対称に配置する写真5枚
   ------------------------------------------------------------ */

/* 本文と写真をまとめて入れる、外側の箱 */
.story-content-wrap {
  position: relative;   /* 写真を自由な位置に重ねて置くために必要 */
  width: 100%;
}

/* 中央寄せのストーリー本文(縦書きキャッチコピーも中に含む) */
.story-text-block {
  position: relative;
  z-index: 2;   /* 写真より、文字を手前に表示する */
  text-align: center;
  max-width: 620px;
  margin: 0 auto;
}

.story-line {
  font-family: "Shippori Mincho", serif;
  font-size: 17px;
  line-height: 2.1;
  color: #f2ede3;
  margin-bottom: 18px;

  /* GSAPで下から出しつつフェードインさせるので、
     最初はここでは何もしない(JS側で初期状態を設定する) */
}

.story-line:last-child {
  margin-bottom: 0;
}

/* 写真をまとめる土台(スマホでは2つのグループに分けて、非対称に配置する) */
.photo-group {
  position: static;
}

.photo-item {
  position: static;   /* スマホでは自由配置をやめる */
  aspect-ratio: 4 / 3;

  background-color: #2a251d;   /* 万が一、画像が読み込めなかったときに見える背景色 */
  background-image: linear-gradient(150deg, #3a3226, #1c1a17);
  border-radius: 4px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  overflow: hidden;   /* 中の写真が枠からはみ出た部分を、角丸に沿って隠す */

  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: #8a8074;
  letter-spacing: 0.05em;

  will-change: transform;   /* パララックスで頻繁に動くことを、ブラウザに伝えておく */
}

/* 写真1〜5の中に入れた<img>タグ用のスタイル。
   枠(.photo-item)の縦横比に対して、写真の縦横比がぴったり同じとは限らないので、
   object-fit: cover を使って「枠を隙間なく埋めつつ、はみ出た部分だけ自動でトリミングする」ようにしています。 */
.photo-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;   /* imgタグの下にできる、謎の隙間(数px)を防ぐため */
}

/* ============================================================
   PC(768px以上):本文の周りに、写真5枚を非対称に配置する
   ============================================================ */
@media (min-width: 768px) {

  /* story-content-wrapの高さを、写真が収まるぶんだけ確保する */
  .story-content-wrap {
    min-height: 860px;
    display: flex;
    align-items: center;
  }

  .photo-item {
    position: absolute;   /* 自由な位置に置けるようにする(photo-groupは土台として使うだけ) */
  }

  /* 5枚を「左・右・左・左(ズラす)・右」の順に配置。
     本文(中央22%〜78%あたり)からしっかり離し、
     左側の1・3・4も間隔がバラバラになるように大きくズラす */
  /* ★修正★ 写真の枠を、ひとまわり(だいたい1.4倍)大きくした。
     object-fit: cover が付いているので、枠を大きくしても
     写真は縦横比を保ったまま、はみ出た分だけ自動でトリミングされ、
     きれいに枠いっぱいに収まる。 */
  .ph1 { width: 31%; aspect-ratio: 3 / 4; top: -7%;  left: -8%;  transform: rotate(-2deg); }
  .ph2 { width: 27%; aspect-ratio: 1 / 1; top: -2%;   right: -7%; transform: rotate(3deg);  }
  .ph3 { width: 21%; aspect-ratio: 5 / 6; top: 46%;  left: -3%;  transform: rotate(2deg);  }
  .ph4 { width: 17%; aspect-ratio: 4 / 3; top: 84%;  left: 0%;   transform: rotate(-4deg); }
  .ph5 { width: 28%; aspect-ratio: 3 / 4; top: 58%;  right: -9%; transform: rotate(-3deg); }

  /* ★追加★
     PC(768px以上)のときだけ、文字サイズをもっと大きくする。
     <br>タグで指定した改行位置はそのまま(HTML側は変更していない)なので、
     大きくしても改行の場所は変わらない。

     ★修正★ 文字を大きくしたことで、太字部分(.story-vertical-bold /
     font-weight:900)の描画幅が、列の間隔(line-height)より広くなって
     しまい、隣の列と文字が重なって見える不具合があった。
     line-height(列と列の間隔)を2.1→2.7に広げて、太字でも
     重ならないだけの余裕を持たせるようにした。 */
  .story-vertical {
    font-size: 34px;
    line-height: 2.7;
  }

  .story-line {
    /* ★修正★ 20px→23pxにもう少し大きくした */
    font-size: 23px;
    /* ★追加★ 文字が大きくなった分、段落と段落の間の余白も
       広げて、読みやすくした(18px→30px) */
    margin-bottom: 30px;
  }
}

/* ============================================================
   スマホ(767px以下):1・2の写真を縦書きの上に、
   3・4・5の写真を横書き本文のあとに、それぞれ非対称に並べる
   ============================================================ */
@media (max-width: 767px) {

  .photo-group {
    display: flex;
    align-items: flex-start;
    gap: 12px;
  }

  /* 1・2:縦書きキャッチコピーの上に、大小2枚を非対称に */
  .group-a {
    margin-bottom: 22px;
  }

  .group-a .ph1 {
    width: 56%;
    aspect-ratio: 3 / 4;   /* 縦長 */
    margin-top: 0;
  }

  .group-a .ph2 {
    width: 34%;
    aspect-ratio: 1 / 1;   /* 正方形 */
    margin-top: 70px;   /* 右側を大きく下にズラして非対称に */
  }

  /* 3・4・5:横書き本文のあとに、大きさ・縦横比・間隔をすべてバラバラにして3枚 */
  .group-b {
    margin-top: 30px;
    gap: 10px;
  }

  .group-b .ph3 {
    width: 38%;
    aspect-ratio: 4 / 5;   /* やや縦長 */
    margin-top: 0;
  }

  .group-b .ph4 {
    width: 26%;
    aspect-ratio: 1 / 1;   /* 正方形 */
    margin-top: 60px;   /* 3枚のうち中間の高さにズラす */
  }

  .group-b .ph5 {
    width: 30%;
    aspect-ratio: 3 / 4;   /* 縦長 */
    margin-top: 110px;   /* 3枚のうち一番下にズラす */
  }
}


/* ============================================================
   スマホ用の、細かい文字サイズ調整
   ============================================================ */
@media (max-width: 767px) {

  /* フッター住所の「秋水ビル 3階」の前で、スマホのときだけ改行する */
  .sp-only-break {
    display: inline;
  }

  .story-section {
    padding: 100px 20px 140px 20px;
    border-radius: 0;   /* 角を丸くしない */
    background-attachment: scroll;   /* スマホではbackground-attachment: fixedが不安定なため、通常のスクロールに戻す */
  }

  .story-vertical {
    font-size: 21px;
    font-weight: 700;
    /* heightの固定値は削除(基本スタイル側でheight:autoに変更したため不要) */
  }

  .story-line {
    font-size: 15px;
  }
}


/* ==========================================================
   北海道しゃぶしゃぶ 蝦夷カムイ | Instagramセクション用CSS
   (index.html から読み込まれています)
   ========================================================== */

  /* ==========================================================
     ① 全体の下準備(リセットCSS)
     ========================================================== */
  /* 元のコードは * と body 全体に指定していたが、
     サイト全体に影響してしまうため、.insta-section の中だけに絞った */
  .insta-section * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  /* 背景のぼかしは親(.news-insta-group)側で1回だけ敷いているので、
     ここでは特別な指定は不要(このセクション自体はレイアウトの箱として使うだけ)。
     ※文字色・フォント・余白(padding)だけは、このセクション専用の見た目として残す。 */
  .insta-section {
    font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
    color: #2B2B29;
    padding: 40px 16px;
  }

  /* 中身(見出し・写真)を、ぼかしレイヤーより手前に表示する */
  .insta-section > * {
    position: relative;
    z-index: 1;
  }

  /* ==========================================================
     ② 「Instagram」見出し(スマホ・PC共通で1つだけ)
     ========================================================== */
  .insta-section-heading {
    font-family: 'Italiana', serif;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-align: center;
    color: #2B2B29;
    font-size: 30px;       /* スマホでの基本サイズ */
    margin-bottom: 8px;    /* 下に説明文が来るので、見出しの余白は少し詰める */
  }

  /* ----------------------------------------------------------
     「Instagram」見出しの下に置く、小さな説明文のスタイルです。
     見出しより文字を小さく・控えめな色にして、主役である見出しの
     邪魔をしないようにしています。
     ---------------------------------------------------------- */
  .insta-section-subtext {
    text-align: center;
    font-size: 13px;         /* 見出しより小さいサイズ */
    color: #6B6B63;          /* 見出しより薄い、控えめな色 */
    letter-spacing: 0.03em;
    margin-bottom: 8px;      /* 下にアカウントIDが来るので、少し詰める */
  }

  /* ----------------------------------------------------------
     「@アカウント名」を表示するリンクのスタイルです。
     タップ・クリックできることが伝わるよう、underline(下線)を
     付けています。カーソルを乗せたときは色を少し変えて、
     「反応している」ことがわかるようにしています。
     ---------------------------------------------------------- */
  .insta-account-id {
    display: block;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #2B2B29;
    text-decoration: underline;
    text-underline-offset: 3px;
    margin-bottom: 24px;
    transition: color 0.3s ease; /* 色が変わるときになめらかにする */
  }

  .insta-account-id:hover {
    color: #A8383B; /* カーソルを乗せたら、ドットと同じ色に変える */
  }

  /* ==========================================================
     ③ 出し分けの仕組み(ここが今回のポイント)

     .insta-mobile-version … スマホ用(ポラロイド重なりカルーセル)
     .insta-pc-version     … PC用(3列グリッド)

     まず「基本(スマホ向け)」として、
     ・スマホ版は表示する(display: block)
     ・PC版は隠しておく(display: none)
     という状態にしておきます。

     その後、下の方にある @media (min-width: 768px) というブロックの中で、
     「画面の幅が768px以上(=だいたいタブレット横〜PC)になったら、
     表示をスマホ版→PC版に入れ替える」という上書き設定をしています。

     768pxという数字は「スマホとPCの境目としてよく使われる、
     ある程度余裕を持った基準値」です。お好みで調整もできます。
     ========================================================== */
  .insta-mobile-version {
    display: block;
  }
  .insta-pc-version {
    display: none;
  }

  /* ==========================================================
     ④ スマホ版:ポラロイド風カルーセルのスタイル
     ========================================================== */
  .insta-carousel {
    position: relative;
    width: 100%;
    max-width: 300px;
    aspect-ratio: 1 / 1;
    margin: 34px auto 26px;
  }

  .insta-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background-color: #FFFFFF;
    padding: 10px 10px 26px 10px;
    border-radius: 2px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.22);

    transition: transform 0.8s ease-in-out, box-shadow 0.8s ease-in-out, opacity 0.8s ease-in-out;
  }

  .insta-slide .photo-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
  }

  .insta-slide .photo-inner {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-color: #FFFFFF;
  }

  /* ----------------------------------------------------------
     PC版の写真枠にも、スマホ版と同じ「幅いっぱい・高さいっぱいに
     表示する」という基本設定を適用します。
     (このルールが無いと、画像データはあっても表示サイズが
      0のままになってしまい、何も見えない状態になります) 
     background-size(拡大縮小の仕方)だけは、この下の方にある
     ".insta-pc-version .photo-inner" で cover に上書きしています。
     ---------------------------------------------------------- */
  .insta-grid-item .photo-inner {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #FFFFFF;
  }

  .insta-slide:nth-child(1) .photo-inner {
    background-image: url("images/insta-01.jpg");
  }
  .insta-grid-item:nth-child(1) .photo-inner {
    background-image: url("images/insta-02.png");
  }
  .insta-grid-item:nth-child(4) .photo-inner {
    background-image: url("images/insta-03.png");
  }
  .insta-slide:nth-child(2) .photo-inner,
  .insta-grid-item:nth-child(5) .photo-inner {
    background-image: url("images/insta-04.jpg");
  }
  .insta-grid-item:nth-child(2) .photo-inner {
    background-image: url("images/insta-05.png");
  }
  .insta-slide:nth-child(3) .photo-inner {
    background-image: url("images/insta-06.png");
  }
  .insta-grid-item:nth-child(6) .photo-inner {
    background-image: url("images/insta-07.jpg");
  }
  .insta-grid-item:nth-child(3) .photo-inner {
    background-image: url("images/insta-08.png");
  }

  .insta-slide.stack-front {
    transform: translate(0, 0) rotate(0deg) scale(1);
    opacity: 1;
    z-index: 3;
  }
  .insta-slide.stack-mid {
    transform: translate(-22px, 14px) rotate(-8deg) scale(0.94);
    opacity: 0.75;
    z-index: 2;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
  }
  .insta-slide.stack-back {
    transform: translate(24px, 22px) rotate(9deg) scale(0.90);
    opacity: 0.55;
    z-index: 1;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.14);
  }

  .insta-indicators {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 14px;
  }

  .insta-indicators .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #C9BFA8;
    transition: background-color 0.4s ease, transform 0.4s ease;
    cursor: pointer;
  }

  .insta-indicators .dot.is-active {
    background-color: #A8383B;
    transform: scale(1.3);
  }

  /* ==========================================================
     ⑤ PC版:3列グリッドのスタイル

     スマホ版と同じく「写真そのもの(背景画像)」を貼り付ける方式に
     変更しました。Instagram公式の埋め込み枠(iframe)を使わないので、
     aspect-ratio: 1 / 1 で自由に正方形の写真タイルにできます。
     3列に並べることで、実際のInstagramのプロフィール画面のような
     グリッド一覧に近い見た目になります。
     ========================================================== */
  .insta-grid {
    max-width: 900px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3列 */
    gap: 28px;                              /* 余白は広めに */
  }

  /* ----------------------------------------------------------
     PC版:1マスごとの写真枠
     スマホ版のポラロイドと違い、PC版は「正方形の写真タイル」を
     3列に並べる、実際のInstagramのグリッド一覧に近いデザインです。
     ---------------------------------------------------------- */
  .insta-grid-item {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;      /* 正方形にする */
    overflow: hidden;          /* 拡大した画像がはみ出ないように隠す */
    border-radius: 4px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);

    /* カーソルを乗せたとき用に、変化をなめらかにするアニメーション設定 */
    transition: transform 0.4s ease, box-shadow 0.4s ease;
  }

  /* ★ カーソルを乗せたときの「浮き上がる」動き
     translateYでマイナス方向(上)に少し移動させ、scaleで少し拡大しています。
     影(box-shadow)も同時に濃く・大きくして、浮いた感じを強調しています。 */
  .insta-grid-item:hover {
    transform: translateY(-8px) scale(1.03);
    box-shadow: 0 18px 30px rgba(0, 0, 0, 0.28);
  }

  /* リンク自体を枠いっぱいに広げて、写真のどこをクリックしても
     Instagramに飛べるようにしています。 */
  /* ----------------------------------------------------------
     ★ カーソルを乗せたときに写真の上に重なる「黒い半透明の膜」です。
     普段は opacity: 0(透明=見えない)にしておき、
     :hover のときだけ opacity: 1(不透明)にすることで
     「黒く透ける」演出を作っています。

     pointer-events: none は「このオーバーレイはクリックを
     受け取らず、下にある写真リンクにそのまま通す」という意味です。
     これが無いと、オーバーレイが邪魔をしてクリックしても
     Instagramに飛べなくなってしまいます。
     ---------------------------------------------------------- */
  .insta-grid-item .hover-overlay {
    position: absolute;
    inset: 0;                          /* 上下左右0 = 枠いっぱいに広げる */
    background-color: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
  }

  .insta-grid-item:hover .hover-overlay {
    opacity: 1;
  }

  /* オーバーレイの真ん中に表示するInstagramアイコンです。 */
  .insta-grid-item .hover-overlay img {
    width: 56px;
    height: 56px;
  }

  .insta-grid-item .photo-link {
    display: block;
    width: 100%;
    height: 100%;
  }

  /* PC版だけは、画像を正方形に「切り抜いて」敷き詰めたいので、
     background-size を contain(全体を収める)ではなく
     cover(枠いっぱいに埋める)に上書きしています。
     ※ .photo-inner 自体の基本設定(containなど)は上の方の
       共通スタイルで定義済みなので、ここではPC版の分だけ
       ピンポイントで上書きしています。 */
  .insta-pc-version .photo-inner {
    background-size: cover;
    transition: transform 0.5s ease; /* 画像が拡大するときのなめらかさ */
  }

  /* ★ カーソルを乗せたとき、画像自体もじわっと拡大させる動き
     (枠は overflow: hidden で隠れているので、はみ出た部分は見えません) */
  .insta-grid-item:hover .photo-inner {
    transform: scale(1.1);
  }

  .photo-1 { background-image: url("images/insta-01.jpg"); }
  .photo-2 { background-image: url("images/insta-04.jpg"); }
  .photo-3 { background-image: url("images/insta-07.jpg"); }

  /* ==========================================================
     ⑥ メディアクエリ本体
     画面の幅が768px以上になったら、中の設定が上書きされます。
     ここでスマホ版とPC版の表示・非表示を入れ替えています。
     ========================================================== */
  @media (min-width: 768px) {
    .insta-mobile-version {
      display: none;   /* PCサイズではスマホ版を隠す */
    }
    .insta-pc-version {
      display: block;  /* PCサイズではPC版を表示する */
    }
    .insta-section-heading {
      font-size: 38px;   /* PCでは見出しも少し大きく */
      margin-bottom: 10px;
    }
    .insta-section-subtext {
      font-size: 14px;   /* PCでは説明文もほんの少しだけ大きく */
      margin-bottom: 10px;
    }
    .insta-account-id {
      margin-bottom: 48px; /* 写真エリアとの余白は、こちらに持たせる */
    }
    .insta-section {
      padding: 60px 24px;
    }
  }


/* ============================================================
   店内のご案内(お品書きの下に表示)
   ============================================================ */
/* -----------------------------------------------
       共通の色・フォントを変数として定義
       ----------------------------------------------- */
    :root {
      /* 以前の #232326 は、わずかに青みがかった「紺色っぽい」グレーでした。
         写真側の暖かい色味(茶色系)と馴染むよう、青みのない暖色の黒に変更しています。 */
      --color-bg: #1c1916;
      --color-accent: #c6a15b;     /* 真鍮のような金色のアクセント */
      --color-text: #ece6da;       /* 生成り色の文字色 */
      --color-text-muted: #cfc9bd; /* 少し落ち着いた文字色(本文用) */
      --font-heading: "Shippori Mincho", serif;
      --font-body: "Noto Sans JP", sans-serif;
    }

    /* box-sizing: border-box は、paddingやborderを含めてサイズを計算する設定 */
    /* 元のコードは * 全体に指定していたが、サイト全体に影響してしまうため、
       .interior-preview の中だけに絞った */
    .interior-preview * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    /* 元のコードは body 全体に指定していたが、サイト全体の背景が変わって
       しまうため、.interior-preview の中だけに絞った */
    .interior-preview {
      /* 送っていただいた写真を、ページ全体の背景として敷いている。
         そのままだと明るい部分に文字が重なって読みにくくなるため、
         写真の上に半透明の黒いグラデーション(linear-gradient)を重ねて、
         どこに文字が来ても読みやすいようにしている。
         background は下に書いた順に「手前から奥」へ重なる。 */
      background:
        linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.7) 100%),
        url('images/interior-counter.jpg');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      color: var(--color-text);
      font-family: var(--font-body);
    }

    /* 元のコードは a 全体(サイト中のリンク)に指定していたが、
       他のリンクの見た目まで変わってしまうため、.interior-preview の中だけに絞った */
    .interior-preview a {
      color: inherit;
      text-decoration: none;
    }

    /* -----------------------------------------------
       全体を包む「店内のご案内」ブロック
       ----------------------------------------------- */
    .hero-mobile {
      position: relative;
      overflow: hidden; /* 写真がはみ出た部分を切り取る */
      max-width: 480px; /* スマホサイズくらいの幅に制限(お好みで変更可) */
      margin: 0 auto;    /* 画面中央に配置 */
    }

    /* --- 1) ぼかした背景写真 --- */
    .hero-mobile__bg {
      position: relative;
      height: 240px; /* 写真(220px)に近い高さにして、下の余白を減らしている */
      overflow: hidden; /* ぼかした背景写真がこのエリアの外(文字側)にはみ出さないようにする */
    }

    /* 「OUR INTERIOR / 店内」ラベル(PC版と同じデザイン)
       ★今回の変更点★
       以前は position: absolute で写真の上に「重ねて」表示していましたが、
       今回のご依頼で、写真より前(一番上)に置くレイアウトに変更しました。
       そのため、写真に重ねるための指定(position/top/left/z-index)は
       すべて不要になったので外し、代わりに
       「上下左右にどれだけ余白を取るか」を指定しています。 */
    .hero-mobile__label {
      /* 写真の中に重ねるわけではなくなったので、通常の配置(static)に戻す。
         (何も指定しなければ static になるが、分かりやすいよう明記している) */
      position: static;

      /* 上下に余白(padding)を付けて、文字だけが浮いた印象にならないようにする。
         左右は 24px にして、本文(.hero-mobile__content)の余白と揃えている。 */
      padding: 20px 24px 12px;

      /* 「OUR INTERIOR」「店内」を左右中央に揃える */
      text-align: center;
    }

    .hero-mobile__label-en {
      font-family: var(--font-heading);
      font-size: 1.05rem;
      letter-spacing: 0.12em;
      color: #ffffff;
      text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7), 0 0 2px rgba(0, 0, 0, 0.5);
      padding-bottom: 8px;
      margin-bottom: 6px;
      border-bottom: 1px solid var(--color-accent);
    }

    .hero-mobile__label-jp {
      font-family: var(--font-heading);
      font-size: 0.75rem;
      letter-spacing: 0.2em;
      color: #ffffff;
      text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7), 0 0 2px rgba(0, 0, 0, 0.5);
    }

    .hero-mobile__bg-photo {
      position: absolute;
      inset: 0;
      /* 写真エリア専用の背景は使わず、透明のままにしている。
         こうすることで、下に敷いてある body の背景写真がそのまま透けて見え、
         写真エリアと文字エリアの「境目」がなくなり、1枚の写真として
         ひと続きに見えるようになる。 */
      background: none;
    }

    /* --- 2) 右にゆっくり流れる3枚の写真 --- */
    .hero-mobile__slider {
      /* position: absolute の基準(containing block)は、
         親要素である .hero-mobile__bg(position: relative)になる。
         top: 0 にすることで、背景写真エリアの「一番上」に
         余白なしでぴったり合わせている。 */
      position: absolute;
      top: 0;
      left: 0;
      display: flex;
      gap: 20px; /* 写真と写真の「間」だけに20pxの余白を入れる */
      width: max-content; /* 中の写真を全部並べた「そのままの幅」まで広がる */
      padding: 0; /* 上下・左右には余白を入れない */

      /* 22秒かけて・止まらずに・同じ速さで、下のslideRightという
         動きをずっと繰り返す、という指定 */
      animation: slideRight 22s linear infinite;
    }

    .hero-mobile__slide {
      flex-shrink: 0; /* 横に並べたときに縮まないようにする */

      /* 写真1枚分の横幅を「画面幅 - 左右20pxずつ(合計40px)」にしている。
         calc(100vw - 40px) は「画面の横幅いっぱいから40px引いたサイズ」という意味。
         また、パソコンなど画面が広い場合に写真が大きくなりすぎないよう、
         max-widthで上限(このページの最大幅480px - 40px)も付けている。 */
      width: calc(100vw - 40px);
      max-width: calc(480px - 40px);
      height: 220px;

      /* 「境界線」に見えていたのは、この角丸(border-radius)と
         影(box-shadow)でした。写真同士がひと続きに見えるよう、
         どちらも外して、四角いまま隙間なく並ぶようにしています。 */
      border-radius: 0;
      box-shadow: none;

      /* ▼ 本物の写真に差し替える場合は、それぞれの
         .hero-mobile__slide--1 / --2 / --3 の background を
         background-image: url('写真.jpg'); に書き換えてください。 ▼ */
    }

    /* お店の実際の写真3枚を、それぞれのカードに設定している */
    .hero-mobile__slide--1 {
      background-image: url('images/interior-storefront.jpg');
      background-size: cover;
      /* ★変更点★
         top(0%)のままだと看板の部分が見切れてしまっていたため、
         表示位置を少し下にずらして、看板がしっかり写るようにした。
         (background-size は変更せず、position だけ調整) */
      background-position: center 15%; /* ★変更:40% → 15%。40%にしたら見えにくくなったとのことで、上寄りに戻した */
      background-repeat: no-repeat;
    }
    .hero-mobile__slide--2 {
      background-image: url('images/interior-counter-new2.jpg');
      background-size: cover;
      /* ★変更点★
         新しい写真(のれんが写っていないもの)に差し替えたので、
         表示位置は中央にリセットした */
      background-position: center;
      background-repeat: no-repeat;
    }
    .hero-mobile__slide--3 {
      background-image: url('images/interior-lanterns-new.jpg');
      background-size: cover;
      /* ★変更点★
         新しい写真に差し替えたため、表示位置はいったん中央にリセット */
      background-position: center;
      background-repeat: no-repeat;
    }

    /* 4枚目の写真を追加 */
    .hero-mobile__slide--4 {
      background-image: url('images/interior-table-chairs.jpg');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }

    /* スライドが「右から左へ途切れなく流れ続ける」ための仕組み。
       HTML側で同じ3枚をもう一度繰り返して(合計6枚)並べておき、
       0%(元の位置)からちょうど1セット分(-50%)左にずれた位置まで
       動かすことで、見た目には途切れなくループしているように見える。 */
    @keyframes slideRight {
      from { transform: translateX(0%); }
      to   { transform: translateX(-50%); }
    }

    /* --- 3) 見出し・本文・ボタン --- */
    .hero-mobile__content {
      padding: 16px 24px 56px; /* 上の余白を40px→16pxに減らして、写真との間隔を詰めている */
      text-align: center;
    }

    .hero-mobile__title {
      font-family: var(--font-heading);
      /* clamp(最小, 基準, 最大) で画面幅に応じて文字サイズが自動調整される */
      font-size: clamp(1.7rem, 8vw, 2.1rem);
      /* 文字が細く薄く見えて読みづらかったため、太さをしっかり指定する。
         (指定しないと標準の細い太さになり、背景と馴染んで見えにくくなる。
         800は、読み込んでいるフォントの中で一番太いウェイト) */
      font-weight: 800;
      /* 生成り色よりもさらに明るい真っ白にして、コントラストを強める */
      color: #ffffff;
      line-height: 1.6;
      letter-spacing: 0.04em;
      margin-bottom: 24px;
    }

    .hero-mobile__text {
      font-size: 0.9rem; /* 見出しよりひとまわり小さい文字サイズ */
      color: var(--color-text-muted);
      line-height: 1.9;
      margin-bottom: 32px;
    }

    .hero-mobile__btn {
      display: inline-block;
      padding: 14px 40px;
      border: 1px solid var(--color-accent);
      border-radius: 999px; /* 数値を大きくすると、完全な楕円(ピル型)になる */
      font-family: var(--font-heading);
      letter-spacing: 0.05em;
      transition: background-color 0.3s ease, color 0.3s ease;
    }

    .hero-mobile__btn:hover {
      background-color: var(--color-accent);
      color: var(--color-bg);
    }

    /* -----------------------------------------------
       PC版(画面幅701px以上)のレイアウト
       -----------------------------------------------
       スマホ版(hero-mobile)は上下に「写真→文字」と並んでいましたが、
       PC版(hero-desktop)は左右に分かれます。
         左側(画面の1/3) … 写真が下から上へ流れる
         右側(残り)      … 見出し・本文・ボタンがすべて左寄せ

       基本は非表示にしておいて、@media (min-width: 701px) の中で
       表示を入れ替えています。
    */

    /* 基本(スマホ幅)ではPC版を非表示にしておく */
    .hero-desktop {
      display: none;
    }

    @media (min-width: 701px) {

      /* スマホ版を隠して、PC版を表示する */
      .hero-mobile {
        display: none;
      }

      .hero-desktop {
        display: flex;
        height: 100vh;
        min-height: 560px;
        padding-left: 250px; /* 画面左端に250pxの余白を作る */
        position: relative; /* ラベルをこの余白部分にもはみ出させるための基準 */
      }

      /* --- 左側:写真が流れるエリア --- */
      .hero-desktop__photos {
        width: 42%;            /* 50% → 42% に少し小さくした */
        height: 100%;
        position: relative;
        overflow: hidden;      /* 写真がはみ出た部分を切り取る */
        flex-shrink: 0;        /* 右側の文字が増えても、この幅は縮まないようにする */

        /* 写真が枠いっぱいに張り付かないよう、上下左右に余白を付けて
           「少し中央寄り」に見えるようにしている */
        display: flex;
        align-items: center;
        padding: 48px 56px;
      }

      /* 写真の背後に敷く、ぼかした写真の背景。
         上下左右の余白部分から、この背景が少しだけ透けて見える。 */
      .hero-desktop__bg-photo {
        position: absolute;
        inset: -20px;
        /* ★練習11で変更★ その場でぼかす(filter: blur(20px))のをやめて、
           あらかじめぼかした画像に差し替えた(PCで動きを軽くするため。見た目は同じ) */
        background-image: url('images/interior-counter-blur.jpg');
        background-size: cover;
        background-position: center;
        transform: scale(1.1);
      }

      /* 写真の上に重ねる「OUR INTERIOR / 店内」ラベル */
      .hero-desktop__label {
        position: absolute;
        left: 24px; /* 完全に左の余白内におさめ、写真とは重ならないようにする */
        top: 90px; /* ★変更:140px → 90px にして、もう少し上に移動 */
        z-index: 5;
        text-align: center; /* 「店内」をOUR INTERIORの幅の中央に揃える */
      }

      .hero-desktop__label-en {
        font-family: var(--font-heading);
        font-size: 1.9rem; /* 1.6rem → 1.9rem に拡大 */
        letter-spacing: 0.12em;
        color: #ffffff;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
        padding-bottom: 14px;
        margin-bottom: 10px;
        /* 文字の下に、指定の下線を引く */
        border-bottom: 1px solid var(--color-accent);
      }

      .hero-desktop__label-jp {
        font-family: var(--font-heading);
        font-size: 1.05rem; /* 0.95rem → 1.05rem に拡大 */
        letter-spacing: 0.2em;
        color: #ffffff;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
      }

      /* 写真を縦に並べるための入れ物。
         同じ3枚をもう一度繰り返して(合計6枚)並べておき、
         ちょうど1セット分(-50%)上にずれた位置まで動かすことで、
         「下から上へ途切れなく流れ続ける」ように見せている。 */
      .hero-desktop__slider {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        display: flex;
        flex-direction: column; /* 横並びではなく、縦に並べる */
        gap: 20px; /* 写真同士の間の余白。サイズはそのまま維持 */
        animation: slideUp 28s linear infinite;
      }

      .hero-desktop__slide {
        width: 100%;
        /* 「写真を拡大」ではなく「箱(枠)の高さ」を大きくして、
           1枚あたりの見える範囲を縦に広げている */
        height: 60vh; /* 40vh → 60vh に拡大 */
        flex-shrink: 0;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
      }

      /* PC版のstorefront写真(1枚目)だけ、表示位置を調整。
         「center」のままだと看板部分が見えていなかったため、
         表示位置を上のほうにずらして、看板が見えるようにしている。
         (background-size は変更していない) */
      .hero-desktop__slide--storefront {
        background-position: center 15%;
      }

      /* PC版のランタン写真(3枚目)。
         縦(上下)は変更せず中央のまま、横だけ少し左寄りにすることで、
         右端が少しだけ見えないように調整している。 */
      .hero-desktop__slide--lanterns {
        background-position: center; /* ★変更:新しい写真に差し替えたため、位置をいったん中央にリセット */
      }

      /* PC版のカウンター写真(2枚目)。
         スマホ版と同じく「のれん」が見えていたため、
         表示位置を下にずらして見えないようにしている。 */
      .hero-desktop__slide--counter {
        background-position: center; /* ★変更:新しい写真(のれんなし)に差し替えたため、位置をリセット */
      }

      /* 「下から上へ」流れるためのアニメーション。
         0%(元の位置)から、ちょうど1セット分(-50%)上にずれた位置まで動かす。 */
      @keyframes slideUp {
        from { transform: translateY(0%); }
        to   { transform: translateY(-50%); }
      }

      /* --- 右側:文字エリア(すべて左寄せ) --- */
      .hero-desktop__content {
        flex: 1; /* 残りの幅をすべて使う */
        display: flex;
        flex-direction: column;
        justify-content: center; /* 縦方向は中央に */
        align-items: flex-start; /* 横方向は左寄せ */
        text-align: left;        /* 文字も左寄せ */
        padding: 40px 64px;

        /* ★今回の変更点★
           justify-content: center で縦方向の中央に配置されているところに、
           上側の余白(margin-top)を足すことで、中央よりも少しだけ
           下側に下がった位置に見えるようにしている。 */
        margin-top: 220px; /* ★変更:140px → 220px。まだ足りないとのことで、さらに下にずらした */
      }

      .hero-desktop__title {
        font-family: var(--font-heading);
        font-weight: 800;
        color: #ffffff;
        font-size: clamp(2rem, 3vw, 2.6rem);
        line-height: 1.6;
        letter-spacing: 0.04em;
        margin-bottom: 28px;

        /* ★今回の変更点★
           以前は <br> で強制的に2行に分けていたが、画面幅が広いPCだと
           1行目と2行目の長さがバラバラで不格好に見えてしまっていた。
           <br> を外した代わりに、ここで幅の上限(max-width)を指定することで、
           ブラウザが自然な位置で折り返すようにし、見た目のバランスを整えている。
           (font-size はご指定通り変更していません) */
        max-width: 560px;
      }

      .hero-desktop__text {
        font-size: 1rem;
        color: var(--color-text-muted);
        line-height: 1.9;
        max-width: 480px; /* 文字が横に伸びすぎて読みにくくならないよう上限を付ける */
        margin-bottom: 36px;
      }

      /* 「詳しくはこちら」ボタン(PC版)
         ★今回の変更点★
         今までは特別なデザインが指定されておらず、ただの文字リンクに
         見えてしまっていました。スマホ版の .hero-mobile__btn と
         同じ見た目(縁取り・角丸のピル型・ホバー時に色が反転する動き)を
         ここでも指定して、統一感を持たせています。 */
      .hero-desktop__btn {
        display: inline-block;
        padding: 14px 40px;
        border: 1px solid var(--color-accent);
        border-radius: 999px; /* 大きい数値を指定すると、完全な楕円(ピル型)になる */
        font-family: var(--font-heading);
        letter-spacing: 0.05em;
        transition: background-color 0.3s ease, color 0.3s ease;

        /* 見出し・本文は左寄せのままにしたいので .hero-desktop__content 側の
           align-items: flex-start はそのまま残しつつ、
           ボタンだけ align-self で個別に「中央寄せ」に上書きしている。 */
        align-self: center;
      }

      .hero-desktop__btn:hover {
        background-color: var(--color-accent);
        color: var(--color-bg);
      }
    }

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

  display: flex;
  align-items: center;
}

/* ==========================================================
   予約バッジ(丸いフレームデザイン)
   ==========================================================
   赤色は「予約・購入ボタン」として世界的に一番目に留まりやすい色。
   ★変更★ 以前は常に表示していたが、「上に戻る」ボタンと同じく、
   少しスクロールしてから現れるようにした(is-visibleクラスで制御)。
   ========================================================== */
.reserve-badge {
  width: 76px;
  height: 76px;

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

  text-decoration: none;

  /* 普段は透明・クリックできない状態にしておき、
     JSで「表示する」クラス(is-visible)が付いたときだけ見えるようにする
     (上に戻るボタンと全く同じ仕組み) */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.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%;

  /* ★変更★ 赤(rgba(230, 51, 41, 0.75))から、
     黄色バナー(.mobile-reserve-banner)と同じ黄色に変更した。
     透明度は付けず(1.0)、しっかりした濃い黄色に見えるようにしている。 */
  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;

  /* ★変更★ 背景を黄色にしたので、白文字(#FFFFFF)のままだと
     コントラストが弱く読みにくくなるため、黄色バナー
     (.mobile-reserve-banner)と同じ、濃い焦げ茶色に変更した。 */
  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;
}

/* ==========================================================
   ★変更★ 予約バッジを、矢印ボタン(.back-to-top)の斜め左上に
   固定表示する(スマホ・PC共通のルールに変更)
   ----------------------------------------------------------
   以前はスマホ画面のときだけ、この位置指定(position:fixed)を
   していたが、「PC版もスマホと同じように、矢印が右下、
   予約バッジがその斜め左上に来るようにしてほしい」との
   ことだったので、画面幅に関係なく、共通のルールにした。

   予約バッジ(.reserve-badge)に position: fixed を指定して、
   .fixed-actions(↑ボタンの箱)から独立させている。
   position: fixed にすると、画面(ビューポート)を基準にした
   位置指定に切り替わるので、右・下の位置を自由に指定できる。

   ・right: 58px / bottom: 78px →
     矢印ボタンは right:20px・bottom:20px・48px四方なので、
     その右端は画面右端から20+48=68pxの位置。
     そこから、間に少しすき間を空けつつ、矢印の斜め左上に
     ぴったり寄り添うように調整した数値。
     (PCでは予約バッジ自体が110pxと大きくなるが、この
      right・bottom は「バッジの右下の角の位置」を決める
      指定なので、バッジが大きくなっても、矢印との位置関係は
      崩れず、バッジがより左上まで大きく広がる形になる)

   ※ もう少し左右/上下に調整したい場合は、この right・bottom の
     数値だけを増減させれば微調整できます。
   ========================================================== */
.reserve-badge {
  position: fixed;
  right: 58px;
  bottom: 78px;
  z-index: 95;   /* ★追加★ .fixed-actionsから独立したので、他のコンテンツより手前に来るよう指定 */
}

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

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

    /* ★追加★ PCでは矢印ボタン(.back-to-top)を64pxに大きくしたため、
       今までのbottom:78pxのままだと、矢印とバッジが少し重なって
       しまうようになった。矢印の上端(20+64=84px)より上に来るよう、
       bottomを90pxに調整している(right:58pxはそのまま)。 */
    bottom: 90px;
  }

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

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


/* ★練習7で移動★ PC版の「エゾカムイくん」予約ボタンのCSSは、
   全ページで共通して使うため、reserve-chara.css に引っ越しました。 */

.back-to-top {
  /* ==========================================================
     丸い背景・枠線を持たない、矢印アイコンだけのデザイン。
     ----------------------------------------------------------
     width・heightは、指で押しやすい大きさを保つための、
     クリックできる範囲の大きさ(48px→56pxに拡大)。
     背景色・枠線は付けず、透明にしている。
     ========================================================== */
  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」の文字、の3つを縦に並べている。
   ========================================================== */
.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));
}

/* 上向きの三角形(矢印の先端)。border(枠線)だけで三角形を作る、
   よく使われるCSSのテクニック。 */
.back-to-top__arrowhead {
  width: 0;
  height: 0;
  border-left: 6px solid transparent;    /* 左側を透明にする */
  border-right: 6px solid transparent;   /* 右側を透明にする */
  border-bottom: 9px solid #C5A059;      /* ★修正★ 白→元の金色に戻した。大きさも4px/6px→6px/9pxに拡大 */
}

/* 短い縦線を表示する箱(この枠からはみ出した部分は見えなくする)
   ファーストビューの.hero-scroll-indicator__lineと、考え方は同じ。 */
.back-to-top__line {
  position: relative;   /* 中の小さい線(::before)を、この位置を基準に動かすため */
  width: 1px;
  height: 20px;   /* ★修正★ 14px→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;   /* ★修正★ 白→元の金色に戻した */

  /* 下の @keyframes(アニメーションの中身)を、
     1.8秒かけて・ずっとくり返す・動きに緩急をつける、という指定。
     ファーストビューの線と同じ秒数(1.8s)に揃えている。 */
  animation: backToTopLineMove 1.8s ease-in-out infinite;
}

/* ★アニメーションの中身★
   小さい線が「枠の下(見えない状態)」→「枠の中を通過(見える)」→
   「枠の上(見えない状態)」へ移動する動きを、パーセントで指定している。
   ファーストビューのheroScrollLineMove(上→下)を、
   ちょうど逆向き(下→上)にしたもの。 */
@keyframes backToTopLineMove {
  0% {
    bottom: -40%;
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    bottom: 100%;
    opacity: 0;
  }
}

/* ==========================================================
   ★追加★「TOP」の文字
   ==========================================================
   ファーストビューの「SCROLL」文字と同じ考え方(細めの字間の
   広い小文字)で、線のすぐ下に添えている。
   ========================================================== */
.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;
  }
}

/* ==========================================================
   ★変更★ 以前はここで、スマホ画面のときだけ
   「↑ボタン」と「予約バッジ」の並び順を入れ替えたり、
   予約バッジの位置を指定したりしていたが、
   予約バッジの位置指定は、スマホ・PC共通のルールに
   まとめたため(上の.reserve-badgeのルールを参照)、
   ここでは何もしなくてよくなった。
   ========================================================== */

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

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