@charset "utf-8";

/*blurスタイル。ぼかしで出現するスタイル。
---------------------------------------------------------------------------*/
/*待機中の設定*/
.blur {
  opacity: 0; /*透明度（透明の状態）*/
  -webkit-filter: blur(6px);
  filter: blur(6px);
  transform: translateY(18px);
}

/*要素が見えたら実行するアクション*/
.blurstyle {
  opacity: 1;
  -webkit-filter: blur(0);
  filter: blur(0);
  transform: none;

  transition: 0.5s;
}

.slideInRight {
  -webkit-clip-path: inset(0 100% 0 0);
  clip-path: inset(0 100% 0 0);
  transition: 0.6s ease-in-out;
}

/*要素が見えたら実行するアクション*/
.active {
  webkit-clip-path: inset(0);
  -webkit-clip-path: inset(0);
  clip-path: inset(0);
}

/*transform3スタイル。小さなサイズから原寸大になるスタイル
---------------------------------------------------------------------------*/
/*キーフレーム（アニメーション）設定*/
@-webkit-keyframes transform3 {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.1);
  }
  70% {
    transform: scale(0.99);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes transform3 {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.1);
  }
  70% {
    transform: scale(0.99);
  }
  100% {
    transform: scale(1);
  }
}

/*待機中の設定*/
.transform3 {
  transform: scale(0);
}

/*要素が見えたら実行するアクション*/
.transform3style {
  -webkit-animation: transform3 0.3s ease-out 0.5s both;
  animation: transform3 0.3s ease-out 0.5s both; /*0.5秒待機後、0.3秒かけてアニメーションを実行*/
}