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


.mainBox .question{
	margin: 0 auto;
	padding: 30px;
	background:#FFF;
	border-radius:10px;
	position:relative;
}

.mainBox .question h3{
	text-align: center;
	color: #4f5c5b;
	font-weight: bold;
	font-size:22px;
	margin-top: 50px;

}
.mainBox .question .aBox{
	width: 380px;
	margin: 0 auto;
	position:absolute;
	top: 180px;
	left: 320px;

}
.mainBox .question ul{
	display:flex;
}
.mainBox .question ul li{
	display:inline-block;
	margin: 0 20px;
	cursor: pointer;
}
.aBox input[type=radio]{
		display:none;
	}



.mainBox .question p.illust{
	margin-left: 30px;
	margin-bottom:10px;
}



.mainBox .question ul li:hover{
	opacity:0.8;
}

@media (max-width: 768px) {

.mainBox .question{
	margin: 0 ;
	padding: 10px;
}

.mainBox .question h3{
	font-size:18px;
	margin-top: 20px;

}
.mainBox .question .aBox{
	width: 100%;
	position: static;
	
}
.mainBox .question ul{
	display:flex;
 	justify-content: center;
  　align-items: center;
}
.mainBox .question ul li{
	display:inline-block;
	margin-top: 10px;

}
.mainBox .question ul li img{
	width: 120px;

}
.aBox input[type=radio]{
		display:none;
	}

.mainBox .question p.illust{
	margin: 10px auto;
	text-align:center;
}
.mainBox .question p.illust img{
	width:35%;
}

}