:root {
  --neon-text: #afeeee;
  --neon-text-n: #6a5d21;
}

body {
  font-family: serif;
  background: #333;
  color: #fff;
  font-size: clamp(15px, 15px + 0.5vw, 21px);
  line-height: 1.9;
  letter-spacing: 0.08em;
}
body .nav {
  background: rgba(45, 45, 45, 0.9);
  position: sticky;
  z-index: 99;
  top: 0;
  left: 0;
}
body .nav ul {
  list-style: none;
  height: 10vh;
  display: flex;
}
body .nav ul li {
  width: 25%;
  height: 100%;
  line-height: 10vh;
  font-weight: bold;
  text-align: center;
}
body .nav ul li a {
  color: #fff;
}
body .nav ul li:hover {
  transition: 0.4s;
  text-shadow: -0.1rem -0.1rem 0.5rem var(--neon-text), 0.1rem 0.1rem 0.5rem var(--neon-text), 0 0 1rem var(--neon-text-n), 0 0 2rem var(--neon-text-n), 0 0 3rem var(--neon-text-n), 0 0 4rem var(--neon-text-n), 0 0 5rem var(--neon-text-n);
}
@media (max-width: 1000px) {
  body .nav {
    display: none !important;
  }
}
body .header-button {
  display: none;
}
@media (max-width: 1000px) {
  body .header-button {
    width: calc(6vw + 35px);
    height: calc(6vw + 35px);
    position: fixed;
    top: 2vw;
    right: 2vw;
    z-index: 99;
    display: block;
    background-image: url("/images/hum.avif");
    background-size: cover;
  }
  body .cross {
    background-image: url("/images/batsu.avif");
  }
}
@keyframes ro {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
body .navi {
  position: absolute;
  top: 0;
  width: 25vw;
  height: 100vh;
  float: left;
  background: #333;
  visibility: hidden;
}
body .navi .site {
  margin: 1vw 2vw;
  padding: 3vw 2vw 3vw 2vw;
  text-shadow: -0.1rem -0.1rem 0.5rem var(--neon-text), 0.1rem 0.1rem 0.5rem var(--neon-text), 0 0 1rem var(--neon-text-n), 0 0 2rem var(--neon-text-n), 0 0 3rem var(--neon-text-n), 0 0 4rem var(--neon-text-n), 0 0 5rem var(--neon-text-n);
  font-size: clamp(18px, 1.2vw + 8px, 32px);
  font-weight: bold;
  letter-spacing: 0.2em;
  text-align: center;
  display: block;
}
body .navi ul {
  margin-top: 10vh;
  height: 60vh;
  font-weight: bold;
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}
body .navi ul li a {
  letter-spacing: 0.15em;
  color: #eee;
}
body .navi ul li:hover {
  transition: 0.4s;
  text-shadow: -0.1rem -0.1rem 0.5rem var(--neon-text), 0.1rem 0.1rem 0.5rem var(--neon-text), 0 0 1rem var(--neon-text-n), 0 0 2rem var(--neon-text-n), 0 0 3rem var(--neon-text-n), 0 0 4rem var(--neon-text-n), 0 0 5rem var(--neon-text-n);
}
@media (max-width: 1000px) {
  body {
    position: relative;
  }
  body .navi {
    visibility: visible;
    height: 0;
    opacity: 0;
    width: 100vw;
    position: fixed;
    top: 0;
    left: 0;
    float: none;
  }
  body .navi .site {
    padding: 3vw;
    margin: calc(5vh + 80px) 0 calc(3vh + 50px) 0;
    font-size: calc(2.5vw + 14px);
  }
  body .navi ul {
    margin-top: 0;
    height: 45vh;
    font-size: calc(0.8vw + 14px);
  }
  body .navi-block {
    z-index: 50;
    opacity: 1;
    transition: all 0.3s;
    height: 100vh;
  }
}
body main {
  background: #333;
  padding: calc(1vw + 10px) 0;
}
body main h1 {
  font-weight: bold;
  margin: 0 auto;
  padding: 1vw 0;
  background: #333;
  width: min(65vw + 80px, 1000px);
  text-align: center;
  font-size: clamp(18px, 2vw, 28px);
  font-size: clamp(22px, 2vw, 35px);
  line-height: 4;
  letter-spacing: 0.2em;
}
body main article {
  box-shadow: 10px 10px -10px -10px rgba(1, 1, 1, 0.3);
  width: min(65vw + 80px, 1000px);
  padding: 0 calc(5vw + 10px) calc(3vw + 10px) calc(5vw + 10px);
  margin: 0 auto;
  background: #444;
  overflow: auto;
}
body main article h2 {
  font-weight: bold;
  text-align: center;
  line-height: 4;
  letter-spacing: 0.1em;
  font-size: clamp(16px, 1vw + 10px, 1.6rem);
  background: rgba(224, 224, 224, 0.3);
  position: relative;
  margin: 4vw 0 3vw 0;
}
body main article h2::before {
  content: "  ";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: calc(1vw + 10px);
  background: papayawhip;
}
body main article h3 {
  text-align: center;
  line-height: 3.5;
  letter-spacing: 0.1em;
  font-size: clamp(16px, 1vw + 10px, 1.6rem);
  background: rgba(224, 224, 224, 0.3);
  margin: 3vw 0 3vw 0;
  font-weight: bold;
}
body main article p {
  margin-top: 1vw;
}
body main article iframe {
  margin: 1vw 0;
  width: min(560px, 100%);
}
body main article img {
  margin: 2vw auto;
  width: 100%;
  display: block;
}
body main article .how-image {
  background: #fff;
}
body main article video {
  margin: 1vw 0;
}
body main article ol li,
body main article ul li {
  margin-top: 1vw;
}
body main article ul {
  margin-top: 1vw;
  padding: 0.5vw 1vw;
}
body main article ol {
  margin-top: 1vw;
  padding: 0.5vw 1vw;
}
body main article .ul {
  background: #eaffea;
}
body main article .ol {
  background: #ffffef;
}
body main article .zu {
  width: 100%;
}
body main article .b {
  font-weight: bold;
}
body main article .r {
  color: #ff6347;
}
body main article .g {
  color: #66cdaa;
}
body main article .compare-table {
  width: 100%;
  margin: 2vw 0;
}
body main article .compare-table thead tr th,
body main article .compare-table thead tr td,
body main article .compare-table tbody tr th,
body main article .compare-table tbody tr td {
  border: solid 2px #fff;
  padding: 10px;
  text-align: center;
}
body main article .compare-table thead tr .r,
body main article .compare-table tbody tr .r {
  color: #ff69b4;
  font-weight: bold;
}
body main article .compare-table thead tr .b,
body main article .compare-table tbody tr .b {
  color: #1e90ff;
  font-weight: bold;
}
body main article .compare-image {
  width: 100%;
  display: none;
}
@media (max-width: 900px) {
  body main article .compare-table {
    display: none;
  }
  body main article .compare-image {
    display: block;
  }
}
@media (max-width: 800px) {
  body main h1 {
    width: min(65vw + 80px, 1000px);
  }
  body main article {
    width: 100vw;
  }
  body main article img {
    width: 100%;
  }
}
body .button {
  margin: calc(3vw + 50px) auto;
  width: calc(10vw + 200px);
  display: block;
  text-align: center;
  --hover-shadows: 16px 16px 33px #333, -16px -16px 33px #333;
  --accent: fuchsia;
  --accent: white;
  font-weight: bold;
  letter-spacing: 0.3em;
  border: none;
  border-radius: 1.1em;
  background-color: #222;
  background-color: #001e43;
  cursor: pointer;
  color: white;
  padding: 1em 2em;
  transition: box-shadow ease-in-out 0.3s, background-color ease-in-out 0.1s, letter-spacing ease-in-out 0.1s, transform ease-in-out 0.1s;
  box-shadow: 13px 13px 10px #1c1c1c, -13px -13px 10px #262626;
  box-shadow: var(--hover-shadows);
}
body .button:hover {
  box-shadow: var(--hover-shadows), var(--accent) 0px 0px 30px 5px;
}
body .button:active {
  box-shadow: var(--hover-shadows), var(--accent) 0px 0px 30px 5px;
  background-color: var(--accent);
  transform: scale(0.95);
}
@media (max-width: 1000px) {
  body .button,
  body .button:hover,
  body .button:active {
    box-shadow: var(--hover-shadows), var(--accent) 0px 0px 20px 2px;
  }
}
body footer {
  background: #333;
  height: 20vh;
  text-align: center;
}
body footer span {
  line-height: 20vh;
}
@media (max-width: 800px) {
  body footer {
    height: 10vh;
  }
  body footer span {
    line-height: 10vh;
  }
}