:root{
  --bg:#000;         /* 背景（黒） */
  --fg:#0F9403;      /* その他文字・ボーダー・ボタン */
  --phrase:#58E1F3;  /* “COMING SOON”等の文字色 */
  --maxw:960px;
  --nav-h:68px;
  --font-main: system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans JP", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

html, body { height: 100%; }
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--font-main);
}

/* ── ロゴだけのヘッダー ───────────────── */
.logo-nav{
  position: fixed; inset: 0 0 auto 0; height: var(--nav-h);
  display:flex; align-items:center; justify-content:center;
  backdrop-filter: blur(4px);
  background: rgba(19, 19, 19, 0.8); /* 濃いグレーに変更 */
  z-index: 1000;
  border-bottom: 1px solid rgba(15,148,3,0.25);
}
.logo-link{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; }
.logo-img{
  height: 30px; width:auto; display:block; filter: drop-shadow(0 0 0 transparent);
  transition: filter .18s ease, transform .18s ease; /* ホバー効果のトランジション */
}
.logo-img:hover{
  filter: brightness(1.22); transform: scale(1.015); /* indexページと同じホバー効果 */
}
.logo-text{ color: var(--fg); font-weight:700; letter-spacing:.06em; display:none; }
/* 画像が読み込めない時のフォールバック表示 */
.logo-img:not([src]), .logo-img[src=""] { display:none; }
.logo-img:not([src]) + .logo-text,
.logo-img[src=""] + .logo-text{ display:inline; }

/* ── メイン ─────────────────────────── */
.wrap{
  width: min(92vw, var(--maxw));
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100svh; /* iOSのツールバー考慮 */
  padding: calc(var(--nav-h) + 40px) 20px 40px; /* 上下の余白を確保 */
  box-sizing: border-box;
  position: relative;
}

/* テキスト部分をグループ化 */
.text-section{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tag{
  letter-spacing:.08em; font-size:.9rem; color:var(--fg); margin-bottom:16px;
}

/* headlineとcaretをグループ化 */
.headline-wrapper{
  display: block;
  position: relative;
  width: 100%;
  text-align: center; /* 常に中央配置を維持 */
}

.headline{
  font-family: var(--font-mono);
  font-size: clamp(28px, 8vw, 72px);
  letter-spacing: .15em;
  line-height: 1.15;
  user-select: none;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--phrase); /* #58E1F3 */
  display: inline-block; /* caretと同一行にするためinline-blockを維持 */
  text-align: center; /* テキストも中央揃え */
  min-width: 0; /* 幅が変動しても中央配置を維持 */
}
.headline .d{ opacity: .9; }

.caret{
  display:inline-block; width:0.6ch; margin-left:2px;
  animation: blink 1.1s steps(1) infinite;
  border-bottom: 2px solid var(--phrase);
  transform: translateY(.22em);
  vertical-align: baseline; /* headlineと揃える */
}
@keyframes blink { 50% { opacity:0; } }

/* フェード(単語切替ごと) */
.fade-enter{ opacity:0; transform: translateY(6px); }
.fade-enter-active{ transition: opacity .45s ease, transform .45s ease; opacity:1; transform:none; }

/* Reduce Motion */
@media (prefers-reduced-motion: reduce){
  .headline{ transition:none !important; }
}

/* Backボタン：hero__buttonと同じスタイル、テキストから独立して固定位置 */
.back-link{
  margin-top: 100px; /* テキスト部分から100px下に固定 */
  display: flex;
  justify-content: center;
  position: relative; /* テキストの行数に関係なく位置を固定 */
}
.back-link a{
  color: #0F9403;
  border: 1px solid #0F9403;
  border-radius: 30px;
  padding: 12px 32px;
  display: inline-block;
  font-size: 18px;
  background: transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, transform 0.2s ease;
}
.back-link a:link,
.back-link a:visited{
  color: #0F9403;
  text-decoration: none;
}
.back-link a:hover{
  background: #0F9403 !important;
  color: #fff !important;
  transform: translateY(-2px);
}
.back-link a:focus-visible{
  outline: 2px solid #0F9403;
  outline-offset: 3px;
}

/* スクリーンリーダーのみ */
.sr-only{
  position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;
}