@charset "UTF-8";

#video-section {
    height: 635px;
}

.top-video {
    max-width: 650px;
    margin-top: 20px;
}

video-js.video-js .vjs-fluid:not(.vjs-audio-only-mode) {
    padding-top: 56.25%;
}

/* Video player carousel */
.vjs-playlist-horizontal .vjs-playlist-item {
    margin-top: 5px;
    height: 100px;
}

.vjs-playlist {
    background-color: #585858;
}

.vjs-playlist .vjs-playlist-duration {
    right: 0;
    left: auto;
    top: 0;
    font-size: x-small;
}

.vjs-playlist .vjs-playlist-name {
    font-size: small;
    padding: 0 0 0 2px;
    max-height: 30px;
    white-space: normal;
    line-height: 15px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.vjs-playlist .playlist-published_at {
    font-size: x-small;
    padding: 0 0 0 2px;
}

.vjs-playlist .vjs-selected .vjs-playlist-now-playing-text {
    font-size: 15px;
}

/* playlist 現在再生中 */
.vjs-playlist .vjs-selected, .vjs-playlist.vjs-mouse .vjs-selected {
    background-color: #ffffff00;
}

/*** video tab ***/
/* index */
.video-tab {
    margin: 20px auto -20px;
}

.video-tab ul {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    box-sizing: border-box;
}

.video-tab ul li {
    box-sizing: border-box;
}

.video-tab ul li a {
    display: grid;
    color: #fff;
    font-weight: bold;
    text-align: center;
    background-color: #1f2933;
    box-sizing: border-box;
    align-content: center;
    height: inherit;
    border-radius: 10px 10px 0 0
}

.video-tab ul li a:hover {
    opacity: .6;
    text-decoration: none;
}

.video-tab ul li.is-select a {
    background-color: #ed5853;
    text-decoration: none;
    pointer-events: none;
}

.video-tab ul li a.is-live::after {
    content: '';
    display: inline-block;
    width: 34px;
    height: 16px;
    margin-left: 5px;
    background-image: url(../../../../common/img/live_icon.png);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    text-align: center;
    top: 3px;
}

.video-tab ul li:nth-last-child(2),
.video-tab ul li:nth-last-child(2) ~ li {
    width: 50%;
    height: inherit;
}

.video-tab-category-news {
    border-right: #fff 3px solid;
}

.video-tab-category-weather {
    border-left: #fff 3px solid;
}

.video-tab ul{
    height: 59px;
    text-align: center;
    line-height: 20px;
}

.video-tab ul li.video-tab_category:nth-last-child(3),
.video-tab ul li.video-tab_category:nth-last-child(3) ~ li.video-tab_category {
    width: 33%;
    height: inherit;
    border-right: none;
}