@charset "utf-8";
.shinkansen,.shinkansen2 { /* 新幹線アニメ */
	display: inline;
	position: absolute;
	left: -2000px;
	width: 48px;
	z-index: 5;
}
.shinkansen{
	animation: shinkansenanime 70s linear 0s infinite;
}
.shinkansen2{
	animation: shinkansenanime 70s linear 2.9s infinite;
}
.shinkansen img,.shinkansen2 img {
	width: 100%;
}
.shinkansen2 img {
	transform: scale(-1,1);
}
@keyframes shinkansenanime {
    0%   { top:-5%;left:60%;transform: rotate(-85deg);}
    17%   { top:14%;left:54%;}
    19%   { transform: rotate(-63deg);}
    26%   { transform: rotate(-63deg);}
    28%   { top:26%;left:46%;}
    30%   { transform: rotate(-150deg);}
    36%   { transform: rotate(-150deg);}
    38%   { top:33%;left:66%;}
    42%   { transform: rotate(-74deg);}
    53%   { transform: rotate(-74deg);}
    55%   { top:53%;left:58%;}
    57%   { transform: rotate(-57deg);}
    74%   { transform: rotate(-57deg);}
    76%   { top:75%;left:38%;}
    78%   { transform: rotate(-75deg);}
    100% { top:105%;left:30%;transform: rotate(-78deg);}
}
.airplane { /* 飛行機エアプレーンアニメ */
	display: inline;
	position: absolute;
	left: -2000px;
	animation: airplaneanime 60s linear 0s infinite;
}	
.airplane img {
	width: 100%;
}
@keyframes airplaneanime {
    0%   { width: 7vw;z-index: 20;top:10%;left:100%;filter: drop-shadow(-2vw 20vw 2vw rgba(0,0,0,0.1));transform: rotate(-20deg);animation-timing-function: ease-out; }
    45%   { width: 3vw;z-index: 3;top:35%;left:57%;filter: drop-shadow(0vw 0vw 0vw rgba(0,0,0,0.15));transform: rotate(-10deg); }
    55%   { width: 3vw;z-index: 3;top:35%;left:57%;filter: drop-shadow(0vw 0vw 0vw rgba(0,0,0,0.15));animation-timing-function: ease-in;transform: rotate(-10deg); }
    100% { width: 7vw;z-index: 20;top:65%;left:-20%;filter: drop-shadow(-2vw 30vw 2vw rgba(0,0,0,0.05));transform: rotate(0deg); }
}
.ship { /* 船シップアニメ */
	display: inline;
	position: absolute;
	left: -2000px;
	width: 7vw;
	z-index: 5;
	animation: shipanime 60s linear 0s infinite;
}	
.ship img {
	width: 100%;
}
@keyframes shipanime {
    0%   { top:53%;left:100%;transform: rotate(0deg) scale(1,1);animation-timing-function: liner; }
    20%  { top:55%;left:75%;transform: rotate(15deg) scale(1,1);;animation-timing-function: ease-out; }
    40%  { top:49%;left:68%;transform: rotate(30deg) scale(1,1); }
    44%  { transform: scale(1,1); }
    46%  { transform: scale(-1,1); }
    50%  { top:49%;left:69%;transform: rotate(40deg) scale(-1,1);animation-timing-function: ease-in; }
    75%  { top:55%;left:75%;transform: rotate(0deg) scale(-1,1);animation-timing-function: liner; }
    100% { top:53%;left:100%;transform: rotate(-10deg) scale(-1,1); }
}