/* =========================================
   黒の漆塗りのグランドピアノ（97鍵のインペリアル・グランド）をイメージした見た目
   ・鏡のような黒、金の細い線、象牙色の文字
   ・このファイルを外せば、元の明るいデザインに戻ります
   ========================================= */
:root {
  --black: #0a0909;     /* 背景：漆黒 */
  --black-2: #110f0e;
  --black-3: #1a1716;
  --ivory: #eee7d8;     /* 文字：象牙色 */
  --ivory-2: #b3aa9a;
  --gold: #c6a15b;      /* 金 */
  --gold-2: #e3c88e;
  --gold-dim: #6f5a35;
  --line: rgba(198, 161, 91, .22);
  --lacquer: linear-gradient(180deg, #1b1918 0%, #0c0b0b 38%, #070606 62%, #141211 100%);
}
body { background: var(--black); color: var(--ivory); }
::selection { background: var(--gold); color: #0a0909; }

/* 漆塗りの面：上から光が流れるような映り込み */
.section { background: var(--black); }
.section.alt { background: var(--black-2); }
.section::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: linear-gradient(105deg, transparent 0 38%, rgba(255, 245, 225, .035) 44%, transparent 52%), linear-gradient(180deg, rgba(255,255,255,.025), transparent 30%); }
.section > * { position: relative; }

/* ヘッダー */
.header.scrolled { background: rgba(10, 9, 9, .9); border-color: rgba(198, 161, 91, .3); }
.header .brand, .header .nav a { color: var(--ivory); }
.brand .mark, .header:not(.scrolled) .brand .mark { filter: brightness(0) invert(.92) sepia(.3); }
@media (max-width: 900px) { .nav { background: rgba(10, 9, 9, .98) !important; } .header .nav a { color: var(--ivory) !important; } }
.menu-btn { color: var(--ivory); border-color: var(--line); }

/* トップ：写真をより深い黒に、金の線で締める */
.hero-bg { filter: grayscale(1) contrast(1.15) brightness(.42); }
.hero::after { background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.15) 40%, rgba(10,9,9,.95)); }
.hero h1 { color: var(--ivory); }
.hero .eyebrow { color: var(--gold-2); }

/* 97鍵の鍵盤（トップの下） */
.imperial { position: relative; z-index: 3; background: var(--lacquer); padding: 0 0 26px; border-top: 1px solid rgba(198, 161, 91, .45); }
.imperial .fallboard { height: 34px; background: linear-gradient(180deg, #050404, #151312 60%, #0b0a0a); border-bottom: 1px solid #000; display: flex; align-items: center; justify-content: center; }
.imperial .fallboard span { font-family: var(--serif-en); font-style: italic; color: var(--gold); letter-spacing: .5em; font-size: .78rem; opacity: .85; padding-left: .5em; }
.imperial .keys97 { display: flex; height: clamp(70px, 9vw, 120px); margin: 0 auto; max-width: 1400px; padding: 0 12px; position: relative; }
.k { flex: 1; position: relative; background: linear-gradient(180deg, #e9e2d2 0%, #f6f1e6 70%, #ddd5c3 100%); border-right: 1px solid #b9b09c; border-radius: 0 0 2px 2px; box-shadow: inset 0 -4px 0 rgba(0,0,0,.08); transition: transform .25s, background .25s; transform-origin: top; }
.k:first-child { border-left: 1px solid #b9b09c; }
.k.ext { background: linear-gradient(180deg, #1c1a19 0%, #0d0c0c 75%, #000 100%); border-right-color: #000; }
.k .s { position: absolute; top: 0; right: -32%; width: 64%; height: 60%; z-index: 2; border-radius: 0 0 2px 2px; background: linear-gradient(180deg, #2a2624, #0b0a0a 70%, #1d1a18); box-shadow: 0 2px 2px rgba(0,0,0,.5); }
.k.ext .s { background: linear-gradient(180deg, #f3eee2, #d9d1bf); }
.k.down { animation: kd .55s ease; }
@keyframes kd { 0% { transform: scaleY(.965); filter: brightness(.9); } 100% { transform: none; } }
.imperial .caption { text-align: center; margin: 14px 0 0; font-family: var(--serif-en); font-style: italic; letter-spacing: .25em; color: var(--ivory-2); font-size: .85rem; }
.imperial .caption b { color: var(--gold-2); font-weight: 400; font-style: normal; letter-spacing: .3em; }

/* 見出し：金の細い線 */
.sec-head .en { color: var(--ivory); }
.sec-head .ja { color: var(--gold); }
.staff i { background: var(--gold-dim); }
.ornament::before, .ornament::after { background: var(--gold-dim); }

/* カード類：白い紙 → 黒の漆塗り＋金の細線 */
.member, .live, .score, .terms { background: var(--lacquer) !important; border-color: rgba(198, 161, 91, .28) !important; }
.member { box-shadow: 0 1px 0 rgba(255, 245, 225, .06) inset; }
.member:hover { box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(198, 161, 91, .45); }
.member .keyword { color: var(--gold-2); border-color: var(--gold-dim); }
.member p, .score blockquote, .terms, .live .meta { color: var(--ivory-2); }
.score blockquote { background: rgba(198, 161, 91, .05); border-left-color: var(--gold); }
.motto { color: var(--gold-2); }
.about-text p { color: var(--ivory); }
.live h3.num { color: var(--gold-2); }
.live .kind { color: var(--gold); }

/* 曲の一覧 */
.work { border-bottom-color: var(--line); }
.work:hover { background: rgba(198, 161, 91, .06); }
.work::after { background: var(--gold); }
.work .comp { color: var(--ivory-2); }
.play { border-color: var(--gold); }
.play span { border-left-color: var(--gold); }
.play:hover, .work.playing .play { background: var(--gold); }
.play:hover span { border-left-color: #0a0909; }
.work.playing .play span { border-color: #0a0909; }
.filter button { color: var(--ivory-2); border-color: var(--line); }
.filter button[aria-pressed="true"], .filter button:hover { background: var(--gold); color: #0a0909; border-color: var(--gold); }

/* 年表 */
.timeline li { border-left-color: var(--line); }
.timeline li::before { background: var(--black-2); border-color: var(--gold); }
.timeline li.major::before { background: var(--gold); }
.timeline .date { color: var(--gold-2); }
.timeline .ev h4 { color: var(--ivory); }

/* 楽譜・フォーム */
.pv { background: #f4efe4; border-color: rgba(198, 161, 91, .35); }
.score .dl { color: var(--gold-2); border-color: var(--gold); }
.score .dl:hover { background: var(--gold); color: #0a0909; }
.buy-form { background: var(--black-2); }
.buy-form .f input, .buy-form .f select, .buy-form .f textarea { background: #0d0c0c; color: var(--ivory); border-color: rgba(198, 161, 91, .3); }
.buy-form .send { color: #0a0909; }
.buy-form .send:hover { color: var(--gold-2); }
.lb-close { background: #0a0909; }

/* 小さなプレーヤー・カーソル・フッター */
.cursor-ring { mix-blend-mode: normal; border-color: var(--gold); }
.cursor-ring.big { background: rgba(198, 161, 91, .1); }
.footer { background: #050404; border-top-color: rgba(198, 161, 91, .3); }
.footer-logo { filter: brightness(0) invert(.88) sepia(.35); }
.contact .lead { color: var(--ivory-2); }
.progress { background: var(--gold); }

/* ピアノの胴（リム）のような曲線の区切り */
.rim { height: 60px; background: var(--black); position: relative; overflow: hidden; }
.rim::before { content: ""; position: absolute; left: -10%; right: -10%; top: 0; height: 120px; border-radius: 0 0 50% 50% / 0 0 100% 100%; border-bottom: 1px solid rgba(198, 161, 91, .45); box-shadow: 0 12px 30px -16px rgba(255, 240, 210, .12); }