@keyframes fade {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@keyframes zoom-in {
	0% {
		transform: scale(1);
	}

	100% {
		transform: scale(1.2);
	}
}

@keyframes rotate_before {
	0% {
		transform: rotate(45deg);
	}

	100% {
		transform: rotate(405deg);
	}
}

@keyframes rotate_after {
	0% {
		transform: rotate(-45deg);
	}

	100% {
		transform: rotate(-405deg);
	}
}

@keyframes scroll {
	0% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(5px);
	}

	100% {
		transform: translateY(0);
	}
}

.fadeUpTrigger {
	opacity: 0;
}

.fadeInTrigger {
  transition: 1s;
  opacity: 0;
}

.fadeInTrigger.animated,.fadeRightTrigger.animated,.fadeLeftTrigger.animated {
  opacity: 1;
}

.fadeRightTrigger {
  transform: translate3d(50px, 0, 0);
  transition: 1s;
  opacity: 0;
}

.fadeLeftTrigger {
	transform: translate3d(-50px, 0, 0);
	transition: 1s;
	opacity: 0;
}

/* その場で */
.fadeIn {
	animation-name: fadeInAnime;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	opacity: 0;
}

@keyframes fadeInAnime {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

/* 下から */
.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);
	}
}

/* 上から */
.fadeDown {
	animation-name: fadeDownAnime;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
	opacity: 0;
}

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

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

/* 左から */
.fadeLeft {
	animation-name: fadeLeftAnime;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
	opacity: 0;
}

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

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

/* 右から */
.fadeRight {
	animation-name: fadeRightAnime;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
	opacity: 0;
}

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

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


/* アニメーション遅延 */
.delay_01{
	animation-delay: .1s;
	transition-delay: .1s;
}
.delay_02{
	animation-delay: .2s;
	transition-delay: .2s;
}
.delay_03{
	animation-delay: .3s;
	transition-delay: .3s;
}
.delay_04{
	animation-delay: .4s;
	transition-delay: .4s;
}
.delay_05{
	animation-delay: .5s;
	transition-delay: .5s;
}
.delay_06{
	animation-delay: .6s;
	transition-delay: .6s;
}
.delay_07{
	animation-delay: .7s;
	transition-delay: .7s;
}
.delay_08{
	animation-delay: .8s;
	transition-delay: .8s;
}
.delay_09{
	animation-delay: .9s;
	transition-delay: .9s;
}
.delay_10{
	animation-delay: 1s;
	transition-delay: 1s;
}
.delay_15{
	animation-delay: 1.5s;
	transition-delay: 1.5s;
}
.delay_20{
	animation-delay: 2s;
	transition-delay: 2s;
}
.delay_25{
	animation-delay: 2.5s;
	transition-delay: 2.5s;
}
.delay_30{
	animation-delay: 3s;
	transition-delay: 3s;
}

/*アニメーション用CSS*/
.updown {
	/* アニメーションの名前 */
	animation-name: UpDown;
	/* アニメーションの１回分の長さ */
	animation-duration: 0.5s;
	/* アニメーションの回数 */
	animation-iteration-count: infinite;
	/* アニメーションの進行具合 */
	animation-timing-function: ease-in-out;
	/* アニメーション再生の向き */
	animation-direction: alternate;
}

/* アニメーションの設定 */
@keyframes UpDown {
	/* 開始地点 */
	0% {
		/* Y軸0px */
		transform: translateY(0);
	}

	/* 終了地点 */
	100% {
		/* Y軸50px */
		transform: translateY(10px);
	}
}

@keyframes btn_updown{
 0%{transform:translateY(3px)}
 25%{transform:translateY(0px)}
 50%{transform:translateY(-3px)}
 75%{transform:translateY(0px)}
 100%{transform:translateY(3px)}
}