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

/* =====================================================================
*    #main
* =================================================================== */
.main section {
    position: relative;
}

/* .banner
---------------------------------------------------------- */
.banner {
    background: url(../images/bg_dot1.png) repeat left top;
    background-size: 2.67% auto;
    -webkit-box-shadow: 0 0.5vw 0.5vw rgba(0,0,0,0.2);
    box-shadow: 0 0.5vw 0.5vw rgba(0,0,0,0.2);
    z-index: 5;
}

.banner .banner_box {
    padding: 4% 0;
}

.banner .banner_box a {
    display: block;
    width: 84%;
    margin: 0 auto;
    border: 0.53vw solid #fff;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 3vw;
    -webkit-box-shadow: 0 0.5vw 2vw rgba(0,0,0,0.3);
    box-shadow: 0 0.5vw 2vw rgba(0,0,0,0.3);
}

.banner .banner_box a img {
    border-radius: 2.5vw;
}

@media screen and (min-width:768px){
    .banner {
        background: url(../images/bg_dot1.png) repeat center top;
        background-size: 2.67% auto;
        -webkit-box-shadow: 0 0.18vw 0.36vw rgba(0,0,0,0.2);
        box-shadow: 0 0.18vw 0.36vw rgba(0,0,0,0.2);
    }

    .banner .banner_box {
        padding: 2.73% 0;
    }

    .banner .banner_box a {
        width: 57.27%;
        border: 0.36vw solid #fff;
        -webkit-box-shadow: 0 0.45vw 1.36vw rgba(0,0,0,0.3);
        box-shadow: 0 0.45vw 1.36vw rgba(0,0,0,0.3);
        border-radius: 1.73vw;
        -webkit-transition: 0.2s ease;
        transition: 0.2s ease;
    }

    .banner .banner_box a:hover {
        opacity: 0.7;
        -webkit-transition: 0.2s ease;
        transition: 0.2s ease;
    }

    .banner .banner_box a img {
        border-radius: 1.36vw;
    }
}

@media screen and (min-width:1100px){
    .banner {
        background-size: 20px auto;
        -webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }

    .banner .banner_box a {
        border: 4px solid #fff;
        -webkit-box-shadow: 0 5px 15px rgba(0,0,0,0.3);
        box-shadow: 0 5px 15px rgba(0,0,0,0.3);
        border-radius: 19px;
    }

    .banner .banner_box a img {
        border-radius: 15px;
    }
}

/* .overview
---------------------------------------------------------- */
.overview {
    padding: 8% 0 7.65%;
	background: url(../images/bg_overview_sp.png) repeat left top;
    background-size: 34% auto;
    -webkit-box-shadow: 0 0.5vw 0.5vw rgba(0,0,0,0.2);
    box-shadow: 0 0.5vw 0.5vw rgba(0,0,0,0.2);
    z-index: 4;
}

.sec_ttl {
    width: 59.07%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    margin: -3.8% 0 0 3.6%;
}

.overview_txt {
    width: 86.67%;
    margin: 0 auto;
    padding: 14.27% 0 5%;
    background-color: #fff;
    border: 0.53vw solid #e84091;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 3vw;
}

.overview_txt img {
    width: 79.28%;
    margin: 0 auto;
}

@media screen and (min-width:768px){
	.overview {
        padding: 5.45% 0 4.55%;
	    background: url(../images/bg_overview_pc.png) repeat center 0%;
        background-size: 19.45% auto;
        -webkit-box-shadow: 0 0.18vw 0.36vw rgba(0,0,0,0.2);
        box-shadow: 0 0.18vw 0.36vw rgba(0,0,0,0.2);
    }

    .sec_ttl {
        width: 33.73%;
        margin: -2.9% 0 0 11.11%;
    }

    .overview_txt {
        width: 74.35%;
        padding: 8% 0 4%;
        border-width: 0.36vw;
        border-radius: 1.73vw;
    }

    .overview_txt img {
        width: 71.7%;
    }
}

@media screen and (min-width:1100px){
    .overview {
        padding: 60px 0 50px;
        background-size: 220px auto;
        -webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }

    .overview_txt {
        border-width: 4px;
        border-radius: 19px;
    }
}

/* .next
---------------------------------------------------------- */
.next {
	padding: 8% 0 7.65%;
	background: url(../images/bg_dot2.png) repeat left top;
    background-size: 2.67% auto;
    -webkit-box-shadow: 0 0.5vw 0.5vw rgba(0,0,0,0.2);
    box-shadow: 0 0.5vw 0.5vw rgba(0,0,0,0.2);
    z-index: 3;
}

.next_theme_box {
    width: 86.67%;
    margin: 0 auto;
    padding: 15.27% 0 7%;
    background-color: #fff;
    border: 0.53vw solid #00a7eb;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 3vw;
    position: relative;
}

        .nextSP {
width:90%;
margin: 10px auto;
font-size: 1.2rem;
line-height: 1.6rem;
text-align: center;
    }

.next_theme_box::after {
    content: "";
    display: block;
    width: 16.2%;
    padding-top: 25.18%;
    margin: 0 auto;
    background: url(../images/img_next_dog.png) no-repeat left top;
    background-size: 100% auto;
}

.next_theme_box .next_theme_date {
    color: #e84091;
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 1;
    text-align: center;
    margin: 0 0 3%;
}

.next_theme_box .next_cast {

}

.next_cast .next_cast_guest {
    position: relative;
    margin: 0 0 4%;
}

.next_cast .next_cast_guest:first-child::after {
    content: "";
    display: block;
    width: 55.3%;
    margin: 0 auto;
    border-bottom: 0.93vw dotted #ccc;
}

.next_cast .next_cast_guest dt {
    width: 37.23%;
    margin: 0 auto 1.5%;
}

.next_cast .next_cast_guest dd {
    font-size: 1.2rem;
    line-height: 1.7;
    text-align: center;
    margin: 0 0 2.5%;
}

@media screen and (min-width:768px){
	.next {
        padding: 5.45% 0 4.55%;
        background-size: 1.82% auto;
        -webkit-box-shadow: 0 0.18vw 0.36vw rgba(0,0,0,0.2);
        box-shadow: 0 0.18vw 0.36vw rgba(0,0,0,0.2);
    }

    .next_theme_box {
        width: 74.35%;
        padding: 8% 0 4%;
        border-width: 0.36vw;
        border-radius: 1.73vw;
    }

    .next_theme_box::after {
        width: 11.25%;
        padding-top: 17.48%;
        position: absolute;
        bottom: 0;
        right: 0;
        margin: 0 1% 1% 0
    }

    .next_theme_box .next_theme_date {
        font-size: 2.4rem;
    }

    .next_theme_box .next_cast {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        width: 86.21%;
        margin: 0 auto;
    }

    .next_cast .next_cast_guest {
        width: 50%;
        margin: 0;
    }

    .next_cast .next_cast_guest:first-child::after {
        width: 0;
        height: 100%;
        border-right: 0.36vw dotted #ccc;
        position: absolute;
        top: 0;
        right: -0.18vw;
    }

    .next_cast .next_cast_guest dt {
        width: 46.99%;
        margin: 0 auto 1%;
    }

    .next_cast .next_cast_guest dd {
        font-size: 1.6rem;
        line-height: 2;
        margin: 0;
    }
    
    .nextSP {
        font-size: 1.6rem;
        line-height: 1.8;
    }
}

@media screen and (min-width:1100px){
    .next {
        padding: 60px 0 50px;
        background-size: 20px auto;
        -webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }

    .next_theme_box {
        border-width: 4px;
        border-radius: 19px;
    }

    .next_cast .next_cast_guest:first-child::after {
        border-width: 4px;
        right: -2px;
    }
}

/* .time
---------------------------------------------------------- */
.time {
    padding: 8% 0 7.65%;
    background: url(../images/bg_time.png) repeat-x left bottom #1eb6f4;
    background-size: 3.47% auto;
    -webkit-box-shadow: 0 0.5vw 0.5vw rgba(0,0,0,0.2);
    box-shadow: 0 0.5vw 0.5vw rgba(0,0,0,0.2);
    z-index: 2;
}

.time_txt_box {
    width: 86.67%;
    margin: 0 auto;
    padding: 12% 0 5%;
    background-color: #fff;
    border: 0.53vw solid #e84191;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 3vw;
    position: relative;
}

.time_txt_box_detail {
    padding: 0 5.3%;
}

.time_txt_box_detail li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 0.9rem;
    line-height: 1;
    padding: 6% 0 2%;
    border-bottom: 2px dotted #b2b2b2;
    position: relative;
}

.time_txt_box_detail li::before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 1vw 0 1vw 1.3vw;
    border-color: transparent transparent transparent #e84191;
    position: relative;
    top: 0.1em;
    margin: 0 2% 0 0;
}

.time_txt_box_detail li .time_tv {
    width: 55%;
}

.time_txt_box_detail li .time_date {

}


@media screen and (min-width:768px){
	.time {
        padding: 5.45% 0 4.55%;
        background-size: 2.36% auto;
        -webkit-box-shadow: 0 0.18vw 0.36vw rgba(0,0,0,0.2);
        box-shadow: 0 0.18vw 0.36vw rgba(0,0,0,0.2);
    }

    .time_txt_box {
        width: 74.35%;
        padding: 8% 0 4%;
        border-width: 0.36vw;
        border-radius: 1.73vw;
    }

    .time_txt_box_detail {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        height: 46vw;
        padding: 0 4%;
    }

    .time_txt_box_detail li {
        width: 48%;
        padding: 3% 0 1%;
        margin: 0 4% 0 0;
        font-size: 1.3rem;
        border-width: 1px;
    }

    .time_txt_box_detail li::before {
        border-width: 0.45vw 0 0.45vw 0.64vw;
    }

    .time_txt_box_detail li .time_tv {
        width: 53%;
    }
}

@media screen and (min-width:1100px){
    .time {
        padding: 60px 0 50px;
        background-size: 26px auto;
        -webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }

    .time_txt_box {
        border-width: 4px;
        border-radius: 19px;
    }

    .time_txt_box_detail {
        height: 48em;
        padding: 0 5.3%;
    }

    .time_txt_box_detail li {
        width: 47%;
    }

    .time_txt_box_detail li::before {
        border-width: 5px 0 5px 7px;
    }
}

/* .viewing
---------------------------------------------------------- */
.viewing {
	background: url(../images/bg_dot1.png) repeat left top;
    background-size: 2.67% auto;
    z-index: 1;
}

.viewing_box {
    width: 82.4%;
    margin: 0 auto;
    padding: 5.5% 0 9%;
}

.viewing_box li:first-child {
    margin: 0 0 3%;
}

.viewing_box li a {
    display: block;
}
    .spOnly {
        display: block;
    }

@media screen and (min-width:768px){
	.viewing {
        padding: 1.82% 0 5.45%;
        background: url(../images/bg_dot1.png) repeat center top;
        background-size: 1.82% auto;
        -webkit-box-shadow: 0 0.18vw 0.36vw rgba(0,0,0,0.2);
        box-shadow: 0 0.18vw 0.36vw rgba(0,0,0,0.2);
    }

    .viewing_box {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        width: 77.27%;
        padding: 0;
    }

    .viewing_box li {
        width: 49.18%;
        -ms-flex-item-align: end;
        align-self: flex-end;
    }

    .viewing_box li:first-child {
        margin: 0;
    }

    .viewing_box li a {
        -webkit-transition: 0.2s ease;
        transition: 0.2s ease;
    }

    .viewing_box li a:hover {
        opacity: 0.7;
        -webkit-transition: 0.2s ease;
        transition: 0.2s ease;
    }
        .spOnly {
        display: none;
    }

}

@media screen and (min-width:1100px){
    .viewing {
        padding: 20px 0 60px;
        background-size: 20px auto;
        -webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }

    .viewing_box {

    }

    .nextSP {
        width: 600px;
        margin: 0px auto 0 40px;
        font-size: 1.8rem;
        line-height: 1.6;
        text-align: center;
        padding-left: 5rem;
    }


}
.top_banner img {
    max-width: 80%;
    margin: 0 auto 4rem;
} 


@media screen and (min-width:768px){
    .top_banner img {
        max-width: 630px;
    } 
    
}


/* 250122追加 */

.sns_share{
    display:none;
}
.banner_area{
    padding:0 auto;
    margin:0;
}
.banner_area ul{
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    width:100%;
    margin:1rem auto 0;
}
.banner_area li{
    list-style: none;
    flex-basis: auto;
    margin:0 0.5rem;
}
.banner_area img{
    width:25rem;
}
.viewing_bnr{
    padding-bottom:1rem;
}

@media screen and (min-width:768px){
    .sns_share{
        display:block;
        height:4rem;
    }
    .banner_area{
        padding:0 auto;
        margin:0;
    }
    .banner_area ul{
        width:84rem;
    }
    .banner_area li{
        margin:1rem 2rem;
    }
    .banner_area img{
        width:38rem;
    }
    .viewing_bnr{
        padding-bottom:2rem;
    }
}