.options-area display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem;

.next-btn:disabled background: #bba88a; cursor: not-allowed; transform: none;

// エスケープ処理 (XSS対策) function escapeHtml(str) return str.replace(/[&<>]/g, function(m) if (m === '&') return '&'; if (m === '<') return '<'; if (m === '>') return '>'; return m; ).replace(/[\uD800-\uDBFF][\uDC00-\uDFFF]/g, function(c) return c; );

<script> // ------------------- N3 問題データベース (日本語能力試験N3レベル) ------------------- // 各問題: 質問文, 選択肢配列, 正解インデックス(0から), 簡単な解説(任意) const QUESTION_SET = [ text: "この町に住んで ____、もう１０年になる。", options: ["から", "以来", "きり", "ところ"], correct: 0, // から explanation: "「〜てから」: ある動作の後、その状態が続いている。住んでから10年。" , text: "電車が遅れた ____、会議に間に合わなかった。", options: ["せいで", "おかげで", "ためで", "もので"], correct: 0, // せいで (悪い理由) explanation: "「せいで」: 悪い結果の原因。電車遅延で間に合わない、残念な結果。" , text: "彼は約束の時間に ____、待たせることが多い。", options: ["遅れがちで", "遅れっぱなしで", "遅れぎみで", "遅れつつ"], correct: 0, // 遅れがちで explanation: "「〜がち」: 何度も同じ傾向がある。遅れがち→よく遅れる傾向。" , text: "この問題は小学生にも ____ やさしいです。", options: ["わかるように", "わかるほど", "わかるわけ", "わかるばかり"], correct: 0, // わかるように explanation: "「〜ように」: 目的・基準を示す。小学生にもわかるように易しい。" , text: "もし彼女が来なかったら、一人で行く ____。", options: ["しかない", "はずがない", "にすぎない", "ほかない"], correct: 3, // ほかない explanation: "「〜ほかない」: 他に選択肢がなく〜するしかない。行くほかない。" , text: "彼は約束を忘れる ____、とても信頼できない。", options: ["なんて", "として", "からして", "どころか"], correct: 0, // なんて explanation: "「〜なんて」: 意外・軽蔑の気持ち。忘れるなんて信頼できない。" , text: "駅前に新しいスーパーができて、買い物が ____ なった。", options: ["便利に", "便利で", "便利さ", "便利"], correct: 0, // 便利に (なった) explanation: "「便利になる」: 形容動詞語幹＋になる。便利になった。" , text: "コンサートのチケットは売り切れて ____、諦めた。", options: ["しまって", "おいて", "みて", "あって"], correct: 0, // しまって explanation: "「〜てしまう」: 完了・残念な結果。売り切れてしまって残念。" , text: "あの人は毎日ジョギングを ____ 習慣がある。", options: ["続けている", "続ける", "続けた", "続けよう"], correct: 0, // 続けている explanation: "「〜ている習慣」: 習慣として継続している。続けている習慣。" , text: "来月、富士山に登ろう ____ 計画している。", options: ["と", "ように", "ために", "なら"], correct: 0, // と explanation: "「〜ようと思う／計画する」: 引用「と」を用いて内容を表す。登ろうと計画。" ];

// すべてのオプションボタンを再レンダリング (状態反映) renderQuestionWithFeedback(selectedIdx, correctIdx, explanationText, isCorrect);

.score-box span, .question-counter span color: #b13e3e; font-size: 1.3rem; margin-left: 6px; font-weight: 800;

/* feedback & next button */ .feedback-area text-align: center; margin-top: 0.5rem; margin-bottom: 1rem; font-size: 1.1rem; font-weight: 500; min-height: 70px;

const restartBtn = document.getElementById('restartButton'); if (restartBtn) restartBtn.addEventListener('click', () => initGame());