/* WALL FES in KYUSHU — 雰囲気の1枚：黒・白・青・赤（赤はボタンと日付だけ） */
:root{
  --k:#050608; --k2:#0C0E12; --w:#F7F7F7; --b:#1971D4; --b2:#0E80F3; --r:#F20914; --r2:#C9060F;
  --g:#F2F3F5; --ink:#15171B; --sub:#555C66; --line:#D5D8DE; --mute:#9AA1AB;
  --en:'Anton',Impact,sans-serif; --dg:'Dela Gothic One','Noto Sans JP',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:64px;-webkit-text-size-adjust:100%}
body{background:var(--k);color:var(--w);font-family:'Noto Sans JP',system-ui,sans-serif;font-size:16px;line-height:1.8;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.wrap{max-width:560px;margin:0 auto;padding:0 16px}
.en{font-family:var(--en);letter-spacing:.02em;line-height:1;font-weight:400}
.dg{font-family:var(--dg);font-weight:400;line-height:1.3;letter-spacing:.01em}
.tag{display:block;font-family:var(--en);font-size:13px;letter-spacing:.2em;color:var(--b2);margin-bottom:6px}
.light .tag{color:var(--b)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tbd{background:rgba(255,230,0,.18);border-bottom:1px dotted #e5c800;padding:0 2px;font-size:.9em}
.light .tbd{background:#FFF6B8}

/* ボタン（赤＝押す所） */
.btn{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:56px;padding:0 20px;background:var(--r);color:#fff;font-weight:900;font-size:18px;letter-spacing:.08em;border-radius:3px;text-decoration:none;transition:background .15s}
.btn:hover{background:var(--r2)}
.btn:focus-visible{outline:3px solid #fff;outline-offset:3px}
.btn .en{font-size:14px;letter-spacing:.16em;opacity:.85}
.btn.ghost{background:transparent;border:1.5px solid currentColor;font-size:16px;min-height:52px}
.light .btn.ghost{color:var(--ink)}
.btn[disabled]{opacity:.55;cursor:wait}

/* 上の帯 */
.top{position:sticky;top:0;z-index:30;height:56px;background:rgba(5,6,8,.94);backdrop-filter:blur(6px);border-bottom:1px solid rgba(255,255,255,.08)}
.top .wrap{height:100%;display:flex;align-items:center;justify-content:space-between}
.top .org{font-size:11px;font-weight:700;color:#C9CED6;line-height:1.35;text-decoration:none}
.top .org b{display:block;font-family:var(--en);font-weight:400;font-size:16px;color:#fff;letter-spacing:.06em}
.top .go{height:40px;padding:0 16px;background:var(--r);color:#fff;font-weight:900;font-size:14px;letter-spacing:.1em;display:flex;align-items:center;border-radius:2px;text-decoration:none}

/* 最初の画面 */
.hero{position:relative}
.hero .kv{position:relative;max-width:560px;margin:0 auto}
.hero .kv img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
.hero .kv::after{content:"";position:absolute;left:0;right:0;bottom:0;height:22%;background:linear-gradient(transparent,var(--k))}
.hero .body{padding-top:4px;padding-bottom:40px}
.date{display:flex;align-items:flex-end;gap:12px;margin:2px 0 4px}
.date .en{font-size:clamp(56px,17vw,76px)}
.date .dow{font-family:var(--en);font-size:22px;letter-spacing:.06em;padding:4px 9px 3px;background:var(--r);color:#fff;margin-bottom:9px}
.venue{font-weight:700;font-size:14px;color:#C9CED6}
.count{display:flex;align-items:baseline;gap:6px;margin:14px 0 18px;font-size:13px;font-weight:700;color:#C9CED6}
.count .en{font-size:34px;color:#fff}
.hero .meta{margin-top:12px;font-size:12px;color:var(--mute);line-height:1.7}

/* 段 */
.sec{padding:72px 0}
.sec h2{font-size:clamp(24px,7.4vw,30px);margin-bottom:18px}
.light{background:var(--g);color:var(--ink)}
.cut{clip-path:polygon(0 32px,100% 0,100% 100%,0 100%);margin-top:-32px;padding-top:96px;position:relative;z-index:1}
.cut-r{clip-path:polygon(0 0,100% 32px,100% 100%,0 100%);margin-top:-32px;padding-top:96px;position:relative;z-index:1}
.lead{font-size:15px;color:#C9CED6}
.light .lead{color:var(--sub)}

/* 概要 */
.dl{display:grid;grid-template-columns:84px 1fr;border-top:2px solid var(--ink)}
.dl dt,.dl dd{padding:14px 0;border-bottom:1px solid var(--line)}
.dl dt{font-weight:700;font-size:13px;color:var(--sub);letter-spacing:.06em}
.dl dd{font-weight:700;line-height:1.6}
.dl dd .en{font-size:24px;margin-right:2px}
.dl dd small{display:block;font-weight:400;font-size:12px;color:var(--sub)}

/* 写真の段 */
.photo{position:relative;min-height:560px;display:flex;align-items:flex-end;overflow:hidden;background:var(--k)}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:35% 22%}
.photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,6,8,0) 35%,rgba(5,6,8,.9) 82%)}
.photo .wrap{position:relative;z-index:2;padding-bottom:40px;width:100%}
.photo .dg{font-size:clamp(28px,8.4vw,36px)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 10px}
.chips span{border:1.5px solid var(--w);padding:3px 12px;font-weight:900;font-size:14px}

/* 思いの段 */
.story p+p{margin-top:1.2em}
.story .big{font-size:clamp(22px,6.6vw,28px);margin-bottom:20px}
.quote{border-left:3px solid var(--b);padding:2px 0 2px 14px;margin:24px 0;color:#C9CED6;font-size:15px}

/* 映像 */
.movie{position:relative;max-width:360px;margin:8px auto 0;aspect-ratio:9/16;background:#000;border:1px solid rgba(255,255,255,.12)}
.movie video{width:100%;height:100%;object-fit:cover}

/* 主催 */
.orgs{display:grid;gap:12px}
.orgs div{padding:18px 16px;background:#fff;border-left:4px solid var(--b)}
.orgs b{font-size:17px;display:block}
.orgs small{font-size:13px;color:var(--sub);display:block;line-height:1.7;margin-top:4px}

/* 流れ */
.steps{list-style:none;counter-reset:s;border-top:2px solid var(--ink)}
.steps li{position:relative;padding:16px 0 16px 60px;border-bottom:1px solid var(--line);font-weight:700;line-height:1.6}
.steps li::before{counter-increment:s;content:"0" counter(s);position:absolute;left:0;top:13px;font-family:var(--en);font-size:32px;color:var(--b)}
.steps li small{display:block;font-weight:400;font-size:13px;color:var(--sub);margin-top:2px}

/* よくある質問 */
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;padding:16px 36px 16px 0;font-weight:700;position:relative;cursor:pointer;line-height:1.6}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:12px;font-family:var(--en);font-size:24px;color:var(--b)}
.faq details[open] summary::after{content:"−"}
.faq details p{padding:0 0 18px;font-size:15px;color:var(--sub)}

/* 最後のエントリー */
.final{padding:88px 0 96px;background:var(--k)}
.final .dg{font-size:clamp(34px,10vw,44px);margin-bottom:14px}
.closed{border:1.5px solid rgba(255,255,255,.3);padding:20px 16px}
.closed .dg{font-size:22px;margin-bottom:10px}
.closed p{font-size:14px;color:#C9CED6;margin-bottom:16px}

/* お問い合わせ */
.contact .addr{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:12px 0 16px;font-weight:700;word-break:break-all}
.copy{font-size:13px;font-weight:700;padding:6px 12px;border:1.5px solid var(--ink);border-radius:2px}

/* 下 */
.foot{padding:40px 0 120px;font-size:12px;color:var(--mute)}
.foot nav{display:flex;flex-wrap:wrap;gap:6px 18px;margin-bottom:16px}
.foot a{text-decoration:underline}

/* 下に付いてくるボタン */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:linear-gradient(rgba(5,6,8,0),rgba(5,6,8,.92) 35%);transform:translateY(110%);transition:transform .25s}
.dock.on{transform:none}
.dock .btn{max-width:528px;margin:0 auto}

/* 出る動き（動きを減らす設定の人には出さない） */
.rise{opacity:0;transform:translateY(16px);transition:opacity .6s,transform .6s}
.rise.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rise{opacity:1;transform:none;transition:none}.dock{transition:none}html{scroll-behavior:auto}}
.no-js .rise{opacity:1;transform:none}