/* ===============================================
 * パパしゅく2 — main.css
 * Generated by CSS Separation Project Phase 1 (PR-C)
 * Source: index.html Block 1 / Block 2 / Block 3
 * =============================================== */

/* ── Block 1 / Section A: pre-@media print (index.html:26-737) ── */

  .bg-shapes { position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:hidden; }
  .shape { position:absolute;border-radius:50%;opacity:.10;animation:float 7s ease-in-out infinite; }
  .shape:nth-child(1){width:220px;height:220px;background:var(--pink);top:-60px;left:-60px;animation-delay:0s}
  .shape:nth-child(2){width:160px;height:160px;background:var(--yellow);top:15%;right:-40px;animation-delay:1.2s}
  .shape:nth-child(3){width:110px;height:110px;background:var(--green);bottom:8%;left:4%;animation-delay:2.5s}
  .shape:nth-child(4){width:130px;height:130px;background:var(--blue);bottom:15%;right:8%;animation-delay:3.5s}
  .shape:nth-child(5){width:90px;height:90px;background:var(--purple);top:55%;left:48%;animation-delay:1.8s}
  @keyframes float { 0%,100%{transform:translateY(0) rotate(0deg)} 50%{transform:translateY(-22px) rotate(12deg)} }

  /* HEADER */
  header { position:relative;z-index:200;background:linear-gradient(135deg,#FF6B9D,#C77DFF);padding:16px 28px;display:flex;align-items:center;gap:14px;box-shadow:0 4px 22px rgba(199,125,255,.4);flex-wrap:nowrap; }
  .logo-emoji { font-size:2.4rem;animation:bounce 1.8s ease-in-out infinite;display:inline-block; }
  @keyframes bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }
  .header-text { flex:none; }
  .lang-ja .header-text h1 { font-family:'Kaisei Decol',serif; }
  .lang-en .header-text h1 { font-family:'Fredoka One',cursive; }
  .header-text h1 { color:white;font-size:1.9rem;text-shadow:3px 3px 0 rgba(0,0,0,.13);letter-spacing:.5px; }
  @media (max-width: 600px) {
    header { padding:10px 12px; gap:8px; }
    .logo-emoji { font-size:1.6rem; }
    .header-text h1 { font-size:clamp(1rem, 4vw, 1.4rem); letter-spacing:0; white-space:nowrap; }
    .header-text p { display:none; }
    .lang-btn { font-size:.72rem; padding:4px 10px; white-space:nowrap; }
    .info-btn { font-size:1rem; padding:4px 6px; }
    .header-actions { gap:4px; flex-shrink:0; }
  }
  @media (max-width: 480px) {
    /* JP/EN短縮 */
    #btn-ja { font-size:0; padding:5px 10px; }
    #btn-ja::after { content:'JP'; font-size:.78rem; }
    #btn-en { font-size:0; padding:5px 10px; }
    #btn-en::after { content:'EN'; font-size:.78rem; }
    /* ── クイズ画面のコンパクト化 ── */
    .quiz-page { padding:10px 12px; }
    .quiz-header { margin-bottom:10px; }
    .stars { font-size:1rem; margin-bottom:8px; gap:2px; }
    .question-card { padding:20px 16px; border-radius:18px; margin-bottom:12px; }
    .question-text { font-size:2.2rem; margin-bottom:4px; }
    .question-text.word-q { font-size:1.05rem; }
    .question-text.area-q { font-size:1.3rem; }
    .answer-input { width:130px; height:54px; font-size:1.8rem; }
    .numpad { gap:7px; max-width:220px; margin-top:10px; }
    .num-btn { height:44px; font-size:1.1rem; border-radius:12px; }
    .submit-btn { padding:12px 24px; font-size:.95rem; }
    .inline-submit-btn { padding:12px 28px; font-size:.95rem; }
    .feedback { font-size:1rem; }
  }
  .header-text p { color:rgba(255,255,255,.88);font-size:.85rem;margin-top:1px; }
  .header-actions { display:flex;align-items:center;gap:8px; }
  .lang-switcher { display:flex;gap:6px;align-items:center; }
  .lang-btn { background:rgba(255,255,255,.18);border:2px solid rgba(255,255,255,.35);color:white;font-weight:900;font-size:.82rem;padding:6px 14px;border-radius:50px;cursor:pointer;transition:all .2s;letter-spacing:.5px;font-family:inherit;white-space:nowrap; }
  .lang-btn:hover { background:rgba(255,255,255,.32); }
  .lang-btn.active { background:white;color:var(--purple);border-color:white; }
  .lang-switcher .lang-btn { font-size:.72rem;padding:4px 10px;opacity:.85; }
  .lang-switcher .lang-btn.active { opacity:1; }
  .info-btn { background:rgba(255,255,255,.18);border:2px solid rgba(255,255,255,.35);color:white;font-size:1rem;width:36px;height:36px;border-radius:50%;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center; }
  .info-btn:hover { background:rgba(255,255,255,.35);transform:scale(1.1); }
  .about-header-btn { width:auto!important;padding:6px 14px!important;border-radius:50px!important;gap:6px;font-size:.82rem!important;font-weight:900;letter-spacing:.3px; }
  .about-header-label { font-size:.82rem; }
  @media(max-width:480px){ .about-header-label { display:none; } }

  /* BREADCRUMB */
  .breadcrumb { position:relative;z-index:5;display:flex;align-items:center;gap:8px;padding:11px 24px;background:rgba(255,255,255,.75);font-size:.82rem;color:#999;border-bottom:1px solid #eee;flex-wrap:wrap; }
  .breadcrumb span { cursor:pointer;transition:color .2s; }
  .breadcrumb span:hover { color:var(--pink); }
  .breadcrumb .sep { color:#ccc; }
  .breadcrumb .current { color:var(--dark);font-weight:800;cursor:default; }

  .page { display:none;position:relative;z-index:5; }
  .page.active { display:block; }

  .lang-ja .section-title { font-family:'Kaisei Decol',serif; }
  .lang-en .section-title { font-family:'Fredoka One',cursive; }
  .section-title { font-size:2rem;color:var(--dark);margin-bottom:8px;letter-spacing:.5px; }
  .section-sub { color:#aaa;margin-bottom:36px;font-size:1rem; }

  /* GRADE PAGE */
  .grade-page { padding:40px 24px;max-width:980px;margin:0 auto;text-align:center; }
  .grade-intro { max-width:640px;margin:0 auto 40px; }
  /* ── About / Story section ── */
  .about-toggle-btn { display:inline-flex;align-items:center;gap:10px;padding:10px 24px;border-radius:50px;border:2px solid #c8d8f0;background:white;font-family:inherit;font-size:.85rem;font-weight:700;color:#666;cursor:pointer;transition:all .25s;box-shadow:0 2px 10px rgba(0,0,0,.06); }
  .about-toggle-btn:hover { background:#f0f6ff;border-color:var(--blue);color:var(--blue); }
  .about-toggle-btn .toggle-arrow { display:inline-block;transition:transform .3s;font-size:.75rem; }
  .about-toggle-btn.open .toggle-arrow { transform:rotate(180deg); }
  .about-story { overflow:hidden;max-height:0;transition:max-height .55s cubic-bezier(.4,0,.2,1),opacity .4s;opacity:0;pointer-events:none;text-align:left; }
  .about-story.open { max-height:2000px;opacity:1;pointer-events:auto; }
  .story-card { background:white;border-radius:24px;padding:30px 36px;margin-top:18px;box-shadow:0 5px 28px rgba(0,0,0,.07);border:1px solid #f0f0f0; }
  .story-card h3 { font-size:1rem;font-weight:900;color:var(--blue);margin:0 0 16px;display:flex;align-items:center;gap:8px; }
  .story-card p { font-size:.88rem;line-height:2.0;color:#555;margin:0 0 12px; }
  .story-card p:last-child { margin-bottom:0; }
  .story-divider { border:none;border-top:1px dashed #e8e8e8;margin:22px 0; }
  .story-free { display:inline-block;margin-top:14px;padding:8px 22px;border-radius:50px;background:linear-gradient(135deg,var(--pink),var(--purple));color:white;font-weight:900;font-size:.85rem; }
  .japan-badge { display:inline-flex;align-items:center;gap:8px;background:white;border:2px solid #eee;padding:8px 18px;border-radius:50px;font-size:.82rem;color:#888;font-weight:800;margin-bottom:14px; }
  .lang-hero { display:flex;gap:16px;justify-content:center;margin-bottom:36px;flex-wrap:wrap; }
  .lang-hero-btn { display:flex;align-items:center;gap:12px;padding:18px 36px;border-radius:24px;cursor:pointer;border:3px solid transparent;background:white;box-shadow:0 5px 20px rgba(0,0,0,.09);transition:all .3s cubic-bezier(.34,1.56,.64,1);font-family:inherit; }
  .lang-hero-btn:hover { transform:translateY(-6px) scale(1.04);box-shadow:0 14px 36px rgba(0,0,0,.15); }
  .lang-hero-btn.ja-hero { border-color:var(--pink); }
  .lang-hero-btn.ja-hero:hover { background:#FFF0F6; }
  .lang-hero-btn.en-hero { border-color:var(--blue); }
  .lang-hero-btn.en-hero:hover { background:#F0F6FF; }
  .lang-hero-btn.active-lang { box-shadow:0 6px 24px rgba(0,0,0,.18); }
  .lang-hero-btn.ja-hero.active-lang { background:linear-gradient(135deg,#FF6B9D,#C77DFF);border-color:transparent; }
  .lang-hero-btn.en-hero.active-lang { background:linear-gradient(135deg,#4D96FF,#6BCB77);border-color:transparent; }
  .lang-hero-btn .flag { font-size:2rem; }
  .lang-hero-btn .lang-info { text-align:left; }
  .lang-hero-btn .lang-name { font-size:1.3rem;font-weight:900;color:var(--dark);display:block; }
  .lang-hero-btn.active-lang .lang-name { color:white; }
  .lang-hero-btn .lang-sub { font-size:.78rem;color:#aaa;margin-top:2px;display:block; }
  .lang-hero-btn.active-lang .lang-sub { color:rgba(255,255,255,.8); }
  .lang-hero-btn .check { font-size:1.4rem;margin-left:8px;opacity:0; }
  .lang-hero-btn.active-lang .check { opacity:1; }
  .grade-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px; }
  .grade-card { border-radius:28px;padding:32px 20px;cursor:pointer;transition:all .35s cubic-bezier(.34,1.56,.64,1);box-shadow:0 6px 24px rgba(0,0,0,.10);color:white;position:relative;overflow:hidden;text-align:center; }
  @media (max-width:480px) {
    .grade-card { padding:14px 8px;border-radius:18px; }
    .grade-card .grade-num { font-size:2.6rem; }
    .grade-card .grade-label { font-size:.88rem;margin-bottom:4px; }
    .grade-card .age-tag { font-size:.68rem;padding:2px 9px; }
    .grade-card p { font-size:.76rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
    .grade-grid { gap:10px; }
    .grade-page { padding:20px 8px; }
    .grade-intro { margin-bottom:20px; }
  }
  .grade-card::after { content:'';position:absolute;bottom:-20px;right:-20px;width:100px;height:100px;border-radius:50%;background:rgba(255,255,255,.12); }
  .grade-card:hover { transform:translateY(-10px) scale(1.04);box-shadow:0 18px 45px rgba(0,0,0,.18); }
  .grade-card.g1{background:linear-gradient(135deg,#FF6B9D,#ff4d8d)}
  .grade-card.g2{background:linear-gradient(135deg,#FF9A3C,#ff8000)}
  .grade-card.g3{background:linear-gradient(135deg,#FFD93D,#ffc107);color:#5a4000}
  .grade-card.g4{background:linear-gradient(135deg,#6BCB77,#43b852)}
  .grade-card.g5{background:linear-gradient(135deg,#4D96FF,#1a75ff)}
  .grade-card.g6{background:linear-gradient(135deg,#C77DFF,#a64dff)}
  .lang-ja .grade-card .grade-num { font-family:'Kaisei Decol',serif; }
  .lang-en .grade-card .grade-num { font-family:'Fredoka One',cursive; }
  .grade-card .grade-num { font-size:3.8rem;line-height:1;margin-bottom:2px;text-shadow:2px 3px 0 rgba(0,0,0,.13); }
  .grade-card .grade-label { font-size:1rem;font-weight:900;opacity:.9;margin-bottom:8px;letter-spacing:.5px; }
  .grade-card .age-tag { display:inline-block;background:rgba(255,255,255,.25);padding:3px 11px;border-radius:20px;font-size:.72rem;font-weight:800;margin-bottom:8px; }
  .grade-card p { font-size:.78rem;opacity:.82;line-height:1.6; }

  /* TOPIC PAGE */
  .topic-page { padding:36px 24px;max-width:960px;margin:0 auto;text-align:center; }
  .topic-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px; }
  .topic-card { background:white;border-radius:20px;padding:22px 16px;cursor:pointer;transition:all .3s cubic-bezier(.34,1.56,.64,1);box-shadow:0 4px 14px rgba(0,0,0,.07);border-left:6px solid #eee;text-align:left; }
  .topic-card:hover { transform:translateY(-5px) scale(1.03);box-shadow:0 12px 30px rgba(0,0,0,.12); }
  .topic-card .t-icon { font-size:2rem;margin-bottom:8px;display:block; }
  .topic-card h3 { color:var(--dark);font-size:1rem;font-weight:900;margin-bottom:4px; }
  .topic-card p { color:#aaa;font-size:.76rem;line-height:1.5; }
  .topic-card.locked { opacity:.4;cursor:not-allowed; }
  /* ── 履歴引き継ぎパネル (history-transfer) ─────────────── */
  /* ── 学習履歴パネル (history-panel) ───────────────────── */
  .history-panel { margin-bottom:28px; }
  .history-blocks { display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; margin-bottom:4px; }
  @media(max-width:600px){ .history-blocks { grid-template-columns:1fr; } }
  .hb { background:white; border-radius:18px; padding:14px 16px; text-align:left;
        box-shadow:0 3px 12px rgba(0,0,0,.07); position:relative; overflow:hidden; }
  .hb::before { content:''; position:absolute; top:0; left:0; right:0; height:5px; border-radius:18px 18px 0 0; }
  .hb-recent::before  { background:linear-gradient(90deg,#FF6B9D,#FFB3D0); }
  .hb-next::before    { background:linear-gradient(90deg,#43c6ac,#4facfe); }
  .hb-review::before  { background:linear-gradient(90deg,#FFD93D,#FF9A3C); }
  .hb-title { font-size:.72rem; font-weight:900; color:#999; text-transform:uppercase;
              letter-spacing:.5px; margin-bottom:8px; margin-top:2px; }
  .hb-card { background:#fafafa; border-radius:12px; padding:10px 12px; margin-bottom:6px;
             cursor:pointer; transition:all .2s; border:1px solid #f0f0f0; }
  .hb-card:last-child { margin-bottom:0; }
  .hb-card:hover { background:#f0f0f0; transform:translateX(2px); }
  .hb-unit-name { font-size:.88rem; font-weight:900; color:#333; margin-bottom:3px;
                  line-height:1.3; }
  .hb-meta { font-size:.72rem; color:#aaa; }
  .hb-pct-high  { color:#16a34a; font-weight:700; }
  .hb-pct-mid   { color:#d97706; font-weight:700; }
  .hb-pct-low   { color:#ef4444; font-weight:700; }
  .hb-sub { font-size:.72rem; color:#888; margin-top:2px; font-style:italic; }
  .hb-empty { font-size:.82rem; color:#ccc; text-align:center; padding:10px 0; }
  .hb-first { font-size:.78rem; color:#64748b; }
  /* ── さいきんやった単元：縦スクロールスタイル ───────────── */
  .hb-recent-scroll { max-height:calc(3 * 62px + 2 * 6px); overflow-y:auto;
    scrollbar-width:thin; scrollbar-color:#ffd6ea transparent; }
  .hb-recent-scroll::-webkit-scrollbar { width:4px; }
  .hb-recent-scroll::-webkit-scrollbar-track { background:transparent; }
  .hb-recent-scroll::-webkit-scrollbar-thumb { background:#ffd6ea; border-radius:4px; }
  .hb-scroll-hint { font-size:.68rem; color:#FFB3D0; text-align:center;
    margin-top:3px; letter-spacing:.3px; }
  /* ── さいきんやった単元：実績スタイル ─────────────────── */
  .hb-recent { background:linear-gradient(160deg,#fff5f8 0%,#fff 70%); border:1px solid #fde0ec; }
  .hb-recent .hb-title { color:#c06080; }
  .hb-recent .hb-card { background:linear-gradient(135deg,#fff8fb 0%,#fff0f7 100%); border:1px solid #ffd6ea; }
  .hb-recent .hb-card:hover { background:linear-gradient(135deg,#ffe8f2 0%,#ffd5e8 100%); }
  .hb-recent .hb-unit-name { color:#b03060; }
  .hb-recent .hb-pct-high { background:#e8fff0; padding:1px 7px; border-radius:20px; }
  .hb-recent .hb-pct-mid  { background:#fff8e0; padding:1px 7px; border-radius:20px; }
  .hb-recent .hb-pct-low  { background:#fff0f0; padding:1px 7px; border-radius:20px; }
  /* ── end history-panel ──────────────────────────────────── */
  .tc-g1 .topic-card.unlocked{border-left-color:var(--g1);background:linear-gradient(135deg,#fff8fb 0%,#fff0f5 100%);}
  .tc-g2 .topic-card.unlocked{border-left-color:var(--g2);background:linear-gradient(135deg,#fff9f3 0%,#fff3e8 100%);}
  .tc-g3 .topic-card.unlocked{border-left-color:var(--g3);background:linear-gradient(135deg,#fffef0 0%,#fffbe0 100%);}
  .tc-g4 .topic-card.unlocked{border-left-color:var(--g4);background:linear-gradient(135deg,#f3fdf4 0%,#e8f9ea 100%);}
  .tc-g5 .topic-card.unlocked{border-left-color:var(--g5);background:linear-gradient(135deg,#f0f7ff 0%,#e4efff 100%);}
  .tc-g6 .topic-card.unlocked{border-left-color:var(--g6);background:linear-gradient(135deg,#fdf5ff 0%,#f6e8ff 100%);}
  .tc-g1 .topic-card.unlocked:hover{background:linear-gradient(135deg,#ffe8f2 0%,#ffd5e8 100%);}
  .tc-g2 .topic-card.unlocked:hover{background:linear-gradient(135deg,#ffeedd 0%,#ffe0c4 100%);}
  .tc-g3 .topic-card.unlocked:hover{background:linear-gradient(135deg,#fff8cc 0%,#fff0a0 100%);}
  .tc-g4 .topic-card.unlocked:hover{background:linear-gradient(135deg,#d8f5dc 0%,#c0edc6 100%);}
  .tc-g5 .topic-card.unlocked:hover{background:linear-gradient(135deg,#d8eaff 0%,#c0d8ff 100%);}
  .tc-g6 .topic-card.unlocked:hover{background:linear-gradient(135deg,#f0d8ff 0%,#e4c0ff 100%);}
  .coming-soon { background:#eee;color:#bbb;font-size:.7rem;padding:3px 10px;border-radius:20px;display:inline-block;margin-top:8px;font-weight:800; }

  /* BACK BTN */
  .back-btn { display:inline-flex;align-items:center;gap:7px;background:white;border:2px solid #e0e0e0;padding:9px 20px;border-radius:50px;cursor:pointer;font-family:inherit;font-size:.9rem;color:var(--dark);transition:all .2s;margin-bottom:28px;font-weight:800; }
  .back-btn:hover { border-color:var(--pink);color:var(--pink);transform:translateX(-3px); }

  /* QUIZ */
  .quiz-page { padding:28px 20px;max-width:640px;margin:0 auto;text-align:center; }
  .quiz-header { display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;gap:12px; }
  .progress-bar-wrap { flex:1;height:14px;background:#eee;border-radius:20px;overflow:hidden; }
  .progress-bar-fill { height:100%;background:linear-gradient(90deg,var(--green),var(--blue));border-radius:20px;transition:width .5s ease; }
  .q-count { font-weight:900;color:var(--dark);font-size:.9rem;white-space:nowrap; }
  .question-card { background:white;border-radius:28px;padding:40px 30px;box-shadow:0 10px 38px rgba(0,0,0,.10);margin-bottom:22px;position:relative;overflow:hidden; }
  .question-card::before { content:'';position:absolute;top:0;left:0;right:0;height:7px;background:linear-gradient(90deg,var(--yellow),var(--orange),var(--pink)); }
  .lang-ja .question-text { font-family:'Kaisei Decol',serif; }
  .lang-en .question-text { font-family:'Fredoka One',cursive; }
  .question-text { font-size:3rem;color:var(--dark);line-height:1.2;margin-bottom:8px;letter-spacing:1px; }
  .question-text.area-q { font-size:1.6rem;line-height:1.5; }
  .question-text.word-q { font-size:1.25rem;line-height:1.8;text-align:left;padding:4px 8px; }
  .tts-wrap { position:relative; }
  .tts-btn { background:linear-gradient(135deg,#4facfe,#00f2fe);color:white;border:none;border-radius:50%;width:32px;height:32px;font-size:1rem;cursor:pointer;box-shadow:0 2px 8px rgba(79,172,254,.4);transition:all .2s;display:inline-flex;align-items:center;justify-content:center; }
  .tts-btn:hover { transform:scale(1.12); }
  .tts-btn.speaking { background:linear-gradient(135deg,#f7971e,#ffd200); }
  .question-text.word-q.tts-active { padding-right:44px; }
  /* ── ヒント機能（Phase 1プロトタイプ・count_difference_1） ── */
  .hint-btn-row { text-align:right;margin-bottom:6px; }
  .hint-btn { padding:6px 12px;border-radius:16px;border:none;background:linear-gradient(135deg,#FFE070,#FFD93D);color:#7A5F00;font-size:12px;font-weight:500;cursor:pointer;transition:transform .15s;display:inline-flex;align-items:center;gap:4px; }
  .hint-btn:hover { transform:translateY(-1px); }
  .hint-btn.active { background:linear-gradient(135deg,#FFD93D,#F5C518); }
  .hint-box { background:#FFF4C7;border-left:3px solid #FFD93D;border-radius:4px;padding:10px 12px;margin:8px 0;font-size:.95em;line-height:1.5; }
  .hint-box-title { font-weight:500;color:#7A5F00;margin-bottom:4px; }
  .hint-box-body { color:#6B4F00; }
  /* ── ヒント機能 v2.0（段階順次解放型・仕様書 §3 準拠）── */
  #hint-area { background:#FFF4C7;border-left:4px solid #FFD93D;border-radius:8px;padding:14px 16px;margin:12px 0;font-size:.95em;line-height:1.5;animation:hintAreaSlideDown .25s ease; }
  #hint-area .hint-area-title { font-weight:700;color:#7A5F00;margin-bottom:10px;font-size:14.5px; }
  .kp-card { background:rgba(255,255,255,.7);border-radius:8px;padding:12px 14px;margin-bottom:8px;animation:kpAppear .35s ease; }
  .kp-head { display:flex;align-items:center;gap:6px;margin-bottom:6px; }
  .kp-icon { font-size:18px;line-height:1; }
  .kp-title { font-size:14.5px;font-weight:700;color:#5a4500; }
  .kp-body { font-size:13.5px;line-height:1.7;color:#6B4F00;padding-left:28px; }
  .ex-card { background:rgba(255,255,255,.7);border-radius:8px;padding:12px 14px;margin-bottom:8px;animation:kpAppear .35s ease; }
  .ex-head { display:flex;align-items:center;gap:6px;margin-bottom:8px; }
  .ex-icon { font-size:18px;line-height:1; }
  .ex-title { font-size:14.5px;font-weight:700;color:#5a4500; }
  .ex-section-label { font-size:12.5px;font-weight:700;color:#7A5F00;margin:8px 0 4px 28px; }
  .ex-prob { background:rgba(255,236,160,.5);border-radius:6px;padding:8px 12px;margin:0 0 8px 28px;font-size:13.5px;line-height:1.6;color:#5a4500; }
  .ex-calc { list-style:none;padding:0;margin:0 0 0 28px; }
  .ex-calc li { font-size:13.5px;line-height:1.7;color:#6B4F00;padding-left:18px;position:relative; }
  .ex-calc li::before { content:'→';position:absolute;left:0;color:#B88A00;font-weight:700; }
  .next-hint-btn { display:inline-block;padding:8px 20px;border:none;border-radius:16px;background:linear-gradient(135deg,#FFE070,#FFD93D);color:#7A5F00;font-size:13.5px;font-weight:700;cursor:pointer;transition:transform .15s,box-shadow .15s;margin:4px 0 0; }
  .next-hint-btn:hover { transform:translateY(-1px);box-shadow:0 2px 6px rgba(0,0,0,.1); }
  .next-hint-btn:active { background:linear-gradient(135deg,#FFD93D,#F5C518); }
  .next-hint-btn-wrap { text-align:center;margin-top:4px; }
  @keyframes hintAreaSlideDown { from { opacity:0;transform:translateY(-4px); } to { opacity:1;transform:translateY(0); } }
  @keyframes kpAppear { from { opacity:0;transform:translateY(-6px);max-height:0; } to { opacity:1;transform:translateY(0);max-height:400px; } }
  .area-label { display:inline-block;margin-top:6px;background:linear-gradient(135deg,var(--green),var(--blue));color:white;font-size:.88rem;font-weight:900;padding:5px 16px;border-radius:20px;letter-spacing:.5px; }
  .question-hint { color:#888;font-size:.88rem;margin-top:8px;font-weight:700; }
  .answer-area { display:flex;align-items:center;justify-content:center;gap:14px;margin-top:26px; }
  .answer-input { width:160px;height:68px;font-size:2.2rem;font-weight:700;text-align:center;color:var(--dark);border:4px solid #ddd;border-radius:18px;outline:none;transition:border-color .3s;background:var(--bg);cursor:default;letter-spacing:1px; }
  .answer-input::placeholder { color: transparent; }
  .lang-ja .answer-input { font-family:'Kaisei Decol',serif; }
  .lang-en .answer-input { font-family:'Fredoka One',cursive; }
  .answer-input.correct { border-color:var(--green);background:#F0FFF3; }
  .answer-input.wrong { border-color:var(--pink);background:#FFF0F5;animation:shake .4s; }
  @keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-9px)} 75%{transform:translateX(9px)} }

  /* COMPARE QUIZ */
  .compare-area { display:flex;align-items:center;justify-content:center;gap:20px;margin:24px 0 10px;flex-wrap:wrap; }
  .compare-num { background:var(--bg);border:3px solid #e0e0e0;border-radius:22px;padding:18px 32px;font-size:3rem;font-weight:900;color:var(--dark);cursor:pointer;transition:all .25s cubic-bezier(.34,1.56,.64,1);min-width:120px;text-align:center;font-family:'Fredoka One',cursive; }
  .compare-num:hover { transform:scale(1.08);border-color:var(--blue);background:#EEF5FF; }
  .compare-num.selected-correct { border-color:var(--green);background:#F0FFF3;transform:scale(1.1); }
  .compare-num.selected-wrong { border-color:var(--pink);background:#FFF0F5;animation:shake .4s; }
  .compare-num.revealed-correct { border-color:var(--green);background:#F0FFF3; }
  .compare-vs { font-size:1.4rem;font-weight:900;color:#ddd; }
  .compare-hint { color:#bbb;font-size:.88rem;margin-top:6px; }

  .submit-btn { background:linear-gradient(135deg,var(--blue),var(--purple));color:white;border:none;padding:16px 32px;border-radius:50px;font-family:inherit;font-size:1.1rem;font-weight:900;cursor:pointer;transition:all .3s cubic-bezier(.34,1.56,.64,1),background-color 500ms ease;box-shadow:0 6px 20px rgba(77,150,255,.4);letter-spacing:.5px; }
  .submit-btn:hover { transform:scale(1.07); }
  .submit-btn:disabled { opacity:.5;cursor:not-allowed;transform:none; }
  .inline-submit-btn { background:linear-gradient(135deg,var(--blue),var(--purple));color:white;border:none;padding:14px 36px;border-radius:50px;font-family:inherit;font-size:1.05rem;font-weight:900;cursor:pointer;transition:all .3s cubic-bezier(.34,1.56,.64,1);box-shadow:0 6px 20px rgba(77,150,255,.35);letter-spacing:.5px; }
  .inline-submit-btn:hover { transform:scale(1.07); }
  /* F1: 「つぎへ →」「けっかを みる →」状態のボタン色（緑） */
  .submit-btn.btn-next,.inline-submit-btn.btn-next { background:#1D9E75; }
  .tf-btn-zone { display:flex;gap:24px;justify-content:center;margin-top:24px; }
  .tf-btn { width:110px;height:110px;border-radius:50%;border:4px solid;font-size:2.8rem;font-weight:900;cursor:pointer;transition:all .25s cubic-bezier(.34,1.56,.64,1);font-family:inherit;background:white; }
  .tf-maru { border-color:#e74c3c;color:#e74c3c; }
  .tf-maru:hover { background:#fff0f0;transform:scale(1.1); }
  .tf-batsu { border-color:#3498db;color:#3498db; }
  .tf-batsu:hover { background:#f0f6ff;transform:scale(1.1); }
  .tf-btn.tf-selected { color:white;transform:scale(1.12); }
  .tf-maru.tf-selected { background:#e74c3c; }
  .tf-batsu.tf-selected { background:#3498db; }
  .word-expl { margin-top:10px;padding:10px 14px;background:rgba(255,255,255,.7);border-radius:12px;font-size:.92rem;line-height:1.8;text-align:left;white-space:pre-wrap; }
  .circle-draw-zone{display:flex;flex-direction:column;align-items:center;gap:14px;margin:10px 0}
.circle-display{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;min-height:52px;max-width:320px;padding:10px;background:#f0f8ff;border-radius:12px;border:2px dashed #93c5fd}
.circle-item{font-size:2.2rem;line-height:1;color:#2563eb;animation:popIn .15s ease-out}
@keyframes popIn{0%{transform:scale(0.5);opacity:0}100%{transform:scale(1);opacity:1}}
.circle-btn-row{display:flex;align-items:center;gap:16px}
.circle-add-btn,.circle-del-btn{padding:12px 22px;border:none;border-radius:12px;font-size:1.2rem;font-weight:bold;cursor:pointer;transition:transform .1s}
.circle-add-btn{background:#2563eb;color:#fff}
.circle-add-btn:hover{transform:scale(1.07);background:#1d4ed8}
.circle-del-btn{background:#ef4444;color:#fff}
.circle-del-btn:hover{transform:scale(1.07);background:#dc2626}
.circle-count-badge{font-size:1.6rem;font-weight:bold;color:#1e3a5f;min-width:36px;text-align:center}
.dir-btn-zone { display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:20px;padding:0 10px; }
  .soroban-pic-zone { display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px;padding:0 4px; }
  /* そろばん珠えらびプリント用 */
  .pr-soroban-choices { display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:3pt;margin:3pt 0 2pt; }
  /* 設問SVGのはみ出し防止 + サイズ制限 */
  .pr-soroban-pic-q { overflow:hidden; }
  .pr-soroban-pic-q svg { width:160px !important;max-width:160px !important;height:auto !important; }
  .pr-soroban-choice  { text-align:center;border:0.8pt solid #bbb;border-radius:3pt;padding:2pt; }
  /* 選択肢SVG・img: 枠内に自然収縮 */
  .pr-soroban-choice svg,
  .pr-soroban-choice img { display:block !important;margin:0 auto !important;width:130px !important;height:106px !important;max-width:100% !important; }
  .pr-sc-lbl { font-size:7pt;font-weight:700;color:#555;line-height:1.2;margin-bottom:1pt; }
  .soroban-pic-card { background:white;border:3px solid #c8d8f0;border-radius:14px;padding:8px 4px;cursor:pointer;transition:all .2s cubic-bezier(.34,1.56,.64,1);text-align:center;display:flex;flex-direction:column;align-items:center; }
  .soroban-pic-card:hover { border-color:var(--blue);transform:scale(1.03);background:#f0f6ff; }
  .soroban-pic-card.dir-selected { border-color:var(--blue);background:#e8f0ff; }
  .soroban-pic-card.dir-correct  { border-color:var(--green);background:#e8f8ee; }
  .soroban-pic-card.dir-wrong    { border-color:var(--pink);background:#ffe8ee; }
  .soroban-pic-num { font-size:11px;font-weight:700;color:#888;margin-bottom:2px; }
  .dir-btn { padding:16px 10px;border-radius:16px;border:3px solid #c8d8f0;background:white;font-family:inherit;font-size:1.1rem;font-weight:900;color:var(--dark);cursor:pointer;transition:all .2s cubic-bezier(.34,1.56,.64,1); }
  .dir-btn:hover { background:#f0f6ff;border-color:var(--blue);transform:scale(1.04); }
  .dir-btn.dir-selected { background:var(--blue);border-color:var(--blue);color:white; }
  .dir-btn.dir-correct { background:var(--green);border-color:var(--green);color:white; }
  .dir-btn.dir-wrong { background:var(--pink);border-color:var(--pink);color:white; }
  /* 時刻入力（isTime）テンキーUI */
  .time-input-zone { display:flex;align-items:center;justify-content:center;gap:10px;margin:10px 0 6px; }
  .time-field-wrap { display:flex;flex-direction:column;align-items:center;gap:4px; }
  .time-field-label { font-size:0.85rem;color:var(--muted);font-weight:600; }
  .time-field-box { width:90px;height:56px;border:3px solid var(--border);border-radius:14px;background:var(--card);display:flex;align-items:center;justify-content:center;font-size:1.8rem;font-weight:700;color:var(--text);cursor:pointer;transition:border-color .15s; }
  .time-field-box.time-active { border-color:var(--blue);background:#f0f6ff; }
  .time-field-box .time-placeholder { color:#bbb;font-size:1.4rem; }
  .time-colon { font-size:2rem;font-weight:900;color:var(--text);margin-top:16px; }
  .feedback { height:46px;display:flex;align-items:center;justify-content:center;font-size:1.15rem;font-weight:900; }
  .feedback.correct-fb { color:var(--green); }
  .feedback.wrong-fb { color:var(--pink); }
  .stars { font-size:1.35rem;display:flex;gap:4px;justify-content:center;margin-bottom:16px;flex-wrap:wrap; }
  .star { opacity:.2;transition:all .3s; }
  .star.lit { opacity:1;animation:starPop .4s cubic-bezier(.34,1.56,.64,1); }
  @keyframes starPop { 0%{transform:scale(0)} 100%{transform:scale(1)} }
  .numpad { display:grid;grid-template-columns:repeat(3,1fr);gap:9px;max-width:240px;margin:16px auto 0; }
  .num-btn { height:52px;border-radius:14px;border:3px solid #e8e8e8;background:white;font-family:inherit;font-size:1.3rem;font-weight:900;color:var(--dark);cursor:pointer;transition:all .15s; }
  .num-btn:hover { background:var(--bg);border-color:var(--blue);color:var(--blue); }
  .num-btn:active { transform:scale(.92); }
  .num-btn.del { border-color:var(--pink);color:var(--pink); }
  .num-btn.frac { border-color:var(--blue);color:var(--blue);font-size:1.5rem; }
  .num-btn.zero { grid-column:span 2; }

  /* RESULT */
  .result-page { padding:36px 20px;max-width:580px;margin:0 auto;text-align:center; }
  .result-emoji { font-size:5.5rem;animation:bounceIn .6s cubic-bezier(.34,1.56,.64,1);display:inline-block; }
  @keyframes bounceIn { 0%{transform:scale(0)} 100%{transform:scale(1)} }
  .lang-ja .result-page h2 { font-family:'Kaisei Decol',serif; }
  .lang-en .result-page h2 { font-family:'Fredoka One',cursive; }
  .result-page h2 { font-size:2.2rem;color:var(--dark);margin:18px 0 8px;letter-spacing:.5px; }
  .score-display { font-family:'Fredoka One',cursive;font-size:4.8rem;background:linear-gradient(135deg,var(--yellow),var(--orange));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }
  .score-label { color:#aaa;font-size:.9rem;margin-bottom:26px;font-weight:700; }
  .result-details { background:white;border-radius:22px;padding:22px;margin-bottom:26px;box-shadow:0 5px 22px rgba(0,0,0,.08);max-height:420px;overflow-y:auto; }
  .retry-drill-btn { display:block;width:100%;margin:0 0 18px;padding:14px 16px;background:linear-gradient(135deg,#fff8e1,#fff3e0);border:2.5px solid #ff9800;border-radius:14px;color:#e65100;font-weight:900;font-size:1.05rem;cursor:pointer;text-align:center;font-family:inherit;box-shadow:0 3px 10px rgba(255,152,0,.18);transition:all .2s; }
  .retry-drill-btn:hover { background:linear-gradient(135deg,#ffe0b2,#ffcc80);transform:scale(1.02); }
  .retry-drill-btn:active { transform:scale(.97); }
  .retry-badge { display:inline-block;background:#ff9800;color:white;border-radius:5px;padding:2px 8px;font-size:0.78rem;font-weight:700;margin-right:6px;vertical-align:middle; }
  .result-retry-mode-label { display:inline-block;background:#ff9800;color:white;border-radius:8px;padding:3px 12px;font-size:0.85rem;font-weight:700;margin-bottom:8px; }
  .result-row { padding:10px 0;border-bottom:1px dashed #eee; }
  .result-row:last-child { border-bottom:none; }
  .result-row-top { display:flex;justify-content:space-between;align-items:center;font-size:.9rem; }
  .result-row .q-text { color:#666; }
  .r-ok { color:var(--green);font-weight:900; }
  .r-ng { color:var(--pink);font-weight:900; }
  .r-arrow { color:#aaa;margin:0 3px; }
  .r-correct { color:var(--blue);font-weight:900; }
  .result-row-ng { background:#fff8f8;border-radius:12px;padding:10px 12px;margin:4px 0;border-bottom:none!important;box-shadow:0 2px 8px rgba(255,100,100,.08); }
  /* F4 (PR-D): ヘッダー帯型 2 階層構造に再設計（左ボーダー削除・角丸全周・overflow で子角丸切抜） */
  .result-expl { margin-top:8px;padding:0;background:#fff0e8;border-radius:10px;overflow:hidden;font-size:.85rem;line-height:1.8;color:#555; }
  .result-expl .expl-header { background:var(--orange);padding:8px 12px;display:flex;align-items:center;cursor:pointer; }
  .result-expl .expl-label { display:inline-flex;align-items:center;gap:6px;color:white;font-weight:900;font-size:.95rem;margin:0; }
  .result-expl .expl-body { padding:10px 12px; }
  .result-expl.collapsed .expl-body { display:none; }
  /* step98-02: 不正解行 (.result-row-ng) は左右に padding 12px を持つため、内側の .result-expl が正解行より狭く見える。
     ネガティブマージンで左右 padding を相殺し、解説帯の左右端を不正解ボックスの内側パディング分だけ外側へ広げる
     （正解行の .result-expl と同じく行の端まで届く幅にそろえる）。
     .result-expl 自身の border-radius:10px / overflow:hidden / background は維持される。 */
  .result-row-ng .result-expl { margin-left:-12px;margin-right:-12px; }
  /* F4 (PR-D): 一括展開・収納トグルボタン（結果画面のデザイン言語と整合、控えめなオレンジ枠） */
  .result-expand-toggle-btn { display:inline-flex;align-items:center;gap:6px;background:white;color:var(--orange);border:2px solid var(--orange);padding:8px 18px;border-radius:50px;font-family:inherit;font-size:.85rem;font-weight:900;cursor:pointer;margin-bottom:12px;transition:all .2s; }
  .result-expand-toggle-btn:hover { background:#fff8f0; }
  /* F5 互換維持: .expl-label 単独ルールは F5（L3830・L4107・.quiz-expl 配下）の既存スタイルを維持 */
  .expl-label { display:block;font-weight:900;color:var(--orange);margin-bottom:3px;font-size:.82rem; }
  /* F5: 各問題後の不正解時かいせつブロック（.result-expl を踏襲） */
  .quiz-expl { margin:12px auto;max-width:600px;padding:12px 16px;background-color:#fff8e1;border-radius:8px;border-left:4px solid #d4890a;font-size:0.95rem;line-height:1.6;color:#333;text-align:left; }
  .retry-btn { background:linear-gradient(135deg,var(--pink),var(--orange));color:white;border:none;padding:16px 44px;border-radius:50px;font-family:inherit;font-size:1.1rem;font-weight:900;cursor:pointer;margin:0 8px 12px;transition:all .3s cubic-bezier(.34,1.56,.64,1);box-shadow:0 6px 20px rgba(255,107,157,.4); }
  .retry-btn:hover { transform:scale(1.07); }
  .home-btn { background:white;color:var(--dark);border:3px solid #e8e8e8;padding:14px 32px;border-radius:50px;font-family:inherit;font-size:1rem;font-weight:900;cursor:pointer;margin:0 8px 12px;transition:all .25s; }
  .grade-btn { background:white;color:var(--purple);border:3px solid var(--purple);padding:14px 32px;border-radius:50px;font-family:inherit;font-size:1rem;font-weight:900;cursor:pointer;margin:0 8px 12px;transition:all .25s; }
  .home-btn:hover { border-color:var(--purple);color:var(--purple); }
  .next-unit-wrap { width:100%;margin-bottom:4px; }
  .result-nav-title { font-size:.82rem;font-weight:700;color:#aaa;text-align:center;margin-bottom:10px;letter-spacing:.5px; }
  .result-nav-btns { display:flex;flex-direction:column;gap:10px;max-width:480px;margin:0 auto; }
  .next-unit-btn { border:none;padding:14px 20px;border-radius:18px;font-family:inherit;font-size:.92rem;font-weight:900;cursor:pointer;transition:all .3s cubic-bezier(.34,1.56,.64,1);display:flex;align-items:center;gap:12px;text-align:left;width:100%; }
  .next-unit-btn:hover { transform:translateY(-2px) scale(1.02); }
  .next-btn-next { background:linear-gradient(135deg,#43c6ac,#4facfe);color:white;box-shadow:0 6px 20px rgba(67,198,172,.35); }
  .next-btn-review { background:white;color:#e65100;border:2px solid #FFD93D;box-shadow:0 4px 14px rgba(0,0,0,.08); }
  .next-btn-next.secondary { background:white;color:#0ea5e9;border:2px solid #bae6fd;box-shadow:0 4px 14px rgba(0,0,0,.06); }
  .next-btn-review.primary { background:linear-gradient(135deg,#FFD93D,#FF9A3C);color:white;box-shadow:0 6px 20px rgba(255,154,60,.35);border:none; }
  .next-btn-icon { font-size:1.4rem;flex-shrink:0; }
  .next-btn-body { flex:1;display:flex;flex-direction:column;gap:1px; }
  .next-btn-label { font-size:.72rem;opacity:.8;font-weight:700;letter-spacing:.3px; }
  .next-btn-name { font-size:.92rem;font-weight:900;line-height:1.3; }
  .next-unit-btn .next-arrow { font-size:1.2rem;flex-shrink:0;opacity:.7; }

  /* PARENT INFO MODAL */
  .modal-overlay { display:none;position:fixed;inset:0;z-index:2000;background:rgba(0,0,0,.5);backdrop-filter:blur(4px);align-items:center;justify-content:center;padding:20px; }
  .modal-overlay.open { display:flex; }
  .modal-box { background:white;border-radius:28px;max-width:720px;width:100%;max-height:88vh;overflow-y:auto;box-shadow:0 24px 60px rgba(0,0,0,.25);animation:modalIn .35s cubic-bezier(.34,1.56,.64,1); }
  @keyframes modalIn { 0%{transform:scale(.85);opacity:0} 100%{transform:scale(1);opacity:1} }
  .modal-header { background:linear-gradient(135deg,#FF6B9D,#C77DFF);padding:22px 26px;border-radius:28px 28px 0 0;display:flex;align-items:center;gap:14px; }
  .lang-ja .modal-header h2 { font-family:'Kaisei Decol',serif; }
  .lang-en .modal-header h2 { font-family:'Fredoka One',cursive; }
  .modal-header h2 { color:white;font-size:1.5rem;text-shadow:2px 2px 0 rgba(0,0,0,.12);flex:1; }
  .modal-header .modal-icon { font-size:1.9rem; }
  .modal-close { background:rgba(255,255,255,.2);border:none;color:white;width:34px;height:34px;border-radius:50%;font-size:1.1rem;cursor:pointer;transition:background .2s;display:flex;align-items:center;justify-content:center; }
  .modal-close:hover { background:rgba(255,255,255,.4); }
  .modal-body { padding:26px; }
  .info-section { background:#F8F6FF;border-left:5px solid var(--purple);border-radius:0 16px 16px 0;padding:20px 22px;margin-bottom:20px; }
  .lang-ja .info-section h3,.lang-ja .topic-explain h3,.lang-ja .tip-box h3 { font-family:'Kaisei Decol',serif; }
  .lang-en .info-section h3,.lang-en .topic-explain h3,.lang-en .tip-box h3 { font-family:'Fredoka One',cursive; }
  .info-section h3 { color:var(--purple);font-size:1.05rem;margin-bottom:10px; }
  .info-section p { color:#555;font-size:.9rem;line-height:1.8; }
  .curriculum-quote { background:white;border:2px solid #e8e0ff;border-radius:12px;padding:14px 18px;margin:12px 0;font-size:.88rem;color:var(--dark);line-height:1.8; }
  .curriculum-quote strong { color:var(--purple); }
  .topic-explain { background:#FFF5F0;border-left:5px solid var(--orange);border-radius:0 16px 16px 0;padding:20px 22px;margin-bottom:20px; }
  .topic-explain h3 { color:var(--orange);font-size:1.05rem;margin-bottom:10px; }
  .topic-explain p { color:#555;font-size:.9rem;line-height:1.8; }
  .example-box { background:white;border:2px dashed #ffd0b0;border-radius:12px;padding:14px 18px;margin-top:12px; }
  .example-box .ex-title { font-size:.78rem;color:#bbb;font-weight:800;margin-bottom:10px;text-transform:uppercase;letter-spacing:.5px; }
  .example-list { list-style:none;display:flex;flex-wrap:wrap;gap:8px; }
  .example-list li { background:var(--bg);border:2px solid #ffe0c8;border-radius:10px;padding:7px 14px;font-size:.95rem;font-weight:900;color:var(--dark);font-family:'Fredoka One',cursive; }
  .tip-box { background:#F0FFF3;border-left:5px solid var(--green);border-radius:0 16px 16px 0;padding:20px 22px;margin-bottom:8px; }
  .tip-box h3 { color:var(--green);font-size:1.05rem;margin-bottom:10px; }
  .tip-box p { color:#555;font-size:.9rem;line-height:1.8; }

  /* LESSON PAGE */

  /* ── 単元スタート画面 新レイアウト ── */
  .lesson-grade-badge {
    display:inline-flex;align-items:center;gap:4px;
    font-size:.78rem;font-weight:700;color:#888;
    background:#f0f0f0;border-radius:20px;padding:3px 10px;
    margin-bottom:12px;letter-spacing:.02em;
  }
  .lesson-pathway {
    background:#f8f7ff;border-radius:16px;padding:14px 16px;
    margin-bottom:14px;
  }
  .lesson-pathway-title {
    font-size:.75rem;font-weight:700;color:#999;
    letter-spacing:.08em;text-transform:uppercase;
    margin-bottom:8px;
  }
  .pathway-row { display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px; }
  .pathway-row:last-child { margin-bottom:0; }
  .pathway-label {
    font-size:.72rem;font-weight:700;color:#aaa;
    min-width:3.5em;flex-shrink:0;padding-top:2px;
  }
  .pathway-chip {
    display:inline-block;font-size:.78rem;font-weight:600;
    padding:3px 10px;border-radius:20px;cursor:pointer;
    transition:opacity .15s;text-decoration:none;
    border:none;outline:none;
  }
  .pathway-chip:hover { opacity:.75; }
  .chip-prior { background:#e8f4fd;color:#1976d2; }
  .chip-next  { background:#e8f7ee;color:#2e7d32; }
  .chip-review{ background:#fff3e0;color:#e65100; }
  .lesson-mini-desc {
    font-size:.97rem;line-height:1.8;color:#333;
    margin-bottom:16px;padding:13px 16px 13px 14px;
    background:linear-gradient(135deg,#fffde7,#fff8e1);
    border-left:5px solid #ffd54f;border-radius:0 14px 14px 0;
    position:relative;font-weight:600;letter-spacing:.01em;
  }
  .lesson-mini-desc::before {
    content:'💬';font-size:.85rem;margin-right:6px;vertical-align:-.05em;
  }
  .lesson-page { padding:32px 20px;max-width:600px;margin:0 auto;text-align:center; }
  .lesson-card {
    background:white;border-radius:28px;padding:36px 32px;
    box-shadow:0 10px 38px rgba(0,0,0,.10);margin-bottom:24px;
    position:relative;overflow:hidden;text-align:left;
  }
  .lesson-card::before { content:'';position:absolute;top:0;left:0;right:0;height:7px;background:linear-gradient(90deg,var(--blue),var(--purple)); }
  .lang-ja .lesson-card h3 { font-family:'Kaisei Decol',serif; }
  .lang-en .lesson-card h3 { font-family:'Fredoka One',cursive; }
  .lesson-card h3 { font-size:1.45rem;font-weight:700;color:var(--dark);margin-bottom:18px;display:flex;align-items:center;gap:8px; }
  .lesson-point {
    display:flex;align-items:flex-start;gap:12px;
    background:var(--bg);border-radius:14px;padding:14px 16px;
    margin-bottom:12px;
  }
  .lesson-point .pt-icon { font-size:1.3rem;flex-shrink:0;margin-top:1px; }
  .lesson-point p { color:var(--dark);font-size:.95rem;line-height:1.7;margin:0; }
  .lesson-point p strong { color:var(--purple); }
  .lesson-example {
    background:linear-gradient(135deg,#F0F6FF,#F5F0FF);
    border:2px solid #d8e8ff;border-radius:18px;
    padding:20px 22px;margin-top:8px;
  }
  .lang-ja .lesson-example h4 { font-family:'Kaisei Decol',serif; }
  .lang-en .lesson-example h4 { font-family:'Fredoka One',cursive; }
  .lesson-example h4 { font-size:1rem;color:var(--blue);margin-bottom:14px; }
  .lesson-example .calc-row {
    display:flex;align-items:center;justify-content:center;
    gap:10px;flex-wrap:wrap;
    font-size:1.6rem;font-weight:900;color:var(--dark);
    font-family:'Fredoka One',cursive;
  }
  .calc-row .arr { color:#ccc;font-size:1.2rem; }
  .calc-row .highlight { color:var(--purple);background:white;padding:4px 14px;border-radius:10px;border:2px solid #d8d0ff; }
  /* ── lesson button row ── */
  .lesson-btn-row {
    display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:28px;
  }
  .drill-section-label {
    font-size:.85rem;font-weight:900;letter-spacing:.15em;text-transform:uppercase;
    color:var(--purple);margin-bottom:6px;
    display:flex;align-items:center;gap:6px;
    border-bottom:2px solid var(--purple);
    padding-bottom:6px;width:100%;max-width:280px;justify-content:center;
  }
  .drill-btn-group {
    display:flex;flex-direction:column;align-items:center;gap:12px;width:100%;
  }
  .print-btn {
    background:white;color:var(--dark);
    border:2px solid #ccc;padding:13px 36px;border-radius:50px;
    font-family:inherit;font-size:1rem;font-weight:700;cursor:pointer;
    transition:all .25s;letter-spacing:.5px;
    display:inline-flex;align-items:center;gap:8px;
    box-shadow:0 4px 12px rgba(0,0,0,.08);
    width:100%;max-width:280px;justify-content:center;
  }
  .print-btn:hover {
    border-color:var(--g5);color:var(--g5);
    box-shadow:0 6px 18px rgba(77,150,255,.25);transform:translateY(-1px);
  }
  .challenge-btn {
    background:linear-gradient(135deg,var(--g5),var(--purple));
    color:white;border:none;padding:13px 36px;border-radius:50px;
    font-family:inherit;font-size:1rem;font-weight:900;cursor:pointer;
    transition:all .3s cubic-bezier(.34,1.56,.64,1);
    box-shadow:0 8px 24px rgba(77,150,255,.4);letter-spacing:.5px;
    display:inline-flex;align-items:center;gap:8px;width:100%;max-width:280px;justify-content:center;
  }
  .challenge-btn:hover { transform:scale(1.07);box-shadow:0 14px 36px rgba(77,150,255,.5); }
  .challenge-btn .ch-icon { font-size:1.4rem;animation:bounce 1.4s ease-in-out infinite; }
  .lesson-ref { margin-top:18px;padding:12px 16px;background:#F0F6FF;border-left:4px solid var(--blue);border-radius:0 12px 12px 0;font-size:.78rem;color:#555;line-height:1.7; }
  .lesson-ref strong { color:var(--blue); }

  #confetti-canvas { position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1000; }

    /* 度数分布表スタイル */
    .fd-table-wrap { margin: 4px 0 8px; text-align: left; font-size: 1rem; line-height: 1.5; }
    .fd-table-title { font-weight: bold; margin-bottom: 4px; font-size: 1rem; }
    .fd-table { border-collapse: collapse; font-size: 0.95rem; min-width: 220px; }
    .fd-table th, .fd-table td { border: 1px solid #9ba8c0; padding: 4px 14px; text-align: center; }
    .fd-table thead th { background: #e8ecf5; font-weight: bold; }
    .fd-table tbody tr:nth-child(even) { background: #f5f7fc; }
    .fd-total td { background: #dde3f0; font-weight: bold; border-top: 2px solid #9ba8c0; }

    /* HTML埋め込み問題（度数分布表など）のフォント統一 */
    .question-text.html-q { font-size: 1.1rem !important; line-height: 1.6; text-align: left; padding: 4px 8px; }
    .question-text.html-q * { font-size: inherit; }
    /* 折れ線グラフヘッダー：.html-q * より高い特異度(0,3,0)で確実に上書き */
    .question-text.html-q .graph-hdr { display:block; margin-top:28px; margin-bottom:3px; }
    .question-text.html-q .graph-hdr-title { display:block; font-size:1.15rem; font-weight:700; color:#333; margin:0 0 2px; line-height:1.4; }
    .question-text.html-q .graph-hdr-sub   { display:block; font-size:.78rem; color:#777; margin:0; line-height:1.4; }
    /* isHtml問題（表つき）の質問テキスト全体のフォント統一 */
    .question-text.word-q .fd-table-wrap,
    .question-text.word-q .fd-table-title,
    .question-text.word-q .fd-table,
    .question-text.word-q .fd-table th,
    .question-text.word-q .fd-table td { font-size: 0.95rem; }
    .question-text.word-q br + br { display: block; margin: 2px 0; }

  /* ══════════════════════════════════════
     PRINT PAGE  (page-print)
  ══════════════════════════════════════ */
  #page-print { background:#f0f0f0; min-height:100vh; padding:0; }

  /* ── ツールバー（画面のみ・印刷時非表示） ── */
  .pr-toolbar {
    display:flex; align-items:center; justify-content:space-between;
    padding:12px 20px; background:#fff;
    box-shadow:0 2px 8px rgba(0,0,0,.1); gap:12px;
  }
  .pr-do-print-btn {
    background:linear-gradient(135deg,#4d96ff,#845ef7);
    color:#fff; border:none; padding:10px 28px; border-radius:50px;
    font-family:inherit; font-size:1rem; font-weight:700; cursor:pointer;
    box-shadow:0 4px 14px rgba(77,150,255,.4);
    transition:transform .2s;
  }
  .pr-do-print-btn:hover { transform:scale(1.04); }

  /* ── プリントシート本体（画面表示） ── */
  #pr-sheet {
    background:#fff; max-width:297mm; margin:20px auto;
    padding-top:18mm; padding-bottom:14mm;
    padding-left:16mm; padding-right:16mm;
    box-shadow:0 4px 24px rgba(0,0,0,.15);
    font-family:'Hiragino Kaku Gothic ProN','Meiryo','Yu Gothic',sans-serif;
  }
  .pr-title-box {
    background:#ffffaa; border:1px solid #999; text-align:center;
    padding:5px 0; font-size:13pt; font-weight:bold; margin-bottom:14px;
  }
  .pr-header-row1 { display:flex; align-items:flex-end; gap:14px; margin-bottom:5px; flex-wrap:nowrap; font-size:10.5pt; }
  .pr-field { display:flex; align-items:flex-end; gap:4px; font-size:11pt; }
  .pr-uline { border-bottom:1px solid #555; display:inline-block; width:24px; height:18px; }
  .pr-name-field  { flex:1; }
  .pr-name-line   { border-bottom:1px solid #555; flex:1; min-width:80px; display:inline-block; height:18px; margin-left:4px; }
  hr.pr-solid  { border:none; border-top:1px solid #666; margin:16px 0 16px; }
  .pr-inst     { font-size:10pt; margin-bottom:8px; }
  /* ── プリントシート ── */
  .pr-q table       { width:100%; border-collapse:collapse; font-size:8.5pt; }
  .pr-q img         { max-width:100% !important; height:auto !important; }
  .pr-q svg         { max-width:100% !important; width:100% !important; height:auto !important; }
  .pr-q div         { max-width:100%; }
  .pr-row-header, .pr-row { max-width:100%; }
  .pr-graph-block   { max-width:100%; overflow:hidden; }
  #pr-sheet         { font-family:'Hiragino Kaku Gothic ProN','Meiryo',sans-serif; }
  .pr-title-box     { background:#ffffcc; border:1.5pt solid #666; text-align:center;
                      font-size:13pt; font-weight:bold; padding:5pt 0; margin-bottom:16pt; }
  .pr-header-row1 { display:flex; align-items:center; gap:14pt; font-size:10pt; margin-bottom:5pt; flex-wrap:nowrap; }
  .pr-field         { display:flex; align-items:center; gap:4pt; }
  .pr-uline         { display:inline-block; border-bottom:1pt solid #555; width:30pt; }
  .pr-name-field    { flex:1; }
  .pr-name-line     { flex:1; border-bottom:1pt solid #555; min-width:120pt; }
  .pr-solid         { border:none; border-top:1.5pt solid #333; margin:20pt 0 20pt; }
  .pr-inst          { font-size:10pt; margin-bottom:8pt; }

  /* 単元別左右余白：data-unit属性で制御（同期的・確実） */
  #pr-sheet.pr-wide-margin,
  #pr-sheet[data-unit="tsuubun_5"],
  #pr-sheet[data-unit="frac_lcd_5"]   { padding-left:20mm !important; padding-right:20mm !important; }
  #pr-sheet.pr-mid-margin,
  #pr-sheet[data-unit="div_frac_5"]   { padding-left:15mm !important; padding-right:15mm !important; }
  #pr-sheet[data-unit="triangle_angle_5"],
  #pr-sheet[data-unit="quad_angle_5"],
  #pr-sheet[data-unit="sector_5"],
  #pr-sheet[data-unit="regular_polygon_5"] { padding-left:4mm !important; padding-right:4mm !important; }

  /* 2カラムグリッド */
  #pr-problems      { display:grid; grid-template-columns:1fr 1fr; gap:9pt 14pt; }
  /* COLS5単元：シート幅をCSS側でも強制（JSより確実） */
  #pr-sheet[data-unit="line_graph_read_4"],
  #pr-sheet[data-unit="line_graph_draw_4"] {
    width: 100% !important;
    max-width: none !important;
    padding-left: 6mm !important;
    padding-right: 6mm !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-shadow: none !important;
  }
  #pr-problems.pr-cols5 { grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) !important; gap:6pt 8pt !important; }
  #pr-problems.pr-cols5 .pr-row { padding:4pt 4pt 4pt !important; }
  #pr-problems.pr-cols4 { grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) !important; }
  #pr-problems.pr-cols3 { grid-template-columns:1fr 1fr 1fr !important; }
  #pr-problems.pr-cols2 { grid-template-columns:1fr 1fr !important; }

  /* 各問のセル */
  .pr-row           { break-inside:avoid; border:1pt solid #ccc; border-radius:3pt;
                      padding:5pt 6pt 5pt; display:flex; flex-direction:column; justify-content:space-between; gap:2pt; min-height:48pt; }
  .pr-row-header    { display:flex; align-items:flex-start; gap:4pt; }
  .pr-num           { font-size:9pt; font-weight:bold; flex-shrink:0; min-width:22pt; text-align:right; padding-top:1pt; }
  .pr-q             { font-size:12.5pt; line-height:1.25; word-break:break-word; overflow-wrap:anywhere; flex:1; min-width:0; }
  /* 筆算ボックスのプリント調整 */
  .pr-q div[style*="border-radius:10px"] {
    font-size:1.1rem !important;
    padding:8px 14px 6px !important;
    margin:2px 0 !important;
    border-width:1.5pt !important;
  }
  .pr-q div[style*="border-radius:10px"] div:last-child {
    display:none !important; /* ↑入力ヒントを非表示 */
  }

  /* 筆算（2けた×2けた）専用行 */
  .pr-row-hissan    { break-inside:avoid; border:1pt solid #ccc; border-radius:3pt;
                      display:flex; flex-direction:column; }

  /* さくらんぼ図あり */
  .pr-row-graph     { }
  .pr-graph-block     { padding-bottom:4pt; }
  .pr-graph-block img { width:100%; max-width:200pt; height:auto; display:block; margin:2pt auto; }
  .pr-graph-block svg { display:block; width:100% !important; max-width:100% !important; height:auto !important; overflow:visible !important; }
  .pr-graph-block svg.pr-fixed-svg { width:300px !important; max-width:300px !important; }

  /* 回答欄 */
  .pr-ans-box       { display:flex; align-items:center; gap:5pt; margin-top:0; font-size:10pt; }
  .pr-ans-box span  { white-space:nowrap; }
  .pr-ans-write     { flex:1; border-bottom:1.5pt solid #444; min-width:30pt; min-height:20pt; }

  /* 答えセクション（下部） */
  hr.pr-dashed      { border:none; border-top:2pt dashed #aaa; margin:20pt 0 20pt; }
  .pr-ans-header    { font-size:10pt; font-weight:bold; margin-bottom:4pt; }
  .pr-ans-grid      { display:grid !important; grid-template-columns:repeat(5,1fr) !important; gap:2pt; }
  .pr-ans-cell      { display:flex; align-items:baseline; gap:4pt; font-size:10pt; padding:1pt 3pt; }
  .pr-ans-num       { font-size:8pt; color:#333; }
  .pr-ans-val       { font-weight:bold; font-size:11pt; }

  /* pr-compact: 廃止済み（pdf自動スケールで代替） */

  /* ── 時計SVG: PDF出力（html2canvas）用サイズ制御 ── */
  /* html2canvasは@media printを無視するため通常CSSで制御 */
  #page-print .clock-svg  { width:58px !important; height:58px !important; }
  #page-print .bar-svg   { width:100% !important; height:auto !important; max-width:100% !important; }
  #page-print .clock-label { font-size:11px !important; }
  #page-print .clock-cell  { margin:2px 5px !important; }

  /* ── @media print: ツールバーを消してシートだけ印刷 ── */
/* ── Block 1 / Section B: post-@media print (index.html:768-960) ── */

  /* ── Lesson TOC link ────────────────────────────────────── */
  .lesson-toc-link { margin-top:16px;text-align:center; }
  .lesson-toc-btn { display:inline-flex;align-items:center;gap:7px;padding:8px 20px;border-radius:50px;background:#f0f6ff;border:1.5px solid #c8d8f0;font-family:inherit;font-size:.82rem;font-weight:700;color:var(--blue);cursor:pointer;transition:all .2s; }
  .lesson-toc-btn:hover { background:var(--blue);color:white;border-color:var(--blue); }

  /* ── 親御さん向けガイド ── */
  .parent-guide-btn { display:inline-flex;align-items:center;gap:9px;padding:13px 36px;border-radius:50px;background:#f9a825;border:2px solid #f9a825;font-family:inherit;font-size:1rem;font-weight:700;color:white;cursor:pointer;transition:all .2s;margin-top:10px; }
  .parent-guide-btn:hover { background:#fff8e1;color:#e65100;border-color:#f9a825; }
  /* ── のびしろ発見ナビ ── */
  .nb-overlay { display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:1010;overflow-y:auto;padding:16px 0; }
  .nb-overlay.open { display:block; }
  .nb-modal { background:white;border-radius:18px;max-width:420px;margin:24px auto;padding:24px 20px 28px;position:relative; }
  .nb-close { position:absolute;top:14px;right:16px;background:none;border:none;font-size:1.3rem;cursor:pointer;color:#aaa; }
  .nb-title { font-size:1.1rem;font-weight:700;color:#2e7d32;text-align:center;margin-bottom:4px; }
  .nb-sub   { font-size:.82rem;color:#666;text-align:center;margin-bottom:18px; }
  .nb-prog  { display:flex;gap:5px;margin-bottom:20px; }
  .nb-prog-bar { flex:1;height:4px;border-radius:2px;background:#e0e0e0; }
  .nb-prog-bar.done { background:#2e7d32; }
  .nb-prog-bar.active { background:#81c784; }
  .nb-unit-list { display:flex;flex-direction:column;gap:7px;max-height:320px;overflow-y:auto;margin-bottom:16px; }
  .nb-unit-item { padding:10px 14px;border-radius:10px;border:1.5px solid #e0e0e0;background:white;cursor:pointer;
    font-size:.88rem;color:#333;text-align:left;transition:all .15s; }
  .nb-unit-item:hover { border-color:#81c784;background:#f1f8e9; }
  .nb-unit-item.selected { border-color:#2e7d32;background:#e8f5e9;color:#1b5e20;font-weight:600; }
  .nb-unit-grade { font-size:.72rem;color:#888;margin-bottom:2px; }
  .nb-q-card { background:#f8f9fa;border-radius:12px;padding:16px;margin-bottom:14px; }
  .nb-q-label { font-size:.75rem;color:#888;margin-bottom:8px; }
  .nb-q-text { font-size:1.2rem;font-weight:700;color:#222;text-align:center;padding:10px 0; }
  .nb-choices { display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px; }
  .nb-choice { padding:13px;border-radius:10px;border:1.5px solid #e0e0e0;background:white;
    font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .15s;color:#333; }
  .nb-choice:hover { border-color:#81c784;background:#f1f8e9; }
  .nb-choice.correct { border-color:#2e7d32;background:#e8f5e9;color:#1b5e20; }
  .nb-choice.wrong { border-color:#e57373;background:#ffebee;color:#c62828; }
  .nb-expl { background:#fff8e1;border-radius:8px;padding:10px 12px;font-size:.82rem;color:#5d4037;margin-bottom:14px;line-height:1.6; }
  .nb-map-row { display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:9px;margin-bottom:7px; }
  .nb-map-current { background:#f3f4ff;border:1.5px solid #7986cb; }
  .nb-map-nobisiro { background:#faece7;border:2px solid #d85a30; }
  .nb-map-ok { background:#eaf3de;border:1.5px solid #a5d6a7; }
  .nb-map-icon { font-size:1.3rem;flex-shrink:0; }
  .nb-map-label { font-size:.72rem;margin-bottom:2px; }
  .nb-map-name { font-size:.88rem;font-weight:700; }
  .nb-map-badge { font-size:.7rem;padding:2px 8px;border-radius:10px;color:white;flex-shrink:0;margin-left:auto; }
  .nb-msg { background:#fff8e1;border-radius:10px;padding:12px;font-size:.82rem;color:#5d4037;line-height:1.7;margin-bottom:14px; }
  .nb-btn-main { width:100%;padding:13px;border-radius:12px;border:none;background:#2e7d32;color:white;font-size:.95rem;font-weight:700;cursor:pointer;margin-bottom:8px; }
  .nb-btn-sub  { width:100%;padding:11px;border-radius:12px;border:1.5px solid #e0e0e0;background:white;color:#666;font-size:.85rem;cursor:pointer; }
  .nb-nobisiro-highlight { border-color:#d85a30!important;background:#faece7!important; }
  .nb-hint { background:#e8f5e9;border-radius:8px;padding:9px 12px;font-size:.8rem;color:#2e7d32;margin-bottom:12px;text-align:center; }
    .pg-overlay { display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1000;overflow-y:auto; }
  .pg-overlay.open { display:block; }
  .pg-modal { background:white;border-radius:16px;max-width:700px;margin:24px auto;padding:28px 24px 36px;position:relative; }
  .pg-close { position:absolute;top:14px;right:16px;background:none;border:none;font-size:1.4rem;cursor:pointer;color:#888;line-height:1; }
  .pg-close:hover { color:#333; }
  .pg-modal h2 { font-size:1.2rem;color:#e65100;margin-bottom:4px; }
  .pg-modal h3 { font-size:1rem;color:#1a5276;margin:20px 0 6px;border-left:4px solid #f9a825;padding-left:10px; }
  .pg-modal h4 { font-size:.92rem;color:#333;margin:14px 0 4px; }
  .pg-modal p { font-size:.88rem;line-height:1.85;color:#444;margin:6px 0; }
  .pg-modal ul { font-size:.88rem;line-height:1.85;color:#444;padding-left:1.4em;margin:6px 0; }
  .pg-modal ul li { margin:3px 0; }
  .pg-modal ol { font-size:.88rem;line-height:1.85;color:#444;padding-left:1.6em;margin:6px 0; }
  .pg-modal ol li { margin:4px 0; }
  .pg-tip { background:#fff8e1;border-left:3px solid #f9a825;border-radius:0 8px 8px 0;padding:10px 14px;margin:10px 0;font-size:.85rem;color:#5d4037; }
  .pg-warn { background:#fce4ec;border-left:3px solid #e91e63;border-radius:0 8px 8px 0;padding:10px 14px;margin:10px 0;font-size:.85rem;color:#880e4f; }
  .pg-msg { background:#e8f5e9;border-radius:10px;padding:14px 16px;margin:16px 0;font-size:.88rem;color:#2e7d32;line-height:1.85; }
  /* ── 親御さん向けガイド 新テンプレート ── */
  .pg-tsect { margin:14px 0; padding:12px 16px 10px; border-radius:10px; }
  .pg-tsect > h3 { font-size:.93rem; font-weight:700; margin:0 0 9px; padding-bottom:5px; border-bottom:1.5px solid rgba(0,0,0,.07); }
  .pg-tsect-body { font-size:.87rem; color:#444; line-height:1.75; }
  .pg-tsect-body ol, .pg-tsect-body ul { padding-left:1.3em; margin:4px 0; }
  .pg-tsect-body h4 { font-size:.87rem; font-weight:700; margin:10px 0 3px; color:#555; }
  .pg-tsect-key  { background:#f3f4ff; border-left:3px solid #7986cb; }
  .pg-tsect-key  > h3 { color:#3949ab; }
  .pg-tsect-stumble { background:#fff5f5; border-left:3px solid #ef9a9a; }
  .pg-tsect-stumble > h3 { color:#c62828; }
  .pg-tsect-voice   { background:#f2faf2; border-left:3px solid #81c784; }
  .pg-tsect-voice   > h3 { color:#2e7d32; }
  .pg-key-note { margin-top:8px; padding:9px 12px; background:rgba(255,255,255,.7); border-radius:8px; font-size:.85rem; color:#555; }
  .pg-tdetails { margin:14px 0 4px; border:1px solid #e0e0e0; border-radius:10px; overflow:hidden; }
  .pg-tdetails summary { padding:10px 16px; cursor:pointer; font-size:.87rem; font-weight:700; color:#666; background:#fafafa; list-style:none; display:flex; align-items:center; gap:6px; }
  .pg-tdetails summary::-webkit-details-marker { display:none; }
  .pg-tdetails summary::before { content:'▶'; font-size:.7rem; color:#aaa; transition:transform .2s; }
  .pg-tdetails[open] summary::before { transform:rotate(90deg); }
  .pg-tdetails summary:hover { background:#f0f0f0; }
  .pg-tdetails-body { padding:12px 16px; font-size:.86rem; color:#444; line-height:1.75; border-top:1px solid #eee; }
  .pg-tdetails-body h3 { font-size:.88rem; font-weight:700; margin:12px 0 5px; color:#555; }
  .pg-tdetails-body h4 { font-size:.85rem; font-weight:700; margin:8px 0 3px; color:#666; }
  .pg-tdetails-curr { font-size:.78rem; color:#aaa; margin-top:12px; padding-top:8px; border-top:1px dashed #e0e0e0; }
  /* ── 関連単元リンク（この単元のつながり） ── */
  .pg-connections { margin:20px 0 8px; }
  .pg-connections h3 { font-size:1rem;font-weight:700;color:#4a4a6a;margin:0 0 10px;padding-bottom:6px;border-bottom:2px solid #e8eaf6; }
  .pg-conn-section { margin-bottom:14px; }
  .pg-conn-section h4 { font-size:.82rem;font-weight:700;color:#5c6bc0;margin:0 0 6px;letter-spacing:.02em; }
  .pg-conn-links { display:flex;flex-wrap:wrap;gap:6px; }
  .pg-conn-link { display:inline-block;padding:5px 11px;background:#f0f4ff;border:1.5px solid #c5cae9;border-radius:20px;font-size:.82rem;color:#3949ab;text-decoration:none;cursor:pointer;transition:background .15s,border-color .15s; }
  .pg-conn-link:hover { background:#e8eaf6;border-color:#7986cb; }
  .pg-conn-prior h4 { color:#2e7d32; }
  .pg-conn-prior .pg-conn-link { background:#f1f8e9;border-color:#a5d6a7;color:#2e7d32; }
  .pg-conn-prior .pg-conn-link:hover { background:#dcedc8; }
  .pg-conn-next h4 { color:#1565c0; }
  .pg-conn-next .pg-conn-link { background:#e3f2fd;border-color:#90caf9;color:#1565c0; }
  .pg-conn-next .pg-conn-link:hover { background:#bbdefb; }
  .pg-conn-review h4 { color:#e65100; }
  .pg-conn-review .pg-conn-link { background:#fff3e0;border-color:#ffcc80;color:#e65100; }
  .pg-conn-review .pg-conn-link:hover { background:#ffe0b2; }

  /* ── TOC Page ──────────────────────────────────────────────────────── */
  .toc-open-btn { display:inline-flex;align-items:center;gap:8px;padding:9px 22px;border-radius:50px;border:2px solid #c8d8f0;background:white;font-family:inherit;font-size:.85rem;font-weight:700;color:#555;cursor:pointer;transition:all .25s;box-shadow:0 2px 8px rgba(0,0,0,.06);margin-top:10px; }
  .toc-open-btn:hover { background:#f0f6ff;border-color:var(--blue);color:var(--blue); }
  #page-toc { min-height:100vh;background:var(--bg); }
  .toc-page { max-width:860px;margin:0 auto;padding:20px 16px 60px; }
  .toc-header { text-align:center;margin-bottom:24px; }
  .toc-header h2 { font-size:1.4rem;font-weight:900;color:var(--blue);margin-bottom:6px; }
  .toc-header p { font-size:.85rem;color:#777;margin:0; }
  .toc-grade-section { margin-bottom:20px;border-radius:16px;overflow:hidden;box-shadow:0 3px 12px rgba(0,0,0,.08); }
  .toc-grade-header { padding:12px 20px;color:white;font-weight:900;font-size:1rem; }
  .toc-grade-label { font-size:1rem;font-weight:900; }
  .toc-unit-list-vertical { background:white;padding:10px 16px; }
  .toc-ref-label { font-size:.76rem;color:#444;padding:10px 0 4px;border-top:1px solid #ddd;margin-top:4px;line-height:1.5; }
  /* ── topic-grid 内カテゴリラベル（まとめセクション） ── */
  .tg-category { width:100%; grid-column:1/-1; margin:10px 0 4px; padding:5px 14px; background:#546e7a; color:#fff; border-radius:6px; font-size:.8rem; font-weight:700; letter-spacing:.04em; }
  .tg-matome-divider { width:100%; grid-column:1/-1; height:1px; background:#ddd; margin:8px 0 4px; }
    .toc-category-label { font-size:12px; font-weight:600; color:#fff; background:#1a5276; padding:5px 14px; margin:12px 0 4px; border-radius:4px; letter-spacing:0.05em; display:block; }
  .toc-ref-label:first-child { border-top:none;margin-top:0;padding-top:2px; }
  .toc-unit-list-vertical .toc-unit-item { display:inline-block;margin:3px 4px; }
  .toc-unit-item { padding:6px 14px;border-radius:20px;font-size:.78rem;font-weight:700;font-family:inherit; }
  button.toc-unlocked { background:#f0f6ff;color:var(--blue);border:1.5px solid #c8d8f0;cursor:pointer;transition:all .2s; }
  button.toc-unlocked:hover { background:var(--blue);color:white;border-color:var(--blue); }
  .toc-locked { background:#f5f5f5;color:#bbb;border:1.5px solid #e0e0e0;cursor:default; }
  .toc-soon { font-size:.65rem;background:#f0f0f0;border-radius:8px;padding:1px 5px;color:#aaa;margin-left:3px; }
  .toc-back-btn { display:inline-flex;align-items:center;gap:6px;padding:8px 18px;border-radius:50px;background:white;border:2px solid #c8d8f0;font-family:inherit;font-size:.82rem;font-weight:700;color:#666;cursor:pointer;margin-bottom:20px;transition:all .2s; }
  .toc-back-btn:hover { border-color:var(--blue);color:var(--blue); }

/* ── ネットワークマップ ── */
.nm-grade-btn {
  padding:3px 10px; border-radius:20px; border:2px solid transparent;
  font-size:11px; font-weight:700; cursor:pointer; opacity:0.55; transition:all .2s;
}
.nm-grade-btn.nm-active { opacity:1; border-color:white; }
.nm-grade-btn:hover { opacity:0.85; }
.nm-link { stroke:#bbc8db; stroke-width:1.2; opacity:0.65; marker-end:url(#nm-arr); }
.nm-link.nm-hl { stroke:#3b6fd4; stroke-width:2.5; opacity:1; marker-end:url(#nm-arr-hl); }
.nm-link.nm-dim { opacity:0.06; }
.nm-node circle { cursor:pointer; stroke-width:2; }
.nm-node text { pointer-events:none; font-size:9px; fill:#444; }
.nm-node.nm-dim circle { opacity:0.1; }
.nm-node.nm-dim text { opacity:0.1; }
/* ── Phase B: クイックスタートバナー ── */
.qs-banner{margin:12px 0 16px;padding:16px 20px;background:linear-gradient(135deg,#fef9ff,#f0f4ff);border:2px solid #c4b5fd;border-radius:16px;}
.qs-inner{display:flex;flex-direction:column;align-items:center;gap:10px;}
.qs-label{margin:0;font-size:.92rem;color:#6d28d9;font-weight:bold;text-align:center;}
.qs-main-btn{width:100%;max-width:320px;padding:14px 24px;background:#7c3aed;color:white;font-size:1.05rem;font-weight:bold;border:none;border-radius:12px;cursor:pointer;transition:background .15s;}
.qs-main-btn:hover{background:#6d28d9;}
.qs-change-btn{display:inline-flex;align-items:center;justify-content:center;min-width:240px;margin-top:2px;padding:12px 28px;background:#F3EEFF;color:#6d28d9;font-size:15px;font-weight:600;border:2px solid #7c3aed;border-radius:12px;cursor:pointer;transition:background .15s,box-shadow .15s,transform .1s;}
.qs-change-btn:hover{background:#E5DCFA;box-shadow:0 2px 8px rgba(124,58,237,.2);}
.qs-change-btn:active{transform:scale(.98);}
.qs-change-btn:focus-visible{outline:3px solid #c4b5fd;outline-offset:2px;}
@media (prefers-reduced-motion:reduce){.qs-change-btn{transition:none;}.qs-change-btn:active{transform:none;}}
/* ── Phase C: ヘッダードロップダウン ── */
.hdr-guide-group{position:relative;margin-right:auto;margin-left:16px;}
.hdr-right-group{display:flex;align-items:center;gap:8px;flex-shrink:0;overflow:visible;}
.hdr-guide-btn{background:rgba(255,255,255,.18);border:2px solid rgba(255,255,255,.35);color:white;font-weight:900;font-size:.82rem;padding:6px 14px;border-radius:50px;cursor:pointer;font-family:inherit;white-space:nowrap;transition:background .2s;}
.hdr-guide-btn:hover{background:rgba(255,255,255,.32);}
.hdr-dropdown-menu{position:absolute;top:calc(100% + 8px);left:0;background:white;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.15);min-width:180px;z-index:1200;overflow:hidden;padding:6px 0;}
#user-dropdown-menu{left:auto;right:0;}
.hdr-dropdown-item{display:block;width:100%;padding:10px 16px;background:none;border:none;text-align:left;font-size:.88rem;font-weight:700;cursor:pointer;font-family:inherit;color:#333;white-space:nowrap;}
.hdr-dropdown-item:hover{background:#f5f0ff;color:#7c3aed;}
/* F2/F3: おとの設定トグルスイッチ（aria-checked + .is-on の二重制御で属性セレクタ単独依存を解消、BUG-AUDIO-DEFAULT-ON-01）*/
.sound-toggle-switch{width:38px;height:20px;border-radius:10px;background:#ccc;position:relative;transition:background .2s;cursor:pointer;flex-shrink:0;}
.sound-toggle-switch::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:left .2s;}
.sound-toggle-switch[aria-checked="true"],.sound-toggle-switch.is-on{background:#1D9E75;}
.sound-toggle-switch[aria-checked="true"]::after,.sound-toggle-switch.is-on::after{left:20px;}
/* F2/F3 設定モーダル(v2.2、10 種音色パターン) */
#sound-settings-modal .modal-content{background:white;border-radius:28px;max-width:520px;width:100%;max-height:88vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 24px 60px rgba(0,0,0,.25);animation:modalIn .35s cubic-bezier(.34,1.56,.64,1);}
#sound-settings-modal .modal-body{padding:20px 24px;overflow-y:auto;flex:1;}
#sound-settings-modal .modal-footer{padding:14px 24px;border-top:1px solid #eee;display:flex;justify-content:flex-end;}
.sound-onoff-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid #f0f0f0;margin-bottom:14px;font-size:.95rem;font-weight:700;color:#333;}
.sound-pattern-section{margin-top:8px;}
.sound-pattern-label{font-size:.85rem;font-weight:700;color:#666;margin-bottom:8px;}
.sound-pattern-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px;}
.sound-pattern-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;cursor:pointer;transition:background .15s;}
.sound-pattern-item:hover{background:#f5f0ff;}
.sound-pattern-item input[type="radio"]{margin:0;cursor:pointer;}
.sound-pattern-name{flex:1;font-size:.85rem;font-weight:700;color:#333;}
.sound-preview-btn{background:#f0e6ff;color:#7c3aed;border:none;border-radius:8px;padding:6px 10px;font-size:.78rem;font-weight:700;cursor:pointer;font-family:inherit;transition:background .15s;}
.sound-preview-btn:hover{background:#e4d4ff;}
.sound-preview-btn:disabled,.sound-preview-btn.disabled{opacity:.4;cursor:not-allowed;pointer-events:none;}
.sound-settings-close-btn{padding:8px 24px;background:#eee;color:#555;border:none;border-radius:10px;font-size:.88rem;font-weight:700;cursor:pointer;font-family:inherit;}
.sound-settings-close-btn:hover{background:#ddd;}
/* PR-α 修正 4: 試聴ボタン説明文 (FR-PREVIEW-INSTRUCTION-01) */
.sound-preview-instruction{font-size:.85rem;color:#777;margin:8px 0;line-height:1.4;}
/* PR-α 修正 2: OFF 時のラジオボタン・パターン名灰色化 (FR-AUDIO-OFF-RADIO-01、:has() 非対応ブラウザ向けに JS で .disabled クラスを付与) */
.sound-pattern-item.disabled{cursor:not-allowed;}
.sound-pattern-item.disabled:hover{background:transparent;}
.sound-pattern-item.disabled .sound-pattern-name{opacity:.4;color:#999;}
.sound-pattern-item input[type="radio"]:disabled{cursor:not-allowed;}
/* PR-α 修正 5: 音量スライダー (FR-AUDIO-VOLUME-01) */
.sound-volume-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid #eee;margin-top:12px;font-size:.95rem;font-weight:700;color:#333;}
#sound-volume-label{flex-shrink:0;}
#sound-volume-slider{flex:1;cursor:pointer;}
#sound-volume-slider:disabled{opacity:.4;cursor:not-allowed;}
#sound-volume-value{flex-shrink:0;min-width:3.2em;text-align:right;color:#555;font-size:.88rem;}
.hdr-dropdown-divider{border:none;border-top:1px solid #eee;margin:4px 0;}
.hdr-dropdown-logout{color:#e53935;}
.hdr-dropdown-logout:hover{background:#fff0f0;color:#e53935;}
.hdr-user-group{position:relative;overflow:visible;}
.hdr-user-btn{background:white;border:2px solid white;color:#7c3aed;font-weight:900;font-size:.85rem;padding:7px 16px;border-radius:50px;cursor:pointer;font-family:inherit;white-space:nowrap;transition:all .2s;box-shadow:0 2px 8px rgba(0,0,0,.15);}
.hdr-user-btn:hover{background:#f5f0ff;color:#6d28d9;}
@keyframes hourglassSpin {
  0%   { transform: rotate(0deg); }
  45%  { transform: rotate(0deg); }
  50%  { transform: rotate(180deg); }
  95%  { transform: rotate(180deg); }
  100% { transform: rotate(360deg); }
}
.report-hourglass {
  display: inline-block;
  animation: hourglassSpin 2s ease-in-out infinite;
  font-size: 2rem;
}
@media(max-width:480px){
  #guide-btn-label{display:none;}
  header{overflow:visible;}
  .header-text{flex:1;min-width:0;overflow:hidden;}
  .header-text h1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .hdr-guide-group{margin-left:4px;}
  .hdr-right-group{gap:4px;}
  .lang-btn{font-size:.68rem;padding:4px 7px;}
  .hdr-user-btn{font-size:.72rem;padding:5px 8px;}
}
.grade-suffix{font-size:.42em;vertical-align:super;font-weight:900;letter-spacing:0;}

/* ── Block 2: howto modal (index.html:1099-1125) ── */
.hwt .section{background:#fff;border-radius:20px;box-shadow:0 4px 20px rgba(0,0,0,.08);padding:28px 24px;margin-bottom:20px;}
.hwt .section-title{font-size:1.1rem;font-weight:900;margin-bottom:16px;display:flex;align-items:center;gap:10px;}
.hwt .badge{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;font-size:1rem;flex-shrink:0;}
.hwt .steps{display:flex;flex-direction:column;gap:16px;}
.hwt .step{display:flex;gap:16px;align-items:flex-start;}
.hwt .step-num{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:.9rem;color:white;flex-shrink:0;margin-top:2px;}
.hwt .step-content h3{font-size:.95rem;font-weight:900;margin-bottom:4px;}
.hwt .step-content p{font-size:.88rem;color:#666;}
.hwt .hint{background:#FFF8E7;border-left:4px solid #FFD93D;border-radius:0 12px 12px 0;padding:12px 16px;margin:12px 0;font-size:.88rem;}
.hwt .hint strong{color:#E6A817;display:block;margin-bottom:4px;}
.hwt .feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px;}
.hwt .feature-card{background:#F8F8F8;border-radius:14px;padding:16px 14px;text-align:center;}
.hwt .feature-icon{font-size:1.8rem;margin-bottom:8px;}
.hwt .feature-card h4{font-size:.85rem;font-weight:900;margin-bottom:4px;}
.hwt .feature-card p{font-size:.78rem;color:#666;line-height:1.5;}
.hwt .faq-item{border-bottom:1px solid #F0F0F0;padding:16px 0;}
.hwt .faq-item:last-child{border-bottom:none;}
.hwt .faq-q{font-weight:900;font-size:.92rem;color:#9B59B6;margin-bottom:6px;display:flex;gap:8px;}
.hwt .faq-a{font-size:.88rem;color:#666;padding-left:24px;}
.hwt .color-pink{background:#FF6B9D;}.hwt .color-purple{background:#9B59B6;}.hwt .color-green{background:#1D9E75;}.hwt .color-orange{background:#FF9A3C;}.hwt .color-blue{background:#4D96FF;}
.hwt .ui-mock{background:linear-gradient(135deg,#FF6B9D22,#9B59B622);border:2px solid #EEE;border-radius:16px;padding:16px;margin:12px 0;font-size:.85rem;}
.hwt .ui-bar{background:linear-gradient(90deg,#FF6B9D,#9B59B6);border-radius:8px;padding:8px 16px;color:white;font-size:.82rem;font-weight:700;display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;}
.hwt .ui-login-btn{background:rgba(255,255,255,.9);border:none;border-radius:20px;padding:4px 12px;font-size:.78rem;font-weight:700;color:#9B59B6;}
.hwt .progress-bar{background:#EEE;border-radius:10px;height:10px;margin:4px 0 8px;overflow:hidden;}
.hwt .progress-fill{height:100%;border-radius:10px;}
.hwt .rec-card{background:white;border-radius:12px;padding:12px;margin:6px 0;border-left:4px solid #1D9E75;display:flex;justify-content:space-between;align-items:center;}
.hwt .rec-rank{font-size:1.2rem;margin-right:8px;}

/* ── Block 3: flow map (index.html:80828-80833) ── */
.fm-tab{padding:4px 10px;border-radius:14px;border:1px solid #ccc;background:#f0f0f0;color:#555;font-size:11px;font-weight:600;cursor:pointer;transition:all .15s;}
.fm-tab:hover{background:#e0e0e0;}
.fm-legend{font-size:10px;color:white;padding:2px 7px;border-radius:10px;font-weight:600;}
.fm-node{cursor:pointer;}
.fm-node rect{transition:filter .15s;}
.fm-node:hover rect{filter:brightness(0.88);}

/* ── Block 1 / @media print (index.html:738-767, placed at end per plan) ── */
  @media print {
    /* clock-svg は pr-sheet CSS で制御（html2canvasがmedia printを無視するため）
    /* body 直下の全要素を非表示にしてから必要なものだけ表示 */
    body > * { display:none !important; }
    /* page-print とその中身だけ表示 */
    #page-print { display:block !important; background:#fff !important; }
    /* ツールバーを最優先で非表示（詳細度を #page-print > * より高くする） */
    #page-print .pr-toolbar,
    #page-print .no-print  { display:none !important; }
    /* シート本体を表示 */
    #page-print #pr-sheet          { display:block !important; margin:0; padding:0; box-shadow:none; max-width:none; }
    #page-print #pr-sheet > *      { display:block !important; }
    #page-print .pr-ans-grid       { display:grid !important; grid-template-columns:repeat(5,1fr) !important; }
    #page-print .pr-header-row1,
    #page-print .pr-field          { display:flex !important; }
    @page { size:A4 portrait; margin:15mm 14mm 12mm 14mm; }
    #pr-problems { display:grid !important; grid-template-columns:1fr 1fr; }
    #pr-problems.pr-cols4 { grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) !important; }
    #pr-sheet[data-unit="line_graph_read_4"],
    #pr-sheet[data-unit="line_graph_draw_4"] { width:291mm !important; max-width:291mm !important; padding-left:2mm !important; padding-right:2mm !important; margin:0 !important; }
    #pr-problems.pr-cols5 { grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) !important; gap:5pt 6pt !important; }
    #pr-problems.pr-cols5 .pr-row { padding:4pt 3pt 4pt !important; }
    #pr-problems.pr-cols3 { grid-template-columns:1fr 1fr 1fr !important; }
    #pr-problems.pr-cols2 { grid-template-columns:1fr 1fr !important; }
    .pr-row      { break-inside:avoid !important; border:1pt solid #ccc !important; }
    .pr-graph-block img { width:100% !important; max-width:200pt !important; }
    .pr-graph-block svg { width:100% !important; max-width:100% !important; height:auto !important; }
    /* compact モードの印刷上書き */
    /* pr-compact: 廃止済み */
  }