@charset "utf-8";
/* 上から */
.fadeDown{
  animation-name:fadeDownAnime;
  animation-duration:0.5s;
  animation-fill-mode:forwards;
  opacity:0;
  }
  
  @keyframes fadeDownAnime{
    from {
      opacity: 0;
    transform: translateY(-100px);
    }
  
    to {
      opacity: 1;
    transform: translateY(0);
    }
  }
  
  .fadeDownTrigger{
    opacity: 0;
    }



    .shake-anime:hover {
      animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
      transform: translate3d(0, 0, 0);
      backface-visibility: hidden;
      perspective: 1000px;
    }

    @keyframes shake {
      10%, 90% {
        transform: translate3d(-1px, 0, 0);
      }
      
      20%, 80% {
        transform: translate3d(2px, 0, 0);
      }
    
      30%, 50%, 70% {
        transform: translate3d(-4px, 0, 0);
      }
    
      40%, 60% {
        transform: translate3d(4px, 0, 0);
      }
    }


    .huwahuwa-anime{
      -webkit-animation: huwahuwa 2.0s ease-out infinite;
          animation: huwahuwa 2.0s ease-out infinite;
    }

    @keyframes huwahuwa{
      0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
      }
      50% {
        -webkit-transform: translateY(10px);
        transform: translateY(10px);
      }
      
      100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
      }
      }


      .walk{
        animation: walk-anime 15s linear infinite;
        left: 100%;
      }

      @keyframes  walk-anime{
        0% {
          left: 100%; /* 画面外右から開始 */
        }
        100% {
          left: -100%; /* 画面外左に移動 */
        }
      }