@charset "UTF-8";

/*quizBoxのスタイル*/
.quizBox{
	width:90%;
	border: 1px solid var(--mainColor);
	border-radius: 5px;
	padding-bottom: 20px;
	margin-left: auto;
	margin-right: auto;
}
.quizNumber{
	font-weight: bold;
	padding-top: 5px;
	padding-left: 10px;
	padding-bottom: 5px;
	color: #ffffff;
	background-color: var(--mainColor);
	font-size: 30px;
}

.question{
	padding: 10px;
}

.imgBox{
	margin: auto;
	padding-top: 5px;
	padding-left: 10px;
}

.choice{
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	padding-top: 10px;
	padding-bottom: 10px;
	font-size: 22px;
	margin-top: 15px;
	margin-bottom: 3px;
	background-color: #D5ECFA;
	border-radius: 5px;
	color: #000000;
}
.choice:hover{
	opacity: 0.5;
}

input{
	display: none;
}

.result{
	color: #13D874;
	font-size: 25px;
	padding-left: 10px;
}
.resultWrong{
	color: #F63333;
	font-size: 25px;
	padding-left: 10px;
}

.answer{
	font-size: 20px;
	margin-top: 10px;
	padding-left: 10px;
}

.answerA{
	font-size: 18px;
	padding-left: 10px;
}

.commentary{
	font-size: 18px;
	margin-top: 20px;
	padding-left: 10px;
}



/*各クイズで記述が変わるもの*/
#quiz1AnsCBox{
	display: none;
}
#quiz1AnsWBox{
	display: none;
}
#quiz1C:checked ~ #quiz1AnsCBox {
	display: block;
	border-top: 1px solid var(--mainColor);
	width:90%;
	height:auto;
	margin-top: 15px;
	padding-top: 10px;
	margin-left: auto;
	margin-right: auto;
}
#quiz1W:checked ~ #quiz1AnsWBox {
	display: block;
	border-top: 1px solid var(--mainColor);
	width:90%;
	height:auto;
	margin-top: 15px;
	padding-top: 10px;
	margin-left: auto;
	margin-right: auto;
}


/*各クイズで記述が変わるもの*/
#quiz2AnsCBox{
	display: none;
}
#quiz2AnsWBox{
	display: none;
}
#quiz2C:checked ~ #quiz2AnsCBox {
	display: block;
	border-top: 1px solid var(--mainColor);
	width:90%;
	height:auto;
	margin-top: 15px;
	padding-top: 10px;
	margin-left: auto;
	margin-right: auto;
}
#quiz2W:checked ~ #quiz2AnsWBox {
	display: block;
	border-top: 1px solid var(--mainColor);
	width:90%;
	height:auto;
	margin-top: 15px;
	padding-top: 10px;
	margin-left: auto;
	margin-right: auto;
}


/*各クイズで記述が変わるもの*/
#quiz3AnsCBox{
	display: none;
}
#quiz3AnsWBox{
	display: none;
}
#quiz3C:checked ~ #quiz3AnsCBox {
	display: block;
	border-top: 1px solid var(--mainColor);
	width:90%;
	height:auto;
	margin-top: 15px;
	padding-top: 10px;
	margin-left: auto;
	margin-right: auto;
}
#quiz3W:checked ~ #quiz3AnsWBox {
	display: block;
	border-top: 1px solid var(--mainColor);
	width:90%;
	height:auto;
	margin-top: 15px;
	padding-top: 10px;
	margin-left: auto;
	margin-right: auto;
}


/*各クイズで記述が変わるもの*/
#quiz4AnsCBox{
	display: none;
}
#quiz4AnsWBox{
	display: none;
}
#quiz4C:checked ~ #quiz4AnsCBox {
	display: block;
	border-top: 1px solid var(--mainColor);
	width:90%;
	height:auto;
	margin-top: 15px;
	padding-top: 10px;
	margin-left: auto;
	margin-right: auto;
}
#quiz4W:checked ~ #quiz4AnsWBox {
	display: block;
	border-top: 1px solid var(--mainColor);
	width:90%;
	height:auto;
	margin-top: 15px;
	padding-top: 10px;
	margin-left: auto;
	margin-right: auto;
}

/*各クイズで記述が変わるもの*/
#quiz5AnsCBox{
	display: none;
}
#quiz5AnsWBox{
	display: none;
}
#quiz5C:checked ~ #quiz5AnsCBox {
	display: block;
	border-top: 1px solid var(--mainColor);
	width:90%;
	height:auto;
	margin-top: 15px;
	padding-top: 10px;
	margin-left: auto;
	margin-right: auto;
}
#quiz5W:checked ~ #quiz5AnsWBox {
	display: block;
	border-top: 1px solid var(--mainColor);
	width:90%;
	height:auto;
	margin-top: 15px;
	padding-top: 10px;
	margin-left: auto;
	margin-right: auto;
}

/*各クイズで記述が変わるもの*/
#quiz5AnsCBox{
	display: none;
}
#quiz5AnsWBox{
	display: none;
}
#quiz5C:checked ~ #quiz5AnsCBox {
	display: block;
	border-top: 1px solid var(--mainColor);
	width:90%;
	height:auto;
	margin-top: 15px;
	padding-top: 10px;
	margin-left: auto;
	margin-right: auto;
}
#quiz5W:checked ~ #quiz5AnsWBox {
	display: block;
	border-top: 1px solid var(--mainColor);
	width:90%;
	height:auto;
	margin-top: 15px;
	padding-top: 10px;
	margin-left: auto;
	margin-right: auto;
}

/*各クイズで記述が変わるもの*/
#quiz6AnsCBox{
	display: none;
}
#quiz6AnsWBox{
	display: none;
}
#quiz6C:checked ~ #quiz6AnsCBox {
	display: block;
	border-top: 1px solid var(--mainColor);
	width:90%;
	height:auto;
	margin-top: 15px;
	padding-top: 10px;
	margin-left: auto;
	margin-right: auto;
}
#quiz6W:checked ~ #quiz6AnsWBox {
	display: block;
	border-top: 1px solid var(--mainColor);
	width:90%;
	height:auto;
	margin-top: 15px;
	padding-top: 10px;
	margin-left: auto;
	margin-right: auto;
}

/*各クイズで記述が変わるもの*/
#quiz7AnsCBox{
	display: none;
}
#quiz7AnsWBox{
	display: none;
}
#quiz7C:checked ~ #quiz7AnsCBox {
	display: block;
	border-top: 1px solid var(--mainColor);
	width:90%;
	height:auto;
	margin-top: 15px;
	padding-top: 10px;
	margin-left: auto;
	margin-right: auto;
}
#quiz7W:checked ~ #quiz7AnsWBox {
	display: block;
	border-top: 1px solid var(--mainColor);
	width:90%;
	height:auto;
	margin-top: 15px;
	padding-top: 10px;
	margin-left: auto;
	margin-right: auto;
}

/*各クイズで記述が変わるもの*/
#quiz8AnsCBox{
	display: none;
}
#quiz8AnsWBox{
	display: none;
}
#quiz8C:checked ~ #quiz8AnsCBox {
	display: block;
	border-top: 1px solid var(--mainColor);
	width:90%;
	height:auto;
	margin-top: 15px;
	padding-top: 10px;
	margin-left: auto;
	margin-right: auto;
}
#quiz8W:checked ~ #quiz8AnsWBox {
	display: block;
	border-top: 1px solid var(--mainColor);
	width:90%;
	height:auto;
	margin-top: 15px;
	padding-top: 10px;
	margin-left: auto;
	margin-right: auto;
}

/*各クイズで記述が変わるもの*/
#quiz9AnsCBox{
	display: none;
}
#quiz9AnsWBox{
	display: none;
}
#quiz9C:checked ~ #quiz9AnsCBox {
	display: block;
	border-top: 1px solid var(--mainColor);
	width:90%;
	height:auto;
	margin-top: 15px;
	padding-top: 10px;
	margin-left: auto;
	margin-right: auto;
}
#quiz9W:checked ~ #quiz9AnsWBox {
	display: block;
	border-top: 1px solid var(--mainColor);
	width:90%;
	height:auto;
	margin-top: 15px;
	padding-top: 10px;
	margin-left: auto;
	margin-right: auto;
}

/*各クイズで記述が変わるもの*/
#quiz0AnsCBox{
	display: none;
}
#quiz0AnsWBox{
	display: none;
}
#quiz0C:checked ~ #quiz0AnsCBox {
	display: block;
	border-top: 1px solid var(--mainColor);
	width:90%;
	height:auto;
	margin-top: 15px;
	padding-top: 10px;
	margin-left: auto;
	margin-right: auto;
}
#quiz0W:checked ~ #quiz0AnsWBox {
	display: block;
	border-top: 1px solid var(--mainColor);
	width:90%;
	height:auto;
	margin-top: 15px;
	padding-top: 10px;
	margin-left: auto;
	margin-right: auto;
}