/* コンパネ スマホ2 */

/* 方向キー */
.mepi_c_control_square {
	position: absolute;
	height: 80px;
	width: 80px;
	box-sizing: border-box;
	border: solid 4px #000000;
	background-color:#ffffff;

}

.mepi_c_control_square:hover {
	background-color:#ffff00;

}

.mepi_c_control_square:active {
	background-color:#00ff7f;

}



/* リセットなどの方 */
.mepi_c_control_oblong {
	position: absolute;
	height: 40px;
	width: 240px;
	box-sizing: border-box;
	border: solid 5px #000000;
	background-color:#ffffff;
	color : #000000;
	border-radius: 15px;
	cursor: default;
/*	font-size: 24px; */
	font-size: 20px; 
	text-align: center;
	line-height: 34px;
	font-weight: bold;
}

.mepi_c_control_oblong:hover {
	background-color:#ffff00;

}

.mepi_c_control_oblong:active {
	background-color:#00ff7f;

}


#mepi_c_control_left {
	position: absolute;
	top : 40px;
	left : 0px;
}

.mepi_c_control_arrow_left {
	position: absolute;
}

.mepi_c_control_arrow_left::before {
	position: absolute;
	content:"";
	background-color: #000000;

	left: 32px;
	top: 21px;
	width: 31px;
	height: 30px;
}

.mepi_c_control_arrow_left::after {
	position: absolute;
	content:"";

	width: 0;
	height: 0;
	top: 7px;
	left: -27px;
	border: 30px solid transparent;
	border-right: 30px solid #000000;	
}







#mepi_c_control_right {
	position: absolute;
	top : 40px;
	left : 160px;
}

.mepi_c_control_arrow_right {
	position: absolute;
}

.mepi_c_control_arrow_right::before {
	position: absolute;
	content:"";
	background-color: #000000;

	right: 32px;
	top: 21px;
	width: 31px;
	height: 30px;
}

.mepi_c_control_arrow_right::after {
	position: absolute;
	content:"";

	width: 0;
	height: 0;
	top: 7px;
	right: -27px;
	border: 30px solid transparent;
	border-left: 30px solid #000000;	
}





#mepi_c_control_up {
	position: absolute;
	top : 0px;
	left : 80px;
}

.mepi_c_control_arrow_up {
	position: absolute;
}

.mepi_c_control_arrow_up::before {
	position: absolute;
	content:"";
	background-color: #000000;

	left: 21px;
	top: 32px;
	width: 30px;
	height: 31px;
}

.mepi_c_control_arrow_up::after {
	position: absolute;
	content:"";

	width: 0;
	height: 0;
	top: -26px;
	left: 7px;
	border: 30px solid transparent;
	border-bottom: 30px solid #000000;	
}




#mepi_c_control_down {
	position: absolute;
	top : 80px;
	left : 80px;
}

.mepi_c_control_arrow_down {
	position: absolute;
}

.mepi_c_control_arrow_down::before {
	position: absolute;
	content:"";
	background-color: #000000;

	left: 21px;
	bottom: 32px;
	width: 30px;
	height: 31px;
}

.mepi_c_control_arrow_down::after {
	position: absolute;
	content:"";

	width: 0;
	height: 0;
	bottom: -26px;
	left: 7px;
	border: 30px solid transparent;
	border-top: 30px solid #000000;	
}









#mepi_c_control_center {
	position: absolute;
	top : 80px;
	left : 260px;
}

#mepi_c_control_reset {
	position: absolute;
	top : 120px;
	left : 260px;
}

#mepi_c_control_face {
	position: absolute;
	top : 0px;
	left : 260px;
}

#mepi_c_control_hold {
	position: absolute;
	top : 40px;
	left : 260px;
}



#mepi_c_control_scale_up {
	position: absolute;
	
	top: 0px;
	left: 0px;
	height: 40px;
	width: 80px;
	box-sizing: border-box;
	border: solid 4px #000000;
	background-color:#ffffff;
	color: #000;
	
	cursor: default;
	font-size: 20px; 
	text-align: center;
	line-height: 34px;
	font-weight: bold;
	
}

#mepi_c_control_scale_down {
	position: absolute;
	
	top: 120px;
	left: 0px;
	height: 40px;
	width: 80px;
	box-sizing: border-box;
	border: solid 4px #000000;
	background-color:#ffffff;
	color: #000;
	
	cursor: default;
	font-size: 20px; 
	text-align: center;
	line-height: 34px;
	font-weight: bold;
	

}

#mepi_c_control_scale_up:hover , #mepi_c_control_scale_down:hover {
	background-color:#ffff00;

}




/* スマホ用追加 */
.conpane_magic_a {
	
	display: inline-block;
	right: 55px;
	transform-origin: top left;
	transform: translateY(9px) scale(0.7);
	
}


.conpane_magic_b {
	
	position: absolute;
	right: 15px;
	
	
}