/* 診断の導入演出（統合案A）と、ヘッダーの音トグル。
 *
 * モック: static/front/design-mock/rpg_intro_integrated.html
 * 造形はモックv2に合わせている（背景のヒーロー画像・紋章・点滅キャレット・窓の影・
 * 右上のスキップ・全画面の占有）。
 *
 * ★このファイルは新規で、既存の sync-*.css / art-*.css には触っていない。
 *   CSSの層の作り直し（docs/UXレーン_CSS層の作り直し_案文_2026-07-31.md）が済むまで、
 *   既存ファイルへの追記を避けるため独立させてある。層の作り直しのときは、
 *   このファイルも `base` 層へ入れること（無レイヤーのまま残すと層に勝ってしまう）。
 *
 * ★色は DESIGN.md のトークンのみ。二書体（見出し=明朝 / 本文・UI=ゴシック）。
 * ★animation-fill-mode: forwards / both は使わない（transform残留でfixedの基準が壊れる）。
 */

/* ============================================================
   導入演出（全画面）
   ============================================================ */
.rpg-intro {
    position: fixed;
    inset: 0;
    z-index: 200;
    overflow-y: auto;
    background: linear-gradient(160deg, var(--color-navy, #0E1A2B), #1A2C47);
}
.rpg-intro[hidden] {
    display: none;
}

/* 背景のヒーロー画像。既存の画像を暗く敷く */
.rpg-intro-bg {
    position: absolute;
    inset: 0;
    background: url("/static/front/img/ai_genarated/site_hero_landscape_rpg_top.webp") center / cover no-repeat;
    opacity: 0.28;
    filter: saturate(0.7);
}
.rpg-intro-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(14, 26, 43, 0.55) 0%,
        rgba(14, 26, 43, 0.2) 40%,
        rgba(14, 26, 43, 0.92) 100%
    );
}

/* スキップ: 常に見える位置。2回目以降の完走率を落とさないために必須 */
.rpg-intro-skip {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 6;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 8px 14px;
    border: 1px solid rgba(185, 138, 50, 0.5);
    border-radius: 999px;
    color: #f7edd4;
    background: rgba(14, 26, 43, 0.72);
    font-family: var(--font-base, sans-serif);
    font-size: 12.5px;
    cursor: pointer;
}
.rpg-intro-skip:hover {
    border-color: var(--color-gold, #EAAD02);
}

.rpg-intro-stage {
    position: relative;
    z-index: 2;
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0 16px 30px;
}

/* 語り手は紋章で表す。キャラクター画像は使わない */
.rpg-intro-crest {
    display: grid;
    width: 76px;
    height: 76px;
    margin: 0 auto 18px;
    place-items: center;
    border: 1px solid rgba(185, 138, 50, 0.5);
    border-radius: 999px;
    background: rgba(14, 26, 43, 0.6);
    opacity: 0;
    animation: rpgCrestIn 0.6s ease 0.2s 1;
}
.rpg-intro-crest.is-shown {
    opacity: 1;
}
.rpg-intro-crest img {
    width: 52px;
    height: 52px;
    object-fit: contain;
}
@keyframes rpgCrestIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* メッセージ窓 */
.rpg-intro-win {
    position: relative;
    min-height: 132px;
    padding: 20px 18px 18px;
    border: 2px solid #f7edd4;
    border-radius: 12px;
    background: rgba(10, 18, 31, 0.92);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
.rpg-intro-msg {
    margin: 0;
    min-height: 3.8em;
    color: #f7edd4;
    font-family: var(--font-base, sans-serif);
    font-size: 16px;
    line-height: 1.9;
    letter-spacing: 0.02em;
    white-space: pre-wrap;
}

/* 打っている位置の点滅キャレット。RPGの窓らしさの芯 */
.rpg-intro-caret {
    display: inline-block;
    width: 0.55em;
    height: 1.05em;
    margin-left: 2px;
    vertical-align: -0.16em;
    background: #f7edd4;
    animation: rpgBlink 1s steps(1) infinite;
}
@keyframes rpgBlink {
    0%, 49% {
        opacity: 1;
    }
    50%, 100% {
        opacity: 0;
    }
}

/* 送り終わったときだけ出す「次へ」の合図 */
.rpg-intro-next {
    position: absolute;
    right: 14px;
    bottom: 10px;
    color: var(--color-gold, #EAAD02);
    font-size: 14px;
    opacity: 0;
    animation: rpgBob 1.1s ease-in-out infinite;
}
.rpg-intro-next.is-on {
    opacity: 1;
}
@keyframes rpgBob {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(3px);
    }
}

/* 最後に出すCTA */
.rpg-intro-final {
    position: relative;
    z-index: 4;
    margin-top: 18px;
    opacity: 0;
    transition: opacity 0.5s ease;
}
.rpg-intro-final.is-on {
    opacity: 1;
}
.rpg-intro-go {
    display: block;
    min-height: 44px;
    padding: 16px;
    border-radius: 8px;
    color: #fff;
    background: var(--color-crimson, #c23a24);
    box-shadow: 0 10px 24px rgba(16, 32, 44, 0.3);
    font-family: var(--font-base, sans-serif);
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
}
/* ★ホバーで読めなくなるのを止める（オーナー指摘 2026-08-04）。
   style.css の一般規則 `a:hover { color: var(--gold-deep-ink) }` は
   **明るい地を前提**にしており、朱のボタン(#c23a24)に金茶(#87663E)が乗ると 1.3:1 になる。
   同じ規則が濃い地の上で効いている箇所は他にもある（audit_hover_contrast.js で14件）。
   ここでは文字を白のまま保ち、押せることは地の濃淡で示す。 */
.rpg-intro-go:hover,
.rpg-intro-go:focus-visible {
    color: #fff;
    background: #a82f1c;
}

.rpg-intro-sub {
    display: block;
    margin-top: 10px;
    color: #f7edd4;
    font-size: 12.5px;
    text-align: center;
    opacity: 0.75;
}

/* ============================================================
   診断ページの章枠（統合案D）。モックの造形に合わせる
   ★このファイルはトップ・診断・結果にしか読まれないので、ここに書いても
     他ページには1バイトも載らない。sync-quiz.css は書き換えず、後勝ちで上書きする。
     セレクタは .quiz-experience 配下に限定（診断ページの外へ漏らさない）。
   ============================================================ */
.quiz-experience .quiz-hero {
    position: relative;
    overflow: hidden;
    padding: 20px 18px 24px;
    border-radius: 14px;
    /* モックは「紺グラデの帯＋風景画を16%で重ねる」。ここでは多重背景で同じ見えを作る:
       画像を下に敷き、84%の紺グラデを上に被せる＝画像の透け16% */
    background:
        linear-gradient(160deg, rgba(14, 26, 43, 0.84), rgba(26, 44, 71, 0.84)),
        url("/static/front/img/ai_genarated/site_hero_landscape_rpg_top.webp") center / cover no-repeat;
}
.quiz-experience .quiz-hero h1 {
    color: #f7edd4;
}
.quiz-experience .quiz-hero-lead {
    color: rgba(247, 237, 212, 0.88);
}
.quiz-experience .quiz-step-chip {
    color: var(--color-gold, #EAAD02);
    letter-spacing: 0.16em;
}
.quiz-experience .quiz-chapter-label {
    color: rgba(247, 237, 212, 0.9);
}
.quiz-experience .quiz-step-medal {
    display: grid;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid rgba(185, 138, 50, 0.5);
    border-radius: 999px;
    background: rgba(14, 26, 43, 0.5);
}
.quiz-experience .quiz-step-medal img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}
/* 飾り罫（線・✦・線）。既存CSSはモバイルで消しているが、モックは出している */
@media (max-width: 767px) {
    .quiz-experience .quiz-title-ornament {
        display: grid;
    }
}
/* 中央の印。既存はコンパス画像（明るい地用の装飾）だが、暗い帯の上では
   モックどおり ✦ にする。画像を消して文字で置く */
.quiz-experience .quiz-title-ornament .ui-icon {
    display: grid;
    place-items: center;
    background-image: none;
}
.quiz-experience .quiz-title-ornament .ui-icon::after {
    content: "✦";
    color: var(--color-gold, #EAAD02);
    font-size: 12px;
    line-height: 1;
}

/* ============================================================
   結果直前の画面（統合案C）の文字と地。モックの造形に合わせる
   （オーバーレイ本体の表示制御 display:none / .is-active は deferred.css のまま触らない）
   ============================================================ */
.quiz-analyzing-overlay {
    background:
        linear-gradient(160deg, rgba(14, 26, 43, 0.85), rgba(26, 44, 71, 0.85)),
        url("/static/front/img/ai_genarated/site_hero_landscape_rpg_top.webp") center / cover no-repeat;
}
.quiz-analyzing-copy {
    color: #f7edd4;
    font-size: 24px;
    letter-spacing: 0.02em;
}
.quiz-analyzing-note {
    color: rgba(247, 237, 212, 0.85);
    font-size: 13.5px;
}

/* ============================================================
   結果直前の印（統合案C）。診断の最終ステップの解析オーバーレイに置く
   ★オーバーレイ本体（.quiz-analyzing-*）は deferred.css の既存規則。
     ここでは中に置く印だけを足す。既存の規則は書き換えていない。
   ============================================================ */
.rpg-seal {
    display: grid;
    width: 112px;
    height: 112px;
    place-items: center;
    border: 2px solid var(--color-gold, #EAAD02);
    border-radius: 50%;
    background: rgba(14, 26, 43, 0.55);
    box-shadow: 0 0 34px rgba(234, 173, 2, 0.28);
    animation: rpgSealPulse 1.15s ease-in-out infinite;
}
.rpg-seal img {
    width: 66px;
    height: 66px;
    object-fit: contain;
}
@keyframes rpgSealPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.9;
    }
    50% {
        transform: scale(1.06);
        opacity: 1;
    }
}

/* ============================================================
   ヘッダーの音トグル
   ============================================================ */
.sound-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid rgba(213, 179, 106, 0.7);
    border-radius: 999px;
    color: #fff8e8;
    background: rgba(255, 248, 232, 0.08);
    font-family: var(--font-base, sans-serif);
    font-size: 12.5px;
    line-height: 1;
    cursor: pointer;
}
.sound-toggle:hover {
    border-color: var(--color-gold, #EAAD02);
}
.sound-toggle.is-off {
    opacity: 0.6;
}
/* ヘッダーの中では、ハンバーガーの隣（右寄せ）に置く */
.site-header .sound-toggle {
    margin-left: auto;
    margin-right: 8px;
}
/* 狭い端末では記号だけにする。ロゴ＋トグル＋ハンバーガーが1行に収まらなくなるため */
@media (max-width: 400px) {
    .sound-toggle-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
    .sound-toggle {
        /* 文字を隠すと横幅が35pxまで縮み、タップ領域の下限44pxを割る（375pxで実測） */
        min-width: 44px;
        justify-content: center;
        padding: 8px 10px;
    }
    /* 導入演出の中は場所に余裕があるので、モックどおり「♪ 音あり」を全部見せる */
    .rpg-intro .sound-toggle-label {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip-path: none;
    }
}
/* ★導入演出は全画面（z-index:200）でヘッダーを覆う。
   ヘッダー側のトグルを z-index で上へ出そうとしても、ヘッダー自身が積み重ねの文脈を
   作っていると外へ出られない。**演出の中にもトグルを置く**方が確実で、モックもその形。
   下はその演出側のトグルの位置（モックと同じ左上）。 */
.rpg-intro .sound-toggle {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 6;
    background: rgba(14, 26, 43, 0.72);
    border-color: rgba(185, 138, 50, 0.5);
    color: #f7edd4;
}

/* ============================================================
   動きを減らす設定
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .rpg-intro-crest,
    .rpg-intro-next,
    .rpg-intro-caret {
        animation: none;
    }
    .rpg-intro-crest {
        opacity: 1;
    }
    .rpg-intro-final {
        transition: none;
    }
}

/* ============================================================
   案G: 章の1問目を語りの中で答える（2026-08-02 オーナー採用）
   ------------------------------------------------------------
   ★寸法・色は**本番の導入演出の語り窓 `.rpg-intro-win` を実測して写した**
     （憲章8.28補: 既存画面のモックも実装も、まず本番の実測値から始める）。
       窓  : 枠 2px solid #f7edd4 / 角丸12px / 地 rgba(10,18,31,.92)
             / padding 20px 18px 18px / 影 0 10px 30px rgba(0,0,0,.45)
       語り: 明朝16px / 行高1.9 / #f7edd4
       紋章: 76px円 / 枠 1px rgba(185,138,50,.5) / 地 rgba(14,26,43,.6)
       出口: 12.5px / 最小高44px / 角丸999px / 地 rgba(14,26,43,.72)
     同じ世界の同じ窓に見せるため、導入演出と値を揃えている。
   ============================================================ */
.quiz-saga {
    position: relative;
    overflow: hidden;
    margin: 0 0 18px;
    border-radius: 14px;
    background: linear-gradient(160deg, var(--color-panel-dark, #0E1A2B), #1A2C47);
}

.quiz-saga[hidden] {
    display: none;
}

.quiz-saga-bg {
    position: absolute;
    inset: 0;
    background: url("../img/ai_genarated/site_hero_landscape_rpg_top.webp") center / cover no-repeat;
    opacity: 0.26;
    filter: saturate(0.7);
}

.quiz-saga-inner {
    position: relative;
    z-index: 2;
    /* ★左右は 0。ここに余白があると、語りの窓だけが一覧の窓より
       左右あわせて28px狭くなり、Q1とQ2以降で幅が違って見えた（オーナー指摘 2026-08-04）。
       窓の幅は .quiz-saga-win と .quiz-question が同じ規則（max-width:460px）で決める。 */
    padding: 18px 0 16px;
}

.quiz-saga-crest {
    display: grid;
    width: 76px;
    height: 76px;
    margin: 8px auto 18px;
    place-items: center;
    border: 1px solid rgba(185, 138, 50, 0.5);
    border-radius: 999px;
    background: rgba(14, 26, 43, 0.6);
}

.quiz-saga-crest img {
    width: 50px;
    height: 50px;
    object-fit: contain;
}

/* ★狭い画面では紋章を小さくする(2026-08-22)。
   76px+余白26px=102px を語りの上に置いていて、その下のQ1を画面の外へ押し出していた。
   消さないのは、語りの箱が「窓」であることの手がかりだから。小さくすれば足りる。 */
@media (max-width: 414px){
    .quiz-saga-crest{
        width: 44px;
        height: 44px;
        margin: 2px auto 10px;
    }
    .quiz-saga-crest img{
        width: 28px;
        height: 28px;
    }
    .quiz-saga-inner{
        padding: 10px 0 12px;
    }
}

/* 窓は本番の導入演出と同じ幅感に留める。
   広い画面で本文カラムいっぱい（978px）に伸びると、語りではなく帯に見える。
   ここは文字要素ではなく箱なので max-width を置いてよい（DESIGN.md rule13）。 */
.quiz-saga-win {
    max-width: 460px;
    margin-inline: auto;
    padding: 20px 18px 18px;
    border: 2px solid #f7edd4;
    border-radius: 12px;
    background: rgba(10, 18, 31, 0.92);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

.quiz-saga-msg {
    margin: 0;
    color: #f7edd4;
    font-family: var(--font-serif);
    font-size: 16px;
    line-height: 1.9;
}

/* ============================================================
   案① 全面フィールド（2026-08-04 オーナー採用）
   ------------------------------------------------------------
   診断ページの地を、導入演出と同じ風景にする。羊皮紙のカード面をやめ、
   窓だけがフィールドの上に浮かぶ形にする（モック: design-mock/quiz_field_mock.html）。
   背景は viewport 固定なので、スクロールしても地が動かない
   ＝**同じ場所に立ったまま問答している**見えになる。
   ★このファイルはトップ・診断・結果にしか読まれないので、:has() の対象も診断だけ。
   ============================================================ */
body:has(.quiz-experience) {
    background:
        linear-gradient(180deg, rgba(14, 26, 43, 0.72), rgba(14, 26, 43, 0.88)),
        url("../img/ai_genarated/site_hero_landscape_rpg_top.webp") center / cover fixed no-repeat,
        #0E1A2B;
}

/* 羊皮紙の額（枠・内側の白影・コンパスの透かし）を外して、地をそのまま見せる */
.quiz-experience .quiz-stage {
    border: 0;
    background: none;
    box-shadow: none;
}

.quiz-experience .quiz-stage::before {
    content: none;
}

/* 地が暗くなるので、窓の外にある文字と部品を明るい側へ寄せる */
.quiz-experience .quiz-step-status,
.quiz-experience .quiz-step-status span,
.quiz-experience .quiz-step-note {
    color: rgba(247, 237, 212, 0.9);
}

.quiz-experience .quiz-step-status strong {
    color: #f7edd4;
}

.quiz-experience .progress-v2-track {
    border-color: rgba(185, 138, 50, 0.34);
    background: rgba(255, 253, 246, 0.18);
}

/* ============================================================
   ★全設問を語りの形式へ（2026-08-04 オーナー指示）
   ------------------------------------------------------------
   「この形式で全部をデザイン変更してくれ」。**Q1だけでなく Q2〜Q5 も**
   同じ窓・同じ台詞・同じ4円にする。語りの地の文が入るのは章の1問目だけで、
   2問目以降は窓に台詞と選択肢だけが載る。
   ※DESIGN.md rule1「濃色ブロックは1ページ3箇所まで・連続配置禁止」に触れる。
     診断ページは設問が主役で、羊皮紙の地に濃い窓が並ぶのが意図した見えなので、
     この画面に限り例外とする（オーナー指示・2026-08-04）。
   ============================================================ */

/* 一覧の設問カード＝窓。造形は本番の導入演出 .rpg-intro-win の実測値を写している */
.quiz-experience .quiz-form > .quiz-question {
    display: block;
    min-height: 0;
    /* width:100% が要る。.quiz-form はグリッドで項目が内容幅に縮むため、
       これが無いと設問文の短い1枚だけ431pxになって窓の幅が揃わない（実測で発見） */
    width: 100%;
    max-width: 460px;
    margin: 0 auto 14px;
    padding: 20px 18px 18px;
    border: 2px solid #f7edd4;
    border-radius: 12px;
    background: rgba(10, 18, 31, 0.92);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

/* 四隅の鉤飾りは羊皮紙のカード用。濃い窓の上では線が浮くので出さない */
.quiz-experience .quiz-form > .quiz-question::before,
.quiz-experience .quiz-form > .quiz-question::after {
    content: none;
}

/* 語りの窓の中は、外側の .quiz-saga-win が窓なので、設問側は素に戻す */
.quiz-saga-slot .quiz-question {
    display: block;
    min-height: 0;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
}

.quiz-saga-slot .quiz-question::before,
.quiz-saga-slot .quiz-question::after {
    content: none;
}

/* ここから下は「語りの中」と「一覧」で共通の見え方 */
.quiz-experience .quiz-question-head {
    display: block;
    text-align: left;
}

/* 通し番号は金の細い輪に小さく（「あと何問か」の手掛かりを演出のために落とさない） */
.quiz-experience .quiz-question-index {
    display: inline-grid;
    width: 30px;
    height: 30px;
    margin: 0;
    padding: 0;
    place-items: center;
    border: 1px solid rgba(185, 138, 50, 0.7);
    border-radius: 999px;
    background: rgba(14, 26, 43, 0.5);
    box-shadow: none;
    clip-path: none;   /* 一覧の八角形バッジを打ち消す */
    color: #ffd767;
    font-family: var(--font-serif);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1;
}

.quiz-saga-slot .quiz-question-index {
    margin-top: 14px;
}

/* 設問文 = 案I「台詞」。箱をやめ、「」で置く。
   色は #ffd767（窓の地 rgb(13,22,38) に対して 13.08:1・描画ピクセルと突合済み）。 */
.quiz-experience .quiz-question-head h2 {
    margin: 10px 0 0;
    padding: 0 0 0 0.6em;
    border: 0;
    background: none;
    color: #ffd767;
    font-family: var(--font-serif);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.85;
    text-align: left;      /* 中央のままだと「る。」だけが中央に残って台詞に見えない */
    text-indent: -0.6em;   /* 「 のぶんだけ左へ出して、2行目以降と頭を揃える */
}

.quiz-experience .quiz-question-head h2::before {
    content: "「";
}

.quiz-experience .quiz-question-head h2::after {
    content: "」";
}

/* 選択肢は濃い地の上へ */
.quiz-experience .choice-option-label {
    color: rgba(247, 237, 212, 0.9);
}

.quiz-experience .choice-option-visual {
    background: rgba(255, 253, 246, 0.14);
}

/* 回答済みの色替え（羊皮紙前提の淡い地）は濃い窓では効かないので打ち消す */
.quiz-experience .quiz-form > .quiz-question.is-answered,
.quiz-experience .quiz-form > .quiz-question.is-answered.is-agree,
.quiz-experience .quiz-form > .quiz-question.is-answered.is-disagree {
    background: rgba(10, 18, 31, 0.92);
    border-color: rgba(234, 173, 2, 0.85);
}

/* ★狭い端末では窓の内側を詰める（2026-08-04）。
   モックは幅430の枠に margin16 で窓398px（内側362px）だったが、本番は
   .container の余白ぶん窓が344px（内側308px）にしかならず、
   4つのラベル(75px×4 + 隙間8px×3 = 324px)が入らずに2行へ折れていた。
   ——**モックが本番より広い前提で作られていた**（憲章8.28補の「条件も合わせる」）。
   内側を328pxまで広げて、430pxでもラベルが1行に収まるようにする。 */
@media (max-width: 767px) {
    .quiz-saga-win,
    .quiz-experience .quiz-form > .quiz-question {
        padding-inline: 12px;
    }
}


/* 診断の説明（第1章のみ・AEO 2026-08-11）。
   JSON-LDに書いた事実を、人が読める本文としても置くための段落。
   地はフィールド（暗い）なので、章の注記と同じ明るい側に寄せる。 */
.quiz-experience .quiz-intro-note {
    margin: 10px 0 0;
    color: rgba(247, 237, 212, 0.86);
    font-size: 13px;
    line-height: 1.9;
    word-break: auto-phrase;
}

.quiz-experience .quiz-intro-note b {
    color: #ffd767;
    font-weight: 700;
}

/* ================================================================
   ★1問目を画面の中に入れる（2026-08-22）
   ================================================================
   375x812（実機で最も多い幅）で実測したところ、最初の選択肢が y=1055 にあり、
   **スクロールしないと1問も答えられない**状態だった。
   「診断を開始して0問のまま離脱」が78%という数字に対して、まずここを潰す。

   ★内訳のうち377pxは 2026-08-11 に私が足したもの（AEOの説明文と、この語り演出）。
     説明文はフォームの下へ移した。演出はオーナー承認済みの形なので**残す**。
     残りは「同じことを2回言っている箇所」と「意匠の余白」から回収する。

   狭い画面だけに掛ける。広い画面では1問目は元から画面内にある。
   ★style.css には書かない。あちらの (max-width:767px) が飾り罫を消し、
     このファイルが .quiz-experience 付きで復活させている。同じ土俵で書かないと
     効かないまま「直したつもり」になる（実際に一度そうなった）。 */
@media (max-width: 414px) {
    /* 帯の内側の余白。上下で44px使っていた */
    .quiz-experience .quiz-hero {
        padding: 12px 16px 14px;
    }
    /* H1は残す（このページの見出しで、AEOでも読まれる）。落とすのは大きさだけ */
    .quiz-experience .quiz-hero h1 {
        margin: 4px auto 6px;
        font-size: 1.35rem;
        line-height: 1.32;
    }
    /* 飾り罫はモックに合わせて出しているが、**線と✦に情報は無い**。
       1問目を画面へ入れることのほうが価値が高いので、狭い画面では引っ込める */
    .quiz-experience .quiz-title-ornament {
        display: none;
    }
    .quiz-experience .quiz-hero-lead {
        margin: 4px auto 0;
        font-size: 0.76rem;
    }
    /* 進行バーの上下余白（28/18） */
    .quiz-experience .progress-v2 {
        margin: 12px auto 8px;
    }
    .quiz-experience .quiz-step-note {
        margin: 6px 0 0;
        font-size: 0.78rem;
    }
    /* 語りの箱に入る前の余白 */
    .quiz-experience .quiz-form {
        margin-top: 8px;
    }
    /* ★紋章は狭い画面では出さない。
       「窓」であることは枠と地の色が既に示していて、この56pxが無いと
       伝わらないものは無い。**1問目を画面へ入れることのほうが価値が高い。**
       広い画面では従来どおり出る（そこでは1問目が元から画面内）。 */
    .quiz-experience .quiz-saga-crest {
        display: none;
    }
    .quiz-experience .quiz-saga-win {
        padding-top: 14px;
    }
}