/* ============================================
   HARMONY SHIBUYA — index.html 専用スタイル
   年齢確認ページ
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400&family=Noto+Serif+JP:wght@200;300;400&family=Bodoni+Moda:ital,wght@0,400;1,400&display=swap');

/* ── Variables ── */
:root {
  --gold:       #C8A96E;
  --gold-dim:   #8B7355;
  --cream:      #fdfbf8;
  --text:       #3a3530;
  --text-light: #7a7268;
  --serif:      'Cormorant Garamond', 'Noto Serif JP', Georgia, serif;
  --bodoni:     'Bodoni Moda', 'Cormorant Garamond', Georgia, serif;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── ページ全体 ── */
body {
  font-family: var(--serif);
  background: var(--cream);
  color: var(--text);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* ── 上部装飾ライン ── */
.top-line {
  width: 100%;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
}

/* ── メイン ── */
main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(32px, 8vw, 80px) clamp(24px, 6vw, 64px);
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
}

/* ── ロゴ ── */
.logo {
  font-size: clamp(11px, 2vw, 13px);
  letter-spacing: 0.5em;
  color: var(--text-light);
  margin-bottom: clamp(32px, 6vw, 56px);
  font-weight: 300;
  font-family: var(--serif);
  line-height: 2;
}
.logo strong {
  display: block;
  font-family: var(--bodoni);
  font-size: clamp(32px, 7vw, 52px);
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.4em;
  color: var(--text);
  line-height: 1.1;
  margin-bottom: 6px;
}

/* ── 画像枠 ── */
.visual {
  width: 100%;
  max-width: 480px;
  margin: 0 auto clamp(28px, 5vw, 48px);
  position: relative;
  overflow: hidden;
}
.visual img {
  width: 100%;
  height: auto;
  display: block;
  opacity: 0.88;
  transition: transform 1.2s ease, opacity 0.6s ease;
}
.visual:hover img {
  transform: scale(1.03);
  opacity: 0.95;
}
/* 画像がない場合のプレースホルダー */
.visual-placeholder {
  width: 100%;
  aspect-ratio: 3 / 4;
  background: linear-gradient(160deg, #ede8e0 0%, #d8cfc2 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.visual-placeholder span {
  font-family: var(--serif);
  font-size: clamp(48px, 12vw, 96px);
  font-style: italic;
  color: rgba(139, 115, 85, 0.25);
  font-weight: 300;
  line-height: 1;
}
.visual-placeholder small {
  font-size: 9px;
  letter-spacing: 0.4em;
  color: rgba(139, 115, 85, 0.5);
}

/* ── キャッチコピー ── */
.catch {
  font-size: clamp(13px, 2.2vw, 16px);
  line-height: 2.2;
  color: var(--text-light);
  margin-bottom: clamp(36px, 6vw, 52px);
  font-weight: 300;
  letter-spacing: 0.08em;
}
.catch em {
  font-style: italic;
  color: var(--gold-dim);
}

/* ── ゴールド細線 ── */
.divider {
  width: clamp(40px, 8vw, 64px);
  height: 1px;
  background: var(--gold);
  margin: 0 auto clamp(28px, 5vw, 44px);
}

/* ── 年齢確認ボタン ── */
.age-buttons {
  display: flex;
  gap: clamp(20px, 5vw, 48px);
  justify-content: center;
  align-items: flex-end;
}
.age-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: var(--text-light);
  transition: color 0.3s;
  cursor: pointer;
  background: none;
  border: none;
  font-family: var(--serif);
}
.age-btn:hover { color: var(--text); }

.age-btn .num {
  font-size: clamp(28px, 6vw, 42px);
  font-weight: 300;
  font-style: italic;
  line-height: 1;
  letter-spacing: 0.05em;
  transition: color 0.3s;
}
.age-btn .label {
  font-size: clamp(9px, 1.5vw, 11px);
  letter-spacing: 0.35em;
  font-style: normal;
  font-weight: 300;
}
.age-btn .underline {
  width: 100%;
  height: 1px;
  background: currentColor;
  opacity: 0.3;
  transition: opacity 0.3s, background 0.3s;
}
.age-btn:hover .underline { opacity: 1; }
.age-btn.over:hover .num         { color: var(--gold-dim); }
.age-btn.over:hover .underline   { background: var(--gold-dim); opacity: 1; }

/* ── 注意書き ── */
.note {
  margin-top: clamp(28px, 5vw, 44px);
  font-size: clamp(9px, 1.5vw, 11px);
  letter-spacing: 0.2em;
  color: #b0a898;
  line-height: 2;
  font-weight: 300;
}

/* ── フッター ── */
footer {
  width: 100%;
  padding: clamp(16px, 3vw, 24px) clamp(24px, 5vw, 48px);
  text-align: center;
  font-size: clamp(9px, 1.5vw, 10px);
  letter-spacing: 0.25em;
  color: #c0b8ae;
  border-top: 1px solid #ece8e2;
  font-weight: 300;
}

/* ── フェードイン ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
main > * { animation: fadeUp 0.9s ease both; }
main > *:nth-child(1) { animation-delay: 0.10s; }
main > *:nth-child(2) { animation-delay: 0.35s; }
main > *:nth-child(3) { animation-delay: 0.55s; }
main > *:nth-child(4) { animation-delay: 0.70s; }
main > *:nth-child(5) { animation-delay: 0.85s; }
main > *:nth-child(6) { animation-delay: 1.00s; }

/* ── スマホ調整 ── */
@media (max-width: 480px) {
  .age-buttons { gap: 32px; }
}