@charset "UTF-8";
/*
 * 09-animation.css … キーフレーム・アニメーション
 * css/ のファイルは番号の順に全ページで読み込む（functions.php）。後のファイルが優先されるので、番号（順番）を変えないこと
 */

/* アイコンをバウンスさせる */
@keyframes bound-anim {
  0%, 100% {
    top: 10%;
    transform: scale(1);
  }
  30% {
    top: -10%;
  }
  50% {
    transform: scale(1);
  }
  90% {
    top: 10%;
    transform: scale(1.1, 0.8);
  }
}
@keyframes blinkBorder {
  0% {
    border-color: var(--cl-main);
  }
  100% {
    border-color: var(--cl-bg);
  }
}
/* ぶるりと揺れます */
@keyframes bururi {
  50% {
    transform: scale(1, 1);
  }
  52% {
    transform: scale(0.9, 0.9);
  }
  54% {
    transform: scale(1, 1);
  }
  56% {
    transform: scale(0.88, 0.85);
  }
  58% {
    transform: scale(1, 1);
  }
  60% {
    transform: scale(0.98, 0.95);
  }
}
/* ぷるぷる揺れます */
@keyframes purupuru {
  0% {
    transform: translate(0px, 2px);
  }
  5% {
    transform: translate(0px, -2px);
  }
  10% {
    transform: translate(0px, 2px);
  }
  15% {
    transform: translate(0px, -2px);
  }
  20% {
    transform: translate(0px, 2px);
  }
  25% {
    transform: translate(0px, -2px);
  }
  30% {
    transform: translate(0px, 0px);
  }
}
@keyframes korokoro {
  0% {
    transform: translate(0%, 0%);
  }
  5% {
    transform: translate(10%, 0%) rotate(5deg);
  }
  25% {
    transform: translate(20%, 0%) rotate(10deg);
  }
  30% {
    transform: translate(-10%, 0%) rotate(-5deg);
  }
  35% {
    transform: translate(-15%, 0%) rotate(-10deg);
  }
  45% {
    transform: translate(10%, 0%) rotate(5deg);
  }
  50% {
    transform: translate(15%, 0%) rotate(10deg);
  }
  60% {
    transform: translate(-5%, 0%) rotate(-5deg);
  }
  65% {
    transform: translate(-7%, 0%) rotate(-7deg);
  }
  75% {
    transform: translate(0%, 0%) rotate(0deg);
  }
  100% {
    transform: translate(0%, 0%) rotate(0deg);
  }
}
/* フェードイン・アウト（フット現れてゆっくり消える） */
@keyframes fadeOut {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* フェードイン（フット現れてそのまま） */
@keyframes fadeIn {
  0% {
    opacity: 0;
    display: none;
  }
  1% {
    opacity: 0;
    display: block;
  }
  100% {
    opacity: 1;
    display: block;
  }
}
/*----- フェードインしながら上へスライド -----*/
.inview {
  opacity: 0;
  transform: translate(0, 20px);
  transition: 1s;
}

.fadeInUp {
  opacity: 1;
  transform: translate(0, 0);
}