@charset "utf-8";

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

/* =====================================================================
*    共通・大枠
* =================================================================== */
html {
    font-size: calc(10 / 750 * 100vw);
}

@media screen and (min-width: 768px) {
    html {
        font-size: calc(10 / 1300 * 100vw);
        overflow-x: hidden;
        overflow-y: scroll;
    }
}

@media screen and (min-width: 1300px) {
    html {
        font-size: 10px;
    }
}

.gDef-top-banner {
    background-color: #c9bc9c;
}

.gDef-contents {
    color: #333;
    font-family: "メイリオ", "ＭＳ Ｐゴシック", "小塚ゴシック Pro R", "ヒラギノ角ゴ Pro W3", "Meiryo", "MS PGothic", "KozGoPro-Regular", "Hiragino Kaku Gothic Pro", "MS UI Gothic", Osaka, sans-serif;
    line-height: 1.5;
    background-color: #000;
}

.gDef-contents * {
    position: relative;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.gDef-contents img {
    width: 100%;
    height: auto;
    display: block;
}

.gDef-contents a {
    display: block;
    text-decoration: none;
}

@media screen and (min-width: 768px) {
    .gDef-contents a {
        -webkit-transition: 0.2s ease;
        transition: 0.2s ease;
    }

    .gDef-contents a:hover {
        -webkit-transition: 0.2s ease;
        transition: 0.2s ease;
    }
}

@media screen and (max-width: 767px) {
    .pc {
        display: none !important;
    }
}

@media screen and (min-width: 768px) {
    .sp {
        display: none !important;
    }
}

.main {
    display: block;
}

.inner {
}

@media screen and (min-width: 768px) {
    .inner {
        width: 100%;
        max-width: 1300px;
        margin: 0 auto;
    }
}

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

}


/* =====================================================================
*    subpage
* =================================================================== */
.submv {
    background: url(../images/common/bg_submv_sp.jpg) no-repeat left top;
    background-size: 100% auto;
}

.submv .inner {
    padding-top: calc(720 / 750 * 100%);
}

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

.submv_date {
    width: calc(595 / 750 * 100%);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: calc(306 / 750 * 100%) auto 0;
}

.subpage {
    margin: 0 0 calc(210 / 750 * 100%);
}

.subpage_ttl {
    padding: calc(75 / 750 * 100%) 0 calc(18 / 750 * 100%);
    background: url(../images/common/bg_sub_ttl.jpg) no-repeat center bottom #000;
    background-size: calc(352 / 750 * 100%) auto;
}

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

.subpage_box {
    width: calc(710 / 750 * 100%);
    margin: 0 auto;
    padding: calc(6 / 750 * 100%);
    border: calc(12 / 750 * 100vw) solid #880000;
}

.subpage_box_wrap {
    border: 1px solid #d6bc2d;
}

.subpage_box_wrap::before,
.subpage_box_wrap::after {
    content: "";
    display: block;
    width: 100%;
    padding-top: calc(40 / 672 * 100%);
    background: url(../images/common/bg_corner1_sp.png) no-repeat left top;
    background-size: 100% auto;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

.subpage_box_wrap::after {
    top: auto;
    bottom: 0;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

@media screen and (min-width: 768px) {
    .submv {
        background: url(../images/common/bg_submv_pc.jpg) no-repeat center top #000;
        background-size: calc(1600 / 1300 * 100%) auto;
    }

    .submv .inner {
        padding-top: calc(340 / 1300 * 100%);
    }

    .submv_ttl2 {
        width: calc(160 / 1300 * 100%);
        margin: 0 0 0 calc(142 / 1300 * 100%);
    }

    .submv_date {
        width: calc(615 / 1300 * 100%);
        margin: calc(51 / 1300 * 100%) 0 0 calc(343 / 1300 * 100%);
        padding-top: calc(139 / 1300 * 100%);
        background: url(../images/common/img_submv_date_pc.png) no-repeat left top;
        background-size: 100% auto;
    }

    .submv_date img {
        display: none;
    }

    .subpage {
        margin: 0 0 calc(85 / 1300 * 100%);
    }

    .subpage_ttl {
        width: calc(500 / 1300 * 100%);
        margin: calc(-30 / 1300 * 100%) auto 0;
        padding: calc(65 / 1300 * 100%) 0 calc(18 / 1300 * 100%);
        background-size: calc(352 / 500 * 100%) auto;
    }

    .subpage_ttl img {
        width: calc(313 / 500 * 100%);
    }

    .subpage_box {
        width: calc(920 / 1300 * 100%);
        padding: calc(4 / 1300 * 100%);
        border-width: calc(12 / 1300 * 100vw);
    }

    .subpage_box_wrap {
        border: 1px solid #d6bc2d;
    }

    .subpage_box_wrap::before,
    .subpage_box_wrap::after {
        padding-top: calc(32 / 886 * 100%);
        background: url(../images/common/bg_corner1_pc.png) no-repeat left top;
        background-size: 100% auto;
    }
}

@media screen and (min-width: 1300px) {
    .submv {
        background-size: 1600px auto;
    }

    .submv .inner {
        padding-top: 340px;
    }

    .subpage {
        margin: 0 0 85px;
    }

    .subpage_box {
        border-width: 12px;
    }
}


/* =====================================================================
*    header_nav
* =================================================================== */
.header_nav {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    z-index: 100;
}

.fixed .header_nav {
    position: fixed;
    top: 0;
    width: 100%;
}

.menu_btn {
    width: calc(200 / 750 * 100%);
    padding-top: calc(200 / 750 * 100%);
    background: url(../images/nav/btn_nav_menu.png) no-repeat left top;
    background-size: auto 100%;
    position: absolute;
    top: 0;
    right: 0;
    margin: 0 calc(10 / 750 * 100%) 0 0;
    z-index: 11;
    cursor: pointer;
}

.active + .menu_btn{
    background: url(../images/nav/btn_nav_close.png) no-repeat left top;
    background-size: auto 100%;
}

.menu_txt {
    width: calc(44 / 100 * 100%);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto calc(24 / 100 * 100%);
}

.nav {
    width: 100%;
    height: 0;
    background-color: rgba(0, 0, 0, 0.85);
    position: absolute;
    top: 0;
    right: 0;
    z-index: 10;
    overflow-y: scroll;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
    -webkit-transition: 0.5s ease;
    transition: 0.5s ease;
}

.nav.active {
    height: 100vh;
}

.nav_menu {
    padding: calc(200 / 750 * 100%) 0;
}

.nav_menu dt {
    width: calc(393 / 750 * 100%);
    padding: 0 0 calc(60 / 750 * 100%);
    margin: 0 auto;
}

.nav_menu dd {
    width: calc(590 / 750 * 100%);
    margin: 0 auto;
}

.nav_menu dd:first-of-type::before {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background: url(../images/top/banner/line_banner.png) repeat-y left top;
    background-size: 100% auto;
}

.nav_menu dd::after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background: url(../images/top/banner/line_banner.png) repeat-y left top;
    background-size: 100% auto;
}

.nav_menu dd a {
    padding: calc(50 / 590 * 100%) 0;
    text-align: center;
}

.nav_menu dd a img {
    display: inline-block;
    vertical-align: bottom;
    width: auto;
    height: calc(33 / 750 * 100vw);
}

.nav_menu dd a.nolink {
    opacity: 0.2;
    cursor: default;
}

@media screen and (min-width: 768px) {
    .nav {
        width: 50%;
        height: 100vh;
        right: -50%;
        overflow-y: hidden;
    }

    .nav.active {
        height: 100vh;
        right: 0;
    }

    .menu_btn {
        width: calc(150 / 1300 * 100%);
        padding-top: calc(150 / 1300 * 100%);
        margin: 0 calc(50 / 1300 * 100%) 0 0;
        cursor: pointer;
    }

    .menu_btn .menu_padding span {
        padding-top: calc(3 / 44 * 100%);
        background-color: #513c57;
    }

    .menu_btn.active .menu_padding span:nth-child(1) {
        margin-top: calc(6 / 44 * 100%);
    }

    .menu_btn.active .menu_padding span:nth-child(3) {
        margin-top: calc(24 / 44 * 100%);
    }

    .nav_menu {
/*
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
*/
        width: 100%;
        height: 100%;
/*        padding: 0;*/
    }

    .nav_menu dt {
        width: calc(261 / 800 * 100%);
        padding: 0 0 calc(50 / 800 * 100%);
    }

    .nav_menu dd {
        width: calc(480 / 800 * 100%);
        min-width: 350px;
    }

    .nav_menu dd a {
        padding: calc(20 / 480 * 100%) 0;
    }

    .nav_menu dd a img {
        height: calc(23 / 1600 * 100vw);
    }

    .nav_menu dd a::before,
    .nav_menu dd a::after {
        content: "";
        display: inline-block;
        width: calc(16 / 480 * 100%);
        padding-top: calc(16 / 480 * 100%);
        background: url(../images/nav/btn_nav_hover.png) no-repeat left top;
        background-size: auto 100%;
        margin: 0 0.6vw 0 0;
        opacity: 0;
        -webkit-transition: 0.2s ease;
        transition: 0.2s ease;
    }

    .nav_menu dd a::after {
        margin: 0 0 0 0.6vw;
    }

    .nav_menu dd a:hover::before,
    .nav_menu dd a:hover::after {
        opacity: 1;
    }
}

@media screen and (min-width: 1300px) {
    .menu_btn {
        width: 150px;
        padding-top: 150px;
        margin: 0 50px 0 0;
    }
}


/* ================================================================== */
/*    movie
/* ================================================================== */
.movie_wrap {
    width: 100%;
    padding-top: 56.25%;
    position: relative;
}

.movie_wrap * {
    position: static;
}

.bc-player-4ogCqRJCI_default,
.bc-player-default_default {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.vjs-icon-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

.vjs-ima3-ad-container {
    position: absolute !important;
    width: 100%;
    left: 0;
}

.resumeDialog {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.6);
    font-size: 24px;
    color: #777;
    text-align: center;
}

.resumeDialog .resumeTitle {
    width: 70%;
    height: auto;
    top: 0;
    left: 0;
    right: 0;
    margin: 10% auto 5%;
}

.resumeDialog .playStartImg {
    width: 50%;
    margin: 0 auto;
}

.resumeDialog .resumeStartImg {
    width: 50%;
    margin: 0 auto;
}

@media screen and (min-width: 768px) {
    .resumeDialog .resumeTitle {
        position: absolute;
        top: 40%;
        left: 0;
        right: 0;
        width: 50%;
        display: block;
        margin: auto;
    }

    .resumeDialog .playStartImg {
        position: absolute;
        top: 54%;
        left: 20%;
        width: 29%;
        display: block;
    }

    .resumeDialog .resumeStartImg {
        position: absolute;
        top: 54%;
        right: 20%;
        width: 29%;
        display: block;
    }
}


/* ================================================================== */
/*    slick
/* ================================================================== */
.slick-arrow {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: calc(80 / 750 * 100vw);
    height: calc(80 / 750 * 100vw);
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    z-index: 2;
}

.slick-arrow::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
}

.slick-arrow.prev {
    left: 0;
    margin-left: calc(-110 / 750 * 100vw);
}

.slick-arrow.prev::before {
    background: url(../images/common/btn_slide_left.png) no-repeat left top;
    background-size: auto 100%;
}

.slick-arrow.next {
    right: 0;
    margin-right: calc(-110 / 750 * 100vw);
}

.slick-arrow.next::before {
    background: url(../images/common/btn_slide_right.png) no-repeat left top;
    background-size: auto 100%;
}

@media screen and (min-width: 768px) {
    .slick-arrow {
        width: calc(50 / 1300 * 100vw);
        height: calc(50 / 1300 * 100vw);
        cursor: pointer;
    }

    .slick-arrow::after {
        content: "";
        display: block;
        width: 72%;
        height: 72%;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        position: absolute;
        top: 14%;
        left: 14%;
        -webkit-transition: 0.2s ease;
        transition: 0.2s ease;
    }

    .slick-arrow:hover::after {
        background-color: rgba(191, 171, 80, 0.3);
        -webkit-box-shadow: 0 0 calc(12 / 1300 * 100vw) #bfab50;
        box-shadow: 0 0 calc(12 / 1300 * 100vw) #bfab50;
        -webkit-box-shadow: 0 0 0.92vw #bfab50;
        box-shadow: 0 0 0.92vw #bfab50;
    }

    .slick-arrow.prev {
        margin-left: calc(-50 / 1300 * 100vw);
    }

    .slick-arrow.next {
        margin-right: calc(-50 / 1300 * 100vw);
    }
}

@media screen and (min-width: 1300px) {
    .slick-arrow {
        width: 50px;
        height: 50px;
    }

    .slick-arrow.prev {
        margin-left: -50px;
    }

    .slick-arrow.next {
        margin-right: -50px;
    }

    .slick-arrow:hover::after {
        -webkit-box-shadow: 0 0 12px #bfab50;
        box-shadow: 0 0 12px #bfab50;
    }
}


/* ================================================================== */
/*    mCustomScrollbar
/* ================================================================== */
.mCSB_inside > .mCSB_container {
    margin-right: 0 !important;
}

.mCSB_scrollTools {
    width: 6px !important;
}

.mCSB_scrollTools .mCSB_draggerContainer {
    background-color: #000;
}

.mCSB_scrollTools .mCSB_draggerRail {
    width: 6px !important;
    border-radius: 0 !important;
}

.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    width: 6px !important;
    background-color: #333 !important;
}


/* =====================================================================
*    sns
* =================================================================== */
.sns {
    padding: 0 0 calc(275 / 750 * 100%);
    background: url(../images/footer/bg_sns_sp.jpg) no-repeat left bottom;
    background-size: 100% auto;
}

.sns .sec_ttl {
    width: calc(673 / 750 * 100%);
    margin: 0 auto calc(70 / 750 * 100%);
}

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

.sns_box > li {
    margin: 0 0 calc(60 / 672 * 100%);
    background: url(../images/footer/bg_sns_box.png) no-repeat left top;
    background-size: 100% 100%;
}

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

.twitter_box {
    padding: calc(45 / 672 * 100%);
}

.twitter_ttl {
    margin: 0 calc(5 / 582 * 100%) calc(10 / 582 * 100%) 0;
}

.twitter_box iframe {
    display: block !important;
    font-size: 2rem;
    width: 740px !important;
    height: 20.2em !important;
}

.line_txt {
    margin: calc(15 / 582 * 100%) 0;
}

.line_btn {
    width: calc(310 / 582 * 100%);
    margin: 0 auto;
}

@media screen and (min-width: 768px) {
    .sns {
        padding: 0 0 calc(160 / 1300 * 100%);
        background: url(../images/footer/bg_sns_pc.jpg) no-repeat center bottom;
        background-size: calc(2000 / 1300 * 100%) auto;
    }

    .sns .sec_ttl {
        width: calc(496 / 1300 * 100%);
        margin: 0 0 calc(35 / 1300 * 100%) calc(410 / 1300 * 100%);
    }

    .sns_box {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        width: calc(902 / 1300 * 100%);
    }

    .sns_box > li {
        width: calc(442 / 902 * 100%);
        margin: 0;
        background-size: 100% auto;
    }

    .sns_box > li:first-child {
        margin-right: calc(18 / 902 * 100%);
    }

    .twitter_box {
        padding: calc(33 / 442 * 100%) calc(26 / 442 * 100%) calc(26 / 442 * 100%);
    }

    .twitter_box iframe {
        height: 13.2em !important;
        min-height: auto !important;
    }

    .line_txt {
        width: 100%;
        margin: 0;
        padding-top: calc(266 / 390 * 100%);
        background: url(../images/footer/img_line_pc.png) no-repeat center top;
        background-size: auto 100%;
    }

    .line_txt img {
        display: none;
    }

    .line_btn {
        display: none;
    }
}

@media screen and (min-width: 1300px) {
    .sns {
        padding: 0 0 160px;
        background-size: 2000px auto;
    }
}


/* =====================================================================
*    footer
* =================================================================== */
.footer {
}

.pagetop {
}

.pagetop a {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: calc(295 / 750 * 100%);
    margin: calc(-115 / 750 * 100%) 0 0 calc(240 / 750 * 100%);
}

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

.footer_box::before,
.footer_box::after {
    content: "";
    display: block;
    width: 100%;
    padding-top: calc(3 / 750 * 100%);
    background-color: #2e2701;
    position: absolute;
    top: 0;
    left: 0;
    margin: calc(-23 / 750 * 100%) 0 0;
}

.footer_box::after {
    padding-top: calc(8 / 750 * 100%);
    margin: calc(-15 / 750 * 100%) 0 0;
}

.footer small {
    display: block;
    color: #655d25;
    font-size: 2.2rem;
    line-height: 2;
    text-align: center;
    padding: calc(56 / 750 * 100%) 0;
}

@media screen and (min-width: 768px) {
    .footer {
        padding: calc(55 / 1300 * 100%) 0 0;
    }

    .pagetop a {
        width: calc(220 / 1300 * 100%);
        margin: calc(-85 / 1300 * 100%) 0 0 calc(550 / 1300 * 100%);
    }

    .footer_box::before {
        padding-top: calc(2 / 1300 * 100%);
        margin: calc(-12 / 1300 * 100%) 0 0;
    }

    .footer_box::after {
        padding-top: calc(3 / 1300 * 100%);
        margin: calc(-7 / 1300 * 100%) 0 0;
    }

    .footer small {
        font-size: 1.4rem;
        line-height: 1;
        text-align: center;
        padding: calc(43 / 1300 * 100%) 0;
    }
}

@media screen and (min-width: 1300px) {
    .footer {
        padding: 55px 0 0;
    }

    .footer_box::before {
        padding-top: 2px;
        margin: -12px 0 0;
    }

    .footer_box::after {
        padding-top: 3px;
        margin: -7px 0 0;
    }

    .footer small {
        padding: 43px 0;
    }
}


/* =====================================================================
*    popup
* =================================================================== */
.popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100000;
    display: none;
}

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

.popup_area {
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}

.popup_inner {
    padding: calc(120 / 750 * 100%) 0;
}

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

.popup_close2 {
    width: calc(380 / 750 * 100%);
    margin: calc(55 / 750 * 100%) auto 0;
}

.popup_list {
    width: 100%;
    height: 100%;
}

@media screen and (min-width:768px) {
    .popup_bg {
        cursor: pointer;
    }

    .popup_area {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

    .popup_inner {
        width: calc(1000 / 1300 * 100%);
        max-width: 1000px;
        margin: auto;
        padding: calc(80 / 1300 * 100%) 0;
        -ms-flex-item-align: start;
        align-self: flex-start;
    }

    .popup_close {
        cursor: pointer;
        width: calc(60 / 1000 * 100%);
        margin: calc(10 / 1000 * 100%) 0 0;
        -webkit-transition: 0.2s ease;
        transition: 0.2s ease;
    }

    .popup_close::after {
        content: "";
        display: block;
        width: 72%;
        height: 72%;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        position: absolute;
        top: 14%;
        left: 14%;
        -webkit-transition: 0.2s ease;
        transition: 0.2s ease;
    }

    .popup_close2 {
        width: calc(280 / 1000 * 100%);
        margin: calc(50 / 1000 * 100%) auto 0;
        cursor: pointer;
        -webkit-transition: 0.2s ease;
        transition: 0.2s ease;
    }

    .popup_close:hover::after,
    .popup_close2:hover {
        -webkit-box-shadow: 0 0 calc(12 / 1300 * 100vw) #bfab50;
        box-shadow: 0 0 calc(12 / 1300 * 100vw) #bfab50;
        -webkit-box-shadow: 0 0 0.92vw #bfab50;
        box-shadow: 0 0 0.92vw #bfab50;
    }

    .popup .subpage_box {
        width: 100%;
    }
}

@media screen and (min-width:1300px) {
    .popup_inner {
        padding: 80px 0;
    }

    .popup_close:hover::after,
    .popup_close2:hover {
        -webkit-box-shadow: 0 0 12px #bfab50;
        box-shadow: 0 0 12px #bfab50;
    }
}


/* =====================================================================
*    movie
* =================================================================== */
.bc_movie_wrap {
    border: 2px solid #d6bc2d;
}

.bc_live_movie_wrap {
    border: 2px solid #d6bc2d;
    margin: 0 3% 8%;
    /* margin-bottom: 8%; */
}

.bc_movie {
    width: 100%;
    padding-top: 56.25%;
}

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

.vjs-icon-placeholder {
    display: block;
    margin: -1em 0 0;
    position: static;
}