@charset "utf-8";

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


/* =====================================================================
*    mv
* =================================================================== */

.mv::before {
    content: "";
    display: block;
    width: 100%;
    padding-top: calc(1600 / 1200 * 100%);
    background: url(../images/top/img_mv.jpg) no-repeat center center;
    background-size: 100% auto;
}

.mv_ttl {
    width: calc(500 / 750 * 100%);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: calc(634 / 750 * 100%) auto 0;
}

.mv_catch {
    width: calc(120 / 750 * 100%);
    position: absolute;
    top: 0;
    right: 0;
    margin: calc(20 / 750 * 100%) calc(20 / 750 * 100%) 0 0;
}

.mv_date {
    /* padding: calc(30 / 750 * 100%) 0 calc(13 / 750 * 100%); */
    background: url(../images/common/bg_red2.jpg) repeat center top;
    background-size: calc(640 / 750 * 100%) auto;
}

.mv_date img {
    /* width: calc(711 / 750 * 100%); */
    width: 100%;
    margin: 0 auto;
}

#header .twitter {
    display: none;
}

@media screen and (min-width: 768px) {
    #wrapper {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
    .header {
        width: calc(840 / 1200 * 100%);
    }
    .header_box {
        width: calc(160 / 840 * 100%);
    }
    .fixed .header_box {
        width: calc(160 / 1200 * 100%);
    }
    .mv {
        width: calc(680 / 840 * 100%);
        margin: 0 0 0 auto;
    }
    .main {
        width: calc(360 / 1200 * 100%);
        padding: 0 0 calc(93 / 1200 * 100%);
        background: url(../images/common/bg_gray.jpg) repeat center top;
        background-size: calc(320 / 360 * 100%) auto;
    }
    .mv_ttl {
        width: calc(660 / 1200 * 100%);
        margin: calc(1076 / 1200 * 100%) auto 0;
    }
    .mv_catch {
        width: calc(150 / 1200 * 100%);
        margin: calc(50 / 1200 * 100%) calc(50 / 1200 * 100%) 0 0;
    }
    .mv_date {
        /* padding: calc(32 / 1200 * 100%) 0 calc(11 / 1200 * 100%); */
        background-size: calc(640 / 1200 * 100%) auto;
    }
    .mv_date img {
        /* width: calc(949 / 1200 * 100%); */
    }
    #header .twitter {
        display: block;
    }
}

@media screen and (min-width: 1200px) {
    .header {
        width: calc(100% - 360px);
    }
    .header_box,
    .fixed .header_box {
        width: 160px;
    }
    .mv {
        width: calc(100% - 160px);
        margin: 0 0 0 auto;
    }
    .main {
        width: 360px;
        padding: 0 0 93px;
    }
}


/* =====================================================================
*    story
* =================================================================== */

.story {
    background: url(../images/common/bg_gray.jpg) repeat center top;
    background-size: calc(640 / 750 * 100%) auto;
}

.story_movie {
    margin: 0 0 calc(45 / 750 * 100%);
}

.story_movie img {
    overflow: hidden;
}

.story_movie a::before {
    content: "";
    display: block;
    width: calc(120 / 750 * 100vw);
    height: calc(120 / 750 * 100vw);
    background-color: rgba(24, 32, 54, 0.85);
    border-radius: 50%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 2;
}

.story_movie a::after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 2.6vw 0 2.6vw 4.1vw;
    border-color: transparent transparent transparent #fff;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 1.1vw;
    right: 0;
    margin: auto;
    z-index: 2;
}

.story_details {
    width: calc(650 / 750 * 100%);
    margin: 0 auto;
}

.story_date {
    color: #b79044;
    font-size: 2.4rem;
    line-height: 1.4;
    text-align: center;
}

.story_other {
    margin: 0.2em 0 0;
    color: #b79044;
    font-size: 2rem;
    line-height: 1.4;
    text-align: center;
}

.story_title {
    margin: 0.15em 0 0;
    color: #da4043;
    font-size: 4.2rem;
    line-height: 1.4;
    text-align: center;
}

.story_txt_short {
    margin: 1.4em 0 0;
    display: none;
}

.story_link {
    margin: calc(40 / 750 * 100%) auto 0;
}

@media screen and (min-width: 768px) {
    .story {
        background: none;
    }
    .story .sec_ttl {
        padding: calc(10 / 360 * 100%) 0;
    }
    .story .sec_ttl::before {
        padding-top: calc(75 / 360 * 100%);
    }
    .story .sec_ttl img {
        width: calc(325 / 360 * 100%);
        height: auto;
        margin: calc(10 / 360 * 100%) auto 0;
    }
    .story_movie {
        margin: 0 0 calc(25 / 360 * 100%);
    }
    .story_movie a::before {
        width: calc(60 / 1200 * 100vw);
        height: calc(60 / 1200 * 100vw);
        -webkit-transition: 0.3s ease;
        transition: 0.3s ease;
    }
    .story_movie a:hover::before {
        background-color: rgba(229, 22, 20, 0.85);
    }
    .story_movie a::after {
        left: calc(6 / 1200 * 100vw);
        border-width: calc(11 / 1200 * 100vw) 0 calc(11 / 1200 * 100vw) calc(17 / 1200 * 100vw);
    }
    .story_details {
        width: calc(300 / 360 * 100%);
    }
    .story_date {
        font-size: 1.4rem;
    }
    .story_other {
        font-size: 1.2rem;
    }
    .story_title {
        font-size: 2.4rem;
    }
    .story_txt_short {
        margin: 1.2em 0 0;
    }
    .story_link {
        margin: calc(25 / 360 * 100%) auto 0;
    }
}

@media screen and (min-width: 1200px) {
    .story .sec_ttl img {
        height: 75px;
    }
    .story_movie a::before {
        width: 60px;
        height: 60px;
    }
    .story_movie a::after {
        left: 6px;
        border-width: 11px 0 11px 17px;
    }
}


/* =====================================================================
*    news
* =================================================================== */

.news {
    background: url(../images/common/bg_gray.jpg) repeat center top;
    background-size: calc(640 / 750 * 100%) auto;
}

.news_box {
    width: calc(650 / 750 * 100%);
    margin: 0 auto;
}

.news_box li {
    margin: 0 0 calc(30 / 650 * 100%);
}

.news_box li:last-child {
    margin-bottom: 0;
}

.news_list {}

.news_date {
    margin: 0 0 0.4em;
    color: #b79044;
    font-size: 2.2rem;
}

.news_txt {
    display: inline;
}

a .news_txt {
    border-bottom: 1px solid #bf3033;
}

@media screen and (min-width: 768px) {
    .news {
        background: none;
    }
    .news .sec_ttl {
        padding: calc(10 / 360 * 100%) 0;
    }
    .news .sec_ttl::before {
        padding-top: calc(75 / 360 * 100%);
    }
    .news .sec_ttl img {
        width: calc(325 / 360 * 100%);
        height: auto;
        margin: calc(10 / 360 * 100%) auto 0;
    }
    .news_box {
        width: calc(300 / 360 * 100%);
    }
    .news_box li {
        margin: 0 0 calc(22 / 300 * 100%);
    }
    a .news_txt {
        -webkit-transition: 0.3s ease;
        transition: 0.3s ease;
    }
    a:hover .news_txt {
        border-color: transparent;
    }
    .news_date {
        margin: 0 0 0.6em;
        font-size: 1.2rem;
    }
}

@media screen and (min-width: 1200px) {
    .news .sec_ttl img {
        height: 75px;
    }
}


/* =====================================================================
*    top_banner
* =================================================================== */

@media screen and (min-width: 768px) {
    .top_banner_box a:hover {
        opacity: 0.7;
    }
}

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


/* =====================================================================
*    twitter
* =================================================================== */

.twitter {
    background: url(../images/top/bg_twitter_sp.jpg) no-repeat center top;
    background-size: 100% auto;
}

.twitter .sec_ttl::before {
    padding-top: calc(152 / 750 * 100%);
    background: url(../images/common/bg_deco2.png) no-repeat center center;
    background-size: auto 100%;
}

.twitter .sec_ttl img {
    width: auto;
    height: calc(152 / 750 * 100vw);
}

.timeline {}

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

@media screen and (min-width: 768px) {
    .twitter {
        background: url(../images/top/bg_twitter_pc.jpg) repeat center top;
        background-size: 100% auto;
    }
    .twitter .sec_ttl {
        padding: calc(29 / 1200 * 100%) 0;
    }
    .twitter .sec_ttl::before {
        padding-top: calc(76 / 1200 * 100%);
    }
    .twitter .sec_ttl img {
        width: calc(325 / 1200 * 100%);
        height: auto;
        margin: calc(29 / 1200 * 100%) auto 0;
    }
    .timeline {
        width: calc(1000 / 1200 * 100%);
        margin: 0 auto;
        z-index: 2;
    }
    .timeline_box {
        padding-top: calc(1100 / 1000 * 100%);
    }
    .timeline iframe {
        width: 100% !important;
        height: 100% !important;
        min-width: auto !important;
        min-height: auto !important;
        position: absolute !important;
        top: 0;
        left: 0;
    }
    .main .twitter {
        display: none;
    }
}

@media screen and (min-width: 768px) and (orientation: landscape) {
    .timeline_box {
        padding-top: calc(366 / 1000 * 100%);
    }
}

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


/* =====================================================================
*    copyright
* =================================================================== */

.main .footer_copy {
    display: none;
}

@media screen and (min-width: 768px) {
    .main .footer_copy {
        display: block;
        width: 100%;
        padding-top: calc(93 / 360 * 100%);
        background-size: calc(640 / 360 * 100%) auto;
        position: absolute;
        bottom: 0;
        left: 0;
    }
    .main .footer_copy small {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        width: 100%;
        height: 100%;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        position: absolute;
        top: 0;
        left: 0;
        letter-spacing: -0.05em;
    }
    .main .footer_copy::after {
        display: none;
    }
}


/* ================================================================== */


/*    loading
/* ================================================================== */

.loader {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: url(../images/common/bg_gray.jpg) repeat center top;
    background-size: calc(640 / 750 * 100%) auto;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100001;
}

.loader::before,
.loader::after {
    content: "";
    display: block;
    width: calc(150 / 750 * 100%);
    padding-top: calc(800 / 750 * 100%);
    background: url(../images/common/img_loading_left.png) no-repeat left top;
    background-size: 100% auto;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    position: absolute;
    top: 0;
    left: 107%;
}

.loader::after {
    background: url(../images/common/img_loading_right.png) no-repeat right bottom;
    background-size: 100% auto;
    -webkit-transform-origin: bottom right;
    transform-origin: bottom right;
    position: absolute;
    top: auto;
    bottom: 0;
    left: auto;
    right: 107%;
}

.loader span {
    display: block;
    width: calc(507 / 750 * 100%);
    padding-top: calc(500 / 750 * 100%);
    background: url(../images/common/img_mv_logo_l.png) no-repeat center center;
    background-size: 100% auto;
}

.pace {
    -webkit-pointer-events: none;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position: fixed;
    width: 100%;
    height: 100vh;
    z-index: 100000;
}

.pace.pace-inactive .pace-progress {
    display: none;
}

@media screen and (min-width:768px) {
    .loader {
        background: url(../images/common/img_loading_right.png) no-repeat right bottom, url(../images/common/img_loading_left.png) no-repeat left top, url(../images/common/bg_gray.jpg) repeat center top;
        background-size: auto 100%, auto 100%, calc(320 / 1200 * 100%) auto;
    }
    .loader::before,
    .loader::after {
        display: none;
    }
    .loader span {
        width: calc(380 / 1200 * 100%);
        padding-top: calc(210 / 1200 * 100%);
    }
}

@media screen and (min-width:1200px) {
    .loader {
        background-size: auto 100%, auto 100%, 320px auto;
    }
}


/* =====================================================================
*    movie
* =================================================================== */

.movie {
    position: fixed;
    top: 0;
    left: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    height: 100%;
    z-index: 100000;
    display: none;
}

.movie_bg {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    position: absolute;
    top: 0;
    left: 0;
}

.movie_close {
    width: calc(120 / 750 * 100%);
    padding: calc(20 / 750 * 100%);
    background-color: #000;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
}

.movie_area {
    width: 100%;
    height: auto;
    margin: 0 auto;
}

.movie_box {
    width: 100%;
    height: 0;
    padding-top: 56.25%;
    overflow: hidden;
}

.movie_box iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

@media screen and (min-width: 768px) {
    .movie_bg {
        cursor: pointer;
    }
    .movie_close {
        width: calc(80 / 1200 * 100%);
        padding: calc(20 / 1200 * 100%);
        cursor: pointer;
    }
    .movie_close:hover img {
        opacity: 0.7;
    }
}

@media screen and (min-width: 1200px) {
    .movie_close {
        width: 80px;
        padding: 20px;
    }
}