<!--

@meida screen and (max-width:640px)
{
    img{width:105%;}
}

/* クイズのすべてを管理する親要素 */
.quiz_area{
    position: relative;
}

/* 回答後に上に被せてタップできなくするための要素（デフォルト非表示、回答後に一時的に表示） */
.quiz_area .quiz_area_bg{
    position: absolute;
    width: 100%;
    height:100%;
    top: 0;
    right: 0;
    left: 0;
    z-index: 999;
    background: rgba(0, 0, 0, 0.3);
    display: none;
    color: #FFF;
    text-align: center;
}

/* 画面に〇、×を表示するための要素（デフォルト非表示、回答後に一時的に表示） */
.quiz_area .quiz_area_icon{
    position: absolute;
    box-sizing: border-box;
    top: 50%;
    left: 50%;
    z-index: 9999;
    transform: translate(-50%, -50%);
    color: red;
    display: none;
    font-size: 10em;
    font-weight: bold;
    -webkit-text-stroke: 2px #FFF;
    /* text-stroke: 4px #FFF; */
}

/* .trueまたは.falseのクラスが付与されたら表示するものとみなす */
.quiz_area .quiz_area_icon.true, .quiz_area .quiz_area_icon.false{
    display: block;
}

/* .trueは正解（〇を表示） */
.quiz_area .quiz_area_icon.true:before{
    content: '〇';
    font-size: 0.8em;
    color: red;
}
/* .falseは不正解（×を表示） */
.quiz_area .quiz_area_icon.false:before{
    content: '×';
    font-size: 0.8em;
    color: blue;
}

/* */
.quiz_area .quiz_next{
    position: absolute;
    box-sizing: border-box;
    top: 100%;
    left: 50%;
    z-index: 99999999;
    transform: translate(-50%, 0%);
    color: #333;
    display: none;
    font-size: 2em;
    font-weight: bold;
    content: '次の問題 >';
    background: rgba(61, 196, 88, 0.76);
    width: 100%;
    text-align:center;		
    border:2px solid black;
    border-radius: 10px; 
    margin-top:5px;
}


/* 現在の問題数を表示 */
.quiz_area .quiz_no{
    font-weight: bold;
}

/* 問題文 */
.quiz_area .quiz_question, .quiz_result{
    box-sizing: border-box;
    padding: 15px;
    /* border: 4px solid #CCC; */
    border: 4px solid #CCC;
    font-weight: bold;
}

/* 回答後の結果は初期非表示 */
.quiz_area .quiz_result{
    display: none;
    text-align: center;
}


/* 以下クイズの選択肢のデザイン */
.quiz_area .quiz_ans_area ul{
    margin: 10px 0 0 0;
    padding: 0;
    display: block;
}

.quiz_area .quiz_ans_area ul::after{
    content: "";
    display: block;
    clear: both;
}

.quiz_area .quiz_ans_area ul li{
    box-sizing: border-box;
    list-style: none;
    float: left;
    width: 100%;
    padding: 10px 15px;
    border: 2px solid #CCC;
    margin: 0 0 0px 0;
    cursor: pointer;
    border-radius: 10px;
}
.quiz_area .quiz_ans_area ul li[data-true ^= '1']{
    box-sizing: border-box;
    list-style: none;
    float: left;
    width: 100%;
    padding: 10px 15px;
    border: 2px solid #CCC;
    margin: 0 0 0px 0;
    cursor: pointer;
    border-radius: 10px;
 }

 .quiz_seikai{
    border-color:#F00;    
 }
 .quiz_normal{
    border-color:#000;    
 }


.quiz_area .quiz_ans_area ul li.selected{
    /* background-color: #bcbcbc; */
    background-color: #fff;
    border:solid 4px rgba(0, 120, 150, 0.6);
}

-->