@charset "UTF-8";
/* CSS Document */
#title01, #fkds.js-svg-item {
  --dur: 480ms;
  --ease: cubic-bezier(.25, .85, .35, 1);
  --pop: .18; /* 118%くらいにポン */
  --tilt: .8deg; /* 傾き控えめ */
  --lift: 2px; /* 上げ幅も控えめ */
}
#title01 .js-svg-item, #fkds.js-svg-item {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 50%;
}
#fkds.js-svg-item.is-active, #title01 .js-svg-item.is-active {
  animation: katakata-scale var(--dur) var(--ease) forwards;
}
#title02 .js-svg-item {
  transform-box: fill-box;
  opacity: 0;
  transform: rotate(-8deg) translate(-3px, 0);
}
#title02 .js-svg-item.is-active {
  animation: katakata .5s forwards;
}
#leaf.js-svg-item {
  transform-box: fill-box;
  transform-origin: 50% 0%;
  translate: 0 -100%;
  rotate: 0deg;
  opacity: 0;
  will-change: translate, rotate;
  transition: opacity var(--transit);
}
#leaf.js-svg-item.is-active {
  opacity: 1;
  animation: leafFall 1.4s ease forwards;
}
@keyframes leafFall {
  0% {
    translate: 0 -100%;
    rotate: 0deg;
  }
  30% {
    translate: 0 -70%;
    rotate: -12deg;
  }
  60% {
    translate: 0 -30%;
    rotate: 15deg;
  }
  100% {
    translate: 0 0;
    rotate: 0deg;
  }
}
@keyframes katakata-scale {
  0% {
    opacity: 0;
    transform: rotate(0) translate(0, 0) scale(calc(1 - var(--pop)));
  }
  40% {
    opacity: 1;
    transform: rotate(calc(-1 * var(--tilt))) translate(0, calc(-1 * var(--lift))) scale(calc(1 + var(--pop)));
  }
  65% {
    transform: rotate(0deg) translate(0, calc(-0.5 * var(--lift))) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: rotate(0) translate(0, 0) scale(1);
  }
}
@keyframes katakata {
  0% {
    opacity: 0;
    transform: rotate(0deg) translate(0, 0);
  }
  34% {
    opacity: 1;
    transform: rotate(0deg) translate(0, 0);
  }
  35% {
    opacity: 1;
    transform: rotate(-.5deg) translate(0, -1.5px);
  }
  69% {
    opacity: 1;
    transform: rotate(0deg) translate(0, -1.5px);
  }
  70% {
    opacity: 1;
    transform: rotate(.5deg) translate(0, -.5px);
  }
  99% {
    opacity: 1;
    transform: rotate(.5deg) translate(0, -.5px);
  }
  100% {
    opacity: 1;
    transform: rotate(0deg) translate(0, 0px);
  }
}
.anime-yura {
  animation: yurayura var(--in-out) infinite 4.5s forwards 4s;
}
.anime-yura2 {
  animation: yurayura var(--in-out) infinite 4s forwards 2s;
}
.anime-yura_asap {
  animation: yurayura var(--in-out) infinite 4.5s;
}
@keyframes yurayura {
  0% {
    transform: rotate(0);
  }
  5% {
    transform: rotate(-15deg);
  }
  10% {
    transform: rotate(15deg);
  }
  15% {
    transform: rotate(-15deg);
  }
  20% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(0);
  }
}
.anime-grass{
  animation: grass-move var(--in-out) infinite 2s;
}
.anime-grass2{
  animation: grass-move var(--in-out) infinite 2s forwards 1s;
}
@keyframes grass-move{
  0%{
    transform: translate(0,0);
  }
  25%{
    transform: translate(15%,0);
  }
  50%{
    transform: translate(0,0);
  }
  100%{
    transform: translate(0,0);
  }
}
.anime-teku {
  animation: tekuteku var(--in-out) infinite 5s forwards 1s;
}
@keyframes tekuteku {
  0% {
    transform: translate(0, 0) rotate(0);
  }
  5% {
    transform: translate(0, -.5rem) rotate(-6deg);
  }
  10% {
    transform: translate(0, .5rem) rotate(0);
  }
  15% {
    transform: translate(0, -1rem) rotate(3deg);
  }
  20% {
    transform: translate(0, 2rem) rotate(0);
  }
  25% {
    transform: translate(0, 0) rotate(0);
  }
  100% {
    transform: translate(0, 0) rotate(0);
  }
}
.anime-pici {
  animation: pitipiti var(--in-out) infinite 4s forwards 3s;
}
@keyframes pitipiti {
  0% {
    transform: translate(0, 0) rotate(0);
  }
  5% {
    transform: translate(0, -15%) rotate(0);
  }
  7% {
    transform: translate(0, -15%) rotate(0);
  }
  9% {
    transform: translate(0, -15%) rotate(20deg);
  }
  12% {
    transform: translate(0, -15%) rotate(-20deg);
  }
  15% {
    transform: translate(0, -15%) rotate(20deg);
  }
  17% {
    transform: translate(0, -15%) rotate(-20deg);
  }
  19% {
    transform: translate(0, -15%) rotate(0);
  }
  25% {
    transform: translate(0, 0) rotate(0);
  }
  100% {
    transform: translate(0, 0) rotate(0);
  }
}
.anime-pici2 {
  animation: pitipiti2 var(--in-out) infinite 4s forwards 1s;
}
@keyframes pitipiti2 {
  0% {
    transform: rotate(0);
  }
  3% {
    transform: rotate(-10deg);
  }
  6% {
    transform:rotate(10deg);
  }
  9% {
    transform:rotate(-10deg);
  }
  12% {
    transform: rotate(10deg);
  }
  15% {
    transform: rotate(0);
  }
  100% {
    transform:rotate(0);
  }
}
.anime-goro {
  animation: gorogoro var(--in-out) infinite 5s;
}
@keyframes gorogoro {
  0% {
    transform: translateX(-5%) rotate(0);
  }
  5% {
    transform: translateX(0) rotate(-15deg);
  }
  10% {
    transform: translateX(15%) rotate(0);
  }
  15% {
    transform: translateX(20%) rotate(20deg);
  }
  20% {
    transform: translateX(15%) rotate(0);
  }
  100% {
    transform: translateX(10%) rotate(0);
  }
}
.anime-boon {
  animation: boooom 1.6s steps(4, end) 3 forwards;
  transform-origin: 50% 60%;
}
@keyframes boooom {
  0% {
    transform: rotate(0deg) translateY(0);
  }
  5% {
    transform: rotate(3deg) translateY(-2px);
  }
  10% {
    transform: rotate(-2deg) translateY(1px);
  }
  15% {
    transform: rotate(4deg) translateY(-3px);
  }
  20% {
    transform: rotate(-3deg) translateY(2px);
  }
  25% {
    transform: rotate(5deg) translateY(-4px);
  }
  30% {
    transform: rotate(-4deg) translateY(3px);
  }
  35% {
    transform: rotate(3deg) translateY(-2px);
  }
  40% {
    transform: rotate(-2deg) translateY(1px);
  }
  45% {
    transform: rotate(1deg) translateY(0);
  }
  50% {
    transform: rotate(0deg) translateY(0);
  }
  100% {
    transform: rotate(0deg) translateY(0);
  }
}
.anime-guwang {
  animation: guwang 2s infinite;
}
@keyframes guwang {
  0% {
    transform: scale(1);
  }
  6% {
    transform: scale(1.38);
  }
  12% {
    transform: scale(1);
  }
  18% {
    transform: scale(1.32);
  }
  24% {
    transform: scale(1);
  }
  100% {
    transform: scale(1);
  }
}
.amine-rotate {
  animation: 8s linear infinite rotation;
}
@keyframes rotation {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes slidein {
  0% {
    left: -10%;
    bottom: 30%;
  }
  100% {
    left: 16%;
    bottom: 22.5%;
  }
}
@keyframes poyon {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.1);
  }
  50% {
    transform: scale(0.9);
  }
  70% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}
.anime-bound{
  animation: 2s ease-in-out forwards;
  animation-name: bound;
}
@keyframes bound {
   0% {
    transform: translate(0, 0) rotate(0deg) scale(1,1);
  }
  10% {
    transform: translate(80%, 200%) rotate(5deg) scale(1.05, 0.86);
    animation-timing-function: cubic-bezier(.2,.8,.3,1);
  }
  20% {
    transform: translate(120%, 120%) rotate(15deg) scale(0.98, 1.02);
  }
  35% {
    transform: translate(180%, 200%) rotate(25deg) scale(1.02, 0.90);
  }
  35.1% {
    transform: translate(185%, 200%) rotate(25deg) scale(1.02, 0.90);
    animation-timing-function: cubic-bezier(.2,.8,.3,1);
  }
  85% {
    transform: translate(300%, 200%) rotate(110deg) scale(1,1);
  }
  100% {
    transform: translate(300%, 200%) rotate(110deg) scale(1,1);
  }
}