.quiz-page {
    max-width: 900px;
    margin: 0 auto;
    padding: 80px 20px 100px;
}

.quiz-hero {
    text-align: center;
    padding: 40px 0 70px;
}

.quiz-hero .section-label {
    margin-bottom: 16px;
    font-size: 0.85rem;
    letter-spacing: 0.2em;
}

.quiz-hero h1 {
    margin: 0;
    font-size: clamp(2rem, 6vw, 4rem);
    line-height: 1.2;
    letter-spacing: 0.04em;
}

.quiz-hero p:last-child {
    margin-top: 30px;
    line-height: 1.9;
}

.quiz-container {
    max-width: 700px;
    margin: 0 auto;
}






.quiz-question {
    text-align: center;
}

.quiz-progress {
    margin-bottom: 30px;
    font-size: 0.9rem;
    letter-spacing: 0.15em;
}

.quiz-question h2 {
    margin-bottom: 40px;
    font-size: 1.4rem;
    line-height: 1.8;
}

.quiz-choices {
    display: grid;
    gap: 14px;
}

.quiz-choice {
    width: 100%;
    padding: 18px 20px;
    border: 1px solid currentColor;
    border-radius: 8px;
    background: transparent;
    font: inherit;
    cursor: pointer;
    transition: 0.2s;
}

.quiz-choice:hover {
    opacity: 0.65;
}










.quiz-choice.correct {
    background: #dff5e5;
    border-color: #4caf50;
}

.quiz-choice.incorrect {
    background: #fde2e2;
    border-color: #e05252;
}

.quiz-choice:disabled {
    cursor: default;
}






.quiz-result {
    text-align: center;
    padding: 60px 20px;
}

.quiz-result-label {
    margin-bottom: 20px;
    font-size: 0.9rem;
    letter-spacing: 0.2em;
}

.quiz-result h2 {
    margin: 0 0 30px;
    font-size: clamp(3rem, 10vw, 5rem);
    line-height: 1;
}

.quiz-result p:last-child {
    line-height: 1.9;
}





/* 10 / 10 専用 */

.quiz-perfect {
    text-align: center;
    padding: 60px 20px;
}

.quiz-perfect-text {
    margin-top: 40px;
    line-height: 2;
    font-size: 1.05rem;
}






.quiz-secret-intro {
    margin-top: 30px;
    line-height: 1.9;
}

.quiz-start-button {
    margin-top: 30px;
    padding: 16px 32px;
    border: 1px solid currentColor;
    border-radius: 999px;
    background: transparent;
    font: inherit;
    cursor: pointer;
    transition: 0.2s;
}

.quiz-start-button:hover {
    opacity: 0.65;
}






.quiz-live-link {
    display: inline-block;
    margin-top: 10px;
    padding: 14px 32px;
    border: 1px solid currentColor;
    border-radius: 999px;
    text-decoration: none;
    color: inherit;
    transition: 0.2s;
}

.quiz-live-link:hover {
    opacity: 0.65;
    transform: translateY(-2px);
}