/* BAR NOMENOME 公式サイトのデザイン（build_site.py が dist/style.css にコピーする） */
:root{
  color-scheme:dark;
  --ink:#06060a; --ink-2:#0d0d14; --ink-3:#15151f;
  --paper:#ecebe6; --mute:#8b8a98; --line:rgba(236,235,230,.12);
  --neon:#3ff4ff; --violet:#a777ff; --pink:#ff5fd2;
  --glow:0 0 .08em #fff,0 0 .25em var(--neon),0 0 .6em rgba(63,244,255,.55),0 0 1.4em rgba(63,244,255,.35);
  --f-display:"Unbounded",system-ui,sans-serif;
  --f-serif:"Instrument Serif",serif;
  --f-mono:"JetBrains Mono",ui-monospace,monospace;
  --f-jp:"Zen Kaku Gothic New",system-ui,sans-serif;
  --f-min:"Shippori Mincho B1",serif;
  --gut:clamp(16px,4vw,56px);
  --ease:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background:var(--ink);color:var(--paper);font-family:var(--f-jp);font-size:16px;line-height:1.8;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
::selection{background:var(--neon);color:var(--ink)}
:focus-visible{outline:2px solid var(--neon);outline-offset:3px}
.mono{font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.serif{font-family:var(--f-serif);font-style:italic;font-weight:400}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* grain */
.grain{pointer-events:none;position:fixed;inset:-50%;z-index:90;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 1s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-5%)}60%{transform:translate(-6%,1%)}80%{transform:translate(5%,4%)}100%{transform:translate(0,0)}}

/* ---------- loader : descending to B1F ---------- */
.loader{position:fixed;inset:0;z-index:100;background:var(--ink);display:grid;place-items:center;color:var(--paper)}
.loader__inner{display:grid;justify-items:center;gap:22px}
.loader__floor{font-family:var(--f-display);font-weight:900;font-size:clamp(84px,18vw,220px);line-height:.9;letter-spacing:-.04em;height:.9em;overflow:hidden;display:flex}
.loader__floor span{display:block}
.loader__track{display:block;transition:transform .9s var(--ease)}
.loader__meta{display:flex;gap:28px;color:var(--mute)}
.loader__arrow{display:inline-block;color:var(--neon);animation:down 1s var(--ease) infinite}
@keyframes down{0%{transform:translateY(-4px);opacity:0}50%{opacity:1}100%{transform:translateY(6px);opacity:0}}
.loader__bar{width:min(260px,60vw);height:1px;background:var(--line);position:relative;overflow:hidden}
.loader__bar i{position:absolute;inset:0;background:var(--neon);box-shadow:0 0 12px var(--neon);transform:scaleX(0);transform-origin:left}
html:not(.js) .loader{display:none}

/* ---------- cursor ---------- */
.cursor{position:fixed;left:0;top:0;z-index:95;pointer-events:none;mix-blend-mode:difference;display:none}
.cursor__dot{width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:#fff;transition:transform .35s var(--ease)}
.cursor__label{position:absolute;left:14px;top:10px;white-space:nowrap;font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;color:#fff;opacity:0;transform:translateY(4px);transition:.3s var(--ease)}
.cursor.is-hover .cursor__dot{transform:scale(6)}
.cursor.has-label .cursor__label{opacity:1;transform:none}
@media (hover:hover) and (pointer:fine){.cursor{display:block}}

/* ---------- header ---------- */
.hd{position:fixed;inset:0 0 auto;z-index:60;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:calc(18px + env(safe-area-inset-top,0px)) var(--gut) 18px;mix-blend-mode:difference;color:#fff}
.hd__logo{font-family:var(--f-display);font-weight:800;letter-spacing:.02em;font-size:15px}
.hd__logo small{font-family:var(--f-mono);font-weight:400;font-size:10px;letter-spacing:.2em;margin-left:8px;opacity:.7}
.status{display:flex;align-items:center;gap:10px}
.status__dot{width:7px;height:7px;border-radius:50%;background:#666;position:relative}
.status.is-open .status__dot{background:#fff}
.hero__status{color:var(--paper)}
.hero__status.is-open .status__dot{background:var(--neon)}
.hero__status.is-open .status__dot::after{border-color:var(--neon)}
.status.is-open .status__dot::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid #fff;animation:ping 1.6s var(--ease) infinite}
@keyframes ping{0%{transform:scale(.4);opacity:1}100%{transform:scale(1.6);opacity:0}}
.hd__menu{justify-self:end;display:flex;align-items:center;gap:12px}
.burger{width:28px;height:10px;position:relative}
.burger i{position:absolute;left:0;right:0;height:1.5px;background:#fff;transition:.5s var(--ease)}
.burger i:first-child{top:0}.burger i:last-child{bottom:0}
.nav-open .burger i:first-child{top:4px;transform:rotate(45deg)}
.nav-open .burger i:last-child{bottom:4px;transform:rotate(-45deg)}

/* nav overlay */
.nav{position:fixed;inset:0;z-index:55;background:var(--ink-2);clip-path:inset(0 0 100% 0);transition:clip-path .9s var(--ease);display:grid;grid-template-rows:1fr auto;padding:110px var(--gut) 32px;visibility:hidden}
.nav-open .nav{clip-path:inset(0 0 0 0);visibility:visible}
.nav__list{list-style:none;margin:0;padding:0;align-self:center;counter-reset:n}
.nav__list li{overflow:hidden;border-bottom:1px solid var(--line)}
.nav__list a{display:flex;align-items:baseline;gap:20px;padding:6px 0;font-family:var(--f-display);font-weight:800;font-size:clamp(34px,7.4vw,96px);line-height:1.08;letter-spacing:-.03em;transform:translateY(110%);transition:transform .9s var(--ease),color .3s}
.nav__list a::before{counter-increment:n;content:"0" counter(n);font-family:var(--f-mono);font-size:12px;font-weight:400;letter-spacing:.1em;color:var(--mute)}
.nav__list a span{font-family:var(--f-jp);font-size:13px;font-weight:500;letter-spacing:.1em;color:var(--mute);margin-left:auto}
.nav__list a:hover{color:var(--neon)}
.nav-open .nav__list a{transform:none}
.nav-open .nav__list li:nth-child(2) a{transition-delay:.05s}.nav-open .nav__list li:nth-child(3) a{transition-delay:.1s}.nav-open .nav__list li:nth-child(4) a{transition-delay:.15s}.nav-open .nav__list li:nth-child(5) a{transition-delay:.2s}.nav-open .nav__list li:nth-child(6) a{transition-delay:.25s}
.nav__foot{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;color:var(--mute)}

/* ---------- hero ---------- */
.hero{position:relative;height:100svh;min-height:600px;overflow:hidden;isolation:isolate;--mx:70%;--my:45%}
.hero__bg,.hero__lit{position:absolute;inset:-4%;background:url(img/hero.webp) center/cover no-repeat}
.hero__bg{filter:brightness(.16) saturate(.6) contrast(1.1)}
.hero__lit{filter:brightness(.95) saturate(1.25) contrast(1.05);-webkit-mask-image:radial-gradient(circle clamp(140px,22vw,320px) at var(--mx) var(--my),#000 0%,rgba(0,0,0,.6) 45%,transparent 75%);mask-image:radial-gradient(circle clamp(140px,22vw,320px) at var(--mx) var(--my),#000 0%,rgba(0,0,0,.6) 45%,transparent 75%)}
.hero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(6,6,10,.75) 0%,rgba(6,6,10,0) 30%,rgba(6,6,10,0) 55%,var(--ink) 100%);pointer-events:none}
.hero__content{position:relative;z-index:2;height:100%;display:grid;grid-template-rows:auto 1fr auto;padding:clamp(92px,13vh,130px) var(--gut) 28px;pointer-events:none}
.hero__top{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}
.hero__title{align-self:center;margin:0;font-family:var(--f-display);font-weight:900;font-size:clamp(76px,19.6vw,330px);line-height:.84;letter-spacing:-.055em;text-transform:uppercase}
.hero__title .row{display:block;overflow:hidden;padding-bottom:.04em}
.hero__title .row--b{text-align:right}
.hero__title .ch{display:inline-block;will-change:transform}
.hero__title .row--b .ch{color:#d9fdff;text-shadow:0 0 .02em #fff,0 0 .08em var(--neon),0 0 .22em rgba(63,244,255,.75),0 0 .5em rgba(63,244,255,.4),0 0 1em rgba(120,90,255,.35)}
.hero__title .row--b .ch.flick{animation:flick 3.2s infinite}
@keyframes flick{0%,18%,22%,25%,53%,57%,100%{opacity:1}20%,24%,55%{opacity:.25}}
.hero__kicker{margin:0;display:flex;gap:14px;align-items:center;color:var(--neon)}
.hero__kicker::before{content:"";width:36px;height:1px;background:currentColor}
.hero__tate{margin:0;font-family:var(--f-min);font-weight:800;font-size:clamp(15px,1.5vw,22px);letter-spacing:.3em;text-align:right;line-height:1.7}
.hero__foot{display:grid;grid-template-columns:repeat(4,auto);justify-content:space-between;gap:16px;border-top:1px solid var(--line);padding-top:16px;color:var(--paper)}
.hero__foot div{display:grid;gap:2px}
.hero__foot b{font-weight:400;color:var(--mute);font-size:10px}
.hero__scroll{position:absolute;left:50%;bottom:86px;z-index:2;width:1px;height:56px;background:var(--line);overflow:hidden}
.hero__scroll::after{content:"";position:absolute;left:0;top:-50%;width:1px;height:50%;background:var(--neon);animation:sc 2s var(--ease) infinite}
@keyframes sc{to{top:100%}}

/* ---------- marquee ---------- */
.marquee{position:relative;z-index:3;overflow:hidden;border-block:1px solid var(--line);background:var(--ink);padding:18px 0}
.marquee--neon{background:var(--neon);color:var(--ink);transform:rotate(-2deg) scale(1.04);margin:40px 0;border:0}
.marquee__track{display:flex;width:max-content;animation:mq 38s linear infinite}
.marquee--neon .marquee__track{animation-duration:26s;animation-direction:reverse}
.marquee__item{display:flex;align-items:center;gap:36px;padding-right:36px;font-family:var(--f-display);font-weight:800;font-size:clamp(22px,3.4vw,46px);letter-spacing:-.02em;white-space:nowrap}
.marquee__item em{font-family:var(--f-serif);font-weight:400;letter-spacing:0}
.marquee__item .x{color:var(--neon);font-weight:300}
.marquee--neon .x{color:var(--ink)}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---------- sections common ---------- */
section{position:relative}
.sec{padding:clamp(96px,14vw,200px) var(--gut)}
.sec-head{display:grid;grid-template-columns:auto 1fr auto;align-items:end;gap:24px;margin-bottom:clamp(40px,6vw,88px)}
.sec-head__no{color:var(--neon)}
.sec-head__title{margin:0;font-family:var(--f-display);font-weight:800;font-size:clamp(40px,8vw,128px);line-height:.9;letter-spacing:-.045em;text-transform:uppercase}
.sec-head__title .serif{text-transform:none;letter-spacing:-.01em;font-size:1.06em;color:var(--violet)}
.sec-head__ja{color:var(--mute);text-align:right}
.reveal-line{display:block;overflow:hidden}
.reveal-line>span{display:block}

/* ---------- manifesto ---------- */
.manifesto{padding-top:clamp(120px,16vw,240px)}
.manifesto__grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:var(--gut)}
.manifesto__side{position:sticky;top:110px;align-self:start;color:var(--mute);display:grid;gap:18px}
.manifesto__side .mono:first-child{color:var(--neon)}
.manifesto__text .ln{display:block}
.manifesto__text{margin:0;font-family:var(--f-min);font-weight:800;font-size:clamp(20px,3.5vw,58px);line-height:1.6;letter-spacing:.02em;font-feature-settings:"palt"}
.manifesto__text .w{opacity:.14;transition:opacity .2s}
html:not(.js) .manifesto__text .w,.reduced .manifesto__text .w{opacity:1}
.manifesto__text .hl{color:var(--neon);text-shadow:0 0 22px rgba(63,244,255,.45)}
.manifesto__en{margin-top:48px;font-family:var(--f-serif);font-style:italic;font-size:clamp(20px,2.2vw,30px);color:var(--mute);max-width:32ch;line-height:1.3}

/* ---------- hosts ---------- */
.hosts{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,6vw,96px);align-items:center;padding:0 var(--gut) clamp(96px,12vw,180px)}
.hosts__fig{margin:0;position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:2px}
.hosts__fig img{width:100%;height:118%;object-fit:cover}
.hosts__fig::after{content:"";position:absolute;inset:auto 0 0;height:30%;background:linear-gradient(transparent,rgba(0,0,0,.55));pointer-events:none}
.hosts__fig{isolation:isolate;background:#07060d;box-shadow:0 0 0 1px var(--line)}
.hosts__fig figcaption{z-index:2}
.hosts__fig figcaption{position:absolute;left:14px;bottom:12px;color:#fff;font-size:10px}
.hosts__lead{margin:0 0 28px;font-family:var(--f-min);font-weight:800;font-size:clamp(28px,3.6vw,52px);line-height:1.4}
.hosts__body{color:#c8c7cf;max-width:34em;margin:0 0 32px}
.chips{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0}
.chips li{border:1px solid var(--line);border-radius:99px;padding:8px 16px;font-size:13px;letter-spacing:.06em;transition:.4s var(--ease)}
.chips li:hover{border-color:var(--neon);color:var(--neon);box-shadow:0 0 18px rgba(63,244,255,.25) inset}

/* ---------- numbers ---------- */
.nums{display:grid;grid-template-columns:repeat(5,1fr);border-block:1px solid var(--line)}
.nums .num{padding:clamp(28px,4vw,56px) clamp(16px,2vw,28px);border-right:1px solid var(--line);display:grid;gap:14px;align-content:space-between;min-height:clamp(200px,22vw,300px);position:relative;overflow:hidden}
.nums .num:last-child{border-right:0}
.nums .num::before{content:"";position:absolute;inset:auto 0 0;height:0;background:linear-gradient(0deg,rgba(63,244,255,.14),transparent);transition:height .6s var(--ease)}
.nums .num:hover::before{height:100%}
.num__v{font-family:var(--f-display);font-weight:800;font-size:clamp(48px,6.4vw,104px);line-height:.9;letter-spacing:-.05em}
.num__v sup{font-size:.28em;letter-spacing:0;vertical-align:top;margin-left:4px;color:var(--neon);font-weight:500}
.num__l{font-size:14px;color:#c8c7cf;line-height:1.6}
.num__l .mono{display:block;color:var(--mute);margin-bottom:4px;font-size:10px}

/* ---------- night (horizontal) ---------- */
.night{background:var(--ink-2);overflow:hidden;isolation:isolate}
.night__sky{position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(120% 70% at 50% 120%,rgba(255,150,190,.28),rgba(167,119,255,.18) 40%,transparent 70%);opacity:0}
.night__pin{position:relative;height:100svh;display:flex;flex-direction:column;justify-content:center;gap:clamp(24px,4vh,48px);padding:90px 0 40px}
.night__head{padding:0 var(--gut);display:flex;justify-content:space-between;align-items:end;gap:20px}
.night__head h2{margin:0;font-family:var(--f-display);font-weight:800;font-size:clamp(34px,5.4vw,84px);line-height:.95;letter-spacing:-.045em;text-transform:uppercase}
.night__head h2 .serif{text-transform:none;color:var(--violet)}
.night__clock{font-family:var(--f-display);font-weight:300;font-size:clamp(32px,4vw,60px);letter-spacing:-.02em;color:var(--neon);text-shadow:var(--glow);font-variant-numeric:tabular-nums}
.night__track{display:flex;gap:clamp(16px,2vw,28px);padding:0 var(--gut);width:max-content;will-change:transform}
.moment{width:clamp(280px,30vw,440px);flex:none;border-top:1px solid var(--line);padding-top:22px;display:grid;grid-template-rows:auto 1fr auto;gap:18px;min-height:clamp(320px,48vh,480px);position:relative}
.moment::before{content:"";position:absolute;top:-4px;left:0;width:7px;height:7px;border-radius:50%;background:var(--neon);box-shadow:0 0 12px var(--neon)}
.moment__t{font-family:var(--f-display);font-weight:900;font-size:clamp(64px,7.6vw,128px);line-height:.85;letter-spacing:-.06em;font-variant-numeric:tabular-nums}
.moment:nth-child(odd) .moment__t{color:var(--neon);text-shadow:0 0 24px rgba(63,244,255,.45)}
.moment__p{margin:0;font-family:var(--f-min);font-weight:800;font-size:clamp(20px,1.9vw,28px);line-height:1.6;align-self:end}
.moment__n{color:var(--mute);font-size:13px}
.moment--img{display:block;width:clamp(260px,26vw,380px);border:0;padding:0;overflow:hidden;border-radius:2px}
.moment--img::before{display:none}
.moment--img img{width:100%;height:100%;object-fit:cover;filter:saturate(1.2)}
.night__progress{margin:0 var(--gut);height:1px;background:var(--line);position:relative}
.night__progress i{position:absolute;inset:0;background:var(--neon);transform-origin:left;transform:scaleX(0);box-shadow:0 0 10px var(--neon)}

/* ---------- system ---------- */
.plans{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.plan{background:var(--ink);padding:clamp(28px,4vw,56px);display:grid;gap:22px;position:relative;overflow:hidden}
.plan__tag{display:flex;justify-content:space-between;color:var(--mute)}
.plan__name{margin:0;font-family:var(--f-display);font-weight:800;font-size:clamp(36px,5vw,72px);letter-spacing:-.04em;line-height:1}
.plan__ja{font-size:14px;color:#c8c7cf;margin-top:6px}
.plan__price{font-family:var(--f-display);font-weight:300;font-size:clamp(56px,7.4vw,120px);letter-spacing:-.05em;line-height:.9}
.plan__price small{font-family:var(--f-jp);font-size:14px;letter-spacing:.05em;font-weight:500;color:var(--mute);margin-left:10px}
.plan__price .yen{font-size:.45em;vertical-align:.7em;margin-right:4px;color:var(--neon)}
.plan ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:14px;color:#c8c7cf}
.plan li{display:flex;gap:12px}
.plan li::before{content:"—";color:var(--neon)}
.plan--set{background:linear-gradient(160deg,#130f24,var(--ink) 60%)}
.plan__glow{position:absolute;right:-20%;top:-30%;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(167,119,255,.35),transparent 65%);pointer-events:none}
.perks{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:clamp(32px,4vw,56px);border-top:1px solid var(--line)}
.perk{padding:24px 24px 24px 0;display:flex;gap:16px;align-items:baseline}
.perk b{font-family:var(--f-display);font-weight:800;font-size:clamp(28px,3vw,44px);letter-spacing:-.04em;color:var(--neon);flex:none}
.perk span{font-size:14px;color:#c8c7cf}

/* calculator */
.calc{margin-top:clamp(56px,8vw,120px);display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);border:1px solid var(--line)}
.calc__ctrl{padding:clamp(24px,4vw,56px);display:grid;gap:34px;border-right:1px solid var(--line)}
.calc__ctrl h3{margin:0;font-family:var(--f-display);font-weight:800;font-size:clamp(26px,3vw,40px);letter-spacing:-.03em}
.calc__ctrl h3 .serif{color:var(--violet);font-size:1.1em}
.field{display:grid;gap:14px}
.field__top{display:flex;justify-content:space-between;align-items:baseline;color:var(--mute)}
.field__top output{font-family:var(--f-display);font-weight:500;font-size:22px;color:var(--paper);letter-spacing:-.02em}
.seg{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:99px;padding:4px;position:relative}
.seg button{position:relative;z-index:1;padding:12px 10px;border-radius:99px;font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;transition:color .4s}
.seg button[aria-pressed="true"]{color:var(--ink)}
.seg__pill{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:99px;background:var(--neon);box-shadow:0 0 20px rgba(63,244,255,.5);transition:transform .6s var(--ease)}
.seg[data-v="set"] .seg__pill{transform:translateX(100%)}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:28px;background:transparent;margin:0}
input[type=range]::-webkit-slider-runnable-track{height:1px;background:linear-gradient(90deg,var(--neon) var(--p,0%),var(--line) var(--p,0%))}
input[type=range]::-moz-range-track{height:1px;background:var(--line)}
input[type=range]::-moz-range-progress{height:1px;background:var(--neon)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-11px;border-radius:50%;background:var(--ink);border:1.5px solid var(--neon);box-shadow:0 0 14px rgba(63,244,255,.6)}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--ink);border:1.5px solid var(--neon)}
select{width:100%;-webkit-appearance:none;appearance:none;background:var(--ink-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%233ff4ff' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 16px center;color:var(--paper);border:1px solid var(--line);border-radius:2px;padding:14px 44px 14px 16px;font:500 15px var(--f-jp)}
.calc__out{padding:clamp(24px,4vw,56px);display:grid;align-content:space-between;gap:30px;background:radial-gradient(120% 90% at 100% 100%,rgba(63,244,255,.12),transparent 60%)}
.calc__total{font-family:var(--f-display);font-weight:800;font-size:clamp(52px,6.4vw,104px);letter-spacing:-.05em;line-height:.9;font-variant-numeric:tabular-nums}
.calc__total .yen{font-size:.4em;vertical-align:.9em;color:var(--neon);margin-right:6px;font-weight:500}
.calc__per{font-size:15px;color:#c8c7cf;margin-top:12px}
.calc__per b{font-family:var(--f-display);font-weight:500;color:var(--paper)}
.calc__break{list-style:none;margin:0;padding:0;font-size:13px;color:var(--mute);display:grid;gap:6px;border-top:1px solid var(--line);padding-top:18px}
.calc__break li{display:flex;justify-content:space-between;gap:12px}
.calc__note{font-size:11px;color:var(--mute);line-height:1.7;margin:0}
[data-only]{display:none}
.calc[data-mode="charge"] [data-only="charge"],.calc[data-mode="set"] [data-only="set"]{display:grid}

/* ---------- menu ---------- */
.menu{background:var(--paper);color:var(--ink);border-radius:clamp(20px,3vw,40px) clamp(20px,3vw,40px) 0 0;position:relative;z-index:2}
.menu .sec-head__no{color:#5b2fd6}
.menu .sec-head__ja{color:#6b6a72}
.menu .sec-head__title .serif{color:#5b2fd6}
.tabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px;margin:0 calc(var(--gut) * -1) 40px;padding-inline:var(--gut);position:sticky;top:64px;z-index:5}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:none;padding:12px 20px;border-radius:99px;border:1px solid rgba(6,6,10,.18);font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;background:var(--paper);transition:.35s var(--ease)}
.tab:hover{border-color:var(--ink)}
.tab[aria-selected="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.menu__body{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--gut);align-items:start}
.menu__big{position:sticky;top:150px;font-family:var(--f-display);font-weight:900;font-size:clamp(40px,6vw,104px);line-height:.88;letter-spacing:-.06em;margin:0}
.menu__big .fit{display:block;white-space:nowrap}
.menu__big small{display:block;margin-top:22px;font-family:var(--f-jp);font-size:14px;font-weight:500;letter-spacing:.04em;line-height:1.8;color:#55545c;max-width:22em}
.menu__list{list-style:none;margin:0;padding:0}
.menu__list li{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:14px;padding:16px 4px;border-bottom:1px solid rgba(6,6,10,.12);transition:padding .4s var(--ease),background .4s}
.menu__list li:hover{padding-inline:16px;background:var(--ink);color:var(--paper)}
.menu__list li:hover .p{color:var(--neon)}
.menu__list .i{font-family:var(--f-mono);font-size:11px;color:#8d8c94}
.menu__list .n{font-size:clamp(15px,1.4vw,18px);font-weight:500}
.menu__list .n small{display:block;font-size:12px;color:#8d8c94;font-weight:400;margin-top:2px}
.menu__list .p{font-family:var(--f-display);font-weight:500;font-size:clamp(15px,1.4vw,19px);letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.menu__list .p small{font-family:var(--f-jp);font-size:11px;color:#8d8c94;margin-left:6px;font-weight:400}
.menu__notes{margin:32px 0 0;padding:0;list-style:none;font-size:12px;color:#55545c;display:grid;gap:4px}
.panel-anim{animation:pin .7s var(--ease) both}
@keyframes pin{from{opacity:0;transform:translateY(16px)}}

/* ---------- karaoke ---------- */
.karaoke{background:var(--ink);overflow:hidden;padding:clamp(100px,14vw,200px) 0;text-align:center}
.karaoke__eq{display:flex;justify-content:center;align-items:flex-end;gap:clamp(3px,.5vw,8px);height:clamp(100px,16vw,220px);margin:0 var(--gut) 36px}
.karaoke__eq i{flex:1;max-width:18px;height:100%;background:linear-gradient(0deg,var(--violet),var(--neon));border-radius:2px;transform-origin:bottom;animation:eq 1.2s ease-in-out infinite alternate;box-shadow:0 0 12px rgba(63,244,255,.35)}
@keyframes eq{0%{transform:scaleY(.12)}100%{transform:scaleY(1)}}
.karaoke__title{margin:0;font-family:var(--f-display);font-weight:900;font-size:clamp(54px,12vw,200px);line-height:.86;letter-spacing:-.06em;text-transform:uppercase}
.karaoke__title .o{background:linear-gradient(90deg,var(--violet),var(--neon));-webkit-background-clip:text;background-clip:text;color:transparent}
.karaoke__title .serif{text-transform:none;font-weight:400;letter-spacing:-.02em;color:var(--neon);text-shadow:var(--glow)}
.karaoke__sub{margin:36px auto 0;max-width:36em;color:#c8c7cf;padding:0 var(--gut)}
.karaoke__badges{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:28px;padding:0 var(--gut)}
.badge{border:1px solid var(--neon);color:var(--neon);border-radius:99px;padding:8px 16px}

/* ---------- gallery ---------- */
.gallery{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(12px,2vw,24px);padding:0 var(--gut) clamp(96px,12vw,180px)}
.g{margin:0;overflow:hidden;position:relative;border-radius:2px}
.g img{width:100%;height:120%;object-fit:cover;will-change:transform}
.g figcaption{position:absolute;left:12px;bottom:10px;font-size:10px;color:#fff;mix-blend-mode:difference}
.gal1{grid-column:1/8;aspect-ratio:4/3}
.gal2{grid-column:8/13;aspect-ratio:3/4;margin-top:22%}
.gal3{grid-column:1/7;aspect-ratio:4/3;margin-top:-4%}
.gal4{grid-column:7/13;aspect-ratio:16/10;margin-top:6%}
.gal5{grid-column:4/10;aspect-ratio:16/10}

/* ---------- faq ---------- */
.faq{max-width:1100px;margin-inline:auto}
.qa{border-top:1px solid var(--line)}
.qa:last-child{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;display:grid;grid-template-columns:56px 1fr 28px;gap:12px;align-items:center;padding:28px 0;cursor:pointer;font-family:var(--f-jp);font-weight:700;font-size:clamp(18px,2.2vw,28px);line-height:1.5}
.qa summary::-webkit-details-marker{display:none}
.qa summary .mono{color:var(--neon)}
.qa summary .pm{width:28px;height:28px;position:relative}
.qa summary .pm::before,.qa summary .pm::after{content:"";position:absolute;left:4px;right:4px;top:50%;height:1.5px;background:var(--paper);transition:transform .5s var(--ease)}
.qa summary .pm::after{transform:rotate(90deg)}
.qa[open] summary .pm::after{transform:rotate(0)}
.qa summary:hover{color:var(--neon)}
.qa__a{display:grid;grid-template-columns:56px 1fr;gap:12px;padding:0 28px 32px 0;color:#c8c7cf}
.qa__a .mono{color:var(--violet)}
.qa__a p{margin:0}
.qa__a table{border-collapse:collapse;width:100%;margin-top:14px;font-size:14px}
.qa__a td{padding:10px 0;border-bottom:1px dashed var(--line)}
.qa__a td:last-child{text-align:right;font-family:var(--f-display);font-weight:500;color:var(--paper)}

/* ---------- access ---------- */
.access{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:var(--gut);align-items:stretch}
.access__addr{margin:0;font-family:var(--f-min);font-weight:800;font-size:clamp(26px,3.2vw,46px);line-height:1.45}
.access__addr small{display:block;font-family:var(--f-mono);font-weight:400;font-size:12px;letter-spacing:.14em;color:var(--mute);margin-bottom:16px}
.steps{list-style:none;margin:40px 0;padding:0;display:grid;gap:0;counter-reset:s}
.steps li{display:grid;grid-template-columns:56px 1fr auto;gap:12px;padding:18px 0;border-top:1px solid var(--line);align-items:baseline}
.steps li::before{counter-increment:s;content:"0" counter(s);font-family:var(--f-mono);font-size:12px;color:var(--neon)}
.steps li span:last-child{font-family:var(--f-mono);font-size:12px;color:var(--mute)}
.info{display:grid;grid-template-columns:auto 1fr;gap:12px 28px;font-size:14px;margin:0}
.info dt{color:var(--mute)}
.info dd{margin:0}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.btn{position:relative;display:inline-flex;align-items:center;gap:12px;padding:18px 28px;border-radius:99px;border:1px solid var(--paper);font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;overflow:hidden;isolation:isolate;transition:color .5s var(--ease),border-color .5s}
.btn::before{content:"";position:absolute;inset:0;background:var(--neon);z-index:-1;transform:translateY(101%);border-radius:inherit;transition:transform .6s var(--ease)}
.btn:hover{color:var(--ink);border-color:var(--neon)}
.btn:hover::before{transform:none}
.btn--fill{background:var(--paper);color:var(--ink)}
.btn svg{width:14px;height:14px}
.map{position:relative;min-height:420px;border:1px solid var(--line);overflow:hidden}
.map{display:block;isolation:isolate}
.map img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.35) saturate(.8);transition:transform 1.2s var(--ease),filter .6s}
.map:hover img{transform:scale(1.05);filter:brightness(.5) saturate(1.1)}
.map__ring{position:absolute;left:50%;top:46%;width:14px;height:14px;margin:-7px;border-radius:50%;background:var(--neon);box-shadow:0 0 18px var(--neon)}
.map__ring::before,.map__ring::after{content:"";position:absolute;inset:-14px;border-radius:50%;border:1px solid var(--neon);animation:ping 2.4s var(--ease) infinite}
.map__ring::after{animation-delay:1.2s}
.map__label{position:absolute;left:24px;right:24px;bottom:22px;display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;color:var(--paper)}
.map__label b{font-family:var(--f-display);font-weight:500;font-size:clamp(18px,2vw,26px);letter-spacing:-.02em}

/* ---------- footer ---------- */
.ft{position:relative;overflow:hidden;padding:clamp(80px,10vw,140px) var(--gut) 28px;background:var(--ink-2);border-top:1px solid var(--line)}
.ft__cta{display:grid;grid-template-columns:1fr auto;gap:var(--gut);align-items:center;margin-bottom:clamp(60px,8vw,120px)}
.ft__cta p{margin:0;font-family:var(--f-min);font-weight:800;font-size:clamp(32px,5.4vw,88px);line-height:1.3}
.ft__cta p .serif{font-family:var(--f-min);font-style:normal;font-weight:800;color:var(--neon);text-shadow:var(--glow)}
.seal{width:clamp(140px,16vw,220px);aspect-ratio:1;position:relative}
.seal svg{position:absolute;inset:0;animation:spin 22s linear infinite}
.seal img{position:absolute;inset:22%;width:56%;height:56%;object-fit:cover;border-radius:50%}
@keyframes spin{to{transform:rotate(360deg)}}
.ft__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;border-top:1px solid var(--line);padding-top:28px;font-size:14px}
.ft__grid h4{margin:0 0 10px;color:var(--mute);font-weight:400}
.ft__grid a{display:inline-block;position:relative}
.ft__grid a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.ft__grid a:hover::after{transform:scaleX(1);transform-origin:left}
.ft__word{margin:clamp(40px,6vw,80px) 0 0;font-family:var(--f-display);font-weight:900;font-size:14vw;width:max-content;line-height:.78;letter-spacing:-.065em;white-space:nowrap;color:var(--paper);user-select:none;transform:translateX(-.02em)}
.ft__word span{display:inline-block}
.ft__base{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-top:20px;color:var(--mute)}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .nums{grid-template-columns:repeat(3,1fr)}
  .nums .num:nth-child(3){border-right:0}
  .nums .num:nth-child(n+4){border-top:1px solid var(--line)}
  .calc{grid-template-columns:1fr}
  .calc__ctrl{border-right:0;border-bottom:1px solid var(--line)}
}
@media (max-width:767px){
  body{font-size:15px}
  .hd{grid-template-columns:auto 1fr;padding-block:14px}
  .hd .status{display:none}
  .night__clock{display:none}
  .hero__status{display:flex!important}
  .hero__foot{grid-template-columns:1fr 1fr;row-gap:14px}
  .hero__top{flex-direction:column-reverse;gap:14px}
  .hero__tate{text-align:left;font-size:16px}
  .hero__title{font-size:clamp(68px,21vw,140px)}
  .hero__scroll{display:none}
  .sec-head{grid-template-columns:1fr;gap:14px}
  .sec-head__ja{text-align:left}
  .manifesto__grid,.hosts,.access,.menu__body{grid-template-columns:1fr}
  .manifesto__side{position:static}
  .nums{grid-template-columns:1fr 1fr}
  .nums .num{min-height:170px;border-top:1px solid var(--line)}
  .nums .num:nth-child(odd){border-right:1px solid var(--line)}
  .nums .num:nth-child(even){border-right:0}
  .nums .num:nth-child(-n+2){border-top:0}
  .nums .num:last-child{grid-column:1/-1;border-right:0}
  .night__pin{height:auto;padding:96px 0}
  .night__track{flex-direction:column;width:auto;transform:none!important}
  .moment{width:auto;min-height:0;gap:10px}
  .moment--img{height:240px}
  .night__progress{display:none}
  .plans,.perks{grid-template-columns:1fr}
  .perk{padding:18px 0;border-bottom:1px solid var(--line)}
  .menu__big{position:static;font-size:52px}
  .tabs{top:56px}
  .gallery{grid-template-columns:1fr 1fr}
  .gal1{grid-column:1/-1}.gal2{grid-column:1/2;margin-top:0}.gal3{grid-column:2/3;margin-top:30%;aspect-ratio:3/4}.gal4,.gal5{grid-column:1/-1;margin-top:0}
  .qa summary{grid-template-columns:40px 1fr 24px}
  .qa__a{grid-template-columns:40px 1fr;padding-right:0}
  .map{min-height:320px}
  .ft__cta{grid-template-columns:1fr}
  .ft__grid{grid-template-columns:1fr 1fr}
  .steps li{grid-template-columns:40px 1fr}
  .steps li span:last-child{grid-column:2}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .marquee__track{animation:none}
}

/* ================================================================
   ここから下: 参考デザインに足した部品（見出しの文字・各ページ共通）
   ================================================================ */
.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--neon);color:var(--ink);padding:10px 16px;border-radius:99px;font-family:var(--f-mono);font-size:12px}
.skip:focus{top:12px}
.hero__h1{margin:0;font-family:var(--f-jp);font-weight:700;font-size:clamp(13px,1.2vw,16px);letter-spacing:.12em;color:var(--paper)}
.hero__title{margin:0}
.more{display:inline-flex;align-items:center;gap:10px;margin-top:28px;font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;color:var(--neon);border-bottom:1px solid currentColor;padding-bottom:4px}
.more:hover{color:var(--paper)}
.menu .more{color:#5b2fd6}
.menu .more:hover{color:var(--ink)}
.menu__panel[hidden]{display:none}
.menu__panel h3.sr{position:absolute}
.nav__list a span{text-align:right}
.ft__grid li{list-style:none}
.ft__grid ul{margin:0;padding:0;display:grid;gap:4px}
.ft__nap p{margin:0}
.updated{margin:0;padding:0 var(--gut) 24px;color:var(--mute);font-size:12px;text-align:right}

/* ---------- 下層ページ ---------- */
.ph{position:relative;padding:clamp(130px,18vw,220px) var(--gut) clamp(48px,7vw,96px);overflow:hidden;isolation:isolate;border-bottom:1px solid var(--line)}
.ph::before{content:"";position:absolute;inset:0;z-index:-2;background:url(img/hero.webp) center/cover no-repeat;filter:brightness(.18) saturate(.6)}
.ph::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(80% 90% at 85% 0%,rgba(63,244,255,.16),transparent 60%),linear-gradient(180deg,transparent 40%,var(--ink))}
.ph__en{margin:0 0 18px;color:var(--neon);display:flex;gap:14px;align-items:center}
.ph__en::before{content:"";width:36px;height:1px;background:currentColor}
.ph h1{margin:0;font-family:var(--f-min);font-weight:800;font-size:clamp(30px,5.4vw,76px);line-height:1.3;letter-spacing:.02em;max-width:18em}
.ph__lead{margin:24px 0 0;max-width:40em;color:#c8c7cf;font-size:clamp(15px,1.3vw,17px)}
.ph .btns{margin-top:28px}
.crumb{padding:18px var(--gut) 0}
.crumb ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;color:var(--mute)}
.crumb li+li::before{content:"/";margin-right:8px;opacity:.5}
.crumb a:hover{color:var(--neon)}
.blk{padding:clamp(48px,7vw,104px) var(--gut) 0;max-width:1240px;margin-inline:auto}
.blk:last-of-type{padding-bottom:clamp(48px,7vw,104px)}
h2.sec{padding:0;margin:0 0 clamp(24px,3vw,40px);font-family:var(--f-min);font-weight:800;font-size:clamp(24px,3.2vw,42px);line-height:1.35;letter-spacing:.02em;display:flex;gap:16px;align-items:baseline}
h2.sec::before{content:"";flex:none;width:10px;height:10px;border-radius:50%;background:var(--neon);box-shadow:0 0 14px var(--neon);transform:translateY(-.15em)}
h2.q{margin:56px 0 18px;font-family:var(--f-min);font-weight:800;font-size:clamp(22px,2.6vw,34px);line-height:1.45}
.lead{color:#c8c7cf;max-width:44em;margin:-8px 0 28px}
.kw{color:var(--mute);font-size:13px}
.grid{display:grid;gap:clamp(14px,2vw,24px)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.blk .card{border:1px solid var(--line);background:linear-gradient(160deg,var(--ink-2),var(--ink) 70%);padding:clamp(22px,3vw,36px);border-radius:2px;position:relative;overflow:hidden}
.blk .card h3{margin:0 0 10px;font-family:var(--f-jp);font-weight:700;font-size:clamp(17px,1.6vw,21px);line-height:1.5}
.blk .card p{margin:0;color:#c8c7cf}
.blk .card p+p{margin-top:8px}
.tag{display:inline-block;margin-bottom:14px;border:1px solid var(--neon);color:var(--neon);border-radius:99px;padding:4px 12px;font-family:var(--f-mono);font-size:11px;letter-spacing:.12em}
.tag.gray{border-color:var(--line);color:var(--mute)}
.blk a:not(.btn):not(.more){color:var(--neon);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.blk a:not(.btn):not(.more):hover{color:var(--paper)}
.photo{overflow:hidden;border-radius:2px;border:1px solid var(--line)}
.photo img{width:100%;height:100%;object-fit:cover}
.photo.wide{aspect-ratio:4/3}
.photo.tall{aspect-ratio:3/4}
.figcap{margin-top:10px;font-size:12px;color:var(--mute)}
.table-wrap{overflow-x:auto;border:1px solid var(--line)}
.blk table{border-collapse:collapse;width:100%;font-size:14px}
.blk th{text-align:left;font-family:var(--f-mono);font-weight:400;font-size:11px;letter-spacing:.12em;color:var(--mute);padding:12px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
.blk td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.blk tr:last-child td{border-bottom:0}
.blk td.num{text-align:right;font-family:var(--f-display);font-weight:500;letter-spacing:-.02em;white-space:nowrap;font-variant-numeric:tabular-nums}
.blk tr:hover td{background:rgba(63,244,255,.05)}
.facts h2{margin:0 0 18px;font-family:var(--f-min);font-weight:800;font-size:clamp(22px,2.4vw,30px)}
.blk .info{grid-template-columns:7em 1fr;gap:0}
.blk .info dt,.blk .info dd{padding:12px 0;border-top:1px solid var(--line)}
.blk .info dt{font-family:var(--f-jp);font-size:13px}
.step{display:grid;grid-template-columns:40px 1fr;gap:14px;padding:16px 0;border-bottom:1px solid var(--line);color:#c8c7cf}
.step .n{font-family:var(--f-display);font-weight:800;font-size:22px;color:var(--neon);line-height:1.3}
.step b{color:var(--paper)}
.news{border-top:1px solid var(--line);padding:22px 0}
.news:last-of-type{border-bottom:1px solid var(--line)}
.news .d{font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;color:var(--neon)}
.news h3{margin:6px 0 8px;font-size:clamp(17px,1.6vw,21px);line-height:1.5}
.news p{color:#c8c7cf}
.blk.faq details{border-top:1px solid var(--line)}
.blk.faq details:last-of-type{border-bottom:1px solid var(--line)}
.blk.faq summary{list-style:none;cursor:pointer;padding:22px 40px 22px 0;position:relative;font-weight:700;font-size:clamp(16px,1.6vw,20px);line-height:1.5}
.blk.faq summary::-webkit-details-marker{display:none}
.blk.faq summary::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);font-family:var(--f-display);font-weight:300;font-size:26px;color:var(--neon);transition:transform .4s var(--ease)}
.blk.blk.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.blk.faq summary:hover{color:var(--neon)}
.blk.faq .a{padding:0 0 24px;color:#c8c7cf}
.story p{color:#c8c7cf;max-width:40em}
.avatar{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;margin-bottom:16px;font-family:var(--f-display);font-weight:800;font-size:24px;color:var(--ink);background:linear-gradient(135deg,var(--violet),var(--neon));box-shadow:0 0 24px rgba(63,244,255,.35)}
.cta-band{margin:clamp(56px,8vw,120px) var(--gut) clamp(40px,6vw,80px);border:1px solid var(--line);padding:clamp(28px,4vw,56px);display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;background:radial-gradient(120% 120% at 100% 0%,rgba(63,244,255,.12),transparent 60%)}
.cta-band h2{margin:0 0 8px;font-family:var(--f-min);font-weight:800;font-size:clamp(24px,3vw,40px)}
.cta-band p{margin:0;color:#c8c7cf}
.cta-band .btns{margin:0}
@media (max-width:900px){
  .g3{grid-template-columns:1fr 1fr}
}
@media (max-width:767px){
  .g2,.g3{grid-template-columns:1fr}
  .cta-band{grid-template-columns:1fr}
  .blk .info{grid-template-columns:5.5em 1fr}
  .ft__grid{grid-template-columns:1fr}
}
.ft__cta p.ft__sub{margin-top:18px;font-family:var(--f-jp);font-weight:400;font-size:15px;line-height:1.8;color:#c8c7cf}
.ft__cta .btns{margin-top:24px}
.ft__grid h2{margin:0 0 10px;color:var(--mute);font-weight:400}
main,.ft{overflow-x:clip}
@media (max-width:767px){.plan__price small{display:block;margin:10px 0 0}}