/* 私たちについて：ホームの水色・濃紺・オレンジに揃える。 */
.about-page {
  --navy: #082e54;
  --orange: #c54b08;
  --orange-text: #c54b08;
  --pale: #eff7fb;
  --line: #d3e0e8;
  --cream-line: #d3e0e8;
}
.about-page .page { background: #fff; }
.about-hero {
  position: relative;
  padding: 26px 0 146px;
  background: linear-gradient(145deg, #eff9ff, #e7f5fc 65%, #f4fbff);
  border-bottom: 1px solid var(--line);
}
.about-hero-wrap { width: min(1180px, calc(100% - 64px)); }
.about-hero .breadcrumb { margin-bottom: 24px; color: #496274; }
.about-hero-intro { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 40px; }
.about-hero-label { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; color: #496274; font-size: 13px; font-weight: 700; }
.about-hero-label::before { content: ""; width: 22px; height: 2px; flex: none; background: #acd9ee; }
.about-hero h1 { margin: 0; color: var(--navy); font-size: clamp(30px, 3.2vw, 40px); font-weight: 700; line-height: 1.55; letter-spacing: -.03em; }
.about-hero-lead { margin: 0; font-size: 16px; line-height: 1.95; }
.about-hero-town { position: absolute; inset: auto 0 0; display: block; width: 100%; height: 120px; object-fit: cover; object-position: center bottom; pointer-events: none; }
.about-page .info-card { box-shadow: 0 8px 20px #082e5408; }
.about-page .info-card .num { color: var(--navy); background: #e7f5fc; }
.about-page .block + .block { border-top-color: var(--line); }
.about-page .cta-band {
  color: var(--navy);
  background: #eff9ff;
  border: 1px solid var(--line);
}
.about-page .cta-band p { opacity: 1; }
.about-page .button.orange:hover { background: #a93b00; border-color: #a93b00; }
.about-page a:focus-visible,
.about-page button:focus-visible { outline: 3px solid #1264a4; outline-offset: 5px; }
@media (max-width: 1000px) {
  .about-hero-intro { gap: 26px; }
}
@media (max-width: 600px) {
  .about-hero { padding: 20px 0 114px; }
  .about-hero-wrap { width: calc(100% - 32px); }
  .about-hero .breadcrumb { margin-bottom: 20px; }
  .about-hero-intro { grid-template-columns: 1fr; gap: 18px; }
  .about-hero h1 { font-size: 30px; }
  .about-hero-lead { font-size: 14px; }
  .about-hero-town { height: 92px; }
}