/* 全幅の写真の帯と、右下の黒いにじみの丸 */
.band { position: relative; padding-bottom: 14rem; }
.band__img { width: 100%; aspect-ratio: 1440 / 297; }
.band__img img { object-position: center 42%; }
.band__blot { right: 0; bottom: 0; }

/* レッスン室の写真：右に見出し、左に説明、写真を 4 列に */
.room { width: min(102rem, 100% - 4rem); margin-inline: auto; padding-top: 4.4rem; }
.room__head { position: relative; }
.room__ttl { width: max-content; margin-left: auto; }
.room__ghost { right: 0; top: 50%; transform: translateY(-50%) translateY(-1rem); font-size: 17rem; }
.room__txt { position: relative; z-index: 1; margin-top: -8.8rem; line-height: 1.9; }
.room__tags { display: flex; flex-wrap: wrap; gap: 0.6rem 2rem; margin: 1.5rem 0 2.5rem; font-size: 1.3rem; color: var(--ink-sub); }
.room__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: 3rem;
}
.room__grid li { aspect-ratio: 1; }

@media (max-width: 1023px) {
  .band { padding-bottom: 7rem; }
  .band__img { aspect-ratio: 390 / 242; }
  .room { width: auto; max-width: 40rem; padding: 2rem 2rem 3rem; }
  .room__ttl { margin-inline: auto; }
  .room__ghost { right: auto; left: 50%; transform: translate(-50%, -50%); font-size: 9rem; }
  .room__txt { margin-top: 1.5rem; font-size: 1.3rem; }
  .room__tags { margin-top: 0.8rem; gap: 0.2rem 1.6rem; font-size: 1.2rem; }
  .room__grid { grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-top: 2rem; padding-inline: 0.7rem; }
}