@charset "UTF-8";  

.scrollView {
  opacity: 1 !important;
}

/* フェードイン */
.fadein {
	opacity : 0;
	transition : all 1000ms;
}
.fadein.scrollin {
	opacity : 1;
}
@keyframes FadeIn {
	from {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes bottomIn {
	from {
		opacity: 0;
		-webkit-transform: transform: translateY(50px);
		transform: translateY(50px);
	}
	100% {
		opacity: 1;
		-webkit-transform: transform: translateY(0px);
		transform: translateY(0px);
	}
}
@keyframes bottomIn50 {
	from {
		opacity: 0;
		-webkit-transform: transform: translateY(50px) translateX(-50%);
		transform: translateY(50px) translateX(-50%);
	}
	100% {
		opacity: 1;
		-webkit-transform: transform: translateY(0px) translateX(-50%);
		transform: translateY(0px) translateX(-50%);
	}
}
@keyframes slideInLeft {
	from {
		opacity: 0;
		-webkit-transform: translate3d(100%, 0, 0);
		transform: translate3d(100%, 0, 0);
	}
	to {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}
@keyframes slideInLeft2 {
	from {
		opacity: 0;
		-webkit-transform: translate3d(30%, 0, 0);
		transform: translate3d(30%, 0, 0);
	}
	to {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}
@keyframes slideInLeft3 {
	from {
		opacity: 0;
		-webkit-transform: translate3d(50%, 0, 0);
		transform: translate3d(50%, 0, 0);
	}
	to {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}
@keyframes slideInTopLeft {
	from {
		opacity: 0;
		-webkit-transform: translate3d(40px, -40px, 0);
		transform: translate3d(40px, -40px, 0);
	}
	to {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}
@keyframes slideInRight {
	from {
		opacity: 0;
		-webkit-transform: translate3d(-100%, 0, 0);
		transform: translate3d(-100%, 0, 0);
	}
	to {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}
@keyframes slideInRight2 {
	from {
		opacity: 0;
		-webkit-transform: translate3d(-30%, 0, 0);
		transform: translate3d(-30%, 0, 0);
	}
	to {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}
@keyframes slideInRight3 {
	from {
		opacity: 0;
		-webkit-transform: translate3d(-50%, 0, 0);
		transform: translate3d(-50%, 0, 0);
	}
	to {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}
@keyframes slideInBottomRight {
	from {
		opacity: 0;
		-webkit-transform: translate3d(-40px, 40px, 0);
		transform: translate3d(-40px, 40px, 0);
	}
	to {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}
@keyframes ttl_anime {
	from {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
	to {
		opacity: 1;
		-webkit-transform: translate3d(0, 100%, 0);
		transform: translate3d(0, 100%, 0);
	}
}
@keyframes ZoomIn {
	from {
		opacity: 0;
		-webkit-transform: scale(2.5, 2.5);
		transform: scale(2.5, 2.5);
	}
	100% {
		opacity: 1;
		-webkit-transform: scale(1, 1);
		transform: scale(1, 1);
	}
}

/* ヘッダーアニメーション */
@keyframes rotation1{
	0%{ transform: translateY(-50%) rotate(0); transform-origin: 50% 50%;}
	100%{ transform: translateY(-50%) rotate(360deg); transform-origin: 50% 50%;}
}
@keyframes rotation2{
	0%{ transform: rotate(0); transform-origin: 50% 50%;}
	100%{ transform: rotate(360deg); transform-origin: 50% 50%;}
}
@keyframes rotation3{
	0%{ transform: rotate(0);}
	100%{ transform: rotate(-360deg); }
}
@keyframes yuragi {
  0% , 100%{
      transform: translateY(-50%) rotate(5deg);
  }
  50%{
      transform: translateY(-50%) rotate(-5deg);
  }
}