/*----------------------------------------
	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
------------------------------------------*/

/*----------------------------------------
	pages animation
------------------------------------------*/
/* ローディングアニメーション */
#loading { position: fixed; top: 0; left: 0; display: block; width: 100%; height: 100vh; height: 100svh; background-image: url(../images/bg/bg.webp); background-position: center; background-size: cover; background-repeat: no-repeat; z-index: var(--z_loading); }
#loading::before {position: absolute; content: ""; width: 100%; height: 100%; background-color: #0504288c; top: 0; left: 0;}
#loading .logo { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(600px, 60%); filter: drop-shadow(2px 4px 25px #fff); opacity: 1; }
#loading .logo img { width: 100%; }
#loading.load_open {
  animation: fade_out 1.0s forwards;
  animation-delay: 1.0s;
  pointer-events: none;
}
@keyframes fade_out {
  0%   { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}

/* FVアニメーション */
.body_top .fv .main_tit { opacity: 0; filter: blur(20px); transform: scale(1.4); }
.body_top .fv .inner .top_left { opacity: 0; filter: blur(20px); transform: scale(1.2); }
.body_top .fv .inner .top_right { opacity: 0; filter: blur(20px); transform: scale(1.2); }
.body_top.intro_on .fv .main_tit { opacity: 1; filter: blur(0px); transform: scale(1); transition: 1.6s cubic-bezier(0.03, 0.37, 0, 0.97); transition-delay: 1.6s; }
.body_top.intro_on .fv .inner .top_left { opacity: 1; filter: blur(0px); transform: scale(1); transition: 1.6s cubic-bezier(0.03, 0.37, 0, 0.97); transition-delay: 2s; }
.body_top.intro_on .fv .inner .top_right { opacity: 1; filter: blur(0px); transform: scale(1); transition: 1.6s cubic-bezier(0.03, 0.37, 0, 0.97); transition-delay: 2s; }

/* スクロールアニメーション */
.js-scroll__fadein-bottom {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 2.0s cubic-bezier(0.03, 0.37, 0, 0.97),
                transform 2.0s cubic-bezier(0.03, 0.37, 0, 0.97);
}
.js-scroll.is-active {
    opacity: 1;
    transform: translateY(0);
}