/* 写真が順に替わる窓（3ページに共通。動きは assets/js/slides.js）
   トップは v9.css で 4:5、ミュゼの脱毛・お店・アクセスはページの頭の大きい窓（.pd-a）で 3:4。どれも角丸の四角 */
.slides{border-radius:28px}
.sl-track{position:absolute;inset:0}
.sl-track img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 35%;opacity:0;transform:scale(1.06);transition:opacity 1.1s var(--ease),transform 5.5s linear}
.sl-track img.on{opacity:1;transform:scale(1)}
.slides .sl-cap{position:absolute;left:16px;bottom:46px;z-index:2;padding:5px 12px;border-radius:999px;background:rgba(251,248,243,.94);font-size:12px;font-weight:700;color:var(--ink)}
.sl-cap.in{animation:capIn .6s var(--ease)}
@keyframes capIn{from{opacity:0;transform:translateY(6px)}}
.sl-dots{position:absolute;left:0;right:0;bottom:14px;z-index:2;display:flex;justify-content:center;gap:2px}
.sl-dots button{width:28px;height:28px;border:0;background:none;padding:0;display:grid;place-items:center}
.sl-dots button::before{content:"";width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.6);box-shadow:0 0 0 1px rgba(29,27,24,.25);transition:width .4s var(--ease),background .3s}
.sl-dots button[aria-pressed="true"]::before{width:20px;border-radius:4px;background:#fff}

/* ミュゼの脱毛・お店・アクセスのページの頭（右下の丸い窓 .pd-b はそのまま） */
.pd-a.slides{aspect-ratio:3/4;border-radius:28px}

@media (max-width:959px){
  .slides .sl-cap{bottom:44px;font-size:11px}
}
@media (prefers-reduced-motion:reduce){
  .sl-track img{transition:opacity .4s;transform:none!important}
}