html {
  font-size: 100%;
}

body {
  overflow: hidden;
  font-family: "Noto Sans JP", sans-serif;
  color: #0b2345;
  background:
    linear-gradient(
      135deg,
      #f3f6fa 0%,
      #e8eef6 50%,
      #f7f9fc 100%
    );
}

body::before,
body::after {
  content: "";

  position: fixed;

  z-index: 1;

  width: 120%;
  height: clamp(24px, 3vw, 36px);

  background:
    repeating-linear-gradient(
      -45deg,
      #f7c600 0 18px,
      #111827 18px 36px
    );

  opacity: 0.9;

  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.12);

  pointer-events: none;
}

/* 左上 */

body::before {
  top: clamp(96px, 9vw, 130px);
  left: -36%;

  transform:
    rotate(-45deg);
}

/* 右下 */

body::after {
  right: -36%;
  bottom: 72px;

  transform:
    rotate(-45deg);
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(11, 35, 69, 0.08);
}

.header__inner {
  width: min(100% - 32px, 1200px);
  height: clamp(68px, 7vw, 92px);
  margin-inline: auto;
  display: flex;
  align-items: center;
}

.header__logo {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 20px);
  color: inherit;
  text-decoration: none;
}

.header__logo img {
  width: clamp(48px, 5vw, 72px);
  height: auto;
  display: block;
}

.header__logo span {
  font-size: clamp(1rem, 2vw, 1.75rem);
  font-weight: 900;
  letter-spacing: 0.04em;
}

.coming-soon {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  min-height: 100dvh;
  padding:
    clamp(96px, 10vw, 140px)
    clamp(20px, 5vw, 48px)
    clamp(40px, 6vw, 64px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.coming-soon__inner {
  width: 100%;
  max-width: 1000px;
  text-align: center;
}

.coming-soon__sub {
  margin-bottom: clamp(10px, 1.5vw, 18px);
  color: #2d4d7a;
  font-size: clamp(0.7rem, 0.9vw, 0.9rem);
  font-weight: 700;
  letter-spacing: 0.28em;
}

.coming-soon__title {
  margin-bottom: clamp(10px, 1.8vw, 20px);
  font-size: clamp(1.9rem, 5.4vw, 5rem);
  line-height: 1.12;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.coming-soon__construction {
  margin-bottom: clamp(16px, 2.5vw, 28px);
  color: #7c93b5;
  font-size: clamp(0.7rem, 1vw, 0.9rem);
  font-weight: 700;
  letter-spacing: 0.28em;
}

.coming-soon__image {
  margin-bottom: clamp(16px, 3vw, 28px);
}

.coming-soon__image img {
  width: clamp(110px, 14vw, 190px);
  height: auto;
  display: block;
  margin-inline: auto;
  image-rendering: pixelated;
}

.coming-soon__text {
  color: #4b5563;
  font-size: clamp(0.85rem, 1.2vw, 1rem);
  line-height: 1.9;
}

@media screen and (max-width: 640px) {
  body {
    overflow: auto;
  }

  body::before {
    top: 92px;
  }

  body::after {
    bottom: 24px;
  }

  .header__inner {
    width: min(100% - 24px, 1200px);
    height: 72px;
  }

  .header__logo img {
    width: 48px;
  }

  .header__logo span {
    font-size: 1rem;
  }

  .coming-soon {
    padding:
      112px
      20px
      48px;
  }

  .coming-soon__text br {
    display: none;
  }
}