@charset "UTF-8";

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

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

/* ----------------------------------------------------------
   HEADER & BREADCRUMBS
   ---------------------------------------------------------- */
.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; }

/* 詳細ページヘッダー */
.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;
    /* ▼ アニメーション適用 */
    opacity: 0;
    animation: tnsbFadeIn 0.4s ease-out forwards;
}
.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; }

/* カテゴリ別配色 (Common Settings) */
.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;}
.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;}

/* ----------------------------------------------------------
   PLAYER & DETAILS
   ---------------------------------------------------------- */
.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%; }

/* サウンドバー */
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; }

/* 詳細コンテンツ */
.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%; }

/* スマホ対応 */
@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;
        background: #3d3d3d; padding: 20px; border-radius: 10px;
    }
    .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; font-size: 5vw; line-height: 1.3em; margin: 0 0 0.5em; }
    .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: 60%; 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; }
    
    .mp3_cts--inner .player--wrap { padding: 20px 20px 0 20px; }
    .mp3_cts--inner .top--wrap .podcast_tex .author { font-size: 1.2em; }
    .mp3_cts--inner .player--wrap #icon { width: 50px; height: 50px; }
    .mp3_cts--inner .player--wrap #total_duration { padding: 17px; }
}