:root{
  --bg:#08080a; --bg2:#101015; --ink:#e9e7e4; --mute:#8b8b93;
  --crimson:#c8102e; --silver:#c9ccd1; --line:#23232a;
  --mincho: "Yu Mincho","YuMincho","Hiragino Mincho ProN","Noto Serif JP",serif;
  --sans: "Helvetica Neue","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.7;-webkit-font-smoothing:antialiased;position:relative}

/* ===== 灰が舞う背景演出 ===== */
#ash{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
/* 上からの仄かな緋い光と、画面全体のビネット */
.atmos{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(200,16,46,.10), transparent 55%),
    radial-gradient(100% 60% at 50% 110%, rgba(0,0,0,.55), transparent 60%),
    radial-gradient(140% 120% at 50% 50%, transparent 60%, rgba(0,0,0,.65));
  mix-blend-mode:normal}
/* 微細なフィルムグレイン */
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* コンテンツは演出より前面へ */
header,main,footer{position:relative;z-index:2}
a{color:inherit;text-decoration:none}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
header{position:sticky;top:0;z-index:50;background:rgba(8,8,10,.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:18px;height:60px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--mincho);letter-spacing:.14em;font-size:18px}
.brand img{height:30px;width:auto}
.nav .sp{flex:1}
.nav a.link{color:var(--mute);font-size:13px;letter-spacing:.12em}
.nav a.link:hover{color:var(--ink)}
.yt{border:1px solid var(--crimson);color:var(--crimson);padding:7px 14px;border-radius:2px;font-size:12px;letter-spacing:.1em}
.yt:hover{background:var(--crimson);color:#fff}
.hero{padding:46px 0 30px;text-align:center}
.hero .cover{max-width:880px;width:100%;border:1px solid var(--line);box-shadow:0 20px 60px rgba(0,0,0,.6);
  animation:emerge 1.6s cubic-bezier(.16,1,.3,1) both}
.hero .cover:hover{box-shadow:0 24px 80px rgba(200,16,46,.22),0 20px 60px rgba(0,0,0,.6)}
.hero .concept{font-family:var(--mincho);font-size:clamp(15px,2.4vw,20px);letter-spacing:.1em;color:var(--silver);margin:26px 0 6px;
  text-shadow:0 0 24px rgba(201,204,209,.25);animation:emerge 1.6s .25s cubic-bezier(.16,1,.3,1) both}
.hero .sub{color:var(--mute);font-size:13px;letter-spacing:.18em;animation:emerge 1.6s .4s cubic-bezier(.16,1,.3,1) both}
@keyframes emerge{from{opacity:0;transform:translateY(18px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
.cta{display:flex;gap:14px;justify-content:center;margin:26px 0 6px;flex-wrap:wrap}
.btn{padding:12px 24px;border-radius:2px;font-size:13px;letter-spacing:.12em;border:1px solid var(--line)}
.btn.fill{background:var(--crimson);border-color:var(--crimson);color:#fff}
.btn:hover{border-color:var(--silver)}
section{padding:54px 0;border-top:1px solid var(--line)}
.eyebrow{font-family:var(--mincho);font-size:12px;letter-spacing:.4em;color:var(--crimson);text-align:center;
  text-shadow:0 0 16px rgba(200,16,46,.5)}
.eyebrow::before,.eyebrow::after{content:"";display:inline-block;width:34px;height:1px;vertical-align:middle;margin:0 14px;
  background:linear-gradient(90deg,transparent,rgba(200,16,46,.6),transparent)}
.htitle{font-family:var(--mincho);font-size:clamp(22px,4vw,34px);letter-spacing:.12em;text-align:center;margin:8px 0 36px;
  text-shadow:0 0 30px rgba(201,204,209,.18)}
.albumart{margin:0 auto 36px;max-width:900px}
.albumart img{width:100%;display:block;border:1px solid var(--line);box-shadow:0 18px 50px rgba(0,0,0,.55)}
.albumart figcaption{text-align:center;color:var(--mute);font-size:12px;letter-spacing:.16em;margin-top:10px}
.track{display:grid;grid-template-columns:300px 1fr;gap:22px;align-items:start;padding:18px 0;border-bottom:1px solid var(--line)}
.player{position:relative;aspect-ratio:16/9;background:#000;border:1px solid var(--line);cursor:pointer;overflow:hidden}
.player img{width:100%;height:100%;object-fit:cover;display:block;transition:.4s;opacity:.92}
.player:hover img{opacity:1;transform:scale(1.02)}
.player .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:30px;color:#fff;text-shadow:0 2px 12px #000}
.player .badge{position:absolute;left:8px;bottom:8px;font-size:11px;letter-spacing:.1em;background:rgba(0,0,0,.6);color:var(--silver);padding:3px 8px;border:1px solid var(--line)}
.player.soon{cursor:default}
.player iframe{width:100%;height:100%;border:0;display:block}
.track h3{font-family:var(--mincho);font-size:20px;letter-spacing:.08em;display:flex;align-items:baseline;gap:12px}
.track h3 .num{color:var(--crimson);font-size:15px}
.track h3 .dur{margin-left:auto;color:var(--mute);font-size:13px;font-family:var(--sans)}
.track .role{color:var(--mute);font-size:13px;margin:4px 0 4px;letter-spacing:.06em}
.track .credit{color:var(--mute);font-size:12px;margin:0 0 10px;letter-spacing:.08em;opacity:.8}
.track .credit b{color:var(--silver);font-weight:400}
details{border-top:1px dashed var(--line);margin-top:6px}
summary{cursor:pointer;color:var(--silver);font-size:13px;letter-spacing:.14em;padding:8px 0;list-style:none}
summary::-webkit-details-marker{display:none}
summary::before{content:"▸ ";color:var(--crimson)}
details[open] summary::before{content:"▾ "}
pre.lyric{font-family:var(--mincho);white-space:pre-wrap;color:#d7d5d2;font-size:14px;line-height:2;letter-spacing:.04em;padding:6px 0 14px}
.members{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.mem{text-align:center;position:relative}
.mframe{position:relative;display:block;overflow:hidden;border:1px solid var(--line);transition:border-color .6s,box-shadow .6s}
.mem img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;
  filter:grayscale(1) brightness(.88) contrast(1.06);transition:filter .7s ease,transform .7s cubic-bezier(.16,1,.3,1)}
.mframe::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .7s ease;mix-blend-mode:screen;
  background:linear-gradient(180deg,transparent 38%,rgba(200,16,46,.5))}
.mem:hover .mframe img{filter:grayscale(.05) brightness(1) contrast(1.05);transform:scale(1.035)}
.mem:hover .mframe::after{opacity:1}
.mem:hover .mframe{border-color:rgba(200,16,46,.6);box-shadow:0 0 26px rgba(200,16,46,.3)}
.mem .nm{font-family:var(--mincho);letter-spacing:.1em;margin-top:8px}
.mem .rl{color:var(--mute);font-size:12px;letter-spacing:.08em}
.band{margin-top:30px;text-align:center}
.band img{max-width:560px;width:100%;border:1px solid var(--line)}
footer{padding:48px 0;border-top:1px solid var(--line);text-align:center;color:var(--mute);font-size:13px;letter-spacing:.08em}
footer .fmt{font-family:var(--mincho);color:var(--silver);font-size:16px;letter-spacing:.16em;margin-bottom:14px}

/* ===== 結成物語（絵本） ===== */
.story .lead{text-align:center;color:var(--mute);font-size:13px;letter-spacing:.14em;margin:-22px 0 30px}
.bookstage{perspective:2200px;perspective-origin:50% 42%;display:flex;justify-content:center;padding:10px 0 6px}
.book{--pw:clamp(150px,44vw,380px);--ph:calc(var(--pw)*1.34);
  position:relative;width:calc(var(--pw)*2);height:var(--ph);
  transform-style:preserve-3d;transition:transform .9s cubic-bezier(.2,.8,.2,1);
  transform:translateX(calc(var(--pw)/-2))}
.book.is-open{transform:translateX(0)}
.book::after{content:"";position:absolute;left:6%;right:6%;bottom:-26px;height:32px;border-radius:50%;
  background:radial-gradient(50% 100% at 50% 0,rgba(0,0,0,.6),transparent 70%);filter:blur(2px);z-index:0}
.leaf{position:absolute;top:0;left:50%;width:var(--pw);height:100%;
  transform-style:preserve-3d;transform-origin:left center;
  transition:transform 1s cubic-bezier(.3,.7,.2,1);cursor:pointer}
.leaf.is-flipped{transform:rotateY(-180deg)}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  overflow:hidden;display:flex;flex-direction:column;
  padding:clamp(15px,2.4vw,26px);border:1px solid var(--line);
  background:linear-gradient(135deg,#17171d,#0d0d11);box-shadow:inset 0 0 60px rgba(0,0,0,.5)}
.face.back{transform:rotateY(180deg)}
.face .spine{position:absolute;top:0;bottom:0;width:34px;pointer-events:none}
.face.front .spine{left:0;background:linear-gradient(90deg,rgba(0,0,0,.5),transparent)}
.face.back .spine{right:0;background:linear-gradient(270deg,rgba(0,0,0,.5),transparent)}
.illu{flex:1;min-height:0;border:1px solid var(--line);border-radius:2px;margin-bottom:14px;
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.012) 0 10px,transparent 10px 20px),
    linear-gradient(160deg,#2b2b31,#181b1e);
  display:flex;align-items:center;justify-content:center;color:#6a6a72;font-size:10px;letter-spacing:.34em}
img.illu{object-fit:cover;display:block}
.chap{font-family:var(--mincho);color:var(--crimson);font-size:12px;letter-spacing:.32em;margin-bottom:8px}
.ptitle{font-family:var(--mincho);font-size:clamp(15px,2.1vw,18px);letter-spacing:.1em;margin-bottom:10px;color:var(--silver)}
.ptext{font-family:var(--mincho);font-size:clamp(11px,1.45vw,13.5px);line-height:1.95;color:#cfcdca;letter-spacing:.03em}
.pageno{margin-top:auto;padding-top:10px;text-align:center;color:var(--mute);font-size:11px;letter-spacing:.24em}
.face.epi,.face.colophon{align-items:center;justify-content:center;text-align:center;gap:14px}
.face.epi .ptext{font-size:clamp(13px,1.8vw,15px);line-height:2.1}
.face.cover{background:radial-gradient(120% 90% at 50% 32%,#211016,#0a0a0d);
  align-items:center;justify-content:center;text-align:center;gap:14px}
.face.cover .cv-line{width:42px;height:1px;background:linear-gradient(90deg,transparent,var(--crimson),transparent)}
.face.cover .cv-brand{font-family:var(--mincho);color:var(--silver);font-size:13px;letter-spacing:.28em}
.face.cover h3{font-family:var(--mincho);font-size:clamp(21px,3vw,27px);letter-spacing:.2em;text-shadow:0 0 26px rgba(200,16,46,.45)}
.face.cover .cv-sub{font-family:var(--mincho);color:var(--mute);font-size:13px;letter-spacing:.22em}
.face.cover .cv-open{margin-top:8px;color:var(--crimson);font-size:12px;letter-spacing:.16em;
  border:1px solid var(--crimson);padding:8px 18px;border-radius:2px;transition:opacity .5s;animation:pulse 2.4s ease-in-out infinite}
.book.is-open .face.cover .cv-open{opacity:0}
@keyframes pulse{0%,100%{box-shadow:0 0 0 rgba(200,16,46,0)}50%{box-shadow:0 0 18px rgba(200,16,46,.4)}}
.bookctl{display:flex;gap:18px;justify-content:center;align-items:center;margin-top:30px}
.bookctl .pgcount{color:var(--mute);font-size:12px;letter-spacing:.16em;min-width:120px;text-align:center}
.bookctl button{cursor:pointer;background:none}
.bookctl button:disabled{opacity:.28;cursor:default}
.bookhint{text-align:center;color:var(--mute);font-size:11px;letter-spacing:.16em;margin-top:14px;opacity:.7}

/* ===== 再生中は画面が緋く燃える ===== */
.heat{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity 1.6s ease;
  background:radial-gradient(120% 90% at 50% 100%,rgba(200,16,46,.22),transparent 55%),
    radial-gradient(100% 70% at 50% -8%,rgba(200,16,46,.14),transparent 50%)}
body.is-playing .heat{opacity:1}

/* ===== スクロールリビール ===== */
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity 1s ease,transform 1s cubic-bezier(.16,1,.3,1)}
.js .reveal.is-in{opacity:1;transform:none}

/* ===== オープニング結像 ===== */
#intro{position:fixed;inset:0;z-index:100;overflow:hidden;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 90% at 50% 45%,#0c0c12,#050507);animation:introOut .9s 2.9s forwards}
#intro.is-hidden{animation:none;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .6s,visibility .6s}
@keyframes introOut{to{opacity:0;visibility:hidden;pointer-events:none}}
#introash{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.intro-inner{position:relative;z-index:1;text-align:center;animation:bloomIn 2.6s cubic-bezier(.16,1,.3,1) both}
.intro-inner img{height:52px;width:auto;margin-bottom:16px;filter:drop-shadow(0 0 18px rgba(200,16,46,.45))}
.intro-name{font-family:var(--mincho);font-size:clamp(26px,5vw,44px);letter-spacing:.3em;color:var(--ink);
  text-shadow:0 0 30px rgba(201,204,209,.3);animation:nameSpace 2.6s cubic-bezier(.16,1,.3,1) both}
.intro-sub{margin-top:14px;font-family:var(--mincho);font-size:12px;letter-spacing:.5em;color:var(--crimson)}
@keyframes bloomIn{0%{opacity:0;filter:blur(16px)}55%{opacity:1;filter:blur(0)}100%{opacity:1;filter:blur(0)}}
@keyframes nameSpace{0%{letter-spacing:.9em}100%{letter-spacing:.3em}}
.intro-skip{position:absolute;right:22px;bottom:20px;z-index:2;background:none;border:1px solid var(--line);
  color:var(--mute);font-size:11px;letter-spacing:.2em;padding:7px 14px;border-radius:2px;cursor:pointer}
.intro-skip:hover{color:var(--ink);border-color:var(--silver)}

/* ===== ストーリーブック: 燃えて朽ちる演出 ===== */
.bookstage{position:relative}
/* ページの縁を焦げて欠けた形に（ぼろぼろ） */
.face{
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='320'%20height='440'%20viewBox='0%200%20320%20440'%3E%3Cfilter%20id='f'%20x='-6%25'%20y='-6%25'%20width='112%25'%20height='112%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.013%200.018'%20numOctaves='4'%20seed='11'%20result='n'/%3E%3CfeDisplacementMap%20in='SourceGraphic'%20in2='n'%20scale='22'%20xChannelSelector='R'%20yChannelSelector='G'/%3E%3C/filter%3E%3Crect%20x='12'%20y='12'%20width='296'%20height='416'%20rx='3'%20fill='%23fff'%20filter='url(%23f)'/%3E%3C/svg%3E");
  mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='320'%20height='440'%20viewBox='0%200%20320%20440'%3E%3Cfilter%20id='f'%20x='-6%25'%20y='-6%25'%20width='112%25'%20height='112%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.013%200.018'%20numOctaves='4'%20seed='11'%20result='n'/%3E%3CfeDisplacementMap%20in='SourceGraphic'%20in2='n'%20scale='22'%20xChannelSelector='R'%20yChannelSelector='G'/%3E%3C/filter%3E%3Crect%20x='12'%20y='12'%20width='296'%20height='416'%20rx='3'%20fill='%23fff'%20filter='url(%23f)'/%3E%3C/svg%3E");
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center}
/* 焦げ：縁から内側へ黒く煤ける */
.face::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  box-shadow:inset 0 0 26px 6px rgba(0,0,0,.72),inset 0 0 64px 14px rgba(18,4,0,.5);
  background:radial-gradient(135% 115% at 50% -12%,transparent 56%,rgba(0,0,0,.5));
  mix-blend-mode:multiply}
/* 燃える縁：明滅する燠 */
.face::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;
  animation:emberEdge 3.6s ease-in-out infinite}
@keyframes emberEdge{
  0%,100%{box-shadow:inset 0 0 10px 1px rgba(190,40,12,.28)}
  50%{box-shadow:inset 0 0 24px 5px rgba(255,110,45,.62)}}
/* 本から立ち上る残り火 */
.bk-ember{position:absolute;bottom:6%;z-index:5;width:5px;height:5px;border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(circle,rgba(255,150,70,.95),rgba(200,16,46,0) 70%);
  animation:bkRise linear infinite}
@keyframes bkRise{
  0%{transform:translateY(0) scale(1);opacity:0}
  12%{opacity:.95}
  80%{opacity:.5}
  100%{transform:translateY(-300px) scale(.25);opacity:0}}

/* ===== 本を焼き尽くす炎 ===== */
.book-fire{position:absolute;inset:0;z-index:30;pointer-events:none;opacity:0;transform-origin:50% 100%;
  mix-blend-mode:screen;
  background:
    radial-gradient(42% 65% at 22% 100%, rgba(255,140,40,.9), transparent 60%),
    radial-gradient(48% 78% at 50% 100%, rgba(255,190,70,.96), transparent 62%),
    radial-gradient(42% 65% at 78% 100%, rgba(255,120,30,.9), transparent 60%),
    linear-gradient(to top, #e0300e 0%, rgba(200,16,46,.7) 26%, rgba(120,8,20,.25) 46%, transparent 64%);
  background-size:100% 165%;background-position:50% 100%}
.book-fire::after{content:"";position:absolute;inset:0;opacity:0;
  background:radial-gradient(72% 92% at 50% 95%, transparent 28%, rgba(8,5,5,.55) 70%, rgba(4,2,2,.88))}
.is-burning .book-fire{filter:url(#flame) blur(1px) brightness(1.1) contrast(1.18);
  animation:burnRise 2.4s ease-in forwards, flameFlick .14s steps(2,end) infinite}
.is-burning .book-fire::after{animation:smokeRise 2.6s ease-out forwards}
.is-burning .book{animation:bookConsume 2.4s ease-in}
.is-burning .bk-ember{animation-duration:1s!important}
@keyframes burnRise{
  0%{opacity:0;transform:translateY(35%) scaleY(.25)}
  14%{opacity:1}
  48%{opacity:1;transform:translateY(0) scaleY(1.08)}
  70%{opacity:1;transform:translateY(-6%) scaleY(1.12)}
  100%{opacity:0;transform:translateY(-16%) scaleY(1.16)}}
@keyframes flameFlick{0%{background-position:47% 100%}100%{background-position:53% 95%}}
@keyframes smokeRise{0%{opacity:0;transform:translateY(20%)}45%{opacity:.9}100%{opacity:0;transform:translateY(-32%)}}
@keyframes bookConsume{
  0%{filter:none}
  40%{filter:brightness(.35) sepia(.4) saturate(1.5)}
  52%{filter:brightness(.04)}
  60%{filter:brightness(.04)}
  100%{filter:none}}

@media (prefers-reduced-motion: reduce){
  #intro{display:none}
  .js .reveal{opacity:1!important;transform:none!important}
  .face::after{animation:none!important}
  .bk-ember{display:none!important}
  .book-fire{display:none!important}
}

@media(max-width:680px){
  .track{grid-template-columns:1fr;gap:12px}
  .members{grid-template-columns:repeat(2,1fr)}
  .nav a.link{display:none}
}

/* ===== ファーストビュー：墨絵＋3ジャケ ===== */
.hero2{padding:40px 0 24px;text-align:center}
.concept-art{max-width:760px;margin:0 auto}
.concept-art img{width:100%;display:block;border:1px solid var(--line);box-shadow:0 20px 60px rgba(0,0,0,.6);animation:emerge 1.6s cubic-bezier(.16,1,.3,1) both}
.concept-art .concept{margin:18px 0 0}
.jackets{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:900px;margin:34px auto 8px}
.jacket{display:block;position:relative;text-align:center;transition:transform .5s}
.jacket img{width:100%;display:block;border:1px solid var(--line);box-shadow:0 12px 36px rgba(0,0,0,.55);transition:box-shadow .5s}
.jacket:hover{transform:translateY(-4px)}
.jacket:hover img{box-shadow:0 18px 48px rgba(200,16,46,.25),0 12px 36px rgba(0,0,0,.55)}
.jk-ord{display:block;color:var(--crimson);font-family:var(--mincho);font-size:15px;letter-spacing:.22em;margin-top:14px}
.jk-ttl{display:block;font-family:var(--mincho);font-size:clamp(18px,2.2vw,22px);letter-spacing:.06em;color:var(--ink);margin-top:3px}
.jk-cpt{display:block;color:var(--silver);font-size:13px;letter-spacing:.16em;margin-top:5px}
.jk-soon{position:absolute;top:8px;right:8px;background:rgba(0,0,0,.65);border:1px solid var(--crimson);color:var(--crimson);font-size:10px;letter-spacing:.14em;padding:3px 7px}

/* ===== アルバムタブ ===== */
.albtabs{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0 0 8px}
.albtab{cursor:pointer;background:none;border:1px solid var(--line);color:var(--mute);font-family:var(--mincho);font-size:13px;letter-spacing:.08em;padding:9px 16px;border-radius:2px;transition:.25s}
.albtab:hover{color:var(--ink)}
.albtab.on{border-color:var(--crimson);color:var(--ink);box-shadow:0 0 16px rgba(200,16,46,.25)}
.albpane{display:none}
.albpane.on{display:block}

/* ===== 曲を探す（SONG FINDER） ===== */
#find .find-lead{text-align:center;color:var(--mute);font-size:13px;letter-spacing:.12em;margin:-18px 0 26px}
.find-panel{max-width:760px;margin:0 auto;border:1px solid var(--line);border-radius:4px;padding:20px;background:rgba(16,16,21,.4)}
.find-group{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:14px}
.find-label{color:var(--silver);font-family:var(--mincho);font-size:13px;letter-spacing:.12em;width:64px;flex:none}
.find-chips{display:flex;flex-wrap:wrap;gap:8px}
.find-chips button,.find-role button{cursor:pointer;background:none;border:1px solid var(--line);color:var(--mute);font-size:12px;letter-spacing:.08em;padding:7px 13px;border-radius:2px;transition:.25s}
.find-chips button:hover,.find-role button:hover{color:var(--ink)}
.find-chips button.on,.find-role button.on{border-color:var(--crimson);color:var(--ink);box-shadow:0 0 14px rgba(200,16,46,.25)}
.find-role{display:flex;gap:6px;margin-left:auto}
.find-clear{cursor:pointer;background:none;border:1px solid var(--line);color:var(--mute);font-size:12px;letter-spacing:.1em;padding:7px 16px;border-radius:2px;transition:.25s}
.find-clear:hover{border-color:var(--crimson);color:var(--ink)}
.find-count{max-width:760px;margin:18px auto 4px;color:var(--mute);font-size:12px;letter-spacing:.12em}
.find-results{max-width:760px;margin:0 auto;border-top:1px solid var(--line)}
.find-empty{color:var(--mute);text-align:center;padding:24px 0;letter-spacing:.1em}

/* 結果行：灰が集まる演出 */
.res{opacity:0;transform:translateY(14px) scale(.96);filter:blur(8px);
 transition:opacity .7s var(--d) ease,transform .7s var(--d) cubic-bezier(.16,1,.3,1),filter .7s var(--d) ease;
 display:grid;grid-template-columns:62px 30px 1fr auto;gap:12px;align-items:baseline;
 padding:13px 10px;border-bottom:1px solid var(--line);cursor:pointer;position:relative;text-decoration:none}
.res.gathered{opacity:1;transform:none;filter:none}
.res::before{content:"";position:absolute;left:-6px;top:50%;width:4px;height:4px;border-radius:50%;
 background:radial-gradient(circle,rgba(255,150,70,.9),transparent 70%);opacity:0;transition:opacity .9s var(--d)}
.res.gathered::before{opacity:.8}
.res:hover{background:rgba(200,16,46,.06)}
.res.soon{cursor:default}
.res.soon:hover{background:none}
.res.soon .res-ttl{color:var(--mute)}
.res-alb{color:var(--mute);font-size:11px;letter-spacing:.08em}
.res-no{color:var(--crimson);font-family:var(--mincho);font-size:13px}
.res-ttl{font-family:var(--mincho);letter-spacing:.06em;color:var(--ink)}
.res-cr{grid-column:3;color:var(--mute);font-size:11px;letter-spacing:.05em;opacity:.85}
.res-go{color:var(--silver);font-size:12px;letter-spacing:.12em}
.res:hover .res-go{color:#fff}
.res-soon{color:var(--crimson);border:1px solid var(--crimson);font-size:11px;letter-spacing:.14em;padding:2px 8px;border-radius:2px;white-space:nowrap}
@media(prefers-reduced-motion:reduce){
  .res{transition:none;opacity:1;transform:none;filter:none}
  .res::before{display:none}
  .concept-art img{animation:none}
}
@media(max-width:680px){
  .jackets{grid-template-columns:1fr;max-width:340px}
  .find-role{margin-left:0}
  .find-label{width:auto}
  .res{grid-template-columns:44px 1fr;row-gap:2px}
  .res-cr{grid-column:1/-1}
  .res-go,.res-soon{grid-column:2;justify-self:start}
}


/* ===== アルバムページ ヒーロー ===== */
.album-hero{display:grid;grid-template-columns:300px 1fr;gap:36px;align-items:center;max-width:900px;margin:0 auto;padding:34px 0 14px}
.album-hero .ah-cover{width:100%;display:block;border:1px solid var(--line);box-shadow:0 18px 50px rgba(0,0,0,.55)}
.ah-meta{text-align:left}
.ah-meta .htitle{text-align:left;margin:6px 0 0}
.ah-concept{color:var(--silver);font-family:var(--mincho);letter-spacing:.1em;line-height:2;margin:14px 0 10px}
.ah-sub{color:var(--mute);font-size:13px;letter-spacing:.14em}
.ah-soon{display:inline-block;border:1px solid var(--crimson);color:var(--crimson);font-size:11px;letter-spacing:.2em;padding:4px 14px;margin-top:10px}
@media(max-width:680px){.album-hero{grid-template-columns:1fr;text-align:center;max-width:340px}.ah-meta,.ah-meta .htitle{text-align:center}}
/* 横長バナー版（1st 等・タイトル焼き込み済み画像用） */
.album-banner{max-width:900px;margin:0 auto;padding:30px 0 12px;text-align:center}
.album-banner .ab-img{width:100%;display:block;border:1px solid var(--line);box-shadow:0 18px 50px rgba(0,0,0,.55)}
.album-banner .ah-concept{margin-top:20px}
.ab-h1{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* ===== 歌詞カード ギャラリー ===== */
.cardgal{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;max-width:1000px;margin:0 auto}
.cardgal a{display:block;border:1px solid var(--line);overflow:hidden;transition:transform .4s,box-shadow .4s}
.cardgal a:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(200,16,46,.2)}
.cardgal img{width:100%;display:block}

/* ===== 曲を探す：サムネカード ===== */
.find-results{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px;max-width:1000px;margin:0 auto;border:none}
.rescard{display:block;text-decoration:none;opacity:0;transform:translateY(14px) scale(.97);filter:blur(8px);
 transition:opacity .6s var(--d) ease,transform .6s var(--d) cubic-bezier(.16,1,.3,1),filter .6s var(--d) ease}
.rescard.gathered{opacity:1;transform:none;filter:none}
.rc-thumb{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;border:1px solid var(--line);background:#000}
.rc-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.rescard:hover .rc-thumb img{transform:scale(1.05)}
.rc-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;
 background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.55);color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px;transition:.3s}
.rescard:hover .rc-play{background:var(--crimson);border-color:var(--crimson)}
.rc-soon{position:absolute;left:8px;top:8px;background:rgba(0,0,0,.6);border:1px solid var(--crimson);color:var(--crimson);font-size:10px;letter-spacing:.14em;padding:3px 7px}
.rc-ttl{display:block;font-family:var(--mincho);color:var(--ink);letter-spacing:.04em;margin-top:9px}
.rc-meta{display:block;color:var(--mute);font-size:11px;letter-spacing:.03em;margin-top:3px}
@media(prefers-reduced-motion:reduce){.rescard{transition:none;opacity:1;transform:none;filter:none}}
@media(max-width:680px){.find-results{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}}

/* ===== 歌詞カード ライトボックス ===== */
.lightbox{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;background:rgba(5,5,7,.92);padding:24px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.lightbox.open{display:flex}
.lb-img{max-width:min(92vw,560px);max-height:88vh;object-fit:contain;border:1px solid var(--line);box-shadow:0 20px 60px rgba(0,0,0,.7)}
.lb-close{position:absolute;top:12px;right:16px;width:46px;height:46px;font-size:28px;line-height:1;background:none;border:none;color:var(--silver);cursor:pointer;transition:.2s}
.lb-close:hover{color:#fff}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:54px;height:54px;font-size:32px;line-height:1;background:rgba(0,0,0,.4);border:1px solid var(--line);color:var(--silver);cursor:pointer;border-radius:50%;transition:.2s}
.lb-nav:hover{color:#fff;border-color:var(--crimson)}
.lb-prev{left:14px}
.lb-next{right:14px}
.lb-count{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);color:var(--mute);font-size:12px;letter-spacing:.2em}
.lb-hint{position:absolute;bottom:16px;right:18px;color:var(--mute);font-size:11px;letter-spacing:.1em;opacity:.7}
@media(max-width:680px){.lb-nav{width:42px;height:42px;font-size:24px}.lb-prev{left:6px}.lb-next{right:6px}.lb-hint{display:none}}