@charset "utf-8";


body {
	background: #3b6b52 ;
	min-height: 100vh;
	position: relative;
	color:#513d33;
}

.wrapper {
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
	flex-wrap: wrap;
	position: relative;
}

.field {
	position:relative;
	justify-content: center;
	align-items: center;
	align-content: center;
	flex-direction: column;
	margin: -1em 0 0;
}

.window{
	width:100%;
	margin: 0 auto;
	background:#fff;
	text-align:center;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: 3px 3px 0px 0px rgba(50, 50, 50, 0.3);
	-moz-box-shadow: 3px 3px 0px 0px rgba(50, 50, 50, 0.3);
	box-shadow: 3px 3px 0px 0px rgba(50, 50, 50, 0.3);
}

.window img{
	max-width:90%;
}

.quiz_panel {
display: none;
}


.quiz_panel.show {
	display: block;
	}

	

.quiz_panel .question {
	background:#fff;
	padding:1em 1em 0 1em;
}



.quiz_panel .question .q_no{
	background:#513d33;
	color:#fff;
	width:8em;
	margin:0 auto;
	-webkit-border-radius: 45px;
	-moz-border-radius: 45px;
	border-radius: 45px;
	padding:0.3em 0;
}

.quiz_panel .question .q_body{
	font-size: 1.5em;
	line-height:1.75em;
	text-align: left;
	overflow-y:auto;
	padding: 0.5em 0;
}

.quiz_panel .answer{
	border-top:3px solid #ffbe00;
	background:#513d33;
	padding:20px;
}

.quiz_panel .answer li {
	font-size: 1.5em;
	background:#ffbe00;
	-webkit-border-radius: 2em;
	-moz-border-radius: 2em;
	border-radius: 2em;
	margin:0 0 10px;
	padding: 0.5em;
	display:flex;
	justify-content: flex-start;
	align-items:center;
	text-align: left;
	-webkit-box-shadow: 3px 3px 0px 0px rgba(50, 50, 50, 0.3);
	-moz-box-shadow:    3px 3px 0px 0px rgba(50, 50, 50, 0.3);
	box-shadow:         3px 3px 0px 0px rgba(50, 50, 50, 0.3);
	cursor:pointer;
}

.quiz_panel .answer li span{
	display:inline-block;
	background:#fff;
	width:1.5em;
	height:1.5em;
	line-height:1.5em;
	text-align:center;
	vertical-align: middle;
	margin:0 0.7em 0 0;
	-webkit-border-radius: 45px;
	-moz-border-radius: 45px;
	border-radius: 45px;
}

.btn { cursor: pointer; }

.result_panel{
	display:none;
	position: absolute;
	z-index:10;
}

.result_panel.show{
	display: block;
}

.result_panel .batsu,
.result_panel .maru{
	width: 45%;
}

.result_panel>div{
	margin: 5px 0;
	padding: 1em;
	font-size: 1.5em;
}

.result_panel .hosoku{
	font-size: 1.25em;
	margin: 0;
	padding: 0.2em 1em;
	text-align: left;
}

.ng_panel{
	display:none;
	position: absolute;
	z-index:10;
}

.ng_panel.show{
	display: block;
}

.ng_panel>div:nth-child(1){
	padding:1%;
}

.ng_panel .seikai_count{
	display: none;
}

.ng_panel .seikai_count.show{
	display: inline-block;
}


.finish_panel{
	width: 80%;
	display:none;
	position: absolute;
	z-index:10;
	margin-left: 10%;
}

.finish_panel.show{
	display: block;

}

.finish_panel > div:nth-child(1){
	padding: 2%;
}


.finish_panel img[data-finish]{
	display: none;

}

.finish_panel img[data-finish].show{
	display: inline-block;

}

.result_panel>div.marubatsu,
.result_panel>div.btn  {
	padding: 0.5em 0;
}



.reload { max-width: 100%;  cursor: pointer;}

@media all and (max-width: 736px) {

}