/***************************************************
 * Generated by SVG Artista on 5/13/2024, 2:32:43 PM
 * MIT license (https://opensource.org/licenses/MIT)
 * W. https://svgartista.net
 **************************************************/

 @-webkit-keyframes animate-svg-fill-1 {
    0% {
      fill: transparent;
    }
  
    100% {
      fill: rgb(51, 51, 51);
    }
  }
  
  @keyframes animate-svg-fill-1 {
    0% {
      fill: transparent;
    }
  
    100% {
      fill: rgb(51, 51, 51);
    }
  }
  
  .elem-sec1-1 {
    -webkit-animation: animate-svg-fill-1 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.5s both;
            animation: animate-svg-fill-1 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.5s both;
  }
  
  @-webkit-keyframes animate-svg-fill-2 {
    0% {
      fill: transparent;
    }
  
    100% {
      fill: url("#linear-gradient");
    }
  }
  
  @keyframes animate-svg-fill-2 {
    0% {
      fill: transparent;
    }
  
    100% {
      fill: url("#linear-gradient");
    }
  }
  
  .elem-sec1-2 {
    -webkit-animation: animate-svg-fill-2 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.6s both;
            animation: animate-svg-fill-2 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.6s both;
  }
  
  @-webkit-keyframes animate-svg-fill-3 {
    0% {
      fill: transparent;
    }
  
    100% {
      fill: rgb(51, 51, 51);
    }
  }
  
  @keyframes animate-svg-fill-3 {
    0% {
      fill: transparent;
    }
  
    100% {
      fill: rgb(51, 51, 51);
    }
  }
  
  .elem-sec1-3 {
    -webkit-animation: animate-svg-fill-3 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.7s both;
            animation: animate-svg-fill-3 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.7s both;
  }
  
  @-webkit-keyframes animate-svg-fill-4 {
    0% {
      fill: transparent;
    }
  
    100% {
      fill: rgb(51, 51, 51);
    }
  }
  
  @keyframes animate-svg-fill-4 {
    0% {
      fill: transparent;
    }
  
    100% {
      fill: rgb(51, 51, 51);
    }
  }
  
  .elem-sec1-4 {
    -webkit-animation: animate-svg-fill-4 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s both;
            animation: animate-svg-fill-4 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s both;
  }
  
  @-webkit-keyframes animate-svg-fill-5 {
    0% {
      fill: transparent;
    }
  
    100% {
      fill: rgb(51, 51, 51);
    }
  }
  
  @keyframes animate-svg-fill-5 {
    0% {
      fill: transparent;
    }
  
    100% {
      fill: rgb(51, 51, 51);
    }
  }
  
  .elem-sec1-5 {
    -webkit-animation: animate-svg-fill-5 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s both;
            animation: animate-svg-fill-5 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s both;
  }
  
  @-webkit-keyframes animate-svg-fill-6 {
    0% {
      fill: transparent;
    }
  
    100% {
      fill: url("#linear-gradient-2");
    }
  }
  
  @keyframes animate-svg-fill-6 {
    0% {
      fill: transparent;
    }
  
    100% {
      fill: url("#linear-gradient-2");
    }
  }
  
  .elem-sec1-6 {
    -webkit-animation: animate-svg-fill-6 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 1s both;
            animation: animate-svg-fill-6 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 1s both;
  }
  
  @-webkit-keyframes animate-svg-fill-7 {
    0% {
      fill: transparent;
    }
  
    100% {
      fill: url("#linear-gradient-2");
    }
  }
  
  @keyframes animate-svg-fill-7 {
    0% {
      fill: transparent;
    }
  
    100% {
      fill: url("#linear-gradient-2");
    }
  }
  
  .elem-sec1-7 {
    -webkit-animation: animate-svg-fill-7 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s both;
            animation: animate-svg-fill-7 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s both;
  }

  .mv {
    animation: mv 2s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  @keyframes mv {
    0% {
      clip-path: circle(0 at 50% 50%);
      -webkit-clip-path: circle(0 at 50% 50%);
    }
  
    100% {
      clip-path: circle(100% at 50% 50%);
      -webkit-clip-path: circle(100% at 50% 50%);
    }
  }

.c_anime {
    opacity: 0; /* アニメーション開始前は非表示にする */
}

.circle_anime {
    animation: circle_anime 2s cubic-bezier(0.4, 0, 0.2, 1) forwards; /* forwardsを追加してアニメーション後の状態を保持 */
    opacity: 1; /* アニメーション中は表示 */
}

@keyframes circle_anime {
    0% {
        clip-path: circle(0 at 50% 50%);
        -webkit-clip-path: circle(0 at 50% 50%);
    }

    100% {
        clip-path: circle(100% at 50% 50%);
        -webkit-clip-path: circle(100% at 50% 50%);
    }
}

.fadeUp {
  animation-name:fadeUpAnime;
  animation-duration:0.5s;
  animation-fill-mode:forwards;
  opacity: 0;
  }
  @keyframes fadeUpAnime{
    from {
      opacity: 0;
    transform: translateY(100px);
    }
  
    to {
      opacity: 1;
    transform: translateY(0);
    }
  }
  
  /* アニメーションスタートの遅延時間を決めるCSS*/
  
  .delay-time02{
  animation-delay: 0.2s;
  }
  
  .delay-time04{
  animation-delay: 0.4s;
  }