@charset "utf-8";

/* CSS INFORMATION -====================================================
File name : top.css
Description :
===================================================================== */

/* =====================================================================
*    mv
* =================================================================== */
.mv_photo {
    display: none;
    padding-top: calc(320 / 750 * 100%);
}
.mv_photo_s {
    display: block;
    padding-top: calc(320 / 750 * 100%);
}

.mv_photo img,.mv_photo_s img {
    width: auto;
    height: 100%;
    position: absolute;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

@media screen and (min-width: 768px) {
    .mv_photo {
            display: block;
        padding-top: 0;
    }
.mv_photo_s {
    display: none;
    padding-top: calc(320 / 750 * 100%);
}
.mv_photo img,.mv_photo_s img {
        width: 100%;
        height: auto;
        position: relative;
        left: 0;
        -webkit-transform: none;
        transform: none;
    }
}

@media screen and (min-width: 1140px) {

}


/* =====================================================================
*    movie
* =================================================================== */
.movie {
    position: relative;
    padding: calc(80 / 750 * 100%) 0;
}

.movie_subttl {
    width: calc(670 / 750 * 100%);
    margin: calc(30 / 750 * 100%) auto calc(-25 / 750 * 100%);
    font-size: 2.8rem;
    font-weight: 700;
    text-align: center;
}

.movie_box {
    position: relative;
    width: calc(670 / 750 * 100%);
    margin: calc(40 / 750 * 100%) auto 0;
}

.movie_txt {
    padding: calc(40 / 670 * 100%);
    background-color: #fff;
}

.movie_logo {
    display: block;
    width: calc(119 / 590 * 100%);
    margin: 0 0 0.8rem auto;
}

.movie_txt .contents_txt1 {
    padding-top: 0;
}
.next_coming {
    width: 100%;
}
.next_coming img {
    width: 100%;
}

@media screen and (min-width: 768px) {
    .movie {
        padding: calc(40 / 1140 * 100%) 0 calc(80 / 1140 * 100%);
    }

    .movie_subttl {
        width: 100%;
        margin: calc(30 / 1024 * 100%) auto calc(-25 / 1024 * 100%);
        font-size: 2rem;
    }

    .movie_box {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        width: calc(1200 / 1600 * 100%);
        margin: calc(40 / 1140 * 100%) auto 0;
    }

    .movie_box .movie_wrap {
        width: calc(600 / 1200 * 100%);
        padding-top: 0;
    }

    .movie_box .movie_wrap::before {
        content: "";
        display: block;
        width: 100%;
        padding-top: 56.25%;
    }

    .movie_txt {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        width: calc(600 / 1200 * 100%);
        padding: calc(40 / 1200 * 100%);
    }

    .movie_logo {
        width: calc(103 / 600 * 100%);
        margin: 0 0 1.2rem auto;
    }

    .movie_txt .contents_txt1 {
        padding: 0 0 1.4em;
        font-size: 1.6rem;
    }
}

@media screen and (min-width: 1140px) {
    .movie {
        padding: 40px 0 80px;
    }

    .movie_box {
        margin: 40px auto 0;
    }

    .movie_logo {
        width: 103px;
    }
}


/* =====================================================================
*    performer
* =================================================================== */
.performer {
    padding: calc(40 / 750 * 100%) 0;
    background-color: #f5f5f5;
}

.performer_box {
    width: calc(670 / 750 * 100%);
    margin: 0 auto;
    padding: calc(30 / 750 * 100%) calc(40 / 750 * 100%);
    background-color: #fff;
}

.performer_date {
    margin: 0 0 0.3em;
    color: #00c7b6;
    font-size: 2.4rem;
    font-weight: 700;
    text-align: center;
}

@media screen and (min-width: 768px) {
    .performer {
        padding: calc(20 / 1140 * 100%) 0;
    }

    .performer_box {
        width: calc(800 / 1024 * 100%);
        padding: calc(30 / 1024 * 100%) calc(40 / 1024 * 100%);
    }

    .performer_date {
        margin: 0 0 0.5em;
        font-size: 1.8rem;
        text-align: left;
    }
}

@media screen and (min-width: 1140px) {
    .performer {
        padding: 20px 0;
    }
}


/* =====================================================================
*    contents
* =================================================================== */
.contents {
    position: relative;
    padding: calc(80 / 750 * 100%) 0;
}

.contents > section {
    position: relative;
    margin: 0 0 calc(60 / 750 * 100%);
}

.contents > section:last-child {
    margin: 0;
}

.contents_box {
    position: relative;
    width: calc(670 / 750 * 100%);
    margin: calc(40 / 750 * 100%) auto 0;
}

.contents_img {
    position: relative;
}

@media screen and (min-width: 768px) {
    .contents {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        justify-content: center;
        padding: calc(80 / 1140 * 100%) calc(40 / 1600 * 100%) 0;
    }

    .contents > section,
    .contents > section:last-child {
        width: calc(480 / 1520 * 100%);
        margin: 0 calc(40 / 1520 * 100%) calc(80 / 1520 * 100%) 0;
    }

    .contents > section:nth-child(3n),
    .contents > section:last-child {
        margin-right: 0;
    }

    .contents_box {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        width: 100%;
        margin: calc(20 / 480 * 100%) auto 0;
    }

    .contents_txt {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        height: 100%;
    }
}

@media screen and (min-width: 1140px) {
    .contents {
        padding: 80px calc(40 / 1600 * 100%) 0;
    }

    .contents > section,
    .contents > section:last-child {
        margin-bottom: 80px;
    }

    .contents_box {
        margin: 20px auto 0;
    }
}


/* =====================================================================
*    twitter
* =================================================================== */
.twitter {
    position: relative;
    padding: calc(80 / 750 * 100%) 0 calc(180 / 750 * 100%);
}

.twitter_widget {
    margin: calc(55 / 750 * 100%) 0 0;
    padding: calc(40 / 750 * 100%);
    background-color: #fff;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.twitter_widget iframe {
    display: block !important;
    width: 740px !important;
    height: calc(540 / 750 * 100vw) !important;
}

@media screen and (min-width: 768px) {
    .twitter {
        padding: calc(80 / 1140 * 100%) 0 calc(120 / 1140 * 100%);
    }

    .twitter_box {
        width: calc(800 / 1024 * 100%);
        margin: 0 auto;
        padding: calc(40 / 1024 * 100%) calc(80 / 1024 * 100%);
        background-color: #fff;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    .twitter .sec_ttl_w {
        color: #222;
    }

    .twitter .sec_ttl_w::before {
        background: url(../images/common/icon1.png) no-repeat center center;
        background-size: 100% auto;
    }

    .twitter_widget {
        margin: calc(20 / 640 * 100%) 0 0;
        padding: 0;
    }

    .twitter_widget iframe {
        height: calc(370 / 1024 * 100vw) !important;
    }
}

@media screen and (min-width: 1140px) {
    .twitter {
        padding: 80px 0 120px;
    }

    .twitter_widget iframe {
        height: 370px !important;
    }
}