@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&family=Oswald:wght@600;700&display=swap');

:root {
  --bg:         #f5efe6;
  --bg2:         #fffdfa;
  --surface:    #ffffff;
  --surface2:   #fdf8f2;
  --accent:     #e8521a;
  --tokyo:      #1a6ab5;
  --osaka:      #e91e63;
  --tokyo-bg:   #eef4fd;
  --osaka-bg:   #fde8f0;
  --tokyo-lt:   #a8c8f0;
  --osaka-lt:   #f4a0c0;
  --text:       #1a1208;
  --text-mid:   #6b5744;
  --text-dim:   #b09880;
  --border:     #e8d8c8;
  --border-lt:  #f0e4d4;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  min-height: 100vh;
}

/* ── ヘッダー ── */
header {
  background: var(--surface);
  border-bottom: 3px solid var(--accent);
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  height: 56px;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 10px rgba(100,50,20,.12);
}
header.mode-tokyo { border-bottom-color: var(--tokyo); }
header.mode-osaka { border-bottom-color: var(--osaka); }

.logo-text {
  font-family: 'Oswald', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: .02em;
  white-space: nowrap;
}
.logo-text span { color: var(--accent); }
header.mode-tokyo .logo-text span { color: var(--tokyo); }
header.mode-osaka .logo-text span { color: var(--osaka); }

.header-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.fbtns { display: flex; gap: 4px; }

.fb {
  padding: 5px 12px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  border-radius: 20px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  font-weight: 700;
  color: var(--text-mid);
  transition: all .15s;
  white-space: nowrap;
}
.fb:hover { border-color: var(--accent); color: var(--accent); }
.fb.on    { background: var(--accent); color: #fff; border-color: var(--accent); }

.theater-btns .fb.tokyo:hover { border-color: var(--tokyo); color: var(--tokyo); }
.theater-btns .fb.tokyo.on    { background: var(--tokyo); color: #fff; border-color: var(--tokyo); }
.theater-btns .fb.osaka:hover { border-color: var(--osaka); color: var(--osaka); }
.theater-btns .fb.osaka.on    { background: var(--osaka); color: #fff; border-color: var(--osaka); }

header.mode-tokyo .tier-btns .fb:hover { border-color: var(--tokyo); color: var(--tokyo); }
header.mode-tokyo .tier-btns .fb.on    { background: var(--tokyo); color: #fff; border-color: var(--tokyo); }
header.mode-osaka .tier-btns .fb:hover { border-color: var(--osaka); color: var(--osaka); }
header.mode-osaka .tier-btns .fb.on    { background: var(--osaka); color: #fff; border-color: var(--osaka); }

/* ── 検索ボックス ── */
.search-wrap {
  position: relative;
}
.search-input {
  padding: 5px 12px 5px 30px;
  border: 1.5px solid var(--border);
  border-radius: 20px;
  font-size: 12px;
  font-family: inherit;
  color: var(--text);
  background: var(--surface);
  width: 160px;
  transition: all .15s;
  outline: none;
}
.search-input:focus { border-color: var(--accent); width: 200px; }
.search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-dim);
  font-size: 12px;
  pointer-events: none;
}
.search-suggest {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
  z-index: 200;
  max-height: 240px;
  overflow-y: auto;
  display: none;
}
.search-suggest.open { display: block; }
.suggest-item {
  padding: 8px 14px;
  cursor: pointer;
  font-size: 12px;
  border-bottom: 1px solid var(--border-lt);
  transition: background .1s;
}
.suggest-item:last-child { border-bottom: none; }
.suggest-item:hover { background: var(--bg); }
.suggest-item .si-name { font-weight: 700; color: var(--text); }
.suggest-item .si-nsc  { font-size: 10px; color: var(--text-dim); margin-top: 1px; }
.suggest-item .si-highlight { color: var(--accent); }

/* ── ステータスバー ── */
.stat {
  padding: 5px 20px;
  font-size: 11px;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border-lt);
  background: var(--surface2);
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
}
.stat strong { color: var(--accent); }

/* ── ジャンプナビ ── */
.jumpnav {
  padding: 7px 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  border-bottom: 1px solid var(--border-lt);
  background: var(--surface);
  align-items: center;
}
.jumpnav .tier-btns { margin-left: auto; }

/* ── 行レイアウト ── */
.nsc-row {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.nsc-row:last-child { border-bottom: none; }
.nsc-row:hover { background: var(--surface2); }

.label-col {
  width: 120px;
  min-width: 120px;
  padding: 12px 10px 12px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-right: 3px solid var(--accent);
}
.mode-tokyo .label-col { border-right-color: var(--tokyo); }
.mode-osaka .label-col { border-right-color: var(--osaka); }

.lmain {
  font-family: 'Oswald', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}
.lsub-nsc {
  font-family: 'Oswald', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
  margin-top: 1px;
}

.mode-tokyo .lmain   { font-size: 15px; }
.mode-tokyo .lsub-nsc { font-size: 11px; color: var(--text-dim); font-weight: 400; font-family: 'Noto Sans JP', sans-serif; }
.mode-osaka .lmain   { font-size: 11px; color: var(--text-dim); font-weight: 400; font-family: 'Noto Sans JP', sans-serif; }
.mode-osaka .lsub-nsc { font-size: 15px; color: var(--text); font-weight: 700; font-family: 'Oswald', sans-serif; }

.lyear {
  display: inline-block;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: var(--accent);
  border-radius: 4px;
  padding: 1px 7px;
}
.mode-tokyo .lyear { background: var(--tokyo); }
.mode-osaka .lyear { background: var(--osaka); }

.lsub { font-size: 10px; color: var(--text-dim); margin-top: 3px; line-height: 1.5; }
.label-col.unk { border-right-color: var(--border); }
.label-col.unk .lmain { font-size: 12px; color: var(--text-dim); font-weight: 400; font-family: 'Noto Sans JP', sans-serif; }

.members-col {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  gap: 6px;
  padding: 10px 16px 10px 12px;
}

/* ── カード ── */
.card {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  padding: 7px 12px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  text-decoration: none;
  color: inherit;
  transition: all .15s;
  min-width: 110px;
  max-width: 210px;
  box-shadow: 0 1px 4px rgba(100,50,20,.06);
}
.card:hover { box-shadow: 0 3px 10px rgba(0,0,0,.12); transform: translateY(-2px); }
.card.tokyo { border-color: var(--tokyo-lt);  }
.card.tokyo:hover { border-color: var(--tokyo); box-shadow: 0 3px 10px rgba(26,106,181,.2); }

.card.osaka { border-color: var(--osaka-lt); }
.card.osaka:hover { border-color: var(--osaka); box-shadow: 0 3px 10px rgba(233,30,99,.2); }

.card.highlight { box-shadow: 0 0 0 3px var(--accent); }

.cname { font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.new-badge {
  font-size: 9px;
  font-weight: 700;
  background: #e8521a;
  color: #fff;
  border-radius: 4px;
  padding: 1px 5px;
  letter-spacing: .03em;
  flex-shrink: 0;
}
.cppl  { font-size: 10px; color: var(--text-dim); margin-top: 2px; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── フッター ── */
footer {
  margin-top: 40px;
  padding: 24px 20px;
  border-top: 1px solid var(--border);
  background: var(--surface);
  text-align: center;
}
.footer-inner { display: flex; flex-direction: column; gap: 8px; }
.footer-source, .footer-contact, .footer-disclaimer {
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.8;
}
.footer-disclaimer {
  font-size: 10px;
  color: var(--text-dim);
  max-width: 600px;
  margin: 4px auto 0;
  line-height: 1.7;
}
.footer-source a, .footer-contact a {
  color: var(--accent);
  text-decoration: none;
}
.footer-source a:hover, .footer-contact a:hover { text-decoration: underline; }

/* ── レスポンシブ ── */
@media (max-width: 600px) {
  header { height: auto; padding: 8px 12px; flex-wrap: wrap; gap: 8px; }
  .label-col { width: 84px; min-width: 84px; padding: 10px 6px 10px 12px; }
  .card { min-width: 96px; }
  .logo-text { font-size: 16px; }
  .search-input { width: 150px; }
  .search-input:focus { width: 150px; }
}