/* ==========================================================
     ① 全体の色・余白などをまとめて管理する「変数」
     ==========================================================
     :root にCSS変数(カスタムプロパティ)を定義しておくと、
     あとで色を変えたくなったときに、ここを1か所直すだけで
     ページ全体の色を変更できます。とても便利な書き方です。
     ========================================================== */
  :root {
    --color-bg: #F7F6F3;          /* ページ全体の背景色(白に近いグレー) */
    --color-bg-soft: #EFEDE9;      /* カードなど少し濃いめの背景色 */
    --color-text: #2B2926;         /* 基本の文字色(墨のような黒) */
    --color-text-sub: #6B6660;     /* 補足文などの薄めの文字色 */
    --color-accent: #7B3B3B;       /* アクセントカラー(臙脂色・深い赤) */
    --color-gold: #B8956A;         /* 高級感を出す金系のアクセント色 */
    --color-border: #DAD6CF;       /* 罫線(区切り線)の色 */
    --font-mincho: 'Shippori Mincho', serif;   /* 見出し用の明朝体 */
    --font-sans: 'Noto Sans JP', sans-serif;   /* 本文用のゴシック体 */
  }

  /* ==========================================================
     ② リセット・基本設定
     ==========================================================
     ブラウザが最初から持っている余白(margin)などを一旦ゼロにして、
     どのブラウザで見ても同じ見た目になるように整えています。
     ========================================================== */
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* paddingやborderを含めてサイズ計算する設定 */
  }

  html {
    position: relative;   /* ★修正★ 背景をぼかすための、位置の基準をbodyからhtmlに変更した */
    overflow-x: hidden;   /* 横方向にはみ出しても、横スクロールバーを出さないようにする */
    overflow-y: auto;   /* スクロールの主役はhtml側だけにする(理由は下記) */
  }

  /* ==========================================================
     ★修正メモ(2回目)★
     --------------------------------------------------------------
     スマホで見たときに、ページの下の方に「左右に動く横スクロール
     バー」が出てしまう不具合があった。

     原因:このすぐ下にあった「ぼかし背景(body::before)」が、
     top/left/right に -20px を指定していたため、body の横幅より
     20px×2(左右)ぶん広がっていた。それを覆い隠す担当のはずの
     overflow-x: hidden が html にしか付いておらず、bodyには
     付けていなかったため(1つ上の修正メモ参照)、はみ出した分が
     隠しきれず、横スクロールできてしまっていた。

     直し方:ぼかし背景を「body::before」ではなく「html::before」に
     変更した(detail.htmlのdetail.cssと同じ方式)。こうすることで、
     はみ出す相手が body ではなく html 自身になるので、html に
     付けてある overflow-x: hidden だけで、はみ出した分をきちんと
     隠せるようになる。bodyの方に overflow-x: hidden を追加する
     必要が無くなったので、スクロールバーが2本になる古い不具合も
     再発しない。
     ========================================================== */

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

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

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

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

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

  body {
    /* html::before(ぼかし背景)より手前に表示するために必要 */
    position: relative;
    z-index: 1;

    background-color: var(--color-bg);   /* 万が一、画像が読み込めなかったときの保険の色 */
    color: var(--color-text);
    font-family: var(--font-sans);
    line-height: 1.8; /* 行間を広めにして読みやすくする */
    /* ★修正★ 下の余白(80px)を削除した。
       フッター(footer.css)自体が既に上下80pxの余白を持っているため、
       ここにも80pxを足すと、フッターの下に大きな空白が
       二重にできてしまっていた。 */
    padding: 0 20px;
  }


  /* 中身(見出し・FAQ一覧など)を、ぼかしレイヤーより手前に表示する */
  body > * {
    position: relative;
    z-index: 1;
  }

  /* ==========================================================
     ③ ヘッダー(ページ上部・お店の名前とタイトル部分)
     ========================================================== */
  .header {
    max-width: 700px;
    margin: 0 auto; /* 左右中央寄せ */
    /* ★修正★ パンくずリストをロゴの下に移動したことで、
       文字と重なってしまうため、上余白を広げて
       パンくずリストの下にくるようにした。
       ★さらに修正★ パンくずリストと見出しの間が詰まって
       見えたため、スマホ表示での余白を約30pxに広げた
       (109px→118px)。PC表示はもともと約31.5pxあり
       ちょうど良かったため、そちらは変更していない。 */
    padding-top: 120px;
    text-align: center;

    /* 下で定義するアニメーションを適用:
       ふわっと下から文字が浮かび上がるように見せています */
    animation: fadeInUp 1s ease both;
  }

  .header__shop-name {
    font-family: var(--font-mincho);
    /* vw(画面幅の割合)を使って文字サイズを決めることで、
       画面が狭くなるほど自動的に文字が小さくなり、
       改行やはみ出しを防いでいます。 */
    font-size: clamp(11px, 3.6vw, 15px);
    letter-spacing: 0.2em; /* 文字の間隔を広げて上品な雰囲気に */
    color: var(--color-accent);
    margin-bottom: 18px;
    white-space: nowrap;   /* 文字を折り返さず、必ず1行で表示する */
  }

  .header__title {
    font-family: var(--font-mincho);
    font-size: clamp(32px, 6vw, 44px); /* 画面幅に応じて文字サイズが自動調整される */
    font-weight: 700;
    letter-spacing: 0.08em;
  }

  /* 「お問い合わせ」の下に表示する、少し小さめの見出し(よくある質問) */
  .header__subtitle {
    font-family: var(--font-mincho);
    font-size: clamp(16px, 3vw, 20px);
    color: var(--color-text-sub);
    margin-top: 10px;
    letter-spacing: 0.06em;
  }

  /* 見出し下の細い金色のライン(サイトの「サイン」となる装飾要素) */
  .header__divider {
    width: 64px;
    height: 2px;
    background-color: var(--color-gold);
    margin: 28px auto 0;

    /* 幅が0から64pxへ、じわっと伸びるアニメーション */
    animation: growLine 1.2s 0.4s ease both;
  }

  .header__lead {
    margin-top: 24px;
    font-size: 14px;
    color: var(--color-text-sub);
  }

  /* ==========================================================
     ④ FAQリスト全体を囲むコンテナ
     ========================================================== */
  .faq-list {
    max-width: 700px;
    margin: 64px auto 0;
    display: flex;
    flex-direction: column; /* 縦方向に並べる */
    gap: 16px; /* カード同士の間隔 */
  }

  /* ==========================================================
     ⑤ FAQ 1つ分のカード(質問+回答のセット)
     ========================================================== */
  .faq-item {
    background-color: #FFFFFF;
    border: 1px solid var(--color-border);
    border-radius: 4px; /* 角を少しだけ丸める(和モダンなので丸めすぎない) */
    overflow: hidden; /* 中身がはみ出さないようにする */
  }

  /* 質問部分(クリックできるボタンとして作っています) */
  .faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 24px;
    background: none;
    border: none;
    text-align: left;
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 500;
    color: var(--color-text);
    cursor: pointer; /* マウスを乗せると「押せる」ことがわかるカーソルに */
  }

  /* 質問文の前につける「Q」マーク */
  .faq-question__mark {
    font-family: var(--font-mincho);
    color: var(--color-accent);
    font-size: 18px;
    flex-shrink: 0; /* 文字が長くても、Qマークの幅は縮まないようにする */
  }

  .faq-question__text {
    flex-grow: 1; /* 残りの横幅いっぱいに広がる */
  }

  /* 開閉アイコン(＋マーク)。JSでクラスを付け外しして回転させます */
  .faq-question__icon {
    position: relative;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    transition: transform 0.3s ease; /* 回転をなめらかにする */
  }
  .faq-question__icon::before,
  .faq-question__icon::after {
    content: "";
    position: absolute;
    background-color: var(--color-accent);
  }
  /* ＋の「横棒」 */
  .faq-question__icon::before {
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    transform: translateY(-50%);
  }
  /* ＋の「縦棒」 */
  .faq-question__icon::after {
    left: 50%;
    top: 0;
    width: 2px;
    height: 100%;
    transform: translateX(-50%);
  }

  /* 開いている状態(is-openクラスが付いたとき)は、
     アイコンを45度回転させて「＋」を「×」に見せる */
  .faq-item.is-open .faq-question__icon {
    transform: rotate(45deg);
  }

  /* 回答部分をひとまわり囲む要素。
     ここの高さをJSで0⇔中身の高さに切り替えることで
     「ふわっと開閉する」アコーディオンの動きを作っています。 */
  .faq-answer-wrapper {
    max-height: 0; /* 普段は高さ0で隠れている */
    overflow: hidden;
    transition: max-height 0.4s ease; /* 高さの変化をなめらかに */
  }

  .faq-answer {
    padding: 0 24px 24px 58px; /* 左側をQマークの分だけあけて、文頭を揃える */
    color: var(--color-text-sub);
    font-size: 14.5px;
  }

  /* ==========================================================
     ⑥ アニメーションの定義
     ==========================================================
     @keyframes で「開始状態→終了状態」の見た目の変化を定義し、
     上のクラスの animation プロパティから呼び出しています。
     ========================================================== */
  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(16px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes growLine {
    from { width: 0; }
    to { width: 64px; }
  }

  /* ==========================================================
     ⑥.5 お電話でのお問い合わせカード
     ==========================================================
     FAQのアコーディオンとは違い、電話番号と営業時間は
     すぐに見えてほしい情報なので、クリックしなくても
     最初から中身が見えているカードにしています。
     ========================================================== */
  .contact-card {
    padding: 32px 24px;
    text-align: center; /* 中身を中央揃えにする */
  }

  .contact-card__label {
    font-size: 13px;
    letter-spacing: 0.08em;
    color: var(--color-text-sub);
    margin-bottom: 14px;
  }

  /* 電話番号のリンク。
     href="tel:電話番号" にしておくと、スマホで見たときに
     タップするだけでそのまま電話をかけられるようになります。 */
  .contact-card__tel {
    display: inline-block;
    font-family: var(--font-mincho);
    font-size: clamp(24px, 6vw, 32px);
    font-weight: 700;
    color: var(--color-accent);
    text-decoration: none; /* リンクの下線を消す */
    letter-spacing: 0.04em;
  }

  /* マウスを乗せたときだけ下線を表示して、
     リンクであることが分かりやすいようにする */
  .contact-card__tel:hover {
    text-decoration: underline;
  }

  .contact-card__hours {
    margin-top: 16px;
    font-size: 13.5px;
    color: var(--color-text-sub);
  }

  /* ★追加★
     PC(画面幅768px以上)では、電話をかける操作自体ができないため、
     この大きく表示している電話番号も「押せないただの文字」にする。
     footer.css / style.css の #footer-tel a と同じ考え方。 */
  @media (min-width: 768px) {
    .contact-card__tel {
      cursor: default;       /* マウスカーソルを通常の矢印にする */
      pointer-events: none;  /* クリックしても電話アプリが起動しないようにする */
    }

    .contact-card__tel:hover {
      text-decoration: none; /* PCではマウスを乗せても下線を出さない(リンクではないため) */
    }
  }

  /* ==========================================================
     ⑨ 背景の和柄デコレーション(右上・左下)
     ==========================================================
     いただいた画像から「右上の柄」と「左下の柄」を切り出して、
     それぞれ別々の要素として配置しています。
     2つに分けているのは、片方ずつ時間差(タイミングをずらして)
     フェードインさせるためです。
     position: fixed を使うことで、スクロールしても
     常に画面の同じ位置(右上・左下)に留まるようにしています。
     ========================================================== */
  .bg-decor {
    position: fixed;       /* 画面(ビューポート)基準で固定表示 */
    z-index: -1;            /* コンテンツより後ろ(背面)に配置 */
    pointer-events: none;   /* クリックやタップの邪魔をしないようにする */
    opacity: 0;              /* 最初は透明(非表示)の状態からスタート */
    background-repeat: no-repeat;
    background-size: contain;
    width: clamp(260px, 42vw, 520px); /* 画面幅に応じて260px〜520pxの間で自動調整(PCサイズはここで固定・以後変更なし) */
    aspect-ratio: 1 / 1;
  }

  /* 右上の柄
     bgPulseTR というアニメーションを「無限に繰り返す(infinite)」設定です。
     最初は現れる動き、そのあとはずっと「現れる→薄くなる」を繰り返します。 */
  .bg-decor--top-right {
    top: 0;
    right: 0;
    background-position: top right;
    animation: bgPulseTR 7s ease-in-out infinite;

    /* ==========================================================
       画像の「内側(左下方向)」を少しずつ透明にぼかすマスクです。
       元画像の端が四角くパツッと切れて見えるのを防ぎ、
       自然に背景へ溶け込むように馴染ませています。
       角(右上)側は black(=はっきり見せる)、
       内側(左下)に向かって transparent(=透明)にしています。
       -webkit-mask-image は Safari 対応のためのおまじないです。
       ========================================================== */
    mask-image: linear-gradient(to bottom left, black 25%, transparent 78%);
    -webkit-mask-image: linear-gradient(to bottom left, black 25%, transparent 78%);
  }

  /* 左下の柄
     右上と同じ動きだと単調に見えるため、周期(7s→9s)と
     開始タイミング(animation-delay)をわざとずらしています。
     これにより「右上と左下が別々のリズムで、時間差で
     現れたり消えたりする」ような、自然な印象になります。 */
  .bg-decor--bottom-left {
    bottom: 0;
    left: 0;
    background-position: bottom left;
    animation: bgPulseBL 9s ease-in-out infinite;
    animation-delay: 1.4s; /* 右上より少し遅れてスタート */

    /* 上と同じ理由のマスクです。左下の柄なので、
       角(左下)側ははっきり、内側(右上)に向かって透明にしています。 */
    mask-image: linear-gradient(to top right, black 25%, transparent 78%);
    -webkit-mask-image: linear-gradient(to top right, black 25%, transparent 78%);
  }

  /* ==========================================================
     opacity(透明度)を 0 ⇔ 0.55 の間で行ったり来たりさせることで
     「ふわっと現れて、また薄れて消えていく」を繰り返す
     呼吸のようなアニメーションを作っています。
     0%と100%を同じ値にしておくと、無限ループさせたときに
     動きが「カクッ」とならず、なめらかにつながります。
     ========================================================== */
  @keyframes bgPulseTR {
    0%   { opacity: 0; }
    35%  { opacity: 0.55; }  /* 一番はっきり見える瞬間 */
    70%  { opacity: 0.08; }  /* ほとんど消えかける瞬間 */
    100% { opacity: 0; }
  }

  @keyframes bgPulseBL {
    0%   { opacity: 0; }
    40%  { opacity: 0.55; }
    75%  { opacity: 0.1; }
    100% { opacity: 0; }
  }

  /* ==========================================================
     スマホ表示のときだけ、右上の柄を小さく・控えめにする調整です。
     ==========================================================
     スマホ画面は横幅が狭く、右上の柄と店名の文字が近い位置に
     来てしまうため、右上の柄だけ「小さく」「薄く」「少し外側へ」
     ずらすことで、文字への重なりを減らして読みやすくしています。
     PC(画面幅481px以上)の見た目には、この部分は影響しません。
     ========================================================== */
  @media (max-width: 480px) {
    .bg-decor--top-right {
      width: clamp(170px, 44vw, 240px); /* 以前より大きめに調整 */
      top: -12px;
      /* ★修正★ right: -12px にしていたことが、position: fixed の
         この装飾模様を画面の右端から実際にはみ出させてしまい、
         スマホで横スクロールできてしまう原因になっていた。
         0にして、画面の中に収まるようにした。 */
      right: 0;
      animation-name: bgPulseTRMobile; /* 薄さ控えめの専用アニメーションに切り替え */
    }
  }

  /* スマホ用:右上の柄の最大透明度を0.55→0.28に抑えたバージョン */
  @keyframes bgPulseTRMobile {
    0%   { opacity: 0; }
    35%  { opacity: 0.28; }
    70%  { opacity: 0.05; }
    100% { opacity: 0; }
  }

  /* 動きを減らす設定をしている人には、アニメーションなしで
     最初から柄を表示する(見た目自体は保ちつつ、動きだけ省く) */
  @media (prefers-reduced-motion: reduce) {
    .bg-decor {
      animation: none;
      opacity: 0.55;
    }
  }

  /* ==========================================================
     ⑥.8 パンくずリスト
     ==========================================================
     「今このページが、サイトのどの位置にあるか」を示す
     ナビゲーションです。「ホーム > 現在のページ」のように
     階層を表示します。
     ========================================================== */
  .breadcrumb {
    font-size: 12.5px;
    color: var(--color-text-sub);
    display: flex;
    align-items: center;
    gap: 8px; /* 要素同士の間隔 */

    /* position: absolute にすることで、.header の
       中央寄せレイアウトの影響を受けずに独立して配置できます。 */
    position: absolute;

    /* ★修正★
       以前は top: 4px / left: 2px で、ロゴの真上に重なって
       しまっていた。ロゴの下にくるように、固定ヘッダーの高さ
       (スマホ:66px)+ 少しの余白(8px)ぶん下にずらした。
       左位置も、ロゴ画像の左端(#site-headerのpadding-left: 20px)
       とぴったり縦に揃うように 20px にした。
       PC(画面幅768px以上)のときは、ヘッダーの高さやロゴの位置が
       変わるため、下の @media (min-width: 768px) の中で
       別の数値に上書きしている。 */
    top: 74px;
    left: 20px;

    /* ★追加★ 「body > * { z-index: 1 }」の指定により、後ろにある
       .header(本文の見出し部分)と重なり順が同じになってしまい、
       あとから並んでいる .header の方が手前に表示されて、
       パンくずリストのリンクが押せなくなる不具合があった。
       これより高いz-indexを指定して、必ず手前に表示されるようにする。 */
    z-index: 5;
  }

  .breadcrumb a {
    color: var(--color-text-sub);
    text-decoration: none;
  }

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

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

  /* ★追加★
     スマホ表示(画面幅767px以下)のときだけ、パンくずリストの
     文字を少し小さくする。位置(top/left)はそのまま変更しない。
     PC(768px以上)は、下の @media (min-width: 768px) の方が
     あとに読み込まれるため、そちらの指定がそのまま使われる。 */
  @media (max-width: 767px) {
    .breadcrumb {
      font-size: 11px;
    }
  }

  /* ★追加★
     PC(画面幅768px以上)では、固定ヘッダーが高くなり(84px)、
     ロゴの左位置も40pxに変わる(header.css参照)。
     パンくずリストもそれに合わせて、ロゴの下・左端に揃うよう
     位置を調整する。 */
  @media (min-width: 768px) {
    .breadcrumb {
      top: 92px;
      left: 40px;
    }
    /* ★追加★ PCではパンくずリストの位置(top:92px)も下がるため、
       ページタイトルの上余白もそれに合わせて広げる */
    .header {
      padding-top: 130px;
    }
  }

  /* ==========================================================
     予約バッジ(画面下に固定表示・丸いフレームデザイン)
     ==========================================================
     常に画面に固定表示することで、いつでもすぐに
     予約ページ(食べログ)に飛べるようにする。
     ★変更★ トップページと同じデザインに揃えるため、
     赤色→黄色、丸背景の「上に戻る」ボタン→矢印だけのデザインに
     作り替えた。
     ========================================================== */
  /* ==========================================================
     右下に固定表示する「上に戻る」ボタンを入れる箱
     ==========================================================
     予約バッジ(.reserve-badge)は、矢印ボタンの斜め左上に
     独自の位置(position:fixed)で固定表示するため、
     この箱には含まれない。
     ========================================================== */
  .fixed-actions {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 95;

    display: flex;
    align-items: center;
  }

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

    width: 76px;
    height: 76px;

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

    text-decoration: none;

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

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

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

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

  .reserve-badge__fill {
    position: absolute;
    top: 12%;
    left: 12%;
    width: 76%;
    height: 76%;
    border-radius: 50%;
    background-color: #FFD400;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  }

  .reserve-badge__frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .reserve-badge__txt {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #2b2620;
    font-family: var(--font-mincho);
    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;
  }

  @media (min-width: 768px) {
    .reserve-badge {
      width: 110px;
      height: 110px;

      /* PCでは矢印ボタンが64pxに大きくなるため、重ならないよう調整 */
      bottom: 90px;
    }
    .reserve-badge__jp { font-size: 17px; }
    .reserve-badge__en { font-size: 9.5px; }
  }

  /* ==========================================================
     ⑥.9 トップに戻るボタン(丸い背景をやめ、矢印だけのデザインに)
     ==========================================================
     ページの下の方までスクロールしたときに現れる、
     クリックすると一番上まで戻してくれるボタンです。
     普段は画面の右下に固定表示されています。
     ========================================================== */
  .back-to-top {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    border: none;
    background-color: transparent;

    /* 普段は透明にしておき、JSで「表示する」クラスが
       付いたときだけ見えるようにする */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s;
  }

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

  .back-to-top__arrowhead {
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 9px solid var(--color-gold);
  }

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

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

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

  .back-to-top__label {
    font-family: var(--font-mincho);
    font-size: 9px;
    letter-spacing: 0.15em;
    color: var(--color-gold);
  }

  /* JSがスクロール量に応じてこのクラスを付け外しする */
  .back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
  }

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

  /* PC(768px以上)では、矢印アイコンをさらに大きくする */
  @media (min-width: 768px) {
    .back-to-top {
      width: 64px;
      height: 64px;
    }
    .back-to-top__arrowhead {
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;
      border-bottom: 12px solid var(--color-gold);
    }
    .back-to-top__line {
      height: 26px;
    }
    .back-to-top__label {
      font-size: 10px;
    }
  }

  /* ★修正★
     以前はここに「@media (min-width: 481px)」で
     top:16px / left:20px に上書きするルールがあったが、
     実際にヘッダー(ロゴの位置・高さ)が変わるのは768pxからなので、
     基準がずれていた。この重複ルールは削除し、
     768px以上の調整は、上の .breadcrumb 定義のすぐ下にある
     「@media (min-width: 768px)」に一本化した。 */

  /* ==========================================================
     ⑪ スマホなど画面が狭いときの調整(レスポンシブ対応)
     ========================================================== */
  @media (max-width: 480px) {
    /* ★修正★ 以前あった .header { padding-top: 48px; } は削除した。
       基準値(109px)がそのままスマホでも正しい余白になるため、
       ここで48pxに戻すと、パンくずリストとまた重なってしまう。 */
    .faq-question { padding: 18px 16px; font-size: 15px; }
    .faq-answer { padding: 0 16px 20px 40px; }
    .back-to-top { width: 52px; height: 52px; }

    /* スマホでは、PCと同じ位置(上4px・左2px)のまま、
       文字だけ少し小さくして画面に収まりやすくする */
    .breadcrumb {
      font-size: 10.5px;
    }
  }

  /* ==========================================================
     ⑫ 「動きを減らす設定」をしている人への配慮
     ==========================================================
     OSの設定で「アニメーションを減らす」を選んでいるユーザー向けに、
     不要なアニメーションを無効化するための記述です。
     アクセシビリティ(使いやすさ配慮)の基本のひとつです。
     ========================================================== */
  @media (prefers-reduced-motion: reduce) {
    .header,
    .header__divider {
      animation: none;
    }
  }

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