@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 ==================== */
--colorYellow: rgba(252, 238, 33, 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(--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: 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) * 7/768);	left: 0;
	width: calc(var(--innerWidth) *  177/768);
	animation: var(--animationJumpA);
}
#titleArea .character_2
{
	position: absolute;
	top: calc(var(--innerWidth) * 7/768);	right: calc(var(--innerWidth) * 38/768);
	width: calc(var(--innerWidth) * 134/768);
	animation: var(--animationJumpB);
}

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





/* ================================================================================
gameArea
================================================================================ */
#gameArea
{
	position: relative;
	min-width: var(--innerWidth);
	background-color: var(--colorYellow);
	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) * 580/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);
}

#gameArea .cards
{
	display: flex;	flex-wrap: wrap;	justify-content: center;
	gap: calc(var(--innerWidth) * 25/768);
}
#gameArea .cards.lock{	pointer-events: none;	}

#gameArea .cards li
{
	position: relative;
	width: calc(var(--innerWidth) * 135/768);
}

#gameArea .cards li .face
{
	display: none;
	position: absolute;
	width: 100%;	height: 100%;
	top: 0;	left: 0;
}
#gameArea .cards li.paired{	animation: 0.5s ease-in-out 0s normal both beat;	}
#gameArea .cards li.tremble{	animation: 0.3s ease-in-out 0s normal both tremble;	}


#gameArea .cards li.turned .face,
#gameArea .cards li.paired .face
{	display: block;	}

#gameArea .cards li.open,
#gameArea .cards li.turned,
#gameArea .cards li.paired
{	pointer-events: none;	}

#gameArea .cards li.open{	animation: 0.5s ease-in-out 0s 1 normal both cardOpen;	}
#gameArea .cards li.close{	animation: 0.5s ease-in-out 0s 1 normal both cardClose;	}

#gameArea .cards li .pair
{
	position: absolute;
	top: 50%;	left: 50%;
	width: 130%;	height: 130%;
	transform: translate(-50%, -50%);
}


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

#gameArea > .inner
{
	width: 700px;
}

#gameArea .cards
{
	gap: calc(700px * 18/768);
	padding: calc(200px * 150/768) 0 0;
}
#gameArea .cards li
{
	position: relative;
	width: calc(700px * 113/768);
}

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

}



/* ================================================================================
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
{
	position: relative;
	width: calc(var(--innerWidth) * 700/768);	height: calc(var(--innerWidth) * 900/768);
}

#clearArea .dialog .dialogAnimation{	width: 100%;	height: 100%;	}


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

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


/* ================================================================================
animation
================================================================================ */
@keyframes cardOpen
{
	0%{	transform: scale(1,1);	}
	50%{	transform: scale(0,1);	}
	100%{	transform: scale(1,1);	}
}
@keyframes cardClose
{
	0%{	transform: scale(1,1);	}
	50%{	transform: scale(0,1);	}
	100%{	transform: scale(1,1);	}
}

@keyframes tremble
{
	from ,to{	transform: translate(0, 0);	}
	25%{	transform: translate(-5%, 0.5%);	}
	50%{	transform: translate(5%, -0.5%);	}
	75%{	transform: translate(-5%, 0.5%);	}
}



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