@charset "UTF-8";
body,
.movie_wrapper {
    background-color:#333;
}
button {
    color: inherit;
    border: none;
}
.movie_wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100svh;
    overflow: clip;
}
.movie_inner {
    position: relative;
}
.movie_controller {
    background-color:  var(--color-black);
    color: var(--color-white);
    display: flex;
    border-radius: 16rem;
    width: max-content;
}
.movie_controller_nav {
    display: flex;
}
.movie_controller_action {
    display: flex;
    justify-content: space-between;
}
.btn_prev,
.btn_next {
    display: flex;
    align-items: center;
    cursor: pointer;
}
.btn_prev_icon,
.btn_next_icon {
    width: 48rem;
    height: 48rem;
}
.btn_prev_icon {
    background: url(../img/btn_prev.svg) no-repeat center center / contain;
}
.btn_next_icon {
    background: url(../img/btn_next.svg) no-repeat center center / contain;
}
.btn_mute,
.btn_close {
    font-size: 12rem;
    padding-inline: 8rem;
    gap: 4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    text-transform: uppercase;
    justify-content: space-between;
}
.btn_close_icon {
    width: 24rem;
    height: 24rem;
    background: url(../img/icon_close.svg) no-repeat center center / 21rem auto;
}
.btn_mute_icon {
    width: 24rem;
    height: 24rem;
    background-image: url(../img/icon_on.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}
.btn_mute.is_muted .btn_mute_icon {
    background-image: url(../img/icon_off.svg);
}
.youtube_player {
    overflow: hidden;
    margin: auto;
    position: relative;
    background-color: var(--color-black);
    aspect-ratio: 9 / 16;
    width: 100%;
    height: 100%;
}
.youtube_player iframe {
    aspect-ratio: 9 / 16;
    width: 100%;
    height: 100%;
}
/* スライド移動中はiframeを隠してサムネイルだけ見せる */
#movie_slider.is_transitioning .youtube_player iframe {
    visibility: hidden;
}
.youtube_tap_overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 102%;
    background: transparent;
    cursor: pointer;
    opacity: 1;
}
.player_thumb_img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}
.youtube_tap_overlay_play {
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    width: calc(60 / 338 * 100%);
    pointer-events: none;
}
.youtube_tap_overlay_play_circle {
    fill: var(--color-red);
}
.youtube_tap_overlay_play_arrow {
    fill: var(--color-white);
}
.youtube_player.is_playing .youtube_tap_overlay {
    transition: opacity .6s .5s;
    opacity: 0;
    pointer-events: none;
}
@media (min-width: 769px) {
    .movie_slider {
        padding-inline: 200rem;
    }
    .movie_slider .swiper-slide {
        overflow: hidden;
    }
    .swiper-wrapper {
        height: 100svh;
        max-height: 80vh;
    }
    .movie_controller {
        position: absolute;
        top: 50%;
        left: calc(100% - 160rem);
        translate: 0 -50%;
        flex-direction: column;
        padding: 24rem;
        gap: 40rem;
        z-index: 1;
    }
    .youtube_player iframe {
        width: max-content;
    }
    .movie_controller_nav {
        flex-direction: column;
        gap: 8rem;
    }
    .btn_prev,
    .btn_next {
        font-size: 14rem;
        gap: 8rem;
    }
    .btn_prev .fs_s,
    .btn_next .fs_s {
        font-size: 12rem;
    }
    .youtube_tap_overlay:hover .youtube_tap_overlay_play_circle {
        fill: var(--color-white);
    }
    .youtube_tap_overlay:hover .youtube_tap_overlay_play_arrow {
        fill: var(--color-red);
    }
}
@media (max-width: 768px) {
    .movie_wrapper {
        align-items: flex-end;
    }
    .movie_inner {
        --gap:24rem;
        --padding:8rem;
        padding: var(--padding) 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--gap);
    }
    .movie_slider {
        height: calc(85svh - (var(--padding) * 2) - var(--gap));
    }
    .movie_slider .swiper-slide {
        padding-inline: 32rem;
    }
    .youtube_player {
        overflow: hidden;
    }
    .movie_controller {
        gap: 32rem;
        height: 15svh;
        flex: 1;
        padding: 8rem 24rem;
    }
    .movie_controller_nav {
        gap: 16rem;
    }
    .btn_prev,
    .btn_next {
        flex-direction: column;
        font-size: 12rem;
        gap: 4rem;
    }
    .movie_controller_action {
        align-items: center;
        gap: 24rem;
    }
    .btn_mute,
    .btn_close {
        width: 40rem;
    }
}