/* Thumbnail Player */
.contents {
    /*padding: 16px 24px 24px 24px;*/
}

    .contents .contents-head {
        padding: 16px 24px 16px 24px;
        border-bottom: var(--border-main);
    }

/*これは左側の話*/
.left-area {
    width: 70%;
    padding: 0px 24px 0px 24px;
    border-right: var(--border-main);
}

/*これは右側の話*/
.right-area {
    width: 30%;
    padding: 0px 24px 0px 24px;
    overflow-y: auto;
    overflow-x: hidden;
}


    /* 検索エリア */
    .contents .search-area {
        font-weight: var(--font-weight-main);
        flex-wrap: wrap;
        column-gap: 16px;
    }
        .contents .search-area td {
            padding: 0px 4px 8px 4px;
        }

        .contents .search-area .label {
            height: 40px;
            background: var(--color-gray3);
            border-width: 0.5px 0px 0.5px 0.5px;
            border-style: solid;
            border-color: var(--color-black1);
            padding: 0px 12px;
            line-height: 36px;
            display: block;
        }
        .contents .search-area .select-div::before {
            position: absolute;
            display: block;
            content: '';
            width: 8px;
            height: 8px;
            top: 54%;
            right: 16px;
            margin-top: -2px;
            border-bottom: 2px solid var(--color-black1);
            border-right: 2px solid var(--color-black1);
            transform: rotate(45deg) translateY(-50%);
            transition: all .2s ease-in-out;
            transform-origin: 50% 0;
            opacity: 0.4;
            pointer-events: none;
        }
        .contents .search-area .input-select.system {
            margin-left: 0px;
        }
        .contents .search-area .search-icon {
            margin-top: 2.5px;
        }
        .contents .search-area .btn-search {
            width: 116px;
            height: 40px;
            font-size: var(--font-size-main);
            background: var(--color-navy1);
            border: 0.5px solid var(--color-black1);
            border-radius: 0;
            color: var(--color-white1);
        }
        .contents .search-area .date::after {
            position: absolute;
            display: inline;
            top: 5px;
            left: 105px;
        }
        .contents .search-area .date.sun::after {
            content: '(日)';
        }
        .contents .search-area .date.mon::after {
            content: '(月)';
        }
        .contents .search-area .date.tue::after {
            content: '(火)';
        }
        .contents .search-area .date.wed::after {
            content: '(水)';
        }
        .contents .search-area .date.thu::after {
            content: '(木)';
        }
        .contents .search-area .date.fri::after {
            content: '(金)';
        }
        .contents .search-area .date.sat::after {
            content: '(土)';
        }

    /* 時間メニューエリア */
    .contents .minutes-menu-area {
        margin: 16px 30px 16px 0px;
        /*border-top: var(--border-main);*/
        /*padding: 8px 0px 8px 0px;*/
    }
        .contents .minutes-menu-area .minutes-menu {
            /*width: calc(100% - 108px - 16px);*/
            column-gap: 3px;
            row-gap: 3px;
        }
            .contents .minutes-menu-area .minutes-menu input {
                width: 38px;
                height: 38px;
                background: var(--bg-contents);
                border: var(--border-black);
                color: var(--color-black1);
                opacity: 0.5;
            }
                .contents .minutes-menu-area .minutes-menu input.enabled {
                    border: solid 2px var(--color-navy1);
                    opacity: 1;
                }
                .contents .minutes-menu-area .minutes-menu input.btn-selected {
                    color: var(--color-white1);
                    background: var(--color-navy1);
                    border: 0.5px solid var(--color-black1);
                    opacity: 1;
                }


    /* ビデオ情報エリア */
    .contents .video-info-area {
        margin: 16px 0px;
    }
    .contents .video-info .info {
        margin-bottom: 16px;
    }
        .contents .video-info .info .label {
            width: 116px;
            /*margin-right: 8px;*/
        }
        .contents .video-info .info .file-length {
            /*width: 140px;*/
        }
        .contents .video-info .info .file-name {
            /*width: calc(100% - 80px - 8px);*/
        }

    /* サムネイルエリア */
    .contents .thumbnail-area {
        /*border: var(--border-main);*/
        border: 0.5px solid rgba(0, 0, 0, 0.5);
        background: var(--bg-contents);
        padding: 12px;
        column-gap: 10px;
        row-gap: 10px;
        user-select: none;
    }
        .contents .thumbnail-area .thumbnail-block .thumbnail-head {
            width: 75px;
            height: 25px;
            font-weight: var(--font-weight-db);
            line-height: 16px;
            color: var(--color-black1);
            opacity: 0.5;
        }
            /* アイコン小で画面幅が1500px以下の場合 */
            .contents .thumbnail-area .thumbnail-block .thumbnail-head.small {
                width: 60px;
                font-size: 12px;
                line-height: 12px;
            }

        .contents .thumbnail-area .thumbnail-block .thumbnail-frame {
            border: 0.5px solid var(--color-black1);
        }
        /* サムネイル選択時 */
        .contents .thumbnail-area .thumbnail-block.selected .thumbnail-head {
            color: var(--color-white1);
            border: solid 2px var(--color-navy1);
            background: var(--color-navy1);
            opacity: 1;
        }
        .contents .thumbnail-area .thumbnail-block.selected .select-border {
            border: 3px solid var(--color-navy1);
        }
        
        .contents .thumbnail-area .thumbnail-block.selected .thumbnail {
            border-color: var(--border-selected-color);
        }

        /* 上下の非表示の要素(スクロールイベント用) */
        .contents .thumbnail-area .thumbnail-top, .contents .thumbnail-area .thumbnail-bottom {
            height: 150px;
        }


    /* 動画エリア */
    .contents .video-area .video-play-area .video-display {
        margin-bottom: 24px;
        z-index: 0;
    }
        .contents .video-area .video-play-area .video-display.empty {
            width: 100%;
        }
    .contents .video-area .video-play-area .no-movie {
        background-image: url("/images/no_movie.svg");
        background-repeat: no-repeat;
        background-size: cover;
    }



/* 番組情報エリア */
.contents .information-area {
    /*padding-top: 4px;*/
    margin-bottom: 24px;
}
        .contents .information-area .tab-menu {
            /*width: 66px;*/
            height: 44px;
            color: var(--color-navy1);
            font-weight: var(--font-weight-bold);
            line-height: 44px;
            border: none;
            padding-inline: 16px;
            opacity: 0.5;
        }
            .contents .information-area .tab-menu.selected {
                border-bottom: solid 2px var(--color-navy1);
                opacity: 1;
            }
        .contents .information-area .information {
            height: calc(100% - 44px);
            min-height: 80px;
            border: 0.5px solid rgba(0, 0, 0, 0.5);
        }
        .contents .information-area .information-text {
            background: var(--color-white1);
            padding: 24px;
            overflow-wrap: anywhere;
        }
        .contents .information-area .subtitle {
            background: black;
            padding: 24px;
            overflow-wrap: anywhere;
        }

/* 右クリックメニュー */
.contextmenu {
    width: 126px;
    padding: 8px 0px 8px 0px;
    background: var(--bg-contents);
    border: var(--border-main);
    border-radius: 8px;
}
    .contextmenu .label {
        height: 40px;
        background: var(--bg-contents);
        border: none;
        text-align: left;
        padding: 0px 8px 0px 8px;
    }
        .contextmenu .label:hover {
            color: var(--bg-contents);
            background: var(--color-blue6);
        }


/* 拡大表示 */
.lum-close-button {
    cursor: pointer;
}

.lum-lightbox-inner img.lum-img {
    width: 80%;
}



/* 以下、videoタグ部分 */
:root {
    --seek-bar-color: #0017C1;
    --controls-color: #808080;
    --sound-bar-color: #FFFFFF;
    --sound-bar-thumb-color: #c4d7d1;
}

.video-wrapper .video-content {
    z-index: 0;
}

    /* NoMovieアイコン */
    .video-wrapper .video-content .no-movie {
        top: 0;
        left: 0;
        height: calc(100% - 10px);
    }

        .video-wrapper .video-content .no-movie img {
            width: 100%;
            height: 100%;
        }

    /* 再生アイコン */
    .video-wrapper .video-content .play-icon {
        top: 0;
        left: 0;
        height: calc(100% - 10px);
    }

        .video-wrapper .video-content .play-icon.finish { /* 1時間分終了時 */
            pointer-events: none;
        }

            .video-wrapper .video-content .play-icon.finish img {
                display: none;
            }

.video {
    width: 100%;
    background: rgba(0, 0, 0, 0.2);
}

.video-wrapper .video-content .play img {
    width: 15%;
    user-select: none;
}

.video-wrapper .video-content .play-icon:not(.play) img {
    display: none;
}

/* 音量&全画面ボタン */
.video-wrapper .video-content .controls {
    display: none;
}

.video-wrapper:hover .video-content .controls {
    left: 0;
    bottom: 10px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: end;
    flex-wrap: wrap;
    column-gap: 12px;
    background: rgba(128, 128, 128, 0.75);
    padding: 5px;
    z-index: 2;
}

/* シークバー */
.video-wrapper .video-content .seek-bar {
    height: 5px;
    left: 0;
    bottom: 5px;
    background: var(--seek-bar-color);
    z-index: 3;
}

.video-wrapper .video-content .controls .sound-bar {
    height: 5px;
    border-radius: 30px;
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
    outline: 0;
    appearance: none;
    -webkit-appearance: none;
}

    .video-wrapper .video-content .controls .sound-bar::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        border: 2px solid var(--sound-bar-color);
        background-color: var(--sound-bar-color);
        box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
    }

/* 全画面表示 */
.video-wrapper.full-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    z-index: 1001;
}

    .video-wrapper.full-screen .video-content video {
        width: 100vw;
        height: calc(100vh - 6px);
    }

    .video-wrapper.full-screen .video-content .controls {
        /*bottom: 12px;*/
    }

    .video-wrapper.full-screen .video-content .seek-bar {
        display: none;
        /*bottom: 12px;*/
    }

    .video-wrapper.full-screen:hover .video-content .seek-bar {
        display: block;
    }
/* 全画面表示の背景 */
.bg-full-screen {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: black;
    z-index: 1000;
}

/* コマンドエリア */
.command-area .label {
    width: 45px;
    margin-right: 16px;
}
.command-area .commercial-name {
    width: 367px;
}

/* 動画切り出しモーダル */
.clip-modal {
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1;
}
    .clip-modal .clip-contents {
        width: 1436px;
        min-height: 800px;
        background: var(--bg-contents);

    }
        .clip-modal .clip-contents .button {
            width: 62px;
            height: 46px;
            background: var(--bg-contents);
            border: var(--border-navy-bold);
            color: var(--color-navy1);
        }
            .clip-modal .clip-contents .button.btn-selected {
                color: var(--color-white1);
                background: var(--color-navy1);
                border: 0.5px solid var(--color-black1);
                opacity: 1;
            }

        /* ヘッダー */
        .clip-modal .clip-contents .head {
            /*height: 88px;*/
            padding: 16px;
        }
            .clip-modal .clip-contents .head .label {
                width: 60px;
                /*margin-right: 16px;*/
            }
            .clip-modal .clip-contents .head .commercial-name {
                width: calc(100% - 60px);
                font-size: var(--font-size-main);
                color: var(--color-white1) !important;
                background: var(--color-navy1) !important;
                border: 0px;
                border-radius: 0px;
                padding-inline: 16px;
            }

        /* ボディ */
        .clip-modal .clip-contents .body {
            border-top: var(--border-main);
            border-bottom: var(--border-main);
            padding: 16px;
            user-select: none;
        }
            .clip-modal .clip-contents .body .clip-time {
                flex-wrap: wrap;
                column-gap: 4px;
                margin-bottom: 24px;
            }
            .clip-modal .clip-contents .body .clip-time .other-input {
                width: 62px;
                background: var(--color-white1);
                border: var(--border-navy-bold);
                text-align: center;
            }
                .clip-modal .clip-contents .body .clip-time .other-input.btn-selected {
                    color: var(--color-white1);
                    background: var(--color-navy1);

                }
                .clip-modal .clip-contents .body .clip-time .other-input:focus {
                    color: var(--color-navy1);
                    background: var(--color-white1);
                    text-align: right;
                }
            .clip-modal .clip-contents .body .select-area .clip-position-div {
                height: 220px;
            }
            .clip-modal .clip-contents .body .select-area ul {
                padding: 0px;
                column-gap: 12px;
            }
            .clip-modal .clip-contents .body .select-area ul li {
                flex-shrink: 0;
                list-style: none;
            }
            .clip-modal .clip-contents .body .select-area .clip-position {
                margin-top: 8px;
                margin-bottom: 0px;
            }
                .clip-modal .clip-contents .body .select-area .clip-position .clip-thumbnail-block {
                    width: 190px;
                    margin-bottom: 16px;
                }
                    .clip-modal .clip-contents .body .select-area .clip-position .clip-thumbnail-block .clip-thumbnail {
                        border: solid 4px transparent;
                    }
                    .clip-modal .clip-contents .body .select-area .clip-position .clip-thumbnail-block .clip-thumbnail.selected {
                        border-color: var(--color-navy1);
                    }
                    .clip-modal .clip-contents .body .select-area .clip-position .clip-thumbnail-block .time-label {
                        height: 28px;
                        opacity: 0.5;
                    }
                        .clip-modal .clip-contents .body .select-area .clip-position .clip-thumbnail-block .time-label.selected {
                            background: var(--color-navy1);
                            color: var(--color-white1);
                            opacity: 1;
                        }

        /* フッター */
        .clip-modal .clip-contents .foot {
            padding: 16px;
        }
            .clip-modal .clip-contents .foot .output-info {
                height: 64px;
            }
            .clip-modal .clip-contents .foot .output-info .block {
                width: 33%;
            }
            .clip-modal .clip-contents .foot .output-info .label {
                min-width: 155px;
                height:65px;
                color: var(--color-white1);
                background: var(--color-navy1);
                font-size: 46px;
                margin: 0px 16px;
                padding: 0px 16px;
            }
        .clip-modal .clip-contents .foot .foot-btn {
            height: 72px;
            column-gap: 16px;
        }
            .clip-modal .clip-contents .foot .foot-btn button {
                width: 152px;
                height: 54px;
                background: var(--color-navy1);
                color: var(--color-white1);
            }
                .clip-modal .clip-contents .foot .foot-btn button.cancel {
                    background: var(--color-white1);
                    color: var(--color-navy1);
                    border: var(--border-navy);
                }

    .clip-modal .clip-modal-label {
        width: 180px;
        height: 46px;
        line-height: 32px;
        text-align: center;
        background: var(--color-gray4);
    
    }
    .clip-modal .large-label {
        font-size: var(--font-size-large);
    }

    /* 拡大表示モーダル */
    .zoom-modal {
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.6);
        z-index: 1;
    }
    .zoom-modal .zoom-contents {
        background: var(--color-white1);
    }
        .zoom-modal .zoom-contents .head {
            height: 64px;
            padding: 16px;
        }
        /* ボディ */
        .zoom-modal .zoom-contents .body {
            padding: 16px 16px 0px 16px;
            user-select: none;
        }
            .zoom-modal .zoom-contents .body .zoom-image {
                width: 1200px;
                height: 675px;
            }

        /* フッター */
        .zoom-modal .zoom-contents .foot {
            /*padding: 16px;*/
            height: 55px;
        }
        .zoom-modal .zoom-contents .foot .label {
            font-size: 32px;
            font-weight: 500;
            color: var(--color-black1);
            opacity: 0.5;
        }