/* =========================================================
   JDS v3 — Faithful Trace + Modernised
   - Existing JDS color discipline (5 university colors restored)
   - System font stack (no Google Fonts; loads on weak networks)
   - Single CSS file, zero JS dependencies
   - Tab UI via :target + :checked (CSS only)
   - <details> accordion for FAQ / sub-sections
   - All assets are local; works offline once loaded
   ===================================================== */

:root {
  /* Existing JDS official university colors (preserved as authoritative reference) */
  --uni-graspp:    #dbe8f9;  /* University of Tokyo GraSPP */
  --uni-eng:       #c1f1c7;  /* University of Tokyo Engineering */
  --uni-hitotsu:   #ffcdff;  /* Hitotsubashi University */
  --uni-waseda:    #fde1d3;  /* Waseda University */
  --uni-kobe:      #ffff9a;  /* Kobe University */

  --uni-graspp-deep:  #4a7ba6;
  --uni-eng-deep:     #3d8a52;
  --uni-hitotsu-deep: #a04a9c;
  --uni-waseda-deep:  #c46a3a;
  --uni-kobe-deep:    #8a7a2a;

  /* 日本伝統色 — Japanese traditional palette */
  --jp-ai:        #003F8E;  /* 藍 (deep indigo) */
  --jp-konjo:     #163964;  /* 紺青 (navy blue) */
  --jp-shu:       #E1341E;  /* 朱 (vermilion) */
  --jp-yamabuki:  #F8B500;  /* 山吹 (kerria yellow) */
  --jp-kincha:    #CA7B25;  /* 金茶 (golden brown) */
  --jp-sakura:    #FEDFE1;  /* 淡桜 (light cherry) */
  --jp-toki:      #F2C9D2;  /* 鴇色 (toki pink) */
  --jp-unohana:   #FAF6EE;  /* 卯の花 (washi off-white) */
  --jp-tonoko:    #FAEBD7;  /* 砥粉色 (paper buff) */
  --jp-sumi:      #1A1A1A;  /* 墨 (sumi black) */
  --jp-asagi:     #2C7A8A;  /* 浅葱 (asagi blue-green) */

  /* Brand palette mapped to 日本伝統色 */
  --navy:        var(--jp-ai);
  --navy-deep:   var(--jp-konjo);
  --navy-soft:   #E3ECF6;
  --paper:       #ffffff;
  --cream:       var(--jp-unohana);
  --cream-deep:  var(--jp-tonoko);
  --accent:      var(--jp-yamabuki);
  --accent-deep: var(--jp-kincha);
  --crimson:     var(--jp-shu);
  --ink:         var(--jp-sumi);
  --muted:       #5a5f68;
  --hairline:    #D8CFC0;
  --hairline-2:  #EBE3D2;
  --sakura:      var(--jp-sakura);
  --sakura-deep: var(--jp-toki);

  /* Typography — system serif (academic feel) + system sans body */
  --ff-serif: "Iowan Old Style", "Apple Garamond", "Baskerville",
              "Times New Roman", "Yu Mincho", "Hiragino Mincho ProN",
              "Georgia", serif;
  --ff-sans:  -apple-system, BlinkMacSystemFont, "Helvetica Neue",
              "Hiragino Sans", "Yu Gothic", "Meiryo", system-ui, sans-serif;
  --ff-mono:  "SFMono-Regular", "Menlo", Consolas, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--ff-sans);
  background: var(--paper);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a {
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
a:hover { color: var(--accent-deep); }

ul, ol { padding-left: 1.4em; margin: 0.6em 0 1.2em; }
li { margin-bottom: 0.4em; }

/* =========================================================
   Top utility bar (language switcher)
   ===================================================== */
.top-util {
  background: var(--navy-deep);
  color: #fff;
  font-size: 14px;
}
.top-util .inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 8px 24px;
  display: flex;
  justify-content: flex-end;
  gap: 18px;
}
.top-util a {
  color: rgba(255, 255, 255, 0.88);
  text-decoration: none;
  letter-spacing: 0.06em;
}
.top-util a:hover { color: var(--accent); }

/* =========================================================
   Header
   ===================================================== */
.site-header {
  background: #fff;  /* 実 JDS ロゴが白背景デザインのため header も白に */
  color: var(--ink);
  border-bottom: 4px solid var(--accent);
}
.site-header .inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.site-header .logo {
  font-family: var(--ff-serif);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--ink);
}
.site-header .logo .jds-logo-img {
  height: 56px;
  width: auto;
  display: block;
}
.site-header .logo .acronym {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1;
}
.site-header .logo .full {
  font-family: var(--ff-sans);
  font-size: 14px;
  letter-spacing: 0.04em;
  color: rgba(0, 0, 0, 0.65);
  margin-top: 6px;
  font-weight: 400;
}
.site-header .util {
  font-family: var(--ff-serif);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy-deep);
  line-height: 1.4;
  white-space: nowrap;
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
}
@media (max-width: 768px) {
  .site-header .util {
    font-size: 11px;
    letter-spacing: 0.10em;
  }
}

/* =========================================================
   Primary nav
   ===================================================== */
.primary-nav {
  background: var(--navy);
  color: #fff;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.primary-nav .inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  gap: 0;
  font-family: var(--ff-sans);
  font-size: 14px;
}
.primary-nav .inner > a,
.primary-nav .inner > .has-sub > a {
  color: #fff;
  text-decoration: none;
  padding: 14px 18px;
  display: block;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
}
.primary-nav .inner > a:first-child {
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}
.primary-nav .inner > a:hover,
.primary-nav .inner > .has-sub:hover > a {
  background: var(--accent);
  color: var(--navy-deep);
}
.primary-nav .has-sub { position: relative; }
.primary-nav .has-sub:hover .submenu { display: block; }
.primary-nav .submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--paper);
  color: var(--navy);
  min-width: 220px;
  border: 1px solid var(--hairline);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
  z-index: 20;
}
.primary-nav .submenu a {
  display: block;
  padding: 10px 16px;
  font-size: 13.5px;
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1px solid var(--hairline-2);
}
.primary-nav .submenu a:last-child { border-bottom: none; }
.primary-nav .submenu a:hover { background: var(--cream); }

/* =========================================================
   Breadcrumb
   ===================================================== */
.breadcrumb {
  background: var(--cream);
  border-bottom: 1px solid var(--hairline);
}
.breadcrumb .inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 12px 24px;
  font-size: 14.5px;
  color: var(--muted);
}
.breadcrumb a { color: var(--navy); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb .here { color: var(--muted); }

/* =========================================================
   Hero — simplified (no Quick Facts, no kicker bloat)
   ===================================================== */
.hero {
  background: var(--navy-deep);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.hero .slides {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
  height: 380px;
}
.hero .slide {
  background-size: cover;
  background-position: center;
  background-color: #2a3548;
  filter: brightness(1.13) saturate(1.05); /* v3: hero画像を明るめに */
}
.hero .slides::after {
  content: "";
  position: absolute;
  inset: 0;
  /* v3案D: 左を濃く暗く→右は写真そのまま。濃淡をはっきりつける */
  background: linear-gradient(90deg,
    rgba(13, 27, 42, 0.92) 0%,
    rgba(13, 27, 42, 0.74) 26%,
    rgba(13, 27, 42, 0.34) 52%,
    rgba(13, 27, 42, 0) 74%);
  pointer-events: none;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  z-index: 2;
}
.hero-overlay .inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
  width: 100%;
}
.hero-overlay .kicker { display: none; } /* Removed: AI tell-like meta info */
.hero-overlay h1 {
  font-family: var(--ff-serif);
  font-size: clamp(28px, 4.5vw, 48px);
  font-weight: 700;
  line-height: 1.15;
  color: #fff;
  margin-bottom: 18px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
  border: none;
  padding: 0;
  max-width: 740px;
  background: transparent;
}
.hero-overlay h1 em {
  font-style: italic;
  color: var(--accent);
  font-weight: 700;
}
.hero-overlay .lead {
  font-family: var(--ff-sans);
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.92);
  max-width: 620px;
  margin-bottom: 24px;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}
.hero-overlay .cta-row { display: flex; gap: 12px; flex-wrap: wrap; }

.hero-cta-primary {
  background: var(--accent);
  color: var(--navy-deep);
  padding: 14px 26px;
  font-family: var(--ff-sans);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-decoration: none;
  border: 2px solid var(--accent);
}
.hero-cta-primary:hover {
  background: var(--paper);
  color: var(--navy-deep);
  border-color: var(--paper);
}

.hero-cta-secondary {
  background: transparent;
  color: #fff;
  padding: 14px 26px;
  font-family: var(--ff-sans);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-decoration: none;
  border: 2px solid rgba(255, 255, 255, 0.5);
}
.hero-cta-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #fff;
}

/* Quick Facts removed — was noise */
.quick-facts { display: none; }

/* =========================================================
   Main
   ===================================================== */
main {
  max-width: 1180px;
  margin: 0 auto;
  padding: 24px 24px 64px;
}

main h1 {
  font-family: var(--ff-serif);
  font-size: clamp(28px, 3.5vw, 36px);
  font-weight: 700;
  color: var(--navy);
  margin: 32px 0 28px;
  padding-bottom: 14px;
  border-bottom: 3px solid var(--accent);
  letter-spacing: -0.005em;
  line-height: 1.2;
}

main h2 {
  font-family: var(--ff-serif);
  font-size: clamp(20px, 2.4vw, 24px);
  font-weight: 700;
  color: var(--navy);
  background: var(--navy-soft);
  padding: 14px 20px;
  margin: 56px 0 28px;
  border-left: 6px solid var(--accent);
  display: block;
  letter-spacing: -0.005em;
  line-height: 1.25;
}
main h2 .sec-num {
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--accent-deep);
  font-weight: 400;
  margin-right: 12px;
}

main h3 {
  font-family: var(--ff-serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--navy);
  margin: 36px 0 14px;
  padding-left: 14px;
  border-left: 4px solid var(--accent);
  line-height: 1.3;
}

main h4 {
  font-family: var(--ff-sans);
  font-size: 15.5px;
  font-weight: 700;
  color: var(--navy);
  margin: 24px 0 10px;
  line-height: 1.4;
}

main p { margin-bottom: 1em; }

/* Zone color classes removed in v3 (color now carried by university palette) */
.zone-apply,
.zone-info,
.zone-support { padding: 0; border: none; margin: 0; }
.zone-apply h2,
.zone-info h2,
.zone-support h2 {
  background: var(--navy-soft);
  color: var(--navy);
}

/* Section badge */
.section-badge { display: none; } /* removed for clarity */

/* Inline emphasis */
mark, .mark {
  background: linear-gradient(transparent 60%, var(--accent) 60%);
  padding: 0 2px;
  color: var(--ink);
}
.mark-strong {
  background: var(--accent);
  padding: 2px 6px;
  font-weight: 700;
}
.urgent { color: var(--crimson); font-weight: 700; }

/* =========================================================
   Callouts — preserve hierarchy with subtle color
   ===================================================== */
.callout {
  background: #fff8d6;
  border-left: 6px solid var(--accent);
  padding: 16px 20px;
  margin: 24px 0;
  font-size: 14.5px;
  line-height: 1.6;
}
.callout strong { color: var(--navy); }

.callout-urgent {
  background: #fdebec;
  border-left: 6px solid var(--crimson);
  padding: 16px 22px;
  margin: 24px 0;
  font-size: 14.5px;
}
.callout-urgent .badge {
  display: inline-block;
  background: var(--crimson);
  color: #fff;
  padding: 3px 10px;
  font-family: var(--ff-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.callout-urgent strong { color: var(--crimson); }

.callout-info {
  background: #e8f3f5;
  border-left: 6px solid #2c7a8a;
  padding: 16px 20px;
  margin: 24px 0;
  font-size: 14.5px;
}

/* =========================================================
   Tables — restore existing JDS color discipline
   ===================================================== */
.data-table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0 28px;
  font-size: 14px;
  line-height: 1.55;
}
.data-table th,
.data-table td {
  border: 1px solid var(--hairline);
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
}
.data-table th {
  background: var(--navy);
  color: #fff;
  font-weight: 700;
  font-family: var(--ff-sans);
}
.data-table tbody tr:nth-child(even) { background: #faf9f6; }
.data-table caption {
  caption-side: top;
  text-align: left;
  font-family: var(--ff-serif);
  font-style: italic;
  color: var(--muted);
  padding-bottom: 8px;
}
.data-table .highlight-cell {
  background: #fff8d6;
  font-weight: 600;
}

/* University color cells */
.uni-graspp     { background: var(--uni-graspp);    font-weight: 700; }
.uni-eng        { background: var(--uni-eng);       font-weight: 700; }
.uni-hitotsu    { background: var(--uni-hitotsu);   font-weight: 700; }
.uni-waseda     { background: var(--uni-waseda);    font-weight: 700; }
.uni-kobe       { background: var(--uni-kobe);      font-weight: 700; }

.anchor-section { scroll-margin-top: 80px; }

/* =========================================================
   Table of Contents (TOC) — keep zoned coloring for orientation
   ===================================================== */
.toc {
  background: var(--cream);
  border: 1px solid var(--hairline);
  border-left: 5px solid var(--navy);
  padding: 20px 24px;
  margin: 28px 0 36px;
}
.toc h4 {
  font-family: var(--ff-sans);
  font-size: 13px;
  color: var(--navy);
  margin: 0 0 14px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}
.toc .groups {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
}
.toc .group h5 {
  font-family: var(--ff-sans);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--hairline);
  font-weight: 700;
}
.toc .group.gp-apply h5   { color: var(--crimson); border-bottom-color: rgba(183, 50, 57, 0.3); }
.toc .group.gp-info h5    { color: var(--navy);    border-bottom-color: var(--hairline); }
.toc .group.gp-support h5 { color: #2c7a8a;        border-bottom-color: rgba(44, 122, 138, 0.3); }
.toc ul { list-style: none; padding: 0; margin: 0; }
.toc ul li {
  margin-bottom: 8px;
  font-size: 13.5px;
  line-height: 1.45;
}
.toc ul li a {
  color: var(--navy);
  text-decoration: none;
}
.toc ul li a::before {
  content: "›";
  color: var(--accent-deep);
  margin-right: 6px;
  font-weight: 700;
}
.toc ul li a:hover { color: var(--accent-deep); }

/* =========================================================
   News list
   ===================================================== */
.news-list {
  list-style: none;
  padding: 0;
  margin-top: 24px;
}
.news-list li {
  display: grid;
  grid-template-columns: 120px 100px 1fr;
  gap: 18px;
  padding: 16px 0;
  border-bottom: 1px solid var(--hairline-2);
  font-size: 14.5px;
  align-items: baseline;
}
.news-list li:first-child { border-top: 1px solid var(--hairline-2); }
.news-list li .date {
  color: var(--muted);
  font-family: var(--ff-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.news-list li .country {
  background: var(--accent);
  color: var(--navy-deep);
  padding: 3px 10px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: center;
  justify-self: start;
}
.news-list li.country-india    .country { background: #ff9933; color: #fff; }
.news-list li.country-nepal    .country { background: var(--crimson); color: #fff; }
.news-list li.country-fiji     .country { background: #4a90a4; color: #fff; }
.news-list li.country-ghana    .country { background: #ce1126; color: #fff; }
.news-list li.country-png      .country { background: #ce1126; color: #fff; }
.news-list li.country-solomon  .country { background: #0051ba; color: #fff; }

/* =========================================================
   Country card grid (TOP page) — with real flags
   ===================================================== */
.country-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 16px 0 36px;
}
.country-card {
  border: 1px solid var(--hairline);
  background: var(--paper);
  padding: 18px;
  text-decoration: none;
  color: var(--navy);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
  position: relative;
}
.country-card:hover {
  background: var(--cream);
  border-color: var(--accent);
  transform: translateY(-2px);
}
.country-card .flag {
  width: 64px;
  height: 42px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  margin-bottom: 8px;
  object-fit: cover;
}
.country-card .name {
  font-family: var(--ff-serif);
  font-size: 17px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.2;
}
.country-card .meta {
  font-size: 14.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.country-card .meta-cta {
  font-size: 13.5px;
  color: var(--accent-deep);
  letter-spacing: 0.04em;
  margin-top: 4px;
  font-weight: 700;
}
.country-card .meta-cta::after { content: " →"; }

/* =========================================================
   Testimonial
   ===================================================== */
.testimonial {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 28px;
  border: 1px solid var(--hairline);
  padding: 24px;
  margin: 16px 0;
  border-left: 5px solid var(--accent);
  background: var(--paper);
}
.testimonial .photo {
  aspect-ratio: 3/4;
  background-size: cover;
  background-position: center;
  background-color: var(--hairline);
}
.testimonial .body h4 { margin-top: 0; }
.testimonial .meta {
  font-size: 14.5px;
  color: var(--muted);
  margin-bottom: 10px;
  line-height: 1.6;
}
.testimonial blockquote {
  font-style: italic;
  border-left: 3px solid var(--accent);
  padding-left: 14px;
  color: var(--ink);
  margin: 10px 0;
  font-family: var(--ff-serif);
  font-size: 16px;
}

/* =========================================================
   Process / Selection step list
   ===================================================== */
.process-list {
  list-style: none;
  padding: 0;
  counter-reset: stepc;
}
.process-list li {
  counter-increment: stepc;
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 18px;
  padding: 18px 20px;
  border: 1px solid var(--hairline);
  border-left: 4px solid var(--accent);
  margin-bottom: 14px;
  background: var(--paper);
}
.process-list li::before { display: none; }
.process-list li > .step-marker {
  background: var(--navy);
  color: #fff;
  font-family: var(--ff-serif);
  font-size: 14px;
  font-weight: 700;
  padding: 6px 0;
  text-align: center;
  align-self: start;
  letter-spacing: 0.04em;
}
.process-list li .step-title {
  font-family: var(--ff-serif);
  font-size: 16.5px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.3;
}
.process-list li .step-desc {
  font-size: 14px;
  color: var(--muted);
  margin-top: 6px;
  line-height: 1.6;
}

/* =========================================================
   Office cards
   ===================================================== */
.office {
  border: 1px solid var(--hairline);
  margin-bottom: 20px;
  border-left: 5px solid var(--navy);
}
.office .office-head {
  background: var(--cream);
  padding: 14px 20px;
  font-family: var(--ff-serif);
  font-weight: 700;
  color: var(--navy);
  font-size: 17px;
  border-bottom: 1px solid var(--hairline);
}
.office dl {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 10px 18px;
  padding: 18px 20px;
  margin: 0;
  font-size: 14px;
}
.office dt {
  font-weight: 700;
  color: var(--muted);
  font-size: 14.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.office dd { margin: 0; }
.office dd a { word-break: break-all; }

/* =========================================================
   Figure
   ===================================================== */
.figure {
  border: 1px solid var(--hairline);
  background: var(--cream);
  margin: 20px 0;
}
.figure .placeholder {
  aspect-ratio: 16/9;
  background-size: cover;
  background-position: center;
  background-color: var(--hairline);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: 13px;
}
.figure figcaption {
  padding: 12px 16px;
  font-size: 13px;
  color: var(--muted);
  background: var(--paper);
  border-top: 1px solid var(--hairline);
  font-style: italic;
}

/* =========================================================
   Flowchart (Selection Process)
   ===================================================== */
.flowchart {
  display: block;
  background: var(--paper) !important;
  padding: 28px 20px !important;
}
.flow-grid {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  gap: 8px !important;
  align-items: stretch;
}
.flow-box {
  background: var(--navy);
  color: #fff;
  padding: 14px 12px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  min-height: 84px;
  border-left: 4px solid var(--accent);
}
.flow-box.flow-secondary {
  background: var(--cream);
  color: var(--navy);
  border: 1px solid var(--hairline);
  border-left: 4px solid var(--navy);
}
.flow-box.flow-final {
  background: var(--accent);
  color: var(--navy-deep);
  border-left-color: var(--navy-deep);
}
.flow-box .flow-label {
  font-family: var(--ff-serif);
  font-size: 13px;
  font-style: italic;
  opacity: 0.75;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.flow-box .flow-title {
  font-family: var(--ff-sans);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
}
.flow-box .flow-when {
  font-family: var(--ff-mono);
  font-size: 13px;
  opacity: 0.85;
}

/* =========================================================
   Timeline
   ===================================================== */
.timeline { position: relative; padding: 28px 16px !important; background: var(--paper) !important; }
.timeline-bar {
  position: absolute;
  top: 60px;
  left: 32px;
  right: 32px;
  height: 2px;
  background: var(--accent);
  z-index: 0;
}
.timeline-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  position: relative;
  z-index: 1;
}
.timeline-step {
  text-align: center;
  padding: 0 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.timeline-step::before {
  content: "";
  width: 14px;
  height: 14px;
  background: var(--navy);
  border: 3px solid var(--paper);
  border-radius: 50%;
  margin-top: 50px;
  box-shadow: 0 0 0 2px var(--accent);
}
.timeline-step .ts-month {
  font-family: var(--ff-mono);
  font-size: 13.5px;
  color: var(--accent-deep);
  font-weight: 700;
  margin-top: 14px;
}
.timeline-step .ts-title {
  font-family: var(--ff-serif);
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.25;
}
.timeline-step .ts-sub {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.5;
}

/* =========================================================
   University cards (with university color)
   ===================================================== */
.uni-grid-meta {
  margin: -8px 0 16px;
  font-size: 13px;
  color: var(--muted);
  letter-spacing: .02em;
}
.uni-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 20px 0 32px;
}
.uni-card-v {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-top: 5px solid var(--accent);
  padding: 20px;
  position: relative;
}
.uni-card-v.uc-graspp   { border-top-color: var(--uni-graspp-deep); }
.uni-card-v.uc-eng      { border-top-color: var(--uni-eng-deep); }
.uni-card-v.uc-hitotsu  { border-top-color: var(--uni-hitotsu-deep); }
.uni-card-v.uc-waseda   { border-top-color: var(--uni-waseda-deep); }
.uni-card-v.uc-kobe     { border-top-color: var(--uni-kobe-deep); }

.uni-card-v .seats-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  background: var(--navy);
  color: #fff;
  font-family: var(--ff-sans);
  font-weight: 700;
  font-size: 14.5px;
  padding: 4px 10px;
  letter-spacing: 0.04em;
}
.uni-card-v .uni-name {
  font-family: var(--ff-sans);
  font-style: normal;
  color: var(--accent-deep);
  font-size: 14px;
  margin-bottom: 4px;
  padding-right: 84px; /* reserve space for absolute .seats-badge (avoid overlap) */
  letter-spacing: 0.04em;
  font-weight: 700;
  text-transform: uppercase;
}
.uni-card-v h4 {
  font-family: var(--ff-serif);
  font-size: 18px;
  color: var(--navy);
  margin: 0 0 8px;
  line-height: 1.25;
  letter-spacing: -0.005em;
  padding: 0;
  border: none;
}
.uni-card-v .programme {
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: 13.5px;
  color: var(--ink);
}
.uni-card-v .reqs {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--hairline);
  font-size: 13px;
  color: var(--muted);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.uni-card-v .reqs .r {
  padding: 3px 8px;
  background: var(--cream);
}
.uni-card-v .reqs .r.r-math {
  background: var(--accent);
  color: var(--navy-deep);
  font-weight: 700;
}

/* =========================================================
   Application Procedures table (faithfully traces existing JDS)
   ===================================================== */
.app-proc-table {
  width: 100%;
  table-layout: fixed;  /* 列幅固定 */
  border-collapse: separate;  /* 行間に gap を入れるため separate */
  border-spacing: 0 32px;  /* 縦 32px の row gap */
  margin: 24px 0 36px;
  font-size: 14px;
  line-height: 1.55;
  background: transparent;
}
.app-proc-table th,
.app-proc-table td {
  border: 1px solid var(--hairline);
  padding: 14px;
  vertical-align: top;
  overflow-wrap: break-word;
  word-break: break-word;
  background: var(--paper);
}
.app-proc-table thead th {
  background: var(--navy);
  color: #fff;
  font-family: var(--ff-sans);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
/* 列幅を thead 側にも明示 — table-layout: fixed は first row (=thead) の幅で決まる */
.app-proc-table thead th:nth-child(1) { width: 160px; }
.app-proc-table thead th:nth-child(2) { width: 180px; }
.app-proc-table thead th:nth-child(3) { width: auto; }
.app-proc-table .proc-date {
  font-family: var(--ff-sans);
  font-weight: 700;
  background: var(--cream);
  color: var(--navy);
  font-size: 13px;
  width: 160px;
  font-variant-numeric: tabular-nums;
}
.app-proc-table .proc-phase {
  font-family: var(--ff-sans);
  font-weight: 700;
  background: var(--navy-soft);
  color: var(--navy);
  font-size: 13.5px;
  width: 180px;
}
.app-proc-table .proc-detail {
  font-size: 13.5px;
}
.app-proc-table .proc-detail ul { margin: 0 0 12px; padding-left: 1.2em; }
.app-proc-table .proc-detail li { margin-bottom: 4px; }

/* arrow CSS removed during debug — re-adding below after layout fix */

.uni-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));  /* minmax(0,...) で min-content で押されない */
  gap: 4px;
  margin-top: 12px;
}
.uni-cell {
  min-width: 0;  /* grid item として content 幅で押し広げない */
  padding: 10px 8px;
  font-size: 14px;
  line-height: 1.5;
  border: 1px solid var(--hairline);
  position: relative;
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}
.uni-cell.uc-graspp   { background: var(--uni-graspp); }
.uni-cell.uc-eng      { background: var(--uni-eng); }
.uni-cell.uc-hitotsu  { background: var(--uni-hitotsu); }
.uni-cell.uc-waseda   { background: var(--uni-waseda); }
.uni-cell.uc-kobe     { background: var(--uni-kobe); }
.uni-cell .uc-name {
  display: block;
  font-weight: 700;
  font-family: var(--ff-sans);
  font-size: 13.5px;
  margin-bottom: 4px;
  color: var(--navy-deep);
}
.uni-cell strong { font-weight: 700; }
.uc-arrow {
  text-align: center;
  font-size: 18px;
  color: var(--navy);
  padding: 6px 0;
  letter-spacing: 0.8em;
}
.uc-balloon {
  background: #f6f9e8;
  border: 1px dashed #a0a884;
  border-radius: 8px;
  padding: 10px 12px;
  margin-top: 10px;
  font-size: 14.5px;
  color: var(--ink);
  font-style: italic;
}

/* =========================================================
   Accordion (FAQ etc.) — native <details>
   ===================================================== */
details.accordion {
  border: 1px solid var(--hairline);
  border-left: 4px solid var(--accent);
  background: var(--paper);
  margin-bottom: 8px;
  padding: 0;
}
details.accordion summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 18px;
  font-family: var(--ff-serif);
  font-weight: 700;
  color: var(--navy);
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--paper);
  transition: background 0.15s;
}
details.accordion summary::-webkit-details-marker { display: none; }
details.accordion summary::before {
  content: "+";
  display: inline-block;
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  background: var(--navy);
  color: #fff;
  font-family: var(--ff-sans);
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}
details.accordion[open] summary::before { content: "−"; background: var(--accent-deep); }
details.accordion summary:hover { background: var(--cream); }
details.accordion .acc-body {
  padding: 4px 18px 18px 52px;
  font-size: 14px;
  line-height: 1.65;
}

/* =========================================================
   Tabs — CSS only (input[type=radio])
   ===================================================== */
.tabs {
  margin: 24px 0 36px;
  border: 1px solid var(--hairline);
  background: var(--paper);
}
.tabs > input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.tabs > .tab-bar {
  display: flex;
  border-bottom: 1px solid var(--hairline);
  background: var(--navy);
  flex-wrap: wrap;
}
.tabs > .tab-bar label {
  flex: 1 1 auto;
  padding: 14px 20px;
  cursor: pointer;
  font-family: var(--ff-sans);
  font-weight: 700;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.78);
  text-align: center;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  letter-spacing: 0.04em;
  transition: background 0.15s, color 0.15s;
}
.tabs > .tab-bar label:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}
.tabs > .tab-panel { display: none; padding: 24px 22px; }

/* Active tab: panel + label */
.tabs > input#tab-1:checked ~ .tab-bar label[for="tab-1"],
.tabs > input#tab-2:checked ~ .tab-bar label[for="tab-2"],
.tabs > input#tab-3:checked ~ .tab-bar label[for="tab-3"],
.tabs > input#tab-4:checked ~ .tab-bar label[for="tab-4"],
.tabs > input#tab-5:checked ~ .tab-bar label[for="tab-5"] {
  background: var(--accent);
  color: var(--navy-deep);
  border-right-color: var(--accent);
}
.tabs > input#tab-1:checked ~ .tab-panel[data-tab="1"],
.tabs > input#tab-2:checked ~ .tab-panel[data-tab="2"],
.tabs > input#tab-3:checked ~ .tab-panel[data-tab="3"],
.tabs > input#tab-4:checked ~ .tab-panel[data-tab="4"],
.tabs > input#tab-5:checked ~ .tab-panel[data-tab="5"] {
  display: block;
}
.tabs > .tab-panel h3 { margin-top: 0; }

/* =========================================================
   Why Japan (Benefits)
   ===================================================== */
.why-japan {
  background: linear-gradient(180deg, var(--cream) 0%, var(--paper) 100%);
  padding: 48px 0;
  margin: 0 -24px;
}
.why-japan .wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}
.why-japan h2 {
  background: transparent;
  color: var(--navy);
  font-size: clamp(22px, 2.8vw, 28px);
  padding: 0;
  border: none;
  margin: 0 0 28px;
  display: block;
  text-align: center;
}
.why-japan h2 em {
  color: var(--accent-deep);
  font-style: italic;
}
.why-japan .grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.why-card {
  background: var(--paper);
  border-top: 5px solid var(--accent);
  padding: 24px 20px;
  text-align: center;
  box-shadow: 0 2px 12px rgba(0, 43, 92, 0.06);
}
.why-card .ico {
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  background: var(--cream);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-serif);
  font-size: 22px;
  color: var(--navy);
  font-weight: 700;
  font-style: italic;
}
.why-card h3 {
  font-family: var(--ff-serif);
  font-size: 17px;
  color: var(--navy);
  margin: 0 0 8px;
  padding: 0;
  border: none;
}
.why-card p {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
}

/* =========================================================
   Sticky CTA
   ===================================================== */
.sticky-cta {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--accent);
  color: var(--navy-deep);
  padding: 14px 24px;
  font-family: var(--ff-sans);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-decoration: none;
  border: 3px solid var(--navy);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: transform 0.15s;
}
.sticky-cta:hover {
  transform: translateY(-2px);
  background: var(--paper);
  color: var(--navy-deep);
}
.sticky-cta::after { content: "→"; font-size: 16px; }

/* =========================================================
   Back to top — floating button (always visible after scroll)
   ===================================================== */
.back-to-top {
  position: fixed;
  bottom: 24px;
  left: 24px;
  width: 52px;
  height: 52px;
  background: var(--navy);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-sans);
  font-size: 22px;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid var(--navy-deep);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
  z-index: 100;
  transition: transform 0.15s, background 0.15s;
}
.back-to-top:hover {
  background: var(--accent);
  color: var(--navy-deep);
  transform: translateY(-2px);
}
.back-to-top::before { content: "↑"; }
@media (max-width: 768px) {
  .back-to-top { bottom: 16px; left: 16px; width: 44px; height: 44px; font-size: 18px; }
}

/* =========================================================
   Footer
   ===================================================== */
footer {
  background: var(--navy);
  color: #fff;
  margin-top: 64px;
}
footer .inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 40px 24px;
}
footer .nav-cols {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 32px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
footer h4 {
  font-family: var(--ff-sans);
  font-size: 13px;
  color: var(--accent);
  margin-bottom: 14px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
}
footer .org p {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 10px;
}
footer ul { list-style: none; padding: 0; margin: 0; }
footer ul li { margin-bottom: 6px; font-size: 13px; }
footer ul li a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
}
footer ul li a:hover { color: var(--accent); text-decoration: underline; }
footer .copyright {
  margin-top: 22px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.04em;
}

/* =========================================================
   Responsive
   ===================================================== */
@media (max-width: 768px) {
  .sticky-cta {
    bottom: 16px;
    right: 16px;
    padding: 12px 18px;
    font-size: 13px;
  }
  .site-header .inner {
    padding: 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .primary-nav .inner {
    flex-wrap: wrap;
    padding: 0;
  }
  .primary-nav .inner > a,
  .primary-nav .inner > .has-sub > a {
    padding: 10px 14px;
    font-size: 13px;
  }
  main { padding: 16px 16px 48px; }
  main h1 { font-size: 24px; margin: 20px 0 18px; }
  main h2 { font-size: 18px; padding: 12px 16px; margin: 36px 0 18px; }
  main h3 { font-size: 16px; margin: 24px 0 10px; }

  .hero .slides { height: 320px; }
  .hero-overlay h1 { font-size: 26px; }
  .hero-overlay .lead { font-size: 14.5px; }

  .why-japan .grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .country-grid { grid-template-columns: 1fr 1fr; }
  .uni-grid { grid-template-columns: 1fr; }
  .toc .groups { grid-template-columns: 1fr; }

  .news-list li {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 14px 0;
  }
  .news-list li .country { justify-self: start; }

  .testimonial {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .testimonial .photo { max-width: 200px; }

  .flow-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
  }

  .timeline-grid { grid-template-columns: 1fr 1fr; }
  .timeline-bar { display: none; }
  .timeline-step::before { margin-top: 8px; }

  footer .nav-cols {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
  footer .nav-cols .org { grid-column: 1 / -1; }

  .office dl {
    grid-template-columns: 1fr;
    gap: 2px 0;
  }
  .office dt { margin-top: 8px; }

  .app-proc-table .proc-date,
  .app-proc-table .proc-phase {
    width: auto;
  }
  .uni-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .tabs > .tab-bar label { font-size: 14px; padding: 12px 14px; }
}

/* =========================================================
   HUB PAGE — India main page redesign (Cambridge-style cards)
   Per JDS spec: 1画面に複数情報、カード式詳細遷移
   ===================================================== */

/* Hide v1 hero/quickfacts on hub page (replaced by hero-full) */
body.page-hub .hero,
body.page-hub .quick-facts { display: none; }

/* =========================================================
   Sub-page sidebar nav (.side-nav) — under sub-hero, NOT fixed
   ハブには表示しない (カードで階層が分かるため)
   Sub-hero の下に配置、ページと一緒にスクロール
   ===================================================== */
.page-body {
  max-width: 1180px;
  margin: 0 auto;
  padding: 24px;
}

.side-nav {
  background: var(--paper);
  border: 1px solid var(--hairline);
  margin-bottom: 24px;
}
.side-nav-title {
  font-family: var(--ff-serif);
  font-weight: 700;
  color: var(--navy);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0;
  padding: 14px 18px 10px;
  border-bottom: 1px solid var(--hairline);
}
.side-nav-list {
  display: flex;
  flex-direction: column;
  padding: 6px 0;
}
.side-nav-list a {
  display: block;
  padding: 10px 18px;
  color: var(--ink);
  text-decoration: none;
  border-left: 4px solid transparent;
  font-family: var(--ff-sans);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.4;
  transition: background 0.15s, border-color 0.15s;
}
.side-nav-list a:hover {
  background: var(--cream);
  border-left-color: var(--accent);
}
.side-nav-list a[aria-current="page"] {
  background: var(--cream);
  border-left-color: var(--navy);
  font-weight: 700;
}

/* Sub-page main inside .page-body — no extra max-width/padding (parent handles) */
body.page-sub main {
  max-width: none;
  margin: 0;
  padding: 0;
}

/* Desktop: side + main as 2-column grid */
@media (min-width: 1024px) {
  .page-body {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 40px;
    padding: 40px 24px 24px;
    align-items: start;
  }
  .side-nav {
    margin-bottom: 0;
    /* not sticky / fixed — naturally scrolls with page */
  }
}

@media (max-width: 768px) {
  .page-body { padding: 16px 20px 0; }
  .side-nav {
    margin-bottom: 16px;
    border-radius: 0;
  }
  .side-nav-title { font-size: 14px; padding: 12px 16px 8px; }
  .side-nav-list a {
    padding: 9px 16px;
    font-size: 14.5px;
  }
}

/* Hub page never shows side-nav (cards do the job) */
body.page-hub .side-nav,
body.page-hub .page-body { display: none; }

/* ① HERO FULL — Cambridge-style large image */
.hero-full {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  min-height: 540px;
  display: flex;
  align-items: center;
}
.hero-full .hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 1;
  filter: brightness(1.13) saturate(1.05); /* v3: hero画像を明るめに */
}
.hero-full::before {
  content: "";
  position: absolute;
  inset: 0;
  /* v3案D: 左を濃く暗く→右は写真そのまま。濃淡をはっきりつける */
  background: linear-gradient(90deg,
    rgba(13, 27, 42, 0.92) 0%,
    rgba(13, 27, 42, 0.74) 26%,
    rgba(13, 27, 42, 0.34) 52%,
    rgba(13, 27, 42, 0) 74%);
  z-index: 2;
}
.hero-full-overlay {
  position: relative;
  z-index: 3;
  width: 100%;
  padding: 60px 0 50px;
}
.hero-full-overlay .inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
}
.hero-full .hero-kicker {
  font-family: var(--ff-sans);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 22px;
  font-weight: 600;
}
.hero-full .hero-title {
  font-family: var(--ff-serif);
  font-size: clamp(36px, 5.5vw, 64px);
  font-weight: 700;
  line-height: 1.05;
  color: #fff;
  margin-bottom: 22px;
  max-width: 820px;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
}
.hero-full .hero-title em {
  font-style: italic;
  color: var(--accent);
  font-weight: 700;
}
.hero-full .hero-lead {
  font-family: var(--ff-sans);
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.94);
  max-width: 580px;
  margin-bottom: 28px;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}
.hero-full .hero-cta-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}
.hero-full .hero-cta-primary {
  background: var(--accent);
  color: var(--navy-deep);
  padding: 14px 28px;
  font-family: var(--ff-sans);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-decoration: none;
  border: 2px solid var(--accent);
}
.hero-full .hero-cta-primary:hover {
  background: var(--paper);
  border-color: var(--paper);
}
.hero-full .hero-cta-secondary {
  background: transparent;
  color: #fff;
  padding: 14px 28px;
  font-family: var(--ff-sans);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-decoration: none;
  border: 2px solid rgba(255, 255, 255, 0.55);
}
.hero-full .hero-cta-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #fff;
}
.hero-full .hero-uni-strip {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}
.hero-full .hero-uni-strip::before {
  content: "Partner universities";
  font-family: var(--ff-sans);
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-right: 12px;
  font-weight: 600;
}
.hero-full .hero-uni-strip li {
  background: rgba(255, 255, 255, 0.95);
  color: var(--navy-deep);
  padding: 8px 14px;
  font-family: var(--ff-sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin: 0;
  border-bottom: 3px solid;
}
.hero-full .hero-uni-strip li.uc-graspp   { border-bottom-color: var(--uni-graspp-deep); }
.hero-full .hero-uni-strip li.uc-eng      { border-bottom-color: var(--uni-eng-deep); }
.hero-full .hero-uni-strip li.uc-hitotsu  { border-bottom-color: var(--uni-hitotsu-deep); }
.hero-full .hero-uni-strip li.uc-waseda   { border-bottom-color: var(--uni-waseda-deep); }
.hero-full .hero-uni-strip li.uc-kobe     { border-bottom-color: var(--uni-kobe-deep); }
.hero-full::after { display: none; } /* override sakura */

/* ⑩ NEWS BAR (Hero 直下) */
.news-bar {
  background: var(--cream);
  border-bottom: 1px solid var(--hairline);
}
.news-bar .inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 16px 32px;
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
  align-items: start;
}
.news-bar-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.news-bar-title {
  font-family: var(--ff-serif);
  font-weight: 700;
  color: var(--navy);
  font-size: 18px;
  letter-spacing: 0.04em;
  margin: 0;
}
.news-bar-title::before { display: none; }
.news-bar-more {
  font-family: var(--ff-sans);
  font-size: 13px;
  color: var(--accent-deep);
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
}
.news-bar-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.news-bar-list li {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 16px;
  font-size: 14px;
  padding: 4px 0;
  align-items: baseline;
}
.news-bar-list .date {
  color: var(--muted);
  font-family: var(--ff-mono);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.news-bar-list .msg { color: var(--ink); line-height: 1.55; }

/* HUB cards (writeup grids) */
.hub-cards {
  background: var(--paper);
  padding: 40px 0 24px;
}
.hub-cards + .hub-cards { padding-top: 0; }
.hub-cards .inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
}
.hub-section-title {
  font-family: var(--ff-serif);
  font-weight: 700;
  color: var(--navy);
  font-size: 22px;
  margin: 0 0 28px;
  padding: 0;
  background: transparent;
  border: none;
  display: block;
}
.hub-section-title::before { display: none; }

.card-grid {
  display: grid;
  gap: 20px;
}
.card-grid-4 { grid-template-columns: repeat(4, 1fr); }
.card-grid-3 { grid-template-columns: repeat(3, 1fr); }

.hub-card {
  position: relative;
  display: block;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  background: var(--ink);
  aspect-ratio: 4/5;
  isolation: isolate;
  border: 1px solid var(--hairline);
}
.hub-card picture,
.hub-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.hub-card img {
  object-fit: cover;
  object-position: center;
  transition: transform 0.35s ease;
}
.hub-card:hover img { transform: scale(1.04); }
/* Photo overlay only for image-based hub-cards (India hub).
   Lite cards (no image) must NOT receive this overlay. */
.hub-card:not(.hub-card-lite)::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(13, 27, 42, 0.08) 0%,
    rgba(13, 27, 42, 0.05) 45%,
    rgba(13, 27, 42, 0.75) 85%,
    rgba(13, 27, 42, 0.92) 100%);
  z-index: 2;
}
.hub-card-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 22px 22px 24px;
  color: #fff;
  z-index: 3;
}
.hub-card-num {
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: 13px;
  color: var(--accent);
  letter-spacing: 0.04em;
  margin-bottom: 4px;
  display: block;
}
.hub-card-title {
  font-family: var(--ff-serif);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 6px;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}
.hub-card-title::before { display: none; }
.hub-card-meta {
  font-family: var(--ff-sans);
  font-size: 14.5px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.88);
  margin: 0;
}
.hub-card:not(.hub-card-lite)::after {
  content: "→";
  position: absolute;
  bottom: 22px;
  right: 22px;
  color: var(--accent);
  font-family: var(--ff-sans);
  font-size: 18px;
  font-weight: 700;
  z-index: 3;
  opacity: 0.85;
  transition: transform 0.2s;
}
.hub-card:hover::after { transform: translateX(3px); }

/* Focus styles (JIS X 8341-3 — visible focus) */
.hub-card:focus-visible,
.sub-nav-sticky a:focus-visible,
.hero-cta-primary:focus-visible,
.hero-cta-secondary:focus-visible,
.back-to-hub:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

/* ⑧ CONTACT STRIP */
.contact-strip {
  background: var(--cream-deep);
  border-top: 1px solid var(--hairline);
  padding: 36px 0;
}
.contact-strip .inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
}
.contact-strip-title {
  font-family: var(--ff-serif);
  font-weight: 700;
  color: var(--navy);
  font-size: 22px;
  margin: 0 0 22px;
  padding: 0;
  background: transparent;
  border: none;
}
.contact-strip-title::before { display: none; }
.contact-strip-body {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 40px;
  align-items: start;
}
.contact-strip dl {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 8px 18px;
  margin: 0;
  font-size: 14px;
}
.contact-strip dt {
  font-family: var(--ff-sans);
  font-weight: 700;
  color: var(--muted);
  font-size: 13.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding-top: 3px;
}
.contact-strip dd {
  margin: 0;
  color: var(--ink);
  line-height: 1.55;
}
.contact-strip dd a { color: var(--navy); word-break: break-all; }
.contact-strip-social p {
  font-family: var(--ff-sans);
  font-weight: 700;
  color: var(--muted);
  font-size: 13.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 10px;
}
.contact-strip-social ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 8px;
}
.contact-strip-social li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: var(--navy);
  color: #fff;
  text-decoration: none;
  font-family: var(--ff-sans);
  font-size: 13px;
  font-weight: 700;
}
.contact-strip-social li a:hover { background: var(--accent); color: var(--navy-deep); }

/* =========================================================
   SUB-PAGE (詳細ページ) — Hero + content
   ===================================================== */
body.page-sub .hero,
body.page-sub .quick-facts { display: none; }

.sub-hero {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  min-height: 280px;
  display: flex;
  align-items: center;
}
.sub-hero .sub-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sub-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  /* v3案D: 左を濃く暗く→右は写真そのまま。濃淡をはっきりつける */
  background: linear-gradient(90deg,
    rgba(13, 27, 42, 0.92) 0%,
    rgba(13, 27, 42, 0.74) 26%,
    rgba(13, 27, 42, 0.34) 52%,
    rgba(13, 27, 42, 0) 74%);
  z-index: 1;
}
.sub-hero-overlay {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 40px 0;
}
.sub-hero-overlay .inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
}
.sub-hero .kicker {
  font-family: var(--ff-sans);
  font-size: 14px;
  color: var(--accent);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 12px;
  font-weight: 600;
}
.sub-hero h1 {
  font-family: var(--ff-serif);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  line-height: 1.1;
  color: #fff;
  margin: 0;
  padding: 0;
  border: none;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
  max-width: 820px;
}

.back-to-hub {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ff-sans);
  font-size: 13px;
  color: var(--navy);
  text-decoration: none;
  padding: 8px 0;
  margin-top: 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid transparent;
}
.back-to-hub::before { content: "←"; font-size: 16px; }
.back-to-hub:hover { border-bottom-color: var(--navy); }

/* Responsive (768 / 1440 brand-confirmed) */
@media (max-width: 768px) {
  .sub-nav-sticky .inner { padding: 0 12px; }
  .sub-nav-sticky a { padding: 10px 12px; font-size: 14px; }

  .hero-full { min-height: 460px; }
  .hero-full-overlay { padding: 40px 0 36px; }
  .hero-full-overlay .inner { padding: 0 20px; }
  .hero-full .hero-title { font-size: 32px; }
  .hero-full .hero-lead { font-size: 15px; }
  .hero-full .hero-uni-strip { gap: 4px; }
  .hero-full .hero-uni-strip::before { width: 100%; margin-bottom: 8px; margin-right: 0; }
  .hero-full .hero-uni-strip li { font-size: 10.5px; padding: 6px 10px; }

  .news-bar .inner {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 14px 20px;
  }
  .news-bar-list li {
    grid-template-columns: 90px 1fr;
    font-size: 13px;
  }

  .hub-cards { padding: 32px 0; }
  .hub-cards .inner { padding: 0 20px; }
  .card-grid-4,
  .card-grid-3 { grid-template-columns: 1fr 1fr; gap: 12px; }
  .hub-card { aspect-ratio: 3/4; }
  .hub-card-overlay { padding: 16px 16px 18px; }
  .hub-card-title { font-size: 15.5px; }
  .hub-card-meta { font-size: 13.5px; }

  .contact-strip { padding: 28px 0; }
  .contact-strip .inner { padding: 0 20px; }
  .contact-strip-body {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .contact-strip dl {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  .contact-strip dt { padding-top: 10px; }

  .sub-hero { min-height: 220px; }
  .sub-hero-overlay { padding: 30px 0; }
  .sub-hero-overlay .inner { padding: 0 20px; }
  .sub-hero h1 { font-size: 26px; }
}

@media (max-width: 600px) {
  .card-grid-4,
  .card-grid-3 { grid-template-columns: 1fr; }
  .hub-card { aspect-ratio: 16/10; }
}

/* =========================================================
   SNS icons list — used in hub Contact strip + sub-page footers
   ===================================================== */
.sns-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 10px;
}
.sns-list li { margin: 0; }
.sns-list li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--navy);
  color: #fff;
  text-decoration: none;
  transition: background 0.15s, transform 0.15s;
}
.sns-list li a:hover {
  background: var(--accent);
  transform: translateY(-2px);
}
.sns-list li a img {
  width: 20px;
  height: 20px;
  filter: brightness(0) invert(1);
}
.sns-list li a:hover img {
  filter: none;
}

/* Footer org SNS list inherits dark bg, so invert behaviour */
footer .sns-list li a {
  background: rgba(255, 255, 255, 0.12);
}
footer .sns-list li a:hover {
  background: var(--accent);
}

/* =========================================================
   Bottom page navigation (Prev / Hub / Next) — sub-pages
   ===================================================== */
.page-nav-bottom {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 18px;
  align-items: stretch;
  max-width: 1180px;
  margin: 72px auto 0;
  padding: 28px 24px;
  border-top: 1px solid var(--hairline);
}
.page-nav-bottom > * { min-width: 0; }
.page-nav-prev,
.page-nav-next {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 16px 22px;
  background: var(--cream);
  border: 1px solid var(--hairline);
  text-decoration: none;
  color: var(--navy);
  font-family: var(--ff-sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.page-nav-prev { justify-self: start; }
.page-nav-next { justify-self: end; }
.page-nav-prev:hover,
.page-nav-next:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--navy-deep);
  transform: translateY(-2px);
}
.page-nav-arrow {
  font-size: 20px;
  color: var(--accent-deep);
  font-weight: 700;
  flex-shrink: 0;
}
.page-nav-prev:hover .page-nav-arrow,
.page-nav-next:hover .page-nav-arrow {
  color: var(--navy-deep);
}
.page-nav-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.page-nav-next .page-nav-label { text-align: right; }
.page-nav-hint {
  font-family: var(--ff-sans);
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.page-nav-prev:hover .page-nav-hint,
.page-nav-next:hover .page-nav-hint {
  color: var(--navy-deep);
}
.page-nav-hub {
  justify-self: center;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  background: var(--navy);
  color: #fff;
  text-decoration: none;
  font-family: var(--ff-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  border: 2px solid var(--navy);
  transition: background 0.15s, color 0.15s;
}
.page-nav-hub:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--navy-deep);
}
.page-nav-hub::before {
  content: "←";
  font-size: 15px;
  margin-right: 4px;
}

@media (max-width: 768px) {
  .page-nav-bottom {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "hub  hub"
      "prev next";
    gap: 12px;
    padding: 24px 20px;
    margin-top: 48px;
  }
  .page-nav-hub { grid-area: hub; justify-self: stretch; text-align: center; justify-content: center; }
  .page-nav-prev { grid-area: prev; padding: 12px 16px; font-size: 13px; }
  .page-nav-next { grid-area: next; padding: 12px 16px; font-size: 13px; }
  .page-nav-prev > .page-nav-label,
  .page-nav-next > .page-nav-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* =========================================================
   COUNTRY PAGE — Editorial layout (Stripe Press / Cambridge 路線)
   - 中央寄せ + 余白 80px section gap
   - 左 H2 + 右本文の 2 column (1024+)
   - Sticky TOC on left (1280+)
   - Vertical apply timeline
   ===================================================== */

body.page-country {
  background: var(--paper);
}

/* Country Hero — flag + name + tagline + CTA */
.country-hero {
  background: var(--ink);
  color: var(--paper);
  position: relative;
  min-height: 540px;
  display: flex;
  align-items: center;
  padding: 64px 0 56px;
  text-align: left;
  overflow: hidden;
}
.country-hero .country-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  opacity: 1;
  filter: brightness(1.13) saturate(1.05); /* v3: hero画像を明るめに */
}
.country-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  /* v3案D: 左を濃く暗く→右は写真そのまま。濃淡をはっきりつける */
  background: linear-gradient(90deg,
    rgba(13, 27, 42, 0.92) 0%,
    rgba(13, 27, 42, 0.74) 26%,
    rgba(13, 27, 42, 0.34) 52%,
    rgba(13, 27, 42, 0) 74%);
  pointer-events: none;
  z-index: 1;
}
.country-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 85% 25%, rgba(248, 181, 0, 0.10), transparent 55%);
  pointer-events: none;
  z-index: 1;
}
.country-hero-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
  position: relative;
  z-index: 2;
  width: 100%;
}
.country-hero-flag {
  display: block;
  width: 160px;
  height: auto;
  max-height: 110px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  margin-bottom: 28px;
  object-fit: contain;
  background: rgba(255, 255, 255, 0.04);
}
.country-hero-kicker {
  font-family: var(--ff-sans);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.66);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 24px;
  font-weight: 600;
}
.country-hero-title {
  font-family: var(--ff-serif);
  font-size: clamp(56px, 8vw, 96px);
  font-weight: 700;
  line-height: 1;
  color: var(--paper);
  margin: 0 0 18px;
  letter-spacing: -0.025em;
  max-width: 880px;
  text-wrap: balance;
}
.country-hero-title em {
  font-style: italic;
  color: var(--accent);
}
.country-hero-subhead {
  font-family: var(--ff-serif);
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 500;
  font-style: italic;
  line-height: 1.25;
  color: rgba(255, 255, 255, 0.94);
  margin: 0 0 24px;
  letter-spacing: -0.005em;
  max-width: 720px;
}
.country-hero-subhead em {
  color: var(--accent);
  font-style: italic;
}
.country-hero-lead {
  font-family: var(--ff-sans);
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.86);
  max-width: 640px;
  margin: 0 0 32px;
}
.country-hero-cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}
.country-hero-uni-strip {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 18px 28px;
  position: relative;
  padding-top: 22px;
}
.country-hero-uni-strip::before {
  content: "Partner Graduate Schools";
  position: absolute;
  top: 0;
  left: 0;
  font-family: var(--ff-sans);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 600;
}
.country-hero-uni-strip li {
  font-family: var(--ff-serif);
  font-size: 14px;
  font-style: italic;
  color: rgba(255, 255, 255, 0.92);
  letter-spacing: -0.005em;
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
}
.country-hero-uni-strip li.placeholder {
  font-family: var(--ff-sans);
  font-style: normal;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.04em;
}

/* Card grid (entry points) */
.country-card-grid {
  margin-top: 0;
}
.country-card-grid { counter-reset: cc-counter; }
.hub-card-lite {
  background: var(--paper);
  border: 1px solid var(--hairline);
  aspect-ratio: auto;
  min-height: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  padding: 16px 18px 14px;
  transition: background 0.15s, border-color 0.15s, transform 0.15s, box-shadow 0.15s;
  position: relative;
  counter-increment: cc-counter;
  text-decoration: none;
}
/* .hub-card-lite::before rule fully removed (was display:none and Figma capture
   could not properly handle it, leaving an empty circle artifact in some captures). */
.hub-card-lite > .lite-marker {
  display: block;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--accent-deep);
  margin-bottom: 8px;
}
.hub-card-lite::after {
  content: "→";
  position: absolute;
  right: 16px;
  bottom: 12px;
  font-family: var(--ff-sans);
  font-size: 13px;
  color: var(--accent-deep);
  margin: 0;
  align-self: auto;
  transition: transform 0.15s;
}
.hub-card-lite:hover {
  background: var(--cream);
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(13, 27, 42, 0.06);
}
.hub-card-lite:hover::after {
  transform: translateX(3px);
}
.hub-card-overlay-lite {
  position: static;
  padding: 0;
  color: var(--ink);
}
.hub-card-overlay-lite .hub-card-title {
  font-family: var(--ff-serif);
  font-size: 15.5px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 4px;
  text-shadow: none;
  line-height: 1.25;
}
.hub-card-overlay-lite .hub-card-meta {
  font-family: var(--ff-sans);
  font-size: 13.5px;
  color: var(--muted);
  margin: 0;
  line-height: 1.5;
}

/* Country detail sections — editorial layout */
.country-details {
  padding: 32px 0 96px;
  background: var(--paper);
}
.country-details > .inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 32px;
}

.country-section-title {
  font-family: var(--ff-serif);
  font-size: clamp(28px, 3.4vw, 38px);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.2;
  letter-spacing: -0.012em;
  margin: 88px 0 32px;
  padding: 0 0 14px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--hairline);
  display: block;
  scroll-margin-top: 24px;
  position: relative;
  text-wrap: balance;
}
.country-section-title::before { display: none; }
.country-section-title:first-of-type {
  margin-top: 24px;
}

/* Lead paragraph after section title */
.country-section-title + p {
  font-family: var(--ff-serif);
  font-size: 19px;
  line-height: 1.6;
  color: var(--ink);
  max-width: 760px;
  margin-bottom: 1.4em;
  font-style: italic;
  font-weight: 400;
}

/* Body paragraphs */
.country-details p,
.country-details ul,
.country-details ol {
  max-width: 760px;
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink);
}
.country-details ul,
.country-details ol {
  margin: 0 0 24px;
  padding-left: 1.4em;
}
.country-details li {
  margin-bottom: 10px;
  line-height: 1.7;
}
.country-details strong {
  font-weight: 600;
  color: var(--navy);
}

/* 2-column section (H3 left + body right, on 1024+) */
.country-twocol {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin: 56px 0;
}
@media (min-width: 1024px) {
  .country-twocol {
    grid-template-columns: 280px 1fr;
    gap: 56px;
  }
}
.country-twocol h3 {
  font-family: var(--ff-serif);
  font-size: 22px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 0;
  border-left: none;
  padding-left: 0;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.country-twocol .body {
  max-width: 720px;
}
.country-twocol .body > :first-child { margin-top: 0; }
.country-twocol .body > :last-child { margin-bottom: 0; }

/* =========================================================
   Application Timeline — Vertical editorial steps
   ===================================================== */
.apply-timeline {
  list-style: none;
  padding: 0;
  margin: 32px 0 56px;
  position: relative;
  max-width: 920px;
  counter-reset: app-step;
}
.apply-timeline::before {
  content: "";
  position: absolute;
  left: 30px;
  top: 22px;
  bottom: 22px;
  width: 1px;
  background: var(--hairline-strong);
}
.apply-timeline li {
  counter-increment: app-step;
  position: relative;
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 24px;
  padding: 28px 0;
  border-bottom: 1px solid var(--hairline);
  align-items: start;
}
.apply-timeline li:last-child { border-bottom: none; }
.apply-timeline li::before { display: none; }
.apply-timeline li > .step-marker {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background: var(--paper);
  border: 2px solid var(--navy);
  border-radius: 50%;
  font-family: var(--ff-serif);
  font-weight: 700;
  font-size: 18px;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  letter-spacing: 0;
}
.apply-timeline li.is-final > .step-marker {
  background: var(--navy);
  color: var(--paper);
}
.apply-timeline li.is-deadline > .step-marker {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--navy-deep);
}
.apply-timeline .step-when {
  font-family: var(--ff-sans);
  font-size: 13.5px;
  color: var(--accent-deep);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 6px;
}
.apply-timeline .step-title {
  font-family: var(--ff-serif);
  font-size: 22px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 10px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.apply-timeline .step-body {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--ink);
  max-width: 640px;
}
.apply-timeline .step-body p { margin-bottom: 0.8em; }
.apply-timeline .step-body p:last-child { margin-bottom: 0; }
.apply-timeline .step-deadline {
  display: inline-block;
  background: var(--cream);
  border-left: 3px solid var(--accent);
  padding: 12px 18px;
  margin-top: 10px;
  font-size: 14.5px;
  color: var(--navy);
  font-weight: 500;
}

/* University card editorial style */
.uni-editorial {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin: 32px 0 48px;
}
@media (min-width: 768px) {
  .uni-editorial { grid-template-columns: repeat(2, 1fr); }
}
.uni-editorial-card {
  border-top: 3px solid var(--navy);
  padding: 28px 0 32px;
  background: transparent;
}
.uni-editorial-card.uc-priority1 { border-top-color: #4a7ba6; }
.uni-editorial-card.uc-priority2 { border-top-color: #3d8a52; }
.uni-editorial-card.uc-priority3 { border-top-color: #a04a9c; }
.uni-editorial-card.uc-priority4 { border-top-color: #c46a3a; }
.uni-editorial-card .priority {
  font-family: var(--ff-sans);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 12px;
}
.uni-editorial-card .uni-component {
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: 15.5px;
  color: var(--accent-deep);
  margin-bottom: 8px;
}
.uni-editorial-card h3 {
  font-family: var(--ff-serif);
  font-size: 22px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 12px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  border-left: none;
  padding: 0;
}
.uni-editorial-card .uni-degree {
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: 14.5px;
  color: var(--ink);
  margin-bottom: 14px;
}
.uni-editorial-card .uni-fields {
  font-size: 14.5px;
  color: var(--ink);
  line-height: 1.65;
  margin: 12px 0 14px;
  max-width: none;
}
.uni-editorial-card .uni-fields ul {
  list-style: none;
  padding: 0;
  margin: 6px 0 0;
  font-size: 13.5px;
  color: var(--muted);
  columns: 2;
  column-gap: 24px;
}
.uni-editorial-card .uni-fields ul li {
  margin-bottom: 4px;
  break-inside: avoid;
}
.uni-editorial-card .uni-link {
  display: inline-block;
  margin-top: 8px;
  font-family: var(--ff-mono);
  font-size: 14px;
  color: var(--accent-deep);
  letter-spacing: 0.06em;
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
}
.uni-editorial-card .uni-link:hover {
  color: var(--navy);
  border-bottom-color: var(--navy);
}

/* Selection schedule — editorial table */
.selection-schedule {
  width: 100%;
  max-width: 920px;
  border-collapse: collapse;
  margin: 32px 0 56px;
  font-family: var(--ff-sans);
  font-size: 15px;
}
.selection-schedule th[scope="row"] {
  font-family: var(--ff-serif);
  font-weight: 700;
  font-size: 24px;
  color: var(--accent-deep);
  text-align: left;
  padding: 16px 20px 16px 0;
  border-top: 2px solid var(--navy);
  vertical-align: top;
  width: 90px;
  letter-spacing: -0.005em;
}
.selection-schedule th[scope="rowgroup"] {
  font-family: var(--ff-sans);
  font-weight: 700;
  font-size: 13px;
  color: var(--navy);
  text-align: left;
  padding: 16px 24px 16px 20px;
  border-top: 1px solid var(--hairline);
  vertical-align: top;
  width: 200px;
  letter-spacing: 0.02em;
}
.selection-schedule td {
  font-family: var(--ff-sans);
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink);
  padding: 16px 0;
  border-top: 1px solid var(--hairline);
  vertical-align: top;
}
.selection-schedule tr.year-start th[scope="row"] {
  padding-top: 24px;
}

/* FAQ editorial — no accordion, all expanded */
.faq-editorial {
  margin: 32px 0;
  max-width: 820px;
}
.faq-editorial dt {
  font-family: var(--ff-serif);
  font-size: 17px;
  font-weight: 700;
  color: var(--navy);
  margin: 28px 0 8px;
  padding-top: 24px;
  border-top: 1px solid var(--hairline);
  line-height: 1.35;
  letter-spacing: -0.005em;
}
.faq-editorial dt:first-of-type {
  border-top: 2px solid var(--navy);
  padding-top: 28px;
}
.faq-editorial dt::before {
  content: "Q. ";
  color: var(--accent-deep);
  font-family: var(--ff-mono);
  font-style: italic;
}
.faq-editorial dd {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--ink);
  margin: 0 0 8px;
  max-width: 720px;
}
.faq-editorial dd::before {
  content: "A. ";
  color: var(--muted);
  font-family: var(--ff-mono);
  font-weight: 700;
  margin-right: 4px;
}

.faq-cat {
  font-family: var(--ff-sans);
  font-size: 14px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  margin: 56px 0 14px;
}

/* =========================================================
   Sub-Programme → Component → University FLOW chart
   3-row visual structure: priority area → development issue → host university
   ===================================================== */
.fos-flow {
  margin: 40px 0 56px;
  max-width: none;
}
.fos-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-bottom: 40px;
  border-top: 3px solid var(--navy);
}
.fos-row.uc-priority1 { border-top-color: #4a7ba6; }
.fos-row.uc-priority2 { border-top-color: #3d8a52; }
.fos-row.uc-priority3 { border-top-color: #a04a9c; }
.fos-row.uc-priority4 { border-top-color: #c46a3a; }

.fos-area {
  padding: 20px 0 16px;
  border-bottom: 1px solid var(--hairline);
}
.fos-area-num {
  font-family: var(--ff-mono);
  font-size: 13.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 8px;
}
.fos-area-title {
  font-family: var(--ff-serif);
  font-size: 24px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.25;
  letter-spacing: -0.012em;
  margin: 0 0 4px;
}

.fos-components {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  padding-top: 28px;
}
@media (min-width: 1024px) {
  .fos-components { grid-template-columns: repeat(2, 1fr); gap: 28px 32px; }
}

.fos-component {
  display: grid;
  grid-template-rows: auto auto auto auto;
  gap: 10px;
  padding: 0;
}
.fos-component-issue {
  font-family: var(--ff-sans);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-deep);
  font-weight: 700;
}
.fos-component-issue-title {
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: 18px;
  color: var(--ink);
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 2px;
}
.fos-connector {
  font-family: var(--ff-sans);
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  margin: 10px 0 6px;
  padding-top: 10px;
  border-top: 1px dashed var(--hairline-strong);
}
.fos-connector::before {
  content: "Hosted at";
  margin-right: 6px;
}
.fos-uni-block {
  background: var(--cream);
  border-left: 3px solid var(--accent);
  padding: 16px 20px;
}
.fos-uni-name {
  font-family: var(--ff-sans);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 4px;
}
.fos-uni-school {
  font-family: var(--ff-serif);
  font-size: 16px;
  color: var(--navy);
  font-weight: 700;
  margin-bottom: 4px;
  line-height: 1.3;
  letter-spacing: -0.005em;
}
.fos-uni-degree {
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: 13.5px;
  color: var(--muted);
  margin-bottom: 8px;
  line-height: 1.5;
}
.fos-uni-link {
  font-family: var(--ff-mono);
  font-size: 13px;
  color: var(--accent-deep);
  letter-spacing: 0.06em;
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
  display: inline-block;
  margin-top: 4px;
}
.fos-uni-link:hover { color: var(--navy); border-bottom-color: var(--navy); }

/* =========================================================
   Eligibility checklist — Visual grid with icons
   ===================================================== */
.eligibility-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 24px 0 40px;
  max-width: none;
  list-style: none;
  padding: 0;
}
@media (min-width: 768px) {
  .eligibility-grid { grid-template-columns: repeat(2, 1fr); gap: 14px 20px; }
}
.eligibility-grid li {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 14px;
  align-items: start;
  padding: 14px 16px;
  background: var(--cream);
  border-left: 3px solid var(--accent);
  font-size: 14.5px;
  line-height: 1.55;
  margin: 0;
  list-style: none;
}
.eligibility-grid.is-ineligible li {
  background: #fcf0f0;
  border-left-color: var(--crimson);
}
/* Removed: ::before pseudo with SVG background-image was not captured by html-to-design
   plugin, leaving empty circles. Use explicit <span class="e-mark"> in HTML instead. */
.eligibility-grid li::before { display: none; }
.eligibility-grid li .e-mark {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--paper);
  border: 1.5px solid var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-sans);
  font-size: 16px;
  font-weight: 700;
  color: var(--accent-deep);
  flex-shrink: 0;
  line-height: 1;
}
.eligibility-grid.is-ineligible li .e-mark {
  border-color: var(--crimson);
  color: var(--crimson);
}
.eligibility-grid li .e-key {
  font-family: var(--ff-sans);
  font-weight: 700;
  color: var(--navy);
  display: block;
  font-size: 13px;
  letter-spacing: 0.02em;
  margin-bottom: 4px;
}
.eligibility-grid li .e-val {
  font-family: var(--ff-sans);
  color: var(--ink);
  line-height: 1.55;
}

/* Webinar / seminar info box */
.seminar-box {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  margin: 32px 0;
}
@media (min-width: 768px) {
  .seminar-box { grid-template-columns: repeat(3, 1fr); }
}
.seminar-card {
  border: 1px solid var(--hairline);
  border-top: 3px solid var(--accent);
  padding: 22px 20px;
  background: var(--paper);
}
.seminar-card h4 {
  font-family: var(--ff-sans);
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  margin: 0 0 14px;
}
.seminar-card .seminar-when {
  font-family: var(--ff-serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 8px;
  line-height: 1.3;
}
.seminar-card .seminar-where,
.seminar-card .seminar-time {
  font-size: 14px;
  color: var(--ink);
  line-height: 1.55;
  margin-bottom: 4px;
}
.seminar-card a {
  font-family: var(--ff-mono);
  font-size: 13.5px;
  color: var(--accent-deep);
  word-break: break-all;
}

.placeholder-note {
  font-style: italic;
  color: var(--muted);
  font-size: 14px;
}

/* =========================================================
   Section markers — replaced sakura with editorial roman numerals
   (Stripe Press / Cambridge academic style)
   - main h2: roman numeral counter (I, II, III...) above the title
   - Hero / footer: clean, no decorative motif
   ===================================================== */
main { counter-reset: h2-counter; }
main h2 {
  counter-increment: h2-counter;
  position: relative;
}
main h2::before { display: none; }
.h2-marker {
  display: block;
  font-family: var(--ff-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.24em;
  color: var(--navy);
  margin-bottom: 10px;
  text-transform: uppercase;
}
/* Disable counter on certain h2 contexts */
.why-japan h2::before,
.hero-overlay h2::before,
section h2.no-counter::before,
.news-bar h2::before,
.hub-section-title::before,
.contact-strip-title::before,
.country-section-title::before { display: none; }

/* Country page: country-section-title gets its own counter style — unified with main h2 */
.country-details { counter-reset: cs-counter; }
.country-section-title { counter-increment: cs-counter; }
.country-section-title::before { display: none; }
.country-section-title > .cs-marker {
  display: block;
  font-family: var(--ff-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.24em;
  color: var(--navy);
  margin-bottom: 8px;
  text-transform: uppercase;
}

.hero { position: relative; overflow: hidden; }
/* Hero sakura decoration removed for cleaner academic look */

/* =========================================================
   El Salvador — Doctoral Programme banner (unique to ES)
   ===================================================== */
.es-doctoral-banner {
  background: linear-gradient(135deg, #003F8E 0%, #002a5e 100%);
  color: #fff;
  padding: 32px 36px;
  margin: 24px 0 40px;
  border-left: 6px solid var(--accent);
}
.es-doctoral-marker {
  font-family: var(--ff-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.24em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.es-doctoral-title {
  font-family: var(--ff-serif);
  font-size: 26px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 14px;
  line-height: 1.3;
}
.es-doctoral-banner p {
  color: rgba(255, 255, 255, 0.92);
  font-size: 15px;
  line-height: 1.7;
  margin: 0 0 16px;
}
.es-doctoral-list {
  list-style: none;
  padding: 16px 0;
  margin: 16px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.es-doctoral-list li {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.96);
  padding: 6px 0;
  font-family: var(--ff-sans);
}
.es-doctoral-list li strong { color: var(--accent); }
.es-doctoral-note {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  font-style: italic;
}

/* =========================================================
   Common pages — schedule table / voice card / login card
   ===================================================== */
.schedule-table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0 32px;
  font-family: var(--ff-sans);
  font-size: 14.5px;
}
.schedule-table thead th {
  text-align: left;
  font-family: var(--ff-mono);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--navy);
  font-weight: 700;
  padding: 12px 16px;
  border-bottom: 2px solid var(--navy);
}
.schedule-table tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
  line-height: 1.55;
}
.schedule-table tbody tr:nth-child(even) td {
  background: var(--cream);
}
.schedule-table tbody td:first-child {
  font-weight: 600;
  color: var(--navy);
  white-space: nowrap;
  font-family: var(--ff-serif);
}

/* Voice card (alumni testimonial) */
.voice-card {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-left: 5px solid var(--accent);
  padding: 28px 32px;
  margin: 0 0 24px;
}
.voice-card-head {
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--hairline);
}
.voice-card-name {
  font-family: var(--ff-serif);
  font-size: 22px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.3;
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}
.voice-card-meta {
  font-family: var(--ff-sans);
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-deep);
  font-weight: 600;
}
.voice-card blockquote {
  margin: 0;
  padding: 0;
  font-family: var(--ff-serif);
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink);
  font-style: italic;
}
.voice-card blockquote p { margin: 0 0 12px; }
.voice-card blockquote p:last-child { margin-bottom: 0; }

/* Login card */
.login-card {
  background: linear-gradient(135deg, #f8fafc 0%, #eef2f7 100%);
  border: 1px solid var(--hairline);
  border-left: 5px solid var(--navy);
  padding: 32px 36px;
  margin: 24px 0 32px;
  max-width: 560px;
}
.login-form { display: flex; flex-direction: column; gap: 18px; }
.login-row { display: flex; flex-direction: column; gap: 6px; }
.login-row label {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--navy);
  font-weight: 700;
}
.login-row input {
  font-family: var(--ff-sans);
  font-size: 15px;
  padding: 12px 14px;
  border: 1px solid var(--hairline-strong);
  background: var(--paper);
  color: var(--ink);
}
.login-row input:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(0, 63, 142, 0.12);
}
.login-row-action {
  flex-direction: row;
  align-items: center;
  gap: 18px;
  margin-top: 8px;
}
.login-row-action button {
  cursor: pointer;
  font-family: var(--ff-sans);
}
.forgot-link {
  font-family: var(--ff-sans);
  font-size: 13px;
  color: var(--accent-deep);
  text-decoration: underline;
}
.login-note {
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
  margin: 12px 0 0;
  font-style: italic;
}

footer { position: relative; }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* =============================================================
   MOBILE-FIRST OPTIMIZATION  (added 2026-06-08)
   - Goal: スマホ離脱対策で縦長を -30〜40% 圧縮
   - Strategy: Typography 縮小 / Section padding 圧縮 /
               長いリストは horizontal scroll-snap で圧縮
   - 99% mobile traffic 前提のモバイルファースト設計
   ============================================================= */
@media (max-width: 768px) {

  /* ---- 1. Typography compression ---- */
  body { font-size: 15px; line-height: 1.6; }
  h1, .hero h1, .hero-title, .country-hero h1 { font-size: 28px !important; line-height: 1.18 !important; letter-spacing: -0.01em; }
  h2, .section-title { font-size: 21px !important; line-height: 1.25 !important; }
  h3, .h2-marker + *, .h2-title { font-size: 17px !important; line-height: 1.3 !important; }
  p, li { font-size: 14.5px; line-height: 1.55; }
  .lead, .country-hero p { font-size: 15px !important; line-height: 1.5 !important; }
  .micro, .small, .step-when { font-size: 13px !important; }

  /* ---- 2. Section padding compression ---- */
  section, .section, .section-block { padding-top: 28px !important; padding-bottom: 28px !important; }
  section .inner, .section .inner, .container .inner, .inner { padding-left: 16px !important; padding-right: 16px !important; }
  main > section:first-child, main > .section:first-child { padding-top: 20px !important; }

  /* ---- 3. Hero compression ---- */
  .hero { min-height: 0 !important; padding: 32px 16px !important; }
  .country-hero { min-height: 220px !important; padding: 32px 16px !important; }
  .hero-buttons, .hero-cta { gap: 8px !important; flex-wrap: wrap; }
  .hero-buttons a, .hero-cta a { font-size: 13px !important; padding: 12px 16px !important; }

  /* ---- 4. Hub cards: 2-col compact grid (was full-width vertical) ---- */
  .hub-cards .card-grid,
  .hub-cards .card-grid-3,
  .hub-cards .country-card-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .hub-card-lite {
    min-height: 76px;
    padding: 12px !important;
    border-radius: 4px;
  }
  .hub-card-lite .hub-card-title { font-size: 13px !important; line-height: 1.25 !important; margin: 0 0 3px !important; letter-spacing: 0; }
  .hub-card-lite .hub-card-meta { font-size: 10.5px !important; opacity: 0.7; line-height: 1.35; }
  .lite-marker { font-size: 10px !important; padding: 1px 5px !important; }
  .hub-section-title { font-size: 18px !important; }

  /* ---- 5. Apply timeline (13 phases) → horizontal scroll ---- */
  .apply-timeline {
    display: flex !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 12px;
    padding: 16px 16px !important;
    margin: 16px -16px 24px !important;
    list-style: none;
  }
  .apply-timeline::before { display: none !important; }
  .apply-timeline > li {
    flex: 0 0 78% !important;
    min-width: 260px;
    max-width: 320px;
    scroll-snap-align: start;
    display: block !important;
    grid-template-columns: none !important;
    background: var(--paper, #fff);
    border: 1px solid var(--hairline, #ddd);
    border-radius: 6px;
    padding: 18px 16px !important;
    margin: 0 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    border-bottom: 1px solid var(--hairline, #ddd) !important;
  }
  .apply-timeline > li > .step-marker {
    position: static !important;
    width: 32px !important; height: 32px !important;
    font-size: 13px !important;
    margin: 0 0 10px !important;
  }
  .apply-timeline .step-title { font-size: 15.5px !important; margin: 0 0 6px !important; line-height: 1.25 !important; }
  .apply-timeline .step-body { font-size: 13.5px !important; line-height: 1.5 !important; max-width: none !important; }
  .apply-timeline .step-when { margin-bottom: 4px !important; }

  /* ---- 6. Universities (5 cards) → horizontal scroll ---- */
  .uni-editorial {
    display: flex !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 12px;
    grid-template-columns: none !important;
    margin: 20px -16px 24px !important;
    padding: 8px 16px !important;
  }
  .uni-editorial-card {
    flex: 0 0 78% !important;
    min-width: 250px;
    scroll-snap-align: start;
    padding: 18px !important;
    border: 1px solid var(--hairline, #ddd);
    border-top-width: 4px !important;
    border-radius: 0 0 6px 6px;
    margin: 0 !important;
    background: var(--paper, #fff);
  }
  .uni-editorial-card h3 { font-size: 16px !important; }

  /* ---- 7. Country selection cards (6 countries) → 2-col compact grid ---- */
  .country-cards-grid,
  .countries-grid,
  .country-grid,
  .country-selection-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .country-cards-grid > a, .country-grid > a {
    min-height: 100px;
    padding: 12px !important;
  }

  /* ---- 8. Office cards (Contact 7 offices) → horizontal scroll ---- */
  .office-grid, .offices-grid, .contact-offices-grid {
    display: flex !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 12px;
    grid-template-columns: none !important;
    padding: 8px 16px !important;
    margin: 0 -16px 24px !important;
  }
  .office-card, .office-item, .contact-office {
    flex: 0 0 80% !important;
    min-width: 260px;
    scroll-snap-align: start;
    padding: 18px !important;
  }

  /* ---- 9. News (3 items) → horizontal scroll ---- */
  .news-grid, .news-list, .news-section .grid {
    display: flex !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 12px;
    grid-template-columns: none !important;
    padding: 8px 16px !important;
    margin: 0 -16px 20px !important;
  }
  .news-item, .news-card {
    flex: 0 0 78% !important;
    min-width: 250px;
    scroll-snap-align: start;
  }

  /* ---- 10. Selection grid (7 steps) compact + smaller markers ---- */
  .selection-grid > li,
  .selection-grid li,
  .step-row,
  .selection-step {
    padding: 14px 0 !important;
  }
  .cs-marker { width: 32px !important; height: 32px !important; font-size: 13px !important; }
  .selection-grid h3 { font-size: 16px !important; margin-bottom: 6px !important; }
  .selection-grid p { font-size: 13.5px !important; }

  /* ---- 11. Eligibility grid: 1-col compact ---- */
  .eligibility-grid {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }
  .eligibility-grid li {
    padding: 10px 12px !important;
    font-size: 13.5px !important;
    line-height: 1.45 !important;
  }
  .e-mark { width: 18px !important; height: 18px !important; font-size: 14px !important; }

  /* ---- 12. Partner graduate strip → horizontal scroll (already inline but tighten) ---- */
  .partner-grad-strip, .country-partner-strip, .partner-strip {
    display: flex !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 8px;
    grid-template-columns: none !important;
    padding: 8px 16px !important;
    margin: 8px -16px 16px !important;
  }
  .partner-grad-strip > *, .partner-strip > * {
    flex: 0 0 auto;
    scroll-snap-align: start;
    white-space: nowrap;
    font-size: 14px !important;
    padding: 6px 10px !important;
  }

  /* ---- 13. Side nav (india sub-pages) compact ---- */
  .side-nav {
    margin: 0 0 16px !important;
    padding: 12px 14px !important;
  }
  .side-nav h3 { font-size: 14px !important; margin-bottom: 8px !important; }
  .side-nav a { padding: 6px 0 !important; font-size: 13.5px !important; }

  /* ---- 14. Tables → inline horizontal scroll ---- */
  .table-wrap, .schedule-table-wrap, .data-table-wrap, table.scrollable-table {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    margin: 0 -16px 20px !important;
    padding: 0 16px;
  }
  .table-wrap table, .schedule-table-wrap table { min-width: 520px; font-size: 13px; }

  /* ---- 15. Pad blocks (quote / callout) ---- */
  .pad-block, .quote-block, .callout-block, .info-callout {
    padding: 14px !important;
    margin: 14px 0 !important;
    font-size: 13.5px !important;
  }

  /* ---- 16. Hide horizontal scrollbar (cleaner mobile) ---- */
  .apply-timeline::-webkit-scrollbar,
  .uni-editorial::-webkit-scrollbar,
  .office-grid::-webkit-scrollbar,
  .news-grid::-webkit-scrollbar,
  .partner-grad-strip::-webkit-scrollbar,
  .scroll-x::-webkit-scrollbar { height: 4px; }
  .apply-timeline::-webkit-scrollbar-thumb,
  .uni-editorial::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 2px; }

  /* ---- 17. Scroll hint indicator (auto-attached via JS-free trick) ---- */
  .scroll-x-hint {
    display: flex; justify-content: flex-end; align-items: center; gap: 4px;
    font-size: 10.5px; color: var(--ink-muted, #888);
    letter-spacing: 0.12em; text-transform: uppercase;
    margin: 12px 16px -2px;
  }
  .scroll-x-hint::after { content: "→"; font-size: 14px; }

  /* ---- 18. General .scroll-x utility class ---- */
  .scroll-x {
    display: flex !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 12px;
    padding: 8px 16px;
    margin: 0 -16px;
  }
  .scroll-x > * {
    flex: 0 0 82% !important;
    min-width: 260px;
    scroll-snap-align: start;
  }

  /* ---- 19. About-program-card and similar large cards: tighten ---- */
  .about-program-card, .program-overview-card, .info-card {
    padding: 18px !important;
    margin: 16px 0 !important;
  }

  /* ---- 20. Footer compactness ---- */
  footer { padding-top: 24px !important; padding-bottom: 24px !important; }
  footer .footer-inner, footer .container { padding-left: 16px !important; padding-right: 16px !important; }

  /* ---- 21. Image/figure media compactness ---- */
  figure, .figure-block { margin: 16px 0 !important; }

  /* ---- 22. Country comparison or 5 universities tables in country pages ---- */
  .uni-list, .universities-list, .partner-universities-list {
    display: flex !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 12px;
    grid-template-columns: none !important;
    padding: 8px 16px !important;
    margin: 8px -16px 16px !important;
  }
  .uni-list > li, .universities-list > li {
    flex: 0 0 75% !important;
    min-width: 240px;
    scroll-snap-align: start;
    padding: 14px !important;
  }
}

/* =============================================================
   MOBILE-FIRST OPTIMIZATION — Round 2 (2026-06-08)
   - Target: 国別ページ 18000px → 11000px、india-apply 13000px → 7000px
   - Focus: country-twocol / fos-* / faq / app-proc-table
   ============================================================= */
@media (max-width: 768px) {

  /* ---- 23. Country two-col (写真 + 本文) → 1-col tight ---- */
  .country-twocol {
    display: block !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    margin: 16px 0 !important;
  }
  .country-twocol > .image,
  .country-twocol > figure,
  .country-twocol > .visual,
  .country-twocol > .media {
    margin: 0 -16px 16px !important;
    max-height: 200px;
    overflow: hidden;
  }
  .country-twocol > .image img,
  .country-twocol > figure img,
  .country-twocol > .media img { width: 100%; height: auto; }
  .country-twocol > .body { padding: 0 !important; }
  .country-twocol > .body > p { margin: 0 0 12px !important; font-size: 14.5px !important; line-height: 1.55 !important; }
  .country-twocol > .body > h3 { font-size: 16px !important; margin: 14px 0 6px !important; }

  /* ---- 24. Fields of Study (fos-*) → 圧縮 ---- */
  .fos-row {
    display: block !important;
    grid-template-columns: none !important;
    margin: 16px 0 !important;
  }
  .fos-area {
    padding: 14px !important;
    margin: 8px 0 !important;
    border-radius: 4px;
  }
  .fos-area-num { font-size: 14px !important; }
  .fos-area-title { font-size: 15px !important; margin-bottom: 6px !important; line-height: 1.3 !important; }
  .fos-components { gap: 4px !important; }
  .fos-component {
    padding: 8px 10px !important;
    margin: 4px 0 !important;
    font-size: 13px !important;
  }
  .fos-component-issue { font-size: 14px !important; padding: 6px 8px !important; }
  .fos-component-issue-title { font-size: 13px !important; }
  .fos-uni-block {
    padding: 10px !important;
    font-size: 13px !important;
    margin: 6px 0 !important;
  }
  .fos-uni-name { font-size: 14px !important; }
  .fos-uni-degree, .fos-uni-school { font-size: 14px !important; }
  .fos-uni-link { font-size: 14px !important; }
  .fos-flow { gap: 6px !important; }
  .fos-connector { font-size: 14px !important; padding: 2px 4px !important; }

  /* ---- 25. FAQ editorial → compact ---- */
  .faq-editorial {
    margin: 16px 0 !important;
  }
  .faq-cat {
    margin: 16px 0 !important;
    padding: 12px 0 !important;
  }
  .faq-cat h3 { font-size: 14px !important; margin-bottom: 8px !important; }
  .faq-editorial details {
    padding: 10px 0 !important;
    border-bottom: 1px solid var(--hairline, #ddd);
  }
  .faq-editorial summary {
    font-size: 13.5px !important;
    line-height: 1.4 !important;
    padding: 4px 0 !important;
    cursor: pointer;
  }
  .faq-editorial .acc-body, .faq-editorial details[open] > *:not(summary) {
    font-size: 13px !important;
    line-height: 1.55 !important;
    padding-top: 6px !important;
  }

  /* ---- 26. Country details (long text body) → tight ---- */
  .country-details {
    padding: 0 !important;
    margin: 16px 0 !important;
  }
  .country-details > * { margin-bottom: 12px !important; }
  .country-details p { font-size: 14.5px !important; line-height: 1.55 !important; }
  .country-details h2, .country-details h3 { margin-top: 18px !important; }

  /* ---- 27. News bar (国別 hero 下) → compact ---- */
  .news-bar {
    margin: 16px 0 !important;
    padding: 12px 14px !important;
    border-radius: 4px;
  }
  .news-bar-header { margin-bottom: 8px !important; }
  .news-bar-title { font-size: 13px !important; }
  .news-bar-list { gap: 6px !important; }
  .news-bar-list li { font-size: 13px !important; line-height: 1.45 !important; padding: 4px 0 !important; }

  /* ---- 28. Country hero (大型) → コンパクト ---- */
  .country-hero {
    min-height: 200px !important;
    padding: 24px 16px 20px !important;
  }
  .country-hero-bg { opacity: 0.55 !important; }
  .country-hero-kicker { font-size: 13px !important; letter-spacing: 0.15em !important; margin-bottom: 4px !important; }
  .country-hero-title { font-size: 32px !important; line-height: 1.05 !important; margin: 0 0 6px !important; }
  .country-hero-subhead { font-size: 14.5px !important; margin: 0 0 8px !important; }
  .country-hero-lead { font-size: 13.5px !important; line-height: 1.5 !important; margin: 0 0 12px !important; max-width: none !important; }
  .country-hero-cta { gap: 6px !important; }
  .country-hero-cta a, .hero-cta-primary, .hero-cta-secondary {
    padding: 9px 14px !important;
    font-size: 14.5px !important;
    border-radius: 4px;
  }
  .country-hero-uni-strip {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
    gap: 6px;
    margin: 12px -16px 0 !important;
    padding: 4px 16px !important;
    grid-template-columns: none !important;
  }
  .country-hero-uni-strip > * {
    flex: 0 0 auto;
    white-space: nowrap;
    scroll-snap-align: start;
    font-size: 13px !important;
    padding: 4px 8px !important;
  }

  /* ---- 29. app-proc-table (India apply 13 phases) → mobile cards ---- */
  .app-proc-table {
    display: block !important;
    width: 100% !important;
    margin: 16px 0 !important;
  }
  .app-proc-table thead { display: none !important; }
  .app-proc-table tbody { display: block; }
  .app-proc-table tr {
    display: block;
    margin: 0 0 10px !important;
    padding: 12px !important;
    background: var(--paper, #fff);
    border: 1px solid var(--hairline, #ddd);
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
  }
  .app-proc-table td {
    display: block;
    padding: 4px 0 !important;
    border: none !important;
    font-size: 13.5px !important;
  }
  .app-proc-table td:first-child {
    font-weight: 700 !important;
    font-size: 13px !important;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent-deep, #a44);
    margin-bottom: 4px !important;
  }
  .app-proc-table td:nth-child(2) {
    font-size: 15px !important;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 4px !important;
  }
  .app-proc-table td:last-child {
    font-size: 13px !important;
    line-height: 1.5;
    color: var(--ink, #333);
  }
  .proc-date { font-size: 13px !important; }
  .proc-phase { font-size: 14.5px !important; }
  .proc-detail { font-size: 13px !important; }

  /* ---- 30. Accordion default closed look ---- */
  details.accordion {
    border-bottom: 1px solid var(--hairline, #ddd);
    padding: 8px 0 !important;
    margin: 0 !important;
  }
  details.accordion summary {
    font-size: 14px !important;
    padding: 8px 0 !important;
    cursor: pointer;
    list-style: none;
    position: relative;
    padding-right: 24px !important;
  }
  details.accordion summary::after {
    content: "+";
    position: absolute;
    right: 8px; top: 8px;
    font-size: 18px;
    font-weight: 300;
    line-height: 1;
    color: var(--accent-deep, #a44);
  }
  details.accordion[open] summary::after { content: "−"; }
  details.accordion[open] > *:not(summary) {
    padding-top: 8px !important;
    font-size: 13px !important;
    line-height: 1.5;
  }

  /* ---- 31. Generic table responsive wrap (catch-all) ---- */
  main table:not(.app-proc-table):not(.no-mobile-scroll) {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    margin: 0 -16px 16px !important;
    padding: 0 16px;
  }

  /* ---- 32. Long-text body tightening (paragraph margin) ---- */
  main p { margin-bottom: 12px !important; }
  main ul, main ol { margin: 8px 0 12px 1.4em !important; padding-left: 0 !important; }
  main ul li, main ol li { margin-bottom: 4px !important; font-size: 14px !important; }

  /* ---- 33. Sub-hero (india sub-pages) compact ---- */
  .sub-hero {
    min-height: 140px !important;
    padding: 24px 16px !important;
  }
  .sub-hero h1 { font-size: 24px !important; line-height: 1.15 !important; }

  /* ---- 34. Breadcrumb compactness ---- */
  .breadcrumb {
    font-size: 13px !important;
    padding: 8px 16px !important;
    margin: 0 -16px !important;
  }
  .breadcrumb li { font-size: 13px !important; }
}

/* =============================================================
   COUNTRY-SECTION ACCORDION (added 2026-06-08)
   - PC: details は常に「展開」状態に見せる (summary は h2 として表示)
   - Mobile: 折りたたみ、+/- chevron で開閉
   - Hash navigation 時は JS で auto-open
   ============================================================= */

/* --- PC: always-open look. Details element's native collapse is overridden. --- */
@media (min-width: 769px) {
  details.country-section {
    display: block;
    margin: 56px 0 0;
    border: none;
  }
  details.country-section > summary {
    display: block;
    list-style: none;
    cursor: default;
    user-select: text;
    padding: 0;
    margin-bottom: 24px;
    pointer-events: none; /* don't allow accidental click toggling */
  }
  details.country-section > summary::-webkit-details-marker { display: none; }
  details.country-section > summary::after { display: none; }
  /* Force-open look: ensure body content is visible even when [open] is absent.
     Note: details > *:not(summary) is hidden by UA when closed.
     We can't override that for content children directly, so we mark all
     country-section as open via inline open attribute (handled by Python) OR
     use JS. To be safe, treat anything with open attribute as visible.
     For PC, force open via JS as fallback. */
  /* Use the open state styling everywhere */
  details.country-section .cs-section-h2 {
    font-family: var(--ff-serif, "Iowan Old Style", Times, "游明朝", serif);
    font-size: 32px;
    font-weight: 700;
    color: var(--navy, #0f1f44);
    letter-spacing: -0.015em;
    display: inline-flex;
    align-items: baseline;
    gap: 12px;
  }
}

/* --- Mobile: collapsed accordion --- */
@media (max-width: 768px) {
  details.country-section {
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid var(--hairline, #ddd);
    border-top: none;
  }
  details.country-section > summary {
    display: block;
    list-style: none;
    cursor: pointer;
    padding: 18px 36px 18px 0 !important;
    position: relative;
    font-family: var(--ff-serif, serif);
    color: var(--navy, #0f1f44);
    user-select: none;
  }
  details.country-section > summary::-webkit-details-marker { display: none; }
  details.country-section > summary::after {
    content: "+";
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 22px;
    line-height: 1;
    font-weight: 300;
    color: var(--accent-deep, #a44);
    transition: transform 0.2s;
  }
  details.country-section[open] > summary::after {
    content: "−";
  }
  details.country-section > summary .cs-section-h2 {
    font-size: 17px !important;
    line-height: 1.25;
    display: inline;
    font-weight: 700;
  }
  details.country-section > summary .cs-marker {
    font-size: 13px !important;
    width: 22px !important;
    height: 22px !important;
    margin-right: 8px !important;
    display: inline-flex;
    vertical-align: middle;
  }
  details.country-section[open] {
    padding-bottom: 16px !important;
  }
  details.country-section[open] > *:not(summary) {
    padding-top: 4px !important;
  }
  /* When a section gets opened (or has open by default), give the body
     comfortable spacing without being overly tall. */
  details.country-section > *:not(summary) {
    padding-left: 0 !important;
  }
}

/* --- Anchor link compensation (sticky header offset) --- */
details.country-section[id] {
  scroll-margin-top: 80px;
}

/* =============================================================
   MOBILE OVERFLOW PROTECTION + FIGMA CAPTURE MODE (2026-06-08)
   - Ensure body never overflows horizontally on Mobile
   - In Figma capture: expand horizontal scrolls vertically so
     captured frame shows all content without right-edge overflow
   ============================================================= */
@media (max-width: 768px) {

  /* Root overflow protection (Mobile only) */
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
  }
  body > * {
    max-width: 100vw !important;
  }
  /* Tables remain inside their wrap (avoid global table overflow) */
  table:not(.no-mobile-clip) {
    max-width: 100% !important;
  }
  /* Images always fluid */
  img, video, iframe {
    max-width: 100% !important;
    height: auto;
  }
  /* Long URL/text safety */
  p, li, td, dd, dt, summary, h1, h2, h3 {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

/* ============ FIGMA CAPTURE MODE (body.capture-mode) ============
   Activated by capture script via Playwright before serialization.
   Converts horizontal-scroll containers to vertical stacks so the
   captured frame in Figma shows ALL items, fully visible.
   ============================================================== */
@media (max-width: 768px) {
  body.capture-mode .scroll-x,
  body.capture-mode .apply-timeline,
  body.capture-mode .uni-editorial,
  body.capture-mode .office-grid,
  body.capture-mode .offices-grid,
  body.capture-mode .contact-offices-grid,
  body.capture-mode .news-grid,
  body.capture-mode .news-list,
  body.capture-mode .partner-grad-strip,
  body.capture-mode .country-partner-strip,
  body.capture-mode .partner-strip,
  body.capture-mode .country-hero-uni-strip,
  body.capture-mode .uni-list,
  body.capture-mode .universities-list,
  body.capture-mode .partner-universities-list {
    display: block !important;
    overflow-x: visible !important;
    scroll-snap-type: none !important;
    flex-wrap: wrap !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  body.capture-mode .scroll-x > *,
  body.capture-mode .apply-timeline > li,
  body.capture-mode .uni-editorial > *,
  body.capture-mode .office-grid > *,
  body.capture-mode .news-grid > *,
  body.capture-mode .news-list > *,
  body.capture-mode .partner-grad-strip > *,
  body.capture-mode .country-hero-uni-strip > *,
  body.capture-mode .uni-list > *,
  body.capture-mode .universities-list > * {
    flex: none !important;
    flex-basis: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-bottom: 8px !important;
    scroll-snap-align: none !important;
    white-space: normal !important;
  }
  /* Make sure all <details> are open in capture mode for visibility */
  body.capture-mode details.country-section,
  body.capture-mode details.accordion {
    /* JS sets .open = true */
  }
  body.capture-mode details > *:not(summary) {
    display: revert !important;
  }
}

/* ============ EXTRA: country page mobile polish (clean up details) ============ */
@media (max-width: 768px) {
  /* Hub-card grid: keep within frame */
  .hub-cards { padding-left: 0 !important; padding-right: 0 !important; }
  .hub-cards .inner { padding: 16px !important; }

  /* country-hero strict containment */
  .country-hero {
    overflow: hidden;
    position: relative;
  }
  .country-hero-bg, .country-hero img.bg {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
  }

  /* News bar: text wrap properly */
  .news-bar { overflow: hidden; }
  .news-bar-list li { overflow-wrap: anywhere; }

  /* Side nav (sub-pages): max-width safe */
  .side-nav { max-width: 100% !important; }
  .side-nav-list a { display: block; padding: 6px 0; }

  /* Country two-col image: respect max-width */
  .country-twocol > .image,
  .country-twocol > figure,
  .country-twocol > .media {
    width: calc(100% + 32px) !important;
    max-width: calc(100% + 32px) !important;
  }

  /* Generic: any direct child of body must respect viewport */
  main, footer, header, .site-header {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  /* But sections that need internal scroll keep scrollable */
  main .scroll-x,
  main .apply-timeline,
  main .uni-editorial,
  main .office-grid,
  main .news-grid,
  main .partner-grad-strip {
    overflow-x: auto !important;
  }
}

/* =============================================================
   SELECTION SCHEDULE TABLE — Mobile card-form (2026-06-08)
   - PC: native table layout preserved
   - Mobile (≤768px): each <tr> becomes a card with year / date / detail
     vertically stacked. Year (rowspan th) shows once per group only.
   ============================================================= */
@media (max-width: 768px) {
  .selection-schedule,
  .selection-schedule tbody,
  .selection-schedule tr,
  .selection-schedule th,
  .selection-schedule td {
    display: block !important;
    width: auto !important;
    border-collapse: collapse;
  }
  .selection-schedule thead { display: none !important; }

  .selection-schedule {
    margin: 16px 0 24px !important;
    border: none !important;
    background: transparent !important;
  }

  .selection-schedule tr {
    background: var(--paper, #fff) !important;
    border: 1px solid var(--hairline, #ddd) !important;
    border-radius: 6px !important;
    padding: 14px 16px !important;
    margin: 0 0 10px !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
  }

  /* Year-start row: visually distinct top of each year group */
  .selection-schedule tr.year-start {
    border-top: 3px solid var(--accent-deep, #a44) !important;
    background: rgba(255, 250, 240, 0.6) !important;
    margin-top: 18px !important;
  }
  .selection-schedule tr.year-start:first-child { margin-top: 0 !important; }

  /* Year cell (th with rowspan): big serif year header */
  .selection-schedule th[rowspan] {
    font-family: var(--ff-serif, "Iowan Old Style", Times, serif);
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--accent-deep, #a44) !important;
    line-height: 1.1;
    margin: 0 0 8px !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    text-align: left !important;
    letter-spacing: 0;
  }

  /* Date cell (th scope=rowgroup) */
  .selection-schedule th[scope="rowgroup"],
  .selection-schedule th:not([rowspan]) {
    font-family: var(--ff-sans, system-ui, sans-serif);
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--navy, #0f1f44) !important;
    margin: 0 0 6px !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    text-align: left !important;
  }

  /* Detail cell (td) */
  .selection-schedule td {
    font-family: var(--ff-sans, system-ui, sans-serif);
    font-size: 14px !important;
    line-height: 1.55 !important;
    color: var(--ink, #333) !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
  }
  .selection-schedule td strong { color: var(--accent-deep, #a44); }
}

/* =============================================================
   SECOND DRAFT REVISIONS (2026-06-12 JDS meeting agreements)
   ============================================================= */

/* ───────── 1. ES button visibility per page type ───────── */
/* Default: ES hidden everywhere. Show only on TOP and common pages. */
body .lang-switch [data-lang="es"],
body .nav-lang-es { display: none; }
body.page-top .lang-switch [data-lang="es"],
body.page-common .lang-switch [data-lang="es"],
body.page-top .nav-lang-es,
body.page-common .nav-lang-es { display: inline-block; }

/* ───────── 2. Country-hero shade lighter ───────── */
.country-hero-bg::after,
.country-hero-overlay {
  background: linear-gradient(
    to bottom,
    rgba(15, 31, 68, 0.35) 0%,
    rgba(15, 31, 68, 0.50) 100%
  ) !important;
}
/* Reduce hero text shadow burden if needed */
.country-hero-title,
.country-hero-subhead,
.country-hero-lead {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

/* ───────── 3. Country page sidebar TOC (PC) ─────────
   PC: Hero 下に出現 → スクロールで sticky 追従 (India と同じ)
   Mobile: drawer (hamburger) で開閉 (Section 4 参照)
   ─────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  /* Wrapper grid: sidebar 220 + details 1fr */
  body.page-country .country-body-grid {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 40px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 32px 24px 24px;
    align-items: start;
  }
  body.page-country .country-sidebar {
    position: sticky;
    top: 80px;
    width: 220px;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    padding: 20px 16px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid var(--hairline);
    border-radius: 6px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    font-size: 13.5px;
    line-height: 1.5;
    z-index: 30;
    align-self: start;
  }
  body.page-country .country-body-grid section.country-details {
    margin-left: 0;
    max-width: 100%;
  }
  body.page-country .country-toc-toggle {
    display: none;
  }
  .country-sidebar-title {
    font-family: var(--ff-serif);
    font-size: 16px;
    font-weight: 700;
    color: var(--navy);
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--accent);
  }
  .country-sidebar-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .country-sidebar-list li {
    margin: 0;
  }
  .country-sidebar-list a {
    display: block;
    padding: 8px 12px;
    color: var(--ink);
    text-decoration: none;
    border-left: 2px solid transparent;
    transition: all 0.15s ease;
  }
  .country-sidebar-list a:hover {
    color: var(--navy);
    background: rgba(0, 0, 0, 0.02);
    border-left-color: var(--hairline-strong);
  }
  .country-sidebar-list a.is-active {
    color: var(--navy);
    border-left-color: var(--navy);
    font-weight: 700;
    background: rgba(0, 0, 0, 0.03);
  }
}
/* ───────── 4. Mobile/Tablet (<1024px): ハンバーガー常時表示 + 左drawer ─────────
   - ☰ ボタンは画面追従で常に表示 (fixed top:16 left:16)
   - クリックで左から drawer 出現 → "On this page" Page Index 表示
   - リンククリックで該当セクションへ scroll → drawer 閉じる (JS 既存)
   ─────────────────────────────────────────────────── */
@media (max-width: 1023px) {
  body.page-country .country-body-grid {
    display: block;
    padding: 0;
    max-width: none;
  }

  body.page-country .country-toc-toggle {
    position: fixed;
    top: 16px;
    left: 16px;
    z-index: 100;
    width: 48px;
    height: 48px;
    background: var(--navy);
    color: #fff;
    border: none;
    border-radius: 50%;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  body.page-country .country-toc-toggle::before { content: "☰"; }
  body.page-country.toc-open .country-toc-toggle::before { content: "✕"; }

  body.page-country .country-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 85%;
    max-width: 320px;
    background: #fff;
    box-shadow: 4px 0 16px rgba(0, 0, 0, 0.2);
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    z-index: 99;
    padding: 80px 20px 24px;
    overflow-y: auto;
    border: none;
    border-radius: 0;
    max-height: none;
    align-self: initial;
  }
  body.page-country.toc-open .country-sidebar { transform: translateX(0); }
  body.page-country.toc-open::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 98;
  }

  body.page-country .country-sidebar-title {
    font-family: var(--ff-serif);
    font-size: 18px;
    font-weight: 700;
    color: var(--navy);
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--accent);
    letter-spacing: 0.04em;
  }
  body.page-country .country-sidebar-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  body.page-country .country-sidebar-list li { margin: 0; }
  body.page-country .country-sidebar-list a {
    display: block;
    padding: 12px 14px;
    color: var(--ink);
    text-decoration: none;
    border-left: 3px solid transparent;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    transition: all 0.15s ease;
  }
  body.page-country .country-sidebar-list a:hover,
  body.page-country .country-sidebar-list a.is-active {
    color: var(--navy);
    background: rgba(0, 0, 0, 0.03);
    border-left-color: var(--navy);
    font-weight: 700;
  }
}

/* (5. India partner logo strip — removed: JICA/placeholder logos 許諾未取得のため削除) */

/* ───────── 6. Download Documents section ───────── */
.download-docs {
  background: #fafaf6;
  border-top: 3px solid var(--accent);
  padding: 36px 32px;
  margin: 56px 0 0;
}
.download-docs-title {
  font-family: var(--ff-serif);
  font-size: 24px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}
.download-docs-desc {
  font-size: 14.5px;
  color: var(--ink);
  margin: 0 0 20px;
  line-height: 1.55;
}
.download-docs-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.download-docs-list a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 4px;
  text-decoration: none;
  color: var(--ink);
  font-size: 14px;
  transition: all 0.15s ease;
}
.download-docs-list a:hover {
  border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transform: translateY(-1px);
}
.download-docs-list .doc-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--accent);
  color: #fff;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}
.download-docs-list .doc-meta {
  font-size: 12px;
  color: var(--ink-muted);
  display: block;
  margin-top: 2px;
}
@media (max-width: 768px) {
  .download-docs { padding: 24px 16px; margin: 32px -16px 0; }
  .download-docs-list { grid-template-columns: 1fr; gap: 8px; }
}

/* ───────── 7. TAO video section ───────── */
.tao-section {
  margin: 56px 0;
  padding: 32px;
  background: linear-gradient(180deg, #f9f6ef 0%, #ffffff 100%);
  border-top: 3px solid var(--navy);
  border-radius: 0;
}
.tao-section-title {
  font-family: var(--ff-serif);
  font-size: 28px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 8px;
}
.tao-section-kicker {
  font-family: var(--ff-sans);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-deep);
  font-weight: 700;
  margin: 0 0 16px;
}
.tao-section-desc {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  margin: 0 0 24px;
  max-width: 720px;
}
.tao-video-embed {
  position: relative;
  width: 100%;
  max-width: 880px;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 4px;
  overflow: hidden;
  margin: 0 auto 20px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
.tao-video-embed iframe,
.tao-video-embed img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}
.tao-video-title {
  text-align: center;
  font-size: 15px;
  color: var(--ink);
  margin: 0 0 16px;
}
.tao-manual-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: #fff;
  border: 1px solid var(--navy);
  color: var(--navy);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 4px;
  transition: all 0.15s ease;
}
.tao-manual-link:hover {
  background: var(--navy);
  color: #fff;
}
@media (max-width: 768px) {
  /* バナー直下に隙間なし、視覚的に左右対称 (negative margin 撤廃) */
  .tao-section { padding: 24px 16px; margin: 0 0 24px; }
  .tao-section-title { font-size: 22px; }
  /* video は中央寄せ・親 padding 内に収める */
  .tao-video-embed { margin: 0 auto 16px; border-radius: 4px; max-width: 100%; }
}


/* ───────── 8. Alumni voice card with photo ───────── */
/* Old circular voice-photo avatar removed (2026-06-28): it set border-radius:50%
   + a 👤 emoji placeholder and conflicted with the per-page rectangular
   testimonial-style voice-card (defined inline in life-of-jds-fellows.html),
   causing the photo to render as an ellipse. */


/* ───────── 9. India application schedule timeline (時系列強調) ─────────
   注意: かつて tbody/tr に display:table を適用して 'card 風' にしていたが、
   それが原因で行が右にカスケードする bug を発生させていた。
   table 構造を維持したまま、矢印は td.proc-phase の ::after で描画する。 */

/* PC: 矢印 ▼ を行間 gap の中央に配置 (border-spacing で開いた gap 内) */
@media (min-width: 769px) {
  .app-proc-table tbody tr:not(:last-child) > td.proc-phase {
    position: relative;
    overflow: visible;
  }
  .app-proc-table tbody tr:not(:last-child) > td.proc-phase::after {
    content: "▼";
    position: absolute;
    left: 50%;
    bottom: -28px;  /* 行 gap 32px の中央あたりに配置 */
    transform: translateX(-50%);
    color: var(--accent, #c9302c);
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    z-index: 5;
    text-shadow: 0 0 2px #fff, 0 0 6px #fff;  /* 矢印の周囲を白くフチ取り */
  }
}

/* Mobile: tbody が card-form 化されているので tr + tr の position 関係も OK */
@media (max-width: 768px) {
  .app-proc-table tbody tr + tr {
    position: relative;
    margin-top: 36px !important;
  }
  .app-proc-table tbody tr + tr::before {
    content: "▼";
    position: absolute;
    top: -28px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 16px;
    color: var(--accent-deep, #a44);
    background: var(--paper, #fff);
    padding: 2px 6px;
    border-radius: 50%;
    z-index: 2;
  }
}

/* ───────── For Current JDS Fellows — Handbook & Downloads ───────── */
.fellows-banner-title {
  font-family: var(--ff-sans);
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  background: var(--navy, #2a4a8e);
  padding: 16px 24px;
  margin: 36px 0 24px;
  letter-spacing: 0.02em;
  border-radius: 2px;
}
.fellows-subhead {
  font-family: var(--ff-sans);
  font-size: 19px;
  font-weight: 700;
  color: var(--navy, #2a4a8e);
  margin: 32px 0 16px;
  padding-left: 12px;
  border-left: 4px solid var(--accent);
}
.fellows-subhead-pending {
  color: var(--navy, #2a4a8e);
  font-weight: 600;
  opacity: 0.9;
}
.fellows-form-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.fellows-form-list li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 8px;
  border-bottom: 1px solid var(--hairline);
}
.fellows-form-list li:last-child {
  border-bottom: none;
}
.fellows-form-list .form-num {
  flex: 0 0 24px;
  font-family: var(--ff-sans);
  font-weight: 600;
  color: var(--ink);
}
.fellows-form-list .form-name {
  flex: 1;
  font-family: var(--ff-sans);
  font-size: 15px;
  color: var(--ink);
  line-height: 1.5;
}
.fellows-form-list .form-dl,
p .form-dl {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #c0392b;
  text-decoration: none;
  font-family: var(--ff-sans);
  font-size: 14px;
  font-weight: 500;
}
.fellows-form-list .form-dl:hover,
p .form-dl:hover { text-decoration: underline; }
.form-dl-label { color: #c0392b; }
.form-dl-type {
  display: inline-block;
  background: var(--navy, #2a4a8e);
  color: #fff;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  border-radius: 2px;
}
.form-dl-type-pdf {
  background: #c0392b;
}
@media (max-width: 768px) {
  .fellows-banner-title {
    font-size: 17px;
    padding: 12px 16px;
    margin: 24px 0 16px;
  }
  .fellows-subhead {
    font-size: 16px;
    margin: 24px 0 12px;
  }
  .fellows-form-list li {
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 4px;
  }
  .fellows-form-list .form-name {
    flex: 1 1 100%;
    font-size: 14px;
  }
  .fellows-form-list .form-num {
    flex: 0 0 auto;
  }
}

/* =============================================================
   MOBILE-FIRST OPTIMIZATION — Round 3: Typography fine-tuning (2026-06-19)
   Goal: PC とスマホで別物として最適化、スマホは窮屈感解消のため全体縮小
   Round 1/2 でカバー漏れの hero-title / subhead / section-title 等を補完
   ============================================================= */
@media (max-width: 768px) {

  /* R3-1. main h4 */
  main h4 { font-size: 15px !important; line-height: 1.4 !important; margin: 20px 0 8px !important; }

  /* R3-2. Top utility bar */
  .top-util { font-size: 12px !important; }
  .top-util .inner { padding: 6px 16px !important; gap: 12px !important; }

  /* R3-3. Primary nav dropdown */
  .primary-nav .submenu a { font-size: 13px !important; padding: 10px 14px !important; }

  /* R3-4. Breadcrumb */
  .breadcrumb .inner { font-size: 12.5px !important; padding: 10px 16px !important; }

  /* R3-5. Hero overlay (TOP page) */
  .hero-overlay h1 { font-size: 28px !important; line-height: 1.18 !important; margin-bottom: 14px !important; }
  .hero-overlay .lead { font-size: 14.5px !important; line-height: 1.55 !important; margin-bottom: 18px !important; }
  .hero-cta-primary,
  .hero-cta-secondary { font-size: 13px !important; padding: 12px 20px !important; }

  /* R3-6. Hero Full (Hub page) */
  .hero-full { min-height: 380px !important; }
  .hero-full .hero-kicker { font-size: 11px !important; letter-spacing: 0.16em !important; margin-bottom: 14px !important; }
  .hero-full .hero-title { font-size: 30px !important; line-height: 1.1 !important; margin-bottom: 14px !important; }
  .hero-full .hero-lead { font-size: 14.5px !important; line-height: 1.55 !important; margin-bottom: 18px !important; }
  .hero-full .hero-cta-primary,
  .hero-full .hero-cta-secondary { font-size: 13px !important; padding: 12px 20px !important; }
  .hero-full .hero-uni-strip::before { font-size: 9.5px !important; letter-spacing: 0.14em !important; }
  .hero-full .hero-uni-strip li { font-size: 11px !important; padding: 5px 9px !important; }

  /* R3-7. Sub-hero */
  .sub-hero { min-height: 180px !important; }
  .sub-hero-overlay { padding: 24px 0 !important; }
  .sub-hero .kicker { font-size: 11px !important; letter-spacing: 0.14em !important; margin-bottom: 8px !important; }
  .sub-hero h1 { font-size: 26px !important; line-height: 1.18 !important; }

  /* R3-8. Country Hero (CRITICAL — clamp 56-96px 残存対策) */
  .country-hero { min-height: 280px !important; padding: 32px 0 28px !important; }
  .country-hero-inner { padding: 0 16px !important; }
  .country-hero-flag { width: 72px !important; max-height: 48px !important; margin-bottom: 14px !important; }
  .country-hero-kicker { font-size: 11px !important; letter-spacing: 0.14em !important; margin-bottom: 12px !important; }
  .country-hero-title { font-size: 32px !important; line-height: 1.05 !important; margin: 0 0 10px !important; letter-spacing: -0.015em !important; }
  .country-hero-subhead { font-size: 18px !important; line-height: 1.3 !important; margin: 0 0 14px !important; }
  .country-hero-lead { font-size: 14.5px !important; line-height: 1.55 !important; margin: 0 0 20px !important; }
  .country-hero-uni-strip { gap: 8px 14px !important; padding-top: 16px !important; }
  .country-hero-uni-strip::before { font-size: 9.5px !important; letter-spacing: 0.16em !important; }
  .country-hero-uni-strip li,
  .country-hero-uni-strip li.placeholder { font-size: 12px !important; }

  /* R3-9. Country section title & body */
  .country-section-title { font-size: 22px !important; line-height: 1.25 !important; margin: 48px 0 18px !important; padding-bottom: 10px !important; letter-spacing: -0.005em !important; }
  .country-section-title + p { font-size: 15px !important; line-height: 1.55 !important; margin-bottom: 1em !important; }
  .country-details { padding: 24px 0 56px !important; }
  .country-details > .inner { padding: 0 16px !important; }
  .country-details p,
  .country-details ul,
  .country-details ol { font-size: 14.5px !important; line-height: 1.65 !important; }
  .country-details li { line-height: 1.6 !important; margin-bottom: 8px !important; }
  .country-twocol h3 { font-size: 17px !important; line-height: 1.3 !important; }

  /* R3-10. Tabs & side nav */
  .tabs > .tab-bar label { font-size: 13px !important; padding: 11px 12px !important; }
  .side-nav-title { font-size: 13px !important; }
  .side-nav-list a { font-size: 14px !important; padding: 9px 14px !important; }

  /* R3-11. Testimonial */
  .testimonial blockquote { font-size: 14.5px !important; line-height: 1.6 !important; }
  .testimonial .meta { font-size: 13px !important; }

  /* R3-12. Callouts */
  .callout,
  .callout-urgent,
  .callout-info { font-size: 13.5px !important; padding: 14px 16px !important; }
  .callout-urgent .badge { font-size: 11px !important; padding: 2px 8px !important; }

  /* R3-13. Data tables — make smaller for mobile readability */
  .data-table { font-size: 12.5px !important; }
  .data-table th,
  .data-table td { padding: 8px 10px !important; }

  /* R3-14. News list & country card meta */
  .news-list li { font-size: 13.5px !important; }
  .news-list li .date,
  .news-list li .country { font-size: 11.5px !important; }
  .country-card .name { font-size: 15px !important; }
  .country-card .meta { font-size: 13px !important; }
  .country-card .meta-cta { font-size: 12.5px !important; }

  /* R3-15. Footer typography (and stack 4-col → 2-col on mobile) */
  footer h4 { font-size: 12px !important; }
  footer .org p,
  footer ul li,
  footer ul li a { font-size: 12.5px !important; }
  footer .copyright { font-size: 12px !important; }

  /* R3-16. Why Japan benefit cards */
  .why-japan { padding: 32px 0 !important; }
  .why-japan h2 { font-size: 22px !important; margin-bottom: 18px !important; }
  .why-card { padding: 18px 14px !important; }
  .why-card h3 { font-size: 15px !important; }
  .why-card p { font-size: 12.5px !important; }
  .why-card .ico { width: 44px !important; height: 44px !important; font-size: 18px !important; }

  /* R3-17. Sticky CTA */
  .sticky-cta { font-size: 13px !important; padding: 11px 16px !important; }

  /* R3-18. Fellows banner & subhead */
  .fellows-banner-title { font-size: 16px !important; padding: 12px 16px !important; }
  .fellows-subhead { font-size: 15px !important; }
  .fellows-form-list .form-name { font-size: 13.5px !important; }
  .fellows-form-list .form-dl,
  p .form-dl { font-size: 13px !important; }

  /* R3-19. Accordion summaries */
  details.accordion summary { font-size: 14px !important; padding: 12px 14px !important; gap: 10px !important; }
  details.accordion .acc-body { font-size: 13.5px !important; padding: 4px 14px 14px 42px !important; }

  /* R3-20. Process / selection / application steps */
  .process-list li .step-title { font-size: 15px !important; }
  .process-list li .step-desc { font-size: 13.5px !important; }
  .process-list li > .step-marker { font-size: 13px !important; }
}

/* =============================================================
   DEFENSIVE: india-eligibility 系 sub-page footer overflow耐性
   ============================================================= */
body.page-sub main {
  padding-bottom: 40px;
}
.page-body {
  min-height: calc(100vh - 800px);
}
.page-nav-bottom {
  margin-bottom: 32px;
}
@media (min-width: 1024px) {
  body.page-sub .side-nav {
    position: sticky;
    top: 80px;
    align-self: start;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
  }
}

/* ===== v3: Eligibility カードグリッド統一 (全国共通 / 緑・赤 / アイコン無し / 1行3枚カード) ===== */
.elig-subhead{ font-size:.85rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; margin:0 0 12px; display:flex; align-items:baseline; gap:8px; }
.elig-subhead-yes{ color:#15803d; }
.elig-subhead-no{ color:#b91c1c; margin-top:22px; }
.elig-note{ font-size:.75rem; font-weight:400; color:#6b7280; text-transform:none; letter-spacing:0; }
.elig-list{ list-style:none; margin:0 0 6px; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.elig-list li{ display:flex; flex-direction:column; gap:3px; padding:14px 16px; border-radius:9px; font-size:13.5px; line-height:1.5; }
.elig-list-yes li{ background:#f0fdf4; border:1px solid #bbf7d0; color:#14532d; }
.elig-list-no li{ background:#fef2f2; border:1px solid #fecaca; color:#7f1d1d; }
.elig-list li .e-key{ font-weight:700; font-size:13px; }
.elig-list li .e-val{ font-weight:400; }
@media (max-width:900px){ .elig-list{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .elig-list{ grid-template-columns:1fr; } }
/* 旧アイコン/丸マークは無効化 */
.elig-list li .e3-mark, .elig-list li .e-mark, .elig-list li .e-icon, .elig-list li .elig-icon, .elig-list li .e3-ico { display:none !important; }

/* Additional elig-list / elig-subhead colour variants (Tier4 共通ページのカードセクションを
   国別 ELIGIBILITY と同じ構成に統一。緑/赤に限らず項目ごとに最適色を割当, 2026-06-28) */
.elig-subhead-blue   { color:#1d4ed8; }
.elig-subhead-amber  { color:#b45309; }
.elig-subhead-slate  { color:#475569; }
.elig-subhead-teal   { color:#0f766e; }
.elig-subhead-purple { color:#7e22ce; }
.elig-list-blue   li { background:#eff6ff; border:1px solid #bfdbfe; color:#1e3a8a; }
.elig-list-amber  li { background:#fffbeb; border:1px solid #fde68a; color:#78350f; }
.elig-list-slate  li { background:#f8fafc; border:1px solid #e2e8f0; color:#334155; }
.elig-list-teal   li { background:#f0fdfa; border:1px solid #99f6e4; color:#134e4a; }
.elig-list-purple li { background:#faf5ff; border:1px solid #e9d5ff; color:#581c87; }

/* =========================================================
   Eligibility section title — UNIFIED across all country pages
   (2026-06-27) "3 Eligibility" = orange text + bold, NO highlight box.
   id-specificity + !important overrides every per-page inline rule.
   ===================================================== */
#eligibility > summary .cs-marker {
  background: transparent !important;
  color: #c25a0a !important;
}
#eligibility > summary .cs-section-h2 {
  color: #c25a0a !important;
  font-weight: 700 !important;
}
.country-section-elig {
  border-left: none !important;
  padding-left: 0 !important;
}

/* =========================================================
   News / notes cards — UNIFIED (Fiji format) across all
   country & common pages (2026-06-27).
   Single source of truth; per-page inline overrides removed.
   ===================================================== */
.news-card-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.news-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-left: 4px solid #e87722;
  border-radius: 6px;
  padding: 12px 16px;
  flex: 1 1 260px;
  min-width: 220px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.news-card-date {
  font-size: .75rem;
  font-weight: 700;
  color: #e87722;
  letter-spacing: .03em;
  margin-bottom: 4px;
}
.news-card-msg {
  font-size: .875rem;
  color: #374151;
  line-height: 1.5;
}

/* =========================================================
   News carousel — country pages + India hub (2026-06-27)
   3 cards visible + circular "next" button to the right of the
   3rd card. Cards beyond the 3rd slide in (horizontal scroll-snap).
   Desktop: 3 visible. Mobile: ~1.1 visible + peek.
   ===================================================== */
.news-carousel { position: relative; min-width: 0; }
.news-carousel .news-track {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  margin: 0;
  padding: 0 0 4px;
  list-style: none;
  min-width: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.news-carousel .news-track::-webkit-scrollbar { display: none; }
.news-carousel .news-track .news-card {
  flex: 0 0 calc((100% - 24px) / 3);
  scroll-snap-align: start;
}
.news-carousel .news-card.is-dummy {
  border-left-color: #b7bcc6;
  background: repeating-linear-gradient(135deg, #fafbfc, #fafbfc 9px, #f1f3f6 9px, #f1f3f6 18px);
}
.news-carousel .news-card.is-dummy .news-card-date { color: #9aa1ad; }
.news-next {
  position: absolute;
  top: 50%;
  right: -8px;
  transform: translateY(-50%);
  width: 40px; height: 40px;
  border-radius: 50%;
  background: #e87722;
  color: #fff;
  border: 2px solid #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; line-height: 1; font-weight: 700;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  z-index: 4;
}
.news-next:hover { background: #c9651a; }
@media (max-width: 700px) {
  .news-carousel .news-track .news-card { flex: 0 0 80%; }
  .news-next { right: 0; width: 36px; height: 36px; font-size: 20px; }
}

/* =========================================================
   India sub-pages (.page-sub) — mobile hamburger drawer (2026-06-27)
   国別ページと同一 UX: モバイルでは inline の "JDS India" Index を廃し、
   ☰ ハンバーガーで左 drawer 開閉。デスクトップは従来の sticky sidebar 維持。
   ===================================================== */
body.page-sub .country-toc-toggle { display: none; }
@media (max-width: 1023px) {
  body.page-sub .country-toc-toggle {
    display: flex;
    position: fixed;
    top: 16px;
    left: 16px;
    z-index: 100;
    width: 48px;
    height: 48px;
    background: var(--navy);
    color: #fff;
    border: none;
    border-radius: 50%;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    font-size: 22px;
    align-items: center;
    justify-content: center;
  }
  body.page-sub .country-toc-toggle::before { content: "\2630"; }
  body.page-sub.toc-open .country-toc-toggle::before { content: "\2715"; }

  body.page-sub .side-nav {
    position: fixed !important;
    top: 0;
    left: 0;
    bottom: 0;
    width: 85% !important;
    max-width: 320px !important;
    margin: 0 !important;
    padding: 80px 20px 24px !important;
    background: #fff;
    box-shadow: 4px 0 16px rgba(0, 0, 0, 0.2);
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    z-index: 99;
    overflow-y: auto;
    border: none;
    border-radius: 0;
  }
  body.page-sub.toc-open .side-nav { transform: translateX(0); }
  body.page-sub.toc-open::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 98;
  }
  body.page-sub .side-nav-title {
    font-family: var(--ff-serif);
    font-size: 18px !important;
    font-weight: 700;
    color: var(--navy);
    margin: 0 0 16px !important;
    padding: 0 0 12px !important;
    border-bottom: 2px solid var(--accent);
    text-transform: none;
    letter-spacing: 0.04em;
  }
  body.page-sub .side-nav-list a { font-size: 15px !important; padding: 12px 14px !important; }
}

/* =========================================================
   FAQ — UNIFIED design across all country + India pages
   (2026-06-27) India「Information Sessions & FAQ」のボックス型に統一。
   ===================================================== */
.faq-list { margin-top: 18px; }
.faq-list .faq-cat {
  font-family: var(--ff-sans);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--navy);
  letter-spacing: 0.02em;
  margin: 22px 0 10px;
}
.faq-list .faq-cat:first-child { margin-top: 0; }
.faq-list > details {
  border: 1px solid #ddd;
  border-radius: 6px;
  margin-bottom: 12px;
  overflow: hidden;
  background: #fff;
}
.faq-list > details > summary {
  padding: 14px 18px;
  font-weight: 600;
  font-size: 0.92rem;
  color: #1f2937;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  background: #f8f8f8;
}
.faq-list > details > summary::-webkit-details-marker { display: none; }
.faq-list > details > summary::after {
  content: "\25BC";
  font-size: 0.8em;
  flex-shrink: 0;
  color: #6b7280;
  transition: transform 0.2s;
}
.faq-list > details[open] > summary::after { transform: rotate(180deg); }
.faq-list > details > .faq-body {
  padding: 14px 18px;
  border-top: 1px solid #ddd;
  font-size: 0.9rem;
  color: #374151;
  line-height: 1.65;
}
.faq-list > details > .faq-body p { margin: 0 0 8px; }
.faq-list > details > .faq-body p:last-child { margin-bottom: 0; }

/* India Who-can-apply: eligible-services list — 2 cols desktop, 1 col mobile (avoid text clipping) */
.elig-services-cols { columns: 2; column-gap: 24px; }
@media (max-width: 600px) { .elig-services-cols { columns: 1; } }

/* =========================================================
   TAO tutorial videos — V3-styled (white card + orange accent,
   navy serif title). Layout: title left / video right. (2026-06-27)
   ===================================================== */
.tao-tut-note {
  color: var(--accent-deep);
  font-weight: 700;
  font-size: 0.9rem;
  margin: 14px 0 12px;
  padding: 10px 14px;
  background: var(--cream);
  border-left: 4px solid var(--accent);
  border-radius: 4px;
}
.tao-tutorials { display: flex; flex-direction: column; gap: 12px; margin: 12px 0 4px; }
.tao-tut-row {
  display: grid;
  grid-template-columns: 300px 1fr;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-left: 4px solid var(--accent);
  border-radius: 6px;
  overflow: hidden;
}
.tao-tut-title {
  padding: 18px 22px;
  display: flex;
  align-items: center;
  font-family: var(--ff-serif);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--navy);
  line-height: 1.35;
  letter-spacing: -0.005em;
}
.tao-tut-video { padding: 14px 16px; }
.tao-tut-video a { position: relative; display: block; border-radius: 4px; overflow: hidden; }
.tao-tut-video img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.tao-tut-video .tao-tut-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 60px; height: 42px; background: var(--accent); border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.tao-tut-video .tao-tut-play::before {
  content: ""; border-style: solid; border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent #fff; margin-left: 3px;
}
@media (max-width:760px){
  .tao-tut-row { grid-template-columns: 1fr; }
  .tao-tut-title { padding: 13px 16px; font-size: 0.98rem; }
}
@media (max-width:760px){ .tao-tut-row { grid-template-columns:1fr; } .tao-tut-title { padding:12px 16px; } }

/* =========================================================
   How-to-apply migrated content (live) — doc checklist table + steps
   (2026-06-27) V3-styled.
   ===================================================== */
.howto-step-h { font-family: var(--ff-serif); font-size: 17px; font-weight: 700; color: var(--navy); margin: 20px 0 8px; }
.howto-deadline { background: var(--cream); border-left: 4px solid var(--accent); border-radius: 4px; padding: 10px 14px; font-weight: 700; color: var(--accent-deep); margin: 14px 0; }
.howto-doc-table { width: 100%; border-collapse: collapse; margin: 12px 0 8px; font-size: 13.5px; }
.howto-doc-table th, .howto-doc-table td { border: 1px solid var(--hairline); padding: 9px 12px; text-align: left; vertical-align: top; line-height: 1.5; }
.howto-doc-table thead th { background: var(--navy); color: #fff; font-weight: 700; font-size: 13px; }
.howto-doc-table tbody tr:nth-child(even) { background: var(--cream); }
.howto-doc-table tbody td:first-child { text-align: center; font-weight: 700; color: var(--navy); width: 40px; }
.howto-wrap { overflow-x: auto; }
@media (max-width: 600px){ .howto-doc-table { font-size: 12.5px; } .howto-doc-table th, .howto-doc-table td { padding: 7px 8px; } }

/* ── Fields of Study: Target organizations row (ES-style, shared across all country pages) ── */
.fos-target-org {
  margin: 6px 0 10px;
  padding: 6px 10px;
  background: #fff8f2;
  border-left: 3px solid #E86B2C;
  border-radius: 3px;
  font-size: .82rem;
  color: #5a4030;
  line-height: 1.55;
}
.fos-target-org-label { font-weight: 700; color: #E86B2C; margin-right: .4em; }

/* Unify apply-timeline step-number colour across all country pages (2026-06-28)
   These badges explain the application method/details, not a sequential step
   状態 (deadline/final). White/orange/blue colour-coding was misleading, so all
   markers now share one neutral style. */
.apply-timeline li.is-final > .step-marker,
.apply-timeline li.is-deadline > .step-marker {
  background: var(--paper) !important;
  border-color: var(--navy) !important;
  color: var(--navy) !important;
}