* {
    word-break:normal;
}

/* クイズのすべてを管理する親要素 */
.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: rgba(255, 58, 94, 0.946);
display: none;
font-size: 10em;
font-weight: bold;

}

/* .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: rgba(255, 58, 94, 0.946);
}
/* .falseは不正解（×を表示） */
.quiz_area .quiz_area_icon.false:before{
content: '×';
color: rgb(57, 126, 255);
}

/* 現在の問題数を表示 */
.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;
}