@charset "UTF-8";
/*
 * anime.css
 *
 */

/* index.css start */
#head-top {
	width:95%;
}
#headerIn, #head-top {
	position:absolute;
	z-index:10000000;
}
#headerLogo_left {
    display: inline-block;
    width: 294px;
    margin: 0 20px 0 0;
    text-align: left;
    vertical-align: top;
}
/* index.css end */

html {
	overflow-x: hidden;
}
#top_main {
	width:100vw;
	height:100vh;
	overflow:hidden;
}
#top_main img{
	width:100vw;
	height:100vh;
	object-fit: cover;
}
#map_hover {
	z-index : 9999999;
	position:absolute;
	top:0px;
	left:0px;
}

#map, #cars, #cars2, #points, #airplanes {
	width:100vw;
	height:100vh;
	position:absolute;
	top:0px;
	left:0px;
	overflow-y:hidden;
}

#cars::before {
	width: 8.75%;
	left: 70.5%;
	top: 24.6%;
	padding: 8.9432% 0 0;
	background-image: url(../img/1.png);
	overflow: hidden;
	display: block;
	content: "";
	height: 0;
	position: absolute;
	z-index: 100001;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	background-size: 100% auto;
	background-repeat:no-repeat;
}
#cars::after {
	width: 8.8%;
	left: 52.66%;
	top: 42.45%;
	padding: 8.9432% 0 0;
	background-image: url(../img/3.png);
	overflow: hidden;
	display: block;
	content: "";
	height: 0;
	position: absolute;
	z-index: 100001;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	background-size: 100% auto;
	background-repeat:no-repeat;
}
#cars2::before {
	width: 8.83%;
	left: 89.35%;
	top: 33.08%;
	padding: 8.9432% 0 0;
	background-image: url(../img/2.png);
	overflow: hidden;
	display: block;
	content: "";
	height: 0;
	position: absolute;
	z-index: 100001;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	background-size: 100% auto;
	background-repeat:no-repeat;
}
#cars2::after {
	width: 9.83%;
	left: 37.75%;
	top: 88.08%;
	padding: 8.9432% 0 0;
	background-image: url(../img/4.png);
	overflow: hidden;
	display: block;
	content: "";
	height: 0;
	position: absolute;
	z-index: 100001;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	background-size: 100% auto;
	background-repeat:no-repeat;
}
 
/** airplane **/
#airplane {
	width: 55px;
	height: 21px;
	left: 100%;
	top: 90%;
	z-index: 100000;
	padding: 0;
	-webkit-transform: translate3d(-100%, -50%, 0);
	transform: translate3d(-100%, -50%, 0);
	background-image: url(../img/animation/airplane.png);
	background-size: contain;
	overflow: hidden;
	-webkit-animation: top_main-airplane 10s steps(750, start) 0s infinite;
	animation: top_main-airplane 10s steps(750, start) 0s infinite;

    position: absolute;
    pointer-events: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
@-webkit-keyframes top_main-airplane {
	  0% { left:100%; top: 20%; }
	100% { left:90%; top: 0%;}
}
@keyframes top_main-airplane {
	  0% { left:100%; top: 20%; }
	100% { left:90%; top: 0%;}
}


/** car01 **/
#car01 {
	width: 23px;
	height: 18px;
	left: 54.2%;
	top: 52.1%;
	z-index: 100000;
	padding: 0;
	-webkit-transform: translate3d(-100%, -50%, 0);
	transform: translate3d(-100%, -50%, 0);
	background-image: url(../img/animation/car01.png);
	background-size: contain;
	overflow: hidden;
	-webkit-animation: top_main-airplane 5s steps(750, start) 0s infinite;
	animation: top_main-car01 5s steps(750, start) 0s infinite;

    position: absolute;
    pointer-events: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
@-webkit-keyframes top_main-car01 {
	  0% { left:54.2%; top: 52.1%; }
	100% { left:78.8%; top: 27%;}
}
@keyframes top_main-car01 {
	  0% { left:54.2%; top: 52.1%; }
	100% { left:78.8%; top: 27%;}
}

/** car02 **/
#car02 {
	width: 23px;
	height: 18px;
	left: 100%;
	top: 36%;
	z-index: 100000;
	padding: 0;
	-webkit-transform: translate3d(-100%, -50%, 0);
	transform: translate3d(-100%, -50%, 0);
	background-image: url(../img/animation/car02.png);
	background-size: contain;
	overflow: hidden;
	-webkit-animation: top_main-airplane 10s steps(750, start) 0s infinite;
	animation: top_main-car02 10s steps(750, start) 0s infinite;

    position: absolute;
    pointer-events: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
@-webkit-keyframes top_main-car02 {
	  0% { left:96%; top: 40%; }
	100% { left:42%; top: 100%;}
}
@keyframes top_main-car02 {
	  0% { left:96%; top: 40%; }
	100% { left:42%; top: 100%;}
}


#point01{
	width: 15px;
	height: 21px;
	left: 48%;
	top: 80%;
	opacity: 1;
	z-index: 100000;
	background-image: url(../img/animation/point.png);
	animation:Flash1 0.5s ease-in-out infinite alternate;
	position: absolute;
}

#point02{
	width: 15px;
	height: 21px;
	left: 13%;
	top: 58%;
	opacity: 1;
	z-index: 100000;
	background-image: url(../img/animation/point.png);
	animation:Flash1 0.5s ease-in-out infinite alternate;
	position: absolute;
}

#point03{
	width: 15px;
	height: 21px;
	left: 87%;
	top: 65%;
	opacity: 1;
	z-index: 100000;
	background-image: url(../img/animation/point.png);
	animation:Flash1 0.5s ease-in-out infinite alternate;
	position: absolute;
}

#point04{
	width: 15px;
	height: 21px;
	left: 49%;
	top: 51%;
	opacity: 1;
	z-index: 100000;
	background-image: url(../img/animation/point.png);
	animation:Flash1 0.5s ease-in-out infinite alternate;
	position: absolute;
}

/* アニメーション */
@keyframes Flash1{
    0% {opacity:0;}
    100% {opacity:1;}
}