/* ===== 患者さんとの向き合い方（参考：見出し・文・線のボタン。下に中央の写真が大きく、左右がのぞくスライダー） ===== */
.facility { position: relative; padding-bottom: 60px; }
.facility::before { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 20vw; max-height: 300px; background-color: var(--pale); }
.facility__txt { margin-bottom: 136px; }
.facility__ttl { margin-bottom: 48px; }
.facility__body { margin-bottom: 64px; max-width: 960px; }

.gallery { position: relative; --pad: 18%; --gap: 24px; }
.gallery__view { overflow: hidden; }
.gallery__track { display: flex; transition: transform 0.5s ease; }
.gallery__track.no-anim { transition: none; }
.gallery__slide { flex: none; width: calc(100% - var(--pad) * 2); margin-right: var(--gap); }
.gallery__slide img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.gallery__dots { display: flex; justify-content: center; gap: 10px; margin-top: 32px; }
.gallery__dots button { width: 6px; height: 6px; padding: 0; border-radius: 50%; background-color: #cfcfcf; }
.gallery__dots button[aria-current="true"] { background-color: var(--accent); }
.gallery__dots button::before { content: ""; display: block; width: 24px; height: 24px; margin: -9px; }
@media (max-width: 767px) {
  .facility__txt { margin-bottom: 64px; }
  .facility__ttl { margin-bottom: 24px; }
  .facility__body { margin-bottom: 32px; }
  .gallery { --pad: 40px; --gap: 16px; width: 100%; max-width: none; }
  .gallery__dots { margin-top: 20px; }
}