@charset "utf-8";

/**********************

共通設定

***********************/
/************
基本
*************/
body {
    font-size: 100%;
    background-color: #252525;
    position: relative;
}



/************
文字
*************/
.googlefont-tacOne {
    font-family: "Tac One", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.googlefont-delaGothicOne {
    font-family: "Dela Gothic One", sans-serif;
    font-weight: 400;
    font-style: normal;
    color: yellow;
    font-size: 1.1rem;
}


nav li,
.cast li {
    list-style: none;
}

h2 {
    color: #EFF302;
    font-size: 2rem;
    text-align: center;
    margin-bottom: 1.25rem;
    position: relative;
}

h2::before,
h2::after {
    content: "";
    display: inline-block;
    width: 100px;
    height: 10px;
    background-size: contain;
    position: absolute;
}

h2::before {
    background-image: url("../images/pc-clack2.png");
    top: 0.9rem;
    left: clamp(0rem, -8.333rem + 41.67vw, 12.5rem);
}

h2::after {
    background-image: url("../images/pc-clack1.png");
    top: 0.8rem;
    right: clamp(0rem, -8.333rem + 41.67vw, 12.5rem);
}

p,
time,
small {
    font-size: 0.875rem;
    color: white;
    line-height: 1.375rem;
}


a {
    font-size: 1.125rem;
    text-decoration: none;
}

.program-nav a:visited {
    color: currentColor;
}



/************
レイアウト
*************/
.flex {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

header nav {
    background-color: #EFF302;
}

header,
section,
aside {
    margin-bottom: 3.125rem;
}

.content-width {
    width: 93%;
    margin-right: 3.5%;
    margin-left: 3.5%;
}

body::before {
    /*参考 https://dot-blog.jp/news/css-bottom-fix/#google_vignette */
    content: "";
    background-image: url("../images/rock-bg-bw.webp");
    width: 100%;
    height: 100%;
    background-size: 100%;
    background-position-y: bottom;
    left: 0;
    bottom: 0;
    position: fixed;
    opacity: 0.1;
    z-index: -1;
}



/************
ヘッダー
*************/
.tv-logo {
    width: 3.125rem;
    height: 3.125rem;
    display: flex;
    align-items: center;
    margin-left: 0.5rem;
}

.tv-logo img {
    width: 100%;
}

header .broad-cast {
    height: 3.125rem;
    background-color: #fff;
}

header .broad-cast li {
    padding: 13px 0;
}

header .program-nav li {
    display: flex;
    width: 100%;
}

/* マウスホバーで下からグレーが出てくる */
header .program-nav a {
    display: inline-block;
    width: 100%;
    padding: .75rem 1.5rem;
    color: #333;
    font-size: 16px;
    background: transparent;
    position: relative;
    z-index: 1;
    transition: .1s;
}

header .program-nav a::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    background: #252525;
    transform-origin: 50% 0%;
    transform: scaleY(0);
    transition: transform ease .1s;
}

header .program-nav a:hover {
    color: yellow;
}

/* ここまで */

header .program-nav a:hover::before {
    transform-origin: 50% 100%;
    transform: scaleY(1);
}

header .program-image {
    position: relative;
}

header .program-image img.title {
    position: absolute;
    width: clamp(18.125rem, 1.042rem + 85.42vw, 43.75rem);
    top: 1.875rem;
    right: 0;
    left: 0;
    bottom: 0;
    margin: 0 auto;
}

header .program-image img.copy {
    position: absolute;
    width: clamp(5rem, 2.917rem + 10.42vw, 8.125rem);
    top: 10rem;
    left: 6.25rem;
}

header .program-image img.date {
    position: absolute;
    width: clamp(18rem, 6.667rem + 56.67vw, 35rem);
    bottom: 3rem;
    left: 0;
    right: 0;
    margin: auto;
    filter: drop-shadow(0 0 5 black);
}

header .main-image {
    display: block;
    height: clamp(37.5rem, 29.167rem + 41.67vw, 50rem);
    width: 100%;
    object-fit: cover;
}

header nav li {
    text-align: center;
    width: 50%;
}



/************
メイン
*************/
main {
    background-image: url(images/rock-bg.webp);
}



/************
ストーリー
*************/
.youtube {
    aspect-ratio: 16/9;
}

.youtube iframe {
    width: 100%;
    height: 100%;
    margin-bottom: 0.625rem;
}



/************
キャスト
*************/
.cast img {
    width: clamp(8.75rem, 7.481rem + 5.414vw, 11.813rem);
}

.cast ul li:first-child {
    margin-bottom: 1.875rem;
}

.cast ul li {
    text-align: center;
}




/************
ギャラリー
*************/
/* my-js.cssで管理しています。 */



/************
トピック
*************/
.topic .image-area {
    order: -1;
    width: 80px;
    height: 80px;
}

.topic .image-area img {
    width: 100%;
    object-fit: cover;
}

.topic-text {
    order: 1;
    width: clamp(12rem, 10.455rem + 7.73vw, 16.25rem);
}

.topic ol li {
    gap: 15px;
    margin-bottom: 1.25rem;
}

.topic-text p {
    line-height: 1.063rem;
}

.topic-text time {
    margin-bottom: 0.5rem;
    order: -1;
}

.topic-text p {
    width: 100%;
    display: block;
}



/************
SNS
*************/
.sns .sns-icons {
    width: 240px;
    margin: auto;
    align-items: center;
}

.sns img {
    width: 50px;
}



/************
フッター
*************/
footer {
    text-align: center;
    border-bottom: 5px solid #EFF302;
    padding-bottom: 20px;
}










@media (max-width: 799px) {
    header .program-nav li {
        border-bottom: 1px solid black;
        border-left: 1px solid black;
        border-right: 1px solid black;
    }

    header .program-nav li:first-child {
        border-top: 1px solid black;
    }
}

@media (min-width: 800px) {

    /**********************

    共通設定

    ***********************/
    /************
    基本
    *************/
    /************
    レイアウト
    *************/
    .content-width {
        width: 100%;
        max-width: 800px;
        margin: 0 auto 4.375rem;
    }

    header,
    section,
    aside {
        margin-bottom: 4.375rem;
    }



    /************
    ヘッダー
    *************/
    .main-nav {
        margin-right: 0.5rem;
    }

    header .program-nav ul {
        flex-wrap: nowrap;
        max-width: 800px;
        margin: auto;
    }

    header .program-nav ul li {
        width: 25%;
        border-right: 1px solid black;
    }

    header .program-nav ul li:first-child {
        border-left: 1px solid black;
    }



    /************
    フッター
    *************/
    footer {
        padding-bottom: 50px;
    }






    /************
    メイン
    *************/
    .youtube iframe {
        margin-bottom: 2.5rem;
    }
}