:root {
  --green-950: #062317;
  --green-900: #0b2c1f;
  --green-850: #103726;
  --green-800: #153f2b;
  --green-700: #20573b;
  --green-100: #e8eee5;
  --green-50: #f3f6f1;
  --ink: #14221b;
  --text: #303a34;
  --muted: #6c746e;
  --line: #e5e1d7;
  --line-soft: #eeeae1;
  --paper: #fbfaf6;
  --white: #fff;
  --serif: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  --sans: "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
}

body {
  background:
    linear-gradient(180deg, rgba(251, 250, 246, .97), rgba(251, 250, 246, 1) 360px),
    radial-gradient(circle at 86% 6%, rgba(221, 214, 196, .45), transparent 34%);
  color: var(--ink);
  letter-spacing: 0;
}

.site-header {
  background: rgba(251, 250, 246, .94);
}

.logo img {
  width: 100%;
  height: auto;
}

.nav-links a[aria-current="page"] {
  color: var(--green-700);
}

.page-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  grid-template-rows: auto auto auto;
  gap: 44px;
  align-items: end;
  padding-top: 66px;
  padding-bottom: 42px;
}

.page-hero::after {
  content: "";
  display: block;
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: stretch;
  min-height: 210px;
  border: 1px solid rgba(229, 225, 215, .78);
  background:
    linear-gradient(90deg, rgba(251, 250, 246, .24), rgba(251, 250, 246, .88)),
    url("images/footer-01.png") center / cover no-repeat;
}

.page-hero .eyebrow,
.page-hero h1,
.page-hero p {
  grid-column: 1;
}

.page-hero .eyebrow {
  justify-self: start;
  background: var(--green-800);
  border-radius: 999px;
  color: var(--white);
  letter-spacing: .08em;
}

.page-hero h1 {
  margin-top: 22px;
  font-size: clamp(34px, 4.3vw, 54px);
  line-height: 1.28;
  letter-spacing: .04em;
}

.page-hero p {
  max-width: 680px;
  margin: 18px 0 0;
  line-height: 2;
}

main > section {
  padding-top: 46px;
  padding-bottom: 58px;
}

h2 {
  position: relative;
  margin-bottom: 28px;
  line-height: 1.5;
}

h2::after {
  content: "";
  display: block;
  width: 28px;
  height: 2px;
  margin-top: 12px;
  background: var(--green-700);
}

.plans,
.courses,
.flow {
  gap: 12px;
}

.plan,
.course,
.flow-item,
.notes,
.subsidy,
.faq details,
.story {
  border-color: #e8e3d9;
  border-radius: 8px;
  box-shadow: 0 14px 28px rgba(27, 40, 31, .035);
}

.plan,
.course,
.flow-item {
  min-height: 100%;
  background: rgba(255, 255, 255, .88);
}

.plan.reco {
  border-color: rgba(32, 87, 59, .48);
  box-shadow: 0 16px 34px rgba(21, 63, 43, .09);
}

.plan.reco .tag,
.course .hj {
  border-radius: 999px;
}

.plan .price {
  line-height: 1.25;
}

.notes,
.subsidy {
  background: rgba(255, 255, 255, .9);
}

.notes ul,
.subsidy ul {
  margin-bottom: 0;
}

.flow-item::before {
  color: var(--green-800);
}

.faq details {
  background: rgba(255, 255, 255, .88);
}

.bottom-cta {
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(11, 44, 31, .98), rgba(11, 44, 31, .9)),
    url("images/footer-01.png") center / cover no-repeat;
}

.bottom-cta .btn-primary {
  border-color: var(--white);
}

footer .links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}

footer .links a,
footer .links span {
  margin-right: 0;
}

.story {
  background: rgba(255, 255, 255, .9);
}

.story img {
  border-radius: 0;
}

.cred span {
  border-radius: 999px;
}

dl.co {
  background: rgba(255, 255, 255, .72);
  border-bottom: 1px solid var(--line);
}

dl.co dt,
dl.co dd {
  padding-left: 18px;
  padding-right: 18px;
}

@media (max-width: 900px) {
  .page-hero {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 26px;
    padding-top: 44px;
  }

  .page-hero::after {
    grid-column: 1;
    grid-row: auto;
    min-height: 160px;
  }

  .bottom-cta {
    margin-bottom: 48px;
  }
}

@media (max-width: 640px) {
  .wrap {
    width: min(100% - 26px, 480px);
  }

  .page-hero h1 {
    font-size: clamp(32px, 10vw, 44px);
  }

  .plans,
  .flow {
    grid-template-columns: 1fr;
  }

  .nav-cta .btn {
    min-height: 38px;
    padding: 0 15px;
    font-size: 12px;
  }
}