:root {
  /* 横浜国立大学 UIガイドライン準拠：YNUブルー R0 G91 B172 */
  --ynu-blue: #005bac;
  --navy: #0a2c55;
  --navy-2: #00417e;
  --blue: #005bac;
  --blue-light: #e6f0fa;
  --text: #1f2933;
  --muted: #5b6770;
  --line: #dde3ea;
  --bg: #ffffff;
  --bg-soft: #f6f8fb;
  --radius: 14px;
  --max: 1080px;
  --round: "M PLUS Rounded 1c", "Noto Sans JP", sans-serif;

  /* テーマ色（ページごとに切り替え） */
  --accent: var(--blue);
  --accent-dark: var(--navy);
  --accent-light: var(--blue-light);
}

/* 学部ゼミ：色は共通、見出しだけ丸ゴシックで親しみやすく */
.theme-friendly .hero-title,
.theme-friendly .content h2,
.theme-friendly .roadmap h3 { font-family: var(--round); font-weight: 800; }

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 80px; }

body {
  margin: 0;
  font-family: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.85;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img { max-width: 100%; height: auto; }

a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent-dark); }

.container {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 20px;
}

svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 68px;
}

.brand { text-decoration: none; color: var(--navy); line-height: 1.3; }
.brand:hover { color: var(--navy); }
.brand-ja { display: block; font-size: 1.3rem; font-weight: 700; letter-spacing: 0.05em; }
.brand-en { display: block; font-size: 0.72rem; color: var(--muted); letter-spacing: 0.04em; }

.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 2px;
}

.site-nav a {
  display: block;
  padding: 8px 14px;
  color: var(--text);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  border-radius: 999px;
}

.site-nav a:hover { background: var(--bg-soft); color: var(--accent); }
.site-nav li.active > a { color: var(--accent); background: var(--accent-light); }

.site-nav .nav-cta a {
  margin-left: 8px;
  background: var(--navy);
  color: #fff;
}
.site-nav .nav-cta a:hover { background: var(--accent); color: #fff; }

.nav-toggle, .nav-toggle-label { display: none; }

/* ---------- Hero ---------- */
.hero { color: #fff; padding: 88px 0 80px; position: relative; overflow: hidden; }

.hero-navy {
  background:
    radial-gradient(circle at 85% 15%, rgba(120, 180, 240, 0.3), transparent 45%),
    linear-gradient(135deg, #0a2c55 0%, #00417e 50%, #005bac 100%);
}


.hero-home { padding: 110px 0 100px; }

/* 背景の折れ線（データっぽい装飾） */
.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 55%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 300' preserveAspectRatio='none'%3E%3Cpath d='M0 250 L80 230 L160 240 L240 190 L320 205 L400 150 L480 170 L560 120 L640 140 L720 90 L800 110 L880 70 L960 95 L1040 50 L1120 65 L1200 30' fill='none' stroke='white' stroke-opacity='0.18' stroke-width='3'/%3E%3Cpath d='M0 280 L100 270 L200 275 L300 240 L400 250 L500 215 L600 225 L700 190 L800 200 L900 160 L1000 175 L1100 130 L1200 120' fill='none' stroke='white' stroke-opacity='0.1' stroke-width='2'/%3E%3C/svg%3E") no-repeat bottom / 100% 100%;
  pointer-events: none;
}

.hero .container { position: relative; z-index: 1; }

.hero-eyebrow {
  margin: 0 0 10px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.85;
}

.hero-title {
  margin: 0;
  font-size: clamp(1.9rem, 5vw, 3.3rem);
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: 0.03em;
}

.hero-title span { display: inline-block; }


.hero-lead { margin: 18px 0 0; max-width: 40em; font-size: 1.05rem; opacity: 0.95; }

.hero-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 26px;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); }
.btn svg { width: 1.1em; height: 1.1em; }
.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--navy-2); color: #fff; }
.btn-white { background: #fff; color: var(--navy); }
.btn-white:hover { color: var(--navy); }
.btn-ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.8); }
.btn-ghost:hover { color: #fff; background: rgba(255, 255, 255, 0.12); }

/* ---------- Page ---------- */
.page-header {
  padding: 56px 0 8px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 40px;
}
.page-header h1 {
  margin: 0 0 16px;
  font-size: clamp(1.7rem, 3.5vw, 2.2rem);
  color: var(--navy);
  letter-spacing: 0.04em;
}
.page-eyebrow { margin: 0; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.2em; color: var(--accent); text-transform: uppercase; }

.content { padding: 8px 0 80px; }
.hero + .container .content { padding-top: 56px; }

.content h2 {
  margin: 72px 0 24px;
  font-size: clamp(1.4rem, 3vw, 1.75rem);
  color: var(--navy);
  line-height: 1.45;
  letter-spacing: 0.03em;
}

.content h2 .en {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 4px;
}


.content h3 { margin: 32px 0 10px; font-size: 1.15rem; color: var(--navy); }

.content > :first-child { margin-top: 0; }
.content ul, .content ol { padding-left: 1.4em; }
.content li { margin: 4px 0; }

.lead { font-size: 1.08rem; }
.center { text-align: center; }
.muted { color: var(--muted); font-size: 0.92rem; }

/* 全幅の帯 */
.band {
  margin: 72px calc(50% - 50vw) 0;
  padding: 64px calc(50vw - 50%);
  background: var(--bg-soft);
}
.band > h2:first-child { margin-top: 0; }
.band-accent { background: var(--accent-light); }

/* ---------- Home: 2つの入口 ---------- */
.paths {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  margin: 8px 0;
}

.path {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 36px 32px 32px;
  border-radius: 20px;
  color: #fff;
  text-decoration: none;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}
.path:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(15, 42, 74, 0.2); color: #fff; }
.path-light { background: linear-gradient(145deg, #005bac, #3a8ad6); }
.path-navy { background: linear-gradient(145deg, #0a2c55, #00417e); }
.path-label {
  align-self: flex-start;
  padding: 2px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  font-size: 0.82rem;
  font-weight: 700;
}
.path h3 { color: inherit !important; margin: 14px 0 6px !important; font-size: 1.55rem !important; line-height: 1.4; }
.path-light h3 { font-family: var(--round); font-weight: 800; }
.path p { margin: 0 0 14px; opacity: 0.95; }
.path ul { list-style: none; padding: 0 !important; margin: 0 0 24px; }
.path li { padding-left: 1.6em; position: relative; margin: 6px 0 !important; }
.path li::before { content: "✓"; position: absolute; left: 0; font-weight: 700; color: #cfe4fa; }
.path-more { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.path-more svg { transition: transform 0.2s; }
.path:hover .path-more svg { transform: translateX(4px); }

/* ---------- Feature cards ---------- */
.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin: 24px 0;
}
.features-3 { grid-template-columns: repeat(3, 1fr); }

.feature {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 24px;
}
.band .feature { border-color: transparent; }
.feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--accent-light);
  color: var(--accent);
  font-size: 24px;
  margin-bottom: 12px;
}
.band-accent .feature-icon { background: var(--bg-soft); }
.feature h3 { margin: 0 0 6px !important; font-size: 1.1rem; }
.feature p { margin: 0; font-size: 0.95rem; color: #3a4650; }
.feature ul { margin: 10px 0 0; font-size: 0.93rem; color: #3a4650; }
.feature .example { margin-top: 12px; padding: 10px 14px; border-radius: 8px; background: var(--blue-light); font-size: 0.88rem; color: var(--navy); }
.band .feature .example { background: var(--bg-soft); }

/* ---------- Roadmap（学部） ---------- */
.roadmap { list-style: none; padding: 0 !important; margin: 32px 0; display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.roadmap li {
  position: relative;
  margin: 0 !important;
  padding: 28px 24px 24px;
  background: #fff;
  border-radius: 18px;
  border: 2px solid var(--accent-light);
}
.roadmap .step {
  display: inline-block;
  padding: 2px 14px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-family: var(--round);
  font-weight: 800;
  font-size: 0.95rem;
}
.roadmap h3 { margin: 12px 0 6px !important; font-family: var(--round); font-weight: 800; font-size: 1.25rem; }
.roadmap p { margin: 0; font-size: 0.95rem; color: #3a4650; }

/* ---------- Checklist ---------- */
.checklist { list-style: none; padding: 0 !important; }
.checklist li {
  position: relative;
  padding: 12px 16px 12px 46px;
  margin: 10px 0 !important;
  background: var(--bg-soft);
  border-radius: 10px;
}
.band .checklist li { background: #fff; }
.checklist li::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 21px;
  width: 12px;
  height: 7px;
  border-left: 2.5px solid var(--accent);
  border-bottom: 2.5px solid var(--accent);
  transform: rotate(-45deg);
}

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; margin: 20px 0; }
.compare { border-collapse: collapse; width: 100%; min-width: 560px; background: #fff; }
.compare th, .compare td { border: 1px solid var(--line); padding: 12px 16px; text-align: left; vertical-align: top; }
.compare thead th { background: var(--navy); color: #fff; font-weight: 700; }
.compare tbody th { background: var(--bg-soft); font-weight: 500; white-space: nowrap; width: 8em; }

/* ---------- Anchor tabs ---------- */
.jump { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0; }
.jump a {
  padding: 8px 18px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  text-decoration: none;
  color: var(--text);
  font-weight: 500;
  font-size: 0.93rem;
}
.jump a:hover { border-color: var(--accent); color: var(--accent); }

.course {
  margin: 28px 0;
  padding: 32px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: #fff;
}
.course > h3:first-child { margin-top: 0 !important; font-size: 1.35rem; }
.course h4 { margin: 24px 0 6px; color: var(--accent); font-size: 1rem; }
.course-badge { display: inline-block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.15em; color: var(--accent); }

/* ---------- News ---------- */
.news-list { list-style: none; padding: 0 !important; margin: 0; border-top: 1px solid var(--line); }
.news-list li { display: flex; gap: 24px; padding: 14px 4px; margin: 0 !important; border-bottom: 1px solid var(--line); }
.news-date { flex: 0 0 72px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---------- FAQ ---------- */
.faq details { border: 1px solid var(--line); border-radius: 12px; margin: 10px 0; background: #fff; }
.faq summary { cursor: pointer; padding: 16px 48px 16px 20px; font-weight: 500; list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "Q. "; color: var(--accent); font-weight: 700; }
.faq summary::after { content: "+"; position: absolute; right: 20px; top: 12px; font-size: 1.4rem; color: var(--muted); }
.faq details[open] summary::after { content: "−"; }
.faq details > div { padding: 0 20px 16px; color: #3a4650; }
.faq details > div p { margin: 0; }

/* ---------- Contact ---------- */
.contact-box {
  margin: 72px 0 0;
  padding: 32px;
  border-radius: var(--radius);
  background: var(--blue-light);
  border: 1px solid #cfe0f5;
}
.content .contact-box h2 { margin: 0 0 12px; font-size: 1.3rem; }
.contact-box p { margin: 0 0 6px; }
.contact-mail { font-size: 1.15rem; font-weight: 700; color: var(--ynu-blue); margin-top: 12px !important; word-break: break-all; }

/* ---------- Research / papers ---------- */
.feature-link { display: block; text-decoration: none; color: inherit; transition: border-color 0.15s, box-shadow 0.15s; }
.feature-link:hover { color: inherit; border-color: var(--accent); box-shadow: 0 8px 24px rgba(10, 44, 85, 0.08); }
.feature-link h3::after { content: " →"; color: var(--accent); }

.theme-block { padding-top: 8px; }
.theme-block + .theme-block { border-top: 1px solid var(--line); margin-top: 48px; }
.theme-block h2 { margin-top: 48px !important; }

.papers-toggle { margin: 16px 0 0; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.papers-toggle summary { cursor: pointer; padding: 12px 18px; font-weight: 500; color: var(--accent); }
.papers-toggle[open] summary { border-bottom: 1px solid var(--line); }
.papers-toggle .paper-list { padding: 4px 18px 12px !important; margin: 0; }

.paper-list { list-style: none; padding: 0 !important; margin: 12px 0 24px; }
.paper-list li { margin: 0 !important; padding: 12px 0; border-bottom: 1px dashed var(--line); font-size: 0.95rem; line-height: 1.7; }
.paper-list li:last-child { border-bottom: 0; }
.paper-title { display: block; font-weight: 500; color: var(--text); }
.paper-title a { color: var(--text); }
.paper-title a:hover { color: var(--accent); }
.paper-authors, .paper-year { color: var(--muted); }
.paper-venue { display: block; color: var(--muted); font-style: italic; }

/* ---------- Steps（出願までの流れ） ---------- */
.steps { list-style: none; padding: 0 !important; counter-reset: step; margin: 24px 0; }
.steps li { position: relative; margin: 0 !important; padding: 0 0 24px 60px; counter-increment: step; }
.steps li::before {
  content: counter(step);
  position: absolute; left: 0; top: 0;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--accent); color: #fff; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.steps li:not(:last-child)::after { content: ""; position: absolute; left: 19px; top: 44px; bottom: 4px; width: 2px; background: var(--blue-light); }
.steps h3 { margin: 6px 0 4px !important; font-size: 1.08rem; }
.steps p { margin: 0; color: #3a4650; }

.compare.info { min-width: 0; }
.compare.info th { width: 9em; }

/* ---------- Publications / Teacher ---------- */
.pub-list { padding-left: 1.4em; }
.pub-list li { margin: 10px 0 !important; }
.pub-title { font-weight: 500; }



/* ---------- Teacher ---------- */
.profile {
  display: grid;
  gap: 4px;
  padding: 28px 32px;
  background: var(--bg-soft);
  border-radius: var(--radius);
  border: 1px solid var(--line);
}
.profile p { margin: 0; }
.profile .name { font-size: 1.5rem; font-weight: 700; color: var(--navy); }
.profile .name small { font-size: 0.9rem; color: var(--muted); font-weight: 400; margin-left: 8px; }

.award-list { list-style: none; padding: 0 !important; }
.award-list li { display: flex; gap: 20px; padding: 8px 0; margin: 0 !important; border-bottom: 1px dashed var(--line); }
.award-list .year { flex: 0 0 8em; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--navy);
  color: rgba(255, 255, 255, 0.8);
  padding: 48px 0 16px;
  font-size: 0.9rem;
}
.footer-inner { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.footer-inner p { margin: 2px 0; }
.footer-title { font-weight: 700; color: #fff; font-size: 1.05rem; }
.footer-nav { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 4px 18px; }
.footer-nav a { color: #fff; text-decoration: none; }
.footer-nav a:hover { text-decoration: underline; color: #fff; }
.footer-logo { width: 220px; background: #fff; padding: 10px 14px; border-radius: 8px; }
.copyright { margin-top: 28px; font-size: 0.8rem; opacity: 0.7; }

/* ---------- Mobile ---------- */
@media (max-width: 860px) {
  .nav-toggle-label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    cursor: pointer;
  }
  .nav-toggle-label span,
  .nav-toggle-label span::before,
  .nav-toggle-label span::after {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--navy);
    position: relative;
    transition: transform 0.2s;
  }
  .nav-toggle-label span::before,
  .nav-toggle-label span::after { content: ""; position: absolute; }
  .nav-toggle-label span::before { top: -7px; }
  .nav-toggle-label span::after { top: 7px; }
  .nav-toggle:checked + .nav-toggle-label span { background: transparent; }
  .nav-toggle:checked + .nav-toggle-label span::before { transform: translateY(7px) rotate(45deg); }
  .nav-toggle:checked + .nav-toggle-label span::after { transform: translateY(-7px) rotate(-45deg); }

  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 10px 20px rgba(15, 42, 74, 0.08);
  }
  .nav-toggle:checked ~ .site-nav { display: block; }
  .site-nav ul { flex-direction: column; align-items: stretch; padding: 8px 16px 16px; }
  .site-nav a { padding: 12px 16px; }
  .site-nav .nav-cta a { margin: 8px 0 0; text-align: center; }

  .hero, .hero-home { padding: 64px 0 60px; }
  .content h2 { margin-top: 56px; }
  .band { margin-top: 56px; padding-block: 48px; }
  .path { padding: 28px 24px 24px; }
  .course { padding: 24px 20px; }
  .news-list li,   .news-date { flex-basis: auto; }
}


.table-caption { margin: 24px 0 8px !important; font-weight: 700; color: var(--navy); }
.compare.admission { min-width: 760px; font-size: 0.93rem; table-layout: fixed; }
.compare.admission th:nth-child(1) { width: 8.5em; }
.compare.admission th:nth-child(2) { width: 36%; }
.compare.admission th:nth-child(3) { width: 30%; }
.notes { font-size: 0.92rem; color: #3a4650; }

.callout { margin: 20px 0 28px; padding: 22px 26px; border-left: 4px solid var(--ynu-blue); background: var(--blue-light); border-radius: 0 var(--radius) var(--radius) 0; }
.callout p { margin: 0 0 8px; }
.callout p:last-child { margin-bottom: 0; }
.callout-title { font-weight: 700; color: var(--navy); }