@charset "UTF-8";
/* =========================================
   Scroll Triggered Animations CSS
   (ファイル名例: animations.css)
   ========================================= */
/* 1. Fade In */
.js-fade-in {
  opacity: 0;
}

/* 2. Fade Out */
.js-fade-out {
  opacity: 1;
}

/* 3. Slide In Left */
.js-slide-in-left {
  opacity: 0;
  position: relative;
  left: -50px;
}

/* 4. Slide In Right */
.js-slide-in-right {
  opacity: 0;
  position: relative;
  right: 50px;
}

/* 5. Slide In Up */
.js-slide-in-up {
  opacity: 0;
  position: relative;
  top: 50px;
}

/* 6. Slide In Down */
.js-slide-in-down {
  opacity: 0;
  position: relative;
  top: -50px;
}

/* 7. Zoom In */
.js-zoom-in {
  opacity: 0;
  transform: scale(0.8);
  transition: transform 0.6s ease-out, opacity 0.6s ease-out;
}

/* 8. Zoom Out */
.js-zoom-out {
  opacity: 1;
  transform: scale(1);
  transition: transform 0.6s ease-out, opacity 0.6s ease-out;
}

/* 9. Bounce */
.js-bounce {
  opacity: 0;
  position: relative;
}

/* 10. Flip */
.js-flip {
  opacity: 1;
  transform: perspective(600px) rotateY(0deg);
  transform-style: preserve-3d;
  transition: transform 0.6s ease-out;
}

.js-flip.flip {
  transform: perspective(600px) rotateY(180deg);
}

/* 11. Slide then Zoom */
.js-slide-then-zoom {
  opacity: 0;
  transform: translateX(-50px) scale(1);
  transition: transform 0.6s ease-out, opacity 0.6s ease-out;
}

/* 12. Rotate In */
.js-rotate-in {
  opacity: 0;
  transform: rotate(-90deg);
  transition: transform 0.6s ease-out, opacity 0.6s ease-out;
}

/* 13. Skew In */
.js-skew-in {
  opacity: 0;
  transform: skewY(10deg);
  transition: transform 0.6s ease-out, opacity 0.6s ease-out;
}

/* 14. Fade + Slide Up */
.js-fade-slide-up {
  opacity: 0;
  transform: translateY(20px);
  transition: transform 0.6s ease-out, opacity 0.6s ease-out;
}

/* 15. Zoom then Slide */
.js-zoom-then-slide {
  opacity: 0;
  transform: scale(0.8) translateX(0);
  transition: transform 0.6s ease-out, opacity 0.6s ease-out;
}

/* 16. Pop In */
.js-pop-in {
  opacity: 0;
  transform: scale(0.5);
  transition: transform 0.4s ease-out, opacity 0.4s ease-out;
}

/* 17. Wobble */
.js-wobble {
  opacity: 0;
}

@-webkit-keyframes wobble {
  0% {
    transform: translateX(-5%);
  }
  25% {
    transform: translateX(5%);
  }
  50% {
    transform: translateX(-5%);
  }
  75% {
    transform: translateX(5%);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes wobble {
  0% {
    transform: translateX(-5%);
  }
  25% {
    transform: translateX(5%);
  }
  50% {
    transform: translateX(-5%);
  }
  75% {
    transform: translateX(5%);
  }
  100% {
    transform: translateX(0);
  }
}
/* 18. 3D Flip In Depth */
.js-flip-in-depth {
  opacity: 0;
  transform: perspective(600px) rotateX(-90deg);
  transform-style: preserve-3d;
  transition: transform 0.6s ease-out, opacity 0.6s ease-out;
}

/* 19. Skew + Rotate In */
.js-skew-rotate-in {
  opacity: 0;
  transform: skewX(-10deg) rotate(-10deg);
  transition: transform 0.6s ease-out, opacity 0.6s ease-out;
}

/* 20. Fade + Scale */
.js-fade-scale {
  opacity: 0;
  transform: scale(0.5);
  transition: transform 0.6s ease-out, opacity 0.6s ease-out;
}