:root {
  --green:#1f654d;
  --ink:#183b32;
  --muted:#5c7469;
  --line:#dce9db
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  font-family:system-ui,-apple-system,"Noto Sans JP",sans-serif;
  color:var(--ink);
  background:#f9fbf6
}
a {
  color:inherit;
  text-decoration:none
}
.wrap {
  max-width:1020px;
  margin:auto;
  padding:0 24px
}
header {
  background:white;
  border-bottom:1px solid var(--line)
}
.nav {
  height:78px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px
}
.brand {
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:800
}
.brand img {
  width:48px;
  height:48px;
  object-fit:contain
}
.back {
  color:var(--green);
  font-weight:700
}
main {
  padding:55px 0 100px
}
.hero {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px
}
.hero img {
  width:190px;
  max-width:35%;
  object-fit:contain
}
.eyebrow {
  color:var(--green);
  font-size:13px;
  font-weight:800;
  letter-spacing:.13em
}
h1 {
  font-size:clamp(29px,5vw,48px);
  margin:14px 0
}
p {
  color:var(--muted);
  line-height:1.9
}
h2 {
  font-size:24px;
  margin:50px 0 18px
}
.cards {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px
}
.subcard {
  background:white;
  border:1px solid var(--line);
  border-radius:20px;
  padding:27px;
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size:19px;
  font-weight:750;
  box-shadow:0 12px 35px #1f654d0b;
  transition:transform .2s,box-shadow .2s
}
.subcard:hover {
  transform:translateY(-3px);
  box-shadow:0 16px 35px #1f654d1c
}
.subcard span:last-child {
  color:var(--green)
}
.note {
  margin-top:30px;
  font-size:13px
}
footer {
  border-top:1px solid var(--line);
  padding:25px 0;
  color:var(--muted);
  font-size:13px
}
@media(max-width:600px) {
  .cards {
    grid-template-columns:1fr
  }
  .nav {
    height:68px
  }
  .brand img {
    width:40px;
    height:40px
  }
  main {
    padding-top:32px
  }
  .hero img {
    width:120px
  }
}