@charset "utf-8";

#sec-mv .p-mv-deco {
    margin-bottom: var(--size-01);
}

#sec-mv .p-mv-course-carousel {
    position: relative;
}

#sec-mv .p-mv-course-stage {
    position: relative;
    height: clamp(320px, 29vw, 400px);
    padding: var(--size-10) 0 var(--size-04);
}

#sec-mv .js-mv-course-list {
    position: relative;
    width: 100%;
    height: 100%;
}

#sec-mv .p-mv-course-slide {
    position: absolute;
    top: 50%;
    left: 50%;
    width: clamp(220px, 21vw, 320px);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(.7);
    transform-origin: center center;
    transition:
        transform .62s cubic-bezier(.22, 1, .36, 1),
        opacity .46s ease,
        filter .46s ease;
    will-change: transform, opacity;
}

#sec-mv .p-mv-course-slide .c-card-box {
    height: 100%;
    background-color: var(--color-white);
    border: 1px solid var(--color-primary-50);
    box-shadow: 0 16px 40px rgba(21, 26, 63, .10);
    transition:
        box-shadow .45s ease,
        border-color .45s ease,
        transform .45s ease;
}

#sec-mv .p-mv-course-slide .c-card-cnt {
    min-width: 0;
    gap: 0;
    flex: 1;
}

#sec-mv .p-mv-course-slide .c-card-inner {
    gap: var(--size-01);
    padding: var(--size-02);
}

#sec-mv .p-mv-course-slide .c-card-ttl {
    margin-top: var(--size-01);
}

#sec-mv .p-mv-course-slide .c-card-link {
    flex-shrink: 0;
}

#sec-mv .p-mv-course-slide .c-card-thum img {
    transition: transform .45s ease;
}

#sec-mv .js-mv-course-list {
    cursor: grab;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
}

#sec-mv .js-mv-course-list:active {
    cursor: grabbing;
}

#sec-mv .js-mv-course-list img {
    -webkit-user-drag: none;
    user-select: none;
}

/* 左端 */
#sec-mv .p-mv-course-slide.is-prev-2 {
    z-index: 1;
    opacity: .30;
    pointer-events: auto;
    transform:
        translate(calc(-50% - clamp(310px, 31vw, 470px)), -50%) scale(.76);
}

/* 左 */
#sec-mv .p-mv-course-slide.is-prev-1 {
    z-index: 3;
    opacity: .74;
    pointer-events: auto;
    transform:
        translate(calc(-50% - clamp(165px, 16vw, 245px)), -50%) scale(.90);
}

/* 中央 */
#sec-mv .p-mv-course-slide.is-active {
    z-index: 6;
    opacity: 1;
    pointer-events: auto;
    transform:
        translate(-50%, calc(-50% - 16px)) scale(1.06);
}

#sec-mv .p-mv-course-slide.is-active .c-card-box {
    box-shadow: 0 28px 70px rgba(21, 26, 63, .18);
}

/* 右 */
#sec-mv .p-mv-course-slide.is-next-1 {
    z-index: 3;
    opacity: .74;
    pointer-events: auto;
    transform:
        translate(calc(-50% + clamp(165px, 16vw, 245px)), -50%) scale(.90);
}

/* 右端 */
#sec-mv .p-mv-course-slide.is-next-2 {
    z-index: 1;
    opacity: .30;
    pointer-events: auto;
    transform:
        translate(calc(-50% + clamp(310px, 31vw, 470px)), -50%) scale(.76);
}

/* 待機カード */
#sec-mv .p-mv-course-slide.is-hidden-left {
    z-index: 0;
    opacity: 0;
    transform:
        translate(calc(-50% - clamp(390px, 39vw, 590px)), -50%) scale(.68);
}

#sec-mv .p-mv-course-slide.is-hidden-right {
    z-index: 0;
    opacity: 0;
    transform:
        translate(calc(-50% + clamp(390px, 39vw, 590px)), -50%) scale(.68);
}

#sec-mv .p-mv-course-slide.is-hidden {
    z-index: 0;
    opacity: 0;
}

#sec-mv .p-mv-course-slide:not(.is-active) .c-card-link .c-action {
    display: none;
}

@media (any-hover: hover) {
    #sec-mv .p-mv-course-slide .c-card-box:hover .c-card-thum img {
        transform: scale(1.025);
    }
}

/* ドット */
#sec-mv .js-mv-course-progress {
    display: flex;
    align-items: center;
    gap: var(--size-02);
}

#sec-mv .js-mv-course-progress .c-slider-dot {
    flex: 0 0 var(--size-01);
    width: var(--size-01);
    height: var(--size-01);
    border-radius: 50%;
    background: var(--color-primary-100);
}

#sec-mv .js-mv-course-progress .c-slider-dot.is-active {
    background-color: var(--color-primary-500);
    transform: scale(1.25);
}

@media only screen and (max-width: 1024px) {
    #sec-mv .p-mv-course-stage {
        height: clamp(300px, 42vw, 390px);
    }

    #sec-mv .p-mv-course-slide {
        width: clamp(210px, 27vw, 280px);
    }

    #sec-mv .p-mv-course-slide.is-prev-2 {
        transform: translate(calc(-50% - 35vw), -50%) scale(.75);
    }

    #sec-mv .p-mv-course-slide.is-prev-1 {
        transform: translate(calc(-50% - 18vw), -50%) scale(.90);
    }

    #sec-mv .p-mv-course-slide.is-next-1 {
        transform: translate(calc(-50% + 18vw), -50%) scale(.90);
    }

    #sec-mv .p-mv-course-slide.is-next-2 {
        transform: translate(calc(-50% + 35vw), -50%) scale(.75);
    }
}

@media only screen and (max-width: 768px) {
    #sec-mv .p-mv-course-stage {
        height: 340px;
        margin-inline: calc(var(--size-02) * -1);
    }

    #sec-mv .p-mv-course-slide {
        width: min(72vw, 300px);
    }

    #sec-mv .p-mv-course-slide.is-prev-2,
    #sec-mv .p-mv-course-slide.is-next-2,
    #sec-mv .p-mv-course-slide.is-hidden-left,
    #sec-mv .p-mv-course-slide.is-hidden-right,
    #sec-mv .p-mv-course-slide.is-hidden {
        opacity: 0;
        pointer-events: none;
    }

    #sec-mv .p-mv-course-slide.is-prev-1 {
        opacity: .36;
        transform: translate(calc(-50% - 58vw), -50%) scale(.88);
    }

    #sec-mv .p-mv-course-slide.is-active {
        transform: translate(-50%, -50%) scale(1);
    }

    #sec-mv .p-mv-course-slide.is-next-1 {
        opacity: .36;
        transform: translate(calc(-50% + 58vw), -50%) scale(.88);
    }
}

/* ==============================
MV SLIDER CONTROL
============================== */

#sec-mv .p-mv-slider-control {
    display: flex;
    align-items: center;
    gap: var(--size-02);
    margin-top: var(--size-03);
}

#sec-mv .p-mv-slider-count {
    display: flex;
    align-items: baseline;
    gap: var(--size-005);

    margin-right: var(--size-01);

    font-family: var(--font-family-figtree);
    color: var(--color-primary-500);
    line-height: 1;
}

#sec-mv .p-mv-slider-current {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
}

#sec-mv .p-mv-slider-separator {
    font-size: var(--font-size-s);
    opacity: .7;
}


#sec-mv .p-mv-slider-total {
    font-size: var(--font-size-s);
    opacity: .6;
}

#sec-mv .c-slider-control {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

#sec-search {
    scroll-margin-top: calc(var(--height-header) + 64px);
}

#sec-finder {
    background: var(--color-white);
}

#sec-package {
    background: var(--color-bg-light);
}

#sec-package .l-package {
    border-top: solid 1px var(--color-primary-200);
    border-bottom: solid 1px var(--color-primary-200);
    padding: var(--size-03) 0;
}

#sec-package .l-package-ls .c-card-box {
    border: none;
}


#sec-recommend {
    background: var(--color-bg-light);
}

#sec-flow {
    background-color: var(--color-primary-50);
}

@media only screen and (max-width:1024px) {}

@media only screen and (max-width:768px) {
    #sec-package .l-package {
        gap: 0;
    }

    #sec-package .l-package-other .p-link:first-of-type {
        border-top: solid 1px var(--color-primary-100);
    }
}

@media (max-width: 520px) {
    #sec-mv .p-mv-course-stage {
        padding: var(--size-04);
        height: 380px;
    }

    #sec-mv .c-slider-control {
        flex-direction: unset;
    }

}