:root {
  color-scheme: dark;
  --black: #050506;
  --white: #fff;
  --menu-line: #343137;
  --menu-current: #949494;
  --focus: #00f6ff;
  --footer-pc-height: clamp(42px, 4.375vw, 84px);
  --footer-sp-height: min(8.985vw, 92px);
}

* {
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
  background: var(--black);
  scrollbar-width: none;
  /* Noto Sans JP is distributed under the SIL Open Font License 1.1. */
  font-family: "Noto Sans JP", Arial, sans-serif;
}

html::-webkit-scrollbar {
  display: none;
}

body {
  min-width: 0;
  margin: 0;
  overflow-x: hidden;
  background: var(--black);
  color: var(--white);
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  font: inherit;
}

img {
  display: block;
  max-width: 100%;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.hero {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 1888;
  overflow: hidden;
  background: var(--black) url("./assets/common/main_pc.png") center top / 100% 100% no-repeat;
}

.site-header {
  position: absolute;
  z-index: 10;
  inset: 0 0 auto;
  height: 4.1314%;
  background: #000;
}

.header-brand {
  position: absolute;
  top: 6.4%;
  left: 0.5729%;
  width: 9.1667%;
}

.header-brand img {
  width: 100%;
  height: auto;
}

.header-actions {
  position: absolute;
  top: 17.95%;
  right: 1.1458%;
  display: flex;
  align-items: center;
  gap: 1.4583vw;
}

.header-x-link {
  width: 2.2917vw;
  transition: opacity 160ms ease, transform 160ms ease;
}

.header-x-link img {
  width: 100%;
  height: auto;
}

.header-x-link:hover,
.header-x-link:focus-visible {
  opacity: 0.76;
  transform: scale(1.04);
}

.language-switcher {
  position: relative;
  width: 8.8542vw;
}

.language-button {
  display: flex;
  width: 100%;
  height: 2.6042vw;
  align-items: center;
  justify-content: center;
  gap: 0.3125vw;
  padding: 0;
  border: clamp(2px, 0.1563vw, 3px) solid transparent;
  border-radius: clamp(7px, 0.5208vw, 10px);
  background:
    linear-gradient(180deg, #17121a 0%, #0f0a12 46%, #09070b 100%) padding-box,
    linear-gradient(180deg, #8a858d 0%, #5f5a63 48%, #2d2a31 100%) border-box;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 10%),
    0 1px 0 rgb(0 0 0 / 90%);
  color: var(--white);
  cursor: pointer;
}

.language-label {
  width: 4.9479vw;
  height: auto;
}

.language-caret {
  width: 0;
  height: 0;
  border-top: 0.625vw solid currentColor;
  border-right: 0.625vw solid transparent;
  border-left: 0.625vw solid transparent;
  transform: translateY(-1px);
  transition: transform 150ms ease;
}

.language-button[aria-expanded="true"] .language-caret {
  transform: translateY(-1px) rotate(180deg);
}

.language-menu {
  position: absolute;
  z-index: 20;
  top: calc(100% + 0.3906vw);
  right: 0;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--menu-line);
  border-radius: 8px;
  background: #050505;
  box-shadow: 0 10px 24px rgb(0 0 0 / 45%);
}

.language-menu[hidden] {
  display: none;
}

.language-option {
  display: flex;
  width: 100%;
  min-height: 2.5vw;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-bottom: 1px solid #292929;
  background: #050505;
  color: var(--white);
  cursor: pointer;
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(14px, 0.9896vw, 19px);
  font-weight: 500;
  letter-spacing: 0.035em;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  transition: background-color 140ms ease;
}

.language-option:last-child {
  border-bottom: 0;
}

.language-option:hover,
.language-option:focus-visible,
.language-option.is-current {
  background: var(--menu-current);
}

.announcement {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.localized-visual {
  transition: opacity 150ms ease;
}

.is-switching .localized-visual {
  opacity: 0;
}

.title-info {
  position: absolute;
  height: auto;
}

.title-info {
  top: 17.7966%;
  left: 1.0938%;
  width: 45.9375%;
}

.official-links {
  position: absolute;
  z-index: 3;
  top: 76.2182%;
  left: 30%;
  display: flex;
  width: 39.7396%;
  align-items: center;
  gap: 7.6%;
}

.official-links a {
  display: block;
  flex: 0 0 46.2%;
  outline: 0;
  transform-origin: center;
  transition: filter 160ms ease, transform 160ms ease;
}

.official-links img {
  width: 100%;
  height: auto;
}

.official-links a:hover,
.official-links a:focus-visible {
  filter: brightness(1.16) saturate(1.08);
  transform: scale(1.04);
}

.official-links a:focus-visible,
.header-x-link:focus-visible,
.language-button:focus-visible,
.language-option:focus-visible,
.sticky-footer:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 4px;
}

.copyright {
  position: absolute;
  z-index: 2;
  top: 85.15%;
  left: 50%;
  width: 80%;
  margin: 0;
  color: var(--white);
  font-size: clamp(10px, 0.7292vw, 14px);
  font-weight: 700;
  line-height: 1.28;
  text-align: center;
  text-shadow: 0 1px 3px rgb(0 0 0 / 75%);
  transform: translateX(-50%);
}

.copyright span {
  display: block;
}

.sticky-footer {
  position: fixed;
  z-index: 50;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  width: 100%;
  height: var(--footer-pc-height);
  align-items: stretch;
  overflow: hidden;
  background: #000;
  transition: filter 160ms ease;
}

.sticky-footer::before,
.sticky-footer::after {
  content: "";
  flex: 1 1 0;
  min-width: 0;
  background: url("./assets/common/img_footer_side.png") center / 100% 100% no-repeat;
}

.sticky-footer:hover,
.sticky-footer:focus-visible {
  filter: brightness(1.2);
}

.sticky-footer picture {
  display: flex;
  flex: 0 1 1920px;
  width: 1920px;
  max-width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.sticky-footer img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

@media (max-width: 1100px) and (min-width: 769px) {
  .language-option {
    font-size: 13px;
  }
}

@media (max-width: 768px), (orientation: portrait) and (max-width: 1024px) {
  .hero {
    aspect-ratio: 1024 / 2448;
    background-image: url("./assets/common/main_sp.png");
  }

  .site-header {
    height: 4.9837%;
  }

  .header-brand {
    top: 6.56%;
    left: 1.2695%;
    width: 26.9531%;
  }

  .header-actions {
    top: 16.39%;
    right: 2.6367%;
    gap: 3.9063vw;
  }

  .header-x-link {
    width: 6.6406vw;
  }

  .language-switcher {
    width: 25.4883vw;
  }

  .language-button {
    height: 8.2031vw;
    gap: 0.6836vw;
    border-width: clamp(2px, 0.293vw, 3px);
    border-radius: clamp(7px, 0.9766vw, 10px);
  }

  .language-label {
    width: 13.8672vw;
  }

  .language-caret {
    border-top-width: 2.0508vw;
    border-right-width: 1.8555vw;
    border-left-width: 1.8555vw;
  }

  .language-menu {
    top: calc(100% + 0.9766vw);
    border-radius: 7px;
  }

  .language-option {
    min-height: 8.3984vw;
    font-size: clamp(15px, 3.125vw, 32px);
  }

  .title-info {
    top: 53.3497%;
    left: 6.9336%;
    width: 86.1328%;
  }

  .official-links {
    top: 86.1111%;
    left: 14.0625%;
    width: 72.8516%;
    gap: 7.5067%;
  }

  .official-links a {
    flex-basis: 46.2466%;
  }

  .copyright {
    top: 92.2386%;
    width: 94%;
    color: #0b0b0b;
    font-size: clamp(7px, 1.7578vw, 18px);
    line-height: 1.25;
    text-shadow: none;
  }

  .sticky-footer {
    height: calc(var(--footer-sp-height) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }
}