@charset "UF-8";

.content {
    display: flex;
    height: 100vh;
}

.left-content {
    order: 1;
    width: 20%;
    margin: 0.5%;
    padding: 0.5%;
}

.center-content {
    order: 2;
    width: 60%;
    text-align: center;
}
.right-content {
    order: 3;
    width: 20%;
    margin: 0.5%;
    padding: 0.5%;
}

/* 角を丸くするclass */
.round {
    border-radius: 10px 10px 10px 10px;
}

.top {
    height: 20%;
}

#question {
    background-color: rgb(125, 209, 248);
    margin-left: 5%;
    margin-right: 5%;
    text-align: center;
    font-size: 30px;
    color: rgb(0, 110, 255);
    height: auto;
}

.answers {
    margin-top: 20px;
    text-align: center;
}
.btn {
    margin-right: 1%;
    margin-left: 1%;
    height: 100px;
    width: 20%;
    font-size: 15px;
    border: none;
    outline: none;
}
.btn {  /* ボタンを押した時に立体感を出す */
    box-shadow: 0 3px rgb(156, 156, 156);
    transform: translateY(-3px);
    transition: 0.175s all;
}
.btn:hover {
    box-shadow: 0 1px rgb(156, 156, 156);
    top: 1px;
    transform: translateY(3px);
}

.right-content {
    padding-top: 3%;
}
.another-quiz {
    font-size: 30px;
}
.link {
    font-size: 25px;
}

/* 解説画面 */
.judge {
    margin: 0% 5% 0% 5%;
    text-align: center;
    font-size: 40px;
    color: red;
    height: auto;
}

#answer-text {
    margin-left: 5%;
    margin-right: 5%;
    text-align: center;
    font-size: 30px;
    color:rgb(0, 110, 255);
    height: auto;
}

#explanation {
    margin-top: 3%;
    margin-left: 5%;
    margin-right: 5%;
    text-align: center;
    font-size: 25px;
    color: rgb(100, 100, 100);
    height: auto;
}

#btn-next {
    width: 10%;
    margin-top: 5%;
    margin-left: auto;
    text-align: center;
    font-size: 15px;
    border: none;
    outline: none;
}
#btn-next {
    box-shadow: 0 2px rgb(156, 156, 156);
    transform: translateY(-2px);
    transition: 0.175s all;
}
#btn-next:hover {
    box-shadow: 0 0.5px rgb(156, 156, 156);
    top: 0.5px;
    transform: translateY(2px);
}

/* 結果画面 */
#result {
    height: auto;
    padding-bottom: 5%;
    font-size: 30px;
}

#restart {
    width: 20%;
    height: 5%;
    outline: none;
    border: none;
    background-color:rgb(212, 212, 212);
    color: black;
}
#restart:hover {
    background-color:rgb(100, 100, 100);
    color: rgb(255, 255, 255);
}


/* スマホ、タブレット用に画面を調整 */
@media (max-width: 760px) {
    .content {
        flex-direction: column;
        align-items: center;
    }

    .top {
        height: 20%;
    }

    .center-content {
        width: 100%;
    }

    .right-content {
        width: 100%;
        text-align: center;
    }
    .left-content {
        width: 100%;
    }

    #question {
        font-size: 15px;
    }

    .btn {
        font-size: 10px;
    }

    .another-quiz {
        font-size: 15px;
    }

    .ling {
        font-size: 13px;
    }

    .judge {
        font-size: 20px;
    }

    #answer-text {
        font-size: 15px;
    }

    #explanation {
        font-size: 10px;
    }

    #btn-next {
        font-size: 7px;
    }
}