:root{
  --bg:#FFFFFF; --text:#333333; --muted:#6b7280;
  --accent:#5DB2E8; --accent2:#A8D672; --line: color-mix(in oklab, #333 25%, white);
  --container:1080px; --radius-lg:16px; --radius-full:9999px;
}
@media (prefers-reduced-motion: reduce){ *{animation:none!important; transition:none!important} }
html,body{height:100%}
body{margin:0; font-family: "Noto Sans JP", "Noto Sans JP Rounded", system-ui, -apple-system, Segoe UI, Roboto, "ヒラギノ角ゴ ProN", "メイリオ", sans-serif; background:var(--bg); color:var(--text); line-height:1.7}
img{max-width:100%; height:auto; display:block}
.container{max-width:var(--container); margin:0 auto; padding:0 20px}
section{padding:64px 0}
h1,h2,h3{line-height:1.25; letter-spacing:.02em; margin:0 0 .5rem}
p{margin:.25rem 0 1rem}

/* Layout */
header{position:sticky; top:0; z-index:50; background:#fff; backdrop-filter:saturate(1.2) blur(4px); border-bottom:1px solid rgba(0,0,0,.04)}
.nav{display:flex; align-items:center; gap:20px; height:56px}
.logo{font-weight:700}
.logo-link {
    color: var(--text);
    text-decoration: none;
    transition: all 0.3s ease;
}

.logo-link:hover {
    color: var(--accent);
    transform: scale(1.05);
}
.nav-links{margin-left:auto; display:flex; gap:16px; flex-wrap:wrap}

.hero{position:relative; min-height:60svh; display:grid; place-items:center; overflow:hidden}
.hero .container{position:relative; z-index:3; text-align:center; padding:72px 20px}
.title{font-size:clamp(28px,6vw,56px); font-weight:800; margin-bottom:.25rem; color: #fff; text-shadow: 2px 2px 4px rgba(0,0,0,0.7)}
.tagline{color:var(--muted); margin-bottom:1.25rem}

.details-grid{display:grid; gap:12px; grid-template-columns:1fr 1fr}
@media (max-width:640px){ .details-grid{ grid-template-columns:1fr } }
.muted{color:var(--muted)}

.social{display:flex; gap:16px; align-items:center}
.icon{width:28px; height:28px; display:inline-grid; place-items:center; border-radius:8px}
.icon img{width:20px; height:20px}

footer{padding:48px 0; border-top:1px solid rgba(0,0,0,.06); color:var(--muted); font-size:.95rem}

/* Components */
/* ink hover */
.ink{position:relative; text-decoration:none; padding:6px 10px; border-radius:12px; transition:color .12s ease}
.ink::before{content:""; position:absolute; inset:-4px; border-radius:12px; pointer-events:none; background:radial-gradient(circle at var(--x,50%) var(--y,50%), color-mix(in oklab, var(--accent) 30%, white) 0%, transparent 60%); opacity:0; transform:scale(.6); transition:opacity .3s ease, transform .3s ease}
.ink:hover{color:var(--accent)}
.ink:hover::before{opacity:.7; transform:scale(1)}
.ink:active::before{opacity:.9; transform:scale(1.08)}
.ink:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:12px; text-decoration:underline}

.btn{display:inline-block; padding:12px 20px; border-radius:var(--radius-full); background:rgba(255,255,255,0.9); border:1px solid rgba(255,255,255,0.3); box-shadow:0 4px 20px rgba(0,0,0,0.3); backdrop-filter: blur(10px); transition: all 0.3s ease}
.btn:hover{background:rgba(255,255,255,1); transform: translateY(-2px); box-shadow:0 6px 25px rgba(0,0,0,0.4)}

/* glow underline */
.glow-underline{position:relative; display:inline-block; padding-bottom:.3rem}
.glow-underline::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--line)}
.glow-underline::before{content:""; position:absolute; bottom:0; height:2px; width:30%; background:linear-gradient(90deg, transparent, var(--accent), transparent); transform:translateX(-120%); opacity:0; transition:transform .5s ease, opacity .5s ease}
.glow-underline.is-on::before{transform:translateX(250%); opacity:1}

/* modal */
.modal-backdrop{position:fixed; inset:0; background:rgba(0,0,0,.5); display:none; place-items:center; z-index:60}
.modal-backdrop[aria-hidden="false"]{display:grid; animation:fadeIn .2s ease}
@keyframes fadeIn{from{opacity:0} to{opacity:1}}
.modal{background:#fff; max-width:min(920px,96vw); width:100%; border-radius:16px; overflow:hidden; box-shadow:0 10px 40px rgba(0,0,0,.25)}
.modal__head{display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid rgba(0,0,0,.06)}
.modal__body{position:relative; background:#000}
.carousel{position:relative; aspect-ratio:3/4}
.slide{position:absolute; inset:0; opacity:0; transition:opacity .22s ease; display:grid; place-items:center}
.slide.is-active{opacity:1}
.slide img{width:100%; height:100%; object-fit:contain; background:#111}
.nav-arrow{position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.85); border:none; border-radius:9999px; width:40px; height:40px; display:grid; place-items:center; cursor:pointer}
.nav-arrow--prev{left:8px}
.nav-arrow--next{right:8px}
.dots{display:flex; gap:8px; justify-content:center; padding:10px; background:#fff}
.dot{width:8px; height:8px; border-radius:9999px; background:#d1d5db; border:none}
.dot[aria-current="true"]{background:var(--accent)}

/* Effects */
.plx{position:absolute; inset:0; will-change:transform}
.layer-sky{background:url('./public/flyers/front.png') center center / cover no-repeat; z-index:0}
.layer-haze{background:rgba(0,0,0,0.3); z-index:1}
.layer-ground{background:linear-gradient(transparent 70%, rgba(0,0,0,0.4)); z-index:2}

/* Additional styles for flyer container */
.flyer-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.flyer-container img {
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transition: transform 0.2s ease;
}

.flyer-container img:hover {
  transform: scale(1.02);
}