*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;overflow-x:hidden;background:var(--bg);color:#EAF2EF;font-weight:300;line-height:1.9;
  font-family:"Noto Serif JP",'Hiragino Mincho ProN','Yu Mincho',serif;-webkit-font-smoothing:antialiased}
.wrap{position:relative;z-index:1;max-width:1240px;margin:0 auto;padding:0 28px}
.kicker{font-family:"Cormorant Garamond",Georgia,serif;letter-spacing:.42em;text-transform:uppercase;
  font-size:12px;color:var(--gold);margin:0}
.en{font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;color:#B4C4BE;margin:0}
.sub{font-family:"Cormorant Garamond",Georgia,serif;letter-spacing:.2em;font-size:13px;color:#9AACA6;margin:0}
.note{max-width:62ch;color:#9AACA6;font-size:13px;line-height:1.8}

/* ── トップ ── */
body.top::before{content:"";position:fixed;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% -10%,rgba(255,140,66,.10),transparent 55%),
             radial-gradient(ellipse at 90% 110%,rgba(110,92,142,.10),transparent 55%)}
.hero{padding:120px 0 60px}
.hero h1{margin:12px 0 4px;font-size:clamp(64px,14vw,150px);font-weight:500;letter-spacing:.14em;line-height:1}
.hero .tag{max-width:44ch;font-size:clamp(15px,2.1vw,19px);color:#B4C4BE;
  border-left:1px solid var(--gold);padding-left:18px;margin:18px 0}
.eras{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:26px;margin:40px 0 90px}
.era span{font-family:"Cormorant Garamond",Georgia,serif;letter-spacing:.3em;font-size:12px;color:var(--gold)}
.era p{margin:8px 0 0;font-size:15px;color:#B4C4BE;line-height:1.85}
.eras-note{grid-column:1/-1;margin:18px 0 0;color:#EAF2EF;font-size:16px;
  border-top:1px solid rgba(201,165,90,.2);padding-top:20px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:28px;padding-bottom:90px}
.card{display:block;text-decoration:none;color:inherit;border:1px solid rgba(201,165,90,.18);
  transition:border-color .4s,transform .4s}
.card:hover{border-color:rgba(201,165,90,.5);transform:translateY(-3px)}
.card-img{aspect-ratio:16/9;overflow:hidden}
.card-img img{width:100%;height:100%;object-fit:cover;}
.card-b{padding:20px 22px 24px}
.card-b h2{margin:8px 0 2px;font-size:28px;font-weight:500;letter-spacing:.05em}
.card .st{margin:14px 0 0;font-size:13px;color:var(--gold)}
.card.soon{opacity:.42;pointer-events:none}

/* ── プレイヤー ── */
.player{position:sticky;top:0;z-index:30;background:rgba(10,20,18,.88);
  backdrop-filter:blur(14px);border-bottom:1px solid rgba(201,165,90,.22)}
.player-in{max-width:1240px;margin:0 auto;padding:9px 28px;display:flex;gap:18px;align-items:center}
.home{color:#B4C4BE;text-decoration:none;font-size:13px;letter-spacing:.06em;white-space:nowrap}
.home:hover{color:var(--gold)}
#yt,iframe#yt{width:264px;height:149px;flex:0 0 auto;border:1px solid rgba(201,165,90,.25)}
.now{min-width:0;flex:1}
.lbl{font-family:"Cormorant Garamond",Georgia,serif;letter-spacing:.3em;font-size:10px;
  color:var(--gold);text-transform:uppercase;margin:0}
.lbl.warn{color:var(--gold)}
.ttl{margin:2px 0 0;font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── アルバム表紙 ── */
.cover{position:relative;min-height:74vh;display:flex;align-items:flex-end;overflow:hidden}
.cover-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cover::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,var(--bg) 4%,rgba(10,20,18,.72) 46%,rgba(10,20,18,.34))}
.cover-in{position:relative;z-index:2;padding-bottom:70px;padding-top:80px}
.cover h1{margin:12px 0 2px;font-size:clamp(52px,11vw,116px);font-weight:500;letter-spacing:.07em;line-height:1.04}
.cover .en{font-size:clamp(18px,3.2vw,28px)}
.cover .tag{max-width:46ch;color:#EAF2EF;margin:22px 0 14px;font-size:clamp(15px,2vw,18px);
  border-left:1px solid var(--gold);padding-left:18px}

/* ── 目次 ── */
.nav{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:1px;
  background:rgba(201,165,90,.14);border:1px solid rgba(201,165,90,.14);margin:70px 0 40px}
.nav-item{display:flex;align-items:center;gap:11px;background:var(--bg);border:0;color:#B4C4BE;
  font-family:inherit;font-size:15px;text-align:left;padding:10px 14px;cursor:pointer;
  transition:background .35s,color .35s}
.nav-item{position:relative}
.nav-item img{width:56px;aspect-ratio:16/9;object-fit:cover;flex:0 0 auto;opacity:.72;transition:opacity .4s}
/* 蝋の進行: 再生位置に比例して伸びる光。装飾ではなく進行情報 */
.nav-item::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;
  background:linear-gradient(90deg,transparent,var(--accent));transition:width 1s linear}
.nav-item.on::after{width:var(--prog,0%)}
.nav-item:hover,.nav-item.on{background:var(--mid);color:#EAF2EF}
.nav-item.on img{opacity:1}
.nav-item.on .n{color:#EAF2EF}
.nav-item .n{font-family:"Cormorant Garamond",Georgia,serif;font-size:13px;letter-spacing:.14em;color:#9AACA6}
.nav-item .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-item .tc{font-family:"Cormorant Garamond",Georgia,serif;font-size:12px;color:#9AACA6}

/* ── 部屋 ── */
.room{position:relative;padding:96px 0 96px 40px;scroll-margin-top:calc(var(--playerH) + 16px)}
.seam{position:absolute;left:0;top:0;width:1px;height:100%;opacity:.35;
  background:linear-gradient(to bottom,transparent,#3A4A46 12%,#3A4A46 88%,transparent);
  transition:opacity .6s}
/* 再生中の曲では、この縦ラインが上から下へ満ちていく＝曲の進行。
   目次はスクロールで画面外へ出るが、この線は歌詞の隣に常にある */
.seam-fill{position:absolute;left:0;top:0;width:100%;height:0;display:block;
  background:linear-gradient(to bottom,#B96F3A,var(--accent));
  box-shadow:0 0 14px rgba(255,140,66,.55);transition:height 1s linear}
.room.on .seam{opacity:1;width:2px}
.room.on .seam-fill{height:var(--prog,0%)}
.room.on h2{color:#fff}
/* 部屋の空気: その曲の絵を極低コントラストで敷く。読ませる面には出さない */
/* 背景だけ .wrap の最大幅を抜けて画面全幅にする。
   文字は中央のまま（読みやすい行長を保つ）、余白は「暗い部屋の壁」になる */
.room-bg{position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);
  width:100vw;max-width:100vw;z-index:-1;background-image:var(--room-bg);
  background-size:cover;background-position:center;opacity:.34;
  transition:opacity 1.2s;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 22%,#000 78%,transparent);
  mask-image:linear-gradient(to bottom,transparent,#000 22%,#000 78%,transparent)}
.room.on .room-bg{opacity:.46}
/* 中央の文字帯だけを暗く落とす。左右の余白は絵が見え、歌詞の背後は暗いまま */
.room::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(to right,transparent,rgba(10,20,18,.86) 12%,
             rgba(10,20,18,.92) 50%,rgba(10,20,18,.86) 88%,transparent);
  max-width:1240px;left:50%;transform:translateX(-50%);width:100%}
.seeks{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.seek{margin-top:0}
.seek.rep{border-color:rgba(154,172,166,.35);color:#B4C4BE}
.seek.rep:hover{background:rgba(154,172,166,.1);color:#EAF2EF}
#totop{position:fixed;right:22px;bottom:22px;z-index:40;width:44px;height:44px;
  border:1px solid rgba(201,165,90,.4);background:rgba(10,20,18,.86);backdrop-filter:blur(8px);
  color:var(--gold);font-size:18px;cursor:pointer;opacity:0;pointer-events:none;
  transition:opacity .4s}
#totop.show{opacity:1;pointer-events:auto}
#totop:hover{background:rgba(201,165,90,.14);color:#EAF2EF}
.room-h{margin-bottom:44px}
.room-n{font-family:"Cormorant Garamond",Georgia,serif;letter-spacing:.34em;font-size:11px;
  color:var(--gold);text-transform:uppercase}
.room h2{margin:10px 0 6px;font-size:clamp(30px,5vw,50px);font-weight:500;letter-spacing:.04em;transition:color .6s}
.room-sub{margin:0;color:#9AACA6;font-size:14px;font-family:"Cormorant Garamond",Georgia,serif}
.room-sub i{color:var(--gold);font-style:normal;padding:0 5px}
.seek{margin-top:20px;background:transparent;border:1px solid rgba(201,165,90,.4);color:var(--gold);
  font-family:"Cormorant Garamond",Georgia,serif;letter-spacing:.14em;font-size:12px;
  padding:8px 17px;cursor:pointer;transition:.35s}
.seek:hover{background:rgba(201,165,90,.1);color:#EAF2EF}
.room-body{display:grid;grid-template-columns:1fr minmax(300px,40%);gap:56px;align-items:start}
.stanza{margin:0 0 34px}
.l{margin:0}
.l.ja{font-size:clamp(17px,2.2vw,21px);color:#EAF2EF;letter-spacing:.04em;line-height:2.1}
.l.en{font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;
  font-size:clamp(14px,1.7vw,16px);color:#8A9C96;margin:1px 0 12px}
.arts{position:sticky;top:calc(var(--playerH) + 24px)}
.art{margin:0}

/* 部屋を読み進むと、額の中の声が Ⅰ→Ⅱ へ変わる。
   CSS scroll-driven animation（2025-10 Baseline / Firefox 144）で実装。
   JS を使わないので YouTube の描画と競合しない。非対応ブラウザでは
   2枚が静的に併置される（下の @supports なしの既定値）。 */
.arts{display:flex;flex-direction:column;gap:20px}
@supports (animation-timeline: view()){
  .arts{display:grid;grid-template-columns:minmax(0,1fr)}
  .art{grid-area:1/1;min-width:0}
  .art.rep{opacity:0}
  .room{view-timeline-name:--room;view-timeline-axis:block}
  .art.rep{
    animation:voiceturn linear both;
    animation-timeline:--room;
    animation-range:contain 35% contain 85%;
  }
  @keyframes voiceturn{from{opacity:0}to{opacity:1}}
}
@media(prefers-reduced-motion:reduce){
  @supports (animation-timeline: view()){
    .arts{display:flex}
    .art{grid-area:auto}
    .art.rep{opacity:1;animation:none}
  }
}
.art img{width:100%;max-width:100%;height:auto;display:block;border:1px solid rgba(201,165,90,.2)}
.art figcaption{font-family:"Cormorant Garamond",Georgia,serif;font-size:12px;letter-spacing:.14em;
  color:#9AACA6;margin-top:7px}


footer{border-top:1px solid rgba(201,165,90,.16);margin-top:60px;padding:52px 0 90px;color:#9AACA6;font-size:13px}

@media(max-width:900px){
  .room-body{grid-template-columns:1fr;gap:36px}
  .arts{position:static;flex-direction:row}
  .art{flex:1;min-width:0}
}
@media(max-width:720px){
  .wrap{padding:0 18px}
  .player-in{padding:8px 18px;gap:12px}
  #yt,iframe#yt{width:142px;height:80px}
  .room{padding:64px 0 64px 22px}
  .nav{margin:44px 0 30px;grid-template-columns:1fr}
  .hero{padding:80px 0 40px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}