/* スナックClover のサイト。元は docs/marketing/website/preview.html */
:root{
  --night:#10162E; --led:#4C6BFF; --clover:#3F9A68;
  --paper:#F5F6F8; --ink:#1B1F2A; --muted:#5B6273; --line:#DDE1E8;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.9 "Noto Sans JP",sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:"Zen Maru Gothic",sans-serif;font-weight:700;line-height:1.4;margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--led);outline-offset:3px}
.wrap{max-width:880px;margin:0 auto;padding:0 20px}

/* header */
.top{position:absolute;inset:0 0 auto;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:16px 20px;color:#fff}
.top .name{font-family:"Zen Maru Gothic";font-weight:700;letter-spacing:.04em}
.top nav a{font-size:14px;text-decoration:none;margin-left:18px;opacity:.85}
@media (max-width:640px){.top nav{display:none}}

/* hero: the one bold moment — the counter's blue light */
.hero{position:relative;min-height:88vh;display:flex;align-items:flex-end;color:#fff;background:var(--night) url(/img/counter.jpg) center 40%/cover no-repeat}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,22,46,.35) 0%,rgba(16,22,46,.55) 45%,rgba(16,22,46,.96) 100%)}
.hero .wrap{position:relative;padding-bottom:56px;width:100%}
.hero h1{font-size:clamp(40px,8vw,72px);letter-spacing:.02em}
.glow{height:4px;width:min(360px,70%);margin:18px 0 22px;border-radius:2px;background:var(--led);box-shadow:0 0 12px 2px rgba(76,107,255,.85),0 0 40px 8px rgba(76,107,255,.45);transform-origin:left;animation:on 1.1s .3s ease-out both}
@keyframes on{0%{transform:scaleX(0);opacity:.2}60%{opacity:1}100%{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.glow{animation:none}}
.hero p{font-size:clamp(17px,2.6vw,21px);margin:0 0 28px;max-width:30em}
.btns{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 22px;border-radius:999px;font-weight:700;text-decoration:none;font-size:16px}
.btn.line{background:#06C755;color:#fff}
.btn.map{background:#fff;color:var(--night)}
.btn.ghost{border:1.5px solid var(--ink);color:var(--ink)}

section{padding:72px 0}
section h2{font-size:clamp(24px,4vw,30px);margin-bottom:28px}

/* facts */
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.facts div{border-left:3px solid var(--clover);padding-left:18px}
.facts h3{font-size:19px;margin-bottom:8px}
.facts p{margin:0;color:var(--muted)}
.facts strong{color:var(--ink)}
@media (max-width:720px){.facts{grid-template-columns:1fr;gap:24px}}

/* price */
.price{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.price table{width:100%;border-collapse:collapse;font-size:17px}
.price th,.price td{padding:16px 0;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.price th{font-weight:500}
.price td{text-align:right;font-weight:700;white-space:nowrap}
.price td small{display:block;font-weight:400;color:var(--muted);font-size:13px}
.note{color:var(--muted);font-size:14px;margin-top:18px}

/* voices */
.voices{display:grid;gap:28px}
blockquote{margin:0;padding:0 0 0 22px;border-left:3px solid var(--line);font-size:17px}
blockquote footer{font-size:13px;color:var(--muted);margin-top:6px}
.more{display:inline-block;margin-top:28px;font-weight:700;color:var(--clover)}

/* faq */
details{border-bottom:1px solid var(--line);padding:4px 0}
summary{cursor:pointer;list-style:none;padding:16px 32px 16px 0;font-weight:700;position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:4px;top:12px;font-size:22px;color:var(--clover);transition:transform .2s}
details[open] summary::after{transform:rotate(45deg)}
details p{margin:0 0 18px;color:var(--muted)}

/* party */
.party{background:var(--night);color:#fff}
.party p{max-width:34em}
.party .tag{display:inline-block;font-size:13px;border:1px solid rgba(255,255,255,.5);border-radius:999px;padding:2px 12px;margin-bottom:14px}

/* access */
.access{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:start}
.access dl{margin:0}
.access dt{font-size:13px;color:var(--muted);margin-top:16px}
.access dd{margin:0;font-weight:500}
.access iframe{width:100%;aspect-ratio:4/3;border:0;border-radius:6px}
@media (max-width:720px){.access{grid-template-columns:1fr}}

.bottles{display:grid;grid-template-columns:1fr 1.2fr;gap:36px;align-items:center}
.bottles img{width:100%;max-height:440px;object-fit:cover;border-radius:6px;display:block}
@media (max-width:720px){.bottles{grid-template-columns:1fr}}

footer.site{background:var(--night);color:rgba(255,255,255,.75);font-size:13px;padding:32px 0;text-align:center}

/* news */
.news-list{display:grid;gap:28px}
.news-item{background:#fff;border:1px solid var(--line);border-radius:6px;padding:20px 22px}
.news-item time{display:block;font-size:13px;color:var(--muted);margin-bottom:6px}
.news-item p{margin:0}
.news-item img{display:block;width:100%;height:auto;max-height:480px;object-fit:cover;border-radius:4px;margin-top:14px}
.door-photos{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px}
.door-photos img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;border-radius:6px;display:block}
.page-head{background:var(--night);color:#fff;padding:28px 0}
.page-head a{text-decoration:none}
.announce + .announce{margin-top:28px}