/**
 * shared/site-style.css
 *
 * Canonical CSS for the shared header & footer (matching index.html).
 *
 * Loaded after each page's inline <style> block so shared rules take
 * precedence consistently. Header/footer fragment styles also live here;
 * injected HTML fragments must not contain their own <style> blocks.
 *
 * Depends on the page's CSS variables (--bg, --fg, --crimson, --navy,
 * --muted, --border, --accent, --max, --pad-x, --font-jp, --font-en,
 * --font-serif, --shadow-md). All current pages define these.
 */

/* Logo-only display face. Body and UI typography remain Noto Sans JP. */
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@500;600;700&display=swap");

/* ============================================================
   header — floating pill style
   ============================================================ */
:root {
  --header-h: 100px;       /* 16(top) + 68(pill: 10+48+10) + 16(buffer) */
  --header-pill-pad: 16px; /* margin from viewport edges */
  --bg: #FFFFFF;
  --bg-soft: #F5F5F2;
  --bg-quote: #FAFAF8;
  --bg-tint: #FFFFFF;
  --fg: #1D1D1B;
  --muted: #343430;
  --muted-soft: #5D5C57;
  --faint: #A09F98;
  --border: rgba(29,29,27,.10);
  --border-strong: rgba(29,29,27,.20);
  --card: #FFFFFF;
  --gold: #1D1D1B;
  /* Japanese-first shared type scale. Page-specific heroes may opt into
     larger sizes, but explanatory copy starts at 16px. */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-md: 18px;
  --text-lg: 20px;
  --text-xl: 24px;
  --control-height: 48px;
  --control-radius: 999px;
  --control-hover-surface: rgba(29, 29, 27, .045);
  --control-transition: 180ms ease;
  /* Academic identity tokens are required by the shared header, footer, and
     content components. They must live here rather than in a page family. */
  --crimson: #8C2332;
  --navy: #1B2A4E;
  --navy-deep: #0F1B36;
  --accent: #1D1D1B;
  --accent-deep: #1D1D1B;
  --accent-rgb: 29, 29, 27;
  --accent-soft: rgba(var(--accent-rgb), .06);
  --accent-tint: #E5E4E2;
  --mobile-group-content-height: 0px;
  --required: #1D1D1B;
  --badge-waseda-bg: #F4E4E6;
  --badge-waseda-fg: #8C2332;
  --badge-keio-bg: #DDE3EE;
  --badge-keio-fg: #1B2A4E;
  --badge-admission-bg: #F5F5F2;
  --badge-admission-fg: #4A4944;
  --badge-section-bg: #FFFFFF;
  --badge-section-border: rgba(29,29,27,.12);
  --badge-required-bg: #F8E7E9;
  --badge-required-fg: #8C2332;
  --max: 1200px;
  --pad-x: clamp(20px, 5vw, 80px);
  --radius: 10px;
  --radius-lg: 18px;
  --shadow-sm: 0 1px 2px rgba(29, 29, 27, .04), 0 4px 12px rgba(29, 29, 27, .04);
  --hero-aurora-a: 255, 109, 192;
  --hero-aurora-b: 98, 212, 255;
  --hero-aurora-c: 157, 117, 255;
  --footer-canvas: #F5F5F2;
  --footer-paper: #FFFFFF;
  --footer-ink: #1D1D1B;
  --footer-muted: #5D5C57;
  /* Shared spatial scale. Page families select from these four roles instead
     of introducing one-off section and heading gaps. */
  --space-tight: clamp(16px, 2vw, 24px);
  --space-component: clamp(24px, 3vw, 32px);
  --space-content: clamp(56px, 7vw, 88px);
  --space-section: clamp(112px, 16vh, 184px);
  --font-en: "Noto Sans JP", "Helvetica Neue", sans-serif;
  --font-jp: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  --font-heading: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  /* Shared tracking rule: body/UI text stays at 0; headings receive a
     subtle amount of air without changing Japanese line wrapping markedly. */
  --tracking-heading: .02em;
}

/* Header and footer are injected into every public page. Reset anchor
   decoration here so pages without their own base stylesheet (notably forms)
   never fall back to browser-default underlines. Content links opt in through
   their own, more specific component rules. */
a {
  color: inherit;
  text-decoration: none;
}

/* Shared chrome must not depend on a page family's reset stylesheet. Form
   pages do not load home-style.css, so browser-default body, button, list,
   and heading spacing would otherwise make the same injected header/footer
   render at different sizes. */
*,
*::before,
*::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font-jp);
  color: var(--fg);
}
.header button {
  margin: 0;
  padding: 0;
  border: 0;
  appearance: none;
  background: transparent;
  color: inherit;
  font: inherit;
}

/* Shared enrollment flow: one panel, divided into ordered steps. Course LPs
   only select a flow type; they do not define their own flow layout. */
.enrollment-flow-category + .enrollment-flow-category { margin-top: var(--space-content); }
.enrollment-flow-category-title {
  margin: 0 0 12px;
  font-family: var(--font-heading);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 600;
  line-height: 1.45;
}
.enrollment-flow-category-intro {
  margin: 0 0 20px;
  color: var(--muted);
  font-size: var(--text-base);
  line-height: 1.85;
}
.enrollment-flow-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}
.enrollment-flow-tabs [role="tab"] {
  min-height: 42px;
  padding: 8px 16px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--card);
  color: var(--fg);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.enrollment-flow-tabs [role="tab"][aria-selected="true"] {
  border-color: var(--fg);
  background: var(--fg);
  color: #fff;
}
.enrollment-flow-panel {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
}
.enrollment-flow-steps { display: grid; }
.enrollment-flow-steps--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.enrollment-flow-steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.enrollment-flow-steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.enrollment-flow-step {
  min-width: 0;
  padding: clamp(24px, 2.8vw, 32px);
}
.enrollment-flow-step + .enrollment-flow-step { border-inline-start: 1px solid var(--border); }
.enrollment-flow-number {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin: 0 0 10px;
  font-family: var(--font-en);
}
.enrollment-flow-number span { color: var(--muted-soft); font-size: 12px; font-weight: 600; }
.enrollment-flow-number strong { color: var(--accent-deep); font-size: clamp(32px, 3.4vw, 40px); font-weight: 600; line-height: 1; }
.enrollment-flow-step h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.55;
}
.enrollment-flow-step > p:last-child { margin: 0; color: var(--muted); font-size: 16px; font-weight: 500; line-height: 1.85; }
.enrollment-flow-badge {
  padding: 2px 8px;
  border: 1px solid var(--accent-tint);
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-deep);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.enrollment-flow-cta-row {
  display: flex;
  justify-content: center;
  padding: 20px clamp(24px, 3vw, 32px);
  border-top: 1px solid var(--border);
  background: var(--bg-soft);
}
.enrollment-flow-cta { min-width: min(100%, 320px); justify-content: center; }
@media (max-width: 960px) {
  .enrollment-flow-steps--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .enrollment-flow-steps--4 .enrollment-flow-step:nth-child(3) { border-inline-start: 0; border-top: 1px solid var(--border); }
  .enrollment-flow-steps--4 .enrollment-flow-step:nth-child(4) { border-top: 1px solid var(--border); }
}
@media (max-width: 720px) {
  .enrollment-flow-steps--2,
  .enrollment-flow-steps--3,
  .enrollment-flow-steps--4 { grid-template-columns: 1fr; }
  .enrollment-flow-step + .enrollment-flow-step { border-inline-start: 0; border-top: 1px solid var(--border); }
  .enrollment-flow-steps--4 .enrollment-flow-step:nth-child(3),
  .enrollment-flow-steps--4 .enrollment-flow-step:nth-child(4) { border-top: 1px solid var(--border); }
}

/* Shared entry component for the exam-data database.  Both the database
   index and the home-page preview render this from shared/include.js. */
.exam-entry-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
}
.exam-entry-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 300px;
  padding: clamp(28px, 4vw, 44px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
  color: var(--fg);
  text-decoration: none;
  transition: border-color var(--control-transition), box-shadow var(--control-transition), transform var(--control-transition);
}
.exam-entry-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}
.exam-entry-label {
  font-family: var(--font-en);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--muted);
  text-transform: uppercase;
}
.exam-entry-card h2 {
  margin-top: 18px;
  font-family: var(--font-heading);
  font-size: clamp(24px, 2.8vw, 34px);
  font-weight: 600;
  line-height: 1.4;
  color: var(--fg);
}
.exam-entry-card p {
  max-width: 34ch;
  margin-top: 14px;
  color: var(--muted);
  font-size: var(--text-base);
  line-height: 1.85;
}
.exam-entry-action {
  display: inline-flex;
  gap: 8px;
  margin-top: auto;
  padding-top: 32px;
  color: var(--fg);
  font-size: var(--text-base);
  font-weight: 600;
}
.exam-entry-action span { transition: transform var(--control-transition); }
.exam-entry-card:hover .exam-entry-action span { transform: translateX(3px); }
@media (max-width: 760px) {
  .exam-entry-grid { grid-template-columns: 1fr; }
  .exam-entry-card { min-height: 0; }
}

.footer-cta :is(h2, h3, p),
.footer :is(h5, p, ul) {
  margin: 0;
}

/* ============================================================
   Shared labels and actions
   ============================================================ */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0;
  color: var(--accent-deep);
  font-family: var(--font-en, var(--font-jp));
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.eyebrow::before {
  display: none;
}

.btn {
  display: inline-flex;
  min-height: var(--control-height);
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 26px;
  border: 1px solid transparent;
  border-radius: var(--control-radius);
  font-family: var(--font-jp);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--control-transition), background var(--control-transition),
    color var(--control-transition), border-color var(--control-transition),
    box-shadow var(--control-transition);
}
.btn:hover { transform: translateY(-2px); }
.btn-primary {
  background: var(--fg);
  color: #fff;
  box-shadow: 0 4px 14px rgba(29, 29, 27, .18);
}
.btn-primary:hover {
  background: #343432;
  box-shadow: 0 8px 24px rgba(29, 29, 27, .20);
}
.btn-ghost {
  border-color: var(--border-strong);
  background: #fff;
  color: var(--fg);
}
.btn-ghost:hover { border-color: var(--fg); }
.btn .arrow {
  display: inline-block;
  font-family: var(--font-en, var(--font-jp));
  transition: transform var(--control-transition);
}
.btn:hover .arrow { transform: translateX(3px); }

/* Shared keyboard affordances. Keep these in the canonical stylesheet so
   every public template, not only the homepage, exposes the same focus UI. */
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--fg);
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  top: 10px;
  left: 50%;
  z-index: 1000;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--fg);
  color: #fff;
  font-family: var(--font-jp);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.4;
  transform: translate(-50%, calc(-100% - 18px));
  transition: transform .18s ease;
}
.skip-link:focus-visible {
  outline-color: #fff;
  outline-offset: -4px;
  transform: translate(-50%, 0);
}

#main-content:focus { outline: none; }
/* No body padding-top: hero sections have their own top padding,
   and the floating header overlays the hero gradient seamlessly.
   We add header-h to the top padding of hero sections so the
   visual gap between viewport top and content matches the
   pre-floating-header layout. */
.hero,
.course-hero {
  padding-top: calc(var(--header-h) + clamp(96px, 12vh, 144px));
}

.header {
  position: fixed;
  top: var(--header-pill-pad);
  left: var(--header-pill-pad);
  right: var(--header-pill-pad);
  z-index: 50;
  background: rgba(254,254,252,.76);
  backdrop-filter: saturate(145%) blur(24px);
  -webkit-backdrop-filter: saturate(145%) blur(24px);
  border: 1px solid rgba(29,29,27,.09);
  border-radius: 18px;
  box-shadow:
    0 1px 2px rgba(29,29,27,.04),
    0 14px 36px -12px rgba(29,29,27,.12);
  transition: box-shadow .3s ease, top .3s ease;
}
.header-inner {
  max-width: none;
  margin: 0;
  padding: 10px 10px 10px 24px;
  display: flex; align-items: stretch; justify-content: space-between; gap: 24px;
}
.header-inner > .brand,
.header-inner > .menu-btn { align-self: center; }
.brand {
  display: flex; align-items: center; gap: 14px;
  transition: opacity .2s;
}
.brand:hover { opacity: .78; }

.nav { display: flex; gap: 30px; align-items: center; }
.nav > a,
.nav .nav-dropdown-trigger {
  position: relative;
  font-size: var(--text-sm);
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0;
  padding: 6px 0;
  transition: color .2s;
}
.nav > a:not(.cta)::after,
.nav .nav-dropdown-trigger::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 1.5px;
  background: var(--fg);
  transform: translateX(-50%);
  transition: width .25s ease;
  border-radius: 1px;
}
.nav > a:not(.cta):hover { color: var(--fg); }
.nav > a:not(.cta):hover::after,
.nav .nav-dropdown-trigger:hover::after,
.nav-dropdown[data-open="true"] .nav-dropdown-trigger::after {
  width: 100%;
}
.nav .cta {
  font-size: var(--text-sm);
  padding: 10px 22px;
  border-radius: 9999px;
  background: var(--fg);
  color: #fff;
  border: none;
  font-weight: 600;
  letter-spacing: 0;
  display: inline-flex; align-items: center; gap: 8px;
  align-self: center;
  margin: 0;
  white-space: nowrap;
  transition: background .2s, box-shadow .2s;
}
.nav .cta::after {
  content: "";
  position: static;
  width: auto; height: auto;
  background: none;
  transform: none;
}
.nav .cta:hover {
  background: var(--fg);
}

/* Mobile menu (hamburger) */
.menu-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  position: relative;
  z-index: 60;
}
.menu-btn span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--fg);
  margin: 3px auto;
  transition: transform .3s, opacity .3s;
  border-radius: 1px;
}
body.menu-open { overflow: hidden; }
body.menu-open .menu-btn span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
body.menu-open .menu-btn span:nth-child(2) { opacity: 0; }
body.menu-open .menu-btn span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--bg);
  z-index: 55;
  padding: 88px clamp(28px, 8vw, 56px) 40px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s, visibility 0s linear .3s;
  overflow-y: auto;
}
body.menu-open .mobile-menu {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
.mobile-nav { display: flex; flex-direction: column; }
.mobile-nav a {
  font-family: var(--font-jp);
  font-size: 17px;
  font-weight: 600;
  padding: 22px 0;
  border-bottom: 1px solid var(--border);
  color: var(--fg);
  display: flex; justify-content: space-between; align-items: center;
  letter-spacing: 0;
}
.mobile-nav a::after {
  content: "→";
  font-family: var(--font-en);
  /* Navigation is site chrome, not page content.  Do not inherit a faculty
     or course theme colour here: every menu arrow stays neutral. */
  color: var(--fg);
  font-size: 14px;
  opacity: .4;
}
.mobile-nav .mobile-cta {
  margin-top: 28px;
  padding: 18px 28px;
  background: var(--fg);
  color: var(--bg);
  border-radius: 999px;
  border: none;
  justify-content: center;
  font-size: 16px;
}
.mobile-nav .mobile-cta::after { display: none; }

/* The full navigation needs more horizontal room than a tablet provides.
   Collapse it before labels begin wrapping into vertical stacks. */
@media (max-width: 1080px) {
  :root { --header-h: 88px; }
  .nav > a:not(.cta),
  .nav .nav-dropdown { display: none; }
  .nav .cta { display: none; }
  .menu-btn { display: flex; }
  .header-inner { padding: 8px 18px; }
  .mobile-menu { display: block; }
}

/* ============================================================
   presentation mode — Ctrl+Alt+P (shared/include.js). Hides chrome
   for screen-recorded walkthroughs; not linked from any visible UI.
   ============================================================ */
body.presentation-mode {
  --header-h: 0px;
}
body.presentation-mode .header,
body.presentation-mode .breadcrumb,
body.presentation-mode .footer-cta,
body.presentation-mode .footer,
body.presentation-mode .footer-bar {
  display: none !important;
}
body.presentation-mode .breadcrumb + .page-hero {
  padding-top: clamp(60px, 8vh, 100px);
}

@media (min-width: 1081px) {
  .mobile-menu { display: none; }
}

/* ============================================================
   Footer CTA block (3 cards: hearing / general apply / contact)
   ============================================================ */
.footer-cta {
  background: var(--footer-canvas);
  border: 0;
  padding: clamp(56px, 9vh, 80px) var(--pad-x);
}
.footer-cta-inner {
  max-width: var(--max);
  margin: 0 auto;
}
.footer-cta-head {
  text-align: center;
  margin-bottom: clamp(36px, 5vh, 52px);
}
.footer-cta-eyebrow {
  display: inline-block;
  font-family: var(--font-en);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--fg);
  margin-bottom: 12px;
}
.footer-cta-title {
  font-family: var(--font-heading);
  font-feature-settings: normal;
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 600;
  color: var(--fg);
  margin: 0;
  letter-spacing: 0;
  line-height: 1.4;
}
.footer-cta-cards {
  display: grid;
  grid-template-columns: 2fr 1fr;             /* apply (wider, contains 2 sub-items) + contact */
  gap: clamp(18px, 2.2vw, 26px);
  align-items: stretch;
}
.footer-cta-card {
  background: rgba(255,255,255,.68);
  border: 1px solid rgba(255,255,255,.78);
  border-radius: 12px;
  padding: clamp(26px, 3vw, 34px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: none;
  backdrop-filter: saturate(135%) blur(18px);
  -webkit-backdrop-filter: saturate(135%) blur(18px);
  transition: background .2s, box-shadow .2s, border-color .2s;
}
.footer-cta-card:hover {
  border-color: rgba(29, 29, 27, .10);
  box-shadow: none;
}

/* Category label at top (お申し込み / お問い合わせ) */
.footer-cta-card-cat {
  display: inline-flex;
  align-self: flex-start;
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0;
  color: #1a1a1a;
  padding: 6px 14px;
  background: rgba(29,29,27,.05);
  border-radius: 999px;
  margin-bottom: 6px;
}

/* Apply card: contains 2 sub-items in a horizontal grid (vertical divider) */
.footer-cta-card-apply { padding: 0; gap: 0; }
.footer-cta-card-apply > .footer-cta-card-cat {
  margin: clamp(20px, 2.4vw, 28px) clamp(20px, 2.4vw, 28px) 0;
}
.footer-cta-apply-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  flex: 1;
}
.footer-cta-apply-item {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(20px, 2.4vw, 28px);
  position: relative;
}
.footer-cta-apply-item + .footer-cta-apply-item::before {
  content: "";
  position: absolute;
  left: 0; top: 16px; bottom: 16px;
  width: 1px;
  background: rgba(26, 26, 26, .10);
}

.footer-cta-card-icon {
  font-size: 38px;
  line-height: 1;
  color: var(--crimson);
  display: inline-block;
}
.footer-cta-card-icon svg {
  width: 1em;
  height: 1em;
  display: block;
}
.footer-cta-card-title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--fg);
  margin: 0;
  line-height: 1.55;
  word-break: keep-all;
}
.footer-cta-card-desc {
  font-family: var(--font-jp);
  font-size: var(--text-base);
  line-height: 1.9;
  color: var(--muted);
  margin: 0;
  flex: 1;
}
.footer-cta-card-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-jp);
  font-size: var(--text-base);
  font-weight: 600;
  color: #fff;
  background: var(--navy);
  border-radius: 999px;
  padding: 13px 22px;
  text-decoration: none;
  transition: background .15s, transform .15s;
  margin-top: 4px;
}
.footer-cta-card-btn:hover {
  background: var(--navy-deep);
  color: #fff;
}
.footer-cta-card-btn:active {
  transform: scale(.98);
}
.footer-cta-card-btn .arrow {
  font-size: 14px;
  transition: transform .15s;
}
.footer-cta-card-btn:hover .arrow {
  transform: translateX(2px);
}
.footer-cta-card-btn.is-disabled {
  cursor: not-allowed;
  pointer-events: none;
  background: rgba(26,26,26,.18);
  color: rgba(255,255,255,.92);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
}

/* Apply sub-items: 総合型選抜・一般入試 は同じニュートラルカラー（黒）に統一。
   早慶（大学）区分の crimson/navy と紛らわしくなるため、入試方式の区分には使わない。
   ボタンだけ footer-cta 背景と同系の横グラデーションにして、主CTAとして目立たせる。 */
.footer-cta-apply-item .footer-cta-card-icon { color: #1a1a1a; }
.footer-cta-apply-item .footer-cta-card-btn {
  background: var(--fg);
  border: none;
  color: #fff;
}
.footer-cta-apply-item .footer-cta-card-btn:hover {
  background: #343432;
  color: #fff;
}

/* Contact card: same white card as apply — only the button color differs
   (neutral black vs. the apply button's gradient), keeping contact secondary. */
.footer-cta-card-contact .footer-cta-card-icon { color: #1a1a1a; }
.footer-cta-card-contact .footer-cta-card-btn { background: var(--fg); }
.footer-cta-card-contact .footer-cta-card-btn:hover { background: var(--fg); }

@media (max-width: 1024px) {
  .footer-cta-cards { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 640px) {
  .footer-cta-apply-grid { grid-template-columns: 1fr; }
  .footer-cta-apply-item + .footer-cta-apply-item::before {
    left: 16px; right: 16px; top: 0; bottom: auto;
    width: auto; height: 1px;
  }
  .footer-cta { padding: 48px var(--pad-x) 40px; }
}

/* Editorial end sections stay on the white site canvas. */
.page-home #blog-preview,
.page-home #faq {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* Course templates still carry a number of legacy compact copy styles.
   Keep labels compact, while making actual explanatory copy readable at 16px. */
body:not(.page-exam):not(.exam-compare-page):not(.page-blog):not([class*="theme-exam"]) .overview-block ul li,
body:not(.page-exam):not(.exam-compare-page):not(.page-blog):not([class*="theme-exam"]) .pricing-card .pricing-feat-text span {
  color: var(--muted);
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 1.9;
}

body:not(.page-exam):not(.exam-compare-page):not(.page-blog):not([class*="theme-exam"]) .course-hero .lead,
body:not(.page-exam):not(.exam-compare-page):not(.page-blog):not([class*="theme-exam"]) .profile-body .lead {
  font-size: var(--text-md);
  line-height: 1.8;
}

body:not(.page-exam):not(.exam-compare-page):not([class*="theme-exam"]) .footer-brand .desc {
  color: var(--muted);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.9;
}
body:not(.page-exam):not(.exam-compare-page):not([class*="theme-exam"]) .footer h5,
body:not(.page-exam):not(.exam-compare-page):not([class*="theme-exam"]) .footer-bottom {
  font-size: var(--text-xs);
  line-height: 1.5;
}
body:not(.page-exam):not(.exam-compare-page):not([class*="theme-exam"]) .footer a,
body:not(.page-exam):not(.exam-compare-page):not([class*="theme-exam"]) .footer-brand .brand-contact-link a {
  font-size: var(--text-sm);
}

/* ============================================================
   Shared typography foundation
   ------------------------------------------------------------
   Applies to the public site and course LPs. Exam data pages and blog pages
   opt out: they retain their independent dense-table and long-form scales.
   ============================================================ */
body:not(.page-exam):not(.exam-compare-page):not(.page-blog):not([class*="theme-exam"]) {
  font-size: var(--text-base);
  line-height: 1.8;
  letter-spacing: 0;
  font-feature-settings: normal;
}
body:not(.page-exam):not(.exam-compare-page):not(.page-blog):not([class*="theme-exam"]) :is(h1, h2, h3, h4, h5, h6, p, a, button, label, li, th, td, dt, dd, span) {
  letter-spacing: 0;
}
body:not(.page-exam):not(.exam-compare-page):not(.page-blog):not([class*="theme-exam"]) p {
  color: var(--muted);
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 1.9;
}
body:where(:not(.page-exam):not(.exam-compare-page):not(.page-blog):not([class*="theme-exam"])) h3 {
  font-size: var(--text-xl);
  line-height: 1.45;
}
body:where(:not(.page-exam):not(.exam-compare-page):not(.page-blog):not([class*="theme-exam"])) h4 {
  font-size: var(--text-lg);
  line-height: 1.45;
}
.page-home #blog-preview .section-head,
.page-home #faq .section-head {
  position: relative;
}
.page-home #blog-preview .blog-preview-row-label {
  padding: 9px 17px;
  border: 0;
  border-radius: 10px;
  background: #f1f0ec;
  color: #393834;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
  box-shadow: none;
}
/* ============================================================
   footer — warm cream with navy text + crimson top accent line
   ============================================================ */
.footer {
  background: var(--bg);
  padding: clamp(64px, 9vh, 96px) var(--pad-x) clamp(48px, 6vh, 64px);
  position: relative;
  color: var(--fg);
}
.footer-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
  gap: clamp(28px, 3vw, 48px);
}
.footer h5 {
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0;
  color: var(--muted-soft);
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 18px;
}
.footer ul { list-style: none; display: flex; flex-direction: column; gap: 10px; padding: 0; }
.footer .footer-nav-parent { display: flex; flex-direction: column; gap: 6px; }
.footer .footer-nav-sublist {
  gap: 6px;
  margin: 0;
  padding-left: 12px;
}
.footer .footer-nav-sublist a {
  color: var(--muted);
  font-size: 14px;
  min-height: 22px;
}
.footer .footer-nav-sublist a::before {
  content: "";
  width: 4px;
  height: 1px;
  margin-right: 7px;
  background: currentColor;
  opacity: .55;
}
.footer a {
  font-size: 14px;
  color: var(--fg);
  transition: color .2s;
  font-family: var(--font-jp);
}
.footer ul a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}
.footer a:hover { color: var(--fg); }
.footer-brand { display: flex; flex-direction: column; gap: 16px; }
.footer-brand .desc {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.95;
  font-family: var(--font-jp);
}
.footer-brand .brand-contact-link {
  margin-top: -8px;
}
.footer-brand .brand-contact-link a {
  font-family: var(--font-jp);
  font-size: 14px;
  font-weight: 600;
  color: var(--fg);
  border-bottom: 1px solid rgba(26, 26, 26, .25);
  padding-bottom: 2px;
  transition: color .2s, border-color .2s;
}
.footer-brand .brand-contact-link a:hover {
  color: var(--fg);
  border-color: var(--fg);
}

.footer-social { display: flex; gap: 14px; margin-top: 8px; }
.footer-social a {
  width: 56px; height: 56px;
  border-radius: 50%;
  border: none;
  background: var(--fg);
  display: grid; place-items: center;
  transition: transform .2s, background .2s;
}
.footer-social a:hover {
  transform: translateY(-1px);
  background: var(--fg);
}
.footer-social svg { width: 30px; height: 30px; }

/* Bottom copyright bar — white strip with subtle top border */
.footer-bar {
  background: #fff;
  padding: 18px var(--pad-x);
}
.footer-bar-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  font-size: 12px;
  color: var(--muted-soft);
  font-family: var(--font-en);
  letter-spacing: 0;
  flex-wrap: wrap;
  gap: 12px;
}

@media (max-width: 760px) {
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

/* ============================================================
   FAQ item — shared between the homepage's curated highlight list
   and faq.html's full categorized list.
   ============================================================ */
.faq-categories { display: flex; flex-direction: column; gap: clamp(40px, 6vw, 64px); }
.faq-category-tag {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--fg);
  padding: 6px 14px;
  background: var(--badge-section-bg);
  border: 1px solid var(--badge-section-border);
  border-radius: 999px;
  margin-bottom: 18px;
}
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}
.faq-item:hover { border-color: var(--border-strong); }
.faq-item[open] { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.faq-item summary {
  list-style: none;
  padding: 22px 28px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  cursor: pointer;
  font-family: var(--font-jp);
  font-size: var(--text-base); font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .q-text { flex: 1; }
.faq-item summary .toggle {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--bg-soft);
  display: grid; place-items: center;
  flex-shrink: 0;
  transition: transform .25s, background .25s;
}
.faq-item summary .toggle::before {
  content: "+";
  font-family: var(--font-en);
  font-size: 18px; font-weight: 400;
  color: var(--fg);
  line-height: 1;
}
.faq-item[open] summary .toggle { background: var(--bg-soft); transform: rotate(135deg); }
.faq-answer {
  padding: 0 28px 24px 28px;
  color: var(--muted);
  font-size: var(--text-base);
  line-height: 1.9;
  letter-spacing: 0;
  font-family: var(--font-jp);
}
.faq-answer > p + p { margin-top: 12px; }
.faq-answer .faq-note {
  font-size: var(--text-xs);
  color: var(--muted-soft);
  padding-left: 14px;
  border-left: 2px solid var(--border);
  margin-top: 14px;
}
.faq-answer a {
  color: var(--fg);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.faq-more {
  display: flex;
  justify-content: center;
  margin-top: clamp(32px, 4vw, 44px);
}
@media (max-width: 540px) {
  .faq-item summary { padding: 18px 20px; font-size: var(--text-base); gap: 14px; }
  .faq-answer { padding: 0 20px 20px 20px; }
}

/* ============================================================
   visual system refresh — quiet, neutral, and deliberately sparse
   ============================================================ */
.header.is-scrolled,
.header:hover {
  border-color: rgba(29,29,27,.13);
}

.nav .cta,
.footer-cta-card-btn {
  box-shadow: none;
}

/* Homepage only: restrained Waseda and Keio light supports the brand
   without turning school colours into the global UI palette. */
.page-home .hero {
  background:
    radial-gradient(48% 58% at 2% 4%, rgba(255,101,191,.18), transparent 70%),
    radial-gradient(48% 60% at 98% 6%, rgba(105,215,255,.16), transparent 70%),
    var(--bg);
}
.page-home .hero-watermark {
  display: none;
}
.page-home .hero-title-box {
  padding: 0;
  background: transparent;
  box-shadow: none;
}
.page-home .hero-title-gold { color: var(--fg); }
.page-home .hero-badge {
  color: var(--fg);
  background: rgba(255,255,255,.64);
  border: 1px solid rgba(29,29,27,.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Static classification badges use quiet university/admission colours. Hero
   chips stay separate because they sit on an illustrated background. */
body:not(.page-exam):not(.exam-compare-page):not(.page-blog):not([class*="theme-exam"]) .course-entry-badge,
body.page-blog .article-category,
body:not(.page-exam):not(.exam-compare-page):not(.page-blog):not([class*="theme-exam"]) .course-hero .course-tag {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 10px;
  border: 0;
  border-radius: var(--control-radius);
  background: var(--badge-admission-bg);
  color: var(--badge-admission-fg);
  font-family: var(--font-jp);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.2;
  box-shadow: none;
}
body.page-blog .article-category.is-waseda,
body:not(.page-exam):not(.exam-compare-page):not(.page-blog):not([class*="theme-exam"]) .course-hero .course-tag.is-waseda,
body.theme-chiiki:not(.page-exam):not(.exam-compare-page):not(.page-blog):not([class*="theme-exam"]) .course-hero .course-tag:not(.course-tag-outline),
body[class*="theme-waseda"]:not(.page-exam):not(.exam-compare-page):not(.page-blog):not([class*="theme-exam"]) .course-hero .course-tag:not(.course-tag-outline) {
  background: var(--badge-waseda-bg);
  color: var(--badge-waseda-fg);
}
body.page-blog .article-category.is-keio,
body:not(.page-exam):not(.exam-compare-page):not(.page-blog):not([class*="theme-exam"]) .course-hero .course-tag.is-keio,
body[class*="theme-keio"]:not(.page-exam):not(.exam-compare-page):not(.page-blog):not([class*="theme-exam"]) .course-hero .course-tag:not(.course-tag-outline) {
  background: var(--badge-keio-bg);
  color: var(--badge-keio-fg);
}
body.page-blog .article-category:is(.is-sougou, .is-ippan) {
  background: var(--badge-admission-bg);
  color: var(--badge-admission-fg);
}

/* Section labels are white cards with the same fine outline, regardless of
   whether they introduce an FAQ group or a closing contact card. */
body:not(.page-exam):not(.exam-compare-page):not([class*="theme-exam"]) .footer-cta-card-cat {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 6px 14px;
  border: 1px solid var(--badge-section-border);
  border-radius: var(--control-radius);
  background: var(--badge-section-bg);
  color: var(--fg);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 600;
}

/* Form state labels remain intentionally compact, rectangular and borderless,
   avoiding both a heavy black fill and the visual weight of an outline. */
body:not(.page-exam):not(.exam-compare-page):not(.page-blog):not([class*="theme-exam"]) :is(.required-badge, .optional-badge) {
  padding: 3px 8px;
  border: 0;
  border-radius: 5px;
  font-size: var(--text-xs);
  line-height: 1.25;
}
body:not(.page-exam):not(.exam-compare-page):not(.page-blog):not([class*="theme-exam"]) .required-badge {
  background: var(--badge-required-bg);
  color: var(--badge-required-fg);
}
body:not(.page-exam):not(.exam-compare-page):not(.page-blog):not([class*="theme-exam"]) .optional-badge {
  background: var(--badge-admission-bg);
  color: var(--badge-admission-fg);
}
.page-home .why-item {
  background: rgba(255,255,255,.82);
  box-shadow: none;
}
.page-home .why-item:hover {
  box-shadow: 0 18px 42px -28px rgba(29,29,27,.20);
}
.page-home .why-item .num {
  background: var(--fg);
}
.page-home .why-item h3 .title-marker,
.page-home .sub-label-text {
  border-color: var(--fg);
}

/* Course hero background: same soft aurora blend as before, recolored so
   each page's palette matches that course's own thumbnail on its list page
   (courses-ippan.html / courses-sougougata.html) instead of an arbitrary one. */
.course-hero {
  background:
    radial-gradient(62% 84% at 2% 4%, rgba(var(--hero-aurora-a, 255,109,192),.34), transparent 72%),
    radial-gradient(62% 84% at 98% 8%, rgba(var(--hero-aurora-b, 98,212,255),.34), transparent 74%),
    radial-gradient(58% 76% at 58% 108%, rgba(var(--hero-aurora-c, 157,117,255),.22), transparent 74%),
    var(--bg-tint);
}

/* One shared aurora recipe; RGB triplets below are each course's own
   --thumb-a/--thumb-b/--thumb-c from its list-page thumbnail. */
body.theme-chiiki { --hero-aurora-a: 255,90,150; --hero-aurora-b: 255,190,80; --hero-aurora-c: 70,210,190; }
body.theme-waseda-shaken { --hero-aurora-a: 255,90,150; --hero-aurora-b: 255,150,50; --hero-aurora-c: 70,170,255; }
body.theme-waseda-sils { --hero-aurora-a: 255,90,150; --hero-aurora-b: 20,190,185; --hero-aurora-c: 255,120,150; }
body.theme-waseda-sports { --hero-aurora-a: 255,90,150; --hero-aurora-b: 30,160,220; --hero-aurora-c: 255,140,90; }
body.theme-keio-fit { --hero-aurora-a: 100,175,255; --hero-aurora-b: 210,140,225; --hero-aurora-c: 255,205,110; }
body.theme-keio-letters { --hero-aurora-a: 100,175,255; --hero-aurora-b: 90,190,255; --hero-aurora-c: 255,175,120; }
body.theme-keio-sfc { --hero-aurora-a: 100,175,255; --hero-aurora-b: 235,120,185; --hero-aurora-c: 120,200,255; }
body.theme-kobetsu { --hero-aurora-a: 243,206,134; --hero-aurora-b: 255,224,168; --hero-aurora-c: 232,174,122; }
body.faculty-waseda-hou { --hero-aurora-a: 255,128,171; --hero-aurora-b: 90,155,145; --hero-aurora-c: 255,185,140; }
body.faculty-waseda-kyoiku { --hero-aurora-a: 255,128,171; --hero-aurora-b: 180,110,160; --hero-aurora-c: 215,215,120; }
body.faculty-waseda-seikei { --hero-aurora-a: 255,128,171; --hero-aurora-b: 255,130,95; --hero-aurora-c: 110,215,205; }
body.faculty-waseda-shaken { --hero-aurora-a: 255,128,171; --hero-aurora-b: 255,175,90; --hero-aurora-c: 110,195,255; }
body.faculty-waseda-shogaku { --hero-aurora-a: 255,128,171; --hero-aurora-b: 40,70,140; --hero-aurora-c: 255,175,120; }
body.faculty-waseda-sports { --hero-aurora-a: 255,128,171; --hero-aurora-b: 70,175,230; --hero-aurora-c: 255,165,120; }
body.faculty-keio-kankyojoho { --hero-aurora-a: 148,180,255; --hero-aurora-b: 160,205,235; --hero-aurora-c: 255,200,140; }
body.faculty-keio-keizai { --hero-aurora-a: 148,180,255; --hero-aurora-b: 90,195,165; --hero-aurora-c: 255,175,150; }
body.faculty-keio-law { --hero-aurora-a: 148,180,255; --hero-aurora-b: 195,155,200; --hero-aurora-c: 255,210,150; }
body.faculty-keio-letters { --hero-aurora-a: 148,180,255; --hero-aurora-b: 115,190,235; --hero-aurora-c: 255,190,150; }
body.faculty-keio-sfc { --hero-aurora-a: 148,180,255; --hero-aurora-b: 220,140,185; --hero-aurora-c: 160,205,235; }
body.faculty-keio-sogoseisaku { --hero-aurora-a: 148,180,255; --hero-aurora-b: 220,140,185; --hero-aurora-c: 130,220,200; }
body.course-waseda-bunka-eigo { --hero-aurora-a: 255,128,171; --hero-aurora-b: 60,140,210; --hero-aurora-c: 60,175,165; }
body.course-waseda-eigo-nyumon { --hero-aurora-a: 255,128,171; --hero-aurora-b: 255,208,120; --hero-aurora-c: 120,220,205; }
body.course-kokugo-nyumon { --hero-aurora-a: 255,128,171; --hero-aurora-b: 120,190,255; --hero-aurora-c: 255,165,140; }
body.course-keio-eigo-nyumon { --hero-aurora-a: 148,180,255; --hero-aurora-b: 255,205,130; --hero-aurora-c: 130,220,195; }
body.course-keio-shoron-nyumon { --hero-aurora-a: 148,180,255; --hero-aurora-b: 255,170,150; --hero-aurora-c: 110,205,210; }
.course-hero-text {
  background: #FFFFFF;
  border: 1px solid rgba(255,255,255,.76);
  border-radius: 12px;
  box-shadow: 0 28px 70px -38px rgba(29,29,27,.25);
  backdrop-filter: saturate(135%) blur(24px);
  -webkit-backdrop-filter: saturate(135%) blur(24px);
}
.course-hero .course-tag {
  padding: 6px 10px;
  border: 1px solid rgba(29,29,27,.11);
  border-radius: 7px;
  color: var(--fg);
  background: rgba(255,255,255,.72);
  box-shadow: none;
  font-size: 14px;
  letter-spacing: 0;
}
.course-hero .course-tag-outline {
  background: rgba(255,255,255,.58);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.course-hero .course-hero-date {
  margin-top: 8px;
}
body:not(.page-exam):not(.exam-compare-page):not(.page-blog):not([class*="theme-exam"]) .course-hero .lead {
  color: #292925;
  font-weight: 600;
}
body:not(.page-exam):not(.exam-compare-page):not(.page-blog):not([class*="theme-exam"]) .course-hero p:not(.lead) {
  color: #3F3E39;
  font-weight: 500;
}
.course-hero .btn {
  border-radius: 999px;
  padding: 13px 18px;
}

.course-hero .btn-primary,
.inline-cta .btn-primary {
  background: linear-gradient(135deg, #11110F 0%, #343430 100%);
  box-shadow: 0 12px 24px -14px rgba(29,29,27,.46);
}
.course-hero .btn-ghost,
.inline-cta .btn-ghost {
  background: rgba(255,255,255,.52);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.inline-cta {
  background:
    radial-gradient(70% 120% at 8% 0%, rgba(255,109,192,.23), transparent 72%),
    radial-gradient(68% 120% at 100% 100%, rgba(98,212,255,.21), transparent 70%),
    radial-gradient(60% 110% at 54% 48%, rgba(157,117,255,.15), transparent 76%),
    var(--bg-soft);
}

/* White canvas: page hierarchy comes from rhythm and component depth, not
   alternating gray bands. The colored moments are intentional, not ambient. */
.page-home #courses,
.page-home #blog-preview,
.page-home #faq {
  background: var(--bg);
}
/* Homepage course discovery card visuals (thumbnail, badge, title, desc,
   cta) are defined in index.html's own <style> block, not here — this
   section previously duplicated and overrode them with an older, padded
   card design that fought the current thumbnail-banner layout. */
.page-home #courses .section-head {
  margin-bottom: clamp(30px, 4vw, 48px);
}

/* The homepage's two primary course cards stay editorial on small screens:
   a shallow, edge-to-edge thumbnail followed by a plain white content area.
   These explicit mobile values also neutralize legacy card styles cached by
   older page revisions. */
@media (max-width: 640px) {
  .page-home #courses .course-entry-card {
    padding: 0;
    background: #fff;
  }
  .page-home #courses .course-entry-media {
    display: block;
    width: 100%;
    margin: 0;
    border-radius: 0;
    aspect-ratio: 3 / 1;
  }
  .page-home #courses .course-entry-body {
    background: #fff;
  }
}

@media (max-width: 760px) {
  .header {
    top: 10px;
    left: 10px;
    right: 10px;
    border-radius: 14px;
  }
  .header-inner { padding-left: 16px; }
}

/* ============================================================
   Canonical CTA system
   ------------------------------------------------------------
   University colours identify information. They do not decorate ordinary
   navigation states. The detailed operating rules live in
   docs/button-and-interaction-rules.md.
   ============================================================ */
body:not(.page-exam):not(.exam-compare-page):not(.page-blog):not([class*="theme-exam"]) .btn,
body:not(.page-exam):not(.exam-compare-page):not(.page-blog):not([class*="theme-exam"]) .submit-btn,
body:not(.page-exam):not(.exam-compare-page):not(.page-blog):not([class*="theme-exam"]) .btn-step,
body:not(.page-exam):not(.exam-compare-page):not([class*="theme-exam"]) .footer-cta-card-btn {
  min-height: var(--control-height);
  border-radius: var(--control-radius);
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: 0;
}

body:not(.page-exam):not(.exam-compare-page):not(.page-blog):not([class*="theme-exam"]) .btn-primary,
body:not(.page-exam):not(.exam-compare-page):not(.page-blog):not([class*="theme-exam"]) .submit-btn,
body:not(.page-exam):not(.exam-compare-page):not([class*="theme-exam"]) .footer-cta-card-btn {
  background: var(--fg);
  color: #fff;
  border-color: var(--fg);
  transition: transform var(--control-transition), background var(--control-transition), box-shadow var(--control-transition);
}
body:not(.page-exam):not(.exam-compare-page):not(.page-blog):not([class*="theme-exam"]) .btn-primary:hover,
body:not(.page-exam):not(.exam-compare-page):not(.page-blog):not([class*="theme-exam"]) .submit-btn:hover:not(:disabled),
body:not(.page-exam):not(.exam-compare-page):not([class*="theme-exam"]) .footer-cta-card-btn:hover {
  background: #343432;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -16px rgba(29, 29, 27, .42);
}
body:not(.page-exam):not(.exam-compare-page):not([class*="theme-exam"]) .footer-cta-apply-item .footer-cta-card-btn:hover,
body:not(.page-exam):not(.exam-compare-page):not([class*="theme-exam"]) .footer-cta-card-contact .footer-cta-card-btn:hover {
  background: #343432;
}

/* Contact CTA uses the Secondary CTA (white) treatment so it reads as the
   supporting action next to the two Primary (black) apply buttons. */
body:not(.page-exam):not(.exam-compare-page):not([class*="theme-exam"]) .footer-cta-card-btn.is-ghost {
  background: #fff;
  color: var(--fg);
  border: 1px solid var(--border-strong);
}
body:not(.page-exam):not(.exam-compare-page):not([class*="theme-exam"]) .footer-cta-card-btn.is-ghost:hover {
  background: var(--control-hover-surface);
  color: var(--fg);
  border-color: var(--fg);
}

body:not(.page-exam):not(.exam-compare-page):not(.page-blog):not([class*="theme-exam"]) .btn-ghost,
body:not(.page-exam):not(.exam-compare-page):not(.page-blog):not([class*="theme-exam"]) .btn-step {
  background: rgba(255, 255, 255, .72);
  color: var(--fg);
  border-color: var(--border-strong);
  transition: transform var(--control-transition), background var(--control-transition), border-color var(--control-transition);
}
body:not(.page-exam):not(.exam-compare-page):not(.page-blog):not([class*="theme-exam"]) .btn-ghost:hover,
body:not(.page-exam):not(.exam-compare-page):not(.page-blog):not([class*="theme-exam"]) .btn-step:hover {
  background: var(--control-hover-surface);
  color: var(--fg);
  border-color: var(--fg);
  transform: translateY(-2px);
}

/* Return navigation is deliberately quieter than a CTA. The destination may
   be either a fixed page or browser history, but the visual contract is one. */
body:not(.page-exam):not(.exam-compare-page):not(.page-blog):not([class*="theme-exam"]) .back-link {
  margin-top: clamp(32px, 4vh, 48px);
  text-align: center;
}
body:not(.page-exam):not(.exam-compare-page):not(.page-blog):not([class*="theme-exam"]) .back-link :is(a, button) {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-family: var(--font-jp);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--control-transition);
}
body:not(.page-exam):not(.exam-compare-page):not(.page-blog):not([class*="theme-exam"]) .back-link :is(a, button)::before {
  content: "←";
  font-family: var(--font-en, var(--font-jp));
}
body:not(.page-exam):not(.exam-compare-page):not(.page-blog):not([class*="theme-exam"]) .back-link :is(a, button):hover {
  color: var(--fg);
}

body:not(.page-exam):not(.exam-compare-page):not(.page-blog):not([class*="theme-exam"]) .nav .cta {
  min-height: 42px;
  border-radius: var(--control-radius);
  background: var(--fg);
  color: #fff;
  transition: transform var(--control-transition), background var(--control-transition), box-shadow var(--control-transition);
}
body:not(.page-exam):not(.exam-compare-page):not(.page-blog):not([class*="theme-exam"]) .nav .cta:hover {
  background: #343432;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 10px 20px -14px rgba(29, 29, 27, .42);
}

body:not(.page-exam):not(.exam-compare-page):not(.page-blog):not([class*="theme-exam"]) .submit-btn:disabled {
  background: rgba(29, 29, 27, .18);
  border-color: transparent;
  box-shadow: none;
}

/* The closing CTA uses the neutral surface defined once in the footer block
   below. Only its border relationship belongs here. */
body:not(.page-exam):not(.exam-compare-page):not([class*="theme-exam"]) .footer-cta-card-title {
  font-size: var(--text-lg);
}
body:not(.page-exam):not(.exam-compare-page):not([class*="theme-exam"]) .footer-cta-card-apply {
  background: rgba(255, 255, 255, .60);
}
body:not(.page-exam):not(.exam-compare-page):not([class*="theme-exam"]) .footer-cta-apply-grid {
  gap: 12px;
  padding: 12px;
}
body:not(.page-exam):not(.exam-compare-page):not([class*="theme-exam"]) .footer-cta-apply-item {
  border: 1px solid transparent;
  border-radius: 10px;
}
body:not(.page-exam):not(.exam-compare-page):not([class*="theme-exam"]) .footer-cta-apply-item + .footer-cta-apply-item::before {
  display: none;
}
body:not(.page-exam):not(.exam-compare-page):not([class*="theme-exam"]) .footer-cta-apply-item.is-general {
  background: rgba(155, 222, 239, .26);
  border-color: rgba(42, 132, 158, .16);
}
body:not(.page-exam):not(.exam-compare-page):not([class*="theme-exam"]) .footer-cta-apply-item.is-ao {
  background: rgba(255, 196, 171, .28);
  border-color: rgba(171, 93, 80, .16);
}
body:not(.page-exam):not(.exam-compare-page):not([class*="theme-exam"]) .footer-cta-apply-item.is-general .footer-cta-card-icon {
  color: #287a94;
}
body:not(.page-exam):not(.exam-compare-page):not([class*="theme-exam"]) .footer-cta-apply-item.is-ao .footer-cta-card-icon {
  color: #a24f5d;
}

/* Workflow titles are scan points, while the supporting explanation remains
   at the 16px body baseline. This keeps multi-step flows compact without
   making their instructions feel like captions. */
body:not(.page-exam):not(.exam-compare-page):not(.page-blog):not([class*="theme-exam"]) .flow-step :is(h3, h4) {
  font-size: var(--text-md);
  line-height: 1.45;
}
body:not(.page-exam):not(.exam-compare-page):not(.page-blog):not([class*="theme-exam"]) .flow-step p {
  color: var(--muted);
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 1.85;
}

/* The recommendation list is a decision surface, not a caption. Course
   templates previously varied between 14.5px and 18px at weight 400, which
   made otherwise important guidance feel faint. */
body:not(.page-exam):not(.exam-compare-page):not(.page-blog):not([class*="theme-exam"]) .recommended-for-list li {
  color: var(--muted);
  font-size: var(--text-md);
  font-weight: 500;
  line-height: 1.85;
}
@media (max-width: 600px) {
  body:not(.page-exam):not(.exam-compare-page):not(.page-blog):not([class*="theme-exam"]) .recommended-for-list li {
    font-size: var(--text-base);
    line-height: 1.8;
  }
}

/* Controls communicate an action; compact labels communicate a category or
   status. Both use the same pill silhouette, while cards, tables and fields
   keep their quieter 8--12px corners. */
body:not(.page-exam):not(.exam-compare-page):not(.page-blog):not([class*="theme-exam"]) .course-tag,
body:not(.page-exam):not(.exam-compare-page):not(.page-blog):not([class*="theme-exam"]) .course-tag-outline,
body:not(.page-exam):not(.exam-compare-page):not(.page-blog):not([class*="theme-exam"]) .course-entry-badge,
body:not(.page-exam):not(.exam-compare-page):not(.page-blog):not([class*="theme-exam"]) .insight-skill-tag,
body:not(.page-exam):not(.exam-compare-page):not(.page-blog):not([class*="theme-exam"]) .schedule-badge,
body:not(.page-exam):not(.exam-compare-page):not(.page-blog):not([class*="theme-exam"]) .step-badge,
body:not(.page-exam):not(.exam-compare-page):not(.page-blog):not([class*="theme-exam"]) .related-course-tag,
body:not(.page-exam):not(.exam-compare-page):not(.page-blog):not([class*="theme-exam"]) .voice-tag,
body:not(.page-exam):not(.exam-compare-page):not(.page-blog):not([class*="theme-exam"]) .pricing-tag,
body:not(.page-exam):not(.exam-compare-page):not(.page-blog):not([class*="theme-exam"]) .pricing-method,
body:not(.page-exam):not(.exam-compare-page):not(.page-blog):not([class*="theme-exam"]) .phase-duration,
body:not(.page-exam):not(.exam-compare-page):not(.page-blog):not([class*="theme-exam"]) .step-group-duration,
body:not(.page-exam):not(.exam-compare-page):not(.page-blog):not([class*="theme-exam"]) .step-cycle-duration,
body:not(.page-exam):not(.exam-compare-page):not(.page-blog):not([class*="theme-exam"]) .required-badge,
body:not(.page-exam):not(.exam-compare-page):not(.page-blog):not([class*="theme-exam"]) .optional-badge,
body:not(.page-exam):not(.exam-compare-page):not(.page-blog):not([class*="theme-exam"]) .form-type-badge {
  border-radius: var(--control-radius);
}

/* Closing CTA mirrors the course selector: a warm neutral surface with
   compact route markers, instead of unrelated large line icons. */
body:not(.page-exam):not(.exam-compare-page):not([class*="theme-exam"]) .footer-cta-apply-item.is-general,
body:not(.page-exam):not(.exam-compare-page):not([class*="theme-exam"]) .footer-cta-apply-item.is-ao {
  background: transparent;
  border-color: transparent;
}
body:not(.page-exam):not(.exam-compare-page):not([class*="theme-exam"]) .footer-cta-contact-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
/* The footer is injected site-wide. Give it its own neutral tokens instead
   of inheriting each page's accent palette, so every page has the same
   closing surface regardless of local page-level CSS variables. */
body:not(.page-exam):not(.exam-compare-page):not([class*="theme-exam"]) :is(.footer-cta, .footer, .footer-bar) {
  --footer-canvas: #f5f5f2;
  --footer-paper: #ffffff;
  --footer-ink: #1d1d1b;
  --footer-muted: #5d5c57;
}
body:not(.page-exam):not(.exam-compare-page):not([class*="theme-exam"]) .footer-cta {
  background: var(--footer-canvas);
  color: var(--footer-ink);
}
body:not(.page-exam):not(.exam-compare-page):not([class*="theme-exam"]) .footer-cta :is(.footer-cta-title, .footer-cta-card-title, .footer-cta-card-cat) {
  color: var(--footer-ink);
}
body:not(.page-exam):not(.exam-compare-page):not([class*="theme-exam"]) .footer-cta-card {
  background: var(--footer-paper);
  border-color: rgba(29, 29, 27, .10);
}
body:not(.page-exam):not(.exam-compare-page):not([class*="theme-exam"]) .footer-cta-card-desc {
  color: var(--footer-muted);
}
body:not(.page-exam):not(.exam-compare-page):not([class*="theme-exam"]) .footer {
  background: var(--footer-paper);
  color: var(--footer-ink);
  border-top: 0;
}
body:not(.page-exam):not(.exam-compare-page):not([class*="theme-exam"]) .footer :is(h5, a) {
  color: var(--footer-ink);
}
body:not(.page-exam):not(.exam-compare-page):not([class*="theme-exam"]) :is(.footer-brand .desc, .footer-bottom, .footer-bar) {
  color: var(--footer-muted);
}

/* course-block-media / flow-track-media still use this compact-icon
   treatment elsewhere on the page (course-block section, flow track).
   course-entry-media (homepage course cards) now uses its own full-width
   banner styling defined inline in index.html, not this recipe. */
.page-home :is(.course-block-media, .flow-track-media).is-general {
  background:
    radial-gradient(88% 74% at 0% 100%, rgba(255, 120, 174, .94), transparent 70%),
    radial-gradient(78% 94% at 92% 8%, rgba(255, 188, 92, .90), transparent 72%),
    linear-gradient(135deg, #ffb177, #f177b6 52%, #9564e9);
}
.page-home :is(.course-block-media, .flow-track-media).is-ao {
  background:
    radial-gradient(86% 74% at 4% 96%, rgba(151, 123, 255, .88), transparent 70%),
    radial-gradient(76% 90% at 96% 2%, rgba(104, 215, 255, .94), transparent 72%),
    linear-gradient(135deg, #6fd8ff, #6aa7f7 48%, #a477e8);
}
.page-home :is(.course-block-media, .flow-track-media) {
  border-radius: 12px;
  border-color: rgba(255, 255, 255, .72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .46), 0 18px 34px -24px rgba(29, 29, 27, .35);
}
.page-home :is(.course-block-media, .flow-track-media)::after {
  background: linear-gradient(135deg, rgba(255, 255, 255, .14), transparent 42%);
}

/* Course category headings sit between page H2s and subcategory labels. */
@media (min-width: 641px) {
  .page-home #courses .course-block > .course-block-head > h3 {
    font-size: clamp(34px, 3vw, 40px);
  }
}

/* Shared Japanese type hierarchy.
   Page-level legacy CSS still contains some 700-weight headings; the public
   site uses 600 consistently for semantic H1-H4 headings. Exam data and blog
   pages keep their own dense, information-oriented typography. */
body:not(.page-exam):not(.exam-compare-page):not(.page-blog):not([class*="theme-exam"]) :is(h1, h2, h3, h4) {
  font-weight: 600;
}

/* Reserve 700 for the few roles where visual emphasis carries meaning.
   All other public-site labels, headings, and inline emphasis use 600. */
body:not(.page-exam):not(.exam-compare-page):not(.page-blog):not([class*="theme-exam"]) :is(
  .brand-text,
  .nav .cta,
  .mobile-nav .mobile-cta,
  .btn-primary,
  .submit-btn,
  .footer-cta-card-btn
) {
  font-weight: 700;
}
body:not(.page-exam):not(.exam-compare-page):not(.page-blog):not([class*="theme-exam"]) :is(
  .pricing-card .price-num,
  .details-price-card .price,
  .course-total .amount,
  .price-num,
  .stat-number,
  .stat-value
) {
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  html:not(:has(body.page-exam)):not(:has(body.exam-compare-page)):not(:has(body[class*="theme-exam"])) {
    scroll-behavior: auto;
  }
  body:not(.page-exam):not(.exam-compare-page):not([class*="theme-exam"]) *,
  body:not(.page-exam):not(.exam-compare-page):not([class*="theme-exam"]) *::before,
  body:not(.page-exam):not(.exam-compare-page):not([class*="theme-exam"]) *::after {
    animation-delay: 0s;
    animation-duration: .01ms;
    animation-iteration-count: 1;
    scroll-behavior: auto;
    transition-delay: 0s;
    transition-duration: .01ms;
  }
  body:not(.page-exam):not(.exam-compare-page):not(.page-blog):not([class*="theme-exam"]) .btn,
  body:not(.page-exam):not(.exam-compare-page):not(.page-blog):not([class*="theme-exam"]) .submit-btn,
  body:not(.page-exam):not(.exam-compare-page):not(.page-blog):not([class*="theme-exam"]) .btn-step,
  body:not(.page-exam):not(.exam-compare-page):not([class*="theme-exam"]) .footer-cta-card-btn {
    transition: none;
  }
  body:not(.page-exam):not(.exam-compare-page):not(.page-blog):not([class*="theme-exam"]) .btn:hover,
  body:not(.page-exam):not(.exam-compare-page):not(.page-blog):not([class*="theme-exam"]) .submit-btn:hover,
  body:not(.page-exam):not(.exam-compare-page):not(.page-blog):not([class*="theme-exam"]) .btn-step:hover,
  body:not(.page-exam):not(.exam-compare-page):not([class*="theme-exam"]) .footer-cta-card-btn:hover {
    transform: none;
  }
}

/* Homepage course hierarchy: the course family is the larger level, while
   集中講座 / 添削コース / 個別指導コース are its subcategories. Keep this
   relationship explicit on small screens, where legacy rules made it flip. */
@media (max-width: 640px) {
  .page-home #courses .course-block > .course-block-head > h3 {
    font-size: 30px;
    line-height: 1.35;
  }
  .page-home #courses .sub-label-text {
    font-size: 26px;
    line-height: 1.4;
  }
  .page-home #courses .general-sub-label {
    align-items: center;
  }
  .page-home #courses .sub-label-badge {
    position: relative;
    top: 1px;
    display: inline-flex;
    align-items: center;
  }
}

/* This comes after the global H1--H4 rule: the homepage's single hero
   statement is deliberately lighter than ordinary section headings. */
body.page-home:not(.page-exam):not(.exam-compare-page):not(.page-blog):not([class*="theme-exam"]) .hero-heading {
  font-weight: 500;
}

/* The homepage preview uses an h3 for a correct document outline, while the
   dedicated blog index uses h2 card titles. Keep their visual treatment
   identical instead of letting the homepage-wide h3 scale enlarge previews. */
body.page-home:not(.page-exam):not(.exam-compare-page):not(.page-blog):not([class*="theme-exam"]) #blog-preview .blog-card-title {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0;
}

/* The catalogue thumbnails share one compact corner ratio. */
.page-home #courses :is(.course-block-media, .flow-track-media) {
  border-radius: 5px;
}


/* SHARED FRAGMENT STYLES: header and footer */
/* These rules previously lived inside asynchronously injected HTML. */

/* Header fragment */
  .brand-wordmark {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    letter-spacing: 0;
    color: var(--fg);
    line-height: 1;
  }
  .brand-letters {
    display: inline-flex;
    align-items: center;
    gap: .09em;
    font-family: "Outfit", "Helvetica Neue", Arial, sans-serif;
    font-size: 27px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: .9;
  }
  .brand-wordmark .brand-sub {
    font-family: var(--font-jp);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--muted);
  }

  /* desktop dropdown menu */
  .nav-dropdown { position: relative; }
  .nav-dropdown-trigger {
    font: inherit;
    font-size: 14px;
    color: var(--muted);
    font-weight: 500;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color .2s;
  }
  .nav-dropdown-trigger:hover,
  .nav-dropdown[data-open="true"] .nav-dropdown-trigger {
    color: var(--fg);
  }
  .nav-dropdown-trigger .caret {
    width: 10px;
    height: 6px;
    display: inline-block;
    transition: transform .2s;
    color: currentColor;
  }
  .nav-dropdown-trigger .caret path {
    stroke: currentColor;
  }
  .nav-dropdown[data-open="true"] .nav-dropdown-trigger .caret {
    transform: rotate(180deg);
  }
  .nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 14px);
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    min-width: 200px;
    background: #fff;
    backdrop-filter: saturate(145%) blur(24px);
    -webkit-backdrop-filter: saturate(145%) blur(24px);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(15, 27, 54, .14);
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s, transform .18s, visibility .18s;
    z-index: 60;
  }
  .nav-dropdown[data-open="true"] .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }
  .nav-dropdown-menu a {
    display: block;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--fg);
    white-space: nowrap;
    transition: background .15s, color .15s;
  }
  .nav-dropdown-menu a:hover {
    background: var(--bg-soft);
    color: var(--fg);
  }

  /* desktop mega menu — university-based layout */
  .nav-dropdown-mega .nav-dropdown-menu {
    min-width: 660px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 14px;
    padding: 14px;
    align-items: start;
  }
  .nav-mega-school-col {
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--border);
  }
  .nav-mega-school-head {
    padding: 11px 16px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    color: var(--fg);
    background: var(--bg-soft);
    border-bottom: 1px solid var(--border);
  }
  .nav-mega-school-name {
    font-family: var(--font-jp);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
  }
  .nav-dropdown-mega .nav-dropdown-menu .nav-mega-school-link {
    display: inline;
    padding: 0;
    border-radius: 0;
    color: inherit;
    text-decoration: none;
  }
  .nav-dropdown-mega .nav-dropdown-menu .nav-mega-school-link:hover {
    color: var(--fg);
    background: transparent;
  }
  .nav-mega-school-count {
    font-family: var(--font-en);
    font-size: 12px;
    letter-spacing: 0;
    color: var(--muted-soft);
    text-transform: uppercase;
    font-weight: 600;
  }
  .nav-mega-section {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 4px 4px 6px;
  }
  .nav-mega-section + .nav-mega-section {
    border-top: 1px solid var(--border);
    padding-top: 6px;
  }
  .nav-mega-section-label {
    font-family: var(--font-jp);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--muted);
    text-transform: none;
    padding: 8px 12px 4px;
  }
  .nav-dropdown-mega .nav-dropdown-menu a {
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: normal;
    line-height: 1.45;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--fg);
  }
  .nav-mega-school-col a:hover { background: var(--bg-soft); color: var(--fg); }
  .nav-mega-section-label.is-waseda { color: var(--crimson); }
  .nav-mega-section-label.is-keio { color: var(--navy); }
  .nav-mega-type-label {
    font-family: var(--font-jp);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--faint);
    padding: 10px 12px 3px;
  }
  .nav-mega-section-label + .nav-mega-type-label { padding-top: 2px; }

  /* 一般選抜データは学部数が多いため、大学ごとに2列で表示する。 */
  .nav-mega-section--faculty-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2px;
    /* The Waseda column has more rows than Keio.  The parent mega-grid
       stretches both university panels to the same height, so without this
       the shorter Keio grid distributes that spare height across its rows.
       Keep its rows packed at the top so each faculty row starts in line. */
    align-content: start;
  }
  .nav-mega-section--faculty-grid .nav-mega-section-label {
    grid-column: 1 / -1;
  }

  /* 一般入試 has far more courses than 総合型選抜, so 早稲田/慶應 are laid
     out side by side (not stacked) once there's enough width — .contents
     keeps them as plain stacked siblings below that, unchanged from before. */
  .nav-mega-uni-grid { display: contents; }
  @media (min-width: 1040px) {
    .nav-dropdown-mega .nav-dropdown-menu {
      min-width: 940px;
      grid-template-columns: 2fr 1fr;
    }
    .nav-mega-uni-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
    }
    .nav-mega-uni-grid .nav-mega-section + .nav-mega-section {
      border-top: none;
      /* Both university columns begin on the same baseline.  The previous
         6px top padding made the Keio heading visibly lower than Waseda. */
      padding-top: 4px;
      border-left: 1px solid var(--border);
      margin-left: 4px;
      padding-left: 10px;
    }
  }

  /* 準備中 items inside the mega menu (not yet linkable) */
  .nav-dropdown-mega .nav-dropdown-menu .nav-mega-soon {
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    line-height: 1.45;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--muted-soft);
    cursor: not-allowed;
  }

  /* 一般選抜 column has many more items than 総合型選抜 — let it scroll
     internally instead of stretching the whole menu taller than the column */
  .nav-mega-scroll {
    max-height: 380px;
    overflow-y: auto;
  }

  /* full-width link under both columns */
  .nav-mega-all {
    grid-column: 1 / -1;
    justify-content: center;
    margin-top: 10px;
    padding: 12px;
    border-radius: 999px;
    background: var(--bg-soft);
    font-weight: 600;
    color: var(--fg);
  }
  .nav-mega-all:hover { background: var(--border); color: var(--fg); }
  .nav-mega-all .arrow { transition: transform .2s; }
  .nav-mega-all:hover .arrow { transform: translateX(3px); }

  /* mobile accordion */
  .mobile-nav .mobile-group { border-bottom: 1px solid var(--border); }
  .mobile-nav .mobile-group-trigger {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-jp);
    font-size: 17px;
    font-weight: 600;
    padding: 22px 0;
    color: var(--fg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    letter-spacing: 0;
  }
  .mobile-nav .mobile-group-trigger .caret {
    width: 12px;
    height: 7px;
    display: inline-block;
    color: var(--fg);
    opacity: .55;
    transition: transform .2s;
  }
  .mobile-nav .mobile-group-trigger .caret path {
    stroke: currentColor;
  }
  .mobile-nav .mobile-group[data-open="true"] .mobile-group-trigger .caret {
    transform: rotate(180deg);
  }
  .mobile-nav .mobile-group-items {
    overflow: hidden;
    max-height: 0;
    transition: max-height .3s ease;
  }
  .mobile-nav .mobile-group[data-open="true"] .mobile-group-items {
    max-height: var(--mobile-group-content-height, 0px);
  }
  .mobile-nav .mobile-group-items a {
    padding: 12px 0 12px 4px;
    font-size: 14px;
    border-bottom: none;
    font-weight: 500;
    color: var(--muted);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    gap: 10px;
    line-height: 1.5;
  }
  .mobile-nav .mobile-faculty-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
  }
  .mobile-nav .mobile-faculty-grid a {
    min-width: 0;
    padding-right: 0;
    white-space: normal;
  }
  .mobile-nav .mobile-group-items a:last-child {
    padding-bottom: 22px;
  }
  .mobile-nav .mobile-group-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-jp);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--fg);
    padding: 18px 0 10px 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 6px;
    line-height: 1.3;
  }
  .mobile-nav .mobile-group-label::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 14px;
    border-radius: 2px;
    background: var(--fg);
    flex-shrink: 0;
  }
  .mobile-nav .mobile-group-label:first-of-type {
    padding-top: 6px;
  }
  .mobile-nav .mobile-group-items .mobile-category-link {
    padding: 16px 4px 11px;
    margin-bottom: 8px;
    color: var(--fg);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
    justify-content: space-between;
    border-bottom: 1px solid var(--border);
  }
  /* Category links are ordinary navigation rows.  They deliberately do not
     carry the earlier menu-only vertical bar treatment. */
  .mobile-nav .mobile-group-items .mobile-category-link::before {
    content: none;
    display: none;
  }
  .mobile-nav .mobile-group-items .mobile-category-link::after {
    color: var(--fg) !important;
    margin-left: auto;
    opacity: .55;
  }
  /* A faculty page may define its own --accent.  Mobile menu arrows belong to
     the site shell, so always keep every direct menu link neutral. */
  .mobile-nav .mobile-group-items > a::after {
    color: var(--fg) !important;
  }
  .mobile-nav .mobile-group-items .nav-mega-all-mobile {
    justify-content: flex-start;
    margin-top: 12px;
    padding: 16px 4px;
    border-top: 1px solid var(--border);
    border-bottom: 0;
    border-radius: 0;
    background: transparent;
    color: var(--fg);
    font-size: 15px;
    font-weight: 600;
  }
  /* university sub-label (mirrors PC mega menu) */
  .mobile-nav .mobile-uni-label {
    display: block;
    font-family: var(--font-jp);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--muted);
    padding: 14px 0 2px 4px;
  }
  .mobile-nav .mobile-uni-label.is-waseda { color: var(--crimson); }
  .mobile-nav .mobile-uni-label.is-keio { color: var(--navy); }
  .mobile-nav .mobile-type-label {
    display: block;
    font-family: var(--font-jp);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--faint);
    padding: 10px 0 2px 4px;
  }
  .mobile-nav .mobile-group:has(+ a.mobile-cta) {
    border-bottom: none;
  }

  .cta-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
  }
  .mobile-nav .mobile-cta .cta-icon {
    width: 18px;
    height: 18px;
  }

  /* mobile menu close button */
  .mobile-menu-close {
    position: absolute;
    top: 22px;
    right: clamp(20px, 6vw, 40px);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px 9px 12px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--fg);
    font-family: var(--font-jp);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
    cursor: pointer;
    z-index: 65;
    transition: border-color .2s, color .2s, transform .15s, box-shadow .2s;
  }
  .mobile-menu-close:hover {
    border-color: var(--fg);
    color: var(--fg);
    box-shadow: 0 4px 14px rgba(0,0,0,.06);
  }
  .mobile-menu-close svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
  }
  /* Hide hamburger button while menu is open — close button takes over */
  body.menu-open .menu-btn { display: none; }

  /* 準備中 (coming soon) sub-nav items — 対策ガイド */
  .nav-dropdown-soon {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--muted-soft);
    cursor: not-allowed;
  }
  .mobile-group-soon {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 12px 0 12px 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--muted-soft);
    cursor: not-allowed;
  }
  /* nested under a .mobile-uni-label section — align with the a items (4px) */
  .mobile-nav .mobile-group-items .mobile-group-soon { padding-left: 4px; }
  .soon-badge {
    flex-shrink: 0;
    font-family: var(--font-jp);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--muted);
    background: var(--bg-soft);
    border: 1px solid var(--border);
    padding: 2px 9px;
    border-radius: 999px;
  }

/* Footer fragment */
  .footer-brand .brand-wordmark {
    gap: 5px;
  }
  .footer-brand .brand-letters { font-size: 32px; }
  .footer-brand .brand-wordmark .brand-sub {
    font-size: 12px;
  }
  .footer-soon {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--muted-soft);
    cursor: not-allowed;
  }
  .footer-soon .soon-badge {
    flex-shrink: 0;
    font-family: var(--font-jp);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--muted);
    background: var(--bg-soft);
    border: 1px solid var(--border);
    padding: 1px 8px;
    border-radius: 999px;
  }
/* Shared SVG symbol containers must not participate in page layout. */
.svg-definitions {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Canonical heading tracking. Keep dense exam-data typography independent,
   while applying the same heading rule to the public site and blog. */
body:not(.page-exam):not(.exam-compare-page):not([class*="theme-exam"]) :is(h1, h2, h3, h4, h5, h6),
body.page-blog :is(.article-title, .article-body h1, .article-body h2, .article-body h3, .article-body h4, .article-toc-en, .blog-card-title) {
  letter-spacing: var(--tracking-heading);
}