@charset "UTF-8";

/* animation: pico 0.5s ease; */
@keyframes pico {
  0%   { transform: scale(1.1); }
  50%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}
@keyframes pico2 {
  0%   { transform: scale(0.09); }
  50%  { transform: scale(1.01); }
  100% { transform: scale(1); }
}
@keyframes pico3 {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.10); }
  60%  { transform: scale(0.96); }
  80%  { transform: scale(1.03); }
  100% { transform: scale(1); }
}

/* animation: pico-tilt 0.5s ease; */
@keyframes pico-tilt {
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(-3deg); }
  50%  { transform: rotate(3deg); }
  75%  { transform: rotate(-1.5deg); }
  100% { transform: rotate(0deg); }
}
@keyframes pico-tilt2 {
  0%   {
    transform: rotate(0deg) scale(1);
  }
  25%  {
    transform: rotate(-5deg) scale(1.2); /* 傾きながら少し拡大 */
  }
  50%  {
    transform: rotate(5deg) scale(1); /* 傾きが反対になり、元のサイズに戻る */
  }
  75%  {
    transform: rotate(-2.5deg) scale(1.05); /* 最後の動きで少しだけ拡大 */
  }
  100% {
    transform: rotate(0deg) scale(1);
  }
}

.twinkle1{
  animation: twinkle1 1s steps(1) infinite;
}
.twinkle2{
  animation: twinkle2 0.8s steps(1) infinite;
}
.twinkle3{
  animation: twinkle3 1.3s steps(1) infinite;
}
@keyframes twinkle1 {
  0%, 100% {
    transform: scale(0.9); /* 通常サイズ */
  }
  50% {
    transform: scale(1); /* 拡大サイズ */
  }
}
@keyframes twinkle2 {
  0%, 100% {
    transform: scale(1); /* 通常サイズ */
  }
  50% {
    transform: scale(0.9); /* 拡大サイズ */
  }
}
@keyframes twinkle3 {
  0%, 100% {
    transform: scale(0.85); /* 通常サイズ */
  }
  50% {
    transform: scale(1); /* 拡大サイズ */
  }
}


.shake {
  transform-origin: bottom center; /* 下を支点に回転 */
}
.shake1 {
  animation: shake1 5s steps(1, end) infinite;
}
.shake2 {
  animation: shake2 5s steps(1, end) infinite;
}
@keyframes shake1 {
  0%   { transform: rotate(0deg); }
  5%   { transform: rotate(-5deg); }
  15%  { transform: rotate(2deg); }
  20%  { transform: rotate(0deg); }   /* 1秒で振り終わり */
  100% { transform: rotate(0deg); }   /* 4秒間は停止 */
}
@keyframes shake2 {
  0%   { transform: rotate(0deg); }
  5%   { transform: rotate(5deg); }
  15%  { transform: rotate(-2deg); }
  20%  { transform: rotate(0deg); }   /* 1秒で振り終わり */
  100% { transform: rotate(0deg); }   /* 4秒間は停止 */
}

.jump1{
  animation: jump2 5s step-end infinite;
}
.jump2{
  animation: jump2 3s step-end infinite;
}
@keyframes jump2 {
  0%, 20%, 100% {
    transform: translateY(0);
  }
  5% {
    transform: translateY(-7px);
  }
  10% {
    transform: translateY(0);
  }
  15% {
    transform: translateY(-7px);
  }
}

@keyframes jump2 {
  0%, 20%, 100% {
    transform: translateY(0);
  }
  5% {
    transform: translateY(-5px);
  }
  10% {
    transform: translateY(0);
  }
  15% {
    transform: translateY(-5px);
  }
}

.swing1{
  animation: 3s swing1 steps(1, start) infinite;
}
.swing2{
  animation: 3s swing2 steps(1, start) infinite;
}
@keyframes swing1 {
  0%, 100% {
      transform: rotate(5deg)
  }
  50% {
      transform: rotate(-5deg)
  }
  /* 100% {
      transform: rotate(5deg)
  } */
}
@keyframes swing2 {
  0%, 100% {
      transform: rotate(-5deg)
  }
  50% {
      transform: rotate(5deg)
  }
  /* 100% {
      transform: rotate(-5deg)
  } */
}


@keyframes seagull {
  0% {
    transform: translate(0, 0) rotate(-7deg);
  }
  25% {
    transform: translate(2px, -2px) rotate(-3deg);
  }
  50% {
    transform: translate(0, -5px) rotate(0deg);
  }
  /* 75% {
    transform: translate(-2px, -1px) rotate(2deg);
  } */
  100% {
    transform: translate(0, 0) rotate(7deg);
  }
}