@charset "utf-8";
/* CSS INFORMATION -====================================================
File name : base.css
Description :
===================================================================== */

/* =====================================================================
*    共通・大枠
* =================================================================== */

html {
    font-family: "メイリオ", "ＭＳ Ｐゴシック", "小塚ゴシック Pro R", "ヒラギノ角ゴ Pro W3", "Meiryo", "MS PGothic", "KozGoPro-Regular", "Hiragino Kaku Gothic Pro", "MS UI Gothic", Osaka, sans-serif;
    color: #333333;
    font-size: 10px;
    font-size: 3.125vw;
    line-height: 1.4;
}

#ytvgh_container {
  position: relative;
  z-index: 100;
}
#ytvgh_container #ytvgh_headerInner {
  max-width: 1024px;
}
#ytvgh_footbanner iframe {
    padding: 0 1%;
    margin: 2% auto !important;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.wrapper {
    background: #FFF;
}

.inner {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

img {
    width: 100%;
    height: auto;
    display: block;
}

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

@media screen and (min-width:700px) {
    html {
        font-size: 0.78125vw;
    }

    .inner {
        max-width: 1100px;
    }
}

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

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

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


/* =====================================================================
*    #header
* =================================================================== */

.header {
    position: relative;
}

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

@media screen and (min-width:700px) {
    .header {
        padding-bottom: 0;
    }
}

/* .nav */

.chase-top_wrap.fixed {
    width: 100%;
    max-width: 640px;
    padding-top: 24.3%;
}

.chase-top_wrap.fixed .nav {
    position: fixed;
    top: 0;
    bottom: auto;
    width: 100%;
    z-index: 100;
}

.chase-top_wrap .nav {
    position: relative;
    background: url(../images/bg_black.jpg) repeat center top;
    background-size: 500px 70px;
}

.chase-top_wrap .nav .menu_list {
    width: 100%;
    max-width: 640px;
    position: relative;
    margin: auto;
    line-height: 0;
}

.chase-top_wrap .nav .menu_list li {
    display: inline-block;
    width: 50%;
    margin: 0;
    position: relative;
    line-height: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.chase-top_wrap .nav .menu_list li:nth-child(3),
.chase-top_wrap .nav .menu_list li:nth-child(4),
.chase-top_wrap .nav .menu_list li:nth-child(5) {
    width: 33.33%;
}

.chase-top_wrap .nav .menu_list li:nth-child(1),
.chase-top_wrap .nav .menu_list li:nth-child(2) {
    border-bottom: 1px solid #fff;
}

.chase-top_wrap .nav .menu_list li.menu_cast::after,
.chase-top_wrap .nav .menu_list li.menu_song::after,
.chase-top_wrap .nav .menu_list li.menu_staff::after {
    content: "";
    width: 1px;
    height: 0;
    padding-top: 17.24%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    margin: 3.45% 0 0;
    background-color: #fff;
}

.chase-top_wrap .nav .menu_list li.menu_song::after,
.chase-top_wrap .nav .menu_list li.menu_staff::after {
    padding-top: 25.82%;
    margin: 5.16% 0 0;
}

.chase-top_wrap .nav .menu_list li a {
    display: block;
}

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

@media screen and (min-width:700px) {
    .chase-top_wrap.fixed {
        width: 100%;
        max-width: 1100px;
        padding-top: 6.36%;
    }
    .chase-top_wrap .nav .menu_list {
        width: 100%;
        max-width: 1100px;
        text-align: center;
        margin: auto;
    }

    .chase-top_wrap .nav .menu_list li::before,
    .chase-top_wrap .nav .menu_list li.menu_staff::after {
        content: "";
        width: 1px;
        height: 0;
        padding-top: 22.73%;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        margin: 4.55% 0 0;
        background-color: #fff;
    }

    .chase-top_wrap .nav .menu_list li:nth-child(1),
    .chase-top_wrap .nav .menu_list li:nth-child(2) {
        border-bottom: 0;
    }

    .chase-top_wrap .nav .menu_list li.menu_staff::after {
        left: auto;
        right: 0;
    }

    .chase-top_wrap .nav .menu_list li a {
        width: 100%;
        display: block;
    }

    .chase-top_wrap .nav .menu_list li a::before {
        content: "";
        width: 100%;
        height: 0;
        display: block;
        opacity: 1;
        -webkit-transition: opacity 0.1s ease;
        transition: opacity 0.1s ease;
    }

    .chase-top_wrap .nav .menu_list li a:hover::before {
        opacity: 0;
    }

    .chase-top_wrap .nav .menu_list li a::after {
        content: "";
        width: 100%;
        height: 0;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        -webkit-transition: opacity 0.1s ease;
        transition: opacity 0.1s ease;
    }

    .chase-top_wrap .nav .menu_list li a:hover::after {
        opacity: 1;
    }

    .chase-top_wrap .nav .menu_list li.menu_introduction {
        width: 20%;
    }

    .chase-top_wrap .nav .menu_list li.menu_introduction a::before {
        padding-top: 31.82%;
        background: url(../images/btn_menu_introduction_off.png) no-repeat center center;
        background-size: 100% auto;
    }

    .chase-top_wrap .nav .menu_list li.menu_introduction a::after {
        padding-top: 31.82%;
        background: url(../images/btn_menu_introduction_on.png) no-repeat center center;
        background-size: 100% auto;
    }

    .chase-top_wrap .nav .menu_list li.menu_cast {
        width: 20%;
    }

    .chase-top_wrap .nav .menu_list li.menu_cast a::before {
        padding-top: 31.82%;
        background: url(../images/btn_menu_cast_off.png) no-repeat center center;
        background-size: 100% auto;
    }

    .chase-top_wrap .nav .menu_list li.menu_cast a::after {
        padding-top: 31.82%;
        background: url(../images/btn_menu_cast_on.png) no-repeat center center;
        background-size: 100% auto;
    }

    .chase-top_wrap .nav .menu_list li.menu_original {
        width: 20%;
    }

    .chase-top_wrap .nav .menu_list li.menu_original a::before {
        padding-top: 31.82%;
        background: url(../images/btn_menu_original_off.png) no-repeat center center;
        background-size: 100% auto;
    }

    .chase-top_wrap .nav .menu_list li.menu_original a::after {
        padding-top: 31.82%;
        background: url(../images/btn_menu_original_on.png) no-repeat center center;
        background-size: 100% auto;
    }

    .chase-top_wrap .nav .menu_list li.menu_song {
        width: 20%;
    }

    .chase-top_wrap .nav .menu_list li.menu_song a::before {
        padding-top: 31.82%;
        background: url(../images/btn_menu_song_off.png) no-repeat center center;
        background-size: 100% auto;
    }

    .chase-top_wrap .nav .menu_list li.menu_song a::after {
        padding-top: 31.82%;
        background: url(../images/btn_menu_song_on.png) no-repeat center center;
        background-size: 100% auto;
    }

    .chase-top_wrap .nav .menu_list li.menu_staff {
        width: 20%;
    }

    .chase-top_wrap .nav .menu_list li.menu_staff a::before {
        padding-top: 31.82%;
        background: url(../images/btn_menu_staff_off.png) no-repeat center center;
        background-size: 100% auto;
    }

    .chase-top_wrap .nav .menu_list li.menu_staff a::after {
        padding-top: 31.82%;
        background: url(../images/btn_menu_staff_on.png) no-repeat center center;
        background-size: 100% auto;
    }

    .chase-top_wrap .nav .menu_list li a img {
        display: none;
    }
}

@media screen and (min-width:1280px) {
    .chase-top_wrap.fixed {
        padding-top: 70px;
    }
}


/* =====================================================================
*    #main
* =================================================================== */

.main {
    display: block;
    position: relative;
    background: url(../images/bg_main.jpg) repeat center top;
    background-size: 500px auto;
}

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

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


/* =====================================================================
*    #pagetop
* =================================================================== */

.pagetop {
    width: 100%;
    max-width: 1100px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.pagetop a {
    display: block;
    width: 30.47%;
    margin: 0 auto 9.03%;
    position: relative;
}

.pagetop a img {
    opacity: 1;
}


@media screen and (min-width:700px) {
    .pagetop a {
        width: 11.18%;
        margin: 0 1.81% 1.81% auto;
    }

    .pagetop a::after {
        content: "";
        width: 100%;
        height: 0;
        padding-top: 21.14%;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        margin: 0;
        background: url(../images/btn_pagetop_on.png) no-repeat center top;
        background-size: 100% auto;
        opacity: 0;
        -webkit-transition: opacity 0.1s ease;
        transition: opacity 0.1s ease;
    }

    .pagetop a img {
        -webkit-transition: opacity 0.1s ease;
        transition: opacity 0.1s ease;
    }

    .pagetop a:hover img {
        opacity: 0;
    }

    .pagetop a:hover::after {
        opacity: 1;
    }
}


/* =====================================================================
*    #footer
* =================================================================== */

.footer {
    width: 100%;
    text-align: center;
    color: #fff;
    padding: 3.43% 0;
    margin-top: -2%;
    background-color: #950549;
    position: relative;
}

@media screen and (min-width:640px) {
    .footer {}
}

@media screen and (min-width:700px) {
    .footer {
        font-size: 1.4rem;
        line-height: 1.4286em;
        padding: 0.72% 0;
        margin-top: 0;
    }
}

@media screen and (min-width:1100px) {
    .footer {
        padding-top: 8px;
        padding-bottom: 8px;
    }
}


/* =====================================================================
*    共通：brightcovePOPUP
* =================================================================== */
.bc_wrapper {
  width: 100%;
  height: 100%;
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 100000;
  display: none;
  cursor: pointer;
}

.bc_wrapper .return_box {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

.bc_wrapper .bc_movie_wrap {
  width: 100%;
  max-width: 700px;
  height: auto;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  margin: auto;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  text-align: center;
}

.bc_wrapper .bc_movie_wrap .bc_movie {
  width: 100%;
  padding-top: 56.25%;
  position: relative;
  border-radius: 5px;
}

.bc_wrapper .bc_movie_wrap .bc_movie video {
  position: absolute;
  top: 0px;
  bottom: 0px;
  right: 0px;
  left: 0px;
}

.bc_wrapper .bc_movie_wrap .btn {
  padding: 10px;
}

.bc_wrapper .bc_movie_wrap .btn a {
  margin-top: 4.3479%;
  font-size: 14px;
}

.bc_popup {
  display: block;
  position: relative;
}

@media screen and (min-width: 700px) {
  .bc_wrapper .bc_movie_wrap .btn a {
    margin-top: 20px;
  }
  .bc_popup:after{
    border-width: 35px 0 35px 60px;
  }
}