@charset "UTF-8";


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


/* ==================== var ==================== */
--innerWidth: 640px;
--headerHeight: calc(var(--innerWidth) * 0.24);

--innerPadding: 50px;

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

--animationBeat: 1s linear 0s infinite both beat;


/* ==================== color ==================== */
--colorYellow: rgba(252, 238, 33, 1.0);
--colorGreen: rgba(100, 185, 90, 1.0);



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


/* ==================== var ==================== */
--innerWidth: 100vw;
--headerHeight: 24vw;

--innerPadding: 5vw;


}
}



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

.main
{
	width: 100%;	max-width: 100%;
	padding: 0;
	background-color: var(--colorGreen);
}

.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);	}
}



/* ================================================================================
index
================================================================================ */
#index
{
	position: relative;
	min-width: var(--innerWidth);

	background: url("../images/index/backgroundB.webp") repeat-x center center/ contain;

	overflow: hidden;
}
#index > .inner
{
	position: relative;
	width: var(--innerWidth);

	padding: 0 0 calc(var(--innerWidth) * 40/768);
	margin: 0 auto;

	background: url("../images/index/background.webp") no-repeat center/cover;
}

#index .flag
{
	margin: 0 0 calc(var(--innerWidth) * 20/768);
}
#index h1
{
	width: calc(var(--innerWidth) * 660/768);
	margin: 0 auto calc(var(--innerWidth) * 680/768);;
}

#index .gameButton
{
	position: absolute;

	width: calc(var(--innerWidth) * 200/768);
	height: calc(var(--innerWidth) * 200/768);
}
#index .gameButton{	animation: var(--animationBeat);	}
#index .gameButton a{	transition: none;	}
#index .gameButton.game01{	top: calc(var(--innerWidth) * 430/768);	left: calc(var(--innerWidth) * 55/768);	}
#index .gameButton.game02{	top: calc(var(--innerWidth) * 820/768);	left: calc(var(--innerWidth) * 320/768);	}
#index .gameButton.game03{	top: calc(var(--innerWidth) * 470/768);	left: calc(var(--innerWidth) * 525/768);	}

#index .gameButton a:hover{	opacity: 1;	}

#index .backButton
{
	width: calc(var(--innerWidth) * 400/768);
	margin: 0 auto;
}




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