@charset "utf-8";

body {
	background: #6fbfec url(images/bg_game.svg) no-repeat bottom center;
	background-size: 100% auto;
	min-height: 100vh;
}


.window {
	width: 100%;
	max-width: 340px;
	padding: 1em;
	margin: 0 auto;
	background: #fff;
	border-radius: 1em;
	-webkit-filter: drop-shadow(0.5em 0.5em 0px rgba(0, 0, 0, .2));
	filter: drop-shadow(0.5em 0.5em 0px rgba(0, 0, 0, .2));
	transform: translateZ(0);
	text-align: center;
}

.window img { width: 85%; }
body { position: relative; }

.wrapper {
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
	flex-wrap: wrap;
	position: relative;
}

.start_panel {
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	z-index: 12;
}

.start_panel img[data-kotae] { display: none; }
.start_panel img.show[data-kotae] { display: inline-block; }

.anime_panel {
	background: url(images/bg_lets_anime.png) center center no-repeat;
	background-size: contain;
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	z-index: 10;
	display: none;
}

.anime_panel.show { display: flex; }

.startfishing {
	display: inline-block;
	margin-bottom: 0;
}

.kotae_panel {
	position: absolute;
	display: none;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	z-index: 10;
}

.kotae_panel.show { display: flex; }

.kotae_panel > div {
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.kotae_panel .seikai { display: none; }
.kotae_panel .seikai.show { display: flex; }
.kotae_panel img[data-kotae] { display: none; }
.kotae_panel img.show[data-kotae] { display: inline-block; }
.kotae_panel .hazure { display: none; }
.kotae_panel .hazure.show { display: flex; }

.field {
	display: flex;
	position: relative;
	justify-content: center;
	align-items: center;
	opacity: 0;
}

.buruburu {
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
	animation-name: buruburu;
	animation-duration: 0.4s;
	animation-iteration-count: infinite;
	animation-direction: normal;
	animation-fill-mode: forwards;
	animation-play-state: running;
}

@keyframes buruburu {
	10% { margin: 5px 5px 0 0; }
	25% { margin: -5px 5px 5px 0; }
	50% { margin: 5px -5px 0 0; }
	75% { margin: -5px -5px 0 0; }
	100% { margin: 0 0 0 0; }
}

.fish {
	position: absolute;
	z-index: 3;
	animation-name: oufuku, kurukuru;
	animation-iteration-count: infinite;
	animation-direction: normal;
	animation-fill-mode: forwards;
	animation-play-state: paused;
	display: flex;
	justify-content: center;
	cursor: pointer;
	transform: translateZ(100px);
	
}

.fish.ika { animation-name: oufuku, ikafuwa, kurukuru; }
.fish.maguro { animation-duration: 4s; }
.fish.sake { animation-duration: 6.5s; }
.fish.saba { animation-duration: 5.5s; }
.fish.tai { animation-duration: 7s; }
.fish.ika { animation-duration: 9s; }

.fish.ika .sprite {
	/* width: 10em;
	height: 21.95em; */
	width: 8.59em;
	height: 18.86em;
	background-image: url(images/fish-ika.png);
}

.fish.maguro .sprite {
	/* 377 215 */
	width: 30em;
	height: 17.1em;
	background-image: url(images/fish-maguro.png);
}

.fish.saba .sprite {
	/* 201 84 */
	/* width: 20em;
	height: 8.3em; */
	width: 15.9em;
	height: 6.63em;
	background-image: url(images/fish-saba.png);
}

.fish.sake .sprite {
	/* 337 136 */
	/* width: 25em;
	height: 10em; */
	width: 26.7em;
	height: 10.8em;
	background-image: url(images/fish-sake.png);
}

.fish.tai .sprite {
	/* 270 176 */
	/* width: 20em;
	height: 13.03em; */
	width: 21.45em;
	height: 14em;
	background-image: url(images/fish-tai.png);
}

@keyframes oufuku {
	0% { margin-left: -48%; }
	50% { margin-left: 48%; }
	100% { margin-left: -48%; }
}

@keyframes oufuku_safari {
	0% { margin-left: -30%; }
	50% { margin-left: 30%; }
	100% { margin-left: -30%; }
}

@keyframes kurukuru {
	0% { transform: rotateY(0); }
	50% { transform: rotateY(0); }
	51% { transform: rotateY(180deg); }
	99% { transform: rotateY(180deg); }
}

@keyframes ikafuwa {
	25% { margin-top: -10%; }
	50% { margin-top: 10%; }
	75% { margin-top: -10%; }
	100% { margin-top: 0; }
}

.fish .sprite {
	z-index: 5;
	background-size: auto 100%;
	animation-name: parapara;
	background-repeat: no-repeat;
	animation-duration: 0.5s;
	animation-timing-function: steps(1);
	animation-iteration-count: infinite;
	animation-direction: normal;
	animation-fill-mode: forwards;
	animation-play-state: running;
}

@keyframes parapara {
	0% { background-position: 0% center; }
	50% { background-position: 100%  center; }
}




.fish.tate:not(.ika) .sprite { transform: rotateZ(-90deg); }

.hari {
	position: absolute;
	bottom: 100vh;
	display: none;
	z-index: 4;
}

.imghit {
	display: none;
	position: absolute;
	z-index: 10;
	max-width: 400px;
	width: 100vw;
}

.imghit.show { display: block; }
.game_play { cursor: pointer; }
.nextfish { cursor: pointer; }

@media all and (max-width: 736px) {
	.imghit { z-index: 10; }
}