@charset "utf-8";

/* =============================================================
    common 共通
============================================*/
:root {
    --myColor01: #252525;
    --myColor02: #e9e5b5;
    --myColor03: #f40b00;
    --myColor04: #03914c;
    --myBasePX_XL: 80px;
    --myBasePX_L: 50px;
    --myBasePX_M: 30px;
    --myBasePX_S: 20px;
}

@media screen and (max-width: 767px) {
    :root {
        --myBasePX_XL: 50px;
        --myBasePX_L: 30px;
    }
}

@media screen and (max-width: 479px) {
    :root {
        --myBasePX_XL: 30px;
        --myBasePX_L: 20px;
        --myBasePX_M: 20px;
        --myBasePX_S: 12px;
    }
}

body {
    width: 100%;
}

body,
figure,
h1,
h2,
h3,
h4,
h5,
h6,
li,
ol,
p,
ul,
dl,
dt,
dd {
    margin: 0;
    padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    font-weight: normal;
}

li,
ol,
ul {
    list-style-type: none;
}

#page {
    font-size: 20px;
    margin: 0 auto;
    max-width: 1920px;
    color: var(--myColor01);
    font-family: "Noto Sans CJK JP", Lato, "Noto Sans JP", "游ゴシック Medium", 游ゴシック体, "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    line-height: 1.4;
    background-color: var(--myColor02);
    font-feature-settings: "palt" 1;
    -webkit-text-size-adjust: 100%;
    position: relative;
    /* 背景fixed　safari対応 ←　これ使う場合は必要*/
}

#page * {
    box-sizing: border-box;
}

#page img {
    width: 100%;
    border: 0;
    vertical-align: top;
}

#page a {
    transition: all 0.3s;
    text-decoration: none;
}

#page a:hover {
    opacity: 0.7;
}

#page a[tabindex*="-1"] {
    pointer-events: none;
}

#page a[tabindex*="-1"]:hover {
    opacity: 1;
}

#page em {
    font-style: normal;
    font-weight: bold;
}

@media screen and (min-width: 768px) {
    a[href*="tel:"] {
        pointer-events: none;
        cursor: default;
        text-decoration: none;
    }
}

@media screen and (max-width: 767px) {
    #page {
        font-size: 18px;
    }
}

@media screen and (max-width: 479px) {
    #page {
        font-size: 16px;
    }
}

.serif {
    font-family: 'Shippori Mincho', serif;
    font-weight: 600;
}

.arial {
    font-family: Arial;
}

.font_maru {
    font-family: 'Kosugi Maru', sans-serif;
}

.flex {
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.flex.pc4,
.flex.pc3,
.flex.pc2 {
    column-gap: 2%;
    justify-content: center;
}

.flex.pc4>div {
    width: calc(calc(100% - 2% * 3) / 4);
}

.flex.pc4>div:nth-child(n + 5) {
    margin-top: 2%;
}

.flex.pc3>div {
    width: calc(calc(100% - 2% * 2) / 3);
}

.flex.pc3>div:nth-child(n + 4) {
    margin-top: 2%;
}

.flex.pc2>div {
    width: calc(calc(100% - 2% * 1) / 2);
}

.flex.pc2>div:nth-child(n + 3) {
    margin-top: 2%;
}

@media screen and (max-width: 999px) {
    .flex.pc4>div {
        width: calc(calc(100% - 2% * 2) / 3);
    }

    .flex.pc4>div:nth-child(n + 4) {
        margin-top: 2%;
    }
}

@media screen and (max-width: 767px) {

    .flex.pc4>div,
    .flex.pc3>div {
        width: calc(calc(100% - 2% * 1) / 2);
    }

    .flex.pc4>div:nth-child(n + 3),
    .flex.pc3>div:nth-child(n + 3) {
        margin-top: 2%;
    }
}

.inner_wrap {
    padding: 0 var(--myBasePX_L);
    margin: 0 auto;
    max-width: 1200px;
}

.pd_tb {
    padding-top: var(--myBasePX_XL);
    padding-bottom: var(--myBasePX_XL);
}

.pd_t {
    padding-top: var(--myBasePX_XL);
}

.awesome::before,
.awesome::after {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands";
    font-weight: 900;
}

.block_title {
    font-size: 1.4em;
    font-weight: bold;
    text-align: center;
}

.block_read p {
    margin: 16px auto;
}

.block_read p:not(.demo_btn) {
    padding-left: 1em;
    text-indent: -1em;
}

.ib {
    font-size: inherit !important;
    display: inline-block;
}

.btn_wrap {
    text-align: center;
}

.btn {
    font-size: 1.4em;
    color: #fff;
    font-weight: bold;
    padding: 0.8em var(--myBasePX_S);
    margin: 0 auto;
    line-height: 1.2;
    border-radius: 10px;
    transition: all 0.3s;
    display: inline-block;
}

.btn:hover {
    box-shadow: unset !important;
}

#page_top {
    position: fixed;
    font-size: 77%;
    z-index: 500;
    text-align: right;
}

#page_top a img {
    width: 100px;
}

#page_top:hover {
    cursor: pointer;
}

.pc {
    display: block;
}

@media screen and (min-width: 768px) {
    #page_top {
        bottom: 20px;
        right: 20px;
        text-align: right;
    }

    a[href*="tel:"] {
        pointer-events: none;
        cursor: default;
        text-decoration: none;
    }

    .mob {
        display: none;
    }
}

@media screen and (max-width: 767px) {
    .pc {
        display: none;
    }

    #page_top {
        bottom: 5px;
        right: 5px;
    }

    #page_top a img {
        width: 60px;
        height: auto;
    }
}

.brXS,
.brS,
.brM,
.brL,
.brXL {
    display: none;
}

.brPC {
    display: none;
}

@media (max-width: 479px) {
    .brXS {
        display: inline;
    }
}

@media (max-width: 599px) {
    .brS {
        display: inline;
    }
}

@media (max-width: 767px) {
    .brM {
        display: inline;
    }
}

@media (max-width: 1024px) {
    .brL {
        display: inline;
    }
}

@media (max-width: 1399px) {
    .brXL {
        display: inline;
    }
}

@media (min-width: 1400px) {
    .brPC {
        display: inline;
    }
}

/* =============================================================
    header
============================================*/
.kv_logo_wrap {
    font-size: 0em;
    max-width: 100%;
    margin: 0 auto;
}

.kv_logo {
    background: url('../images/kv_logo.jpg') center top/contain no-repeat;
    padding-top: calc(881 / 1920 * 100%);
}

.oa_date_wrap {
    font-weight: bold;
    text-align: center;
    line-height: 1.1;
}

.oa_date_wrap .inner_wrap {
    max-width: 100%;
}

.oa_date_sub {
    font-size: 1.9em;
    color: #fff;
    padding: 0.6em 1em;
    margin: 10px auto var(--myBasePX_S);
    background-color: var(--myColor03);
    display: inline-block;
}

.oa_date {
    font-size: 3.7em;
}

.oa_date em {
    font-size: 1.6em;
    color: var(--myColor03);
    line-height: 1;
}

@media screen and (max-width: 1919px) {
    /* .oa_date {
        font-size: 3.9vw;
    } */
}

@media screen and (max-width: 1279px) {
    .oa_date_sub {
        font-size: 2.8vw;
    }

    .oa_date {
        font-size: 5.4vw;
    }
}

@media screen and (max-width: 767px) {
    .kv_logo {
        background: url('../images/kv_logo_mob.jpg') center top/contain no-repeat;
        padding-top: calc(510 / 780 * 100%);
    }

    .oa_date_sub {
        font-size: 3.6vw;
    }

    .oa_date {
        font-size: 6vw;
    }
}

/* =============================================================
    content　コンテンツ
============================================*/
.sec_title {
    font-size: 1.9em;
    font-weight: bold;
    line-height: 1.2;
}

.flex_pc2.flex {
    column-gap: var(--myBasePX_L);
    justify-content: center;
    align-items: flex-start;
}

.flex_pc2>div {
    width: calc(calc(100% - var(--myBasePX_L) * 1) / 2);
}

.flex_pc2>div:nth-child(n + 3) {
    margin-top: var(--myBasePX_M);
}

.cast_img img {
    height: 100%;
    object-fit: cover;
}

.cast_name {
    font-size: 2.4em;
    font-weight: bold;
    margin-bottom: var(--myBasePX_S)
}

.cast_name mark {
    padding: 0 0.2em 0.3em;
    line-height: 1;
    display: inline-block;
}

.cast_info {
    font-size: 1.2em;
    text-align: justify;
}

@media screen and (max-width: 1279px) {
    .sec_title {
        font-size: 1.4em;
    }

    .cast_name {
        font-size: 1.8em;
    }
}

@media screen and (max-width: 767px) {
    .flex_pc2>div {
        width: 100%;
    }

    .cast_name {
        font-size: 1.6em;
        margin-top: var(--myBasePX_M);
    }
}

@media screen and (max-width: 479px) {
    .sec_title {
        font-size: 1.2em;
    }
}

/* =============================================================
    overview　概要
============================================*/
#overview {
    text-align: center;
    padding: var(--myBasePX_XL) var(--myBasePX_M);
}

#overview .inner_wrap {
    padding-top: var(--myBasePX_L);
    padding-bottom: var(--myBasePX_L);
    background-color: #fff;
}

#overview .sec_title {
    margin-bottom: var(--myBasePX_M);
}

#overview .read_wrap {
    font-size: 1.2em;
}

#overview .read_wrap p:not(:last-child) {
    margin-bottom: var(--myBasePX_S);
}

#overview .read_wrap em:not(.nml) {
    font-size: 1.3em;
    font-weight: bold;
    color: var(--myColor03);
}

#overview .read_wrap em.nml {
    color: var(--myColor03);
    font-weight: normal;
}

#overview .read_wrap mark {
    font-size: 1.3em;
    font-weight: bold;
    color: #fff;
    line-height: 2;
    margin: 4px;
    padding: 4px;
    background-color: var(--myColor03);
}

@media screen and (max-width: 479px) {
    #overview .read_wrap {
        font-size: 1em;
    }
}

/* =============================================================
    cast　出演
============================================*/
#cast_mc {
    padding: var(--myBasePX_L) 0;
    background-color: var(--myColor04);
}

#cast_mc .inner_wrap {
    box-sizing: content-box;
}

#cast_mc .read_wrap.flex {
    position: relative;
    align-items: flex-end;
    margin-top: 0;
}

#cast_mc .sec_title {
    font-size: 1.5em;
    color: var(--myColor04);
    text-align: center;
    width: 100%;
    padding: 0.3em 0.6em;
    background-color: #fff;
}

#cast_mc .sec_title.mob {
    margin-bottom: var(--myBasePX_M);
}

#cast_mc .cast_name mark {
    background: linear-gradient(180deg, transparent 0%, transparent 60%, #2ebb77 60%, #2ebb77 100%);
}

#cast_mc .cast_name mark,
#cast_mc .cast_info {
    color: #fff;
}

@media screen and (min-width: 768px) {
    #cast_mc .sec_title {
        position: absolute;
        top: 0;
    }

    #cast_mc .read_wrap_inner {
        padding-top: 3.5em;
    }
}

@media screen and (max-width: 767px) {
    #cast_mc {
        padding: var(--myBasePX_XL) 0;
    }
}

/* =============================================================
    oa_next　次回の放送
============================================*/
#oa_next {
    padding: 0 var(--myBasePX_L) var(--myBasePX_XL);
    background: url('../images/ptn_stripe.jpg') center top repeat;
}

.oa_next_date {
    align-items: center;
    max-width: 1200px;
    padding: var(--myBasePX_L) var(--myBasePX_S) 0;
    margin: 0 auto;
    background-color: #fff;
}

.oa_next_date_inner {
    font-size: 2.4em;
    font-weight: bold;
    line-height: 1.2;
    text-align: center;
}

.oa_next_date_inner em {
    font-size: 1.3em;
    color: var(--myColor03);
    margin: 0 0.2em;
}

#oa_next .inner_wrap {
    padding: var(--myBasePX_L) calc(var(--myBasePX_L) * 2);
    background-color: #fff;
}
@media screen and (max-width: 767px) {
    
#oa_next .inner_wrap {
    padding: var(--myBasePX_L) calc(var(--myBasePX_M));
}
}

@media screen and (max-width: 1279px) {
    .oa_next_date_inner {
        font-size: 2em;
        width: calc(100% - 17vw - var(--myBasePX_M));
        text-align: center;
    }

    .icon_bag {
        width: 10vw;
    }

    .icon_flag {
        width: 7vw;
    }
}

@media screen and (max-width: 767px) {
    .oa_next_date_inner {
        font-size: 1.6em;
    }
}

@media screen and (max-width: 479px) {
    .oa_next_date_inner {
        font-size: 1.4em;
    }
}


/* =============================================================
    【movie】ブロック　※Brightecoveの動画表示
============================================*/
.movie_wrap {
    width: 100%;
    max-width: 1000px;
    border: #000 1px solid;
    padding: 0.4em;
}

#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;
}

#oa_next .sec_title {
    color: #fff;
    text-align: center;
    padding: 0.4em 0.8em;
    margin: var(--myBasePX_XL) auto var(--myBasePX_L);
    background-color: var(--myColor04);
}

.caddie_item {
    text-align: center;
}

.cast_guest .cast_name mark,
.caddie_item .cast_name mark {
    background: linear-gradient(180deg, transparent 0%, transparent 60%, #ffff00 60%, #ffff00 100%);
}

.cast_guest .read_wrap.flex {
    align-items: flex-end;
}

.caddie_item .cast_info {
    font-size: 1.1em;
}

.img_caddie {
    max-width: 400px;
    margin: 0 auto;
    padding: 0 var(--myBasePX_M) var(--myBasePX_M);
    box-sizing: content-box !important;
}

@media screen and (max-width: 767px) {
    .caddie_item:not(:last-child) {
        margin-bottom: var(--myBasePX_M);
    }

    .img_caddie {
        padding-bottom: 0;
    }
}

/* =============================================================
    mov_deli　動画配信
============================================*/
#mov_deli {
    padding: var(--myBasePX_XL) 0;
}

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

.yt_mov_head {
    font-size: 1em;
    font-weight: bold;
    color: #fff;
    padding: 0.2em 0.4em;
    background-color: var(--myColor03);
    display: inline-block;
    width: 100%;
}

.yt_mov_wrap iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    /* border: solid 4px var(--myColor01);
    padding: 8px; */
    vertical-align: top;
}

.tver_wrap {
    max-width: 690px;
    margin: var(--myBasePX_L) auto 0;
}

.tver_wrap .limit_text {
    font-weight: bold;
    text-align: center;
    line-height: 1.3;
    margin: 0.6em auto 0;
}

@media screen and (max-width: 1279px) {
    .yt_mov_head {
        font-size: 1em;
    }
}

@media screen and (max-width: 479px) {
    .yt_mov_head {
        font-size: 4vw;
    }
}

/* =============================================================
    archive　過去回
============================================*/
#archive {
    color: #fff;
    text-align: center;
    padding: var(--myBasePX_L);
    background-color: var(--myColor04);
}

#archive .sec_title {
    margin: 0 auto var(--myBasePX_M);
}

.archive_oa_date {
    font-size: 0.8em;
    line-height: 1.2;
    padding: 0.4em 0.4em 0;
}

.archive_num {
    margin: 2% auto 0 auto;
}

.archive_num a {
    color: #fff;
}

@media screen and (max-width: 999px) {
    .archive_item:nth-child(n + 4) {
        margin-top: var(--myBasePX_M) !important;
    }
}

@media screen and (max-width: 767px) {
    .archive_item:nth-child(n + 3) {
        margin-top: var(--myBasePX_M) !important;
    }
}




/* =============================================================
   2024/06追加 WP連携　Youtube登録ボタン
============================================*/

.wrapper {
    margin: 50px auto 20px auto;
}

.wrapper h2 {
    text-align: center;
    color: #fff;
    background: #03914c;
    padding: 1%;
    margin-bottom: 3%;
    font-weight: 600;
}

.tvo-report {
    display: flex;
    gap: 3%;
}

.tvo-report-article {
    width: calc(33%);
}

.tvo-report-time {
    display: none;
}

.tvo-report-title {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    padding-bottom: 0 !important;
    margin-top: 15px;
    color: #000;
}

.more_box {
    text-align: center;
    margin-top: 4%;
}

.more {
    background: #03914c;
    color: #fff;
    padding: 1% 10%;
    border-radius: 35px;
    font-size: 1.5em;
}

.yt_btn img {
    width: 150px !important;
    margin-bottom: 20px;
}

@media screen and (max-width: 767px) {

    .tvo-report {
        display: block;
    }

    .tvo-report-article {
        width: 100%;
    }

    .tvo-report-title {
        margin-top: 5px;
        margin-bottom: 15px;
    }

    .yt_btn img {
        width: 100px !important;
        margin-bottom: 10px;
    }
}

/* =============================================================
    2024/08追加 バナーエリア
============================================*/

.bnrarea {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--myBasePX_M) var(--myBasePX_XL) var(--myBasePX_M);
}

.bnrarea_ttl {
    color: #fff;
    text-align: center;
    padding: 0.4em 0.8em;
    /* margin: 0 auto var(--myBasePX_L); */
    background-color: var(--myColor04);
    font-size: 1.9em;
}

.bnrarea_link {
    /* max-width: 800px; */
    margin: 0 auto;
}

@media screen and (max-width: 767px) {
    .bnrarea_ttl {
        padding: 0.2em 0.8em;
        font-size: 1.5em;
    }
}
/* =============================================================
    2024/10追加 ページネーション
============================================*/

.pagination {
    display: flex;
    justify-content: center;
    margin-top: 1%;
}

.pagination .page {
    padding: 0 3px
}

.pagination .page a {
    color: #fff;
}

#playlist {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

.playlist_item {
    flex: 0 0 350px;
    background-color: #fff;
}

.playlist_thumnail {
    box-shadow: 0px 3px 10px #7e8791;
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.playlist_thumnail img {
    position: absolute;
    top: -16.7%;
}

.playlist_title_wrap {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    padding: 0 10px;
    margin: 15px 0;
    color: #000;
}


@media screen and (max-width: 814px) {
    .playlist_item {
        flex: 0 0 100%;
    }
}