:root {
  color-scheme: light;
}

body {
  min-width: 320px;
  margin: 0;
  background: #ffffff;
}

.about-page {
  --about-navy: #06255e;
  --about-navy-deep: #041a43;
  --about-ink: #071a3d;
  --about-ink-soft: #3f4d66;
  --about-muted: #728098;
  --about-line: #d5deea;
  --about-line-soft: #e7edf4;
  --about-surface-soft: #f5f8fc;
  --about-width: 1120px;
  color: var(--about-ink);
  background: #ffffff;
  font-family: Inter, "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  font-weight: 400;
  line-height: 1.85;
}

.about-page *,
.about-page *::before,
.about-page *::after { box-sizing: border-box; }

.about-page h1,
.about-page h2,
.about-page h3,
.about-page h4,
.about-page p { margin-top: 0; }

.about-page figure { margin: 0; }

.about-page a { color: inherit; text-decoration: none; }
.about-page a:focus-visible { outline: 3px solid #89a7db; outline-offset: 4px; }

.about-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.about-shell { width: min(var(--about-width), calc(100% - 48px)); margin-inline: auto; }

.about-section { padding: clamp(58px, 6.5vw, 88px) 0; }

.about-hero { background: #ffffff; }
.about-hero__image { padding: clamp(52px, 7vw, 88px) 0 clamp(30px, 3.5vw, 48px); }
.about-hero__image img { display: block; width: 100%; height: auto; }

.about-introduction { border-top: 0; }
.about-introduction { padding-bottom: clamp(46px, 5vw, 72px); }
.about-content { padding-top: clamp(54px, 5.5vw, 78px); }
.about-introduction__heading,
.about-content__heading { margin-bottom: clamp(38px, 4.2vw, 54px); }
.about-introduction__heading h2,
.about-content__heading h2 { margin-bottom: 0; color: var(--about-ink); font-size: clamp(29px, 3.2vw, 42px); font-weight: 700; letter-spacing: .015em; line-height: 1.38; }
.about-introduction__heading h2::after,
.about-content__heading h2::after { display: block; width: 76px; height: 3px; margin-top: 19px; content: ""; background: var(--about-navy); }
.about-introduction__copy { max-width: 820px; }
.about-introduction__copy p { margin-bottom: 22px; color: #16213a; font-size: clamp(15px, 1.4vw, 17px); }
.about-introduction__copy p:last-child { margin-bottom: 0; }

.about-content { padding-bottom: clamp(70px, 8vw, 104px); background: #ffffff; }
.about-content__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.about-content-card { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 0 clamp(24px, 3vw, 42px); }
.about-content-card + .about-content-card::before { position: absolute; top: 0; bottom: 0; left: 0; width: 1px; background: var(--about-line); content: ""; }
.about-content-card__number { margin: 0 0 8px; color: var(--about-navy); font-size: 22px; font-weight: 700; line-height: 1; }
.about-content-card img { display: block; width: 100%; height: auto; }
.about-content-card h3 { min-height: 2.9em; margin: 17px 0 9px; color: var(--about-navy); font-size: clamp(19px, 1.75vw, 25px); font-weight: 700; letter-spacing: .035em; line-height: 1.45; }
.about-content-card > p:last-child { margin: 0; color: #16213a; font-size: 14px; line-height: 1.85; }
.about-content-card:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }

@media (max-width: 760px) {
  .about-shell { width: min(var(--about-width), calc(100% - 40px)); }
  .about-hero__image { padding: 46px 0 32px; }
  .about-section { padding: 58px 0; }
  .about-introduction { padding-bottom: 44px; }
  .about-content { padding-top: 52px; padding-bottom: 58px; }
  .about-introduction__heading,
  .about-content__heading { margin-bottom: 30px; }
  .about-introduction__heading h2,
  .about-content__heading h2 { font-size: 29px; }
  .about-introduction__heading h2::after,
  .about-content__heading h2::after { width: 62px; margin-top: 15px; }
  .about-introduction__copy { max-width: none; }
  .about-introduction__copy p { font-size: 15px; line-height: 1.9; }
  .about-content { padding-bottom: 74px; }
  .about-content__heading { margin-bottom: 36px; padding-top: 30px; }
  .about-content__grid { grid-template-columns: 1fr; }
  .about-content-card { padding: 26px 0; }
  .about-content-card:first-child { padding-top: 0; }
  .about-content-card:last-child { padding-bottom: 0; }
  .about-content-card + .about-content-card::before { top: 0; right: 0; bottom: auto; width: auto; height: 1px; }
  .about-content-card img { max-height: 245px; object-position: center; }
  .about-content-card h3 { min-height: 0; margin-top: 13px; font-size: 22px; }
  .about-content-card > p:last-child { font-size: 14px; }
}

@media (max-width: 420px) {
  .about-shell { width: min(var(--about-width), calc(100% - 32px)); }
  .about-introduction__heading h2,
  .about-content__heading h2 { font-size: 27px; }
}

@media (prefers-reduced-motion: reduce) {
  .about-page *,
  .about-page *::before,
  .about-page *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}