/* ムービーページ */

.movie_ttl_wrap {
    width: 100%;
    height: 2.65rem;
    background: url('../img/movie_ttl_bg.png') no-repeat center bottom/cover;
    padding-top: 45px;
}

.movie_wrap {
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: ;
    width: 100%;
    text-align: center;
}

 /* タイトル */
.movie_ttl {
    width: 7.5rem;
    margin: .92rem auto 0;
}

.movie_ul{
    width: 12.7rem;
    padding: 0 .1rem;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    display:-webkit-box;
    display:-ms-flexbox;
    display:-moz-flex;
    display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
}

    .movie_ul--normal{
        margin:.97rem auto .1rem auto;
    }

    .movie_ul--small{
        margin:0 auto .64rem auto;
    }

.movie_li{
    margin:0 auto .46rem auto;
    overflow: hidden;
    position: relative;
}

     /* 枠要素 */
    .movie_li--img--waku{
        position: absolute;
        left: 0;
    }

 /* 中型 */
.movie_li--normal {
    width: 5.9rem;
    height: 3.32rem;
}

 /* 小型 */
.movie_li--small {
    width: 3.8rem;
    height: 2.14rem;
}

    .movie_li img{
        -webkit-transition-duration: 0.3s;
                transition-duration: 0.3s;
    }

    /* 拡大アニメーション */
    .zoom{
        -webkit-transform: scale(1.1,1.1);
                transform: scale(1.1,1.1);
        cursor: pointer;
    }

@media screen and (max-width:750px) {
    /*　画面サイズが750pxからはここを読み込む　*/

    .movie_ttl_wrap {
        width: 100%;
        height: 2.76rem;
        background: url(../img/movie_ttl_bg_sp.png) no-repeat center bottom/100% auto;
        padding-top: .55rem;
    }

    /* タイトル */
    .movie_ttl {
        width: 100%;
        margin: .92rem auto 0;
    }

    .movie_wrap_box {
        width: 7.5rem;
    }

    .movie_ul{
        width: 7.5rem;
        padding: 0 .1rem;
        display: block;
    }

    .movie_ul--normal {
        margin: .72rem auto 0rem auto;
    }

        .movie_li {
            margin: 0 auto .6rem auto;
        }

        .movie_li img{
            width: 100%;
        }
             /* 小型 */
            .movie_li--small {
                width: 5.9rem;
                height: 3.32rem;
            }

}

.new-icon::after {
    position: absolute;
    top: 10px;
    right: 10px;
    display: inline-block;
    width: 61px;
    height: 25px;
    content: '';
    background: url('/img/new_icon.png') no-repeat 0 0/contain;
    -webkit-animation-name: bounce;
    animation-name: bounce;
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-duration: 1.4s;
    animation-duration: 1.4s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
 }

 @-webkit-keyframes bounce {
    from,
    20%,
    53%,
    80%,
    to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    40%,
    43% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -webkit-transform: translate3d(0, -30%, 0);
        transform: translate3d(0, -30%, 0);
    }

    70% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -webkit-transform: translate3d(0, -15%, 0);
        transform: translate3d(0, -15%, 0);
    }

    90% {
        -webkit-transform: translate3d(0, -6%, 0);
        transform: translate3d(0, -6%, 0);
    }
}

@keyframes bounce {
    from,
    20%,
    53%,
    80%,
    to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    40%,
    43% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -webkit-transform: translate3d(0, -30%, 0);
        transform: translate3d(0, -30%, 0);
    }

    70% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -webkit-transform: translate3d(0, -15%, 0);
        transform: translate3d(0, -15%, 0);
    }

    90% {
        -webkit-transform: translate3d(0, -6%, 0);
        transform: translate3d(0, -6%, 0);
    }
}

.bounce {
    -webkit-animation-name: bounce;
    animation-name: bounce;
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    opacity: 0;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;

}