.slideIn-trg,
    .slideRe-trg,
    .fadeUpTrg,
    .fadeLeftTrg,
    .fadeRightTrg,
    .rotateRightZTrg
    {
        opacity: 0;
    }
    .slideIn
    {
        animation: bg 5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }

    .slideRe
    {
        animation: re 5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }
    @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 re {
      0% {
        opacity: 0; /* 完全に表示された状態 */
        clip-path: inset(-0.8vw 0 -0.8vw 100%); /* 右端から隠れている状態 */
      }
      50% {
        opacity: 1; /* 表示を維持 */
        clip-path: inset(-0.8vw 0 -0.8vw 0); /* 全体が表示される途中 */
      }
      100% {
        opacity: 1; /* 完全に表示 */
        clip-path: inset(-0.8vw 0 -0.8vw 0); /* 完全に表示された状態を維持 */
      }
    }
    .no-animation .fadeUpTrigger {
      animation: none !important; /* アニメーションを無効にする */
      transition: none !important; /* トランジションも無効にする場合 */
  }
  .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);
      }
    }
    .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;
    }
    @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;
        }
    }
    
    .poyo
    {
        animation: poyopoyo 1s ease-out;
    }
    @keyframes poyopoyo {
      0%, 40%, 60%, 80% {
        transform: scale(1.0);
      }
      20%, 50% {
        transform: scale(0.95);
      }
    }

    
    
      .purun {
        animation: purun 0.8s linear 0s 1;
      }
      @keyframes purun {
        0%   { transform: translateX(-50%) scale(1.0, 1.0) translateY(0%); }
        15%  { transform: translateX(-50%) scale(0.9, 0.9) translateY(5%); }
        30%  { transform: translateX(-50%) scale(1.3, 0.8) translateY(10%); }
        50%  { transform: translateX(-50%) scale(0.8, 1.3) translateY(-10%); }
        70%  { transform: translateX(-50%) scale(1.1, 0.9) translateY(5%); }
        100% { transform: translateX(-50%) scale(1.0, 1.0) translateY(0%); }
      }