:root{
  --bg:#ffffff;         /* 背景（白） */
  --fg:#000000;         /* その他文字・ボーダー・ボタン（黒） */
  --phrase:#000000;     /* "COMING SOON"等の文字色（黒） */
  --maxw:960px;
  --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-section{
  display:flex; 
  align-items:center; 
  justify-content:center;
  margin-bottom: 60px;
}

.logo-link{ 
  display:inline-flex; 
  align-items:center; 
  gap:10px; 
  text-decoration:none; 
}

.logo-img{
  height: 60px; /* indexの32pxより少し大きく */
  width: auto; 
  display:block; 
  filter: drop-shadow(0 0 0 transparent);
  transition: filter .18s ease, transform .18s ease;
}

.logo-img:hover{
  filter: brightness(0.9); 
  transform: scale(1.05);
}

/* ── メイン ─────────────────────────── */
.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: 40px 20px;
  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); /* 黒 */
  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ボタン：テキストから独立して固定位置 */
.back-link{
  margin-top: 100px; /* テキスト部分から100px下に固定 */
  display: flex;
  justify-content: center;
  position: relative; /* テキストの行数に関係なく位置を固定 */
}
.back-link a{
  color: #000000;
  border: 1px solid #000000;
  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: #000000;
  text-decoration: none;
}
.back-link a:hover{
  background: #000000 !important;
  color: #ffffff !important;
  transform: translateY(-2px);
}
.back-link a:focus-visible{
  outline: 2px solid #000000;
  outline-offset: 3px;
}

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