@charset "UTF-8";

/* ----------------------------
 フッターの汽車アニメーション
---------------------------- */
#footertrainparts {
  position: absolute;
  top: 0;
  left: 0;
}

/* 全体の動き */
#footertrain {
	position: absolute;
	top: 50px;
	left: 120%;
	animation: moveTrain 100s linear 0s infinite;
}
@keyframes moveTrain {
  0% {transform: translateX(0) rotateY(0); }
  48% {transform: translateX(-500%) rotateY(0); }
  49% {transform: translateX(-500%) rotateY(180deg); }
  98% {transform: translateX(50%) rotateY(180deg); }
  99% {transform: translateX(50%) rotateY(0); }
  100% {transform: translateX(0) rotateY(0); }
 }
@media (max-width: 767px) {
  #footertrain {
    position: absolute;
    top: 50px;
    left: 120%;
    animation: moveTrain 50s linear 0s infinite;
  }
  @keyframes moveTrain {
    0% {transform: translateX(0) rotateY(0); }
    48% {transform: translateX(-200%) rotateY(0); }
    49% {transform: translateX(-200%) rotateY(180deg); }
    98% {transform: translateX(50%) rotateY(180deg); }
    99% {transform: translateX(50%) rotateY(0); }
    100% {transform: translateX(0) rotateY(0); }
   }
}

/* 車両の動き */
#train1 {
  top: 0;
  left: 0px;
  animation: moveTrainPart 4s ease 0;
  animation-iteration-count: infinite;
}
#train2 {
  top: 0;
  left: 0;
  animation: moveTrainPart 3s ease 2s infinite;
  animation-iteration-count: infinite;
}
#train3 {
  top: 0;
  left: 0;
  animation: moveTrainPart 4s ease 1s infinite;
  animation-iteration-count: infinite;
}
#train4 {
  top: 0;
  left: 0;
  animation: moveTrainPart 4s ease 0 infinite;
  animation-iteration-count: infinite;
}
#train5 {
  top: 0;
  left: 0;
  animation: moveTrainPart 4s ease 3s infinite;
  animation-iteration-count: infinite;
}

@keyframes moveTrainPart {
0% {transform: translateY(0); }
 35% {transform: translateY(0); }
 40% {transform: translateY(-2px); }
 45% {transform: translateY(0); }
 100% {transform: translateY(0); }
}
@media (max-width: 767px) {
  #train1,#train2,#train3,#train4,#train5,#train6{
    width: 80px;
  }
  #train1 img,#train2 img,#train3 img,#train4 img,#train5 img,#train6 img{
    width: 100%;
  }
}

/* 煙の動き */
#smoke1 {
 	position: absolute!important;
 	top: -45px;
 	left: -10px;
 	width: 80px;
	animation: moveSmoke 4s linear 2s infinite;
}
#smoke2 {
 	position: absolute!important;
 	top: -45px;
 	left: -10px;
 	width: 80px;
 	opacity: 0;
	animation: moveSmoke 4s linear 4s infinite;
}
#smoke3 {
 	position: absolute!important;
 	top: -45px;
 	left: -10px;
 	width: 80px;
 	opacity: 0;
	animation: moveSmoke 4s linear 6s infinite;
}
#smoke1 img, #smoke2 img, #smoke3 img{
	max-width: 100%;
}
@keyframes moveSmoke {
0% {transform: translateX(0px) translateY(10px) scale(0.6,0.6); opacity: 1; ; }
50% {transform: translateX(100px) translateY(-8px) scale(1.,1.); opacity: 0.7; }
100% {transform: translateX(240px) translateY(-15px) scale(1.5,1.5); opacity: 0; }
}