@charset "utf-8";

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

/* =====================================================================
*    mv
* =================================================================== */
.mv {
    background-color: #fff;
}

.mv::before,
.mv::after {
    content: "";
    display: block;
    width: calc(1564 / 750 * 100%);
    margin: 0 0 0 calc(-782 / 750 * 100%);
    padding-top: calc(120 / 750 * 100%);
    background: url(../images/top/bg_mv1.png) repeat-x center top;
    background-size: 50% 100%;
    position: relative;
    -webkit-animation: mv_anime1 5s linear forwards infinite;
    animation: mv_anime1 5s linear forwards infinite;
}

.mv::after {
    background: url(../images/top/bg_mv2.png) repeat-x center top;
    background-size: 50% 100%;
}

@-webkit-keyframes mv_anime1 {
    0% {
        left: 0;
    }

    100% {
        left: calc(782 / 750 * 100%);
    }
}

@keyframes mv_anime1 {
    0% {
        left: 0;
    }

    100% {
        left: calc(782 / 750 * 100%);
    }
}

@-webkit-keyframes mv_anime2 {
    0% {
        left: 0;
    }

    100% {
        left: 146.63%;
    }
}

@keyframes mv_anime2 {
    0% {
        left: 0;
    }

    100% {
        left: 146.63%;
    }
}

.mv_img {
    display: none;
    padding-top: calc(666 / 750 * 100%);
}

.mv_img_wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
 
.mv_img ul {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    height: 100%;
}
 
.mv_img ul li {
    width: calc(550 / 750 * 100vw);
    height: 100%;
    padding: 0 calc(80 / 750 * 100vw) 0 0;
    float: left;
    display: inline;
}

.mv_date {
    width: calc(383 / 750 * 100%);
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 2;
    margin: 0 0 calc(-205 / 750 * 100%);
}

@media screen and (min-width: 768px) {
    .mv::before,
    .mv::after {
        width: calc(3910 / 1600 * 100%);
        margin: 0 0 0 calc(-2346 / 1600 * 100%);
        padding-top: calc(120 / 1600 * 100%);
        background-size: 20% 100%;
        -webkit-animation: mv_anime2 20s linear forwards infinite;
        animation: mv_anime2 20s linear forwards infinite;
    }
    
    .mv_img {
        padding-top: calc(666 / 1600 * 100%);
    }
    
    .mv_img ul li {
        width: calc(550 / 1600 * 100vw);
        padding: 0 calc(80 / 1600 * 100vw) 0 0;
    }
    
    .mv_date {
        width: calc(493 / 1600 * 100%);
        margin: 0 calc(125 / 1600 * 100%) calc(-180 / 1600 * 100%) 0;
    }
}


/* =====================================================================
*    story
* =================================================================== */
.story {
    padding: calc(190 / 750 * 100%) 0 calc(250 / 750 * 100%);
    background: url(../images/common/bg_pink.png) repeat center top;
    background-size: calc(252 / 750 * 100%) auto;
    overflow: hidden;
}

.story .inner::before {
    content: "";
    display: block;
    width: calc(391 / 630 * 100%);
    padding-top: calc(330 / 630 * 100%);
    background: url(../images/top/bg_story.png) no-repeat left top;
    background-size: 100% auto;
    position: absolute;
    bottom: 0;
    left: 0;
    margin: 0 0 calc(-305 / 630 * 100%) calc(-94 / 630 * 100%);
}

.story .sec_ttl {
    width: calc(298 / 630 * 100%);
    margin: 0 auto calc(115 / 630 * 100%);
    z-index: 2;
}

.story_movie {
    margin: 0 0 calc(75 / 630 * 100%);
}

.story_movie::before {
    content: "";
    display: block;
    width: calc(745 / 630 * 100%);
    padding-top: calc(745 / 630 * 100%);
    background: url(../images/common/bg_guruguru.png) no-repeat center center;
    background-size: auto 100%;
    position: absolute;
    top: 0;
    left: 0;
    margin: calc(-185 / 630 * 100%) 0 0 calc(-57 / 630 * 100%);
    -webkit-animation: guruguru_anime1 10s linear forwards infinite;
    animation: guruguru_anime1 10s linear forwards infinite;
}

.story_movie img {
    border-radius: calc(16 / 750 * 100vw);
    overflow: hidden;
}

.story_movie a::after {
	content: "";
    display: block;
	width: calc(75 / 750 * 100vw);
	height: calc(75 / 750 * 100vw);
	background: url(../images/common/btn_movie.png) no-repeat center center;
    background-size: auto 100%;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
    z-index: 2;
}

.story_txt {
}

.story_date {
    color: #fed429;
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    margin: 0 0 0.8em;
}

.story_date::before,
.story_date::after {
    content: "";
    display: inline-block;
    width: calc(24 / 630 * 100%);
    padding-top: calc(4 / 630 * 100%);
    background: url(../images/common/line_circle_y.png) no-repeat center center;
    background-size: auto 100%;
    position: relative;
    top: -0.3em;
    margin: 0 0.5em;
}

.story_title {
}

.story_other {
    margin: 1em 0 0;
    color: #feec29;
    font-size: 2rem;
    font-weight: 400;
    line-height: 1.3;
    text-align: center;
}

.story_txt_short {
    margin: calc(30 / 630 * 100%) calc(20 / 630 * 100%) 0;
    color: #feec29;
    font-size: 2.4rem;
    line-height: 1.833;
    display: none;
}

.story_link {
    width: calc(400 / 630 * 100%);
    margin: calc(100 / 630 * 100%) auto 0;
}

.story_link a {
    padding: calc(23 / 400 * 100%) 0;
    background: url(../images/common/bg_dot_r.png) repeat left bottom;
    background-size: calc(16 / 400 * 100%) auto;
    border-radius: 2em;
    -webkit-box-shadow: 0 0 calc(20 / 750 * 100vw) rgba(98, 0, 18, 0.5);
    box-shadow: 0 0 calc(20 / 750 * 100vw) rgba(98, 0, 18, 0.5);
    font-size: 2rem;
    overflow: hidden;
}

.story_link a::before {
    content: "";
    display: block;
    width: calc(360 / 400 * 100%);
    height: 100%;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-transform: skewX(-45deg);
    transform: skewX(-45deg);
    background-color: #fff;
    position: absolute;
    top: 0;
    left: 0;
}

.story_link a img {
    width: calc(82 / 400 * 100%);
    margin: 0 auto;
}

@media screen and (min-width: 768px) {
    .story {
        padding: calc(120 / 1300 * 100%) 0 calc(110 / 1300 * 100%);
        background-size: calc(189 / 1300 * 100%) auto;
    }
    
    .story .inner::before {
        width: calc(391 / 1300 * 100%);
        padding-top: calc(330 / 1300 * 100%);
        margin: 0 0 calc(-217 / 1300 * 100%);
    }
    
    .story .sec_ttl {
        width: calc(298 / 1000 * 100%);
        margin: 0 auto calc(80 / 1000 * 100%);
    }
    
    .story_box {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
    }
    
    .story_movie {
        width: calc(480 / 1000 * 100%);
        margin: 0;
    }
    
    .story_movie::before {
        width: calc(456 / 480 * 100%);
        padding-top: calc(456 / 480 * 100%);
        right: 0;
        margin: calc(-96 / 480 * 100%) auto 0;
    }
    
    .story_movie a::after {
        width: calc(54 / 1300 * 100vw);
        height: calc(54 / 1300 * 100vw);
        -webkit-transition: 0.2s ease;
        transition: 0.2s ease;
    }
    
    .story_movie a:hover::after {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }
    
    .story_movie img {
        border-radius: calc(16 / 1300 * 100vw);
    }
    
    .story_details {
        width: calc(480 / 1000 * 100%);
    }
    
    .story_date {
        margin: 0 0 0.6em;
        font-size: 1.8rem;
    }
    
    .story_date::before, .story_date::after {
        width: calc(24 / 480 * 100%);
        padding-top: calc(4 / 480 * 100%);
    }
    
    .story_other {
        font-size: 1.4rem;
    }
    
    .story_txt_short {
        margin: calc(20 / 480 * 100%) calc(10 / 480 * 100%) 0;
        font-size: 1.6rem;
    }
    
    .story_link {
        width: calc(400 / 1000 * 100%);
        margin: calc(110 / 1000 * 100%) auto 0;
    }
    
    .story_link a {
        -webkit-box-shadow: 0 0 calc(20 / 1300 * 100vw) rgba(98, 0, 18, 0.5);
        box-shadow: 0 0 calc(20 / 1300 * 100vw) rgba(98, 0, 18, 0.5);
        top: 0;
    }
    
    .story_link a:hover {
        top: calc(-10 / 1300 * 100vw);
        top: -0.77vw;
    }
}

@media screen and (min-width: 1300px) {
    .story {
        padding: 120px 0 110px;
        background-size: 189px auto;
    }
    
    .story_movie a::after {
        width: 54px;
        height: 54px;
    }
    
    .story_movie img {
        border-radius: 16px;
    }
    
    .story_link a {
        -webkit-box-shadow: 0 0 20px rgba(98, 0, 18, 0.5);
        box-shadow: 0 0 20px rgba(98, 0, 18, 0.5);
    }
    
    .story_link a:hover {
        top: -10px;
    }
}


/* =====================================================================
*    twitter
* =================================================================== */
.twitter {
    padding: calc(130 / 750 * 100%) 0 calc(215 / 750 * 100%);
    background: url(../images/common/bg_blue.png) repeat center top;
    background-size: calc(150 / 750 * 100%) auto;
}

.twitter .inner::after {
    content: "";
    display: block;
    width: calc(212 / 630 * 100%);
    padding-top: calc(161 / 630 * 100%);
    background: url(../images/top/bg_twitter2.png) no-repeat center top;
    background-size: auto 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    margin: 0 auto calc(-229 / 630 * 100%);
}

.twitter .sec_ttl {
    width: calc(300 / 630 * 100%);
    margin: 0 auto calc(50 / 630 * 100%);
}

.timeline {
}

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

.twitter_ani {
    width: calc(198 / 750 * 100%);
    padding-top: calc(63 / 750 * 100%);
    background: url(../images/top/bg_twitter1.png) no-repeat center top;
    background-size: auto 100%;
    position: absolute;
    top: 0;
    left: -50%;
    margin: calc(40 / 750 * 100%) 0 0;
    -webkit-transition: 2s ease;
    transition: 2s ease;
}

.twitter_ani.ani_start {
    left: 65%;
}

@media screen and (min-width: 768px) {
    .twitter {
        padding: calc(75 / 1300 * 100%) 0 calc(135 / 1300 * 100%);
        background-size: calc(150 / 1300 * 100%) auto;
    }
    
    .twitter .inner::after {
        width: calc(170 / 1300 * 100%);
        padding-top: calc(128 / 1300 * 100%);
        margin: 0 auto calc(-142 / 1300 * 100%);
    }
    
    .twitter .sec_ttl {
        width: calc(300 / 1000 * 100%);
        margin: 0 auto calc(25 / 1000 * 100%);
    }
    
    .timeline {
        width: calc(600 / 1000 * 100%);
        margin: 0 auto;
        z-index: 2;
    }
    
    .timeline iframe {
        height: calc(450 / 1300 * 100vw) !important;
        min-width: auto !important;
        min-height: auto !important;
    }
    
    .twitter_ani {
        width: calc(198 / 1300 * 100%);
        padding-top: calc(63 / 1300 * 100%);
        margin: calc(355 / 1300 * 100%) 0 0;
    }
    
    .twitter_ani.ani_start {
        left: 80%;
    }
}

@media screen and (min-width: 1300px) {
    .twitter {
        padding: 75px 0 135px;
        background-size: 150px auto;
    }
    
    .timeline iframe {
        height: 450px !important;
    }
    
    .twitter_ani {
        width: 198px;
        padding-top: 63px;
        margin: 355px 0 0;
    }
}


/* =====================================================================
*    news
* =================================================================== */
.news {
    padding: calc(120 / 750 * 100%) 0 calc(190 / 750 * 100%);
    background: url(../images/common/bg_yellow.png) repeat center top;
    background-size: calc(483 / 750 * 100%) auto;
    overflow: hidden;
}

.news .inner::after {
    content: "";
    display: block;
    width: calc(318 / 630 * 100%);
    padding-top: calc(257 / 630 * 100%);
    background: url(../images/top/bg_news.png) no-repeat center top;
    background-size: auto 100%;
    position: absolute;
    bottom: 0;
    right: 0;
    margin: 0 calc(-34 / 630 * 100%) calc(-288 / 630 * 100%) 0;
}

.news .sec_ttl {
    width: calc(279 / 630 * 100%);
    margin: 0 auto calc(70 / 630 * 100%);
}

.news_box {
}

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

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

.news_list {
}

.news_date {
    width: calc(282 / 630 * 100%);
    margin: 0 auto;
    z-index: 2;
}

.news_date::before,
.news_date::after {
    padding-top: calc(5.5 / 282 * 100%);
}

.news_date span {
    font-size: 2.2rem;
}

.news_txt {
    margin: calc(-30 / 630 * 100%) 0 0;
    padding: calc(60 / 630 * 100%) calc(50 / 630 * 100%) calc(40 / 630 * 100%);
    background: url(../images/common/bg_dot_g.png) repeat left top;
    background-size: calc(24 / 630 * 100%) auto;
    border-radius: calc(12 / 750 * 100vw);
    color: #cb1013;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.833;
    overflow: hidden;
}

.news_txt::before {
    content: "";
    display: block;
    width: calc(650 / 630 * 100%);
    height: 100%;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-transform: skewX(-45deg);
    transform: skewX(-45deg);
    background-color: #fff;
    position: absolute;
    top: 0;
    left: 0;
}

.news_txt span {
    font-weight: 700;
}

@media screen and (min-width: 768px) {
    .news {
        padding: calc(85 / 1300 * 100%) 0 calc(96 / 1300 * 100%);
        background-size: calc(483 / 1300 * 100%) auto;
    }
    
    .news .inner::after {
        width: calc(318 / 1300 * 100%);
        padding-top: calc(257 / 1300 * 100%);
        margin: 0 calc(-4 / 1300 * 100%) calc(-209 / 1300 * 100%) 0;
    }
    
    .news .sec_ttl {
        width: calc(279 / 1000 * 100%);
        margin: 0 auto calc(60 / 1000 * 100%);
    }
    
    .news_box {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    
    .news_box li {
        width: calc(304 / 1001 * 100%);
        margin: 0 calc(44 / 1001 * 100%) calc(44 / 1001 * 100%) 0;
    }
    
    .news_box li:nth-child(3n),
    .news_box li:last-child {
        margin: 0 0 calc(44 / 1001 * 100%) 0;
    }
    
    .news_box li .news_list {
        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%;
        top: 0;
    }
    
    a.news_list:hover {
        top: -0.77vw;
    }
    
    .news_date {
        width: calc(188 / 304 * 100%);
    }
    
    .news_date::before,
    .news_date::after {
        padding-top: calc(6 / 304 * 100%);
    }
    
    .news_date span {
        padding: 0.55em 0;
        font-size: 1.4rem;
    }
    
    .news_txt {
        height: 100%;
        margin: calc(-20 / 304 * 100%) 0 0;
        padding: calc(40 / 304 * 100%) calc(30 / 304 * 100%) calc(20 / 304 * 100%);
        background-size: calc(16 / 304 * 100%) auto;
        border-radius: 6px;
        font-size: 1.6rem;
        line-height: 1.969;
    }
    
    .news_txt::before {
        width: calc(350 / 304 * 100%);
    }
}

@media screen and (min-width: 1300px) {
    .news {
        padding: 85px 0 96px;
        background-size: 483px auto;
    }
    
    a.news_list:hover {
        top: -10px;
    }
}


/* =====================================================================
*    top_banner
* =================================================================== */
.top_banner {
    padding: calc(70 / 750 * 100%) 0;
    background-color: #d71518;
    overflow: hidden;
}

.top_banner .inner::before {
    content: "";
    display: block;
    width: calc(412 / 630 * 100%);
    padding-top: calc(305 / 630 * 100%);
    background: url(../images/top/bg_banner1.png) no-repeat left top;
    background-size: auto 100%;
    position: absolute;
    top: 0;
    left: 0;
    margin: calc(-96 / 630 * 100%) 0 0 calc(-63 / 630 * 100%);
}

.top_banner .inner::after {
    content: "";
    display: block;
    width: calc(438 / 630 * 100%);
    padding-top: calc(347 / 630 * 100%);
    background: url(../images/top/bg_banner2.png) no-repeat left top;
    background-size: auto 100%;
    position: absolute;
    bottom: 0;
    right: 0;
    margin: 0 calc(-64 / 630 * 100%) calc(-135 / 630 * 100%) 0;
}

.top_banner_box {
    width: calc(450 / 630 * 100%);
    margin: 0 auto;
    z-index: 2;
}

.top_banner_box li {
    margin: 0 0 calc(30 / 450 * 100%);
    border-radius: calc(6 / 750 * 100vw);
    overflow: hidden;
}

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

@media screen and (min-width: 768px) {
    .top_banner {
        padding: calc(40 / 1300 * 100%) 0 0;
    }
    
    .top_banner .inner::before {
        width: calc(496 / 1300 * 100%);
        padding-top: calc(363 / 1300 * 100%);
        margin: calc(-53 / 1300 * 100%) 0 0 calc(-56 / 1300 * 100%);
    }
    
    .top_banner .inner::after {
        width: calc(533 / 1300 * 100%);
        padding-top: calc(419 / 1300 * 100%);
        margin: 0 calc(-83 / 1300 * 100%) calc(-116 / 1300 * 100%) 0;
    }
    
    .top_banner_box {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        width: calc(950 / 1000 * 100%);
    }
    
    .top_banner_box li {
        width: calc(450 / 950 * 100%);
        margin: 0 calc(49 / 950 * 100%) calc(40 / 950 * 100%) 0;
        border-radius: 6px;
        top: 0;
        -webkit-transition: 0.3s ease;
        transition: 0.3s ease;
    }
    
    .top_banner_box li:nth-child(even),
    .top_banner_box li:last-child {
        margin: 0 0 calc(40 / 950 * 100%);
    }
    
    .top_banner_box li:hover {
        top: -0.77vw;
    }
}

@media screen and (min-width: 1300px) {
    .top_banner {
        padding: 40px 0 0;
    }
    
    .top_banner_box li:hover {
        top: -10px;
    }
}