/* ===== 院内の写真：右端に前後の矢印だけを置く。写真は右へはみ出して並び、送ると前の1枚が奥へ下がる ===== */
.slider { overflow-x: clip; padding-left: var(--sl-left, 1.5rem); }
.slider__nav { display: flex; justify-content: flex-end; padding-right: var(--sl-left, 1.5rem); margin-bottom: 2%; }
.slider__btns { display: flex; gap: 2rem; }
.slider__btn { position: relative; width: 2.5rem; height: 2.5rem; border-radius: 50%; transition: background-color 0.4s ease, transform 0.4s ease; }
.slider__btn::before, .slider__btn::after { content: ""; position: absolute; inset: 0; margin: auto; }
.slider__btn::before { left: -0.125rem; width: 0.75rem; height: 2px; background: var(--accent-2); }
.slider__btn::after { left: 0.1875rem; width: 0.375rem; height: 0.375rem; border-top: 2px solid var(--accent-2); border-right: 2px solid var(--accent-2); transform: rotate(45deg); }
.slider__btn--prev { transform: rotate(180deg); }
.slider__btn:hover { background: var(--accent-2); transform: scale(1.2); }
.slider__btn--prev:hover { transform: scale(1.2) rotate(180deg); }
.slider__btn:hover::before { background: #fff; }
.slider__btn:hover::after { border-color: #fff; }
.slider__btn:disabled { opacity: 0.35; pointer-events: none; }

.slider__view { position: relative; padding: 1.25rem 0; }
.slider__list { display: flex; max-width: 37.5rem; transition: transform 0.8s var(--ease); }
.slider__s { flex: none; width: 100%; padding-right: 4%; transition: transform 0.8s var(--ease), opacity 0.8s var(--ease); }
.slider__s span { display: block; overflow: hidden; border-radius: 0.75rem; aspect-ratio: 4 / 3; background: var(--pale); }
.slider__s img { width: 100%; height: 100%; object-fit: cover; }
.slider__s.is-prev { transform: scale(0.82); opacity: 0; }

@media (max-width: 48rem) {
  .slider__list { max-width: 22rem; }
}
@media (max-width: 40.625rem) {
  .slider__list { max-width: 15rem; }
}