@charset "utf-8";
/* CSS Document */
/*--inview animation---------------*/
/*ani_text*/
.ani_text{
}
.ani_text{
	display: block;
	opacity: 0;
	transform: translate(10px,10px);
	transition: transform 1s cubic-bezier(.42,0,.58,1), opacity 1s cubic-bezier(.42,0,.58,1);
}
.ani_text.inview{
	opacity: 1;
	transform: translate(0,0);
}
.ani_text:nth-of-type(1){
	transition-delay:.2s;
}
.ani_text:nth-of-type(2){
	transition-delay:.4s;
}
.ani_text:nth-of-type(3){
	transition-delay:.6s;
}
.ani_text:nth-of-type(4){
	transition-delay:.8s;
}
.ani_text:nth-of-type(5){
	transition-delay:1s;
}
.ani_text:nth-of-type(6){
	transition-delay:1.2s;
}
.ani_text:nth-of-type(7){
	transition-delay:1.4s;
}
.ani_text:nth-of-type(8){
	transition-delay:1.6s;
}
.ani_text:nth-of-type(9){
	transition-delay:1.8s;
}
.ani_text:nth-of-type(10){
	transition-delay:2s;
}
.ani_text:nth-of-type(11){
	transition-delay:2.2s;
}
.ani_text:nth-of-type(12){
	transition-delay:2.4s;
}
.ani_text:nth-of-type(13){
	transition-delay:2.6s;
}
.ani_text:nth-of-type(14){
	transition-delay:2.8s;
}
.ani_text:nth-of-type(15){
	transition-delay:3s;
}
@media (max-width: 768px){
	.ani_text{
		transition-delay: 0s !important;
	}
}
/*txtanim*/
.txtanim span {
  display: inline-block;
  opacity: 0;
  transform: scale(1.2) translate(-50%, -50%);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}
.txtanim.inview span {
  animation: textfadein 1.5s ease forwards;
}
.txtanim.inview span:nth-child(1) {
  animation-delay: 0.1s;
}
.txtanim.inview span:nth-child(2) {
  animation-delay: 0.2s;
}
.txtanim.inview span:nth-child(3) {
  animation-delay: 0.3s;
}
.txtanim.inview span:nth-child(4) {
  animation-delay: 0.4s;
}
.txtanim.inview span:nth-child(5) {
  animation-delay: 0.5s;
}
.txtanim.inview span:nth-child(6) {
  animation-delay: 0.6s;
}
.txtanim.inview span:nth-child(7) {
  animation-delay: 0.7s;
}
.txtanim.inview span:nth-child(8) {
  animation-delay: .8s;
}
.txtanim.inview span:nth-child(9) {
  animation-delay: .9s;
}
.txtanim.inview span:nth-child(10) {
  animation-delay: 1s;
}
.txtanim.inview span:nth-child(11) {
  animation-delay: 1.1s;
}
.txtanim.inview span:nth-child(12) {
  animation-delay: 1.2s;
}
.txtanim.inview span:nth-child(13) {
  animation-delay: 1.3s;
}
.txtanim.inview span:nth-child(14) {
  animation-delay: 1.4s;
}
.txtanim.inview span:nth-child(15) {
  animation-delay: 1.5s;
}
@keyframes textfadein {
  0% {
    opacity: 0;
    transform: scale(1.2) translate(-50%, -50%);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
  }
  25% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: scale(1) translate(0);
    -webkit-backdrop-filter: blur(0);
    backdrop-filter: blur(0);
  }
}
/*swipe*/
.swipe{
   position: relative;
   overflow: hidden;
}
.swipe::after{
   content: '';
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
   background: #fff;
   pointer-events: none;
   z-index: 1;
   transform: translateX(-100%);
   transition: 1.2s ease-in-out;
}
.swipe.white::after{
   background: #fff;
}
.swipe .swipe_in{
   opacity: 0;
   transition: 0.2s ease-in;
   transition-delay: 0.6s;
}
.swipe.inview .swipe_in{
   opacity: 1;
}
.swipe.inview::after{
   transform: translateX(100%);
}

.wa.inview::before{
	animation: ZoomUp 1s forwards;
}
@keyframes ZoomUp{
	0%{
		transform: scale(0.2) translate(-50%, -20%);
		opacity: 0;
	}
	100%{
		transform: scale(1) translate(-50%, -20%); 
		opacity: 1;
	}
}

/* スクロールフェードイン ================================================== */
.fadein {
	opacity : 0.2;
	transform : translate(0, 80px);
	transition : all 500ms;
	}

.fadein.scrollin {
	opacity : 1;
	transform : translate(0, 0);
	}