/* スマホ */
@media screen and (max-width: 599px) {
  body {
    font-size: 6px;
  }
}

/* 崩れ防止 */
@media screen and (min-width: 600px) {
  body {
    font-size: 6px;
  }
}

/* タブレット */
@media screen and (min-width: 1024px) {
  body {
    font-size: 6px;
  }
}

/* HD */
@media screen and (min-width: 1280px) {
  body {
    font-size: 8px;
  }
}

/* WXGA++ */
@media screen and (min-width: 1600px) {
  body {
    font-size: 12px;
  }
}

/* フルHD */
@media screen and (min-width: 1920px) {
  body {
    font-size: 16px;
  }
}

/* WQHD */
@media screen and (min-width: 2560px) {
  body {
    font-size: 16px;
  }
}

/* 4K */
@media screen and (min-width: 3840px) {
  body {
    font-size: 16px;
  }
}

/* 8K */
@media screen and (min-width: 7680px) {
  body {
    font-size: 16px;
  }
}

/* とても大きい */
@media screen and (min-width: 7681px) {
  body {
    font-size: 16px;
  }
}

:root {
  --main-color: #1f242b;
  --header-color: #114a6c;
  --text-color: #c29d5c;
}

body {
  margin: 0;
  height: 100vh;
  font-family: "BIZ UDPゴシック";
  color: black;
  overflow: visible;
  letter-spacing: 1.6px;
}

.mainview {
  position: fixed;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  z-index: 0;
}

button {
  font-family: "BIZ UDPゴシック";
  cursor: pointer;
  outline: none;
  border: solid 1px black;
  color: black;
  background-color: transparent;
  transition: background-color 0.5s ease-out, color 0.5s ease-out;
}

button:hover {
  color: white;
  background-color: #ffc000;
  border: 1px #ffc000;
}

.footer {
  width: 100%;
  display: flex;
  font-size: 1.5vh;
  background-color: transparent;
  justify-content: center;
  text-align: center;
  user-select: none;
}

.footer.scrollable {
  margin-top: auto;
}

.footer.fixed {
  position: fixed;
  bottom: 0;
}

.footer p {
  font-family: "calibri";
  margin-block-end: 1.3em;
  color: black;
}

.container {
  position: relative;
  height: 100%;
  width: 100%;
  min-height: 0;
  display: flex;
}

.overlay {
  display: none;
  position: absolute;
  width: 100vw;
  height: 100vh;
  background-color: #adadad63;
}

.overlay.show {
  display: block;
  z-index: 999;
}

.loading {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 1vmin;
  line-height: 1em;
  text-align: center;
  height: 1em;
  width: 1em;
  border-radius: 50%;
  animation: loading-animation 5s linear infinite normal;
}

@keyframes loading-animation {
  0%,
  100% {
    box-shadow: 0 -10em 0 1em #606060, 7.07em -7.07em 0 0.5em #60606099, 10em 0 0 0 #60606055,
      7.07em 7.07em 0 -0.5em #60606033, 0 10em 0 -1em #60606011, -7.07em 7.07em 0 -0.5em #60606033,
      -10em 0 0 0 #60606055, -7.07em -7.07em 0 0.5em #60606099;
  }

  12.5% {
    box-shadow: 0 -10em 0 0.5em #60606099, 7.07em -7.07em 0 1em #606060, 10em 0 0 0.5em #60606099,
      7.07em 7.07em 0 0 #60606055, 0 10em 0 -0.5em #60606033, -7.07em 7.07em 0 -1em #60606011,
      -10em 0 0 -0.5em #60606033, -7.07em -7.07em 0 0 #60606055;
  }

  25% {
    box-shadow: 0 -10em 0 0 #60606055, 7.07em -7.07em 0 0.5em #60606099, 10em 0 0 1em #606060,
      7.07em 7.07em 0 0.5em #60606099, 0 10em 0 0 #60606055, -7.07em 7.07em 0 -0.5em #60606033,
      -10em 0 0 -1em #60606011, -7.07em -7.07em 0 -0.5em #60606033;
  }

  37.5% {
    box-shadow: 0 -10em 0 -0.5em #60606033, 7.07em -7.07em 0 0 #60606055, 10em 0 0 0.5em #60606099,
      7.07em 7.07em 0 1em #606060, 0 10em 0 0.5em #60606099, -7.07em 7.07em 0 0 #60606055,
      -10em 0 0 -0.5em #60606033, -7.07em -7.07em 0 -1em #60606011;
  }

  50% {
    box-shadow: 0 -10em 0 -1em #60606011, 7.07em -7.07em 0 -0.5em #60606033, 10em 0 0 0 #60606055,
      7.07em 7.07em 0 0.5em #60606099, 0 10em 0 1em #606060, -7.07em 7.07em 0 0.5em #60606099,
      -10em 0 0 0 #60606055, -7.07em -7.07em 0 -0.5em #60606033;
  }

  62.5% {
    box-shadow: 0 -10em 0 -0.5em #60606033, 7.07em -7.07em 0 -1em #60606011,
      10em 0 0 -0.5em #60606033, 7.07em 7.07em 0 0 #60606055, 0 10em 0 0.5em #60606099,
      -7.07em 7.07em 0 1em #606060, -10em 0 0 0.5em #60606099, -7.07em -7.07em 0 0 #60606055;
  }

  75% {
    box-shadow: 0 -10em 0 0 #60606055, 7.07em -7.07em 0 -0.5em #60606033, 10em 0 0 -1em #60606011,
      7.07em 7.07em 0 -0.5em #60606033, 0 10em 0 0 #60606055, -7.07em 7.07em 0 0.5em #60606099,
      -10em 0 0 1em #606060, -7.07em -7.07em 0 0.5em #60606099;
  }

  87.5% {
    box-shadow: 0 -10em 0 0.5em #60606099, 7.07em -7.07em 0 0 #60606055, 10em 0 0 -0.5em #60606033,
      7.07em 7.07em 0 -1em #60606011, 0 10em 0 -0.5em #60606033, -7.07em 7.07em 0 0 #60606055,
      -10em 0 0 0.5em #60606099, -7.07em -7.07em 0 1em #606060;
  }
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
}

::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background-color: #7f7f7f;
  border-radius: 20px;
}

::-webkit-scrollbar {
  width: 17px;
}