@charset "UTF-8";

/* =========================
  animation
========================= */

/* 蝶のひらひら */
@keyframes butterfly-flutter {
  0% { transform: scaleX(1) rotate(0deg) translateX(0); opacity: 0.8; }
  25% { transform: scaleX(0.5) rotate(5deg) translateX(2px); opacity: 1; }
  50% { transform: scaleX(1) rotate(0deg) translateX(4px); opacity: 0.8; }
  75% { transform: scaleX(0.5) rotate(-5deg) translateX(2px); opacity: 1; }
  100% { transform: scaleX(1) rotate(0deg) translateX(0); opacity: 0.8; }
}


/* うさぎ横移動 */
@keyframes peterWalk {
  0% { left: calc(-313% / 7.5); opacity: 0; }
  1% { opacity: 1; }
  94% { left: calc(100% + calc(313% / 7.5)); opacity: 1; }
  95% { opacity: 0; }
  100% { left: calc(-313% / 7.5); opacity: 0; }
}

/* うさぎジャンプ */
@keyframes peterHop {
  0%,100% { transform: translate3d(0,0,0) rotate(0deg); }
  35% { transform: translate3d(0,-14px,0) rotate(-1.5deg); }
  62% { transform: translate3d(0,3px,0) rotate(1.5deg); }
  78% { transform: translate3d(0,-3px,0) rotate(-0.8deg); }
  90% { transform: translate3d(0,0,0) rotate(0deg); }
}

/* 猫 */
@keyframes catMove {
  0% { transform: translate3d(0,0,0) rotate(0deg); }
  10% { transform: translate3d(-2px,0,0) rotate(-1deg); }
  20% { transform: translate3d(2px,0,0) rotate(1deg); }
  30% { transform: translate3d(-2px,0,0) rotate(-1deg); }
  40% { transform: translate3d(2px,0,0) rotate(1deg); }
  50% { transform: translate3d(-1px,0,0) rotate(-0.5deg); }
  65% { transform: translate3d(0,0,0) rotate(0deg); }
  78% { transform: translate3d(0,-10px,0) rotate(0deg); }
  88% { transform: translate3d(0,2px,0) rotate(0deg); }
  100% { transform: translate3d(0,0,0) rotate(0deg); }
}


/* リス */
@keyframes squirrelMove {
  0% { transform: translate3d(0,0,0) rotate(0deg); }
  12% { transform: translate3d(-1px,0,0) rotate(-1deg); }
  24% { transform: translate3d(1px,0,0) rotate(1deg); }
  36% { transform: translate3d(-1px,0,0) rotate(-0.5deg); }
  48% { transform: translate3d(1px,0,0) rotate(0.5deg); }
  60% { transform: translate3d(0,0,0) rotate(0deg); }
  74% { transform: translate3d(0,-7px,0) rotate(0deg); }
  84% { transform: translate3d(0,2px,0) rotate(0deg); }
  92% { transform: translate3d(0,0,0) rotate(0deg); }
  100% { transform: translate3d(0,0,0) rotate(0deg); }
}

/* うさぎジャンプ3羽 */
@keyframes rabbitJump {
  0%,100% { transform: translate3d(0,0,0); }
  20% { transform: translate3d(0,-8px,0); }
  35% { transform: translate3d(0,3px,0); }
  45% { transform: translate3d(0,0,0); }
}

@keyframes miceMove {
  0%,100% { transform: translate3d(0,0,0); }
  50% { transform: translate3d(0,-5px,0); }
}


@keyframes peterWish {
  0%,100% { transform: translate3d(0,0,0) rotate(0deg); }
  50% { transform: translate3d(0,-5px,0) rotate(-2deg); }
  75% { transform: translate3d(0,-2px,0) rotate(0.8deg); }
}

@keyframes peterSwing {
  0% { transform: rotate(-2deg); }
  50% { transform: rotate(2deg); }
  100% { transform: rotate(-2deg); }
}

@keyframes trainPeter {
  0% {
    transform: translate(120%, -15%);
    opacity: 0;
  }
  1% {
    transform: translate(120%, -15%);
    opacity: 1;
  }
  30% {
    transform: translate(-3%, 1%);
    opacity: 1;
  }
  38% {
    transform: translate(0, 0);
    opacity: 1;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}

@keyframes foxWalk {
  0% { transform: translate3d(0,0,0) scaleX(1); }
  10% { transform: translate3d(-25%,-4px,0) scaleX(1); }
  20% { transform: translate3d(-50%,0,0) scaleX(1); }
  30% { transform: translate3d(-75%,-4px,0) scaleX(1); }
  40% { transform: translate3d(-100%,0,0) scaleX(1); }
  48% { transform: translate3d(-120%,-2px,0) scaleX(1); }
  52% { transform: translate3d(-120%,0,0) scaleX(-1); }
  62% { transform: translate3d(-95%,-4px,0) scaleX(-1); }
  72% { transform: translate3d(-70%,0,0) scaleX(-1); }
  82% { transform: translate3d(-45%,-4px,0) scaleX(-1); }
  92% { transform: translate3d(-20%,0,0) scaleX(-1); }
  98% { transform: translate3d(0,-2px,0) scaleX(-1); }
  100% { transform: translate3d(0,0,0) scaleX(1); }
}


@keyframes badgerWalk {
  0% { transform: translate3d(0,0,0) scaleX(-1); }
  10% { transform: translate3d(22%,-3px,0) scaleX(-1); }
  20% { transform: translate3d(44%,0,0) scaleX(-1); }
  30% { transform: translate3d(66%,-3px,0) scaleX(-1); }
  40% { transform: translate3d(88%,0,0) scaleX(-1); }
  48% { transform: translate3d(110%,-2px,0) scaleX(-1); }
  52% { transform: translate3d(110%,0,0) scaleX(1); }
  62% { transform: translate3d(88%,-3px,0) scaleX(1); }
  72% { transform: translate3d(66%,0,0) scaleX(1); }
  82% { transform: translate3d(44%,-3px,0) scaleX(1); }
  92% { transform: translate3d(22%,0,0) scaleX(1); }
  98% { transform: translate3d(0,-2px,0) scaleX(1); }
  100% { transform: translate3d(0,0,0) scaleX(-1); }
}


@keyframes birdHop {
  0%,100% { transform: translate3d(0,0,0) rotate(0deg); }
  8% { transform: translate3d(0,-6px,0) rotate(-4deg); }
  14% { transform: translate3d(0,0,0) rotate(0deg); }
  22% { transform: translate3d(0,-4px,0) rotate(3deg); }
  28% { transform: translate3d(0,0,0) rotate(0deg); }
  55% { transform: translate3d(0,0,0) rotate(0deg); }
  65% { transform: translate3d(0,-5px,0) rotate(-3deg); }
  72% { transform: translate3d(0,0,0) rotate(0deg); }
  82% { transform: translate3d(0,-3px,0) rotate(2deg); }
  88% { transform: translate3d(0,0,0) rotate(0deg); }
}


@keyframes hedgehogWalk {
  0% { transform: translate3d(55%,0,0) scaleX(-1); }
  10% { transform: translate3d(33%,-3px,0) scaleX(-1); }
  20% { transform: translate3d(11%,0,0) scaleX(-1); }
  30% { transform: translate3d(-11%,-3px,0) scaleX(-1); }
  40% { transform: translate3d(-33%,0,0) scaleX(-1); }
  48% { transform: translate3d(-55%,-2px,0) scaleX(-1); }
  52% { transform: translate3d(-55%,0,0) scaleX(1); }
  62% { transform: translate3d(-33%,-3px,0) scaleX(1); }
  72% { transform: translate3d(-11%,0,0) scaleX(1); }
  82% { transform: translate3d(11%,-3px,0) scaleX(1); }
  92% { transform: translate3d(33%,0,0) scaleX(1); }
  98% { transform: translate3d(55%,-2px,0) scaleX(1); }
  100% { transform: translate3d(55%,0,0) scaleX(-1); }
}


@keyframes fvTitleFade{
  0%{
    opacity:0;
    transform:translateX(-50%) translateY(8px);
  }

  100%{
    opacity:1;
    transform:translateX(-50%) translateY(0);
  }
}

@keyframes glassSwing{
  0%{ transform:translateX(-50%) rotate(-5deg);}
  50%{ transform:translateX(-50%) rotate(5deg);}
  100%{ transform:translateX(-50%) rotate(-5deg);}
}

@keyframes beeFly{
  0%{transform:translate(0,0) rotate(0deg);}
  18%{transform:translate(10px,-8px) rotate(6deg);}
  36%{transform:translate(18px,5px) rotate(-5deg);}
  58%{transform:translate(4px,14px) rotate(8deg);}
  77%{transform:translate(-12px,8px) rotate(-6deg);}
  92%{transform:translate(-6px,-10px) rotate(4deg);}
  100%{transform:translate(0,0) rotate(0deg);}
}