@charset "utf-8";
/*
 * 入試制度 早わかりガイド（/examination/guide）専用スタイル
 * モックアップ bgu-nyushi-guide-mockup.html の <style> を全文移植（BGU-1107）
 * 読み込みは page/examination/guide/index.php の $pageCss のみ。他ページには影響しない。
 */
/* CSS 変数（:root のまま。値の定義のみでレイアウトには影響しない） */
:root{--green:#02c39a;--green-d:#00745c;--navy:#2b3c4f;--ink:#333;--sub:#646f70;--line:#dde3e8;--soft:#f4f9ff;--cream:#fbf6ec;--yellow:#fff33a;--lime:#c8f26b;--bg:#fff}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#fff}}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + var(--eg-hdr) + var(--eg-subnav));scroll-behavior:smooth}

/* ここから下は LP のラッパー .eg-root 配下に閉じ込める。
   モックアップの body / * / a / img への全体指定と、:root に載っていた
   box-sizing・safe-area padding を .eg-root へ移し、テーマ共通の
   ヘッダー・フッターに LP の書体・サイズが効かないようにしている。

   スコープは :where(.eg-root)（詳細度 0）で付ける。.eg-root a のように書くと
   詳細度が (0,1,1) に上がり、LP 自身の .lk{color:#fff} や .tile{color:var(--navy)}
   （(0,1,0)）を打ち消してしまうため。:where() ならモックアップの
   a / img / * と同じ詳細度のまま、適用範囲だけを LP 内に限定できる。 */
.eg-root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);margin:0;background:var(--bg);color:var(--ink);font-family:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;font-size:15px;line-height:1.8;-webkit-font-smoothing:antialiased}
:where(.eg-root) *{box-sizing:border-box}
:where(.eg-root) a{color:inherit}
:where(.eg-root) img{max-width:100%}

/* テーマ共通 CSS（style.css のリセット）がブラウザ既定値を潰している要素を、
   LP 内だけ既定値へ戻す。モックアップは既定値のまま描画されているため。
   詳細度は要素セレクタ 1 個ぶん（0,0,1）に保つので、LP のクラス指定が常に勝つ。
     - small : style.css の一括リセット font-size:100% を打ち返す
     - button: style.css の button,input{padding:0} を打ち返す
     - p     : 同リセットの margin:0 を打ち返す */
:where(.eg-root) small{font-size:smaller}
:where(.eg-root) button{padding:1px 6px}
:where(.eg-root) p{margin-block-start:1em;margin-block-end:1em}
/* 表の枠線色もブラウザ既定（gray）へ戻す。border-width は 0 のままなので描画には出ないが、
   モックアップとの計算済みスタイル照合を完全一致させるため。th / td は LP 側で色付きの
   border を指定しているので対象外。 */
:where(.eg-root) table,:where(.eg-root) thead,:where(.eg-root) tbody,:where(.eg-root) tr{border-color:gray}
.wrap{max-width:1200px;margin:0 auto;padding:0 20px}
.narrow{max-width:940px;margin:0 auto;padding:0 20px}
.dela{font-weight:900;letter-spacing:.02em}
.maru{font-weight:900}
.num{font-weight:900;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.dots{background-color:#fff;background-image:radial-gradient(#dfe6ec 1.4px,transparent 1.5px);background-size:22px 22px}
.dots-cream{background-color:var(--cream);background-image:radial-gradient(#ead9b8 1.4px,transparent 1.5px);background-size:22px 22px}

/* 追従要素の高さ（JS が実測して上書きする）。色の --sub とは別名にしてある */
:root{--eg-hdr:64px;--eg-subnav:46px}
.site-head{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--navy)}
.logo .mark{width:34px;height:34px;border-radius:8px;background:var(--green)}
.logo b{font-size:14px;line-height:1.15;display:block}.logo small{font-size:10.5px;color:var(--sub)}
.site-head nav{display:flex;gap:22px;font-size:13.5px;font-weight:700;color:var(--navy)}
.site-head nav a{text-decoration:none}
@media (max-width:760px){.site-head nav{display:none}}

/* MV */
.mv{position:relative;overflow:hidden;padding:0 0 32px;background:linear-gradient(180deg,#f4f9ff 0%,#fff 100%)}
.mv::before{content:"";position:absolute;inset:0;background-image:radial-gradient(#cfe0ee 1.6px,transparent 1.7px);background-size:24px 24px;opacity:.7}
.mv .in{position:relative;text-align:center}
.kv{margin:0 -20px 0}
/* 画像は PC 1280x480 / SP 390x500。width/height 属性で比率が確定するので aspect-ratio は置かない */
.kv img{display:block;width:100%;height:auto}
/* 1280px 以上は 1280px 幅で中央。旧式 calc((100% - 1280px)/2 - 20px) は 100% が親の内容幅
   （1160px）に解決されるため 1320px かつ非中央になっていた。50% 基準なら常に 1280px 中央。 */
@media (min-width:1280px){.kv{margin:0 calc(50% - 640px) 26px}}
.eyebrow{display:inline-block;background:var(--navy);color:var(--yellow);padding:6px 16px;font-size:13px;font-weight:700;letter-spacing:.14em;transform:rotate(-2deg);margin-bottom:14px}
.mv h1{margin:0;line-height:1.15;color:var(--navy);font-size:clamp(34px,6vw,58px);letter-spacing:.02em}
.mv h1 .paper{display:inline-block;background:#fff;padding:.06em .22em;box-shadow:8px 8px 0 var(--lime);transform:rotate(-1.5deg)}
.mv .catch{margin:26px 0 10px;font-size:clamp(20px,3vw,28px);color:var(--navy)}
.mv .catch mark{background:linear-gradient(transparent 55%,var(--yellow) 55%);padding:0 .1em}
.mv .lead{max-width:640px;margin:0 auto 26px;font-size:15px;color:var(--sub)}
.hero-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;text-align:left}
@media (max-width:760px){.hero-tiles{grid-template-columns:repeat(2,1fr);gap:10px}}
.tile{position:relative;display:block;text-decoration:none;border-radius:18px;padding:18px 18px 16px;min-height:112px;color:var(--navy);transition:transform .15s}
.tile:hover{transform:translateY(-3px)}
.tile small{display:block;font-size:12px;font-weight:700;opacity:.85}
.tile b{display:block;font-size:17px;line-height:1.3;margin:4px 0 8px}
.tile .go{position:absolute;right:16px;bottom:12px;font-size:18px;font-weight:900;line-height:1}
.tile .tags{display:flex;flex-wrap:wrap;gap:4px}
.tile .tags span{background:#fff;border-radius:6px;padding:1px 7px;font-size:11px;font-weight:700}
.notice{margin:0 -20px 30px;background:#fff6c4;color:var(--navy);display:flex;align-items:center;justify-content:center;gap:22px;padding:12px 20px;font-size:14px;line-height:1.4;flex-wrap:wrap}
@media (min-width:1280px){.notice{margin:0 calc(50% - 640px) 30px}}
.notice .label{flex-shrink:0;display:inline-flex;align-items:center;gap:8px;font-weight:900;font-size:13px;letter-spacing:.06em;color:var(--navy);padding-right:22px;border-right:1px solid rgba(43,60,79,.25)}
.notice .dot{width:10px;height:10px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(2,195,154,.25)}
.notice .dot.off{background:#aeb6bc;box-shadow:none}
.notice ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px 28px;align-items:center}
.notice .item{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap}
.notice .item.next{opacity:.85}
.notice .nm{font-weight:900;color:var(--navy);text-decoration:none;font-size:16px;border-bottom:2px solid rgba(43,60,79,.25);line-height:1.3}
.notice .item.next .nm{font-size:14px;font-weight:700}
.notice .date{display:inline-flex;align-items:baseline;gap:6px;background:#fff;border-radius:8px;padding:3px 10px;line-height:1.3}
.notice .date small{font-size:11px;color:var(--sub);font-weight:700}
.notice .date b{font-size:15px;color:#b8431a;font-weight:900}
.notice .eg-tag{font-size:11px;font-weight:700;color:var(--sub)}
.notice .left{display:inline-block;background:var(--navy);color:#fff;border-radius:6px;padding:0 9px;font-size:12px;font-weight:900;line-height:1.8}
.notice .eg-more a{font-size:13px;font-weight:700;color:var(--sub);text-decoration:underline;text-underline-offset:2px}
.notice .nx{font-size:11.5px;color:var(--sub);font-weight:700}
.notice.hidden{display:none}
@media (max-width:760px){.notice{justify-content:flex-start;gap:10px;padding:12px 16px}.notice .label{border-right:0;padding-right:0;width:100%;font-size:12px}.notice ul{flex-direction:column;align-items:flex-start;gap:10px}.notice .item{gap:8px}.notice .nm{font-size:15px}}
@media (max-width:640px){.now{flex-direction:column;gap:8px}.mv .lead br{display:none}}
.cta-row{margin-top:22px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.eg-btn{display:inline-flex;align-items:center;gap:10px;border-radius:999px;padding:13px 22px;font-weight:700;text-decoration:none;font-size:15px;border:2px solid var(--navy);color:var(--navy);background:#fff;cursor:pointer;font-family:inherit}
.eg-btn.primary{background:var(--navy);color:#fff}
.eg-btn.green{background:var(--green);border-color:var(--green);color:#fff}
.eg-btn .arr{width:26px;height:26px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;font-size:14px}
.eg-btn.primary .arr{background:var(--green)}
.eg-btn.small{padding:8px 14px;font-size:13px}

/* section nav */
.subnav{position:sticky;top:var(--eg-hdr);z-index:15;background:rgba(255,255,255,.95);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.subnav .wrap{display:flex;gap:10px;overflow-x:auto;padding:12px 20px;scrollbar-width:none;justify-content:center}
.subnav a{flex-shrink:0;text-decoration:none;color:var(--navy);font-size:14.5px;font-weight:700;border:1px solid var(--line);border-radius:999px;padding:9px 20px;background:#fff}
@media (max-width:820px){.subnav .wrap{justify-content:flex-start;padding:10px 16px}.subnav a{font-size:13px;padding:7px 14px}}
.subnav a b{color:var(--green-d);margin-right:4px}

/* sections */
section{padding:64px 0}
@media (max-width:760px){section{padding:48px 0}}
.sec-head{text-align:center;margin-bottom:28px}
.step-badge{display:inline-grid;place-items:center;width:72px;height:72px;border-radius:50%;background:var(--navy);color:#fff;line-height:1;margin-bottom:12px}
.step-badge small{font-size:10px;letter-spacing:.18em}.step-badge b{font-size:28px}
.sec-head h2{margin:0;font-size:clamp(24px,4vw,34px);color:var(--navy);line-height:1.3}
.sec-head h2 mark{background:linear-gradient(transparent 58%,var(--yellow) 58%);padding:0 .08em}
.sec-head p{margin:10px 0 0;color:var(--sub);font-size:15px}
.deco-title{display:inline-flex;align-items:center;gap:12px}
.deco-title::before,.deco-title::after{content:"";width:22px;height:3px;background:var(--green);transform:rotate(-60deg)}
.deco-title::after{transform:rotate(60deg)}

/* 専願・併願 */
.eg-two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:760px){.eg-two{grid-template-columns:1fr}}
.def{border-radius:20px;padding:24px 24px 20px;background:#fff;box-shadow:0 10px 28px rgba(43,60,79,.07)}
.def .kind{display:inline-block;padding:4px 14px;border-radius:8px;font-size:15px;color:#fff;background:var(--navy)}
.def.heigan .kind{background:#fff;color:var(--navy);border:2px solid var(--navy)}
.def h3{margin:12px 0 4px;font-size:22px;color:var(--navy);line-height:1.35}
.def p{margin:0 0 10px;color:var(--ink)}

/* 比較 */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:1000px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.cards{grid-template-columns:1fr}}
.lbl{font-size:11px;font-weight:700;color:var(--sub);letter-spacing:.08em}
.pills{display:flex;flex-wrap:wrap;gap:6px}
.pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:5px 11px;font-size:12.5px;font-weight:700;color:#fff}
.note{font-size:12.5px;color:var(--sub);line-height:1.6;margin:0}
.mark{display:flex;align-items:center;gap:10px}
.ox{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:20px;font-weight:900;color:#fff;background:var(--green);flex-shrink:0}
.ox.no{background:#aeb6bc}
.mark span{font-size:12.5px;color:var(--ink);line-height:1.5}
.fee{display:flex;align-items:baseline;gap:4px;color:var(--navy)}
.fee .num{font-size:28px}.fee small{font-size:13px;font-weight:700}
.caution{margin:18px auto 0;max-width:820px;text-align:center;font-size:12.5px;color:var(--sub)}

/* 比較表：PC＝表／SP＝同じ表を圧縮（列見出し固定） */
.cmp{background:#fff;border-radius:22px;box-shadow:0 10px 28px rgba(43,60,79,.08)}
.cmp-head{border-radius:22px 22px 0 0;overflow:hidden}
.cmp-row.morerow{border-radius:0 0 22px 22px}
.cmp-head,.cmp-row{display:grid;grid-template-columns:170px repeat(4,minmax(0,1fr))}
.cmp-head .ch{padding:16px 18px 14px;color:#fff;border-left:2px solid #fff}
.cmp-head .ch small{display:block;font-size:11px;font-weight:700;opacity:.9}
.cmp-head .ch b{display:block;font-size:16px;line-height:1.3;margin-top:2px}
.cmp-head .ch .mini-name{display:none}
.cmp-head{position:sticky;top:calc(var(--eg-hdr) + var(--eg-subnav));z-index:3}
.cmp-row{border-top:1px solid var(--line)}
.cmp-row .axis{padding:14px 14px;background:#f7f9fb;font-weight:900;color:var(--navy);font-size:13.5px;display:flex;align-items:center}
.cmp-row .cell{padding:16px 18px;border-left:1px solid var(--line);display:flex;flex-direction:column;justify-content:center}
.cell .mini{display:none}
.cell .kind{display:inline-block;color:#fff;border-radius:6px;padding:2px 9px;font-size:12.5px;font-weight:700}
.cell .val{margin:0;font-size:13.5px;font-weight:700;color:var(--navy);line-height:1.6}
.cell .pill{background:var(--m)}
.cell .deftext{font-size:13px;color:var(--ink);line-height:1.6}
.cell .note{margin-top:6px}
.cell .more{display:flex;align-items:center;justify-content:space-between;text-decoration:none;color:#fff;font-weight:700;font-size:13.5px;padding:10px 14px;border-radius:12px}
.cmp-row .axis{flex-direction:column;align-items:flex-start;justify-content:center}
.axis .dep{display:inline-block;margin-top:4px;font-size:10.5px;font-weight:700;color:var(--green-d);background:#e3f8f3;border-radius:4px;padding:0 6px}
.cmp-head .axis{background:#f7f9fb;display:flex;align-items:flex-end;padding:8px 12px;font-size:12px;font-weight:700;color:var(--sub)}
.cmp-row.how .cell{min-height:118px}
/* 詳細パネル */
@media (max-width:820px){
 .cmp{border-radius:0;margin:0 -20px;box-shadow:none;border-top:1px solid var(--line)}
 .cmp-head{border-radius:0}
 .cmp-row.morerow{border-radius:0}
 .cmp-head .axis{padding:6px 6px;font-size:10.5px;line-height:1.3}
 .axis .dep{font-size:9px;padding:0 4px}
 .cmp-head,.cmp-row{grid-template-columns:82px repeat(4,minmax(0,1fr))}
 .cmp-head .ch{padding:12px 6px 10px;border-left:1px solid #fff}
 .cmp-head .ch small,.cmp-head .ch b{display:none}
 .cmp-head .ch .mini-name{display:block;font-size:11.5px;line-height:1.25;text-align:center}
 .cmp-row .axis{padding:10px 8px;font-size:11.5px;line-height:1.3}
 .cmp-row .cell{padding:12px 4px;align-items:center;text-align:center}
 .cmp-row.morerow .cell .full{display:none}.cmp-row.morerow .cell .mini{display:flex;flex-direction:column;align-items:center;gap:3px}
 .cell .kind{font-size:12px;padding:2px 6px;border-radius:5px}
 .mark .ox,.cell .ox{width:32px;height:32px}
 .cell .val{font-size:13px;line-height:1.4}
 .cell .more{width:32px;height:32px;padding:0;border-radius:50%;justify-content:center;font-size:15px}
 .cmp-row.how .cell{min-height:0}
 .cmp-row.morerow .axis{visibility:hidden}
}

/* タイムライン */
.tl{background:#fff;border-radius:22px;padding:26px 26px 18px;box-shadow:0 10px 28px rgba(43,60,79,.07)}
.tl .grid{display:grid;grid-template-columns:190px 1fr;gap:16px 16px;align-items:center}
.tl .name{font-size:15px;font-weight:700;color:var(--navy);line-height:1.3;white-space:nowrap}
.tl .name.head{font-size:12px;color:var(--sub);align-self:end;padding-bottom:4px;white-space:normal;line-height:1.4}
.tl .name.head br{display:none}
.tl .months{position:relative;display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-size:14px;color:var(--sub);font-weight:700;margin-top:26px}
.tl .months span.eg-on{color:var(--green-d)}
.tl .now-tag{position:absolute;top:-24px;transform:translateX(-50%);font-size:11px;font-weight:700;color:#fff;background:var(--green);border-radius:999px;padding:1px 8px;line-height:1.5;white-space:nowrap}
.tl .row{position:relative;display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.tl .row i{display:block;height:28px;border-radius:7px;background:#eef2f5}
.tl .now-line{position:absolute;top:-8px;bottom:-8px;width:3px;background:var(--green);border-radius:2px;transform:translateX(-50%)}
.legend{display:flex;gap:18px;flex-wrap:wrap;font-size:12.5px;color:var(--sub)}
.legend i{display:inline-block;width:16px;height:12px;border-radius:3px;vertical-align:middle;margin-right:5px}
.legend-top{justify-content:center;margin-top:16px}
@media (max-width:640px){
 .tl{padding:18px 12px 14px}
 .tl .grid{grid-template-columns:118px 1fr;gap:12px 8px}
 .tl .name{font-size:12px}
 .tl .name.head{font-size:10.5px}
 .tl .name.head br{display:inline}
 .tl .months{font-size:11.5px;margin-top:22px}
 .tl .row i{height:24px;border-radius:6px}
 .tl .now-tag{font-size:10px;top:-22px}
}

/* 診断 */
.quiz-band{background:var(--navy);color:#fff;position:relative;overflow:hidden}
.quiz-band .sec-head h2{color:#fff}.quiz-band .sec-head p{color:#c4d7e0}
.quiz-band .step-badge{background:var(--yellow);color:var(--navy)}
.q{max-width:640px;margin:0 auto;background:#fff;color:var(--navy);border-radius:24px;padding:26px 24px;box-shadow:0 20px 50px rgba(0,0,0,.25)}
.q .qn{display:inline-block;background:var(--green);color:#fff;border-radius:999px;padding:2px 12px;font-size:13px}
.q h3{margin:10px 0 18px;font-size:clamp(19px,3vw,24px);line-height:1.4}
.q .ans{display:flex;gap:10px;flex-wrap:wrap}
.q .ans button{flex:1;min-width:120px;border-radius:999px;padding:14px;font-size:16px;cursor:pointer;font-family:inherit;font-weight:900}
.q .yes{background:var(--yellow);border:2px solid var(--yellow);color:var(--navy)}
.q .no{background:#fff;border:2px solid var(--navy);color:var(--navy)}
.q .res-label{font-size:13px;color:var(--sub);font-weight:700}
.q .res{font-size:26px;line-height:1.3;margin:6px 0 10px}
.q p{margin:0 0 14px;color:var(--ink)}
.hidden{display:none}

/* 受験プランの例（チャット形式） */
.cases{display:flex;flex-direction:column;gap:56px}
@media (max-width:640px){.cases{gap:44px}}
.case{display:grid;grid-template-columns:84px 1fr 84px;grid-template-areas:"u user user" "bgu bgu b";gap:12px 14px;align-items:start}
.case .u{grid-area:u}.case .b{grid-area:b;align-self:start}
.ucol{grid-area:user;display:flex;flex-direction:column;gap:4px;align-items:stretch}
.avatar{width:84px;height:84px;border-radius:50%;background:#e9eef2;border:2px dashed #aeb6bc;display:grid;place-items:center;font-size:11px;color:var(--sub);font-weight:700;overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.avatar.has-img{border:0;background:#fff;box-shadow:0 4px 12px rgba(43,60,79,.12)}
.avatar.bgu-av{background:var(--green);border:0;color:#fff;font-weight:900;font-size:15px;letter-spacing:.04em}
.persona{display:block;font-size:12.5px;line-height:1.4;color:var(--sub);font-weight:700;padding-left:6px}
.persona br{display:none}
.bubble{position:relative;border-radius:20px;padding:16px 20px;filter:drop-shadow(0 8px 12px rgba(43,60,79,.10))}
.bubble.user{background:#fff;color:var(--navy);font-size:17px;line-height:1.6;border-top-left-radius:6px;width:100%}
.bubble.user::before{content:"";position:absolute;left:-9px;top:16px;border:9px solid transparent;border-right:10px solid #fff;border-left:0}
.bubble.bgu{grid-area:bgu;background:#e7f7f2;border-top-right-radius:6px;width:100%}
.bubble.bgu::before{content:"";position:absolute;right:-9px;top:16px;border:9px solid transparent;border-left:10px solid #e7f7f2;border-right:0}
.bubble .why{margin:0 0 12px;font-size:15px;line-height:1.6;color:var(--navy);font-weight:700}
@media (max-width:640px){
 .case{grid-template-columns:64px 1fr 64px;gap:8px 10px}
 .avatar{width:64px;height:64px;font-size:10px}.avatar.bgu-av{font-size:12px}
 .persona{font-size:11px}
 .bubble{padding:14px 14px}.bubble.user{font-size:15px}
}

/* お得 */
.otoku{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:900px){.otoku{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.otoku{grid-template-columns:1fr}}
.ok{background:#fff;border-radius:20px;padding:20px 20px 16px;box-shadow:0 10px 28px rgba(43,60,79,.07);position:relative}
.ok small{display:block;font-size:12.5px;color:var(--sub);font-weight:700}
.ok p{margin:6px 0 0;font-size:13px;color:var(--ink)}

/* 導線 */
.links4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media (max-width:900px){.links4{grid-template-columns:repeat(2,1fr)}}
.lk{display:flex;align-items:center;justify-content:space-between;text-decoration:none;color:#fff;border-radius:16px;padding:18px 18px;font-weight:900;font-size:16px;min-height:78px;line-height:1.3}
.lk .arr{width:30px;height:30px;border-radius:50%;background:#fff;display:grid;place-items:center;flex-shrink:0;font-size:15px}
.oc{margin-top:26px;border-radius:24px;background:var(--green);color:#fff;padding:26px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.oc b{display:block;font-size:22px;line-height:1.3}.oc small{font-size:13px;opacity:.95}
.oc-next{display:inline-flex;align-items:center;gap:8px;margin-top:10px;background:rgba(255,255,255,.18);border-radius:999px;padding:5px 14px 5px 6px;font-size:14px;font-weight:700}
.oc-next em{font-style:normal;background:#fff;color:var(--green-d);border-radius:999px;padding:2px 10px;font-size:12px}
.oc .eg-btn{background:#fff;color:var(--green-d);border-color:#fff}
.oc .eg-btn .arr{background:var(--green-d)}

/* footer */
.yoko{background:var(--soft);padding:36px 0}
.yoko-card{display:flex;gap:22px;align-items:center;background:#fff;border-radius:20px;padding:20px 22px;box-shadow:0 10px 28px rgba(43,60,79,.07);max-width:760px;margin:0 auto}
.yoko-thumb{flex-shrink:0;width:104px;height:140px;border-radius:6px;background:#e9eef2;border:2px dashed #aeb6bc;display:grid;place-items:center;text-align:center;font-size:12px;color:var(--sub);font-weight:700;box-shadow:0 6px 14px rgba(43,60,79,.12)}
.yoko-body small{display:block;font-size:12px;color:var(--sub);font-weight:700}
.yoko-body b{display:block;font-size:20px;color:var(--navy);margin:2px 0 6px}
.yoko-body p{margin:0 0 12px;font-size:13.5px}
@media (max-width:560px){.yoko-card{flex-direction:column;align-items:flex-start}.yoko-thumb{width:88px;height:118px}}
.site-foot{background:var(--navy);color:#fff;padding:26px 0;font-size:12.5px;text-align:center}
.site-foot a{color:#fff;margin:0 8px;text-decoration:none}

/* ===========================================================
   PO レビュー反映（BGU-1107 v3）
   ここから下は A〜H の指示で追加・上書きした分。既存の移植分は触っていない。
   =========================================================== */

/* A-1 追従バナー（テーマ footer_inc.php の .fixed-bannar）はこのページだけ出さない。
   .eg-root の外側にあるので body のページ class でスコープする。 */
body.page-exam-guide .fixed-bannar{display:none}

/* A-2 キービジュアルは画像なので、ページの主見出しは視覚的非表示の h1 で持つ */
.eg-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* C-3/C-4 セル内の補足行（PC）。kind チップ・val の直後に置く */
.cell .full .kind + .note{margin-top:6px}
.cell .full .val + .note{margin-top:4px}



/* E-4 「あと○日」は補助表示（締切日の赤字が主） */
.notice .left{background:transparent;color:var(--sub);border:1px solid var(--line);font-size:11px;font-weight:700;line-height:1.6}

/* F-5 SP はアバターを縮めて吹き出しの本文幅を優先する（文字サイズは下げない） */
@media (max-width:640px){
 .case{grid-template-columns:56px 1fr 56px}
 .avatar{width:56px;height:56px}
}

/* H 気になる入試が見つかったら */
.sub-h{margin:26px 0 12px;font-size:18px;line-height:1.4;color:var(--navy);display:inline-flex;align-items:center;gap:8px}
.sub-h::before{content:"";width:6px;height:20px;border-radius:3px;background:var(--green);flex-shrink:0}
#detail .sec-head + .sub-h{margin-top:0}
#detail .cta-row{justify-content:flex-start;margin-top:14px}
/* H-4 要項ブロック。サムネイルとボタンは /about/pamphlet のカード
   （nx/templates/pamphlet/_card.php）の Tailwind 指定をそのまま素の CSS に写したもの。
   比率 180.52/255・drop-shadow・ボタンの寸法/色/字間はすべて向こうの値に合わせている。 */
.yoko-thumb-img{flex-shrink:0;width:180px;aspect-ratio:180.52/255;position:relative;overflow:hidden;filter:drop-shadow(10px 10px 5px rgba(0,0,0,.2))}
.yoko-thumb-pic{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:767px){.yoko-thumb-img{width:120px}}
/* pamphlet-card__btn--active と同じ見た目。.eg-btn は使わない。
   font-weight は Tailwind の font-bold がこのプロジェクトでは --font-weight-bold:600 に
   上書きされているため 600。border-radius は rounded-full の実値（3.40282e38px）に合わせる。 */
.eg-pamph-btn{position:relative;display:flex;align-items:center;justify-content:center;width:fit-content;height:48px;border-radius:3.40282e38px;background:#02C39A;color:#fff;font-size:14px;font-weight:600;letter-spacing:.7px;padding:0 56px 0 16px;text-decoration:none;font-family:inherit;transition:background-color .3s}
.eg-pamph-btn:hover{background:#00A896}
.eg-pamph-btn__icon{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:3.40282e38px;background:#fff;color:#333333;display:flex;align-items:center;justify-content:center}
.eg-pamph-btn__svg{display:block;width:22px;height:22px}
.eg-pamph-btn__svg svg{display:block;width:100%;height:100%}
@media (min-width:768px){.eg-pamph-btn{height:60px;font-size:18px;letter-spacing:.9px}}


/* ===========================================================
   比較表の学部別表示（BGU-1107 v4）
   =========================================================== */

@media (max-width:820px){
 .cell .kind{line-height:1.3}
}
/* 検定料の補足（セレクト出願・セット出願） */
.cell .full .fee + .note{margin-top:4px}

/* E. 活用できる制度の配置。PC は 2 列×3 段、SP は 1 列（読み順はどちらも DOM 順） */
.otoku-2{grid-template-columns:repeat(2,1fr)}
@media (max-width:560px){.otoku-2{grid-template-columns:1fr}}

/* D. 入試スケジュールの注記 */
.sched-note{margin:8px 0 0;font-size:12.5px;color:var(--sub)}

/* v4 で各セルの文言が長くなったため、列が min-content で押し広げられないようにする。
   grid の 1fr は minmax(auto,1fr) なので minmax(0,1fr) にし、中身も折り返し可にする。 */
.cmp .cell,.cmp .ch{min-width:0}
.cmp .cell .full,.cmp .cell .mini{min-width:0;max-width:100%;overflow-wrap:anywhere;word-break:auto-phrase}
.cmp .pill{overflow-wrap:anywhere}
/* 金額は途中で折り返さない（overflow-wrap:anywhere が 35,000 を割ってしまうため） */
.cmp .cell .fee{flex-wrap:nowrap;white-space:nowrap}
.cmp .cell .fee .num,.cmp .cell .fee small{overflow-wrap:normal;word-break:keep-all}

/* パンくずの下余白を上と同じにする（このページ限定・共通の .topicpath は触らない）。
   テーマ（style.css）の実効値:
     PC（min-width:768px） .topicpath{margin-top:15px;margin-bottom:60px}・inner padding なし
       → ヘッダー下端〜パンくず 15px に対し下が 60px。margin-bottom を 15px に揃える。
     SP（max-width:767px） .topicpath{margin-bottom:32px}・inner{padding:12px 16px}
       → 上は inner の padding-top 12px。下は 12px + 32px = 44px なので margin-bottom を 0 にして 12px に揃える。
   ブレークポイントはテーマ側（768/767）に合わせる。 */
@media screen and (min-width:768px){body.page-exam-guide .topicpath{margin-bottom:15px}}
@media screen and (max-width:767px){body.page-exam-guide .topicpath{margin-bottom:0}}

/* 追加⑨: 初期ロードで #hash 付きのときのフォールバック。
   通常の遷移は JS が位置を計算するので、ここはブラウザ既定の着地を少し手前に寄せるだけ。
   セクションの上 padding（PC 64px / SP 48px）は変更しない。 */
.eg-root section[id],#basics,#compare,#schedule,#plans,#otoku,#detail{scroll-margin-top:28px}
@media (max-width:760px){.eg-root section[id],#basics,#compare,#schedule,#plans,#otoku,#detail{scroll-margin-top:24px}}

/* ===========================================================
   客先修正（9/25 フェーズ1）
   =========================================================== */

/* 他大学との併願の △（○ と同じ円形・同サイズ。記号は白） */
.ox.tri{background:#E9A23B}
/* 選考方法の行見出し直下の注記（PC 表・SP ミニ）と、SP 詳細パネルの項目名直下の注記 */
.axis-note{display:block;margin-top:4px;font-size:10.5px;font-weight:700;line-height:1.5;color:var(--sub)}
@media (max-width:820px){.axis-note{font-size:11px;line-height:1.4}}
/* 制度カード: 制度名（見出し）／本文／※注記（小さめ・1 注記 1 行） */
/* 制度名はフェーズ1以前の制度カードの緑タグ（旧 .ok b）を復元（PO レビュー F3） */
.ok-h{display:inline-block;margin:0 0 2px;background:var(--green);color:#fff;border-radius:6px;padding:1px 10px;font-size:13px;line-height:1.8}
.ok p{margin:8px 0 0;font-size:13.5px;line-height:1.7}
.ok .ok-note{margin-top:6px;font-size:11.5px;font-weight:500;line-height:1.5}
.ok .ok-note + .ok-note{margin-top:2px}

/* ===========================================================
   客先修正（9/25 フェーズ2）受験プランの詳細ブロック
   B 案パネルのコンパクト版。--pc＝入試の濃色／--pl＝淡色（data.php EXAMS の color／mini_color を
   テンプレートが style で渡す）。淡色の地は、濃色文字とのコントラストを保つため白で薄めて使う。
   =========================================================== */
.plan-exam{--pl-bg:color-mix(in srgb,var(--pl) 26%,#fff);background:#fff;border-radius:16px;padding:24px 28px;color:var(--ink)}
.plan-exam__head{padding-bottom:14px;border-bottom:1px dotted var(--pl)}
.plan-exam__name{margin:0;display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;font-size:26px;font-weight:900;line-height:1.35;color:var(--pc)}
.plan-exam__sub{display:inline-block;font-size:13px;font-weight:700;line-height:1.5;color:var(--pc);background:var(--pl-bg);border-radius:999px;padding:2px 10px}
.plan-exam__summary{margin:6px 0 0;font-size:16px;line-height:1.8;color:var(--ink)}
.plan-exam__status{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin:8px 0 0}
.plan-exam__badge{display:inline-block;font-size:14px;font-weight:700;line-height:1.5;color:var(--pc);background:var(--pl-bg);border-radius:6px;padding:3px 9px}
.plan-exam__status small{font-size:14px;color:var(--sub);line-height:1.6}
.plan-exam__points{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.plan-exam__points li{display:flex;align-items:flex-start;gap:10px;min-width:0}
.plan-exam__points li > div{min-width:0}
.plan-exam__idx{flex-shrink:0;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--pl-bg);color:var(--pc);font-size:12px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.plan-exam__points b{display:block;word-break:auto-phrase;font-size:17px;font-weight:800;line-height:1.5;color:var(--navy)}
.plan-exam__points b span{background:linear-gradient(transparent 55%,var(--pl-bg) 55%)}
.plan-exam__points p{margin:2px 0 0;word-break:auto-phrase;font-size:14px;line-height:1.7;color:var(--sub)}
.plan-exam__end{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:16px}
.plan-exam__note{margin:0;font-size:13px;line-height:1.6;color:var(--sub)}
.plan-exam__link{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 24px;border-radius:999px;background:var(--navy);color:#fff;font-size:15px;font-weight:700;line-height:1.4;text-decoration:none;transition:background-color .2s}
.plan-exam__link:hover{background:#3d5470}
.plan-exam__arrow{font-weight:900}
@media (max-width:820px){
 .plan-exam__points{grid-template-columns:1fr;gap:16px}
}
@media (max-width:640px){
 .plan-exam{padding:20px}
 .plan-exam__name{display:block;font-size:22px}
 .plan-exam__sub{display:table;margin-top:6px}
 .plan-exam__end{flex-direction:column;align-items:stretch;gap:12px}
 .plan-exam__link{width:100%;padding:12px 16px;gap:6px;font-size:14px}
}

/* ===========================================================
   PO レビュー反映（F3）
   =========================================================== */

/* SP だけの改行（見出し）。ブレークポイントは section の SP 余白と同じ 760px */
.eg-br-sp{display:none}
@media (max-width:760px){.eg-br-sp{display:inline}}

/* ○×△ の記号は白抜きのインライン SVG（円の約 60%） */
.ox-svg{display:block;width:60%;height:60%;overflow:visible}

/* SP の比較表: 詳細パネルを廃止したので、セルに PC と同じ値を 4 列のまま出す。
   下限は本文 13px・タグ 12px・注記 12px。タグは縦に積んで折り返す */
@media (max-width:820px){
 .cmp-row .cell .full{display:flex;flex-direction:column;align-items:center;gap:6px;width:100%}
 .cmp-row .cell .full > *{margin:0;max-width:100%}
 .cell .pills{flex-direction:column;align-items:stretch;gap:4px;width:100%}
 .cell .pill{justify-content:center;gap:3px;padding:4px 5px;border-radius:8px;font-size:12px;line-height:1.35;text-align:center}
 .cell .pill svg{display:none}
 .cell .note{font-size:12px;line-height:1.45}
 .cell .mark{flex-direction:column;gap:4px}
 .cell .mark span:not(.ox){font-size:13px;line-height:1.4}
 .cell .fee{justify-content:center;gap:1px}
 .cell .fee .num{font-size:15px}
 .cell .fee small{font-size:12px}
}

/* ===========================================================
   客先テキスト修正（9/28・F4）
   =========================================================== */
/* 行ラベル「大学入学共通テスト利用選抜」は長いので折り返しを許す */
.tl .name{white-space:normal;word-break:auto-phrase}
/* 帯の直下の注記（左寄せ・既存の注記と同じ小さめのスタイル） */
.tl-notes{margin-top:12px;text-align:left}
.tl-notes .sched-note{margin:0}
.tl-notes .sched-note + .sched-note{margin-top:2px}
/* 受験プラン: 補足が無いプランもボタンを右に揃える */
.plan-exam__link{margin-left:auto}
/* 備考セル: 検定料の注釈を移したもの（リード指示 F8）。先頭の注記なので上余白なし */
.cell[data-row="extra"] .note{margin-top:0}

/* ===========================================================
   客先修正 10/2（F9b）
   =========================================================== */
/* 日程帯の行ラベル: PC は折り返さない。最長「大学入学共通テスト利用選抜」（15px で約 195px）が収まるよう列を 190→200px に。SP は従来どおり */
@media (min-width:641px){
 .tl .grid{grid-template-columns:200px 1fr}
 .tl .name{white-space:nowrap}
}
/* 受験プラン末尾の注記: 左揃え・左端はプランのカードに揃える */
#plans .caution{text-align:left;max-width:none;margin-left:0;margin-right:0}
/* スカラシップ注記内のリンク（文京学院ファミリー入試）: 本文色を継承・下線 */
.ok .ok-note a{color:inherit;text-decoration:underline}