body {
    margin: 0;
    padding: 0;

    font-family:
        "Hiragino Kaku Gothic ProN",
        "Yu Gothic",
        sans-serif;

    background:
        linear-gradient(
            rgba(0, 0, 0, 0.35),
            rgba(0, 0, 0, 0.35)
        ),
        url("background.jpg");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;

    color: #2b2b2b;
}


#game {

    max-width: 480px;
    margin: 0 auto;
    min-height: 100vh;

    background:
    rgba(255,255,255,0.65);

}


.screen {

    padding: 30px 20px;
    text-align: center;

}


.hidden {

    display: none;

}


/* タイトル */

h1 {

    font-size: 32px;
    margin-bottom: 10px;

}


h2 {

    color: #243447;

}


/* 案内人 */

.guide {

    background: #fff;
    border-radius: 16px;
    padding: 20px;
    margin: 30px 0;

    border: 2px solid #c9a227;

    box-shadow:
        0 4px 12px rgba(0,0,0,0.1);

}


/* 情報 */

.info {

    background:#243447;

    color:white;

    padding:15px;

    border-radius:12px;

    line-height:2;

    margin-bottom:25px;

}


/* ボタン */

button,
.cta a {

    display:block;

    width:90%;

    margin:15px auto;

    padding:15px;

    border-radius:30px;

    border:none;

    background:#c9a227;

    color:white;

    font-size:18px;

    font-weight:bold;

    text-decoration:none;

    cursor:pointer;

}


/* QUEST */

#monster-name {

    font-size:28px;

    margin-top:20px;

}


.monster-area {

    font-size:80px;

    margin:25px;

}


#question-text {

    background:white;

    padding:20px;

    border-radius:15px;

    line-height:1.6;

}



/* 回答ボタン */

.answer-button {

    background:white;

    color:#243447;

    border:2px solid #c9a227;

    min-height:70px;

    text-align:left;

    padding:15px 20px;

}


.answer-button:hover {

    background:#eee;

}



/* 攻略演出 */

.quest-clear {

    animation:
    clearAnimation 0.6s ease;

}


@keyframes clearAnimation {

    0% {
        transform:scale(1);
    }

    50% {
        transform:scale(1.08);
    }

    100% {
        transform:scale(1);
    }

}



/* 結果 */

#level-title {

    background:#243447;

    color:white;

    padding:20px;

    border-radius:15px;

}


#cleared-list,
#remaining-list,
#next-course {

    background:white;

    padding:20px;

    border-radius:15px;

    text-align:left;

    margin-bottom:20px;

}


/* CTA */

.cta {

    margin-top:30px;

}


.cta a {

    background:#06c755;

}


/* スマホ調整 */

@media(max-width:480px){

    h1{

        font-size:26px;

    }


    h2{

        font-size:20px;

    }

}