@charset "utf-8";
/* CSS Document */


.mv-hero { 
  opacity: 0;
}
/* JSが無い・失敗時でも見えるように：デフォルトは表示 */
.Trigger{ opacity:1;}
.js .Trigger{ opacity:0;}

.fade_active{
	animation-duration:1s;
	animation-fill-mode:forwards;
	transition-timing-function:ease-out ;
}



.fade_active.fadeLeft{
	animation-name:fadeLeftAnime;
}
@keyframes fadeLeftAnime{
  from {
    opacity: 0;
	transform: translateX(-20px);
  }

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

.fade_active.fadeRight{
	animation-name:fadeRightAnime;
}
@keyframes fadeRightAnime{
  from {
    opacity: 0;
	transform: translateX(20px);
  }

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

.fade_active.fadeUp{
	animation-name:fadeUpAnime;
}
@keyframes fadeUpAnime{
  from {
    opacity: 0;
	transform: translateY(20px);
  }

  to {
    opacity: 1;
	transform: translateY(0);
  }
}
.fade_active.fadeDown{
	animation-name:fadeDownAnime;
}
@keyframes fadeDownAnime{
  from {
    opacity: 0;
	transform: translateY(-20px);
  }

  to {
    opacity: 1;
	transform: translateY(0);
  }
}
.fade_active.fadeIn{
	animation-name:fadeInAnime;
}
@keyframes fadeInAnime{
  from {
    opacity: 0;
	transform: translateY(0px);
  }

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


.fade_active.fadeFit{
	animation-name:fadeFitAnime;
}
@keyframes fadeFitAnime{
  from {
    opacity: 0;
	transform: translateY(0px);
	transform: scale(1.3);
	filter: blur(1.5rem);  
  }

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






/* 例：fadeBk01（SCSSの &::after を通常CSSに修正）*/
.fade_active.fadeBk01{ 
  --animation-delay: var(--delay, 0);
  --animation-duration: var(--duration, 800ms);
  --animation-iterations: var(--iterations, 1);
  animation-name: clip-text;
  opacity:1;
  position:relative;
}
.fade_active.fadeBk01::after{
  content:"";
  position:absolute; inset:0; z-index:999;
  background-color: transparent;
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events:none;
  animation-name: text-revealer;
}

/* 他の .fadeBk02 / .fadeBk03 も同様に position/::after を通常CSSで */

@keyframes clip-text { from{ clip-path:inset(0 100% 0 0);} to{ clip-path:inset(0 0 0 0);} }
@keyframes text-revealer {
  0%,50%{ transform-origin:0 50%; }
  60%,100%{ transform-origin:100% 50%; }
  60%{ transform:scaleX(1); }
  100%{ transform:scaleX(0); }
}

.fade_active.fadeKirari {
  display: flex;
  position: relative;
  opacity: 1;
  overflow: hidden;
}

.fadeKirari::before {
  position: absolute;
  content: '';
  display: inline-block;
  top: -180px;
  left: 0;
  width: 30px;
  height: 100%;
  background-color: #fff;
  animation: kiran 2s ease-in-out infinite;
}
@keyframes kiran {
  0% { transform: scale(0) rotate(45deg); opacity: 0; }
  80% { transform: scale(0) rotate(45deg); opacity: 0.5; }
  81% { transform: scale(4) rotate(45deg); opacity: 1; }
  100% { transform: scale(50) rotate(45deg); opacity: 0; }
}