/* 試作のため、この1ページだけで完結するようにCSSを直接書いています。
   本番に載せるときは compare/style.css と統合します。 */
:root{
  --primary:#0a2463; --accent:#e63946; --gold:#f4a261;
  --bg:#f0f4f8; --card-bg:#fff; --text:#1a1a2e; --muted:#6c757d; --border:#dee2e6;
  --team:#007dc5; --team2:#fdb933;
  --new:#1f7a4d; --new-bg:#e8f6ee; --old:#8a93a6; --old-bg:#f1f3f6;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Helvetica Neue',Arial,'Hiragino Kaku Gothic ProN',sans-serif;background:var(--bg);color:var(--text);line-height:1.8;}
a{color:inherit;}

header{background:linear-gradient(135deg,#0a2463 0%,#1a3a7a 100%);color:#fff;box-shadow:0 4px 12px rgba(0,0,0,.2);}
.header-inner{max-width:920px;margin:0 auto;padding:18px 22px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.logo{font-size:1.45rem;font-weight:900;letter-spacing:-.5px;text-decoration:none;color:#fff;}
.logo span{color:var(--gold);}
.logo-sub{font-size:.8rem;color:rgba(255,255,255,.7);margin-top:2px;font-weight:400;}
.site-nav{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;}
.site-nav a{color:#dbe4f5;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);
  text-decoration:none;font-weight:700;font-size:.82rem;padding:7px 14px;border-radius:20px;white-space:nowrap;}
.site-nav a:hover{background:rgba(255,255,255,.2);color:#fff;}

.wrap{max-width:920px;margin:0 auto;padding:26px 22px 70px;}
.breadcrumb{font-size:.8rem;color:var(--muted);margin-bottom:16px;}
.breadcrumb a{color:var(--primary);text-decoration:none;}

/* チームの見出し */
.team-hero{background:var(--card-bg);border-radius:16px;box-shadow:0 2px 10px rgba(0,0,0,.07);
  padding:26px 26px 22px;border-top:8px solid var(--team);margin-bottom:20px;}
.th-badges{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px;}
.th-badge{font-size:.72rem;font-weight:800;padding:4px 11px;border-radius:12px;background:var(--team);color:#fff;}
.th-badge.sub{background:var(--old-bg);color:var(--muted);}
.team-hero h1{font-size:1.75rem;font-weight:900;color:var(--primary);line-height:1.4;margin-bottom:6px;}
.th-kana{font-size:.85rem;color:var(--muted);margin-bottom:12px;}
.th-lead{font-size:.97rem;}

/* 目次 */
.toc{background:var(--card-bg);border-radius:14px;box-shadow:0 2px 10px rgba(0,0,0,.07);padding:16px 20px;margin-bottom:20px;}
.toc b{display:block;font-size:.86rem;color:var(--primary);margin-bottom:8px;}
.toc ul{list-style:none;display:flex;gap:8px;flex-wrap:wrap;}
.toc a{display:inline-block;font-size:.83rem;font-weight:700;text-decoration:none;color:var(--primary);
  background:#f0f4fa;border:1px solid var(--border);border-radius:20px;padding:5px 13px;}
.toc a:hover{background:var(--team);color:#fff;border-color:var(--team);}

.section{background:var(--card-bg);border-radius:16px;box-shadow:0 2px 10px rgba(0,0,0,.07);padding:24px;margin-bottom:20px;scroll-margin-top:14px;}
.section h2{font-size:1.2rem;font-weight:900;color:var(--primary);margin-bottom:14px;padding-left:12px;border-left:5px solid var(--team);}
.section h3{font-size:1rem;font-weight:800;color:var(--primary);margin:20px 0 8px;}
.section p{font-size:.94rem;margin-bottom:12px;}
.section p:last-child{margin-bottom:0;}
.note{font-size:.83rem;color:var(--muted);}

/* 基本情報のテーブル */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:6px 0 12px;}
table.info{width:100%;border-collapse:collapse;font-size:.9rem;}
table.info th{background:#f0f3f9;border:1px solid var(--border);padding:9px 12px;text-align:left;white-space:nowrap;width:30%;font-size:.85rem;}
table.info td{border:1px solid var(--border);padding:9px 12px;}

/* スローガン
   公式のスローガン画像に寄せて、太い縦長の書体・大文字・行間つめで見せる。
   一部の単語だけ色を変えたい場合は .sl-accent を付ける（例：OWN だけ黄色） */
/* 「今季の掲げているもの」の中の「今季の目標」 */
.sl-goal{background:#f4f7fc;border-left:4px solid var(--team);border-radius:8px;padding:10px 14px;margin:14px 0 0;}
.sl-goal-lab{display:inline-block;background:var(--team);color:#fff;font-size:.72rem;font-weight:800;border-radius:9px;padding:2px 10px;margin-right:10px;vertical-align:1px;}
/* ロスターの「区分」列（外国籍・帰化・アジア特別枠）。確認できたクラブだけ列が出る */
.roster td.cat{white-space:nowrap;width:1%;text-align:center;}
.cat-tag{display:inline-block;font-size:.7rem;font-weight:700;line-height:1.5;padding:1px 7px;border-radius:9px;border:1px solid currentColor;}
.cat-tag.is-foreign{color:#1d5fa8;background:#eef4fb;}
.cat-tag.is-natural{color:#7a3fa0;background:#f5eefa;}
.cat-tag.is-asia{color:#b3541e;background:#fcf1ea;}
/* スマホ幅では、区分の列があってもポジションまで画面に収まるように余白と札を小さくする */
@media (max-width:480px){
  .roster td,.roster th{padding:7px 6px;}
  .roster td.num{width:3.2em;}
  .roster td.pos{width:auto;}
  .cat-tag{font-size:.64rem;padding:1px 5px;}
}
/* 背景はチームごとに --slogan-bg で上書きできる（例：富山は黒）。無ければチーム色→紺のグラデーション */
/* 文字色はチームごとに --slogan-fg で上書きできる（例：横浜EX・八王子は白背景に濃い文字） */
/* 背景が白などの明るい色のときは、枠線（--slogan-border）を付けて囲いが分かるようにする */
.slogan{background:var(--slogan-bg,linear-gradient(135deg,var(--team) 0%,#0a2463 100%));color:var(--slogan-fg,#fff);border:1px solid var(--slogan-border,transparent);border-radius:14px;
  padding:30px 22px 26px;text-align:center;margin-bottom:16px;overflow:hidden;}
.slogan b{display:block;
  font-family:'Arial Black','Helvetica Neue',Impact,'Hiragino Kaku Gothic ProN',sans-serif;
  font-size:clamp(2.3rem,10vw,4rem);font-weight:900;line-height:.98;letter-spacing:-.01em;
  text-transform:uppercase;font-stretch:condensed;transform:scaleX(.94);}
/* 行は折り返さない。幅に収まらない行は、ページ内の小さなスクリプトが字を縮めて1行に収める */
.slogan b .sl-line{display:block;white-space:nowrap;}
/* 強調色はチームごとに --slogan-accent で上書きできる（既定は金色） */
.slogan b .sl-accent{color:var(--slogan-accent,#fdb933);font-size:inherit;display:inline;}
/* 読みがなの行だけを小さくする。b の中の span まで小さくしないよう > で直下に限定する */
.slogan > span{display:block;font-size:.85rem;color:var(--slogan-kana,rgba(255,255,255,.78));margin-top:14px;letter-spacing:.08em;}

/* ロスター */
.roster{width:100%;border-collapse:collapse;font-size:.9rem;}
.roster th{background:#f0f3f9;border:1px solid var(--border);padding:8px 10px;font-size:.82rem;text-align:left;}
.roster td{border:1px solid var(--border);padding:8px 10px;}
.roster td.num{font-weight:800;color:var(--team);white-space:nowrap;width:4.5em;text-align:center;}
.roster td.pos{color:var(--muted);white-space:nowrap;width:6.5em;font-size:.84rem;}

/* Xの埋め込み（ユニフォーム図鑑と同じ見せ方） */
.embed-wrap{margin-top:12px;min-height:560px;display:flex;justify-content:center;align-items:flex-start;}
.embed-wrap blockquote{margin:0;}

/* スポンサー */
.sponsor{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;}
.sp-card{background:#f7f9fc;border:1px solid var(--border);border-left:5px solid var(--muted);
  border-radius:12px;padding:14px 16px;}
.sp-card.is-top{border-left-color:var(--team);background:#f2f7fd;}
.sp-card b{display:block;font-size:1.02rem;font-weight:800;color:var(--primary);}
.sp-card .sp-tier{display:inline-block;margin-top:5px;font-size:.7rem;font-weight:800;color:#fff;
  background:var(--team);border-radius:9px;padding:2px 9px;}
.sp-card p{margin-top:8px;font-size:.88rem;color:#444;line-height:1.75;}

/* 過去のもの（開いたり閉じたりできる） */
.past{border:1px solid var(--border);border-radius:12px;margin-top:14px;overflow:hidden;background:#fff;}
.past>summary{list-style:none;cursor:pointer;padding:12px 15px;display:flex;align-items:center;gap:9px;
  background:#f4f6fa;font-size:.9rem;color:var(--muted);}
.past>summary::-webkit-details-marker{display:none;}
.past>summary::before{content:'▸';color:var(--team);transition:transform .15s;}
.past[open]>summary::before{transform:rotate(90deg);}
.past>summary b{font-weight:800;color:#5a6478;}
.past>summary span{margin-left:auto;font-size:.79rem;}
.past>summary:hover{background:#eaeff7;}
.past .table-wrap,.past .past-body{padding:12px 14px;}
.past-item{display:flex;gap:14px;align-items:baseline;padding:9px 0;border-bottom:1px dashed var(--border);flex-wrap:wrap;}
.past-item:last-child{border-bottom:none;}
.past-season{flex:0 0 auto;min-width:8em;font-size:.82rem;font-weight:800;color:var(--muted);}
.past-item b{font-size:.98rem;color:var(--primary);}
.past-item p{margin-top:5px;font-size:.87rem;color:#555;}

/* 公式SNS */
.sns{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px;}
.sns a{display:inline-flex;align-items:center;gap:7px;text-decoration:none;
  background:#f7f9fc;border:1px solid var(--border);border-radius:22px;padding:8px 16px;
  font-size:.88rem;font-weight:700;color:var(--primary);}
.sns a:hover{background:#eef3fa;}
.sns a span{font-weight:400;color:var(--muted);font-size:.8rem;}

/* 近くのチーム */
.near{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin-top:6px;}
.near a{display:block;background:#f7f9fc;border:1px solid var(--border);border-radius:12px;
  padding:14px 16px;text-decoration:none;}
.near a:hover{background:#eef3fa;}
.near b{display:block;font-size:.97rem;font-weight:800;color:var(--primary);}
.near span{display:block;font-size:.8rem;color:var(--muted);margin-top:3px;}
.map-link{margin-left:8px;font-size:.82rem;color:var(--team);text-decoration:underline;white-space:nowrap;}

/* 年表 */
.timeline{list-style:none;border-left:3px solid var(--border);margin:8px 0 4px;padding-left:0;}
.timeline li{position:relative;padding:0 0 16px 20px;}
.timeline li:last-child{padding-bottom:0;}
.timeline li::before{content:'';position:absolute;left:-8px;top:8px;width:13px;height:13px;border-radius:50%;
  background:#fff;border:3px solid var(--team);}
.timeline li.big::before{background:var(--team);}
.tl-year{display:block;font-size:.8rem;font-weight:800;color:var(--team);}
.tl-body{font-size:.92rem;}

/* ファンクラブのプラン */
.plan-list{list-style:none;}
.plan-list li{border:1px solid var(--border);border-radius:11px;padding:12px 15px;margin-bottom:9px;background:#fbfcfe;}
.plan-list li.is-closed{opacity:.62;background:var(--old-bg);}
.pl-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;}
.pl-name{font-weight:800;font-size:.98rem;color:var(--primary);}
/* 役職のラベルと選手名は、スマホでも語の途中で折り返さないようにする
   （「キャプテ／ン」のように札の中で切れてしまうため） */
.pl-tag{
  display:inline-block;white-space:nowrap;vertical-align:middle;
  font-size:.68rem;font-weight:800;background:var(--old);color:#fff;
  border-radius:10px;padding:2px 8px;margin-left:7px;
}
/* 「中山 拓哉／ヤニー・ウェッツェル／赤穂 雷太」のような並びは、
   名前の途中ではなく「／」のところで折り返す */
table.info td .nw{white-space:nowrap;}
/* シーズン途中の出入り。消さずに残して、その年の記録にする */
.pl-tag.is-join{background:#1f7a4d;}
.pl-tag.is-leave{background:#b0b7c3;}
.pl-tag.is-il{background:#c77700;}
/* 今シーズンの選手の動き（新しい順の記録） */
.roster-log{list-style:none;margin:8px 0 0;padding:0;border-top:1px solid var(--border);}
.roster-log li{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;padding:9px 2px;border-bottom:1px solid var(--border);font-size:.9rem;}
.roster-log time{flex:0 0 3.4em;font-weight:800;color:var(--muted);font-size:.84rem;}
.rl-type{flex:0 0 auto;font-size:.72rem;font-weight:800;color:#fff;border-radius:9px;padding:2px 9px;white-space:nowrap;background:#8a93a6;}
.rl-type.rl-in{background:#1f7a4d;}
.rl-type.rl-out{background:#8a93a6;}
.rl-type.rl-il{background:#c77700;}
.rl-type.rl-back{background:#2f6fb5;}
.rl-body{flex:1 1 220px;line-height:1.6;}
.rl-body a{font-size:.8rem;margin-left:4px;}
.roster tr.is-left td{color:#9aa3af;background:#fafbfc;}
.roster tr.is-left td.num{color:#b0b7c3;}
.pl-note{display:block;margin-top:2px;font-size:.76rem;color:var(--muted);line-height:1.5;}
.past-label{margin-left:8px;font-size:.76rem;font-weight:600;color:var(--muted);}
.past-note{padding:0 14px 10px;margin:0;}
/* 選手名は長い名前もあるので折り返しを許し、札だけを丸ごと次の行に送る */
.roster td .nw{white-space:normal;}
.pl-price{font-weight:900;font-size:1.02rem;color:var(--team);white-space:nowrap;}
.pl-benefit{font-size:.85rem;color:var(--muted);margin-top:5px;}

/* 変更ポイント */
.change-list{list-style:none;}
.change-list li{background:#f7f9fc;border:1px solid var(--border);border-radius:11px;padding:11px 14px;margin-bottom:8px;font-size:.9rem;}
.chip{display:inline-block;font-size:.7rem;font-weight:800;color:#fff;border-radius:10px;padding:2px 9px;margin-right:8px;white-space:nowrap;}
.chip-new{background:var(--new);} .chip-up{background:#c0392b;} .chip-del{background:var(--old);}

/* マスコット */
.mascot{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;}
.mascot-num{background:var(--team);color:#fff;border-radius:14px;width:88px;text-align:center;padding:14px 6px;}
.mascot-num b{display:block;font-size:2rem;font-weight:900;line-height:1;}
.mascot-num span{font-size:.68rem;opacity:.85;}

/* 導線 */
.cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;}
.cta a{text-decoration:none;font-weight:800;font-size:.87rem;border-radius:11px;padding:10px 16px;}
.cta-primary{background:var(--team);color:#fff;}
.cta-ghost{background:#fff;color:var(--primary);border:1.5px solid var(--border);}
.cta-ghost:hover{border-color:var(--team);}

footer{background:var(--primary);color:#cfd8ea;padding:24px 22px;font-size:.82rem;text-align:center;}
footer a{color:#fff;}

@media(max-width:768px){
  .team-hero{padding:20px 17px 18px;}
  .team-hero h1{font-size:1.35rem;}
  .section{padding:19px 16px;}
  .mascot{grid-template-columns:1fr;}
  .mascot-num{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;}
  .mascot-num b{font-size:1.5rem;}
}

/* ---- 入口の一覧ページ ---- */
.ti-list{
  list-style:none;margin:6px 0 20px;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:8px;
}
.ti-list li{font-size:.92rem;line-height:1.5;}
/* 枠のどこを押しても開けるように、カード全体をリンクにしている */
.ti-card{
  display:block;height:100%;text-decoration:none;color:inherit;
  padding:10px 12px;border:1px solid #e6e9f0;border-radius:9px;background:#fff;
  transition:border-color .12s, box-shadow .12s, background .12s;
}
a.ti-card:hover,a.ti-card:focus-visible{
  border-color:var(--team,#0a2463);background:#f7faff;
  box-shadow:0 2px 8px rgba(10,36,99,.10);
}
a.ti-card:focus-visible{outline:2px solid var(--team,#0a2463);outline-offset:2px;}
.ti-card b{color:var(--team,#0a2463);font-weight:700;}
a.ti-card:hover b{text-decoration:underline;}
.ti-meta{
  display:block;margin-top:3px;
  font-size:.76rem;line-height:1.45;color:var(--muted);
}
.ti-soon{color:var(--muted);background:#fafbfc;}
.ti-soon small{font-size:.78rem;margin-left:3px;}

/* 検索欄（比較ブログ・ユニフォーム図鑑と同じ見た目） */
.team-search{position:relative;margin:0 0 10px;max-width:460px;}
.team-search input{width:100%;padding:12px 40px 12px 16px;font-size:.95rem;font-family:inherit;
  border:1.5px solid var(--border);border-radius:11px;background:#fff;color:var(--text);}
.team-search input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(10,36,99,.12);}
.team-search input::-webkit-search-cancel-button{display:none;}
.team-search button{position:absolute;right:8px;top:50%;transform:translateY(-50%);
  border:none;background:transparent;color:var(--muted);font-size:1.2rem;cursor:pointer;
  line-height:1;padding:4px 8px;border-radius:8px;display:none;}
.team-search button:hover{background:var(--old-bg);color:var(--text);}
.team-search.has-value button{display:block;}
.search-note{font-size:.85rem;color:var(--muted);margin:0 0 14px;min-height:1.2em;}
/* 検索欄をスクロールしても上に残す（早見表・比較ブログ・図鑑と同じ動き）。
   白いカードの中にあるので、カードの余白ぶん左右に広げて背景を白で塗る */
.ti-sticky{position:sticky;top:0;z-index:20;background:var(--card-bg);
  margin:-24px -24px 0;padding:18px 24px 4px;border-radius:16px 16px 0 0;}
.ti-sticky .search-note{margin-bottom:6px;min-height:0;}
.ti-sticky .search-note:empty{margin:0;}
.ti-sticky.is-stuck{border-radius:0;box-shadow:0 4px 12px rgba(0,0,0,.08);}
.ti-block{scroll-margin-top:90px;}
@media (max-width:768px){
  .ti-sticky{margin:-19px -16px 0;padding:14px 16px 4px;}
}
.ti-block h3{font-size:1rem;font-weight:800;color:var(--primary);margin:20px 0 8px;}
.ti-block h3 small{font-size:.78rem;font-weight:600;color:var(--muted);margin-left:6px;}