@charset "UTF-8";

#toppage {

    .topmovie-img {
        min-width: 100%;
        min-height: 100%;
        object-fit: cover;
    }
    .topmovie-img-sp {
        /* height: 100vh;
        width: calc(100vh * 1080 / 1920);
        object-fit: cover; */
        height: 100%;
        width: 100%;
        object-fit: cover;
    }

    /*
    .topmovie-illust {
        position: absolute;
        left : 15px;
        bottom:15px;
    }
    */
    /*
    #player-loading .topmovie-illust
    {
        width:200px;
    }
    #player-mobile .topmovie-illust
    {
        width:175px;
    }
    */
    /*
    #topmovie-overlay .topmovie-illust
    {
        width:200px;
    }
    */



    #topmovie {
        /* width:100%;
        height: calc(100vw * (315 / 560)); */
        width : 100%;
        height: 100vh;

        position: fixed;
        top : 0;
        left: 0;
        z-index: -2;
        overflow: hidden;
        opacity: 1;
        transition-property: opacity;
        transition-duration: 1000ms;
    }
    #topmovie > iframe{
        width: calc(100% + 400px);
        height: calc(100% + (400px *(315 / 560)) );
        margin-left:-200px;
        margin-top: calc(-200px * (315 / 560));
    }

    #player-loading,
    #player-mobile,
    #player-mobile-sp
    {
        width: 100%;
        height: 100vh;
        background: white;
        position: absolute;
        transition: opacity 0.5s;

        text-align: center;
        font-size: 2.5rem;
        overflow: hidden;
    }
    #player-mobile,
    #player-mobile-sp
    {
        display: none;
    }

    #topmovie-overlay {
        /* width:100%;
        height: calc(100vw * (315 / 560)); */
        width:100%;
        height: 100vh;
        position: relative;
    }
    #topmovie-overlay-img {
        /* opacity: 0.8; */
        width: 20%;
        height: 100%;
        object-fit: contain;
        /* margin-top: -20px; */
    }
    #topmovie-overlay-img > img {
        max-width: 100%;
        max-height: 100%;
        background: white;
        opacity: 0.8;
    }

}
