@charset "UTF-8";
/* バスを左から右へ */
@keyframes left-right-bus {
  0% {
    transform: translateX(-110px);
  }
  100% {
    transform: translateX(100vw);
  }
}
/* バスを右から左へ */
@keyframes right-left-bus {
  0% {
    transform: translateX(100vw);
  }
  100% {
    transform: translateX(-200px);
  }
}
/* バスの揺れ */
@keyframes gatagoto-bus {
  0% {
    transform: translateY(0);
  }
  20% {
    transform: translateY(2px);
  }
  25% {
    transform: translateY(-2px);
  }
  30% {
    transform: translateY(0px);
  }
  85% {
    transform: translateY(0);
  }
  90% {
    transform: translateY(2px);
  }
  95% {
    transform: translateY(-2px);
  }
  100% {
    transform: translateY(0px);
  }
}
/* マウスオーバー時のイラスト横揺れ */
@keyframes yurayura-yoko {
  0% {
    transform: rotate(-20deg);
  }
  20% {
    transform: rotate(20deg);
  }
  40% {
    transform: rotate(-10deg);
  }
  60% {
    transform: rotate(10deg);
  }
  80% {
    transform: rotate(0);
  }
}
@keyframes yurayura-yoko-sp {
  0%, 100% {
    transform: rotate(-30deg);
  }
  50% {
    transform: rotate(-10deg);
  }
}
/* 少し横揺れ */
@keyframes yurayoko {
  0%, 100% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(10deg);
  }
}
@keyframes yurayoko02 {
  0%, 100% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(5deg);
  }
}
/* マウスオーバー時のイラスト縦揺れ */
@keyframes huwahuwa-yoko {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(20%);
  }
  25%, 75% {
    transform: translateY(-20px);
  }
}
/* マウスオーバー時のイラスト花の揺れ */
@keyframes yure-flower {
  0%, 100% {
    transform: rotate(0);
    transform-origin: center bottom;
  }
  50% {
    transform: rotate(15deg);
  }
  25%, 75% {
    transform: rotate(-15deg);
  }
}
/* イラスト縦揺れ */
@keyframes huwahuwa {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}
/* イラストくじら */
@keyframes kujira {
  0%, 100% {
    transform: translateX(70px) translateY(10px) rotate(0deg);
  }
  50% {
    transform: translateX(0px) translateY(0) rotate(5deg);
  }
}
/* 葉っぱアニメーション */
@keyframes huwakaze01 {
  0%, 100% {
    transform: translateY(10px) rotate(0deg);
  }
  50% {
    transform: translateY(-10px) rotate(8deg);
  }
}
/* 縦ゆれ */
@keyframes title-haneru {
  0% {
    transform: translateY(-50px);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  50% {
    transform: translateY(0);
  }
  65% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
/* 縦ゆれスマホ用 */
@keyframes title-haneru_sp {
  0% {
    transform: translateY(-50px);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  50% {
    transform: translateY(0);
  }
  65% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
/* 縄跳び */
@keyframes nawatobi {
  0%, 100% {
    transform: translateY(-20px);
  }
  30% {
    transform: translateY(0);
  }
  65% {
    transform: translateY(-10px);
  }
}
/* 歩く */
@keyframes aruku {
  0%, 100% {
    transform: translateY(-5px);
  }
  50% {
    transform: translateY(0);
  }
}
/* イラストを回す */
@keyframes kurukuru {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* 少し横揺れ */
@keyframes yurayoko-small {
  0%, 100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(10deg);
  }
}
/* 横にスライドさせる */
@keyframes yoko-slide {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-10px);
  }
}
/* スライドアニメーションの設定 横に流れる */
@keyframes slide-animation {
  from {
    transform: translateX(0);
  }
  to {
    transform: translate3d(calc(var(--image-width) * -9), 0, 0);
  }
}
/* 垂直方向にスケールを変えるキーフレーム */
@keyframes fadein {
  from {
    opacity: 0;
    translate: 0 24px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}
.fadein-anime {
  opacity: 1;
  translate: 0 0;
  timeline-trigger: --card view() contain/cover;
  trigger-scope: --card;
  animation: fadein 0.6s both;
  animation-trigger: --card play-forwards play-backwards;
}

.title_anime {
  animation: title-haneru 0.8s linear forwards;
}

@media screen and (max-width: 768px) {
  .fadein-anime {
    opacity: 0;
    animation: none;
    transition: all 0.6s;
  }
  .fadein-anime.f-active {
    opacity: 1;
    translate: 0 0;
    animation: title-haneru 0.8s linear forwards;
  }
}
.fadein-anime03 {
  opacity: 1;
  translate: 0 0;
  timeline-trigger: --card view() contain/cover;
  trigger-scope: --card;
  animation: fadein 2s both;
  animation-trigger: --card play-forwards play-backwards;
}

@media screen and (max-width: 768px) {
  .fadein-anime03 {
    opacity: 0;
    animation: none;
    transition: all 0.6s;
  }
  .fadein-anime03.f-active02 {
    opacity: 0;
    translate: 0 0;
    animation: fadein 5s forwards;
  }
}
.fadein-anime02 {
  animation: none;
  translate: 0 0;
  animation: fadein 1.5s linear forwards;
}/*# sourceMappingURL=animation.css.map */