@charset "UTF-8";

/* ===========================
   MP4無限カルーセル
============================== */

.short-movie-section {
    width: 100%;
    min-width: 0;
    overflow: hidden;
    padding: 100px 0;
}

.short-movie-inner {
    width: 100%;
    /*max-width: 86vw;*/
    min-width: 0;
    margin: 0 auto;
}

.short-movie-inner.active {
    animation-name: fadeUp05;
    animation-duration: 1s;
    animation-direction: normal;
    animation-delay: 0.8s;
    animation-fill-mode: forwards;  
}

.movie-carousel {
    width: 100%;
    min-width: 0;
}

.movie-carousel-viewport {
    width: 100%;
    min-width: 0;
    overflow: hidden;

    /*
     * 縦スクロールを許可しつつ、
     * 横方向のスワイプをJavaScriptで判定
     */
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
}

.movie-carousel-track {
    --visible-slides: 5;

    display: flex;
    align-items: center;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;

    transform: translate3d(0, 0, 0);
    will-change: transform;
}

/* 移動中 */
.movie-carousel-track.is-animating {
    transition: transform 0.4s ease;
}
                
/* 各スライド */
.movie-slide {
    position: relative;
    flex: 0 0 calc(100% / var(--visible-slides));
    min-width: 0;
    padding: 25px 18px;

    cursor: pointer;
    transform: scale(0.82);

    transition:
        transform 0.45s ease,
        opacity 0.45s ease;

    box-sizing: border-box;
    outline: none;
}

/* 中央スライド */
.movie-slide.is-center {
    z-index: 2;
    cursor: default;
    opacity: 1 !important;
    transform: scale(1);
}

/* 動画 */
.movie-player {
    display: block;
    width: 100%;
    aspect-ratio: 9 / 16;

    border: 0;
    border-radius: 12px;
    background: #000;
    box-shadow: 8px 10px 18px rgba(0, 0, 0, 0.25);

    object-fit: cover;
}

/* 中央以外の動画は操作させない */
.movie-slide:not(.is-center) .movie-player {
    pointer-events: none;
}

/* 中央動画のみ操作可能 */
.movie-slide.is-center .movie-player {
    pointer-events: auto;
}

/* ==============================
   ドット
============================== */

.movie-carousel-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;

    margin-top: 55px;
}

.movie-carousel-dots .movie-carousel-dot {
    display: block;
    width: 9px;
    height: 9px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: #fff;
    opacity: 0.9;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.movie-carousel-dots .movie-carousel-dot.is-active {
    background-color: #000;
    opacity: 1;
}

/* ==============================
   音声ON／OFFボタン
============================== */

.movie-sound-area {
    display: flex;
    justify-content: flex-end;

    margin-top: 30px;
    margin-right: 60px;
}

#movie-sound-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin: 0;
    padding: 0;

    border: 0;
    background: transparent;

    cursor: pointer;
    touch-action: manipulation;

    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
}

#movie-sound-btn img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;

    pointer-events: none;
}

/* 初期状態：音声OFF */
.movie-sounds-off-btn {
    display: block;
}

.movie-sounds-on-btn {
    display: none;
}

/* ==============================
   タブレット
============================== */

@media screen and (max-width: 1199px) {
    .movie-carousel-track {
        --visible-slides: 3;
    }
}

@media screen and (max-width: 767px) {
    .short-movie-section {
        padding: 65px 0;
    }

    .short-movie-inner {
        max-width: 100%;
    }

    .movie-slide {
        padding: 15px 8px;
        transform: scale(0.86);
    }

    .movie-slide.is-center {
        transform: scale(1);
    }

    .movie-carousel-dots {
        margin-top: 35px;
    }

    .movie-sound-area {
        margin-right: 20px;
    }
    
    /* 追記ここから */
    .product-card {
    --base-rotate: 0deg;
    }
    /* 追記ここまで */
}

/* ==============================
   スマートフォン
============================== */

@media screen and (max-width: 479px) {
    .short-movie-section {
        padding: 50px 0;
    }

    .short-movie-inner {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .movie-carousel {
        width: 100%;
        min-width: 0;
    }

    .movie-carousel-viewport {
        width: 100%;
        min-width: 0;
        overflow: hidden;
    }

    /*
     * leftやmarginでは位置を動かさない
     * 中央配置はJavaScriptのtranslateXだけで行う
     */
    .movie-carousel-track {
        --visible-slides: 1;

        position: static;
        left: auto;
        width: 100%;
        margin: 0;
    }

    /*
     * 中央64%、左右に18%ずつ表示
     */
    .movie-slide {
        flex: 0 0 60%;
        width: 60%;
        min-width: 0;
        padding: 12px 20px;
        transform: scale(0.88);
    }
    
    .movie-slide.is-center {
        z-index: 2;
        opacity: 1 !important;
        transform: scale(1);
    }

    .movie-player {
        display: block;
        width: 100%;
        border-radius: 8px;
    }

    .movie-carousel-dots {
        margin-top: 30px;
    }

    .movie-sound-area {
        justify-content: center;
        margin-top: 25px;
        margin-right: 0;
    }
}
                
/* ==============================
   Slickによる横幅はみ出し対策
============================== */

/* Flex全体 */
#second-warpper {
    width: 100%;
    min-width: 0;
}

/*
 * Slickの長いtrackに引っ張られないようにする
 * Flexアイテムではmin-width: 0が重要
 */
#side-contents {
    flex: 1 1 auto;
    width: calc(100% - 100px);
    min-width: 0;
    max-width: calc(100% - 100px);
    order: 1;
}

/* PCサイドメニューは100pxを維持 */
#nav-out {
    flex: 0 0 100px;
    width: 100px;
    min-width: 100px;
    max-width: 100px;
    order: 2;
}

/* スライダー部分だけ横方向を隠す */
.short-movie-section {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
    overflow-y: visible;
}

.short-movie-inner {
    width: 100%;
    min-width: 0;
    margin: 0 auto;
}

/* Slick本体 */
.movie-slick {
    width: 100%;
    min-width: 0;
}

/*
 * .slick-trackの大きなwidthはそのままでOK
 * 表示範囲は.slick-listで制限する
 */
.movie-slick .slick-list {
    width: 100%;
    min-width: 0;
    overflow: hidden;
}
                
@media screen and (max-width: 1024px) {
    #second-warpper {
        display: block;
    }

    #side-contents {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .short-movie-inner {
        max-width: 100%;
    }
}