/* --- サイト版オーバーライド --- */
.setsu-tbl{width:100%;border-collapse:collapse;margin:6px 0 4px;font-size:14px}
.setsu-tbl th{text-align:left;background:var(--accent-soft);color:var(--accent-ink);font-weight:700;padding:8px 10px;border-bottom:2px solid var(--border);white-space:nowrap}
.setsu-tbl td{padding:9px 10px;border-bottom:1px solid var(--border);vertical-align:top;line-height:1.5}
.setsu-tbl td.nowrap{white-space:nowrap}
.setsu-tbl tr:last-child td{border-bottom:none}
.setsu-tbl .cap{color:var(--muted);font-size:12.5px;display:inline-block;margin-top:2px}
.setsu-arch{margin-top:14px}
.setsu-arch summary{cursor:pointer;font-size:13px;font-weight:700;color:var(--muted);padding:9px 12px;background:var(--surface-2);border-radius:10px}
.setsu-arch summary:hover{color:var(--accent-ink)}
.setsu-arch .setsu-tbl{opacity:.6;margin-top:8px}
.subhero{background:linear-gradient(160deg,var(--accent-deep),var(--accent));color:#fff}
.subhero-in{max-width:960px;margin:0 auto;padding:14px 18px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.subhero-in h1{font-size:22px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.subhero-in .pg{font-size:13px;font-weight:700;color:#c3c9f2;margin-left:9px}
.subhero .h3-tag{width:44px;height:44px;border-radius:10px;font-size:15px;flex:none}
.sh-tags{display:flex;gap:8px;flex:none}
.sh-official{font-size:12.5px;font-weight:700;color:#c3c9f2;margin-top:3px}
.sh-stats{display:flex;gap:8px;margin-left:auto;flex:none}
.sh-stats .h2-stat{width:52px;height:52px;border:none}
.sh-stats .h2-stat .k{font-size:10.5px}
.sh-stats .h2-stat .v{font-size:17px}
.subhero-in a.back{color:#fff;font-size:12px;font-weight:700;opacity:.85;flex:none}
@media(max-width:560px){.sh-stats{margin-left:0}.subhero-in a.back{margin-left:auto}}
/* TOPヘッダー(白背景・水色大タグ+校名+紺の区バッジ | 右に水色スタットカード) */
.hero2{background:var(--surface);border-bottom:1px solid var(--border)}
.hero2-in{max-width:960px;margin:0 auto;padding:26px 18px 20px}
.h3-top{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap}
.h3-idcol{flex:none}
.h3-tags{display:flex;gap:10px;flex:none}
.h2-stats.h2-stats-mob{display:none}   /* PCでは非表示。スマホでバッジ直下に表示（.h2-statsに後勝ちされないよう2クラスで詳細度up） */
.h3-tag{width:60px;height:60px;background:#dce9f7;border-radius:14px;display:grid;place-items:center;
  font-size:20px;font-weight:800;color:#12223a;line-height:1}
/* 設置種別の色分け */
.h3-tag.st-toritsu{background:#dce9f7;color:#12324f}   /* 都立=青 */
.h3-tag.st-kuritsu{background:#d8f0ec;color:#0f3d36}   /* 区立=青緑 */
.h3-tag.st-kokuritsu{background:#f3e8d0;color:#5a4413} /* 国立=金 */
.h3-tag.st-shiritsu{background:#e6e0f5;color:#3a2e66}  /* 私立=紫 */
/* 共学/男女の色分け */
.h3-tag.g-kyogaku{background:#ddf0dd;color:#1e4d26}    /* 共学=緑 */
.h3-tag.g-danshi{background:#d4eef7;color:#0d4a5c}     /* 男子=水色 */
.h3-tag.g-joshi{background:#fbe3ea;color:#7a2440}      /* 女子=桃 */
.h3-ttl{flex:1;min-width:220px}
.h3-ttl h1{font-size:38px;line-height:1.15;letter-spacing:-.01em;color:var(--ink);display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.h3-ku{background:#1c2b4a;color:#fff;border-radius:0;padding:8px 20px;font-size:18px;font-weight:800;line-height:1;white-space:nowrap}
.h3-ttl .official{font-size:19px;color:#7c8db0;margin-top:10px;font-weight:700}
.h3-right{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:10px;flex:none}
.h2-stats{display:flex;gap:8px}
.h2-statwrap{display:flex;flex-direction:column;align-items:center;width:60px}
.h3-ranks{display:flex;flex-direction:column;gap:3px;margin-top:0;align-items:flex-end}
.rank-link{font-size:10px;font-weight:700;color:var(--accent-ink);text-decoration:underline;line-height:1.45;white-space:nowrap;text-align:right}
.h2-stat{width:60px;height:60px;background:#fff;border:1.5px solid var(--border-2);border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.h2-stat .k{font-size:12px;font-weight:700;color:#12222e;white-space:nowrap}
.h2-stat .v{font-size:20px;font-weight:800;color:#0c1a24;line-height:1}
.h2-stat .v.rng{font-size:15px;letter-spacing:-.3px}   /* コース複数校の偏差値帯(例 61-69)を枠内に収める */
.sh-stats .h2-stat .v.rng{font-size:12px;letter-spacing:-.3px}
.h2-link{text-align:right;margin:10px 0 0}
.h2-link a{font-size:10.4px;font-weight:700;color:var(--accent-ink);text-decoration:underline}
.cmp-btn{border:1px solid var(--accent);background:var(--accent);color:#fff;border-radius:100px;padding:9px 20px;font-size:13px;font-weight:700;cursor:pointer}
.cmp-btn:hover{background:var(--accent-deep)}

.fav-btn{border:1.5px solid #E0608C;background:#E0608C;color:#fff;border-radius:100px;padding:9px 20px;font-size:13px;font-weight:700;cursor:pointer}
.fav-btn:hover{opacity:.85}
.fav-btn.on{background:#fff;color:#E0608C}
.h3-info{margin-top:16px;display:flex;gap:26px;align-items:flex-start;flex-wrap:wrap}
.h3-info .h2-link{width:100%;flex:none;margin:2px 0 0}
.h3-info .h3-lines{flex:1.5;min-width:0}
.h3-info .h3-lines2{flex:1;min-width:200px;border-left:1px solid var(--border);padding-left:20px}
@media(max-width:680px){.h3-info{flex-direction:column;gap:4px}.h3-info .h3-lines2{border-left:none;padding-left:0}}
.h3-info{background:var(--surface-2);border-radius:14px;padding:5px 16px 8px;margin-top:14px}
.h3-lines{margin-top:6px;font-size:14px;line-height:1.65;color:var(--ink)}
.h3-lines .it{display:block}
.h3-lines .it b{color:var(--ink);font-weight:800}
.h3-lines .it::before{content:"・";color:var(--muted)}
@media(max-width:560px){
  .h3-ttl h1{font-size:27px;gap:9px}
  .h3-ku{font-size:13px;padding:6px 14px}
  .h3-right{margin-left:0;width:100%;align-items:center}
  .h3-ranks{align-items:center}
  .rank-link{text-align:center}
  .h3-ttl{min-width:170px}
  /* スマホ：偏差値=私立の下／満足度=男子の下（左揃え・同幅60px同間隔10pxで整列） */
  .h3-idcol{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
  .h2-stats.h2-stats-mob{display:flex;gap:10px}
  .h3-right .h2-stats{display:none}
}
/* ナビ: 等幅タブバー */
.jumpnav{background:var(--surface);border-bottom:1px solid var(--border);top:59px}
.jumpnav-in{max-width:960px;margin:0 auto;display:flex;gap:0;padding:0}
.jumpnav a{flex:1;text-align:center;white-space:nowrap;padding:14px 4px;border-radius:0;font-size:13.5px;font-weight:700;
  color:var(--ink);background:var(--surface);border-right:1px solid var(--border)}
.jumpnav a:first-child{border-left:1px solid var(--border)}
.jumpnav a:hover{background:var(--accent-soft);color:var(--accent-ink)}
@media(max-width:640px){.jumpnav-in{overflow-x:auto;scrollbar-width:none}.jumpnav-in::-webkit-scrollbar{display:none}.jumpnav a{flex:1 0 auto;padding:13px 13px}}
.jumpnav a.active{background:var(--accent);color:#fff}
@media(max-width:560px){.jumpnav a{font-size:11px;padding:12px 2px}}
/* 併願・類似: 2カラム(左=偏差値/右=エリア)+推薦理由タグ */
.sim-cols{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
@media(max-width:680px){.sim-cols{grid-template-columns:1fr}}
.sim-why{flex:none;font-size:10.5px;font-weight:800;color:var(--accent-ink);background:var(--accent-soft);
  border-radius:100px;padding:4px 10px;white-space:nowrap}
.sim-why.hot{background:var(--gold-soft);color:var(--gold)}

/* この学校のポイント: 横並びカード(最大3行) */
.points{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.points .p{display:block;background:var(--accent-soft);border-radius:12px;padding:13px 14px;
  font-size:13.5px;line-height:1.6;font-weight:600;color:var(--accent-deep)}
.points .p .d{display:none}
.points .p span:last-child{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
@media(max-width:680px){.points{grid-template-columns:1fr;gap:8px}.points .p span:last-child{-webkit-line-clamp:2}}

/* 制服パネル内ギャラリー(ラベル+クリック拡大)・左にテキスト／右に画像の2カラム。
   制服イラストはこのサイトの主役なので、枠の縦横比を画像(990:1920)に合わせて隙間なく大きく見せる。
   スマホでも段組みは崩さず、画像列を右に固定して極力大きく表示する。 */
.uni-flex{display:flex;gap:18px;align-items:flex-start}
.uni-side{flex:1 1 auto;min-width:0}
.uni-side dl.kv dt:first-of-type,.uni-side dl.kv dt:first-of-type+dd{border-top:none}
.uni-row{display:flex;gap:14px;margin-top:0;flex:none}
.uni-wrap{display:flex;flex-direction:column;gap:6px}
.uni-lab{font-size:12px;font-weight:800;color:var(--muted);text-align:center}
/* 枠＝画像と同じ縦横比。object-fit は cover/contain どちらでも隙間・見切れが出ない */
.uni-card{width:168px;aspect-ratio:990/1920;border:1px solid var(--border);border-radius:12px;overflow:hidden;
  background:var(--surface-2);display:grid;place-items:center;color:var(--faint);font-size:11px;text-align:center;line-height:1.4}
.uni-card img{width:100%;height:100%;object-fit:cover;display:block}
.uni-card.zoom{cursor:zoom-in}
/* スマホ：画像列を画面幅の約42%に。テキストは残り幅で自動的に折り返す。
   共通の kv は「ラベル92px＋値」の2列だが、狭い列だと値が潰れるので、
   制服パネル内だけ「ラベルの下に値」の積み上げにして値へ全幅を渡す。 */
@media(max-width:560px){
  .uni-flex{gap:14px}
  .uni-card{width:42vw;max-width:200px}
  .uni-side dl.kv{grid-template-columns:1fr}
  .uni-side dl.kv dt{border-top:1px solid var(--border);padding:8px 0 2px}
  .uni-side dl.kv dt:first-of-type{border-top:none}
  .uni-side dl.kv dd{border-top:none;padding:0 0 8px}
}
.lightbox{position:fixed;inset:0;background:rgba(10,14,26,.8);display:none;place-items:center;z-index:99;cursor:zoom-out}
.lightbox.show{display:grid}
.lightbox img{max-width:92vw;max-height:92vh;border-radius:10px;background:#fff}
/* 進学実績: 進学率を大きく・スタットは横並びコンパクト */
.sh-rate{font-size:16px;font-weight:700;color:var(--accent-deep);background:var(--accent-soft);border-radius:10px;padding:13px 15px;margin:0 0 14px;line-height:1.6}
.sh-rate-k{display:block;font-size:11.5px;font-weight:800;letter-spacing:.08em;color:var(--accent-ink);opacity:.85;margin-bottom:3px}
.stat-row{display:flex;gap:10px;flex-wrap:wrap}
.stat-c{display:inline-flex;align-items:baseline;gap:8px;background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:9px 14px}
.stat-c .k{font-size:12px;font-weight:700;color:var(--muted)}
.stat-c .v{font-size:20px;font-weight:800;color:var(--accent-deep)}
/* 入試基準: 年度を2倍サイズ */
.ny-year{font-size:22px;font-weight:800;color:var(--accent-deep)}
/* 学校設備: 幅を狭め6項目1行 */
.fac-grid{grid-template-columns:repeat(6,1fr);gap:7px}
.fac{padding:8px 4px}
.fac .fk{font-size:10px}
.fac .fv{font-size:11px}
@media(max-width:680px){.fac-grid{grid-template-columns:repeat(3,1fr)}}
/* 満足度: レーダー高さでクリップ+もっと見る */
.kc-side{max-height:none;overflow:visible}
.kc-clip{max-height:264px;overflow:hidden;position:relative}
.kc-clip.open{max-height:none}
.kc-clip:not(.open)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:48px;
  background:linear-gradient(rgba(255,255,255,0),var(--surface))}
.kc-more{margin-top:10px;width:100%;border:1px solid var(--border-2);background:var(--surface);border-radius:100px;
  padding:9px;font-size:13px;font-weight:700;color:var(--accent-ink);cursor:pointer}
.kc-more:hover{border-color:var(--accent);background:var(--accent-soft)}
@media print{.kc-clip{max-height:none}.kc-more{display:none}}

/* 高校TOP: 制服(左) と 満足度レーダー(右) を同じ高さの2カラムに（2026-08-13 ユーザー指定）。
   grid + align-items:stretch なので、中身の量に関わらず2枚の高さが揃う。 */
.top2col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:stretch;margin-bottom:16px}
.top2col>.panel{margin-bottom:0;height:100%}
/* 半幅では kv の「ラベル104px＋値」が潰れるので、スマホと同じくラベルの下に値を積む */
.top2col .uni-side dl.kv{grid-template-columns:1fr}
.top2col .uni-side dl.kv dt{border-top:1px solid var(--border);padding:8px 0 2px}
.top2col .uni-side dl.kv dt:first-of-type{border-top:none}
.top2col .uni-side dl.kv dd{border-top:none;padding:0 0 8px}
/* レーダーは半幅の中央に置き、列幅なりに伸ばす（元は固定280px） */
.top2col .radar-col{width:100%;display:flex;flex-direction:column;align-items:center}
.top2col .radar-wrap{width:100%;max-width:300px}
.top2col .score-strength{width:100%;max-width:300px}
/* 1カラムに落ちたら height:100% を解除する。grid item に height:100% を残したまま margin-bottom を足すと
   マージンが行の外に出て間隔が 0 になるため、間隔は gap（基本ルールの16px）に任せる */
@media(max-width:860px){.top2col{grid-template-columns:1fr}.top2col>.panel{height:auto}}

/* みんなの声(カテゴリ別)は下に1カラム全幅。全幅なので折りたたみ高さを広げる。
   ⚠「もっと見る」で付く .open を必ず後勝ちで解除すること。.kc-clip.open{max-height:none} は
   .kc-full .kc-clip と同じ詳細度(0,2,0)で、こちらが後ろにあるため展開できなくなる（実際に踏んだ） */
.kc-full .kc-clip{max-height:360px}
.kc-full .kc-clip.open{max-height:none}
/* CTA2本は上下でなく左右の同列に（2026-08-13 ユーザー指定） */
/* 制服パネルの「制服ギャラリーで見くらべる」も中央に（2026-08-13 ユーザー指定）。
   他パネルの ctx-link（部活から高校を探す 等）は左寄せのまま */
.top2col .ctx-link{text-align:center}
/* 左右のCTA（制服ギャラリー／満足度ランキング）を同じ高さに揃える（2026-08-13 ユーザー指定）。
   2枚のパネルは既に同じ高さなので、パネルを縦フレックスにしてCTAを margin-top:auto で
   下端へ落とすと、中身の量が違っても2つのCTAが必ず同じ行に並ぶ */
.top2col>.panel{display:flex;flex-direction:column}
.top2col>.panel>.ctx-link{margin-top:auto;padding-top:14px}
/* 併願・類似の「追加した高校をならべて比較する」も中央に（2026-08-13 ユーザー指定） */
.sim-panel>.ctx-link{text-align:center}
/* CTA2本は左寄せでなく中央に（2026-08-13 ユーザー指定） */
.kc-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:center;margin-top:14px}
.kc-cta .ctx-link{margin-top:0}
.kc-post{display:inline-block;font-weight:800;color:var(--accent-ink);text-decoration:none;
  border:1.5px solid var(--accent);border-radius:100px;padding:9px 18px;background:var(--accent-soft)}
.kc-post:hover{background:var(--accent);color:#fff}
@media(max-width:560px){.kc-cta{flex-direction:column;align-items:stretch}.kc-cta .kc-post{text-align:center}}