:root{--accent:#3B82F6;--green:#16a34a;--red:#dc2626;--bg:#EAF2FE;--card:#FFFFFF;--border:#E4E9F2;--text:#0F1830;--muted:#5B6785;--shadow:0 2px 12px rgba(30,50,110,.08)}
    *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
    body{background:var(--bg);color:var(--text);font-family:'M PLUS Rounded 1c','Hiragino Kaku Gothic ProN','Noto Sans JP',sans-serif;min-height:100vh;padding:0 0 100px}
    @media(max-width:1024px){body{min-height:unset;padding-bottom:40px}}

    /* ヘッダー */
    .site-header{background:rgba(255,255,255,.95);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);padding:12px 20px;display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:30;}
    .site-logo{display:inline-flex;align-items:center;gap:6px;text-decoration:none;font-size:17px;font-weight:900;color:#0F1830;}
    .site-logo__icon{width:28px;height:28px;border-radius:7px;background:linear-gradient(135deg,#2E6DE5,#1A449E);display:grid;place-items:center;flex-shrink:0;}
    .site-logo span{color:#2E6DE5;}
    .back-link{margin-left:auto;font-size:12px;font-weight:700;color:var(--muted);text-decoration:none;padding:6px 14px;border:1.5px solid var(--border);border-radius:999px;transition:all .15s;}
    .back-link:hover{border-color:#2E6DE5;color:#2E6DE5;}

    /* コンテンツ */
    .container{max-width:min(900px,95vw);margin:0 auto;padding:clamp(16px,4vw,28px) clamp(12px,3.5vw,24px)}
    .page-header{text-align:center;margin-bottom:28px}
    .grade-tag{display:inline-block;background:var(--accent);color:#fff;font-size:11px;font-weight:900;letter-spacing:.08em;padding:4px 14px;border-radius:999px;margin-bottom:10px}
    .page-header h1{font-size:clamp(15px,4.5vw,22px);font-weight:900;line-height:1.4;color:var(--text)}

    /* プログレス */
    .progress-wrap{margin-bottom:20px}
    .progress-label{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-bottom:6px;font-weight:600}
    .progress-bar{height:8px;background:var(--border);border-radius:4px;overflow:hidden}
    .progress-fill{height:100%;background:linear-gradient(90deg,var(--accent),#60a5fa);border-radius:4px;transition:width .4s ease;width:0%}

    /* 問題カード */
    .question-card{background:var(--card);border:1.5px solid var(--border);border-radius:20px;padding:28px 24px;margin-bottom:16px;box-shadow:var(--shadow)}
    .q-number{font-size:clamp(11px,2.5vw,13px);font-weight:800;color:var(--accent);letter-spacing:.1em;text-transform:uppercase;margin-bottom:12px}
    .q-text{font-size:clamp(20px,5.5vw,28px);font-weight:900;line-height:1.6;margin-bottom:22px;color:var(--text)}
    .q-sub{font-size:13px;color:var(--muted);line-height:1.6;margin:-14px 0 18px}
    .q-formula{background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:12px 16px;font-size:17px;font-weight:900;text-align:center;letter-spacing:.03em;margin-bottom:18px;color:var(--text)}
    /* FP3級図表問題テーブル */
    .fp3-table{border-collapse:collapse;width:100%;font-size:clamp(11px,2.8vw,14px);font-weight:600;margin:10px 0}
    .fp3-table th,.fp3-table td{border:1px solid #c0c8d8;padding:5px 7px;text-align:center}
    .fp3-table th{background:#dbeafe;color:#1e40af}
    .fp3-table tr:nth-child(even) td{background:#f8faff}
    .choices{display:flex;flex-direction:column;gap:clamp(10px,2.5vw,14px)}
    .choice-btn{background:#F6F8FC;border:2px solid var(--border);color:var(--text);border-radius:14px;padding:clamp(16px,4vw,20px) clamp(14px,3.5vw,20px);font-size:clamp(17px,4.5vw,22px);font-weight:700;cursor:pointer;text-align:left;transition:all .15s;display:flex;align-items:center;gap:12px;font-family:'M PLUS Rounded 1c',sans-serif}
    .choice-btn:hover:not(:disabled){border-color:var(--accent);background:#EFF6FF;transform:translateX(2px)}
    .choice-btn.correct{border-color:var(--green);background:#F0FDF4;color:var(--green)}
    .choice-btn.wrong{border-color:var(--red);background:#FEF2F2;color:var(--red)}
    .choice-btn:disabled{cursor:default}
    .choice-label{width:clamp(30px,7vw,38px);height:clamp(30px,7vw,38px);min-width:clamp(30px,7vw,38px);background:var(--border);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:clamp(13px,3vw,16px);font-weight:900;color:var(--muted)}
    .choice-btn:hover:not(:disabled) .choice-label{background:var(--accent);color:#fff}
    .choice-btn.correct .choice-label{background:var(--green);color:#fff}
    .choice-btn.wrong .choice-label{background:var(--red);color:#fff}
    .feedback{margin-top:14px;border-radius:14px;padding:14px 16px;display:none}
    .feedback.show{display:block}
    .feedback.correct-fb{background:#F0FDF4;border:1.5px solid #86efac}
    .feedback.wrong-fb{background:#FEF2F2;border:1.5px solid #fca5a5}
    .feedback-label{font-size:clamp(14px,3.5vw,18px);font-weight:900;margin-bottom:6px}
    .feedback.correct-fb .feedback-label{color:var(--green)}
    .feedback.wrong-fb .feedback-label{color:var(--red)}
    .feedback-text{font-size:clamp(14px,3.5vw,18px);line-height:1.8;color:var(--text)}
    .next-btn{width:100%;background:var(--accent);color:#fff;border:none;border-radius:14px;padding:clamp(17px,4.5vw,22px);font-size:clamp(17px,4.5vw,22px);font-weight:900;cursor:pointer;margin-top:14px;display:none;transition:all .15s;box-shadow:0 4px 0 color-mix(in srgb,var(--accent) 70%,#000);font-family:'M PLUS Rounded 1c',sans-serif}
    .next-btn.show{display:block}
    .next-btn:hover{opacity:.9;transform:translateY(-1px)}
    .next-btn:active{transform:translateY(2px);box-shadow:none}

    /* スコア */
    .score-screen{display:none;text-align:center}
    .score-screen.show{display:block}
    .score-card{background:var(--card);border:1.5px solid var(--border);border-radius:24px;padding:clamp(28px,7vw,48px) clamp(20px,5vw,36px);margin-bottom:20px;box-shadow:var(--shadow)}
    .score-chara{width:clamp(100px,22vw,140px);margin:0 auto 12px;display:block;filter:drop-shadow(0 4px 12px rgba(0,0,0,.1))}
    .score-emoji{font-size:clamp(52px,13vw,80px);margin-bottom:10px}
    .score-num{font-size:clamp(72px,18vw,110px);font-weight:900;color:var(--accent);line-height:1;margin-bottom:2px}
    .score-denom{font-size:clamp(20px,5vw,28px);color:var(--muted);font-weight:600;margin-bottom:16px}
    .score-msg{font-size:clamp(18px,4.5vw,24px);font-weight:700;line-height:1.6;color:var(--text)}
    .score-bar-wrap{margin:20px 0}
    .score-bar-bg{height:12px;background:var(--border);border-radius:6px;overflow:hidden}
    .score-bar-fill{height:100%;border-radius:6px;background:linear-gradient(90deg,var(--accent),#60a5fa);transition:width 1s ease}
    .retry-btn{display:inline-block;background:var(--accent);color:#fff;border:none;border-radius:14px;padding:clamp(15px,4vw,20px) clamp(28px,8vw,44px);font-size:clamp(17px,4.5vw,22px);font-weight:900;cursor:pointer;transition:all .15s;margin-top:8px;box-shadow:0 4px 0 color-mix(in srgb,var(--accent) 70%,#000);font-family:'M PLUS Rounded 1c',sans-serif}
    .retry-btn:hover{opacity:.9;transform:translateY(-1px)}
    .review-list{margin-top:24px}
    .review-item{background:var(--card);border:1.5px solid var(--border);border-radius:14px;padding:14px 16px;margin-bottom:10px;display:flex;gap:10px;align-items:flex-start;text-align:left;box-shadow:0 1px 4px rgba(30,50,110,.05)}
    .review-icon{font-size:16px;flex-shrink:0}
    .review-q{font-size:clamp(15px,3.5vw,18px);font-weight:700;margin-bottom:4px;color:var(--text)}
    .review-a{font-size:clamp(13px,3vw,16px);color:var(--muted)}
    .review-a span{color:var(--accent);font-weight:700}

    /* ===== クエ丸（スタート・スコア画面専用） ===== */
    .chara-inline{display:block;width:130px;margin:0 auto 16px;filter:drop-shadow(0 6px 18px rgba(30,50,110,.15));animation:floatChara 3s ease-in-out infinite}
    .chara-inline--score{width:110px;margin:0 auto 8px;animation:none}
    .chara-inline--bounce{animation:charaBounce .5s ease forwards}
    @keyframes charaBounce{0%,100%{transform:translateY(0)}35%{transform:translateY(-16px)}65%{transform:translateY(-6px)}}

    /* ローディング */
    .loading{text-align:center;padding:60px 20px;color:var(--muted);font-size:14px}

    /* ===== ガチャ報酬オーバーレイ ===== */
    .gacha-reward-overlay{display:none;position:fixed;inset:0;background:radial-gradient(ellipse at center,#0d1a3a 0%,#050810 100%);z-index:1000;align-items:center;justify-content:center;overflow:hidden;cursor:pointer}
    .gacha-reward-overlay.show{display:flex}
    /* 星フィールド */
    .g-star{position:absolute;background:white;border-radius:50%;animation:gTwinkle var(--d) ease-in-out infinite alternate;pointer-events:none}
    @keyframes gTwinkle{from{opacity:.1;transform:scale(.8)}to{opacity:.9;transform:scale(1.2)}}
    /* フラッシュ */
    #gachaFlash{position:absolute;inset:0;background:white;opacity:0;pointer-events:none;z-index:50}
    #gachaFlash.active{animation:gFlash .4s ease-out forwards}
    @keyframes gFlash{0%{opacity:.9}100%{opacity:0}}
    /* ？マーク */
    #gachaQmark{position:absolute;font-size:clamp(140px,25vw,220px);font-weight:900;color:#2563EB;text-shadow:0 0 20px #2563EB,0 0 50px #2563EB,0 0 100px #1d4ed8,0 0 10px #F6C744;opacity:0;transform:scale(.3);user-select:none;z-index:10;line-height:1}
    #gachaQmark.appear{animation:gQappear .6s cubic-bezier(.34,1.56,.64,1) forwards}
    @keyframes gQappear{to{opacity:1;transform:scale(1)}}
    #gachaQmark.pulse{animation:gQpulse .4s ease-in-out 3}
    @keyframes gQpulse{0%{transform:scale(1);text-shadow:0 0 20px #2563EB,0 0 50px #2563EB}50%{transform:scale(1.15);text-shadow:0 0 40px #F6C744,0 0 80px #F6C744}100%{transform:scale(1);text-shadow:0 0 20px #2563EB,0 0 50px #2563EB}}
    #gachaQmark.explode{animation:gQexplode .3s ease-in forwards}
    @keyframes gQexplode{0%{opacity:1;transform:scale(1)}50%{opacity:1;transform:scale(1.4);filter:brightness(3)}100%{opacity:0;transform:scale(0)}}
    /* パーティクル */
    .g-particle{position:absolute;border-radius:50%;pointer-events:none;z-index:20}
    .g-particle.star-shape{clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);border-radius:0}
    /* カードラッパー */
    #gachaCardWrap{position:absolute;width:min(320px,68vw);height:min(460px,72vh);perspective:1000px;opacity:0;z-index:30}
    #gachaCardWrap.reveal{animation:gCardReveal .5s cubic-bezier(.34,1.56,.64,1) forwards}
    @keyframes gCardReveal{0%{opacity:0;transform:translateY(60px) scale(.7)}100%{opacity:1;transform:translateY(0) scale(1)}}
    #gachaCardInner{width:100%;height:100%;position:relative;transform-style:preserve-3d;animation:gCardFlip .7s ease-out forwards;animation-play-state:paused}
    #gachaCardInner.flip{animation-play-state:running}
    @keyframes gCardFlip{0%{transform:rotateY(180deg)}100%{transform:rotateY(0)}}
    .g-card-back{position:absolute;inset:0;backface-visibility:hidden;transform:rotateY(180deg);background:linear-gradient(135deg,#0d1a3a,#1a3a6e);border-radius:18px;border:3px solid #F6C744;display:flex;align-items:center;justify-content:center;font-size:80px;box-shadow:0 0 30px rgba(246,199,68,.4)}
    .g-card-front{position:absolute;inset:0;backface-visibility:hidden;border-radius:18px;overflow:hidden}
    /* ノート風カードデザイン */
    .g-card-outer{width:100%;height:100%;border-radius:18px;border:3px solid #F6C744;padding:8px 8px 8px 22px;position:relative;background:linear-gradient(180deg,#1a3a6e,#0f2456)}
    .g-card-outer.r{border-color:#60a5fa}
    .g-card-outer.sr{border-color:#a78bfa;background:linear-gradient(180deg,#2d1b69,#1a0f45)}
    .g-card-outer.ssr{border-color:#ffd700;background:linear-gradient(180deg,#5a2800,#2a1200);box-shadow:0 0 20px rgba(255,215,0,.4)}
    .g-ring{position:absolute;left:-4px;width:16px;height:16px;background:linear-gradient(135deg,#aaa,#eee,#aaa);border-radius:50%;border:2px solid #888}
    .g-card-paper{width:100%;height:100%;background:linear-gradient(180deg,#fdf8ee,#f5edda);border-radius:10px;position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center}
    .g-card-paper::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(180deg,transparent,transparent 22px,rgba(150,190,230,.4) 22px,rgba(150,190,230,.4) 23px);top:55px}
    .g-badge{position:absolute;top:-3px;left:50%;transform:translateX(-50%);background:linear-gradient(180deg,#1a3a8e,#0d2060);border:2px solid #F6C744;border-radius:0 0 14px 14px;padding:4px 14px 6px;font-size:clamp(14px,3.5vw,18px);font-weight:900;color:#F6C744;letter-spacing:2px;z-index:2}
    .g-badge.r{border-color:#60a5fa;color:#60a5fa;background:linear-gradient(180deg,#1a3060,#0d2050)}
    .g-badge.sr{border-color:#a78bfa;color:#a78bfa;background:linear-gradient(180deg,#2d1b69,#1a0f45)}
    .g-badge.ssr{border-color:#ffd700;color:#ffd700;background:linear-gradient(180deg,#5a2800,#2a1200);animation:gSsrPulse 1s ease-in-out infinite}
    @keyframes gSsrPulse{0%,100%{box-shadow:0 0 8px rgba(255,215,0,.5)}50%{box-shadow:0 0 20px rgba(255,215,0,.9)}}
    .g-char-area{width:100%;flex:1;display:flex;align-items:center;justify-content:center;padding:50px 10px 0;position:relative;z-index:1}
    .g-char-emoji{font-size:clamp(60px,14vw,90px);filter:drop-shadow(0 4px 8px rgba(0,0,0,.2))}
    .g-name-area{width:85%;margin:8px auto 10px;background:rgba(255,248,231,.95);border:2px solid #C8960C;border-radius:20px;padding:5px 10px;text-align:center;position:relative;z-index:1}
    .g-char-name{font-size:clamp(13px,3vw,17px);font-weight:bold;color:#1a2855}
    .g-char-new{font-size:9px;background:#ef4444;color:#fff;border-radius:4px;padding:1px 5px;font-weight:900;display:inline-block;margin-top:2px}
    /* レアリティバナー */
    #gachaRarityBanner{position:absolute;bottom:-60px;left:50%;transform:translateX(-50%);padding:8px 40px;font-size:15px;font-weight:bold;letter-spacing:4px;white-space:nowrap;opacity:0;transition:opacity .4s,bottom .4s;text-shadow:0 0 10px rgba(246,199,68,.8);z-index:31;color:white;background:linear-gradient(90deg,transparent,#1a3a6e,#F6C744,#1a3a6e,transparent)}
    #gachaRarityBanner.sr-banner{background:linear-gradient(90deg,transparent,#2d1b69,#a78bfa,#2d1b69,transparent);text-shadow:0 0 10px rgba(167,139,250,.8)}
    #gachaRarityBanner.ssr-banner{background:linear-gradient(90deg,transparent,#5a2800,#ffd700,#5a2800,transparent);text-shadow:0 0 10px rgba(255,215,0,.9)}
    #gachaRarityBanner.show{opacity:1;bottom:-50px}
    /* カウンター */
    #gachaCounter{position:absolute;top:20px;right:20px;color:rgba(255,255,255,.6);font-size:14px;font-weight:700;z-index:40}
    /* 次へ / 閉じる ボタン */
    #gachaNextBtn,#gachaCloseBtn{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);padding:14px 40px;border:none;border-radius:12px;font-size:clamp(15px,2vw,19px);font-weight:900;cursor:pointer;z-index:40;display:none;white-space:nowrap;font-family:inherit}
    #gachaNextBtn{background:rgba(37,99,235,.25);color:#F6C744;border:2px solid #F6C744;letter-spacing:.05em}
    #gachaNextBtn:hover{background:rgba(37,99,235,.45)}
    #gachaCloseBtn{background:linear-gradient(135deg,#2E6DE5,#1A449E);color:#fff;box-shadow:0 4px 20px rgba(46,109,229,.4)}
    #gachaNextBtn.show,#gachaCloseBtn.show{display:block}
    /* 報酬なし / クリア済み */
    #gachaNorewardPhase{display:none;flex-direction:column;align-items:center;gap:16px;text-align:center;padding:20px}
    #gachaNorewardPhase.show{display:flex}
    .g-noreward-title{font-size:22px;font-weight:900;color:#fff}
    .g-noreward-sub{font-size:14px;color:rgba(255,255,255,.55);max-width:280px;line-height:1.6}
    .g-noreward-close{padding:12px 36px;background:linear-gradient(135deg,#2E6DE5,#1A449E);border:none;border-radius:12px;color:#fff;font-size:15px;font-weight:900;cursor:pointer;font-family:inherit}
    /* ガチャボタン用（スコア画面） */
    @keyframes orbPulse{0%,100%{box-shadow:0 0 40px rgba(168,85,247,.8),0 0 80px rgba(168,85,247,.4)}50%{box-shadow:0 0 60px rgba(168,85,247,1),0 0 120px rgba(168,85,247,.6)}}

    /* スタート画面 */
    .start-screen{text-align:center;padding:12px 0}
    .start-chara{width:130px;margin:0 auto 16px;display:block;filter:drop-shadow(0 4px 16px rgba(30,50,110,.15));animation:floatChara 3s ease-in-out infinite}
    @keyframes floatChara{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
    /* ── 担任キャラDUO ── */
    .start-duo{display:flex;justify-content:center;align-items:flex-end;gap:12px;margin-bottom:4px}
    .start-duo__char{display:flex;flex-direction:column;align-items:center;gap:4px;position:relative}
    .start-duo__char img{width:90px;height:90px;object-fit:contain;filter:drop-shadow(0 4px 14px rgba(30,50,110,.18));animation:floatChara 3s ease-in-out infinite}
    .start-duo__char img.que{animation-delay:-.5s}
    .start-duo__char img.sensei{animation-delay:-1.5s;width:100px;height:100px}
    .start-bubble{background:#fff;border:2px solid var(--border);border-radius:14px 14px 14px 4px;
      padding:5px 10px;font-size:11px;font-weight:800;color:var(--text);white-space:normal;text-wrap:balance;
      box-shadow:0 2px 8px rgba(0,0,0,.08);position:relative;max-width:150px;line-height:1.4}
    .start-bubble.sensei-bubble{border-radius:14px 14px 4px 14px}
    .score-sensei{width:clamp(80px,18vw,110px);margin:0 auto 8px;display:block;filter:drop-shadow(0 4px 12px rgba(0,0,0,.1))}
    .score-sensei-bubble{display:inline-block;background:var(--card);border:1.5px solid var(--border);
      border-radius:14px;padding:8px 16px;font-size:13px;font-weight:700;color:var(--text);
      margin-bottom:12px;box-shadow:var(--shadow)}
    .start-screen h1{font-size:22px;font-weight:900;line-height:1.5;margin-bottom:6px;color:var(--text)}
    .start-screen .grade-tag{display:inline-block;background:var(--accent);color:#fff;font-size:11px;font-weight:900;letter-spacing:.08em;padding:4px 14px;border-radius:999px;margin-bottom:14px}
    .start-meta{font-size:13px;color:var(--muted);margin-bottom:24px;font-weight:600}
    .count-label{font-size:13px;font-weight:700;color:var(--muted);margin-bottom:12px;letter-spacing:.04em}
    .count-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:28px}
    .count-btn{background:var(--card);border:2px solid var(--border);color:var(--text);border-radius:14px;padding:14px 22px;font-size:15px;font-weight:900;cursor:pointer;transition:all .15s;min-width:90px;box-shadow:var(--shadow);font-family:'M PLUS Rounded 1c',sans-serif}
    .count-btn:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
    .count-btn.active{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 4px 0 color-mix(in srgb,var(--accent) 70%,#000)}
    .start-btn{width:100%;background:var(--accent);color:#fff;border:none;border-radius:14px;padding:16px;font-size:16px;font-weight:900;cursor:pointer;transition:all .15s;box-shadow:0 4px 0 color-mix(in srgb,var(--accent) 70%,#000);font-family:'M PLUS Rounded 1c',sans-serif}
    .start-btn:hover{opacity:.9;transform:translateY(-1px)}
    .start-btn:active{transform:translateY(2px);box-shadow:none}

    /* ===== スマホ専用（CSSの末尾に配置→基本CSSを正しく上書き）===== */
    @media(max-width:700px){
      /* containerを全幅に */
      .container{max-width:100%;width:100%;padding:10px 10px 8px}
      .page-header{margin-bottom:8px}
      .progress-wrap{margin-bottom:8px}

      /* ── question-cardをビューポート高さ基準で直接サイズ指定 ──
         flexチェーンに依存しないシンプルな方法。
         200px = header(50) + padding(10) + page-header(95) + progress(45) の概算 */
      .question-card{
        display:flex;
        flex-direction:column;
        height:calc(100vh - 200px);
        height:calc(100svh - 200px);
        padding:14px 12px 10px;
        margin-bottom:0;
        border-radius:16px;
        overflow-y:auto;
      }
      .q-number{flex-shrink:0;margin-bottom:8px}
      .q-text{flex-shrink:0;margin-bottom:10px}

      /* 選択肢が question-card の残り高さを埋める */
      .choices{
        flex:1;
        display:flex;
        flex-direction:column;
        gap:8px;
        min-height:0;
      }
      .choice-btn{
        flex:1;
        min-height:60px;
        padding:0 14px;
        display:flex;
        align-items:center;
      }
      .feedback{flex-shrink:0;margin-top:10px}
      .next-btn{flex-shrink:0;margin-top:10px;padding:14px}
    }

    /* ===== 2026-10 出題画面を1画面に収める／結果画面は絵を主役に(絵文字はやめる) ===== */
    body.mqp .container{padding-top:clamp(8px,1.6dvh,16px);padding-bottom:clamp(8px,1.6dvh,16px)}
    body.mqp.is-q .container{padding-bottom:84px}
    body.mqp .page-header{margin-bottom:clamp(6px,1.2dvh,12px);display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
    body.mqp .page-header .grade-tag{margin:0}
    body.mqp .page-header h1{font-size:clamp(13px,2dvh,16px)}
    body.mqp .progress-wrap{margin-bottom:clamp(4px,1dvh,8px)}
    body.mqp .progress-label{margin-bottom:4px}
    body.mqp .snd-btn{background:none;border:0;border-bottom:1px solid transparent;font:inherit;font-size:12px;font-weight:700;color:var(--muted);cursor:pointer;padding:0 0 0 8px}
    body.mqp .question-card{padding:clamp(10px,1.8dvh,18px) clamp(14px,2.4vw,22px);margin-bottom:0}
    body.mqp .q-number{display:none}
    body.mqp.is-q .page-header{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
    body.mqp.is-q .site-header{height:44px}
    body.mqp.is-q .site-logo{width:88px;height:30px}
    body.mqp .q-text{font-size:clamp(16px,3dvh,23px);line-height:1.45;margin-bottom:clamp(8px,1.5dvh,14px)}
    body.mqp .q-sub{margin:-8px 0 clamp(8px,1.4dvh,12px)}
    body.mqp .choices{gap:clamp(6px,1.1dvh,10px)}
    body.mqp .choice-btn{padding:clamp(7px,1.6dvh,13px) 12px;font-size:clamp(14px,2.3dvh,18px);line-height:1.4;min-height:0;gap:10px}
    body.mqp .choice-label{width:clamp(24px,3.8dvh,32px);height:clamp(24px,3.8dvh,32px);min-width:clamp(24px,3.8dvh,32px);font-size:clamp(12px,1.9dvh,15px)}
    body.mqp .feedback{margin-top:clamp(8px,1.4dvh,12px);padding:clamp(8px,1.4dvh,12px) 14px}
    body.mqp .feedback-label{font-size:clamp(14px,2.4dvh,17px)}
    body.mqp .feedback-label:empty{display:none}
    body.mqp .more>summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;margin-top:6px;padding:6px 0;border-top:1px solid #cfd4dc;font-size:.9em;font-weight:800;color:var(--muted)}
    body.mqp .more>summary::-webkit-details-marker{display:none}
    body.mqp .more>summary::after{content:"＋"}
    body.mqp .more[open]>summary::after{content:"－"}
    body.mqp .feedback-text{font-size:clamp(13px,2.1dvh,15px);line-height:1.6}
    /* 「次の問題へ」は、解説の長さに関わらず常に画面の一番下 */
    .stick{display:none;position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--bg);border-top:1px solid #171a22;padding:8px 0 calc(8px + env(safe-area-inset-bottom,0px))}
    .stick.show{display:block}
    .stick__in{width:min(900px,95vw);margin:0 auto;padding:0 clamp(12px,3.5vw,24px);display:flex;align-items:center;justify-content:space-between;gap:12px}
    .verdict{font-size:20px;font-weight:800;line-height:1;white-space:nowrap}
    .verdict.ok{color:var(--green)}
    .verdict.ng{color:var(--red)}
    body.mqp .stick .next-btn{display:block;flex:1;max-width:260px;margin:0 0 0 auto;padding:12px;font-size:16px}
    @media(max-width:700px){
      body.mqp .question-card{display:block;height:auto;overflow:visible;padding:clamp(10px,2dvh,16px) 12px}
      body.mqp .choices{flex:none}
      body.mqp .choice-btn{flex:none;min-height:0;padding:clamp(7px,1.6dvh,13px) 12px}
    }
    /* 結果画面(小学生〜大人向け)：絵を主役に・点数は1行・ボタンは2つだけ・振り返りは折りたたみ */
    body.mqp .score-screen--ot .score-card{padding:0;border:0;background:transparent;margin-bottom:12px;text-align:center}
    body.mqp .score-screen--ot .otsukare{margin:0}
    body.mqp .score-screen--ot .ot-stage{width:min(100%,calc(44dvh*4/3))}
    body.mqp .score-screen--ot .score-line{display:flex;align-items:baseline;justify-content:center;gap:8px;margin-top:clamp(8px,1.6dvh,14px)}
    body.mqp .score-screen--ot .score-num{font-size:clamp(34px,6dvh,52px);margin:0}
    body.mqp .score-screen--ot .score-denom{font-size:clamp(15px,2.6dvh,20px);margin:0}
    body.mqp .score-screen--ot .score-bar-wrap{margin:clamp(6px,1.2dvh,10px) auto;max-width:420px}
    body.mqp .score-screen--ot .score-bar-bg{height:6px}
    body.mqp .score-screen--ot .score-msg{font-size:clamp(14px,2.4dvh,18px);line-height:1.5}
    body.mqp .score-screen--ot .score-actions{display:flex;flex-direction:column;gap:8px;margin:clamp(10px,1.8dvh,16px) auto 0;max-width:420px}
    body.mqp .score-screen--ot .retry-btn{display:block;width:100%;margin:0;padding:clamp(12px,2dvh,16px);font-size:clamp(15px,2.4dvh,18px)}
    body.mqp .score-screen:not(.score-screen--ot) .gacha-btn{display:block;width:100%;margin-bottom:10px;padding:14px;background:#fff;border:1.5px solid #8a6d1d;color:#6b5314;font-size:16px;font-weight:800;font-family:inherit;cursor:pointer;border-radius:0}
    body.mqp .score-screen--ot .gacha-btn{display:block;width:100%;padding:clamp(11px,1.9dvh,15px);background:#fff;border:1.5px solid #8a6d1d;color:#6b5314;font-size:clamp(14px,2.3dvh,17px);font-weight:800;font-family:inherit;cursor:pointer;border-radius:0}
    @media(min-width:900px){
      body.mqp .score-screen--ot .score-card{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);column-gap:32px;align-items:center;text-align:center}
      body.mqp .score-screen--ot #scoreOt{grid-column:1;grid-row:1 / span 4}
      body.mqp .score-screen--ot .score-line,body.mqp .score-screen--ot .score-bar-wrap,body.mqp .score-screen--ot .score-msg,body.mqp .score-screen--ot .score-actions{grid-column:2;width:100%}
      body.mqp .score-screen--ot .ot-stage{width:100%}
    }
    body.mqp .review-list{margin-top:clamp(8px,1.6dvh,14px);text-align:left}
    body.mqp .review>summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-top:1px solid #171a22;font-size:14px;font-weight:800;color:var(--text)}
    body.mqp .review>summary::-webkit-details-marker{display:none}
    body.mqp .review>summary::after{content:"＋";font-size:16px;color:var(--muted)}
    body.mqp .review[open]>summary::after{content:"－"}
    body.mqp .review-icon{font-size:15px;font-weight:900;color:var(--red);width:18px;text-align:center}

/* 単元ページの本文(JSなしでも読める説明と問題文)。生成: 問題作成/05_共通基盤/ツール/単元ページを作る.py */
.unit-info{background:#f4f7fb;border-top:1px solid #dde4f0;padding:28px 20px 32px;margin-top:40px}
.unit-info__in{max-width:560px;margin:0 auto;font-family:'M PLUS Rounded 1c',sans-serif;color:#4a5568}
.unit-info h2{font-size:15px;font-weight:800;color:#1a2a4a;margin-bottom:10px}
.unit-info h3{font-size:13px;font-weight:800;color:#1a2a4a;margin:16px 0 6px}
.unit-info p{font-size:13px;line-height:1.85;margin-bottom:10px}
.unit-info__q{margin:0 0 12px 1.4em;padding:0;font-size:13px;line-height:1.85}
.unit-info__q li{margin-bottom:4px}
.unit-info__tags{font-size:11px}
.unit-info__back a{font-size:12px;font-weight:700;color:#2E6DE5;text-decoration:none}

/* スマホ幅で横に21pxはみ出す件(10/16)。原因は .start-bubble(白いふきだし)の文が nowrap で枠の外へ出て、画面の右の外に延びていたこと。ふきだしを折り返して枠に収め(上の .start-bubble)、body の overflow-x:hidden は念のための保険(headerのstickyは効いたまま) */
body{overflow-x:hidden}