/* SPOKES動画 共通モーダル */
.movie-banner__lead {
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.4;
    text-align: center;
}

.spokes-movie-trigger {
    display: block;
    position: relative;
    width: min(538px, 58%);
    margin: 40px auto;
    transition: opacity .2s;
}

.spokes-movie-trigger:hover {
    opacity: .85;
}

.spokes-movie-trigger picture,
.spokes-movie-trigger img {
    display: block;
    width: 100%;
    height: auto;
}

.spokes-movie-trigger::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .32);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.spokes-movie-trigger::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    margin-left: 4px;
    border-top: 18px solid transparent;
    border-bottom: 18px solid transparent;
    border-left: 28px solid #fff;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.spokes-modal {
    width: min(1080px, calc(100vw - 120px));
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    background: transparent;
}

.spokes-modal.mfp-hide {
    display: none !important;
}

.spokes-modal__video {
    width: 100%;
    height: min(600px, calc(var(--spokes-modal-height, 100vh) - 120px));
    min-height: 420px;
    margin: 0 auto;
}

.spokes-modal__video iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

html.is-spokes-modal-open,
body.is-spokes-modal-open {
    overflow: hidden !important;
}

body.is-spokes-modal-open iframe#bedore-webagent-inner {
    visibility: hidden !important;
    pointer-events: none !important;
}

body.is-spokes-modal-open .mfp-bg.spokes-modal-mfp {
    z-index: 10001 !important;
}

body.is-spokes-modal-open .mfp-wrap.spokes-modal-mfp {
    z-index: 10002 !important;
}

.mfp-wrap.spokes-modal-mfp .mfp-container {
    padding: 40px 30px;
}

.mfp-wrap.spokes-modal-mfp .mfp-content {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: auto;
    max-width: 100%;
    margin: 0 auto;
    text-align: left;
}

@media screen and (max-width: 767px) {
    .name-movie {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    .spokes-movie-trigger {
        width: min(100%, 390px);
        margin-top: 25px;
    }

    .spokes-movie-trigger::after {
        width: 58px;
        height: 58px;
    }

    .spokes-movie-trigger::before {
        border-top-width: 14px;
        border-bottom-width: 14px;
        border-left-width: 22px;
    }

    .spokes-modal {
        width: 100vw;
        margin: 0;
    }

    .spokes-modal__video {
        height: min(420px, calc(var(--spokes-modal-height, 100vh) - 120px));
        min-height: 330px;
    }

    .mfp-wrap.spokes-modal-mfp .mfp-container {
        padding: 100px 0;
    }
}

@media screen and (max-width: 1180px) and (max-height: 620px) and (orientation: landscape) {
    .mfp-wrap.spokes-modal-mfp {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: var(--spokes-modal-height, 100vh) !important;
        overflow: hidden !important;
    }

    .mfp-wrap.spokes-modal-mfp .mfp-container {
        position: fixed !important;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100vw;
        height: var(--spokes-modal-height, 100vh) !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    .mfp-wrap.spokes-modal-mfp .mfp-container::before {
        display: none !important;
    }

    .mfp-wrap.spokes-modal-mfp .mfp-content {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100vw !important;
        height: var(--spokes-modal-height, 100vh) !important;
        max-width: 100vw !important;
        margin: 0 !important;
        overflow: hidden !important;
    }

    .spokes-modal {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100vw;
        height: var(--spokes-modal-height, 100vh) !important;
        max-width: 100vw !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
    }

    .spokes-modal__video {
        width: 100vw;
        height: var(--spokes-modal-height, 100vh);
        min-height: 0;
        margin: 0 auto;
    }

    .mfp-wrap.spokes-modal-mfp button.mfp-close {
        top: 0 !important;
    }

}