:root {
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-width: 320px;
  min-height: 100%;
  margin: 0;
  background: #000;
}

body.coming-soon-page {
  overflow: hidden;
  color: #d9c283;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
}

.section-coming-soon {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: #000;
}

.section-coming-soon img {
  display: block;
  max-width: 100%;
}

.section-coming-soon .coming-soon__background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center center;
}

.coming-soon__content {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(100vw, 177.7778svh);
  aspect-ratio: 16 / 9;
  transform: translate(-50%, -50%);
}

.coming-soon__tagline,
.coming-soon__logo,
.coming-soon__release {
  position: absolute;
  left: 50%;
  margin: 0;
  transform: translateX(-50%);
}

.coming-soon__tagline {
  top: 18.9%;
  width: 5%;
  height: auto;
}

.coming-soon__logo {
  top: 37.8%;
  width: 10.11%;
  height: auto;
}

.coming-soon__release {
  top: 73.35%;
  width: 10.35%;
  display: grid;
  justify-items: center;
  gap: 0;
}

.coming-soon__release-ja {
  width: 100%;
  height: auto;
}

.coming-soon__release-en {
  width: 55.28%;
  height: auto;
  margin-top: -3px;
}

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

@media (min-width: 768px) and (max-width: 1180px) {
  .coming-soon__content {
    width: min(1280px, 177.7778svh);
  }
}

@media (max-width: 767px) {
  .coming-soon__background {
    object-position: 50.5% center;
  }

  .coming-soon__content {
    width: min(100vw, 50.6494svh);
    aspect-ratio: 390 / 770;
  }

  .coming-soon__tagline {
    top: 19.7%;
    width: 18.46%;
  }

  .coming-soon__logo {
    top: 39.8%;
    width: 34.36%;
  }

  .coming-soon__release {
    top: 73.5%;
    width: 47.18%;
  }

  .coming-soon__release-ja {
    width: 100%;
  }

  .coming-soon__release-en {
    width: 56.52%;
    margin-top: -2px;
  }
}