/*----------------------------------------
	animation keyframes
------------------------------------------*/

@keyframes rotation{
	0%{ transform: rotate(0);}
	100%{ transform: rotate(360deg); }
}
/* animation: rotation 60s linear infinite; */

@keyframes rotation_r{
	0%{ transform: rotate(0);}
	100%{ transform: rotate(-360deg); }
}
/* animation: rotation 60s linear infinite; */

@keyframes hor_move_l{
	0% {transform: translateX(0%);}
	100% {transform: translateX(-100%);}
}
/* animation: hor_move_l 60s linear infinite; */

@keyframes hor_move_r{
	0% {transform: translateX(-100%);}
	100% {transform: translateX(0%);}
}
/* animation: hor_move_r 60s linear infinite; */

@keyframes ver_move_t{
	0% {transform: translateY(0%);}
	100% {transform: translateY(-100%);}
}
/* animation: ver_move_t 60s linear infinite; */

@keyframes ver_move_b{
	0% {transform: translateY(-100%);}
	100% {transform: translateY(0%);}
}
/* animation: ver_move_b 60s linear infinite; */

@keyframes fade_out { 
	0% { opacity: 1; }
	100% { opacity: 0; visibility: hidden; } 
}
/* animation: fade_out 0.4s ease forwards; */

/*----------------------------------------
	common animation
------------------------------------------*/

@keyframes wavy-reveal {
  0% {
    clip-path: polygon(
      0% 0%,
      -5%   0%,  -8%  12%, -8%  25%,   /* 右端を左端に折り畳む */
      -5%  37%,  -8%  50%, -8%  62%,
      -5%  75%,  -8%  87%, -5% 100%,
      0% 100%
    );
  }
  50% {
    clip-path: polygon(
      0% 0%,
      105%  0%,  90%  12%, 80%  25%,   /* 上が先に飛び出す */
       70% 37%,  55%  50%, 40%  62%,   /* 下が追いかける */
       25% 75%,  10%  87%,  5% 100%,
      0% 100%
    );
  }
  100% {
    clip-path: polygon(
      0% 0%,
      105%  0%, 105%  12%, 105%  25%,  /* 全点が右端を越えて収束 */
      105% 37%, 105%  50%, 105%  62%,
      105% 75%, 105%  87%, 105% 100%,
      0% 100%
    );
  }
}


@keyframes wavy-reveal-vertical {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}

/*----------------------------------------
	pages animation
------------------------------------------*/


.body_top{
	/* fv */
	.fv{
		.inner{
			.main_tit{
				img{clip-path: polygon(0% 0%, -5% 0%, -5% 100%, 0% 100%); opacity: 0; filter: brightness(1.3) blur(20px); transform: scale(1.2);}
			}
			.catch_outer{
				.catch{
					img{clip-path: polygon(0% 0%, -5% 0%, -5% 100%, 0% 100%); opacity: 0; filter: brightness(1.3) blur(20px); transform: scale(1.2);}
				}
			}
		}
	}

	&.load_open{
		/* fv */
		.fv{
			.inner{
				.main_tit{
					img{animation: wavy-reveal-vertical 1.8s ease-out forwards; filter: brightness(1) blur(0px); transform: scale(1); opacity: 1; transition: 2s; transition-delay: 2.8s; animation-delay: 2.4s;}
				}
				.catch_outer{
					.catch{
						img{animation: wavy-reveal-vertical 1.6s ease-out forwards; filter: brightness(1) blur(0px); transform: scale(1); opacity: 1; transition: 2s; transition-delay: 2.8s; animation-delay: 2.6s;}
					}
				}
			}
		}
	}
}