/* ----- リセットを最小限に ----- */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
  color: #e5e7eb;                 /* text-slate-200 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color-scheme: dark light;
}

/* ----- 中央配置コンテナ ----- */
.teaser {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  gap: 1.25rem;
  padding: 6vh 4vw;
  opacity: 0;
  transform: translateY(6px);
  animation: fadeIn 700ms cubic-bezier(.2,.7,.2,1) 60ms forwards;
}

/* ----- ロゴ画像 ----- */
.logo {
  display: block;
  width: min(72vw, 560px); /* 画面に応じて縮小、最大560px */
  height: auto;
  image-rendering: -webkit-optimize-contrast;
}

/* ----- サブコピー（必要なら） ----- */
.tagline {
  margin: 0;
  font-size: clamp(14px, 1.8vw, 18px);
  letter-spacing: .08em;
  opacity: .85;
}

/* ----- モーション軽減に配慮 ----- */
@media (prefers-reduced-motion: reduce) {
  .teaser { animation: none; opacity: 1; transform: none; }
}

/* ----- ライトモードにも馴染む色 ----- */
@media (prefers-color-scheme: light) {
  body {
    color: #0f172a;
  }
  .tagline { opacity: .7; }
}

/* ----- スモール端末での余白最適化 ----- */
@media (max-width: 360px) {
  .teaser { padding: 5vh 3vw; }
}

/* ----- キーフレーム ----- */
@keyframes fadeIn {
  to { opacity: 1; transform: none; }
}