@charset "UTF-8";

/* ==========================================================
   PODCAST LIST STYLES (Archive & Portal)
   ========================================================== */

/* ----------------------------------------------------------
   アニメーション定義
   ---------------------------------------------------------- */
@keyframes tnsbFadeIn {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

/* ----------------------------------------------------------
   PODCASTS PORTAL (Main Visual & Noise)
   ---------------------------------------------------------- */
.noise {
    background: url(../../images/podcasts/noise.gif);
    background-size: 100px 100px;
    width: 100%;
    height: 48vw;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    opacity: .4;
    mix-blend-mode: overlay;
}
.noise.noise_i {
    background: url(../../images/podcasts/noise_i.gif);
    mix-blend-mode: color-dodge;
    opacity: .1;
}
.mv {
    position: relative;
    margin-bottom: -16vw;
}
.mv>.main {
    background-image: url(../../images/podcasts/mv/mv_main_01.jpg);
    background-color: #121212; 
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    width: 100%;
    height: 48vw;
}
.mv>.over {
    background: url(../../images/podcasts/mv/mv_over.png) repeat-x bottom;
    position: absolute;
    height: 30vw;
    width: 100vw;
    bottom: 0;
    background-size: 100% 90%;
}
/* 各番組MV */
.mv>.main.hkb1 { background-image: url(../../images/podcasts/mv/podcast_16_9_hkb1.jpg); }
.mv>.main.hkb2 { background-image: url(../../images/podcasts/mv/podcast_16_9_hkb2.jpg); }
.mv>.main.hkb3 { background-image: url(../../images/podcasts/mv/podcast_16_9_hkb3.jpg); }
.mv>.main.hkb4 { background-image: url(../../images/podcasts/mv/podcast_16_9_hkb4.jpg); }
.mv>.main.mtm  { background-image: url(../../images/podcasts/mv/podcast_16_9_mon.jpg); }
.mv>.main.ns   { background-image: url(../../images/podcasts/mv/podcast_16_9_ns.jpg); }
.mv>.main.lab  { background-image: url(../../images/podcasts/mv/podcast_16_9_lab.gif); }

@media(max-width:780px) {
    .noise, .mv>.main { height: 99.9vw; }
    body.home .mv { margin-bottom: -24vw; }
    .mv>.main.ns { background-image: url(../../images/podcasts/mv/podcast_16_9_ns_sp.jpg); }
}

/* ----------------------------------------------------------
   PROGRAM INFO (Newsletter Area)
   ---------------------------------------------------------- */
.nl_area {
    padding: 80px 0 120px;
    text-align: center;
    background: #1b1b1b;
    color: #fff;
}
.nl_area>.ico { width: 160px; margin: 0 auto 10px; }
.nl_area>.tit {
    font-size: 2.14em; margin-bottom: 35px; font-weight: 600;
    letter-spacing: 0em; line-height: 1.2; position: relative;
}
.nl_area>.tit>span { font-size: .84rem; display: block; letter-spacing: 0.02em !important; }
.nl_area>.tex { font-size: 1.07em; margin-bottom: 30px; font-weight: 600; line-height: 1.6; }
.nl_area .btn a {
    font-size: 1.35em; background: #000; color: #fff;
    display: inline-block; border-radius: 8px; padding: 0.5em 1.5em;
    font-weight: 600; position: relative; z-index: 9;
}
.nl_area .btn a:hover { background: #393939; }

/* Program Specifics */
.nl_area.program>.ico {
    width: 180px; margin: 0 auto 8px;
    border-radius: 10px; overflow: hidden;
}
.nl_area.program>.tit { margin-bottom: 30px; letter-spacing: -.03em; }
.nl_area.program>.tex { margin-bottom: 16px; }

@media(max-width:780px) {
    .nl_area { padding: 20vw 0 30vw; }
    .nl_area>.ico { width: 150px; }
}

/* ----------------------------------------------------------
   EPISODE LIST (category-mp3-cts.php)
   ---------------------------------------------------------- */
/* ヘッダー部分（リストページ用） */
.mp3_cts--inner.list .top--wrap {
    background-color: #2b2b2b;
    background-image: url(../../images/podcasts/podcast_over_gradation.png);
    background-position: bottom;
    background-repeat: repeat-x;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.mp3_cts--inner.list .top--wrap .podcast_thumbnail {
    margin: 80px 40px 40px 40px;
    border-radius: 6px;
    overflow: hidden;
}
.mp3_cts--inner.list .top--wrap .podcast_thumbnail img {
    width: 230px; height: auto;
}
.mp3_cts--inner.list .top--wrap .podcast_tex {
    width: calc(100% - 350px);
    line-height: 1;
    position: relative;
    color: #fff;
}
.mp3_cts--inner.list .top--wrap .podcast_tex .category {
    font-weight: 600; margin: 100px 0 1em;
}
.mp3_cts--inner.list .top--wrap .podcast_tex .title {
    font-size: 3.3em; font-weight: 600; line-height: 1.2em;
    margin: 0 0 20px;
}
.mp3_cts--inner.list .top--wrap .podcast_tex .author {
    font-size: 1.3em; letter-spacing: .05em;
}

/* カテゴリ別配色 (List Specific) */
.category-quruidasu      .top--wrap{background-color: #ececec;}
.category-tcms_netradio  .top--wrap{background-color: #01a0e9;}
.category-weekly_tcms    .top--wrap{background-color: #01a0e9;}
.category-weekly_tcms_2  .top--wrap{background-color: #151eb7;}
.category-monthly_tcms   .top--wrap{background-color: #ffce00;}
.category-hkb_s1         .top--wrap{background-color: #0387f8;}
.category-hkb_s2         .top--wrap{background-color: #dc0000;}
.category-zr             .top--wrap{background-color: #09f8d7;}
.category-gt             .top--wrap{background-color: #e410ae;}
.category-tnsb_radio     .top--wrap{background-color: #c5e800;}
.category-tcms_sp        .top--wrap{background-color: #c5e800;}
.category-hkb_sp         .top--wrap{background-color: #c5e800;}
.category-carstereo      .top--wrap{background-color: #c7c5b8;}
.category-mon_tcms       .top--wrap{background-color: #c7c5b8;}

/* サブエリア（番組説明・ソート） */
.mp3_cts--inner.list .sub--wrap {
    padding: 40px;
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
}
.mp3_cts--inner.list .sub--wrap h4 { font-size: 1.2em; margin: 0 0 1em; }
.mp3_cts--inner.list .sub--wrap .sub--wrap--left { width: 68%; margin-right: 4%; }
.mp3_cts--inner.list .sub--wrap .sub--wrap--right { width: 28%; }

/* リストアイテム */
.podcast--list--wrap { position: relative; }
a.podcast--list {
    display: block;
    padding: 20px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: ease-in-out .1s;
    color: #fff;
}
a.podcast--list:hover {
    background: rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    border-color: transparent;
}
a.podcast--list .img_area {
    width: 120px;
    margin-right: 40px;
    overflow: hidden;
    border-radius: 3px;
    aspect-ratio: 1 / 1;
    background-color: #333;
}
/* ▼ リスト画像のアニメーション */
a.podcast--list .img_area img {
    width: 100%; height: 100%; object-fit: cover;
    opacity: 0;
    animation: tnsbFadeIn 0.4s ease-out forwards;
}

a.podcast--list .tex_area { width: calc(100% - 160px); }
a.podcast--list .tex_area .tit { font-size: 1.16em; font-weight: 600; }
a.podcast--list .tex_area .tex {
    font-size: .9em; color: rgba(255, 255, 255, 0.6);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden; max-height: 5.5em;
}
a.podcast--list .tex_area .date {
    font-size: 0.88em; color: rgba(255, 255, 255, 0.7);
}

/* その他パーツ */
.program_text { min-height: none; overflow: hidden; color: #999; }
.more-button { display: none; }
.sort-buttons { position: absolute; right: 0; top: 1px; font-size: .9em; }
.sort-buttons a { padding: 0 0.5em; color: #fff; }

/* スマホ対応 */
@media(max-width:780px) {
    .mp3_cts--inner.list .top--wrap .podcast_thumbnail {
        margin: 20px; width: 120px; height: 120px;
    }
    .mp3_cts--inner.list .top--wrap .podcast_tex { width: calc(100% - 160px); }
    .mp3_cts--inner.list .top--wrap .podcast_tex .category { margin: 30px 0 8px; font-size: 0.8em; }
    .mp3_cts--inner.list .top--wrap .podcast_tex .title { font-size: 1.8em; margin: 0 0 5px; }
    
    .mp3_cts--inner.list .sub--wrap { padding: 20px; }
    .mp3_cts--inner.list .sub--wrap .sub--wrap--left { width: 100%; margin-right: 0; }
    .mp3_cts--inner.list .sub--wrap .sub--wrap--right {
        width: 100%; margin: 0px auto 10px;
    }

    a.podcast--list { padding: 10px 0; }
    a.podcast--list:hover {background: none;}
    a.podcast--list .img_area { width: 50px; height: 50px; margin-right: 10px; }
    a.podcast--list .tex_area { width: calc(100% - 60px); }
    a.podcast--list .tex_area .tit { font-size: 1.1em; line-height: 1.4; }
    
    .more-button {
        display: block; text-align: center;
        background: linear-gradient(rgba(18, 18, 18, 0), #121212);
        padding: 3em 0 0; position: relative; top: -3em;
        color: #fff;
    }
    .program_text { max-height: 5em; transition: 0.3s; }
    .program_text.expand { max-height: none; overflow: visible; margin-bottom: 3em; }
}


/* ==========================================================
   PODCAST PLAYER STYLES (Single Episode)
   ========================================================== */

/* ----------------------------------------------------------
   HEADER & BREADCRUMBS (Pankuzu)
   ---------------------------------------------------------- */
.mp3_cts--inner { position: relative; }

/* パンくず（ヘッダー帯） */
.mp3_cts--inner #pankuzu--area {
    position: fixed; 
    width: 100%; 
    height: 58px; 
    line-height: 1; 
    display: flex; 
    flex-direction: row; 
    flex-wrap: wrap; 
    background: rgba(0, 0, 0, 0.62); 
    z-index: 99;
}

.mp3_cts--inner #pankuzu--area a {
    display: block; 
    width: 30px; 
    height: 30px;
    background-image: url(../../images/ico/ico_arrow.png);
    background-size: contain; 
    margin: 14px 20px 14px 40px;
    transition: ease-in-out .2s;
}
.mp3_cts--inner #pankuzu--area a:hover { opacity: .5; }

.mp3_cts--inner #pankuzu--area .tit {
    opacity: 0; 
    transition: ease-in-out .3s; 
    display: inline; 
    font-size: 1.7em; 
    margin: 0.75em 0 0; 
    font-weight: 600; 
    letter-spacing: -0.02em; 
    color: #fff; /* 背景が暗いため視認性確保で維持していますが、不要であれば削除します */
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    max-width: calc(100% - 390px);
}

.mp3_cts--inner #pankuzu--area.add .tit { 
    opacity: .9; 
    letter-spacing: 0em; 
}

/* ----------------------------------------------------------
   TOP WRAP (Thumbnail & Info)
   ---------------------------------------------------------- */
.mp3_cts--inner .top--wrap {
    background-color: #2b2b2b;
    background-image: url(../../images/podcasts/podcast_over_gradation.png);
    background-position: bottom; 
    background-repeat: repeat-x; 
    display: flex; 
    flex-direction: row; 
    flex-wrap: wrap;
}
.mp3_cts--inner .top--wrap .podcast_thumbnail { 
    margin: 80px 40px 40px 40px; 
    border-radius: 6px; 
    overflow: hidden; 
}
.mp3_cts--inner .top--wrap .podcast_thumbnail img { 
    width: 230px; 
    height: auto; 
    /* アニメーション削除 */
}
.mp3_cts--inner .top--wrap .podcast_tex { 
    width: calc(100% - 350px); 
    line-height: 1; 
    position: relative; 
    color: #fff;
}
.mp3_cts--inner .top--wrap .podcast_tex .category { 
    font-weight: 600; 
    margin: 100px 0 1em; 
}
.mp3_cts--inner .top--wrap .podcast_tex .title { 
    font-size: 3.3em; 
    font-weight: 600; 
    line-height: 1.2em; 
    margin: 0 0 20px; 
    overflow: hidden; 
    display: -webkit-box; 
    -webkit-box-orient: vertical; 
    -webkit-line-clamp: 2; 
}
.mp3_cts--inner .top--wrap .podcast_tex .author { 
    font-size: 1.3em; 
    letter-spacing: .05em; 
}
.mp3_cts--inner .top--wrap .podcast_tex .author a {
    color: #fff;
}
.mp3_cts--inner .top--wrap .podcast_tex .author a:hover { 
    text-decoration: underline; 
}

/* ----------------------------------------------------------
   DETAILS & PLAYER WRAPPER
   ---------------------------------------------------------- */
.mp3_cts--inner .sub--wrap { 
    padding: 40px; 
    display: flex; 
    flex-direction: row; 
    flex-wrap: wrap; 
}
.mp3_cts--inner .sub--wrap h4 { font-size: 1.2em; margin: 0 0 1em; }
.mp3_cts--inner .sub--wrap h5 { font-size: .9em; margin: 1em 0 0; opacity: .6; }
.mp3_cts--inner .sub--wrap .sub--wrap--left { width: 68%; margin-right: 4%; position: relative; }
.mp3_cts--inner .sub--wrap .sub--wrap--right { width: 28%; }

/* カテゴリ別背景色設定 (tnsb-body-class-custom.php と連動) */
/* !important を削除し、ご提示コード通りに修正 */
.category-quruidasu       #pankuzu--area{ background: rgba(207, 207, 207, 0.64);}
.category-tcms_netradio   #pankuzu--area{ background: rgba(42, 140, 203, 0.62);}
.category-weekly_tcms     #pankuzu--area{ background: rgba(42, 140, 203, 0.62);}
.category-weekly_tcms_2   #pankuzu--area{ background: rgba(12, 26, 173, 0.62);}
.category-monthly_tcms    #pankuzu--area{ background: rgba(219, 184, 0, 0.64);}
.category-hkb_s1          #pankuzu--area{ background: rgba(20, 123, 210, 0.64);}
.category-hkb_s2          #pankuzu--area{ background: rgba(193, 0, 0, 0.64);}
.category-zr              #pankuzu--area{ background: rgba(12, 219, 191, 0.64);}
.category-gt              #pankuzu--area{ background: rgba(201, 18, 155, 0.64);}
.category-tnsb_radio      #pankuzu--area{ background: rgba(179, 203, 0, 0.64);}
.category-tcms_sp         #pankuzu--area{ background: rgba(179, 203, 0, 0.64);}
.category-hkb_sp          #pankuzu--area{ background: rgba(179, 203, 0, 0.64);}
.category-carstereo       #pankuzu--area{ background: rgba(174, 176, 160, 0.64);}
.category-mon_tcms        #pankuzu--area{ background: rgba(174, 176, 160, 0.64);}

.category-quruidasu       .top--wrap{background-color: #ececec !important;}
.category-tcms_netradio   .top--wrap{background-color: #01a0e9 !important;}
.category-weekly_tcms     .top--wrap{background-color: #01a0e9 !important;}
.category-weekly_tcms_2   .top--wrap{background-color: #151eb7 !important;}
.category-monthly_tcms    .top--wrap{background-color: #ffce00 !important;}
.category-hkb_s1          .top--wrap{background-color: #0387f8 !important;}
.category-hkb_s2          .top--wrap{background-color: #dc0000 !important;}
.category-zr              .top--wrap{background-color: #09f8d7 !important;}
.category-gt              .top--wrap{background-color: #e410ae !important;}
.category-tnsb_radio      .top--wrap{background-color: #c5e800 !important;}
.category-tcms_sp         .top--wrap{background-color: #c5e800 !important;}
.category-hkb_sp          .top--wrap{background-color: #c5e800 !important;}
.category-carstereo       .top--wrap{background-color: #c7c5b8 !important;}
.category-mon_tcms        .top--wrap{background-color: #c7c5b8 !important;}

/* MP3 Player Wrapper */
.mp3_cts--inner .player--wrap { 
    display: flex; 
    flex-direction: row; 
    flex-wrap: wrap; 
    padding: 40px 40px 0 40px; 
}
.mp3_cts--inner .player--wrap #total_duration { 
    width: calc(100% - 100px); 
    padding: 20px; 
    line-height: 1.5; 
    color: rgba(255, 255, 255, 0.53); 
}
.mp3_cts--inner .player--wrap #icon { 
    pointer-events: inherit !important; 
    cursor: pointer; 
    width: 60px; 
    height: 60px; 
    transition: ease-in-out .05s; 
}
#icon:hover{transform: scale(1.04)}
#icon:active{opacity: .8; transform: scale(1)}
.mp3_cts--inner .mp3--wrap{ padding: 40px; }
.mp3_cts--inner .mp3--wrap audio{ width: 100%; }

/* Sound Bar */
p.sound_bar {
    position: fixed; 
    bottom: -100px; 
    width: calc(100% - 300px); 
    background-color: #333; 
    padding: 20px; 
    border-radius: 0; 
    display: flex; 
    align-items: center; 
    left: 260px; 
    z-index: 9999; 
    opacity: 0; 
    transition: ease-in-out .5s;
}
p.sound_bar.add { bottom: 0px; opacity: 1; }

input[type="range"] { 
    width: 100%; 
    height: 8px; 
    outline: none; 
    border: none; 
    border-radius: 5px; 
}
input[type="range"]::-webkit-slider-thumb { 
    appearance: none; 
    width: 16px; 
    height: 16px; 
    border-radius: 50%; 
}
time { color: #fff; font-size: 14px; }

/* ソートボタン */
.sort-buttons { position: absolute; right: 0; top: 1px; font-size: .9em; }
.sort-buttons a { padding: 0 0.5em; }
.sort-buttons a:hover { opacity: .6; }

/* ----------------------------------------------------------
   MP3ページでのコメント (Moved from tnsb-site.css)
   ---------------------------------------------------------- */
.mp3-comment-wrap { margin-bottom: 80px; }
.mp3-comment-wrap .tnsb-comment__author { color: #fff; }
.mp3-comment-wrap .tnsb-field textarea { border: 1px solid #494949; background: #282828; color: #fff; }
.mp3-comment-wrap .tnsb-comments { max-width: 1000px; margin: 0 auto; padding: 24px 0; }
.mp3-comment-wrap .tnsb-comment { border-bottom: 1px solid #444; }

/* ----------------------------------------------------------
   Responsive
   ---------------------------------------------------------- */
@media(max-width:1333px) {
    .mp3_cts--inner .top--wrap .podcast_tex .title { font-size: 2.8em; }
    p.sound_bar { width: calc(100% - 240px); left: 200px; }
}

@media(max-width:1029px) {
    .mp3_cts--inner #pankuzu--area .tit { max-width: calc(100% - 310px); }
    .mp3_cts--inner .sub--wrap { padding: 20px; }
    .mp3_cts--inner .sub--wrap .sub--wrap--left { width: 100%; margin-right: 0%; }
    .mp3_cts--inner .sub--wrap .sub--wrap--right { width: 100%; margin: 40px auto 80px; }
    .mp3_cts--inner .mp3--wrap { padding: 0; }
    p.sound_bar { width: 90vw; left: 0px; padding: 3vw; margin: 2vw; border-radius: 6px; position: fixed; }
    time { width: 14vw; font-size: 11px; text-align: center; }
    input[type="range"] { width: 100vw; }
}

@media(max-width:780px) {
    /* スマホ版パンくずアニメーション（ご提示コード準拠） */
    .mp3_cts--inner #pankuzu--area { 
        opacity: 0; 
        height: 43px; 
        transition: ease-in-out .3s; 
        top: 30px; 
    }
    .mp3_cts--inner #pankuzu--area.add { 
        opacity: 1; 
        top: 50px; 
    }
    .mp3_cts--inner #pankuzu--area a { 
        width: 16px; 
        height: 16px; 
        margin: 7px 10px 7px 18px; 
        padding: 5px; 
    }
    .mp3_cts--inner #pankuzu--area .tit { 
        font-size: 1.2em; 
        margin: 0.95em 0 0; 
        max-width: 80vw; 
    }

    .single .mp3_cts--inner .top--wrap .podcast_tex .title { -webkit-line-clamp: 3; }
    .single .mp3_cts--inner .top--wrap .podcast_thumbnail { width: 100%; margin: 20px 0 0px; padding: 0; }
    .mp3_cts--inner .top--wrap .podcast_thumbnail img { 
        max-width: 100%; 
        height: initial; 
        margin: 0 auto; 
        min-width: 0; 
        border-radius: 6px; 
    }
    .single .mp3_cts--inner .top--wrap .podcast_tex { width: calc( 100% - 40px); padding: 20px; }
    .single .mp3_cts--inner .top--wrap .podcast_tex .category { margin: 0px 0 1em; }
    .single .mp3_cts--inner .top--wrap .podcast_tex .title { 
        font-size: 5vw; 
        line-height: 1.3em; 
        margin: 0 0 0.5em; 
    }
    .mp3_cts--inner .player--wrap { padding: 20px 20px 0 20px; }
    .mp3_cts--inner .player--wrap #icon { width: 50px; height: 50px; }
    .mp3_cts--inner .player--wrap #total_duration { padding: 17px; }
    
    .mp3-comment-wrap { margin-bottom: 0px; } 
    .tnsb-field textarea { width: 92%; }
}