/* メンドルなび — ライブハウスの暗さを地にして、彩度はメンバーカラーだけに持たせる */
:root{
  --stage:#0B0A0F;      /* 客電が落ちたフロア */
  --stage2:#131119;
  --panel:#17141F;
  --line:#2A2635;
  --ink:#ECEAF2;
  --ink2:#A7A2B8;
  --ink3:#6F6A82;
  --accent:#C9A227;     /* ステージ照明の琥珀 */
  --line-green:#06C755;
  --r:14px;
  --maxw:1180px;
  --font: -apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic UI",Meiryo,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--stage);color:var(--ink);font-family:var(--font);
  font-size:15px;line-height:1.75;letter-spacing:.01em;
  background-image:radial-gradient(1100px 520px at 50% -180px,rgba(201,162,39,.10),transparent 70%);
  background-repeat:no-repeat;
}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 18px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:var(--accent);color:#000;padding:8px 14px;border-radius:8px;z-index:99}

/* ── ヘッダー ───────────────────────── */
header.site{position:sticky;top:0;z-index:50;background:rgba(11,10,15,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:18px;height:62px}
.logo{display:flex;align-items:center;gap:9px;flex:0 0 auto}
.logo:hover{text-decoration:none}
.logo-mark{width:12px;height:22px;border-radius:6px;background:linear-gradient(180deg,#F0524B,#F056A6 20%,#F2C022 40%,#37C871 60%,#3FC5F0 80%,#B06BF2);box-shadow:0 0 14px rgba(240,86,166,.5)}
.logo-img{height:21px;width:auto;display:block;opacity:.96}
.gnav{display:flex;gap:2px;flex:1 1 auto;overflow-x:auto;scrollbar-width:none}
.gnav::-webkit-scrollbar{display:none}
.gnav a{padding:7px 11px;border-radius:999px;color:var(--ink2);font-size:13.5px;white-space:nowrap}
.gnav a:hover{background:var(--panel);color:var(--ink);text-decoration:none}
.search{position:relative;flex:0 0 auto}
.search input{width:188px;background:var(--panel);border:1px solid var(--line);color:var(--ink);
  padding:8px 13px;border-radius:999px;font-size:13.5px;font-family:inherit;outline:none}
.search input:focus{border-color:var(--accent);width:240px}
.sresult{position:absolute;right:0;top:44px;width:330px;max-height:62vh;overflow:auto;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--r);padding:6px;box-shadow:0 18px 50px rgba(0,0,0,.6)}
.sresult a{display:block;padding:8px 11px;border-radius:9px;font-size:13.5px}
.sresult a:hover{background:var(--stage2);text-decoration:none}
.sresult .t{color:var(--ink3);font-size:11px;margin-left:6px}
.sresult .s{display:block;color:var(--ink3);font-size:11.5px}
.sresult .empty{padding:14px;color:var(--ink3);font-size:13px}

/* ── パンくず ───────────────────────── */
.crumb{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:12.5px;color:var(--ink3);padding-top:16px}
.crumb i{font-style:normal;opacity:.5}
.crumb a{color:var(--ink2)}

/* ── セクション ─────────────────────── */
section{padding-top:34px;padding-bottom:34px}
h1{font-size:28px;line-height:1.35;margin:.3em 0 .2em;letter-spacing:.01em}
h2{font-size:19px;margin:0 0 16px;letter-spacing:.04em;display:flex;align-items:center;gap:10px}
h2::before{content:"";width:3px;height:17px;border-radius:2px;background:var(--accent);flex:0 0 auto}
h3{font-size:15px;margin:22px 0 10px;color:var(--ink2);letter-spacing:.04em}
p{margin:0 0 1em}
.lead{color:var(--ink2);font-size:14.5px;max-width:720px}
.muted{color:var(--ink3)}
.small{font-size:12.5px}

/* ── ペンライトの帯 ─────────────────── */
.penlight{display:flex;height:9px;border-radius:999px;overflow:hidden;margin:18px 0 0;box-shadow:0 0 26px rgba(0,0,0,.6)}
.penlight span{display:block;height:100%}
.penlight.tall{height:16px}
/* グループページの色面：メンバーカラーそのものを主役の絵にする */
.gkey{position:relative;margin:20px 0 4px;border-radius:var(--r);overflow:hidden;
  background:var(--g);height:140px;box-shadow:0 10px 40px rgba(0,0,0,.5)}
.gkey::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,10,15,.05),rgba(11,10,15,.72))}
.gkey-bars{position:absolute;left:0;right:0;bottom:0;display:flex;height:7px;z-index:2}
.gkey-bars span{flex:1}
@media(max-width:860px){.gkey{height:96px}}

/* ── ヒーロー ───────────────────────── */
.hero{padding-top:52px;padding-bottom:30px}
.hero h1{font-size:clamp(28px,5.4vw,46px);font-weight:860;letter-spacing:.02em;margin:0}
/* トップ最上部のバナー：担当カラーを地にして、白枠で締める */
.banner{position:relative;margin:22px 0 26px;border-radius:20px;overflow:hidden;
  border:2px solid rgba(255,255,255,.92);box-shadow:0 18px 60px rgba(0,0,0,.55)}
.banner-bg{position:absolute;inset:0;background:var(--g)}
.banner-bg::after{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 120% at 50% 45%,rgba(10,9,14,.82) 34%,rgba(10,9,14,.44) 100%)}
.banner-in{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:12px;padding:56px 22px 50px;text-align:center}
.banner-in img{width:min(560px,88%);height:auto;display:block;
  filter:drop-shadow(0 6px 24px rgba(0,0,0,.65))}
.banner-in .tag{margin:0;color:rgba(255,255,255,.94);font-size:13.5px;letter-spacing:.09em;
  text-shadow:0 2px 10px rgba(0,0,0,.75)}
.banner-strip{position:absolute;left:0;right:0;bottom:0;display:flex;height:8px;z-index:3}
.banner-strip a{display:block;height:100%}
@media(max-width:860px){.banner-in{padding:38px 16px 36px}}
.stat{position:relative;overflow:hidden}
.stat::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--sc,#C9A227)}
.hero .sub{color:var(--ink2);font-size:15px;margin-top:12px;max-width:620px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-top:28px}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:15px 16px}
.stat b{display:block;font-size:27px;font-weight:800;line-height:1.15;font-variant-numeric:tabular-nums}
.stat span{display:block;color:var(--ink3);font-size:11.5px;margin-top:3px;letter-spacing:.06em}

/* ── カード ─────────────────────────── */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:12px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:15px 16px;display:block;transition:border-color .15s,transform .15s}
.card:hover{border-color:#4a4360;text-decoration:none;transform:translateY(-1px)}
.card .nm{font-weight:700;font-size:15px;line-height:1.4}
.card .mt{color:var(--ink3);font-size:12px;margin-top:5px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.card .strip{display:flex;height:5px;border-radius:999px;overflow:hidden;margin-top:11px;background:#221E2D}
.card .strip span{flex:1}

/* ── バッジ / チップ ────────────────── */
.badge{display:inline-block;font-size:11px;padding:2px 9px;border-radius:999px;border:1px solid var(--line);color:var(--ink2);white-space:nowrap;line-height:1.7}
.badge.on{color:#6EE7A8;border-color:rgba(110,231,168,.35);background:rgba(110,231,168,.08)}
.badge.soon{color:#F2C022;border-color:rgba(242,192,34,.35);background:rgba(242,192,34,.08)}
.badge.pause{color:#8FB8FF;border-color:rgba(143,184,255,.3);background:rgba(143,184,255,.07)}
.badge.off{color:var(--ink3)}
.badge.renamed{color:#C9A6F2;border-color:rgba(201,166,242,.3)}
.badge.unknown{color:var(--ink3);border-style:dashed}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;white-space:nowrap}
.chip i{width:11px;height:11px;border-radius:3px;background:var(--c);box-shadow:0 0 9px color-mix(in srgb,var(--c) 60%,transparent)}
.chip em{font-style:normal;color:var(--ink3);font-size:11.5px}
.chip.none{color:var(--ink3)}
.colorttl .chip{font-size:30px;font-weight:800;gap:14px}
.colorttl .chip i{width:24px;height:24px;border-radius:7px}

/* ── テーブル ───────────────────────── */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
table{border-collapse:collapse;width:100%;font-size:13.5px;min-width:520px}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top}
thead th{color:var(--ink3);font-weight:600;font-size:11.5px;letter-spacing:.07em;white-space:nowrap;background:var(--stage2)}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:rgba(255,255,255,.022)}
td.nm{font-weight:650}
td .sub{display:block;color:var(--ink3);font-size:11.5px;margin-top:2px}
.minibar{display:flex;height:6px;border-radius:999px;overflow:hidden;background:#221E2D;min-width:92px}
.minibar span{flex:1}

/* ── 詳細ヘッダ ─────────────────────── */
.phead{padding-top:26px;padding-bottom:8px}
.phead .ttl{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap}
.phead h1{margin:0;font-size:clamp(23px,4.2vw,34px)}
.yomi{color:var(--ink3);font-size:13px;margin-top:4px}
.meta{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:16px;font-size:13px;color:var(--ink2)}
.meta div span{color:var(--ink3);font-size:11.5px;display:block;letter-spacing:.06em}
.links{display:flex;gap:9px;flex-wrap:wrap;margin-top:18px}
.links a{border:1px solid var(--line);background:var(--panel);padding:7px 14px;border-radius:999px;font-size:12.5px;color:var(--ink2)}
.links a:hover{border-color:var(--accent);color:var(--ink);text-decoration:none}
.links-txt{border:1px solid var(--line);background:var(--panel);padding:7px 14px;border-radius:999px;font-size:12.5px;color:var(--ink3)}

/* ── 関連リスト ─────────────────────── */
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pill{border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:6px 13px;font-size:12.5px;color:var(--ink2)}
.pill:hover{border-color:#4a4360;color:var(--ink);text-decoration:none}

/* ── 空ページ ───────────────────────── */
.empty-note{background:var(--panel);border:1px dashed var(--line);border-radius:var(--r);padding:26px;text-align:center}
.empty-note p{color:var(--ink2);margin:0 0 14px}

/* ── LINE ───────────────────────────── */
.linebox{margin:26px 0 0}
.line-btn{display:inline-flex;align-items:center;gap:9px;background:var(--line-green);color:#fff;font-weight:700;
  padding:12px 22px;border-radius:999px;font-size:14px;box-shadow:0 6px 22px rgba(6,199,85,.22)}
.line-btn:hover{text-decoration:none;filter:brightness(1.07)}
.line-ico{width:19px;height:19px;fill:#fff;flex:0 0 auto}
.line-note{color:var(--ink3);font-size:12px;margin:9px 0 0}

/* ── 埋め込み枠 ─────────────────────── */
.embeds{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}
.oflinks{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:12px;max-width:760px}
.oflink{display:flex;align-items:center;gap:14px;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);padding:15px 17px;transition:border-color .15s,transform .15s}
.oflink:hover{text-decoration:none;border-color:var(--k);transform:translateY(-1px)}
.of-ic{flex:0 0 auto;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--k) 20%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--k) 42%,transparent)}
.of-ic svg{width:18px;height:18px;fill:var(--k)}
.of-tx{display:flex;flex-direction:column;line-height:1.35;min-width:0}
.of-tx b{font-size:14px;font-weight:700}
.of-tx em{font-style:normal;color:var(--ink3);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* メンバーでつながるグループ：担当カラーの輪で identity を出す */
.rels{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:14px 10px;max-width:860px}
.rel{display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center}
.rel:hover{text-decoration:none}
.rel-av{width:66px;height:66px;border-radius:50%;background:var(--r);display:grid;place-items:center;
  transition:transform .15s;box-shadow:0 4px 18px rgba(0,0,0,.45)}
.rel:hover .rel-av{transform:scale(1.06)}
.rel-av i{width:50px;height:50px;border-radius:50%;background:var(--panel);display:grid;place-items:center;
  font-style:normal;font-weight:800;font-size:19px;color:var(--ink)}
.rel-nm{font-size:12px;line-height:1.35;color:var(--ink2);word-break:break-word}
.rel:hover .rel-nm{color:var(--ink)}
.rel-ct{font-size:11px;color:var(--ink3)}

/* ── 絞り込み ───────────────────────── */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px;align-items:center}
.filters select,.filters input[type=search]{background:var(--panel);border:1px solid var(--line);color:var(--ink);
  padding:8px 13px;border-radius:999px;font-size:13px;font-family:inherit;outline:none}
.filters select:focus,.filters input:focus{border-color:var(--accent)}
.count{color:var(--ink3);font-size:12.5px;margin-left:auto}
.kanabar{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 18px}
.kanabar a{padding:4px 10px;border:1px solid var(--line);border-radius:8px;font-size:12.5px;color:var(--ink2)}
.kanabar a:hover{border-color:var(--accent);text-decoration:none}
.ghead{scroll-margin-top:76px;font-size:13px;color:var(--accent);letter-spacing:.1em;margin:26px 0 10px;border-bottom:1px solid var(--line);padding-bottom:6px}

/* ── 系譜図 ─────────────────────────── */
.famgraph{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  overflow:auto;max-height:76vh;-webkit-overflow-scrolling:touch}
.famgraph svg{display:block;max-width:none;margin:0 auto}
.famgraph .gnode{fill:#231F2F;stroke:#4a4360}
.famgraph .mnode{fill:var(--accent);stroke:none}
.famgraph .glabel{fill:#ECEAF2;font-size:11px}
.famgraph .mlabel{fill:#A7A2B8;font-size:9.5px}
.famgraph .link{stroke:#3a3450;stroke-width:1.2}

/* ── フッター ───────────────────────── */
footer.site{border-top:1px solid var(--line);margin-top:48px;padding:34px 0 50px;background:var(--stage2)}
.fcols{display:flex;gap:28px;flex-wrap:wrap;justify-content:space-between;margin-bottom:22px}
.fname{font-weight:800;font-size:16px;margin:0}
.fsub{color:var(--ink3);font-size:12px;margin:3px 0 0}
.fnav{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:12.5px;max-width:640px}
.fnav a{color:var(--ink2)}
.fnote{color:var(--ink3);font-size:11.5px;max-width:700px;margin:0 0 6px}
.fnote a{color:var(--ink2);text-decoration:underline}
.fcopy{color:var(--ink3);font-size:11.5px;margin:0}

@media(max-width:860px){
  .bar{height:auto;padding-top:10px;padding-bottom:10px;flex-wrap:wrap}
  .gnav{order:3;width:100%;padding-bottom:2px}
  .search{flex:1 1 auto}
  .search input,.search input:focus{width:100%}
  .sresult{width:100%}
}