/* メピ関連 */


/*
#mepi_c_mepi_base {
	position: absolute;
	
	width: 50px;
	height: 50px;
	
	top: 75px; 
	left: 250px;
	
	transform-origin: 50% 50% 0;
	
	z-index: 55;


}
*/




#mepi_c_mepi_base {
	position: absolute;
	
	width: 50px;
	height: 50px;
	
	transform-origin: 50% 50% 0;
	
	z-index: 55;


}

#mepi_c_mepi_inside {
	position: absolute;
	
	top: -20px;
	left: 0px;
	
	transform:scale(2);
	
	
}






@keyframes mepi_anime {
	to{
		background-position-x: -120px;
	}
}

@keyframes mepi_jump_anime {
	to{
		background-position-x: -90px;
	}
}

#mepi_c_mepi_image {
	position: absolute;
	
	width: 30px;
	height: 30px;
	background:url("img/mepi_dot_map02.png") no-repeat;
	background-position-x: 0px;
	background-position-y: 0px;
	
	overflow: hidden;

	z-index: 55;
}


/*
上、右、下、左の順に並べる

0	待機
120	walk
240 push
360 power
480 ju,p

*/



/*
	animation: mepi_anime 1.5s steps(4) infinite;
*/

#mepi_c_mepi_image[data-status="standby"][data-face="up"]{
	background-position-y: 0px;
}

#mepi_c_mepi_image[data-status="standby"][data-face="right"]{
	background-position-y: -30px;
}

#mepi_c_mepi_image[data-status="standby"][data-face="down"]{
	background-position-y: -60px;
}

#mepi_c_mepi_image[data-status="standby"][data-face="left"]{
	background-position-y: -90px;
}



#mepi_c_mepi_image[data-status="walk"][data-face="up"]{
	background-position-y: -120px;
	animation: mepi_anime var(--mepi_sv_move_time) steps(4) infinite;
}

#mepi_c_mepi_image[data-status="walk"][data-face="right"]{
	background-position-y: -150px;
	animation: mepi_anime var(--mepi_sv_move_time) steps(4) infinite;
}

#mepi_c_mepi_image[data-status="walk"][data-face="down"]{
	background-position-y: -180px;
	animation: mepi_anime var(--mepi_sv_move_time) steps(4) infinite;
}

#mepi_c_mepi_image[data-status="walk"][data-face="left"]{
	background-position-y: -210px;
	animation: mepi_anime var(--mepi_sv_move_time) steps(4) infinite;
}


#mepi_c_mepi_image[data-status="push"][data-face="up"]{
	background-position-y: -240px;
	animation: mepi_anime var(--mepi_sv_move_time) steps(4) infinite;
}

#mepi_c_mepi_image[data-status="push"][data-face="right"]{
	background-position-y: -270px;
	animation: mepi_anime var(--mepi_sv_move_time) steps(4) infinite;
}

#mepi_c_mepi_image[data-status="push"][data-face="down"]{
	background-position-y: -300px;
	animation: mepi_anime var(--mepi_sv_move_time) steps(4) infinite;
}

#mepi_c_mepi_image[data-status="push"][data-face="left"]{
	background-position-y: -330px;
	animation: mepi_anime var(--mepi_sv_move_time) steps(4) infinite;
}


#mepi_c_mepi_image[data-status="power"][data-face="up"]{
	background-position-y: -360px;
}

#mepi_c_mepi_image[data-status="power"][data-face="right"]{
	background-position-y: -390px;
}

#mepi_c_mepi_image[data-status="power"][data-face="down"]{
	background-position-y: -420px;
}

#mepi_c_mepi_image[data-status="power"][data-face="left"]{
	background-position-y: -450px;
}

#mepi_c_mepi_image[data-status="jump"][data-face="up"]{
	background-position-y: -480px;
	animation: mepi_jump_anime calc( var( --mepi_sv_move_time) * 1.2 * 2 ) steps(3) forwards;
}

#mepi_c_mepi_image[data-status="jump"][data-face="right"]{
	background-position-y: -510px;
	animation: mepi_jump_anime calc( var( --mepi_sv_move_time) * 1.2 * 2 ) steps(3) forwards;
}

#mepi_c_mepi_image[data-status="jump"][data-face="down"]{
	background-position-y: -540px;
	animation: mepi_jump_anime calc( var( --mepi_sv_move_time) * 1.2 * 2 ) steps(3) forwards;
}

#mepi_c_mepi_image[data-status="jump"][data-face="left"]{
	background-position-y: -570px;
	animation: mepi_jump_anime calc( var( --mepi_sv_move_time) * 1.2 * 2 ) steps(3) forwards;
}

#mepi_c_mepi_image[data-status="skate"][data-face="up"]{
	background-position-y: 0px;
}

#mepi_c_mepi_image[data-status="skate"][data-face="right"]{
	background-position-y: -30px;
}

#mepi_c_mepi_image[data-status="skate"][data-face="down"]{
	background-position-y: -60px;
}

#mepi_c_mepi_image[data-status="skate"][data-face="left"]{
	background-position-y: -90px;
}










/*
#mepi_c_mepi_inside {
	position: absolute;
	
	top: 7px;
	left: 5px;
	
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 20px 34.6px 20px;
	border-color: transparent transparent #007bff transparent;

	z-index: 55;
}

#mepi_c_mepi_inside::after {
	position: absolute;
	
	content: "";
	
	top: 0;
	left: -10px;
	
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 10px 17.3px 10px;
	border-color: transparent transparent #00fff2 transparent;
	
	z-index: 55;
}
*/