
/* ヘッダ キャラクタ */
.fadeUpRotate1 {
  animation-name: fadeUpAnimRotate1;
  animation-duration: 1.3s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes fadeUpAnimRotate1 {
  0% {
    opacity: 0;
    transform: translateY(15vh) scale(0.2) rotate(90deg);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(10deg);
  }
}
/* ヘッダ ロゴ */
.fadeUpRotate2 {
  animation-name: fadeUpAnimRotate2;
  animation-duration: 0.8s;
  animation-delay: 0.3s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes fadeUpAnimRotate2 {
  0% {
    opacity: 0;
    transform: translateY(20vh) scale(0.2) rotate(-180deg);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0deg);
  }
}
/* お金の為ならなんでもアリ */
.fadeUpFade1 {
  animation-name: fadeUpAnimFade1;
  animation-duration: 0.8s;
  animation-delay: 0.8s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes fadeUpAnimFade1 {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
/* 強烈なすごろくxRPG */
.fadeUpFade2 {
  animation-name: fadeUpAnimFade2;
  animation-duration: 0.7s;
  animation-delay: 0.9s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes fadeUpAnimFade2 {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
/* 予約受付中 */
.fadeUpFadeReserve {
  animation-name: fadeUpAnimReserve;
  animation-duration: 0.7s;
  animation-delay: 1.1s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes fadeUpAnimReserve {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
/* Nintendo Switch版 */
.fadeUpFadePlatform {
  animation-name: fadeUpAnimPlatform;
  animation-duration: 0.6s;
  animation-delay: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes fadeUpAnimPlatform {
  0% {
    opacity: 0;
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
/* 発売予定 */
.fadeUpFadeCelldate {
  animation-name: fadeUpAnimCelldate;
  animation-duration: 0.9s;
  animation-delay: 1.1s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes fadeUpAnimCelldate {
  0% {
    opacity: 0;
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* カウントダウンタイマー スライドイン */
.fadeUpFadeCountdown {
  animation-name: fadeUpAnimCountdown;
  animation-duration: 0.9s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes fadeUpAnimCountdown {
  0% {
    opacity: 0;
    transform: translate(-50vw, 0);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
/* 不具合情報 スライドイン */
.fadeUpFadeNotice {
  animation-name: fadeUpAnimNotice;
  animation-duration: 1.1s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes fadeUpAnimNotice {
  0% {
    opacity: 0;
    transform: translate(-50vw, 0);
  }
  10% {
    opacity: 0;
    transform: translate(-50vw, 0);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}

/* スクロールしたときにフェードイン処理 */
.fadeUp{
  animation-name:fadeUpAnim;
  animation-duration:1s;
  animation-fill-mode:forwards;
  opacity:0;
}
@keyframes fadeUpAnim{
  0% {
    opacity: 0;
    transform: translateY(3vh) scale(0.75);
  }
  40% {
    opacity: 0.8;
    transform: translateY(-1.5vw) scale(1);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.fadeUpAnim{
    opacity: 0;
}

.fadeOut{
  animation-name:fadeOutAnim;
  animation-duration:0.5s;
  animation-fill-mode:forwards;
  opacity:1;
}
@keyframes fadeOutAnim{
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    z-index: -1;
  }
}

/* アンカータグ用揺らす */
.shake-anim:hover {
    animation:shake 0.3s ease;
}
@keyframes shake {
    0%   { transform:rotate(0); }
    16%  { transform:rotate(8deg); }
    32%  { transform:rotate(-8deg); }
    48%  { transform:rotate(6deg); }
    64%  { transform:rotate(-4deg); }
    80%  { transform:rotate(2deg); }
    96%  { transform:rotate(-1deg); }
    100% { transform:rotate(0deg); }
}
.shake-big-anim:hover {
    animation:shake-big 0.3s ease;
}
@keyframes shake-big {
    0%   { transform:rotate(0); }
    16%  { transform:rotate(8deg); }
    32%  { transform:rotate(-8deg) scale(1.1); }
    48%  { transform:rotate(6deg) scale(1.1); }
    64%  { transform:rotate(-4deg); }
    80%  { transform:rotate(2deg); }
    96%  { transform:rotate(-1deg); }
    100% { transform:rotate(0deg); }
}
/* NEWマーク */
.top-menu-newmark-anim {
  animation:newMarkAnim 5s infinite;
  animation-fill-mode:forwards;
  animation-delay: 1s;
}
@keyframes newMarkAnim {
  0% { 
    transform:rotate(-15deg) scale(1);
     }
  3% {
    transform:rotate(-11deg) scale(1);
      }
  6% {
    transform:rotate(-17deg) scale(1);
      }
  9% {
    transform:rotate(-11deg) scale(1);
      }
  12% {
    transform:rotate(-17deg) scale(1);
      }
  100% { 
    transform:rotate(-15deg) scale(1);
     }
}

}

/* タイトルスライドイン */
.slideInTitle {
  animation-name: slideInTitle;
  animation-duration: 0.9s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes slideInTitle {
  0% {
    opacity: 0;
    transform: translateX(-100%);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%);
  }
}
.bg-scroll {
  animation: scroll-anim 30s linear infinite;
  background-size: 25% auto;
}
@keyframes scroll-anim {
	100% {
		background-position: -100% 0;
	}
}






.swing-anim {
    animation:swing 10s infinite;
}
@keyframes swing {
    0%   { transform:rotate(0); }
    16%  { transform:rotate(8deg); }
    32%  { transform:rotate(-8deg); }
    48%  { transform:rotate(6deg); }
    64%  { transform:rotate(-4deg); }
    80%  { transform:rotate(2deg); }
    96%  { transform:rotate(-1deg); }
    100% { transform:rotate(0deg); }
}

.pop-anim {
  animation:pop 10s infinite;
}
@keyframes pop {
  0%   { transform: scale(1.0,  1.0)  translate(0, 0);    }
  1%  { transform: scale(1.0, 0.85)  translate(0, 5px);  }
  3%  { transform: scale(1.1, 0.9)  translate(0, 8px);  }
  5%  { transform: scale(0.98, 1.05) translate(0, -8px); }
  7%  { transform: scale(1.0,  0.9)  translate(0, 5px);  }
  10%   { transform: scale(1.0,  1.0)  translate(0, 0);    }
  100% { transform: scale(1.0,  1.0)  translate(0, 0);    }
  0%, 100% {
    opacity: 1;
  }
}
