/* ページ固有のスタイル（デザインの <helmet> 内 <style> と、エディタ専用部品の置き換え） */
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--color-surface); -webkit-font-smoothing: antialiased; }
a { color: var(--color-accent-700); }
a:hover { color: var(--color-accent-800); }
summary::-webkit-details-marker { display: none; }
details[open] > summary > svg { transform: rotate(180deg); }
input[type="checkbox"] { accent-color: var(--color-accent-600); }

/* hidden 属性はインラインの display 指定より優先する */
[hidden] { display: none !important; }

/* CTAボタンのホバー／押下 */
.cta:hover { filter: brightness(1.06); }
.cta:active { filter: brightness(0.94); }

/* 画像枠：images/ に画像があれば表示、なければプレースホルダー */
.slot {
  position: absolute; inset: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  padding: 8px; text-align: center;
  background: var(--color-neutral-200);
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
  font-size: 12px; line-height: 1.6;
}
.slot::before { content: attr(data-label); }
.slot img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }

/* お悩みのイラスト：透過PNGをそのまま全体表示 */
.slot-illust { background: none; }
.slot-illust img { object-fit: contain; }
.slot:has(img)::before { content: none; }

/* ── メインビジュアル ───────────────────────── */
.hero { position: relative; aspect-ratio: 3 / 4; overflow: hidden; color: oklch(0.995 0 0); background: var(--color-neutral-800); }
.hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.hero-shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, oklch(0.16 0.01 60 / 0.78) 0%, oklch(0.16 0.01 60 / 0.35) 34%, transparent 50%),
    linear-gradient(0deg, oklch(0.14 0.01 60 / 0.85) 0%, oklch(0.14 0.01 60 / 0.45) 30%, transparent 48%);
}
.hero-top, .hero-bottom { position: absolute; left: 0; right: 0; padding: 0 6%; text-shadow: 0 1px 10px oklch(0.1 0 0 / 0.45); }
.hero-top { top: 6%; display: flex; flex-direction: column; gap: 12px; }
.hero-bottom { bottom: 5.5%; display: flex; flex-direction: column; gap: 10px; }
.hero-lead {
  margin: 0; display: flex; align-items: center; gap: 12px;
  font-family: 'Shippori Mincho', serif; font-size: clamp(11px, 3vw, 15px); letter-spacing: 0.08em; white-space: nowrap;
}
.hero-lead::before, .hero-lead::after { content: ''; flex: 1; height: 1px; background: currentColor; opacity: 0.7; }
.hero-title {
  margin: 0; font-family: 'Shippori Mincho', serif; font-weight: 600;
  font-size: clamp(28px, 8.4vw, 46px); line-height: 1.32; letter-spacing: 0.06em;
}
.hero-amp { font-family: 'Cormorant Garamond', serif; font-weight: 500; margin-left: 0.08em; }
.hero-date {
  margin: 0; padding-top: 14px; border-top: 1px solid oklch(0.995 0 0 / 0.45);
  font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: clamp(32px, 9vw, 50px); line-height: 1;
  font-feature-settings: 'lnum' 1; letter-spacing: 0.01em;
  background: linear-gradient(180deg, var(--color-accent-200), var(--color-accent-400));
  -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none;
  filter: drop-shadow(0 1px 6px oklch(0.1 0 0 / 0.5));
}
.hero-date small { font-family: 'Shippori Mincho', serif; font-size: 0.4em; margin: 0 0.15em; }
.hero-tilde { margin: 0 0.18em; font-size: 0.8em; }
.hero-place {
  margin: 0; display: flex; align-items: center; gap: 6px;
  font-family: 'Shippori Mincho', serif; font-weight: 600; font-size: clamp(17px, 4.8vw, 24px); letter-spacing: 0.1em;
}
.hero-place svg { flex: none; width: 0.9em; height: 0.9em; }
.hero-gift {
  margin: 6px 0 0; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: stretch;
  border: 1px solid var(--color-accent-400); border-radius: var(--radius-md); overflow: hidden;
  background: oklch(0.18 0.01 60 / 0.72); text-shadow: none;
}
.hero-gift-label {
  display: flex; align-items: center; padding: 8px clamp(10px, 3vw, 16px);
  background: linear-gradient(135deg, var(--color-accent-300), var(--color-accent-500));
  color: oklch(0.2 0.02 60); font-family: 'Shippori Mincho', serif; font-weight: 600; font-size: clamp(13px, 3.6vw, 17px); letter-spacing: 0.06em; white-space: nowrap;
}
.hero-gift-body {
  display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 0 10px; padding: 6px 10px;
  font-family: 'Shippori Mincho', serif; font-size: clamp(12px, 3.3vw, 16px);
}
.hero-gift-body strong {
  font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: clamp(24px, 6.6vw, 34px); line-height: 1.1;
  color: var(--color-accent-300); font-feature-settings: 'lnum' 1;
}
.hero-gift-body strong small { font-family: 'Shippori Mincho', serif; font-size: 0.5em; margin-left: 2px; }

/* Netlify が公開時に自動で差し込む「Powered by Netlify」バッジを非表示（固定予約ボタンと重なるため） */
#nl-badge-frame, #nl-hud-frame { display: none !important; }