/* クイズのすべてを管理する親要素 */
.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: 4px #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: '〇';
    color: red;
}
/* .falseは不正解（×を表示） */
.quiz_area .quiz_area_icon.false:before{
    content: '×';
    color: blue;
}

/* 現在の問題数を表示 */
.quiz_area .quiz_no{
    font-weight: bold;
}

/* 問題文と回答後の結果（デザインは使いまわし） */
.quiz_area .quiz_question, .quiz_result{
    box-sizing: border-box;
    padding: 15px;
    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 -2px 0;
    cursor: pointer;
}

.quiz_area .quiz_ans_area ul li.selected{
    background-color: #bcbcbc;
}