/* ********************************** 1400px以下のSCC  ********************************** */
@media screen and ( max-width:1400px){

    #setup-contents{
        top: 40%;
    }

    #setup-contents button {
        min-width: unset;
        font-size: 3em;
        margin-top: 1em;
    }


} 

/* ********************************** 1200px以下のSCC  ********************************** */
@media screen and ( max-width:1200px){

    body{
        font-size: 14px; /* 基本フォントサイズを16pxに設定 = 1em設定 */
    }


    .cloud {
        background-color: var(--bosaiQuizBrown);
        padding: 1em 1.5em;
        margin-bottom: 1em;
    }

    .cloud:after {
        border-width: 30px;
        margin-left: -30px;
    }

    .quiz_ttl {
        display: block;
    }


    #setup-contents .tokucyan img {
        width: 160px !important;
    }

    #quiz-setup {
        position: unset;
        transform: unset;
    }
    

    #setup-contents{
        top: 40%;
        left: 50%;
    }

    #setup-contents button {
        font-size: 2.5em;
        margin-top: 1em;
    }

    #setup-contents .tokucyan {
    right: -3em;
    }








}








/* ********************************** タブレット用SCC  ********************************** */
@media screen and ( max-width:1000px){

    body{
        font-size: 12px; /* 基本フォントサイズを16pxに設定 = 1em設定 */
    }

    .illustration {
        max-width: unset;
    }

    .quiz-question-box .tokucyan {
        right: -4em;
        bottom: -2em;
    }

 

   

    

    

    









    

}









/* ********************************** タブレット用SCC ********************************** */
@media screen and ( max-width:800px){

    .quiz-question-box {
        margin: 0 auto 4em auto;
    }
    

    .quiz-choices {
        display: inline-grid;
        justify-content: center;
        gap: 3em;
        padding-bottom: 1em;
    }

    .choice {
        padding: 0.5em 1em;
    }




    .connect_text:after {
        bottom: -100px;
    }

    .evaluation {
        width: 90vw;
        height: 90vh;
        padding: 2em
    }

    .star-img {
        width: 2.5em;
    }

    .evaluation .stars {
        font-size: 1.5em;
        margin: 2em 0;
    }



    .evaluation .comment {
        border: 4px solid var(--bosaiQuizBrown);
        padding: 1em;
    }

    #restart-button {
        padding: 1em;
        margin-top: 1em;
        width: 100%;
    }

    .quiz-question-box .tokucyan2{
        right: -2em;
        bottom: -6em;
    }

    .quiz-question-box .tokucyan2 img{
        width: 140px ;
    }
    



}








/* ********************************** スマホ用 CSS ********************************** */
@media screen and ( max-width:600px){

    .quiz-wrapper{
        overflow: scroll;
    }

  

    

    #setup-contents {
        width: 80%;
        position: unset;
        transform: unset;
        margin: 0 auto;
        padding-top: 3em;
    }

    .quiz_ttl {
        width: 100%;
        margin: 0 auto;
    }

    .quiz_ttl img{
        width: 100%;
    }

    .cloud{
        width: 100%;
        padding: 1em;
    }

    .cloud br{
        display: block;
    }

    #setup-contents button {
        font-size: 2em;
        margin-top: 6em;
    }

    #setup-contents .tokucyan {
        top: -5em;
        left: 45%;
        transform: translateX(-50%);
        z-index: -1;
    }

    #setup-contents .tokucyan img {
        width: 140px !important;
    }

    .quiz-question-box {
        margin: 0 1em 4em 1em;
        border-radius: 40px;
    }

      .quiz-question-box .tokucyan2{
        position: unset;
        margin-top: 1em;
    }

    .quiz-question-box .tokucyan2 img{
        width: 140px ;
    }


    #quiz-container{
        position: unset;
        transform: unset;
        margin: 0 auto;
        padding-top: 5em;
        height: 100%;
    }

    .quiz-note {
        margin: 2em 0;
    }

    .evaluation {
        border-radius: 0;
        position: unset;
        transform: unset;
        overflow: scroll;
    }

    .connect_text .mob{
        display: block;
    }










}





/* ********************************** スマホ用(450px以下) CSS ********************************** */
@media screen and ( max-width:450px){

    body {
        height: 100%;
        overflow-y: scroll;
    }

    #quiz-setup {
        top: 30%;
    }


   








    .quiz-text {
        font-size: 1.5em;
    }

    .quiz-question-box {
        padding: 3em 2em 2em 2em;
        margin: 0 auto 1em auto;
        border-radius: 30px;
        border: 4px solid black;

    }


    .quiz-choices {
        display: block;
        width: 100%;
    }

    .choice {
        width: 100%;
        display: flex;              /* flexで横並び */
        align-items: center;        /* 子要素を縦方向の中央に揃える */
        justify-content: center;    /* 横方向の中央寄せ（必要なら） */
        margin: 1em auto 0 auto;
        font-size: 2em;
        gap: 0.5em;                 /* 文字と画像の間隔 */
    }

    .choice span {
        margin-right: 0.5em;
        font-size: 0.7em;
    }

    .evaluation .title {
        font-size: 3em;
    }

    .evaluation .stars {
        font-size: 1.5em;
        margin: 1.5em 0;
    }

    .evaluation .comment {
        font-size: 1.5em;
    }

    .score_text {
        font-size: 1.5em;
        margin: 1em auto;
        line-height: 1.5em;
    }

    .checkAnswer {
        padding: 0.5em 1em;
        margin-bottom: 1.5em;
    }

    #answers-list {
        font-size: 1.2em;
    }

   




}