@charset "utf-8";

/* =========================================
    　　　　　　　　共通
============================================*/

#page {
        font-family: 'Noto Sans JP', sans-serif !important;
        font-feature-settings: "palt" 1;
        letter-spacing: 1px;
}

#page img {
        max-width: 100%;
}

.box_s,
.box_m {
        width: 100%;
        padding: 0 2.5%;
}

.sp {
        display: block;
}

/* =========================================
    　　　　　　　　トップ
============================================*/


.mainimg {
        background: url(../images/top_bg_sp.jpg) no-repeat bottom center / 100%;
}

.mainimg h3 {
        padding: 30px 2.5%;
}

.mainimg h3::before {
        content: "";
        display: block;
        background: url(../images/logo.png) no-repeat top center / 100%;
        aspect-ratio: 1219 / 578;
        margin-bottom: 10px;
}

.mainimg h3::after {
        content: "";
        display: block;
        background: url(../images/oa_sp.png) no-repeat top center / 100%;
        aspect-ratio: 770 / 91;
}

/* =========================================
    　　　　　　　　番組内容
============================================*/

.contents {
        background: url(../images/contents_bg_sp.jpg) no-repeat center center / cover;
        padding: 60px 0;
}

.contents dl {
        text-align: center;
}

.contents dl dt {
        max-width: 500px;
        margin: 0 auto 30px auto;
}

.contents dl dd {
        font-size: 18px;
        color: #fff;
        line-height: 1.3em;
}

.contents dl dd:not(:last-of-type) {
        margin-bottom: 20px;
}

.contents dl dd span {
        color: #ffdc00;
        font-weight: bold;
        font-size: 20px;
}

/* =========================================
    【movie】ブロック　※Brightecoveの動画表示
============================================*/

.movie_wrap {
        width: 100%;
        max-width: 800px;
        margin: 0 auto 30px auto;
}
    
#movie {
        position: relative;
        width: 100%;
        padding-top: calc(9 / 16 * 100%);
        margin: 0 auto;
        overflow: hidden;
}
    
.tvo-video {
        position: absolute;
        width: 100%; 
        height: 100%;
        top: 0;
        right: 0;
}

/* =========================================
    　　　　　　　　出演者
============================================*/

.cast {
        background: url(../images/cast_bg_480.jpg) no-repeat top center / cover;
        padding: 60px 0;
}

.cast .box_m {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: baseline;
}

.cast .box_m div,
.cast p {
        width: 80%;
        margin-bottom: 30px;
        text-align: center;
}

/* =========================================
    　　　　　　トップボタン
============================================*/

#page-top {
        position: fixed;
        bottom: 3%;
        right: 1.5%;
        width: 70px;
        aspect-ratio: 151 / 151;
        background: url(../images/pagetop.png) no-repeat center / 100%;
        z-index: 100;
}

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

        .cast {
                background: url(../images/cast_bg_780.jpg) no-repeat top center / cover;
        }

        .cast .box_m {
                justify-content: space-evenly;
        }

        .cast .box_m div,
        .cast p {
                width: 45%;
        }

}

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

        .box_s {
                max-width: 1000px;
                margin: 0 auto;
        }

        .mainimg {
                background: url(../images/top_bg_pc.jpg) no-repeat top center / cover;
        }

        .mainimg h3 {
                padding: 100px 2.5%;
                max-width: 1300px;
                margin: 0 auto;
        }

        .mainimg h3::before {
                max-width: 95%;
                margin: 0 auto;
        }

        .mainimg h3::after {
                background: url(../images/oa_pc.png) no-repeat top center / 100%;
                aspect-ratio: 1319 / 155;
                max-width: 100%;
                margin: 0 auto;
        }

        .movie_wrap {
                margin: 0 auto 80px auto;
        }

        .contents {
                background: url(../images/contents_bg_pc.jpg) no-repeat center center / cover;
                padding: 130px 0;
        }

        .contents dl dt {
                max-width: 90%;
                margin: 0 auto 50px auto;
        }

        .contents dl dd {
                font-size: 32px;
                line-height: 1.5em;
        }

        .contents dl dd span {
                font-size: 36px;
        }

        .cast {
                background: url(../images/cast_bg_pc.jpg) no-repeat top center / cover;
        }

        #page-top {
                width: 120px;
        }
        
}

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

        .box_m {
                max-width: 1800px;
                margin: 0 auto;
        }

        .cast {
                padding: 130px 0;
        }

        .cast .box_m div {
                width: 40%;
        }

        .cast p {
                width: 30%;
        }

        .cast .box_m div,
        .cast p {
                margin-bottom: 80px;
        }

        .cast p:first-of-type,
        .cast p:nth-of-type(2) {
                margin: 0 5% 80px 5%;
        }

}