.hero-slider {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
z-index: 1;
}

.hero-slider-notice-banners {
position: absolute;
right: 2rem;
bottom: 2rem;
display: flex;
flex-direction: column;
gap: 10px;
z-index: 3;
}

.hero-slider-notice-banner {
display: block;
max-width: 420px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

.hero-slider-notice-banner img {
display: block;
width: 100%;
height: auto;
}

.hero-slider-track {
display: flex;
transition: transform 0.5s ease;
will-change: transform;
height: 100%;
}

.hero-slider[data-animation-type="fade"] .hero-slider-track {
display: block;
position: relative;
height: 100%;
}

.hero-slider[data-animation-type="fade"] .hero-slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
opacity: 0;
transition: opacity 1.2s ease;
}

.hero-slider[data-animation-type="fade"] .hero-slide.active {
opacity: 1;
z-index: 2;
}

.hero-slide {
min-width: 100%;
position: relative;
overflow: hidden;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}

.hero-slide picture,
.hero-slide-link {
display: block;
width: 100%;
height: 100%;
position: relative;
}

.hero-slide img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
object-fit: cover;
z-index: 1;
opacity: 1;
will-change: transform;
}

@media (max-width: 768px) {
.hero-slider {
width: 100%;
height: min(100vh, calc(100vw * 4 / 3));
min-height: auto;
}

.hero-slider-notice-banners {
left: 0;
right: 0;
bottom: 2rem;
padding: 0 2rem;
align-items: center;
}

.hero-slider-notice-banner {
width: 100%;
max-width: 100%;
}
}

.hero-slider-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
border: none;
background: rgba(255, 255, 255, 0.8);
cursor: pointer;
}

.hero-slider-prev { left: 10px; }
.hero-slider-next { right: 10px; }

.hero-slider-prev::before,
.hero-slider-next::before {
content: '';
display: block;
width: 10px;
height: 10px;
border-top: 2px solid #0f0f0f;
border-right: 2px solid #0f0f0f;
margin: 0 auto;
}

.hero-slider-prev::before { transform: rotate(-135deg); }
.hero-slider-next::before { transform: rotate(45deg); }

.hero-slider-dots {
position: absolute;
left: 50%;
bottom: 40px;
transform: translateX(-50%);
display: flex;
gap: 20px;
}

.hero-slider-dot {
width: 12px;
height: 12px;
border-radius: 50%;
border: none;
background: rgba(255, 255, 255, 0.6);
cursor: pointer;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
}

.hero-slider-dot.is-active {
background: rgba(255, 255, 255, 1);
box-shadow: 0 0 6px rgba(0, 0, 0, 0.6);
}