@charset "UTF-8";

/* CSS INFORMATION -================================================= */
/* File name : page.css */
/* Description : 番組ページ */
/* ================================================================== */

/* ================================================================== */
/*    page_details
/* ================================================================== */
.page_details {
    padding: 4% 5.33% 0;
    padding: calc(30 / 750 * 100%) calc(40 / 750 * 100%) 0;
}

.page_details dt {
    margin: 0 0 2.99%;
    margin: 0 0 calc(20 / 670 * 100%);
    color: #f39700;
    font-size: 3.8rem;
    font-weight: 700;
    line-height: 1.4;
}

.page_details_txt1 {
    color: #646464;
    font-size: 2.8rem;
    line-height: 1.357;
}

.page_details_tag {
    display: inline-block;
    height: 17px;
    height: calc(34 / 750 * 100vw);
    margin: 2.24% 0 0;
    margin: calc(15 / 670 * 100%) 0 0;
    border-radius: 4px;
    border-radius: 1.4vw;
    background-color: #ffce33;
    overflow: hidden;
}

.page_details_tag img {
    width: auto;
    height: 100%;
    margin: 0 0.3em;
}

.page_details_btn1 {
    width: 58.21%;
    width: calc(390 / 670 * 100%);
    margin: 5.22% auto 0;
    margin: calc(35 / 670 * 100%) auto 0;
}

.page_details_btn1 a {
    padding: 6.41% 0;
    padding: calc(25 / 390 * 100%) 0;
    color: #646464;
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    border: 2px solid #646464;
    border-radius: 0.3em;
}

.page_details_btn1 a.arrow1::after {
    background: url(../images/common/btn_arrow_gray.svg) no-repeat left center;
    background-size: 100% auto;
    margin-right: 5.9%;
    margin-right: calc(23 / 390 * 100%);
}

.page_details_btn2 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 6.72% auto 0;
    margin: calc(45 / 670 * 100%) auto 0;
}

.page_details_btn2 li {
    width: 46.27%;
    width: calc(310 / 670 * 100%);
    margin: 0 7.46% 0 0;
    margin: 0 calc(50 / 670 * 100%) 0 0;
}

.page_details_btn2 li:last-child {
    margin: 0;
}

.page_details_btn2 li a {
    padding: 5.81% 0 5.81% 16.13%;
    padding: calc(18 / 310 * 100%) 0 calc(18 / 310 * 100%) calc(50 / 310 * 100%);
    border-radius: 0.3em;
    color: #fff;
    font-size: 2.8rem;
    line-height: 1;
    text-align: center;
}

.page_details_btn2 li a::before {
    content: "";
    display: block;
    width: 11.29%;
    width: calc(35 / 310 * 100%);
    height: 100%;
    background: url(../images/common/btn_sns_icon1.png) no-repeat left center;
    background-size: 100% auto;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0 0 0 8.39%;
    margin: 0 0 0 calc(26 / 310 * 100%);
}

.page_details_btn2 li.twitterShare a::before {
    background: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width=%221200%22%20height=%221227%22%20viewBox=%220%200%201200%201227%22%20fill=%22none%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath%20d=%22M714.163%20519.284L1160.89%200H1055.03L667.137%20450.887L357.328%200H0L468.492%20681.821L0%201226.37H105.866L515.491%20750.218L842.672%201226.37H1200L714.137%20519.284H714.163ZM569.165%20687.828L521.697%20619.934L144.011%2079.6944H306.615L611.412%20515.685L658.88%20583.579L1055.08%201150.3H892.476L569.165%20687.854V687.828Z%22%20fill=%22white%22/%3E%3C/svg%3E") no-repeat left center;
    background-size: 100% auto;
}

.page_details_txt2 {
    margin: 7.46% 0 0;
    margin: calc(50 / 670 * 100%) 0 0;
    padding: 0 0 1.49% 0;
    padding: 0 0 calc(10 / 670 * 100%) 0;
    border-bottom: 2px solid #d9d9d9;
    font-size: 2.4rem;
}

.page_details_txt2::before {
    /* content: "";
    display: block;
    width: 12px;
    width: calc(24 / 750 * 100vw);
    padding-top: 15px;
    padding-top: calc(30 / 750 * 100vw);
    background: url(../images/common/img_contents_icon1.png) no-repeat left top;
    background-size: 100% auto;
    position: absolute;
    top: 0.35em;
    left: 0; */
}

.page_details_txt2 li {
    display: inline;
    color: #bebebe;
    font-size: 2.4rem;
    line-height: 1.5;
}

.page_details_txt2 li:first-child::after {
    content: "｜";
    display: inline-block;
    margin: 0 0.5em;
}

@media screen and (min-width: 768px) {
    .page_movie {
        background-color: #272727;
    }

    .page_movie_box {
        padding: calc(50 / 1000 * 100%) 0;
    }

    .page_content {
        border-bottom: 2px solid #d9d9d9;
    }

    .page_details {
        padding: calc(20 / 1000 * 100%) 0 0;
    }

    .page_details dt {
        font-size: 3rem;
        margin: 0 0 calc(5 / 1000 * 100%);
    }

    .page_details_txt1 {
        font-size: 2.4rem;
    }

    .page_details_tag {
        height: calc(20 / 1100 * 100vw);
        margin: calc(10 / 1000 * 100%) 0 0;
        border-radius: 0.6em;
    }

    .page_details_btn {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        margin: calc(22 / 1000 * 100%) 0 0;
    }

    .page_details_btn1 {
        width: calc(205 / 1000 * 100%);
        margin: 0;
    }

    .page_details_btn1 a {
        font-size: 1.6rem;
        text-align: left;
        padding: calc(9 / 205 * 100%) 0 calc(11 / 205 * 100%) calc(16 / 205 * 100%);
    }

    .page_details_btn2 {
        width: calc(315 / 1000 * 100%);
        margin: 0;
    }

    .page_details_btn2 li {
        width: calc(150 / 315 * 100%);
        margin: 0 calc(15 / 315 * 100%) 0 0;
    }

    .page_details_btn2 li a {
        font-size: 1.6rem;
        padding: calc(11 / 150 * 100%) 0 calc(13 / 150 * 100%) calc(25 / 150 * 100%);
    }

    .page_details_btn2 li a::before {
        width: calc(21 / 150 * 100%);
        margin: 0 0 0 calc(12 / 150 * 100%);
    }

    .page_details_btn2 li a:hover {
        opacity: 0.7;
    }

    .page_details_txt2 {
        margin: calc(20 / 1000 * 100%) 0 0;
        padding: 0 0 calc(20 / 1000 * 100%) calc(33 / 1000 * 100%);
        border-bottom: 0;
        font-size: 1.5rem;
    }

    .page_details_txt2::before {
        width: calc(22 / 1100 * 100vw);
        padding-top: calc(20 / 1100 * 100vw);
        top: 0.2em;
    }

    .page_details_txt2 li {
        font-size: 1.5rem;
    }
}

@media screen and (min-width: 1100px) {
    .page_details_tag {
        height: 20px;
    }

    .page_details_txt2::before {
        width: 22px;
        padding-top: 20px;
    }
}


/* ================================================================== */
/*    video_footer
/* ================================================================== */
.video_footer {
    padding: 8% 5.33% 9.33%;
    padding: calc(60 / 750 * 100%) calc(40 / 750 * 100%) calc(70 / 750 * 100%);
    border-bottom: 2px solid #dcdcdc;
}

.fulu_btn {
    margin: 0 0 8.96%;
    margin: 0 0 calc(60 / 670 * 100%);
}

.fulu_btn a {
    padding: 9.25% 0;
    padding: calc(62 / 670 * 100%) 0;
    background-color: #65a44e;
    border-radius: 6px;
    border-radius: 1.3vw;
    box-shadow: 0 5px 0 #d9d9d9;
    -webkit-box-shadow: 0 calc(10 / 750 * 100vw) 0 #d9d9d9;
    box-shadow: 0 calc(10 / 750 * 100vw) 0 #d9d9d9;
}

.fulu_btn a img {
    width: 49.1%;
    width: calc(329 / 670 * 100%);
    margin: 0 auto;
}

.fulu_btn a.arrow1::after {
    width: 13px;
    width: calc(26 / 750 * 100vw);
    height: 23px;
    height: calc(46 / 750 * 100vw);
    background: url(../images/common/btn_slide_arrow1.svg) no-repeat left center;
    background-size: 100% auto;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

.video_description dt {
    margin: 0 0 4.48%;
    margin: 0 0 calc(30 / 670 * 100%);
    font-size: 3.8rem;
    font-weight: 700;
    line-height: 1.5;
}

.video_description dd {
    color: #646464;
    font-size: 2.8rem;
    line-height: 1.5;
    white-space:pre-wrap;
}

.video_description .copyright {
    margin-top: 4rem;
    color: #aaa;
}

@media screen and (min-width: 768px) {
    .video_footer {
        padding: calc(35 / 1000 * 100%) 0;
        border-bottom: 0;
    }

    .fulu_btn {
        width: calc(420 / 1000 * 100%);
        margin: 0 auto calc(45 / 1000 * 100%);
    }

    .fulu_btn a {
        padding: calc(31 / 420 * 100%) 0;
        border-radius: calc(5 / 1100 * 100vw);
        -webkit-box-shadow: 0 calc(6 / 1100 * 100vw) 0 #d9d9d9;
        box-shadow: 0 calc(6 / 1100 * 100vw) 0 #d9d9d9;
    }

    .fulu_btn a img {
        width: calc(166 / 420 * 100%);
    }

    .fulu_btn a.arrow1::after {
        width: calc(9 / 1100 * 100vw);
        height: calc(14 / 1100 * 100vw);
    }

    .video_description dt {
        margin: 0 0 calc(8 / 1000 * 100%);
        font-size: 2.4rem;
    }

    .video_description dd {
        font-size: 1.6rem;
        line-height: 2;
    }
}

@media screen and (min-width: 1100px) {
    .fulu_btn a {
        border-radius: 5px;
        -webkit-box-shadow: 0 6px 0 #d9d9d9;
        box-shadow: 0 6px 0 #d9d9d9;
    }

    .fulu_btn a.arrow1::after {
        width: 9px;
        height: 14px;
    }
}

/* ================================================================== */
/*    video_footer
/* ================================================================== */

.popup {
  display: none;
}