:root {
  --background: #fff;
  --foreground: #111;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN",
    "Hiragino Mincho Pro", "Noto Serif JP", serif;
}

.coming-soon {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  text-align: center;
}

.message,
.company-name {
  position: absolute;
  left: 50%;
  width: calc(100% - 40px);
  margin: 0;
  font-weight: 400;
  transform: translate(-50%, -50%);
}

.message {
  top: 42.8%;
  font-size: clamp(1.25rem, 2.55vw, 1.75rem);
  line-height: 1.65;
  letter-spacing: 0.025em;
}

.company-name {
  top: 74.8%;
  font-size: clamp(1rem, 2.05vw, 1.375rem);
  line-height: 1.6;
}

@media (max-width: 600px) {
  .message {
    top: 41%;
    font-size: clamp(1.05rem, 5.3vw, 1.35rem);
    line-height: 1.75;
    letter-spacing: 0;
  }

  .company-name {
    top: 72%;
    font-size: clamp(0.9rem, 4.3vw, 1.1rem);
  }
}

@media (max-height: 520px) {
  .message {
    top: 38%;
  }

  .company-name {
    top: 78%;
  }
}