/* ============================================================ 中学英語 まるごとテキスト 共通スタイル - 画面用 + 印刷用 (@media print) - 6分野: be/一般動詞(青) / 時制(紫) / 準動詞・受動態(緑) / 比較・関係詞(橙) / 語彙(赤) / 読解(茶) - 理科版 (rika/assets/style.css 864行) をベースに拡張 - iPad/タッチ対応・音声ボタン・文構造ボックスを新規追加 ============================================================ */ /* Google Fonts は各 HTML の で読み込み（@import より高速） - Comic Neue: 本文の英語（小文字 a が single-story で手書きに近い） - Patrick Hand: 強調・タイトル（手書き感あり） - Noto Sans JP: 日本語本文 */ :root { --c-bg: #fbfaf6; --c-paper: #ffffff; --c-ink: #222; --c-sub: #555; --c-line: #d8d3c4; /* 共通アクセント（後で分野色で上書き） */ --c-accent: #2c6fbb; --c-accent-light: #e7f0fa; --c-accent-dark: #1f4f88; /* 6分野カラー */ --c-verbs: #2c6fbb; --c-verbs-light: #e7f0fa; --c-verbs-dark: #1f4f88; --c-tense: #9a4ec0; --c-tense-light: #f3e8ff; --c-tense-dark: #6b2d8a; --c-verbals: #2a7a3a; --c-verbals-light: #e7f5ea; --c-verbals-dark: #176a44; --c-compare: #d97706; --c-compare-light: #fdf3e2; --c-compare-dark: #a85a04; --c-vocab: #c0392b; --c-vocab-light: #fdecea; --c-vocab-dark: #922b21; --c-reading: #7a5230; --c-reading-light: #f3eadf; --c-reading-dark: #523620; --c-warn: #b94a48; --c-ok: #2a7a3a; --c-note: #e0bb1f; --font-jp: "Noto Sans JP", "Hiragino Maru Gothic ProN", "Yu Gothic UI", "Meiryo", sans-serif; --font-en: "Comic Neue", "Patrick Hand", "Hiragino Maru Gothic ProN", cursive, sans-serif; --font-en-hand: "Patrick Hand", "Comic Neue", cursive; --font-en-print: "Georgia", "Times New Roman", serif; /* 印刷物・教科書らしさを出したい時用 */ } /* 分野ごとのアクセント切替 */ body.subject-verbs { --c-accent: var(--c-verbs); --c-accent-light: var(--c-verbs-light); --c-accent-dark: var(--c-verbs-dark); } body.subject-tense { --c-accent: var(--c-tense); --c-accent-light: var(--c-tense-light); --c-accent-dark: var(--c-tense-dark); } body.subject-verbals { --c-accent: var(--c-verbals); --c-accent-light: var(--c-verbals-light); --c-accent-dark: var(--c-verbals-dark); } body.subject-compare { --c-accent: var(--c-compare); --c-accent-light: var(--c-compare-light); --c-accent-dark: var(--c-compare-dark); } body.subject-vocab { --c-accent: var(--c-vocab); --c-accent-light: var(--c-vocab-light); --c-accent-dark: var(--c-vocab-dark); } body.subject-reading { --c-accent: var(--c-reading); --c-accent-light: var(--c-reading-light); --c-accent-dark: var(--c-reading-dark); } * { box-sizing: border-box; } body { margin: 0; background: var(--c-bg); color: var(--c-ink); font-family: var(--font-jp); line-height: 1.8; font-size: 16px; min-height: 100vh; min-height: 100dvh; /* iOS Safari URL バー対応 */ } .page { max-width: 900px; margin: 0 auto; padding: 32px 28px 100px; background: var(--c-paper); min-height: 100vh; min-height: 100dvh; box-shadow: 0 0 24px rgba(0,0,0,.05); } /* ---------- ナビ ---------- */ .top-nav { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--c-line); padding-bottom: 12px; margin-bottom: 24px; flex-wrap: wrap; gap: 8px; } .top-nav .home-link { color: var(--c-accent); text-decoration: none; font-weight: bold; } .top-nav .home-link:hover { text-decoration: underline; } .subject-badge { background: var(--c-accent); color: white; padding: 4px 14px; border-radius: 20px; font-size: 14px; font-weight: bold; } h1.book-title { font-size: 28px; margin: 0 0 8px; letter-spacing: 1px; } .book-sub { color: var(--c-sub); margin-top: 0; } /* ---------- 目次 ---------- */ .toc { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; margin: 24px 0 40px; } .toc li a { display: block; padding: 14px 18px; background: var(--c-accent-light); border-left: 4px solid var(--c-accent); color: var(--c-ink); text-decoration: none; border-radius: 4px; transition: background .15s; } .toc li a:hover { background: #f8d7d3; } .toc .unit-no { display: inline-block; font-weight: bold; color: var(--c-accent); margin-right: 8px; font-family: var(--font-en); min-width: 60px; } /* 6分野カード */ .subject-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 24px 0; } .subject-card { display: block; padding: 24px 20px; border-radius: 8px; text-decoration: none; color: var(--c-ink); border-left: 6px solid; transition: transform .15s; } .subject-card:hover { transform: translateY(-2px); } .subject-card .name { font-size: 22px; font-weight: bold; margin-bottom: 6px; } .subject-card .sub { font-size: 13px; color: var(--c-sub); } .subject-card.verbs { background: var(--c-verbs-light); border-color: var(--c-verbs); } .subject-card.verbs .name { color: var(--c-verbs); } .subject-card.tense { background: var(--c-tense-light); border-color: var(--c-tense); } .subject-card.tense .name { color: var(--c-tense); } .subject-card.verbals { background: var(--c-verbals-light); border-color: var(--c-verbals); } .subject-card.verbals .name { color: var(--c-verbals); } .subject-card.compare { background: var(--c-compare-light); border-color: var(--c-compare); } .subject-card.compare .name { color: var(--c-compare); } .subject-card.vocab { background: var(--c-vocab-light); border-color: var(--c-vocab); } .subject-card.vocab .name { color: var(--c-vocab); } .subject-card.reading { background: var(--c-reading-light); border-color: var(--c-reading); } .subject-card.reading .name { color: var(--c-reading); } /* ---------- 単元本体 ---------- */ .unit { border-top: 3px solid var(--c-accent); padding-top: 24px; margin-top: 60px; /* 長いページの描画軽量化（iPad対策） */ content-visibility: auto; contain-intrinsic-size: auto 800px; } .unit h2 { font-size: 26px; margin: 0 0 8px; color: var(--c-accent); } .unit .goal { background: #fff8df; border-left: 4px solid var(--c-note); padding: 12px 16px; margin: 16px 0 28px; border-radius: 4px; font-size: 15px; } .unit .goal::before { content: "🎯 この単元のゴール: "; font-weight: bold; } .unit h3 { font-size: 21px; margin: 40px 0 14px; padding: 8px 0 4px; border-bottom: 2px solid var(--c-accent); } .unit h4 { font-size: 17px; margin: 24px 0 10px; color: var(--c-accent-dark); } /* ---------- 解説枠 ---------- */ .explain { background: #fafafa; padding: 16px 20px; border-radius: 8px; margin: 12px 0; border: 1px solid var(--c-line); } .explain p { margin: 8px 0; } .lead { font-size: 16px; color: var(--c-sub); margin: 8px 0 16px; } .note { font-size: 14px; color: var(--c-sub); margin-top: 8px; } .note::before { content: "📝 "; } /* ---------- 図カード（SVG主役） ---------- */ .figure { background: white; border: 1px solid var(--c-line); border-radius: 8px; padding: 16px; margin: 20px 0; text-align: center; content-visibility: auto; contain-intrinsic-size: auto 400px; } .figure svg { display: block; margin: 0 auto; max-width: 100%; height: auto; } .figure .caption { margin-top: 8px; font-size: 14px; color: var(--c-sub); text-align: center; } .figure .fig-no { display: inline-block; background: var(--c-accent); color: white; padding: 2px 10px; border-radius: 12px; font-size: 12px; font-weight: bold; font-family: var(--font-en); margin-bottom: 8px; } .figure.wide { background: var(--c-accent-light); border-color: var(--c-accent); } /* ---------- コラム（5種） ---------- */ .column { background: #fff8df; border-left: 6px solid var(--c-note); padding: 16px 20px; margin: 24px 0; border-radius: 4px 8px 8px 4px; } .column h4 { margin: 0 0 8px; color: #876200; font-size: 17px; } .column h4::before { content: "💡 "; } .column p { margin: 6px 0; } .column.aha { background: #f3e8ff; border-left-color: #9a4ec0; } .column.aha h4 { color: #6b2d8a; } .column.aha h4::before { content: "✨ "; } .column.science { background: #e7f5ea; border-left-color: #2a7a3a; } .column.science h4 { color: #176a44; } .column.science h4::before { content: "🔬 "; } .column.warn { background: #fff0f0; border-left-color: #b94a48; } .column.warn h4 { color: #8a2a28; } .column.warn h4::before { content: "⚠️ "; } /* 英語版：音で覚える（新規） */ .column.phonics { background: #e7f5fa; border-left-color: #2e86c1; } .column.phonics h4 { color: #1b4f72; } .column.phonics h4::before { content: "🎙 "; } /* ---------- 文構造ボックス（英語固有）---------- */ .sv-box { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: stretch; background: #fafafa; border: 1px solid var(--c-line); border-radius: 8px; padding: 14px; margin: 16px 0; } .sv-chunk { padding: 10px 14px; border-radius: 6px; border: 2px solid; background: white; min-width: 70px; text-align: center; font-family: var(--font-en); font-size: 17px; font-weight: bold; } .sv-chunk .role { display: block; font-family: var(--font-jp); font-size: 11px; font-weight: normal; color: #666; margin-bottom: 2px; } .sv-chunk.s { border-color: #2c6fbb; color: #1f4f88; background: #e7f0fa; } .sv-chunk.v { border-color: #c0392b; color: #922b21; background: #fdecea; } .sv-chunk.o { border-color: #2a7a3a; color: #176a44; background: #e7f5ea; } .sv-chunk.c { border-color: #d97706; color: #a85a04; background: #fdf3e2; } .sv-chunk.m { border-color: #888; color: #444; background: #f3f3f3; } .sv-box .arrow { align-self: center; font-size: 18px; color: #888; } /* ---------- 用語ボックス ---------- */ .term-box { border: 1px solid var(--c-line); border-radius: 6px; padding: 14px 18px; margin: 16px 0; background: #fff; } .term-box h4 { margin-top: 0; color: var(--c-accent); } .term-list { list-style: none; padding: 0; margin: 0; } .term-list li { display: flex; gap: 12px; padding: 6px 0; border-bottom: 1px dotted var(--c-line); } .term-list li:last-child { border-bottom: none; } .term-list .term { font-weight: bold; color: var(--c-accent); min-width: 120px; font-family: var(--font-en); } .term-list .ruby { font-size: 11px; color: var(--c-sub); display: block; font-family: var(--font-jp); } .term-list .desc { flex: 1; font-size: 14px; } /* ---------- カナ発音ルビ（オプション） ---------- */ ruby { ruby-position: under; } ruby rt { font-size: 11px; color: #888; font-family: var(--font-jp); } /* カナOFF時：rubyの「メインのカナ」だけを隠し、rt（小さなアクセント表記）は残す font-size:0 でベーステキストを潰し、rt は明示的に 11px に戻す */ body.kana-off ruby { font-size: 0; letter-spacing: 0; } body.kana-off ruby rt { font-size: 11px; letter-spacing: normal; } /* ---------- 発音・アクセント・スペル習得（英語固有）---------- */ /* 単語の音節分解表示 "pho·tog·ra·phy" */ .word-break { font-family: var(--font-en); font-weight: bold; letter-spacing: 0.5px; } .word-break .syl { display: inline-block; padding: 0 1px; color: #888; /* 弱音節のデフォルト色 */ } .word-break .syl.stress { color: var(--c-accent); font-size: 1.15em; text-shadow: 0 0 1px rgba(0,0,0,.1); } .word-break .sep { color: #ccc; margin: 0 1px; font-weight: normal; } /* 発音記号 (IPA) */ .ipa { font-family: "Doulos SIL", "Charis SIL", "Lucida Sans Unicode", "Arial Unicode MS", serif; color: #555; font-size: 0.95em; background: #f5f5f5; padding: 1px 6px; border-radius: 3px; margin: 0 4px; } .ipa::before { content: "/"; color: #aaa; } .ipa::after { content: "/"; color: #aaa; } body.ipa-off .ipa { display: none; } /* 単語見出し行（綴り＋音節分解＋IPA＋カナ＋意味＋🔊） */ .word-row { display: grid; grid-template-columns: minmax(120px, 1fr) auto auto auto; gap: 10px; align-items: center; background: white; padding: 10px 14px; margin: 6px 0; border-radius: 6px; border-left: 3px solid var(--c-accent-light); } .word-row .word { font-family: var(--font-en); font-size: 18px; font-weight: bold; } .word-row .meaning { font-size: 13px; color: var(--c-sub); } .word-row .speak { justify-self: end; } /* フォニックスカード（音→綴り対応） */ .phonics-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin: 16px 0; } .phonics-card { background: #e7f5fa; border: 2px solid #2e86c1; border-radius: 8px; padding: 12px; text-align: center; } .phonics-card .sound { font-family: "Doulos SIL", "Charis SIL", serif; font-size: 24px; font-weight: bold; color: #1b4f72; margin-bottom: 6px; } .phonics-card .sound::before { content: "/"; color: #888; } .phonics-card .sound::after { content: "/"; color: #888; } .phonics-card .spelling { display: inline-block; background: white; padding: 2px 10px; border-radius: 12px; font-family: var(--font-en); font-weight: bold; color: #c0392b; margin: 4px 0; } .phonics-card .examples { font-family: var(--font-en); font-size: 14px; color: #333; margin-top: 6px; line-height: 1.6; } .phonics-card .examples b { color: #c0392b; } /* 該当文字をハイライト */ /* スペル分解表示（接頭辞・語根・接尾辞を色分け） */ .spell-decomp { display: inline-flex; align-items: baseline; gap: 2px; font-family: var(--font-en); font-size: 18px; font-weight: bold; } .spell-decomp .prefix { color: #9a4ec0; } .spell-decomp .root { color: #2c6fbb; } .spell-decomp .suffix { color: #d97706; } .spell-decomp .plus { color: #aaa; font-weight: normal; margin: 0 2px; } /* 「綴りのコツ」コラム（新規色） */ .column.spelling { background: #eaf6fb; border-left-color: #2e86c1; } .column.spelling h4 { color: #1b4f72; } .column.spelling h4::before { content: "✍️ "; } /* 英文 inline 表示（手書きに近いフォント）---------- */ .en { font-family: "Comic Neue", "Patrick Hand", cursive; font-weight: 400; } /* ---------- 例文行（音声付き）---------- */ .ex-line { display: flex; align-items: flex-start; gap: 8px; padding: 6px 10px; margin: 4px 0; background: #fafafa; border-radius: 4px; border-left: 3px solid var(--c-accent-light); } .ex-line .en { flex: 1; font-family: var(--font-en); font-size: 16px; color: var(--c-ink); } .ex-line .ja { flex: 1; font-size: 14px; color: var(--c-sub); } .ex-line .speak { flex-shrink: 0; } /* 音声ボタン（Web Speech API） */ .speak { background: var(--c-accent); color: white; border: none; min-width: 32px; height: 28px; border-radius: 4px; cursor: pointer; font-size: 14px; padding: 0 8px; line-height: 1; white-space: nowrap; transition: transform .12s, background .12s; } .speak:hover, .speak:active { background: var(--c-accent-dark); transform: scale(1.06); } .speak.playing { background: var(--c-warn); } /* 音声設定パネル（右下常駐） */ .voice-panel { position: fixed; bottom: 144px; right: 20px; width: 220px; background: white; border: 2px solid var(--c-accent); border-radius: 10px; padding: 12px 14px; box-shadow: 0 6px 20px rgba(0,0,0,.18); z-index: 1000; display: none; font-size: 13px; } .voice-panel.show { display: block; } .voice-panel h4 { margin: 0 0 8px; color: var(--c-accent); font-size: 14px; } .voice-panel label { display: block; margin: 6px 0 2px; color: var(--c-sub); font-size: 12px; } .voice-panel select, .voice-panel input[type="range"] { width: 100%; padding: 4px; border: 1px solid var(--c-line); border-radius: 4px; font-size: 13px; box-sizing: border-box; } .voice-panel .close-btn { position: absolute; top: 4px; right: 8px; background: none; border: none; font-size: 16px; cursor: pointer; color: #999; } .voice-toggle { position: fixed; bottom: 144px; right: 20px; width: 48px; height: 48px; background: var(--c-accent); color: white; border: none; border-radius: 50%; font-size: 22px; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,.2); z-index: 999; } .voice-toggle:hover { transform: scale(1.05); } /* ---------- 練習問題（紙ベース） ---------- */ .drill { background: #fff; border: 1px solid var(--c-line); border-radius: 8px; padding: 18px 22px; margin: 20px 0; content-visibility: auto; contain-intrinsic-size: auto 600px; } .drill > h4 { margin-top: 0; color: var(--c-accent); border-bottom: 1px solid var(--c-accent-light); padding-bottom: 6px; } .drill ol { padding-left: 24px; } .drill li { margin: 16px 0; line-height: 2.0; } .drill .qid { display: inline-block; background: var(--c-accent-light); color: var(--c-accent); padding: 1px 8px; border-radius: 4px; font-family: var(--font-en); font-size: 12px; font-weight: bold; margin-right: 4px; cursor: pointer; } .drill .qid:hover { background: var(--c-accent); color: white; } /* インライン ○×❓ ボタン */ .qid-actions { display: inline-flex; gap: 3px; margin-right: 8px; vertical-align: middle; } .qid-actions .qm { width: 26px; height: 22px; border: 1.5px solid; border-radius: 4px; background: white; cursor: pointer; font-size: 12px; padding: 0; line-height: 1; transition: all .12s; } .qid-actions .qm-o { border-color: var(--c-ok); } .qid-actions .qm-o:hover, .qid-actions .qm-o:active { background: var(--c-ok); color: white; } .qid-actions .qm-x { border-color: var(--c-warn); } .qid-actions .qm-x:hover, .qid-actions .qm-x:active { background: #fff0f0; } .qid-actions .qm-q { border-color: #888; } .qid-actions .qm-q:hover, .qid-actions .qm-q:active { background: #f5f5f5; } /* 選択中の状態（クリックして記録した側のボタン） */ .qid-actions .qm.selected { box-shadow: 0 0 0 2px rgba(0,0,0,.08); transform: scale(1.08); } .qid-actions .qm-o.selected { background: var(--c-ok); color: white; } .qid-actions .qm-x.selected { background: var(--c-warn); color: white; } .qid-actions .qm-q.selected { background: #888; color: white; } /* win-row / micro-unit の記録ハイライト */ .win-row.rec-o { background: #c8e6c9 !important; border-left: 4px solid var(--c-ok); padding-left: 14px; } .win-row.rec-x { background: #ffcdd2 !important; border-left: 4px solid var(--c-warn); padding-left: 14px; } .win-row.rec-q { background: #e0e0e0 !important; border-left: 4px solid #888; padding-left: 14px; } .micro-unit.rec-o { border-color: var(--c-ok); background: #f5fbf6; } .micro-unit.rec-x { border-color: var(--c-warn); background: #fdf5f5; } .micro-unit.rec-q { border-color: #888; background: #fafafa; } /* トーストのアニメーション */ @keyframes qidToast { 0% { opacity: 0; transform: translateY(-4px); } 10% { opacity: 1; transform: translateY(0); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-2px); } } /* 記録済み問題行のハイライト */ .drill li.rec-o { background: linear-gradient(to right, #e7f5ea 0%, #e7f5ea 4px, transparent 4px); padding-left: 8px; margin-left: -8px; border-radius: 3px; } .drill li.rec-x { background: linear-gradient(to right, #fff0f0 0%, #fff0f0 4px, transparent 4px); padding-left: 8px; margin-left: -8px; border-radius: 3px; } .drill li.rec-q { background: linear-gradient(to right, #f5f5f5 0%, #f5f5f5 4px, transparent 4px); padding-left: 8px; margin-left: -8px; border-radius: 3px; } /* 戻りリンク */ .return-link { display: inline-block; margin: 6px 0 0; padding: 4px 12px; background: #f3e8ff; border-left: 3px solid #9a4ec0; border-radius: 0 4px 4px 0; color: #6b2d8a; text-decoration: none; font-size: 12px; font-weight: bold; } .return-link:hover, .return-link:active { background: #9a4ec0; color: white; } .return-link::before { content: "💡 "; } /* 英検3級バッジ（Unit h2 に自動挿入） */ .eiken-tag { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 11px; font-weight: bold; margin-left: 10px; vertical-align: middle; font-family: var(--font-jp); } .eiken-tag::before { content: "🎯 "; } .eiken-tag.essential { background: linear-gradient(135deg, #c0392b, #922b21); color: white; box-shadow: 0 2px 4px rgba(192,57,43,.25); } .eiken-tag.recommended { background: linear-gradient(135deg, #d97706, #a85a04); color: white; box-shadow: 0 2px 4px rgba(217,119,6,.25); } .eiken-tag.advanced { background: linear-gradient(135deg, #6b6b6b, #4d4d4d); color: white; } /* 入試頻出マーカー */ .exam-hot { display: inline-block; background: linear-gradient(135deg, #ffd54f, #ff8800); color: white; padding: 1px 8px; border-radius: 10px; font-size: 11px; font-weight: bold; margin-right: 6px; box-shadow: 0 1px 3px rgba(0,0,0,.15); } .exam-hot::before { content: "⭐ "; } /* 再挑戦リスト */ .retry-group { background: white; border: 1px solid var(--c-line); border-radius: 8px; padding: 12px 16px; margin: 12px 0; } .retry-group h4 { margin: 0 0 10px; color: var(--c-warn); font-size: 14px; border-bottom: 1px solid #f8d7d3; padding-bottom: 6px; } .retry-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; } .retry-list li { border-radius: 4px; } .retry-list li.retry-stuck { background: #fff0f0; border-left: 3px solid var(--c-warn); } .retry-list li.retry-trying { background: #fff8df; border-left: 3px solid var(--c-note); } .retry-list li a { display: flex; align-items: center; gap: 8px; padding: 6px 10px; text-decoration: none; color: var(--c-ink); font-size: 13px; } .retry-list li a:hover { background: rgba(0,0,0,.04); } .retry-list .retry-qid { font-family: var(--font-en); font-weight: bold; color: var(--c-warn); } .retry-list .retry-mark { font-size: 14px; } .retry-list .retry-state { margin-left: auto; font-size: 11px; color: var(--c-sub); } /* 書き込み欄 */ .write-line { display: inline-block; border-bottom: 1.5px solid #333; min-width: 80px; height: 1.3em; vertical-align: bottom; margin: 0 4px; } .write-line.wide { display: block; width: 100%; margin: 6px 0; min-width: auto; } .write-line.tall { height: 2.6em; } .choice { display: inline-block; margin: 0 14px 0 0; } .choice::before { content: "（ ） "; } .q-show { background: #888; color: white; border: none; padding: 4px 14px; border-radius: 4px; cursor: pointer; font-size: 13px; margin-left: 4px; } .q-show:hover, .q-show:active { background: #555; } .answer-row { display: none; background: #f0f8f0; padding: 8px 12px; margin-top: 8px; border-left: 3px solid var(--c-ok); font-size: 14px; border-radius: 0 4px 4px 0; } .answer-row.show { display: block; } .answer-row strong { color: var(--c-ok); } .answer-row .literal { color: var(--c-sub); font-size: 13px; display: block; margin-top: 4px; } .answer-row .literal::before { content: "直訳: "; font-weight: bold; color: var(--c-sub); } /* 段階的解答（英作文3ステップ） */ .solution-steps { margin: 8px 0; padding-left: 0; list-style: none; } .solution-steps li { background: white; border-left: 3px solid var(--c-accent); padding: 6px 10px; margin: 4px 0; font-size: 13px; } .solution-steps li::before { content: "Step " counter(step) " : "; counter-increment: step; font-weight: bold; color: var(--c-accent); } .solution-steps { counter-reset: step; } /* ---------- ○×記録ウィジェット ---------- */ .record-toggle { position: fixed; bottom: 80px; right: 20px; width: 56px; height: 56px; background: var(--c-accent); color: white; border: none; border-radius: 50%; font-size: 24px; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,.25); z-index: 999; } .record-toggle:hover { transform: scale(1.05); } .record-panel { position: fixed; bottom: 80px; right: 20px; width: 320px; background: white; border: 2px solid var(--c-accent); border-radius: 10px; padding: 16px; box-shadow: 0 6px 20px rgba(0,0,0,.18); z-index: 1000; display: none; } .record-panel.show { display: block; } .record-panel h4 { margin: 0 0 10px; color: var(--c-accent); font-size: 15px; } .record-panel .close-btn { position: absolute; top: 8px; right: 10px; background: none; border: none; font-size: 18px; cursor: pointer; color: #999; } .record-panel .qid-input { width: 100%; padding: 8px 10px; border: 1px solid var(--c-line); border-radius: 4px; font-size: 14px; font-family: var(--font-en); margin-bottom: 10px; box-sizing: border-box; } .record-panel .qid-hint { font-size: 11px; color: var(--c-sub); margin: -6px 0 8px; } .record-panel .result-buttons { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin-bottom: 12px; } .record-panel .result-buttons button { padding: 10px; border: 2px solid; border-radius: 6px; background: white; cursor: pointer; font-size: 14px; font-weight: bold; } .record-panel .btn-correct { border-color: var(--c-ok); color: var(--c-ok); } .record-panel .btn-correct:hover { background: #e7f5ea; } .record-panel .btn-wrong { border-color: var(--c-warn); color: var(--c-warn); } .record-panel .btn-wrong:hover { background: #fff0f0; } .record-panel .btn-unknown { border-color: #888; color: #555; } .record-panel .btn-unknown:hover { background: #f5f5f5; } .record-panel .recent { border-top: 1px solid var(--c-line); padding-top: 8px; margin-top: 4px; } .record-panel .recent h5 { margin: 0 0 6px; font-size: 12px; color: var(--c-sub); } .record-panel .recent-list { list-style: none; padding: 0; margin: 0; max-height: 140px; overflow-y: auto; } .record-panel .recent-list li { display: flex; justify-content: space-between; padding: 3px 0; font-size: 12px; border-bottom: 1px dotted #eee; } .record-panel .recent-list .id { font-family: var(--font-en); color: var(--c-sub); } .record-panel .recent-list .mark { font-weight: bold; } .record-panel .recent-list .mark.o { color: var(--c-ok); } .record-panel .recent-list .mark.x { color: var(--c-warn); } .record-panel .recent-list .mark.q { color: #888; } .record-panel .toast { font-size: 12px; color: var(--c-ok); text-align: center; height: 16px; margin-bottom: 4px; } .record-panel .panel-actions { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; } .record-panel .panel-actions a { color: var(--c-accent); text-decoration: none; } .record-panel .panel-actions a:hover { text-decoration: underline; } /* 単元末の集計 */ .unit-summary { background: var(--c-accent-light); border-radius: 8px; padding: 16px 20px; margin: 30px 0 10px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; } .unit-summary .label { font-weight: bold; color: var(--c-accent); } .unit-summary .stat { font-family: var(--font-en); font-size: 17px; } .unit-summary .stat .num { font-size: 24px; font-weight: bold; color: var(--c-accent); } .unit-summary .retry-link { background: var(--c-accent); color: white; text-decoration: none; padding: 6px 14px; border-radius: 4px; font-size: 13px; } .unit-summary .retry-link:hover { background: var(--c-accent-dark); } /* 単元末の励まし */ .encourage { background: #f3e8ff; border-left: 4px solid #9a4ec0; padding: 12px 16px; border-radius: 0 6px 6px 0; margin: 20px 0; font-size: 14px; } .encourage::before { content: "🌱 "; font-size: 16px; } /* ---------- 苦手マップ ---------- */ .map-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; margin: 16px 0; } .map-cell { border: 1px solid var(--c-line); border-radius: 4px; padding: 8px 10px; background: #fafafa; text-align: center; font-size: 12px; } .map-cell.state-untouched { background: #f0f0f0; color: #999; } .map-cell.state-trying { background: #fff8df; border-color: #e0bb1f; } .map-cell.state-once-ok { background: #e7f5ea; border-color: var(--c-ok); } .map-cell.state-mastered { background: var(--c-ok); color: white; border-color: var(--c-ok); } .map-cell.state-stuck { background: #fff0f0; border-color: var(--c-warn); } .map-cell .qid-label { font-family: var(--font-en); font-weight: bold; display: block; font-size: 11px; } .map-cell .latest { font-size: 18px; margin-top: 2px; } .map-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; margin: 16px 0; } .map-legend span { display: inline-flex; align-items: center; gap: 4px; } .map-legend .dot { display: inline-block; width: 16px; height: 16px; border-radius: 3px; border: 1px solid #ccc; } /* エクスポートリマインダーバナー（ITP対策） */ .export-banner { background: #fff8df; border: 2px solid var(--c-note); border-radius: 8px; padding: 12px 16px; margin: 16px 0; font-size: 14px; } .export-banner::before { content: "💾 "; font-size: 18px; } .export-banner a { color: var(--c-accent); font-weight: bold; margin-left: 8px; } /* ---------- 印刷モード切替パネル ---------- */ .print-panel-toggle { position: fixed; bottom: 20px; right: 20px; width: 48px; height: 48px; background: #666; color: white; border: none; border-radius: 50%; font-size: 22px; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,.2); z-index: 999; } .print-panel { position: fixed; bottom: 20px; right: 20px; background: white; border: 2px solid var(--c-accent); border-radius: 8px; padding: 14px 18px; box-shadow: 0 4px 12px rgba(0,0,0,.15); z-index: 1000; font-size: 13px; display: none; } .print-panel.show { display: block; } .print-panel h4 { margin: 0 0 8px; color: var(--c-accent); font-size: 14px; } .print-panel label { display: block; margin: 4px 0; cursor: pointer; } .print-panel input[type="radio"] { margin-right: 6px; } .print-panel .print-btn { display: block; width: 100%; margin-top: 10px; padding: 8px; background: var(--c-accent); color: white; border: none; border-radius: 4px; cursor: pointer; } .print-panel .close-btn { position: absolute; top: 4px; right: 8px; background: none; border: none; font-size: 16px; cursor: pointer; color: #999; } /* 印刷モード：問題冊子 */ body.mode-questions .answer-row, body.mode-questions .q-show, body.mode-questions .speak { display: none !important; } body.mode-questions .qid-actions { display: none !important; } /* 印刷モード：解答編 */ body.mode-answer-key .hero, body.mode-answer-key .lead, body.mode-answer-key .explain, body.mode-answer-key .figure, body.mode-answer-key .column, body.mode-answer-key .term-box, body.mode-answer-key .toc, body.mode-answer-key .controls, body.mode-answer-key .unit-summary, body.mode-answer-key .sv-box, body.mode-answer-key .ex-line, body.mode-answer-key .unit > .goal, body.mode-answer-key .unit > p, body.mode-answer-key .unit > h3, body.mode-answer-key .unit > h4 { display: none !important; } body.mode-answer-key .drill .write-line, body.mode-answer-key .drill .q-show, body.mode-answer-key .drill .choice, body.mode-answer-key .drill .speak, body.mode-answer-key .qid-actions { display: none !important; } body.mode-answer-key .drill .answer-row { display: inline-block !important; background: transparent !important; border: none !important; border-left: 2px solid var(--c-ok); padding: 0 8px !important; margin: 0 0 0 8px !important; font-weight: bold; color: var(--c-ok); } body.mode-answer-key .book-title::after { content: " — 解答編"; color: var(--c-warn); font-size: 0.7em; } /* ---------- @media print ---------- */ @media print { @page { size: A4; margin: 16mm 14mm; } body { background: white; font-size: 11pt; } .page { box-shadow: none; max-width: none; padding: 0; } .top-nav, .q-show, .speak, .voice-toggle, .voice-panel, .print-hide, .print-panel, .print-panel-toggle, .record-toggle, .record-panel { display: none !important; } .unit { page-break-before: always; } .unit:first-of-type { page-break-before: avoid; } h2, h3, h4 { page-break-after: avoid; } .figure, .drill li, .column, .sv-box { page-break-inside: avoid; } a { color: black; text-decoration: none; } .write-line { border-bottom: 1px solid black; } body:not(.mode-answer-key) .answer-row { display: none !important; } .drill li.rec-o, .drill li.rec-x, .drill li.rec-q { background: none !important; padding-left: 0 !important; margin-left: 0 !important; } } /* ---------- ヒーロー（intro用） ---------- */ .hero { background: linear-gradient(135deg, var(--c-accent) 0%, var(--c-accent-dark) 100%); color: white; padding: 32px 28px; border-radius: 8px; margin-bottom: 32px; } .hero h1 { margin: 0 0 8px; font-size: 28px; } .hero p { margin: 4px 0; opacity: .95; } .big-section { margin: 56px 0; padding-top: 24px; border-top: 3px double var(--c-accent); } .big-section > h2 { font-size: 26px; color: var(--c-accent); margin: 0 0 8px; } /* 大きな表 */ .big-table { width: 100%; border-collapse: collapse; margin: 16px 0; } .big-table th, .big-table td { border: 1px solid var(--c-line); padding: 8px 12px; vertical-align: top; font-size: 14px; } .big-table th { background: var(--c-accent-light); color: var(--c-accent); text-align: left; } /* 並列カード */ .compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 16px 0; } .compare-card { background: white; border: 2px solid var(--c-accent-light); border-radius: 8px; padding: 14px 18px; } .compare-card h4 { margin-top: 0; color: var(--c-accent); } .compare-card.alt { border-color: #ffdcc8; } .compare-card.alt h4 { color: #c46a2e; } /* ---------- レスポンシブ ---------- */ @media (max-width: 600px) { .page { padding: 20px 16px 100px; } .compare-grid { grid-template-columns: 1fr; } .record-panel { width: calc(100vw - 40px); right: 20px; } .voice-panel { width: calc(100vw - 40px); right: 20px; } .ex-line { flex-direction: column; gap: 4px; } .sv-chunk { min-width: 60px; font-size: 15px; padding: 8px 10px; } } /* ---------- アルファベット 1文字カード（タップで音）---------- */ .alpha-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin: 14px 0; } button.alpha-card { background: #e7f0fa; color: #1f4f88; border: 2px solid #2c6fbb; border-radius: 10px; padding: 12px 6px 8px; cursor: pointer; text-align: center; width: auto; min-width: 0; height: auto; font-size: inherit; white-space: normal; display: flex; flex-direction: column; align-items: center; gap: 3px; transition: transform .12s, background .12s, box-shadow .12s; font-family: var(--font-jp); } button.alpha-card:hover { background: #d0e0f5; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(44,111,187,.18); } button.alpha-card:active { transform: translateY(0); } button.alpha-card.playing { background: #fff8df !important; border-color: #e0bb1f !important; color: #876200 !important; animation: alphaCardPulse 0.6s ease; } @keyframes alphaCardPulse { 0% { box-shadow: 0 0 0 0 rgba(224,187,31,0.6); } 100% { box-shadow: 0 0 0 14px rgba(224,187,31,0); } } .alpha-card .letter { font-family: "Comic Neue", "Patrick Hand", cursive; font-size: 28px; font-weight: 700; line-height: 1.1; letter-spacing: 3px; } .alpha-card .name { font-family: var(--font-jp); font-size: 11px; color: #666; font-weight: normal; line-height: 1; } .alpha-card .ic { font-size: 12px; opacity: .7; line-height: 1; margin-top: 2px; } /* レスポンシブ（狭い画面では5列・4列） */ @media (max-width: 600px) { .alpha-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; } .alpha-card .letter { font-size: 22px; } } /* タッチデバイス */ @media (pointer: coarse) { button.alpha-card { padding: 16px 6px 10px; } .alpha-card .letter { font-size: 30px; } .alpha-card .name { font-size: 12px; } } /* ---------- 最初の体験（index.html 用）---------- */ /* ようこそヒーロー */ .welcome-hero { background: linear-gradient(135deg, #2c6fbb 0%, #9a4ec0 100%); color: white; padding: 40px 28px; border-radius: 12px; text-align: center; margin: 0 0 32px; } .welcome-hero h1 { margin: 0 0 8px; font-size: 30px; line-height: 1.4; } .welcome-hero .welcome-sub { font-size: 16px; opacity: 0.95; margin: 8px 0 24px; } /* 巨大🔊ボタン（初回体験用） */ .huge-speak { display: inline-flex; align-items: center; justify-content: center; gap: 14px; background: white; color: #2c6fbb; border: none; padding: 22px 38px; border-radius: 60px; font-size: 28px; font-weight: bold; font-family: var(--font-en); cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,.2); transition: transform .15s, box-shadow .15s; min-height: 80px; } .huge-speak:hover, .huge-speak:active { transform: translateY(-2px) scale(1.03); box-shadow: 0 8px 24px rgba(0,0,0,.28); } .huge-speak.playing { background: #fff8df; color: #876200; } .huge-speak .icon { font-size: 36px; } .welcome-hero .below-button { font-size: 14px; margin-top: 18px; opacity: 0.95; } /* マイクロ単元カード */ .micro-unit { background: white; border: 2px solid var(--c-line); border-radius: 12px; padding: 22px 24px; margin: 20px 0; position: relative; } .micro-unit .step-badge { display: inline-block; background: var(--c-accent); color: white; padding: 4px 14px; border-radius: 14px; font-size: 13px; font-weight: bold; margin-bottom: 10px; } .micro-unit h3 { margin: 6px 0 12px; font-size: 22px; color: var(--c-ink); border: none; padding: 0; } .micro-unit .micro-target { background: #fff8df; border-left: 4px solid var(--c-note); padding: 8px 14px; margin: 0 0 14px; font-size: 14px; border-radius: 0 4px 4px 0; } .micro-unit .micro-target::before { content: "🎯 できるようになること: "; font-weight: bold; } /* マイクロ単元の中の3ステップ */ .micro-steps { list-style: none; padding: 0; margin: 12px 0; counter-reset: micro; } .micro-steps > li { display: flex; align-items: flex-start; gap: 14px; padding: 12px; background: #fafafa; border-radius: 8px; margin: 6px 0; } .micro-steps > li::before { counter-increment: micro; content: counter(micro); flex-shrink: 0; width: 32px; height: 32px; background: var(--c-accent); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; font-family: var(--font-en); } .micro-steps .step-body { flex: 1; } .micro-steps .step-body .action { font-weight: bold; font-size: 15px; margin-bottom: 4px; } .micro-steps .step-body .detail { font-size: 13px; color: var(--c-sub); } .micro-steps .step-body .en { font-family: var(--font-en); font-size: 20px; color: #1f4f88; display: inline-block; margin-right: 8px; } /* マイクロ単元の達成バナー */ .win-row { display: flex; align-items: center; gap: 10px; margin: 14px 0 0; padding: 10px 14px; background: #e7f5ea; border-radius: 6px; font-size: 14px; } .win-row .qid { background: var(--c-accent-light); color: var(--c-accent); } /* 「ここまでできた！」サマリ */ .win-banner { background: linear-gradient(135deg, #e7f5ea 0%, #fff8df 100%); border: 2px solid var(--c-ok); border-radius: 12px; padding: 24px; margin: 32px 0; text-align: center; } .win-banner h2 { margin: 0 0 8px; color: var(--c-ok); font-size: 24px; border: none; padding: 0; } .win-banner .win-list { list-style: none; padding: 0; margin: 14px 0; display: inline-block; text-align: left; } .win-banner .win-list li { padding: 4px 0; font-size: 15px; } .win-banner .win-list li::before { content: "✅ "; margin-right: 6px; } .win-banner .pep { margin-top: 14px; font-size: 14px; color: var(--c-sub); } /* 次の選択肢カード */ .next-choice { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 20px 0; } .next-choice a { background: white; border: 2px solid var(--c-line); border-radius: 10px; padding: 18px 20px; text-decoration: none; color: var(--c-ink); transition: transform .15s, border-color .15s; } .next-choice a:hover { transform: translateY(-2px); border-color: var(--c-accent); } .next-choice a .nx-label { font-size: 12px; color: var(--c-sub); margin-bottom: 4px; } .next-choice a .nx-title { font-size: 17px; font-weight: bold; color: var(--c-accent); } .next-choice a .nx-sub { font-size: 13px; color: var(--c-sub); margin-top: 6px; } /* マイルストーン進捗（連続日数の代わり） */ .milestone { background: white; border: 1px solid var(--c-line); border-radius: 8px; padding: 14px 18px; margin: 14px 0; font-size: 13px; } .milestone .ms-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; } .milestone .ms-row .check { font-size: 16px; } .milestone .ms-row.done { color: var(--c-ok); font-weight: bold; } .milestone .ms-row.todo { color: #aaa; } /* ---------- タッチデバイス対応（iPad/スマホ） ---------- */ @media (pointer: coarse) { .qid-actions .qm { width: 44px; height: 40px; font-size: 16px; } .q-show { padding: 10px 20px; font-size: 15px; } .speak { min-width: 44px; height: 40px; font-size: 16px; padding: 0 12px; } .return-link { padding: 10px 16px; font-size: 14px; margin: 10px 0; } .record-toggle, .print-panel-toggle, .voice-toggle { width: 60px; height: 60px; } .toc li a { padding: 18px 20px; } .subject-card { padding: 28px 22px; } } /* ============================================================ .bridge — 整理セクション（真似→整理→体系の「整理」フェーズ） ユーザー設計：節目で一息ついて俯瞰する場所 - 学習 Unit（.unit）とは見た目が違う（紫系・落ち着き） - qid を持たない（学習ではなく俯瞰のため） - 各文法ページの Unit 間に挟まれる ============================================================ */ .bridge { background: linear-gradient(135deg, #f3e8ff 0%, #faf5ff 100%); border: 2px solid #9a4ec0; border-left-width: 6px; border-radius: 10px; padding: 22px 26px; margin: 36px 0; scroll-margin-top: 20px; box-shadow: 0 2px 10px rgba(154,78,192,0.08); } .bridge .bridge-tag { display: inline-block; background: #9a4ec0; color: white; font-size: 12px; padding: 4px 12px; border-radius: 12px; margin-bottom: 10px; font-weight: bold; letter-spacing: 0.5px; } .bridge h2 { margin: 0 0 12px; color: #6b2d8a; font-family: 'Patrick Hand', 'Noto Sans JP', cursive; font-size: 22px; border: none; padding: 0; } .bridge h3 { color: #6b2d8a; margin-top: 18px; margin-bottom: 8px; font-size: 16px; border-bottom: 1px dashed #9a4ec0; padding-bottom: 4px; } .bridge .bridge-lead { font-size: 14px; color: #4a4a4a; line-height: 1.8; margin: 6px 0 14px; } .bridge .bridge-lead strong { color: #6b2d8a; } .bridge ul, .bridge ol { padding-left: 22px; } .bridge li { margin: 4px 0; font-size: 14px; line-height: 1.7; } .bridge .bridge-table { width: 100%; border-collapse: collapse; background: white; margin: 10px 0; font-size: 13px; } .bridge .bridge-table th, .bridge .bridge-table td { border: 1px solid #d0b8e0; padding: 8px 12px; text-align: left; vertical-align: top; } .bridge .bridge-table th { background: #e8d4f5; color: #4a1d68; font-weight: bold; } .bridge .bridge-heart { background: white; border: 1px dashed #9a4ec0; border-radius: 6px; padding: 12px 16px; margin: 10px 0; font-size: 14px; } .bridge .bridge-heart h4 { margin: 0 0 6px; color: #6b2d8a; font-size: 13px; font-weight: bold; } .bridge .bridge-heart p { margin: 4px 0; line-height: 1.7; } .bridge .ja-vs-en { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0; font-size: 13px; } .bridge .ja-vs-en .ja, .bridge .ja-vs-en .en { background: white; padding: 8px 12px; border-radius: 6px; } .bridge .ja-vs-en .ja { border-left: 4px solid #d97706; } .bridge .ja-vs-en .en { border-left: 4px solid #2c6fbb; font-family: 'Comic Neue', cursive; } @media (max-width: 600px) { .bridge .ja-vs-en { grid-template-columns: 1fr; } } /* skilltree-grade の bridge step（紫系で他の Step と区別） */ .sg-step.bridge-step { background: linear-gradient(135deg, #f3e8ff 0%, #faf5ff 100%) !important; border-color: #9a4ec0 !important; border-left-width: 6px !important; } .sg-step.bridge-step .step-num { background: #9a4ec0 !important; font-size: 13px; } .sg-step.bridge-step .title { color: #6b2d8a; } /* ============================================================ .next-step-box — 学習動線：各セクション末尾の「次のステップ →」 ============================================================ */ .next-step-box { margin: 24px 0 4px; padding: 14px 16px; background: linear-gradient(135deg, #e7f5ea 0%, #f3fbf4 100%); border: 1px solid #2a7a3a; border-left: 5px solid #2a7a3a; border-radius: 12px; } .next-step-box .ns-head { font-weight: 700; color: #1f5e2c; font-size: 14px; margin-bottom: 8px; } .next-step-box .ns-link { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid #bfe0c6; border-radius: 10px; padding: 10px 14px; text-decoration: none; color: var(--c-ink); transition: transform .12s, box-shadow .12s; } .next-step-box .ns-link:hover { transform: translateX(4px); box-shadow: 0 2px 8px rgba(42, 122, 58, .18); } .next-step-box .ns-grade { flex: 0 0 auto; background: #2a7a3a; color: #fff; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 3px 10px; } .next-step-box .ns-title { flex: 1 1 auto; font-weight: 700; font-size: 15px; } .next-step-box .ns-arrow { flex: 0 0 auto; font-size: 20px; color: #2a7a3a; } .next-step-box .ns-foot { font-size: 12px; color: #557; margin-top: 8px; } .next-step-box .ns-foot a { color: #2a7a3a; }