@charset "UTF-8";
/* CSS Document */

/* 画面内に入った時にふわっと表示 */
.fade-in {
  opacity: 0;
  transform: translateY(40px); /* 少し下から */
  transition: opacity 1s, transform 1s; /* ふわっとの時間 */
	transition-delay: 1s;/* 遅らせる */
	filter: blur(8px);
}

/* 画面内に入った時に付与するクラス */
.fade-in.is-show {
  opacity: 1;
  transform: translateY(0); /* 元の位置へ */
	filter: blur(0);

}

/* 画面内に入った時にふわっと回転しながら表示 */
.fade-in-rotate {
  opacity: 0;
  transform: translateY(50px) rotate(-20deg); /* 下から少し回転 */
  transition: opacity 1s, transform 1s; /* ふわっと感 */
transition-delay: 0.6s;/* 遅らせる */
}
.fade-in-rotate-2 {
  opacity: 0;
  transform: translateY(50px) rotate(20deg); /* 下から少し回転 */
  transition: opacity 1s, transform 1s; /* ふわっと感 */
	transition-delay: 0.6s;/* 遅らせる */
}

/* JavaScriptで付与するクラス */
.fade-in-rotate.is-show, .fade-in-rotate-2.is-show  {
  opacity: 1;
  transform: translateY(0) rotate(0deg); /* 元の位置・角度へ */
}

.delay_1 {
	transition-delay: 1.2s; /* アニメーション開始を0.8秒遅らせる */
}
.delay_2 {
	transition-delay: 1.4s; /* アニメーション開始を0.8秒遅らせる */
}
.delay_3 {
	transition-delay: 1.6s; /* アニメーション開始を0.8秒遅らせる */
}


.yurayura {
  animation: shake 0.5s infinite;
  transform: rotate(1.5deg);
}
@keyframes shake {
    50% {
        transform: rotate(-1.5deg);
    }

    100% {
        transform: rotate(1.5deg);
    }
}
.yurayura-2 {
  animation: shake-2 0.5s infinite;
  transform: rotate(1.5deg);
}
@keyframes shake-2 {
    50% {
        transform: rotate(1.5deg);
    }

    100% {
        transform: rotate(-1.5deg);
    }
}

.yurayura-3 {
  animation: yurayura 2s linear infinite;
  transform: rotate(1.5deg);
}
@keyframes yurayura {
  0% , 100%{
      transform: rotate(2.5deg);
  }
  50%{
      transform: rotate(-2.5deg);
  }
}



.fade-left {
    opacity: 0;
    transform: translate3d(-80px, 0, 0);
    transition: opacity 1s ease, transform 1s ease;
    will-change: transform, opacity;
}

.fade-left.is-show {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.fade-right {
    opacity: 0;
    transform: translate3d(80px, 0, 0);
    transition: opacity 1s ease, transform 1s ease;
    will-change: transform, opacity;
}

.fade-right.is-show {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}