.section--about {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #f6f8fc;
}

.section--about::before,
.section--about::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: clamp(980px, 86vw, 1320px);
  pointer-events: none;
}

.section--about::before {
  z-index: 0;
  background: url("/image-03-concept.jpg") center 18% / cover no-repeat;
  /* 次世代フォーマット（非対応ブラウザは上のJPGにフォールバック） */
  background-image: -webkit-image-set(url("/image-03-concept.avif") type("image/avif"), url("/image-03-concept.webp") type("image/webp"), url("/image-03-concept.jpg") type("image/jpeg"));
  background-image: image-set(url("/image-03-concept.avif") type("image/avif"), url("/image-03-concept.webp") type("image/webp"), url("/image-03-concept.jpg") type("image/jpeg"));
  opacity: 0.78;
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 72%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 72%,
    transparent 100%
  );
}

.section--about::after {
  z-index: 0;
  background:
    linear-gradient(
      90deg,
      rgba(246, 248, 252, 0.58) 0%,
      rgba(246, 248, 252, 0.12) 48%,
      rgba(246, 248, 252, 0.48) 100%
    ),
    linear-gradient(
      180deg,
      rgba(246, 248, 252, 0.2) 0%,
      rgba(246, 248, 252, 0.32) 60%,
      #f6f8fc 100%
    );
}

.section--about > .section-shell {
  position: relative;
  z-index: 1;
}

.section--about .about-intro {
  padding: clamp(24px, 4vw, 44px);
  border: 1px solid rgba(8, 105, 237, 0.14);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.76);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 50px rgba(16, 55, 106, 0.08);
}

.about-heading-closing {
  white-space: nowrap;
}

.about-visual-grid {
  grid-template-columns: 1fr !important;
}

.about-visual-grid .site-image--03 {
  display: none;
}

.about-quote {
  width: min(100%, 520px);
  min-height: 330px !important;
  margin-left: auto;
  border-color: rgba(8, 105, 237, 0.2);
  background:
    radial-gradient(circle at 20% 0, rgba(25, 216, 255, 0.18), transparent 42%),
    rgba(255, 255, 255, 0.76);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 24px 64px rgba(16, 55, 106, 0.13);
}

@media (min-width: 1041px) {
  .section--about .section-heading h2 {
    font-size: clamp(3.3rem, 4.25vw, 3.8rem);
  }

  .section--about .about-intro {
    width: 86%;
    margin-left: 14%;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  }

  .section--about .about-intro__lead {
    font-size: clamp(1.5rem, 2.2vw, 1.75rem);
  }
}

@media (max-width: 820px) {
  .section--about::before,
  .section--about::after {
    height: 1080px;
  }

  .section--about::before {
    background-position: 52% 15%;
    background-size: auto 1080px;
    opacity: 0.68;
  }

  .section--about::after {
    background:
      linear-gradient(
        180deg,
        rgba(246, 248, 252, 0.3) 0%,
        rgba(246, 248, 252, 0.54) 66%,
        #f6f8fc 100%
      );
  }

  .about-quote {
    width: 100%;
    min-height: 300px !important;
  }

  .section--about .about-intro {
    padding: 24px 20px;
    border-radius: 22px;
  }
}

@media (max-width: 560px) {
  .section--about .section-heading h2 {
    font-size: clamp(1.9rem, 7.5vw, 2.6rem);
    line-height: 1.12;
  }

  .section--about .about-intro__lead {
    font-size: 1.15rem;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .section--about .about-intro,
  .about-quote {
    background: rgba(255, 255, 255, 0.94);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}