@CHARSET "UTF-8";

#char-layer {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
#char-layer > div {
	position: absolute;
}


/* メイン商店街 */
#Achar-market {
	top: calc(50vh + 7.8vw);
	left: calc(50vw - 22.1vw);
	width: 7.3vw;
	height: 9.1vw;
	background: url(../img/mob/anime/A_anime.png) no-repeat;
	background-size: 29.2vw;
	animation: Achar-market 1.2s steps(4) infinite;
}
@keyframes Achar-market { to { background-position: -29.2vw 0; } }
#Bchar-market {
	top: calc(50vh + 10.4vw);
	left: calc(50vw - 30.7vw);
	width: 7.3vw;
	height: 10.4vw;
	background: url(../img/mob/anime/B_anime.png) no-repeat;
	background-size: 29.2vw;
	animation: Bchar-market 1.2s steps(4) infinite;
}
@keyframes Bchar-market { to { background-position: -29.2vw 0; } }
#Cchar-market {
	top: calc(50vh + 13vw);
	left: calc(50vw + 39.1vw);
	width: 7.3vw;
	height: 12.5vw;
	background: url(../img/mob/anime/C_anime.png) no-repeat;
	background-size: 29.2vw;
	animation: Cchar-market 1.2s steps(4) infinite;
}
@keyframes Cchar-market { to { background-position: -29.2vw 0; } }
#Dchar-market {
	top: calc(50vh + 5.2vw);
	left: calc(50vw + 14.1vw);
	width: 7.3vw;
	height: 12.5vw;
	background: url(../img/mob/anime/D_anime.png) no-repeat;
	background-size: 29.2vw;
	animation: Dchar-market 1.2s steps(4) infinite;
}
@keyframes Dchar-market { to { background-position: -29.2vw 0; } }
#Hchar-market_pos {
	top: calc(50vh - 18.2vw);
	left: calc(50vw + 31.8vw);
}
#Hchar-market_img {
	width: 4.2vw;
	height: auto;
}
#Kchar-market_pos {
	top: calc(50vh - 18.2vw);
	left: calc(50vw - 18.2vw);
}
#Kchar-market_img {
	width: 4.2vw;
	height: auto;
}
#Lchar-market {
	top: calc(50vh + 13vw);
	left: calc(50vw - 48.4vw);
	width: 7.3vw;
	height: 14.6vw;
	background: url(../img/mob/anime/L_anime.png) no-repeat;
	background-size: 29.2vw;
	animation: Lchar-market 1.2s steps(4) infinite;
}
@keyframes Lchar-market { to { background-position: -29.2vw 0; } }
#Nchar-market_pos {
	top: calc(50vh - 2.1vw);
	left: calc(50vw - 20.8vw);
}
#Nchar-market_img {
	width: 13.3vw;
	height: auto;
}
#Qchar-market_pos {
	top: calc(50vh - 20.8vw);
	left: calc(50vw - 28.1vw);
}
#Qchar-market_img {
	width: 4.2vw;
	height: auto;
}
#Rchar-market_pos {
	top: calc(50vh + 10.4vw);
	left: calc(50vw + 26vw);
}
#Rchar-market_img {
	width: 9.9vw;
	height: 9.9vw;
	background: url(../img/mob/anime/R_anime.png) no-repeat;
	background-size: 39.6vw;
	animation: Rchar-market 1.2s steps(4) infinite;
}
@keyframes Rchar-market { to { background-position: -39.6vw 0; } }
#Xchar-market {
	top: calc(50vh - 18.2vw);
	left: calc(50vw - 6.3vw);
	width: 3.9vw;
	height: 3.3vw;
	background: url(../img/mob/anime/X_anime.png) no-repeat;
	background-size: 11.7vw;
	animation: Xchar-market 1.2s steps(3) infinite;
}
@keyframes Xchar-market { to { background-position: -11.7vw 0; } }


/* 桟橋公園 */
#Bchar-pier {
	top: calc(50vh - 4.6vw);
	left: calc(50vw - 19.8vw);
	width: 9.9vw;
	height: 9.9vw;
	background : url(../img/mob/anime/B_anime_2.png) no-repeat;
	background-size: 39.6vw;
	animation: Bchar-pier 1.2s steps(4) infinite;
}
@keyframes Bchar-pier { to { background-position: -39.6vw 0; } }
#Cchar-pier {
	top: calc(50vh + 8.9vw);
	left: calc(50vw + 36.5vw);
	width: 9.1vw;
	height: 15.6vw;
	background: url(../img/mob/anime/C_anime.png) no-repeat;
	background-size: 36.4vw;
	animation: Cchar-pier 1.2s steps(4) infinite;
}
@keyframes Cchar-pier { to { background-position: -36.4vw 0; } }
#Dchar-pier {
	top: calc(50vh + 0.5vw);
	left: calc(50vw - 0.8vw);
	width: 8.3vw;
	height: 11.5vw;
	background: url(../img/mob/anime/D_anime_2.png) no-repeat;
	background-size: 33.2vw;
	animation: Dchar-pier 1.2s steps(4) infinite;
}
@keyframes Dchar-pier { to { background-position: -33.2vw 0; } }
#GEchar-pier {
	top: calc(50vh + 4.7vw);
	left: calc(50vw + 12vw);
	width: 13vw;
	height: 13vw;
	background: url(../img/mob/anime/GE_anime.png) no-repeat;
	background-size: 52vw;
	animation: GEchar-pier 1.2s steps(4) infinite;
}
@keyframes GEchar-pier { to { background-position: -52vw 0; } }
#Hchar-pier_pos {
	top: calc(50vh - 20.3vw);
	left: calc(50vw + 26.6vw);
}
#Hchar-pier_img {
	width: 3.1vw;
	height: auto;
	transform: scale(-1, 1);
}
#Ichar-pier {
	top: calc(50vh + 4.7vw);
	left: calc(50vw - 12vw);
	width: 10.4vw;
	height: 12.5vw;
	background: url(../img/mob/anime/I_anime.png) no-repeat;
	background-size: 41.6vw;
	animation: Ichar-pier 1.2s steps(4) infinite;
}
@keyframes Ichar-pier { to { background-position: -41.6vw 0; } }
#Lchar-pier {
	top: calc(50vh + 4.2vw);
	left: calc(50vw - 46.4vw);
	width: 8.3vw;
	height: 16.7vw;
	background: url(../img/mob/anime/L_anime.png) no-repeat;
	background-size: 33.2vw;
	animation: Lchar-pier 1.2s steps(4) infinite;
}
@keyframes Lchar-pier { to { background-position: -33.2vw 0; } }
#Qchar-pier_pos {
	top: calc(50vh - 11.5vw);
	left: calc(50vw - 48.4vw);
}
#Qchar-pier_img {
	width: 3.1vw;
	height: auto;
}
#Rchar-pier_pos {
	top: calc(50vh + 6.8vw);
	left: calc(50vw - 28.1vw);
}
#Rchar-pier_img {
	width: 13.5vw;
	height: 10.4vw;
	background: url(../img/mob/anime/R_anime_2.png) no-repeat;
	background-size: 54vw;
	animation: Rchar-pier 1.2s steps(4) infinite;
}
@keyframes Rchar-pier { to { background-position: -54vw 0; } }
#Xchar-pier {
	top: calc(50vh - 20.3vw);
	left: calc(50vw - 2.6vw);
	width: 4.7vw;
	height: 3.9vw;
	transform: scale(-1, 1);
	background: url(../img/mob/anime/X_anime.png) no-repeat;
	background-size: 14.1vw;
	animation: Xchar-pier 1.2s steps(3) infinite;
}
@keyframes Xchar-pier { to { background-position: -14.1vw 0; } }


/* 宇宙 */
#Hchar-uni_pos {
	top: calc(50vh + 13vw);
	left: calc(50vw + 40.6vw);
}
#Hchar-uni_img {
	width: 3.1vw;
	height: auto;
	transform: scale(-1, 1);
}
#Kchar-uni {
	top: calc(50vh - 28.6vw);
	left: calc(50vw - 7.8vw);
	width: 9.4vw;
	height: 28.1vw;
	transform: rotate(-15deg);
	background: url(../img/mob/anime/K_anime.png) no-repeat;
	background-size: 37.6vw;
	animation: Kchar-uni 1.2s steps(4) infinite;
}
@keyframes Kchar-uni { to { background-position: -37.6vw 0; } }
#Qchar-uni_pos {
	top: calc(50vh + 12vw);
	left: calc(50vw - 44.3vw);
}
#Qchar-uni_img {
	width: 4.2vw;
	height: auto;
}
#Schar-uni {
	top: calc(50vh - 5.2vw);
	left: calc(50vw - 26.6vw);
	width: 18.8vw;
	height: 17.7vw;
	background: url(../img/mob/anime/S_anime.png) no-repeat;
	background-size: 75.2vw;
	animation: Schar-uni 1.2s steps(4) infinite;
}
@keyframes Schar-uni { to { background-position: -75.2vw 0; } }
#Xchar-uni {
	top: calc(50vh - 4.2vw);
	left: calc(50vw - 47.4vw);
	width: 6.3vw;
	height: 5.2vw;
	transform: scale(-1, 1);
	background: url(../img/mob/anime/X_anime.png) no-repeat;
	background-size: 18.9vw;
	animation: Xchar-uni 1.2s steps(3) infinite;
}
@keyframes Xchar-uni { to { background-position: -18.9vw 0; } }
#Ychar-uni_pos {
	top: calc(50vh - 19.3vw);
	left: calc(50vw + 14.1vw);
}
#Ychar-uni_img {
	width: 13.5vw;
	height: 13.5vw;
	background: url(../img/mob/anime/Y_anime.png) no-repeat;
	background-size: 54vw;
	animation: Ychar-uni 1.2s steps(4) infinite;
}
@keyframes Ychar-uni { to { background-position: -54vw 0; } }


/* レンガ街並み */
#Hchar-bcity_pos {
	top: calc(50vh - 19.3vw);
	left: calc(50vw + 42.2vw);
}
#Hchar-bcity_img {
	width: 4.2vw;
	height: auto;
	transform: scale(-1, 1);
}
#Nchar-bcity {
	top: calc(50vh + 4.2vw);
	left: calc(50vw + 20.8vw);
	width: 7.8vw;
	height: 13vw;
	background: url(../img/mob/anime/N_anime.png) no-repeat;
	background-size: 31.2vw;
	animation: Nchar-bcity 1.2s steps(4) infinite;
}
@keyframes Nchar-bcity { to { background-position: -31.2vw 0; } }
#Ochar-bcity {
	top: calc(50vh - 10.9vw);
	left: calc(50vw - 21.4vw);
	width: 21.9vw;
	height: 37.5vw;
	background: url(../img/mob/anime/O_anime.png) no-repeat;
	background-size: 87.6vw;
	animation: Ochar-bcity 1.2s steps(4) infinite;
}
@keyframes Ochar-bcity { to { background-position: -87.6vw 0; } }
#Qchar-bcity_pos {
	top: calc(50vh - 26vw);
	left: calc(50vw + 32.8vw);
}
#Qchar-bcity_img {
	width: 4.2vw;
	height: auto;
}
#Rchar-bcity_pos {
	top: calc(50vh + 13vw);
	left: calc(50vw + 36.5vw);
}
#Rchar-bcity_img {
	width: 12vw;
	height: 12vw;
	background: url(../img/mob/anime/R_anime.png) no-repeat;
	background-size: 48vw;
	animation: Rchar-bcity 1.2s steps(4) infinite;
}
@keyframes Rchar-bcity { to { background-position: -48vw 0; } }
#Tchar-bcity {
	top: calc(50vh - 19.3vw);
	left: calc(50vw - 33.3vw);
	width: 13vw;
	height: 22vw;
	background: url(../img/mob/anime/T_anime.png) no-repeat;
	background-size: 52vw;
	animation: Tchar-bcity 1.2s steps(4) infinite;
}
@keyframes Tchar-bcity { to { background-position: -52vw 0; } }
#Wchar-bcity {
	top: calc(50vh + 2.6vw);
	left: calc(50vw + 3.1vw);
	width: 6.8vw;
	height: 13.5vw;
	background: url(../img/mob/anime/W_anime.png) no-repeat;
	background-size: 27.2vw;
	animation: Wchar-bcity 1.2s steps(4) infinite;
}
@keyframes Wchar-bcity { to { background-position: -27.2vw 0; } }
#Xchar-bcity {
	top: calc(50vh - 20.8vw);
	left: calc(50vw + 10.9vw);
	width: 3.1vw;
	height: 2.6vw;
	background: url(../img/mob/anime/X_anime.png) no-repeat;
	background-size: 9.3vw;
	animation: Xchar-bcity 1.2s steps(3) infinite;
}
@keyframes Xchar-bcity { to { background-position: -9.3vw 0; } }

@media (max-aspect-ratio: 16/9) {
	#Achar-market {
		top: calc(50vh + 13.9vh);
		left: calc(50vw - 39.3vh);
		width: 13vh;
		height: 16.2vh;
		background-size: 52vh;
	}
	@keyframes Achar-market { to { background-position: -52vh 0; } }
	#Bchar-market {
		top: calc(50vh + 18.5vh);
		left: calc(50vw - 54.6vh);
		width: 13vh;
		height: 18.5vh;
		background-size: 52vh;
	}
	@keyframes Bchar-market { to { background-position: -52vh 0; } }
	#Cchar-market {
		top: calc(50vh + 23.1vh);
		left: calc(50vw + 69.4vh);
		width: 13vh;
		height: 22.2vh;
		background-size: 52vh;
	}
	@keyframes Cchar-market { to { background-position: -52vh 0; } }
	#Dchar-market {
		top: calc(50vh + 9.3vh);
		left: calc(50vw + 25vh);
		width: 13vh;
		height: 22.2vh;
		background-size: 52vh;
	}
	@keyframes Dchar-market { to { background-position: -52vh 0; } }
	#Hchar-market_pos {
		top: calc(50vh - 32.4vh);
		left: calc(50vw + 56.5vh);
	}
	#Hchar-market_img {
		width: 7.4vh;
		height: auto;
	}
	#Kchar-market_pos {
		top: calc(50vh - 32.4vh);
		left: calc(50vw - 32.4vh);
	}
	#Kchar-market_img {
		width: 7.4vh;
		height: auto;
	}
	#Lchar-market {
		top: calc(50vh + 23.1vh);
		left: calc(50vw - 86.1vh);
		width: 13vh;
		height: 25.9vh;
		background-size: 52vh;
	}
	@keyframes Lchar-market { to { background-position: -52vh 0; } }
	#Nchar-market_pos {
		top: calc(50vh - 3.7vh);
		left: calc(50vw - 37vh);
	}
	#Nchar-market_img {
		width: 23.6vh;
		height: auto;
	}
	#Qchar-market_pos {
		top: calc(50vh - 37vh);
		left: calc(50vw - 50vh);
	}
	#Qchar-market_img {
		width: 7.4vh;
		height: auto;
	}
	#Rchar-market_pos {
		top: calc(50vh + 18.5vh);
		left: calc(50vw + 46.3vh);
	}
	#Rchar-market_img {
		width: 17.6vh;
		height: 17.6vh;
		background-size: 70.4vh;
	}
	@keyframes Rchar-market { to { background-position: -70.4vh 0; } }
	#Xchar-market {
		top: calc(50vh - 32.4vh);
		left: calc(50vw - 11.1vh);
		width: 8.3vh;
		height: 6.9vh;
		background-size: 24.9vh;
	}
	@keyframes Xchar-market { to { background-position: -24.9vh 0; } }


	#Bchar-pier {
		top: calc(50vh - 8.3vh);
		left: calc(50vw - 35.2vh);
		width: 17.6vh;
		height: 17.6vh;
		background-size: 70.4vh;
	}
	@keyframes Bchar-pier { to { background-position: -70.4vh 0; } }
	#Cchar-pier {
		top: calc(50vh + 15.7vh);
		left: calc(50vw + 64.8vh);
		width: 16.2vh;
		height: 27.8vh;
		background-size: 64.8vh;
	}
	@keyframes Cchar-pier { to { background-position: -64.8vh 0; } }
	#Dchar-pier {
		top: calc(50vh + 0.9vh);
		left: calc(50vw - 1.4vh);
		width: 14.8vh;
		height: 20.4vh;
		background-size: 59.2vh;
	}
	@keyframes Dchar-pier { to { background-position: -59.2vh 0; } }
	#GEchar-pier {
		top: calc(50vh + 8.3vh);
		left: calc(50vw + 21.3vh);
		width: 23.1vh;
		height: 23.1vh;
		background-size: 92.4vh;
	}
	@keyframes GEchar-pier { to { background-position: -92.4vh 0; } }
	#Hchar-pier_pos {
		top: calc(50vh - 36.1vh);
		left: calc(50vw + 47.2vh);
	}
	#Hchar-pier_img {
		width: 5.6vh;
		height: auto;
	}
	#Ichar-pier {
		top: calc(50vh + 8.3vh);
		left: calc(50vw - 21.3vh);
		width: 18.5vh;
		height: 22.2vh;
		background-size: 74vh;
	}
	@keyframes Ichar-pier { to { background-position: -74vh 0; } }
	#Lchar-pier {
		top: calc(50vh + 7.4vh);
		left: calc(50vw - 82.4vh);
		width: 14.8vh;
		height: 29.6vh;
		background-size: 59.2vh;
	}
	@keyframes Lchar-pier { to { background-position: -59.2vh 0; } }
	#Qchar-pier_pos {
		top: calc(50vh - 20.4vh);
		left: calc(50vw - 86.1vh);
	}
	#Qchar-pier_img {
		width: 5.6vh;
		height: auto;
	}
	#Rchar-pier_pos {
		top: calc(50vh + 12vh);
		left: calc(50vw - 50vh);
	}
	#Rchar-pier_img {
		width: 24.1vh;
		height: 18.5vh;
		background-size: 96.4vh;
	}
	@keyframes Rchar-pier { to { background-position: -96.4vh 0; } }
	#Xchar-pier {
		top: calc(50vh - 36.1vh);
		left: calc(50vw - 4.6vh);
		width: 8.3vh;
		height: 6.9vh;
		background-size: 24.9vh;
	}
	@keyframes Xchar-pier { to { background-position: -24.9vh 0; } }
	#Hchar-uni_pos {
		top: calc(50vh + 23.1vh);
		left: calc(50vw + 72.2vh);
	}
	#Hchar-uni_img {
		width: 5.6vh;
		height: auto;
	}
	#Kchar-uni {
		top: calc(50vh - 50.9vh);
		left: calc(50vw - 13.9vh);
		width: 16.7vh;
		height: 50vh;
		background-size: 66.8vh;
	}
	@keyframes Kchar-uni { to { background-position: -66.8vh 0; } }
	#Qchar-uni_pos {
		top: calc(50vh + 21.3vh);
		left: calc(50vw - 78.7vh);
	}
	#Qchar-uni_img {
		width: 7.4vh;
		height: auto;
	}
	#Schar-uni {
		top: calc(50vh - 9.3vh);
		left: calc(50vw - 47.2vh);
		width: 33.3vh;
		height: 31.5vh;
		background-size: 133.2vh;
	}
	@keyframes Schar-uni { to { background-position: -133.2vh 0; } }
	#Xchar-uni {
		top: calc(50vh - 7.4vh);
		left: calc(50vw - 84.3vh);
		width: 11.1vh;
		height: 9.3vh;
		background-size: 33.3vh;
	}
	@keyframes Xchar-uni { to { background-position: -33.3vh 0; } }
	#Ychar-uni_pos {
		top: calc(50vh - 34.3vh);
		left: calc(50vw + 25vh);
	}
	#Ychar-uni_img {
		width: 24.1vh;
		height: 24.1vh;
		background-size: 96.4vh;
	}
	@keyframes Ychar-uni { to { background-position: -96.4vh 0; } }


	#Hchar-bcity_pos {
		top: calc(50vh - 34.3vh);
		left: calc(50vw + 75vh);
	}
	#Hchar-bcity_img {
		width: 7.4vh;
		height: auto;
	}
	#Nchar-bcity {
		top: calc(50vh + 7.4vh);
		left: calc(50vw + 37vh);
		width: 13.9vh;
		height: 23.1vh;
		background-size: 55.6vh;
	}
	@keyframes Nchar-bcity { to { background-position: -55.6vh 0; } }
	#Ochar-bcity {
		top: calc(50vh - 19.4vh);
		left: calc(50vw - 38vh);
		width: 38.9vh;
		height: 66.7vh;
		background-size: 155.6vh;
	}
	@keyframes Ochar-bcity { to { background-position: -155.6vh 0; } }
	#Qchar-bcity_pos {
		top: calc(50vh - 46.3vh);
		left: calc(50vw + 58.3vh);
	}
	#Qchar-bcity_img {
		width: 7.4vh;
		height: auto;
	}
	#Rchar-bcity_pos {
		top: calc(50vh + 23.1vh);
		left: calc(50vw + 64.8vh);
	}
	#Rchar-bcity_img {
		width: 21.3vh;
		height: 21.3vh;
		background-size: 85.2vh;
	}
	@keyframes Rchar-bcity { to { background-position: -85.2vh 0; } }
	#Tchar-bcity {
		top: calc(50vh - 34.3vh);
		left: calc(50vw - 59.3vh);
		width: 23.4vh;
		height: 39.6vh;
		background-size: 93.6vh;
	}
	@keyframes Tchar-bcity { to { background-position: -93.6vh 0; } }
	#Wchar-bcity {
		top: calc(50vh + 4.6vh);
		left: calc(50vw + 5.6vh);
		width: 12vh;
		height: 24.1vh;
		background-size: 48vh;
	}
	@keyframes Wchar-bcity { to { background-position: -48vh 0; } }
	#Xchar-bcity {
		top: calc(50vh - 37vh);
		left: calc(50vw + 19.4vh);
		width: 5.6vh;
		height: 4.6vh;
		background-size: 16.8vh;
	}
	@keyframes Xchar-bcity { to { background-position: -16.8vh 0; } }
}