:root { --ink:#173438; --paper:#f8f4ec; --white:#fff; --teal:#2c8786; --teal-soft:#e5f0ed; --coral:#df6c50; --coral-soft:#fae8e0; --gold:#bd7a2d; --gold-soft:#f5ead7; --line:#d8dfda; --muted:#657578; --shadow:0 20px 55px rgba(26,54,57,.12); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:"Hiragino Kaku Gothic ProN","Yu Gothic","Noto Sans JP",sans-serif; line-height:1.75; }
img { display:block; width:100%; }
a { color:inherit; }
button,input { font:inherit; }
:focus-visible { outline:3px solid #f1aa35; outline-offset:3px; }
.skip { position:fixed; z-index:100; left:12px; top:12px; padding:10px 15px; border-radius:8px; background:white; transform:translateY(-150%); }
.skip:focus { transform:translateY(0); }
.wrap { width:min(1080px,calc(100% - 36px)); margin-inline:auto; }
.eyebrow { margin:0 0 14px; font-size:11px; font-weight:800; letter-spacing:.22em; text-transform:uppercase; }
.eyebrow.dark { color:var(--teal); }
.eyebrow.coral { color:var(--coral); }
.eyebrow.gold { color:var(--gold); }
.hero { position:relative; min-height:720px; height:100svh; overflow:hidden; color:white; }
.hero > img { position:absolute; inset:0; height:100%; object-fit:cover; }
.hero__shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(8,35,39,.86),rgba(8,35,39,.3) 65%,rgba(8,35,39,.08)),linear-gradient(0deg,rgba(8,35,39,.7),transparent 45%); }
.hero__top { position:absolute; z-index:1; top:28px; left:max(6vw,24px); display:flex; align-items:center; gap:12px; font-size:10px; font-weight:700; letter-spacing:.13em; line-height:1.4; text-transform:uppercase; }
.mark { display:grid; place-items:center; width:40px; height:40px; border:1px solid rgba(255,255,255,.7); border-radius:50%; font:19px "Yu Mincho",serif; }
.hero__body { position:absolute; z-index:1; top:48%; left:max(7vw,24px); transform:translateY(-50%); max-width:850px; }
.hero h1 { margin:0; font:500 clamp(48px,7vw,88px)/1.22 "Yu Mincho","Hiragino Mincho ProN",serif; letter-spacing:-.05em; }
.hero__body > p:not(.eyebrow) { margin:28px 0; color:rgba(255,255,255,.84); font-size:17px; }
.primary { display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:0 25px; border-radius:100px; background:white; color:var(--ink); text-decoration:none; font-weight:800; }
.hero__note { position:absolute; z-index:1; right:25px; bottom:20px; margin:0; font-size:10px; color:rgba(255,255,255,.7); }
.intro { padding:110px 0 50px; text-align:center; }
.intro h2,.section-head h2 { margin:0; font:500 clamp(34px,5vw,54px)/1.3 "Yu Mincho","Hiragino Mincho ProN",serif; letter-spacing:-.035em; }
.intro > p:last-child { max-width:680px; margin:18px auto 0; color:var(--muted); }
.story-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; padding-bottom:110px; }
.story { position:relative; overflow:hidden; border-radius:25px; background:white; box-shadow:var(--shadow); }
.story.is-selected { box-shadow:0 0 0 3px var(--teal),var(--shadow); }
.story--fukuoka.is-selected { box-shadow:0 0 0 3px var(--coral),var(--shadow); }
.story--kitakyushu.is-selected { box-shadow:0 0 0 3px var(--gold),var(--shadow); }
.story__select { position:absolute; z-index:3; top:18px; right:18px; cursor:pointer; }
.story__select input { position:absolute; opacity:0; }
.story__check { display:inline-flex; align-items:center; min-height:42px; padding:0 15px; border:1px solid rgba(255,255,255,.7); border-radius:100px; background:rgba(13,43,47,.65); color:white; font-size:12px; font-weight:800; backdrop-filter:blur(10px); }
.story__select input:checked + .story__check { background:var(--teal); border-color:var(--teal); }
.story__select input:focus-visible + .story__check,.stay input:focus-visible + span { outline:3px solid #f1aa35; outline-offset:3px; }
.story--fukuoka .story__select input:checked + .story__check { background:var(--coral); border-color:var(--coral); }
.story--kitakyushu .story__select input:checked + .story__check { background:var(--gold); border-color:var(--gold); }
.story__photo { position:relative; height:310px; }
.story__photo img { height:100%; object-fit:cover; }
.story__photo > span { position:absolute; left:20px; bottom:16px; padding:5px 10px; border-radius:100px; background:rgba(14,39,43,.48); color:white; font-size:10px; font-weight:800; letter-spacing:.15em; backdrop-filter:blur(8px); }
.story__body { padding:30px; }
.story h3 { margin:0; font:500 25px/1.45 "Yu Mincho",serif; }
.story__body > p:not(.eyebrow) { min-height:88px; color:var(--muted); font-size:14px; }
.story__body > .event-note { min-height:0; margin:18px 0; padding:12px 14px; border-left:3px solid var(--gold); border-radius:0 10px 10px 0; background:var(--gold-soft); color:#775027; font-size:11px; }
.event-note b { display:block; color:#5c3918; }
.story dl { margin:22px 0; border-top:1px solid var(--line); }
.story dl div { display:flex; justify-content:space-between; gap:15px; padding:10px 0; border-bottom:1px solid var(--line); }
.story dt { color:var(--muted); font-size:12px; }
.story dd { margin:0; font-size:13px; font-weight:800; }
.mini-timeline { list-style:none; padding:0; margin:24px 0; }
.mini-timeline li { display:grid; grid-template-columns:58px 1fr; gap:12px; padding:10px 0; }
.mini-timeline time { color:var(--teal); font-size:11px; font-weight:800; }
.story--fukuoka .mini-timeline time { color:var(--coral); }
.story--kitakyushu .mini-timeline time { color:var(--gold); }
.mini-timeline span { color:var(--muted); font-size:12px; }
.mini-timeline b { display:block; color:var(--ink); font-size:14px; }
.official-row { display:flex; flex-wrap:wrap; gap:8px; }
.official { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 15px; border:1px solid var(--line); border-radius:100px; text-decoration:none; font-size:12px; font-weight:800; }
.official--main { color:white; background:var(--ink); border-color:var(--ink); }
.dinner-section { padding:100px 0; background:var(--gold-soft); scroll-margin-top:18px; }
.dinner-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.dinner-card { display:flex; flex-direction:column; min-height:270px; padding:25px; border:1px solid rgba(126,79,28,.15); border-radius:20px; background:rgba(255,255,255,.78); }
.dinner-card small { color:var(--gold); font-size:11px; font-weight:800; }
.dinner-card h3 { margin:8px 0; font:500 21px/1.45 "Yu Mincho",serif; }
.dinner-card p { margin:0 0 20px; color:var(--muted); font-size:13px; }
.dinner-card a { margin-top:auto; color:#7b4a1f; font-size:12px; font-weight:800; text-decoration:none; }
.stay-section { padding:100px 0; background:var(--teal-soft); }
.section-head { display:flex; justify-content:space-between; align-items:end; gap:50px; margin-bottom:42px; }
.section-head > p { max-width:390px; margin:0 0 9px; color:var(--muted); font-size:13px; }
.stay-group { min-width:0; margin:0; padding:0; border:0; }
.stay-group + .stay-group { margin-top:50px; }
.stay-group[hidden] { display:none; }
.stay-group legend { margin:0 0 16px; padding:0; font:500 23px "Yu Mincho",serif; }
.stay-list { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.stay-option { overflow:hidden; border-radius:17px; background:rgba(255,255,255,.55); }
.stay { min-width:0; cursor:pointer; }
.stay input { position:absolute; opacity:0; }
.stay > span { display:flex; flex-direction:column; min-height:132px; padding:20px; border:1px solid rgba(40,91,91,.16); border-radius:17px; background:rgba(255,255,255,.76); transition:.2s; }
.stay input:checked + span { border-color:var(--teal); background:white; box-shadow:0 10px 30px rgba(35,91,91,.12); transform:translateY(-2px); }
.stay small { color:var(--teal); font-size:11px; font-weight:800; }
.stay b { margin:4px 0; font:500 19px "Yu Mincho",serif; }
.stay em { color:var(--muted); font-size:12px; font-style:normal; }
.stay-option > a { display:flex; align-items:center; justify-content:flex-end; min-height:44px; padding:6px 16px; color:#285e60; text-decoration:none; font-size:12px; font-weight:800; }
.stay-fixed h3 { margin:0 0 16px; font:500 23px "Yu Mincho",serif; }
.stay-fixed__card { max-width:535px; padding:21px; border:1px solid rgba(40,91,91,.16); border-radius:17px; background:rgba(255,255,255,.76); }
.stay-fixed__card small,.stay-fixed__card b { display:block; }
.stay-fixed__card small { color:var(--teal); font-size:11px; font-weight:800; }
.stay-fixed__card b { margin:4px 0; font:500 19px "Yu Mincho",serif; }
.stay-fixed__card p { margin:0; color:var(--muted); font-size:12px; }
#stays { scroll-margin-top:18px; }
.bottom-nav { display:none; }
footer { padding:48px 20px; text-align:center; }
footer p { font:italic 18px Georgia,serif; }
footer small { color:var(--muted); font-size:11px; }

@media (max-width:1050px) {
  .story-grid { grid-template-columns:1fr 1fr; }
  .story--kitakyushu { grid-column:1 / -1; width:calc(50% - 9px); justify-self:center; }
}

@media (max-width:820px) {
  body { padding-bottom:calc(64px + env(safe-area-inset-bottom)); }
  .story-grid { grid-template-columns:1fr; }
  .story--kitakyushu { grid-column:auto; width:auto; }
  .section-head { display:block; }
  .section-head > p { margin-top:12px; }
  .dinner-list { grid-template-columns:1fr; }
  .stay-list { grid-template-columns:1fr 1fr; }
  .bottom-nav { position:fixed; z-index:80; left:10px; right:10px; bottom:calc(8px + env(safe-area-inset-bottom)); display:grid; grid-template-columns:repeat(3,1fr); min-height:52px; border-radius:16px; background:rgba(23,52,56,.96); color:white; box-shadow:0 10px 35px rgba(0,0,0,.2); backdrop-filter:blur(12px); }
  .bottom-nav a { display:grid; place-items:center; min-height:52px; text-decoration:none; font-size:12px; font-weight:800; }
}

@media (max-width:520px) {
  .hero { min-height:690px; }
  .hero h1 { font-size:clamp(43px,13vw,61px); }
  .hero__body > p:not(.eyebrow) { font-size:15px; }
  .intro { padding-top:82px; }
  .story-grid { padding-bottom:82px; }
  .story__photo { height:250px; }
  .story__body { padding:25px 20px; }
  .story h3 { font-size:25px; }
  .story__body > p:not(.eyebrow) { min-height:0; }
  .story dl div { display:block; }
  .story dd { margin-top:2px; }
  .stay-section { padding:82px 0; }
  .dinner-section { padding:82px 0; }
  .stay > span { min-height:125px; padding:17px; }
  .stay-list { grid-template-columns:1fr; }
}

@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition:none !important; } }