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

.mainContents_bakground{
	background:url(../kenki/quiz/img/bg-quiz.png) center 42px no-repeat;
}

/* トップページ */
.quizTop{
	margin-top:-5px;
	text-align:center;	
}

.quizTop_title{
	margin-bottom:32px;
}

.quizTop_contents{
	position:relative;
	z-index:1;	
}

.quizTop_howToPlay{
	display:none;	
}

.quizTop_explain{
	padding-top:40px;
	padding-bottom:37px;	
}

.quizTop_explain_title{
	margin:0 0 31px;	
}

.quizTop_explain_buttons{
	margin:30px 0 30px;	
}

.quizTop_text-start{
	margin:165px 0 0;
}

.quizTop_startButton{
	display:block;
	margin:30px auto 0;
	background-image:-moz-linear-gradient(50% 0% -90deg,rgb(255,77,77) 0%,rgb(217,0,0) 100%); 
	background-image:-webkit-gradient(linear,50% 0%,50% 100%,color-stop(0, rgb(255,77,77)),color-stop(1, rgb(217,0,0)));
	background-image:-webkit-linear-gradient(-90deg,rgb(255,77,77) 0%,rgb(217,0,0) 100%);
	background-image:linear-gradient(180deg,rgb(255,77,77) 0%,rgb(217,0,0) 100%);
	width:375px;
	height:66px;
	line-height:66px;
	border-radius:10px;
	color:#fff;
	font-weight:bold;
	text-decoration:none;
	box-shadow:inset -3px -3px 2px rgba(0,0,0,.1);
}

.is-ltIE8 .quizTop_startButton{
	background:	rgb(217,0,0);
}

.quizTop_startButton img{
	vertical-align:middle;	
}

.quizTop_explain_character{
	position:absolute;
	z-index:1;
	left:-120px;
	bottom:-70px;	
}

.quizTop_explain_fukidashi{
	position:absolute;
	z-index:1;
	right:-105px;
	bottom:20px;	
}

.quizTop_explain_cursor{
	position:absolute;
	z-index:1;
	right:82px;
	bottom:100px;	
}

/* トップページ（こんにちわ） */

.quizTop_hello{
	position:relative;
	z-index:1;
	top:0;
	left:0;
	width:100%;
}

.quizTop_hello_areaCharacter{
	position:relative;
	z-index:1;
	margin:-10px 0 96px;
}

.quizTop_hello_character{
	padding:0 0 0 10px;	
}

.quizTop_hello_fukidashi1{
	position:absolute;
	z-index:1;
	left:-102px;
	top:-30px;
}	

.quizTop_hello_fukidashi2{
	position:absolute;
	z-index:1;
	right:-102px;
	top:120px;
}	

.quizTop_hello_text{
	margin-bottom:-5px;	
}

.quizTop_hello_text strong{
	color:#F84646;	
}

.quizTop_hello_areaButton{
	position:relative;
	z-index:1;	
}

.quizTop_howToPlayButton{
	position:absolute;
	z-index:1;
	top:-12px;
	right:-23px;
	-webkit-transition:-webkit-transform 0.3s;
	transition:transform 0.3s;	
}

.quizTop_howToPlayButton:hover{
	-webkit-transform:scale(1.4);	
	transform:scale(1.4);
}




/* 汎用クイズエリア */

.areaQuiz{
	margin:0 auto;
	width:708px;
	border:6px solid #FF0000;
	border-radius:20px;
	-webkit-box-shadow:4px 4px 0px rgba(0,0,0,0.2);
	box-shadow:4px 4px 0px rgba(0,0,0,0.2);	
	padding:30px 0;
	background:#fff;
	position:relative;
	z-index:1;
	text-align:center;
}

.areaQuiz.is-inCorrect{
	-webkit-animation:shake 1s ease-in-out 1;
	animation:shake 1s ease-in-out 1;
	border-color:#0059B2;
}

.areaQuiz.is-correct{
	-webkit-animation:shake 1s ease-in-out 1;
	animation:shake 1s ease-in-out 1;
}

.areaQuiz.is-current{
	display:block;
	position:relative;
}


.areaQuiz-gameOver{
	padding-top:30px;
	padding-bottom:0;
	border-color:#0059B2;	
}

.areaQuiz_title{
	line-height:40px;
	background:#f00;
	border-top-left-radius:12px;
	border-bottom-right-radius:16px;
	width:109px;
}

.areaQuiz.is-inCorrect .areaQuiz_title{
	background-color:#0059B2;
}

.areaQuiz_image{
	-webkit-transition:-webkit-transform 0.7s;
	transition:transform 0.7s;
	-webkit-transform:scale(0);
	transform:scale(0);
}

.areaQuiz_image.is-start{
	-webkit-transform:scale(1);
	transform:scale(1);	
}

.areaQuiz_title img{
	vertical-align:middle;	
}

.areaQuiz_title.is-start img{
	-webkit-animation-name: bounceIn;
	animation-name: bounceIn;
	-webkit-animation-duration: .75s;
	animation-duration: .75s;	
}

.areaQuiz_answerButtons li{
	display:inline-block;
	margin:0 5px;	
}

.areaQuiz_answerButtons li a{
	display:block;
	background-image:-moz-linear-gradient(50% 0% -90deg,rgb(255,180,27) 0%,rgb(255,148,11) 100%); 
	background-image:-webkit-gradient(linear,50% 0%,50% 100%,color-stop(0, rgb(255,180,27)),color-stop(1, rgb(255,148,11)));
	background-image:-webkit-linear-gradient(-90deg,rgb(255,180,27) 0%,rgb(255,148,11) 100%);
	background-image:linear-gradient(180deg,rgb(255,180,27) 0%,rgb(255,148,11) 100%);
	width:183px;
	padding:13px 0;
	line-height:1.2;
	border-radius:10px;
	color:#fff;
	font-weight:bold;
	text-decoration:none;
	box-shadow:inset -3px -3px 2px rgba(0,0,0,.1);
	-webkit-transition:-webkit-transform 0.3s,opacity 0.3s;
	transition:transform 0.3s,opacity 0.3s;
}

.is-ltIE8 .areaQuiz_answerButtons li a{
	background:	rgb(255,148,11);
}

.areaQuiz_answerButtons li a:hover{
	-webkit-transform:scale(1.1);
	transform:scale(1.1);
	opacity:0.9;
	text-shadow:0 0 5px rgba(255,255,255,.6);
}

.areaQuiz_text{
	font-size:16px;	
	margin:15px 0 25px;
	-webkit-transition:-webkit-transform 0.7s;
	transition:transform 0.7s;
}


/* アニメーション設定 */

.loading{
	position:absolute;
	z-index:1;
	width:50px;
	height:50px;
	margin:0 auto;
	left:0;
	right:0;
	top:50%;	
}

.scene{
	visibility:hidden;	
}

.scene-no1{
	position:relative;
	z-index:1;
	left:0;
	top:0;	
}

.scene-no2{
	-webkit-transform:scale(0);	
	transform:scale(0);	
	-webkit-transition:-webkit-transform 1s;
	transition:transform 1s;
	-webkit-transform-origin:right bottom;
	transform-origin:right bottom;
}

.scene-no3{
	-webkit-transform:scale(0);	
	transform:scale(0);	
	-webkit-transition:-webkit-transform 1s;
	transition:transform 1s;
	-webkit-transform-origin:left bottom;
	transform-origin:left bottom;
}

.scene-no2.is-animated,
.scene-no3.is-animated{
	-webkit-transform:scale(1);	
	transform:scale(1);		
}


/* タブレット以下設定 */
@media screen and (max-width:939px){
	/* トップページ */
	.quizTop{
		margin-top:0;	
	}

	.quizTop_title{
		margin: 0 auto 24px;
		width: 62%;
	}

	.quizTop_explain{
		width:100%;
		-webkit-box-sizing:border-box;
		-moz-box-sizing:border-box;
		box-sizing:border-box;
		padding:21px;
		border-width:4px;
	}

	.quizTop_explain_title{
		margin:0 0 20px;	
	}
	
	.quizTop_explain_title img{
		max-width:34%;
	}

	.quizTop_explain_buttons{
		margin:20px 0;	
	}

	.quizTop_text-start{
		margin: 10% 0 0;
	}

	.quizTop_startButton{
		margin:4% auto 0;
		width:300px;
		height:53px;
		line-height:53px;
		border-radius:8px;
	}
	
	.quizTop_startButton img{
		width:205px;
	}

	.quizTop_explain_character{
		left:-80px;
		bottom:-50px;
		width:30%;
	}
	
	.quizTop_explain_fukidashi{
		right:-60px;
		bottom:10px;	
		width:26%;
	}

	.quizTop_explain_cursor{
		width:3.8%;
		right:11%;
		bottom:80px;	
	}

/* トップページ（こんにちわ） */

	.quizTop_hello_areaCharacter{
		margin: 0px 0 11%;
	}

	.quizTop_hello_character{
		padding:0;	
	}
	
	.quizTop_hello_fukidashi1{
		left: -6%;
		top: -6%;
		width: 36%;
	}	

	.quizTop_hello_fukidashi2{
		right: -6%;
		top: 25%;
		width: 29%;
	}	

	.quizTop_hello_text{
		margin-bottom: 0;	
		text-align: left;
	}
	
	.quizTop_howToPlayButton{
		width:70px;
		top:-50px;
		right:-10px;
	}	
	
	.areaQuiz_answerButtons li{
		display:inline-block;
		margin:0;	
	}
	
	.areaQuiz_answerButtons li a{
		width:150px;
		padding:10px 0;
		line-height:1.2;
		border-radius:8px;
	}
}

/* スマホ設定 */
@media screen and (max-width:639px){


	.quizTop_howToPlayButton{
		position:static;
		display:block;
		width:100%;
		margin:10px 0 0;
		border-radius:6px;
		background-image:-moz-linear-gradient(50% 0% -90deg,rgb(255,180,27) 0%,rgb(255,148,11) 100%); 
		background-image:-webkit-gradient(linear,50% 0%,50% 100%,color-stop(0, rgb(255,180,27)),color-stop(1, rgb(255,148,11)));
		background-image:-webkit-linear-gradient(-90deg,rgb(255,180,27) 0%,rgb(255,148,11) 100%);
		background-image:linear-gradient(180deg,rgb(255,180,27) 0%,rgb(255,148,11) 100%);
		height:auto;
		color:#fff;
		font-weight:bold;
		text-decoration:none;
		padding:5px 0;
		box-shadow:inset -3px -3px 2px rgba(0,0,0,.1);
	}
	
	.quizTop_howToPlayButton:hover{
		-webkit-transform:none;	
		transform:none;	
	}
	
	.quizTop_howToPlayButton:before{
		content:"あそびかた";
	}

	.quizTop_howToPlayButton img{
		display:none;
	}	
	
	.quizTop_startButton{
		width:100%;
		height:auto;
		line-height:1.2;
		border-radius:6px;
		padding:10px 0;
	}
	
	.quizTop_startButton img{
		width:160px;
	}
	
	.quizTop_explain{
		padding:10px;
		border-width:2px;
		border-radius:6px;
	}
	
	.quizTop_explain_title{
		margin:0 0 16px;	
	}

	.quizTop_explain_title img{
		max-width:45%;
	}

	.quizTop_explain_buttons{
		margin:20px 0;	
	}
	
	.quizTop_explain_buttons li{
		display:block;
		margin:0 0 5px;
	}	
	
	.quizTop_explain_buttons li a{
		width:100%;	
	}

	.quizTop_text-start{
		text-align:left;
	}

	.quizTop_explain_character{
		display:none;
	}

	.quizTop_explain_fukidashi{
		position:static;
		width:100%;
		height:auto;
	}
	
	.quizTop_explain_fukidashi img{
		display:none;	
	}
	
	.quizTop_explain_text{
		text-align:left;	
	}
	
	.quizTop_explain_fukidashi:before{
		color:#f00;
		content:"※答えをえらんでタップしてね！";
	}	

	.quizTop_explain_cursor{
		display:none;	
	}

	
}