@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;

/* ==================== color ==================== */
--colorOrange: rgba(251, 176, 59, 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;
	background-color: var(--colorOrange);
}

.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: 50%;
	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) * 20/768);	left: calc(var(--innerWidth) * 40/768);
	width: calc(var(--innerWidth) *  130/768);
	animation: var(--animationJumpA);
}
#titleArea .character_2
{
	position: absolute;
	top: calc(var(--innerWidth) * 18/768);	right: calc(var(--innerWidth) * 38/768);
	width: calc(var(--innerWidth) * 140/768);
	animation: var(--animationJumpB);
}

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





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

/* ========== head ========== */
#gameArea .head
{
	display: flex;	justify-content: center;	align-items: center;
	height: calc(var(--innerWidth) * 200/768);
}
#gameArea h2
{
	width: calc(var(--innerWidth) * 528/768);
	padding: calc(var(--innerWidth) * 45/768) 0;
}

/* ========== 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);	}

/* ========== main ========== */
#gameArea .main
{
	position: relative;
	height: calc(var(--innerWidth) * 850/768);
	padding: calc(var(--innerWidth) * 30/768) 0 0;
}
#gameArea.standby .main{	cursor: pointer;	}

#gameArea .startButton
{
	z-index: 10;
	position: absolute;
	bottom: calc(var(--innerWidth) * 70/768);;	right: calc(var(--innerWidth) * 20/768);
	width: calc(var(--innerWidth) * 220/768);

	cursor: pointer;
	opacity: 0;
	pointer-events: none;
	transition: var(--transition03);
}
#gameArea.standby .startButton
{
	animation: var(--animationBeat);
	opacity: 1;
	pointer-events: all;
}

#gameArea .fortuneBox
{
	z-index: 5;
	position: relative;
	width: calc(var(--innerWidth) * 424/768);
	margin: 0 auto;
	transform: translate(0, -2%) rotate(20deg) scale(1.02);
}

#gameArea.standby .fortuneBox{	animation: 4s linear 2s infinite both standby;	}
#gameArea.shake_1 .fortuneBox{	animation: 2s linear 0s 1 both shake_1;	}
#gameArea.shake_2 .fortuneBox{	animation: 3s linear 0s 1 both shake_2;	}
#gameArea.shake_3 .fortuneBox{	animation: 3s linear 0s 1 both shake_3;	}


#gameArea .wave_1
{
	z-index: 5;
	position: absolute;
	top: calc(var(--innerWidth) * 0/768);	left: calc(var(--innerWidth) * 45/768);
	display: none;
	width: calc(var(--innerWidth) * 100/768);
}
#gameArea .wave_2
{
	z-index: 5;
	position: absolute;
	bottom: calc(var(--innerWidth) * 285/768);	right: calc(var(--innerWidth) * 45/768);
	display: none;
	width: calc(var(--innerWidth) * 80/768);
}
#gameArea.standby .wave_1{	display: block;	animation: 4s linear 2s infinite both standbyWave_1;	}
#gameArea.standby .wave_2{	display: block;	animation: 4s linear 2s infinite both standbyWave_2;	}

#gameArea.shake_1 .wave_1{	display: block;	animation: 0.8s linear 0.5s 2 both shakeWave_1;	}
#gameArea.shake_1 .wave_2{	display: block;	animation: 0.8s linear 0.5s 2 both shakeWave_2;	}
#gameArea.shake_2 .wave_1{	display: block;	animation: 0.5s linear 0.4s 5 both shakeWave_1;	}
#gameArea.shake_2 .wave_2{	display: block;	animation: 0.5s linear 0.4s 5 both shakeWave_2;	}
#gameArea.shake_3 .wave_1{	display: block;	animation: 0.5s linear 0.4s 5 both shakeWave_1;	}
#gameArea.shake_3 .wave_2{	display: block;	animation: 0.5s linear 0.4s 5 both shakeWave_2;	}


#gameArea .bar
{
	z-index: 10;
	position: absolute;
	top: calc(var(--innerWidth) * -175/768);	right: calc(var(--innerWidth) * -10/768);
	width: calc(var(--innerWidth) * 330/768);
}


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

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

}


@keyframes standby
{
	from, 50%, to{	transform: translate(0, 0) rotate(0) scale(1.0);	}

	15%, 25%, 35%{	transform: translate(0, -2%) rotate(0deg) scale(1.02);	}
	20%, 30%{	transform: translate(0, 2%) rotate(0deg) scale(1.02);	}
}
@keyframes standbyWave_1
{
	from, 50%, to{	opacity: 0;	}

	18%, 27%{	opacity: 0;	}
	20%, 25%{	opacity: 1;	}
}
@keyframes standbyWave_2
{
	from, 50%, to{	opacity: 0;	}

	28%, 37%{	opacity: 0;	}
	30%, 35%{	opacity: 1;	}
}

@keyframes shakeWave_1
{
	from, 50%, to{	opacity: 0;	}
	10%, 40%{	opacity: 1;	}
}
@keyframes shakeWave_2
{
	from, 50%, to{	opacity: 0;	}
	60%, 90%{	opacity: 1;	}
}


@keyframes shake_1
{
	from{	transform: translate(0, 0) rotate(0) scale(1.0);	}
	to{	transform: translate(0, -2%) rotate(20deg) scale(1.02);	}

	20%, 40%, 60%, 80%{	transform: translate(0, -2%) rotate(20deg) scale(1.01);	}
	30%, 50%, 70%, 90%{	transform: translate(0, 2%) rotate(20deg) scale(1.03);	}
}
@keyframes shake_2
{
	from{	transform: translate(0, 0) rotate(0) scale(1.0);	}
	to{	transform: translate(0, -2%) rotate(20deg) scale(1.02);	}

	35%, 45%, 75%, 85%{	transform: translate(0, -3%) rotate(20deg) scale(1.01);	}
	40%, 50%, 80%, 90%{	transform: translate(0, 3%) rotate(20deg) scale(1.03);	}
	15%, 25%, 55%, 65%{	transform: translate(-3%, -3%) rotate(20deg) scale(1.01);	}
	20%, 30%, 60%, 70%{	transform: translate(3%, -3%) rotate(20deg) scale(1.03);	}
}
@keyframes shake_3
{
	from{	transform: translate(0, 0) rotate(0) scale(1.0);	}
	to{	transform: translate(0, -2%) rotate(20deg) scale(1.02);	}

	35%, 45%, 75%, 85%{	transform: translate(0, -3%) rotate(20deg) scale(1.01);	}
	40%, 50%, 80%, 90%{	transform: translate(0, 3%) rotate(20deg) scale(1.05);	}
	15%, 25%, 55%, 65%{	transform: translate(0, -3%) rotate(-20deg) scale(1.01);	}
	20%, 30%, 60%, 70%{	transform: translate(0, 3%) rotate(-20deg) scale(1.05);	}
}

@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;	}
}




/* ================================================================================
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;	}


.clear #clearArea .result{	animation: 0.5s linear 0s 1 both bounceIn;	}
#clearArea .dialog .result
{
	width: calc(var(--innerWidth) * 380/768);
	margin: 0 auto calc(var(--innerWidth) * 20/768);
}

#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 ======================================== */