/* © 2026 PassQuest Team (https://passquest.jp). All rights reserved. 無断複製・転載・改変を禁じます。 */
/* ══════════════════════════════════════════════════════════════
   MOBILE (≤480px) — スマホ表示調整 v1  ヘッダーのみ
   PC表示には一切影響しません（このブロックの外は無変更）
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  /* ── 画面を上に引っ張った時の「ゴム伸び」を止める ──────────
     iOSのSafariでは、画面端まで上（下）にスクロールした後さらに
     指を動かすとページ全体が伸び縮みする「バウンス」動作がある。
     これによりヘッダーが画面と一緒に動いて見える。
     ※PCの表示は変わりません（この@media の中だけの指定です） */
  html, body {
    overscroll-behavior-y: none !important;
  }

  /* ── ヘッダーを1行にまとめる（空白を詰める） ─────────────────
     戻る・LV表示・BGM・MODE・TIMER・ITEM をすべて1行に収める。
     文字が長い言語（インドネシア語・ベトナム語 等）で入りきらない
     場合は、はみ出す代わりに「…」で自然に省略されるようにして
     レイアウト崩れを防いでいます。
     ※PCの表示は変わりません（この@media の中だけの指定です） */
  header.app-header {
    flex-wrap: nowrap !important;
    padding: 4px 4px !important;
    gap: 2px !important;
    align-items: center !important;
  }

  /* ── ヘッダーの固定方式をposition:fixedに統一（スマホのみ） ──
     各画面（1問1答・ワールドマップ等）は position:fixed の
     オーバーレイとして実装されているため、ヘッダー側だけ
     position:sticky のままだと、iOSのSafariでスタッキング
     コンテキストの扱いが不安定になり、スクロール中にヘッダーが
     ずれたり消えたりする（日本語ボタンが透明に見える現象も同じ
     原因）。ヘッダーも fixed に統一することで解消する。
     ※PCの表示は変わりません（この@media の中だけの指定です） */
  header.app-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
  }

  /* 戻る：アイコン主体でコンパクトに（余白を削って文字を大きく） */
  header.app-header #hdr-back-btn {
    font-size: 0.78rem !important;
    padding: 3px 4px !important;
    order: 1 !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  /* LV表示：絶対配置を解除しつつ、EXP表示は省いてLVバッジだけに圧縮 */
  header.app-header .header-lvl-center {
    position: static !important;
    left: auto !important;
    order: 2 !important;
    flex: 0 0 auto !important;
    justify-content: flex-start !important;
    min-width: 0 !important;
  }
  header.app-header .hdr-lvl-box {
    gap: 0 !important;
    padding: 1px 4px !important;
    border-radius: 12px !important;
  }
  header.app-header .hdr-lv-badge { padding: 1px 4px !important; }
  header.app-header .hdr-lv-prefix { font-size: 0.64rem !important; }
  header.app-header .hdr-lv-num    { font-size: 1.05rem !important; }
  /* EXPバー・数値は1行化のため非表示（LVバッジのみ表示） */
  header.app-header .hdr-lv-divider,
  header.app-header .hdr-exp-wrap {
    display: none !important;
  }

  /* 言語セレクタは元々この画面では非表示のまま */
  header.app-header .header-lang-center {
    order: 3 !important;
    flex: 0 0 auto !important;
    margin-right: 0 !important;
  }

  /* ボタン群：残りの幅いっぱいを使って1行で並べる */
  header.app-header .header-controls {
    order: 4 !important;
    flex: 1 1 auto !important;
    width: auto !important;
    margin-left: 0 !important;
    min-width: 0 !important;
    justify-content: flex-end !important;
  }
  header.app-header .header-btn-group {
    flex-wrap: nowrap !important;
    width: 100% !important;
    justify-content: space-between !important;
    gap: 1px !important;
    padding: 1px 2px !important;
    border-radius: 12px !important;
    min-width: 0 !important;
  }
  /* グループ内の各要素（BGMラップ用span・カウントダウン用div含む）に均等に幅を配分 */
  header.app-header .header-btn-group > span,
  header.app-header .header-btn-group > div,
  header.app-header .header-btn-group > button {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  /* 制限時間カウントダウン（作動中のみ表示）も縮小して1行に収める */
  header.app-header #hdr-quiz-timer,
  header.app-header #ichimoni-timer {
    font-size: 0.72rem !important;
    min-width: 0 !important;
    padding: 2px 3px !important;
    border-radius: 8px !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  header.app-header .hdr-btn {
    font-size: 0.78rem !important;
    letter-spacing: 0 !important;
    padding: 2px 1px 3px !important;
    border-radius: 5px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    box-shadow:
      0 2px 0 rgba(0,0,0,0.45),
      0 3px 6px rgba(0,0,0,0.35),
      inset 0 1px 0 rgba(255,255,255,0.22) !important;
  }
  /* 曲選択（▾）ボタンはBGMボタンの隣に小さく添える */
  header.app-header #bgm-pick-btn {
    padding: 2px 2px !important;
    font-size: 0.7rem !important;
    margin-left: 1px !important;
    border-radius: 4px !important;
    flex: 0 0 auto !important;
  }
  header.app-header #header-wordbank-btn .word-bank-badge {
    font-size: 0.56rem !important;
    padding: 0 2px !important;
  }

  /* ══════════════════════════════════════════════════════════
     タイトル画面（スマホ）
     ══════════════════════════════════════════════════════════ */

  /* ── 1段目：プランヒントのバーを縮める ─────────────────── */
  #title-screen #title-plan-hint > span {
    font-size: 0.72rem !important;
    letter-spacing: 0.2px !important;
  }
  #title-screen #title-plan-hint {
    max-width: calc(100vw - 20px) !important;
    box-sizing: border-box !important;
  }

  /* ── 2段目：言語 / BGM / ログイン を1行に収める ─────────── */
  #title-screen #title-top-nav {
    top: 54px !important;
    padding: 0 6px !important;
  }
  #title-screen #title-top-nav > div:first-child {
    margin-left: 0 !important;
    gap: 6px !important;
  }
  #title-screen .lang-dropdown-trigger {
    padding: 9px 10px !important;
    font-size: 0.72rem !important;
    gap: 4px !important;
    border-width: 1.5px !important;
  }
  #title-screen .lang-dropdown-trigger img {
    width: 18px !important;
    height: 13px !important;
  }
  #title-screen #title-bgm-btn.title-badge-btn {
    padding: 9px 10px !important;
    font-size: 0.68rem !important;
    letter-spacing: 0 !important;
  }
  #title-screen #title-login-btn.title-badge-btn {
    padding: 9px 12px !important;
    font-size: 0.72rem !important;
    letter-spacing: 0 !important;
    border-width: 1.5px !important;
  }

  /* ── 合格可能性カードを2段ぶん下げる ────────────────────── */
  #pass-meter-home.pm-home {
    top: 98px !important;
  }

  /* ── メダル台座：3つが重ならないサイズへ ────────────────── */
  #title-screen .mode-pedestals {
    gap: 6px !important;
    bottom: 72px !important;
    padding: 0 8px !important;
  }
  #title-screen .mode-pedestal {
    width: 96px !important;
    height: 96px !important;
  }
  #title-screen .medal-bg {
    width: 84px !important;
    height: 84px !important;
  }
  #title-screen .medal-stars {
    width: 94px !important;
    height: 94px !important;
    margin-top: -47px !important;
    margin-left: -47px !important;
  }
  #title-screen .pedestal-floor {
    width: 70px !important;
    height: 10px !important;
  }

  /* ── ロゴ：台座と重ならないよう上へ・縮小 ───────────────── */
  #title-screen .logo-section .logo-frame {
    transform: translateY(-160px) scale(0.7) !important;
    transform-origin: center bottom !important;
  }

  /* ── コピーライト：最下段の空きスペースへ小さく ─────────── */
  #title-screen .copyright {
    transform: translate(calc(50vw - 57px), 5px) scale(0.5) !important;
    transform-origin: left bottom !important;
  }

  /* ══════════════════════════════════════════════════════════
     下部の固定ボタン（スマホ）
     左下＝音テスト / 右下＝☰ を小さな角アイコンにして
     画面下部のコンテンツと重ならないようにする
     ══════════════════════════════════════════════════════════ */

  /* ── 左下：🔊音テスト（開発用）はスマホでは非表示 ─────────
        ※PCでは今まで通り表示されます。
        ※スマホでも一時的に出したい時は、この1ブロックを
          コメントアウトしてください。 */
  #sound-test-btn {
    display: none !important;
  }

  /* ── 右下：☰ メニューを一回り小さく、より角へ ───────────── */
  #title-menu-trigger.title-menu-trigger {
    width: 42px !important;
    height: 42px !important;
    right: 6px !important;
    bottom: calc(6px + env(safe-area-inset-bottom, 0px)) !important;
    font-size: 1.15rem !important;
  }

  /* ── 📣 お知らせボタンを一回り小さく（位置はそのまま） ───── */
  #feedback-fab {
    width: 42px !important;
    height: 42px !important;
    font-size: 1.05rem !important;
  }

  /* ── 画面下中央の言語バーを左右の角ボタンの内側に収める ──── */
  #lang-toggle.lang-toggle {
    max-width: calc(100vw - 100px) !important;
    /* ★2026-08-16 修正：ここが overflow:hidden だったため、
         «▾» で開く母国語メニュー（.lt-native-menu）がバーの外に
         はみ出す部分ごと «切り取られて» いた。
         メニューは表示されているように見えても、切り取られた場所は
         タップが届かず（実測：指の下に来るのはタイトル画面）、
         «日本語を選んでも切り替わらない» 状態になっていた。
         バーの幅は max-width で足りているので visible に戻す。
         （6言語とも実測254pxで、上限340pxを超えません） */
    overflow: visible !important;
  }
  #lang-toggle .lt-seg {
    padding: 7px 10px !important;
    font-size: 0.85rem !important;
    gap: 5px !important;
    min-width: 0 !important;
  }
  #lang-toggle .lt-seg img {
    width: 19px !important;
    height: 14px !important;
    flex: 0 0 auto !important;
  }
  #lang-toggle .lt-native-main {
    padding: 6px 6px 6px 10px !important;
    gap: 5px !important;
    min-width: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
  }
  #lang-toggle .lt-native-caret {
    padding: 6px 9px !important;
    flex: 0 0 auto !important;
  }
  /* 320〜360px の狭い端末ではさらに小さく */
  @media (max-width: 360px) {
    #lang-toggle.lang-toggle {
      max-width: calc(100vw - 94px) !important;
    }
    #lang-toggle .lt-seg {
      padding: 6px 7px !important;
      font-size: 0.76rem !important;
      gap: 4px !important;
    }
    #lang-toggle .lt-seg img {
      width: 16px !important;
      height: 12px !important;
    }
    #lang-toggle .lt-native-main {
      padding: 5px 5px 5px 7px !important;
      gap: 4px !important;
    }
    #lang-toggle .lt-native-caret {
      padding: 5px 7px !important;
    }
  }

  /* ── ログインモーダル専用の言語切替（#login-modal-lang-toggle）
        既存の #lang-toggle と見た目を統一するため .lang-toggle / .lt-seg
        などの«クラス»はそのまま使い回しているが、#lang-toggle 専用に
        効いている上のサイズ調整（#lang-toggle.lang-toggle ...）はIDが
        違うため当たらない。同じ縮小サイズをこちらにも適用しておく。
        （2026-08-26 トモさんのご指摘：言語切替ボタンのデザインを
        他の画面と統一してほしい） ────────────────────────────── */
  #login-modal-lang-toggle.lang-toggle {
    max-width: calc(100vw - 32px) !important;
    overflow: visible !important;
  }
  /* ★2026-08-26 修正：中央寄せに直したところ、375px幅（iPhone SE/8など）で
     コンパクトめのサイズ（0.85rem）でもまだ左下の📣報告ボタンと約2px
     重なってしまうことが判明。480px以下では常にこの縮小サイズ（元は
     360px以下だけの特別扱いだった値）を使うようにし、重なりの心配を
     なくす。ログインモーダル専用の要素なので、他画面の#lang-toggleの
     見た目には影響しない。 */
  #login-modal-lang-toggle .lt-seg {
    padding: 6px 7px !important;
    font-size: 0.76rem !important;
    gap: 4px !important;
    min-width: 0 !important;
  }
  #login-modal-lang-toggle .lt-seg img {
    width: 16px !important;
    height: 12px !important;
    flex: 0 0 auto !important;
  }
  #login-modal-lang-toggle .lt-native-main {
    padding: 5px 5px 5px 7px !important;
    gap: 4px !important;
    min-width: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
  }
  #login-modal-lang-toggle .lt-native-caret {
    padding: 5px 7px !important;
    flex: 0 0 auto !important;
  }
  #login-modal-native-menu {
    bottom: calc(100% + 8px) !important;
    top: auto !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    min-width: 210px !important;
  }
  #login-modal-native-menu button {
    padding: 13px 14px !important;
    font-size: 1rem !important;
  }

  /* ── プラン詳細モーダル：ボタンの右端が☰に隠れないよう
        パネルの左右余白を広げて少し細くする ───────────────── */
  #mode-detail-modal .mode-detail-panel {
    padding-left: 30px !important;
    padding-right: 30px !important;
  }

  /* ══════════════════════════════════════════════════════════
     暗記カード（フラッシュカード）画面
     「次のカードへ」「覚えた！」ボタンが画面の下に
     はみ出していたので、カードとボタンを少し低くする
     ══════════════════════════════════════════════════════════ */

  /* ── カード本体を 300px → 250px に ───────────────────────── */
  #flashcard-screen #fc-inner {
    height: 250px !important;
  }

  /* ── 操作ボタン（😅次のカードへ / ⭐覚えた！）を低く ──────── */
  #flashcard-screen button[onclick^="FlashcardManager.nextCard"],
  #flashcard-screen button[onclick^="FlashcardManager.gotIt"] {
    padding: 9px 6px !important;
    gap: 2px !important;
    border-radius: 14px !important;
  }
  /* 絵文字（😅 / ⭐） */
  #flashcard-screen button[onclick^="FlashcardManager.nextCard"] > div:nth-child(1),
  #flashcard-screen button[onclick^="FlashcardManager.gotIt"] > div:nth-child(1) {
    font-size: 1.35rem !important;
  }
  /* メインの文字 */
  #flashcard-screen button[onclick^="FlashcardManager.nextCard"] > div:nth-child(2),
  #flashcard-screen button[onclick^="FlashcardManager.gotIt"] > div:nth-child(2) {
    font-size: 0.92rem !important;
    line-height: 1.2 !important;
  }
  /* 下の説明文字（まだ覚えていない／このカードを完了にする）
     ★2026-08-14
       ・0.68rem では小さすぎて読めなかったので大きくする
       ・薄くて読みにくかったので «透けさせない»（opacity 1）＋色を明るく
       ・«このカードを完了にする» が2行に折り返していたので1行に収める。
         幅の狭い端末でも1行に入るよう、画面幅に応じて少しだけ縮む
         clamp（最小0.82rem／最大0.95rem）にしている。 */
  #flashcard-screen button[onclick^="FlashcardManager.nextCard"] > div:nth-child(3),
  #flashcard-screen button[onclick^="FlashcardManager.gotIt"] > div:nth-child(3) {
    font-size: clamp(0.82rem, 3.3vw, 0.95rem) !important;
    line-height: 1.55 !important;
    opacity: 1 !important;
    white-space: nowrap !important;
    letter-spacing: -0.01em !important;
  }
  /* 青いボタン（暗い下地）＝明るいクリーム色 */
  #flashcard-screen button[onclick^="FlashcardManager.nextCard"] > div:nth-child(3) {
    color: #e3edff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55) !important;
  }
  /* 金色のボタン（明るい下地）＝白＋濃い影でくっきり */
  #flashcard-screen button[onclick^="FlashcardManager.gotIt"] > div:nth-child(3) {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 1px 1px 0 rgba(90, 55, 5, 0.55) !important;
  }
  /* 1行に収めるため、ボタンの左右の余白を詰める */
  #flashcard-screen button[onclick^="FlashcardManager.nextCard"],
  #flashcard-screen button[onclick^="FlashcardManager.gotIt"] {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  /* ══════════════════════════════════════════════════════════
     指でタップしやすい大きさに（スマホ）
     目安：高さ32px以上。見た目を大きく変えずに
     「押せる範囲」を広げることを優先しています
     ══════════════════════════════════════════════════════════ */

  /* ── 1問1答：年度・科目などのチップを縦に少し厚く ───────── */
  .ichimoni-chip {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  /* ── ヘッダー「◀戻る」も押せる範囲だけ広げる ────────────── */
  header.app-header #hdr-back-btn {
    position: relative !important;
  }
  header.app-header #hdr-back-btn::after {
    content: '';
    position: absolute;
    top: -5px;
    bottom: -5px;
    left: -2px;
    right: -2px;
  }

  /* ── ヘッダー BGM横の「▾」も押せる範囲だけ広げる ────────── */
  header.app-header #bgm-pick-btn {
    position: relative !important;
  }
  header.app-header #bgm-pick-btn::after {
    content: '';
    position: absolute;
    top: -4px;
    bottom: -4px;
    left: -4px;
    right: -4px;
  }

  /* ── ヘッダーの小さなボタン（BGM/Mode/Timer/ITEM）
        見た目のサイズはそのままで、押せる範囲だけ上下に広げる
        （透明な当たり判定を重ねるだけなので、レイアウトは不変） ── */
  header.app-header .hdr-btn {
    position: relative !important;
  }
  header.app-header .hdr-btn::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -7px;
    bottom: -7px;
  }

  /* ── 画面下の言語バー「▾」も押せる範囲を広げる ──────────── */
  #lang-toggle .lt-native-caret {
    position: relative !important;
  }
  #lang-toggle .lt-native-caret::after {
    content: '';
    position: absolute;
    top: -6px;
    bottom: -6px;
    left: -1px;
    right: -3px;
  }

  /* ── メニューの項目を最低32pxに ─────────────────────────── */
  #title-menu-panel .title-menu-item {
    min-height: 32px !important;
  }

  /* ── 問題画面「気になる」チェックボックス ────────────────
        つぶれて13×18pxの長方形になっていたので、
        20×20pxの正方形に直します（ラベル全体が押せます） ──── */
  #unsure-checkbox {
    width: 20px !important;
    height: 20px !important;
    flex: 0 0 auto !important;
  }

  /* ══════════════════════════════════════════════════════════
     1問1答：はみ出していた表示を「1行」に収める（スマホのみ）
       ①「⚔難易度 / Difficulty  Easy Normal Hard」が
          Hard だけ2行目に落ちていたので、文字と余白を
          少しだけ小さくして横1行に収めます
       ②「○×で1問ずつ確認。すきま時間の復習に最適。」も
          2行になって「復習」の途中で改行されていたので、
          文字を小さくして横1行に収めます
       ※PCの表示は変わりません
     ══════════════════════════════════════════════════════════ */

  /* ── ① 難易度バーを横1行に ──────────────────────────────── */
  #ichimoni-screen .pq-diff-bar,
  #world-map-screen .pq-diff-bar {
    flex-wrap: nowrap !important;
    gap: 4px !important;
    padding: 6px 8px !important;
    /* ★2026-09-18 ブラウザの «文字を大きくする» 設定（200%など）を
       お使いの方は、難易度のボタンが画面の外に出て 押せなくなっていました
       （実測で確認）。入りきらないときだけ 横になぞって動かせるようにします。
       ふだんの文字の大きさでは 見た目は 1ミリも変わりません。
       （中央ぞろえは «はしが切れて戻せない» ので、余白で中央にします） */
    overflow-x: auto !important;
    justify-content: flex-start !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  #ichimoni-screen .pq-diff-bar::-webkit-scrollbar,
  #world-map-screen .pq-diff-bar::-webkit-scrollbar { display: none; }
  #ichimoni-screen .pq-diff-bar > *:first-child,
  #world-map-screen .pq-diff-bar > *:first-child { margin-left: auto !important; }
  #ichimoni-screen .pq-diff-bar > *:last-child,
  #world-map-screen .pq-diff-bar > *:last-child { margin-right: auto !important; }
  #ichimoni-screen .pq-diff-label,
  #world-map-screen .pq-diff-label {
    font-size: 0.9rem !important;
    margin-right: 2px !important;
    white-space: nowrap !important;
  }
  /* ボタンは高さ32pxを保ったまま、横幅だけ詰めます */
  #ichimoni-screen .pq-diff-btn,
  #world-map-screen .pq-diff-btn {
    font-size: 0.95rem !important;
    padding: 7px 9px !important;
    white-space: nowrap !important;
  }

  /* ── ② 説明文（○×で1問ずつ確認…）を横1行に ─────────────── */
  .mode-desc-line[data-i18n="md-ichimoni"] {
    font-size: 1rem !important;
    padding: 9px 10px 6px !important;
    max-width: 100% !important;
    line-height: 1.75 !important;
  }

  /* ── さらに細い端末（360px以下）用の微調整 ───────────────── */
  @media (max-width: 360px) {
    #ichimoni-screen .pq-diff-bar,
    #world-map-screen .pq-diff-bar { gap: 3px !important; padding: 6px 6px !important; }
    #ichimoni-screen .pq-diff-label,
    #world-map-screen .pq-diff-label { font-size: 0.8rem !important; margin-right: 1px !important; }
    #ichimoni-screen .pq-diff-btn,
    #world-map-screen .pq-diff-btn { font-size: 0.85rem !important; padding: 8px 7px !important; }
  }

  /* ══════════════════════════════════════════════════════════
     1問1答：年度ボタンの並びを整える（スマホのみ）
       ①「年度で絞り込み」の見出しを中央に
       ② 年度ボタンを3列そろえて画面いっぱいに配置
          （🔒が付く／付かないで幅が変わらないよう統一）
       ③ 最後の行（第26回・第25回）は中央寄せ
       ④「⚡1問1答」の下の余白を少しつめる（35px→12px）
       ※PCの表示は変わりません
     ══════════════════════════════════════════════════════════ */

  /* ── ①「年度で絞り込み」の見出しを中央に ─────────────────── */
  #ichimoni-select-panel > .ichimoni-section:first-child > .ichimoni-section-title {
    text-align: center !important;
  }

  /* ── ②③ 年度ボタンを3列そろえ・余った行は中央寄せ ────────
        （「出題数」の10/20/30/50/100は対象外です） */
  #ichimoni-select-panel .ichimoni-section > .ichimoni-chip-row {
    justify-content: center !important;
  }
  #ichimoni-select-panel .ichimoni-section > .ichimoni-chip-row > .ichimoni-chip {
    box-sizing: border-box !important;
    flex: 0 0 calc((100% - 16px) / 3) !important;
    max-width: calc((100% - 16px) / 3) !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
    text-align: center !important;
  }

  /* ── ④「⚡1問1答」の下の余白を少しつめる ─────────────────── */
  #ichimoni-screen .ichimoni-header {
    padding-bottom: 4px !important;
    margin-bottom: 8px !important;
  }

  /* ══════════════════════════════════════════════════════════
     1問1答：年度より下のブロックも中央にそろえる（スマホのみ）
       ①「🏅パート合格モード」「科目で絞り込み」の見出しを中央に
       ②「パートを選ぶと…」の説明文も中央に
       ③「出題数：10 20 30 50 100 すべて」と
          「🔀 シャッフル」ボタンを中央に
       ※PCの表示は変わりません
     ══════════════════════════════════════════════════════════ */

  /* ── ① 見出しをすべて中央に ─────────────────────────────── */
  #ichimoni-select-panel .ichimoni-section-title {
    text-align: center !important;
  }
  /* パート見出しは display:flex なので justify-content も必要です */
  #ichimoni-select-panel .ichimoni-part-section .ichimoni-section-title {
    justify-content: center !important;
  }

  /* ── ② パートの説明文を中央に ───────────────────────────── */
  #ichimoni-select-panel .ichimoni-part-hint {
    text-align: center !important;
  }

  /* ── ③「出題数」と「シャッフル」を中央に ─────────────────── */
  #ichimoni-select-panel .ichimoni-options-row {
    justify-content: center !important;
  }
  #ichimoni-select-panel .ichimoni-option-group {
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
  /* 「出題数：」は1行目に、数字のボタンは2行目に、どちらも中央に */
  #ichimoni-select-panel .ichimoni-option-label {
    width: 100% !important;
    text-align: center !important;
    margin-bottom: 4px !important;
  }
  #ichimoni-select-panel .ichimoni-option-group .ichimoni-chip-row {
    width: 100% !important;
    justify-content: center !important;
    gap: 6px !important;
  }
  #ichimoni-select-panel .ichimoni-option-group .ichimoni-chip-row > .ichimoni-chip {
    padding-left: 11px !important;
    padding-right: 11px !important;
  }

  /* ══════════════════════════════════════════════════════════
     クイズ画面：上のバーが右にはみ出していたのを直す（スマホのみ）
       原因は「⚔️ RPGモード: ○○」のラベルが1行固定で長いため、
       右の「❓ガイド」「📋パート変更」が画面の外へ押し出されて
       いました。
       ①ラベルは1行目に折り返しありで表示（見切れなくなります）
       ②2つのボタンは2行目に中央ぞろえで表示
       ③ボタンの高さを31px→34pxにして押しやすくします
       ※PCの表示は変わりません
     ══════════════════════════════════════════════════════════ */

  /* ⓪ クイズ画面の上部がヘッダー（高さ84px）の下に隠れていたので、
        上に余白を足して見えるようにします */
  /* ※ #quiz-screen の padding-top はJS側が直接指定していてCSSでは
        上書きできないため、内側の枠に上マージンを足してずらします。
        RPG／ノーマルどちらのモードでも上の余白は20pxなので、
        72pxを足して合計92px（ヘッダー84px＋8px）にそろえます。 */
  #quiz-screen .quiz-container {
    margin-top: 72px !important;
  }

  #quiz-header-info {
    flex-wrap: wrap !important;
    justify-content: center !important;
    row-gap: 6px !important;
  }
  /* ① モード名＋科目名は横幅いっぱいに使って折り返す */
  #quiz-header-info #current-mode-label {
    flex: 1 1 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
    font-size: 0.95rem !important;
    line-height: 1.35 !important;
    text-align: center !important;
  }
  /* ② ガイド／パート変更のまとまりを次の行の中央へ */
  #quiz-header-info > div:not(#current-mode-label) {
    flex: 0 0 auto !important;
    justify-content: center !important;
    max-width: 100% !important;
    /* ★2026-09-21 文字を大きくしている人（スマホの設定で200%）だと、
       2つのボタンが横に入りきらず 画面の左右から はみ出していました
       （実測：インドネシア語で左に9px・右に9px、幅360pxでは左に24px）。
       入りきらないときだけ 2段に折り返します。
       ふつうの文字の大きさでは 1段のままで、見た目は変わりません。 */
    flex-wrap: wrap !important;
    row-gap: 6px !important;
  }
  /* ③ ボタンを少し高くして押しやすく */
  #quiz-header-info .quiz-nav-btn {
    padding: 7px 12px 9px !important;
  }

  /* ══════════════════════════════════════════════════════════
     単語帳画面：言語切り替え（JP ID VN NP PH MM）が
     左右にはみ出していたのを直す（スマホのみ）
       原因は6個のボタンを1行に並べる設定だったためで、
       合計531px＝画面(375px)より広く、左のJPと右のMMが
       画面の外に出ていました。
       3個ずつ2段に折り返して、中央にそろえます。
     ※PCの表示は変わりません
     ══════════════════════════════════════════════════════════ */
  #word-bank-screen .lang-selector {
    flex-wrap: wrap !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    gap: 6px !important;
    padding: 5px 8px !important;
  }
  /* 1段に3個ずつ、幅をそろえて並べます */
  #word-bank-screen .lang-selector .lang-btn {
    flex: 0 0 calc((100% - 12px) / 3) !important;
    min-width: 0 !important;
    justify-content: center !important;
    padding: 7px 4px !important;
  }


  /* 過去問：背景の魔法陣が大きすぎるのを小さくする（スマホのみ） */
  #past-exam-screen .past-exam-bg-circle {
    width: 300px !important;
    height: 300px !important;
    top: 96px !important;
  }


  /* ══════════════════════════════════════════════════════════
     過去問：説明文（第25〜38回を年度・科目別に5択で演習。）を
     横1行におさめる（スマホのみ）
       もとは文字が大きく、幅も画面の92%までに制限されていたため
       2行に折り返していました。文字を少し小さくし、幅の制限を
       外して1行にそろえます。ふりがなは残ります。
     ※PCの表示は変わりません
     ══════════════════════════════════════════════════════════ */
  .mode-desc-line[data-i18n="md-pastexam"] {
    font-size: 1rem !important;
    padding: 9px 10px 6px !important;
    max-width: 100% !important;
    line-height: 1.8 !important;
  }

  /* 「年度別過去問」見出しと、その下の説明文（第25〜38回を…）の
     行間を詰める（スマホのみ）。
     ※PCの表示は変わりません（この@media の中だけの指定です） */
  #past-exam-screen .past-exam-header {
    margin-bottom: 10px !important;
  }
  #past-exam-screen .past-exam-header + div {
    margin-bottom: 4px !important;
  }


  /* ══════════════════════════════════════════════════════════
     m15　RPG：ボスの大きさをスマホの縦画面に合わせる（スマホのみ）
       ボスの大きさは「画面の高さの142%」という指定でした。
       パソコンの横長画面ではちょうど画面いっぱいの迫力になり
       ますが、スマホの縦長画面では横幅440pxに対して1358pxと
       画面幅の約3倍になり、顔と胸のあたりしか見えていません
       でした。
       そこで基準を「画面の高さ」から「画面の幅」に変えます。
       登場・攻撃・待機・撃破の4場面の比率
       （142 : 176 : 138 : 136）はそのまま保っているので、
       演出の関係はこれまでどおりです。
       動画（video）と画像（img）の両方に同じ指定をしているので、
       iPhoneでもAndroidでも同じ大きさになります。
     ※PCの表示は変わりません（この@media の中だけの指定です）
     ══════════════════════════════════════════════════════════ */
  /* ボス登場（もとは 142vh → m19で攻撃と同じ 176vh 相当へ） */
  .rpg-boss-entrance video.rpg-boss-big,
  .rpg-boss-entrance img.rpg-boss-big {
    height: 161vw !important;
    width: 161vw !important;
    max-width: none !important;
    max-height: none !important;
  }
  /* ボスの攻撃（もとは 176vh） */
  video.rpg-react-enemy.bossatk,
  img.rpg-react-enemy.bossatk {
    height: 161vw !important;
    width: 161vw !important;
    max-width: none !important;
    max-height: none !important;
  }
  /* ボスの待機・被弾（もとは 138vh → m19で攻撃と同じ 176vh 相当へ） */
  .rpg-solo video.rpg-react-enemy.bossvid,
  .rpg-solo img.rpg-react-enemy.bossvid {
    height: 161vw !important;
    width: 161vw !important;
    max-width: none !important;
    max-height: none !important;
  }
  /* ボス撃破（もとは 136vh） */
  video.rpg-boss-defeat-vid,
  img.rpg-boss-defeat-vid {
    height: 125vw !important;
    width: 125vw !important;
    max-width: none !important;
    max-height: none !important;
  }


  /* ══════════════════════════════════════════════════════════
     m16　RPG：そら・エマの攻撃モーションと着弾エフェクトを
           スマホの縦画面に合わせて大きくする（スマホのみ）
       絵そのものは正方形（448×448）で、縦は余裕があるのに
       横幅の上限（98% / 80%）で頭打ちになっていたため、
       440pxの画面では 431px / 352px までしか出ていませんでした。
       m15でボスを正しい大きさ（130vw＝572px相当）に直したので、
       そら・エマだけが小さく見える状態になっていました。
       そこで横幅の上限だけを引き上げます。
         そら・エマ  98vw → 136vw（431px → 598px）
         着弾エフェクト 80vw → 116vw（352px → 510px）
       高さの指定（40rem や skill ごとの倍率）はさわっていない
       ので、演出の長さやタイミングは一切変わりません。
       画面幅からはみ出した分は左右で切れますが、body が
       overflow-x:hidden なので横スクロールは発生しません。
       動画（video）と画像（img）の両方に指定しているため、
       iPhoneの画像モードでも同じ大きさになります。
     ※PCの表示は変わりません（この@media の中だけの指定です）
     ══════════════════════════════════════════════════════════ */
  .rpg-solo video.rpg-hero,
  .rpg-solo img.rpg-hero {
    max-width: 136vw !important;
  }
  video.rpg-elemfx,
  img.rpg-elemfx {
    max-width: 116vw !important;
  }


  /* ═════════════════════════════
     m17　スマホ：問題文の右端が切れるのを防ぐ
       問題文は「🔊ボタン」と「本文」を横並び
       （display:flex）にした箱の中に入っています。
       横並びの部品は、既定では「中身がこれ以上
       縮められない幅」より小さくなりません。
       問題文のふりがな（ruby）には white-space:nowrap が
       付いていて途中で切れない塊になっており、
       iPhone の Safari は隣り合う塊どうしの間でも
       改行しません。そのため「これ以上縮められない
       幅」が 510px と計算され、入れ物（422px）から
       88px はみ出して右端が切れていました。
       （Chrome は塊の間で改行できるためこの症状は出ません）
       そこで本文に「入れ物に合わせて縮んでよい」と
       伝えます。文字の大きさ・行間・ふりがなの見た目は
       変わりません。
     ※PCの表示は変わりません（この@media の中だけの指定です）
     ═════════════════════════════ */
  #question-text .q-content,
  .question-text .q-content,
  .q-content {
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
  }


  /* ═════════════════════════════
     m18　スマホ：問題文まわりを広く・すっきりさせる
       1) 左右の余白を詰める（外枠20px→8px、カード10px→8px、
          本文の内側余白を0に）。1行に使える幅が
          320px → 390px（約22%増）になります。
       2) 🔊読み上げボタンを本文の流れから外し、
          カードの左下に置きます。本文が1行目から
          左端いっぱいを使えるようになります。
          ボタンの大きさ（34px）は変えていません。
       3) 行の高さ 2.2 → 1.95、ふりがな 0.6em → 0.55em。
          ふりがなの行が空きすぎている感じを詰めます。
          本文の文字の大きさは変えていません。
       4) ふりがな付きの語（ruby）の中でも改行できる
          ようにします。「通所リハビリテーション」は
          198px のひとかたまりで、これを割れないと
          行末に大きな余りが出たまま次の行へ送られて
          いました。実測で行末の余りが平均90px→62px。
          そのかわり、語が行をまたいで分かれることが
          あります（ふりがなは付いたまま分割されます）。
     ※PCの表示は変わりません（この@media の中だけの指定です）
     ═════════════════════════════ */
  .quiz-container {
    padding-left: 8px !important;
    padding-right: 8px !important;
    margin-left: 4px !important;
    margin-right: 4px !important;
  }
  #question-card,
  .card.question-card,
  #breakdown-area .card.option-card {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  #question-text > div { display: block !important; }
  #question-card {
    position: relative !important;
    padding-bottom: 44px !important;
  }
  #question-text .audio-btn {
    position: absolute !important;
    left: 10px !important;
    bottom: 8px !important;
    width: 34px !important;
    height: 34px !important;
    margin: 0 !important;
    z-index: 5 !important;
  }
  #question-text .q-content,
  #breakdown-area .option-text {
    padding-left: 0 !important;
    padding-right: 0 !important;
    line-height: 1.95 !important;
  }
  #question-text .q-content rt,
  #breakdown-area .option-text rt {
    font-size: 0.55em !important;
  }
  #question-text .q-content ruby {
    white-space: normal !important;
  }


  /* ══════════════════════════════════════════════════════════
     m19　① ボス登場の「WARNING」が2行になるのを防ぐ
           ② 画面下部の3つのボタン（📣 ・ 言語バー・☰）を一列に揃える
       ① 見出しの箱は left:50% の位置だけを決めていて幅を持たないため、
          使える幅が画面の半分（390pxなら195px）しかなく、
          「⚠ WARNING ⚠」（約210px）が入りきらず2行に折れていました。
          折り返さない指定を足すだけです（文字の大きさは変えていません）。
       ② これまでの下端からの高さは
            📣報告 = 84px ・ 言語バー = 16px ・ ☰ = 6px
          とバラバラで、階段状に並んでいました。
          3つの中心線がそろうように揃えます（言語バーは52px、他は42pxなので
          下端からの値は 16px と 21px になります）。
          📣 は左端14px→ 6px へ移し、右の☰（6px）と左右対称にします。
          言語バーは左右の丸ボタンと重ならない幅に収めます。
     ※PCの表示は変わりません（この@media の中だけの指定です）
     ══════════════════════════════════════════════════════════ */
  .rpg-boss-warn {
    white-space: nowrap !important;
  }

  #feedback-fab {
    left: 6px !important;
    bottom: calc(21px + env(safe-area-inset-bottom, 0px)) !important;
  }
  #title-menu-trigger.title-menu-trigger {
    bottom: calc(21px + env(safe-area-inset-bottom, 0px)) !important;
  }
  #lang-toggle.lang-toggle {
    max-width: calc(100vw - 112px) !important;
  }
  @media (max-width: 360px) {
    #lang-toggle.lang-toggle {
      max-width: calc(100vw - 104px) !important;
    }
  }

  /* ── ③「📋 5択を見る」と「🚩 この問題を報告」を横1行に ──────
        m18 で足した #question-text > div { display:block !important } が
        横並びを打ち消してしまうため、この1行だけ例外にします。
        （5択の一覧パネルは今までどおり下の行に全幅で開きます） */
  #question-text > div.pq-oneline {
    display: flex !important;
  }
  /* 320〜360px の狭い端末でも1行に収まるよう、文字と左右の余白だけ少し縮める
     （2つを同じ幅・同じ高さにそろえる指定は js/report_button.js 側にあります） */
  @media (max-width: 360px) {
    #question-text > div.pq-oneline > button,
    #question-text > div.pq-oneline .pq-report-btn {
      padding: 0 6px !important;
      font-size: 0.76rem !important;
    }
  }


  /* ══════════════════════════════════════════════════════════
     m20　戦闘のメッセージ枠が📣と☰に重なるのを直す（スマホのみ）
       メッセージ枠は画面下から 3vh（390px幅の端末で25px）の位置に
       出ていました。m19で📣と☰を下から21px・高さ42pxの位置に
       そろえたため、メッセージ枠（高さ52px〜）と重なっていました。
       枠を、下の3つのボタンの上端（下から68px）より上へ逃がします。
       文字の大きさ・枠の幅・表示時間は変えていません。
     ※PCの表示は変わりません（この@media の中だけの指定です）
     ══════════════════════════════════════════════════════════ */
  .rpg-msgwin {
    bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
  }


  /* ══════════════════════════════════════════════════════════
     m21　「5択を見る」の行が🔊ボタンに重ならないようにする（スマホのみ）
       🔊は m18 でカードの左下（下から8px・34px角）へ絶対配置しました。
       m19で2つのボタンを横1行にしたことで行が問題文の幅いっぱいに
       広がり、行の左端（下から20px）が🔊と重なっていました。
       行の下に余白を足して、🔊の帯より上へ逃がします。
       ボタンの大きさは変えていません（横幅を削ると日本語が2行になるため、
       縦に30px空けるほうを選びました。m19で2行→1行にして32px縮めた分と
       ほぼ同じなので、全体の高さはこれまでと変わりません）。
     ※PCの表示は変わりません（この@media の中だけの指定です）
     ══════════════════════════════════════════════════════════ */
  /* 🔊がこの行に入っているとき（通常）は余白は不要。
     万一🔊を行へ移せなかったときだけ、重ならないよう下に余白を確保する。 */
  #question-text > div.pq-oneline:not(.has-audio) {
    padding-bottom: 34px !important;
  }
  /* ══════════════════════════════════════════════════════════
     m24　問題カード上部：「第26回 (2014年)｜科目名」が
           1文字だけ折り返すのを直す（スマホのみ）
       これまでは「気になる (Mark)」と横に並べていたため、
       タグに使える幅が218pxしかなく、いちばん短い科目名でも
       224px必要で必ずあふれていました。
       （最長の「人間関係とコミュニケーション」は384px必要です）
       タグを1行まるごと使う形にして、「気になる」は次の行の右へ。
       文字を0.72remにすると、12科目すべてが325px以内に収まり
       どの科目でも1行で表示できます。段の高さは変わりません。
     ※PCの表示は変わりません（この@media の中だけの指定です）
     ══════════════════════════════════════════════════════════ */
  .question-meta {
    flex-wrap: wrap !important;
    row-gap: 4px !important;
  }
  .question-meta .subject-tag {
    flex: 1 1 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 0.72rem !important;
    padding: 4px 12px !important;
    text-align: center !important;
  }
  .question-meta .unsure-wrap {
    margin-left: auto !important;
    font-size: 0.72rem !important;
    padding: 3px 9px !important;
  }
  .question-meta .unsure-wrap input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
  }
  /* 320〜360px の端末では、いちばん長い「人間関係とコミュニケーション」も
     入りきるようにもう少しだけ小さく */
  @media (max-width: 360px) {
    .question-meta .subject-tag {
      font-size: 0.65rem !important;
      padding: 4px 8px !important;
    }
  }

  /* ══════════════════════════════════════════════════════════
     m25　問題カード上部を2段にまとめる（スマホのみ）
       1段目：第○回 (年) | 科目名
       2段目：🔊 ／ 🚩この問題を報告 ／ 📋5択を見る ／ ☑気になる
       ボタンの行は js/report_button.js が .question-meta の中へ移します
       （#question-text は問題ごとに作り直されるため、
         作り直されない .question-meta 側に置いています）。
       390pxの端末での実測：🔊34px ／ 報告・5択 各106px ／ 気になる70px。
       文字は画面幅に合わせて自動で縮みます（幅の2.5%・上限0.78rem）。
     ※PCの表示は変わりません（この@media の中だけの指定です）
     ══════════════════════════════════════════════════════════ */
  .question-meta {
    align-items: center !important;
    column-gap: 4px !important;
  }
  /* ボタンの行は問題文のすぐ下（js/report_button.js が移動） */
  #question-card > .pq-oneline,
  #ichimoni-q-card > .pq-oneline {
    margin: 10px 0 2px !important;
    order: 0 !important;
  }
  #question-card > .pq-oneline,
  #ichimoni-q-card > .pq-oneline {
    order: 1 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    gap: 3px !important;
    margin: 0 !important;
    padding: 0 !important;
    justify-content: flex-start !important;
  }
  /* 「気になる」もほぼ透明な下地で読みにくかったので、
     🔊とそろえて金色の下地＋濃い枠＋濃い文字にする */
  #question-card > .pq-oneline .unsure-wrap,
  #ichimoni-q-card > .pq-oneline .unsure-wrap {
    order: 2 !important;
    flex: 0 0 auto !important;
    margin-left: 0 !important;
    font-size: 0.64rem !important;
    font-weight: 800 !important;
    padding: 4px 5px !important;
    gap: 3px !important;
    white-space: nowrap !important;
    height: 34px !important;
    box-sizing: border-box !important;
    background: linear-gradient(180deg, #fff6d8, #f2c14a) !important;
    border: 2px solid #8b5e12 !important;
    border-radius: 17px !important;
    color: #4a2f00 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
  }
  #question-card > .pq-oneline .unsure-wrap input[type="checkbox"],
  #ichimoni-q-card > .pq-oneline .unsure-wrap input[type="checkbox"] {
    width: 15px !important;
    height: 15px !important;
    accent-color: #b8340f !important;
  }
  /* 行に入った🔊は絶対配置（m18）をやめて普通の並びに戻す。
     白地に薄い枠だと問題カード（同じく明るい色）に埋もれるので、
     金色の下地＋濃い枠にしてボタンだとすぐ分かるようにする。 */
  #question-card > .pq-oneline .audio-btn,
  #ichimoni-q-card > .pq-oneline .audio-btn {
    position: static !important;
    left: auto !important;
    bottom: auto !important;
    flex: 0 0 auto !important;
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    margin: 0 !important;
    z-index: auto !important;
    background: linear-gradient(180deg, #fff6d8, #f2c14a) !important;
    border: 2px solid #8b5e12 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
    font-size: 1.05rem !important;
  }
  /* ボタンの間にすき間を残さない。
     ボタン同士の間は4pxに固定し、余った幅は2つのボタンが吸収して広がります
     （端末やフォントによって文字の幅が変わっても、すき間が空かない形）。 */
  #question-card > .pq-oneline > button,
  #ichimoni-q-card > .pq-oneline > button,
  #question-card > .pq-oneline .pq-report-wrap,
  #ichimoni-q-card > .pq-oneline .pq-report-wrap {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
  }
  #question-card > .pq-oneline > button,
  #ichimoni-q-card > .pq-oneline > button,
  #question-card > .pq-oneline .pq-report-btn,
  #ichimoni-q-card > .pq-oneline .pq-report-btn {
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 6px !important;
    /* 余った幅はボタンの間隔ではなく文字の大きさに回す。
       390pxの端末で 11.5px（以前は10.0px）まで大きくできます。 */
    font-size: clamp(0.6rem, 2.85vw, 0.85rem) !important;
    border-radius: 17px !important;
    white-space: nowrap !important;
    padding: 0 8px !important;
  }
  #question-card > .pq-oneline .unsure-wrap,
  #ichimoni-q-card > .pq-oneline .unsure-wrap {
    order: 4 !important;
  }
  /* 5択の一覧パネルは行の下に全幅で開く */
  #question-card > .pq-oneline .rpg-five-panel,
  #question-card > .pq-oneline .pq-five-panel,
  #ichimoni-q-card > .pq-oneline .rpg-five-panel,
  #ichimoni-q-card > .pq-oneline .pq-five-panel {
    margin-top: 6px !important;
  }
  /* 385px以下の端末では、左右の余白をもう少しだけ詰めて4つを1行に収める */
  @media (max-width: 385px) {
    #question-card > .pq-oneline > button,
  #ichimoni-q-card > .pq-oneline > button,
    #question-card > .pq-oneline .pq-report-btn,
  #ichimoni-q-card > .pq-oneline .pq-report-btn {
      padding: 0 4px !important;
    }
    #question-card > .pq-oneline .unsure-wrap,
    #ichimoni-q-card > .pq-oneline .unsure-wrap {
      padding: 4px 5px !important;
    }
  }

  /* ══════════════════════════════════════════════════════════
     m30　行末の空きをなくす（スマホのみ）
       「…市町村に」で行が終わり、次の「通報する。」が入りきらずに
       右側が空いていました。ふりがな付きの語は途中で切れないため、
       入りきらないと丸ごと次の行へ送られ、その分だけ右が空きます。
       両端そろえ（justify）にして、余った分を字間に配ります。
       段落の最後の行はこれまでどおり左そろえのままです。
       文字の大きさ・行間・ふりがなは変えていません。
     ※PCの表示は変わりません（この@media の中だけの指定です）
     ══════════════════════════════════════════════════════════ */
  #question-text .q-content,
  #breakdown-area .option-text {
    text-align: justify !important;
  }

  /* ══════════════════════════════════════════════════════════
     m32　一問一答：○×の文を上詰めにし、キャラクターを右へ寄せる
       これまではキャラクターの置き場所（.option-header）が
       高さ50pxの帯として文の上に積まれていたため、
       文がカードの上から68px下がって始まっていました。
       帯を右に回り込ませる形（float）にして、文を最上部から
       始め、行はキャラクターの左と下に流れるようにします。
       キャラクター自身は右へ寄せ、はみ出しは切りません。
     ※PCの表示は変わりません（この@media の中だけの指定です）
     ══════════════════════════════════════════════════════════ */
  #ichimoni-option-card {
    position: relative !important;
  }
  #ichimoni-option-card .option-header {
    display: block !important;
    float: right !important;
    width: auto !important;
    /* キャラクターの絵(112px)より少し高くして、○×ボタンが確実に下へ回るようにする */
    height: 122px !important;
    position: static !important;   /* 吹き出しの基準をカード側にするため */
    margin: 0 -8px 0 8px !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  #ichimoni-option-card .option-header .mascot-container {
    margin: 0 !important;
  }
  /* キャラクターは少し小さくして、○×ボタンに被らないようにする */
  #ichimoni-option-card .option-header .mascot-icon {
    width: 112px !important;
    height: 112px !important;
    margin: 0 !important;
  }
  /* ○×ボタンはキャラクターの下から始める（後ろに隠れないように） */
  #ichimoni-option-card .decision-buttons {
    clear: both !important;
  }
  /* キャラクターのひとことは、画面の外に出ないようカードの中に収める */
  #ichimoni-option-card #ichimoni-comment-slot {
    right: 124px !important;
    top: 6px !important;
    left: 8px !important;
    max-width: none !important;
  }
  /* カード左上の⚙飾りと1行目が重なるので、1行目だけ字下げする
     （縦の余白は増やさずに逃がす） */
  #ichimoni-option-card .option-text {
    margin-top: 0 !important;
    padding-top: 0 !important;
    text-indent: 26px !important;
  }

  /* ══════════════════════════════════════════════════════════
     m33　画面いちばん下の余白を詰める（スマホのみ）
       一問一答は下に130px、クイズ/RPGは100pxの余白があり、
       さらに body に50pxあるため、最後のボタンと画面下の
       📣・言語バー・☰ の間が180px／150pxも空いていました。
       下の固定ボタンは高さ42px＋下から21pxなので、
       70pxほど空いていれば重なりません。
     ※PCの表示は変わりません（この@media の中だけの指定です）
     ══════════════════════════════════════════════════════════ */
  /* 画面下の固定バー（言語バーは下から16px・高さ52px＝下端から68px）に
     最後のボタンが隠れないよう、余白を空ける。
     ※ #ichimoni-screen 自体がスクロールする箱なので、
       body 側の余白はここには効きません。
     ※ 86pxでは重なり、160pxでは広すぎたため、115pxに調整。 */
  #ichimoni-screen {
    padding-bottom: calc(115px + env(safe-area-inset-bottom, 0px)) !important;
  }
  /* #quiz-screen は index.html の <style> でも !important 付きで
     100px が指定されているため、body を付けて優先度を上げる */
  body #quiz-screen {
    padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* ── ふりがなを漢字に近づける ────────────────────────────
     position:relative + top は Chrome では効きますが、
     iOS Safari はふりがな(rt)の相対配置を無視します。
     Safari で効くのは rt 自身の行の高さです。
     本文の行間 1.95 を rt がそのまま受け継いでいて、
     その分だけ漢字から離れていました。rt だけ行の高さを 1 に戻します。
     （本文の行間・ふりがなの大きさは変えていません） */
  /* ★2026-08-16 修正：top を +0.08em → -0.04em に。
       ここだけ «下へ押す» 値になっていて、さらに js/report_button.js が
       margin-bottom:-0.4em を無条件で足していたため、
       ふりがなが漢字に 4.77px も食い込んでいました
       （1問1答は -0.59px。実測で確認）。
       アプリ共通の値（手引きで決めた値）にそろえます。 */
  #question-text .q-content rt,
  #breakdown-area .option-text rt {
    font-size: 0.61em !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    position: relative !important;
    top: -0.04em !important;
    margin-bottom: 0 !important;
  }
  @supports (-webkit-touch-callout: none) {
    /* iPhone の Safari は top が効かないので margin-bottom で漢字に寄せる */
    #question-text .q-content rt,
    #breakdown-area .option-text rt {
      top: 0 !important;
      margin-bottom: -0.55em !important;
    }
  }

  /* 行の中に入った🔊は、絶対配置（m18）をやめて普通の並びに戻す。
     m18 の指定は #question-text .audio-btn（IDつき）なので、ここも同じ強さで書く。 */
  #question-text > div.pq-oneline .audio-btn {
    position: static !important;
    left: auto !important;
    bottom: auto !important;
    flex: 0 0 auto !important;
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    margin: 0 !important;
    z-index: auto !important;
  }

  /* ══════════════════════════════════════════════════════════
     m35　タイトル画面（スマホ）の並べ替え — 2026-07-31
       ご要望の並びに変更します。
         ① メダル3つを画面の横幅いっぱいまで大きく
         ② 「プランを選んで冒険を始めよう」を一番下へ
         ③ ロゴを左上へ
         ④ その下に「© 2026 PassQuest Team」
         ⑤ その下に「合格可能性」パネル
         ⑥ 言語切替ボタンとBGMボタンを右へ
       HTMLの中身（並び順・ボタンの動作）は一切さわらず、
       位置と大きさの指定だけを変えています。
     ※PCの表示は変わりません（この@media の中だけの指定です）
     ══════════════════════════════════════════════════════════ */

  /* ⑥ 言語切替・BGM を右へ（ログインの左隣に並べる） */
  #title-screen #title-top-nav {
    top: 10px !important;
    justify-content: flex-end !important;
    gap: 6px !important;
  }

  /* ③ ロゴを左上へ
       HTML側に bottom:60px !important が直接書かれていますが、
       top は書かれていないので、top と height を指定すると
       CSSの規則により bottom が無視されます。
       画面の高さに左右されない、確実な置きかたです。 */
  #title-screen .logo-section {
    top: 8px !important;
    height: 250px !important;
  }
  #title-screen .logo-section .logo-frame {
    transform: translate(-14px, -45px) scale(0.7) !important;
    transform-origin: left top !important;
  }

  /* ④ コピーライトをロゴの真下へ（同じく top＋height で固定） */
  #title-screen .copyright {
    top: 127px !important;
    height: 22px !important;
    transform: translate(-18px, 0) scale(0.62) !important;
    transform-origin: left top !important;
    pointer-events: none !important;
  }

  /* ⑤ 合格可能性パネルをコピーライトの下へ */
  #pass-meter-home.pm-home {
    top: 153px !important;
    left: 8px !important;
  }

  /* ① メダル台座：横幅いっぱいに
       もとは全体を transform: scale(0.9) で縮めていたので、
       いくら中身を大きくしても画面幅の9割までしか広がりません
       でした。スマホのときだけ縮小をやめて（scale(1)）、
       1つあたりの幅を「（画面幅 − 左右4px×2 − 隙間4px×2）÷ 3」
       として、画面の横幅をちょうど使い切ります。
       固定pxではなく画面幅から計算しているので、iPhone SE の
       375px でも Pro Max の 440px でも同じ見え方になります。
       メダル画像は台座の93%、まわりの点線リングは99%と、
       どちらも台座の枠内に収めているので隣どうしが重なりません。 */
  #title-screen .mode-pedestals {
    transform: scale(1) !important;
    gap: 4px !important;
    bottom: 76px !important;
    padding: 0 4px !important;
  }
  #title-screen .mode-pedestal {
    width: calc((100vw - 16px) / 3) !important;
    height: calc((100vw - 16px) / 3) !important;
  }
  #title-screen .medal-bg {
    width: 93% !important;
    height: 93% !important;
  }
  #title-screen .medal-stars {
    width: 99% !important;
    height: 99% !important;
    margin-top: -49.5% !important;
    margin-left: -49.5% !important;
  }

  /* ② 「プランを選んで冒険を始めよう」を一番下へ
       HTML側に top:12px !important が直接書かれているため、
       transform で下までずらしています。
       dvh に対応していない端末では 1行目（vh）が使われます。 */
  #title-screen #title-plan-hint {
    transform: translate(-50%, calc(100vh - 63px)) !important;
    transform: translate(-50%, calc(100dvh - 63px)) !important;
  }


  /* ══════════════════════════════════════════════════════════
     m36　タイトル画面：下の1行をそろえる／ロゴと著作表示の位置 — 2026-08-01
       ① 「プランを選んで冒険を始めよう」「BGM」「言語」「☰」を
          同じ高さ(42px)・同じ段（画面下から21px）に並べる。
          左から プラン ／ BGM ／ 言語 ／ ☰ の順。
       ② BGMと言語は上のナビから下の段へ移動。上に残るのはログインだけ。
       ③ ロゴを画面のいちばん上（上から4px）・左端は合格可能性パネルと
          同じ8pxへ。
       ④ 「© 2026 PassQuest Team」をロゴの真下へ。左端と横幅をロゴに
          ぴったり合わせる（重なりも解消）。
       ⑤ ロゴが下がった分、合格可能性パネルも下へずらす。
       ※HTMLには手を入れていません。位置と大きさの指定だけです。
       ※#title-plan-hint は要素に直接 top/left が !important 付きで
         書かれていて上書きできないため、transform だけで動かしています。
     ══════════════════════════════════════════════════════════ */

  /* ③ ロゴ：絵の左上を画面の左上ぎりぎり(8px, 2px)へ。
        絵の見た目の横幅を144px＝合格可能性パネルと同じにする。
        （ロゴ画像は640×640のうち絵があるのは横31〜610・縦80〜528なので、
          枠の大きさではなく「絵」の位置で計算しています） */
  #title-screen .logo-section .logo-frame {
    transform: translate(-25.5px, -80.1px) scale(0.810) !important;
    transform-origin: left top !important;
  }

  /* ④ 著作表示：ロゴの絵の真下、左端も横幅もぴったり同じ144pxに */
  #title-screen .copyright {
    top: 146px !important;
    height: 24px !important;
    transform: translate(-20px, 0) scale(0.733) !important;
    transform-origin: left top !important;
    pointer-events: none !important;
  }

  /* ⑤ 合格可能性パネルは著作表示のすぐ下へ（横幅144pxは元のまま） */
  #pass-meter-home.pm-home {
    top: 170px !important;
    left: 8px !important;
    width: 176px !important;
  }

  /* ══════════════════════════════════════════════════════════
     m37　合格可能性パネルを小さく・軽く（スマホのみ）— 2026-08-01
       これまで144×210pxありましたが、中身は
       「見出し26px＋円116px＋説明37px」で31pxが空白、
       しかも測定前は直径110pxの円の中に「測定中」の13pxの文字だけ、
       という状態でした。画面でいちばん重い（濃い）板が
       いちばん目立つ左上にあり、ロゴと視線を奪い合っていました。

       ① 円を左・文字を右の2列にして、縦を210px→約86pxへ。
          中身は減らしていません（見出し・円・説明はそのまま）。
       ② 濃い板をやめて半透明にし、背景の絵が透けるようにしました。
     ※PCの表示は変わりません（この@media の中だけの指定です）
     ══════════════════════════════════════════════════════════ */
  #pass-meter-home.pm-home {
    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    column-gap: 8px !important;
    row-gap: 2px !important;
    align-items: center !important;
    padding: 9px !important;
    box-sizing: border-box !important;
    /* ② 軽く：濃い板 → 半透明＋うっすらぼかし */
    background: rgba(20, 16, 40, 0.42) !important;
    -webkit-backdrop-filter: blur(3px) !important;
    backdrop-filter: blur(3px) !important;
    border: 1px solid rgba(255, 210, 122, 0.5) !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
  }
  #pass-meter-home .pm-gauge-wrap {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    width: 52px !important;
    height: 52px !important;
    margin: 0 !important;
  }
  #pass-meter-home .pm-gauge-wrap svg {
    width: 52px !important;
    height: 52px !important;
  }
  #pass-meter-home .pm-title {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    min-width: 0 !important;
    font-size: 0.82rem !important;
    line-height: 1.25 !important;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
  #pass-meter-home .pm-info {
    grid-column: 2 !important;
    grid-row: 2 !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
  }
  #pass-meter-home .pm-note {
    font-size: 0.68rem !important;
    line-height: 1.35 !important;
    text-align: left !important;
    margin: 0 !important;
    overflow-wrap: anywhere !important;
  }
  #pass-meter-home .pm-collect-bar {
    width: 100% !important;
    margin-top: 4px !important;
  }

  /* ══════════════════════════════════════════════════════════
     m38　タイトル背景をスマホ用の縦長画像に差し替え — 2026-08-01
       これまでの images/title_hero_bg.png は 1024×572 の横長で、
       iPhone（390×844）では高さに合わせて拡大されるため
       横は中央の26%しか映らず、エマは画面の外、そらも半分切れていました。
       縦長（1290×2785＝9:19.4）に差し替えると、iPhoneの縦横比と
       ほぼ一致するので切り取られる部分がほぼゼロになります。
       元の5.58MBのPNGは、見た目を保ったままWebPで191KBにしています。
     ※PCは今までどおり横長の画像のままです（この@media の中だけの指定）。
     ══════════════════════════════════════════════════════════ */
  /* index.html の <style> にも !important 付きで書かれているため、
     html を付けて優先度を上げています */
  html body.is-title-screen::before {
    background-image: url('../images/hero_bg_portrait.webp?v=20260815a') !important;
    background-position: center center !important;
    background-size: cover !important;
  }

  /* 言語メニューは下から上へ開く（下段に移したので下向きだと画面外になる） */
  #title-screen .lang-dropdown-menu {
    top: auto !important;
    bottom: calc(100% + 8px) !important;
    left: auto !important;
    right: 0 !important;
  }

  /* ② 上に残すのはログインだけ */
  #title-screen #title-top-nav {
    top: 10px !important;
    justify-content: flex-end !important;
    pointer-events: none !important;
  }
  #title-screen #title-top-nav > * {
    pointer-events: auto !important;
  }

  /* ② BGM＋言語を下の段へ（DOM順は 言語→BGM なので row-reverse で
        言語が☰の隣に来るようにする） */
  #title-screen #title-top-nav > div:first-child {
    position: fixed !important;
    right: 50px !important;
    bottom: calc(21px + env(safe-area-inset-bottom, 0px)) !important;
    height: 42px !important;
    margin: 0 !important;
    flex-direction: row-reverse !important;
    align-items: center !important;
    gap: 2px !important;
    z-index: 100002 !important;
  }
  #title-screen .lang-dropdown-trigger {
    width: 68px !important;
    height: 42px !important;
    box-sizing: border-box !important;
    padding: 0 6px !important;
    justify-content: center !important;
    font-size: 0.68rem !important;
    gap: 3px !important;
  }
  #title-screen #title-bgm-btn.title-badge-btn {
    width: 54px !important;
    height: 42px !important;
    box-sizing: border-box !important;
    padding: 0 4px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.6rem !important;
  }

  /* ① プランのヒント：左6px、☰・言語・BGMの手前まで。高さ42px */
  #title-screen #title-plan-hint {
    width: calc(100vw - 182px) !important;
    max-width: calc(100vw - 182px) !important;
    height: 42px !important;
    box-sizing: border-box !important;
    padding: 0 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transform: translate(calc(-50vw + 6px), calc(100vh - 75px)) !important;
    transform: translate(calc(-50vw + 6px), calc(100dvh - 75px)) !important;
  }
  #title-screen #title-plan-hint > span {
    font-size: 0.7rem !important;
    white-space: nowrap !important;
  }

  /* ══════════════════════════════════════════════════════════
     m39　下の段のボタンの色を見やすく（スマホのみ）— 2026-08-01
       【なぜ】
         縦型の背景に差し替えたところ、画面の下のあたりが
         白い雲になりました。言語切替ボタンは
         「白15%の半透明＋ぼかし」でできているため、
         白い雲の上ではボタンの形がほとんど見えなくなります。
       【なおしかた】
         ① 言語ボタン：半透明をやめて濃い紺色の下地にする。
            金色の枠はそのまま残すので、雰囲気は変わりません。
         ② BGMボタン：紫は左どなりの青いプランの帯と近い色なので、
            4つのボタンが見分けやすいよう緑（ティール）に変更。
            ※HTMLのタグに直接書かれた紫を上書きするため
              !important を付けています。
         並びと色： プラン(青) ／ BGM(緑) ／ 言語(紺+金) ／ ☰(桃)
     ══════════════════════════════════════════════════════════ */

  /* ① 言語ボタン：紫のベタ塗り＋淡いラベンダーの枠。
        濃紺だと周りのパステルの中で1つだけ重く沈んでしまうので、
        背景の紫〜ピンクと同じ系統の紫にしました。
        枠は本体と同系色（淡い紫）にして、☰（桃＋淡い桃の枠）や
        プラン帯（青＋淡い青の枠）と作りをそろえています。 */
  #title-screen .lang-dropdown-trigger {
    background: linear-gradient(180deg, #c79cff 0%, #8b4fe0 50%, #5b23a8 100%) !important;
    border: 2px solid #e0c8ff !important;
    color: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45),
                inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
  }
  #title-screen .lang-dropdown-arrow {
    color: #e9d8ff !important;
  }

  /* ② BGMボタン：紫 → 緑（ティール） */
  #title-screen #title-bgm-btn.title-badge-btn {
    background: linear-gradient(to bottom, #4fd8a5 0%, #12a37a 50%, #0a6b50 100%) !important;
    border-color: #0d8a66 !important;
    color: #ffffff !important;
  }
  /* BGMのON/OFFは 🔊 / 🔇 のマークで見分けていましたが、
     マークを外したので、代わりに色の濃さで見分けます。
       ON  … 上の鮮やかな緑（.bgm-active が付きます）
       OFF … 下のくすんだ緑
     不要なら、このブロックを丸ごと消せば常に鮮やかな緑になります。 */
  #title-screen #title-bgm-btn.title-badge-btn:not(.bgm-active) {
    background: linear-gradient(to bottom, #a8c4ba 0%, #749186 50%, #4c645b 100%) !important;
    border-color: #628075 !important;
  }

  /* ══════════════════════════════════════════════════════════
     m40　下の段の文字を3つそろえる（スマホのみ）— 2026-08-01
       【なぜ】
         これまで下の段の3つは、文字の作りがバラバラでした。
           プラン帯 … Noto Sans JP ／ 太さ500 ／ 11.2px ／ 影うすい
           BGM     … 書体の指定なし（Arialに落ちる）／ 太さ700 ／ 9.6px
           言語     … 書体の指定なし（Arialに落ちる）／ 太さ700 ／ 10.9px
         BGMと言語は「同じ書体」に見えますが、それは書体の指定が
         どちらにも無く、両方とも既定のArialに落ちているだけです。
         日本語が入るとArialには文字が無いので別の書体に化けます。
       【なおしかた】
         3つとも Noto Sans JP ／ 太さ700 ／ 同じ影 にそろえます。
         大きさはプラン帯とBGMを 0.6rem でそろえ、
         言語は「JP」の2文字だけなので 0.66rem のまま少し大きめに
         残しています（枠が小さく、大きすぎると窮屈になるため）。
       【はみ出し対策】
         プラン帯は幅360pxの端末でいちばん狭くなります。
         左右の内側の余白を10px→4pxに縮めて、
         0.6rem・太さ700 の文字がちょうど収まるようにしています。
     ══════════════════════════════════════════════════════════ */
  #title-screen #title-plan-hint,
  #title-screen #title-plan-hint > span,
  #title-screen #title-bgm-btn.title-badge-btn,
  #title-screen #title-bgm-btn.title-badge-btn span,
  #title-screen .lang-dropdown-trigger,
  #title-screen .lang-dropdown-arrow {
    font-family: 'Noto Sans JP', system-ui, sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75) !important;
  }
  #title-screen #title-plan-hint {
    padding: 0 2px !important;
  }
  /* プラン帯の文字。多言語だと1行に収まらないので折り返しを許します。
     （フィリピン語は幅390pxで1行311px必要＝枠194pxの1.6倍。
       これまでは1行固定だったため、右側が見えなくなっていました） */
  #title-screen #title-plan-hint > span {
    font-size: 1rem !important;
    white-space: normal !important;
    line-height: 1.1 !important;
    text-align: center !important;
  }
  /* フィリピン語だけ文が長く、幅390pxでも3行になります。
     0.72remのままだと3行で40pxとなり、帯の高さ38pxをはみ出すため
     この言語のときだけ少し小さくします（3行で33.8px＝4px余裕）。 */
  html body.lang-ph #title-screen #title-plan-hint > span {
    font-size: 0.64rem !important;
  }
  /* 幅415px以上（Pro Max など）は帯が広いので、少しだけ小さくして
     日本語を1行に収めます。2行だと「…始めよ／う」と1文字だけ
     次の行に落ちて見た目が悪いためです。 */
  @media (min-width: 415px) {
    #title-screen #title-plan-hint > span {
      font-size: 0.86rem !important;
    }
  }

  /* 幅380px未満の端末は帯が狭く、1remのままだと言語によっては3行になり
     高さ38pxをはみ出すので、少し小さくします。 */
  @media (max-width: 380px) {
    #title-screen #title-plan-hint > span {
      font-size: 0.76rem !important;
    }
    /* フィリピン語は3行になるのでさらに小さく */
    html body.lang-ph #title-screen #title-plan-hint > span {
      font-size: 0.64rem !important;
    }
  }
  #title-screen #title-bgm-btn.title-badge-btn,
  #title-screen #title-bgm-btn.title-badge-btn span {
    font-size: 0.94rem !important;
  }
  #title-screen .lang-dropdown-trigger,
  #title-screen .lang-dropdown-arrow {
    font-size: 0.84rem !important;
  }

  /* いちばん狭い端末（iPhone SE の 320px など）は、さらに少し小さく */
  @media (max-width: 340px) {
    #title-screen #title-plan-hint > span {
      font-size: 0.54rem !important;
    }
  }

}

/* ════════════════════════════════════════════════════════════
   ここから下は【PC・タブレット用】（画面幅481px以上）です。
   上の @media (max-width:480px) の外側なので、スマホには
   影響しません。

   クイズ画面の上のバー（「⚔️ RPGモード: ○○」と
   「❓ガイド」「📋パート変更」）が、ヘッダー（高さ64px）の
   下に隠れて半分見えなくなっていたのを直します。

   ※ #quiz-screen の padding-top はJS側が直接指定していて
      CSSでは上書きできないため、内側の枠に上マージンを
      足してずらしています。
      バーはもともと枠の20px下にあるので、32pxを足して
      バーの上端が72px（ヘッダー64px＋すき間8px）になります。
   ════════════════════════════════════════════════════════════ */
@media (min-width: 481px) {
  #quiz-screen .quiz-container {
    margin-top: 32px !important;
  }
}


/* ════════════════════════════════════════════════════════════
   ここから下は【スマホ・PC共通】です（画面幅の指定なし）。

   RPGバトルの敵パネルの崩れ対策。
   敵の絵は <video> で表示していますが、動画が読み込めなかった
   場合、ブラウザは動画の大きさを「幅300px・高さ150px」という
   既定値で扱います。敵の枠は 320px しかないため、絵だけで
   横幅を使い切ってしまい、右側の「Wave 1：○○」の名前が
   幅0pxに押しつぶされて、1文字ずつの縦一列になっていました。
   （HPバーも幅2pxまで潰れていました）

   そこで、敵の絵の大きさを「文字サイズの1.15倍の正方形」に
   固定します。動画素材はすべて正方形（512×512 / 640×640）で、
   いまも同じ大きさで表示されているので、正常に読み込めている
   ときの見た目は1pxも変わりません。
   動画が出ないときだけ、小さな四角におさまって名前とHPが
   きちんと読めるようになります。
   ════════════════════════════════════════════════════════════ */
#rpg-enemy-panel .rpg-enemy-sprite .rpg-sprite-vid {
  width: 1.15em !important;
  height: 1.15em !important;
  object-fit: contain !important;
}
#rpg-enemy-panel .rpg-enemy-info,
#rpg-enemy-panel .rpg-enemy-name,
#rpg-enemy-panel .rpg-enemy-hpbar {
  min-width: 0 !important;
}


/* ════════════════════════════════════════════════════════════════════
   m34　横向きのときの案内（スマホのみ）— 2026-07-29
   ────────────────────────────────────────────────────────────────────
   【なぜ @media (max-width:480px) の外にあるか】
     スマホを横にすると画面の「幅」は844pxほどになり、480px以下という
     条件から外れます。この案内はまさにその状態で出したいものなので、
     ここだけは外側に書いています（m10・m14 に続く3つ目の例外）。

   【出る条件】
     ・横向き（orientation: landscape）
     ・かつ画面の高さが500px以下（＝スマホを横にしたとき）
     iPad・PC・タブレットの横向き（高さ600px以上）では出ません。

   【つくり】
     HTMLには一切手を入れず、body の ::after だけで作っています。
     文言は body に付く lang-** クラスで6言語に出し分けます。
   ════════════════════════════════════════════════════════════════════ */
@media (orientation: landscape) and (max-height: 500px) {
  body::after {
    content: "\1F4F1\A 画面を縦にしてください\A Please rotate your device to portrait";
    position: fixed;
    inset: 0;
    z-index: 3000000;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: pre-line;
    line-height: 2;
    padding: 20px;
    box-sizing: border-box;
    background: linear-gradient(180deg, rgba(24, 16, 48, 0.985), rgba(10, 7, 24, 0.99));
    color: #ffe6a0;
    font-family: 'Noto Sans JP', system-ui, sans-serif;
    font-size: 1.15rem;
    font-weight: 800;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
  }
  body.lang-id::after {
    content: "\1F4F1\A Silakan putar layar ke posisi vertikal\A Please rotate your device to portrait";
  }
  body.lang-vi::after {
    content: "\1F4F1\A Vui lòng xoay màn hình dọc\A Please rotate your device to portrait";
  }
  body.lang-np::after {
    content: "\1F4F1\A कृपया स्क्रिन ठाडो बनाउनुहोस्\A Please rotate your device to portrait";
  }
  body.lang-ph::after {
    content: "\1F4F1\A Pakiikot ang screen nang patayo\A Please rotate your device to portrait";
  }
  body.lang-my::after {
    content: "\1F4F1\A ဖန်သားပြင်ကို ဒေါင်လိုက်လှည့်ပါ\A Please rotate your device to portrait";
  }
}

/* ══════════════════════════════════════════════════════════════
   ヘッダー固定の不具合修正（スマホのみ）
   iOSのSafariでは、position:sticky の直後にある要素が
   background-attachment:fixed を使っていると、スクロール時に
   ヘッダー（戻る・LV/EXP・BGM・MODE・TIMER・ITEM）がずれたり
   消えたりすることがあるため、スマホ幅でのみ fixed を解除する。
   見た目の変化はごくわずか（背景画像が完全固定でなくなるだけ）。
   ※PCの表示は変わりません（この@media の中だけの指定です）
   ※このブロックは以前 誤って「横向き専用」の@media の中に
   入っていたため、縦向き（通常の使い方）では一度も効いていな
   かった。正しく「スマホの幅」の@mediaに移設して修正。
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  #ichimoni-screen.app-overlay,
  #ichimoni-screen {
    background-attachment: scroll !important;
  }
  #world-map-screen {
    background-attachment: scroll !important;
  }
  /* ── 過去問画面：背景を「本当に固定」して見せる（スマホのみ）─────
     スワイプでの軽いスクロールを復活させたため、背景も再び
     position:fixed の専用レイヤー（タイトル画面と同じ仕組み）で
     固定する。これがないと、スクロールした分だけ背景画像も一緒に
     動いてしまい、画像下部の暗い床の部分（＝黒く見える箇所）が
     見えてしまう。
     （#past-exam-screen 自身に background-attachment:fixed を使うと
     iOSのSafariでスクロール中に背景が途切れる不具合があるため、
     ::before の position:fixed を使う）
     暗すぎる印象を軽くするため、グラデーションは薄め（0.25/0.4）。
     ※このブロックの外（PC・他言語の文言）には一切影響しません。 */
  #past-exam-screen.app-overlay,
  #past-exam-screen {
    background-image: none !important;
  }
  #past-exam-screen::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    pointer-events: none;
    background-color: #0a0a16;
    background-image:
      linear-gradient(rgba(8,5,28,0.25), rgba(12,5,40,0.4)),
      url('../images/past_exam_bg.png?v=20260428a');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  /* 下部の空きスペース（スマホのみ）。
     最後の行（第26回・第25回）が言語切り替えバーの下に隠れない
     ための最低限の余白は必要だが、余白が大きすぎるとその分
     スクロールできる幅も広がってしまう（背景は固定なので、
     スクロール幅が広いほど、スクロールし切った時に背景と
     カード群の位置関係が不自然に見えやすい）。
     ご要望によりさらに狭めた（70px→20px）。 */
  /* ★★ 下部のすき間を、端末の画面の高さに関係なく一定にする（スマホのみ）
     【これまで広く見えていた理由】
       他の画面（1問1答・模擬試験・RPG）は必ずスクロールするため、
       一番下まで動かすと「内容の下端＝画面の下端−下余白」となり、
       言語切り替えバーとのすき間は下余白だけで決まる（＝一定）。
       ところが過去問は14枚が画面に収まってしまい、スクロールしない。
       このとき内容は上に貼り付いたままなので、すき間は
       「画面の高さ − 内容の高さ」となり、画面が大きい端末
       （Pro Max など）ほど広がってしまう。実測で 168px あった。
     【対処】
       内容を「下ぞろえ」にする（align-content:end）。こうすると
       スクロールする画面と同じく「内容の下端＝画面の下端−下余白」に
       なり、端末の大きさやセーフエリア（ホームバー）に関係なく、
       すき間は常に同じ 67px になる。
       ・画面の高さの基準は 100svh（ツールバーが出ている状態で
         実際に見えている高さ）。100vh だとiOSではツールバー分だけ
         高くなり、余計なスクロールが生まれるため。
         未対応ブラウザ用に 100vh も前に残してある。
       ・body に付いている下余白 50px の分だけ余計にスクロールして
         しまうので、マイナスの下マージンで打ち消す。
       ・内容が画面より高い端末（小さい端末）では余白が生まれないため
         align-content は自動的に無効になり、これまでどおり
         普通に上から並んでスクロールする（＝安全）。
     ※PC（481px以上）には一切影響しません。 */
  #past-exam-screen.app-overlay,
  #past-exam-screen {
    /* ★ 数値上は1問1答と同じ67pxでも、過去問は背景が «明るい図書館の絵»
         なので、下に空いた部分が目立って広く見える。
         実機での見え方を優先し、さらに詰める（105px → 72px ＝ すき間34px）。 */
    padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px)) !important;
    /* 高さは js 側の position:fixed + top/bottom:0 で決まるので、
       min-height は無効化しておく（効くと箱が画面より高くなる）。 */
    min-height: 0 !important;
    margin-bottom: 0 !important;
    justify-content: flex-start !important;
  }
  /* 縦並びにしたとき、中身が押しつぶされないようにする（小さい端末対策） */
  #past-exam-screen > * {
    flex-shrink: 0 !important;
  }
  /* ★ 余った縦の空間は «カードを大きくする» ことで使い切る。
       （内容を下へずらすのではなく、パネル自体を広げる方式）
       ・見出しと説明文はこれまでどおり上に置いたまま
       ・14枚のカードが縦に広がり、画面の大きい端末ほど
         パネルが大きく＝押しやすく、読みやすくなる
       ・内容が画面に収まらない小さい端末では余りが無いので、
         これまでどおりの大きさのままスクロールする
       これで下に残っていた空きスペースも同時に無くなる。 */
  #past-exam-screen > .past-exam-year-grid {
    flex: 1 1 auto !important;
    align-content: stretch !important;
    grid-auto-rows: 1fr !important;
    /* ★★ 一番下の行が «2枚だけ» で右端が空いていたのが、
           «下が3倍広い» と感じられていた最大の原因。
           14枚を3列で並べると 3+3+3+3+2 となり、最後の行の
           右3分の1が背景のまま残る。目にはそこが «空き» に
           見えるため、実際の余白（67px）の3倍近く広く感じる。
           内部を6列にして、通常のカードは2つ分・最後の2枚は
           3つ分の幅にすると、すべての行が端まで埋まる。
           （見た目の列数は変わらず3列のまま、最後の行だけ
             2枚が横に広がって隙間が無くなる） */
    grid-template-columns: repeat(6, 1fr) !important;
    /* ★★ 画面を縦並びの箱（flex）にしたことで、カード群が
           «中身の幅» まで縮んでしまい、左右に大きな余白ができていた。
           （margin:0 auto が付いているため、flexの中では
             引き伸ばされずに内容幅になってしまう）
           以前のように画面の幅いっぱいまで広げる。 */
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  #past-exam-screen .past-exam-year-card {
    grid-column: span 2 !important;
  }
  #past-exam-screen .past-exam-year-card:nth-last-child(-n+2) {
    grid-column: span 3 !important;
  }
  /* ★ 上の «伸ばす» 指定はブラウザによって効き方が違うことがあるため、
       カードの «最低の高さ» も直接決めておく（こちらは確実に効く）。
       あわせて中の文字を上下中央にそろえ、カードが大きくなっても
       文字が上に寄って «スカスカ» に見えないようにする。 */
  #past-exam-screen .past-exam-year-card {
    min-height: 134px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    /* ★ 文字はカードの «下寄り» に置く。
         カードを大きくすると、中央ぞろえでは文字の下に空きができ、
         その分だけ «下が広い» という見え方になってしまうため。
         これで «文字の下端→言語バー» も1問1答とほぼ同じになる。 */
    justify-content: flex-end !important;
    padding-bottom: 16px !important;
    gap: 2px !important;
    /* ★ カードの «輪郭» がはっきり見えるようにする。
         これまで枠線が薄すぎ（不透明度0.30）て、目には
         «文字の下からバーまで» が空間として見えていた。
         1問1答のカードと同じ濃さ（0.55）にそろえる。 */
    /* ご要望により、さらに濃くする（背景の図書館が透けすぎないように）。
       1問1答のカードと同じくらいの «実体感» を出す。 */
    background: linear-gradient(160deg, rgba(34, 22, 66, 0.72), rgba(16, 10, 34, 0.82)) !important;
    border-color: rgba(212, 175, 55, 0.75) !important;
  }
  /* ★ カードが大きくなった分、中の文字も大きくする。
       （老眼でも読みやすく、カードの中がスカスカに見えないように） */
  /* ★ ロック中のカード（FREEプランでは第38回以外の13枚）は
       不透明度0.5でかなり薄く、グリッド全体が «内容として見えない»
       状態だった。ロックであることは分かるまま、はっきり見える濃さに上げる。 */
  #past-exam-screen .past-exam-year-card.locked {
    opacity: 0.78 !important;
    filter: grayscale(0.3) !important;
  }
  #past-exam-screen .past-exam-year-card.locked .past-exam-year-num,
  #past-exam-screen .past-exam-year-card.locked .past-exam-year-info {
    color: rgba(234, 222, 255, 0.82) !important;
  }
  #past-exam-screen .past-exam-year-num {
    font-size: 1.35rem !important;
    line-height: 1.15 !important;
  }
  #past-exam-screen .past-exam-year-info {
    font-size: 0.95rem !important;
    line-height: 1.15 !important;
  }

  /* ★ オーバーレイ画面（料金プラン・学習ツール・手引き・ご意見・利用規約）
       の左上「◀ 戻る」ボタンを少し小さくする。
       元は padding:9px 20px / 文字0.95rem の金縁ピル。
       文字が読める範囲で約2割小さくし、内容にかぶりにくくする。
       ※PC（481px以上）は今までどおりの大きさです。 */
  /* ★2026-08-14 «戻る» の大きさを全画面でそろえる。
     ここでスマホだけ小さくしていたため、手引き・料金プラン・学習ツールだけ
     13.6px／余白7px16px／左上12px になり、苦手克服・チュートリアル・
     暗記カード（15.2px／9px20px／左上16px）と不揃いだった。
     指で押しやすい «大きい方» に統一する。 */
  .ov-back-btn {
    padding: 9px 20px !important;
    font-size: 0.95rem !important;
    border-radius: 24px !important;
    border-width: 2px !important;
    top: 16px !important;
    left: 16px !important;
    letter-spacing: .5px !important;
    line-height: 1.15 !important;
  }
  /* ふりがな付きでも高さが揃うようにする（各画面の独自ボタンも同じ形に） */
  #review-empty-back,
  #flashcard-screen .fc-back-btn,
  #onboarding-modal > button:first-child {
    padding: 9px 20px !important;
    font-size: .95rem !important;
    border-radius: 24px !important;
    border-width: 2px !important;
    top: 16px !important;
    left: 16px !important;
    letter-spacing: .5px !important;
    line-height: 1.15 !important;
  }

  /* ══════════════════════════════════════════════════
     模擬試験画面の調整（スマホのみ）
     ※PCの表示は一切変わりません（この@mediaの中だけの指定）
     ※アイコンはJS側で <span class="mock-ico"> に包んだので、
       ここで非表示にしてもPCでは今まで通り表示されます。
     ══════════════════════════════════════════════════ */

  /* ① 見出しの絵文字（🏆）を消して「模擬試験」の文字自体を中央に。
        弱点特化ボタンの王冠(👑)と的(🎯)も同じ仕組みで消す。 */
  #mock-exam-screen .mock-ico {
    display: none !important;
  }

  /* ② 見出し直下の「本番形式」を大きく */
  #mock-exam-screen .mock-exam-container > p {
    font-size: 1.2rem !important;
  }

  /* ③ 「残り受験回数」を大きく */
  #mock-exam-screen .mock-attempts-left {
    font-size: 1.2rem !important;
  }

  /* ④ 弱点特化模試のボタン。文字を大きくしつつ、日本語では
        1行に収まるように左右のpaddingを詰めて幅を稼ぐ。
        ※ white-space:nowrap は使わない。文言が長い言語
          （ミャンマー語など）では、nowrapにするとボタンから
          文字がはみ出すため、自然に折り返させる。
        ※文字サイズは実測で決定：1.04remにすると日本語が2行に折り返すため、
          1行を保てる上限（約1.0rem）より少しだけ小さい0.98remにしている。
          （実機のSafariは文字の描画幅がわずかに違うため、その分の余裕） */
  #mock-exam-screen .mock-weak-btn {
    font-size: 0.98rem !important;
    padding: 13px 2px !important;
  }

  /* ⑤ 言語切り替えバーの背後に固定表示されていたピンクの横長エリアを
        なくす。position:fixed をやめて通常の位置（内容の最後）に戻すと、
        言語バーの背景から消える。ボタン自体は残るので「試験を開始する」
        機能はそのまま（むしろ言語バーに隠れず押せるようになる）。
        色もピンクをやめて他のボタンと同じ紫系にそろえた。 */
  #mock-start-sticky {
    position: static !important;
    background: none !important;
    padding: 0 !important;
    margin-top: 14px !important;
    z-index: auto !important;
  }
  #mock-start-sticky button {
    background: linear-gradient(180deg, #a78bfa, #7c3aed) !important;
    border-color: #b388ff !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.5) !important;
    font-size: 1.4rem !important;
  }

  /* ══════════════════════════════════════════════════
     RPGモード（マップ）画面：「🎯 目標：…」の文字が
     0.78rem（約12px）と小さく読みづらいため大きくする。
     ※PCの表示は変わりません（この@mediaの中だけの指定）
     ══════════════════════════════════════════════════ */
  #world-map-screen .part-goal-text,
  .part-goal-text {
    font-size: 1rem !important;
    line-height: 1.65 !important;
  }

  /* ⑨ モードを選んだ直後、「試験を開始する」ボタンを数秒だけ光らせて
        「次はここを押す」と分かるようにする（JS側でクラスを付け外し）。 */
  #mock-start-sticky button.mock-start-attention {
    animation: mockStartPulse 0.9s ease-in-out 3;
    border-color: #ffd700 !important;
  }
  @keyframes mockStartPulse {
    0%   { box-shadow: 0 4px 14px rgba(0,0,0,0.5), 0 0 0 0 rgba(255,215,0,0.75); }
    70%  { box-shadow: 0 4px 14px rgba(0,0,0,0.5), 0 0 0 14px rgba(255,215,0,0); }
    100% { box-shadow: 0 4px 14px rgba(0,0,0,0.5), 0 0 0 0 rgba(255,215,0,0); }
  }
  /* 「動きを減らす」設定の端末では光らせない（酔い・見づらさ対策） */
  @media (prefers-reduced-motion: reduce) {
    #mock-start-sticky button.mock-start-attention { animation: none; }
  }

  /* ⑦ 各モードカードの下段（「125問・150分（本番形式）」「全60問・約72分」
        など、試験数と時間の表示）を大きくする。
        モード選択・パート合格モードの両方が対象。 */
  #mock-exam-screen [onclick*="selectMode"] > div:last-child {
    font-size: 1.02rem !important;
  }

  /* ⑧ 「試験ルール」の各説明文（制限時間あり／5択問題／合格…）。
        日本語がすべて1行に収まる大きさに実測で調整（0.94rem＝約15px）。
        小さめのスマホ（幅375px）でも1行になることを確認済み。
        ※文言が長い他の言語は2行になるが、読める大きさを優先している。 */
  #mock-exam-screen .mock-exam-container ul li {
    font-size: 0.94rem !important;
  }

  /* ⑥ 一番下（開始ボタン）と言語切り替えバーの間隔。
        間隔を決めているのは主に #mock-exam-screen 自身の
        padding-bottom（past_exam.css 系の指定で120px）で、
        JS側のインライン指定より優先されていた。
        以前135px→120pxに調整し«67px»の間隔になっていたが、
        ★2026-08-26 再調整：67pxでもまだ広いとのご要望（トモさん）のため、
        ゲート画面など他画面で実機OK確認済みの«約30px»に近づくよう
        120px→84pxへ、実測比で約37px分さらに詰めた。 */
  #mock-exam-screen .mock-exam-container {
    padding-bottom: calc(15px + env(safe-area-inset-bottom, 0px)) !important;
  }
  #mock-exam-screen.app-overlay,
  #mock-exam-screen {
    padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   MOBILE (≤600px) — 画面下固定の言語切り替えバー対策
   「日本語｜母国語」の言語バーは画面下中央に position:fixed で
   常に表示されるため、その下にあるリストの最後の項目と重なって
   見えることがある。リストの下に十分な余白を追加して回避する。
   ※PCの表示は変わりません（この@media の中だけの指定です）
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  /* #world-map-screen 自体（flex + overflow-y:auto のスクロール容器）に
     padding-bottom を付けても、iOSのSafariではスクロール末端まで
     反映されないことがあるため、実際にスクロールされる中身側
     （.map-grid）に直接、下余白を追加する。 */
  /* ※「復習の祠」から言語切り替えバーまでが、1問1答画面と同じ
     間隔（67px）になるよう実測して調整した（6言語すべてで確認）。
     75pxだと61〜63pxとわずかに狭かったため80pxにしている。
     （env(safe-area-inset-bottom) は他の画面と同じく加算し、
       iPhoneのホームバー分だけ自動で余白が増えるようにしている） */
  /* ★ 実機の写真（模擬試験とRPGを同じ縮尺で並べて比較）から、
        RPGだけが模擬試験より «約25px分» 下が広いと分かったため、
        その差だけ詰める（80px → 55px）。
        シミュレーターでは両者ほぼ同じに見えていたが、実機では
        差が出ていたので、実機の写真で測った値を優先する。 */
  body:not(.is-title-screen) #world-map-screen .map-grid {
    padding-bottom: calc(45px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   MOBILE (≤600px) — タイトル画面の背景に古い画像が透けて見える対策
   タイトル画面の背景は body::before（画像A）で描画していますが、
   タイトル画面に戻る際にJS側でも body自体に同じ背景画像（画像B）を
   重ねて設定しています。iOSのSafariでは、上部のアドレスバーが
   表示・収納されるたびに画面の高さが変わり、この2枚の背景の
   サイズ計算が一瞬ズレて、下端に隙間ができることがあります
   （そこから“前の画像”のように見えるものが覗いてしまう）。
   ここでは背景を描画している要素(::before)を上下左右に少し
   大きめに広げることで、その隙間ができないようにしています。
   ※PCの表示は変わりません（この@media の中だけの指定です）
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  html body.is-title-screen::before {
    inset: -10px -10px -120px -10px !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   MOBILE — 料金プラン／利用規約の «画面独自の言語ボタン» をやめ、
   他の画面と同じ «下部の言語切り替えバー» に統一する
   （body に ov-lang-bottom が付いている間だけ有効。
     付け外しは pricing_view.js / boot_07.js で行う）
   ※PC（601px以上）の表示は一切変わりません
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  /* ① 画面上部にあった国旗ボタンを消す */
  html body.ov-lang-bottom #pricing-screen .pqlang-selector,
  html body.ov-lang-bottom #legal-lang-bar {
    display: none !important;
  }

  /* ①-2 言語バーはヘッダーの中にあり、タイトル画面ではヘッダーごと
        display:none にされている（＝そのままでは出せない）。
        ヘッダーを «高さ0・見えない・押せない» 状態で復活させ、
        中の言語バーだけを見える・押せるようにする。
        さらに、料金プラン（z-index:100000）より前に出す必要があるため、
        ヘッダー自体の重なり順も上げる。 */
  html body.ov-lang-bottom.ov-lang-bottom .app-header {
    display: flex !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: 100005 !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    overflow: visible !important;
  }
  html body.ov-lang-bottom.ov-lang-bottom .app-header .header-lang-center {
    visibility: visible !important;
    pointer-events: auto !important;
    display: block !important;
    height: 0 !important;
    overflow: visible !important;
  }
  html body.ov-lang-bottom #lang-toggle.lang-toggle {
    visibility: visible !important;
    pointer-events: auto !important;
    display: inline-flex !important;
  }

  /* ② 共通の言語バーを、他の画面と同じ «下中央» に出す。
        料金プランは z-index 100000 のオーバーレイなので、
        その上に来るよう z-index を上げる。 */
  html body.ov-lang-bottom.ov-lang-bottom .lang-toggle {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    transform: translateX(-50%) !important;
    z-index: 100005 !important;
    padding: 4px !important;
    max-width: calc(100vw - 32px) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.6), 0 0 16px rgba(255,215,0,0.28) !important;
  }
  html body.ov-lang-bottom.ov-lang-bottom .lang-toggle .lt-seg {
    padding: 9px 18px !important;
    font-size: 1rem !important;
  }
  html body.ov-lang-bottom.ov-lang-bottom .lang-toggle .lt-seg img {
    width: 24px !important;
    height: 18px !important;
  }
  /* 母国語の一覧は «上向き» に開く（下は画面の端なので） */
  html body.ov-lang-bottom.ov-lang-bottom .lt-native-menu {
    top: auto !important;
    bottom: calc(100% + 8px) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    min-width: 210px !important;
    z-index: 100006 !important;
  }

  /* ③ バーと内容が重ならないよう、下に余白を足す */
  html body.ov-lang-bottom #pricing-screen {
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
  }
  /* ★2026-08-15 修正：利用規約の枠が «上の◀Back» と «右下の☰» に
       かぶっていた（実測 y=72..724／☰は y=733 から）。
       他の画面（チュートリアル・苦手克服）と同じように、
       上に64px・下に96px の余白をとってから枠を置く。 */
  html body.legal-open #legal-modal {
    align-items: flex-start !important;
    padding-top: 64px !important;
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
  }
  html body.legal-open #legal-modal > .legal-panel {
    max-height: 100% !important;
    margin-bottom: 0 !important;
    box-sizing: border-box !important;
  }
  /* 目印が付いていない万一の場合にそなえた元の指定（そのまま残す） */
  html body.ov-lang-bottom #legal-modal > div {
    max-height: calc(82vh - 60px) !important;
    margin-bottom: 60px !important;
  }

  /* ★2026-08-15 追加：利用規約でも 📣報告ボタンを出す（他の画面と同じ左下）
       重なり順：モーダル 100001 ＜ ◀Back 100003 ＜ 📣 100004 ＜ 言語バー 100005 */
  html body.legal-open.legal-open #feedback-fab {
    display: flex !important;
    z-index: 100004 !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   MOBILE — ログイン画面の背景を «縦型» に差し替える
   これまでの login_bg_v2.png は 1024×572 の横長で、縦長の画面に
   cover で入れると横幅の約48%が切り落とされ、左右にいる
   そらとエマがちょうど画面の外に出てしまっていた。
   （さらに 160% auto という調整のせいで、絵が中央の帯にしか出ていなかった）
   縦型（1320×2365・約9:16）の専用画像に切り替える。
   二匹は画像の下66〜86%に描かれており、ログインカード（上8〜60%）とは
   重ならない。
   ※PC（601px以上）は今までどおり login_bg_v2.png のままです。
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  #login-modal.modal {
    background-image:
      linear-gradient(rgba(12, 6, 28, 0.10), rgba(12, 6, 28, 0.20)),
      url('../images/login_bg_portrait.webp?v=20260812d3') !important;
    background-position: center top, center center !important;
    background-size: auto, cover !important;
    background-repeat: no-repeat, no-repeat !important;
    background-color: #14091f !important;
  }
}
/* 画面が短い端末（iPhone SE など）では、カードが縦に占める割合が大きく
   二匹に少しかぶるので、カードを上に寄せて空きを作る */
@media (max-width: 600px) and (max-height: 720px) {
  #login-modal.modal {
    padding-top: 2vh !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   MOBILE — 料金プランの «年額プラン» の表を横スクロール無しにする
   5列（プラン／月額合計／年額一括／実質1日／節約額）を横に並べると
   スマホの幅では収まらず、右端の «節約額» が見切れて横スクロールが
   必要だった。スマホでは表をやめ、プランごとの «カード» に組み替える。
   各項目には見出しラベルを付けるので、どの数字が何かは一目で分かる。
   ラベルは表の見出しと同じ多言語キーを使っているので、
   言語を切り替えるとラベルも一緒に変わる。
   ※PC（601px以上）は今までどおりの表のままです。
   ══════════════════════════════════════════════════════════════ */
#pricing-screen .annual-plan-section .tbl-lbl { display: none; }

@media (max-width: 600px) {
  #pricing-screen .comparison-table.annual-plan-section {
    overflow-x: hidden !important;
    padding: 26px 14px 20px !important;
  }
  /* 機能比較表など他の表も、飾りのはみ出しで数pxだけ横に動くことが
     あったので、まとめて横スクロールを止める（中身は収まっている） */
  #pricing-screen .comparison-table {
    overflow-x: hidden !important;
  }
  #pricing-screen .annual-plan-section table,
  #pricing-screen .annual-plan-section tbody,
  #pricing-screen .annual-plan-section tr,
  #pricing-screen .annual-plan-section td {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
  }
  #pricing-screen .annual-plan-section thead {
    display: none !important;   /* 見出し行は各カードのラベルに置き換える */
  }
  /* ★ 見出し「年額プラン (さらにお得！)」も横にはみ出して切れていた
       （宝箱アイコン＋1行固定で幅413px＞枠392px）。折り返せるようにする。 */
  #pricing-screen .annual-plan-header-wrapper {
    margin-bottom: 18px !important;
  }
  #pricing-screen .annual-plan-header {
    flex-wrap: wrap !important;
    gap: 8px !important;
    max-width: 100% !important;
  }
  #pricing-screen .annual-plan-header h2 {
    font-size: 1.3rem !important;
    line-height: 1.35 !important;
    text-align: center !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    margin: 0 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  #pricing-screen .treasure-icon {
    width: 42px !important;
    flex: 0 0 auto !important;
  }
  #pricing-screen .annual-plan-section table {
    background: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }
  #pricing-screen .annual-plan-section tbody tr {
    background: rgba(0, 0, 0, 0.80) !important;
    border: 2px solid rgba(255, 215, 0, 0.45) !important;
    border-radius: 16px !important;
    margin: 0 0 16px !important;
    padding: 4px 14px 12px !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6) !important;
  }
  /* 1列目（プラン名）はカードの見出しに */
  #pricing-screen .annual-plan-section tbody td:first-child {
    font-size: 1.3rem !important;
    font-weight: 900 !important;
    color: #ffd700 !important;
    text-align: center !important;
    padding: 10px 0 10px !important;
    margin-bottom: 6px !important;
    border-bottom: 1px solid rgba(255, 215, 0, 0.3) !important;
  }
  /* 2列目以降は「ラベル ─── 値」の1行に */
  #pricing-screen .annual-plan-section tbody td {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    gap: 12px !important;
    text-align: right !important;
    border: none !important;
    padding: 8px 2px !important;
    font-size: 1.05rem !important;
    line-height: 1.4 !important;
  }
  #pricing-screen .annual-plan-section tbody td .tbl-lbl {
    display: inline-block !important;
    flex: 0 0 auto !important;
    color: #d9cfff !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    text-align: left !important;
    white-space: nowrap !important;
  }
  /* 年額一括の金額はさらに大きく（一番見せたい数字） */
  #pricing-screen .annual-plan-section tbody td strong {
    font-size: 1.45rem !important;
  }
  /* ★ 表の下のメッセージ（「あなたの未来のために、1日ペットボトル…」）
       1.35remだと3行に折り返されていたので、少し小さくして2行に収める。 */
  #pricing-screen .annual-plan-section > div[style*="center"] > p {
    font-size: 1.05rem !important;
    line-height: 1.55 !important;
    letter-spacing: 0 !important;
    margin: 18px auto 4px !important;
    padding: 6px 2px !important;
    max-width: 100% !important;
  }
  #pricing-screen .annual-plan-section > div[style*="center"] > p > span:first-child {
    font-size: 1.1rem !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   MOBILE — 料金プランの «機能比較表» も読みやすくする
   4列（機能／Free／Standard／Premium）だと1列目が73pxまで潰され、
   「学習プラン自動作成（弱点分析）」が1文字ずつ折り返されていた。
   年額プランと同じく、スマホでは «機能ごとのカード» に組み替える。
   プラン名のラベルは表の見出しと同じ多言語キーなので、
   言語を切り替えるとラベルも一緒に変わる。
   ※PC（601px以上）は今までどおりの表のままです。
   ══════════════════════════════════════════════════════════════ */
#pricing-screen .comparison-table .tbl-lbl { display: none; }

@media (max-width: 600px) {
  #pricing-screen .comparison-table:not(.annual-plan-section) {
    padding: 24px 14px 18px !important;
  }
  #pricing-screen .comparison-table:not(.annual-plan-section) table,
  #pricing-screen .comparison-table:not(.annual-plan-section) tbody,
  #pricing-screen .comparison-table:not(.annual-plan-section) tr,
  #pricing-screen .comparison-table:not(.annual-plan-section) td {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
  }
  #pricing-screen .comparison-table:not(.annual-plan-section) thead {
    display: none !important;
  }
  #pricing-screen .comparison-table:not(.annual-plan-section) tbody tr {
    background: rgba(0, 0, 0, 0.55) !important;
    border: 1px solid rgba(160, 150, 220, 0.35) !important;
    border-radius: 14px !important;
    margin: 0 0 12px !important;
    padding: 2px 12px 8px !important;
  }
  /* プレミアム限定の行は金色の枠で目立たせる（PCと同じ意味づけ） */
  #pricing-screen .comparison-table:not(.annual-plan-section) tbody tr.premium-row {
    border-color: rgba(255, 215, 0, 0.45) !important;
    background: rgba(30, 18, 8, 0.55) !important;
  }
  /* 1列目＝機能名をカードの見出しに */
  #pricing-screen .comparison-table:not(.annual-plan-section) tbody td:first-child {
    font-size: 1.06rem !important;
    font-weight: 800 !important;
    text-align: left !important;
    padding: 9px 0 9px !important;
    margin-bottom: 4px !important;
    border: none !important;
    border-bottom: 1px solid rgba(160, 150, 220, 0.28) !important;
    line-height: 1.35 !important;
    white-space: normal !important;
  }
  /* 2列目以降＝「プラン名 ─── 内容」 */
  #pricing-screen .comparison-table:not(.annual-plan-section) tbody td {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 12px !important;
    text-align: right !important;
    border: none !important;
    padding: 6px 2px !important;
    font-size: 0.98rem !important;
    line-height: 1.4 !important;
    white-space: normal !important;
  }
  #pricing-screen .comparison-table:not(.annual-plan-section) tbody td .tbl-lbl {
    display: inline-block !important;
    flex: 0 0 auto !important;
    color: #cfc6f5 !important;
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    text-align: left !important;
    white-space: nowrap !important;
  }
  /* ○×と「利用可能」バッジが潰れないように */
  #pricing-screen .comparison-table:not(.annual-plan-section) tbody td .check,
  #pricing-screen .comparison-table:not(.annual-plan-section) tbody td .cross {
    flex: 0 0 auto !important;
  }
  /* 見出し（アイコン＋機能詳細比較表）もはみ出さないように */
  #pricing-screen .comparison-table:not(.annual-plan-section) > div:first-child {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  #pricing-screen .comparison-table:not(.annual-plan-section) > div:first-child img {
    width: 46px !important;
  }
  #pricing-screen .comparison-table:not(.annual-plan-section) > div:first-child h2 {
    font-size: 1.3rem !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    text-align: center !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   MOBILE — 料金プランの下部を整理する
   ・「◀ トップページに戻る」ボタン … 左上に戻るがあるので重複。非表示に
   ・「© 2026 PassQuest…」の文字   … ご要望により非表示に
   ・一番下のすき間 … 1問1答と同じ間隔（67px）にそろえる
   ・左下の «📣 報告» ボタン … 他の画面では出るのに料金プランだけ
     出ていなかった（body.is-title-screen で消える指定のため）。表示する。
   ※PC（601px以上）は今までどおり全部表示されます。
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  #pricing-screen footer p[data-i18n="footer-copyright"],
  #pricing-screen footer .back-btn {
    display: none !important;
  }
  #pricing-screen footer {
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
  }
  /* 一番下（機能比較表の枠）から言語切り替えバーまでを 67px にする。
     バーは画面の下から16px・高さ52pxなので、下余白は 67+16+52＝135px。 */
  html body.ov-lang-bottom #pricing-screen {
    padding-bottom: calc(135px + env(safe-area-inset-bottom, 0px)) !important;
  }
  #pricing-screen .comparison-table:not(.annual-plan-section) {
    margin-bottom: 0 !important;
  }
  /* 📣 報告ボタンを料金プランでも出す（他の画面と同じ左下の位置） */
  body.pricing-open #feedback-fab {
    display: flex !important;
    z-index: 100004 !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   手引き（冒険の手引き）— 読む面を «羊皮紙» にする
   問題文のカード（.past-exam-question-card / RPGの問題文）と同じ
   images/ui/parchment.png を使い、アプリ全体で «読む所は羊皮紙» に
   統一する。背景の賢者の書斎はそのまま奥に残す。
   ※スマホ・PC共通の見た目変更です（レイアウトは変えていません）。
   ══════════════════════════════════════════════════════════════ */
#adventure-guide-modal .guide-modal-content {
  background: url('../images/ui/parchment.png') center/cover no-repeat #efe2c2 !important;
  border: 3px solid #8b5a2b !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.6), inset 0 0 40px rgba(139, 90, 43, 0.18) !important;
  color: #4a3520 !important;
}
#adventure-guide-modal .guide-modal-content h2,
#adventure-guide-modal .guide-modal-content h3 {
  color: #6b3d12 !important;
  text-shadow: 0 1px 0 rgba(255, 250, 235, 0.6) !important;
}
#adventure-guide-modal .guide-modal-content p,
#adventure-guide-modal .guide-modal-content li {
  color: #4a3520 !important;
}
#adventure-guide-modal .guide-modal-content strong {
  color: #7a3b0c !important;
}
/* ★ ふりがなを漢字に近づける。
     rt の行の高さを 1 に戻したうえで、わずかに下げて漢字に寄せる。
     top は «Chromium系（PC・Android）でしか効かない» ことに注意。
     0.38em は私が Chromium で調整していたときの値で、PCでは寄りすぎだった。
     → PCで選ばれた «番号14»＝0.04em では «まだ少し寄りすぎ» とのことなので
       2目盛ぶん離した «番号16» ＝ top -0.04em にする。 */
#adventure-guide-modal .guide-modal-content rt {
  color: #7a5527 !important;
  line-height: 1 !important;
  position: relative !important;
  top: -0.04em !important;
  font-size: 0.58em !important;
  font-weight: 700 !important;
}
/* ══════════════════════════════════════════════════════════
   ★ 手引きのふりがな位置（スマホのみ）
   ------------------------------------------------------------
   iPhone実機（Safari・440×796・DPR3）で7パターンを実測した結果：

     A 行間1.65 + top:0.38em ……… すき間  0px
     B 行間1.30 ………………………… すき間  0px  ← 変化なし
     C 行間1.15 ………………………… すき間  0px  ← 変化なし
     D 行間1.65 + margin-bottom -0.35em … -3.1px
     E 行間1.30 + margin-bottom -0.35em … -3.1px
     F 行間1.65 + transform 0.35em ……… -3.1px
     G 行間1.30 + margin-bottom -0.15em … -1.3px

   ここから確定したこと：
   ・line-height はふりがなの位置に «まったく» 影響しない。
     Safari はふりがなの高さぶん行を自動で広げるため、行間を詰めても
     ふりがなはついてこない。（＝私の «行間が原因» という読みは誤り）
   ・rt の margin-bottom は Safari でも Chromium でも効く。
     rt自身のフォントサイズ基準で、-0.15em → 約1.3px 寄る。
   ・rt の position:relative + top は Safari では無視される（Chromiumのみ有効）。
   ・rt の transform は Safari では効くが Chromium では効かない（levers が逆）。

   ★ 重要：«ちょうどいい寄せ量» はエンジンごとに違う
     ・Chromium は素の状態でふりがながほぼ漢字に接する。
       そこへ top を足すと «食い込んで» しまう（PCが寄りすぎだった原因）。
     ・Safari は素の状態で数px 空いている。
       そこから margin-bottom で引き寄せる必要がある。
     → 幅（@media）ではなく «エンジン» で分ける。
       @supports (-webkit-touch-callout: none) は実機で YES、
       Chromium では false であることを両方で実測済み。

   ▼ 寄せ量の目安（rt のフォントサイズ基準）
        -0.15em ≒ 1.3px ／ -0.35em ≒ 3.1px ／ -0.55em ≒ 4.8px ／ -0.75em ≒ 6.6px
   ══════════════════════════════════════════════════════════ */
@supports (-webkit-touch-callout: none) {
  #adventure-guide-modal .guide-modal-content rt {
    /* Safari では top は無視されるので margin-bottom で寄せる。
       ★ 実機で選ばれた «番号18» は -0.10em ＝ ほぼ «寄せなし» で、
         見た目が元のままになってしまっていた。番号18を選んだ理由は
         «折り返した行が上の行に近すぎる» ことだったが、それは下の
         行間 1.95 で解消したので、寄せ量はスライダー中央の
         «番号9» ＝ -0.55em に戻す。 */
    top: 0 !important;
    margin-bottom: -0.55em !important;
  }
}
/* ══════════════════════════════════════════════════════════
   ★ スマホで «折り返した行が上の行に近すぎる» 件
   ------------------------------------------------------------
   ふりがなは «漢字の上» に出るので、2行目のふりがなが
   1行目の文字に近づいてしまう。ふりがなを漢字側へ引き下げると
   逆に漢字と重なるため、ここは «行間» で解決する。
   行間はふりがなの位置を動かさないことが実機で確認済みなので、
   «ふりがなと漢字の距離はそのまま・行どうしだけ離れる»。
   （PCは601px以上なので影響なし。他画面のクイズと同じ 1.95 に合わせる）
   ══════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  #adventure-guide-modal .g2-scroll,
  #adventure-guide-modal .g2-start p,
  #adventure-guide-modal .g2-sec-b,
  #adventure-guide-modal .g2-scroll p {
    line-height: 1.95 !important;
  }
}
/* ★ 文字を少し太く・濃くして読みやすくする（老眼でも見やすいように） */
#adventure-guide-modal .guide-modal-content {
  font-weight: 600 !important;
  color: #3d2a14 !important;
}
#adventure-guide-modal .g2-start p,
#adventure-guide-modal .g2-sec-b,
#adventure-guide-modal .g2-scroll p {
  font-weight: 600 !important;
  color: #3d2a14 !important;
}
#adventure-guide-modal .g2-start p b,
#adventure-guide-modal .g2-sec-b b,
#adventure-guide-modal .g2-scroll b,
#adventure-guide-modal .g2-scroll strong {
  font-weight: 900 !important;
  color: #6d3308 !important;
}
#adventure-guide-modal .g2-title,
#adventure-guide-modal .g2-start-t,
#adventure-guide-modal .g2-sec-t {
  font-weight: 900 !important;
  color: #5c3208 !important;
}

/* ══════════════════════════════════════════════════════════════
   手引き — 3ステップ＋アコーディオン のスタイル
   ・見出しをタップすると開閉（<details>/<summary> を使用）
   ・羊皮紙の上で読みやすい茶系にそろえる
   ・下部の言語切り替えバー／📣報告ボタンと重ならないよう余白を確保
   ══════════════════════════════════════════════════════════════ */
#adventure-guide-modal .guide-modal-content {
  width: 92% !important;
  max-width: 520px !important;
  padding: 22px 18px 18px !important;
}
#adventure-guide-modal .g2-title {
  border-bottom: 2px solid #8b4513;
  padding-bottom: 10px;
  margin: 0 0 14px;
  font-size: 1.25rem;
  text-align: center;
}
#adventure-guide-modal .g2-scroll {
  text-align: left;
  line-height: 1.65;
  max-height: 52vh;
  overflow-y: auto;
  padding-right: 6px;
  -webkit-overflow-scrolling: touch;
}
/* はじめの3ステップ（常に見える） */
#adventure-guide-modal .g2-start {
  background: rgba(139, 90, 43, 0.10);
  border: 1px solid rgba(139, 90, 43, 0.35);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 14px;
}
#adventure-guide-modal .g2-start-t {
  font-weight: 900;
  color: #6b3d12;
  margin-bottom: 8px;
  font-size: 1.02rem;
}
#adventure-guide-modal .g2-start p {
  margin: 6px 0;
  font-size: 0.95rem;
}
/* アコーディオン */
#adventure-guide-modal .g2-sec {
  border: 1px solid rgba(139, 90, 43, 0.35);
  border-radius: 12px;
  margin-bottom: 10px;
  background: rgba(255, 250, 235, 0.45);
  overflow: hidden;
}
#adventure-guide-modal .g2-sec-t {
  list-style: none;
  cursor: pointer;
  padding: 12px 38px 12px 14px;
  font-weight: 900;
  color: #6b3d12;
  font-size: 1.02rem;
  position: relative;
  -webkit-user-select: none; user-select: none;
}
#adventure-guide-modal .g2-sec-t::-webkit-details-marker { display: none; }
#adventure-guide-modal .g2-sec-t::after {
  content: '＋';
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 900;
  color: #8b5a2b;
}
#adventure-guide-modal .g2-sec[open] > .g2-sec-t::after { content: '−'; }
#adventure-guide-modal .g2-sec[open] > .g2-sec-t {
  border-bottom: 1px solid rgba(139, 90, 43, 0.28);
}
#adventure-guide-modal .g2-sec-b {
  padding: 12px 14px 14px;
  font-size: 0.95rem;
  color: #4a3520;
}
#adventure-guide-modal .g2-sec-b b { color: #7a3b0c; }
#adventure-guide-modal .g2-gotit {
  margin-top: 16px !important;
  width: 100% !important;
}

@media (max-width: 600px) {
  /* ══════════════════════════════════════════════════════════
     ★2026-08-13 修正：羊皮紙のカードが下の言語バーに接してしまう件
     ------------------------------------------------------------
     これまで中のスクロール部を «58vh» で決めていたが、
     言語バーは «画面の下から16px» の固定位置にある。
     そのため画面が短い端末ほどカードが相対的に伸び、
     440×796 では すき間が17pxしか残らず «かぶって» 見えていた。
       440×796 → 17px ／ 390×844 → 37px ／ 430×932 → 74px

     直し方：カードの高さを «vhの割合» ではなく
     «モーダルの中身の高さ（＝画面 − 上下パディング）» で決める。
       ・カードに max-height:100% を付け、はみ出さないようにする
       ・カードを縦フレックスにし、スクロール部だけが縮むようにする
     こうすると、どの画面の高さでも
     «カード下端 → 言語バー上端» が最低でも padding-bottom で
     確保した分だけ空く。100vh を使わないので、
     iOS Safari のアドレスバー伸縮でも狂わない。
     （わかったボタンとカード下端の21pxは今までどおり）
     ══════════════════════════════════════════════════════════ */
  #adventure-guide-modal.modal {
    align-items: flex-start !important;
    padding-top: 64px !important;
    padding-bottom: 96px !important;    /* 言語バー(16+52=68) ＋ すき間28 */
  }
  #adventure-guide-modal .guide-modal-content {
    max-height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    /* カード下の余白を詰めることで «わかったボタンの位置» を
       これまでとほぼ同じ高さに保ちつつ、羊皮紙の下端だけを言語バーから離す。 */
    padding-bottom: 14px !important;
  }
  #adventure-guide-modal .g2-scroll {
    max-height: none !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
  }
  #adventure-guide-modal .g2-title,
  #adventure-guide-modal .g2-gotit { flex: 0 0 auto !important; }
  #adventure-guide-modal .g2-title { font-size: 1.15rem; }
  /* 📣 報告ボタンを手引きでも出す（他の画面と同じ左下） */
  body.guide-open #feedback-fab {
    display: flex !important;
    z-index: 100004 !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   ★2026-08-14 追加：苦手克服の «苦手問題なし！» 画面
   ------------------------------------------------------------
   この画面(#review-empty-modal)だけ、下部中央の言語切り替えバーと
   左下の 📣報告ボタンが出ていなかった。原因は2つ。
     ① 📣 は body.is-title-screen のとき display:none。
        苦手克服はタイトルから開くので is-title-screen が付いたまま。
     ② 言語バーは .app-header の中にある。ov-lang-bottom で
        ヘッダーを z-index:100005 まで上げているが、
        この画面は z-index:300000 の全画面オーバーレイなので、
        100005 では «裏» に隠れてしまう。
        ヘッダーは position:sticky ＝ 重なりの «部屋» を作るため、
        中の言語バーだけ上げても外には出られない。
        → ヘッダーごと 300010 に上げる。
   ※PC（601px以上）の表示は一切変わりません。
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  /* ① 言語バー（ヘッダーごと）をオーバーレイより手前に出す */
  html body.review-empty-open.ov-lang-bottom .app-header,
  html body.review-empty-open.ov-lang-bottom .lang-toggle {
    z-index: 300010 !important;
  }
  html body.review-empty-open.ov-lang-bottom .lt-native-menu {
    z-index: 300011 !important;
  }

  /* ② 📣 報告ボタンを出す（他の画面と同じ左下・同じ高さ）
     クラス名を2回書いて «強さ» を上げている。他の画面用の指定
     （手引き・料金プラン・チュートリアルなど＝z-index 10万台）が
     あとから読まれても、この画面では必ずこちらが勝つようにするため。
     この画面は z-index 30万の全画面なので、10万台では裏に隠れてしまう。 */
  html body.review-empty-open.review-empty-open #feedback-fab {
    display: flex !important;
    z-index: 300010 !important;
  }

  /* ③ 中身が言語バーと重ならないよう、下に余白を確保してから中央寄せ */
  #review-empty-modal {
    padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   ★2026-08-14 追加：苦手克服モードのふりがな
   ------------------------------------------------------------
   大きさ・位置は «手引き（#adventure-guide-modal）» で調整した値を
   そのまま採用しています。
       文字の大きさ 0.58em ／ 太さ 700 ／ 行の高さ 1
       PC・Android（Chromium系）… top -0.04em
       iPhone（Safari）………………… margin-bottom -0.55em
   ※Safari と Chromium ではふりがなを動かす «効くCSS» が逆なので、
     画面幅ではなく @supports（エンジン）で分けています。
     詳しい実測結果は上の手引きのコメントを参照。
   色だけは背景に合わせて変えています。手引きは羊皮紙（明るい）なので
   焦げ茶、こちらは夜空（暗い）なので淡い金にしています。
   ══════════════════════════════════════════════════════════════ */
#review-empty-modal rt,
#review-mode-banner rt {
  color: #ffe680 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85) !important;
  line-height: 1 !important;
  position: relative !important;
  top: -0.04em !important;
  font-size: 0.58em !important;
  font-weight: 700 !important;
}
@supports (-webkit-touch-callout: none) {
  /* iPhone の Safari は top が効かないので margin-bottom で漢字に寄せる */
  #review-empty-modal rt,
  #review-mode-banner rt {
    top: 0 !important;
    margin-bottom: -0.55em !important;
  }
}

@media (max-width: 600px) {
  /* ふりがなは «漢字の上» に出るぶん行が高くなる。
     折り返した行が上の行に近づきすぎないよう、手引きと同じ 1.95 にする。
     （ふりがなと漢字の距離は変わりません。実機で確認済み） */
  #review-empty-modal .review-empty-msg,
  #review-empty-modal .review-empty-hint,
  #review-empty-modal .review-empty-btn {
    line-height: 1.95 !important;
  }
  #review-empty-modal .review-empty-title {
    line-height: 1.6 !important;
  }
  /* ふりがなのぶん縦に伸びるので、画面からはみ出さないようにする */
  #review-empty-modal .review-empty-content {
    max-height: 100% !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   ★2026-08-15 苦手克服（苦手問題なし）画面：枠の中を読みやすくする
   ------------------------------------------------------------
   【ご指摘】
     ・枠の中の説明文が小さい。枠にまだ余白があるので大きくしたい
     ・薄くて «半透明» に見える部分があって読みにくい
   【実測（iPhone Pro Max 440×796 相当）】
     説明文  14.4px ／ 💡ヒント枠 12.8px・文字色 #b0a070（かなり薄い）
     枠の内側の余白 40px、絵文字🎉 64px、枠の幅 380px
   【やったこと】
     ① 余白・絵文字・枠幅を見直して «文字に使える場所» を作る
        内側の余白 40px→24px ／ 🎉 64px→42px ／ 枠幅 380px→94%(約414px)
        …横が広がるぶん折り返しも減り、同じ高さでも文字を大きくできる
     ② 説明文 14.4px → 17.6px（約1.2倍）
     ③ 💡ヒント枠 12.8px → 15.4px、文字色を #b0a070 →
        #f5ead0（クリーム色）にして «半透明に見える» のを解消。
        枠線も 0.3 の薄さ→0.8 に濃くし、内側に黒を敷いて字を浮かせる
   【安全のため】
     ・すべて @media (max-width:600px) の中なので パソコン画面は変わりません
     ・6言語（日・ID・VI・NP・PH・MY）で枠からはみ出さないことを確認済み
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  /* ⓪ 文字を大きくすると枠も縦に伸びるので、左上の «◀ Back» に
        かぶらないよう、上にも余白をとってから中央に置く
        （下の 84px は言語切り替えバーぶん。以前からの指定） */
  #review-empty-modal {
    padding-top: 64px !important;
  }
  /* ① 文字に使える場所を作る */
  #review-empty-modal .review-empty-content {
    max-width: 420px !important;
    width: 94% !important;
    padding: 22px 16px 24px !important;
  }
  #review-empty-modal .review-empty-icon {
    font-size: 2.6rem !important;
    margin-bottom: 0 !important;
  }
  #review-empty-modal .review-empty-title {
    font-size: 1.6rem !important;
    margin-bottom: 10px !important;
  }

  /* ② 説明文を大きく */
  #review-empty-modal .review-empty-msg {
    font-size: 1.18rem !important;     /* 14.4px → 18.9px */
    color: #fdf6e3 !important;
    margin-bottom: 14px !important;
  }

  /* ③ 💡ヒント枠：薄くて読みにくかったところを濃くする */
  #review-empty-modal .review-empty-hint {
    font-size: 1.03rem !important;     /* 12.8px → 16.5px */
    color: #f5ead0 !important;         /* もとは #b0a070（薄い） */
    background: rgba(0, 0, 0, 0.30) !important;
    border: 2px solid rgba(212, 175, 55, 0.8) !important;
    border-radius: 10px !important;
    padding: 12px 10px !important;
    margin-bottom: 16px !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
  }

  #review-empty-modal .review-empty-btn {
    font-size: 1.05rem !important;
    padding: 12px 26px !important;
  }

  /* ④ 折り返した2行目が中央から始まって読みにくかったので «左そろえ» にする
        （見出しとボタンの文字は中央のままです） */
  #review-empty-modal .review-empty-msg,
  #review-empty-modal .review-empty-hint {
    text-align: left !important;
  }

  /* ⑤「タイトルに戻る」だけ ふりがなが漢字に近すぎたので少し離す
        実測：説明文のすき間を基準にすると、このボタンだけ約1px 詰まっていた
              （rt 9.7px なので 1px ≒ 0.13em）
        Safari は margin-bottom、Chromium は top が効くので両方を同じだけ動かす */
  #review-empty-modal .review-empty-btn rt {
    top: -0.17em !important;          /* PC・Android：-0.04em から 0.13em 上へ */
  }
}
@supports (-webkit-touch-callout: none) {
  @media (max-width: 600px) {
    #review-empty-modal .review-empty-btn rt {
      top: 0 !important;
      margin-bottom: -0.42em !important;   /* iPhone：-0.55em から 0.13em 上へ */
    }
  }
}

/* ══════════════════════════════════════════════════════════════
   ★2026-08-14 修正：「タイトルに戻る」ボタンの縁取りが下だけ消えて見える件
   ------------------------------------------------------------
   もとの指定は
       border: 2px solid var(--sp-gold);   ← 上・左・右は金色
       border-bottom: 4px solid #1a0f05;   ← 下だけ «こげ茶» で立体感を出す
   でした。背景も暗いので、下辺だけ «枠が無い» ように見えていました。
   枠は四辺とも金色に揃え、立体感（押せそうな厚み）は
   影（box-shadow）で出すように変えます。押したときは影が縮んで
   «沈む» ので、これまでの手ざわりはそのままです。
   ※この画面だけの指定なので、他のボタンには影響しません。
   ══════════════════════════════════════════════════════════════ */
#review-empty-modal .review-empty-btn {
  border: 2px solid var(--sp-gold, #c9a84c) !important;
  box-shadow: 0 4px 0 #1a0f05, 0 6px 12px rgba(0, 0, 0, 0.45) !important;
  margin-bottom: 4px !important;   /* 影のぶんだけ下に余白を確保 */
}
#review-empty-modal .review-empty-btn:active {
  transform: translateY(3px) !important;
  box-shadow: 0 1px 0 #1a0f05, 0 2px 6px rgba(0, 0, 0, 0.45) !important;
}

/* ══════════════════════════════════════════════════════════════
   ★2026-08-14 追加：学習ツール（プレミアム）画面
     ① ふりがなを手引きと同じ仕様にする
     ② 下部中央の言語切り替えバーと重ならないよう余白を足す
   ------------------------------------------------------------
   ふりがなの値は手引き（#adventure-guide-modal）と同一です。
       文字の大きさ 0.58em ／ 太さ 700 ／ 行の高さ 1
       PC・Android（Chromium系）… top -0.04em
       iPhone（Safari）………………… margin-bottom -0.55em
   色だけ背景に合わせています（この画面は暗いので淡い金）。
   ※以前は js/premium_tools.js が <style> を差し込んで色だけ変えていました。
     あちらは «あとから読まれる» ぶんCSSより強く、ここの設定が効かなく
     なるため、JS側の差し込みはやめて この1か所にまとめています。
   ══════════════════════════════════════════════════════════════ */
/* ★2026-08-26 修正：前回「他画面（1問1答・過去問・模擬試験）と同じ絶対
   10.2pxに揃える」という変更を試したが、これは誤りだった。
   この画面（と手引き）は見出し〜小さな注記まで文字サイズがバラバラで、
   質問文だけを表示する1問1答・過去問・模擬試験とは前提が違う。
   手引きは実機（iPhone Safari・DPR3）で7パターン実測のうえ
   «0.58em（親文字サイズからの相対）＋ margin-bottom -0.55em» を選んでおり、
   絶対pxに固定すると、多くを占める小さめの項目文字（0.88〜1rem）では
   むしろ実機での寄せ量が実測値より強くなり「ふりがなが漢字に近すぎる」
   結果になっていた。手引きと同じ «相対(em)» の指定に戻す。 */
#premium-tools-screen rt {
  color: #ffe680 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85) !important;
  line-height: 1 !important;
  position: relative !important;
  top: -0.04em !important;
  font-size: 0.58em !important;
  font-weight: 700 !important;
}
@supports (-webkit-touch-callout: none) {
  /* iPhone の Safari は top が効かないので margin-bottom で漢字に寄せる。
     ★2026-08-26 3回目の実機調整：-0.55em（アプリ共通値）は本文・見出し
     ともにこの画面では強すぎて接触した。margin-bottom:0（寄せなし）に
     したら今度は「少し離れすぎ」に。間を取って -0.15em にしたところ、
     ★2026-08-26 4回目の実機調整：今度は5項目（見出し含む）とも
     「もう少しだけ漢字に寄せてほしい」との報告。-0.15em → -0.25em へ、
     もう一段階だけ寄せる方向に強める。 */
  #premium-tools-screen rt {
    top: 0 !important;
    margin-bottom: -0.25em !important;
  }
}
/* ★2026-08-26 5回目の実機調整：カード見出し・本文は-0.25emでOKとの確認が
   取れたが、ページ上部の大見出し「プレミアム学習ツール」（h1）だけは
   ゲート画面（非プレミアム時の案内画面）の実機スクショで、ふりがなと
   漢字の間に明らかな隙間が残っていることが確認された（他の項目より
   文字が大きい分、同じ-0.25emでは寄せ量が足りなかったとみられる）。
   h1だけ、さらに強めに寄せる。 */
@supports (-webkit-touch-callout: none) {
  #premium-tools-screen h1 rt {
    margin-bottom: -0.7em !important;
  }
}
/* ★2026-08-26 追加：見出し（h1＝1.5rem／カードの見出し＝1.1rem／h3）は
   本文（0.88〜1rem）より文字が大きいぶん、«0.58em» で決まるふりがな自体も
   大きくなってしまうため、本文で問題なかった実測サイズ
   （0.58em×0.95rem≒8.8px）に見出しも揃える。 */
#premium-tools-screen h1 rt,
#premium-tools-screen h3 rt,
#premium-tools-screen .pt-card-title rt {
  font-size: 8.8px !important;
}

/* ══════════════════════════════════════════════════════════════
   ★2026-08-26 受験申込ガイド（#exam-guide-screen）専用の指定
   ------------------------------------------------------------
   【なぜ専用にしたか】
   当初はプレミアム学習ツールと同じセレクタに相乗りさせたが、
   トモさんより「字が小さい／ふりがなと漢字の間隔が広い」との
   ご指摘。プレミアム側は実機で«OK»をいただいた数値なので触らず、
   こちらだけ独立して調整できるように分離した。
   ① 文字を全体的に大きくして視認性を上げる
   ② ふりがなは漢字にもっと寄せる（-0.25em → -0.5em）
   ふりがなの大きさは9px固定。本文を大きくしても
   ふりがなだけが不釣り合いに大きくならないようにするため。
   ══════════════════════════════════════════════════════════════ */
#exam-guide-screen rt {
  color: #ffe680 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85) !important;
  line-height: 1 !important;
  position: relative !important;
  top: -0.04em !important;
  font-size: 9px !important;
  font-weight: 700 !important;
}
@supports (-webkit-touch-callout: none) {
  /* iPhoneのSafariは top が効かないので margin-bottom で漢字に寄せる。
     -0.5em × 9px ≒ -4.5px（プレミアム側の -0.25em×8.8px ≒ -2.2px より
     約2.3px 詰まる）。実機でまだ広ければ -0.6em 方向、
     近すぎ・重なるようなら -0.4em 方向へ微調整すること。 */
  #exam-guide-screen rt {
    top: 0 !important;
    margin-bottom: -0.5em !important;
  }
}
/* ふりがなが漢字の上に乗るぶん行が高くなるので、行間を確保して
   «上の行と近すぎる» のを防ぐ（他の画面と同じ考え方）。 */
#exam-guide-screen ruby {
  ruby-position: over;
}

/* ══════════════════════════════════════════════════════════════
   ★2026-08-27 ガチャ画面（#gacha-screen）のふりがな
   受験申込ガイドで «OK» をいただいた数値をそのまま使う。
   （9px固定・iOSは margin-bottom:-0.5em で漢字に寄せる）
   最初これを入れ忘れて、ブラウザ既定のふりがなになり
   «字間が開いて読みにくい» 状態になっていた。
   ══════════════════════════════════════════════════════════════ */
#gacha-screen rt,
#gc-choose rt {
  color: #ffe680 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85) !important;
  line-height: 1 !important;
  position: relative !important;
  top: -0.04em !important;
  font-size: 9px !important;
  font-weight: 700 !important;
}
@supports (-webkit-touch-callout: none) {
  #gacha-screen rt,
  #gc-choose rt {
    top: 0 !important;
    margin-bottom: -0.5em !important;
  }
}
#gacha-screen ruby,
#gc-choose ruby {
  ruby-position: over;
}
/* 金色のボタンの上では ふりがなが白飛びするので、濃い色にする */
#gacha-screen #gc-pull rt {
  color: #5a3d0a !important;
  text-shadow: none !important;
}
/* ★2026-09-25 ポイントが足りなくて押せないとき（灰色）は、こげ茶のふりがなが見えないので 文字と同じ色に */
#gacha-screen #gc-pull:disabled rt,
#gacha-screen #gc-pull[disabled] rt {
  color: inherit !important;
}
/* ★2026-08-26 追加：ゲート画面（非プレミアム時）の案内文
   「この機能はプレミアム限定です」の<p>だけが、上のfont-size固定リストに
   入っておらず、ブラウザ既定のふりがなサイズのまま margin-bottom:-0.25em
   を受けていたため、カード見出しなどとは違う挙動になり「間隔が広すぎる」
   状態になっていた（トモさんのご指摘）。文字サイズはカード見出し
   （1.1rem）に近い本文サイズなので、実機で«OK»確認済みのカード見出しと
   まったく同じ組み合わせ（font-size:8.8px + margin-bottom:-0.25em）に
   揃える。h1のような追加の強め調整（-0.7em）はここでは行わない
   （h1ほど文字が大きくないため、同じ現象が起きるとは限らない）。 */
#premium-tools-screen .pt-gate-desc rt {
  font-size: 8.8px !important;
}
/* ★2026-08-26 追加（2回目）：font-size:8.8pxを揃えただけでは
   「まだ少し離れている」との実機フィードバック（トモさん）。
   h1ほど大きな差ではない（「明らかな隙間」ではなく«少し»）ため、
   h1の-0.7emほど強くはせず、確認済みの-0.25emと-0.7emの中間に近い
   -0.42emを試す。実機で見て、まだ離れていれば-0.55em方向、
   今度は近すぎればー0.32em方向へ、少しずつ再調整すること。 */
@supports (-webkit-touch-callout: none) {
  #premium-tools-screen .pt-gate-desc rt {
    margin-bottom: -0.42em !important;
  }
}

@media (max-width: 600px) {
  /* ふりがなは «漢字の上» に出るぶん行が高くなる。
     折り返した行が上の行に近づきすぎないよう、手引きと同じ 1.95 にする。 */
  #premium-tools-screen p,
  #premium-tools-screen li,
  #premium-tools-screen td,
  #premium-tools-screen th,
  #premium-tools-screen button,
  #premium-tools-screen label,
  #premium-tools-screen h1,
  #premium-tools-screen h2,
  #premium-tools-screen h3 {
    line-height: 1.95 !important;
  }
  /* 左上の «戻る» は1行の小さなボタンなので、行間はそのまま */
  #premium-tools-screen .ov-back-btn { line-height: 1.2 !important; }

  /* 下部の言語バー（下から16px・高さ約52px）と中身が重ならないようにする。
     ★2026-08-26 修正：110pxだと中身の枠〜言語バーの実測すき間が約70pxもあり、
     他画面（過去問・模擬試験など、実測で約30pxに詰めた）よりかなり広かった
     （トモさん指摘）。同じ約30pxになるよう70pxに調整。 */
  html body.pt-open #premium-tools-screen {
    padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* 📣 報告ボタンを学習ツールでも出す（他の画面と同じ左下）。
     この画面はトップ画面から開くため body.is-title-screen が付いたままで、
     «タイトルでは📣を隠す» 指定に巻き込まれて消えていた。
     料金プラン・手引き・苦手克服と同じ直し方。
     画面が z-index 50000 なので、その手前に出す。 */
  html body.pt-open #feedback-fab {
    display: flex !important;
    z-index: 100004 !important;
  }
  /* ★2026-08-26 追加：受験申込ガイドでも📣報告ボタンを出す。
     学習ツール（pt-open）とまったく同じ理由・同じ直し方。
     この画面もタイトルから開くため body.is-title-screen が付いたままで、
     «タイトルでは📣を隠す» 指定に巻き込まれて消えていた
     （実測で display:none を確認）。
     言語バーも、念のためここで明示的に表示を保証しておく。 */
  html body.eg-open #feedback-fab {
    display: flex !important;
    visibility: visible !important;
    z-index: 100004 !important;
  }
  html body.eg-open #lang-toggle.lang-toggle {
    display: inline-flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 100005 !important;
  }
  /* ★2026-08-27 ガチャ画面（gc-open）も同じ理由で同じ指定が要る。
     タイトルから開くため body.is-title-screen が残り、
     «タイトルでは📣を隠す» 指定に巻き込まれて消えてしまうため。 */
  html body.gc-open #feedback-fab {
    display: flex !important;
    visibility: visible !important;
    z-index: 100004 !important;
  }
  html body.gc-open #lang-toggle.lang-toggle {
    display: inline-flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 100005 !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   ★2026-08-14 修正：背景画像が届くまでの «下の画面が透けて見える» 件
   ------------------------------------------------------------
   苦手克服の «苦手問題なし！» 画面を開いた直後、うしろのトップ画面
   （FREE／STANDARD／PREMIUM のメダルなど）が透けて見えていました。

   原因：この手の全画面は «半透明の暗幕 ＋ 背景写真» の2枚重ねです。
       background: linear-gradient(rgba(10,5,2,0.50), …), url(review_bg.jpg)
   写真（322KB）がまだ届いていない間は «半透明の暗幕だけ» になるので、
   その下（うしろの画面）が透けます。写真が届いた2回目以降は
   キャッシュから即座に出るため «いつもの背景» に戻ります。
   ＝一時的ですが、初めて開いた人には必ず起きる状態でした。

   直し方：写真の «さらに下» に不透明の下地色を敷きます。
   写真が届く前でも、届かなかった場合でも、うしろは絶対に透けません。
   （暗記カード・チュートリアル・AI先生の画面には元から下地色が
     入っていました。同じやり方に揃えます）
   ※色は各画像の暗い部分に合わせているので、見た目は変わりません。
   ══════════════════════════════════════════════════════════════ */
#review-empty-modal {
  background-color: #150c06 !important;   /* review_bg.jpg（炎の修練場）の暗部 */
}
body.has-review-banner #quiz-screen {
  background-color: #150c06 !important;
}
#premium-tools-screen {
  background-color: #0d0a24 !important;   /* premium_bg.jpg（夜空）の暗部 */
}

/* ══════════════════════════════════════════════════════════════
   ★2026-08-14 追加：チュートリアル（オンボーディング）画面
     ① ふりがなを手引きと同じ仕様にする
     ② 下部中央の言語切り替えバーと 📣報告ボタンを出す
   ------------------------------------------------------------
   ふりがなの値は手引き（#adventure-guide-modal）と同一です。
       文字の大きさ 0.58em ／ 太さ 700 ／ 行の高さ 1
       PC・Android（Chromium系）… top -0.04em
       iPhone（Safari）………………… margin-bottom -0.55em
   ※以前は js/onboarding.js が <style> を差し込んでいました。
     あちらは «あとから読まれる» ぶんCSSより強く、ここの設定が
     効かなくなるため、JS側の差し込みはやめてここにまとめています。
   色は元の配色を引き継ぎます（本文＝淡い金／見出し＝白）。
   ══════════════════════════════════════════════════════════════ */
#onboarding-modal rt {
  color: #ffe66d !important;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.85), 0 1px 2px rgba(0, 0, 0, 0.9) !important;
  opacity: 1 !important;
  line-height: 1 !important;
  position: relative !important;
  top: -0.04em !important;
  font-size: 0.58em !important;
  font-weight: 700 !important;
}
#onboarding-modal h2 rt { color: #fff !important; }
@supports (-webkit-touch-callout: none) {
  /* iPhone の Safari は top が効かないので margin-bottom で漢字に寄せる */
  #onboarding-modal rt {
    top: 0 !important;
    margin-bottom: -0.55em !important;
  }
}

@media (max-width: 600px) {
  /* ふりがなのぶん行が高くなるので、折り返した行が上の行に近づきすぎない
     よう、手引きと同じ 1.95 にする（見出しは1行なので少し控えめ） */
  #onboarding-modal .onb-body { line-height: 1.95 !important; }
  #onboarding-modal h2 { line-height: 1.6 !important; }

  /* 言語バー（下から16px・高さ約52px）と重ならないよう、
     カードを少し上げて高さも抑える */
  #onboarding-modal {
    align-items: flex-start !important;
    padding-top: 64px !important;
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
  }
  #onboarding-modal .onb-card {
    max-height: 100% !important;
  }

  /* ★2026-08-15「スキップ」の文字を大きく
       もとは 0.85rem（13.6px）で、下の「つぎへ」ボタンに比べて
       かなり小さく読みにくかったので 1.05rem（16.8px）にします。
       うすい紫（不透明度0.6）で «半透明» に見えていたので、
       あわせて 0.92 まで濃くしています。
       ※JS側のインライン指定より «!important» が優先されます。
       ※@media 内なので パソコン画面は 0.85rem のままです。 */
  #onboarding-modal .onb-skip {
    font-size: 1.05rem !important;
    color: rgba(226, 212, 255, 0.92) !important;
    font-weight: 700 !important;
    padding: 6px 4px !important;
    white-space: nowrap !important;
  }

  /* 📣 報告ボタンを出す（他の画面と同じ左下）。
     チュートリアルは z-index 70000 なので、その手前に出す。 */
  html body.onb-open #feedback-fab {
    display: flex !important;
    z-index: 100004 !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   ★2026-08-14 追加：魔法の暗記カード（#flashcard-screen）
   ふりがなの大きさ・位置は手引き（#adventure-guide-modal）と同一
       文字の大きさ 0.58em ／ 太さ 700 ／ 行の高さ 1
       PC・Android（Chromium系）… top -0.04em
       iPhone（Safari）………………… margin-bottom -0.55em
   色は下地に合わせて2種類（暗い面＝淡い金／羊皮紙の裏面＝焦げ茶）。
   ══════════════════════════════════════════════════════════════ */
/* «空の箱» はスマホでだけ高さを持たせる（PCの見た目は変えない） */
#flashcard-screen .fc-bottom-spacer { height: 0; }

#flashcard-screen rt {
  color: #ffe680 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85) !important;
  line-height: 1 !important;
  position: relative !important;
  top: -0.04em !important;
  font-size: 0.58em !important;
  font-weight: 700 !important;
}
/* カードの裏面は羊皮紙（明るい）なので、手引きと同じ焦げ茶にする */
#flashcard-screen #fc-back rt {
  color: #7a5527 !important;
  text-shadow: none !important;
}
@supports (-webkit-touch-callout: none) {
  /* iPhone の Safari は top が効かないので margin-bottom で漢字に寄せる */
  #flashcard-screen rt {
    top: 0 !important;
    margin-bottom: -0.55em !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   暗記カード — スマホだけの調整（PC＝601px以上は一切変わりません）
     ① 左上の «戻る» を他の画面と同じ寸法にそろえる
     ② «残り枚数» を右上に固定して、タイトルが1行まるごと使えるようにする
     ③ タイトル・説明・使い方の文字を大きくする
     ④ 上部の6言語ボタンを隠し、下部の共通バーに一本化する
        （PCは下部バーが出ない仕組みなので、上部のボタンを残します）
     ⑤ 📣報告ボタンを出す
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  /* ① 戻る：他画面と同じ padding 9px 20px ／ .95rem ／ letter-spacing .5px */
  #flashcard-screen .fc-back-btn {
    padding: 9px 20px !important;
    font-size: .95rem !important;
    letter-spacing: .5px !important;
    z-index: 200005 !important;
  }

  /* ② 残り枚数を右上に固定。横並びから外れるぶん、タイトルが広く使える */
  #flashcard-screen .fc-remaining-box {
    position: fixed !important;
    top: 16px !important;
    right: 16px !important;
    z-index: 200005 !important;
    min-width: 0 !important;
    padding: 4px 14px !important;
    border: 2px solid rgba(212, 175, 55, .9) !important;
    border-radius: 20px !important;
    background: linear-gradient(180deg, rgba(40,26,74,.95), rgba(22,14,40,.96)) !important;
    box-shadow: 0 4px 14px rgba(0,0,0,.55), 0 0 12px rgba(212,175,55,.28) !important;
    line-height: 1.15 !important;
  }
  #flashcard-screen .fc-remaining-label {
    color: #e8d9a8 !important;
    font-size: 0.72rem !important;
    letter-spacing: .5px !important;
    white-space: nowrap !important;
    line-height: 1.15 !important;
  }
  #flashcard-screen #fc-count {
    font-size: 1.05rem !important;
    line-height: 1.15 !important;
  }
  /* 横並びの «場所とり» はもう不要 */
  #flashcard-screen .fc-spacer { display: none !important; }
  /* 上の固定バー（戻る・残り枚数）の下から中身が始まるようにする */
  /* 画面自体の下余白（css/flashcard.css の padding:20px 15px 40px）は
     .fc-wrap の下余白と二重になり、すき間が 67px にならない。
     下余白は .fc-wrap 側に一本化する。 */
  #flashcard-screen {
    padding-bottom: 0 !important;
  }
  #flashcard-screen .fc-wrap {
    padding-top: 64px !important;
    /* すき間は下の «空の箱»（.fc-bottom-spacer）で作るので、ここは0にする。
       ★下余白（padding-bottom）では iPhone の Safari が
         スクロールの末端まで反映してくれないことがあり、
         «直したのに間隔が変わらない» となるため。 */
    padding-bottom: 0 !important;
  }
  /* 一番下（使い方の枠）から言語切り替えバーまでを 67px にそろえる。
     バーは画面の下から16px・高さ52pxなので 67+16+52＝135px。
     この 67px は1問1答・過去問・料金プランと同じ基準値。 */
  #flashcard-screen .fc-bottom-spacer {
    display: block !important;
    width: 100% !important;
    flex-shrink: 0 !important;
    /* まずは目安の値。開いたあとJS側（_fitBottomGap）が実測して
       «すき間27px» になるよう自動で微調整します。 */
    height: calc(95px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* カード表の «この言葉の意味は？» も小さかったので大きくする */
  #flashcard-screen .fc-front-label {
    font-size: 1.02rem !important;
    letter-spacing: 1px !important;
    line-height: 1.6 !important;
    margin-bottom: 10px !important;
  }

  /* カード面とボタンの «小さすぎて読めない» 文字を大きくする
       ・👆タップして答えを確認（カード表）
       ・まだ覚えていない／このカードを完了にする（ボタンの2行目）
       ・タップで戻る（カード裏） */
  #flashcard-screen .fc-front-hint,
  #flashcard-screen .fc-back-hint,
  #flashcard-screen .fc-btn-sub {
    /* ボタンの2行目は 480px 以下用のルールでも同じ大きさにしてある。
       ここは 481〜600px の端末でも同じになるようにするための保険。 */
    font-size: clamp(0.82rem, 3.3vw, 0.95rem) !important;
    line-height: 1.55 !important;
    opacity: 1 !important;
  }
  /* ★2026-08-14 カード表の枠：上下だけ金色の飾り線があり、左右は
     border が透明で «金色の枠が途切れて» 見えていた。四辺とも金色にする。 */
  #flashcard-screen #fc-front {
    border-color: #c9a84c !important;
  }

  /* ★2026-08-14 «覚えた！» ボタン：下地が黄色で白文字が読みにくかったので
     深い緑に変える。青（＝まだ覚えていない）と役割で色分けでき、
     白文字とのコントラストもはっきりする。枠は金色のまま。 */
  #flashcard-screen button[onclick^="FlashcardManager.gotIt"] {
    background: linear-gradient(150deg, #1a6b3c, #2a8b51, #35a861) !important;
    border-color: #ffd54a !important;
    box-shadow: 0 6px 24px rgba(26, 107, 60, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.45) !important;
  }
  #flashcard-screen button[onclick^="FlashcardManager.gotIt"] > div:nth-child(3) {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65) !important;
  }

  /* ★2026-08-14 «タップして答えを確認» が薄くて読みにくかったので濃くする
     （#888 の灰色 → 明るいクリーム色＋影） */
  #flashcard-screen .fc-front-hint {
    color: #e8dcc0 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
    opacity: 1 !important;
    font-size: 0.95rem !important;
  }
  /* 裏面（羊皮紙）は下地が明るいので、こちらは濃い茶色でくっきり */
  #flashcard-screen .fc-back-hint {
    color: #6b3410 !important;
    opacity: 1 !important;
    font-size: 0.95rem !important;
  }
  /* 表の «タップして答えを確認» は下端に固定表示なので、少し上げて余裕をとる */
  #flashcard-screen .fc-front-hint { bottom: 10px !important; }

  /* ③ 文字を大きく */
  #flashcard-screen .fc-title {
    font-size: 1.55rem !important;
    line-height: 1.35 !important;
  }
  #flashcard-screen .fc-desc {
    font-size: 1.02rem !important;
    line-height: 1.95 !important;
    margin-top: 6px !important;
  }
  #flashcard-screen .fc-guide-title {
    font-size: 1.08rem !important;
    line-height: 1.6 !important;
    margin-bottom: 9px !important;
  }
  #flashcard-screen .fc-guide-body {
    font-size: 0.97rem !important;
    line-height: 2.05 !important;
  }

  /* ④ 上部の6言語ボタンを隠す（下部の共通バーに一本化） */
  #flashcard-screen .fc-lang-row { display: none !important; }

  /* 言語バーはヘッダーの中にある。暗記カードは z-index 200000 の全画面なので、
     ヘッダーごとその手前に上げる（ヘッダーは重なりの «部屋» を作るため、
     中の言語バーだけ上げても外へ出られない） */
  html body.fc-open.ov-lang-bottom .app-header,
  html body.fc-open.ov-lang-bottom .lang-toggle {
    z-index: 200010 !important;
  }
  html body.fc-open.ov-lang-bottom .lt-native-menu {
    z-index: 200011 !important;
  }

  /* ⑤ 📣 報告ボタンを出す（他の画面と同じ左下） */
  html body.fc-open #feedback-fab {
    display: flex !important;
    z-index: 200010 !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   ★2026-08-14 追加：お知らせ（#pq-ann-modal）
     下部中央の言語切り替えバーと 📣報告ボタンを、他の画面と同じように出す。
     お知らせは z-index 100000 の全画面なので、その手前に上げる。
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  html body.ann-open.ov-lang-bottom .app-header,
  html body.ann-open.ov-lang-bottom .lang-toggle {
    z-index: 100020 !important;
  }
  html body.ann-open.ov-lang-bottom .lt-native-menu {
    z-index: 100021 !important;
  }
  html body.ann-open.ann-open #feedback-fab {
    display: flex !important;
    z-index: 100020 !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   ★2026-08-14 追加：プラン詳細（FREE／STANDARD／PREMIUM のメダル）
     ・下部中央の言語切り替えバーと 📣報告ボタンを他の画面と同じように出す
     ・「✨ プランを選んで冒険を始めよう」はタイトル画面の案内なので、
       この画面を開いている間は隠す（下部の言語バーと場所が重なるうえ、
       押すとプランが次々切り替わる動きは気づきにくいため）
     ・上下に余白をとって、Back と言語バーに中身がかからないようにする
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  html body.md-open.ov-lang-bottom .app-header,
  html body.md-open.ov-lang-bottom .lang-toggle {
    z-index: 100020 !important;
  }
  html body.md-open.ov-lang-bottom .lt-native-menu {
    z-index: 100021 !important;
  }
  html body.md-open.md-open #feedback-fab {
    display: flex !important;
    z-index: 100020 !important;
  }
  /* タイトル画面の案内ボタンは、この画面のあいだだけ隠す。
     «#title-screen #title-plan-hint»（ID2つ）で display:inline-flex が
     当たっているので、こちらもID2つ＋クラスにして必ず勝つようにする。 */
  html body.md-open #title-screen #title-plan-hint {
    display: none !important;
  }
  /* 上は Back のぶん、下は言語バーのぶんを空ける。
     index.html の <style> があとから読まれるので、
     クラスを足して «強さ» で勝たせる。 */
  /* パネルの下端から言語バーまでを 27px にそろえる（他モードと同じ基準）。
     バーは «下から16px・高さ52px» なので、下の余白は 27+16+52＝95px。
     高さは «数値で決め打ち» せず、余白を引いた残りに自動で収める：
       ・モーダルを縦並びにして上ぞろえ
       ・パネルは flex:0 1 auto ＋ min-height:0 で «残りに収まる» ようにする
       ・元の max-height（100vh-90px）は邪魔になるので解除
     こうするとタブの高さが変わっても、すき間は27pxのままになる。 */
  html body.md-open #mode-detail-modal {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 72px 20px calc(95px + env(safe-area-inset-bottom, 0px)) !important;
  }
  html body.md-open #mode-detail-modal .mode-detail-panel-wrap {
    flex: 0 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
  }
  html body.md-open #mode-detail-modal .mode-detail-panel {
    max-height: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   ★2026-08-14 プラン詳細（メダル）— タブとふりがな
   ══════════════════════════════════════════════════════════════ */
/* パネルの上のタブ。3つ並べて、いま見ているプランを光らせる */
#mode-detail-tabs {
  display: flex;
  gap: 6px;
  width: 100%;
  max-width: 480px;
  margin: 0 auto 10px;
  flex: 0 0 auto;
}
#mode-detail-tabs .md-tab {
  flex: 1 1 0;
  min-width: 0;
  padding: 9px 4px;
  border-radius: 14px;
  border: 2px solid rgba(255, 255, 255, 0.28);
  background: linear-gradient(180deg, rgba(30, 22, 56, .92), rgba(18, 13, 36, .96));
  color: rgba(255, 255, 255, 0.62);
  font-family: inherit;
  font-weight: 900;
  font-size: 0.82rem;
  letter-spacing: .5px;
  white-space: nowrap;
  cursor: pointer;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .7);
  transition: all .15s;
}
/* いま見ているプランは、そのプランの色で光らせる */
#mode-detail-tabs .md-tab.active { color: #fff; }
#mode-detail-tabs .md-tab.free.active {
  background: linear-gradient(180deg, #2f9e57, #14713a);
  border-color: #6ee7a0;
  box-shadow: 0 4px 14px rgba(20, 113, 58, .6);
}
#mode-detail-tabs .md-tab.standard.active {
  background: linear-gradient(180deg, #2f8fe0, #0b4fa6);
  border-color: #7cc4ff;
  box-shadow: 0 4px 14px rgba(11, 79, 166, .6);
}
#mode-detail-tabs .md-tab.premium.active {
  background: linear-gradient(180deg, #e0b53a, #a07818);
  border-color: #ffe07a;
  box-shadow: 0 4px 14px rgba(160, 120, 24, .6);
}

/* ふりがなは手引き（#adventure-guide-modal）と同じ設定にそろえる。
   これまで «0.55em／行の高さ1.2» だったため、ふりがなが付いた文字だけ
   1段下がって見えていた。行の高さを1にすると段差が出なくなる。
       文字の大きさ 0.58em ／ 太さ 700 ／ 行の高さ 1
       PC・Android（Chromium系）… top -0.04em
       iPhone（Safari）………………… margin-bottom -0.55em */
#mode-detail-modal rt {
  color: #ffe66d !important;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.85), 0 1px 2px rgba(0, 0, 0, 0.9) !important;
  opacity: 1 !important;
  line-height: 1 !important;
  position: relative !important;
  top: -0.04em !important;
  font-size: 0.58em !important;
  font-weight: 700 !important;
}
@supports (-webkit-touch-callout: none) {
  #mode-detail-modal rt {
    top: 0 !important;
    margin-bottom: -0.55em !important;
  }
}
/* ふりがな付きの文字だけ «1段下がる» のを防ぐ。
   ruby を親の行に揃えることで、付いていない文字と同じ高さに並ぶ。 */
#mode-detail-modal ruby {
  line-height: 1 !important;
  vertical-align: baseline !important;
}
/* 見出し（例「まずは品質を体感する旅立ちの装備」）だけ、ふりがなが付いた
   文字が1段下がって見えていた。
   この行は要素に直接 line-height:1.7 が !important 付きで書かれていて
   （＝CSSからは上書きできない）、しかも display:flex で中央ぞろえのため、
   ふりがなの高さがルビの行に収まりきらず、下の文字が押し下げられていた。
   ルビ側の行の高さを 2.2 にして «ふりがなを行の中に収める» と段差が消える。
   実測：2.0→1px ／ 2.2→0px ／ 2.4→-1px。 */
#mode-detail-modal .mode-description ruby {
  line-height: 2.2 !important;
}

@media (max-width: 600px) {
  #mode-detail-tabs .md-tab { font-size: 0.78rem; padding: 8px 2px; }
  /* ふりがなのぶん行が高くなるので、折り返しが近づきすぎないようにする */
  #mode-detail-modal .mode-description { line-height: 1.95 !important; }
}

/* ══════════════════════════════════════════════════════════════
   ★2026-08-15 1問1答の問題画面：ふりがなが漢字から離れていた
   ------------------------------------------------------------
   【ご指摘】
     1問1答の問題文のふりがなだけ、漢字から少し離れて見える。
   【原因】
     css/ichimoni.css の指定は
         font-size .55em ／ line-height 1.2 ／ 位置の指定なし
     で、手引きで決めた «寄せ» の指定（Safari の margin-bottom）が
     入っていなかった。手引き・苦手克服・暗記カードなどは
         Chromium … top -0.04em
         Safari   … margin-bottom -0.55em（≒4.8px 引き寄せ）
     で漢字に寄せてあるため、1問1答だけ 約4.8px 分 上に浮いていた。
   【やったこと】
     手引きと同じ仕様に合わせる（色と縁取りは1問1答のまま）。
       文字の大きさ 0.55em → 0.58em ／ 行の高さ 1.2 → 1
       Chromium：top -0.04em ／ Safari：margin-bottom -0.55em
   【安全のため】
     @media (max-width:600px) の中だけなので パソコン画面は変わりません。
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  #ichimoni-screen ruby rt {
    font-size: 0.58em !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    position: relative !important;
    top: -0.04em !important;
  }
}
@supports (-webkit-touch-callout: none) {
  @media (max-width: 600px) {
    /* Safari は top が効かないので margin-bottom で寄せる（他画面と同じ値） */
    #ichimoni-screen ruby rt {
      top: 0 !important;
      margin-bottom: -0.55em !important;
    }
  }
}

/* ══════════════════════════════════════════════════════════════
   ★2026-08-15 模擬試験・過去問：ふりがなが漢字から離れていた
   ------------------------------------------------------------
   1問1答とまったく同じ原因です。
   css/mock_exam.css・css/past_exam.css の指定は
       font-size .55em ／ line-height 1.2 ／ 位置の指定なし（static）
   で、手引きで決めた «寄せ» が入っていませんでした。
   iPhone（Safari）は top が効かないため、他の画面は
       margin-bottom -0.55em（≒4.8px）
   で漢字に引き寄せています。この2画面だけそれが無く、
   約4.8px ぶん上に浮いて見えていました。

   ※ 色（羊皮紙の上は黒／暗い背景では金色）と縁取りは
      それぞれの画面のまま変えていません。位置と大きさだけ揃えます。
   ※ @media (max-width:600px) の中だけなので パソコン画面は変わりません。
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  #mock-exam-screen ruby rt,
  #past-exam-screen ruby rt {
    /* ★2026-08-16 0.58em → 0.61em。
         1問1答も 指定は 0.58em ですが、あちらは «ふりがなの親» が
         17.6px なので 実際には 10.208px で表示されます。
         過去問・模擬試験の親は 16.8px なので 同じ 0.58em だと
         9.744px にしかならず、1問1答より小さく、漢字との
         すき間も広く見えていました（実測 ・1.63 対 ・0.59）。
         0.61em にすると 10.25px となり 1問1答とほぼ同じになります。 */
    font-size: 0.61em !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    position: relative !important;
    top: -0.04em !important;
  }
}
@supports (-webkit-touch-callout: none) {
  @media (max-width: 600px) {
    /* Safari は top が効かないので margin-bottom で寄せる（他画面と同じ値） */
    #mock-exam-screen ruby rt,
    #past-exam-screen ruby rt {
      top: 0 !important;
      margin-bottom: -0.55em !important;
    }
  }
}

/* ══════════════════════════════════════════════════════════════
   ★2026-08-15 模擬試験 問題画面の調整（スマホのみ）
   ------------------------------------------------------------
   ① 下部に共通の言語切り替えバーを設置（画面の中の切替は隠す）
   ② ヘッダーと問題の間が空きすぎ（実測70px）→ 詰める
   ③ 下のボタン列：「後で見直す」が2行 → 1行に。
      ←と次への外側に余っていたすき間も使って横幅を確保
   ④ ボタン列から言語バーまでの間隔を他モードと揃える
   ※ すべて @media (max-width:600px) の中なので パソコン画面は変わりません
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {

  /* ① 画面の中にあった «日本語｜母国語» の切替は、下の共通バーに統一 */
  html body.mock-open #mock-exam-screen .mock-lang-switcher {
    display: none !important;
  }

  /* ② ヘッダーと問題の間
       ★2026-08-16 修正：ここを «問題画面のときだけ» に限定しました。
       ------------------------------------------------------------
       ・問題画面（body.mock-open）… 上にあるのは模擬試験専用ヘッダーで
         position:sticky ＝ その場所を自分で占めるため、
         mock_exam.css の70pxはまるごと余分。14pxで足りる。
       ・選択画面／結果画面 … 上にあるのは «画面に固定» のグローバル
         ヘッダー（◀Back・LV・♪・⚔・⏱・ITEM／高さ64px）。
         こちらは場所を占めないので、70pxの余白が無いと
         「模擬試験」の見出しがヘッダーの下に隠れます
         （実測：14pxにしていたため 42px ぶん隠れていました）。 */
  html body.mock-open #mock-exam-screen .mock-exam-container {
    padding-top: 14px !important;
  }
  html body:not(.mock-open) #mock-exam-screen .mock-exam-container {
    padding-top: 70px !important;
  }

  /* ③ 下のボタン列 */
  #mock-exam-screen .mock-exam-actions {
    /* ←の左と 次へ の右に余っていた «画面のふち» まで使う
       （コンテナの内側16px＋画面の内側15px のうち20pxぶん） */
    margin-left: -20px !important;
    margin-right: -20px !important;
    gap: 6px !important;
  }
  /* 全部のボタンを1行に。文字は折り返さない */
  #mock-exam-screen .mock-exam-actions > button {
    white-space: nowrap !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
  }
  /* 「🚩 後で見直す」＝2行になっていた本体 */
  #mock-exam-screen .mock-exam-actions .mock-exam-review-btn {
    padding: 10px 10px !important;
    font-size: 0.84rem !important;
  }
  #mock-exam-screen .mock-exam-actions .mock-exam-clear-btn {
    padding: 10px 10px !important;
    font-size: 0.84rem !important;
  }
  /* ←（前へ）と 次へ：内側の余白を少し詰めて場所を空ける */
  #mock-exam-screen .mock-exam-actions > button:first-child {
    padding: 11px 14px !important;
  }
  #mock-exam-screen .mock-exam-actions > button:last-child {
    padding: 11px 16px !important;
  }
  /* ⏸中断 */
  #mock-exam-screen .mock-exam-actions > button[onclick*="suspend"] {
    padding: 10px 10px !important;
    font-size: 0.84rem !important;
  }

  /* ④ ボタン列 → 言語切り替えバー の間隔を 1問1答 と同じにする
        実測（一番下まで送った状態・440×796）：
          1問1答  最後のボタン下端 673 → バー上端 728 ＝ 55px
          模擬試験 ボタン列の下端  647 → バー上端 728 ＝ 81px（26px 広い）
        画面の padding-bottom を 120px → 94px にして 55px に合わせる。
        ※ body.mock-open を付けて «問題画面のときだけ» にしています。
          選択画面・結果画面の 120px（以前調整ずみ）は変えません。 */
  html body.mock-open #mock-exam-screen {
    padding-bottom: calc(94px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   ★2026-08-15 1問1答 問題画面の読みやすさ調整（スマホのみ）
   ------------------------------------------------------------
   ① 上の «第38回（2026年）｜○○» が小さかった（実測 11.52px）。
      横は幅いっぱい（394px）空いているので大きくする。
   ② キャラクターの下の «○×の文»（.option-text）は
      16.8px・太さ400 で、問題文（17.6px・太さ700）より細かった。
      問題文と同じにそろえる。
   ③ 回答後の解説（#ichimoni-feedback）も 15.2px・太さ400 だったので
      同じにそろえる。ただし【正解】などの見出しは 900 にして
      本文と区別がつくようにする。
   ④ 一番下の «任意：押さなければ「知ってた」扱い…» を大きく。
   ※ すべて @media (max-width:600px) の中なので パソコン画面は変わりません
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  /* ① 第38回（2026年）｜科目名 */
  #ichimoni-q-card .subject-tag {
    font-size: 1rem !important;          /* 11.52px → 16px */
    line-height: 1.75 !important;
    /* もとは «1行に固定＋はみ出しは切り捨て»（nowrap + overflow:hidden）。
       文字を大きくしたぶん、科目名が長い言語で末尾が切れる恐れがあるので、
       切らずに折り返すようにしておく（ふだんは1行のままです）。 */
    white-space: normal !important;
    overflow: visible !important;
  }

  /* ② ○×の文（問題文と同じ大きさ・太さ） */
  #ichimoni-option-card .option-text {
    font-size: 1.1rem !important;        /* 16.8px → 17.6px */
    font-weight: 700 !important;         /* 400 → 700 */
  }

  /* ③ 回答後の解説 */
  #ichimoni-feedback {
    font-size: 1.1rem !important;        /* 15.2px → 17.6px */
    font-weight: 700 !important;         /* 400 → 700 */
  }
  /* 【正解】【不正解】などの見出しは、本文が太くなったぶん さらに濃く */
  #ichimoni-feedback > span:first-child,
  #ichimoni-feedback b,
  #ichimoni-feedback strong {
    font-weight: 900 !important;
  }

  /* ④ 「任意：押さなければ『知ってた』扱い。…」 */
  #ichimoni-confidence > div[style*="flex-basis"] {
    font-size: 0.95rem !important;       /* 0.8rem(12.8px) → 15.2px */
  }

  /* 🔊読み上げ中は色を変えて «押せている» ことが分かるようにする */
  #ichimoni-screen .audio-btn.speaking {
    background: #ffd700 !important;
    box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.45) !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   ★2026-08-16 ヘッダーのボタンが «キツすぎて押せない» 件（スマホのみ）
   ------------------------------------------------------------
   【実測（440px幅・変更前）】
     ◀Back 61×24 ／ LV 53 ／ BGM:OFF 71×20 ／ ▾ 12×17 ／
     MODE:NORMAL 109×20 ／ TIMER:OFF 81×20 ／ ITEM 39×20
     → 合計426px（画面440px）・ボタン同士のすき間はわずか1px。
       指の推奨サイズ44×44pxに どれも届いていませんでした。
       とくに «▾»（曲選び）は 12×17px。
   【やったこと】
     ① 表記を短く（JS側）：BGM: OFF → ♪ OFF ／ MODE: NORMAL → ⚔ NORMAL
        ／ TIMER: OFF → ⏱ OFF   … 約96px の余裕ができる
     ② 空いた場所を «▾» に回す（12px → 32px前後）
     ③ ヘッダーは高さ64pxなのにボタンは20pxで、上下に44pxも
        余っていた。ボタン自体を高くして指の当たりを広げる
   ※ すべて @media (max-width:600px) の中なので パソコン画面は変わりません
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  /* ③ ボタンを縦に大きく（ヘッダーの高さ64pxは変えない） */
  header.app-header .hdr-btn {
    padding: 8px 7px !important;
    font-size: 0.8rem !important;
    border-radius: 9px !important;
  }
  /* 当たり判定はさらに上下へ広げる（見た目は変わりません） */
  header.app-header .hdr-btn::after {
    top: -9px !important;
    bottom: -9px !important;
  }

  /* ② BGMの «▾»（曲を選ぶ）を指で押せる大きさに */
  header.app-header #bgm-pick-btn {
    position: relative !important;
    min-width: 36px !important;
    padding: 8px 7px !important;
    margin-left: 4px !important;
    font-size: 0.95rem !important;
    border-radius: 9px !important;
    border: 1px solid rgba(255,255,255,0.45) !important;
    background: rgba(0,0,0,0.38) !important;
    flex: 0 0 auto !important;
  }
  header.app-header #bgm-pick-btn::after {
    content: '';
    position: absolute;
    left: -6px;
    right: -6px;
    top: -9px;
    bottom: -9px;
  }

  /* ◀Back も他と同じ高さに揃える */
  header.app-header #hdr-back-btn {
    padding: 7px 9px !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   ★2026-08-16 模擬試験：ヘッダーに本文が «透けて» 重なって見える件
   ------------------------------------------------------------
   模擬試験のヘッダー（問1/125・回答済・タイマー・進捗バー）は
   前からある専用ヘッダーですが、背景が
       linear-gradient(rgba(15,8,35,0.98), rgba(20,10,40,0.95))
   と 2〜5% 透けており、さらに backdrop-filter が掛かっていました。
   スクロールすると 問題カード（明るい羊皮紙）がその下を通るため、
   ヘッダーの上に文字がうっすら重なって見えていました。
   （実測：一番上 y=2〜12px の位置で、ヘッダーの下に
     .mock-exam-question-card の ruby が来ていることを確認）
   スマホでは完全に不透明にして、透けを止めます。
   ※ @media (max-width:600px) の中だけなので パソコン画面は変わりません
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .mock-exam-header {
    background: linear-gradient(180deg, #100823 0%, #150a2a 100%) !important;
    background-color: #120926 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   ★2026-08-16 過去問 問題画面の調整（スマホのみ）
   ------------------------------------------------------------
   【実測（440px）】
     ・画面の中に «← ◀ Back» がもう1つある（y=139..169）。
       左上の共通◀Back と処理はまったく同じ（どちらも backToSelect）
       ＝ 完全な重複なので消す
     ・その行「📜第38回｜全問通し」12.48px ／「1 / 125」12.8px … 小さい
     ・問題文の上「第38回(2026年)｜人間の尊厳と自立」12px … 小さい
     ・選択肢 15.2px・太さ400 ／ 解説 14.4px・太さ400 … 細くて読みにくい
     ・「次の問題へ」y=679..734 に対し 言語バーが 728..780
       ＝ 6px 重なっていた（画面の下余白が62pxしかなかった）
   ※ すべて @media (max-width:600px) の中なので パソコン画面は変わりません
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  /* ① 重複した戻るボタンを消す */
  #past-exam-screen .past-exam-nav-back { display: none !important; }

  /* ② 「📜第38回｜全問通し」「1 / 125」の行 */
  #past-exam-screen .past-exam-nav-mode {
    font-size: 1.02rem !important;
    line-height: 1.75 !important;
  }
  #past-exam-screen .past-exam-nav-counter {
    font-size: 1.02rem !important;
    font-weight: 800 !important;
  }

  /* ③ 問題文の上の «第38回（2026年）｜人間の尊厳と自立» */
  #past-exam-screen .past-exam-question-meta {
    font-size: 1rem !important;
    line-height: 1.75 !important;
    white-space: normal !important;
    overflow: visible !important;
  }

  /* ④ 問題文・選択肢・解説を «1問1答とまったく同じ» にそろえる
        【1問1答の実測値（440px・これが一番見やすいとのご指摘）】
          問題文 16.8px（1.05rem）／太さ700／行の高さ 1.5
          解説   17.6px（1.10rem）／太さ700／行の高さ 2.2
          ふりがな 0.58em／太さ700／行1／top −0.04em（iPhoneは mb −0.55em）
        過去問はこれまで 17.28px／行1.7 だったため、
        ふりがなと漢字が «くっつきすぎ»（すき間 −2.61px。1問1答は −0.59px）
        になっていました。行の高さもそろえて解消します。 */
  #past-exam-screen .past-exam-question-text,
  #past-exam-screen .past-exam-option-text {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
  }
  #past-exam-screen #past-exam-feedback,
  #past-exam-screen .past-exam-feedback {
    /* ★2026-08-16 «1問1答と同じ» 17.6px（1.1rem）／太700／行2.2 にそろえました */
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    /* ★2026-08-16 修正：1行の高さを 1.6 → 1.85 に。
         【なぜ】文字を大きく太くしたのに 1行の高さが 1.6 のままだったので、
         1行目の «ふりがな» が行の外へ 6〜7px はみ出し、
         赤／緑のわく線に乗って «上半分が切れて» 見えていました。
         同じカードでも、行の高さを 1.75 にしてある
         «第38回(2026年)|人間の尊厳と自立» の行は はみ出し 0px です
         （実測で確認）。ここも同じ考え方でそろえます。
         ※ただし行の高さだけでは 1行目のふりがなを 行の中に
           収めきれません（実測：1.6で6px → 1.85でも4px はみ出す）。
           «ふりがな1個ぶん» の余白を カードの上に足して、
           わく線に絶対に触れないようにします。 */
    line-height: 2.2 !important;
    padding-top: 28px !important;
  }
  /* ★2026-08-16 «解説の本文» そのもの。
       【判明したこと】これまで大きくできていたのは «❌不正解… 正解は3です» の
       見出し行だけで、本文は中の <span style="font-size:0.85rem"> のままでした。
       実測：見出し 16.32px／行の高さ 28.56px に対して
             本文    13.6px ／行の高さ 23.8px
       本文の行が 23.8px しかないのに、ふりがな（7.9px）＋漢字（13.6px）で
       ほぼ埋まってしまうため、1行目のふりがなが «前の行» に食い込み、
       上半分が隠れて «見切れて» いました。
       文字を見出しと同じ大きさにし、行の高さも ふりがなが余裕で入る値にします。
       （以前いただいた «解説も問題文と同じ見やすさに» のご依頼も、
         ここが 13.6px のままだったので 半分しか届いていませんでした） */
  #past-exam-screen #past-exam-feedback .pe-exp-text,
  #past-exam-screen .past-exam-feedback .pe-exp-text {
    font-size: 1.1rem !important;
    line-height: 2.2 !important;
    opacity: 1 !important;
    display: inline-block !important;
    margin-top: 6px !important;
  }
  /* 【正解】【不正解】などの見出しは、本文が太くなったぶん さらに濃く */
  #past-exam-screen #past-exam-feedback b,
  #past-exam-screen #past-exam-feedback strong,
  #past-exam-screen .past-exam-feedback b,
  #past-exam-screen .past-exam-feedback strong {
    font-weight: 900 !important;
  }

  /* ⑤ 「次の問題へ」と言語バーの間隔を 模擬試験 とぴったり同じにする。
        【実測（440×796・最下部までスクロール）】
          1問1答 … 下余白115px／すき間53px
          模擬試験 … 下余白 94px／すき間26px   ← 下にボタンが来る作りが同じ
          過去問（前）… 下余白123px／すき間55px ← ここだけ広かった
        過去問も «最後がボタン» という点で模擬試験と同じ形なので、
        模擬試験と同じ 94px にそろえます（すき間26px）。
        ※ 選択画面の下余白62pxは «明るい図書館の背景では広く見える» という
          以前のご指摘で詰めた値なので、そのまま残します。
          問題を解いている間（body.pe-quiz）だけ切り替えます。 */
  html body.pe-quiz #past-exam-screen {
    padding-bottom: calc(94px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* ══════════════════════════════════════════════════════════
     m45　過去問の問題画面：下のすき間 と マスコット（そら・エマ）
       【前】
         ・回答前 … 選択肢の下に 15px の余白（.past-exam-options-list の
           margin-bottom）が付いたままなので、言語バーまで 70px。
           1問1答は 53px なので «ここだけ広い» 状態でした。
         ・そら と エマ（下から0・高さ60px＝y732〜792）が
           言語バー（y728〜780・z-index 9996）の «後ろ» に完全に隠れ、
           吹き出しだけが宙に浮いて見えていました。
       【後】
         ・15px の余白は «解説が出るとき» に付け替える。
           これで 回答前・回答後 とも 55px にそろいます。
         ・マスコットを言語バーの «上» のすき間に移し、
           46px にして 55px の空間にちょうど収める。
           指をふさがないよう pointer-events は完全に切ります。
     ※PCの表示は変わりません（この@media の中だけの指定です）
     ══════════════════════════════════════════════════════════ */
  html body.pe-quiz #past-exam-screen .past-exam-options-list {
    margin-bottom: 0 !important;
  }
  html body.pe-quiz #past-exam-screen #past-exam-feedback {
    margin-top: 15px !important;
  }

  /* ══════════════════════════════════════════════════════════
     m46　過去問の問題画面：そら・エマ を «解説の上に大きく数秒»
       【なぜ変えたか】
         下部に共通の言語切り替えバーが入ったことで、画面のすみには
         もう置き場所がありません。すき間に押し込むと 46px しか取れず、
         「小さすぎて表情が分からない」状態でした。
       【どうしたか】
         ・回答前は出しません。
         ・回答した瞬間に、解説カードの «真ん中に重ねて» 108px で表示。
         ・約2.8秒でゆっくり消え、3.4秒で片づきます（js/past_exam_mode.js）。
         ・重ねるだけなので解説の位置はズレません（スクロールも動きません）。
         ・指は一切ふさぎません（pointer-events: none）。
       【消し方に CSS アニメを使わない理由】
         アニメ頼みだと iPhone で始まらなかったときに «出っぱなし» になり
         解説が読めなくなります。JSのタイマー＋transition にしています。
     ※PCの表示は変わりません（この@media の中だけの指定です）
     ══════════════════════════════════════════════════════════ */
  /* ★2026-08-16 変更：数秒で消えるので «解説の中» に収める必要はない、
       というご判断をいただき、画面いっぱいの真ん中に大きく出す形にしました。
       解説カードの中に閉じ込めていた頃の 108px から 180px（1.7倍）へ。 */
  html body.pe-quiz #past-exam-mascots.pe-big {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: auto !important;
    height: auto !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0 !important;
    padding: 0 !important;
    z-index: 99999 !important;
    pointer-events: none !important;
    opacity: 1;
    transition: opacity 0.5s ease;
  }
  html body.pe-quiz #past-exam-mascots.pe-big.pe-big-out {
    opacity: 0 !important;
  }
  html body.pe-quiz #past-exam-mascots.pe-big .pe-mascot {
    /* ★2026-08-16 さらに拡大：180px → 220px（約1.2倍・当初108pxの2倍）。
       2体を «少しだけ重ねて» 並べることで、440pxの画面でも
       220px×2−14px＝426px と ぎりぎり収まります。
       360pxの端末では 180px×2−14px＝346px に自動で縮みます。 */
    width: min(50vw, 220px) !important;
    height: min(50vw, 220px) !important;
    pointer-events: none !important;
  }
  html body.pe-quiz #past-exam-mascots.pe-big .pe-mascot.pe-emma {
    margin-left: -14px !important;
  }
  html body.pe-quiz #past-exam-mascots.pe-big .pe-mascot-img {
    filter: drop-shadow(0 8px 20px rgba(0,0,0,0.85)) !important;
  }
  html body.pe-quiz #past-exam-mascots.pe-big .pe-mascot-bubble {
    font-size: 0.95rem !important;
    padding: 9px 14px !important;
    max-width: 190px !important;
    line-height: 1.9 !important;   /* ふりがなが上の行に触れない高さ */
  }
  html body.pe-quiz #past-exam-mascots.pe-big .pe-mascot.pe-sora .pe-mascot-bubble {
    bottom: 100% !important;
  }
  html body.pe-quiz #past-exam-mascots.pe-big .pe-mascot.pe-emma .pe-mascot-bubble {
    bottom: 86% !important;
  }

  /* ══════════════════════════════════════════════════════════
     m47　「📜 第38回 | 全問通し」を行の中央にそろえる
       画面内の戻るボタンを消したため、この文字は «右の 1/125 を
       のぞいた残り» の中央（＝全体では左寄り）に来ていました。
       【やり方】右の «1 / 125» と同じ幅の «見えない重し» を左端に置きます。
         左右が同じ重さになるので、まん中の文字は行の中央に来ます。
         重ねずに «並べている» だけなので、どの言語でも かぶりません
         （実測：絶対配置だと ph語で4pxかぶりました。この方式では0pxです）。
     ※PCの表示は変わりません（この@media の中だけの指定です）
     ══════════════════════════════════════════════════════════ */
  #past-exam-screen .past-exam-nav-bar::before {
    content: '';
    flex: 0 0 88px !important;
    height: 1px !important;
  }
  #past-exam-screen .past-exam-nav-counter {
    box-sizing: border-box !important;
    width: 88px !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
    text-align: center !important;
  }
  #past-exam-screen .past-exam-nav-mode {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    /* ★重要：ここは元々 «1行固定＋あふれたら…で省略» でした。
         左に重しを置くと 1行に必要な幅が 88px 増えるため、
         そのままだと行が縮めず、画面より横に広がってしまいます
         （実測：ID語440pxで35px、MY語360pxで90px はみ出しました）。
         折り返しを許すと はみ出しは 0px になり、
         しかも «…» で文字が消えることもありません。
         日本語・440pxでは今までどおり1行（バー高52px）のままです。 */
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
    line-height: 1.35 !important;
  }
}

@media (max-width: 600px) {
  /* ══════════════════════════════════════════════════════════
     m48　模擬試験の問題文・選択肢を «1問1答と同じ» にそろえる
       【1問1答の実測値（440px・これが一番見やすいとのご指摘）】
         問題文・選択肢 16.8px（1.05rem）／太さ700／行の高さ 1.5
       【模擬試験のこれまで】
         問題文 16px  ／太さ500／行1.7
         選択肢 15.2px／太さ500／行1.6   ← 細くて小さい
     ※PCの表示は変わりません（この@media の中だけの指定です）
     ══════════════════════════════════════════════════════════ */
  #mock-exam-screen .mock-exam-question-card {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
  }
  #mock-exam-screen .mock-opt-text {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
  }
  /* 🚩報告ボタンは «問題文の一部» ではないので、元の大きさのままにする */
  #mock-exam-screen .mock-exam-question-card .pq-report-wrap,
  #mock-exam-screen .mock-exam-question-card .pq-report-btn {
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
  }
}

@media (max-width: 600px) {
  /* ══════════════════════════════════════════════════════════
     m49　過去問の問題画面：①説明文の消し忘れ ②横のはみ出し
     ------------------------------------------------------------
     ① «第25〜38回を年度・科目別に5択で演習。» は 年度選択画面の説明文です。
        問題画面へ進むときの showSelectionUI(false) は
          年度グリッド／科目パネル／ヘッダー／背景の円
        の4つしか隠していないため、この1行だけ残っていました
        （実測：問題画面で 説明文=表示 のまま）。
     ② 問題文に «amyotrophic lateral sclerosis» のような
        途中で切れない長い英字が入ると、その1語の幅が
        «これ以上縮められない幅» になります。
        #past-exam-screen は縦並びの flex なので、中身が縮められないと
        箱ごと画面より広がり、overflow-x:hidden で右側が切り落とされます
        （実測：375pxで6px、360pxで21px はみ出し）。
        overflow-wrap:anywhere は «これ以上縮められない幅» を
        1文字ぶんまで下げるので、どんな長い語でも はみ出しません。
     ※PCの表示は変わりません（この@media の中だけの指定です）
     ══════════════════════════════════════════════════════════ */
  html body.pe-quiz #past-exam-screen .mode-desc-line {
    display: none !important;
  }

  /* ※ここで max-width:100% は付けません。
       付けると «わざと左右の余白まで広げている» 行（模擬試験のボタン列など）の
       負のマージンを打ち消してしまい、逆に狭くなります（実測で確認）。
       はみ出しを止めているのは min-width:0 と overflow-wrap の2つです。 */
  #past-exam-screen,
  #past-exam-screen > *,
  #past-exam-screen #past-exam-quiz-area,
  #past-exam-screen #past-exam-quiz-area > * {
    min-width: 0 !important;
  }
  #past-exam-screen .past-exam-question-text,
  #past-exam-screen .past-exam-question-meta,
  #past-exam-screen .past-exam-option-text,
  #past-exam-screen #past-exam-feedback,
  #past-exam-screen #past-exam-feedback .pe-exp-text,
  #past-exam-screen .past-exam-nav-mode,
  #mock-exam-screen .mock-exam-question-card,
  #mock-exam-screen .mock-opt-text {
    overflow-wrap: anywhere !important;
  }
  #mock-exam-screen,
  #mock-exam-screen > *,
  #mock-exam-screen .mock-exam-container,
  #mock-exam-screen .mock-exam-container > * {
    min-width: 0 !important;
  }
}

@media (max-width: 600px) {
  /* ══════════════════════════════════════════════════════════
     m50　模擬試験の下部ボタン列：文字が枠からはみ出すのを直す
     ------------------------------------------------------------
     【実測（440px・選択したあとの5個ならび）】
       行の位置 …… 左11px／右51px  ← 右だけ 51px も余っていた
       🚩後で見直す … 枠93px に対し 文字88px＋左右余白20px ＝ 15px不足
       選択を解除 …… 枠85px に対し 文字78px＋左右余白20px ＝ 13px不足
       （393pxでは30px・26px不足、360pxでは41px・36px不足）
     【なぜ右だけ余っていたか】
       行には «画面のふちまで使う» ための margin-right:-20px が
       入っていましたが、幅が親に合わせて確定してしまうため
       右のマイナスが効いていませんでした。
     【直し方】
       ① 幅を自前で決めて、左右とも同じだけ外へ広げる（+24px ずつ）
       ② ボタンの左右の余白を 10px → 6px、すき間を 6px → 4px に
       ③ 文字は画面幅に応じて 12.0〜13.4px に自動調整（clamp）
       これで 360px の端末でも 5個 すべて 1行に収まります。
     ※PCの表示は変わりません（この@media の中だけの指定です）
     ══════════════════════════════════════════════════════════ */
  #mock-exam-screen .mock-exam-actions {
    box-sizing: border-box !important;
    width: auto !important;
    max-width: none !important;
    margin-left: -24px !important;
    margin-right: -24px !important;
    gap: 4px !important;
    justify-content: flex-start !important;
  }
  /* ★2026-08-16 追加：«中断» と «次へ» の間だけ大きく空いていた件。
       «次へ» には margin-left:auto が直接書かれており、余った幅が
       まるごとその1か所に集まっていました（実測で右に約50px）。
       auto をやめ、余った幅は全ボタンで山分けして枠を広げます。 */
  #mock-exam-screen .mock-exam-actions > button:last-child {
    margin-left: 0 !important;
  }
  #mock-exam-screen .mock-exam-actions > button {
    white-space: nowrap !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    /* 440px・393px では 13.4px のまま。360px の端末だけ 11.2px まで
       自動で下がり、5個ならびでも1行に収まります（実測で確認）。 */
    font-size: clamp(0.66rem, 3.05vw, 0.84rem) !important;
  }
  #mock-exam-screen .mock-exam-actions .mock-exam-review-btn,
  #mock-exam-screen .mock-exam-actions .mock-exam-clear-btn,
  #mock-exam-screen .mock-exam-actions > button[onclick*="suspend"] {
    padding: 10px clamp(4px, 1.3vw, 6px) !important;
    /* ★この3つは «クラス名つき» の古い指定（0.84rem固定）が上に効いていて、
         上の button 向けの clamp が届いていませんでした。同じ強さで指定し直します。 */
    font-size: clamp(0.66rem, 3.05vw, 0.84rem) !important;
  }
  /* ← は矢印1文字なので伸ばしすぎず、指で押しやすい幅は確保する。
       440pxで約53px、360pxでも44px（Appleの推奨する最小の押しやすさ）。 */
  #mock-exam-screen .mock-exam-actions > button:first-child {
    flex: 0 1 auto !important;
    min-width: clamp(40px, 12vw, 56px) !important;
    padding: 11px clamp(8px, 2.4vw, 11px) !important;
  }
  #mock-exam-screen .mock-exam-actions > button:last-child {
    padding: 11px clamp(9px, 2.7vw, 12px) !important;
  }

  /* ══════════════════════════════════════════════════════════
     m51　問題画面では 左下の📣 を出さない
     ------------------------------------------------------------
     📣と🚩「この問題を報告」は、調べたところ «同じGoogleフォーム» を
     開いていました。違いは自動入力の有無だけで、
       🚩 … 回・問番号・科目・問題ID・画面・言語・種類 を自動で入れる
       📣 … 空のまま開く
     問題画面では🚩が上位互換で役割が重複するため、📣は隠します。
     （タイトルやその他の画面では今までどおり表示されます）
     目印 pq-q-screen は js/report_button.js が🚩を出したときに付き、
     js/overlay_marks_guard.js が «🚩が無くなったら» 外します。
     ══════════════════════════════════════════════════════════ */
  /* ★2026-08-17 方針変更：統一感のため «左下の📣に一本化» しました。
       m51 の «問題画面で📣を隠す» はやめ、代わりに🚩を隠します（下の m55）。 */
}

@media (max-width: 600px) {
  /* ══════════════════════════════════════════════════════════
     m52　RPGモードの 解説 と ふりがな を «1問1答» にそろえる
     ------------------------------------------------------------
     【実測（440px）】
                     1問1答（見本）        RPG（修正前）
       問題文        16.8px/700/行1.5      16.8px/700/行1.5   ← ここは一致していた
       ふりがな      10.21px すき間 -0.59  9.68px  すき間 -4.77 ← 漢字に食い込んでいた
       解説          17.6px/700/行2.2      15.2px/400/行2.2   ← 小さく細いまま
     ふりがなは top が +0.08em、margin-bottom が -0.4em という
     «下へ押す» 値になっていたため 4.77px も漢字に重なっていました。
     アプリ共通の値（0.61em／行1／top -0.04em、iPhoneは mb -0.55em）に戻します。
     ※PCの表示は変わりません（この@media の中だけの指定です）
     ══════════════════════════════════════════════════════════ */
  #quiz-screen .feedback-area {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    line-height: 2.2 !important;
  }
  #quiz-screen #question-card ruby rt,
  #quiz-screen .feedback-area ruby rt {
    font-size: 0.61em !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    position: relative !important;
    top: -0.04em !important;
    margin-bottom: 0 !important;
  }
}
@supports (-webkit-touch-callout: none) {
  @media (max-width: 600px) {
    /* iPhone の Safari は top が効かないので margin-bottom で漢字に寄せる */
    #quiz-screen #question-card ruby rt,
    #quiz-screen .feedback-area ruby rt {
      top: 0 !important;
      margin-bottom: -0.55em !important;
    }
  }
}

@media (max-width: 600px) {
  /* ══════════════════════════════════════════════════════════
     m53　模擬試験の下部ボタン：枠の余りを文字に回す
       実測（440px・選択後）：枠の中に 左右合わせて 10px ずつ余っていました。
       上限を 0.84rem(13.4px) → 1.0rem(16px) に上げ、余りを文字に回します。
       （狭い端末は これまでどおり画面幅に応じて自動で下がります）
     ══════════════════════════════════════════════════════════ */
  #mock-exam-screen .mock-exam-actions > button,
  #mock-exam-screen .mock-exam-actions .mock-exam-review-btn,
  #mock-exam-screen .mock-exam-actions .mock-exam-clear-btn,
  #mock-exam-screen .mock-exam-actions > button[onclick*="suspend"] {
    font-size: clamp(0.66rem, 3.4vw, 0.94rem) !important;
  }
}

@media (max-width: 600px) {
  /* ══════════════════════════════════════════════════════════
     m54　RPGモードの «選択肢の文» も 1問1答にそろえる
       前回 問題文と解説はそろえましたが、○×で答える «選択肢の文»
       （#breakdown-area .option-text）が残っていました。
       【実測（440px）】
         1問1答の見本 …… 16.8px／太700／行1.5
         RPGの選択肢 …… 16px ／太400／行1.95  ← 細くて小さい
     ※PCの表示は変わりません（この@media の中だけの指定です）
     ══════════════════════════════════════════════════════════ */
  #breakdown-area .option-text,
  #breakdown-area .option-card .option-text {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
  }
}

@media (max-width: 600px) {
  /* ══════════════════════════════════════════════════════════
     m55　報告ボタンを «左下の📣» に一本化する
     ------------------------------------------------------------
     【これまで】問題画面には🚩「この問題を報告」があり、左下の📣は隠していました。
     【これから】統一感のため 逆にします。
       ・🚩「この問題を報告」… 問題画面から消す
       ・左下の📣 …………………… 復活させ、アイコンの右に文字を入れる
     【押したときの中身は変わりません】
       📣は 問題画面にいるときだけ、🚩とまったく同じ
       «回・問番号・科目・問題ID を自動で入れた» 報告シートを開きます
       （js/boot/boot_08.js → PQReport.openForCurrent）。
       問題画面以外では これまでどおり空のフォームです。
     【幅の考え方（実測）】
       行幅428px のうち 言語バーが254px・☰が42px を使うので、
       📣に使えるのは «画面の半分 − 言語バーの半分 − ふち» ＝
       calc(50vw - 133px)。440pxで87px、393pxで63pxです。
       384px以下の狭い端末では文字を隠して 丸いアイコンに戻します。
     ※PCの表示は変わりません（この@media の中だけの指定です）
     ══════════════════════════════════════════════════════════ */
  .pq-report-wrap,
  .pq-report-btn {
    display: none !important;
  }

  #feedback-fab {
    width: auto !important;
    min-width: 42px !important;
    max-width: calc(50vw - 133px) !important;
    height: 46px !important;
    border-radius: 23px !important;
    padding: 0 8px !important;
    gap: 4px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
  }
  #feedback-fab .fab-icon {
    font-size: 1.15rem !important;
    line-height: 1 !important;
    flex: 0 0 auto !important;
  }
  #feedback-fab .fab-label {
    /* ★2026-08-17 «文字が小さい» とのご指摘で拡大。
         440pxで11.0px → 13.6px（+24%）。狭い端末は自動で下がります。 */
    font-size: clamp(0.68rem, 3.1vw, 0.92rem) !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    flex: 0 1 auto !important;
  }
  /* 狭い端末は言語バーとぶつかるので、文字は出さず丸いアイコンのまま */
  @media (max-width: 384px) {
    #feedback-fab { max-width: 46px !important; padding: 0 !important; }
    #feedback-fab .fab-label { display: none !important; }
  }
}

/* ★2026-08-17 PCは これまでどおり «📣だけの丸ボタン» に戻す。
     文字（.fab-label）は js が全画面共通で入れるため、
     PC幅では隠します（実測：48pxの丸に入りきらず文字が切れていました）。
     ※このファイルで数少ない «スマホ以外» の指定です。 */
@media (min-width: 601px) {
  #feedback-fab .fab-label { display: none !important; }
}

@media (max-width: 600px) {
  /* ══════════════════════════════════════════════════════════
     m56　📣報告ボタンの文字をもっと大きく
     ------------------------------------------------------------
     【なぜ工夫が要るか】
       下の行は «📣｜言語バー｜☰» の3つ。言語バーは画面のまん中に
       置かれているため、📣に使える左の空きは
         «画面の半分 − 言語バーの半分 − ふち»
       しかありません。440pxで87px、393pxでは63pxです。
       文字を大きくすると 393px では言語バーに触れてしまいました
       （実測：すき間 0px／ベトナム語では −1px）。
     【どう空けたか】
       言語バーの «右側» は ☰までに45pxも余っていました（実測）。
       そこで言語バーを右へ14pxだけ寄せ、その分を📣に回します。
       ☰との間隔は 440pxで31px、393pxで7px、360pxで11px 残ります。
     ══════════════════════════════════════════════════════════ */
  html body.ov-lang-bottom.ov-lang-bottom .lang-toggle {
    transform: translateX(calc(-50% + 14px)) !important;
  }
  /* ★2026-08-26 追加：上のルールは «画面共通の #lang-toggle と📣報告ボタン
     が同じ行で重ならないように、わざと14px右へ寄せる» という調整だが、
     .lang-toggle というクラスで指定されているため、見た目を揃えるために
     同じクラスを使っているログインモーダル専用の言語バー
     （#login-modal-lang-toggle）にも巻き込まれて適用されてしまい、
     画面の真ん中より右にズレて見えていた（トモさんのご指摘）。
     ログインモーダルには専用の📣報告ボタンが別にあり、この14pxの
     回避策は不要なので、id指定で真ん中（-50%ちょうど）に戻す。 */
  #login-modal-lang-toggle.lang-toggle {
    transform: translateX(-50%) !important;
  }
  #feedback-fab {
    max-width: calc(50vw - 126px) !important;
  }
}

@media (max-width: 600px) {
  /* ══════════════════════════════════════════════════════════
     m57　暗記カード：カードの中で文字が重なるのを直す（多言語）
     ------------------------------------------------------------
     【症状】外国語のとき、カード表面の翻訳ボックスの文が
       下の «👆 タップして答えを見る» に重なる。
       実測（フィリピン語・受容の例）：
         440px … 27px 重なり ／ 393px・360px … 40px 重なり
     【なぜ】
       ・カードは高さ固定（スマホでは250px）
       ・«👆…» のヒントは position:absolute; bottom:12px で
         カードの下端に貼り付いている
       ・外国語では翻訳ボックスに «訳語＋意味の全文» が入る
         （js/flashcard_manager.js 173行目）ため、中身が縦に伸びて
         ヒントの位置まで届いてしまう
       日本語だと意味は裏面にしか出ないので、この症状が出ませんでした。
     【直し方】
       ① カードを 250px → 320px に（実測でこの例は余裕をもって収まる）
       ② カードの下に «ヒント1行ぶん» の余白を必ず確保する
       ③ それでも足りない超長文のときは、翻訳ボックスだけが縮んで
          中でスクロールするようにする（ヒントには絶対に届かない）
     ※PCの表示は変わりません（この@media の中だけの指定です）
     ══════════════════════════════════════════════════════════ */
  #flashcard-screen #fc-inner {
    height: 334px !important;
  }
  #flashcard-screen #fc-front {
    padding-bottom: 38px !important;
  }
  /* 見出しと漢字は縮めない（読めなくなるため） */
  #flashcard-screen #fc-front .fc-front-label,
  #flashcard-screen #fc-term-jp {
    flex-shrink: 0 !important;
  }
  /* 翻訳ボックスだけを «余った高さに収まるまで» 縮める。
     min-height:0 を付けないと flex は中身より小さくなれません。 */
  #flashcard-screen #fc-term-foreign {
    min-height: 0 !important;
    flex-shrink: 1 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  /* 裏面も同じ考え方で、説明が長くても «👆…» に届かないようにする */
  #flashcard-screen #fc-back {
    padding-bottom: 26px !important;
  }
}

@media (max-width: 600px) {
  /* ══════════════════════════════════════════════════════════
     m58　2026-08-17 ご指摘 5件（スマホのみ／PCは変わりません）
     ------------------------------------------------------------
     ① 過去問の «選択肢のふりがな» が漢字に近い → 1問1答と同じ仕様に
     ② 過去問の «はみ出し» を止める（iPhoneのみ発生。実測はChromeで0px）
     ③ RPG：言語バーとのすき間を 過去問・模擬試験と同じ26pxに
     ④ RPG：ナビ行の «← 戻る» を消し、その行の文字を大きく
     ══════════════════════════════════════════════════════════ */

  /* ── ①「1問1答とまったく同じ仕様」にそろえる ──────────────
     【1問1答の実測値（Chrome・398px）＝これが見本】
       問題文（.q-content）… 17.6px（1.1rem）／太700／行の高さ 2.2
       選択肢（.option-text）… 17.6px（1.1rem）／太700／行の高さ 1.8
       ふりがな … 0.58em ＝ 10.208px／太700／行1
     【過去問はこうなっていた】
       問題文・選択肢 … 16.8px（1.05rem）／太700／行の高さ 1.5
       ふりがな … 0.61em ＝ 10.248px
     大きさはほぼ同じでも «1行の高さ» が 1.5 と狭かったため、
     iPhone（Safari）ではふりがなの置き場所が押し下げられ、
     漢字にくっついて見えていました。行の高さごと見本にそろえます。
     ※以前「問題文16.8px／行1.5」と書いたのは、1問1答の «外側の箱»
       (.question-text) を測ってしまったためです。実際に字が出ているのは
       その中の .q-content（17.6px／行2.2）でした。 */
  #past-exam-screen .past-exam-question-text,
  #mock-exam-screen .mock-exam-question-card {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    line-height: 2.2 !important;
  }
  #past-exam-screen .past-exam-option-text,
  #mock-exam-screen .mock-opt-text,
  #breakdown-area .option-text,
  #breakdown-area .option-card .option-text {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    line-height: 1.8 !important;
  }
  /* ふりがなの大きさも見本と1pxも違わないように 0.58em に統一。
     （親が17.6pxになったので 0.58em＝10.208px＝1問1答と同値） */
  #past-exam-screen ruby rt,
  #mock-exam-screen ruby rt,
  #question-text .q-content rt,
  #breakdown-area .option-text rt {
    font-size: 0.58em !important;
  }

  /* ── ② 過去問のはみ出し止め ────────────────────────────
     Chrome では 393/398/360px・6言語すべて はみ出し0pxでした。
     iPhone だけで出るので «Safariが横幅を計算しきれない» ケースを
     まとめてふさぎます。
       ・max-width:100% … 箱が親より広くなれないようにする
         （過去問だけに書きます。模擬試験のボタン列に付けると
           わざと広げている負のマージンを打ち消してしまうため）
       ・word-break … 古いSafariは overflow-wrap:anywhere を
         読み飛ばすことがあるので、同じ意味の指定を併記する
       ・ruby は «ふりがなつきの熟語» が1つの塊で折り返せず、
         長い熟語（例：筋萎縮性側索硬化症＝実測184px）のとき
         行から出ることがあるので、塊の中でも折り返せるようにする
         （RPGの問題文では以前から同じ指定をしています） */
  #past-exam-screen #past-exam-quiz-area,
  #past-exam-screen #past-exam-quiz-area > *,
  #past-exam-screen .past-exam-question-card,
  #past-exam-screen .past-exam-question-text,
  #past-exam-screen .past-exam-question-meta,
  #past-exam-screen .past-exam-option,
  #past-exam-screen .past-exam-option-text,
  #past-exam-screen #past-exam-feedback,
  #past-exam-screen #past-exam-feedback .pe-exp-text {
    max-width: 100% !important;
    word-break: break-word !important;
  }
  #past-exam-screen ruby,
  #mock-exam-screen ruby {
    white-space: normal !important;
  }

  /* ── ③ RPG：言語バーまでのすき間を他モードにそろえる ──────
     【実測（398px・いちばん下まで送った状態／«見えている下端»から）】
       1問1答 55px（余白115px）／過去問 26px（余白94px）
       模擬試験 26px　　　　　／RPG　　46px（余白86px）  ← 広い
     RPGだけ20px広かったので 86px → 66px にして26pxに合わせます。 */
  body #quiz-screen {
    padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* ── ④ RPGのナビ行：«← 戻る» を消して、残る文字を大きく ────
     【これまで（実測398px）】
       [← ◀ Back 13.1px] [⚔️ RPGモード:… 12.16px] [次の選択肢へ 1/1 12.48px]
       モード名は幅が足りず «人…» と省略されていました。
     «← 戻る» は「1つ前の選択肢へ」戻るボタンです。消すと
     その分（実測 約91px）が空くので、残る2つを 16.3px に大きくします。
     ※ヘッダーの «◀ Back»（マップへ戻る）は残ります。
     ※@media の中だけなので パソコン画面は変わりません。 */
  #quiz-screen .quiz-nav-bar > button {
    display: none !important;
  }
  /* «← 戻る» が出ない場面では、代わりに幅56pxの空きマスが
     置かれています。これも消して全部を文字に回します。
     ※«何番目か» ではなく «その場に書かれている style» で選びます。
       ボタンが有る場面と無い場面で並び順が変わるためです。 */
  #quiz-screen .quiz-nav-bar > span[style*="min-width:56px"] {
    display: none !important;
  }
  #quiz-screen .quiz-nav-bar {
    gap: 8px !important;
    padding: 7px 10px !important;
  }
  /* モード名（真ん中）：大きくして、入りきらない言語は折り返す */
  #quiz-screen .quiz-nav-bar > span[style*="flex:1"] {
    font-size: 1.02rem !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
    min-width: 0 !important;
  }
  /* 「次の選択肢へ 1 / 1」（右） */
  #quiz-screen .quiz-nav-bar > span:last-child {
    font-size: 1.02rem !important;
    line-height: 1.35 !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
  }

  /* ── ⑤ 🔊読み上げ中は どの画面でも色が変わるようにする ──────
     «押せているのか分からない» のを防ぐため、1問1答だけに付けて
     いた «読み上げ中の色» を全画面に広げます。 */
  .audio-btn.speaking {
    background: #ffd700 !important;
    box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.45) !important;
  }
}

@media (max-width: 600px) {
  /* ══════════════════════════════════════════════════════════
     m58-⑥　○×ボタンが画面から出てしまう（ビルマ語などで発生）
     ------------------------------------------------------------
     【実測】360px・ビルマ語のRPG …「✕ 間違い」のボタンが
       x=283..366（画面は360）で 6px 右にはみ出していました。
     【なぜ】ボタンは flex:1 で «縮む» 設定ですが、flex の初期値
       min-width:auto があるため «語の最小幅» より小さくなれません。
       ビルマ語は語の途中で折り返せないので、そこで止まって
       はみ出していました。
     【直し方】min-width:0 で «語の最小幅» の縛りを外し、
       語の中でも折り返せるようにします（日本語は1行のままです）。
     ※PCの表示は変わりません（この@media の中だけの指定です）
     ══════════════════════════════════════════════════════════ */
  .decision-buttons {
    min-width: 0 !important;
  }
  .decision-buttons > .btn-choice,
  .decision-buttons > button {
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
}

@media (max-width: 600px) {
  /* ══════════════════════════════════════════════════════════
     m59　2026-08-17 ご指摘 4件（スマホのみ／PCは変わりません）
     ------------------------------------------------------------
     ① 過去問「次の問題へ」ボタン：ふりがなが漢字に被る＋黄色地で読みにくい
     ② トップの «合格可能性» が縦に長すぎる（文字が1文字ずつ縦に並ぶ）
     ③ RPG結果画面のレイアウトがバラバラ
     ══════════════════════════════════════════════════════════ */

  /* ── ①-1 「次の問題へ」ボタン：1問1答と同じ «字の仕様» に ────
     【これまで】1.05rem／行の高さ指定なし（＝normal＝約1.2）。
       行がきつすぎて iPhone ではふりがなが漢字に食い込んでいました。
     【これから】1問1答の選択肢と同じ 1.1rem／太700／行1.8。
       ふりがなの大きさ（0.58em＝10.208px）は m58 でそろえ済みです。 */
  #past-exam-screen .past-exam-next-btn {
    font-size: 1.1rem !important;
    /* ★2026-08-17 800 → 700。
         読み込んでいる Noto Sans JP は 400/500/700 の3種類だけです。
         800 を指定すると «太さ700の字を機械的に太らせた偽ボールド» に
         なり、漢字の線が上下にふくらんで ふりがなとの間が
         詰まって見えていました。1問1答の選択肢と同じ700にします。 */
    font-weight: 700 !important;
    line-height: 1.8 !important;
    padding: 12px 14px !important;
    letter-spacing: 0 !important;
  }

  /* ── ①-2 黄色地で読みにくい ────────────────────────────
     金色の地（#d4af37〜#aa8c2c）に白文字は コントラスト比 2.1：1 しか
     なく、読みづらい状態でした（読みやすさの目安は 4.5：1 以上）。
     地の色はそのままに、文字を «こげ茶» に変えると 6.3〜9.8：1 に
     なります。羊皮紙の上の文字（#3a2808）と同じ色なので、
     過去問画面の雰囲気も変わりません。 */
  #past-exam-screen .past-exam-next-btn {
    color: #3a2808 !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) !important;
    /* 地の «下側» だけ ほんの少し明るく（#aa8c2c → #b8983a）。
       見た目はほぼ同じですが、こげ茶の文字とのコントラストが
       4.37：1（基準の4.5に届かない）→ 7.37：1 になります。 */
    background: linear-gradient(135deg, #d4af37, #b8983a) !important;
  }
  #past-exam-screen .past-exam-next-btn ruby rt {
    color: #3a2808 !important;
    text-shadow: none !important;
  }

  /* ── ② トップの «合格可能性» パネル ──────────────────────
     【症状】「🤝 人間関係とコミュニケーション」が1文字ずつ縦に
       並び、パネルの高さが 191px にもなっていた（実測・393px）。
       フィリピン語では逆に横へ 181px はみ出し、枠に切られて
       文字が読めませんでした（実測・パネル幅は176px）。
     【なぜ】弱点チップ（.pm-weak）が display:inline-flex のため、
       中の «科目名» が独立した箱として扱われ、幅96pxの列の中で
       «1文字まで» 縮められていました（flex の min-width:auto）。
     【直し方】チップを «ふつうの文» として折り返す形にし、
       長すぎるときは2行で「…」に切ります。パネルも 176→200px に
       広げて、日本語なら2行で全部入るようにしました。
       高さは 191px → 約100px になります。 */
  #pass-meter-home.pm-home {
    width: 216px !important;
    overflow: hidden !important;
  }
  #pass-meter-home .pm-info {
    width: 100% !important;
    min-width: 0 !important;
    align-items: stretch !important;
    gap: 4px !important;
  }
  #pass-meter-home .pm-row {
    width: 100% !important;
    min-width: 0 !important;
    justify-content: flex-start !important;
  }
  /* 信頼度バッジ：列の幅に合わせて折り返す */
  #pass-meter-home .pm-badge {
    width: 100% !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    font-size: 0.72rem !important;
    line-height: 1.3 !important;
    padding: 3px 8px !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
  #pass-meter-home .pm-badge .dot {
    flex: 0 0 8px !important;
  }
  /* 弱点チップ：1文字ずつ縦に並ばないよう «ふつうの文» にして、
     2行を超えたら «…» で切る（縦に伸びない） */
  #pass-meter-home .pm-weak {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
    overflow: hidden !important;
    width: 100% !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    font-size: 0.72rem !important;
    line-height: 1.32 !important;
    padding: 4px 8px !important;
    text-align: left !important;
    overflow-wrap: anywhere !important;
  }
  #pass-meter-home .pm-weak .pm-weak-label {
    font-size: 0.66rem !important;
    margin-right: 3px !important;
  }

  /* ── ③ RPG結果画面 ──────────────────────────────────── */

  /* ③-1 結果が出ている間は «バトルの表示» を隠す
     【これまで】結果カードの上に
       モード名＋ガイド／パート変更（70px）・問1/4（37px）・
       敵のHP（82px）・味方のHP（87px）＝約300px が残ったままで、
       スコアを見るのに大きくスクロールが必要でした。
     ※「問 1/4」の帯だけ id ではなく class 名なので、両方書いています。 */
  html body.rpg-result-open #quiz-header-info,
  html body.rpg-result-open #quiz-screen .quiz-progress-bar-wrap,
  html body.rpg-result-open #quiz-screen #quiz-progress-bar-wrap,
  html body.rpg-result-open #rpg-enemy-panel,
  html body.rpg-result-open #rpg-player-panel {
    display: none !important;
  }

  /* ③-2 「QUEST FINISHED」が2行（40px×2＝128px）になっていたので
         1行に収まる大きさへ。★も 48px → 30px に。 */
  #final-result-card #quest-cleared-text {
    font-size: clamp(1.25rem, 6.2vw, 1.9rem) !important;
    line-height: 1.25 !important;
    margin: 0 0 6px 0 !important;
  }
  #final-result-card .stars-container {
    font-size: 1.85rem !important;
    gap: 10px !important;
  }
  #final-result-card .rpg-result-header {
    margin-bottom: 12px !important;
    padding-bottom: 10px !important;
  }

  /* ③-3 いちばんの原因：そら・エマが左右に立っているため
         真ん中のスコア欄が «幅159px» しかありませんでした（実測393px）。
         そのせいで
           「PERFECT!!（神レベル）🏆NEW RECORD!」… 3行
           「🚀 結果をシェア！」……………………… 2行
           「LEVEL UP!!」……………………………… 2行＋枠からはみ出し
         になっていました。
         2人を «上の段に並べて»、スコア欄は下の段で横幅いっぱいに
         使うようにします（幅159px → 約311px）。 */
  #final-result-card .result-body-container {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    justify-items: center !important;
    align-items: end !important;
    gap: 2px 8px !important;
    padding: 14px 10px !important;
  }
  #final-result-card #anim-sora { grid-column: 1 !important; grid-row: 1 !important; }
  #final-result-card #anim-emma { grid-column: 2 !important; grid-row: 1 !important; }
  #final-result-card .score-exp-section {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  /* 2人の絵：JSが background-size:cover を直に入れていて、
     縦長の枠に押し込まれて «四角く切り取られた» ように見えていました。
     contain にして全身が入るようにします。 */
  #final-result-card .anim-mascot {
    width: min(40vw, 150px) !important;
    height: min(40vw, 150px) !important;
    background-size: contain !important;
    background-position: center bottom !important;
  }

  /* ③-4 横幅が広がったので、文字も落ち着いた大きさに整える */
  #final-result-card .score-display-wrapper {
    font-size: 3.4rem !important;
    margin-bottom: 6px !important;
  }
  #final-result-card #final-message {
    font-size: 1.05rem !important;
    line-height: 1.5 !important;
    margin-bottom: 10px !important;
  }
  #final-result-card .rpg-exp-wrapper {
    max-width: 100% !important;
    padding: 12px !important;
  }
  #final-result-card #level-up-text {
    font-size: 1.4rem !important;
    line-height: 1.3 !important;
    margin-top: 8px !important;
  }
  /* 下のボタン列も横幅を使う */
  #final-result-card .result-actions > button {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 600px) {
  /* ══════════════════════════════════════════════════════════
     m59-④　結果画面の «桜» が文字に重なって読みにくい
     ------------------------------------------------------------
     花びらは z-index 999999 で いちばん手前に降るため、
     「PERFECT!!」「結果をシェア！」「獲得EXP」などの上に
     重なって読みづらくなっていました。
     数は script_fixed_v1.js 側で半分以下にし、ここでは
     «うっすら» にして文字が透けて読めるようにします。
     ※PCの表示は変わりません（この@media の中だけの指定です）
     ══════════════════════════════════════════════════════════ */
  .sakura {
    opacity: 0.62 !important;
  }
}

@media (max-width: 600px) {
  /* ══════════════════════════════════════════════════════════
     m59-⑤　過去問の «はみ出し» の本当の原因が判明しました
     ------------------------------------------------------------
     【症状】過去問で横にはみ出す。ただし «出るときと出ないとき» がある。
     【原因】背景でゆっくり回っている飾りの円（.past-exam-bg-circle）です。
       円は 300×300px ですが、60秒かけて1回転しているため、
       45度のときだけ «囲む四角» が 300×1.414＝424px に広がります。
       画面より広くなった分だけ、過去問の画面が横にずれていました。
       【実測（回転角を5度ずつ変えて測定）】
         440px … はみ出し 0px（424px でぎりぎり収まる）
         414px … 5px ／ 393px … 16px ／ 375px … 25px
         360px … 32px ／ 320px … 52px
       これまでスクリーンショットで見つけられなかったのは、
       撮った瞬間の角度がたまたま小さかったためです。
     【直し方】どの角度でも収まる大きさに抑えます。
       横幅の66%にすると、45度に回っても 66×1.414＝93%で収まります。
       飾りは «中心60%だけ» が見える作り（radial-gradientのマスク）
       なので、見た目はほとんど変わりません。
     ※PCの表示は変わりません（この@media の中だけの指定です）
     ══════════════════════════════════════════════════════════ */
  #past-exam-screen .past-exam-bg-circle {
    width: min(300px, 66vw) !important;
    height: min(300px, 66vw) !important;
    max-width: 66vw !important;
  }
}

@media (max-width: 600px) {
  /* ══════════════════════════════════════════════════════════
     m60　2026-08-17　ふりがなが漢字に近すぎる «本当の原因» が判明
     ------------------------------------------------------------
     【調べ方】アプリ中の «ふりがなが出ている場所» をすべて拾い出し、
       当たっているCSS（iPhone専用の @supports の中身も含む）と
       書体を一覧にして見比べました。
     【結果】ふりがなの指定は 1問1答 とまったく同じでした。
         大きさ 0.58em（＝10.208px）／行の高さ1／
         iPhoneでは margin-bottom −0.55em
       ちがっていたのは «書体» だけです。
         1問1答の選択肢（div）………… Noto Sans JP
         過去問の選択肢（button の中）… Arial ／ iPhoneでは端末の標準書体
         過去問「次の問題へ」（button）… 同上
       ＜button＞ は 書体を親から受け継がない決まりのため、
       この2か所だけ別の書体で描かれていました。
     【なぜ «近く» なるのか】
       ふりがなを漢字に寄せている −0.55em は «その書体の文字の高さ»
       を基準にした値です。書体が変わると 文字の上下の余白（ascent /
       descent）が変わるので、同じ −0.55em でも寄り方が変わります。
       iPhone の標準和文書体（ヒラギノ）は Noto Sans JP より
       上の余白が小さいため、より強く寄って «くっついて» 見えます。
       ※ユーザーさんが「まだ近い」と挙げた2か所が、書体がちがう
         2か所とぴったり一致しました。
     【直し方】この2か所（と同じ作りの模擬試験）にも
       本文と同じ Noto Sans JP を指定します。書体がそろえば
       1問1答と «まったく同じ» 描かれ方になります。
     ※飾りの書体（Cinzel の見出し・DotGothic16 の「問 1/125」）は
       わざと選んでいるものなので、さわっていません。
     ※PCの表示は変わりません（この@media の中だけの指定です）
     ══════════════════════════════════════════════════════════ */
  #past-exam-screen .past-exam-option-btn,
  #past-exam-screen .past-exam-option-text,
  #past-exam-screen .past-exam-option-text ruby,
  #past-exam-screen .past-exam-option-text rt,
  #past-exam-screen .past-exam-next-btn,
  #past-exam-screen .past-exam-next-btn ruby,
  #past-exam-screen .past-exam-next-btn rt,
  #mock-exam-screen .mock-exam-option,
  #mock-exam-screen .mock-opt-text,
  #mock-exam-screen .mock-opt-text ruby,
  #mock-exam-screen .mock-opt-text rt,
  #mock-exam-screen .mock-exam-actions > button,
  #mock-exam-screen .mock-exam-actions > button ruby,
  #mock-exam-screen .mock-exam-actions > button rt {
    font-family: "Noto Sans JP", sans-serif !important;
  }
}

@media (max-width: 600px) {
  /* ══════════════════════════════════════════════════════════
     m61　2026-08-17　トップの «合格可能性» を «円と％だけ» に
     ------------------------------------------------------------
     信頼度バッジと弱点チップは、タップして開く «くわしく» シート
     （js/pass_detail.js）へ引っ越しました。
     カード全体が «押せるボタン» になります。
     【高さ】107px → 約74px（円58px＋上下の余白）
     ※PCの表示は変わりません（この@media の中だけの指定です）
     ══════════════════════════════════════════════════════════ */
  #pass-meter-home.pm-home {
    width: auto !important;
    grid-template-columns: 58px auto !important;
    column-gap: 9px !important;
    row-gap: 0 !important;
    align-items: center !important;
    /* 右は «›» の分だけ広めに空ける（文字と重ならないように） */
    padding: 8px 22px 8px 8px !important;
  }
  /* 中身（信頼度・弱点・説明）は詳細シートへ移したので隠す */
  #pass-meter-home .pm-info {
    display: none !important;
  }
  #pass-meter-home .pm-gauge-wrap {
    grid-row: 1 !important;
    width: 58px !important;
    height: 58px !important;
  }
  #pass-meter-home .pm-gauge-wrap svg {
    width: 58px !important;
    height: 58px !important;
  }
  #pass-meter-home .pm-title {
    grid-row: 1 !important;
    font-size: 0.86rem !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    max-width: 132px !important;
  }
  /* 押せることが分かるように、右に小さな « › » を出す */
  #pass-meter-home.pm-home::after {
    content: "›";
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.1rem;
    line-height: 1;
    color: rgba(255, 215, 122, 0.85);
    pointer-events: none;
  }
  #pass-meter-home.pm-home:active {
    background: rgba(40, 32, 66, 0.6) !important;
  }

  /* «くわしく» シートの下のすき間を、他モードとぴったり同じ26pxに。
     （画面852px・言語バーの上端784px → 余白94px） */
  html body.pd-open #pass-detail-screen .pd-scroll {
    padding-bottom: calc(94px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

@media (max-width: 600px) {
  /* ══════════════════════════════════════════════════════════
     m62　2026-08-17　過去問で ☰ が «反応しなくなる» 件の構造的な修正
     ------------------------------------------------------------
     【調べたこと】
       ① ☰の当たり判定を、過去問の全場面（年度→科目→問題→回答直後
          6秒間を0.25秒ごと→最下部まで送った状態）で実測
          → Chromeでは «常に一番上・押せる»。重なりも z1000000 で最前。
       ② 定期処理（setInterval）が食っている時間を10秒間計測
          → 合計 12.3ms／10000ms（0.1%）。タイマーは無関係。
       ③ 画面の «構造» を調べて 原因にたどり着きました。
     【原因】過去問だけ «固定の中に固定» という入れ子になっていました。
        #past-exam-screen … position:fixed ＋ 中で縦スクロール
          └ ::before ……… position:fixed / z-index:-1 / 画面いっぱい
                            ＋ 背景画像（393×852の板）
       iPhone(Safari)は «スクロールする固定の箱» の中にある固定の板を、
       指を離したあとの惰性スクロールが収まるまで貼り直し続けます。
       その間、別の固定要素（＝☰）の当たり判定が «古い配置» のまま
       使われるため、押しても何も起きません。
       惰性が収まると直る ＝「時間が経過すると反応した」と一致します。
       この入れ子は過去問にしかありません（他モードは背景を
       background-attachment:scroll にしてあります）＝
       「過去問のときだけ」と一致します。
     【直し方】背景の板を «入れ子の外»（body側）に移します。
       見た目は変わりません（同じ位置・同じ絵・同じ濃さ）。
     ※PCの表示は変わりません（この@media の中だけの指定です）
     ══════════════════════════════════════════════════════════ */
  /* ★2026-08-17（改）背景の出し方を «他のモードとまったく同じ» にする。
     ------------------------------------------------------------
     はじめは «板を body 側へ移す» 方法にしましたが、それだと
       ・画面いっぱいの固定の板が新しく1枚増える
       ・過去問の画面を «透明» にする必要がある
     となり、iPhoneの描画にとってはむしろ重い形でした。
     （透明な «中でスクロールする箱» は、後ろの板と毎コマ
       合成し直す必要があるため）
     1問1答・模擬試験・マップは «画面そのものに、動かさない指定の
     背景» を付けるだけの、いちばん素直な作りで、これらでは
     不具合の報告がありません。過去問も同じ作りにそろえます。
       ・入れ子の固定レイヤー … なし
       ・画面は不透明 ………… 単独で合成できる
       ・新しいレイヤー ……… 増やさない
     背景がスクロールと一緒に少し動きますが、他モードと同じ挙動です。 */
  #past-exam-screen::before {
    content: none !important;
  }
  html body #past-exam-screen.app-overlay,
  html body #past-exam-screen {
    background-color: #0a0a16 !important;
    background-image:
      linear-gradient(rgba(8, 5, 28, 0.25), rgba(12, 5, 40, 0.4)),
      url('../images/past_exam_bg.png?v=20260428a') !important;
    background-size: cover !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
  }

  /* ── 下の固定ボタン（言語バー・☰・📣）を «自前のレイヤー» にする ──
     iPhoneでは、画面いっぱいの «中でスクロールする固定の箱»
     （＝各モードの画面）の上に置いた固定ボタンが、
     惰性スクロールのあいだ «古い位置» で当たり判定されることがあります。
     will-change:transform を付けると、そのボタンだけが独立した
     レイヤーになり、位置と当たり判定がズレにくくなります。
     （見た目は変わりません。3つの小さなボタンだけに付けています） */
  html body.ov-lang-bottom .lang-toggle,
  .title-menu-trigger,
  #feedback-fab {
    will-change: transform !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
  }
  /* 言語バーも «ダブルタップ拡大の待ち時間» をなくす */
  .lang-toggle,
  .lang-toggle .lt-seg,
  .lang-toggle .lt-native-caret,
  .lt-native-menu,
  .lt-native-menu button {
    touch-action: manipulation !important;
  }

  /* ── 481〜600px の端末でも «背景の完全固定» をやめる ──────────
     これまで解除は @media (max-width:480px) の中だけだったので、
     幅が481〜600pxの端末では iOSで不具合の出る
     background-attachment:fixed のままでした。 */
  #ichimoni-screen.app-overlay,
  #ichimoni-screen,
  #mock-exam-screen.app-overlay,
  #mock-exam-screen,
  #past-exam-screen.app-overlay,
  #past-exam-screen,
  #world-map-screen {
    background-attachment: scroll !important;
  }

  /* ── ☰ の «タップの遅れ» をなくす ────────────────────────
     touch-action:manipulation を付けると、ダブルタップ拡大を
     待つ 約300ms の間が無くなり、1回目のタップで確実に効きます。 */
  .title-menu-trigger,
  .title-menu-panel,
  .title-menu-item,
  #feedback-fab {
    touch-action: manipulation !important;
  }
}

@media (max-width: 600px) {
  /* ══════════════════════════════════════════════════════════
     m63　2026-08-17　苦手克服モードの帯を大きく・読みやすく
     ------------------------------------------------------------
     【これまでの実測（393px）】
       「苦手克服モード」…… 15.2px（小さい）
       その下の行 ……………… 12px（かなり小さい）
       クリア済み …………… 13.6px
     ふりがな付きの日本語や、長い外国語でも読めるように大きくします。
     帯が縦に伸びても、上の «見えない文字» の対策（js/review_mode.js が
     帯の高さを測って問題画面の上を空ける）で隠れません。
     ※PCの表示は変わりません（この@media の中だけの指定です）
     ══════════════════════════════════════════════════════════ */
  #review-mode-banner {
    padding: 10px 12px !important;
  }
  #review-mode-banner .review-banner-inner {
    flex-wrap: wrap !important;
    gap: 8px 10px !important;
    align-items: center !important;
    min-width: 0 !important;
  }
  #review-mode-banner .review-banner-icon {
    flex: 0 0 auto !important;
    font-size: 1.7rem !important;
  }
  #review-mode-banner .review-banner-text {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    gap: 3px !important;
  }
  /* 見出し「🔥 苦手克服モード」 15.2px → 18.4px */
  #review-mode-banner .review-banner-text strong {
    font-size: 1.15rem !important;
    line-height: 1.35 !important;
    color: #ffbe86 !important;
    overflow-wrap: anywhere !important;
  }
  /* その下の行「今回:8問 / 苦手リスト:全◯問」 12px → 14.4px */
  #review-mode-banner .review-banner-sub {
    font-size: 0.9rem !important;
    line-height: 1.45 !important;
    color: #f0b183 !important;
    overflow-wrap: anywhere !important;
  }
  /* 「クリア済み: 0 / 8問」 13.6px → 15.2px。
     幅が足りないときは次の行へ回して、文字を小さくしない。 */
  #review-mode-banner .review-cleared-counter {
    flex: 0 0 auto !important;
    font-size: 0.95rem !important;
    line-height: 1.4 !important;
    padding: 5px 12px !important;
    overflow-wrap: anywhere !important;
    /* ★2026-09-21 文字を大きくしている人（200%）だと «Sudah Teratasi: 0 / 2 Soal» が
       1行のまま右へ はみ出していました（実測：幅360pxで 36px）。
       帯の幅より広くならないようにして、入りきらないときは 中で折り返します。
       ふつうの文字の大きさでは 1行に入るので、見た目は変わりません。 */
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* ふりがなは他の画面と同じ仕様（0.58em／行1／iPhoneは mb -0.55em） */
  #review-mode-banner ruby rt {
    font-size: 0.58em !important;
    font-weight: 700 !important;
    line-height: 1 !important;
  }
}

@media (max-width: 600px) {
  /* m63-② 帯の下に «真っ黒な空き» が約72px できていた件
     ------------------------------------------------------------
     問題のかたまり（.quiz-container）には、上の固定ヘッダーを
     よけるための margin-top:72px が元から付いています。
     苦手克服モードでは «帯の高さぶん» を padding-top で空けたので、
     この72pxが二重になって空いていました（実測：帯の下端205px、
     中身の始まり289px ＝ 84pxの空白）。帯があるときだけ打ち消します。 */
  html body.has-review-banner #quiz-screen > .quiz-container {
    margin-top: 0 !important;
  }
}

@media (max-width: 600px) {
  /* ══════════════════════════════════════════════════════════
     m64　2026-08-17　«ボタンが反応しない» の本当の原因
     ------------------------------------------------------------
     【どうやって見つけたか】
       getAnimations() を使い «宣言されているだけ» ではなく
       «本当に走っていて・画面に見えていて・無限に続く» アニメだけを
       数え直しました。結果：
         トップ ……… 6個（小さなバッジの光。画面全体ではない）
         過去問 ……… 1個 ← #past-exam-screen::after
         1問1答 ……… 3個 ← #ichimoni-screen::after ほか
         模擬試験 …… なし
       ご指摘のあった2画面（過去問・1問1答）にだけ、
       «画面そのものを覆う無限アニメ» がありました。
       不具合の報告が一度も無い模擬試験には ありません。
     【中身】
       #past-exam-screen::after / #ichimoni-screen::after
         position:absolute で top/left/right/bottom すべて0
           → «スクロールできる高さ全部» を覆う巨大な層になる
             （過去問の年度一覧や長い解説では数千px）
         background-image に radial-gradient が 8枚重ね
           → 画像と違って毎回 描き直しが必要
         animation: …Twinkle 4s infinite alternate
           → その巨大な層の opacity が ずっと変化し続ける
     【なぜ押せなくなるのか】
       iPhoneのSafariは «中でスクロールする固定の箱» の中に
       ずっと動き続ける層があると、その箱を絶えず合成し直します。
       合成が追いつかない間、同じ画面に浮いている別の固定ボタン
       （☰・言語バー・📣）の «当たり判定» が古いままになり、
       押しても反応しません。合成が落ち着くと直る ＝
       「時間が経過すると反応した」と一致します。
     【直し方】明滅（アニメ）だけを止めます。
       粒そのものは残るので見た目はほとんど変わりません
       （4秒かけて薄くなったり濃くなったりしなくなるだけ）。
       止まった層は一度描けば使い回せるので、合成し直しが不要になります。
     ※PCの表示は変わりません（この@media の中だけの指定です）
     ══════════════════════════════════════════════════════════ */
  #past-exam-screen::after,
  #ichimoni-screen::after {
    animation: none !important;
    opacity: 0.85 !important;
  }
  /* 背景で回り続ける魔法陣も、スマホでは止める。
     （60秒で1回転。ゆっくりでも «動き続ける層» であることは同じで、
       上と同じ理由で合成し直しが起き続けます） */
  #past-exam-screen .past-exam-bg-circle {
    animation: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   m65　苦手克服・RPG（#quiz-screen）でも «背景の完全固定» をやめる
   ──────────────────────────────────────────────────────────────
   実測（2026-08-18・393px）：#quiz-screen は position:fixed＋内部
   スクロールの箱なのに、background-attachment が fixed のままだった
   （css/rpg_theme.css 814行の !important 指定）。
   この «スクロールする固定の箱＋完全固定背景» は iOS Safari で
   当たり判定が壊れる組み合わせとして本ファイルに2か所注記済みで、
   過去問・1問1答・模擬・マップには解除（scroll化）が既に入って
   いたが、#quiz-screen だけ漏れていた。苦手克服の帯
   （position:sticky）との併用は 1806行の注記にある悪い組み合わせ
   そのもの。
   実機で「苦手克服モードで下の言語バーが押せなくなる」との
   ご報告（2026-08-18）への対処。見た目の変化は、背景がスクロールと
   一緒に少し動くようになるだけ（過去問・1問1答と同じ挙動）。
   PC（601px以上）はこの @media の外なので一切変わらない。
   ※番号について：HANDOVER_20260817 の 11-3 が提案していた
     模擬試験ふりがな修正（未適用）は m66 に繰り下げ。
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  #quiz-screen.app-overlay,
  #quiz-screen {
    background-attachment: scroll !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   m66　ふりがな書体の一括是正（スマホのみ・2026-08-18 監査より）
   ──────────────────────────────────────────────────────────────
   原因はすべて 6-1 と同じ（<button> 等は font-family を継承しない）。
   実測で残っていた場所と件数（393px・ja）：
     ・模擬試験の開始画面 … Arial 27件（形式ボタン20＋弱点5＋開始2。
       HANDOVER_20260817 11-3 の提案そのまま。button 内に意図的な
       Cinzel / DotGothic16 のルビが無いことは実測で確認済み）
     ・1問1答 回答後の «自信» ボタン（#ichimoni-confidence）… Cinzel 3件
     ・苦手克服の帯の見出し（STRONG）… Cinzel 2件
     ・苦手問題なし画面の見出し／戻るボタン … Cinzel 2件＋Arial 1件
     ・ワールドマップのパート見出し … Cinzel 5件
       （マップは飾りの英字を変えないよう ruby / rt だけ指定）
   ※「問 1/125」等の DotGothic16 は意図的な飾りなので触らない。
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  #mock-exam-screen button,
  #mock-exam-screen button div,
  #mock-exam-screen button ruby,
  #mock-exam-screen button rt {
    font-family: "Noto Sans JP", sans-serif !important;
  }
  #ichimoni-confidence button,
  #ichimoni-confidence button ruby,
  #ichimoni-confidence button rt {
    font-family: "Noto Sans JP", sans-serif !important;
  }
  #review-mode-banner,
  #review-mode-banner strong,
  #review-mode-banner ruby,
  #review-mode-banner rt {
    font-family: "Noto Sans JP", sans-serif !important;
  }
  #review-empty-modal h2,
  #review-empty-modal .review-empty-btn,
  #review-empty-modal ruby,
  #review-empty-modal rt {
    font-family: "Noto Sans JP", sans-serif !important;
  }
  #world-map-screen .part-header ruby,
  #world-map-screen .part-header rt {
    font-family: "Noto Sans JP", sans-serif !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   m67　料金プランの iOS 毒構造をやめる（スマホのみ・2026-08-18 監査より）
   ──────────────────────────────────────────────────────────────
   実測（393px・全6言語で一致）：#pricing-screen は
     ①background-attachment:fixed が残存（css/pricing.css 14行。
       過去問・1問1答・模擬・マップは解除済みで料金だけ漏れ）＝6-3の毒
     ②«スクロールする固定の箱» の中に position:fixed の全画面
       キラキラ層（#pricing-sparkles 393x852）＝6-3の「固定の中に固定」
     ③無限アニメ82個（キラキラ50粒 pqv_twinkle ほか）＝6-4の類型
   過去問・1問1答で実際に «言語バーが押せなくなる» を起こした構造と
   同型のため、同じ直し方でそろえる：
     ・背景の完全固定をやめる（scroll化）
     ・キラキラ層を absolute に（固定の中の固定をやめる）
     ・明滅アニメだけ止める（粒は残るので見た目はほぼ変わらない。
       m64 と同じ方式）
   PC（601px以上）はこの @media の外なので一切変わらない。
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  #pricing-screen.app-overlay,
  #pricing-screen {
    background-attachment: scroll !important;
  }
  #pricing-screen .sparkles {
    position: absolute !important;
  }
  #pricing-screen .sparkle {
    animation: none !important;
    opacity: .75 !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   m68　ボス戦の見た目3点（スマホのみ・2026-08-18 実機ご指摘）
   ──────────────────────────────────────────────────────────────
   ① 登場時のボス名（.rpg-boss-title）が bottom:5vh（393x852で約770px）に出て、
      📣（y786〜832）・☰（y790〜832）と重なっていた（実測）。
      m20 のメッセージ枠と同じ考え方で、ボタン帯の上へ逃がす。
   ② 撃破の映像だけ 125vw（実測491px）で、被弾・反撃の161vw（実測633px）より
      小さかった。他と同じ大きさにそろえる（@media480 の旧指定より後勝ち）。
   ③ 大きい演出（登場・被弾・反撃・撃破）の間、後ろの小さな待機スプライト
      （79px表示でも中身は448pxのアニメWebP）が動き続けてデコードを食っていた。
      演出中は描かない（visibility:hidden。レイアウトは崩さない）。
      iPhoneのカクつき対策。:has は iOS15.4+/Chrome105+ で動作。
   ※PC（601px以上）はこの @media の外なので一切変わりません。
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .rpg-boss-entrance .rpg-boss-title {
    bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
  }
  video.rpg-boss-defeat-vid,
  img.rpg-boss-defeat-vid {
    height: 161vw !important;
    width: 161vw !important;
    max-width: none !important;
    max-height: none !important;
  }
  body:has(.rpg-reaction) img.rpg-sprite-vid,
  body:has(.rpg-boss-entrance) img.rpg-sprite-vid,
  body:has(.rpg-boss-defeat) img.rpg-sprite-vid {
    visibility: hidden !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   m69　ボス戦のカクつきの本丸：動く絵に掛かるCSSエフェクトを外す（スマホのみ）
   ──────────────────────────────────────────────────────────────
   実測（CPU6倍スロットル・393px）：633pxのアニメ画像に毎コマ
   drop-shadow（ぼかし22px）とマスクが掛かっており、
     登場：平均278ms/コマ（約3.6fps）・最大2.9秒静止
     被弾/反撃/撃破：100ms超のコマが5〜12回
   → フィルタ・マスクを外すと 平均18〜30ms・100ms超はほぼ0 になった。
   スマホでは赤いにじみ光・縁のぼかしをやめ、なめらかさを優先する。
   （着弾の迫力は fx クリップ・シェイク・爆発で維持される）
   ※PC（601px以上）はこの @media の外なので一切変わりません。
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .rpg-reaction img,
  .rpg-reaction video,
  .rpg-boss-defeat img,
  .rpg-boss-defeat video,
  .rpg-boss-entrance img.rpg-boss-big,
  .rpg-boss-entrance video.rpg-boss-big,
  img.rpg-elemfx,
  video.rpg-elemfx,
  img.rpg-hero,
  video.rpg-hero {
    filter: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
}

/* ============================================================
   m70 2026-08-18 ボスごとの映像サイズ補正（ご要望：グリフォン反撃・
   スケルトン反撃・氷の女王撃破・スケルトン登場を大きく）
   ─ 全ボス共通枠は161vw（m68）。ただし絵柄のキャンバス占有率がボスにより
     5〜6割（対 ドラゴン8割超）と小さいものがあり、見た目が小さくなる。
   ─ ボス識別クラス pqb-*（script側 bossCls() が付与）でシーン単位に拡大。
     倍率は代表フレームの占有率実測から: 反撃・撃破×1.3、スケルトン登場×1.45
   ============================================================ */
@media (max-width: 600px) {
  /* グリフォンの反撃（キャラ占有 約5割 → ×1.3） */
  .pqb-griffon video.rpg-react-enemy.bossatk,
  .pqb-griffon img.rpg-react-enemy.bossatk {
    height: 209vw !important;
    width: 209vw !important;
  }
  /* スケルトンの反撃（キャラ占有 約5.5割 → ×1.3） */
  .pqb-skeleton video.rpg-react-enemy.bossatk,
  .pqb-skeleton img.rpg-react-enemy.bossatk {
    height: 209vw !important;
    width: 209vw !important;
  }
  /* 氷の女王の撃破（キャラ占有 約6割 → ×1.3） */
  .pqb-frostqueen video.rpg-boss-defeat-vid,
  .pqb-frostqueen img.rpg-boss-defeat-vid {
    height: 209vw !important;
    width: 209vw !important;
  }
  /* スケルトンの登場（×1.45は大きすぎとの実機評 → ×1.3 に調整 2026-08-18） */
  .pqb-skeleton .rpg-boss-entrance video.rpg-boss-big,
  .pqb-skeleton .rpg-boss-entrance img.rpg-boss-big,
  .rpg-boss-entrance.pqb-skeleton video.rpg-boss-big,
  .rpg-boss-entrance.pqb-skeleton img.rpg-boss-big {
    height: 209vw !important;
    width: 209vw !important;
  }
  /* グリフォンの撃破（実機評「もう少し大きく」 → ×1.3） */
  .pqb-griffon video.rpg-boss-defeat-vid,
  .pqb-griffon img.rpg-boss-defeat-vid {
    height: 209vw !important;
    width: 209vw !important;
  }
  /* オーガの反撃（実機評「もう少し大きく」 → ×1.25） */
  .pqb-ogre video.rpg-react-enemy.bossatk,
  .pqb-ogre img.rpg-react-enemy.bossatk {
    height: 201vw !important;
    width: 201vw !important;
  }
  /* オーガの撃破（実機評「もう少し大きく」 → ×1.25） */
  .pqb-ogre video.rpg-boss-defeat-vid,
  .pqb-ogre img.rpg-boss-defeat-vid {
    height: 201vw !important;
    width: 201vw !important;
  }
}

/* ============================================================
   m71 2026-08-19 エマの水魔法の着弾エフェクトを拡大（ご要望）
   ─ 着弾fxは全技一律 116vw 上限（m9系）だが、fx_water は絵柄の
     本体が他より小さく見えるため、水だけ 150vw（×1.29）に拡大。
   ─ fx種別クラス（rpg-fx-water）は script側 elemImpactHTML が付与
   ============================================================ */
@media (max-width: 600px) {
  video.rpg-elemfx.rpg-fx-water,
  img.rpg-elemfx.rpg-fx-water {
    width: 150vw !important;
    max-width: 150vw !important;
  }
}

/* ============================================================
   m72 2026-08-19 上部ヘッダーの整理＋デザイン統一（ご要望）
   ①LVはヘッダーから外し（下記で非表示）、味方カード内のLVボタンへ移設
     （script側 rpg-lv-btn・タップで合格可能性詳細 PassDetail.open）
   ②残る6ボタンを下部（報告/言語/☰）と同じ「紺地×金縁ピル」に統一
   ③♪(BGM)と▾(曲選択)は1つの分割ピルに結合
   ※すべて @media max-600 内＝PCは不変（LVクリック動作のみPC共通・見た目不変）
   ============================================================ */
@media (max-width: 600px) {
  /* ①ヘッダーのLV（EXP含む中央ブロック）を非表示 → 横の余裕を作る */
  header.app-header .header-lvl-center {
    display: none !important;
  }

  /* 味方カードのLVボタン（既定display:noneをスマホだけ解除・金縁ピル） */
  /* ▼2026-08-19改：デザインはヘッダーのLVバッジ（紫グラデ＋薄紫の光）と同一に（ご指定） */
  .rpg-player-namerow .rpg-lv-btn {
    display: inline-flex !important;
    align-items: baseline;
    gap: 3px;
    margin-left: auto;
    margin-right: 6px;
    padding: 6px 16px;
    background: linear-gradient(160deg, #3b0068 0%, #7c3aed 45%, #a855f7 70%, #6d28d9 100%);
    border: 1px solid rgba(196, 167, 255, .45);
    border-radius: 22px;
    font-weight: 900;
    box-shadow: 0 0 14px rgba(139, 92, 246, .8), 0 0 28px rgba(139, 92, 246, .35),
                inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 -1px 0 rgba(0, 0, 0, .4);
    cursor: pointer;
    line-height: 1;
  }
  .rpg-player-namerow .rpg-lv-btn .rpg-lv-btn-prefix {
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .08em;
    color: rgba(216, 180, 254, .9);
  }
  .rpg-player-namerow .rpg-lv-btn .rpg-lv-btn-num {
    font-size: 1.45rem;
    color: #fff;
    text-shadow: 0 0 8px #d8b4fe, 0 0 18px rgba(167, 139, 250, .9), 0 0 32px rgba(139, 92, 246, .6);
  }

  /* ②ボタン統一：紺地×金縁×金文字（状態はラベル文字で判別） */
  header.app-header .hdr-btn,
  header.app-header #bgm-pick-btn {
    background: linear-gradient(180deg, #241a4e, #191040) !important;
    border: 1.6px solid #d9a94a !important;
    color: #ffe680 !important;
    border-radius: 999px !important;
    height: 33px !important;
    padding: 3px 9px !important;
    font-weight: 800 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .45) !important;
    text-shadow: none !important;
  }
  /* ③♪と▾を1つの分割ピルに（左右の角を落として結合） */
  header.app-header #bgm-toggle-btn {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-right: none !important;
    margin-right: 0 !important;
    padding-right: 7px !important;
  }
  header.app-header #bgm-pick-btn {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    margin-left: 0 !important;
    padding-left: 6px !important;
    padding-right: 8px !important;
    border-left: 1px solid rgba(217, 169, 74, .45) !important;
  }
  /* 余白を均等に（LVが抜けた分をボタン間隔へ） */
  header.app-header .header-btn-group {
    gap: 7px !important;
  }
  header.app-header .header-controls {
    margin-left: auto !important;
  }
}

/* m73は撤去（2026-08-19）：合格可能性メーターの全幅化＋紋章は
   「背景画像が気に入っているので従来の小さい表示のまま」とのご意向で取りやめ */

/* ============================================================
   m74 2026-08-19 ①Backボタンの縦幅を他ピルと統一
   ②味方カード：名前とLVを拡大し、名前|LV|くすりを均等配置
     （名前右の空白の解消・実機のご指摘）
   ============================================================ */
@media (max-width: 600px) {
  header.app-header #hdr-back-btn {
    height: 33px !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 3px 10px !important;
  }
  .rpg-player-namerow {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }
  .rpg-player-namerow .rpg-player-name {
    font-size: 1.12rem !important;   /* 敵名（実測17.9px）と同サイズに（2026-08-19実機評） */
    letter-spacing: .02em !important;
    white-space: nowrap !important;
  }
  .rpg-player-namerow .rpg-lv-btn {
    margin-left: 0 !important;   /* space-betweenで均等化（旧margin-left:autoを解除） */
    margin-right: 0 !important;
    height: 40px !important;     /* くすりボタン（実測40px）と同じ縦幅に */
    box-sizing: border-box !important;
    align-items: center !important;
    padding: 0 24px !important;  /* 横はやや広めに */
  }
  .rpg-player-namerow .rpg-lv-btn .rpg-lv-btn-prefix { font-size: .9rem !important; }
  .rpg-player-namerow .rpg-lv-btn .rpg-lv-btn-num { font-size: 1.5rem !important; }
}

/* ============================================================
   m75 2026-08-19 トップ画面で下部の言語バーが覗く問題
   ─ タイトル表示中もクイズ用の言語バー #lang-toggle がDOM上に存在し、
     タイトル画面(z5000)に隠れているだけだった。ページが縦に約100px
     スクロールできるため、スクロールするとタイトルがずれて下端の帯から
     バーが見えていた（実機のご指摘：FREE/STANDARDメダルの後ろ）。
   ─ タイトル表示中は body.is-title-screen が付く（script側が管理）ので
     その間だけ非表示にする。戦闘中などの表示は従来どおり。
   ============================================================ */
@media (max-width: 600px) {
  body.is-title-screen #lang-toggle {
    display: none !important;
  }
}

/* ============================================================
   m76 2026-08-19 トップの合格可能性カードの文字を視認しやすく
   ─ カードの大きさ(173px)は維持しつつ（背景の絵を隠さない方針）、
     円ゲージ 58→66px（中の%・測定中も連動して拡大）、
     見出し 13.8→16px、説明文 0.68→0.8rem に拡大
   ============================================================ */
@media (max-width: 600px) {
  #pass-meter-home.pm-home {
    grid-template-columns: 66px minmax(0, 1fr) !important;
  }
  #pass-meter-home .pm-gauge-wrap,
  #pass-meter-home .pm-gauge-wrap svg {
    width: 66px !important;
    height: 66px !important;
  }
  #pass-meter-home .pm-title {
    font-size: 1.0rem !important;
    font-weight: 800 !important;
  }
  #pass-meter-home .pm-note {
    font-size: 0.8rem !important;
    line-height: 1.4 !important;
  }
  #pass-meter-home .pm-weak { font-size: 0.9rem !important; }
  #pass-meter-home .pm-badge { font-size: 0.86rem !important; }
  /* 円の中の文字も拡大：%数字46→52・「測定中」20→26（viewBox 220基準） */
  #pass-meter-home svg text.pm-num { font-size: 52px !important; }
  #pass-meter-home svg text.pm-num tspan { font-size: 23px !important; }
  #pass-meter-home svg text:not(.pm-num) { font-size: 26px !important; }
}

/* ============================================================
   m77 2026-08-19 合格可能性«くわしく»ページ全体の文字を拡大（ご要望）
   ─ 見出し・科目名・状態チップ・%・問数・ヒント・凡例・レーダーの
     ラベルを一回り拡大。ふりがな(rt)も読める大きさに。スマホのみ。
   ============================================================ */
@media (max-width: 600px) {
  #pass-detail-screen .pd-title { font-size: 1.3rem !important; }
  #pass-detail-screen .pd-sec-t { font-size: 1.15rem !important; }
  #pass-detail-screen .pd-alg { font-size: 0.92rem !important; }
  #pass-detail-screen .pd-alg-i { font-size: 1.05rem !important; }
  #pass-detail-screen .pd-scale-l { font-size: 0.88rem !important; }
  #pass-detail-screen .pd-ic { font-size: 1.2rem !important; }
  #pass-detail-screen .pd-nm { font-size: 1.04rem !important; line-height: 1.55 !important; }
  #pass-detail-screen .pd-chip { font-size: 0.82rem !important; }
  #pass-detail-screen .pd-pct { font-size: 1.08rem !important; }
  #pass-detail-screen .pd-cnt { font-size: 0.88rem !important; }
  #pass-detail-screen .pd-go { font-size: 0.9rem !important; }
  #pass-detail-screen .pd-hint { font-size: 0.98rem !important; line-height: 1.8 !important; }
  #pass-detail-screen .pd-radar text { font-size: 15px !important; }
  #pass-detail-screen rt { font-size: 0.54em !important; }
  #pd-choose .pd-choose-subj { font-size: 1.18rem !important; }
  #pd-choose .pd-choose-t { font-size: 1.0rem !important; }
  #pd-choose .pd-choose-btn { font-size: 1.16rem !important; }
}

/* ============================================================
   m78 2026-08-20 合格可能性«くわしく»の大メーター（9%エリア）を
   拡大＋文字も拡大（ご要望）。スマホのみ・詳細ページ内に限定
   （トップの小カードや結果画面のメーターには影響しない）
   ============================================================ */
@media (max-width: 600px) {
  #pass-detail-screen #pd-hero .pm-gauge-wrap,
  #pass-detail-screen #pd-hero .pm-gauge-wrap svg,
  #pass-detail-screen #pd-hero svg.pm-gauge {
    width: 208px !important;
    height: 208px !important;
  }
  /* %の数字（viewBox基準・46→54） */
  #pass-detail-screen #pd-hero svg text.pm-num { font-size: 54px !important; }
  #pass-detail-screen #pd-hero svg text.pm-num tspan { font-size: 24px !important; }
  /* チップ類と注記 */
  #pass-detail-screen #pd-hero .pm-badge,
  #pass-detail-screen #pd-hero .pm-conf-low,
  #pass-detail-screen #pd-hero .pm-conf-mid,
  #pass-detail-screen #pd-hero .pm-conf-high,
  #pass-detail-screen #pd-hero .pm-delta { font-size: 0.98rem !important; }
  #pass-detail-screen #pd-hero .pm-weak { font-size: 1.0rem !important; line-height: 1.7 !important; }
  #pass-detail-screen #pd-hero .pm-weak-label { font-size: 0.88rem !important; }
  #pass-detail-screen #pd-hero .pm-note { font-size: 0.86rem !important; line-height: 1.7 !important; }
  #pass-detail-screen #pd-hero .pm-title { font-size: 1.05rem !important; }
  #pass-detail-screen #pd-hero rt { font-size: 0.54em !important; }
  /* ▼2026-08-20：①大メーターを中央配置 ②ふりがなを漢字に近づける（ご要望） */
  #pass-detail-screen #pd-hero .pm-gauge-wrap {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  #pass-detail-screen #pd-hero { text-align: center !important; }
  #pass-detail-screen rt,
  #pd-choose rt {
    transform: translateY(0.42em);
  }
  #pass-detail-screen ruby,
  #pd-choose ruby {
    line-height: 1.35;
  }
}

/* ============================================================
   m79 2026-08-21 クイズ画面の見た目改善（実機スクショのご指摘一括）
   ①BGMプルダウン(▾)のiOS描画ずれ対策（appearanceリセット）
   ②ボス戦のHPバー位置ずれ：ボスのスプライト枠79px→味方と同じ62pxに
     統一し、敵バーと味方バーの開始位置・幅を一致させる
   ③「RPGモード」帯とヘッダーの隙間を縮める（container mt72+pt20→68+6）
   ④RPGモード帯のフォントを Dela Gothic One（読み込み済み）に変更
   ⑤ガイド/パート変更ボタンをヘッダーと同じ紺×金ピルに統一
   ⑥科目タグ（第25回…）を拡大 ⑦読み上げボタンにラベル追加＋拡幅、
     5択を見るボタンはその分だけ縮小
   ============================================================ */
@media (max-width: 600px) {
  /* ① */
  header.app-header #bgm-toggle-btn,
  header.app-header #bgm-pick-btn {
    -webkit-appearance: none !important;
    appearance: none !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    box-sizing: border-box !important;
    line-height: 1 !important;
    vertical-align: top !important;
    overflow: hidden !important;
  }
  /* ② */
  #rpg-enemy-sprite {
    width: 62px !important;
    flex: 0 0 62px !important;
  }
  #rpg-enemy-sprite img,
  #rpg-enemy-sprite video {
    width: 62px !important;
    height: auto !important;
  }
  /* ③ */
  #quiz-screen .quiz-container {
    margin-top: 68px !important;
    padding-top: 6px !important;
  }
  /* ④ */
  /* ▼2026-08-21：Dela Gothic Oneは太すぎて読みにくいとの実機評 → Noto太字に */
  #current-mode-label {
    font-family: 'Noto Sans JP', sans-serif !important;
    font-weight: 700 !important;
    font-size: 1.02rem !important;
    letter-spacing: 0.02em !important;
  }
  /* 気になるボタン：5択を見る(13.1px)と同等の文字サイズに */
  #quiz-screen .unsure-wrap { font-size: 0.9rem !important; padding: 5px 12px !important; }
  #quiz-screen .unsure-wrap span { font-size: 0.82rem !important; font-weight: 700 !important; }
  /* ⑤ */
  #quiz-guide-btn,
  #quiz-part-btn {
    background: linear-gradient(180deg, #241a4e, #191040) !important;
    border: 1.6px solid #d9a94a !important;
    color: #ffe680 !important;
    border-radius: 999px !important;
    font-weight: 800 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .45) !important;
    text-shadow: none !important;
  }
  /* ⑥ */
  #subject-tag {
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    line-height: 1.45 !important;
  }
  /* ⑦ 読み上げボタン：ラベル（title属性=各言語の「読み上げ」）を表示して拡幅
     ※m18系の「width:34px !important（#question-card > .pq-oneline …）」より
       強い詳細度で上書きする必要がある */
  #quiz-screen .audio-btn,
  #quiz-screen #question-card > .pq-oneline .audio-btn,
  #quiz-screen #question-text > div.pq-oneline .audio-btn,
  #ichimoni-screen #ichimoni-q-card > .pq-oneline .audio-btn {
    width: auto !important;
    min-width: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    padding: 6px 12px !important;
    white-space: nowrap !important;
  }
  #quiz-screen .audio-btn::after {
    content: attr(title);
    font-size: 0.82rem;
    font-weight: 800;
    color: rgb(74, 47, 0);   /* 「気になる」の文字色（実測値）に合わせる 2026-08-21 */
  }
  body.lang-ja #quiz-screen .audio-btn::after { content: "よみあげ"; }
  /* 5択を見る：読み上げが広がった分だけ縮める */
  #quiz-screen button[onclick*="__rpgToggleFive"] {
    padding: 7px 12px !important;
    font-size: 0.82rem !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;   /* 余った幅を5択ボタンに（実機評「横幅を大きく」2026-08-21） */
  }
}

/* ============================================================
   m80 2026-08-21 ❓ガイドの読みやすさ（文字拡大＋ふりがな表示）
   ─ ガイド本文0.8rem前後→0.95remへ。ja本文はrpg_i18n側でruby付きに
     したので、rtを既定の見え方（密着・はっきり）に整える。スマホのみ。
   ============================================================ */
@media (max-width: 600px) {
  #quiz-guide-modal .quiz-guide-row p {
    font-size: 0.95rem !important;
    line-height: 1.95 !important;   /* 他画面のクイズ本文と同じ行間に統一 */
  }
  #quiz-guide-modal .quiz-guide-sec-title { font-size: 1.1rem !important; }
  #quiz-guide-modal .quiz-guide-tag { font-size: 0.85rem !important; }
  #quiz-guide-modal .quiz-guide-title { font-size: 1.2rem !important; }
  /* ★2026-08-21修正：ふりがなが«見えない»報告の原因は
       style_final_v1.css の全体既定 rt{color:#555}（こい灰色）。
       ガイドの紺背景と同化していた。手引き・合格可能性と同じ
       «明るい金» にして、位置は実機実測済みのレシピに合わせる
       （Chromium系=top ／ iPhone Safari=margin-bottom。transformは使わない）。 */
  #quiz-guide-modal rt {
    font-size: 0.55em !important;
    font-weight: 700 !important;
    opacity: 1 !important;
    letter-spacing: 0 !important;
    color: #ffe9b0 !important;
    line-height: 1 !important;
    position: relative !important;
    top: -0.04em !important;
    margin-bottom: 0 !important;
    transform: none !important;
  }
  #quiz-guide-modal ruby { ruby-position: over; }
}
@supports (-webkit-touch-callout: none) {
  @media (max-width: 600px) {
    /* iPhone の Safari は top が効かないので margin-bottom で漢字に寄せる */
    #quiz-guide-modal rt {
      top: 0 !important;
      margin-bottom: -0.55em !important;
    }
  }
}

/* ============================================================
   m81 2026-08-21 ❓ガイドを«他の画面と同じ操作系»に（スマホのみ）
   ─ ①右上の✕を廃止し、左上に共通バックボタン（unified-back-btn）
     ②言語バーを他のオーバーレイ画面（料金・暗記カード等）と同じ
       «下中央»に表示（body.ov-lang-bottom を開閉時に付け外し）
     ③下部の余白をクイズ画面と同じ calc(86px+safe-area) に揃える
   ============================================================ */
@media (max-width: 600px) {
  #quiz-guide-modal .quiz-guide-close { display: none !important; }
  #quiz-guide-modal #qg-back-btn {
    display: inline-flex !important;
    top: calc(14px + env(safe-area-inset-top, 0px)) !important;
  }
  #quiz-guide-modal {
    padding-top: calc(60px + env(safe-area-inset-top, 0px)) !important;
    padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ============================================================
   m82 2026-08-21 ①ヘッダーボタンがタップ後に2px浮いたまま残る件
   ─ 原因（実測）：.hdr-btn:hover{translateY(-2px)} がタッチ端末では
     タップ後も«ホバー残留»で効き続け、次にどこかへ触れるまで
     ボタンが浮いたままになる（押し込み4px→戻りが-2px地点で止まる）。
     スマホはホバーの持ち上げだけ無効化（押し込み:activeは残す）。
   ②タイマー表示が小さすぎて視認できない件
   ─ TIMER ONで出るカウントダウン（RPG/特訓=100秒、1問1答=30秒）は
     出てはいたが 0.72rem・幅27px で気づけないサイズだった。
     他のピルと同じ高さの金色カウントダウンに拡大。
   ============================================================ */
@media (max-width: 600px) {
  header.app-header .hdr-btn:hover,
  header.app-header #bgm-pick-btn:hover {
    transform: none !important;
  }
  .unified-back-btn:hover {
    transform: none !important;
  }

  header.app-header #hdr-quiz-timer,
  header.app-header #ichimoni-timer {
    font-size: 1.0rem !important;
    font-weight: 900 !important;
    min-width: 46px !important;
    height: 33px !important;
    padding: 2px 6px !important;
    border-radius: 999px !important;
    border-width: 2px !important;
    flex: 0 0 auto !important;
    letter-spacing: 0 !important;
  }
}

/* m82補足：カウントダウン表示中だけ間隔と▾を詰めて1行に収める
   （通常時の見た目は変えない。1問1答は body.ichimoni-active ＋
     タイマー表示中（inline styleがnoneでない）のときだけ） */
@media (max-width: 600px) {
  body.quiz-timer-running header.app-header .header-btn-group,
  body.ichimoni-active header.app-header .header-btn-group:has(#ichimoni-timer:not([style*="none"])) {
    gap: 2px !important;
  }
  body.quiz-timer-running header.app-header #hdr-quiz-timer,
  body.ichimoni-active header.app-header #ichimoni-timer:not([style*="none"]) {
    padding: 2px 4px !important;
    min-width: 40px !important;
    font-size: 0.95rem !important;
  }
  body.quiz-timer-running header.app-header #bgm-pick-btn,
  body.ichimoni-active header.app-header .header-btn-group:has(#ichimoni-timer:not([style*="none"])) #bgm-pick-btn {
    padding-left: 3px !important;
    padding-right: 5px !important;
  }
}

/* ============================================================
   m83 2026-08-21 結果画面リデザイン（案A＋合格印・スマホのみ）
   ─ 星の代わりにランク紋章 S/A/B/C。80%以上で朱色の「合格」印。
     ％はresult_fx.jsがカウントアップ。花火・桜はCanvas（同js）。
     PCは従来表示（#res-rank-wrapはindex.html側で既定非表示）。
   ============================================================ */
@media (max-width: 600px) {
  /* 星は紋章に置き換え */
  #final-result-card .stars-container { display: none !important; }

  #final-result-card #res-rank-wrap {
    display: flex !important;
    justify-content: center;
    align-items: center;
    position: relative;
    margin: 4px auto 6px;
    height: 132px;
  }
  #res-rank-emblem {
    width: 114px;
    height: 114px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid rgba(212, 175, 55, .95);
    box-shadow: 0 0 22px rgba(212, 175, 55, .30), inset 0 0 20px rgba(0, 0, 0, .45);
  }
  #res-rank-letter {
    font-family: 'Cinzel', 'Noto Sans JP', serif;
    font-weight: 900;
    font-size: 3.6rem;
    line-height: 1;
    transform: translateY(2px);
  }
  /* 入場：ふわっと拡大して着地 */
  #res-rank-wrap.emblem-in #res-rank-emblem {
    animation: rs-emblem-in .55s cubic-bezier(.2, 1.5, .4, 1) both;
  }
  @keyframes rs-emblem-in {
    from { opacity: 0; transform: scale(.4); }
    to   { opacity: 1; transform: scale(1); }
  }
  /* ランク別の配色 */
  #res-rank-wrap.rank-s #res-rank-emblem {
    background: radial-gradient(circle at 35% 30%, #ffe9a8 0%, #e7b73a 45%, #8a5c00 100%);
    animation: rs-emblem-in .55s cubic-bezier(.2, 1.5, .4, 1) both, rs-glow 1.8s ease-in-out .6s infinite;
  }
  #res-rank-wrap.rank-s #res-rank-letter { color: #fff8d8; text-shadow: 0 2px 6px rgba(90, 50, 0, .8); }
  @keyframes rs-glow {
    0%, 100% { box-shadow: 0 0 22px rgba(255, 215, 0, .35), inset 0 0 20px rgba(0, 0, 0, .45); }
    50%      { box-shadow: 0 0 38px rgba(255, 215, 0, .65), inset 0 0 20px rgba(0, 0, 0, .45); }
  }
  #res-rank-wrap.rank-a #res-rank-emblem {
    background: radial-gradient(circle at 35% 30%, #b7d9ff 0%, #2f6fd6 50%, #123a7a 100%);
  }
  #res-rank-wrap.rank-a #res-rank-letter { color: #eaf4ff; text-shadow: 0 2px 6px rgba(0, 30, 80, .8); }
  #res-rank-wrap.rank-b #res-rank-emblem {
    background: radial-gradient(circle at 35% 30%, #b9f0c8 0%, #2e9e57 50%, #0e4d26 100%);
  }
  #res-rank-wrap.rank-b #res-rank-letter { color: #eafff0; text-shadow: 0 2px 6px rgba(0, 60, 25, .8); }
  #res-rank-wrap.rank-c #res-rank-emblem {
    background: radial-gradient(circle at 35% 30%, #c6d2e6 0%, #5a708f 50%, #26344a 100%);
    border-color: rgba(160, 175, 200, .8);
    box-shadow: 0 0 14px rgba(120, 140, 180, .25), inset 0 0 20px rgba(0, 0, 0, .45);
  }
  #res-rank-wrap.rank-c #res-rank-letter { color: #e8eef8; text-shadow: 0 2px 6px rgba(10, 20, 40, .8); }

  /* 合格印（80%以上でstampedが付く。押される瞬間のアニメ付き） */
  #res-pass-stamp {
    position: absolute;
    left: 50%;
    margin-left: 44px;
    bottom: -4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 7px 10px 5px;
    border: 3px solid #e03131;
    border-radius: 8px;
    box-shadow: inset 0 0 0 1.5px rgba(224, 49, 49, .55);
    color: #ff5a5a;
    background: rgba(30, 8, 10, .25);
    transform: rotate(-12deg);
    opacity: 0;
    pointer-events: none;
  }
  #res-pass-stamp .rs-kanji {
    font-family: 'Noto Sans JP', serif;
    font-weight: 900;
    font-size: 1.6rem;
    line-height: 1.05;
    letter-spacing: .12em;
    text-shadow: 0 0 6px rgba(224, 49, 49, .35);
  }
  #res-pass-stamp .rs-pass {
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: .34em;
    margin-top: 1px;
    opacity: .85;
  }
  #res-rank-wrap.stamped #res-pass-stamp {
    animation: rs-stamp .5s cubic-bezier(.2, 1.7, .4, 1) both;
  }
  @keyframes rs-stamp {
    0%   { opacity: 0; transform: rotate(-26deg) scale(2.5); }
    62%  { opacity: 1; transform: rotate(-10deg) scale(.92); }
    100% { opacity: 1; transform: rotate(-12deg) scale(1); }
  }

  /* メッセージとNEW RECORDを縦に積んで折り返し崩れを防ぐ */
  #final-message {
    display: flex !important;
    flex-direction: column;
    gap: 6px;
    align-items: center;
    font-size: 1.18rem !important;
    line-height: 1.4;
  }
  #final-message > span { margin-left: 0 !important; }
}

/* ============================================================
   m84 2026-08-22 結果画面の仕上げ（スマホのみ）
   ─ ①下部：内容が言語バーの裏に隠れないよう他モードと同じ余白
     ②シェアボタン拡大 ③下部の「マップへ戻る」はヘッダーの◀Backと
       重複のため非表示 ④LEVEL UP!!の視認性 ⑤合格可能性・注記の文字拡大
     ⑥シェア映えのメタ行（PassQuest＋日付） ※花火の種類はresult_fx.js
   ============================================================ */
@media (max-width: 600px) {
  body.rpg-result-open #quiz-screen {
    padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)) !important;
  }
  #final-share-area button {
    padding: 14px 32px !important;
    font-size: 1.15rem !important;
    border-radius: 999px !important;
    gap: 10px !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .55), 0 0 16px rgba(29, 161, 242, .5) !important;
  }
  #final-result-card #rpg-return-btn { display: none !important; }
  #level-up-text {
    font-size: 1.9rem !important;
    letter-spacing: .04em !important;
    color: #ffd700 !important;
    -webkit-text-stroke: 1.2px rgba(90, 50, 0, .85);
    text-shadow: 0 2px 0 #7a4a00, 0 0 18px rgba(255, 215, 0, .85), 0 4px 10px rgba(0, 0, 0, .6) !important;
    animation: pq-levelup-float 1.6s ease-in-out infinite !important;
  }
  @keyframes pq-levelup-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
  }
  #pass-meter-result .pm-title { font-size: 1.25rem !important; }
  #pass-meter-result .pm-note { font-size: 0.95rem !important; line-height: 1.7 !important; }
  #final-result-card #res-meta-line {
    display: block !important;
    text-align: center;
    margin: 0 0 8px;
    color: #d9c27a;
    font-size: .8rem;
    letter-spacing: .18em;
    font-weight: 700;
    opacity: .85;
  }
}

/* ============================================================
   m85 2026-08-22 結果画面の追修正（スマホのみ）
   ─ ①iPhone実機報告「言語切替後に問題カードが結果の上に出る」への
       保険：結果表示中（body.rpg-result-open）は問題カードをCSSでも
       強制非表示（JS側の __refreshResultLang でも状態を毎回復元）。
     ②下部の余白：実測69px→約16pxへ（m84の92px指定を上書き）。 */
@media (max-width: 600px) {
  html body.rpg-result-open #question-card {
    display: none !important;
  }
  body.rpg-result-open #quiz-screen {
    padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ============================================================
   m86 2026-08-22 結果画面の最終防壁（スマホのみ）
   ─ iPhone実機で「言語切替後に問題カードが結果の上に出る」が
     m85（body.rpg-result-open頼み）でも再発報告。目印クラスや
     JSの状態に一切依存せず、«結果カードが表示されている間»は
     :has() でバトルUIを直接封じる。#final-result-card の hidden
     が外れているときだけ効くので、通常のバトル画面には影響なし。
     （:has はこのアプリで既に使用実績あり＝iOS 15.4+対応） */
@media (max-width: 600px) {
  body:has(#final-result-card:not(.hidden)) #question-card,
  body:has(#final-result-card:not(.hidden)) #quiz-header-info,
  body:has(#final-result-card:not(.hidden)) #quiz-screen .quiz-progress-bar-wrap,
  body:has(#final-result-card:not(.hidden)) #quiz-screen #quiz-progress-bar-wrap,
  body:has(#final-result-card:not(.hidden)) #rpg-enemy-panel,
  body:has(#final-result-card:not(.hidden)) #rpg-player-panel {
    display: none !important;
  }
}

/* ============================================================
   m87 2026-08-23 結果画面の文字拡大＋LEVEL UP新デザイン（スマホのみ）
   ─ ①メタ行（PassQuest⚔日付）拡大 ②段階メッセージ・獲得EXP・
     信頼度・▲pt・未着手チップを拡大 ③LEVEL UP!!を«金の帯バッジ»へ
     （光る文字→金グラデのピルに黒字・ポップイン＋脈動） */
@media (max-width: 600px) {
  #final-result-card #res-meta-line {
    font-size: 1.02rem !important;
    letter-spacing: .14em !important;
    opacity: .95 !important;
  }
  #final-result-card #final-message { font-size: 1.32rem !important; }   /* 旧1.05rem指定(2重ID)に勝つ */
  #rpg-result-container .exp-box > div:first-child { font-size: 1.08rem !important; }
  #rpg-gained-exp { font-size: 1.5rem !important; }

  #pass-meter-result .pm-badge { font-size: 1.02rem !important; gap: 6px !important; }
  #pass-meter-result .pm-badge .dot { width: 11px !important; height: 11px !important; }
  #pass-meter-result .pm-delta { font-size: 1.05rem !important; font-weight: 900 !important; }
  #pass-meter-result .pm-weak { font-size: 1.05rem !important; line-height: 1.5 !important; }
  #pass-meter-result .pm-weak-label { font-size: .95rem !important; }

  /* LEVEL UP!!：金の帯バッジ（ポップイン→ゆっくり脈動） */
  #level-up-text {
    display: table !important;
    margin: 12px auto 2px !important;
    font-family: 'Noto Sans JP', sans-serif !important;
    font-size: 1.4rem !important;
    font-weight: 900 !important;
    letter-spacing: .08em !important;
    color: #3a2400 !important;
    -webkit-text-stroke: 0 !important;
    background: linear-gradient(180deg, #ffe9a0 0%, #ffc93c 45%, #e8a10c 100%) !important;
    border: 2px solid #fff3c4 !important;
    border-radius: 999px !important;
    padding: 8px 28px !important;
    box-shadow: 0 4px 0 #8a5c00, 0 8px 20px rgba(0, 0, 0, .5), 0 0 22px rgba(255, 200, 60, .45) !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .55) !important;
    animation: pq-levelup-pop .55s cubic-bezier(.2, 1.6, .4, 1) both,
               pq-levelup-pulse 2.2s ease-in-out .6s infinite !important;
  }
  @keyframes pq-levelup-pop {
    from { opacity: 0; transform: scale(.3); }
    to   { opacity: 1; transform: scale(1); }
  }
  @keyframes pq-levelup-pulse {
    0%, 100% { box-shadow: 0 4px 0 #8a5c00, 0 8px 20px rgba(0, 0, 0, .5), 0 0 18px rgba(255, 200, 60, .35); }
    50%      { box-shadow: 0 4px 0 #8a5c00, 0 8px 20px rgba(0, 0, 0, .5), 0 0 34px rgba(255, 210, 80, .75); }
  }
}

/* ============================================================
   m88 2026-08-23 獲得EXPパネルの新デザイン（スマホのみ・ご要望）
   ─ 黒地に細枠だった exp-box を、結果画面の«夜＋金»に合わせた
     宝箱風パネルへ：紺紫グラデ＋金縁＋内光、EXP数値は金グラデ文字、
     Lv.は味方カードと同じ紫のピル、EXPバーは金の流光バーに。 */
@media (max-width: 600px) {
  #rpg-result-container .exp-box {
    background: linear-gradient(160deg, #221448 0%, #140b30 55%, #0d0824 100%) !important;
    border: 2px solid rgba(212, 175, 55, .85) !important;
    border-radius: 18px !important;
    padding: 16px 18px 18px !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .55),
                0 0 18px rgba(212, 175, 55, .22),
                inset 0 1px 0 rgba(255, 255, 255, .08),
                inset 0 0 26px rgba(20, 8, 48, .8) !important;
  }
  /* 「獲得 EXP: 460」行：中央寄せ・数値は金グラデ文字 */
  #rpg-result-container .exp-box > div:first-child {
    display: flex !important;
    justify-content: center !important;
    align-items: baseline !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
  }
  #rpg-result-container .exp-box > div:first-child > span[data-i18n="res-gained-exp"] {
    color: #c9b37e !important;
    font-weight: 700 !important;
    letter-spacing: .08em !important;
  }
  #rpg-gained-exp {
    font-size: 1.7rem !important;
    font-weight: 900 !important;
    background: linear-gradient(180deg, #fff3c4 0%, #ffd54a 45%, #e8a10c 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none !important;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .6)) drop-shadow(0 0 10px rgba(255, 213, 74, .35));
  }
  /* Lv.：味方カードのLVボタンと同じ紫ピル */
  #rpg-result-level {
    display: inline-flex !important;
    align-items: center !important;
    padding: 4px 14px !important;
    border-radius: 999px !important;
    background: linear-gradient(160deg, #3b0068 0%, #7c3aed 45%, #a855f7 70%, #6d28d9 100%) !important;
    border: 1.6px solid rgba(196, 167, 255, .45) !important;
    color: #fff !important;
    font-size: 1.05rem !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .5), 0 0 12px rgba(168, 85, 247, .45) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6) !important;
  }
  /* EXPバー：金の流光バー（太く・丸く・金縁） */
  #rpg-result-container .rpg-exp-bar-bg {
    height: 16px !important;
    border-radius: 999px !important;
    background: #120a2c !important;
    border: 1.5px solid rgba(212, 175, 55, .55) !important;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, .7) !important;
    margin-left: 12px !important;
  }
  #rpg-result-bar {
    border-radius: 999px !important;
    background: linear-gradient(90deg, #ffd54a, #ffb300 38%, #ffe9a0 50%, #ffb300 62%, #ff8f00) !important;
    background-size: 200% 100% !important;
    animation: pq-expbar-flow 2.2s linear infinite;
    box-shadow: 0 0 10px rgba(255, 195, 60, .55);
  }
  @keyframes pq-expbar-flow {
    from { background-position: 0% 0; }
    to   { background-position: -200% 0; }
  }
}

/* ============================================================
   ★2026-08-25 1問1答の「📋5択を見る」をRPGモードと同じ小ささに
   （トモさん指示・スマホのみ。インラインstyleより強く上書き）
   ============================================================ */
@media (max-width: 600px) {
  #ichimoni-screen #ichimoni-five-btn {
    padding: 7px 12px !important;
    font-size: 0.82rem !important;
    min-width: 0 !important;
  }
}

/* ============================================================
   ★2026-08-25(3) 1問1答のよみあげをRPGモードと同じ見た目に（スマホのみ）
   ─ トモさん提示の見本（RPGモード実機スクショ）に合わせる：
     行 = [よみあげ(ラベル付き金ピル)][📋5択を見る(横に広い青)][気になる]
   ─ 「5択を見る」の横広（m18の flex:1 1 auto で余り幅を吸収）は
     見本と同じ挙動なのでそのまま（(2)で入れた縮小指定は誤りのため撤回）。
   ─ よみあげはRPG(#quiz-screen)と同じラベルを表示
     （title属性=6言語対応、jaは「よみあげ」に上書き）
   ※PC(601px以上)は不変
   ============================================================ */
@media (max-width: 600px) {
  #ichimoni-screen #ichimoni-q-card > .pq-oneline .audio-btn::after {
    content: attr(title);
    font-size: 0.82rem;
    font-weight: 800;
    color: rgb(74, 47, 0);
  }
  body.lang-ja #ichimoni-screen #ichimoni-q-card > .pq-oneline .audio-btn::after {
    content: "よみあげ";
  }
}

/* ============================================================
   ★2026-08-25(4) 模擬試験の科目表題を過去問と同じ見た目に（スマホのみ）
   ─ トモさん指摘：模擬試験の問題画面上部の表題（人間の尊厳と自立）が
     金色ピル+濃い文字だった。過去問と同じ
     «半透明の黒下地 + 黄色っぽい文字(#f0d070)» に揃える。
     （見本 = past_exam.css .past-exam-nav-bar / .past-exam-nav-mode：
       背景 rgba(0,0,0,0.5)・枠 rgba(212,175,55,0.15)・文字 #f0d070、
       スマホの文字サイズは 1.02rem）
   ※PC(601px以上)は従来の金色ピルのまま不変
   ============================================================ */
@media (max-width: 600px) {
  /* ★2026-08-25(5) トモさん指摘で調整：左寄りの小さいピルではなく、
     過去問のナビバーと同じく «問題エリアと同じ横幅の半透明バー＋中央の文字» にする */
  #mock-exam-screen .mock-exam-subject-badge {
    display: block !important;
    width: auto !important;
    box-sizing: border-box !important;
    text-align: center !important;
    background: rgba(0, 0, 0, 0.5) !important;
    border: 1px solid rgba(212, 175, 55, 0.15) !important;
    border-radius: 12px !important;
    color: #f0d070 !important;
    font-size: 1.02rem !important;
    font-weight: bold !important;
    padding: 8px 12px !important;
    box-shadow: none !important;
  }
  #mock-exam-screen .mock-exam-subject-badge ruby rt {
    color: #f0d070 !important;
  }
}


/* ══════════════════════════════════════════════════════════════
   ★2026-08-29 言語メニューが画面の外にはみ出す件
   ------------------------------------------------------------
   実機（iPhone）のスクリーンショットで、母国語の一覧が画面の右端で
   切れているのを確認した。位置と最大幅の指定が ov-lang-bottom の
   ブロックにしか無く、条件によって効かない場合があったため。
   ガチャ画面・図鑑でも必ず効くように、@media の外に置く。
   ══════════════════════════════════════════════════════════════ */
/* ★2026-08-29 追記：母国語メニューの «開いた瞬間のズレ» と «右端の見切れ»
   ------------------------------------------------------------
   【何が起きていたか】
     ① 開いた直後だけ中央寄りに出て、すぐ右へ移動する
     ② 移動した先で右側が画面からはみ出して切れる

   【原因（実測）】
     元の指定は  left:50% ＋ transform:translateX(-50%)  だった。
     これは «自分自身の幅の半分» を使って位置を決める書き方なので、
     中身（国旗の画像や文字）が揃って幅が確定するまで位置が動く。
     ＝ ①の «一瞬ズレて見える» の正体。

     さらに position の基準は «いちばん近い位置指定の祖先»。
     言語バー（.lang-toggle）には タップのズレ対策で
     will-change:transform が付いており、これが基準になってしまう。
     基準がバーの内側なので、そこから中央寄せすると画面の外へ出る。
     ＝ ②の «右が切れる» の正体。

   【直し方】
     «自分の幅» を使わない置き方にする。
       left:auto ／ right:0 ／ transform:none
     右端を基準にすれば、幅がいくつであっても位置は動かない。
     ▾ ボタンの真下に右揃えで開くので、見た目としても自然。
     基準の祖先がバーでも画面でも、その右端は必ず画面の中にあるため
     はみ出しようがない。

   ※ .lt-native-menu を3回重ねているのは、@media の中にある
     既存の指定（html body.ov-lang-bottom.ov-lang-bottom .lt-native-menu）より
     «強さ» を上げるため。同じ強さだと後から書いても負ける場合がある。 */
html body.gc-open .lt-native-menu.lt-native-menu.lt-native-menu,
html body.dex-open .lt-native-menu.lt-native-menu.lt-native-menu,
html body.ov-lang-bottom .lt-native-menu.lt-native-menu.lt-native-menu {
  position: absolute !important;
  top: auto !important;
  bottom: calc(100% + 10px) !important;
  left: auto !important;
  right: 0 !important;
  transform: none !important;
  min-width: 200px !important;
  max-width: calc(100vw - 28px) !important;
  max-height: min(58vh, 400px) !important;
  overflow-y: auto !important;
  z-index: 2147483200 !important;
  pointer-events: auto !important;
}
html body.gc-open .lt-native-menu button,
html body.dex-open .lt-native-menu button,
html body.ov-lang-bottom .lt-native-menu button {
  /* 指で押せる大きさを確保する */
  min-height: 46px !important;
  pointer-events: auto !important;
}

/* =========================================================================
   模擬試験の「次へ」ボタン                                   2026-08-29
   【報告】実機で «次へを押すと、進むこともあればメニューが開くこともある»
   【原因】右下の☰メニュー（.title-menu-trigger）は position:fixed で
           right:24px / bottom:24px / 56px角 / z-index:1000000。
           「次へ」は行の右端（margin-left:auto）にあるため、
           画面をその高さまでスクロールすると «☰の下» に入り、
           タップが☰に取られていた。押せたり押せなかったりするのはこのため。
   【直し方】
     ・「次へ」を1行使って大きくする（押しやすさ）
     ・右側に 84px あけて、☰の柱（右から24+56=80px）に絶対に入らないようにする
   ========================================================================= */
@media (max-width: 760px) {
    .mock-exam-actions {
        flex-wrap: wrap !important;
        row-gap: 10px !important;
    }
    .mock-exam-actions .mock-next-btn {
        flex: 1 1 100% !important;
        margin-left: 0 !important;
        margin-right: 84px !important;   /* ☰と重ならないための余白 */
        min-height: 58px !important;
        padding: 16px 20px !important;
        font-size: 1.06rem !important;
        border-radius: 18px !important;
    }
}


/* ══════════════════════════════════════════════════════════
   m27　連打したときに click が丸ごと食われるのを防ぐ（スマホのみ）
     実機の記録（2026-08-30・iPhone 18.7）：ヘッダーの BGM ボタンを
     250〜400ms 間隔で連打すると、click が1回も発生しなかった。
     これは iOS が «すばやい連続タップ» を「二重タップで拡大」の
     候補として扱い、click を出さずに待つため。
     touch-action:manipulation はこの «二重タップ拡大» だけを無効にする
     指定で、スクロールもピンチ拡大もそのまま使える。
     ※PCの表示・動作は変わりません（この@media の中だけの指定です）
   ══════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  button,
  [onclick],
  .term,
  .title-menu-item,
  .lt-seg {
    touch-action: manipulation;
  }
}


/* ══════════════════════════════════════════════════════════
   m28　特訓パート選択（#part-selection-modal）でも📣報告を出す
     この画面はタイトルから開くため body.is-title-screen が付いたままで、
     «タイトルでは📣を隠す» 指定に巻き込まれて消えていた
     （トモさん実機報告 2026-08-30・スクリーンショットで確認）。
     見張り（overlay_marks_guard）には pqpart-open が登録済みなのに、
     pt-open / eg-open にはある «出し直すCSS» がこの画面だけ無かった。
     同じ直し方で統一する。
   ══════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  html body.pqpart-open #feedback-fab {
    display: flex !important;
    z-index: 100004 !important;
  }
}