@charset "UTF-8";

@media (orientation: landscape) and (max-width: 1020px){

	:root {
		--img-loading-bar: url("../img/img-loading-bar.png");
		--img-title-bg-tab: url("../img/bg-desktop-tab.png");
		--img-game-bg-tab: url("../img/bg-desktop-tab.png");
		--img-next-bg-tab: url("../img/bg-desktop-tab.png");
		--img-end-bg-tab: url("../img/bg-desktop-tab.png");
	}

	* {
		font-family: 'M PLUS Rounded 1c', sans-serif;
	}

	body {
		overflow: hidden;
		background: #B9E6FA;
	}

	#container {
		position: relative;
		width:100%;
		height: calc(var(--vh, 1vh) * 100);
		margin:auto;
		overflow: hidden;
	}

	.page {
		position: absolute;
		width: 100%;
		height: calc(var(--vh, 1vh) * 100);
	}

	.page-content-wrapper {
		position: absolute;
		top: 0;
		width: 100%;
		height: calc(var(--vh, 1vh) * 100);
	}

	.btn-selected {
		border: 2px groove #F00;
		z-index: 999;
	}

	/********************************************************************************
	* flag
	********************************************************************************/

	.img-flag-left {
		position: absolute;
		left: calc(var(--vh, 1vh) * -25);
		top: calc(var(--vh, 1vh) * -5);
		width: calc(var(--vh, 1vh) * 60);
		z-index: 9999;
	}

	.img-flag-right {
		position: absolute;
		right: calc(var(--vh, 1vh) * -25);
		top: calc(var(--vh, 1vh) * -5);
		width: calc(var(--vh, 1vh) * 60);
		z-index: 9999;
	}

	/********************************************************************************
	* sound button
	********************************************************************************/

	.btn-sound {
		position: absolute;
		left: calc(var(--vh, 1vh) * -9);
		top: calc(var(--vh, 1vh) * -11);
		width: calc(var(--vh, 1vh) * 30);
		z-index: 10000;
		display: block;
	}

	/********************************************************************************
	* help button
	********************************************************************************/

	.btn-howto {
		position: absolute;
		right: calc(var(--vh, 1vh) * -9);
		top: calc(var(--vh, 1vh) * -11);
		width: calc(var(--vh, 1vh) * 30);
		z-index: 10000;
		display: none;
	}

	.btn-howto-close {
		position: absolute;
		right: calc(var(--vh, 1vh) * -9);
		top: calc(var(--vh, 1vh) * -11);
		width: calc(var(--vh, 1vh) * 30);
		z-index: 10000;
		display: none;
	}

	/********************************************************************************
	* character
	********************************************************************************/

	@keyframes caracter-jump-left {
		0%   { transform: translateY(0px); }
		5%  { transform: translateY(-30px); }
		10%  { transform: translateY(0px); }
		15%  { transform: translateY(-30px); }
		20%  { transform: translateY(0px); }
	}

	@keyframes caracter-jump-right {
		50%  { transform: translateY(0px); }
		55%  { transform: translateY(-30px); }
		60%  { transform: translateY(0px); }
		65%  { transform: translateY(-30px); }
		70%  { transform: translateY(0px); }
	}

	.character-left {
		position: absolute;
		left: 3%;
		bottom: -10%;
		width: calc(var(--vh, 1vh) * 35);
		animation-name: caracter-jump-left;
		animation-duration: 5s;
		animation-iteration-count: infinite;
		display: none;
		z-index: 1000;
	}

	.character-right {
		position: absolute;
		right: 3%;
		bottom: -10%;
		width: calc(var(--vh, 1vh) * 35);
		animation-name: caracter-jump-right;
		animation-duration: 5s;
		animation-iteration-count: infinite;
		display: none;
		z-index: 1000;
	}

	/********************************************************************************
	* title
	********************************************************************************/

	#page-title {
		background: var(--img-title-bg-tab) no-repeat;
		background-size: 100% calc(var(--vh, 1vh) * 100);
	}

	#btn-title-start {
		position: absolute;
		left: var(--start-button-left);
		bottom: 3%;
		width: calc(var(--vh, 1vh) * 30);
		height: calc(var(--vh, 1vh) * 15);
		opacity: 0;
		transition: 0.5s;
		transition-delay: 0.5s;
	}

	/********************************************************************************
	* slider top
	********************************************************************************/

	.slider-top{
		margin: 0 auto;
		width: var(--slider-img-width);
		display: none;
	}

	.slider-top.slick-initialized{
		display: block;
	}

	.slider-top img{
		width: 100%;
	}

	.slider-top img.slide-arrow{
		position: absolute;
		top: 50%;
		width: calc(var(--vh, 1vh) * 20);
		height: auto;
		transform: translate(0,-50%);
		z-index: 9999;
	}

	.slider-top img.prev-arrow{
		left: -30%;
	}

	.slider-top img.next-arrow{
		right: -30%;
	}

	#page-title #slider-dots{
		position: absolute;
		bottom: 12%;
		width: 100%;
		text-align: center;
		transition: 0.5s;
	}

	#page-title #slider-dots img{
		height: calc(var(--vh, 1vh) * 10);
	}

	/********************************************************************************
	* loading
	********************************************************************************/

	#page-title #loading-bar{
		background: var(--img-loading-bar) no-repeat;
		background-size: var(--slider-img-width) 40px;
		position: absolute;
		left: 50%;
		bottom: 3%;
		width: var(--slider-img-width);
		transform: translate(-50%,0);
		transition: 0.5s;
		display: block;
	}

	#page-title #loading-bar div{
		width: 0%;
		height: 20px;
		overflow: hidden;
		object-fit: none;
		object-position: bottom;
		text-align: left;
	}

	#page-title #loading-bar div img{
		width: 100%;
		height: 100%;
	}

	/********************************************************************************
	* game
	********************************************************************************/

	#page-game {
		background: var(--img-game-bg-tab) no-repeat;
		background-size: 100% calc(var(--vh, 1vh) * 100);
		display: none;
	}

	.div-game-timer {
		position: absolute;
		left: 5px;
		top: calc(var(--vh, 1vh) * 28);
		width: calc(var(--vh, 1vh) * 36);
		height: calc(var(--vh, 1vh) * 12);
		background: rgba(255,255,255,0.6);
		border-radius: 30px;
		display: flex;
		align-items: center;
	}

	.div-game-timer img {
		position: absolute;
		left: calc(var(--vh, 1vh) * 4);
		width: calc(var(--vh, 1vh) * 6);
	}

	.div-game-timer span {
		position: absolute;
		right: calc(var(--vh, 1vh) * 4);
		font-size: calc(var(--vh, 1vh) * 6);
		font-weight: bold;
		color: black;
	}

	.img-panel-frame,
	#img-game-bg,
	#div-game-panels,
	.btn-game-panel {
		position: absolute;
	}

	.btn-game-panel {
		border-radius: 0;
	}

	/********************************************************************************
	* next
	********************************************************************************/

	#page-next {
		background: var(--img-next-bg-tab) no-repeat;
		background-size: 100% calc(var(--vh, 1vh) * 100);
		display: none;
	}

	#img-next-bg {
		position: absolute;
	}

	@keyframes next-go {
		0% {
			opacity: 0;
		}
		100% {
			opacity: 1;
		}
	}

	#btn-next-go {
		position: absolute;
		left: 50%;
		bottom: 3%;
		width: calc(var(--vh, 1vh) * 30);
		height: calc(var(--vh, 1vh) * 15);
		transform: translateX(-50%);
		opacity: 0;
		animation-name: next-go;
		animation-duration: 1s;
		animation-delay: 3s;
		animation-fill-mode: forwards;
	}

	/********************************************************************************
	* end
	********************************************************************************/

	#page-end {
		background: var(--img-end-bg-tab) no-repeat;
		background-size: 100% calc(var(--vh, 1vh) * 100);
		display: none;
	}

	#page-end .this-score {
		position: absolute;
		left: 50%;
		top: 3%;
		width: calc(var(--vh, 1vh) * 80);
		height: calc(var(--vh, 1vh) * 15);
		border-radius: 50px;
		background: rgba(255,255,255,0.3);
		transform: translate(-50%, 0);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	#page-end .this-score img {
		position: absolute;
		left: calc(var(--vh, 1vh) * 12);
		width: calc(var(--vh, 1vh) * 10);
	}

	#page-end .this-score div {
		position: absolute;
	}

	#page-end .this-score div.score {
		right: calc(var(--vh, 1vh) * 10);
		font-size: calc(var(--vh, 1vh) * 10);
	}

	#page-end .last-score {
		position: absolute;
		left: 50%;
		width: calc(var(--vh, 1vh) * 100);
		height: calc(var(--vh, 1vh) * 18);
		background: rgba(255,255,255,0.8);
		color: black;
		transform: translate(-50%, 0);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	#page-end .last-score div {
		position: absolute;
	}

	#page-end .last-score div.star {
		left: calc(var(--vh, 1vh) * 10);
	}

	#page-end .last-score div.star img {
		width: calc(var(--vh, 1vh) * 10);
	}

	#page-end .last-score div.no {
		left: calc(var(--vh, 1vh) * 24);
		font-size: calc(var(--vh, 1vh) * 10);
	}

	#page-end .last-score div.score {
		right: calc(var(--vh, 1vh) * 20);
		font-size: calc(var(--vh, 1vh) * 10);
	}

	#page-end .score1 {
		top: calc(var(--vh, 1vh) * 24);
	}

	#page-end .score2 {
		top: calc(var(--vh, 1vh) * 42);
	}

	#page-end .score3 {
		top: calc(var(--vh, 1vh) * 60);
	}

	@keyframes end-top {
		0% {
			opacity: 0;
		}
		100% {
			opacity: 1;
		}
	}

	#btn-end-top {
		position: absolute;
		left: 50%;
		bottom: 3%;
		width: calc(var(--vh, 1vh) * 30);
		height: calc(var(--vh, 1vh) * 15);
		transform: translateX(-50%);
		opacity: 0;
		animation-name: end-top;
		animation-duration: 1s;
		animation-delay: 3s;
		animation-fill-mode: forwards;
	}

	/********************************************************************************
	* howto
	********************************************************************************/

	#page-howto {
		position: absolute;
		top: 0;
		width: 100%;
		height: 100%;
		background:rgb(0 0 0 / 80%);
		z-index: 9999;
	}

	/********************************************************************************
	* slider howto
	********************************************************************************/

	.slider-howto{
		margin: 0 auto;
		width: var(--slider-img-width);
		display: none;
	}

	.slider-howto.slick-initialized{
		display: block;
	}

	.slider-howto img{
		width: 100%;
	}

	.slider-howto img.slide-arrow{
		position: absolute;
		top: 50%;
		width: calc(var(--vh, 1vh) * 20);
		height: auto;
		transform: translate(0,-50%);
		z-index: 9999;
	}

	.slider-howto img.prev-arrow{
		left: -30%;
	}

	.slider-howto img.next-arrow{
		right: -30%;
	}

	#page-howto  #slider-dots{
		position: absolute;
		bottom: 3%;
		width: 100%;
		text-align: center;
	}

	#page-howto #slider-dots img{
		width: 150px;
	}

	/********************************************************************************
	* other
	********************************************************************************/

	.copyright {
		font-size:12px;
		color:#666;
		text-align:center;
		font-family:Arial, Helvetica, sans-serif;
	}

}