.mv {
 position: relative;
 height: 640px;
 overflow: hidden;
}

@media screen and (max-width: 999px) {
 .mv {
  height: 450px;
 }
}

.mv-slides {
 position: relative;
 width: 100vw;
 height: 100%;
}

.mv-slide {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 opacity: 0;
 transition: opacity 1.5s ease-in-out;
 z-index: 1;
}

.mv-slide.active {
 opacity: 1;
 z-index: 2;
}

.mv-slide.fade-out {
 opacity: 0;
 z-index: 1;
}

.mv-slide picture {
 display: unset;
}

.mv-slide img {
 position: absolute;
 top: 50%;
 left: 50%;
 translate: -50% -50%;
 min-height: 100%;
 width: 100vw;
 object-fit: cover;
 object-position: center;
}

@keyframes slideZoom {
 0% {
  transform: scale(1);
 }
 100% {
  transform: scale(1.1);
 }
}

.mv-slide.active img {
 animation: slideZoom 5s ease-out forwards;
}

.mv-slide.fade-out img {
 animation: slideZoom 5s ease-out forwards;
}

.mv-control {
 position: absolute;
 top: 50%;
 translate: 0 -50%;
 width: clamp(40px, 5vw, 60px);
 height: clamp(40px, 5vw, 60px);
 border-radius: 50%;
 border: none;
 cursor: pointer;
 z-index: 10;

 background: rgba(0, 0, 0, 0.4);
 backdrop-filter: blur(4px);
}

/* 矢印 */
.mv-control::before {
 content: "";
 position: absolute;
 top: 50%;
 left: 50%;
 width: 12px;
 height: 12px;
 border-top: 2px solid #fff;
 border-right: 2px solid #fff;
 transform-origin: center;
}

.mv-control.prev {
 left: 2vw;
}

.mv-control.next {
 right: 2vw;
}

/* 矢印向き */
.mv-control.prev::before {
 transform: translate(-40%, -50%) rotate(-135deg);
}

.mv-control.next::before {
 transform: translate(-60%, -50%) rotate(45deg);
}

/* hover */
.mv-control:hover {
 background: rgba(0, 0, 0, 0.7);
}

.mv-dots {
 position: absolute;
 left: 50%;
 bottom: clamp(12px, 2.5vw, 24px);
 transform: translateX(-50%);
 display: flex;
 gap: clamp(8px, 1.6vw, 12px);
 align-items: center;
 z-index: 11;
 pointer-events: auto;
 /* optional: don't cover huge area */
 padding: 4px;
}

/* dots */
.mv-dot {
 width: clamp(8px, 1.2vw, 12px);
 height: clamp(8px, 1.2vw, 12px);
 border-radius: 999px;
 background: rgba(255, 255, 255, 0.45);
 cursor: pointer;
 transition:
  transform 0.18s ease,
  background 0.18s ease,
  box-shadow 0.18s ease;
 display: inline-block;
 box-sizing: border-box;
 border: 1px solid rgba(0, 0, 0, 0.06);
}

.mv-dot:focus {
 outline: 2px solid rgba(255, 255, 255, 0.85);
 outline-offset: 2px;
}

.mv-dot:hover {
 transform: scale(1.1);
}

.mv-dot.active {
 background: #fff;
 transform: scale(1.25);
 box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
}

/* small-screen tweak: reduce dot size/spacing */
@media (max-width: 480px) {
 .mv-dots {
  gap: 8px;
  bottom: 12px;
 }
 .mv-dot {
  width: 10px;
  height: 10px;
 }
}