#onomatopoeia {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-feature-settings: "palt";
}
#onomatopoeia * {
  box-sizing: border-box;
}
#onomatopoeia .serif {
  font-family: "M PLUS Rounded 1c", sans-serif;
}
#onomatopoeia .sairaStencilOne {
  font-family: "Saira Stencil One", sans-serif;
}
#onomatopoeia img {
  max-width: 100%;
  width: 100%;
  height: auto;
  max-height: 100%;
  display: block;
}
#onomatopoeia .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
#onomatopoeia .sp {
  display: block;
}
@media screen and (min-width: 768px) {
  #onomatopoeia .sp {
    display: none;
  }
}
#onomatopoeia .sp-inline {
  display: inline;
}
@media screen and (min-width: 768px) {
  #onomatopoeia .sp-inline {
    display: none;
  }
}
#onomatopoeia .pc {
  display: none;
}
@media screen and (min-width: 768px) {
  #onomatopoeia .pc {
    display: block;
  }
}
#onomatopoeia .pc-inline {
  display: none;
}
@media screen and (min-width: 768px) {
  #onomatopoeia .pc-inline {
    display: inline;
  }
}
#onomatopoeia .sp-pc {
  display: none;
}
@media screen and (max-width: 991px) and (min-width: 768px) {
  #onomatopoeia .sp-pc {
    display: block;
  }
}
#onomatopoeia ._fadein {
  opacity: 0;
  visibility: hidden;
  transition: all 1s;
  transform: translateY(50px);
}
#onomatopoeia ._fadein._animated {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
#onomatopoeia ._fadeinOpacity {
  opacity: 0;
  transition: opacity 1s, transform 1s;
}
#onomatopoeia ._fadeinOpacity._animated {
  opacity: 1;
}
#onomatopoeia ._blur {
  opacity: 0;
  transition: opacity 0.5s;
  visibility: hidden;
}
#onomatopoeia ._blur img {
  filter: blur(20px);
  transition: filter 1s;
}
#onomatopoeia ._blur._animated {
  opacity: 1;
  visibility: visible;
}
#onomatopoeia ._blur._animated img {
  filter: blur(0px);
}
#onomatopoeia ._zoom img {
  transition: transform 5s;
  transition-delay: 0.5s;
  transform: scale(1.1);
}
#onomatopoeia ._zoom._animated img {
  transform: scale(1);
}
#onomatopoeia ._blurZoom {
  opacity: 0;
  transition: opacity 0.5s;
  visibility: hidden;
  overflow: hidden;
}
#onomatopoeia ._blurZoom img {
  filter: blur(20px);
  transform: scale(1.1);
  transition: transform 10s, filter 1s;
}
#onomatopoeia ._blurZoom._animated {
  opacity: 1;
  visibility: visible;
}
#onomatopoeia ._blurZoom._animated img {
  filter: blur(0px);
  transform: scale(1);
}
#onomatopoeia ._fadeinShadow::before, #onomatopoeia ._fadeinShadow::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 21;
  transition: transform 0.6s;
  will-change: transform;
}
#onomatopoeia ._fadeinShadow::before {
  background: #000000;
  right: 0;
  left: 0;
}
#onomatopoeia ._fadeinShadow::after {
  width: 200%;
  right: -200%;
}
#onomatopoeia ._fadeinShadow._animated::before {
  animation: load-bg 0.8s ease-in-out;
  animation-fill-mode: forwards;
  animation-duration: 0.8s;
}
#onomatopoeia ._fadeinShadow._animated::after {
  animation: load-bg2 1.2s ease-in-out;
  animation-fill-mode: forwards;
  animation-duration: 1.2s;
}
@keyframes load-bg {
  0% {
    transform: translate(0%, 0);
  }
  40%, 60% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(calc(-100% - 1px), 0);
  }
}
@keyframes load-bg2 {
  0% {
    transform: translate(0%, 0);
  }
  40% {
    transform: translate(calc(-50% - 1px), 0);
  }
  100% {
    transform: translate(calc(-200% - 1px), 0);
  }
}
#onomatopoeia ._purupuru._animated {
  animation: purupuru 2.3s linear;
}
@keyframes purupuru {
  0% {
    transform: skew(0deg, 0deg);
  }
  5% {
    transform: skew(8deg, 8deg);
  }
  10% {
    transform: skew(-4deg, -4deg);
  }
  15% {
    transform: skew(6deg, 6deg);
  }
  20% {
    transform: skew(-2deg, -2deg);
  }
  25% {
    transform: skew(1deg, 1deg);
  }
  30% {
    transform: skew(-0.6deg, -0.6deg);
  }
  35% {
    transform: skew(0.4deg, 0.4deg);
  }
  40% {
    transform: skew(-0.2deg, -0.2deg);
  }
  45% {
    transform: skew(0.1deg, 0.1deg);
  }
  50% {
    transform: skew(0deg, 0deg);
  }
}
#onomatopoeia ._yurari._animated {
  animation: yurari 1s linear;
  animation-fill-mode: forwards;
}
@keyframes yurari {
  0% {
    transform: skew(0deg, 0deg);
    opacity: 0;
  }
  10% {
    transform: skew(1deg, 1deg);
  }
  20% {
    transform: skew(0deg, 0deg);
  }
  30% {
    transform: skew(-1deg, -1deg);
  }
  40% {
    transform: skew(0deg, 0deg);
  }
  50% {
    transform: skew(2deg, 2deg);
  }
  60% {
    transform: skew(0deg, 0deg);
  }
  70% {
    transform: skew(-1deg, -1deg);
  }
  80% {
    transform: skew(0deg, 0deg);
  }
  90% {
    transform: skew(1deg, 1deg);
  }
  100% {
    transform: skew(0deg, 0deg);
    opacity: 1;
  }
}
#onomatopoeia ._momentum {
  transform: scale(0) translateY(20%);
}
#onomatopoeia ._momentum._animated {
  animation: momentum 0.2s linear;
  animation-fill-mode: forwards;
}
@keyframes momentum {
  0% {
    transform: scale(0) translateY(20%);
  }
  85% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1) translateY(0%);
  }
}
#onomatopoeia ._momentumRepeat {
  opacity: 0;
}
#onomatopoeia ._momentumRepeat._animated {
  animation: momentumRepeat 5s infinite;
}
@keyframes momentumRepeat {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  5% {
    transform: scale(1.2);
  }
  10%, 100% {
    transform: scale(1);
    opacity: 1;
  }
}
#onomatopoeia ._purupuruRepeat {
  opacity: 0;
}
#onomatopoeia ._purupuruRepeat._animated {
  animation: purupuruRepeat 5s infinite;
}
@keyframes purupuruRepeat {
  0% {
    transform: scale(0);
    transform: skew(0deg, 0deg);
    opacity: 1;
  }
  2.5% {
    transform: scale(1.2);
    transform: skew(8deg, 8deg);
  }
  5% {
    transform: scale(1);
    transform: skew(-4deg, -4deg);
  }
  7.5% {
    transform: skew(6deg, 6deg);
  }
  10% {
    transform: skew(-2deg, -2deg);
  }
  12.5% {
    transform: skew(1deg, 1deg);
  }
  15% {
    transform: skew(-0.6deg, -0.6deg);
  }
  16.5% {
    transform: skew(0.4deg, 0.4deg);
  }
  20% {
    transform: skew(-0.2deg, -0.2deg);
  }
  22.5% {
    transform: skew(0.1deg, 0.1deg);
  }
  25%, 100% {
    transform: skew(0deg, 0deg);
    opacity: 1;
  }
}
#onomatopoeia ._blurRepeat {
  opacity: 0;
}
#onomatopoeia ._blurRepeat img {
  transition: filter 1s;
}
#onomatopoeia ._blurRepeat._animated {
  animation: blurRepeat 5s infinite;
}
@keyframes blurRepeat {
  0% {
    filter: blur(5px);
    opacity: 1;
  }
  25%, 100% {
    filter: blur(0px);
    opacity: 1;
  }
}
#onomatopoeia ._fadeInBottomRepeat {
  opacity: 0;
}
#onomatopoeia ._fadeInBottomRepeat._animated {
  animation: fadeInBottomRepeat 5s infinite;
}
@keyframes fadeInBottomRepeat {
  0% {
    clip-path: inset(0 0 100% 0);
    opacity: 1;
  }
  25%, 100% {
    clip-path: inset(0);
    opacity: 1;
  }
}
#onomatopoeia ._fadeInRightRepeat {
  opacity: 0;
}
#onomatopoeia ._fadeInRightRepeat._animated {
  animation: fadeInRightRepeat 5s infinite;
}
@keyframes fadeInRightRepeat {
  0% {
    clip-path: inset(0 100% 0 0);
    opacity: 1;
  }
  25%, 100% {
    clip-path: inset(0);
    opacity: 1;
  }
}/*# sourceMappingURL=common.css.map */