@charset "UTF-8";


/* ================================================================================
common
================================================================================ */
:root
{


/* ==================== var ==================== */
--innerWidth: 460px;

--transition03: 0.3s ease-in-out 0s;
--transition05: 0.5s ease-in-out 0s;

--animationBeat: 1s linear 0s infinite both beat;
--animationJumpA: 3s linear 0s infinite both jump;
--animationJumpB: 3s linear 0.5s infinite both jump;
--animationJumpC: 3s linear 0.5s 1 both jump;
--animationJumpD: 3s linear 0.8s 1 both jump;


/* ==================== color ==================== */
--colorRed: rgba(255, 0, 0, 1);
--colorGreen: rgba(228, 234, 118, 1.0);
--colorPink: rgba(242, 170, 122, 1.0);
--colorBlue: rgba(229, 245, 252, 1.0);
--colorYellow: rgba(255, 225, 3, 1.0);



--colorGreenLight: rgba(246, 247, 200, 1.0);



}
/* ========================================
SP
======================================== */
@media screen and (max-width: 767px)
{
:root
{

--innerWidth: 100vw;

}
}



a, button{	transition: none;	}
a:hover, button:hover{	opacity: 1;	}

picture{	display: block;	}
picture img
{
	width: 100%;	height: 100%;
	object-fit: contain;
}


.main
{
	position: relative;
	width: 100%;	max-width: 100%;
	padding: 0;
}
.blue .main{	background-color: var(--colorBlue);	}
.pink .main{	background-color: var(--colorPink);	}
.green .main{	background-color: var(--colorGreen);	}
.yellow .main{	background-color: var(--colorYellow);	}

.main .snsList
{
	justify-content: center;
	padding: calc(var(--innerWidth) * 0.05) 0;
	background-color: white;
}


/* ================================================================================
animation
================================================================================ */
@keyframes beat
{
	from, to{	transform: translate(0, 0) rotate(0) scale(1.0);	}
	25%, 75%{	transform: translate(0, 0) rotate(0) scale(1.03);	}
	50%{	transform: translate(0, 0) rotate(0) scale(1.00);	}
}

@keyframes jump
{
	from, 50%, to{	transform: translate(0, 0) rotate(0) scale(1, 1);	}
	10%, 40%{	transform: translate(0, 5%) rotate(0) scale(1.02, 0.98);	}
	25%{	transform: translate(0, -5%) rotate(0) scale(0.99, 1.00);	}
}



/* ================================================================================
titleArea
================================================================================ */
#titleArea
{
	position: relative;
	min-width: var(--innerWidth);
	background-color: white;
	overflow: hidden;
}
#titleArea > .inner
{
	position: relative;
	width: var(--innerWidth);	height: calc(var(--innerWidth) * 182/768);
	margin: 0 auto;
}

#titleArea h1
{
	position: absolute;
	top: 50%;	left: 40%;
	height: calc(var(--innerWidth) * 74/768);
	transform: translate(-50%, -50%);
}
#titleArea h1 picture{	width: 100%;	height: 100%;	}


#titleArea .character_1
{
	position: absolute;
	top: calc(var(--innerWidth) * 15/768);	right: calc(var(--innerWidth) * 40/768);
	width: calc(var(--innerWidth) *  150/768);
	animation: var(--animationJumpA);
}

#titleArea .front
{
	position: absolute;
	bottom: 0;
	width: 100%;	height: calc(var(--innerWidth) * 30/768);
	background: url("../images/game03/titleArea_front.webp") repeat-X center/contain;
}

.blue #titleArea .front{	background: url("../images/game03/titleArea_front_blue.webp") repeat-X center/contain;	}
.pink #titleArea .front{	background: url("../images/game03/titleArea_front_pink.webp") repeat-X center/contain;	}
.green #titleArea .front{	background: url("../images/game03/titleArea_front_green.webp") repeat-X center/contain;	}
.yellow #titleArea .front{	background: url("../images/game03/titleArea_front_yellow.webp") repeat-X center/contain;	}




/* ================================================================================
gameArea
================================================================================ */
#gameArea
{
	position: relative;
	min-width: var(--innerWidth);
	background-color: var(--colorGreen);
	overflow: hidden;
}
.clear #gameArea .main{	pointer-events: none;	}

.blue #gameArea{	background-color: var(--colorBlue);	}
.pink #gameArea{	background-color: var(--colorPink);	}
.green #gameArea{	background-color: var(--colorGreen);	}
.yellow #gameArea{	background-color: var(--colorYelloe);	}

#gameArea > .inner
{
	width: var(--innerWidth);
	margin: 0 auto;
}

/* ========== main ========== */
#gameArea .main
{
	position: relative;
	height: calc(var(--innerWidth) * 1050/768);
}
/* ========== foot ========== */
#gameArea .foot
{
	display: flex;	justify-content: center;	align-items: center;
	height: calc(var(--innerWidth) * 168/768);
}
#gameArea .backButton
{
	z-index: 50;
	position: absolute;
	bottom: calc(var(--innerWidth) * 20/768);
	right: calc(var(--innerWidth) * 20/768);

	width: calc(var(--innerWidth) * 200/768);
	transition: none;
}
#gameArea .backButton:hover{	animation: var(--animationBeat);	}

/* ========== SC ========== */
#gameArea .SC
{
	position: absolute;
	top: 0;	left: 0;
	width: 100%;	height: 100%;
}


/* ========== start ========== */
#gameArea .SC.start
{
	opacity: 0;
	transition: var(--transition03);
	transition-property: opacity;
	pointer-events: none;
}
.start #gameArea .SC.start{	opacity: 1;	pointer-events: all;	}

#gameArea .SC.start h2
{
	position: absolute;
	top: calc(var(--innerWidth) * 20/768);	left: 0;
	width: 100%;
}
#gameArea .SC.start .quiz
{
	position: absolute;
	top: calc(var(--innerWidth) * 190/768);	left: 0;
	width: 100%;
}
#gameArea .SC.start .character
{
	position: absolute;
	bottom: calc(var(--innerWidth) * 10/768);
	left: calc(var(--innerWidth) * 40/768);
	width: calc(var(--innerWidth) * 320/768);
}
#gameArea .SC.start .startButton
{
	position: absolute;
	top: calc(var(--innerWidth) * 680/768);
	right: calc(var(--innerWidth) * 40/768);
	width: calc(var(--innerWidth) * 270/768);

	cursor: pointer;
}
#gameArea .SC.start .startButton{	animation: var(--animationBeat);	}
#gameArea.standby .main{	cursor: pointer;	}

/* ========== between ========== */
#gameArea .SC.between
{
	opacity: 0;
	transition: var(--transition03);
	transition-property: opacity;
	pointer-events: none;
}
.between_1 #gameArea .SC.between_1,
.between_2 #gameArea .SC.between_2,
.between_3 #gameArea .SC.between_3
{	opacity: 1;	}

#gameArea .SC.between .number
{
	position: absolute;
	top: calc(var(--innerWidth) * 250/768);	left: 0;
	width: 100%;
}
#gameArea .SC.between .character_1
{
	position: absolute;
	bottom: calc(var(--innerWidth) * 10/768);
	left: calc(var(--innerWidth) * 110/768);
}
#gameArea .SC.between .character_2
{
	position: absolute;
	bottom: calc(var(--innerWidth) * 10/768);
	right: calc(var(--innerWidth) * 110/768);
}
#gameArea .SC.between_1 .character_1{	width: calc(var(--innerWidth) * 290/768);	}
#gameArea .SC.between_1 .character_2{	width: calc(var(--innerWidth) * 210/768);	}
#gameArea .SC.between_2 .character_1{	width: calc(var(--innerWidth) * 218/768);	}
#gameArea .SC.between_2 .character_2{	width: calc(var(--innerWidth) * 335/768);	}
#gameArea .SC.between_3 .character_1{	width: calc(var(--innerWidth) * 245/768);	}
#gameArea .SC.between_3 .character_2{	width: calc(var(--innerWidth) * 280/768);	}


.between_1 #gameArea .SC.between .character_1,
.between_2 #gameArea .SC.between .character_1,
.between_3 #gameArea .SC.between .character_1
{	animation: var(--animationJumpC);	}
.between_1 #gameArea .SC.between .character_2,
.between_2 #gameArea .SC.between .character_2,
.between_3 #gameArea .SC.between .character_2
{	animation: var(--animationJumpD);	}


/* ========== quiz ========== */
#gameArea .SC.quiz
{
	opacity: 0;
	transition: var(--transition03);
	transition-property: opacity;
	pointer-events: none;
}

/*
#gameArea .SC.quiz h2
{
	z-index: 5;
	position: absolute;
	top: calc(var(--innerWidth) * 20/768);	left: 0;
	width: 100%;
	opacity: 0;
	transition: var(--transition03);
	transition-property: opacity;
}
 */

#gameArea .SC.quiz .correct,
#gameArea .SC.quiz .fault
{
	z-index: 5;
	position: absolute;
	top: calc(var(--innerWidth) * 50/768);	left: 0;
	width: 100%;
	opacity: 0;
}

#gameArea .SC.quiz .character
{
	z-index: 5;
	position: absolute;
	top: calc(var(--innerWidth) * 190/768);	left: 0;
	width: 100%;
}

#gameArea .SC.quiz .smoke
{
	z-index: 10;
	position: absolute;
	width: calc(var(--innerWidth) * 512/768);
	opacity: 0;
}
#gameArea .SC.quiz_1_1 .smoke{	top: calc(var(--innerWidth) * 320/768);	left: calc(var(--innerWidth) * -40/768);	}
#gameArea .SC.quiz_1_2 .smoke{	top: calc(var(--innerWidth) * 260/768);	left: calc(var(--innerWidth) * -70/768);	}
#gameArea .SC.quiz_1_3 .smoke{	top: calc(var(--innerWidth) * 285/768);	left: calc(var(--innerWidth) * -55/768);	}
#gameArea .SC.quiz_2_1 .smoke{	top: calc(var(--innerWidth) * 290/768);	left: calc(var(--innerWidth) * 0/768);	}
#gameArea .SC.quiz_2_2 .smoke{	top: calc(var(--innerWidth) * 380/768);	left: calc(var(--innerWidth) * -10/768);	}
#gameArea .SC.quiz_2_3 .smoke{	top: calc(var(--innerWidth) * 290/768);	left: calc(var(--innerWidth) * 0/768);	}
#gameArea .SC.quiz_3_1 .smoke{	top: calc(var(--innerWidth) * 360/768);	left: calc(var(--innerWidth) * -30/768);	}
#gameArea .SC.quiz_3_2 .smoke{	top: calc(var(--innerWidth) * 260/768);	left: calc(var(--innerWidth) * -70/768);	}
#gameArea .SC.quiz_3_3 .smoke{	top: calc(var(--innerWidth) * 315/768);	left: calc(var(--innerWidth) * 0/768);	}



#gameArea .time
{
	z-index: 5;
	position: absolute;
	top: calc(var(--innerWidth) * 840/768);
	left: calc(var(--innerWidth) * (768 - 690) / 2 /768);
	width: calc(var(--innerWidth) * 690/768);

	transition: var(--transition03);
	transition-property: opacity;
	opacity: 0;
}
#gameArea .time .text_1
{
	width: calc(var(--innerWidth) * 185/768);
	margin: 0 0 calc(var(--innerWidth) * 10/768);
}
#gameArea .time .bar
{
	height: calc(var(--innerWidth) * 50/768);
	border: calc(var(--innerWidth) * 6/768) solid var(--colorRed);
	border-radius: calc(var(--innerWidth) * 50/768);

	background: linear-gradient(90deg,
		var(--colorRed) 0%,	var(--colorRed) 50%,
		white 50%,	white 100%
	);
	background-size: 204% 100%;
	background-position: 100% 0%;
}

#gameArea .SC.quiz .text_2,
#gameArea .SC.quiz .text_3
{
	z-index: 5;
	position: absolute;
	top: calc(var(--innerWidth) * 100/768);	left: 0;
	width: 100%;

	transform: translate(0, -50%);

	transition: var(--transition03);
	transition-property: opacity;
	opacity: 0;
}
#gameArea .SC.quiz .text_3{	transition-delay: 0s;	}


#gameArea .SC.quiz .selects
{
	z-index: 5;
	position: absolute;
	top: calc(var(--innerWidth) * 800/768);	left: 0;

	display: flex;	justify-content: center;
	width: 100%;
}
#gameArea .SC.quiz .selects .select
{
	/* position: relative; */
	width: calc(var(--innerWidth) * 200/768);
	cursor: pointer;
	opacity: 0;
	transition: var(--transition03);
	transform: translate(0,0) scale(1);
	/* transition-property: opacity; */
	pointer-events: none;
}
#gameArea .SC.quiz .selects .select:nth-child(1){	transition-delay: 2s;	}
#gameArea .SC.quiz .selects .select:nth-child(2){	transition-delay: 2.5s;	}
#gameArea .SC.quiz .selects .select:nth-child(3){	transition-delay: 3.0s;	}
#gameArea .SC.quiz .selects .select:hover{	animation: var(--animationBeat);	}


#gameArea .SC.quiz .correctPattern{	position: absolute;	top: 0;	left: 0;	width: 100%;	height: 100%;	}
#gameArea .SC.quiz .correctPattern li
{
	position: absolute;
	background: url("../images/game03/answer_correct_acc.webp") no-repeat center/contain;
	opacity: 0;
}
#gameArea .SC.quiz .correctPattern li:nth-child(1)
{
	top: calc(var(--innerWidth) * 50/768);	left: calc(var(--innerWidth) * -80/768);
	width: calc(var(--innerWidth) * 250/768);	height: calc(var(--innerWidth) * 250/768);
}
#gameArea .SC.quiz .correctPattern li:nth-child(2)
{
	top: calc(var(--innerWidth) * 20/768);	right: calc(var(--innerWidth) * 10/768);
	width: calc(var(--innerWidth) * 330/768);	height: calc(var(--innerWidth) * 330/768);
}
#gameArea .SC.quiz .correctPattern li:nth-child(3)
{
	top: calc(var(--innerWidth) * 480/768);	left: calc(var(--innerWidth) * -80/768);
	width: calc(var(--innerWidth) * 330/768);	height: calc(var(--innerWidth) * 330/768);
}
#gameArea .SC.quiz .correctPattern li:nth-child(4)
{
	top: calc(var(--innerWidth) * 370/768);	right: calc(var(--innerWidth) * -200/768);
	width: calc(var(--innerWidth) * 250/768);	height: calc(var(--innerWidth) * 250/768);
}
#gameArea .SC.quiz .correctPattern li:nth-child(5)
{
	top: calc(var(--innerWidth) * 650/768);	right: calc(var(--innerWidth) * 50/768);
	width: calc(var(--innerWidth) * 250/768);	height: calc(var(--innerWidth) * 250/768);
}


#gameArea .SC.quiz .faultPattern{	position: absolute;	top: 0;	left: 0;	width: 100%;	height: 100%;	}
#gameArea .SC.quiz .faultPattern li
{
	position: absolute;
	background: url("../images/game03/answer_fault_acc.webp") no-repeat center/contain;
	opacity: 0;
}
#gameArea .SC.quiz .faultPattern li:nth-child(1)
{
	top: calc(var(--innerWidth) * 110/768);	left: calc(var(--innerWidth) * -30/768);
	width: calc(var(--innerWidth) * 250/768);	height: calc(var(--innerWidth) * 250/768);
}
#gameArea .SC.quiz .faultPattern li:nth-child(2)
{
	top: calc(var(--innerWidth) * 20/768);	right: calc(var(--innerWidth) * 0/768);
	width: calc(var(--innerWidth) * 180/768);	height: calc(var(--innerWidth) * 180/768);
}
#gameArea .SC.quiz .faultPattern li:nth-child(3)
{
	top: calc(var(--innerWidth) * 600/768);	left: calc(var(--innerWidth) * -75/768);
	width: calc(var(--innerWidth) * 240/768);	height: calc(var(--innerWidth) * 240/768);
}
#gameArea .SC.quiz .faultPattern li:nth-child(4)
{
	top: calc(var(--innerWidth) * 280/768);	right: calc(var(--innerWidth) * -70/768);
	width: calc(var(--innerWidth) * 320/768);	height: calc(var(--innerWidth) * 320/768);
}
#gameArea .SC.quiz .faultPattern li:nth-child(5)
{
	top: calc(var(--innerWidth) * 650/768);	right: calc(var(--innerWidth) * 60/768);
	width: calc(var(--innerWidth) * 250/768);	height: calc(var(--innerWidth) * 250/768);
}
#gameArea .SC.quiz .faultPattern li:nth-child(6)
{
	top: calc(var(--innerWidth) * 0/768);	left: calc(var(--innerWidth) * 170/768);
	width: calc(var(--innerWidth) * 160/768);	height: calc(var(--innerWidth) * 160/768);
}
#gameArea .SC.quiz .faultPattern li:nth-child(7)
{
	top: calc(var(--innerWidth) * 650/768);	right: calc(var(--innerWidth) * -60/768);
	width: calc(var(--innerWidth) * 160/768);	height: calc(var(--innerWidth) * 160/768);
}

.learn_1_1 #gameArea .SC.quiz_1_1,	.quiz_1_1 #gameArea .SC.quiz_1_1,	.answer_1_1 #gameArea .SC.quiz_1_1,
.learn_1_2 #gameArea .SC.quiz_1_2,	.quiz_1_2 #gameArea .SC.quiz_1_2,	.answer_1_2 #gameArea .SC.quiz_1_2,
.learn_1_3 #gameArea .SC.quiz_1_3,	.quiz_1_3 #gameArea .SC.quiz_1_3,	.answer_1_3 #gameArea .SC.quiz_1_3,
.learn_2_1 #gameArea .SC.quiz_2_1,	.quiz_2_1 #gameArea .SC.quiz_2_1,	.answer_2_1 #gameArea .SC.quiz_2_1,
.learn_2_2 #gameArea .SC.quiz_2_2,	.quiz_2_2 #gameArea .SC.quiz_2_2,	.answer_2_2 #gameArea .SC.quiz_2_2,
.learn_2_3 #gameArea .SC.quiz_2_3,	.quiz_2_3 #gameArea .SC.quiz_2_3,	.answer_2_3 #gameArea .SC.quiz_2_3,
.learn_3_1 #gameArea .SC.quiz_3_1,	.quiz_3_1 #gameArea .SC.quiz_3_1,	.answer_3_1 #gameArea .SC.quiz_3_1,
.learn_3_2 #gameArea .SC.quiz_3_2,	.quiz_3_2 #gameArea .SC.quiz_3_2,	.answer_3_2 #gameArea .SC.quiz_3_2,
.learn_3_3 #gameArea .SC.quiz_3_3,	.quiz_3_3 #gameArea .SC.quiz_3_3,	.answer_3_3 #gameArea .SC.quiz_3_3,
.learn #gameArea .SC.quiz h2,	.quiz #gameArea .SC.quiz h2,
.learn #gameArea .SC.quiz .text_2,
.learn #gameArea .time,
.quiz #gameArea .SC.quiz .text_3,
.quiz #gameArea .SC.quiz .selects .select,	.answer #gameArea .SC.quiz .selects .select
{	opacity: 1;	}

.learn #gameArea .time .bar{	animation: 3s linear 1s 1 both timeReduce;	}
.quiz #gameArea .SC.quiz .smoke{	animation: 0.3s linear 0s 1 both bounceIn;	}
.quiz #gameArea .SC.quiz .selects .select{	pointer-events: all;	}


.answer #gameArea .SC.quiz .smoke{	animation: 0.3s linear 1s 1 both bounceOut;	}


.answer.selected_1 #gameArea .SC.quiz .selects .select_2
{
	transform: translate(10%, 25%) scale(0.8);
	transition-delay: 0.2s;
}
.answer.selected_3 #gameArea .SC.quiz .selects .select_2
{
	transform: translate(-10%, 25%) scale(0.8);
	transition-delay: 0.2s;
}
.answer.selected_1 #gameArea .SC.quiz .selects .select_3,
.answer.selected_2 #gameArea .SC.quiz .selects .select_3,
.answer.selected_3 #gameArea .SC.quiz .selects .select_1,
.answer.selected_2 #gameArea .SC.quiz .selects .select_1
{
	transform: translate(0%, 25%) scale(0.8);
	transition-delay: 0.2s;
}

.answer.selected_1 #gameArea .SC.quiz .selects .select_1,
.answer.selected_2 #gameArea .SC.quiz .selects .select_2,
.answer.selected_3 #gameArea .SC.quiz .selects .select_3
{	z-index: 10;	animation: 0.3s linear 0.2s 1 both selected;	}


.answer.correct #gameArea .SC.quiz .correct,
.answer.fault #gameArea .SC.quiz .fault
{	animation: 0.3s linear 1s 1 both bounceIn;	}

.answer.correct #gameArea .SC.quiz .correctPattern li:nth-child(1){	animation: 0.3s ease-out 1s 1 both bounceIn;	}
.answer.correct #gameArea .SC.quiz .correctPattern li:nth-child(2){	animation: 0.3s ease-out 1.3s 1 both bounceIn;	}
.answer.correct #gameArea .SC.quiz .correctPattern li:nth-child(3){	animation: 0.3s ease-out 1.2s 1 both bounceIn;	}
.answer.correct #gameArea .SC.quiz .correctPattern li:nth-child(4){	animation: 0.3s ease-out 1.4s 1 both bounceIn;	}
.answer.correct #gameArea .SC.quiz .correctPattern li:nth-child(5){	animation: 0.3s ease-out 1.1s 1 both bounceIn;	}

.answer.fault #gameArea .SC.quiz .faultPattern li:nth-child(1){	animation: 1s ease-out 1s 1 both tearDrop;	}
.answer.fault #gameArea .SC.quiz .faultPattern li:nth-child(2){	animation: 1s ease-out 1.3s 1 both tearDrop;	}
.answer.fault #gameArea .SC.quiz .faultPattern li:nth-child(3){	animation: 1s ease-out 1.2s 1 both tearDrop;	}
.answer.fault #gameArea .SC.quiz .faultPattern li:nth-child(4){	animation: 1s ease-out 1.4s 1 both tearDrop;	}
.answer.fault #gameArea .SC.quiz .faultPattern li:nth-child(5){	animation: 1s ease-out 1.1s 1 both tearDrop;	}
.answer.fault #gameArea .SC.quiz .faultPattern li:nth-child(6){	animation: 1s ease-out 1.5s 1 both tearDrop;	}
.answer.fault #gameArea .SC.quiz .faultPattern li:nth-child(7){	animation: 1s ease-out 1.6s 1 both tearDrop;	}


/* ========================================
PC
======================================== */
@media screen and (min-width: 768px)
{

#gameArea .backButton
{
	width: calc(var(--innerWidth) * 300/768);
}

}



@keyframes characterClose
{
	from{	width: calc(var(--innerWidth) * 768/768);	height: calc(var(--innerWidth) * 768/768);	}
	to{	width: 0;	height: 0;	}
}
@keyframes characterOpen
{
	from{	width: 0;	height: 0;	}
	to{	width: calc(var(--innerWidth) * 768/768);	height: calc(var(--innerWidth) * 768/768);	}
}

@keyframes bounceIn
{
	from{	transform: scale(0.6);	opacity: 0;	}
	60%{	transform: scale(1.03);	opacity: 1;	}
	80%{	transform: scale(0.98);	opacity: 1;	}
	to{	transform: scale(1.0);	opacity: 1;	}
}
@keyframes bounceOut
{
	from{	transform: scale(1.0);	opacity: 1;	}
	20%{	transform: scale(0.98);	opacity: 1;	}
	to{	transform: scale(1.5);	opacity: 0;	}
}
@keyframes tearDrop
{
	from{	transform: translate(0, -20%) scale(0.8);	opacity: 0;	}
	to{	transform: translate(0, 0) scale(1.0);	opacity: 1;	}
}

@keyframes selected
{
	from{	transform: translate(0%, 0%) scale(1.0);	}
	10%{	transform: translate(0%, 0%) scale(0.98);	}
	60%{	transform: translate(0%, 10%) scale(1.33);	}
	80%{	transform: translate(0%, 10%) scale(1.28);	}
 	to{	transform: translate(0%, 10%) scale(1.30);	}
}



@keyframes timeReduce
{
	from{	background-position: 0% 0%;	}
	to{	background-position: 100% 0%;	}
}


/* ================================================================================
clearArea
================================================================================ */
#clearArea
{
	z-index: 20;
	position: absolute;
	top: 0;	left: 0;

	width: 100%;	height: calc(var(--innerWidth) * 1400/768);
	min-width: var(--innerWidth);

	overflow: hidden;
	opacity: 0;

	transition: var(--transition03);
	transition-property: opacity;

	pointer-events: none;
}
.clear #clearArea
{
	opacity: 1;
	pointer-events: all;
}


#clearArea > .inner
{
	position: relative;
	display: flex;	justify-content: center;	align-items: center;
	width: var(--innerWidth);	height: 100%;
	margin: 0 auto;
}


#clearArea .background
{
	position: absolute;
	top: 0%;	left: 0%;

	width: 100%;	height: 100%;
}
#clearArea .background picture{	width: 100%;	height: 100%;	}
#clearArea .background img{	object-fit: cover;	}


#clearArea .dialog
{
	width: calc(var(--innerWidth) * 700/768);	height: calc(var(--innerWidth) * 700/768 * 2200/1500);
	padding: calc(var(--innerWidth) * 840/768) 0 0;
	margin: 0 auto;
}
.clear #clearArea .dialog{	animation: 0.5s linear 0s 1 both bounceIn;	}

#clearArea .dialog.correct_0{	background: url("../images/game03/correct_0.webp") no-repeat center/contain;	}
#clearArea .dialog.correct_1{	background: url("../images/game03/correct_1.webp") no-repeat center/contain;	}
#clearArea .dialog.correct_2{	background: url("../images/game03/correct_2.webp") no-repeat center/contain;	}
#clearArea .dialog.correct_3{	background: url("../images/game03/correct_3.webp") no-repeat center/contain;	}


#clearArea .dialog .retryButton
{
	width: calc(var(--innerWidth) * 400/768);
	margin: 0 auto calc(var(--innerWidth) * 20/768);
}
#clearArea .dialog .retryButton:hover{	animation: var(--animationBeat);	}

#clearArea .dialog .backButton
{
	width: calc(var(--innerWidth) * 400/768);
	margin: 0 auto;
}
#clearArea .dialog .backButton:hover{	animation: var(--animationBeat);	}







/* ======================================== end ======================================== */