:root {
  --navy: #0d315f;
  --navy-deep: #071f3c;
  --blue: #4d7fac;
  --sky: #b9cedd;
  --ochre: #e9b86b;
  --ivory: #f7f3ec;
  --warm-white: #fcfaf6;
  --white: #fff;
  --ink: #172233;
  --muted: #667082;
  --line: rgba(13, 49, 95, .14);
  --page-gutter: max(44px, calc((100vw - 1440px) / 2 + 70px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--warm-white);
  font-family: "Noto Sans JP", sans-serif;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: anywhere;
}
a { color: inherit; }
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: "Shippori Mincho", serif; }

.site-header {
  position: sticky;
  z-index: 100;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 84px;
  padding: 0 var(--page-gutter);
  border-bottom: 1px solid rgba(13, 49, 95, .08);
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(18px);
}
.brand {
  display: flex;
  align-items: center;
  width: 158px;
  height: 100%;
}
.brand img {
  width: 145px;
  max-height: 76px;
  height: auto;
  object-fit: contain;
}
.site-header nav { display: flex; align-items: center; gap: 30px; font-size: 13px; font-weight: 600; }
.site-header nav a { text-decoration: none; }
.site-header nav > a:not(.nav-cta) { color: #526075; }
.nav-cta { padding: 11px 19px; border-radius: 999px; background: var(--navy); color: white; }

.eyebrow {
  margin-bottom: 22px;
  color: var(--ochre);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2em;
}
.eyebrow.dark { color: var(--blue); }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  min-height: 56px;
  padding: 0 26px;
  border: 1px solid transparent;
  border-radius: 2px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: transform .2s, box-shadow .2s, background .2s;
}
.button:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(7,31,60,.16); }
.button-primary { background: var(--navy); color: white; }
.button-secondary { border-color: var(--line); background: rgba(255,255,255,.55); color: var(--navy); }
.button-light { background: white; color: var(--navy); }

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  min-height: calc(100vh - 84px);
  overflow: hidden;
  background: linear-gradient(110deg, var(--ivory) 0%, var(--warm-white) 54%, #edf3f7 100%);
}
.hero-copy {
  z-index: 2;
  align-self: center;
  padding: 80px clamp(42px, 4.5vw, 86px) 90px var(--page-gutter);
}
.hero-label {
  display: inline-block;
  margin-bottom: 18px;
  padding: 7px 11px;
  border-left: 3px solid var(--ochre);
  background: rgba(255,255,255,.7);
  color: var(--navy);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.hero h1 {
  margin-bottom: 26px;
  color: var(--navy-deep);
  font-size: clamp(36px, 3.1vw, 56px);
  font-weight: 600;
  line-height: 1.38;
  letter-spacing: .015em;
}
.hero-title-line { display: block; white-space: nowrap; }
.hero-title-line > span { display: inline; }
.hero-title-sub { margin-top: .22em; color: var(--blue); font-size: .72em; }
.hero-lead { max-width: 620px; margin-bottom: 34px; color: #47566b; font-size: 15px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-note { margin: 18px 0 0; color: var(--muted); font-size: 12px; }
.hero-disclaimer { margin: 5px 0 0; color: #717b8b; font-size: 12px; }
.hero-visual {
  position: relative;
  min-height: 620px;
  margin: 46px 46px 46px 0;
  overflow: hidden;
  border-radius: 2px 2px 72px 2px;
  box-shadow: 0 28px 70px rgba(7,31,60,.17);
}
.hero-visual::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(90deg, rgba(7,31,60,.12), transparent 45%);
  pointer-events: none;
}
.hero-visual > img { width: 100%; height: 100%; object-fit: cover; object-position: 59% center; }
.visual-note {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  width: min(360px, 78%);
  padding: 25px 30px;
  background: rgba(7,31,60,.92);
  color: white;
}
.visual-note span { display: block; margin-bottom: 6px; color: var(--ochre); font-size: 10px; letter-spacing: .16em; }
.visual-note strong { font-family: "Shippori Mincho", serif; font-size: 18px; font-weight: 500; }
.intro {
  display: grid;
  grid-template-columns: minmax(320px, .85fr) minmax(420px, 1fr);
  grid-template-rows: auto auto;
  align-items: start;
  column-gap: clamp(60px, 8vw, 130px);
  row-gap: 0;
  padding: 130px var(--page-gutter);
  background: var(--white);
}
.intro-heading { display: contents; }
.intro-heading .eyebrow {
  grid-column: 1;
  grid-row: 1;
  transform: translateY(-8px);
}
.intro-heading h2 {
  grid-column: 1;
  grid-row: 2;
  align-self: center;
  transform: translateY(-8px);
}
.intro h2, .section-heading h2, .program h2, .story h2, .outline h2, .entry h2 {
  margin: 0;
  color: var(--navy);
  font-size: clamp(30px, 3.6vw, 50px);
  font-weight: 600;
  line-height: 1.55;
}
.intro-copy {
  grid-column: 2;
  grid-row: 2;
  align-self: center;
  max-width: 620px;
  color: #536174;
  font-size: 15px;
  transform: translateY(-8px);
}
.intro-copy p:last-child { margin-bottom: 0; }

.value-section { padding: 120px var(--page-gutter) 130px; background: var(--ivory); }
.section-heading {
  display: grid;
  grid-template-columns: minmax(320px, .85fr) minmax(420px, 1fr);
  grid-template-rows: auto auto;
  align-items: start;
  column-gap: clamp(60px, 8vw, 130px);
  row-gap: 0;
  max-width: none;
  margin: 0 auto 66px;
}
.section-heading-copy { display: contents; }
.section-heading-copy .eyebrow {
  grid-column: 1;
  grid-row: 1;
  transform: translateY(-8px);
}
.section-heading-copy h2 {
  grid-column: 1;
  grid-row: 2;
  align-self: center;
  transform: translateY(-8px);
}
@media (min-width: 981px) {
  .section-heading-copy h2 { padding-left: clamp(18px, 1.4vw, 32px); }
}
.heading-number {
  display: inline-block;
  width: 1em;
  text-align: center;
}
.section-heading > p {
  grid-column: 2;
  grid-row: 2;
  align-self: center;
  max-width: 620px;
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  transform: translateY(-8px);
}
.value-grid { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 1240px; margin: 0 auto; border-top: 1px solid var(--line); }
.value-grid article { position: relative; min-height: 370px; padding: 42px 35px 38px; border-right: 1px solid var(--line); }
.value-grid article:first-child { border-left: 1px solid var(--line); }
.card-line { width: 34px; height: 2px; margin: 8px 0 30px; background: var(--ochre); }
.value-grid h3 { margin-bottom: 18px; color: var(--navy); font-size: clamp(19px, 1.45vw, 23px); line-height: 1.65; }
.value-grid p { color: #5d6878; font-size: 14px; }
.tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 28px; }
.tags span { padding: 5px 10px; border: 1px solid rgba(77,127,172,.25); border-radius: 999px; color: var(--blue); font-size: 11px; }

.program { display: grid; grid-template-columns: minmax(390px, .8fr) minmax(0, 1.2fr); gap: clamp(60px, 6vw, 100px); padding: 135px var(--page-gutter); background: var(--navy-deep); color: white; }
.program-intro { position: sticky; top: 130px; align-self: start; }
.program h2 { color: white; }
.program h2 { font-size: clamp(34px, 3vw, 50px); }
.program-title-line { display: block; white-space: nowrap; }
.program-intro > p:last-child { max-width: 590px; margin-top: 28px; color: #bdcce0; font-size: 14px; }
.roadmap-wrap { min-width: 0; }
.roadmap { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(255,255,255,.16); }
.roadmap li { display: grid; grid-template-columns: 180px 1fr; gap: 40px; padding: 43px 0; border-bottom: 1px solid rgba(255,255,255,.16); }
.step-meta strong { color: #b7c9dc; font-size: 13px; font-weight: 500; }
.step-body h3 { margin-bottom: 13px; color: white; font-size: 24px; font-weight: 500; }
.step-body p { margin: 0; color: #b7c5d6; font-size: 13px; }
.program-note { margin-top: 32px; padding: 18px 20px; border: 1px solid rgba(233,184,107,.35); border-left: 3px solid rgba(233,184,107,.8); background: rgba(255,255,255,.035); color: #bdc9d7; font-size: 13px; line-height: 1.9; }
.program-note p { margin: 0; }
.program-note p + p { margin-top: 8px; }
.program-note a { color: #e7c58f; text-underline-offset: 3px; }

.story {
  position: relative;
  display: grid;
  grid-template-columns: .72fr 1.28fr;
  gap: 100px;
  padding: 135px var(--page-gutter);
  overflow: hidden;
  background: #eaf1f5;
}
.story > div { position: relative; z-index: 1; }
.story-copy { max-width: 650px; color: #4e5d70; font-size: 14px; }
.story-copy p { margin-bottom: 22px; }
.story-title-line { display: block; white-space: nowrap; }
@media (min-width: 1181px) {
  .story-title-line + .story-title-line { padding-left: .2em; }
}

.outline { padding: 125px var(--page-gutter) 130px; background: var(--white); }
.outline-heading { max-width: 700px; margin-bottom: 60px; }
.outline-heading > p:last-child { margin-top: 20px; color: var(--muted); }
.outline-list { max-width: 1080px; margin: 0; border-top: 1px solid var(--line); }
.outline-list > div { display: grid; grid-template-columns: 220px 1fr; padding: 21px 6px; border-bottom: 1px solid var(--line); }
.outline-list dt { color: var(--muted); font-size: 13px; font-weight: 600; }
.outline-list dd { margin: 0; font-size: 14px; }
.outline-list dd small { display: inline-block; margin-top: 5px; color: var(--muted); font-size: 11px; line-height: 1.7; }
.outline-list dd strong { color: var(--navy); font-size: 20px; }
.outline-notice {
  max-width: 1080px;
  margin-top: 30px;
  padding: 26px 28px;
  border: 1px solid rgba(13,49,95,.16);
  border-left: 4px solid var(--blue);
  background: #f5f8fa;
  color: #526075;
  font-size: 13px;
  line-height: 1.9;
}
.outline-notice p { margin: 0; }
.outline-notice p + p { margin-top: 16px; }
.outline-notice strong { color: var(--navy); font-size: 14px; }

.entry { position: relative; padding: 125px 24px; overflow: hidden; background: var(--navy); color: white; text-align: center; }
.entry h2 { color: white; }
.entry-title-line { display: block; white-space: nowrap; }
.entry > p:not(.eyebrow) { max-width: 680px; margin: 26px auto 36px; color: #c7d4e2; font-size: 14px; }
.entry-copy span { display: block; }
.entry-copy span + span { margin-top: 4px; }
.entry small { display: block; margin: 18px auto 0; max-width: 920px; color: #b4c3d3; font-size: 12px; line-height: 1.85; }
.site-footer {
  position: relative;
  padding: 68px var(--page-gutter) 32px;
  background: #06182e;
  color: #9fb0c4;
  font-size: 12px;
}
.site-footer::before {
  position: absolute;
  top: 0;
  left: var(--page-gutter);
  width: 54px;
  height: 3px;
  background: var(--ochre);
  content: "";
}
.footer-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 60px;
  padding-bottom: 48px;
}
.footer-brand {
  color: white;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(42px, 4vw, 62px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.025em;
  text-decoration: none;
}
.footer-contact { min-width: 250px; color: #aebed0; line-height: 1.9; }
.footer-contact p { margin: 0; }
.footer-contact a {
  display: inline-block;
  margin-top: 8px;
  color: white;
  text-decoration-color: rgba(255,255,255,.35);
  text-underline-offset: 5px;
}
.footer-links { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 14px; }
.footer-links a { margin-top: 0; font-size: 11px; }
.footer-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.1);
}
.legal-notice { max-width: 640px; margin: 0; color: #71869e; font-size: 10px; line-height: 1.7; }
.copyright { flex: none; margin: 0; color: #71869e; text-align: right; }

@media (max-width: 1180px) {
  .hero-copy { padding-left: var(--page-gutter); }
  .hero h1 { font-size: clamp(36px, 4.2vw, 50px); }
  .hero-title-line { white-space: normal; }
  .hero-title-line > span { display: block; }
  .hero-label { white-space: normal; }
  .value-grid article { padding-inline: 26px; }
  .program { grid-template-columns: minmax(330px, .78fr) minmax(0, 1.22fr); gap: 50px; }
  .roadmap li { grid-template-columns: 145px 1fr; gap: 28px; }
  .story { grid-template-columns: 1fr; gap: 48px; }
  .story-title-line { white-space: normal; }
  .program-title-line { white-space: normal; }
}

@media (max-width: 980px) {
  :root { --page-gutter: 7vw; }
  .site-header { padding-inline: var(--page-gutter); }
  .site-header nav > a:not(.nav-cta) { display: none; }
  .hero { grid-template-columns: 1fr; }
  .hero-copy { padding: 78px var(--page-gutter) 50px; }
  .hero-label { white-space: normal; }
  .hero-visual { min-height: 500px; margin: 0 7vw 70px; }
  .intro { display: block; }
  .intro-heading { display: block; }
  .intro-heading .eyebrow, .intro-heading h2, .intro-copy {
    grid-column: auto;
    grid-row: auto;
    transform: none;
  }
  .intro-copy { margin-top: 38px; }
  .section-heading { display: block; }
  .section-heading-copy { display: block; }
  .section-heading-copy .eyebrow, .section-heading-copy h2, .section-heading > p {
    grid-column: auto;
    grid-row: auto;
    transform: none;
  }
  .section-heading > p { margin-top: 25px; }
  .desktop-break { display: none; }
  .value-grid { grid-template-columns: 1fr; }
  .value-grid article, .value-grid article:first-child { min-height: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); border-left: 1px solid var(--line); }
  .program { grid-template-columns: 1fr; gap: 60px; }
  .program-intro { position: static; }
}

@media (max-width: 640px) {
  :root { --page-gutter: 22px; }
  .site-header { height: 72px; padding: 0 var(--page-gutter); }
  .brand { width: 126px; height: 100%; }
  .brand img { width: 118px; max-height: 63px; }
  .nav-cta { padding: 9px 13px; font-size: 11px; }
  .hero { min-height: auto; }
  .hero-copy { padding: 62px var(--page-gutter) 38px; }
  .hero h1 { font-size: 36px; }
  .hero-label { font-size: 11px; line-height: 1.65; }
  .hero-actions { flex-direction: column; }
  .button { width: 100%; }
  .hero-visual { min-height: 360px; margin: 0 18px 48px; border-radius: 2px 2px 42px 2px; }
  .visual-note { padding: 18px 20px; }
  .intro, .value-section, .program, .story, .outline { padding: 85px var(--page-gutter); }
  .intro { grid-template-columns: 1fr; }
  .intro-copy { grid-column: auto; }
  .roadmap li { grid-template-columns: 1fr; gap: 18px; }
  .outline-list > div { grid-template-columns: 1fr; gap: 7px; }
  .entry-title-line { white-space: normal; }
  .site-footer { padding: 52px 24px 28px; }
  .site-footer::before { left: 24px; }
  .footer-main { flex-direction: column; gap: 34px; padding-bottom: 38px; }
  .footer-contact { min-width: 0; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 18px; }
  .copyright { text-align: left; }
}

@media (min-width: 1921px) {
  :root {
    --wide-content: clamp(1352px, 64vw, 2040px);
    --page-gutter-wide: max(70px, calc((100vw - var(--wide-content)) / 2));
  }
  .site-header {
    height: clamp(88px, 3vw, 108px);
    padding-inline: var(--page-gutter-wide);
  }
  .brand { width: clamp(170px, 6vw, 210px); }
  .brand img { width: clamp(155px, 5.6vw, 195px); max-height: 92px; }
  .site-header nav {
    gap: clamp(32px, 1.5vw, 48px);
    font-size: clamp(14px, .48vw, 17px);
  }
  .nav-cta { padding: clamp(12px, .55vw, 16px) clamp(21px, .9vw, 30px); }
  .hero-copy {
    padding: clamp(92px, 4.2vw, 150px) clamp(88px, 4vw, 150px) clamp(102px, 4.5vw, 165px) var(--page-gutter-wide);
  }
  .hero-visual {
    min-height: clamp(680px, 37vw, 1100px);
    margin: clamp(54px, 2.5vw, 88px) var(--page-gutter-wide) clamp(54px, 2.5vw, 88px) 0;
  }
  .hero h1 { font-size: clamp(56px, 2.25vw, 76px); }
  .hero-label { font-size: clamp(13px, .48vw, 16px); }
  .hero-lead { max-width: 720px; font-size: clamp(16px, .55vw, 19px); }
  .hero-note { font-size: clamp(13px, .43vw, 15px); }
  .hero-disclaimer { font-size: clamp(13px, .43vw, 15px); }
  .button {
    min-height: clamp(60px, 2.25vw, 72px);
    padding-inline: clamp(28px, 1.1vw, 38px);
    font-size: clamp(15px, .5vw, 17px);
  }
  .intro, .value-section, .program, .story, .outline {
    padding-top: clamp(145px, 6vw, 215px);
    padding-bottom: clamp(145px, 6vw, 215px);
  }
  .intro, .value-section, .program, .story, .outline,
  .site-footer {
    padding-right: var(--page-gutter-wide);
    padding-left: var(--page-gutter-wide);
  }
  .intro { column-gap: clamp(100px, 5.5vw, 180px); }
  .intro h2, .section-heading h2, .program h2, .story h2, .outline h2, .entry h2 {
    font-size: clamp(52px, 2.15vw, 72px);
  }
  .intro-copy { max-width: clamp(680px, 30vw, 920px); }
  .intro-copy, .hero-lead { font-size: clamp(16px, .58vw, 19px); }
  .section-heading { max-width: none; }
  .value-grid { max-width: clamp(1240px, 61vw, 1900px); }
  .section-heading { column-gap: clamp(100px, 5vw, 170px); }
  .intro-copy, .section-heading > p {
    max-width: clamp(680px, 30vw, 920px);
  }
  .section-heading > p, .program-intro > p:last-child, .story-copy, .outline-list dd, .entry > p:not(.eyebrow) {
    font-size: clamp(15px, .53vw, 18px);
  }
  .value-grid article {
    min-height: clamp(400px, 18vw, 540px);
    padding: clamp(48px, 2vw, 68px) clamp(38px, 1.7vw, 58px);
  }
  .value-grid h3 { font-size: clamp(24px, .95vw, 31px); }
  .value-grid p { font-size: clamp(15px, .51vw, 17px); }
  .tags span { padding: 7px 13px; font-size: clamp(11px, .4vw, 14px); }
  .program { gap: clamp(100px, 5vw, 175px); }
  .roadmap li {
    grid-template-columns: clamp(180px, 8vw, 260px) 1fr;
    gap: clamp(42px, 2vw, 70px);
    padding-block: clamp(48px, 2.2vw, 76px);
  }
  .step-meta strong { font-size: clamp(14px, .48vw, 17px); }
  .step-body h3 { font-size: clamp(26px, 1vw, 34px); }
  .step-body p { font-size: clamp(14px, .49vw, 17px); }
  .program-note, .outline-notice { font-size: clamp(13px, .46vw, 16px); }
  .story { gap: clamp(110px, 5vw, 180px); }
  .story-copy { max-width: clamp(720px, 32vw, 1060px); }
  .outline-heading { max-width: clamp(760px, 34vw, 1100px); }
  .outline-list, .outline-notice { max-width: clamp(1080px, 58vw, 1840px); }
  .outline-list > div {
    grid-template-columns: clamp(230px, 10vw, 330px) 1fr;
    padding-block: clamp(23px, 1vw, 34px);
  }
  .outline-list dt { font-size: clamp(14px, .46vw, 16px); }
  .entry { padding-block: clamp(145px, 6vw, 210px); }
  .site-footer::before { left: var(--page-gutter-wide); }
  .site-footer { padding-top: clamp(76px, 3vw, 110px); }
  .footer-contact, .site-footer { font-size: clamp(13px, .45vw, 16px); }
  .legal-notice { max-width: 780px; font-size: clamp(11px, .38vw, 13px); }
}

@media (max-width: 390px) {
  :root { --page-gutter: 18px; }
  .site-header { padding-inline: var(--page-gutter); }
  .brand { width: 112px; }
  .brand img { width: 108px; }
  .nav-cta { padding-inline: 11px; }
  .hero h1 { font-size: 32px; }
  .intro h2, .section-heading h2, .program h2, .story h2, .outline h2, .entry h2 {
    font-size: 29px;
  }
}