@charset "utf-8";
/* CSS INFORMATION -====================================================
File name : base.css
Description : 共通ベースラインCSS
===================================================================== */

/* =====================================================================
*    共通：大枠
* =================================================================== */
html {
    font-family: "メイリオ", "ＭＳ Ｐゴシック", "小塚ゴシック Pro R", "ヒラギノ角ゴ Pro W3", "Meiryo", "MS PGothic", "KozGoPro-Regular", "Hiragino Kaku Gothic Pro", "MS UI Gothic", Osaka, sans-serif;
    font-size: 10px;
    line-height: 1.4;
    color: #4a3b32;
}

.wrapper {
    position: relative;
    overflow: hidden;
}

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

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

/* リンク */
a{
    color: #fff;
    text-decoration: none;
}
a:hover{
    color: #ddd;
    text-decoration: underline;
}

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

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


/* =====================================================================
*    共通：ヘッダー下ytv mydo!枠
* =================================================================== */

#ytv_mydo {
    background: url(../images/common/bg_check.png) repeat-x center top, url(../images/common/bg_green.jpg) repeat center top;
    background-size: auto 13px, 64px 64px;
    padding-top: 13px;
    font-size: 1.5rem;
    line-height: 1em;
    text-align: center;
}

#ytv_mydo .inner {
    padding-top: 15px;
    padding-bottom: 15px;
}

#ytv_mydo a {
    text-decoration: underline;
}

@media screen and (min-width:700px){
    #ytv_mydo {
        background: url(../images/common/bg_check.png) repeat-x center top, url(../images/common/bg_green.jpg) repeat center top;
        background-size: auto 26px, 64px 64px;
        padding-top: 26px;
        font-size: 2.0rem;
        line-height: 1em;
        text-align: center;
    }

    #ytv_mydo .inner {
        padding-top: 20px;
        padding-bottom: 25px;
        width: 50%;
    }
}

/* =====================================================================
*    共通：PAGETOPボタン
* =================================================================== */
.pagetop {
    width: 100%;
    padding-top: 4.6875%;
    padding-bottom: 3.125%;
}

@media screen and (max-width:699px){
    .subpage .pagetop {
        background: url(../images/common/bg_pink.jpg) repeat center top;
    }
}

.pagetop a {
    width: 60.9375%;
    height: auto;
    display: block;
    position: relative;
    margin-left: auto;
    margin-right: 0.625%;
}

.pagetop .pagetop_card {
    width: 49.23%;
    position: absolute;
    top: 0;
    left: 0;
    padding-top: 24.1%;
}

.pagetop .pagetop_cat {
    width: 63%;
    margin-left: auto;
}

@media screen and (min-width:700px){
    .pagetop {
        width: 246px;
        height: 299px;
        padding-top: 0;
        padding-bottom: 0;
        margin-left: 0;
        margin-right: 0;
        position: absolute;
        bottom: -50px;
        right: 0;
        z-index: 1000;
    }

    .pagetop a {
        width: 100%;
        position: absolute;
        top: 20px;
        transition-duration: 0.2s;
    }

    .pagetop a:hover {
        position: absolute;
        top: 0;
    }

    .pagetop .pagetop_card {
        width: 192px;
        position: relative;
        padding-top: 0;
        margin-left: auto;
        margin-right: auto;
    }

    .pagetop .pagetop_cat {
        width: 246px;
    }
}

/* =====================================================================
*    共通：フッター枠
* =================================================================== */
#footer {
    background: url(../images/common/bg_check.png) repeat-x center top, url(../images/common/bg_brown.jpg) repeat center top;
    background-size: auto 13px, 64px 64px;
    color: #FFF;
    text-align: center;
    padding-top: 13px;
}

#footer small {
    display: block;
    padding-top: 20px;
    padding-bottom: 20px;
}

@media screen and (min-width:700px){
    #footer {
        background: url(../images/common/bg_check.png) repeat-x center top, url(../images/common/bg_brown.jpg) repeat center top;
        background-size: auto 26px, 64px 64px;
        padding-top: 26px;
        font-size: 1.4rem;
        line-height: 1em;
        text-align: center;
        position: relative;
        z-index: 1100;
    }

    #footer small {
        padding-bottom: 25px;
    }
}


/* =====================================================================
*    下層ベース：ヘッダー枠
* =================================================================== */
.wrapper.subpage {
    position: relative;
    padding-top: 26.5625%;
}

.subpage #header {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1100;
}

.subpage #header.fixed {
    position: fixed;
}

.subpage #header .header_band {
    background: url(../images/common/img_subpage_header_sp.png) no-repeat center bottom, url(../images/common/bg_subpage_header_sp.jpg) repeat-x center top;
    background-size: auto 100%, auto 100%;
}

.subpage #header .header_band h1 {
    width: 25.9375%;
    padding-top: 0.9375%;
    padding-bottom: 0.9375%;
    padding-left: 2.8125%;
    position: relative;
    z-index: 100;
}

.subpage #header .header_band .img_pratinight_logo {
    width: 11.71875%;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
    padding-top: 11.875%;
    padding-left: 67.5%;
}

.subpage #header .header_band .onair_group {
    width: 29.375%;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
    padding-top: 15.625%;
    padding-left: 48.75%;
}

.subpage #header .header_band .menu_btn {
    width: 18.75%;
    height: 100%;
    background: url(../images/common/bg_green.jpg) repeat center center;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 10000;
}

.subpage #header .header_band .menu_btn a ,
.subpage #header .header_band .menu_btn a span {
    display: inline-block;
    transition: all .4s;
    box-sizing: border-box;
    -moz-transform-origin: 50% 50%;  
    -webkit-transform-origin: 50% 50%;  
}
.subpage #header .header_band .menu_btn a {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 20% 35% 50%;
}

.subpage #header .header_band .menu_btn a div {
    position: relative;
    width: 100%;
    height: 100%;
}

.subpage #header .header_band .menu_btn a div span {
    width: 140%;
    max-width: 140%;
    height: auto;
    position: absolute;
    left: -20%;
}
.subpage #header .header_band .menu_btn a div span:nth-of-type(1) {
    top: 0;
}

.subpage #header .header_band .menu_btn a div span:nth-of-type(2) {
    top: 50%;
    margin-top: -2%;
}

.subpage #header .header_band .menu_btn a div span:nth-of-type(3) {
    bottom: 0;
}

.subpage #header .header_band .menu_btn a.active span:nth-of-type(1) {
    -webkit-transform: translate3d(0, 450%, 0) rotate(-45deg) scaleX(1.2);
    transform: translate3d(0, 450%, 0) rotate(-45deg) scaleX(1.2);
}
.subpage #header .header_band .menu_btn a.active span:nth-of-type(2) {
    opacity: 0;
}
.subpage #header .header_band .menu_btn a.active span:nth-of-type(3) {
    -webkit-transform: translate3d(0, -450%, 0) rotate(45deg) scaleX(1.2);
    transform: translate3d(0, -450%, 0) rotate(45deg) scaleX(1.2);
}


.subpage #header .header_band .menu_btn .menu_btn_text {
    width: 46.666666%;
    height: auto;
    position: absolute;
    top: 68.33333%;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}


.subpage #header .onair_band {
    width: 100%;
    height: auto;
    background: url(../images/common/bg_brown.jpg) repeat center top;
}

@media screen and (min-width:700px){
    .wrapper.subpage {
        padding-top: 310px;
    }

    .subpage #header.fixed {
        position: absolute;
    }

    .subpage #header .header_band {
        height: 220px;
        background: url(../images/common/img_subpage_header.png) no-repeat center bottom, url(../images/common/bg_subpage_header.jpg) repeat-x center top;
        background-size: 1500px auto, auto 220px;
    }

    .subpage #header .header_band h1 {
        width: 235px;
        padding-top: 62px;
        padding-bottom: 0;
        padding-left: 3.8333333%;
    }

    .subpage #header .header_band .img_pratinight_logo {
        width: 100px;
        height: auto;
		/*right: 350px;*/
		right: 225px;/*放送終了時*/
		left: auto;
        padding-top: 160px;
		padding-left: 0;
    }

    .subpage #header .header_band .onair_group {
        width: 190px;
		left: auto;
		/*right: 350px;*/
		right: 225px;/*放送終了時*/
        padding-top: 198px;
        padding-left: 0;
    }

    .subpage #header .header_band .menu_btn {
        display: none;
    }

    .subpage #header .onair_band {
        background: none;
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
    }

    .subpage #header .onair_band .onair {
        /*width: 360px;*/
		width: 225px;/*放送終了時*/
        height: 60px;
        background: url(../images/common/img_onair_pc_end.png) no-repeat center bottom;
        background-size: 100% auto;
        position: absolute;
        top: 160px;
        right: -10px;
    }

    .subpage #header .onair_band .onair img {
        display: none;
    }
}


/* =====================================================================
*    下層ベース：メニュー枠
* =================================================================== */
.subpage #nav {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    padding-top: 26.5625%;
    z-index: 1000;
}

.subpage #nav.fixed {
    position: fixed;
    top: 0;
}

.subpage #nav .inner {
    width: 100%;
    background: url(../images/common/bg_brown.jpg) repeat center center;
    display: none;
}

.subpage #nav ul {
    letter-spacing: -.40em;
    text-align: center;
}

.subpage #nav ul li {
    width: 33%;
    display: inline-block;
    padding-bottom: 5px;
    background: url(../images/common/bg_subpage_nav_bottom.png) no-repeat center bottom;
    background-size: auto 5px;
}

.subpage #nav ul li.news,
.subpage #nav ul li.intro {
    width: 50%;
}

.subpage #nav ul li:nth-child(n + 6) {
    background:  none;
    padding-bottom: 0;
}

.subpage #nav ul li a {
    display: block;
    background: url(../images/common/bg_subpage_nav_side_sp.png) no-repeat right center;
    background-size: 4px auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    padding-right: 4px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.subpage #nav ul li:nth-child(3n + 2) a {
    background: none;
    padding-right: 0;
}

.subpage #nav ul li a img {
    width: 67.5%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}

.subpage #nav ul li.news a img {
    width: 44.25%;
}

.subpage #nav ul li.intro a img {
    width: 78.1%;
}

@media screen and (min-width:700px){
    .subpage #nav {
        width: 100%;
        height: 90px;
        background: url(../images/common/bg_brown.jpg) repeat center center;
        position: absolute;
        top: 220px;
        left: 0;
        padding-top: 0;
        z-index: 1000;
    }

    .subpage #nav .inner {
        display: block;
    }

    .subpage #nav ul {
        height: 90px;
    }

    .subpage #nav ul li,
    .subpage #nav ul li.news,
    .subpage #nav ul li.intro {
        width: 11%;
        height: 100%;
        background: none;
        padding-bottom: 0;
        vertical-align: middle;
    }

    .subpage #nav ul li.intro {
        width: 21%;
    }

    .subpage #nav ul li a {
        height: 100%;
    }

    .subpage #nav ul li a,
    .subpage #nav ul li.intro a,
    .subpage #nav ul li.cast a {
        background: url(../images/common/bg_subpage_nav_side.png) no-repeat right center;
        background-size: 8px auto;
        -webkit-box-sizing: content-box;
        -moz-box-sizing: content-box;
        -o-box-sizing: content-box;
        -ms-box-sizing: content-box;
        box-sizing: content-box;
        padding-right: 8px;
        padding-top: 0;
        padding-bottom: 0;
        position: relative;
    }

    .subpage #nav ul li:last-child a {
        background: none;
        padding-right: 0;
    }

    .subpage #nav ul li a img,
    .subpage #nav ul li.news a img,
    .subpage #nav ul li.intro a img {
        width: 81.1%;
        height: auto;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        padding-right: 8px;
    }

    .subpage #nav ul li a.current {
        cursor: default;
    }

    .subpage #nav ul li a:not(.current):hover:before,
    .subpage #nav ul li a.current:before {
        content: "";
        width: 81.1%;
        height: auto;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 8px;
        margin: auto;
        z-index: 1;
    }

    .subpage #nav ul li.news a:not(.current):hover:before,
    .subpage #nav ul li.news a.current:before {
        background: url(../images/common/bg_subpage_nav_hover.png) no-repeat bottom center, url(../images/common/btn_subpage_nav_news_hover.png) no-repeat center left;
        background-size: 29px auto, 100% auto;
    }

    .subpage #nav ul li.intro a:not(.current):hover:before,
    .subpage #nav ul li.intro a.current:before {
        background: url(../images/common/bg_subpage_nav_hover.png) no-repeat bottom center, url(../images/common/btn_subpage_nav_intro_hover.png) no-repeat center left;
        background-size: 29px auto, 100% auto;
    }

    .subpage #nav ul li.story a:not(.current):hover:before,
    .subpage #nav ul li.story a.current:before {
        background: url(../images/common/bg_subpage_nav_hover.png) no-repeat bottom center, url(../images/common/btn_subpage_nav_story_hover.png) no-repeat center left;
        background-size: 29px auto, 100% auto;
    }

    .subpage #nav ul li.chart a:not(.current):hover:before,
    .subpage #nav ul li.chart a.current:before {
        background: url(../images/common/bg_subpage_nav_hover.png) no-repeat bottom center, url(../images/common/btn_subpage_nav_chart_hover.png) no-repeat center left;
        background-size: 29px auto, 100% auto;
    }

    .subpage #nav ul li.cast a:not(.current):hover:before,
    .subpage #nav ul li.cast a.current:before {
        background: url(../images/common/bg_subpage_nav_hover.png) no-repeat bottom center, url(../images/common/btn_subpage_nav_cast_hover.png) no-repeat center left;
        background-size: 29px auto, 100% auto;
    }

    .subpage #nav ul li.original a:not(.current):hover:before,
    .subpage #nav ul li.original a.current:before {
        background: url(../images/common/bg_subpage_nav_hover.png) no-repeat bottom center, url(../images/common/btn_subpage_nav_original_hover.png) no-repeat center left;
        background-size: 29px auto, 100% auto;
    }

    .subpage #nav ul li.music a:not(.current):hover:before,
    .subpage #nav ul li.music a.current:before {
        background: url(../images/common/bg_subpage_nav_hover.png) no-repeat bottom center, url(../images/common/btn_subpage_nav_music_hover.png) no-repeat center left;
        background-size: 29px auto, 100% auto;
    }

    .subpage #nav ul li.mydo a:not(.current):hover:before,
    .subpage #nav ul li.mydo a.current:before {
        background: url(../images/common/bg_subpage_nav_hover.png) no-repeat bottom center, url(../images/common/btn_subpage_nav_mydo_hover.png) no-repeat center left;
        background-size: 29px auto, 100% auto;
    }


    .subpage #nav ul li a:not(.current):hover img,
    .subpage #nav ul li a.current img {
        opacity: 0;
    }
}


/* =====================================================================
*    下層ベース：上部ソーシャルリンク枠
* =================================================================== */
.subpage #sns {
    width: 100%;
    padding-top: 16px;
    padding-bottom: 10px;
    position: absolute;
    z-index: 900;
}

.subpage #sns ul {
    letter-spacing: -.40em;
    text-align: right;
    padding-top: 10px;
}

.subpage #sns ul li {
    display: inline-block;
    vertical-align: top;
    padding-right: 3.125%;
}

@media screen and (min-width:700px){
    .subpage #sns {
        position: absolute;
        top: 0px;
        right: 0;
        padding-top: 0px;
        z-index: 1200;
    }

    .subpage #sns ul {
        text-align: left;
        padding-top: 10px;
        margin-left: 4.2%;
    }

    .subpage #sns ul li {
        padding-right: 1.5%;
    }
}


/* =====================================================================
*    下層ベース：コンテンツ枠
* =================================================================== */
.subpage .contents {
    background: #FFFFFF url(../images/common/bg_check.png) repeat-x center top;
    background-size: auto 13px;
    padding-top: 13px;
}

.subpage .contents > .inner {
    padding-top: 40px;
}

.subpage .contents > .inner h1 {
    width: 100%;
    padding-top: 4.6875%;
}

.subpage .contents > .inner .inner_content {
    width: 93.75%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 20px;
    padding-bottom: 20px;
}

@media screen and (min-width:700px){
    .subpage .contents {
        background: url(../images/common/bg_check.png) repeat-x center top, url(../images/common/bg_contents.jpg) repeat center top;
        background-size: auto 26px , 211px auto;
        padding-top: 26px;
        padding-bottom: 100px;
        overflow: hidden;
        position: relative;
        z-index: 900;
    }

    .subpage .contents:before {
        content: ' ';
        width: 208px;
        height: 391px;
        background: url(../images/common/bg_subpage_contents_bottom02.png) no-repeat center top;
        position: absolute;
        bottom: 30px;
        left: 50%;
        margin-left: -820px;
    }

    .subpage .contents > .inner {
        background: #FFFFFF url(../images/common/bg_race_top.png) repeat-x center top;
        background-size: auto 12px;
        padding-top: 12px;
        padding-bottom: 100px;
        margin-top: 50px;
        position: relative;
    }

    .subpage .contents > .inner:before {
        content: "";
        width: 400px;
        height: 630px;
        background: url(../images/common/bg_subpage_contents_top.png) no-repeat center top;
        position: absolute;
        top: -30px;
        right: -50px;
        z-index: -1;
    }

    .subpage .contents > .inner:after {
        content: "";
        width: 590px;
        height: 360px;
        background: url(../images/common/bg_subpage_contents_bottom.png) no-repeat center top;
        position: absolute;
        bottom: -50px;
        left: -60px;
        z-index: -1;
    }

    .subpage .contents > .inner h1 {
        width: 80%;
        max-width: 600px;
        padding-top: 50px;
        margin-left: auto;
        margin-right: auto;
    }

    .subpage .contents > .inner .inner_content {
        width: 90%;
        max-width: 880px;
        padding-top: 40px;
        padding-bottom: 0;
    }
}


/* =====================================================================
*    下層ベース：下部ソーシャルリンク枠
* =================================================================== */
.subpage .socialLink {
    width: 100%;
    background: url(../images/common/bg_green.jpg) repeat center top;
    padding-top: 10px;
    padding-bottom: 10px;
}

.subpage .socialLink ul {
    letter-spacing: -.40em;
    text-align: center;
}

.subpage .socialLink ul li {
    width: 40px;
    display: inline-block;
    vertical-align: top;
    padding-right: 2%;
}

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


/* =====================================================================
*    下層ベース：リンクボタン
* =================================================================== */
.subpage .contents .link_btn {
    width: 100%;
    height: 50px;
    background: url(../images/common/bg_green.jpg) repeat center top;
    position: relative;
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
}

.subpage .contents .link_btn a {
    width: 100%;
    height: 100%;
    display: block;
    font-size: 1.6rem;
    line-height: 1em;
    font-weight: bold;
    line-height: 50px;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
}

.subpage .contents .link_btn a:hover {
    text-decoration: none;
}

@media screen and (min-width:700px){
    .subpage .contents .link_btn {
        width: 400px;
        height: 60px;
        border-radius: 30px;
        -webkit-border-radius: 30px;
        -moz-border-radius: 30px;
        margin-left: auto;
        margin-right: auto;
    }

    .subpage .contents .link_btn a {
        font-size: 2.2rem;
        line-height: 60px;
    }

    .subpage .contents .link_btn a:hover {
        background: url(../images/common/bg_pink.jpg) repeat center top;
        border-radius: 30px;
        -webkit-border-radius: 30px;
        -moz-border-radius: 30px;
    }
}


/* =====================================================================
*    共通：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;
    transform: translateY(-50%);
}

#bc_wrapper .bc_movie_wrap .bc_movie {
    width: 100%;
    padding-top: 56.25%;
    position: relative;
}

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