@charset "utf-8";

/* =.family
-------------------------------------------------------------------------*/
.movie {
    position: relative;
    width: 100vw;
    height: calc(100vw / 16 * 9);
    max-width: 936px;
    max-height: 524px;
    margin: 0 0 60px -20px;
    text-align: center;
    }

.movie iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    transform: translate(-50%,-50%);
        -webkit-transform: translate(-50%,-50%);
    }

article>.pkg>section figure span,
article>.pkg>section p>span {
    display: block;
    border-radius: 10px;
    overflow: hidden;
    }

article>.pkg>section figure {
    margin: 0 0 30px;
    overflow: hidden;
    }

article>.pkg>section figure span {
    display: block;
    float: left;
    margin-right: 10px;
    }

article>.pkg>section figure span:last-child { margin-right: 0 !important; }

article>.pkg>section figure.col2 span {
    width: calc(50% - 5px);
    height: calc((100vw - 50px) / 2 * .75);
    max-height: 393px;
    }

article>.pkg>section figure.col3 span {
    width: calc((100% - 20px) / 3);
    height: calc((100vw - 80px) / 3 * .75);
    max-height: 264px;
    }

article>.pkg>section p:after {
    content: '';
    display: block;
    clear: both;
    }

article>.pkg>section p>span {
    width: calc(50% - 5px);
    float: left;
    margin: 0 10px 10px 0;
    }


/* =Media Query
-------------------------------------------------------------------------*/
@media only screen and (min-device-width:375px){
    .movie { margin-left: -30px; }
    article>.pkg>section figure.col2 span { height: calc((100vw - 70px) / 2 * .75); }
    article>.pkg>section figure.col3 span { height: calc((100vw - 80px) / 3 * .75); }
    }

@media only screen and (max-device-width:720px) and (orientation:landscape),only screen and (min-device-width:721px){

	}

@media only screen and (min-device-width:721px){
    .movie { width: 100%; height: calc((100vw - 120px) / 16 * 9); background: url("/images/temp/movbase.svg") no-repeat 50% 0; background-size: contain; margin: 0 auto 60px; }
    .movie iframe { width: 75%; height: 75%; }
    article>.pkg>section p { font-size: 1.6rem; }
    article>.pkg>section figure.col2 span { width: calc(50% - 15px); height: calc((100vw - 150px) / 2 * .75); margin-right: 30px; }
    article>.pkg>section figure.col3 span { height: calc((100vw - 140px) / 3 * .75); }
    article>.pkg>section p>span { width: calc(50% - 15px); margin: 0 30px 20px 0; }
    }

@media only screen and (min-device-width:721px) and (orientation:landscape),only screen and (min-width:1024px){
    article>.pkg>section p { font-size: 1.8rem; }
    }

@media only screen and (min-width:1280px){
    article>.pkg>section p>span { max-width: 353px; }
    }

/* IE11,Edge */
_:-ms-lang(x),.selector {  }

/* IE11 */
_:lang(x)::-ms-backdrop,.selector {  }

/* Edge */
_:-ms-lang(x)::backdrop,article>.pkg>section figure.col3 span { width: calc((100% - 20px) / 3 - 1px); }


/* EOF
-------------------------------------------------------------------------*/