/* ==========================================================
   GOLMACHI FEST / トップページ再構成（2026-10-17、案1）
   style.css の変数と共通部品（ヘッダー・ボタン・フッター・コースマップ）を前提にする。
   順序: ヒーロー → 出会いやすい理由 → 次の開催 → 当日の流れ → 9ホール → FAQ → 最終CTA → 法人
   設計メモは docs/第1回_調布/12_トップページの伝わり方と再構成案.md
   ========================================================== */

.hero-v2 { order: 1; }
.shikake { order: 2; }
.event-section { order: 3; }
.flow { order: 4; }
.attractions { order: 5; }
.faq-section { order: 6; }
.final-cta { order: 7; }
.partner-section { order: 8; }

.top-shell { width: min(100%, 720px); margin-inline: auto; padding-inline: var(--pad); }
.top-head { display: grid; gap: 10px; margin-bottom: 24px; }
.top-head .section-title { font-size: clamp(24px, 6.4vw, 40px); }
.top-head .section-title em { color: var(--pink); }
.top-head .eyebrow { margin: 0; }
.top-head p { margin: 0; color: #c6cedb; font-size: 14px; line-height: 1.9; }
.section-light .top-head p { color: #4b5366; }

/* ---------- 1. ヒーロー: 分かる ---------- */
.hero-v2 { position: relative; min-height: 100svh; display: grid; align-items: end; overflow: hidden; isolation: isolate; background: var(--ink); }
.hero-v2 .hero-bg { position: absolute; inset: 0; z-index: -1; }
.hero-v2 .frame { position: absolute; inset: -8%; background: url("../images/course-map.jpg") var(--pos) / cover no-repeat; filter: saturate(.6) brightness(.6) blur(.4px); opacity: 0; transform: scale(1.04); animation: hero-frame 24s ease-in-out infinite; animation-delay: var(--t); }
.hero-v2 .shade { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(8, 9, 20, 0.5), rgba(8, 9, 20, 0.18) 30%, rgba(8, 9, 20, 0.8) 72%, var(--ink)); }
.hero-v2 .glow { position: absolute; inset: 0; background: radial-gradient(circle at 78% 18%, rgba(119, 231, 255, 0.16), transparent 34%), radial-gradient(circle at 12% 70%, rgba(255, 90, 165, 0.14), transparent 30%); }
.hero-v2 .lamp { display: none; position: absolute; left: var(--x); top: var(--y); width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 14px 4px rgba(255, 90, 165, 0.55); opacity: 0; animation: hero-lamp 5.2s ease-in-out infinite; animation-delay: var(--d); }
.hero-v2 .lamp.c { background: var(--cyan); box-shadow: 0 0 14px 4px rgba(119, 231, 255, 0.5); }
@keyframes hero-frame { 0% { opacity: 0; transform: scale(1.04); } 6% { opacity: 1; } 27% { opacity: 1; transform: scale(1.14); } 33% { opacity: 0; transform: scale(1.16); } 100% { opacity: 0; } }
@keyframes hero-lamp { 0%, 100% { opacity: 0; } 20%, 60% { opacity: .95; } }

.hero-v2 .hero-inner { padding: 100px var(--pad) 40px; }
.hero-kicker-v2 { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 7px 12px; border: 1px solid rgba(119, 231, 255, 0.5); color: var(--cyan); font-size: 11px; font-weight: 800; letter-spacing: .06em; }
.hero-kicker-v2::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.hero-v2 h1 { margin: 18px 0 0; font-family: var(--body); font-size: clamp(28px, 7.6vw, 42px); font-weight: 900; letter-spacing: -.045em; line-height: 1.22; text-transform: none; text-shadow: 0 2px 24px rgba(8, 9, 20, 0.6); }
.hero-v2 h1 span { display: block; }
.hero-v2 h1 em { font-style: normal; color: var(--pink); }
.hero-brand-line { margin: 14px 0 0; color: var(--cyan); font-size: 15px; font-weight: 800; letter-spacing: .01em; }
.hero-story { margin: 18px 0 0; display: grid; gap: 6px; color: #d7dde8; font-size: 14px; line-height: 1.85; }
.hero-story p { margin: 0; }
.hero-story b { color: var(--white); font-weight: 800; }
.hero-cta { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--line); display: grid; gap: 8px; }
.hero-cta .button { justify-content: space-between; font-size: 14px; letter-spacing: .04em; }
.hero-cta .button small, .hero-detail-link small { display: block; margin-bottom: 3px; font-family: var(--font-geist-mono), monospace; font-size: 8px; font-weight: 800; letter-spacing: .16em; opacity: .75; }
.hero-detail-link { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 4px; color: var(--white); font-size: 13px; font-weight: 800; text-decoration: none; }
.hero-detail-link small { color: var(--cyan); opacity: 1; }
.hero-scroll { margin: 22px 0 0; display: flex; align-items: center; gap: 10px; color: var(--muted); font-family: var(--font-geist-mono), monospace; font-size: 9px; font-weight: 800; letter-spacing: .18em; }
.hero-scroll i { width: 1px; height: 26px; background: linear-gradient(var(--cyan), transparent); animation: hero-hint 1.8s ease-in-out infinite; }
@keyframes hero-hint { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ---------- 2. 出会いやすいシカケ: 欲しくなる（2026-10-19、docs/17。タグ → ハッシュタグ → ※注 → 写真＋吹き出し） ---------- */
.shikake { position: relative; padding: 52px 0 0; background: var(--ink); overflow: hidden; }
.shikake .top-head .section-title { font-size: clamp(26px, 7vw, 40px); line-height: 1.25; }
.sk { padding: 34px 0 10px; }
.sk + .sk { border-top: 1px dashed var(--line); }
.sk-tag { margin: 0; display: inline-block; padding: 6px 10px; background: rgba(255,255,255,.06); border-left: 3px solid var(--pink); color: var(--white); font-size: 14px; font-weight: 800; line-height: 1.5; }
.sk-tag em { font-style: normal; color: var(--pink); }
.sk-hash { margin: 14px 0 0; display: grid; gap: 4px; color: var(--cyan); font-size: clamp(22px, 6.6vw, 30px); font-weight: 900; letter-spacing: -.03em; line-height: 1.3; text-shadow: 0 0 18px rgba(119,231,255,.35); }
.sk-hash span { display: block; }
.sk-note { margin: 12px 0 0; color: var(--muted); font-size: 11px; line-height: 1.7; }
.sk-fig { position: relative; margin: 18px 0 14px; }
.sk-fig img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--line); filter: saturate(.92); }
.sk-fig::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(8,9,20,.55), transparent 45%); }
.sk-photo-note { margin: 16px 0 0; text-align: center; color: var(--muted); font-size: 10px; }
.sk-fig svg { display: block; width: 100%; height: auto; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sk-fig svg .w { stroke: #d7dde8; } .sk-fig svg .c { stroke: var(--cyan); } .sk-fig svg .p { stroke: var(--pink); }
.sk-fig svg .pf { fill: var(--pink); stroke: none; } .sk-fig svg .cf { fill: var(--cyan); stroke: none; }
.sk-fig figcaption { position: absolute; z-index: 1; right: -6px; bottom: -14px; max-width: 58%; padding: 12px 16px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: linear-gradient(135deg, rgba(255,90,165,.85), rgba(155,123,255,.85)); color: var(--white); font-size: 12px; font-weight: 800; line-height: 1.6; text-align: center; }
.sk.r2 .sk-fig figcaption { right: auto; left: -6px; }
.sk-close { margin: 40px 0 0; display: grid; gap: 6px; justify-items: center; }
.sk-close span { display: inline-block; padding: 8px 14px; background: linear-gradient(90deg, var(--cyan), var(--pink)); color: var(--ink); font-size: 14px; font-weight: 900; transform: rotate(-2deg); }
.skyline { display: block; width: 100%; height: 72px; margin-top: 30px; fill: none; stroke: rgba(255,255,255,.3); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* 開催カードのバッジ（初開催／SOLD OUT／開催終了。2 回目以降に備えた型） */
.event-badges { display: flex; gap: 6px; align-items: center; }
.event-badge { padding: 8px 10px; border: 1px solid var(--ink); color: var(--ink); font-family: var(--font-geist-mono), monospace; font-size: 8px; font-weight: 800; letter-spacing: .08em; white-space: nowrap; }
.event-badge-first { border-color: var(--pink-dark); color: var(--pink-dark); }
.event-badge-soldout { border-color: var(--pink); background: var(--pink); color: var(--ink); }
.event-card-ended { opacity: .72; }
.event-card-ended .event-status { color: #c6cedb; }
.event-card-ended .event-badge-ended { border-color: #969faf; color: #5f687a; }
/* 第 1 回の体制（信頼情報。docs/16 §3-1 H） */
.event-facts-strip { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 1px; background: #c9d1de; border: 1px solid #c9d1de; }
.event-facts-strip li { display: grid; gap: 3px; padding: 12px 14px; background: #fff; color: var(--ink); }
.event-facts-strip small { color: #5f687a; font-family: var(--font-geist-mono), monospace; font-size: 8px; font-weight: 800; letter-spacing: .14em; }
.event-facts-strip b { font-size: 14px; font-weight: 900; letter-spacing: -.01em; }
.event-facts-strip span { color: #4b5366; font-size: 11px; font-weight: 700; line-height: 1.6; }
.sp-br { display: inline; }

/* ---------- 3. 次の開催（style.css の開催一覧をそのまま使う） ---------- */
.event-section .section-shell { width: min(100%, 720px); }
.event-section .events-list { grid-template-columns: 1fr; }

/* ---------- 4. 当日の流れ: 1行ずつの帯（2026-10-19、docs/17） ---------- */
.flow { padding: 56px 0 60px; border-top: 1px solid var(--line); background: var(--ink-soft); }
.flow .top-head { margin-bottom: 18px; }
.flow-strip { margin: 0; padding: 0; list-style: none; display: grid; }
.flow-strip li { display: grid; grid-template-columns: 54px 1fr; gap: 4px 12px; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--line); }
.flow-strip li:last-child { border-bottom: 1px solid var(--line); }
.flow-strip time { grid-row: span 2; color: var(--cyan); font-family: var(--font-geist-mono), monospace; font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.flow-strip li.late time { color: var(--pink); }
.flow-strip b { font-size: 16px; font-weight: 900; }
.flow-strip span { color: var(--muted); font-size: 12px; }
.flow .ev-text-link { margin-top: 30px; }

/* ---------- 5. 9ホール（操作できるマップはここだけ） ---------- */
.attractions { padding-top: 72px; }
.attractions-intro { margin-bottom: 36px; }
.hole-list { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 1px; border: 1px solid var(--line); background: var(--line); }
.hole-list li { background: var(--ink); }
.hole-list button { width: 100%; display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: center; padding: 12px; border: 0; background: transparent; color: var(--white); font-family: inherit; text-align: left; cursor: pointer; transition: background-color 160ms ease; }
.hole-list button:hover, .hole-list button:focus-visible { background: rgba(255, 255, 255, 0.05); outline: none; }
.hole-list .no { color: var(--muted); font-family: var(--font-geist-mono), monospace; font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.hole-list .on .no { color: var(--pink); }
.hole-list b { display: block; font-size: 14px; font-weight: 900; letter-spacing: -.01em; }
.hole-list small { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }
.hole-list .tag { padding: 4px 6px; border: 1px solid rgba(255, 90, 165, 0.5); color: var(--pink); font-family: var(--font-geist-mono), monospace; font-size: 8px; font-weight: 800; letter-spacing: .14em; }
.hole-list .off { opacity: .6; }
.hole-list .off .tag { display: none; }
.hole-list-wrap { padding-top: 14px; }

/* ---------- 6. FAQ・法人 ---------- */
.faq-section { padding-top: 72px; }

/* ---------- 動きを減らす設定 ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-v2 .frame, .hero-v2 .lamp, .hero-scroll i { animation: none !important; }
  .hero-v2 .frame { opacity: 0; }
  .hero-v2 .frame:first-child { opacity: 1; transform: none; }
  .hero-v2 .lamp { opacity: .8; }
}

/* ---------- タブレット以上 ---------- */
@media (min-width: 760px) {
  .hero-v2 .hero-inner { padding-top: 130px; padding-bottom: 64px; }
  .hero-v2 h1 { font-size: clamp(40px, 5.2vw, 64px); }
  .hero-story { font-size: 16px; }
  .hero-v2 .lamp { display: block; }
  .hero-cta { grid-template-columns: minmax(300px, 380px) auto; align-items: center; gap: 8px 28px; }
  /* FAQ: 見出し列を広げ、「よくある質問」を1行に収める */
  .faq-section .faq-layout { grid-template-columns: minmax(300px, .8fr) 1.2fr; gap: clamp(40px, 6vw, 96px); }
  .faq-heading .section-title { font-size: clamp(26px, 3.4vw, 44px); white-space: nowrap; }
  .hero-scroll { margin-top: 30px; }
  .shikake, .flow, .faq-section { padding-top: 80px; padding-bottom: 88px; }
  .shikake { padding-bottom: 0; }
  .sp-br { display: none; }
  .event-facts-strip { grid-template-columns: repeat(2, 1fr); }
  .sk { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 40px; align-items: center; padding: 44px 0 20px; }
  .sk-tag, .sk-hash, .sk-note { grid-column: 1; }
  .sk-fig { grid-column: 2; grid-row: 1 / span 3; margin: 0; }
  .sk.r2 .sk-tag, .sk.r2 .sk-hash, .sk.r2 .sk-note { grid-column: 2; }
  .sk.r2 .sk-fig { grid-column: 1; }
  .sk-hash { font-size: clamp(26px, 3vw, 34px); }
  .flow-strip { grid-template-columns: repeat(5, 1fr); gap: 10px; }
  .flow-strip li { grid-template-columns: 1fr; padding: 14px; border: 1px solid var(--line); }
  .flow-strip time { grid-row: auto; }
      
  .hole-list { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1080px) {
  .top-shell { width: min(100%, 1040px); }
  .hero-v2 .hero-inner { width: min(100%, 1040px); margin-inline: auto; }
  .hero-v2 h1 { font-size: clamp(52px, 5vw, 72px); }
  .flow .top-shell, .faq-section .faq-layout { width: min(100%, 1040px); }
}