@charset "utf-8";

/*up,down,left,right,transform1,transform2の共通設定
（待機中の設定）
---------------------------------------------------------------------------*/
.up, .down, .left, .right, .transform1, .transform2 {
  position: relative;
  opacity: 0; /*透明度（透明の状態）*/
}
.right2 {
  position: relative;
  opacity: 0; /*透明度（透明の状態）*/
}
.right3 {
  position: relative;
  opacity: 0; /*透明度（透明の状態）*/
}
.right4 {
  position: relative;
  opacity: 0; /*透明度（透明の状態）*/
}

/*up,down,left,right,transform1,transform2の共通設定
（要素が見えたら実行するアクションの設定）
---------------------------------------------------------------------------*/
.upstyle, .downstyle, .leftstyle, .rightstyle, .transform1style, .transform2style {
  opacity: 1; /*透明度（色が100%出た状態）*/
  transition: 1s 0.5s; /*1sはアニメーションの実行時間1.5秒。0.5sは0.5秒遅れてスタートする指定。*/
}
.rightstyle2 {
    opacity: 1; /*透明度（色が100%出た状態）*/
    transition: 1s 1.5s;
}
.rightstyle3 {
    opacity: 1; /*透明度（色が100%出た状態）*/
    transition: 1s 2.5s;
}
.rightstyle4 {
    opacity: 1; /*透明度（色が100%出た状態）*/
    transition: 1s 3.5s;
}

/*upスタイル。下から上にフェードインしてくるスタイル
---------------------------------------------------------------------------*/
/*待機中の設定*/
.up {
  bottom: -20px; /*基準値の下20pxの場所からスタート*/
}
/*要素が見えたら実行するアクション*/
.upstyle {
  bottom: 0px; /*基準値まで戻す*/
}
/*downスタイル。上から下にフェードインしてくるスタイル
---------------------------------------------------------------------------*/
/*待機中の設定*/
.down {
  top: -20px; /*基準値の上20pxの場所からスタート*/
}
/*要素が見えたら実行するアクション*/
.downstyle {
  top: 0px; /*基準値まで戻す*/
}
/*leftスタイル。左からフェードインしてくるスタイル
---------------------------------------------------------------------------*/
/*待機中の設定*/
.left {
  left: -20px; /*基準値より左に100pxの場所からスタート*/
}
/*要素が見えたら実行するアクション*/
.leftstyle {
  left: 0px; /*基準値まで戻す*/
}

/*rightスタイル。右からフェードインしてくるスタイル
---------------------------------------------------------------------------*/
/*待機中の設定*/
.right, .right2, .right3, .right4 {
  right: -20px; /*基準値より右に100pxの場所からスタート*/
}
/*要素が見えたら実行するアクション*/
.rightstyle, .rightstyle2, .rightstyle3, .rightstyle4 {
  right: 0px; /*基準値まで戻す*/
}

/*transform1スタイル。その場で回転するスタイル
---------------------------------------------------------------------------*/
/*待機中の設定*/
.transform1 {
  transform: scaleX(0); /*幅を0%でスタート*/
}
/*要素が見えたら実行するアクション*/
.transform1style {
  transform: scaleX(1); /*幅を100%に戻す*/
}
/*transform2スタイル。倒れた状態から起き上がるスタイル
---------------------------------------------------------------------------*/
/*待機中の設定*/
.transform2 {
  transform: perspective(400px) translateZ(-70px) rotateX(50deg);
}
/*要素が見えたら実行するアクション*/
.transform2style {
  transform: perspective(400px) translateZ(0px) rotateX(0deg);
}
/*blurスタイル。ぼかしで出現するスタイル。
---------------------------------------------------------------------------*/
/*待機中の設定*/
.blur {
  opacity: 0; /*透明度（透明の状態）*/
  filter: blur(30px);
  transform: scale(1.1);
}
/*要素が見えたら実行するアクション*/
.blurstyle {
  opacity: 1;
  filter: blur(0);
  transform: scale(1);
  transition: 1s 0.5s;
}
/*transform3スタイル。小さなサイズから原寸大になるスタイル
---------------------------------------------------------------------------*/
/*キーフレーム（アニメーション）設定*/
@keyframes transform3 {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.05);
  }
  70% {
    transform: scale(0.99);
  }
  100% {
    transform: scale(1);
  }
}
/*待機中の設定*/
.transform3 {
  transform: scale(0);
}
/*要素が見えたら実行するアクション*/
.transform3style {
  animation: transform3 0.8s ease-out 0.5s both;
}
/*クラッカーアニメーション
---------------------------------------------------------------------------*/
/*画像への指定。共通。*/
.crackerstyle img {
  width: 150px; /*各クラッカーの幅*/
  position: absolute;
  bottom: 0px;
}
/*左側（１つ目のimgタグ）の画像への追加指定*/
.crackerstyle img:nth-of-type(1) {
  left: 0px;
}
/*右側（２つ目のimgタグ）の画像への追加指定*/
.crackerstyle img:nth-of-type(2) {
  right: 0px;
  transform: scale(-1, 1); /*画像を左右逆向きにする*/
}

/*---------------------------------------------------------------------------
ここから下は画面幅600px以上の追加指定
---------------------------------------------------------------------------*/
@media screen and (min-width:600px) {
	/*クラッカーアニメーション
	---------------------------------------------------------------------------*/
	/*画像への指定。共通。*/
	.crackerstyle img {
		width: 200px; /*各クラッカーの幅*/
	}
}

/*---------------------------------------------------------------------------
ここから下は画面幅900px以上の追加指定
---------------------------------------------------------------------------*/
@media screen and (min-width:900px) {
	/*クラッカーアニメーション
	---------------------------------------------------------------------------*/
	/*画像への指定。共通。*/
	.crackerstyle img {
		width: 300px; /*各クラッカーの幅*/
	}
}