/* Kaito Uno Theme — Main CSS */
:root {
  --bg:#07070a;--bg2:#0d0c12;--bg3:#120f1a;
  --red:#CC1111;--red2:#ff3030;
  --gold:#D4AF37;--gold2:#FFD700;--gold3:#C9941A;
  --gold-glow:rgba(212,175,55,0.35);
  --white:#F5F3EE;--gray:#777;--gray2:#2a2829;--gray3:#1a1820;
  --grad:linear-gradient(135deg,var(--red),var(--gold));
  --fd:'Bebas Neue',sans-serif;--fj:'Noto Serif JP',serif;
  /* WordPress Customizer から上書き */
  --bg-hero-img:none;
  --bg-closeup-img:none;
}


*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
body{background:var(--bg);color:var(--white);font-family:var(--fj);overflow-x:hidden;max-width:100%}
::selection{background:var(--gold);color:#000}
::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:linear-gradient(var(--red),var(--gold))}

/* CURSOR TRAIL */
.cursor-dot{position:fixed;pointer-events:none;z-index:9999;border-radius:50%;transform:translate(-50%,-50%);transition:opacity .6s}

/* PROGRESS */
.pgb{position:fixed;top:0;left:0;height:3px;background:linear-gradient(to right,var(--red),var(--gold),var(--red));z-index:2000;pointer-events:none;box-shadow:0 0 8px var(--gold-glow)}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:1000;padding:20px 48px;display:flex;justify-content:space-between;align-items:center;transition:all .4s}
nav.sc{background:rgba(7,7,10,.97);backdrop-filter:blur(16px);padding:14px 48px;border-bottom:1px solid rgba(212,175,55,.2)}
.nl{font-family:var(--fd);font-size:20px;letter-spacing:5px;text-decoration:none;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.nm{display:flex;gap:32px;list-style:none}
.nm a{font-family:var(--fd);font-size:12px;letter-spacing:4px;color:var(--gray);text-decoration:none;transition:all .3s;position:relative}
.nm a::after{content:'';position:absolute;bottom:-3px;left:0;width:0;height:1px;background:var(--grad);transition:width .3s}
.nm a:hover{color:var(--gold)}.nm a:hover::after{width:100%}

/* HERO */
#home{min-height:100vh;position:relative;overflow:hidden;display:flex;align-items:flex-end}
.h-img{position:absolute;inset:0;background:var(--bg-hero-img) center 20%/cover no-repeat}
.h-grad{position:absolute;inset:0;background:linear-gradient(to right,rgba(7,7,10,.97) 32%,rgba(7,7,10,.5) 60%,rgba(7,7,10,.1) 100%)}
.h-grad2{position:absolute;inset:0;background:linear-gradient(to top,rgba(7,7,10,.95) 0%,transparent 45%)}
/* gold vignette top */
.h-glow{position:absolute;top:-100px;left:-100px;width:500px;height:500px;background:radial-gradient(circle,rgba(212,175,55,.12),transparent 65%);animation:goldpulse 4s ease infinite}
@keyframes goldpulse{0%,100%{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.1)}}
.h-vl{position:absolute;right:48px;top:0;bottom:0;width:1px;background:linear-gradient(to bottom,transparent 5%,var(--gold) 50%,transparent 95%);opacity:.5}
.h-yr{position:absolute;right:62px;top:50%;transform:translateY(-50%) rotate(90deg);font-family:var(--fd);font-size:10px;letter-spacing:5px;color:var(--gold);opacity:.6}
.h-body{position:relative;z-index:1;padding:0 48px 80px;max-width:700px}
.h-tag{font-family:var(--fd);font-size:10px;letter-spacing:6px;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:18px;animation:su 1s ease .2s both}
.h-jp{font-family:var(--fj);font-weight:900;font-size:clamp(48px,8.5vw,150px);line-height:.88;letter-spacing:-2px;animation:su 1s ease .4s both;position:relative;white-space:nowrap}
.h-en{font-family:var(--fd);font-size:clamp(42px,7vw,96px);letter-spacing:14px;color:transparent;-webkit-text-stroke:1px var(--white);line-height:1.1;margin-top:4px;animation:su 1s ease .55s both}
.h-rl{display:flex;align-items:center;gap:16px;margin-top:20px;animation:su 1s ease .7s both}
.h-rl-l{width:40px;height:1px;background:var(--grad)}
.h-rl-t{font-family:var(--fd);font-size:11px;letter-spacing:5px;color:var(--gray)}
.h-role{font-family:var(--fd);font-size:10px;letter-spacing:3px;color:rgba(212,175,55,.5);margin-top:12px;animation:su 1s ease .85s both}
/* hero star particles */
#particles{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.pt{position:absolute;border-radius:50%;pointer-events:none;animation:ptfloat linear infinite}
@keyframes ptfloat{0%{transform:translateY(0) rotate(0);opacity:0}10%{opacity:1}90%{opacity:.6}100%{transform:translateY(-100vh) rotate(720deg);opacity:0}}

/* GLITCH */
.glitch{position:relative}
.glitch::before,.glitch::after{content:attr(data-text);position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}
.glitch::before{left:2px;text-shadow:-1px 0 var(--red);clip-path:polygon(0 0,100% 0,100% 30%,0 30%);animation:g1 5s infinite}
.glitch::after{left:-2px;text-shadow:1px 0 var(--gold);clip-path:polygon(0 70%,100% 70%,100% 100%,0 100%);animation:g2 5s infinite .8s}
@keyframes g1{0%,88%,100%{opacity:0;transform:none}89%{opacity:1;transform:translate(-2px,1px) skewX(-1deg)}91%{opacity:0}93%{opacity:1;transform:translate(2px,-1px)}95%{opacity:0}}
@keyframes g2{0%,84%,100%{opacity:0;transform:none}85%{opacity:1;transform:translate(3px,2px)}87%{opacity:0}89%{opacity:1;transform:translate(-2px,-1px)}91%{opacity:0}}

/* SCROLL INDICATOR */
.scroll-ind{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;animation:fadeInUp 1.5s ease 1.5s both;z-index:2}
.scroll-ind span{font-family:var(--fd);font-size:9px;letter-spacing:5px;color:var(--gold);opacity:.7}
.scroll-arrow{width:1px;height:40px;background:linear-gradient(to bottom,var(--gold),transparent);animation:scrollpulse 2s ease infinite}
@keyframes scrollpulse{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@keyframes fadeInUp{from{opacity:0;transform:translate(-50%,20px)}to{opacity:1;transform:translate(-50%,0)}}

/* MARQUEE */
.mq{overflow:hidden;padding:12px 0;background:var(--bg2);position:relative}
.mq::before,.mq::after{content:'';position:absolute;top:0;bottom:0;width:60px;z-index:1}
.mq::before{left:0;background:linear-gradient(to right,var(--bg2),transparent)}
.mq::after{right:0;background:linear-gradient(to left,var(--bg2),transparent)}
.mqt{display:flex;white-space:nowrap;animation:mq 35s linear infinite}
.mqi{font-family:var(--fd);font-size:12px;letter-spacing:4px;color:var(--gray);padding:0 24px;flex-shrink:0}
.mqi.r{color:var(--red)}.mqi.g{color:var(--gold)}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* GOLD DIVIDER */
.rdiv{height:1px;background:linear-gradient(to right,transparent,var(--red) 30%,var(--gold) 50%,var(--red) 70%,transparent)}

/* LOVE&HATE */
#lh{background:var(--bg2);text-align:center;padding:120px 40px;position:relative;overflow:hidden}
.lhr{position:absolute;border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%);animation:pu 5s ease infinite}
.lhr:nth-child(1){width:680px;height:680px;border:1px solid rgba(212,175,55,.06)}
.lhr:nth-child(2){width:460px;height:460px;border:1px solid rgba(212,175,55,.12);animation-delay:1.5s}
.lhr:nth-child(3){width:240px;height:240px;border:1px solid rgba(204,17,17,.2);animation-delay:3s}
@keyframes pu{0%,100%{opacity:.5;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.04)}}
.lh-logo{position:relative;z-index:1;margin:0 auto 40px;display:flex;justify-content:center}
.lh-logo img{width:clamp(220px,32vw,420px);height:auto;display:block;filter:drop-shadow(0 18px 50px rgba(204,17,17,.25))}
.lhs{font-family:var(--fj);font-weight:300;font-size:clamp(13px,2vw,17px);letter-spacing:3px;color:var(--gray);position:relative;z-index:1;text-wrap:pretty}
.gal-sub,.cu-s,.shop-sub,.dm-desc,.dm-credits,.nm-body{text-wrap:pretty}

/* GALLERY */
#gallery{display:grid;grid-template-columns:1fr 1fr;min-height:85vh}
.gal-l{position:relative;overflow:hidden}
.gal-l img{width:100%;height:100%;object-fit:cover;object-position:center 20%;display:block;transition:transform .8s,filter .5s;filter:brightness(.88) saturate(1.1)}
.gal-l:hover img{transform:scale(1.04);filter:brightness(1) saturate(1.2)}
.gal-l::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,transparent 50%,rgba(7,7,10,.6));pointer-events:none}
.gal-r{background:var(--bg3);display:flex;flex-direction:column;justify-content:center;padding:80px 56px;position:relative;overflow:hidden}
.gal-r::before{content:'';position:absolute;top:0;left:0;width:2px;height:100%;background:linear-gradient(to bottom,transparent,var(--gold),transparent)}
/* animated gold corner */
.gal-corner{position:absolute;top:20px;right:20px;width:60px;height:60px;border-top:2px solid var(--gold);border-right:2px solid var(--gold);opacity:.4;animation:cornerpulse 3s ease infinite}
@keyframes cornerpulse{0%,100%{opacity:.2}50%{opacity:.7}}
.gal-cat{font-family:var(--fd);font-size:10px;letter-spacing:6px;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:16px}
.gal-ttl{font-family:var(--fj);font-weight:900;font-size:clamp(30px,4vw,54px);line-height:1.2;margin-bottom:24px}
.gal-sub{font-family:var(--fj);font-weight:300;font-size:15px;line-height:2.2;color:rgba(245,243,238,.65);margin-bottom:36px}
.gal-tags{display:flex;flex-wrap:wrap;gap:8px}
.gal-tag{font-family:var(--fd);font-size:10px;letter-spacing:3px;border:1px solid rgba(212,175,55,.3);padding:5px 12px;color:rgba(212,175,55,.7);transition:all .3s}
.gal-tag:hover{border-color:var(--gold);color:var(--gold);background:rgba(212,175,55,.05)}

/* CLOSEUP */
#cu{position:relative;overflow:hidden;min-height:60vh;display:flex;align-items:center}
.cu-img{position:absolute;inset:0;background:var(--bg-closeup-img) center 40%/cover no-repeat;filter:brightness(.5) saturate(1.1)}
.cu-ov{position:absolute;inset:0;background:linear-gradient(to right,rgba(7,7,10,.92) 35%,rgba(7,7,10,.15) 75%)}
.cu-body{position:relative;z-index:1;padding:0 80px;max-width:600px}
.cu-q{font-family:var(--fj);font-weight:900;font-size:clamp(20px,3.4vw,40px);line-height:1.35;margin-bottom:20px;word-break:keep-all}
.cu-q .r,.cu-q .g{display:inline-block;white-space:nowrap}
.cu-q .r{color:var(--red)}.cu-q .g{background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.cu-s{font-family:var(--fj);font-weight:300;font-size:15px;line-height:2.2;color:rgba(245,243,238,.65)}

/* MANIFESTO */

.s-label{font-family:var(--fd);font-size:10px;letter-spacing:7px;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:14px}
.s-title{font-family:var(--fd);font-size:clamp(52px,8vw,110px);letter-spacing:6px;line-height:1;margin-bottom:70px}

.mfh .r{color:var(--red)}

.mfp+





/* DISCO */
#disco{padding:110px 48px;background:var(--bg)}
.disco-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:3px}
.dc{position:relative;overflow:hidden;cursor:pointer;aspect-ratio:1;transition:transform .3s}
.dc:hover{transform:translateY(-6px)}
.dc::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,transparent,rgba(212,175,55,.05));opacity:0;transition:opacity .4s;z-index:1;pointer-events:none}
.dc:hover::before{opacity:1}
.dcin{box-sizing:border-box;width:100%;height:100%;background:var(--bg3);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:32px;transition:transform .5s}
.dc:hover .dcin{transform:scale(1.03)}
.dcart{width:130px;height:130px;border:1px solid rgba(212,175,55,.2);display:flex;align-items:center;justify-content:center;position:relative}
.dcart::before{content:'';position:absolute;inset:-4px;border:1px solid rgba(212,175,55,.1);animation:artpulse 3s ease infinite}
@keyframes artpulse{0%,100%{opacity:0;transform:scale(1)}50%{opacity:1;transform:scale(1.04)}}
.dcart.dash{border-style:dashed;border-color:#222}
.dcnum{font-family:var(--fd);font-size:10px;letter-spacing:4px;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:8px;text-align:center}
.dcttl{font-family:var(--fj);font-weight:700;font-size:17px;line-height:1.5;text-align:center}
.dcdt{font-family:var(--fd);font-size:10px;letter-spacing:2px;color:var(--gray);text-align:center}
.dcov{position:absolute;inset:0;background:linear-gradient(135deg,rgba(140,8,8,.93),rgba(100,80,10,.93));display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;transition:opacity .4s;padding:28px;text-align:center}
.dc:hover .dcov{opacity:1}
.dcov-t{font-family:var(--fj);font-weight:900;font-size:17px;margin-bottom:10px;line-height:1.5}
.dcov-c{font-family:var(--fd);font-size:10px;letter-spacing:3px;color:rgba(255,255,255,.7);margin-bottom:14px}
.dcov-open{font-family:var(--fd);font-size:10px;letter-spacing:4px;border:1px solid var(--gold);padding:7px 18px;color:var(--gold);margin-top:8px;transition:all .3s}
.dcov-open:hover{background:var(--gold);color:#000}
.dctags{display:flex;flex-wrap:wrap;gap:7px;justify-content:center}
.dctag{font-family:var(--fd);font-size:9px;letter-spacing:3px;border:1px solid rgba(255,255,255,.3);padding:3px 9px;color:rgba(255,255,255,.85)}

/* VIDEO */
#mv{background:#050409;padding:110px 48px}
.mv-player{width:100%;aspect-ratio:16/9;background:#000;display:block;outline:none;border:1px solid rgba(212,175,55,.15)}
.mv-player:focus{outline:2px solid var(--gold);outline-offset:4px}
.mv-info{display:flex;justify-content:space-between;align-items:center;padding:18px 0;border-bottom:1px solid rgba(212,175,55,.1);margin-top:14px}
.mv-info-l{font-family:var(--fj);font-weight:700;font-size:18px}
.mv-info-r{font-family:var(--fd);font-size:10px;letter-spacing:4px;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.mv-credits{font-family:var(--fd);font-size:11px;letter-spacing:3px;color:var(--gray);padding-top:12px}

/* NEWS */
#ns{background:var(--bg2);padding:110px 48px}
.news-hdr{display:flex;justify-content:space-between;align-items:flex-end}
.news-all{font-family:var(--fd);font-size:11px;letter-spacing:4px;color:var(--gold);opacity:.6;text-decoration:none;border-bottom:1px solid rgba(212,175,55,.3);padding-bottom:4px;cursor:pointer;transition:all .3s}
.news-all:hover{opacity:1}
.nl2{border-top:1px solid rgba(212,175,55,.1);margin-top:60px}
.ni{display:flex;gap:44px;align-items:flex-start;padding:26px 0;border-bottom:1px solid rgba(212,175,55,.07);transition:background .3s;cursor:pointer;position:relative}
.ni:hover{background:rgba(212,175,55,.03)}
.ni::after{content:'→';position:absolute;right:0;top:50%;transform:translateY(-50%);font-family:var(--fd);font-size:18px;color:var(--gray2);transition:color .3s}
.ni:hover::after{color:var(--gold)}
.ni-date{font-family:var(--fd);font-size:12px;letter-spacing:2px;color:var(--gray);flex-shrink:0;padding-top:2px;min-width:90px}
.ni-cat{font-family:var(--fd);font-size:9px;letter-spacing:4px;color:var(--gold);border:1px solid rgba(212,175,55,.5);padding:3px 10px;display:inline-block;margin-bottom:8px}
.ni-cat.release{color:var(--red);border-color:var(--red)}
.ni-cat.dim{border-color:#2a2829;color:#333}
.ni-h{font-family:var(--fj);font-size:15px;font-weight:400;line-height:1.7}
.ni-h.dim{color:#333}

/* SHOP */
#shop{padding:110px 48px;background:var(--bg);text-align:center;position:relative;overflow:hidden}
.shop-bg{position:absolute;inset:0;background:radial-gradient(ellipse at 60% 40%,rgba(212,175,55,.08) 0%,transparent 50%),radial-gradient(ellipse at 30% 60%,rgba(204,17,17,.08) 0%,transparent 50%)}
.shop-label{font-family:var(--fd);font-size:10px;letter-spacing:7px;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:16px;position:relative;z-index:1}
.shop-title{font-family:var(--fd);font-size:clamp(60px,10vw,140px);letter-spacing:8px;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(212,175,55,.4);margin-bottom:16px;position:relative;z-index:1;animation:titlepulse 4s ease infinite}
@keyframes titlepulse{0%,100%{-webkit-text-stroke-color:rgba(212,175,55,.4)}50%{-webkit-text-stroke-color:rgba(212,175,55,.9)}}
.shop-sub{font-family:var(--fj);font-weight:300;font-size:15px;color:var(--gray);margin-bottom:52px;letter-spacing:2px;position:relative;z-index:1}
.shop-btn{display:inline-block;font-family:var(--fd);font-size:14px;letter-spacing:6px;color:#000;background:linear-gradient(135deg,var(--gold) 0%,var(--gold2) 50%,var(--gold3) 100%);background-size:200%;padding:20px 64px;text-decoration:none;transition:all .4s;position:relative;z-index:1;border:none}
.shop-btn:hover{background-position:100%;transform:translateY(-4px);box-shadow:0 12px 40px rgba(212,175,55,.3)}
.shop-note{font-family:var(--fd);font-size:10px;letter-spacing:3px;color:var(--gray2);margin-top:22px;position:relative;z-index:1}

/* FOOTER */
footer{background:#000;padding:80px 48px 50px;border-top:1px solid rgba(212,175,55,.1);display:flex;flex-direction:column;align-items:center;gap:44px;position:relative;overflow:hidden}
footer::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:var(--grad)}
.ftn{font-family:var(--fd);font-size:clamp(44px,8vw,110px);letter-spacing:14px;color:transparent;-webkit-text-stroke:1px rgba(212,175,55,.15)}
.fts{display:flex;gap:32px;flex-wrap:wrap;justify-content:center}
.fts a{font-family:var(--fd);font-size:11px;letter-spacing:4px;color:var(--gray);text-decoration:none;transition:color .3s}
.fts a:hover{color:var(--gold)}
.ftc{font-family:var(--fd);font-size:10px;letter-spacing:3px;color:rgba(212,175,55,.25)}

/* FLOATING CHIBI (fixed) */

50%{transform:translateY(-10px)}}

/* REVEAL */
.rv{opacity:0;transform:translateY(32px);transition:opacity .9s ease,transform .9s ease}
.rv.on{opacity:1;transform:translateY(0)}
.rv.d1{transition-delay:.1s}.rv.d2{transition-delay:.2s}.rv.d3{transition-delay:.3s}.rv.d4{transition-delay:.4s}
@keyframes su{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}

/* MODAL */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:5000;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .35s;padding:20px;backdrop-filter:blur(10px)}
.modal-bg.open{opacity:1;pointer-events:all}
.modal{background:var(--bg3);border:1px solid rgba(212,175,55,.2);max-width:680px;width:100%;max-height:88vh;overflow-y:auto;position:relative;transform:translateY(24px) scale(.97);transition:transform .35s}
.modal-bg.open .modal{transform:translateY(0) scale(1)}
.modal::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--grad)}
.modal::-webkit-scrollbar{width:3px}.modal::-webkit-scrollbar-thumb{background:linear-gradient(var(--red),var(--gold))}
.modal-close{position:absolute;top:18px;right:18px;font-family:var(--fd);font-size:14px;letter-spacing:2px;color:var(--gray);cursor:pointer;background:none;border:none;transition:color .3s}
.modal-close:hover{color:var(--gold)}
.dm-hd{padding:44px 44px 24px;border-bottom:1px solid rgba(212,175,55,.12);display:flex;gap:28px;align-items:flex-start}
.dm-art{width:90px;height:90px;background:var(--bg2);border:1px solid rgba(212,175,55,.2);flex-shrink:0;display:flex;align-items:center;justify-content:center}
.dm-num{font-family:var(--fd);font-size:10px;letter-spacing:4px;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:8px}
.dm-title{font-family:var(--fj);font-weight:900;font-size:clamp(18px,3vw,28px);line-height:1.35;margin-bottom:8px}
.dm-date{font-family:var(--fd);font-size:11px;letter-spacing:3px;color:var(--gray)}
.dm-bd{padding:28px 44px}
.dm-sl{font-family:var(--fd);font-size:10px;letter-spacing:5px;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid rgba(212,175,55,.1);margin-top:24px}
.dm-bd > .dm-sl:first-child{margin-top:0}
#dmSS .dm-sl{margin-top:24px}
.dm-credits{font-family:var(--fj);font-weight:300;font-size:14px;line-height:2.1;color:rgba(245,243,238,.7)}
.dm-desc{font-family:var(--fj);font-weight:300;font-size:15px;line-height:2.2;color:rgba(245,243,238,.75)}
.dm-tags{display:flex;flex-wrap:wrap;gap:8px}
.dm-tag{font-family:var(--fd);font-size:10px;letter-spacing:3px;border:1px solid rgba(212,175,55,.3);padding:5px 12px;color:rgba(212,175,55,.8)}
.dm-streaming{display:flex;gap:10px;flex-wrap:wrap}
.dm-slink{font-family:var(--fd);font-size:11px;letter-spacing:3px;background:var(--bg2);border:1px solid rgba(212,175,55,.2);padding:10px 18px;text-decoration:none;color:var(--gray);transition:all .3s}
.dm-slink:hover{border-color:var(--gold);color:var(--gold)}
.nm-hd{padding:44px 44px 22px;border-bottom:1px solid rgba(212,175,55,.12)}
.nm-cat{font-family:var(--fd);font-size:9px;letter-spacing:4px;color:var(--gold);border:1px solid rgba(212,175,55,.5);padding:4px 12px;display:inline-block;margin-bottom:12px}
.nm-date{font-family:var(--fd);font-size:11px;letter-spacing:3px;color:var(--gray);margin-bottom:10px}
.nm-title{font-family:var(--fj);font-weight:900;font-size:clamp(16px,2.5vw,26px);line-height:1.4}
.nm-body{padding:28px 44px;font-family:var(--fj);font-weight:300;font-size:15px;line-height:2.4;color:rgba(245,243,238,.75)}

@media(max-width:768px){
  nav{padding:16px 22px}nav.sc{padding:12px 22px}.nm{display:none}
  #home .h-body{padding:0 22px 60px}.h-vl,.h-yr,.scroll-ind{display:none}
  #gallery{grid-template-columns:1fr}.gal-r{padding:50px 26px}
  .cu-body{padding:0 26px}
  
  #disco,#mv,#ns,#shop{padding:80px 22px}
  footer{padding:60px 22px 40px}
  .ni{gap:14px;flex-direction:column}.ni::after{display:none}
  .dm-hd{padding:28px;flex-direction:column}.dm-bd{padding:20px 28px}
  .nm-hd{padding:28px}.nm-body{padding:20px 28px}
  /* 見出しをモバイル幅に収める（DISCOGRAPHY等の長い1語対策） */
  .s-title{font-size:clamp(28px,8vw,42px);letter-spacing:2px;margin-bottom:48px;word-break:break-word;overflow-wrap:anywhere}
  .shop-title{font-size:clamp(40px,12vw,72px);letter-spacing:4px}
  .ftn{font-size:clamp(30px,8vw,56px);letter-spacing:6px;text-align:center;word-break:break-word}
  .sec-count{font-size:48px;right:22px;top:80px}
  .lh-logo img{width:clamp(180px,60vw,260px)}
  /* MV情報：縦積み＋余白 */
  .mv-info{flex-direction:column;align-items:flex-start;gap:6px}
  /* ヒーローのサブタイトルを1行に */
  .h-rl{gap:8px}.h-rl-l{width:20px}
  .h-rl-t{white-space:nowrap;letter-spacing:1.5px;font-size:10px}
  /* フッター著作権を1行に */
  .ftc{white-space:nowrap;letter-spacing:1px;font-size:9px}
  /* BASE STOREボタンを1行に */
  .shop-btn{padding:18px 36px;letter-spacing:3px;font-size:13px;white-space:nowrap}

}

/* ===== LOADER ===== */
#loader{position:fixed;inset:0;background:var(--bg);z-index:9000;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:20px;transition:opacity .6s,visibility .6s}
#loader.hide{opacity:0;visibility:hidden;pointer-events:none}
.loader-logo{font-family:var(--fd);font-size:clamp(40px,8vw,90px);letter-spacing:12px;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:loaderPulse 1.2s ease infinite}
.loader-bar-wrap{width:200px;height:2px;background:rgba(255,255,255,.1);overflow:hidden}
.loader-bar{height:100%;background:linear-gradient(to right,var(--red),var(--gold));width:0;animation:loaderFill 1.6s ease forwards}
@keyframes loaderPulse{0%,100%{opacity:.6}50%{opacity:1}}
@keyframes loaderFill{0%{width:0}100%{width:100%}}

/* ===== CLIP-PATH TITLE REVEAL ===== */
.title-reveal{overflow:hidden}
.title-reveal .s-title{transform:translateY(110%);transition:transform 1s cubic-bezier(.16,1,.3,1)}
.title-reveal.on .s-title{transform:translateY(0)}

/* ===== SPLIT TEXT ===== */
.split-char{display:inline-block;opacity:0;transform:translateY(60px) rotate(8deg);transition:opacity .5s ease,transform .5s cubic-bezier(.16,1,.3,1)}
.split-char.on{opacity:1;transform:translateY(0) rotate(0)}

/* ===== 3D TILT CARD ===== */
.dc{transform-style:preserve-3d;perspective:800px}
.dc-shine{position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(255,215,0,.12),transparent 60%);opacity:0;transition:opacity .3s;pointer-events:none;z-index:2}
.dc:hover .dc-shine{opacity:1}

/* ===== PARALLAX HERO ===== */
/* handled in JS */

/* ===== CLIP REVEAL (gallery, cu) ===== */
.clip-rv{clip-path:inset(0 100% 0 0);transition:clip-path 1.1s cubic-bezier(.16,1,.3,1)}
.clip-rv.on{clip-path:inset(0 0% 0 0)}

/* ===== RUNNING TEXT (closeup) ===== */
.run-text-wrap{position:absolute;bottom:0;left:0;right:0;overflow:hidden;padding:14px 0;background:rgba(7,7,10,.6);border-top:1px solid rgba(212,175,55,.2)}
.run-text{display:flex;white-space:nowrap;animation:runtxt 18s linear infinite}
.run-item{font-family:var(--fd);font-size:11px;letter-spacing:6px;padding:0 40px;flex-shrink:0}
.run-item.r{color:var(--red)}.run-item.g{color:var(--gold)}
@keyframes runtxt{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ===== MAGNETIC BUTTON ===== */
.shop-btn{transition:all .3s cubic-bezier(.16,1,.3,1) !important}

/* ===== SCROLL PROGRESS DOTS ===== */
.scroll-dots{position:fixed;right:20px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:10px;z-index:900}
.sdot{width:6px;height:6px;border-radius:50%;border:1px solid rgba(212,175,55,.4);cursor:pointer;transition:all .3s;background:transparent}
.sdot.active{background:var(--gold);border-color:var(--gold);box-shadow:0 0 8px var(--gold-glow)}
.sdot:hover{border-color:var(--gold)}

/* ===== SECTION COUNTER ===== */
.sec-count{font-family:var(--fd);font-size:80px;position:absolute;right:48px;top:110px;color:rgba(212,175,55,.06);letter-spacing:-4px;line-height:1;pointer-events:none;user-select:none}

/* ===== REVEAL override: more variety ===== */
.rv.fromL{transform:translateX(-40px) translateY(0)}
.rv.fromL.on{transform:translateX(0)}
.rv.fromR{transform:translateX(40px) translateY(0)}
.rv.fromR.on{transform:translateX(0)}
.rv.scale{transform:scale(.92) translateY(20px)}
.rv.scale.on{transform:scale(1) translateY(0)}

/* ===== SPARKLE BURST on scroll ===== */
.spark{position:fixed;pointer-events:none;z-index:9998;animation:sparkfly .8s ease forwards}
@keyframes sparkfly{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(0)}}

/* ===== TABS ===== */
.tabs{display:flex;gap:4px;margin:48px 0 0;border-bottom:1px solid rgba(212,175,55,.15);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{font-family:var(--fd);font-size:12px;letter-spacing:4px;color:var(--gray);background:none;border:none;padding:12px 24px;cursor:pointer;position:relative;white-space:nowrap;transition:color .3s;flex-shrink:0}
.tab::after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:2px;background:var(--grad);transform:scaleX(0);transition:transform .3s cubic-bezier(.16,1,.3,1)}
.tab:hover{color:var(--white)}
.tab.active{color:var(--gold)}
.tab.active::after{transform:scaleX(1)}

/* NEWS ITEM 拡張 */
.ni-badge{display:inline-block;font-family:var(--fd);font-size:9px;letter-spacing:4px;padding:3px 10px;margin-bottom:8px;border:1px solid}
.ni-badge.NEWS{color:var(--white);border-color:rgba(255,255,255,.3)}
.ni-badge.RELEASE{color:var(--red);border-color:var(--red)}
.ni-badge.MV{color:#7ec8f0;border-color:#7ec8f0}
.ni-badge.COLUMN{color:var(--gold);border-color:rgba(212,175,55,.5)}
.ni-badge.GOODS{color:#b8f0a0;border-color:#b8f0a0}

/* MODAL 拡張 */
.modal-shop-btn{display:inline-block;font-family:var(--fd);font-size:12px;letter-spacing:5px;color:#000;background:linear-gradient(135deg,var(--gold),var(--gold2));padding:14px 40px;text-decoration:none;margin-top:24px;transition:all .3s}
.modal-shop-btn:hover{opacity:.85;transform:translateY(-2px)}
.modal-video{width:100%;aspect-ratio:16/9;background:#000;border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;margin-bottom:24px;position:relative;overflow:hidden}
.modal-video video{width:100%;height:100%;object-fit:contain}
.modal-video-placeholder{display:flex;flex-direction:column;align-items:center;gap:12px}
.modal-video-placeholder span{font-family:var(--fd);font-size:10px;letter-spacing:4px;color:var(--gray)}
.modal-divider{height:1px;background:linear-gradient(to right,transparent,rgba(212,175,55,.2),transparent);margin:24px 0}
.modal-col-label{font-family:var(--fd);font-size:10px;letter-spacing:5px;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:12px}