/*　上に上がる動き　*/

#page-top.UpMove{
	animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime{
  from {
    opacity: 0;
	transform: translateY(300px);
  }
  to {
    opacity: 1;
	transform: translateY(0);
  }
}

/*　下に下がる動き　*/

#page-top.DownMove{
	animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
  from {
  	opacity: 1;
	transform: translateY(0);
  }
  to {
  	opacity: 1;
	transform: translateY(300px);
  }
}



.boyo_btn {
  animation: squash 1.2s ease-in-out infinite; /* .boyoboyo側で1.2秒おきにアニメーションを呼び出し実行する */
}
@keyframes squash {
  0% {transform: scale(1);}
  50% {transform: scale(1.1);}/*大きさを変えたいため、scaleを、1→1.1→1と変化*/
  100% {transform: scale(1);}
}


/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.fadeUpTrigger,.faderightTrigger,.fadeleftTrigger,.fadeinTrigger{
    opacity: 0;
}


.fadein{
animation-name:fadeinAnime;
animation-duration:2.5s;
animation-fill-mode:forwards;
opacity:0;
}
@keyframes fadeinAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* fadeUp */

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

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

  to {
    opacity: 1;
  transform: translateY(0);
  }
}
.faderight{
animation-name:faderightAnime;
animation-duration:0.8s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes faderightAnime{
  from {
    opacity: 0;
  transform: translateX(100px);
  }

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


.fadeleft{
animation-name:fadeleftAnime;
animation-duration:0.8s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeleftAnime{
  from {
    opacity: 0;
  transform: translateX(-100px);
  }

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


.fadedown{
animation-name:fadedownAnime;
animation-duration:0.8s;
animation-fill-mode:forwards;
opacity:0;
}
.fadedown_late {
animation-delay: 0.5s; /* 1秒遅延 */
animation-duration:1.3s;
}

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

  to {
    opacity: 1;
  transform: translateY(0);
  }
}
.blur{
animation-delay: 0.5s; /* 1秒遅延 */
animation-name:blurAnime;
animation-duration:0.8s;
animation-fill-mode:forwards;
 -ms-filter: blur(6px);
  filter: blur(6px);
}

@keyframes blurAnime{
  from {
 -ms-filter: blur(6px);
  filter: blur(6px);
  }

  to {
 -ms-filter: blur(0px);
  filter: blur(0px);
  }
}

.delay05 {
animation-delay: 0.5s;
}
.delay10 {
animation-delay: 1s;
}
.delay15 {
animation-delay: 1.5s;
}

/*-fade control-*/


.fadein_animation_start{
  /* キーフレームアニメーションを指定*/
  animation-name: fadein_animation;
  /* アニメーションの開始時間の遅延*/
  animation-delay: 0.3s;
  /* アニメーションの時間を指定*/
  animation-duration: 1s;
  /*アニメーション再生後のスタイルを指定*/
  animation-fill-mode: both;
}
@keyframes fadein_animation{
  0% {
    opacity: 0;
  }
  100%{
    opacity: 1;
    transform: translate(0);
  }
}

.slidedown{
  transform: translateY(-50px);
transition-delay: 1.2s;
}
.fuwa {
  animation: floating-y 1.8s ease-in-out infinite alternate-reverse;
	opacity: 0.8;
}
@keyframes floating-y {
  0% {
    transform: translateY(-1.1%);
  }
  100% {
    transform: translateY(1.1%);
  }
}
@keyframes displayAnime{
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes yureru-s {
    0% {
        transform: translate(2px, 0px);
    }
    5% {
        transform: translate(-2px, 0px);
    }
    10% {
        transform: translate(2px, 0px);
    }
    15% {
        transform: translate(-2px, 0px);
    }
    20% {
        transform: translate(2px, 0px);
    }
    25% {
        transform: translate(-2px, 0px);
    }
    30% {
        transform: translate(0px, 0px);
    }
}


.bubble {
  animation: floating-y 2.8s ease-in-out infinite alternate-reverse;
}
.leaf {
  animation: floating-y 2.8s ease-in-out infinite alternate-reverse;

}


@keyframes floating-y {
  0% {
    transform: translateY(-5%);
  }
  100% {
    transform: translateY(5%);
  }
}

@keyframes loop-slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}


@keyframes loop-slide-reverse {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}