:root {
  --ink: #102a3a;
  --green: #1976a3;
  --green-dark: #0d4f73;
  --lime: #8ed8f5;
  --paper: #f5fbfe;
  --line: #d5e6ee;
  --muted: #516975;
}

.site-header { background: rgba(245, 251, 254, .95); }
.hero {
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
  gap: 8vw;
  background: linear-gradient(135deg, #f7fcff 52%, #dff3fb);
}
.hero-copy {
  position: relative;
  isolation: isolate;
  padding: clamp(38px, 5vw, 72px);
  margin-left: clamp(-54px, -3.5vw, -24px);
  overflow: hidden;
  border-radius: 3px;
  box-shadow: 14px 14px 0 rgba(142,216,245,.82);
}
.hero-copy:before,
.hero-copy:after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero-copy:before {
  background: url("/gyoseisyoshi/nagano-city-hero.png") center / cover no-repeat;
  filter: saturate(.72) contrast(.9);
  transform: scale(1.02);
}
.hero-copy:after {
  z-index: -1;
  background: linear-gradient(90deg, rgba(247,252,255,.97) 0%, rgba(247,252,255,.91) 48%, rgba(247,252,255,.7) 72%, rgba(247,252,255,.42) 100%);
}
.hero-card {
  background: #0d4f73;
  padding: 44px 36px;
  box-shadow: 18px 18px 0 #8ed8f5;
}
.hero-card dd { color: #eaf7fc; }
.trust-strip { background: #8ed8f5; }
.contact { background: #e5f5fb; }
footer { background: #0d4f73; }
.top-links {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: #fff;
  border-top: 1px solid #d5e6ee;
  border-bottom: 1px solid #d5e6ee;
}
.top-links a {
  padding: 18px 10px;
  color: #0d4f73;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
  border-right: 1px solid #d5e6ee;
}
.top-links a:last-child { border-right: 0; background: #1976a3; color: #fff; }
.top-links a:hover { background: #d9f2fc; color: #0d4f73; }
.location {
  display: inline-block;
  background: #d9f2fc;
  color: #0d4f73;
  padding: 7px 13px;
  border-radius: 99px;
  font-size: 14px;
  letter-spacing: .1em;
}
.profession {
  margin: 20px 0 0;
  color: #0d4f73;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(32px, 4.2vw, 58px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: .16em;
}
.submit-frame {
  position: absolute;
  width: 1px;
  height: 1px;
  border: 0;
  clip: rect(0 0 0 0);
  overflow: hidden;
}

@media (max-width: 800px) {
  .hero { grid-template-columns: 1fr; gap: 46px; }
  .hero-copy { margin-left: 0; padding: 34px 22px 40px; }
  .hero-copy:after { background: rgba(247,252,255,.87); }
  .hero-card { margin-right: 16px; padding: 32px 24px; box-shadow: 12px 12px 0 #8ed8f5; }
  .top-links { grid-template-columns: repeat(2, 1fr); }
  .top-links a { padding: 14px 8px; border-bottom: 1px solid #d5e6ee; }
  .top-links a:last-child { grid-column: 1 / -1; }
}