@import url("https://fonts.googleapis.com/css2?family=Alex+Brush&family=Zen+Maru+Gothic:wght@400;700&display=swap");

html {
  font-size: clamp(6px, 0.6944vw, 40px);
  width: 100%;
}

@media screen and (max-width: 1024px) {
  html {
    font-size: clamp(6px, 0.9765vw, 24px);
  }
}

@media screen and (max-width: 768px) {
  html {
    font-size: clamp(6px, 2.5vw, 16px);
  }
}

body {
  color: #333;
  font-size: 1.6rem;
  line-height: 1.8;
  font-family: "Zen Maru Gothic", serif;
  font-weight: 400;
  letter-spacing: 0.05em;
  word-wrap: break-word;
  -webkit-text-size-adjust: 100%;
}

body.is-active {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

h1,
h2,
h3,
h4,
h5 {
  font-weight: 600;
  letter-spacing: 0.075em;
}

h1 {
  font-size: 3rem;
}

h2 {
  font-size: 2.8rem;
}

h3 {
  font-size: 2.5rem;
}

h4 {
  font-size: 2.2rem;
}

h5 {
  font-size: 1.8rem;
}

@media screen and (max-width: 768px) {
  h1 {
    font-size: 2.4rem;
  }

  h2 {
    font-size: 2.2rem;
  }

  h3 {
    font-size: 2rem;
  }

  h4 {
    font-size: 1.8rem;
  }
}

main {
}

.h2-heading {
  width: fit-content;
  margin: 0 auto 4rem;
  text-align: center;
}

.h2-heading h2 {
  margin-bottom: 1.6rem;
}

.h2-heading span {
  font-size: 1.6rem;
}

.fadeIn {
  transition-duration: 1.2s;
  transition-property: all;
  transition-timing-function: ease-in;
  opacity: 0;
}

.fadeIn.is-anime {
  opacity: 1;
}

.fadeUp {
  transform: translateY(2.4rem);
  transition-duration: 1.2s;
  transition-property: all;
  transition-timing-function: ease;
  opacity: 0;
}

.fadeUp.is-anime {
  transform: translateY(0);
  opacity: 1;
}

.slideIn {
  transform: translateX(2.4rem);
  transition-duration: 1.2s;
  transition-property: all;
  transition-timing-function: ease;
  opacity: 0;
}

.slideIn.is-anime {
  transform: translateX(0);
  opacity: 1;
}

.outlink {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: gray;
  text-decoration: underline;
  transition-duration: 0.4s;
  transition-property: all;
  transition-timing-function: ease;
  width: fit-content;
}

.outlink::after {
  content: "";
  display: inline-block;
  width: 1.2rem;
  aspect-ratio: 250 / 298;
  transform: rotate(45deg);
  background-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250 298" preserveAspectRatio="none" x="0px" y="0px"><path d="M244.749 137.842C243.091 139.508 241.12 140.831 238.95 141.733C236.78 142.635 234.454 143.1 232.104 143.1C229.755 143.1 227.428 142.635 225.258 141.733C223.089 140.831 221.118 139.508 219.459 137.842L142.86 61.1367V280.124C142.86 284.865 140.979 289.412 137.632 292.764C134.284 296.117 129.743 298 125.008 298C120.274 298 115.733 296.117 112.385 292.764C109.037 289.412 107.157 284.865 107.157 280.124V61.1367L30.5278 137.842C27.1741 141.2 22.6256 143.087 17.8828 143.087C13.14 143.087 8.59141 141.2 5.23774 137.842C1.88407 134.483 4.99736e-08 129.929 0 125.179C-4.99736e-08 120.43 1.88407 115.875 5.23774 112.517L112.349 5.25786C114.007 3.5913 115.978 2.26897 118.148 1.36671C120.318 0.464449 122.644 0 124.994 0C127.343 0 129.67 0.464449 131.839 1.36671C134.009 2.26897 135.98 3.5913 137.639 5.25786L244.749 112.517C246.414 114.177 247.734 116.151 248.635 118.324C249.536 120.497 250 122.826 250 125.179C250 127.532 249.536 129.862 248.635 132.035C247.734 134.207 246.414 136.181 244.749 137.842Z" fill="gray"/></svg>');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

@media screen and (max-width: 1024px) {
}

@media screen and (max-width: 768px) {
}

@media (any-hover: hover) {
  .outlink:hover {
    opacity: 0.6;
  }
}