@charset "utf-8";

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

/* =====================================================================
*    mv
* =================================================================== */
.mv {
    background: url(../images/top/mv/bg_mv_sp.jpg) no-repeat left top;
    background-size: 100% auto;
}

.mv .inner {
    padding: calc(252 / 750 * 100%) 0 calc(65 / 750 * 100%);
}

.mv_ttl {
    width: calc(592 / 750 * 100%);
    margin: 0 0 0 calc(73 / 750 * 100%);
}

.mv_ttl2 {
    width: calc(273 / 750 * 100%);
    margin: 0 0 0 calc(60 / 750 * 100%);
    position: absolute;
    top: 0;
    left: 0;
}

.mv_date {
    width: calc(595 / 750 * 100%);
    margin: calc(130 / 750 * 100%) auto calc(413 / 750 * 100%);
}

.movie {
    width: calc(734 / 750 * 100%);
    margin: 0 auto;
    padding: calc(17 / 750 * 100%) calc(42 / 750 * 100%);
    background: url(../images/top/mv/bg_movie.png) no-repeat left top;
    background-size: 100% auto;
}

@media screen and (min-width: 768px) {
    .mv {
        background: url(../images/top/mv/bg_mv_pc.jpg) no-repeat center top #000;
        background-size: calc(1800 / 1300 * 100%) auto;
    }
    
    .mv .inner {
        padding: calc(71 / 1300 * 100%) 0 calc(50 / 1300 * 100%);
    }
    
    .mv_ttl {
        width: calc(592 / 1300 * 100%);
        margin: 0 0 0 calc(343 / 1300 * 100%);
    }
    
    .mv_ttl2 {
        width: calc(160 / 1300 * 100%);
        margin: 0 0 0 calc(142 / 1300 * 100%);
    }
    
    .mv_date {
        width: calc(655 / 1300 * 100%);
        margin: calc(31 / 1300 * 100%) 0 calc(197 / 1300 * 100%) calc(322 / 1300 * 100%);
    }
    
    .movie {
        width: calc(734 / 1300 * 100%);
        padding: calc(17 / 1300 * 100%) calc(42 / 1300 * 100%);
    }
}

@media screen and (min-width: 1300px) {
    .mv {
        background-size: 1800px auto;
    }
    
    .mv .inner {
        padding: 71px 0 50px;
    }
}


/* =====================================================================
*    banner
* =================================================================== */
.banner {
    padding: calc(65 / 750 * 100%) 0;
    background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.5)), color-stop(30%, rgba(0, 0, 0, 0)), color-stop(70%, rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.5))), url(../images/common/bg_leaf.jpg) repeat center top;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.5) 100%), url(../images/common/bg_leaf.jpg) repeat center top;
    background-size: 100% auto, calc(154 / 750 * 100%) auto;
}

.banner_wrap {
    width: calc(510 / 750 * 100%);
    margin: 0 auto;
    padding: calc(10 / 750 * 100%);
    background: url(../images/top/banner/bg_banner.png) no-repeat left top;
    background-size: 100% auto;
}

.banner_list {
}

@media screen and (min-width: 768px) {
    .banner {
        padding: calc(20 / 1300 * 100%) 0;
        background-size: 100% auto, calc(128 / 1300 * 100%) auto;
    }
    
    .banner_wrap {
        width: calc(1020 / 1300 * 100%);
        padding: 0;
        background: none;
    }
    
    .banner_list .slick-list {
        padding: calc(20 / 1020 * 100%) 0;
    }
    
    .banner_list li {
        padding: 0 calc(10 / 1300 * 100vw);
    }
    
    .banner_list li .banner_list_box {
        padding: calc(9 / 490 * 100%);
        background: url(../images/top/banner/bg_banner.png) no-repeat left top;
        background-size: 100% auto;
    }
    
    .banner_list li a:hover {
        -webkit-box-shadow: 0 0 calc(12 / 1300 * 100vw) #fff2aa;
        box-shadow: 0 0 calc(12 / 1300 * 100vw) #fff2aa;
        -webkit-box-shadow: 0 0 0.92vw #fff2aa;
        box-shadow: 0 0 0.92vw #fff2aa;
    }
}

@media screen and (min-width: 1300px) {
    .banner {
        padding: 20px 0;
        background-size: 100% auto, 128px auto;
    }
    
    .banner_list li {
        padding: 0 10px;
    }
    
    .banner_list li a:hover {
        -webkit-box-shadow: 0 0 12px #fff2aa;
        box-shadow: 0 0 12px #fff2aa;
    }
}


/* =====================================================================
*    news
* =================================================================== */
.news {
    padding: calc(190 / 750 * 100%) 0 0;
    background: url(../images/top/news/bg_news_sp1.jpg) no-repeat left top;
    background-size: 100% auto;
    z-index: 2;
}

.news .inner {
    width: calc(670 / 750 * 100%);
    margin: 0 auto;
    padding: calc(5 / 750 * 100%);
    border: calc(12 / 750 * 100vw) solid #880000;
    background-color: #000;
}

.news_box {
    padding: calc(50 / 636 * 100%) calc(22 / 636 * 100%);
    border: 1px solid #d6bc2d;
    background: url(../images/top/news/bg_news_sp3.jpg) repeat-y left top;
    background-size: 100% auto;
}

.news .sec_ttl {
    width: calc(301 / 590 * 100%);
    margin: 0 auto calc(50 / 590 * 100%);
}

.news_adjustment {
    font-size: 2rem;
    height: 21em;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}

.news_list li::before,
.news_list li:last-child::after {
    content: "";
    display: block;
    width: 100%;
    padding-top: calc(14 / 590 * 100%);
    background: url(../images/top/news/line_news_sp.png) no-repeat left top;
    background-size: auto 100%;
}

.news_detail {
    padding: calc(20 / 590 * 100%);
}

.news_detail dt {
    margin: 0 0 0.4em;
    color: #fff4d9;
    font-size: 2.4rem;
    line-height: 1.6;
}

.news_detail dd,
.news_detail dd a {
    color: #fff4d9;
    font-size: 2.8rem;
    line-height: 1.6;
}

@media screen and (min-width: 768px) {
    .news {
        padding: calc(154 / 1300 * 100%) 0 calc(85 / 1300 * 100%);
        background: url(../images/top/news/bg_news_pc1.jpg) no-repeat center top;
        background-size: calc(1600 / 1300 * 100%) auto;
    }
    
    .news .inner {
        width: 100%;
        margin: 0 auto;
        padding: 0;
        border: none;
        background-color: transparent;
    }
    
    .news_box {
        width: calc(900 / 1300 * 100%);
        margin: 0 auto;
        padding: calc(45 / 1300 * 100%) calc(20 / 1300 * 100%) calc(45 / 1300 * 100%) calc(50 / 1300 * 100%);
        border: none;
        background: none;
    }
    
    .news .sec_ttl {
        width: calc(261 / 830 * 100%);
        margin: 0 auto calc(20 / 830 * 100%);
    }
    
    .news_scroll::after {
        content: "";
        display: block;
        width: 17px;
        height: 100%;
        background-color: #000;
        position: absolute;
        top: 0;
        right: 0;
    }
    
    .news_adjustment {
        height: 10em;
    }
    
    .news_list {
        width: calc(800 / 813 * 100%);
    }
    
    .news_list li::before,
    .news_list li:last-child::after {
        padding-top: calc(8 / 800 * 100%);
        background: url(../images/top/news/line_news_pc.png) no-repeat left top;
        background-size: auto 100%;
    }
    
    .news_detail {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        padding: calc(15 / 800 * 100%) calc(20 / 800 * 100%);
    }
    
    .news_detail dt {
        width: calc(180 / 760 * 100%);
        margin: 0;
        font-size: 1.6rem;
    }
    
    .news_detail dd {
        width: calc(620 / 760 * 100%);
    }
    
    .news_detail dd,
    .news_detail dd a {
        font-size: 1.6rem;
    }
    
    .news_detail dd a:hover {
        opacity: 0.7;
    }
}

@media screen and (min-width: 1300px) {
    .news {
        padding: 154px 0 85px;
        background-size: 1600px auto;
    }
}


/* =====================================================================
*    mc
* =================================================================== */
.mc {
    margin: calc(-115 / 750 * 100%) 0 0;
    padding: calc(435 / 750 * 100%) 0 calc(190 / 750 * 100%);
    background: url(../images/top/news/bg_news_sp2.jpg) no-repeat left top;
    background-size: 100% auto;
}

.mc_list li {
    width: calc(630 / 750 * 100%);
}

.mc_list1 {
    margin-left: calc(40 / 750 * 100%);
    margin-bottom: calc(195 / 750 * 100%);
}

.mc_list2 {
    margin-left: calc(80 / 750 * 100%);
}

.mc_list_ttl {
    width: calc(183 / 630 * 100%);
    position: absolute;
    top: 0;
    z-index: 2;
}

.mc_list1 .mc_list_ttl {
    right: 0;
    margin: calc(-90 / 630 * 100%) calc(-68 / 630 * 100%) 0 0;
}

.mc_list2 .mc_list_ttl {
    left: 0;
    margin: calc(-80 / 630 * 100%) 0 0 calc(-70 / 630 * 100%);
}

.mc_list li a {
    padding: calc(8 / 630 * 100%) calc(10 / 630 * 100%);
    background: url(../images/top/mc/bg_frame_sp.png) no-repeat left top;
    background-size: 100% auto;
}

@media screen and (min-width: 768px) {
    .mc {
        margin: 0;
        padding: calc(156 / 1300 * 100%) 0;
        background: url(../images/top/mc/bg_mc_pc1.jpg) no-repeat center top;
        background-size: auto 100%;
    }
    
    .mc_list li {
        width: calc(900 / 1300 * 100%);
        margin: 0 auto;
    }
    
    .mc_list li:not(:last-child) {
        margin-bottom: calc(105 / 1300 * 100%);
    }
    
    .mc_list1::before {
        content: "";
        display: block;
        width: calc(350 / 900 * 100%);
        padding-top: calc(339 / 900 * 100%);
        background: url(../images/top/mc/bg_mc_pc2.png) no-repeat center top;
        background-size: auto 100%;
        position: absolute;
        top: 0;
        right: 0;
        margin: calc(-135 / 900 * 100%) calc(-167 / 900 * 100%) 0 0;
    }
    
    .mc_list2::before {
        content: "";
        display: block;
        width: calc(369 / 900 * 100%);
        padding-top: calc(322 / 900 * 100%);
        background: url(../images/top/mc/bg_mc_pc3.png) no-repeat center top;
        background-size: auto 100%;
        position: absolute;
        top: 0;
        left: 0;
        margin: calc(-105 / 900 * 100%) 0 0 calc(-173 / 900 * 100%);
    }
    
    .mc_list_ttl {
        width: calc(125 / 900 * 100%);
    }
    
    .mc_list1 .mc_list_ttl {
        margin: calc(-95 / 900 * 100%) calc(-60 / 900 * 100%) 0 0;
    }
    
    .mc_list2 .mc_list_ttl {
        margin: calc(-85 / 900 * 100%) 0 0 calc(-60 / 900 * 100%);
    }
    
    .mc_list li a {
        padding: calc(9 / 900 * 100%) calc(10 / 900 * 100%);
        background: url(../images/top/mc/bg_frame_pc.png) no-repeat left top;
        background-size: 100% auto;
    }
    
    .mc_list li a:hover {
        -webkit-box-shadow: 0 0 calc(12 / 1300 * 100vw) #fff2aa;
        box-shadow: 0 0 calc(12 / 1300 * 100vw) #fff2aa;
        -webkit-box-shadow: 0 0 0.92vw #fff2aa;
        box-shadow: 0 0 0.92vw #fff2aa;
    }
}

@media screen and (min-width: 1300px) {
    .mc {
        padding: 156px 0;
    }
    
    .mc_list li a:hover {
        -webkit-box-shadow: 0 0 12px #fff2aa;
        box-shadow: 0 0 12px #fff2aa;
    }
}


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

.notice_txt {
    padding: calc(60 / 750 * 100%) calc(40 / 750 * 100%) calc(100 / 750 * 100%);
}

.notice_txt p {
    font-size: 2.3rem;
    font-weight: 700;
    line-height: 1.7;
}

.notice_txt p strong {
    display: block;
    margin: 0 0 1em;
    color: #eb0001;
    font-size: 4.2rem;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
}

@media screen and (min-width: 768px) {
    .notice_txt {
        padding: calc(50 / 1300 * 100%) calc(30 / 1300 * 100%) calc(80 / 1300 * 100%);
    }
    
    .notice_txt p {
        font-size: 1.6rem;
        line-height: 1.8;
    }
    
    .notice_txt p strong {
        margin: 0 0 0.5em;
    }
}