/* 医院について（参考 .home-about）
   形がゆっくり変わる丸い写真を9つ散らし（スマホは上に5つ・下に4つ）、小文字の大きな英字、右に白い面の文。
   写真の形と位置・大きさは参考の値。形の変化は SVG の animate（参考は Snap.svg で 5 秒ずつ） */
.about {
  position: relative;
  margin-top: 70px;
  overflow-x: clip;
}
.about__inner { position: relative; }
.about__en {
  position: relative;
  margin-bottom: 250px;
  color: var(--ink);
  font-size: 60px;
  line-height: 1.1;
  letter-spacing: 0.03em;
}
.about__box {
  position: relative;
  z-index: 2;
  padding: 50px 30px;
  background: var(--white);
}
.about__head {
  margin-bottom: 20px;
  font-size: 18px;
  line-height: 1.61;
  letter-spacing: 0.15em;
}
.about__p + .about__p { margin-top: 1em; }

/* 丸い写真 */
.blob { position: absolute; }
.blob svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.blob__tint { fill: var(--yellow); mix-blend-mode: multiply; opacity: 0.55; }

@media (max-width: 1023px) {
  .blobs--a { position: absolute; top: 5px; left: 0; width: 100%; padding-top: 116.59%; }
  .blobs--a .blob--1 { bottom: 0; left: -7.73%; width: 32.525%; padding-top: 35.33%; }
  .blobs--a .blob--2 { top: 28.81%; left: 2.82%; width: 35.88%; padding-top: 43.2%; }
  .blobs--a .blob--3 { top: 0; right: -11.2%; width: 72.533%; padding-top: 73.829%; }
  .blobs--a .blob--4 { left: 35.36%; bottom: 8.462%; width: 29.77%; padding-top: 39.634%; }
  .blobs--a .blob--5 { bottom: 0; right: 2.4%; width: 26.66%; padding-top: 37.629%; }
  .blobs--b { position: relative; z-index: 1; margin: -35px -25px 0; padding-top: 102.72%; }
  .blobs--b .blob--6 { top: 0; left: -7.2%; width: 59.184%; padding-top: 56.232%; }
  .blobs--b .blob--7 { bottom: 0; left: -6.13%; width: 25.33%; padding-top: 25.06%; }
  .blobs--b .blob--8 { top: 55.415%; left: 28.8%; width: 35.293%; padding-top: 33.256%; }
  .blobs--b .blob--9 { top: 8.686%; right: -10.4%; width: 52.128%; padding-top: 56.098%; }
}
@media (min-width: 600px) and (max-width: 1023px) {
  .blobs--a { padding-top: 70%; }
  .about__en { margin-bottom: 380px; font-size: 90px; }
  .blobs--b { padding-top: 60%; }
}

@media (min-width: 1024px) {
  .about { max-width: 1920px; margin: 0 auto; }
  .about__inner { max-width: 1260px; padding: 150px 60px 0; }
  .about__en { margin: 0; font-size: 120px; line-height: 1; }
  .about__box {
    width: 680px;
    margin: 168px 0 0 auto;
    padding: 98px 80px 100px;
  }
  .about__head { margin-bottom: 34px; font-size: 25px; line-height: 1.6; }
  .about__btn { margin: 45px 0 0; }

  .blobs--a,
  .blobs--b { position: absolute; top: 34px; left: 0; width: 100%; padding-top: 69.89%; }
  .blob--1 { top: 35.3%; left: -1.875%; width: 30%; padding-top: 28.54%; }
  .blob--2 { top: 81.773%; left: -1%; width: 12.895%; padding-top: 12.742%; }
  .blob--3 { top: 71.21%; left: 16.44%; width: 17.91%; padding-top: 16.885%; }
  .blob--4 { top: 23.17%; left: 26.51%; width: 16.51%; padding-top: 17.93%; }
  .blob--5 { top: 48.3%; left: 33.91%; width: 26.45%; padding-top: 28.48%; }
  .blob--6 { top: 24.47%; left: 50.7%; width: 18.218%; padding-top: 21.936%; }
  .blob--7 { top: 0; right: -5.416%; width: 36.82%; padding-top: 36.26%; }
  .blob--8 { top: 48.695%; left: 67.223%; width: 15.119%; padding-top: 20.12%; }
  .blob--9 { top: 57.362%; left: 85.276%; width: 13.541%; padding-top: 19.1%; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .about__box { width: 600px; padding: 80px 60px; }
}
@media (min-width: 1500px) {
  .about__inner { max-width: 1500px; padding: 200px 0 0; }
  .about__en { font-size: 180px; }
  .about__box { margin-top: 158px; }
  .blobs--a,
  .blobs--b { top: -24px; }
}