@charset "UTF-8";

html {
  font-size: max(85%, 4vw);
  overflow-x: clip;
}

@media (min-width: 960px) {
  html {
    font-size: max(75%, 1.11vw);
  }
}

body {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 100vh;
  line-height: 1.5;
  font-family: var(--font-noto-sans-jp);
  background: top left / 110px auto repeat url('../images/common/bg_beige.png');
  overflow-x: clip;
}

:is(a, button, label) {
  cursor: pointer;
}

:is(svg, video) {
  display: block;
  width: 100%;
  height: auto;
}

:is(img, picture) {
  display: block;
  width: 100%;
  height: auto;
}

:where(p, li) {
  line-break: strict;
}

@keyframes rumble {
  0% {
    transform: rotate(0) translate(0, 0);
  }

  3.9% {
    transform: rotate(0) translate(0, 0);
  }

  4% {
    transform: rotate(-3deg) translate(0, -2px);
  }

  7.9% {
    transform: rotate(-3deg) translate(0, -2px);
  }

  8% {
    transform: rotate(2deg) translate(0, -1px);
  }

  11.9% {
    transform: rotate(2deg) translate(0, -1px);
  }

  12% {
    transform: rotate(0) translate(0, 0);
  }

  100% {
    transform: rotate(0) translate(0, 0);
  }
}