.fv {
    border-top: 0;
}

.fv-slider {
    width: 100%;
    margin: 0 auto;
    padding-top: 20px;
    padding-bottom: 20px;
    position: relative;
}

.swiper-slide {
    text-align: center;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    opacity: 0.5;
    transform: scale(0.8);
    transition: transform 0.5s ease,opacity 0.5s ease;
    cursor: pointer;
}
@media (max-width: 768px) {
    .swiper-slide {
        width: 80%; /*SP時に中央強調したいなら80％程度*/
        max-width: 320px;/*任意で最大幅制限*/

    }
    
}
@media (max-width: 400px) {
    .swiper-slide {
        max-width: 220px;/*任意で最大幅制限*/

    }
    
}

.swiper-slide-prev,
.swiper-slide-next {
    opacity: 0.85;
    transform: scale(0.8) !important;
}
.swiper-slide-active {
    opacity: 1;
    transform: scale(1) !important;
    transition: transform 0.5s ease,opacity 0.5s ease,width 0.5s ease,height, 0.5s ease;

}

.slide-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-accent);
    color: var(--color-base);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.slide-overlay:hover {
    opacity: 1;
    
}
.slide-overlay p {
    font-size: clamp(40px,10vw,80px);
    font-weight: 500;
}

.swiper-button-prev,
.swiper-button-next {
    color: var(--color-text);
    width: clamp(50px,10vw,80px);
    height: clamp(50px,10vw,80px);
    background-color: rgba(255,255,255,0.8);
    border-radius: 50%;
}

.swiper-button-prev svg,
.swiper-button-next svg {
    width: 50%;
    height: 50%;
}

.profile {
    background: var(--color-gray);
}