@charset "utf-8";

/* ---共通--- */

.movie_wrap,
#movie,
.tvo-video,
.team p::before {
	width: 100%;
}

.movie_wrap,
#movie,
.wrap {
        margin: 0 auto;
}

#movie,
.mainimg p,
.team p {
        position: relative;
}

.tvo-video,
.mainimg p::before,
.mainimg p::after,
.team p::before,
.team p span::before,
.team p span::after,
.team p em::before,
.team p em::after,
.team p i::before,
.team p i::after {
        position: absolute;
}

.sp,
.mainimg p,
.mainimg p::before,
.mainimg p::after,
.team p::before,
.team p span::before,
.team p span::after,
.team p em::before,
.team p em::after,
.team p i::before,
.team p i::after,
#page-top {
        display: block;
}

.mainimg p::before,
.mainimg p::after,
.team p::before,
.team p span::before,
.team p span::after,
.team p em::before,
.team p em::after,
.team p i::before,
.team p i::after {
        content: "";
}

.contents article ul span,
.team p,
.team dt {
        font-size: 22px;
}

/* --- */

#page {
        font-family: "Noto Sans JP", sans-serif;
        font-optical-sizing: auto;
        font-weight: 700;
        font-style: normal;
        text-align: center;
        font-size: 16px;
        font-feature-settings: "palt" 1;
        letter-spacing: .5px;
}

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

.wrap {
        max-width: 600px;
        padding: 0 2.5%;
}

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

/* ---トップ--- */

.mainimg p {
        background: url(../images/top_img_sp.jpg) no-repeat top center / 100%;
        aspect-ratio: 750 / 700;
}

.mainimg p::before {
        background: url(../images/logo.png) no-repeat top center / 100%;
        aspect-ratio: 1002 / 177;
        width: 90%;
        top: -15vw;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
}

.mainimg p::after {
        background: url(../images/suzuka_logo.jpg) no-repeat top center / 100%;
        aspect-ratio: 370 / 104;
        width: 40%;
        top: 20vw;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
}

/* ---放送日時--- */

.oa {
        margin: 20px 0;
        background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0)),url(../images/oa_bg_parts.png) repeat-x top center / contain;
        padding: 10px;
}

.oa i {
        font-size: 24px;
        font-weight: bolder;
        letter-spacing: 4px;
        filter: drop-shadow(2px 2px 0px rgba(60, 60, 60, 0.6));
        line-height: 35px;
}

.oa span {
        font-size: 36px;
        background: linear-gradient(0deg, #fcc800 0%,#e75b16 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
}

/* ---番組内容--- */

.movie_wrap {
        max-width: 800px; 
        margin-bottom: 30px; 
}

#movie {
        padding-top: calc(9 / 16 * 100%);
        overflow: hidden;
}

.tvo-video {
        height: 100%;
        top: 0;
        right: 0;
}

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

.contents article {
        background-color: rgba(255, 255, 255, .9);
        padding: 40px 10px;
}

.contents article ul li {
        line-height: 25px;
        text-shadow: 0px 0px 3px rgba(0, 0, 0, .1);
}

.contents article ul i {
        background-color: #ee7800;
        color: #fff;
        font-size: 24px;
        display: inline-block;
        margin-top: 3px;
        padding: 5px 10px;
}

.contents article ul span {
        color: #ee7800;
}

.contents article ul li:not(:last-of-type) {
        margin-bottom: 25px;
}

/* ---取材チーム--- */

.team {
        margin: 50px auto;
        padding: 0 2.5%;
}

.team p {
        color: #fff;
        padding: 15px 10px;
        background:  linear-gradient(90deg, rgba(0, 167, 220, 1), rgba(14, 118, 190, 1));
}

.team p::before {
        background-image: linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%),
        linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%);
        background-size: 20px 20px;
        background-position: 0 0, 10px 10px;
        height: 55.3px;
        top: 0;
        left: 0;
        opacity: .1;
}

.team p span::before,
.team p span::after,
.team p em::before,
.team p em::after,
.team p i::before,
.team p i::after {
	height: calc(55.3px / 2);
	background: #fff;
}

.team p span::before,
.team p em::before,
.team p i::before {
	-webkit-transform: skew(25deg);
	   -moz-transform: skew(25deg);
	     -o-transform: skew(25deg);
}

.team p span::after,
.team p em::after,
.team p i::after {
        -webkit-transform: skew(-25deg);
           -moz-transform: skew(-25deg);
             -o-transform: skew(-25deg);
}

.team p span::before,
.team p span::after {
        width: 20px;
        right: 60px;
}

.team p em::before,
.team p em::after {
        width: 10px;
        right: 40px;
}

.team p i::before,
.team p i::after {
        width: 5px;
        right: 25px;
}

.team p span::before,
.team p em::before,
.team p i::before {
        top: 0;
}

.team p span::after,
.team p em::after,
.team p i::after {
        bottom: 0;
}

.team dt {
        margin: 20px 0 30px 0;
        text-decoration: underline;
        text-decoration-color: #ee7800;
        text-underline-offset: 6px;
        text-decoration-thickness: 5px;
        line-height: 40px;
}

.team dd img {
        margin-bottom: 30px;
}

.team dd {
        line-height: 24px;
}

@media screen and (min-width: 768px) {
    
        .wrap {
                max-width: 1000px;
        }

        #page {
                font-size: 26px;
        }

        .sp {
                display: none;
        }

        .mainimg p {
                background: url(../images/top_img_pc.jpg) no-repeat top center / 100%;
                aspect-ratio: 1920 / 835;
        }

        .mainimg p::before {
                width: 55%;
                top: 10vw;
        }

        .mainimg p::after {
                width: 20%;
                top: 30vw;
        }

        .oa {
                padding: 10px 10px 5px 10px;
        }

        .oa i {
                font-size: 40px;
                letter-spacing: 6px;
                line-height: 60px;
        }

        .oa span {
                font-size: 80px;
        }

        .movie_wrap {
                margin-bottom: 50px; 
        }

        .contents {
                padding: 70px 0;
        } 
        
        .contents article {
                padding: 70px 10px;
        }

        .contents article ul i {
                font-size: 40px;
                margin-top: 3px;
                padding: 10px 15px;
        }

        .contents article ul span {
                font-size: 35px;
        }

        .contents article ul li {
                line-height: 40px;
        }

        .contents article ul li:not(:last-of-type) {
                margin-bottom: 40px;
        }

        .team {
                margin: 120px auto;
                max-width: 1400px;
        }

        .team dt {
                text-decoration-thickness: 10px;
        }

        .team p {
                font-size: 40px;
        }

        .team p::before {
                height: 76px;
        }

        .team p span::before,
        .team p span::after {
                width: 35px;
                right: 150px;
        }

        .team p em::before,
        .team p em::after {
                width: 20px;
                right: 115px;
        }

        .team p i::before,
        .team p i::after {
                width: 10px;
                right: 90px;
        }

        .team p span::before,
        .team p span::after,
        .team p em::before,
        .team p em::after,
        .team p i::before,
        .team p i::after {
                height: calc(76px / 2);
        }

        .team dt {
                font-size: 35px;
                text-underline-offset: 10px;
                margin: 70px 0 60px 0;
        }

        .team dd {
                line-height: 45px;
        }

        #page-top {
                width: 100px;
        }

}