@charset "UTF-8";
/* CSS Document */

#quiz_wrap{

}
#quiz_wrap .quiz_section{
margin-bottom: 60px;

}
#quiz_wrap .quiz_section .q_text{

}

#quiz_wrap .quiz_section .answer_content{
margin-bottom: 40px;

}

#quiz_wrap .quiz_section .quiz_img{
margin-bottom: 20px;
}
#quiz_wrap .quiz_section .answer_content input[type="radio"]{
display: none;
}
#quiz_wrap .quiz_section .answer_content input[type="radio"]:checked + label {
	background: #31A9EE;/* マウス選択時の背景色を指定する */
	color: #ffffff; 	/* マウス選択時のフォント色を指定する */
}

#quiz_wrap .quiz_section .answer_content label{

	    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
cursor:pointer;
display: block;
border: 2px solid #ccc;
border-radius: 10px;
padding: 30px;
margin-bottom: 5px;
}
#quiz_wrap .quiz_section .answer_content label:hover{
box-shadow: 0 0 8px gray;
}
#quiz_wrap .quiz_section .answer_content input[type="radio"].good:checked + label,
#quiz_wrap .quiz_section .answer_content input[type="radio"].good + label{

/*color: #fff;
background:  #12cc1f;*/

background: #fff;
border: 5px solid #12cc1f;
color: #12cc1f;
}
#quiz_wrap .quiz_section .answer_content input[type="radio"].ng:checked + label,
#quiz_wrap .quiz_section .answer_content input[type="radio"].ng + label{
background: #fff;
border: 5px solid #ec1a68;
color: #ec1a68;
}
#quiz_wrap .quiz_section .ans_section{
border: 2px solid #ccc;

padding: 30px;
}
#quiz_wrap .quiz_section .ans_section .ans_good,
#quiz_wrap .quiz_section .ans_section .ans_ng{
font-weight: bold;
font-size: 25px;
margin-bottom: 10px;
}
#quiz_wrap .quiz_section .ans_section .ans_good:before,
#quiz_wrap .quiz_section .ans_section .ans_ng:before{
display: inline-block;
border-radius: 40px;
width: 25px;
height: 25px;
content: "";
margin-right: 10px;
}
	#quiz_wrap .quiz_section .ans_section .ans_good:before{
	background: #12cc1f url(check.png) no-repeat 50% 50%;
	}
	#quiz_wrap .quiz_section .ans_section .ans_ng:before{
	background: #ec1a68 url(cross.png) no-repeat 50% 50%;
	}
#quiz_wrap .quiz_section .quiz_img img{
width: 100%;
height: auto;
}

#quiz_wrap .quiz_section .ab_answer_content{
display:-webkit-box;
display:-moz-box;
display:-ms-box;
display:-webkit-flexbox;
display:-moz-flexbox;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:-ms-flex;
display:flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
overflow: hidden;
justify-content:space-between;
}
#quiz_wrap .quiz_section .ab_answer_content input[type="radio"]{
display: none;
}
#quiz_wrap .quiz_section .ab_answer_content .a_text{
width: 48%;
}
	#quiz_wrap .quiz_section .ab_answer_content label{
	cursor: pointer;
		    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
	}
	#quiz_wrap .quiz_section .ab_answer_content label img{
	width: 100%;
	height: auto;
	opacity: 0.6;
	}
	#quiz_wrap .quiz_section .ab_answer_content label img:hover{
	opacity: 1.0;
	}
#quiz_wrap .quiz_section .ab_answer_content input[type="radio"]:checked + label img,
#quiz_wrap .quiz_section .ab_answer_content input[type="radio"].active + label img{
	opacity: 1.0;
}



#quiz_wrap .quiz_section .ab_ans_section p.ans_total{
text-align: center;
font-size: 30px;
color:#2487A6;

}
#quiz_wrap .quiz_section .ab_ans_section .ab_bar_wrap{
margin-bottom: 20px;
display:-webkit-box;
display:-moz-box;
display:-ms-box;
display:-webkit-flexbox;
display:-moz-flexbox;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:-ms-flex;
display:flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
overflow: hidden;
justify-content:space-between;
}
#quiz_wrap .quiz_section .ab_ans_section .ab_bar_wrap .img_section{
width: 20%;
}
#quiz_wrap .quiz_section .ab_ans_section .ab_bar_wrap .bar_section{
width: 78%;
}
#quiz_wrap .quiz_section .ab_ans_section .ab_bar_wrap .bar_section p.persent{
margin-bottom: 10px;
font-size: 30px;
}
#quiz_wrap .quiz_section .ab_ans_section .ab_bar_wrap .bar_section .bar{
background: #f00;
color: #fff;
	    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
padding: 10px;

}
/*quiz_result*/
#quiz_result{

}
#quiz_result .result_cont{
}
#quiz_result .result_cont .result_img{
margin-bottom: 20px;
}
#quiz_result .result_cont .result_text{
padding: 0 0 40px;
border-bottom: 1px dotted #ddd;
margin-bottom: 40px;
}
#quiz_result .quiz_point{
text-align: right;
}
#quiz_result .quiz_point span{
font-size: 30px;
color: red;
}



/*enq_section*/

#quiz_wrap .enq_section{
margin-bottom: 60px;
}
#quiz_wrap .enq_section ul{
list-style: none;
}
#quiz_wrap .enq_section ul li input[type="radio"],
#quiz_wrap .enq_section ul li input[type="checkbox"]{
margin-right: 10px;
}
#quiz_wrap .enq_section input[type="text"],
#quiz_wrap .enq_section textarea{
width: 100%;
}
#quiz_wrap p.quiz_submit{
text-align: center;
}
	#quiz_wrap .enq_section input.error + label,
	#quiz_wrap .enq_section input.error,
	#quiz_wrap .enq_section textarea.error{
	background: #F6B4B5;
	}