/* ロゴの大きさ設定 */

.resizeimage img {
  width: 40vw;
  height: 90.0vh;
  }

.rogo {
  padding: 0vh 1vw;/* 上から、左から */
  z-index: -10;
  }
  
/* キャラクターの大きさ設定 */

.resizeimage2 img {
  width: 9vw;
  }

/* 玄武の動き */

.genbu {
  position: absolute;
  left: 0px;
  top: 0px;
  padding: calc(4.7vh) calc(17.0vw);/* 上から、左から */
  animation: genbu-a 2.5s forwards;
  }

@keyframes genbu-a {
  0% {
    transform: translateX(1900px) translateY(0px);/* 開始位置からどこから？ */
  }

    100% { /* 再生時間は標準の何％？ */
    transform: translateX(0px) translateY(0px);/* 止まる位置からのズレは？ */
  }
}

/* 青龍の動き */

.seiryuu {
  position: absolute;
  left: 0px;
  top: 0px;
  padding: calc(34.5vh) calc(32.0vw);/* 上から、左から */
  animation: seiryuu-a 2.5s forwards;
  }

@keyframes seiryuu-a {
  0% {
  transform: translateX(1700px) translateY(300px);/* 止まる位置からどこから？ */
  }

  100% { /* かかる時間は標準のなん％？ */
  transform: translateX(0px) translateY(0px);/* 止まる位置からのズレは？ */
  }
}

/* 朱雀の動き */

.suzaku {
  position: absolute;
  left: 0px;
  top: 0px;
  padding: calc(70.4vh) calc(17.0vw);/* 上から、左から */
  animation: suzaku-a 2.5s forwards;
  }

@keyframes suzaku-a {
  0% {
  transform: translateX(1200px) translateY(420px);/* 止まる位置からどこから？ */
  }

  100% { /* かかる時間は標準のなん％？ */
  transform: translateX(0px) translateY(0px);/* 止まる位置からのズレは？ */
  }
}

/* 白虎の動き */

.byakko {
 position: absolute;
 left: 0px;
 top: 0px;
 padding: calc(37.0vh) calc(3.0vw);/* 上から、左から */
 animation: byakko-a 2.5s forwards;
 }

@keyframes byakko-a {
  0% {
  transform: translateX(0px) translateY(700px);/* 止まる位置からどこから？ */
  }

  100% { /* かかる時間は標準のなん％？ */
  transform: translateX(0px) translateY(0px);/* 止まる位置からのズレは？ */
  }
}

/* 麒麟の動き */

.kirin {
  position: absolute;
  top: 36.0vh;
  left: 17.7vw;
  animation: kirin-a 2.5s forwards;
  }

@keyframes kirin-a {

/* ズームイン */

0% {
    transform: scale(0.0);
    opacity: 0;
  }
100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* 文章文字の設定 */

.auto-size {
  font-size: 4.0vw;
  font-weight: bolder;
  color: white;
  text-align: center;
  text-shadow: black 0 0 2vh,black 0 0 2vh,black 0 0 2vh;
  }

/* 文章じわじわ出てくる */

.text-focus-in {
  -webkit-animation: text-focus-in 3.0s;
  animation: text-focus-in 3.0s;/* 何秒掛けて表示するか */
}
@-webkit-keyframes text-focus-in {
  0% {
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}

@keyframes text-focus-in {
  0% {
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}

.chuui {
  width      : 100%;
  line-height: 2.5vh;
  text-align : center;
  font-weight: bold;
  color      : white;
  overflow   : hidden;
  text-shadow: black 0 0 3px,black 0 0 3px,black 0 0 3px;
  }
  
.chuui span{
  display     : inline-block;
  padding-left: 100%;
  white-space : nowrap;
  line-height : 2.5vh;
  animation   : scrollAnime 30s linear infinite;
  }

@keyframes scrollAnime{
    0% { transform: translateX(0%); }
  100% { transform: translateX(-100%); }
}