.custom-quiz .quiz-feedback {
    display: none; /* 初期状態は非表示 */
    color: red; /* 不正解は赤色 */
    /* 追加で必要なスタイルがあればここに記述 */
}
.custom-quiz .quiz-feedback.correct {
    color: green; /* 正解は緑色 */
}

.custom-quiz button.blank,
.custom-quiz .options-container button.quiz-option {
    padding: 10px 20px; /* ボタン内のパディングを設定 */
    margin: 5px; /* ボタン間のマージンを設定 */
    border: none; /* ボタンの縁を削除 */
    border-radius: 5px; /* 角の丸みを設定 */
    background-color: #f0f8ff; /* ボタンの背景色をパステルカラーに設定 */
    cursor: pointer; /* カーソルを指に設定 */
    transition: background-color 0.3s ease; /* 背景色変化のアニメーションを設定 */
    color: #333; /* ボタン内テキスト色を設定 */
    font-weight: normal; /* テキストの太さをノーマルに設定 */
}

.custom-quiz button.blank:hover,
.custom-quiz .options-container button.quiz-option:hover {
    background-color: #e6e6fa; /* ホバー時の背景色を少し濃いパステルカラーに設定 */
}

.custom-quiz button.blank.filled {
    background-color: #faebd7; /* 埋められた状態の背景色を設定 */
    color: #333; /* 埋められた状態のテキスト色を設定 */
}

.custom-quiz .options-container {
    text-align: center; /* 選択肢を中央揃えに設定 */
}

.custom-quiz .quiz-feedback {
    font-weight: bold; /* フィードバックのテキストを太字に設定 */
    text-align: center; /* フィードバックを中央揃えに設定 */
    margin-top: 20px; /* フィードバックの上のマージンを設定 */
    color: #333; /* フィードバックのテキスト色を設定 */
}

/* style.css */
.quiz-explanation-text {
    color: red; /* 解説文の色を赤に設定 */
}