@charset "utf-8";

/*========= LoadingのためのCSS ===============*/

/* ●●Loading画面ここから　*/
#splash {
  /*fixedで全面に固定*/
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 10000;

  background-image: url(../img/roading-bg.jpeg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;

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

    /* ●●Loading アイコンの大きさ設定ここから　*/
    img {
      max-width: 150px;
    }
    /* ●Loading アイコンの大きさ設定ここまで　*/
  }
  /* ●Loading画像中央配置ここまで　*/
}
/* ●Loading画面ここまで　*/

/* ●●fadeUpをするアイコンの動きここから */
.roading-fadeup {
  animation-name: fadeUpAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(100px) rotateY(-90deg);
    filter: blur(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0)rotateY(0deg) ;
    filter: blur(0px);
  }
}
/* ●fadeUpをするアイコンの動きここまで */