/* =====================================================================
   学校チェック / 神奈川
   北海道奥尻町の公式サイトの色と形を踏襲している。
   紺のベタ塗り帯・淡い水色の地・大きな角丸・波形の区切り・丸い線画アイコン。
   ===================================================================== */

@font-face{font-family:"BIZ UDPGothic";font-style:normal;font-weight:400;
 font-display:swap;src:url(/assets/fonts/bizud-400.woff2) format("woff2")}
@font-face{font-family:"BIZ UDPGothic";font-style:normal;font-weight:700;
 font-display:swap;src:url(/assets/fonts/bizud-700.woff2) format("woff2")}
@font-face{font-family:"Zen Maru Gothic";font-style:normal;font-weight:700;
 font-display:swap;src:url(/assets/fonts/zenmaru-700.woff2) format("woff2")}

:root{
 --nv:#1C54A6;        /* 紺。主色 */
 --nv-d:#134079;      /* 濃紺 */
 --sky:#E1F9FF;       /* 淡い水色。地の色 */
 --sky-d:#C9F0FB;
 --tq:#54D8CE;        /* ターコイズ。アクセント */
 --deep:#005379;      /* 濃い青緑。見出しの文字 */
 --ink:#333;
 --soft:#5b6b76;
 --faint:#8fa3b0;
 --line:#d5e6ee;      /* 水色の地に引く罫 */
 --rule:#e2e8ec;      /* 白い地に引く罫。--line は白の上だと薄すぎて消える */
 --accent:#1C54A6;    /* ボタンや強調。紺と同じ色を指す別名 */
 --white:#fff;
 --yl:#FFEE00;        /* 差し色 */
 --hot:#D2443A;       /* 数字の強調 */
 --maru:"Zen Maru Gothic","BIZ UDPGothic","Hiragino Sans","Yu Gothic",sans-serif;
 --gothic:"BIZ UDPGothic","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
 --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;
 --r-lg:30px; --r-md:15px; --r-sm:10px;
}

/* ブラウザ既定の余白を消す。これが残っていると、ヘッダーの白い帯の
   上と左右に地の色がのぞいて安っぽく見える。 */
html,body{margin:0;padding:0}
body{background:var(--sky);-webkit-text-size-adjust:100%}
img{max-width:100%;height:auto}
.gkn{color:var(--ink);font-family:var(--gothic);font-size:16px;line-height:1.95;
 -webkit-font-smoothing:antialiased;font-feature-settings:"palt" 1;background:var(--sky)}
.gkn *{box-sizing:border-box}
.gkn p{margin:0 0 18px;max-width:40em}
.gkn a{color:var(--nv);text-decoration:none;border-bottom:2px solid rgba(28,84,166,.22);
 padding-bottom:1px;font-weight:700}
.gkn a:hover{border-bottom-color:var(--nv)}
.gkn a:focus-visible{outline:3px solid var(--tq);outline-offset:3px;border-radius:4px}
.gkn h2,.gkn h3{margin:0;font-family:var(--maru);font-weight:700}
.gkn b,.gkn strong{font-weight:700}
.gkn-wrap{max-width:1080px;margin:0 auto;padding:0 20px}

/* ---- ヘッダー ---- */
.gkn-head{background:var(--white);border-bottom:3px solid var(--nv)}
.gkn-head-in{max-width:1080px;margin:0 auto;padding:13px 20px;display:flex;
 align-items:center;gap:16px;flex-wrap:wrap}
.gkn .gkn-logo{display:flex;align-items:center;gap:11px;border-bottom:0}
.gkn-logo svg{flex:0 0 auto;width:38px;height:38px}
@media(max-width:600px){.gkn-logo svg{width:33px;height:33px}
 .gkn-logo b{font-size:18px}}
.gkn-logo b{display:block;font-family:var(--maru);font-size:20px;line-height:1.15;
 color:var(--nv);letter-spacing:.05em}
.gkn-logo span{display:block;font-size:9.5px;letter-spacing:.2em;color:var(--tq);
 font-weight:700;margin-top:1px}
.gkn-gnav{margin-left:auto;display:flex;flex-wrap:wrap;gap:0}
/* スマホで常に出す主要5本。PCではヘッダーの並びがあるので出さない */
.gkn-qnav{display:none}
.gkn-gnav-sub{display:none}
/* 開閉のためのチェックボックスとボタン。PCでは出さない */
.gkn-mnav-cb{position:absolute;opacity:0;pointer-events:none}
.gkn-mnav-btn{display:none}
.gkn .gkn-gnav a{font-family:var(--maru);font-size:14.5px;color:var(--nv);border-bottom:0;
 padding:6px 16px;border-left:1px solid var(--line);white-space:nowrap}
.gkn-gnav a:first-child{border-left:0}
.gkn-gnav a:hover{color:var(--tq)}
.gkn-gnav a[aria-current]{color:var(--tq)}

/* ---- 見出し帯（ヒーロー） ---- */
.gkn-hero{background:var(--nv);border-radius:var(--r-lg);padding:30px 32px 28px;
 margin:26px 0 0;color:var(--white);position:relative;overflow:hidden}
.gkn-hero::after{content:"";position:absolute;right:-56px;bottom:-56px;width:170px;height:170px;
 border-radius:50%;background:rgba(84,216,206,.18);z-index:0;pointer-events:none}
/* 県のページの見出しは、右側が空いたまま横に伸びていて、
   47県とも同じ見た目だった。その県のイラストを右に敷く。
   文字の側は紺のままにして読めるようにする */
.gkn-hero-pref::before{content:"";position:absolute;inset:0 0 0 auto;
 width:min(62%,560px);background-image:var(--gkn-hero-img);
 background-size:cover;background-position:center right;z-index:0}
.gkn-hero-pref::after{content:"";position:absolute;inset:0;z-index:0;
 background:linear-gradient(90deg,var(--nv) 0%,var(--nv) 34%,
 rgba(28,84,166,.86) 48%,rgba(28,84,166,0) 78%);
 width:auto;height:auto;border-radius:0;right:auto;bottom:auto}
/* スマホでは横に並べる余地が無い。絵を下に敷いて、
   その上に文字が乗らないよう下側に余白を作る */

/* 字のうしろだけを塗る。イラストの上に白い字が乗って読めなかった。
   行ごとに背景が付くよう box-decoration-break を使い、左右は
   box-shadow で紙面の外へ少しはみ出させる（テプラの形） */
.gkn-tape{background:var(--nv);box-shadow:9px 0 0 var(--nv),-9px 0 0 var(--nv);
 -webkit-box-decoration-break:clone;box-decoration-break:clone;
 padding:1px 0;border-radius:1px}
.gkn-hero-name:has(.gkn-tape){line-height:1.75}
.gkn-hero>*{position:relative;z-index:1}
.gkn-kicker{font-size:12px;letter-spacing:.2em;color:var(--tq);margin:0 0 10px;font-weight:700}
.gkn-hero-name{font-family:var(--maru);font-size:clamp(22px,4.4vw,32px);line-height:1.4;
 font-weight:700;display:block;margin:0 0 22px;letter-spacing:.06em;position:relative}
.gkn-hero-q{font-size:clamp(19px,3.4vw,26px);line-height:1.55;letter-spacing:.03em;
 margin:0 0 6px}
.gkn-hero-full{font-size:13.5px;color:rgba(255,255,255,.74);font-weight:700;
 margin:0 0 20px;letter-spacing:.04em}
/* 偏差値の白い枠の右に置く地図。
   .gkn-hero-top は広い画面では「無いのと同じ」（display:contents）にして、
   枠・数字・地図が今までどおり1行に並ぶ。狭い画面だけ箱として働かせ、
   **枠と地図を同じ高さで横に並べる**（枠の右が空くのが気持ち悪い） */
.gkn-hero-top{display:contents}
.gkn-hero-map,.gkn-doc .gkn-hero-map{flex:1 1 240px;min-width:180px;
 max-width:420px;margin:0;
 border-radius:var(--r-md);overflow:hidden;line-height:0;
 box-shadow:0 1px 3px rgba(12,34,64,.18)}
.gkn-hero-map iframe{display:block;width:100%;height:148px;border:0}
@media(min-width:820px){.gkn-facts{order:1}.gkn-hero-map{order:2}}
@media(max-width:819px){
 .gkn-hero-top{display:flex;align-items:stretch;gap:12px;width:100%}
 .gkn-hero-top .gkn-big{flex:1 1 0;min-width:0}
 .gkn-hero-top .gkn-hero-map{flex:1 1 0;min-width:0;max-width:none}
 /* iframeにheight:100%を渡しても、親の高さが自動だと既定の150pxに落ちる。
    figureをflexにして、iframe自身を伸ばす */
 /* iframeのheight:autoは既定の150pxに落ちる。その150pxが偏差値の枠ごと
    1行を150pxまで押し上げ、目次が1画面目から追い出されていた。
    figure側で頭を止める（枠と地図の高さは揃ったまま／2026-09-05） */
 .gkn-hero-top .gkn-hero-map{display:flex;max-height:104px}
 .gkn-hero-top .gkn-hero-map iframe{height:auto;flex:1 1 auto;min-height:104px}
 .gkn-hero-main>.gkn-facts{flex:1 1 100%}
 /* 枠が細くなるぶん、順位の行が「412校/中」で折れる。字を詰める */
 .gkn-hero-top .gkn-big{padding:12px 14px 11px}
 /* 320pxでは1行に入らない。折るなら「東京都内 / 213位…」の位置で折る
    （nowrapにすると枠からはみ出し、既定だと「412校/中」で折れる） */
 .gkn-hero-top .gkn-big em{font-size:10.5px;letter-spacing:-.01em;
  word-break:keep-all;overflow-wrap:normal}
 .gkn-hero-top .gkn-hero-map{align-self:stretch}}
.gkn-hero-main{display:flex;flex-wrap:wrap;align-items:flex-end;gap:22px 30px;position:relative}
.gkn-big{flex:0 0 auto;background:var(--white);border-radius:var(--r-md);
 padding:14px 22px 13px;min-width:150px}
.gkn-big span{display:block;font-size:12px;color:var(--soft);margin:0 0 2px;font-weight:700}
.gkn-big b{display:block;font-family:var(--maru);font-size:54px;line-height:1;
 font-weight:700;letter-spacing:-.02em;color:var(--hot)}
.gkn-big b i{font-style:normal;font-family:var(--gothic);font-size:17px;font-weight:700;
 margin-left:3px;letter-spacing:0}
.gkn-big.gkn-calm b{color:var(--nv)}
.gkn-big em{display:block;font-style:normal;font-size:11.5px;color:var(--faint);
 margin-top:5px;font-weight:400}
.gkn-facts{display:flex;flex-wrap:wrap;gap:10px 0;margin:0;padding:0}
.gkn-facts>div{padding:0 20px;border-left:1px solid rgba(255,255,255,.3)}
.gkn-facts>div:first-child{padding-left:0;border-left:0}
.gkn-facts dt{font-size:12px;color:rgba(255,255,255,.82);margin:0 0 2px;font-weight:700}
.gkn-facts dd{margin:0;font-family:var(--maru);font-size:26px;font-weight:700;line-height:1.15;
 color:var(--white)}
.gkn-facts dd small{font-family:var(--gothic);font-size:12.5px;font-weight:400;margin-left:2px}
.gkn-facts dd.gkn-hot{color:var(--yl)}

/* ---- 波形の区切り ---- */
.gkn-wave{display:block;width:100%;height:26px;margin:0;
 background:var(--nv);
 -webkit-mask:var(--gkn-wave-m) repeat-x top/120px 26px;
 mask:var(--gkn-wave-m) repeat-x top/120px 26px}
.gkn-wave-up{--gkn-wave-m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 26'%3E%3Cpath d='M0 26V10c15 0 15-10 30-10s15 10 30 10 15-10 30-10 15 10 30 10v16z' fill='%23000'/%3E%3C/svg%3E")}
.gkn-wave-dn{--gkn-wave-m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 26'%3E%3Cpath d='M0 0v6c15 0 15 14 30 14s15-14 30-14 15 14 30 14 15-14 30-14V0z' fill='%23000'/%3E%3C/svg%3E")}

/* ---- 風景イラストの帯（紺帯の上に敷く。下端が帯と同色でつながる） ---- */
/* 見出しの上に敷く帯。**1枚の絵にする。**
   もとは poster.py の「左が写真／右が同じ絵を図形に起こしたもの」を
   そのまま敷いていた。帯は高さ104〜230pxしかないので、読者には
   「似た絵が左右に2つ並んでいる」だけに見えていた（2026-08-27）。
   高さは実測で決めた＝スマホで140pxを超えると、1画面目に本文が入らない */
.gkn-visual{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
 width:100vw;max-width:100vw;height:104px;background-color:var(--sky);
 background-repeat:no-repeat;background-position:center;background-size:cover}
@media(min-width:720px){.gkn-visual{height:230px}}
/* 県のページと同じ風景イラスト（band-zenkoku から、紺のセクションに
   つなぐための下端24pxを落としたもの＝band-top）。下に紺が来ないので、
   紺の帯が残ると宙に浮いた線に見える。地面の線が帯の下端に来る */
.gkn-visual-top{background-image:url(/assets/img/band-top.webp);
 background-position:center bottom}
/* ★ トップは /hensachi/ を統合して「順位を見に来るページ」になった。
   絵の帯が104pxあると表の1行目が732pxまで落ちるので、スマホでは
   56pxに詰める（720px以上は230pxのまま・2026-09-07） */
@media(max-width:719px){.gkn-visual-top{height:56px}
 .gkn-visual-top + .gkn-hero{margin-top:8px}
 .gkn-visual-top + .gkn-hero .gkn-hero-name{margin-bottom:14px}}
/* 制服のページは制服そのものを並べた帯。左右を切られても欠けないよう、
   中身は幅940pxぶんに収めてある（390pxの端末で実測） */
.gkn-visual-seifuku{background-image:url(/assets/img/band-seifuku.webp)}
.gkn-fullbleed,.gkn-art,.gkn-wave{margin-left:calc(50% - 50vw);
 margin-right:calc(50% - 50vw);width:100vw;max-width:100vw}
/* 帯の下に紺を長く残すと、次の紺セクションと重なって見出しが
   画面外に押し出される。絵は下24pxだけ紺を残す形に切り直した */
/* 帯を差し替えるときに、白く飛ばしてから次の絵にする */
.gkn-art{position:relative;aspect-ratio:1536/399;max-height:400px;
 background:url(/assets/img/band-zenkoku.webp) no-repeat center bottom/cover;
 background-color:var(--sky)}
/* 帯のイラストは都道府県ごとに持つ。トップは全国版（丘と町並み）、
   県のページはその県の要素が入ったもの。神奈川だけ元からある絵を使う。
   クラス名は .gkn-art-<県のスラッグ> で、render_national.py が付ける */
@media(max-width:700px){.gkn-art{aspect-ratio:980/399;max-height:210px;
 background-position:34% bottom}}

.gkn-art-aichi{background-image:url(/assets/img/band-aichi.webp)}
.gkn-art-akita{background-image:url(/assets/img/band-akita.webp)}
.gkn-art-aomori{background-image:url(/assets/img/band-aomori.webp)}
.gkn-art-chiba{background-image:url(/assets/img/band-chiba.webp)}
.gkn-art-ehime{background-image:url(/assets/img/band-ehime.webp)}
.gkn-art-fukui{background-image:url(/assets/img/band-fukui.webp)}
.gkn-art-fukuoka{background-image:url(/assets/img/band-fukuoka.webp)}
.gkn-art-fukushima{background-image:url(/assets/img/band-fukushima.webp)}
.gkn-art-gifu{background-image:url(/assets/img/band-gifu.webp)}
.gkn-art-gunma{background-image:url(/assets/img/band-gunma.webp)}
.gkn-art-hiroshima{background-image:url(/assets/img/band-hiroshima.webp)}
.gkn-art-hokkaido{background-image:url(/assets/img/band-hokkaido.webp)}
.gkn-art-hyogo{background-image:url(/assets/img/band-hyogo.webp)}
.gkn-art-ibaraki{background-image:url(/assets/img/band-ibaraki.webp)}
.gkn-art-ishikawa{background-image:url(/assets/img/band-ishikawa.webp)}
.gkn-art-iwate{background-image:url(/assets/img/band-iwate.webp)}
.gkn-art-kagawa{background-image:url(/assets/img/band-kagawa.webp)}
.gkn-art-kagoshima{background-image:url(/assets/img/band-kagoshima.webp)}
.gkn-art-kanagawa{background-image:url(/assets/img/band-kanagawa.webp)}
.gkn-art-kochi{background-image:url(/assets/img/band-kochi.webp)}
.gkn-art-kumamoto{background-image:url(/assets/img/band-kumamoto.webp)}
.gkn-art-kyoto{background-image:url(/assets/img/band-kyoto.webp)}
.gkn-art-mie{background-image:url(/assets/img/band-mie.webp)}
.gkn-art-miyagi{background-image:url(/assets/img/band-miyagi.webp)}
.gkn-art-miyazaki{background-image:url(/assets/img/band-miyazaki.webp)}
.gkn-art-nagano{background-image:url(/assets/img/band-nagano.webp)}
.gkn-art-nagasaki{background-image:url(/assets/img/band-nagasaki.webp)}
.gkn-art-nara{background-image:url(/assets/img/band-nara.webp)}
.gkn-art-niigata{background-image:url(/assets/img/band-niigata.webp)}
.gkn-art-oita{background-image:url(/assets/img/band-oita.webp)}
.gkn-art-okayama{background-image:url(/assets/img/band-okayama.webp)}
.gkn-art-okinawa{background-image:url(/assets/img/band-okinawa.webp)}
.gkn-art-osaka{background-image:url(/assets/img/band-osaka.webp)}
.gkn-art-saga{background-image:url(/assets/img/band-saga.webp)}
.gkn-art-saitama{background-image:url(/assets/img/band-saitama.webp)}
.gkn-art-shiga{background-image:url(/assets/img/band-shiga.webp)}
.gkn-art-shimane{background-image:url(/assets/img/band-shimane.webp)}
.gkn-art-shizuoka{background-image:url(/assets/img/band-shizuoka.webp)}
.gkn-art-tochigi{background-image:url(/assets/img/band-tochigi.webp)}
.gkn-art-tokushima{background-image:url(/assets/img/band-tokushima.webp)}
.gkn-art-tokyo{background-image:url(/assets/img/band-tokyo.webp)}
.gkn-art-tottori{background-image:url(/assets/img/band-tottori.webp)}
.gkn-art-toyama{background-image:url(/assets/img/band-toyama.webp)}
.gkn-art-wakayama{background-image:url(/assets/img/band-wakayama.webp)}
.gkn-art-yamagata{background-image:url(/assets/img/band-yamagata.webp)}
.gkn-art-yamaguchi{background-image:url(/assets/img/band-yamaguchi.webp)}
.gkn-art-yamanashi{background-image:url(/assets/img/band-yamanashi.webp)}
.gkn-art-zenkoku{background-image:url(/assets/img/band-zenkoku.webp)}
/* 切り替えのとき、帯そのものを白へ薄めてから次の絵に変える。
   地の色を白にしておくと、薄まる先が白になる */
.gkn-art-cycle{background-color:#fff}
@media(prefers-reduced-motion:reduce){.gkn-art-flash{transition:none}}


/* ---- 絞り込みの札（偏差値・倍率・制服のどのページでも同じ形） ----
   ばらばらに作っていたので、色も大きさも角の丸みも違っていた。
   1つの部品にして、指で押す高さ（44px）と読みやすさをそろえる */
.gkn-fpanel{background:var(--white);border:1px solid var(--rule);
 border-radius:14px;padding:9px 12px;margin:14px 0 10px;
 box-shadow:0 1px 2px rgba(12,34,64,.05)}
.gkn-frow{display:flex;align-items:center;gap:10px;min-height:40px}
.gkn-frow + .gkn-frow{border-top:1px dashed var(--rule);margin-top:2px}
.gkn-flabel{flex:0 0 auto;width:4.6em;font-size:11.5px;color:var(--faint);
 letter-spacing:.04em;line-height:1.3;white-space:normal;word-break:keep-all}
.gkn-chiprow{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;min-width:0;
 padding:5px 2px;-webkit-overflow-scrolling:touch;
 -webkit-mask-image:linear-gradient(90deg,#000 92%,transparent);
 mask-image:linear-gradient(90deg,#000 92%,transparent)}
.gkn-cty{display:inline-block;line-height:16px;padding:7px 2px !important}
/* 優先ソースの誘い。**画面の下に貼り付ける。**
   本文の途中に置いていたが、そこまで読んだ人にしか見えなかった。
   フッターの上に固定して、どこを読んでいても押せるようにする。
   閉じられるようにしておく（JavaScriptは使わない＝チェックボックス）。
   本文の最後が隠れないよう、body の下に帯ぶんの余白を足す */
.gkn-prefbar{position:fixed;left:0;right:0;bottom:0;z-index:60;
 background:var(--white);border-top:1px solid var(--line);
 box-shadow:0 -2px 12px rgba(12,34,64,.10)}
.gkn-prefbar-in{max-width:1080px;margin:0 auto;padding:9px 20px;
 display:flex;align-items:center;gap:14px}
.gkn-prefbar p{margin:0;font-size:13px;line-height:1.55;color:var(--soft);
 max-width:none;flex:1 1 auto;min-width:0}
.gkn-prefbar p b{color:var(--deep)}
/* Googleが入れる中身は幅1,080pxで返ってくる。そのままだと文が0pxに
   潰れる（実測）。箱の幅をこちらで決めて、はみ出しは隠す */
.gkn-prefbar-btn{flex:0 0 266px;width:266px;height:46px;overflow:hidden;
 display:flex;align-items:center;justify-content:flex-start}
.gkn-prefbar-btn>a{display:inline-flex;align-items:center;min-height:38px;
 padding:0 16px;border-radius:999px;background:var(--nv);color:var(--white);
 font-size:13.5px;font-weight:700;text-decoration:none;border-bottom:0;
 white-space:nowrap}
.gkn .gkn-prefbar-btn>a{color:var(--white)}
/* ★ display:inline-flex が hidden属性に勝つので、hidden を付けても
   予備リンクが消えなかった（Googleのボタンと2つ並んで切れていた・
   390px実測2026-09-12）。**display を指定したら hidden も書く。** */
.gkn-prefbar-btn>a[hidden]{display:none}
.gkn-prefbar-btn>a:hover{background:var(--nv-d)}
/* 閉じる。チェックボックスで消す（押した人にもう一度出さない、は
   JavaScriptが要るので、いまはページを開くたびに出る） */
.gkn-prefbar-cb{position:absolute;opacity:0;pointer-events:none}
.gkn-prefbar-x{flex:0 0 auto;width:34px;height:34px;display:flex;
 align-items:center;justify-content:center;border-radius:50%;
 color:var(--faint);font-size:17px;cursor:pointer;line-height:1}
.gkn-prefbar-x:hover{background:var(--sky);color:var(--nv)}
.gkn-prefbar-cb:checked ~ .gkn-prefbar{display:none}
body{padding-bottom:0}
body.gkn-pf-on{padding-bottom:64px}
/* 文は画面幅で使い分ける。狭い画面に長い文を入れると、ボタンのぶんで
   1文字ずつ縦に折れる */
.gkn-pf-s{display:none}
@media(max-width:819px){
 /* 1行に文とボタンを並べると、文が3行・ボタンが2行に折れて潰れる。
    文を上、ボタンを下の2段にする */
 .gkn-prefbar-in{padding:6px 12px 7px;gap:2px 8px;flex-wrap:wrap}
 .gkn-prefbar p{font-size:11.5px;line-height:1.45;flex:1 0 100%;
  order:1;padding-right:34px}
 .gkn-pf-l{display:none}
 .gkn-pf-s{display:inline}
 /* 中のGoogleの要素は width:100% なので、包む箱の幅を0にすると
    まるごと消える。幅は必ず数字で決める */
 .gkn-prefbar-btn{order:2;flex:0 0 272px;width:272px;height:40px;
  min-width:0;flex-wrap:nowrap}
 .gkn-prefbar-x{order:3;margin-left:auto;position:absolute;top:4px;right:6px}
 .gkn-prefbar-in{position:relative}
 body.gkn-pf-on{padding-bottom:74px}
}
.gkn-chiprow::-webkit-scrollbar{display:none}
.gkn-chiprow.wrap{flex-wrap:wrap;overflow-x:visible;
 -webkit-mask-image:none;mask-image:none}
.gkn-chip{position:relative;flex:0 0 auto;display:inline-flex;align-items:center;
 gap:5px;font:inherit;font-size:12.5px;line-height:1;height:32px;padding:0 12px;
 border:1px solid var(--rule);border-radius:999px;background:var(--white);
 color:var(--ink);cursor:pointer;white-space:nowrap;text-decoration:none;
 transition:background .14s ease,border-color .14s ease,color .14s ease}
/* 指で押す場所は44pxを下回らせない。見た目は32pxのまま */
.gkn-chip::after{content:"";position:absolute;left:0;right:0;top:50%;
 transform:translateY(-50%);height:44px}
.gkn-chip:hover{border-color:var(--nv);color:var(--nv);background:#f4faff}
.gkn-chip:focus-visible{outline:2px solid var(--tq);outline-offset:2px}
.gkn-chip small,.gkn-chip .n{color:var(--faint);font-size:11px;
 font-variant-numeric:tabular-nums}
.gkn-chip[aria-pressed="true"]{background:var(--nv);border-color:var(--nv);
 color:var(--white);box-shadow:0 2px 6px rgba(28,84,166,.26)}
.gkn-chip[aria-pressed="true"] small,.gkn-chip[aria-pressed="true"] .n{
 color:rgba(255,255,255,.78)}
.gkn-chip i{width:11px;height:11px;border-radius:50%;display:inline-block;
 border:1px solid rgba(0,0,0,.16)}
.gkn-chip[aria-pressed="true"] i{box-shadow:0 0 0 1.5px rgba(255,255,255,.85)}
/* 締め切り前の中間集計であることを、表の数字のとなりに小さく出す。
   ★ セルが狭いので**2行に折る**。「中間」だけに縮めたら
   何の中間か伝わらなかった（ユーザー指摘・2026-09-08） */
.gkn-mid{display:block;font-size:10px;line-height:1.35;color:var(--faint);
 white-space:nowrap;letter-spacing:0}
/* 広い画面は1行で入る。折るのは列が細くなる狭い画面だけ */
.gkn-mid br{display:none}
@media(max-width:700px){.gkn-mid br{display:inline}}
/* いま選んでいる条件では0件になる札。押せなくして薄くする */
.gkn-chip.gkn-zero,.gkn-pchip.gkn-zero,.gkn-pspot.gkn-zero{opacity:.4;
 cursor:default;pointer-events:none}
.gkn-fnote{font-size:12.5px;color:var(--soft);margin:6px 0 2px;
 display:flex;align-items:baseline;gap:5px;flex-wrap:wrap}
.gkn-fnote b{font-size:14px;color:var(--deep);font-variant-numeric:tabular-nums}
/* PCでは県も設置も列に出ているので、添え書きは出さない */
.gkn-sub{display:none}
/* パンくずと、段落に1本だけ置いたリンクも「押すために置いたもの」。
   字の高さ（19〜23px）しか無く、指で狙いにくかった */
/* 指で狙う場所は44px（ユーザー指摘・2026-09-06）。本文中の行内リンクは対象外 */
.gkn-crumbs a{display:inline-flex;align-items:center;min-height:44px;
 padding:0 2px}
.gkn-doc p>a:only-child,.gkn p>a:only-child{display:inline-flex;
 align-items:center;min-height:32px}
/* ロゴと一覧の項目も押す場所。23pxしか無かった */
.gkn-logo{min-height:40px}
.gkn-doc .gkn-list .gkn-item a,.gkn-list .gkn-item a{min-height:34px;
 display:flex;align-items:center}
/* 「◯◯について」だけを置いた行（gkn-more）は、押すために置いたリンク。
   字の高さ（18px）しか無かったので、押せる高さにする */
.gkn-more a{display:inline-flex;align-items:center;min-height:34px}
/* 県名のリンクが27pxしかなく、指で押しにくかった */
.gkn-foot-prefs a,.gkn-doc .gkn-list .gkn-item a{min-height:34px;
 display:flex;align-items:center}
.gkn-fmore{flex:0 0 auto;white-space:nowrap;font:inherit;font-size:12px;
 color:var(--nv);background:none;border:1px solid var(--line);
 border-radius:999px;padding:0 12px;height:32px;cursor:pointer;line-height:1}
.gkn-fmore:hover{background:var(--sky)}
@media(min-width:820px){
 .gkn-chip{height:34px;font-size:13px;padding:0 13px}
 .gkn-flabel{font-size:12px;width:5.2em}
}

/* ---- 地方から選ぶ日本地図（画像＋押せる場所を重ねる） ---- */
.gkn-map-wrap{margin:16px 0 24px}
.gkn-jpmap{position:relative;max-width:520px;margin:0 auto}
.gkn-jpmap img{display:block;width:100%;height:auto;border-radius:16px}
.gkn-mapbtn{position:absolute;transform:translate(-50%,-50%);
 display:flex;flex-direction:column;align-items:center;gap:1px;
 padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.94);
 border:2px solid var(--nv);border-bottom:2px solid var(--nv);
 text-decoration:none;white-space:nowrap;
 box-shadow:0 2px 8px rgba(12,34,64,.18);transition:background .15s ease}
.gkn-mapbtn b{font-size:12.5px;color:var(--nv);line-height:1.2}
.gkn-mapbtn span{font-size:10.5px;color:var(--soft);line-height:1.2}
.gkn-mapbtn:hover,.gkn-mapbtn:focus{background:var(--tq);border-color:var(--tq)}
.gkn-map-help{text-align:center;margin-top:10px}
@media(max-width:430px){.gkn-mapbtn{padding:4px 7px}
 .gkn-mapbtn b{font-size:10.5px}.gkn-mapbtn span{font-size:9px}}
.gkn-band .gkn-map-help{color:var(--white);font-size:12.5px;opacity:.9}
/* ★ .gkn-doc .gkn-note の margin-top:-4px が効いて、地図の下の説明が
   地図に4px重なっていた（ユーザー指摘・2026-09-06）。地図の外に出す */
.gkn-doc .gkn-map-wrap .gkn-map-help{margin-top:14px}

/* 地方を押したときに出る中身。JavaScriptを使わず :target だけで動かす */
.gkn-modal{position:fixed;inset:0;z-index:60;display:none}
.gkn-modal:target{display:block}
.gkn-modal-bg{position:absolute;inset:0;background:rgba(12,34,64,.55)}
.gkn-modal-in{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
 width:min(560px,92vw);max-height:82vh;overflow:auto;background:var(--white);
 border-radius:18px;padding:18px 18px 22px;box-shadow:0 18px 50px rgba(12,34,64,.3)}
.gkn-modal-head{display:flex;align-items:center;justify-content:space-between;
 margin-bottom:12px}
.gkn-modal-head b{font-size:17px;color:var(--nv)}
.gkn-modal-x{width:38px;height:38px;display:grid;place-items:center;
 border-radius:50%;background:var(--sky);color:var(--nv);font-size:20px;
 border-bottom:0;text-decoration:none}
/* 地方の地図。県の面のところに小さな札を置く */
.gkn-pmap{position:relative;margin:0 0 14px}
.gkn-pmap img{display:block;width:100%;height:auto;border-radius:12px}
.gkn-pspot{position:absolute;transform:translate(-50%,-50%);
 display:flex;flex-direction:column;align-items:center;line-height:1.15;
 padding:3px 7px;border-radius:999px;background:rgba(255,255,255,.94);
 border:1.5px solid var(--nv);border-bottom:1.5px solid var(--nv);
 text-decoration:none;white-space:nowrap;box-shadow:0 1px 5px rgba(12,34,64,.2)}
/* 指で押す場所は44pxを下回らせない。見た目の札は小さいままで、
   透明な当たり判定だけを広げる（神奈川が押しにくかった） */
.gkn-pspot::after{content:"";position:absolute;left:50%;top:50%;
 transform:translate(-50%,-50%);width:max(100%,44px);height:max(100%,44px)}
.gkn-pspot b{font-size:11.5px;color:var(--nv)}
.gkn-pspot span{font-size:9.5px;color:var(--soft)}
.gkn-pspot:hover,.gkn-pspot:focus{background:var(--tq);border-color:var(--tq)}
@media(max-width:430px){.gkn-pspot{padding:2px 5px}
 .gkn-pspot b{font-size:10px}.gkn-pspot span{font-size:8.5px}}
.gkn-pchips{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
 gap:10px}
.gkn-pchip{display:block;padding:12px 14px;border-radius:12px;background:var(--sky);
 border-bottom:0;text-decoration:none}
.gkn-pchip b{display:block;font-size:15px;color:var(--nv)}
.gkn-pchip span{font-size:12.5px;color:var(--ink)}
.gkn-pchip small{display:block;font-size:11.5px;color:var(--soft);margin-top:2px}
.gkn-pchip:hover{background:#d8f5f2}
/* 地図の下に置くほう。地図が主役なので控えめにする */
.gkn-pchips-sm{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));
 gap:6px;margin-top:12px}
.gkn-pchips-sm .gkn-pchip{padding:8px 10px;border-radius:9px}
.gkn-pchips-sm .gkn-pchip b{font-size:13px}
.gkn-pchips-sm .gkn-pchip span{font-size:11.5px;color:var(--soft)}

/* ---- 学校の一覧。1行1校 ---- */
/* カード型（1校90px）だと38校で3,849pxになり、目的の学校まで
   スクロールが続く。1行に収めて、名前・偏差値・設置区分を横に並べる */
.gkn-slist{margin:2px 0 6px;border-top:1px solid var(--rule)}
.gkn-srow{display:flex;align-items:center;gap:10px;padding:9px 2px;
 border-bottom:1px solid var(--rule);min-height:44px}
.gkn-srow>a{flex:1;min-width:0;font-size:14.5px;color:var(--nv);
 border-bottom:0;line-height:1.35;font-family:var(--maru)}
.gkn-srow>a:hover{color:var(--tq)}
.gkn-srow .gkn-sh{font-size:14px;color:var(--deep);font-weight:700;
 font-variant-numeric:tabular-nums;white-space:nowrap;min-width:52px;
 text-align:right}
.gkn-srow .gkn-sb{font-size:12.5px;color:var(--nv);font-weight:700;
 font-variant-numeric:tabular-nums;white-space:nowrap;min-width:48px;
 text-align:right}
.gkn-srow .gkn-st{font-size:10.5px;color:var(--soft);white-space:nowrap;
 background:var(--sky);border-radius:999px;padding:2px 7px}
.gkn-srow em{font-style:normal;color:var(--soft);font-size:12px}
/* 列の見出し。数字だけ並んでいると何の数字か分からない */
.gkn-shead{min-height:0;padding:4px 2px 6px;border-bottom:2px solid var(--nv)}
.gkn-shead span{font-size:11px;color:var(--soft);font-weight:700;
 background:none;padding:0}
.gkn-shead>span:first-child{flex:1}
@media(max-width:430px){.gkn-srow{gap:7px;padding:8px 2px}
 .gkn-srow>a{font-size:13.5px}.gkn-srow .gkn-sh{min-width:44px;font-size:13px}
 .gkn-srow .gkn-st{font-size:10px;padding:2px 6px}}

/* ---- 市区町村の折りたたみ ---- */
.gkn-cities{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0 20px}
.gkn-citychip{display:inline-flex;align-items:center;gap:5px;
 padding:7px 12px;border-radius:999px;background:var(--sky);color:var(--nv);
 font-size:13px;text-decoration:none;border-bottom:0}
.gkn-citychip span{font-size:11px;color:var(--soft)}
.gkn-citychip:hover{background:#d8f5f2}
.gkn-more-cities>summary{cursor:pointer;list-style:none;font-size:13px;
 color:var(--nv);padding:8px 0 14px;font-weight:700}
.gkn-more-cities>summary::-webkit-details-marker{display:none}
.gkn-more-cities>summary::before{content:"＋ "}
.gkn-more-cities[open]>summary::before{content:"− "}
.gkn-city{border-top:1px solid var(--rule);padding:2px 0}
.gkn-city>summary{cursor:pointer;list-style:none;padding:14px 2px;
 font-size:15px;font-weight:700;color:var(--nv);display:flex;
 align-items:center;justify-content:space-between;gap:10px}
.gkn-city>summary::-webkit-details-marker{display:none}
.gkn-city>summary::after{content:"＋";font-size:15px;color:var(--soft)}
.gkn-city[open]>summary::after{content:"−"}
.gkn-city>summary span{font-size:12.5px;font-weight:400;color:var(--soft);
 margin-left:auto;margin-right:10px}
.gkn-city[open]>summary{color:var(--deep)}

/* ---- 紺帯のセクション ---- */
.gkn-band{background:var(--nv);color:var(--white);padding:6px 0 34px}
.gkn-band .gkn-wrap{padding-top:6px}
.gkn-band h2{color:var(--white)}
.gkn-band a{color:var(--white);border-bottom-color:rgba(255,255,255,.4)}
.gkn-band a:hover{border-bottom-color:var(--white)}

/* 丸アイコンの入口（奥尻の空港・バス・フェリー） */
.gkn-ports{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
 gap:16px;margin:6px 0 0;list-style:none;padding:0}
.gkn-ports li{text-align:center}
.gkn .gkn-ports a{display:block;border-bottom:0;color:var(--white)}
.gkn-ports svg{display:block;margin:0 auto 8px;stroke:var(--white);fill:none;
 stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.gkn-ports b{font-family:var(--maru);font-size:15.5px;letter-spacing:.04em}
.gkn-ports i{display:block;height:7px;margin:9px auto 0;max-width:170px;
 background:var(--white);
 -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 7'%3E%3Cpath d='M0 3.5c5 0 5-2.6 10-2.6s5 2.6 10 2.6 5-2.6 10-2.6 5 2.6 10 2.6' stroke='%23000' stroke-width='2' fill='none'/%3E%3C/svg%3E") repeat-x center/40px 7px;
 mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 7'%3E%3Cpath d='M0 3.5c5 0 5-2.6 10-2.6s5 2.6 10 2.6 5-2.6 10-2.6 5 2.6 10 2.6' stroke='%23000' stroke-width='2' fill='none'/%3E%3C/svg%3E") repeat-x center/40px 7px}
.gkn-ports a:hover svg{stroke:var(--yl)}

/* ---- 見出し ---- */
.gkn-h2{font-size:clamp(21px,3.6vw,27px);line-height:1.5;letter-spacing:.05em;
 margin:44px 0 8px;color:var(--deep)}
.gkn-band .gkn-h2{color:var(--white);margin-top:24px}
.gkn-h2+.gkn-rule{border:0;height:7px;margin:0 0 22px;width:200px;max-width:100%;
 background:var(--tq);
 -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 7'%3E%3Cpath d='M0 3.5c5 0 5-2.6 10-2.6s5 2.6 10 2.6 5-2.6 10-2.6 5 2.6 10 2.6' stroke='%23000' stroke-width='2.4' fill='none'/%3E%3C/svg%3E") repeat-x left/40px 7px;
 mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 7'%3E%3Cpath d='M0 3.5c5 0 5-2.6 10-2.6s5 2.6 10 2.6 5-2.6 10-2.6 5 2.6 10 2.6' stroke='%23000' stroke-width='2.4' fill='none'/%3E%3C/svg%3E") repeat-x left/40px 7px}
.gkn-band .gkn-h2+.gkn-rule{background:var(--yl)}
.gkn-h3{font-family:var(--maru);font-size:16.5px;font-weight:700;margin:30px 0 10px;
 color:var(--nv);letter-spacing:.04em}
.gkn-lead{font-size:14.5px;color:var(--soft);margin:-4px 0 18px;max-width:38em}
.gkn-band .gkn-lead{color:rgba(255,255,255,.86)}

/* ---- ナビ（パンくず的な行） ---- */
.gkn-nav{font-size:14px;margin:0 0 30px;padding:12px 20px;background:var(--white);
 border-radius:var(--r-md);line-height:2}
.gkn .gkn-nav a{border-bottom:0}
.gkn-nav i{font-style:normal;color:var(--line);margin:0 10px}
.gkn-nav b{color:var(--tq)}

/* =====================================================================
   記事の面（1校ページ・説明ページ）
   一覧やトップは奥尻の色（淡い水色の地に白いカード）のままにする。
   記事は読むためのページなので、白い地に細い罫線だけで組む。

   ここで揃えているのは「行の刻み」。表の行も、項目と内容の組も、
   質問と答えも、同じ罫線・同じ余白・同じ文字の大きさにする。
   前は白いカードになるものとならないものが混ざっていて、
   その差に意味が無かった（見た目の違いが情報の違いを表していなかった）。
   ===================================================================== */
.gkn-doc{background:var(--white);border-radius:var(--r-md);
 padding:6px 26px 26px;margin:22px 0 0}
.gkn-doc>.gkn-hero{margin:-6px -26px 0;border-radius:var(--r-md) var(--r-md) 0 0}
.gkn-doc p{margin:0 0 14px;max-width:38em}
.gkn-doc .gkn-h2{font-size:19.5px;line-height:1.55;margin:34px 0 12px;
 padding-top:18px;border-top:1px solid var(--rule);color:var(--nv)}
/* 導入。ここだけ大きめの字で、読ませる文にする */
.gkn-intro{font-size:17px;line-height:2.0;margin:20px 0 4px;max-width:34em;
 color:var(--ink)}
/* 強調。**蛍光は使わない**（ユーザー指摘・2026-09-06）。
   色と太さだけ。背景を塗らないので、改行で分断されることもない */
/* inline-block にすると中で折り返せず、まるごと次の行に送られる。inline にする */
.gkn-mk{display:inline;background:none;color:#13395f;font-weight:700;padding:0}
/* 市区町村の列。校名と同じ .gkn-name（min-width:90px）を当てていたので
   「中野区」の3文字に105pxを取り、390pxで表が2pxはみ出していた */
.gkn-doc .gkn-tw th.gkn-city,.gkn-doc .gkn-tw td.gkn-city{
 min-width:0;width:5.2em;white-space:nowrap}
/* 年表。表を減らして読むリズムを出す */
.gkn-tl{list-style:none;margin:14px 0 16px;padding:0 0 0 15px;
 border-left:2px solid var(--line)}
.gkn-tl li{position:relative;padding:0 0 15px 14px}
.gkn-tl li::before{content:"";position:absolute;left:-21px;top:8px;width:9px;height:9px;
 border-radius:50%;background:var(--tq);border:2px solid var(--white)}
.gkn-tl b{display:block;font-family:var(--maru);font-size:14px;color:var(--nv);
 letter-spacing:.04em;line-height:1.4}
.gkn-tl span{display:block;font-size:14.5px;line-height:1.8;margin-top:1px}
/* 数字を3つ横に並べる。3行だけの表は表にしない */
.gkn-nums{display:flex;flex-wrap:wrap;gap:0;margin:14px 0 14px;
 border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.gkn-nums>div{flex:1 1 0;min-width:8em;padding:12px 14px;
 border-left:1px solid var(--rule)}
.gkn-nums>div:first-child{border-left:0;padding-left:0}
/* 表のセルで「415人」と「2.1倍」を必ず2行に分ける（記号を行頭に立てない） */
.gkn-sub2{display:block;font-size:12px;color:var(--soft);font-weight:400;
 line-height:1.5}
.gkn-nums dt{font-size:12px;color:var(--soft);font-weight:700;margin:0 0 3px}
.gkn-nums dd{margin:0;font-family:var(--maru);font-size:24px;font-weight:700;
 line-height:1.1;color:var(--nv);letter-spacing:-.01em}
.gkn-nums dd small{font-family:var(--gothic);font-size:12.5px;font-weight:400;
 margin-left:2px;letter-spacing:0}
@media(max-width:600px){
 .gkn-nums>div{padding:10px;min-width:6.5em}
 .gkn-nums dd{font-size:19px}
}
/* 部の一覧。読点でつないだ長い一行は目が滑るので、1つずつ粒にする */
.gkn-chiplab{font-size:12.5px;color:var(--soft);font-weight:700;margin:14px 0 6px;
 letter-spacing:.06em}
.gkn-chiplab span{display:inline-block;margin-left:6px;background:var(--sky);
 color:var(--nv);border-radius:9px;padding:1px 8px;font-size:11.5px}
.gkn-chips{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px;
 padding:0}
.gkn-chips li{font-size:13px;line-height:1.5;color:var(--ink);
 border:1px solid var(--rule);border-radius:2px;padding:4px 9px;background:#FAFBFC}
/* 地図 */
.gkn-map{margin:12px 0 10px;border:1px solid var(--rule);border-radius:2px;
 overflow:hidden;line-height:0}
.gkn-map iframe{display:block;width:100%;height:280px;border:0}
@media(max-width:600px){.gkn-map iframe{height:220px}}
.gkn-chui{margin-top:30px}
.gkn-chui .gkn-h2{font-size:16px}
.gkn-chui .gkn-why dd{font-size:13px;line-height:1.85;color:var(--soft)}
.gkn-intro+.gkn-h2{margin-top:26px}
.gkn-doc .gkn-hero+.gkn-h2,.gkn-doc>*:first-child+.gkn-h2{border-top:0;padding-top:0;
 margin-top:24px}
.gkn-doc .gkn-h2+.gkn-rule{display:none}      /* 波線は使わない */
/* 紺帯の中の見出しは白。.gkn-doc の指定（紺文字・上の罫線）が
   後から効いて、紺地に紺文字で消えていた */
.gkn-doc .gkn-band .gkn-h2{color:var(--white);border-top:0;padding-top:0;
 margin:10px 0 10px}
.gkn-doc .gkn-band .gkn-h2+.gkn-rule{display:block;background:var(--yl)}
.gkn-doc .gkn-band .gkn-lead{color:rgba(255,255,255,.92)}
.gkn-doc .gkn-h3{font-size:15.5px;margin:22px 0 8px}
/* 表。カードで囲わず、罫線だけにする */
.gkn-doc .gkn-tw{background:none;border-radius:0;padding:0;margin:0 0 16px;
 overflow-x:auto;-webkit-overflow-scrolling:touch}
.gkn-doc .gkn-tw table{font-size:14px;min-width:0;line-height:1.6}
.gkn-doc .gkn-tw th,.gkn-doc .gkn-tw td{padding:8px 9px;border-bottom:1px solid var(--rule)}
.gkn-doc .gkn-tw thead th{font-size:12px;color:var(--soft);font-weight:700;
 border-bottom:1px solid var(--nv);padding:4px 9px 5px}
.gkn-doc .gkn-tw th:first-child,.gkn-doc .gkn-tw td:first-child{white-space:nowrap}
.gkn-doc .gkn-tw td.gkn-name,.gkn-doc .gkn-tw th.gkn-name{white-space:normal}
.gkn-doc .gkn-tw tbody tr:hover td{background:#F7FAFC}
.gkn-doc .gkn-tw tbody tr:last-child td{border-bottom:1px solid var(--rule)}
/* 項目と内容の組。表の行と同じ刻みにする */
.gkn-doc .gkn-why,.gkn-doc .gkn-faq{border-top:0;margin:0 0 16px}
.gkn-doc .gkn-why>div{grid-template-columns:7.5em 1fr;gap:10px;padding:11px 10px;
 border-bottom:1px solid var(--rule)}
.gkn-doc .gkn-why dt,.gkn-doc .gkn-faq dt{font-size:12.5px;color:var(--soft);
 letter-spacing:.04em;font-weight:700}
.gkn-doc .gkn-why dd{font-size:14.5px;line-height:1.8}
.gkn-doc .gkn-faq>div{padding:13px 10px;border-bottom:1px solid var(--rule)}
.gkn-doc .gkn-faq dt{font-size:15px;color:var(--nv);margin:0 0 5px;font-weight:700}
.gkn-doc .gkn-faq dt::before{content:"Q";color:var(--tq);margin-right:.5em}
.gkn-doc .gkn-faq dd{font-size:14.5px;line-height:1.85}
/* 注記。カードにしない。小さい字で置くだけ */
.gkn-doc .gkn-note{background:none;border:0;border-left:0;padding:0;margin:-4px 0 18px;
 font-size:13px;line-height:1.85;color:var(--soft);max-width:38em}
.gkn-doc .gkn-swipe{margin:-12px 0 16px}
.gkn-doc .gkn-src{margin:6px 0 0;font-size:12px}
.gkn-doc .gkn-more{margin:0 0 18px}
.gkn-doc figure{margin:0 0 18px}
/* 早見。スマホでは1画面に収めたいので詰める */
@media(max-width:600px){
 .gkn-doc>.gkn-hero{padding:13px 18px 13px}
 .gkn-doc .gkn-hero-name{font-size:20px;margin:0 0 14px;line-height:1.35}
 .gkn-doc .gkn-hero-q{font-size:19px;line-height:1.45;margin:0 0 3px}
 .gkn-doc .gkn-hero-full{font-size:12.5px;margin:0 0 8px}
 .gkn-doc .gkn-kicker{margin:0 0 4px}
 .gkn-doc .gkn-hero-main{gap:9px 14px}
 .gkn-doc .gkn-big{padding:8px 14px 7px;min-width:0}
 .gkn-doc .gkn-big b{font-size:38px}
 .gkn-doc .gkn-facts{gap:8px 0}
 .gkn-doc .gkn-facts>div{padding:0 12px}
 .gkn-doc .gkn-facts dd{font-size:21px}
 .gkn-doc .gkn-facts dt{font-size:11.5px}
 /* 校舎写真。縦に長いと本文が1画面ぶん下がるので高さを抑える */
 .gkn-doc .gkn-fig img{max-height:200px;object-fit:cover;object-position:center 40%}
 .gkn-doc .gkn-fig figcaption{font-size:11px;line-height:1.6;margin-top:6px}
 .gkn-doc .gkn-h2{margin:22px 0 9px;padding-top:13px}
}
@media(max-width:600px){
 .gkn-doc{padding:6px 16px 22px;border-radius:var(--r-md);margin:10px 0 0}
 .gkn-doc>.gkn-hero{margin:-6px -16px 0}
 .gkn-doc .gkn-h2{font-size:18px;margin:26px 0 10px;padding-top:15px}
 .gkn-intro{font-size:16px;line-height:1.95;margin:16px 0 2px}
 .gkn-doc .gkn-tw th,.gkn-doc .gkn-tw td{padding:7px 6px;font-size:14px}
 .gkn-chips li{font-size:12.5px;padding:3px 8px}
 .gkn-doc .gkn-why>div{grid-template-columns:6em 1fr;gap:8px;padding:10px 7px}
}

/* ---- 表 ---- */
.gkn-tw{overflow-x:auto;margin:0 0 26px;background:var(--white);
 border-radius:var(--r-md);padding:4px 18px 6px;-webkit-overflow-scrolling:touch}
.gkn-tw table{border-collapse:collapse;width:100%;min-width:440px;margin:0;
 font-size:14px;line-height:1.7}
.gkn-tw th,.gkn-tw td{padding:12px 12px 11px;text-align:right;white-space:nowrap;
 border-bottom:1px solid var(--line)}
.gkn-tw thead th{font-size:12px;font-weight:700;color:var(--nv);text-align:right;
 border-bottom:2px solid var(--nv);padding-top:11px;padding-bottom:9px}
.gkn-tw tbody tr:last-child td{border-bottom:none}
.gkn-tw th:first-child,.gkn-tw td:first-child{text-align:left;white-space:normal;padding-left:0}
.gkn-tw th:last-child,.gkn-tw td:last-child{padding-right:0}
.gkn-tw td{font-variant-numeric:tabular-nums}
.gkn-tw th.gkn-name,.gkn-tw td.gkn-name{text-align:left;white-space:normal;
 width:38%;min-width:7.5em}
/* 表の中のリンクは字の高さ（14px）しか無く、押す場所が小さかった。
   セルいっぱいに広げる（行の高さはそのまま使う） */
.gkn .gkn-tw td.gkn-name a{border-bottom:0;color:var(--nv);
 display:block;padding:6px 0;margin:-6px 0}
.gkn-tw td.gkn-name a:hover{border-bottom:2px solid var(--nv)}
.gkn-tw td.gkn-hot{color:var(--hot);font-weight:700}
.gkn-tw tbody tr:hover td{background:var(--sky)}
/* 「なぜ人気か」。数字で言えるぶんだけを節の中に1行置く。
   飾りを付けると旧サイトのAI紹介文に見えるので、左の罫線1本だけにする */
/* 白背景・角丸・1pxの線。.gkn-flat と同じ見た目にそろえる（2026-09-06） */
.gkn-doc .gkn-why{background:#fff;border:1px solid #e3e8ee;border-radius:8px;
 padding:12px 14px;margin:14px 0;max-width:38em}
.gkn-doc .gkn-why p{margin:0}
.gkn-doc .gkn-why-list{margin:8px 0 10px;padding-left:1.2em}
.gkn-doc .gkn-why-list li{margin:4px 0}
/* 進学実績を難関順に区切る見出しの行。人数順に並べると東大1人が
   地元私大50人の下に沈むので、グループごとに区切って上から出す */
/* ---- 文章の幅をそろえる ----
   見出しは988pxまで伸びるのに、段落は max-width:38〜40em（620px）で
   止まっていた。368pxの差で右端が揃わず、本文が左に寄って見えた
   （2026-08-27の指摘）。**文章の要素は同じ幅にそろえる。**
   表・絵・カードは全幅のままにする（そちらは横に使うものなので） */
/* em は要素ごとの文字サイズ基準なので、見出し（27px）に指定しても
   効かない。**pxで1本の幅を決める。** */
.gkn-doc .gkn-h2,.gkn-doc .gkn-h3,.gkn-doc .gkn-rule,
.gkn-doc .gkn-note,.gkn-doc .gkn-why,.gkn-doc .gkn-why-list,
.gkn-doc ul:not(.gkn-chips):not(.gkn-chiprow),
.gkn-doc ol,.gkn-doc p,.gkn-elead p{max-width:720px}
/* 日付と出典はもともと枠の中なので、そろえる対象から外す */
.gkn-doc .gkn-src .gkn-note,.gkn-doc .gkn-src{max-width:none}

/* 公開日と更新日。本文の最後に小さく置く。**中身が変わった日だけ**
   更新日が進む（ビルドのたびに今日にすると嘘になる） */
.gkn-dates{display:flex;gap:14px;flex-wrap:wrap;margin:26px 0 0;
 padding-top:12px;border-top:1px solid var(--rule);
 font-size:12.5px;color:var(--faint);max-width:none;
 font-variant-numeric:tabular-nums}
.gkn-doc .gkn-dates{max-width:none}
/* 出典の枠の中に入れるときは、枠の罫にそろえる */
.gkn-src .gkn-dates-in{margin:10px 0 0;padding-top:9px;font-size:12px}

/* 学校ごとに焼いた絵。ヒーローのすぐ下＝1画面目に置く。
   全幅の帯にすると230pxに切られて選手の足しか見えないので、
   本文の幅のまま高さを成り行きにする（1536x589＝2.6:1） */
.gkn-eart{margin:16px 0 4px;border-radius:var(--r-md);overflow:hidden;
 background:var(--sky-d);line-height:0}
.gkn-eart img{display:block;width:100%;height:auto;max-width:100%}
/* 広い画面では絵が400px近くになって、1画面目からリードが押し出される。
   高さを止めて、空のほうを切る（人と地面は残す） */
@media(min-width:820px){
 .gkn-eart img{height:292px;object-fit:cover;object-position:center 78%}
}
@media(max-width:819px){
 .gkn-eart{margin:8px 0 2px;border-radius:var(--r-sm)}
 /* 絵は2.6:1の横長。スマホで150px使うと目次が1画面目から落ちるので、
    地図の枠と同じ104pxで止める。**寄せは中央**（4,882枚ぶん構図が
    違うので、上下どちらかに寄せると学校によって主役が切れる） */
 .gkn-eart img{height:104px;object-fit:cover;object-position:center}
}

/* 出身者。名前と肩書きを1行に。名前を先に読ませたいので、
   肩書きは名前のすぐ後ろに小さく置く（左右に離すと目が往復する） */
.gkn-allist{display:grid;gap:2px 20px;margin:12px 0 14px;
 grid-template-columns:repeat(auto-fill,minmax(272px,1fr))}
.gkn-al{padding:7px 2px 6px;border-bottom:1px solid var(--rule);
 font-size:14px;line-height:1.5}
.gkn-al b{font-weight:700;color:var(--deep)}
.gkn-al span{color:var(--soft);font-size:12.5px;margin-left:7px}
@media(max-width:819px){
 .gkn-allist{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:2px 14px}
 .gkn-al{font-size:13px}
 .gkn-al span{font-size:11.5px;margin-left:5px}
}

/* 年表。年・大会・出来事の3つを1行に。**表にしない**（2列3列の表を
   988pxに伸ばすと年と中身が離れる。ここは中身が長いので余計に効く） */
.gkn-chrono{margin:14px 0 18px;border-top:1px solid var(--rule)}
.gkn-ch{display:grid;grid-template-columns:5.2em 2.4em 1fr;gap:0 12px;
 align-items:baseline;padding:10px 2px;border-bottom:1px solid var(--rule)}
.gkn-ch-y{font-family:var(--maru);font-size:16px;font-weight:700;
 color:var(--deep);font-variant-numeric:tabular-nums;white-space:nowrap}
.gkn-ch-y small{font-size:11px;font-weight:400;color:var(--soft);
 margin-left:1px}
.gkn-ch-k{justify-self:start;font-size:11.5px;line-height:1.7;
 padding:1px 7px;border-radius:5px;white-space:nowrap}
.gkn-ch-s{background:#eef3f8;color:#41546f;border:1px solid #dde5ee}
.gkn-ch-h{background:#fff4e6;color:#8a5a12;border:1px solid #f3e0c4}
.gkn-ch-t{font-size:14.5px;line-height:1.8}
@media(max-width:560px){
 /* 狭い画面では年と大会を1行目に、出来事を2行目に落とす */
 .gkn-ch{grid-template-columns:5.2em 1fr;gap:2px 10px;padding:9px 2px}
 .gkn-ch-t{grid-column:1 / -1;font-size:13.5px;line-height:1.75}
}

/* 学校ごとに書いたリード。ヒーローのすぐ下＝1画面目に置く文なので、
   本文より少し大きく、行間を広めに取る */
.gkn-elead{margin:18px 0 6px}
.gkn-elead p{font-size:15.5px;line-height:2;margin:0 0 10px;max-width:720px}
.gkn-elead p:last-child{margin-bottom:0}
.gkn-elead b{color:var(--deep);font-weight:700}
@media(max-width:819px){
 .gkn-elead{margin:10px 0 4px}
 .gkn-elead p{font-size:14.5px;line-height:1.9;margin:0 0 8px}
}

/* ---- ラベル→値だけの表（基本情報・倍率・学費など） ----
   2〜3列しか無いのに枠いっぱい（988px）に伸びていて、「正式名称」と
   「大阪桐蔭高等学校」のあいだが438px空いていた。**伸ばさない。**
   白い枠のほうを中身の幅に合わせる（2026-08-27） */
/* fit-content だと、中の表が折り返せるぶんまで縮んで、住所が3行に 折れた。max-content にして「折り返さない幅」に合わせる */
.gkn-tw.gkn-kvw{width:max-content;max-width:100%}
.gkn-tw table.gkn-kv{width:auto;min-width:0;table-layout:auto}
.gkn-tw table.gkn-kv th.gkn-name,
.gkn-tw table.gkn-kv td.gkn-name{width:auto;min-width:0}
/* 1列目（項目名）と2列目のあいだだけ空ける。右端は詰める */
.gkn-tw table.gkn-kv td:first-child,
.gkn-tw table.gkn-kv th:first-child{padding-right:28px;white-space:nowrap}
@media(max-width:819px){
 /* 狭い画面では枠を全幅に戻す（中身が短い表だけ左に寄って見えるため） */
 .gkn-tw.gkn-kvw{width:100%}
 .gkn-tw table.gkn-kv{width:100%}
 .gkn-tw table.gkn-kv td:first-child,
 .gkn-tw table.gkn-kv th:first-child{padding-right:12px;white-space:normal}
}

/* 校舎の写真は640×480が多く、988pxの本文幅に伸ばすと**高さ741px**に
   なる。見出しとスペック表のあいだに写真1枚ぶんの壁ができるので、
   広い画面では高さで止めて切る（2026-09-04） */
@media(min-width:820px){
 .gkn-doc .gkn-fig-lead img{max-height:420px;object-fit:cover}
}

/* ---- 基本スペック表（偏差値の節の中）----
   もとは「◯◯の基本情報とアクセス」という節で、ページの下から3番目に
   あった。学校のページを開いた人が最初に確かめるのは「どこの何の学校か」
   なので、いちばん上の節へ上げて写真の下に敷いた（2026-09-04）。

   **1行4セル（th td th td）を狭い画面でも崩さない。** ゲームの攻略
   サイトのステータス表と同じ形にする。2列に折ると縦に倍伸びて
   1画面に収まらない（2026-09-05）。
   列は tbody 側の grid が持ち、tr は display:contents で透ける。
   ★ tr ごとに grid にすると**行ごとに列幅が決まってガタつく**ので
   やらない（項目名の幅は表ぜんぶで1つでなければならない）。
   colspan は効かないので .gkn-sp3 で span させる */
.gkn-doc .gkn-spec{display:block;width:100%;margin:0 0 14px;
 background:var(--white);border-radius:var(--r-md);overflow:hidden}
.gkn-doc .gkn-spec tbody{display:grid;
 grid-template-columns:auto minmax(0,1fr) auto minmax(0,1fr)}
.gkn-doc .gkn-spec tr{display:contents}
.gkn-doc .gkn-spec th,.gkn-doc .gkn-spec td{margin:0;padding:10px 12px;
 text-align:left;font-size:13.5px;line-height:1.55;white-space:normal;
 border-bottom:1px solid var(--rule);min-width:0;overflow-wrap:anywhere}
.gkn-doc .gkn-spec tr:last-child th,
.gkn-doc .gkn-spec tr:last-child td{border-bottom:0}
.gkn-doc .gkn-spec th{display:flex;align-items:center;font-weight:700;
 font-size:12px;color:var(--nv);background:var(--sky);letter-spacing:.02em;
 white-space:nowrap;
 /* 白の上の罫（--rule）は水色の地では消える。項目名の列だけ濃いほうを使う */
 border-bottom-color:var(--line)}
.gkn-doc .gkn-spec td{color:var(--ink);font-variant-numeric:tabular-nums;
 display:flex;flex-direction:column;justify-content:center}
/* 単位・順位・注記は値の下に1段落とす。狭いセルでも値の数字を先に拾える */
.gkn-doc .gkn-spec td small{font-size:11px;color:var(--faint);
 font-variant-numeric:normal;line-height:1.45;margin-top:1px}
.gkn-doc .gkn-spec .gkn-sp3{grid-column:span 3}
/* 地図は表の直下に、表示幅いっぱいで置く。読み込む前も同じ高さを
   取っておいて、あとから押し下がらないようにする（2026-09-06） */
.gkn-doc .gkn-mapfull{margin:0 -26px 20px;height:220px;background:#f4f6f9}
.gkn-doc .gkn-mapfull iframe{display:block;width:100%;height:220px;border:0}
@media(max-width:600px){.gkn-doc .gkn-mapfull{margin:0 -16px 18px}}
.gkn-doc .gkn-spec .gkn-spmap{padding:0;display:block}
/* 地図の行だけ背が高い。項目名を上下中央にすると水色の帯が間延びして
   見えるので、この行だけ上に寄せる */
.gkn-doc .gkn-spec tr:last-child th{align-items:flex-start;padding-top:12px}
.gkn-doc .gkn-spec .gkn-spmap iframe{display:block;width:100%;height:260px;
 border:0}
@media(max-width:700px){
 /* **ここで2列に折らない。** 4セルのまま字と余白だけ詰める */
 .gkn-doc .gkn-spec th,.gkn-doc .gkn-spec td{padding:8px 9px;font-size:12.5px}
 .gkn-doc .gkn-spec th{font-size:11.5px;padding-left:10px;padding-right:8px}
 .gkn-doc .gkn-spec td small{font-size:10.5px}
 .gkn-doc .gkn-spec .gkn-spmap iframe{height:210px}
}

/* ---- 目次 ----
   h2は「翔陽高校の2026年度入試の倍率は0.91倍で定員割れ」のような文に
   してあるので、そのまま並べると目次が読めない。校名と句点から後ろを
   落としたものを並べる（toc_label） */
.gkn-doc .gkn-toc{background:var(--white);border-radius:var(--r-md);
 padding:16px 20px 18px;margin:2px 0 24px;max-width:none}
.gkn-doc .gkn-toc>p{font-size:12.5px;font-weight:700;color:var(--nv);
 margin:0 0 8px;letter-spacing:.1em}
.gkn-doc .gkn-toc ol{list-style:none;margin:0;padding:0;
 columns:2;column-gap:28px;max-width:none}
.gkn-doc .gkn-toc li{break-inside:avoid;margin:0}
.gkn-doc .gkn-toc a{display:block;position:relative;padding:6px 0 6px 18px;
 font-size:13.5px;line-height:1.6;color:var(--ink);border-bottom:0}
.gkn-doc .gkn-toc a::before{content:"";position:absolute;left:4px;top:1em;
 width:5px;height:5px;border-right:1.5px solid var(--accent);
 border-bottom:1.5px solid var(--accent);transform:rotate(-45deg)}
.gkn-doc .gkn-toc a:hover{color:var(--accent)}
.gkn-doc .gkn-h2[id]{scroll-margin-top:18px}
@media(max-width:700px){
 .gkn-doc .gkn-toc{padding:14px 16px 16px}
 .gkn-doc .gkn-toc ol{columns:1}
}

/* ---- 大学別の合格者数。**表にしない** ----
   2列の表をPCの幅（988px）に伸ばすと、大学名と人数のあいだが950px空いて、
   どの数字がどの大学のものか目で追えなかった。50行で高さ1,986px。
   中身は「大学名→人数」の対でしかないので、段組みの一覧にする。
   PCで4列に入り、名前と人数が隣り合い、高さは1/4で済む（2026-08-27） */
.gkn-uwrap{background:var(--white);border-radius:var(--r-md);
 padding:10px 16px 14px;margin:0 0 8px;border:1px solid var(--rule)}
p.gkn-ucap{font-size:12px;color:var(--faint);margin:14px 0 6px;
 letter-spacing:.04em;max-width:none}
/* .gkn p / .gkn-doc p に読みやすさのための max-width:38〜40em が
   掛かっている。区切りの帯は一覧と同じ幅まで伸ばす（475pxで止まって
   人数だけ真ん中に浮いていた） */
p.gkn-ugrp{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;
 margin:14px 0 6px;padding:5px 10px;background:var(--sky);
 border-radius:var(--r-sm);font-size:12.5px;color:var(--nv);
 max-width:none}
p.gkn-ugrp:first-child{margin-top:6px}
.gkn-ugrp b{font-weight:700}
.gkn-ugrp small{color:var(--soft);font-weight:400}
.gkn-ugrp span{margin-left:auto;font-weight:700;
 font-variant-numeric:tabular-nums}
.gkn-ulist{display:grid;gap:2px 18px;
 grid-template-columns:repeat(auto-fill,minmax(212px,1fr))}
/* 1件ずつが「大学名 ─ 人数」の対。帯はそのグループでいちばん多い
   大学を100とした割合（グループをまたぐと近畿大173人で難関国立が
   全部つぶれるので、グループの中で比べる） */
.gkn-ui{position:relative;display:flex;align-items:baseline;gap:8px;
 padding:7px 8px 6px;border-bottom:1px solid var(--rule);min-width:0}
.gkn-ui::before{content:"";position:absolute;left:0;top:2px;bottom:2px;
 width:max(3px,calc(var(--w) * 1%));background:rgba(28,84,166,.09);
 border-radius:0 4px 4px 0;pointer-events:none}
.gkn-ui:not([style])::before{display:none}
.gkn-un{position:relative;font-size:13.5px;line-height:1.4;
 overflow-wrap:anywhere}
.gkn-uc{position:relative;margin-left:auto;font-size:14px;font-weight:700;
 color:var(--deep);white-space:nowrap;font-variant-numeric:tabular-nums}
.gkn-uc small{font-size:11px;font-weight:400;color:var(--soft);
 margin-left:1px}
.gkn-ui-more .gkn-un{color:var(--faint);font-size:12.5px}
/* 資料のまとめ行（「その他の私立大学」）。大学名ではないので帯を描かず、
   個別の大学と見分けが付くようにする（2026-09-06） */
.gkn-ui-agg{color:var(--soft)}
.gkn-ui-agg .gkn-un,.gkn-ui-agg .gkn-uc{color:var(--soft);font-weight:400}
@media(max-width:819px){
 .gkn-uwrap{padding:8px 12px 12px}
 .gkn-ulist{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:2px 12px}
 .gkn-un{font-size:12.5px}
 .gkn-uc{font-size:13px}
}
.gkn-tw tr.gkn-grp td{background:var(--sky);font-size:12.5px;color:var(--nv);
 padding:9px 8px 8px 0;white-space:normal;line-height:1.5}
.gkn-tw tr.gkn-grp b{font-weight:700}
.gkn-tw tr.gkn-grp small{color:var(--soft);font-weight:400;margin-left:5px}
.gkn-tw tr.gkn-grp span{float:right;font-weight:700}
.gkn-tw tr.gkn-grp:hover td{background:var(--sky)}
.gkn-tw td.gkn-soft,.gkn-tw .gkn-soft{color:var(--faint)}
.gkn-tw th:first-child.gkn-rank,.gkn-tw td.gkn-rank{color:var(--faint);font-size:12px;
 width:2.4em;min-width:0;padding-left:0;padding-right:8px;text-align:left}
@media(max-width:600px){
 .gkn-tw table.gkn-drop th:nth-last-child(-n+2),
 .gkn-tw table.gkn-drop td:nth-last-child(-n+2){display:none}
 /* 7列ある表（偏差値ランキングに学費を足したもの）は2列落としても
    校名が76pxまで潰れる。**3列落とす。**男女は表の上の絞り込みで選べる */
 .gkn-tw table.gkn-drop3 th:nth-last-child(-n+3),
 .gkn-tw table.gkn-drop3 td:nth-last-child(-n+3){display:none}
 /* 現役の内訳（カッコ内）は狭い画面では落とす。これが1列あたり27px効いていて、
    3年に絞ってもまだ横にはみ出していた。 */
 .gkn-tw table.gkn-drop .gkn-genneki{display:none}
 /* 倍率の表は8列でスマホに入らない（186pxはみ出していた）。
    志願倍率・志願者数・欠員を落として5列にする。実質倍率と、
    何人受けて何人受かったかが残れば用は足りる。 */
 /* あと12px入らなかった。1列目の「2026年度」を「2026」にして詰める。 */
 .gkn-tw table.gkn-b8 td:first-child{font-size:13px}
 .gkn-tw table.gkn-b8 td:first-child i{display:none}
 .gkn-tw table.gkn-b8 th:nth-child(3),.gkn-tw table.gkn-b8 td:nth-child(3),
 .gkn-tw table.gkn-b8 th:nth-child(5),.gkn-tw table.gkn-b8 td:nth-child(5),
 .gkn-tw table.gkn-b8 th:nth-child(8),.gkn-tw table.gkn-b8 td:nth-child(8){display:none}
 .gkn-tw table{min-width:0}
}
.gkn-swipe{display:none;font-size:12px;color:var(--faint);margin:-18px 0 24px;
 text-align:right;padding-right:4px}
@media(max-width:760px){.gkn-swipe{display:block}}
/* 自動で足すヒントは、はみ出している表の直前にだけ出る（画面幅は問わない） */
.gkn-swipe-auto{display:block;margin:0 0 6px}

/* ---- 推移バー ---- */
.gkn-bars{margin:0 0 8px;background:var(--white);border-radius:var(--r-md);padding:14px 18px}
.gkn-barwrap{position:relative;--gkn-barlab:5.2em;--gkn-bargap:14px}
.gkn-barwrap::before{content:"";position:absolute;top:14px;bottom:14px;width:2px;
 left:calc(var(--gkn-barlab) + var(--gkn-bargap) + 18px);background:var(--line)}
.gkn-bar{display:grid;grid-template-columns:var(--gkn-barlab) 1fr auto;align-items:center;
 gap:var(--gkn-bargap);padding:9px 0;border-bottom:1px solid var(--line)}
.gkn-bar:last-child{border-bottom:0}
.gkn-bar i{font-style:normal;font-size:12.5px;color:var(--soft);font-weight:700}
.gkn-bar u{text-decoration:none;display:block;height:12px;border-radius:6px;
 background:var(--nv);min-width:4px}
.gkn-bar u.gkn-hot{background:var(--hot)}
.gkn-bar u.gkn-under{background:var(--faint);margin-left:auto}
.gkn-bar-track{display:flex}
.gkn-bar b{font-family:var(--maru);font-size:17px;font-variant-numeric:tabular-nums;
 min-width:3.8em;text-align:right;color:var(--deep)}
.gkn-baseline{font-size:12.5px;color:var(--soft);margin:8px 0 26px}

/* ---- 一覧カード ---- */
.gkn-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
 gap:12px;margin:0 0 30px}
.gkn-item{background:var(--white);border-radius:var(--r-md);padding:15px 17px}
.gkn .gkn-item a{border-bottom:0;font-size:15.5px;color:var(--nv);font-family:var(--maru)}
.gkn-item a:hover{color:var(--tq)}
.gkn-item span{display:block;font-size:12.5px;color:var(--soft);margin-top:4px;
 font-variant-numeric:tabular-nums}
.gkn-band .gkn-item{background:rgba(255,255,255,.12)}
.gkn-band .gkn-item a{color:var(--white)}
.gkn-band .gkn-item span{color:rgba(255,255,255,.8)}

/* ---- 注記・出典 ---- */
.gkn-note{font-size:13px;color:var(--soft);line-height:1.85;margin:0 0 24px;max-width:42em}
/* 「知っている人に教える」の1行。注記と同じ大きさだが、
   これは読者への断りではなく**お願い**なので、地の色を敷いて見分ける */
.gkn-ask{background:var(--sky);border-radius:10px;padding:9px 12px;
 margin:-8px 0 24px}
.gkn-doc .gkn-ask{background:var(--sky);padding:9px 12px;margin:-4px 0 22px}
.gkn-ask a{font-weight:700;white-space:nowrap}
/* 出典のURLは1語なので、390pxだと折り返さずに本文を横に広げる（実測467px） */
.gkn-note a{word-break:break-all}
.gkn-warn{font-size:13px;color:var(--soft);line-height:1.85;margin:0 0 20px;
 max-width:38em}
.gkn-cite{font-size:12px;color:var(--faint);margin:-14px 0 26px;line-height:1.8}
.gkn-cite a{color:var(--faint);font-weight:400;border-bottom-width:1px}
.gkn-genneki{font-size:11px;color:var(--faint);margin-left:1px;font-weight:400}
.gkn-tw tr.gkn-sum td{border-top:2px solid var(--nv);font-weight:700}
/* 太い色の縦棒を左に立てた角丸カードはやめた。
   どこにでもある装飾で、中身の大事さと関係なく目立ってしまう。
   大事なことは文の書き方と蛍光ペンで示す。 */
.gkn-callout{margin:0 0 20px;font-size:15px;line-height:1.95;max-width:38em}
/* 中間集計の断り。**白背景・角丸・1px の線だけ。**塗り分け・左の太い
   色ボーダー・アイコン・グラデーションは使わない（2026-09-06の指定） */
.gkn-flat{margin:0 0 18px;max-width:38em;background:#fff;
  border:1px solid #e3e8ee;border-radius:8px;padding:13px 15px}
.gkn-flat p{margin:0;font-size:14px;line-height:1.9;color:var(--ink)}
/* スペック表の数値に添える1行 */
.gkn-spec .gkn-asof{display:block;margin-top:2px;font-size:.75rem;
  color:#5a6b7d;font-weight:400;line-height:1.5}
.gkn-callout b{font-weight:700;color:var(--ink)}
.gkn-bu{font-size:14px;line-height:1.85;margin:0 0 14px;padding:12px 16px;
 background:var(--white);border-radius:var(--r-sm);max-width:44em}
.gkn-bu b{font-family:var(--maru);font-size:15px;color:var(--nv)}
.gkn-tags{font-size:13.5px;line-height:1.9;color:var(--soft);margin:0 0 12px;max-width:46em}
.gkn-tags b{color:var(--deep);font-size:12.5px;margin-right:6px}
.gkn-ol{margin:0 0 22px;padding-left:1.3em;font-size:15px;max-width:42em}
.gkn-ol li{margin-bottom:7px}
.gkn-ol li::marker{color:var(--tq);font-weight:700}
.gkn-more{font-size:15px;margin:0 0 26px}
.gkn-src{background:var(--white);border-radius:var(--r-md);margin-top:40px;
 padding:18px 22px;font-size:12.5px;color:var(--soft);line-height:1.95}
.gkn-src b{color:var(--deep)}

/* ---- 写真 ---- */
.gkn-fig{margin:0 0 26px}
.gkn-fig img{display:block;width:100%;height:auto;border-radius:var(--r-lg)}
.gkn-fig figcaption{font-size:12px;color:var(--faint);line-height:1.75;margin-top:8px}
.gkn-fig figcaption a{color:var(--faint);font-weight:400;border-bottom-width:1px}
.gkn-form{display:grid;gap:16px;margin:18px 0 8px;max-width:640px}
.gkn-form label{display:grid;gap:6px;font-size:13.5px;color:var(--soft);
  letter-spacing:.04em}
.gkn-form input,.gkn-form select,.gkn-form textarea{font:inherit;font-size:16px;
  color:var(--ink);background:var(--white);border:1px solid var(--rule);
  border-radius:2px;padding:11px 12px;width:100%}
.gkn-form textarea{line-height:1.85;resize:vertical}
.gkn-form input:focus,.gkn-form select:focus,.gkn-form textarea:focus{
  outline:2px solid var(--accent);outline-offset:1px}
.gkn-form input[readonly]{background:#F2F4F6;color:var(--soft)}
.gkn-form button{font:inherit;font-size:16px;font-weight:600;color:#fff;
  background:var(--accent);border:0;border-radius:2px;padding:14px 18px;
  cursor:pointer;letter-spacing:.04em}
.gkn-form button:disabled{background:#9AA6B2;cursor:not-allowed}
.gkn-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* パンくず。構造化データだけでなく画面にも出す */
.gkn-crumbs{padding:10px 0 2px;font-size:12.5px;color:var(--soft)}
.gkn-crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
 gap:0 6px;align-items:center}
.gkn-crumbs li{display:flex;align-items:center;gap:6px;min-width:0}
.gkn-crumbs li+li::before{content:"›";color:var(--faint)}
.gkn-crumbs a{color:var(--nv);border-bottom:0}
.gkn-crumbs a:hover{text-decoration:underline}
.gkn-crumbs li[aria-current]{color:var(--soft);overflow:hidden;
 text-overflow:ellipsis;white-space:nowrap}
@media(max-width:600px){.gkn-crumbs{padding:4px 14px 0;font-size:11.5px}
 /* 押す場所は28px以上。24pxまで詰めたら check_layout が5画面で
    「小さい」を出した（2026-09-05） */
 /* 指で狙う場所は44px（ユーザー指摘・2026-09-06）。
    縦に伸びるぶんは padding ではなく行の高さで取る */
 .gkn-crumbs a{min-height:44px}}
/* 写真をさがしている枠。押しつけがましくならないよう淡く */
/* 白背景・角丸・1pxの線。左の太い色ボーダーは使わない（2026-09-06） */
.gkn-bosyu{background:#fff;border:1px solid #e3e8ee;border-radius:8px}
.gkn-bosyu b{display:block;margin-bottom:6px}
.gkn-bosyu .gkn-note{display:block;margin-top:8px}
/* 「必須」の札。labelがgridの子なので、指定が無いと改行して見えた */
.gkn-req{display:inline-block;margin-left:8px;padding:1px 7px;border-radius:3px;
 background:var(--nv);color:var(--white);font-size:11px;font-weight:700;
 letter-spacing:.06em;vertical-align:2px}
.gkn-msg{font-size:14px;line-height:1.9;margin:2px 0 0;min-height:1.9em}
.gkn-rv-avg{display:flex;align-items:baseline;gap:12px;margin:14px 0 10px}
.gkn-rv-avg b{font-size:34px;line-height:1;letter-spacing:-.02em}
.gkn-rv-avg span{color:#E8A33D;font-size:17px;letter-spacing:.08em}
.gkn-rv-avg em{font-style:normal;font-size:13px;color:var(--soft)}
.gkn-rv{border-top:1px solid var(--rule)}
.gkn-rv-item{padding:14px 0;border-bottom:1px solid var(--rule)}
.gkn-rv-head{display:flex;flex-wrap:wrap;gap:10px;align-items:baseline;margin-bottom:6px}
.gkn-rv-star{color:#E8A33D;letter-spacing:.08em;font-size:14px}
.gkn-rv-meta{font-size:12.5px;color:var(--soft)}
.gkn-rv-item p{margin:0;font-size:15px;line-height:1.95}
.gkn-rv-ph{margin:0 0 10px;max-width:300px}
.gkn-rv-ph img{display:block;width:100%;height:auto;border-radius:2px}
.gkn-rv-ph figcaption{font-size:11.5px;color:var(--faint);margin-top:5px}
.gkn-hint{display:block;font-size:11.5px;line-height:1.7;color:var(--faint);
  margin-top:4px;letter-spacing:0}
.gkn-pv{margin:0}
.gkn-pv img{display:block;max-width:200px;height:auto;border:1px solid var(--rule);
  border-radius:2px}
.gkn-pv small{display:block;font-size:11.5px;color:var(--soft);margin-top:5px}
.gkn-faq{margin:16px 0 4px;border-top:1px solid var(--rule)}
.gkn-faq>div{padding:14px 0;border-bottom:1px solid var(--rule)}
.gkn-faq dt{font-weight:600;font-size:15.5px;line-height:1.7;margin:0 0 6px}
.gkn-faq dt::before{content:"Q";color:var(--accent);font-weight:700;margin-right:.5em}
.gkn-faq dd{margin:0;font-size:15px;line-height:1.9;color:var(--ink)}
/* ★ この grid は <dl class="gkn-why"> 用。<p class="gkn-why"> にも効いて
   いて、中の mark がグリッド項目になり block 化していた
   （「創立から103年」が単独行を占有していた／ユーザー指摘・2026-09-06） */
dl.gkn-why{display:grid;gap:0;margin:16px 0 6px;border-top:1px solid var(--rule)}
p.gkn-why{display:block}
.gkn-why>div{display:grid;grid-template-columns:5.5em 1fr;gap:14px;padding:9px 0;
  border-bottom:1px solid var(--rule)}
.gkn-why dt{font-size:12.5px;letter-spacing:.08em;color:var(--soft);padding-top:2px}
.gkn-why dd{margin:0;font-size:15px;line-height:1.85}
.gkn-quote{background:var(--white);border-radius:var(--r-md);overflow:hidden;
 margin:0 0 26px;max-width:520px}
.gkn-quote>.gkn-qlabel{font-size:11px;letter-spacing:.16em;color:var(--white);
 background:var(--nv);padding:4px 14px;display:block;font-weight:700}
.gkn-quote img{display:block;width:100%;height:auto;margin:0}
.gkn-doc .gkn-quote{max-width:520px;margin:0 0 16px}
.gkn-sf{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 8px;
  max-width:520px}
.gkn-sf-col{margin:0}
.gkn-sf-col img{display:block;width:100%;height:auto;border-radius:2px;
  background:#F4F6F8}
.gkn-sf-col figcaption{font-size:13px;font-weight:700;color:var(--nv);
  text-align:center;margin-top:6px}
.gkn-sf-src{font-size:11.5px;line-height:1.7;color:var(--faint);margin:0 0 16px}
/* 出典のURLが404になっているものは、リンクを外して文字だけ残す
   （tools/strip_dead_links.py が置き換える／2026-09-11） */
.gkn-dead{color:var(--faint);word-break:break-all}
.gkn .gkn-sf-src a{color:var(--faint);font-weight:400;word-break:break-all;
  border-bottom-width:1px}
.gkn-doc .gkn-quote figcaption{font-size:11.5px;line-height:1.7;padding:8px 14px 10px;
  color:var(--faint)}
.gkn-doc .gkn-quote figcaption a{color:var(--faint)}
.gkn-quote figcaption{font-size:12px;color:var(--soft);line-height:1.8;padding:10px 16px 12px}
.gkn-quote figcaption a{color:var(--soft);font-weight:400;word-break:break-all;
 border-bottom-width:1px}

/* ---- 比較 ---- */
.gkn-cmp-pick{background:var(--white);border-radius:var(--r-md);padding:20px;margin:0 0 26px}
.gkn-cmp-slots{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px}
.gkn-cmp-pick label{display:block;font-size:12.5px;color:var(--soft);margin:0 0 6px;
 font-weight:700}
/* selectをやめ、打って絞れる入力にした（2026-09-06）。
   高さは詳細ページのナビと同じ44px以上にそろえる */
/* ランキングの絞り込みは既定で閉じる（2026-09-06） */
.gkn-fdet{margin:0 0 14px}
.gkn-fsum{display:flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;
 background:var(--white);border:1px solid var(--rule);border-radius:12px;
 font-size:14px;font-weight:700;color:var(--deep);cursor:pointer;list-style:none}
.gkn-fsum::-webkit-details-marker{display:none}
.gkn-fsum::before{content:"▸";font-weight:400;color:var(--soft)}
.gkn-fdet[open] .gkn-fsum::before{content:"▾"}
.gkn-fsum span{font-weight:400;color:var(--soft);font-size:13px}
.gkn-fdet .gkn-gfil{margin-top:8px}
/* ヒーローの数字を1行に収める（h1が360pxまで下がっていた・2026-09-07） */
.gkn-facts-1{display:flex;flex-wrap:nowrap;gap:12px}
.gkn-facts-1 dt{font-size:11px}
.gkn-facts-1 dd{font-size:22px}
.gkn-facts-1>div{flex:1 1 0;min-width:0}
.gkn-cmp-box{position:relative}
.gkn-cmp-pick input.gkn-sel{width:100%;min-height:44px;padding:11px 34px 11px 12px;
 font-size:16px;color:var(--ink);font-family:inherit;background:var(--sky);
 border:2px solid var(--sky-d);border-radius:var(--r-sm);
 -webkit-appearance:none;appearance:none}
.gkn-cmp-pick input.gkn-sel:focus{outline:0;border-color:var(--tq)}
.gkn-cmp-x{position:absolute;top:50%;right:6px;transform:translateY(-50%);
 width:30px;height:30px;line-height:1;border:0;border-radius:50%;cursor:pointer;
 background:transparent;color:var(--soft);font-size:18px}
.gkn-cmp-x:hover{background:var(--sky-d)}
.gkn-ac{position:absolute;z-index:30;left:0;right:0;top:calc(100% + 4px);margin:0;
 padding:4px;list-style:none;max-height:19rem;overflow:auto;background:var(--white);
 border:1px solid var(--rule);border-radius:var(--r-sm);
 box-shadow:0 8px 24px rgba(12,34,64,.14)}
.gkn-ac-i{display:flex;flex-wrap:wrap;gap:0 6px;align-items:baseline;
 min-height:44px;padding:8px 10px;border-radius:6px;cursor:pointer;font-size:14.5px}
.gkn-ac-i b{font-weight:700;color:var(--ink)}
.gkn-ac-i span{font-size:12.5px;color:var(--soft)}
.gkn-ac-i.on,.gkn-ac-i:hover{background:var(--sky)}
/* 比較表の見出しの校名は個別ページへのリンク。指で押せる高さにする */
.gkn-cmp-out thead th a{display:inline-flex;align-items:center;justify-content:center;
 min-height:44px;padding:2px 6px}
/* 比較表。1列目に幅を与えないと、overflow-wrap:anywhere が効いて
   「募集定員（2026年度）」が1文字ずつ縦に組まれ、その行だけ高さ310px に
   なっていた（390px実測・ユーザー指摘2026-09-06） */
#gkn-cmp-out .gkn-tw table{table-layout:fixed;width:auto}
#gkn-cmp-out .gkn-tw th:first-child,
#gkn-cmp-out .gkn-tw td:first-child{
 width:112px;min-width:112px;white-space:pre-line;
 overflow-wrap:normal;word-break:normal;
 position:sticky;left:0;z-index:2;background:var(--white);
 box-shadow:1px 0 0 var(--rule)}
#gkn-cmp-out .gkn-tw thead th:first-child{z-index:3}
#gkn-cmp-out .gkn-tw th:not(:first-child),
#gkn-cmp-out .gkn-tw td:not(:first-child){min-width:120px;width:120px}
#gkn-cmp-out .gkn-tw tbody tr:hover td:first-child{background:#F7FAFC}
/* 自前の×と、input[type=search]の消すボタンが二重に出ていた */
.gkn-cmp-pick input.gkn-sel::-webkit-search-cancel-button,
.gkn-cmp-pick input.gkn-sel::-webkit-search-decoration{
 display:none;-webkit-appearance:none}
.gkn-cmp-empty{font-size:14px;color:var(--faint);padding:32px 0;text-align:center;
 background:var(--white);border-radius:var(--r-md)}

/* ---- フッター ---- */
.gkn-foot{background:var(--nv);color:var(--white);padding:6px 0 34px;margin-top:50px}
/* 紺帯 → 波形 → フッター（同じ紺）と続くと、波形と余白が
   紺の中に浮いて見える。その並びのときだけ両方を消す */
/* ページの終わりが紺帯のとき、mainの下余白が紺のあいだに
   白い線として残る。帯自身に負の余白を持たせて閉じる */
.gkn-band-last{margin-top:0}
/* モーダルは画面に出ないので、その手前の帯がページの終わり。
   帯にこの印が付いていたら、下の余白を閉じる */
.gkn-band-end{margin-bottom:0}
.gkn-doc:has(.gkn-band-end),main:has(.gkn-band-end){padding-bottom:0}
.gkn-foot .gkn-wrap{padding-top:26px}
.gkn-foot a{color:var(--white);border-bottom-color:rgba(255,255,255,.35)}
.gkn-foot-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
 gap:24px 30px;margin:0 0 26px;padding:0 0 24px;
 border-bottom:1px solid rgba(255,255,255,.25)}
.gkn-foot-col b{display:block;font-family:var(--maru);font-size:14px;color:var(--yl);
 letter-spacing:.08em;margin:0 0 10px}
.gkn-foot-col a{display:block;font-size:14px;margin:0 0 7px;font-weight:400;
 border-bottom:0}
.gkn-foot-col a:hover{border-bottom:1px solid rgba(255,255,255,.6)}
/* 47都道府県の列だけ、縦一列にすると親指が疲れるので折り返す */
.gkn-foot-col.gkn-foot-pref{grid-column:1/-1}
.gkn-foot-col.gkn-foot-pref div{display:grid;
 grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:0 14px}
.gkn-foot-col.gkn-foot-pref a{font-size:13.5px;margin:0 0 8px}
.gkn-foot-end small{display:block;font-size:12px;color:rgba(255,255,255,.74);
 line-height:1.95}
.gkn-foot-end .gkn-copy{margin-top:12px;font-family:var(--mono);font-size:11px;
 color:rgba(255,255,255,.55)}
.gkn-soon{color:var(--faint);font-size:15.5px;font-family:var(--maru)}

@media(max-width:600px){
 .gkn{font-size:15.5px}
 .gkn-wrap{padding:0 16px}
 .gkn-hero{padding:24px 20px 22px;border-radius:22px}
 .gkn-big b{font-size:46px}
 .gkn-facts>div{padding:0 14px}
 .gkn-facts dd{font-size:22px}
 .gkn-barwrap{--gkn-barlab:4.6em;--gkn-bargap:10px}
 .gkn-bar b{font-size:15px}
 .gkn-head-in{padding:5px 16px 4px;gap:8px}
 .gkn-logo svg{width:30px;height:30px}
 .gkn-logo b{font-size:17px}
 .gkn-logo span{font-size:8.5px}
 /* 4項目を2列に置くと2段になり、ヘッダーだけで167px使っていた。
    横に流れる1行にしたら、390pxで2本しか見えずスワイプできることが
    分からなかった。開閉するメニューにする */
 .gkn-mnav-btn{display:flex;flex-direction:column;justify-content:center;
  gap:5px;width:44px;height:44px;margin-left:auto;cursor:pointer;
  padding:0 10px}
 .gkn-mnav-btn span{display:block;height:2px;background:var(--nv);
  border-radius:2px;transition:transform .2s ease,opacity .2s ease}
 .gkn-gnav{margin-left:0;width:100vw;margin-inline:calc(50% - 50vw);
  display:none;flex-direction:column;gap:0;
  border-top:1px solid var(--line);background:var(--white)}
 .gkn-mnav-cb:checked~.gkn-head-in .gkn-gnav{display:flex}
 .gkn-mnav-cb:checked~.gkn-head-in .gkn-mnav-btn span:nth-child(1){
  transform:translateY(7px) rotate(45deg)}
 .gkn-mnav-cb:checked~.gkn-head-in .gkn-mnav-btn span:nth-child(2){opacity:0}
 .gkn-mnav-cb:checked~.gkn-head-in .gkn-mnav-btn span:nth-child(3){
  transform:translateY(-7px) rotate(-45deg)}
 .gkn .gkn-gnav a{border-left:0;background:var(--white);
  padding:13px 18px;font-size:14.5px;letter-spacing:.02em}
 .gkn .gkn-gnav a+a{border-top:1px solid var(--line)}
 .gkn-hero{margin-top:16px}
 .gkn-tw{padding:2px 14px 4px}
 /* 主要5本は短い名前で常に出す。ハンバーガーの中に隠すと、
    いちばん使う入口が1タップ遠くなる（スクロールも増える）。
    罫で区切っただけの帯は表のようで美しくなかったので、
    水色の地に白い札を並べる形にした */
 .gkn-qnav{display:flex;gap:6px;width:100%;padding:6px 12px 7px;
  background:var(--sky);border-top:1px solid var(--sky-d);
  overflow-x:auto;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,#000 94%,transparent);
  mask-image:linear-gradient(90deg,#000 94%,transparent)}
 .gkn-qnav::-webkit-scrollbar{display:none}
 .gkn .gkn-qnav a{flex:1 0 auto;display:flex;align-items:center;
  justify-content:center;min-height:44px;padding:0 13px;
  font-family:var(--maru);font-size:13px;font-weight:700;color:var(--nv);
  background:var(--white);border:1px solid var(--sky-d);border-radius:999px;
  border-bottom:1px solid var(--sky-d);white-space:nowrap;
  box-shadow:0 1px 2px rgba(12,34,64,.06)}
 .gkn .gkn-qnav a[aria-current]{background:var(--nv);border-color:var(--nv);
  color:var(--white);box-shadow:0 2px 6px rgba(28,84,166,.28)}
 /* ハンバーガーの中身は下層ページだけにする。主要5本は上の帯に
    出ているので、ここに並べると同じものを二度見せることになる */
 .gkn .gkn-gnav>a{display:none}
 .gkn-gnav-sub{display:flex;flex-direction:column;
  border-top:1px solid var(--line)}
 .gkn .gkn-gnav-sub a{padding:12px 18px;font-size:13.5px;color:var(--soft)}
 .gkn .gkn-gnav-sub a+a{border-top:1px solid var(--line)}
}

/* 偏差値ランキングの表。スマホでは校名の列が伸びて、
   コースと倍率が画面の外に出ていた。列の幅を決めて4列を収める */
/* 偏差値の表は列幅を決めて画面に収める作りなので、
   440pxの下限（横に流す表のための指定）を外す。
   これが効いていたせいで、収まっているのに横スクロールできてしまい、
   「必要ないのにスクロールできる」と言われた（2026-08-23） */
.gkn-tw table.gkn-rank4{min-width:0}
/* コースの列だけは折り返す。「産業/クラフト・産業/システム情報…」のような
   長い学科名が nowrap のままで、表の外へ322pxはみ出していた */
.gkn-rank4 th:nth-child(4),.gkn-rank4 td:nth-child(4),
.gkn-rank4.gkn-nobai th:nth-child(4),.gkn-rank4.gkn-nobai td:nth-child(4){
 white-space:normal;overflow-wrap:anywhere;word-break:break-word}
.gkn-rank4{table-layout:fixed;width:100%}
.gkn-rank4 th:first-child,.gkn-rank4 td:first-child{width:52px;text-align:center}
/* 3列目に男女の列を足した。コースは4列目に下がっている */
.gkn-rank4 th:nth-child(3),.gkn-rank4 td:nth-child(3){width:58px}
.gkn-rank4 th:nth-child(4),.gkn-rank4 td:nth-child(4){width:82px;font-size:12px;
 color:var(--soft);overflow-wrap:anywhere}
.gkn-rank4 th:last-child,.gkn-rank4 td:last-child{width:64px;text-align:right}
/* トップのランキングは上位30校のあとに地図を挟み、続きは畳んでおく。
   絞り込みは行に style="display:none" を直接置くので、**開く／閉じるは
   CSSだけで持つ**（インラインの空文字はCSSに負ける）。両方が効く形 */
#ttop2{display:none}
#ttop2.gkn-open{display:table}
.gkn-morebtn{display:inline-flex;align-items:center;gap:8px;min-height:48px;
 padding:0 20px;border:1px solid var(--nv);border-radius:999px;
 background:#fff;color:var(--nv);font-size:15px;font-weight:700;
 cursor:pointer;line-height:1.3}
.gkn-morebtn::after{content:"▼";font-size:11px}
.gkn-morebtn:hover{background:var(--nv);color:#fff}
.gkn-morebtn:focus-visible{outline:2px solid var(--tq);outline-offset:2px}
/* 学費のランキング。実質負担・合計・入学金は数字の列なので、
   校名にいちばん幅を渡す（狭い画面では末尾2列が gkn-drop で落ちる） */
/* 学費の表で、読者がいちばん見る行（支援を引いた実質負担）に色を敷く */
.gkn-kv tr.gkn-hl th,.gkn-kv tr.gkn-hl td{background:var(--sky)}
/* **数字の列は折り返さない。** 幅を em で決め打ちすると「1,010,000」が
   はみ出す（320pxで実測・2026-09-07）。中身なりの幅にして、
   余りを校名の列に渡す */
/* 学費の表：上位30校だけ出して、残りはボタンで開く。
   絞り込みは行に style="display:none" を置くので、開閉はCSSで持つ */
.gkn-gaku tr[data-more]{display:none}
.gkn-gaku.gkn-open tr[data-more]{display:table-row}
/* 320pxでは横スクロールになる。**1列目（実質負担）は貼り付けて、
   横に流しても金額が見えるようにする**（ユーザー指摘・2026-09-07） */
.gkn-gaku th:first-child,.gkn-gaku td:first-child{position:sticky;left:0;
 z-index:1;background:var(--white);box-shadow:1px 0 0 var(--rule)}
.gkn-gaku thead th:first-child{z-index:2;background:var(--sky)}
/* 並べかえの札。他のタップ要素と同じ44pxにそろえる */
.gkn-sortsw .gkn-chip{height:44px;padding:0 18px;font-size:14px}
.gkn-gaku{width:100%}
.gkn-gaku th,.gkn-gaku td{white-space:nowrap}
.gkn-gaku td:first-child b{font-size:15px;color:var(--deep)}
.gkn-gaku th.gkn-name,.gkn-gaku td.gkn-name{width:99%;white-space:normal}
/* 校名の下に添える県と課程。折り返さないと狭い画面で36pxはみ出した */
.gkn-gaku td.gkn-name .gkn-sub{display:block;white-space:normal;
 overflow-wrap:anywhere}
@media(max-width:600px){
 .gkn-gaku th,.gkn-gaku td{padding-left:6px;padding-right:6px}
 .gkn-gaku td:first-child b{font-size:13px}
 .gkn-gaku th:nth-child(3),.gkn-gaku td:nth-child(3),
 .gkn-gaku th:nth-child(4),.gkn-gaku td:nth-child(4){font-size:12px}}

/* 地図の上に置く「高校の多い県」。地方→県の2タップを1タップにする札。
   見出しに .gkn-flabel を借りたら width:4.6em で19pxはみ出した
   （絞り込みの行の中で使う前提の幅だった・2026-09-07） */
.gkn-quicklab{margin:0 0 4px;font-size:12px;color:var(--faint);
 letter-spacing:.04em}
.gkn-prefquick{margin:0 0 14px}
.gkn-prefquick .gkn-chip{text-decoration:none}
/* 倍率の列が64pxで、「29.43倍」が6pxはみ出していた（360px実測・
   2026-09-07）。狭い画面では列を広げて字を1段落とす */
@media(max-width:420px){
 .gkn-rank4 th:last-child,.gkn-rank4 td:last-child{width:74px;font-size:13px}}
.gkn-rank4 td.gkn-name{overflow-wrap:anywhere;line-height:1.35}
.gkn-rank4 td:first-child b{font-size:16px;color:var(--deep)}
/* PCでは列が間延びする（1,004pxの表で偏差値の列だけ159px、
   設置が195px あって、数字と校名のあいだが空いて見えた）。
   表の幅を内容に合わせ、右側の列は必要なぶんだけにする */
@media(min-width:820px){
 /* **表は枠いっぱいに使う。** 以前は間延びを止めるために表ごと720pxで
    止めていたが、白い枠は1,040pxあるので、右に320pxの空白が残って
    「要素に対して余白がありすぎる」と言われた（2026-08-27）。
    余りは全部「高校名」の列に渡す。データの列は中身なりのpxで固定し、
    width指定の無い2列目（高校名）が残りを取る（table-layout:fixed） */
 .gkn-tw table.gkn-rank4{max-width:none;width:100%;table-layout:fixed}
 .gkn-tw table.gkn-rank4 th:nth-child(2),
 .gkn-tw table.gkn-rank4 td:nth-child(2){width:auto}
 /* 偏差値・男女はどの形の表でも同じ位置にある */
 .gkn-tw table.gkn-rank4 th:first-child,
 .gkn-tw table.gkn-rank4 td:first-child{width:76px}
 .gkn-tw table.gkn-rank4 th:nth-child(3),
 .gkn-tw table.gkn-rank4 td:nth-child(3){width:110px}
 /* 5列（偏差値／高校名／男女／コース／倍率） */
 .gkn-tw table.gkn-rank4 th:nth-child(4),
 .gkn-tw table.gkn-rank4 td:nth-child(4){width:170px}
 .gkn-tw table.gkn-rank4 th:nth-child(5),
 .gkn-tw table.gkn-rank4 td:nth-child(5){width:118px}
 /* 4列（倍率を出さない表）。コースが最後に来る */
 .gkn-tw table.gkn-rank4.gkn-nobai th:nth-child(4),
 .gkn-tw table.gkn-rank4.gkn-nobai td:nth-child(4){width:200px}
 /* 6列（トップと県のページ：偏差値／高校名／男女／倍率／県かコース／設置） */
 .gkn-tw table.gkn-rank6 th:nth-child(4),
 .gkn-tw table.gkn-rank6 td:nth-child(4){width:118px}
 .gkn-tw table.gkn-rank6 th:nth-child(5),
 .gkn-tw table.gkn-rank6 td:nth-child(5){width:160px}
 .gkn-tw table.gkn-rank6 th:last-child,
 .gkn-tw table.gkn-rank6 td:last-child{width:104px}
 /* 数字と札は列の真ん中に置く。列を細くしたので、右寄せのままだと
    見出しと中身が離れて見える（1列目に当たる高校名だけ左寄せ） */
 .gkn-tw table.gkn-rank4 th:nth-child(n+3),
 .gkn-tw table.gkn-rank4 td:nth-child(n+3){text-align:center}
 /* 学科名は長い（「スーパーアカデミック（難関選抜）」）。PCでも折り返す */
 .gkn-tw table.gkn-rank4 td:nth-child(5),
 .gkn-tw table.gkn-rank4 th:nth-child(5){white-space:normal;
  overflow-wrap:anywhere}
 /* 行の高さも詰める。15pxの字に上下12pxで51pxあった */
 .gkn-tw table.gkn-rank4 th,
 .gkn-tw table.gkn-rank4 td{padding-top:10px;padding-bottom:9px}
}
/* 倍率の列を出さない表（私立など）。コースがいちばん右に来るので、
   末尾に当てた幅と右寄せを戻す */
.gkn-rank4.gkn-nobai th:nth-child(4),.gkn-rank4.gkn-nobai td:nth-child(4){
 width:118px;text-align:left}
/* コースの列を出さない表。4列目は倍率になるので、
   コース向けの小さい字・薄い色・折り返しを戻す */
.gkn-rank4.gkn-nocourse th:nth-child(4),.gkn-rank4.gkn-nocourse td:nth-child(4){
 width:auto;font-size:inherit;color:inherit;white-space:nowrap;
 overflow-wrap:normal;text-align:right}
@media(min-width:820px){
 .gkn-tw table.gkn-rank4.gkn-nocourse th:nth-child(4),
 .gkn-tw table.gkn-rank4.gkn-nocourse td:nth-child(4){width:118px;
  text-align:center}
}
@media(max-width:819px){
 /* **幅は割合で決める。** pxで足して326pxにしていたので、360pxの端末では
    30pxはみ出して横スクロールになっていた。画面幅がいくつでも収まる形にする */
 /* 見出しの「偏差値」は3文字ぶん必要。14%（46px）では4px出ていた */
 .gkn-rank4 th:first-child,.gkn-rank4 td:first-child{width:16%}
 .gkn-rank4 thead th:first-child{font-size:10.5px;letter-spacing:-.03em}
 .gkn-rank4 th:nth-child(3),.gkn-rank4 td:nth-child(3){width:17%}
 .gkn-rank4 th:nth-child(4),.gkn-rank4 td:nth-child(4){width:16%;font-size:10.5px}
 .gkn-rank4 td.gkn-g .gkn-tag{font-size:10px;padding:1px 4px}
 /* 320pxでは「男子校」の札と「29.43倍」が列に入りきらない。
    さらに詰める（iPhone SEの横幅） */
 @media(max-width:340px){
  .gkn-rank4 td.gkn-g .gkn-tag{font-size:9px;padding:1px 3px;letter-spacing:-.02em}
  .gkn-rank4 th:last-child,.gkn-rank4 td:last-child{font-size:10px}
  .gkn-doc .gkn-tw th,.gkn-doc .gkn-tw td{padding:7px 3px}
  /* 見出しの「偏差値」と「10.44倍」が列からはみ出す。
    320pxでは見出しだけ縮める（中身の字は読める大きさを保つ） */
  /* 「29.43倍」（私立の応募倍率）は5桁。320pxでは列に入らないので、
     数字も少し詰める。見出しは折り返させない */
  .gkn-rank4 thead th{font-size:9.5px;letter-spacing:-.04em;white-space:nowrap}
  .gkn-rank4 td.gkn-n{font-size:9.5px;letter-spacing:-.03em}
  /* 6列の表（トップ）は倍率の列がさらに狭い。「7.33倍」が3px出ていた */
  .gkn-tw table.gkn-rank6 th:nth-child(4),
  .gkn-tw table.gkn-rank6 td:nth-child(4){width:25%}
  .gkn-tw table.gkn-rank6 th:nth-child(3),
  .gkn-tw table.gkn-rank6 td:nth-child(3){width:20%}
  .gkn-tw table.gkn-rank6 th:nth-child(2),
  .gkn-tw table.gkn-rank6 td:nth-child(2){width:40%}
  .gkn-tw table.gkn-rank6 th:first-child,
  .gkn-tw table.gkn-rank6 td:first-child{width:15%}
  /* 見出しの「偏差値」が12px出ていた。1列目を広げる */
  .gkn-tw table.gkn-rank4 th:first-child,
  .gkn-tw table.gkn-rank4 td:first-child{width:16%}
  .gkn-tw table.gkn-rank4 th:nth-child(2),
  .gkn-tw table.gkn-rank4 td:nth-child(2){width:32%}
  .gkn-rank4 th:first-child,.gkn-rank4 td:first-child{width:12%}
  .gkn-rank4 th:last-child,.gkn-rank4 td:last-child{width:23%}
  .gkn-rank4 th:nth-child(3),.gkn-rank4 td:nth-child(3){width:16%}
  .gkn-rank4 th:nth-child(4),.gkn-rank4 td:nth-child(4){width:14%}
  .gkn-rank4 th:nth-child(2),.gkn-rank4 td:nth-child(2){width:35%}
 }
 .gkn-rank4 th:last-child,.gkn-rank4 td:last-child{width:19%;font-size:11.5px}
 .gkn-rank4 thead th{font-size:11px}
 /* 倍率の列が無い表（私立など）。コースがいちばん右に来る */
 .gkn-rank4.gkn-nobai th:nth-child(4),.gkn-rank4.gkn-nobai td:nth-child(4){width:29%}
 /* トップの全国ランキングだけ6列（偏差値・高校名・男女・倍率・都道府県・設置）。
    5列ぶんの割合を当てると都道府県の幅が0になってはみ出す */
 .gkn-rank6 th:first-child,.gkn-rank6 td:first-child{width:13%}
 .gkn-rank6 th:nth-child(2),.gkn-rank6 td:nth-child(2){width:29%}
 .gkn-rank6 th:nth-child(3),.gkn-rank6 td:nth-child(3){width:16%}
 .gkn-rank6 th:nth-child(4),.gkn-rank6 td:nth-child(4){width:14%;font-size:11px}
 .gkn-rank6 th:nth-child(5),.gkn-rank6 td:nth-child(5){width:16%;font-size:10.5px}
 .gkn-rank6 th:last-child,.gkn-rank6 td:last-child{width:12%;font-size:10.5px}
 /* 都道府県・設置の2列を落としている表では、残り4列で幅を配り直す。
    14%のままだと倍率のセルが54pxしかなく、「29.43倍」が6pxはみ出していた
    （360px実測・2026-09-07） */
 .gkn-rank6.gkn-drop th:first-child,.gkn-rank6.gkn-drop td:first-child{width:14%}
 .gkn-rank6.gkn-drop th:nth-child(2),.gkn-rank6.gkn-drop td:nth-child(2){width:43%}
 .gkn-rank6.gkn-drop th:nth-child(3),.gkn-rank6.gkn-drop td:nth-child(3){width:19%}
 .gkn-rank6.gkn-drop th:nth-child(4),.gkn-rank6.gkn-drop td:nth-child(4){
  width:24%;font-size:11px;white-space:nowrap;padding-left:4px;padding-right:6px}
 .gkn-rank4 td.gkn-name{font-size:12.5px}
 .gkn-rank4 th:nth-child(2),.gkn-rank4 td:nth-child(2){width:32%}
 .gkn-rank4 td:first-child b{font-size:14px}}

/* 県の見出しに敷くイラスト。スマホでは横に並べる余地が無いので、
   絵を下に敷いて、その上に文字が乗らないよう下側に余白を作る。
   .gkn-doc>.gkn-hero の padding があとから当たるので、末尾に置く */
@media(max-width:700px){
 /* 絵の帯は130pxあって、県ページの表の1行目を押し下げていた。
    トップの帯（56px）に合わせて詰める（2026-09-07） */
 .gkn-doc>.gkn-hero-pref,.gkn-hero-pref{padding-bottom:96px}
 .gkn-hero-pref::before{inset:auto 0 0 0;width:100%;height:92px;
  background-position:center bottom;background-size:cover}
 .gkn-hero-pref::after{display:none}}

/* ---- 表を画面に収める（あとから書いて上書きする） ----
   既定は white-space:nowrap ＋ min-width:440px で、横に流して見る前提。
   だが「多い進学先」「所在地」のような文の列まで伸びて、
   **収まるはずの表が横スクロールになっていた**。狭い画面では折り返す。
   数字の列（gkn-n）だけは折らない（「1.13倍」を割らないため） */
@media(max-width:819px){
 .gkn-tw table{min-width:0}
 .gkn-tw th,.gkn-tw td{white-space:normal;overflow-wrap:anywhere}
 .gkn-tw td.gkn-n,.gkn-tw th.gkn-n,.gkn-tw td.gkn-rank,
 .gkn-tw td.gkn-g,.gkn-tw th.gkn-g{white-space:nowrap}
 /* 倍率の増減表は数字の列が3つある。前の年の列は「2025年度」の見出しごと
    落として、いまの倍率と動いた幅だけ見せる */
 .gkn-delta th:nth-child(3),.gkn-delta td:nth-child(3){display:none}
 /* 「2026年度の倍率」は狭い画面で持たない。年度は本文で言っている */
 .gkn-yr-l{display:none}
 /* ランキングの表：校名の列（38%・最低7.5em）が広すぎて、
    数字の列が押し出されていた。狭い画面では校名を詰める */
 .gkn-tw table.gkn-drop th.gkn-name,.gkn-tw table.gkn-drop td.gkn-name{
  width:auto;min-width:5.4em}
 .gkn-tw table.gkn-drop td.gkn-rank{width:1.6em;padding-right:2px}
 /* 校名の下に添える県と設置。スマホでだけ出す（列を落としているので） */
 .gkn-sub{display:block;font-size:10.5px;color:var(--faint);line-height:1.5;
  margin-top:1px;white-space:nowrap}
 /* 都道府県と設置を落としたぶん、4列で割り直す */
 .gkn-rank6 th:first-child,.gkn-rank6 td:first-child{width:15%}
 .gkn-rank6 th:nth-child(2),.gkn-rank6 td:nth-child(2){width:47%}
 .gkn-rank6 th:nth-child(3),.gkn-rank6 td:nth-child(3){width:20%}
 .gkn-rank6 th:nth-child(4),.gkn-rank6 td:nth-child(4){width:18%;font-size:11px}
 /* 「私立」の2文字に7.5emは要らない */
 .gkn-tw th.gkn-setti,.gkn-tw td.gkn-setti{text-align:left;white-space:nowrap;
  width:3.6em;min-width:0}
}


.gkn-gs{background:var(--white);border-bottom:1px solid var(--rule);
 padding:8px 16px}
.gkn-gs-in{position:relative;max-width:960px;margin:0 auto}
.gkn-gs-q{width:100%;min-height:44px;padding:11px 14px;font-size:16px;
 font-family:inherit;color:var(--ink);background:var(--sky);
 border:2px solid var(--sky-d);border-radius:999px;
 -webkit-appearance:none;appearance:none}
.gkn-gs-q:focus{outline:0;border-color:var(--tq)}
.gkn-gs-q::-webkit-search-cancel-button{display:none;-webkit-appearance:none}
.gkn-gs-l{position:absolute;z-index:60;left:0;right:0;top:calc(100% + 4px);
 margin:0;padding:4px;list-style:none;max-height:60vh;overflow:auto;
 background:var(--white);border:1px solid var(--rule);border-radius:12px;
 box-shadow:0 10px 30px rgba(12,34,64,.18)}
.gkn-gs-l a{display:flex;flex-wrap:wrap;gap:0 6px;align-items:baseline;
 min-height:44px;padding:8px 10px;border-radius:8px;font-size:14.5px;
 color:var(--ink);text-decoration:none}
.gkn-gs-l li.on a,.gkn-gs-l a:hover{background:var(--sky)}
.gkn-gs-l b{font-weight:700}
.gkn-gs-l span{font-size:12.5px;color:var(--soft)}