/* Loading背景画面設定　*/
#splash {
    /*fixedで全面に固定*/
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 999;
  background:#c3f4f4;
  text-align:center;
  color:#fff;
  margin-top: -64px;
}

/* Loading画像中央配置　*/
#splash_logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Loading アイコンの大きさ設定 */
#splash_logo img {
  width: 320px;
}

/* fadeUpをするアイコンの動き */

.fadeUp{
animation-name: fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity: 0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

.tanime span{opacity: 0;}
.tanime.appeartext span{ animation:text_anime_on 1s ease-out forwards; }
@keyframes text_anime_on {
  0% {opacity:0;}
  100% {opacity:1;}
}

/*画像切り替え*/
.fade-change {
  position: relative;
  width: 100%;
  max-width: 560px;
  padding-top: 40.75%;
  margin-bottom: 40.75%;
}
.change-img {
  position: absolute;
  width: 100%;
  opacity: 0;
  top: 0;
  animation: change-img-anima 12s infinite;
  margin-top: 2rem;
}
.change-img:nth-of-type(1) {
  animation: change-img-anima-first 12s infinite;
  animation-delay: 0s;
}
.change-img:nth-of-type(2) {
  animation-delay: 4s;
}
.change-img:nth-of-type(3) {
  animation-delay: 8s;
}

@keyframes change-img-anima-first {
  0%{ opacity: １;}
  30%{ opacity: 1;}
  36%{ opacity: 1;}
  45%{ opacity: 0;}
  100%{ opacity: 0;}
}
@keyframes change-img-anima {
  0%{ opacity: 0;}
  30%{ opacity: 1;}
  36%{ opacity: 1;}
  45%{ opacity: 0;}
  100%{ opacity: 0;}
}


@media screen and (min-width: 576px) {
#splash_logo img {
  width: 380px;
}
}

@media screen and (min-width: 768px) {
.fade-change {
  position: relative;
  max-width: 47%;
  margin-bottom: 0;
}
.change-img {
  margin-top: 0;
}

#splash {
  margin-top: -74px;
}

}

@media screen and (min-width: 992px) {
#splash {
  margin-top: 0;
}
}

@media screen and (min-width: 1200px) {
#splash_logo img {
  width: 480px;
}
}