*{
    margin:0;
    padding:0;
}
#quizArea{
    width:100%;
    position:relative;
    overflow:hidden;
    background-color: #e2f7f8;
    color:#333;
}
#quizArea > *{
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
    background-color: #e2f7f8;


}
#quizArea .quizBtn1{
    transition-property: transform,opacity;
    transition-duration: 0.2s;
    color:#fff;

}
#quizArea .quizBtn1:hover{
    opacity:0.7;
    transform:scale(1.1);
}


#quizArea img{
    position:absolute;
    height:auto;
    
}
#quizAreaTitle .quizTtl1{
    width:76.9%;
    left:11.6%;
    top:11%;
}
#quizAreaTitle .quizImg1{
    width:26.5%;
    left:49.5%;
    top:31.5%;
}
#quizAreaTitle .quizImg2{
    width:22%;
    left:37%;
    top:34%;
}
#quizAreaTitle .quizTxt1{
    width:100%;
    font-size:3.5vw;
    font-weight:bold;
    line-height:1.33;
    text-align:center;
    position:absolute;
    top:63.2%;
    left:0;
}
#quizAreaTitle .quizBtn1{
    position:absolute;

    background-color:#ed6b8d;
    color:#fff;


    font-size:3.5vw;
    font-weight:bold;
    width:51%;
    height:9.969vw;
    display: flex;
	justify-content: center;
	align-items: center;
    left:24.5%;
    bottom:7.9%;
    text-align:center;
    cursor:pointer;

}



/**/
#quizResult{
    font-size:2.5vw;
    text-align:center;
    position:absolute;
    bottom:1em;
    left:0;
    width:100%;
}
#quizAreaMain .quizTtl1{
    width:55.2%;
    left:22.3%;
    top:5.6%;
}
#quizAreaMain .quizImg1{
    width:17.7%;
    right:2.8%;
    top:3.5%;
    display:none;
}
#quizAreaMain .quizImg1b{
    width:17.1%;
    right:2.1%;
    top:3.5%;
    display:none;
}
#quizAreaMain .quizImg1c{
    width:17.3%;
    right:3.8%;
    top:3.5%;
    display:none;
}
#quizAreaMain .quizImg2{
    width:15.6%;
    left:2.8%;
    top:3.9%;
}
#quizAreaMain .quizTxt1{
    font-size:2.6vw;
    font-weight:normal;
    line-height:1.1;
    text-align:center;
    padding-top:17.5%;
}
#quizAreaMain .quizTxt1 p{
    font-size:103%;
    letter-spacing:-0.04em;
}
#quizAreaMain .quizTxt1 p.quiz_toi{
    font-size:138%;
    margin-bottom:0.4em;
    width:70%;
    margin-left:15%;
    font-weight:bold;
}
#quizAreaMain .quizTxt1 p.quiz_toi2{
    font-size:103%;
    line-height:1.25;
    width:70%;
    margin-left:15%;
    line-height:1.4;
    font-weight: bold;

}

#quizAreaMain .quizBtn1{
    display:inline-flex;
    background-color:#ed6b8d;
    color:#fff;


    font-size:3.5vw;
    font-weight:bold;
    width:51%;
    height:9.969vw;
	justify-content: center;
	align-items: center;
    text-align:center;
    cursor:pointer;

}
#quizAreaMain ol{
    width:100%;
    text-align:center;
    counter-reset: my-counter;
    list-style: none;
    margin-bottom:4.7%;
    margin-top:3.6%;
}
#quizAreaMain ol li.on{
    background-color:#ed6b8d;
    color:#fff;
}
#quizAreaMain ol li.on::before{
    color:#ed6b8d;
}

#quizAreaMain ol li.on div.quizMaru{
    position:absolute;
    display:none;
    left:calc(50% - 23%);
    top:calc(50% - 6vw - 0.7vw);
    
    height:12vw;
    width:12vw;
    border:solid 0.7vw #ff0000;
    border-radius:100%;
    background-color:transparent;
}
#quizAreaMain ol li.no div.quizBatsu{
    display:block;
    position:absolute;
    left:calc(50% - 10vw);
    top:calc(50% - 10vw );
    height:20vw;
    width:20vw;
}
#quizAreaMain ol li.on div.quizMaru{
    display:block;
}
#quizAreaMain ol li.on.no div.quizMaru{
    display:none;
}

#quizAreaMain ol li.on div.quizBatsu::before,#quizAreaMain ol li.on div.quizBatsu::after{
    content:"";
    display:block;
    position:absolute;
    
    left:0;
    top:calc(50%  - 0.35vw);
    
    height:1.1vw;
    width:100%;
    background-color: #ff0000;
    color:#fff;
    transform:rotate(45deg);
    transform-origin:50% 50%;
}
#quizAreaMain ol li.on div.quizBatsu::after{
    transform:rotate(-45deg);

}

#quizAreaMain ol.pre li{
    background:#ed6b8d;
    cursor:pointer;
    transition-property: transform,opacity,background-color;
    transition-duration: 0.2s;

}
#quizAreaMain ol.pre li:hover{
    opacity:0.7;
    transform:scale(1.1);
}
#quizAreaMain ol.pre li:before{
    color:#ed6b8d;
}


#quizAreaMain ol li{
    
    transition-property: transform,opacity,background-color;
    transition-duration: 0.2s;

    background-color: #999999;
    color:#fff;
    display:inline-block;
    margin:0 1.28%;
   
    font-size:2.9vw;
    font-weight:bold;
    width:28.0%;
    height:12.48vw;
    line-height:104%;
    text-align:center;
    
    padding:2.6% 0 2.6% 6%;

    text-align:left;
    box-sizing:border-box;
    position:relative;
    vertical-align:top;

}
#quizAreaMain ol li:before{
    content: counter(my-counter);
    counter-increment: my-counter;
    border-radius:100%;
    background:#fff;
    color:#999999;
    width:3vw;
    height:3vw;
    font-size:2.5vw;
    text-align:center;
    line-height:3vw;
    position:absolute;
    left:6%;
    top:calc(50% - 1.5vw);
    display:block;
}
#quizAreaMain ol li p{
    align-items:center;
    display:flex;
    height:100%;
    width:100%;
}
#quizAreaMain ol li div{
    display:none;
}
#quizAreaMain ol li p span{
    height:auto;
    padding-right:10%;
}


#quizAreaMain .quizText2{
    background:#fff;
    width:88%;
    box-sizing:border-box;
    margin:0 auto 3.5%;
    border:solid 1px #999;
    border-radius:5px;
    padding:2.0% 2.3% 3.14%;
}

#quizAreaMain p.quiz_kotae1{
    font-size:2.9vw;
    color:#ed6b8d;
}
#quizAreaMain p.quiz_kotae1 span::before{
    content: "";
    counter-increment: my-counter;
    border-radius:100%;
    background:#ed6b8d;
    color:#fff;
    width:3vw;
    height:3vw;
    margin-right:0.7em;
    font-size:2.5vw;
    text-align:center;
    line-height:3vw;
    display:inline-block;
}
#quizAreaMain p.quiz_kotae1.ans1 span::before{
    content: "1";
}
#quizAreaMain p.quiz_kotae1.ans2 span::before{
    content: "2";
}
#quizAreaMain p.quiz_kotae1.ans3 span::before{
    content: "3";
}
#quizAreaMain p.quiz_kotae2{
    margin-top:1%;
    font-size:2.5vw;
    line-height:1.6;
}
#quizAreaMain .quizText3{
    text-align:center;
}


#quizAreaResult .quizTtl1{
    width:76.9%;
    left:11.6%;
    top:11%;
}
#quizAreaResult .quizImg1{
    width:26.5%;
    right:2.3%;
    top:31.5%;
}
#quizAreaResult .quizImg2{
    width:22%;
    left:4.2%;
    top:34%;
}
#quizAreaResult .quizTxt1{
    width:100%;
    font-size:3.5vw;
    font-weight:bold;
    line-height:1.33;
    text-align:center;
    position:absolute;
    top:68.8%;
    left:0;
}
.quiz_answers{
    font-size:8.8vw;
    text-align:center;
    left:0;
    position:absolute;
    top:32.7%;
    font-weight:bold;

    width:100%;
    line-height:1.2;
}
#quizAreaResult .quizBtn1{
    position:absolute;

    background-color:#ed6b8d;
    color:#fff;


    font-size:3.5vw;
    font-weight:bold;
    width:51%;
    height:9.969vw;
    display: flex;
	justify-content: center;
	align-items: center;
    left:24.5%;
    bottom:7.9%;
    text-align:center;
    cursor:pointer;

}


#quizAreaResult{
    display:none;
    z-index:2;
}
#quizAreaTitle{
    /*display:none;*/
    z-index:3;
}
div#quizAreaMain{
    /*display:none;*/
    z-index:1;
    position:relative;
    overflow:hidden;
    
    min-height:77.64vw;
        padding-bottom:10.5vw;

    height:auto;

 }


@media (min-width: 980px) {
    #quizArea{
        width:980px;
    }
    #quizResult{
        font-size:24.5px;
    }    
    #quizAreaTitle .quizTxt1{
        font-size:34.3px;
    }
    #quizAreaTitle .quizBtn1{
        font-size:34.3px;
        height:97.7px;
        
    }
    
    #quizAreaMain .quizTxt1{
        font-size:25.5px;
    }
    
    #quizAreaMain .quizBtn1{
        font-size:34.3px;
        height:97.7px;
        
    }
    #quizAreaMain ol li.on div.quizMaru{
        top:calc(50% - 58.8px - 6.86px);
        border:solid 6.86px #ff0000;

        height:117.6px;
        width:117.6px;
    }

   
    #quizAreaMain ol li.no div.quizBatsu{
        left:calc(50% - 98px);
        top:calc(50% - 98px );
        height:196px;
        width:196px;
        
    }

    #quizAreaMain ol li.on div.quizBatsu::before,#quizAreaMain ol li.on div.quizBatsu::after{
        top:calc(50%  - 5.39px);
        height:10.78px;
     }

    

    #quizAreaMain ol li{
       
        font-size:24.5px;
        height:122.297px;
    
    }
    #quizAreaMain ol li:before{
        width:29.4px;
        height:29.4px;
        font-size:24.5px;
        line-height:29.4px;
        top:calc(50% - 14.7px);
    }
    
    #quizAreaMain p.quiz_kotae1{
        font-size:24.5px;
    }

    #quizAreaMain p.quiz_kotae1 span::before{
        width:29.4px;
        height:29.4px;
        margin-right:0.7em;
        font-size:24.5px;
        line-height:29.4px;
    }

    

    
    #quizAreaMain p.quiz_kotae2{
        font-size:15.68px;
        line-height:1.6;
    }
    
    #quizAreaResult .quizTxt1{
        font-size:34.3px;
        line-height:1.33;
    }
    .quiz_answers{
        font-size:90px;
        line-height:1.2;
    }
    #quizAreaResult .quizBtn1{
        font-size:34.3px;
        height:97.7px;
    
    }
    #quizAreaWrap{
        width:980px;

    }
    div#quizAreaMain{
        min-height:760.8px;
    padding-bottom:90px;
        
     }
    
    
}