/* 教室について：写真を散らして重ね、明朝の短い文を添える（位置は参考の rem の値） */
.about {
  position: relative;
  z-index: 2;
  overflow-x: clip;
}

/* 弦のような細い線（スクロールに合わせて上から引かれる） */
.strings {
  position: absolute;
  top: 18rem;
  left: 0;
  width: 100%;
  height: calc(100% - 18rem);
  z-index: 0;
  pointer-events: none;
  fill: none;
  stroke: #b9b1a5;
  stroke-width: 1;
  clip-path: inset(0 0 calc(100% - var(--reveal, 0) * 100%) 0);
}
.strings path { vector-effect: non-scaling-stroke; }

.about__lead { display: flex; justify-content: center; position: relative; z-index: 2; }
.about__lead p {
  writing-mode: vertical-rl;
  font-size: 1.4rem;
  line-height: 2.5;
  letter-spacing: 0.2em;
}

.about__sec { position: relative; z-index: 1; }
.about__sec--1 { height: 79rem; }
.about__sec--2 { height: 134rem; }
.about__sec--3 { height: 94.5rem; }

.about__ph { position: absolute; }
.about__ph--1 { left: calc(50% + 29rem); top: 3rem; width: 24rem; aspect-ratio: 274 / 365; }
.about__ph--2 { left: calc(50% - 17rem); top: 13rem; width: 35.8rem; aspect-ratio: 409 / 614; }
.about__ph--3 { left: calc(50% - 46rem); top: 57rem; width: 33rem; aspect-ratio: 377 / 251; }
.about__ph--4 { left: calc(50% + 12.4rem); top: 12.6rem; width: 50rem; aspect-ratio: 571 / 370; }
.about__ph--5 { left: calc(50% - 54.6rem); top: 53.6rem; width: 50rem; aspect-ratio: 571 / 914; }
.about__ph--6 { left: calc(50% + 10rem); top: 71rem; width: 21rem; aspect-ratio: 240 / 344; }
.about__ph--7 { left: calc(50% + 35rem); top: 71rem; width: 21rem; aspect-ratio: 240 / 344; }
.about__ph--8 { left: calc(50% + 16rem); top: 7.3rem; width: 41rem; aspect-ratio: 469 / 270; }
.about__ph--9 { left: calc(50% - 63rem); top: 22.2rem; width: 20rem; aspect-ratio: 229 / 343; }
.about__ph--10 { left: calc(50% - 31rem); top: 53.5rem; width: 42rem; aspect-ratio: 480 / 311; }

.about__ph--3 img { object-position: center 35%; }
.about__ph--5 img { object-position: 30% center; }

.about__head { position: absolute; left: calc(50% - 45rem); top: 15rem; }
.about__ttl {
  font-size: 1.9rem;
  line-height: 2.1;
  letter-spacing: 0.34em;
}
.about__head .about__txt { margin-top: 1.5rem; }

.about__txt {
  font-size: 1.3rem;
  line-height: 2.4;
  letter-spacing: 0.15em;
}
.about__txt--3 { position: absolute; left: calc(50% + 29rem); top: 54rem; }
.about__txt--4 { position: absolute; left: calc(50% - 37rem); top: 19.4rem; }
.about__txt--5 { position: absolute; left: calc(50% + 11rem); top: 107rem; }
.about__txt--6 { position: absolute; left: calc(50% - 28rem); top: 23.6rem; }
.about__txt--7 {
  position: absolute;
  left: calc(50% + 22rem);
  top: 62.7rem;
  font-size: 1.6rem;
  line-height: 2.2;
  letter-spacing: 0.15em;
}

/* SP：1 つの面の中に、参考の SP と同じ位置で置く */
@media (max-width: 1023px) {
  .about {
    max-width: 40rem;
    height: 345rem;
    margin: 7rem auto 0;
    overflow-x: visible;
  }
  .about__lead { height: 23.4rem; }
  .about__lead p { font-size: 1.5rem; line-height: 2; }
  .about__sec { position: static; height: auto; }
  .about__sec--1, .about__sec--2, .about__sec--3 { height: auto; }
  .strings { top: 22rem; height: calc(100% - 22rem); }

  .about__ph--1 { left: auto; right: 0; top: 23.4rem; width: 14.8rem; }
  .about__ph--2 { left: 21rem; top: 64rem; width: 19rem; }
  .about__ph--3 { left: 2rem; top: 80.1rem; width: 16.5rem; }
  .about__ph--4 { left: 0; top: 119.4rem; width: 32.5rem; }
  .about__ph--5 { left: 10rem; top: 171rem; width: 29rem; }
  .about__ph--6 { left: 4rem; top: 211.4rem; width: 11.8rem; }
  .about__ph--7 { left: 18rem; top: 211.4rem; width: 11.8rem; }
  .about__ph--8 { left: 15.4rem; top: 255.4rem; width: 24.6rem; }
  .about__ph--9 { left: 0; top: 261.3rem; width: 10.6rem; }
  .about__ph--10 { left: 7.4rem; top: 303.6rem; width: 28rem; }

  .about__head { left: 3rem; top: 41rem; }
  .about__ttl { font-size: 1.7rem; letter-spacing: 0.3em; }
  .about__head .about__txt { margin-top: 1rem; }
  .about__txt { font-size: 1.4rem; }
  .about__txt--3 { left: 6rem; top: 97rem; }
  .about__txt--4 { left: 5rem; top: 146.5rem; }
  .about__txt--5 { left: 4rem; top: 235.8rem; }
  .about__txt--6 { left: 4rem; top: 283.4rem; }
  .about__txt--7 {
    left: 0;
    right: 0;
    top: 327.4rem;
    text-align: center;
    font-size: 1.6rem;
  }
}