.moveUp {
  transform: translate(0%, 15%);
  opacity: 0;
}

.moveToTopLeft ,
.moveToTopLeftDeco::before{
  transform: translate(5%, 15%);
  opacity: 0;
}

.moveToTopRight,
.moveToTopRightDeco::after {
  transform: translate(-5%, 15%);
  opacity: 0;
}

.moveUp.move ,
.moveToTopLeft.move,
.moveToTopRight.move,
.moveToTopLeftDeco.move::before,
.moveToTopRightDeco.move::after{
  transform: translate(0%, 0%);
  transition-duration: 0.5s;
  /* transition-delay: 0.75s; */
  opacity: 1;
}

.moveToTopLeft.move,
.moveToTopRight.move,
.moveToTopLeftDeco.move::before,
.moveToTopRightDeco.move::after {
    transition-delay: 0.75s;
}

.myText {
  overflow: hidden;
}
.myText span {
  display: inline-block;
  opacity: 0;
}
.staggeredText.move .myText span {
  -webkit-animation: ttlUp 1s ease forwards;
  animation: ttlUp 1s ease forwards;
}
@-webkit-keyframes ttlUp {
  from {
    opacity: 0;
    transform: translateY(1em);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes ttlUp {
  from {
    opacity: 0;
    transform: translateY(1em);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.maskLeft{
     clip-path: inset(0 100% 0 0 );
     display: block;
}

.maskLeft.move{
    animation: diveIn 1s cubic-bezier(0.5, 0, 0.4, 1) forwards;
}

@keyframes diveIn {
  to {
     clip-path: inset(0);
  }
}

.pulseShake.move ,
.pulseShakeDeco.move::after{
    transform-origin: 50% 100%;
    /* 横中央・下端を軸に回転 */
    -webkit-animation: goods_rotate 8s infinite;
    animation: goods_rotate 8s infinite;
    animation-delay: .5s;
}

@keyframes goods_rotate {
    0% {
        transform: rotate(0deg);
    }

    10% {
        transform: rotate(5deg);
    }

    20% {
        transform: rotate(-5deg);
    }

    30% {
        transform: rotate(4deg);
    }

    40% {
        transform: rotate(-4deg);
    }

    50% {
        transform: rotate(2deg);
    }

    60% {
        transform: rotate(-2deg);
    }

    70%, 100% {
        transform: rotate(0deg);
    }
}