@charset "UTF-8";
/* CSS Document */

li{ 
	float: left;
	list-style: none;
}

.a{
	position: absolute;
	top:50%;
	left: 50%;
	width: 700px;
	transform: translate(-50%,-50%);
	margin: 0;
	padding: o;
}

.box1 {
	width: 100px;
	height: 100px;
	background-image: url(peco.gif);
	background-size: contain;	
	margin-left: 20px;
	margin-right: 20px;
	margin-bottom: 20px;
}
.box2 {
	width: 100px;
	height: 100px;
	background-image: url(A.gif);
	background-size: contain;
	margin-left: 20px;
	margin-right: 20px;
	margin-bottom: 20px;
}

.moya{
	width: 100px;
	height: 100px;
	background-color: #FFFFFF;
	margin-left: 20px;
	margin-right: 20px;
	margin-bottom: 20px;
	animation: 1.5s ease-in-out infinite blink_effect;
	pointer-events: none;
}
@keyframes blink_effect {
    0% { opacity: 0;}
	25%{opacity: 0.5;}
	50% { opacity: 1;}
	75%{opacity: 0.5;}
    100% { opacity: 0;}
	
}

.maru{
	position: absolute;
	top:50%;
	left: 50%;
	width: 700px;
	transform: translate(-50%,-50%);
	margin: 0;
	padding: o;
	pointer-events: none;
}