/*CSSアニメーション*/
.fadeBlur
{
  opacity: 0; 
  display: inline-block;
  animation: imgBlur 0.8s forwards; /* フェードインアニメーション */
  -moz-transition: -moz-transform 0.5s linear;
  -webkit-transition: -webkit-transform 0.5s linear;
  -o-transition: -o-transform 0.5s linear;
  -ms-transition: -ms-transform 0.5s linear;
  transition: transform 0.5s linear;
  animation-fill-mode: both;
}
.blurDw
{
  opacity: 0;
  animation: BlurDw-kami 0.8s forwards;
  animation-delay: 3s;
}
@keyframes BlurDw-kami {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(-20px);
    -webkit-filter: blur(20px);
    -moz-filter: blur(20px);
    -ms-filter: blur(20px);
    -o-filter: blur(20px);
    filter: blur(20px); 
  }100%{
    opacity: 1;
    transform: translateX(-50%) translateY(0px);
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    -ms-filter: blur(0px);
    -o-filter: blur(0px);
    filter: blur(0px);
  }
}
/* フェードインのアニメーション */
@keyframes imgBlur {
  0% {
    opacity: 0;
    -webkit-filter: blur(20px);
    -moz-filter: blur(20px);
    -ms-filter: blur(20px);
    -o-filter: blur(20px);
    filter: blur(20px); 
  }100%{
    opacity: 1;
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    -ms-filter: blur(0px);
    -o-filter: blur(0px);
    filter: blur(0px);
  }
}
@keyframes BlurUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
    -webkit-filter: blur(20px);
    -moz-filter: blur(20px);
    -ms-filter: blur(20px);
    -o-filter: blur(20px);
    filter: blur(20px); 
  }100%{
    opacity: 1;
    transform: translateY(0px);
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    -ms-filter: blur(0px);
    -o-filter: blur(0px);
    filter: blur(0px);
  }
}
@keyframes BlurDw {
  0% {
    opacity: 0;
    transform: translateY(-20px);
    -webkit-filter: blur(20px);
    -moz-filter: blur(20px);
    -ms-filter: blur(20px);
    -o-filter: blur(20px);
    filter: blur(20px); 
  }100%{
    opacity: 1;
    transform: translateY(0px);
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    -ms-filter: blur(0px);
    -o-filter: blur(0px);
    filter: blur(0px);
  }
}
@keyframes BlurUpAbsolute {
  0% {
    opacity: 0;
    transform: translateY(20px) translateX(-50%);
    -webkit-filter: blur(20px);
    -moz-filter: blur(20px);
    -ms-filter: blur(20px);
    -o-filter: blur(20px);
    filter: blur(20px); 
  }100%{
    opacity: 1;
    transform: translateY(0px) translateX(-50%);
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    -ms-filter: blur(0px);
    -o-filter: blur(0px);
    filter: blur(0px);
  }
}
@keyframes fadeIn {
  0% {
      opacity: 0; 
  }100%{
    opacity: 1;
  }
}

  @keyframes bg {
    0% {
      opacity: 0; /* 最初は非表示 */
      clip-path: inset(-0.8vw 100% -0.8vw 0); /* 右端から全体を隠す */
      
    }
    50% {
      opacity: 1; /* 表示を開始 */
      clip-path: inset(-0.8vw 0 -0.8vw 0); /* 全体が表示されるように */
    }
    100% {
      opacity: 1; /* 完全に表示 */
      clip-path: inset(-0.8vw 0 -0.8vw 0); /* 完全に表示された状態を維持 */
    }
  }

@keyframes  center{
    0% {
        opacity: 0; /* 最初は非表示 */
        clip-path: inset(-0.8vw 50% -0.8vw 50%); /* 中央から隠す */
        filter: blur(5px); 
    }
    50% {
        opacity: 1; /* 表示を開始 */
        clip-path: inset(-0.8vw 25% -0.8vw 25%); /* 表示範囲を広げる */
        filter: blur(0px); 
    }
    100% {
        opacity: 1; /* 完全に表示 */
        clip-path: inset(-0.8vw 0 -0.8vw 0); /* 全体を表示 */
        filter: blur(0px); 
    }
}

/* 各spanに遅延を加える */
.title-img{
  animation-delay: 0.5s;
}

.fadeUpTrigger,
.fadeDwTrigger,
.fadeUpTrigger-sp,
.fadeLeftTrigger,
.fadeRightTrigger,
.rotateRightZTrigger,
.strongTrigger,
.RightTrigger
{
  transform: translateZ(0); 
  opacity: 0;
}
.fadeUp{
  animation-name:fadeUpAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
  opacity:0;
  }
  
  @keyframes fadeUpAnime{
    from {
     opacity: 0;
    transform: translateY(20px);
    }
  
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .fadeDw{
  animation-name:fadeDwAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
  opacity:0;
  }
  
  @keyframes fadeDwAnime{
    from {
     opacity: 0;
    transform: translateY(-50px);
    }
  
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .fadeLeft{
  animation-name:fadeLeftAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
  opacity:0;
  }
  
  @keyframes fadeLeftAnime{
    from {
     opacity: 0;
    transform: translateX(-20px);
    }
  
    to {
      opacity: 1;
    transform: translateX(0);
    }
  }
  .fadeRight{
  animation-name:fadeRightAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
  opacity:0;
  
  }

  .figure .fadeRight
  {
    animation-delay: 0.5s;
  }

  
  @keyframes fadeRightAnime{
    from {
     opacity: 0;
    transform: translateX(20px);
    }
  
    to {
      opacity: 1;
    transform: translateX(0);
    }
  }
  .rotateRightZ{
    animation-name:rotateRightZAnime;
    animation-duration:3s;
    animation-fill-mode:forwards;
  }
  
  @keyframes rotateRightZAnime{
    from{
      transform: rotateZ(0);
      opacity: 0;
      }
    to{  
      transform: rotateZ(360deg);
      opacity: 1;
      }
  }

   
  .zoomin{
    
    animation: zoomIn 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    animation-delay: 3.2s;
    opacity: 0;
  }
  @keyframes zoomIn {
  0% {
    transform: translate(-50%,-50%) scale(0.8);
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: translate(-50%,-50%) scale(1);
  }
  }

  .wipe-img {
    display: block;
    width: 100%;
    height: auto;
    clip-path: inset(0 0 100% 0);
    animation: wipe-down .7s ease-out forwards;
    animation-delay: var(--delay, 0s);
    will-change: clip-path;
  }
  @keyframes wipe-down {
  from { clip-path: inset(0 0 100% 0); }
  to   { clip-path: inset(0 0   0% 0); }
}