@charset "utf-8";

/* ↓外部プレーヤー：背景↓ */
#player_bg_outer {/* stylelint-disable-line */
    margin: 0 auto;
    width: 1024px;
}

#player_bg_inner {/* stylelint-disable-line */
    margin: 0 auto;
    padding: 8px 0;
    width: 1008px;
}

/* ↑外部プレーヤー：背景↑ */

/* ↓基本↓ */
.spplPickups ul {
    list-style: none;
}

/* ↑基本↑ */

/* ↓タブ(編集できるのは色くらいです)↓ */
.spplPickupsTab li {
    float: left;
    list-style: none;
}

.spplPickupsTab li a {
    border: solid #000;
    border-width: 2px 2px 0;
    display: block;
    font-size: 14px;
    line-height: 1;
    margin-right: 2px;
    padding: 8px 6px;
    text-decoration: none;
}

/* ↑タブ↑ */

/* ↓プレーヤー(左)↓ */
.spplPickupsContents {
    /* プレーヤー全体の大枠 */
    background: #000;
    height: 388px;
    overflow: hidden;
    padding: 2px;
}

.playerContainer {
    /* 再生画面の大枠 */
    border: 2px solid #000;
    float: left;
    height: 384px;
    position: relative;
    width: 672px;
}

.spplPickupsPlayer {
    /* 再生中の枠 */
    height: 384px;
    position: absolute;
    width: 672px;
}

.playImagesContainer {
    /* 再生前コンテンツイメージ */
    height: 384px;
    position: absolute;
    width: 672px;
}

.playImagesContainer .playImage.configured {
    /* ? */
    height: 384px;
    width: 672px;
}

.playImagesContainer .playImage.isNotSet {
    /* ? */
    height: 250px;
    left: 168px;
    position: absolute;
    top: 67px;
    width: 335px;
    z-index: 0;
}

.playImagesContainer #playLoading {/* stylelint-disable-line */
    /* 動画読込中 */
    height: 304px;
    position: absolute;
    width: 672px;
    z-index: 2;
}

.playImagesContainer #playLoadingCnt {/* stylelint-disable-line */
    /* 動画読込中 */
    background: url('../../img/special/player/bg_black_tp80.png');
    border-radius: 8px;
    height: 140px;
    margin: 80px auto;
    padding: 10px;
    width: 140px;
}

.playButtonContainer {
    bottom: 0;
    display: none;
    height: 64px;
    left: 0;
    position: absolute;
    width: 672px;
}

.playButtonContent {
    background: url('../../img/special/player/bg_black_tp60.png');
    height: 48px;
    overflow: hidden;
    padding: 8px;
    width: 656px;
}

.playButtonContent p#spplPickupsTitle {/* stylelint-disable-line */
    /* 動画タイトル */
    color: #fff;
    display: block;
    float: left;
    font-size: 20px;
    height: 48px;
    line-height: 24px;
    text-align: left;
}

.playButtonContent p#spplPickupsTitle.width_a {/* stylelint-disable-line */
    width: 576px;
}/* 再生ボタンあり */

.playButtonContent p#spplPickupsTitle.width_b {/* stylelint-disable-line */
    width: 656px;
}/* 再生ボタンなし */

.playButtonContent a#spplPickupsTitleLink {/* stylelint-disable-line */
    text-decoration: none !important;/* stylelint-disable-line */
}

.playButtonContent a#playButton {/* stylelint-disable-line */
    /* 再生ボタン */
    background: url('../../img/special/player/btn_play.png') no-repeat;
    display: block;
    float: right;
    height: 48px;
    width: 72px;
}

.playButtonContent a#playButton:hover {/* stylelint-disable-line */
    background-position: 0 -48px;
}

/* ↑プレーヤー(左)↑ */

/* ↓プレーヤー(右)↓ */
.playerNavs {
    /* 一覧表示枠( playerNav"s" に注意 ) */
    background: #000;
    border: solid 1px;
    border-color: #6f6f66 #9f9f96 #cfcfc6;
    float: right;
    height: 384px;
    overflow: hidden;
    padding: 1px;
    width: 324px;
}

.playerNav {
    /* 一覧(スクロールする側) */
    background: #1f1f19;
    display: none;
    height: 386px;
    overflow: hidden;
    position: relative;
}

.playerNav.active {
    display: block;
}

.playerNav ul {
    left: 0;
    position: absolute;
    top: 32px;
    width: 100%;
}

.playerNav ul.noScroll {
    position: static;
}/* 件数が少ない時 */

.playerNav li {
    /* 通常 */
    background: #5f5f59;
    border-bottom: 1px solid #2f2f29;
    border-top: 1px solid #8f8f89;
    clear: both;
    color: #fff;
    cursor: pointer;
    padding: 6px;
    position: relative;
    text-align: left;
}

.playerNav li:hover {
    background: #6f6f69;
    border-color: #9f9f99 #000 #3f3f39;
}/* マウスオン */
.playerNav li.selected {
    background: #4f4f49;
    border-color: #3f3f39 #000 #5f5f59;
}/* 選択 */

.playerNav li.video {
    height: 50px;
}/* 動画 */
.playerNav li.live {
    height: 66px;
}/* 生放送 */

.playerNav li p.image {
    float: left;
    margin-right: 6px;
    width: 68px;
}

.playerNav li p.image img {
    border: solid 1px #fff;
    box-shadow: 0 1px 2px #0f0f06;
}

.playerNav li.video p.image img {
    height: 48px;
    width: 64px;
}

.playerNav li.live p.image img {
    height: 64px;
    width: 64px;
}

.playerNav li div.detail {
    float: left;
    width: 236px;
}

.playerNav li.video div.detail {
    height: 50px;
    overflow: hidden;
}

.playerNav li.live div.detail {
    height: 66px;
    overflow: hidden;
}

.playerNav li.video p.title {
    font-size: 12px;
    line-height: 16px;
    text-shadow: 0 1px 1px #000;
}

.playerNav li.live p.title {
    font-size: 14px;
    line-height: 17px;
    text-shadow: 0 1px 1px #000;
}

.playerNav li.live p.date {
    font-size: 12px;
    line-height: 1;
    margin-bottom: 4px;
    text-shadow: 0 1px 1px #000;
}

.playerNav li span.alert,
.playerNav li a.more {
    /* 強調・誘導 */
    border: solid 1px #fff;
    box-shadow: 0 1px 2px #000;
    display: block;
    line-height: 1;
    padding: 3px;
    position: absolute;
    z-index: 2;
}

.playerNav li span.alert {
    /* 強調 */
    background: #c00;
    font-size: 10px;
    height: 10px;
    left: 4px;
    top: 4px;
}

.playerNav li a.more {
    /* 誘導 */
    background: #2f2f29;
    bottom: 4px;
    color: #fff !important;/* stylelint-disable-line */
    display: none;
    font-size: 12px;
    height: 12px;
    right: 4px;
    text-decoration: none !important;/* stylelint-disable-line */
}

.playerNav li a.more:hover {
    background: #090f0f;
}

.playerNav li:hover a.more,
.playerNav li.selected a.more {
    display: block;
}

.playerNav .playerNavBtn {
    /* 上下スライダ */
    background: url('../../img/special/player/slider_btn.png?2013-07-01');
    display: block;
    height: 32px;
    position: absolute;
    width: 338px;
}

.playerNav .playerNavBtn.prev {
    background-position: 0 0;
    border-bottom: solid 1px #000;
    top: 0;
}/* ↑(上) */
.playerNav .playerNavBtn.next {
    background-position: 0 -32px;
    border-top: solid 1px #000;
    bottom: 0;
}/* ↓(下) */
.playerNav .playerNavBtn.prev:hover {
    background-position: -338px 0;
}

.playerNav .playerNavBtn.next:hover {
    background-position: -338px -32px;
}

/* ↑プレーヤー(右)↑ */

/* ↓動画・生放送 情報テンプレ↓ */

/* 生放送再生前：バナー画像未設定 */
.layout_default.spplContentsInfoContainer {
    background: #333 url('../../img/special/player/live_main_bg.png?2') no-repeat bottom right;
    height: 384px;
    position: relative;
    width: 672px;
}

.layout_default .spplContentsInfo {
    padding: 24px;
    position: relative;
    z-index: 10;
}

.layout_default .spplContentsInfo::after {
    clear: both;
    content: '';
    display: block;
}

.layout_default .spplContentsInfo .image {
    float: left;
    text-align: center;
    width: 200px;
}

.layout_default .spplContentsInfo .image img {
    background: #000;
    border: solid 2px #fff;
    box-shadow: 0 2px 4px #222;
    max-width: 192px;
    overflow: hidden;
    padding: 1px;
}

.layout_default .spplContentsInfo .details {
    float: right;
    margin-left: 16px;
    width: 408px;
}

.layout_default .spplContentsInfo .title {
    /* 生放送タイトル */
    margin-bottom: 8px;
    text-shadow: 0 1px 4px #111;
}

.layout_default .spplContentsInfo .title a {
    color: #3cf !important;/* stylelint-disable-line */
    font-size: 20px;
    font-weight: bold;
    line-height: 24px;
}

.layout_default .spplContentsInfo .status {
    color: #fc0;
    font-size: 14px;
    font-weight: bold;
    margin: 0 0 8px;
}

.layout_default .spplContentsInfo .status span {
    font-size: 20px;
}

.layout_default .spplContentsInfo .description {
    /* 説明文 */
    color: #ddd;
    font-size: 12px;
    line-height: 1.5;
    margin: 0 0 16px;
}

.layout_default .spplContentsInfo .button a {
    /* 詳細を見る */
    background: url('../../img/special/player/live_main_btn.png') repeat-x;
    border: solid 1px;
    border-color: #fff #ccc #999;
    border-radius: 4px;
    box-shadow: 0 1px 4px #000;
    color: #fff !important;/* stylelint-disable-line */
    display: block;
    font-size: 16px;
    height: 16px;
    line-height: 1;
    padding: 8px;
    text-align: center;
    text-decoration: none !important;/* stylelint-disable-line */
    text-shadow: 0 1px 2px #000;
    width: 240px;
}

.layout_default .spplContentsInfo .button a:hover {
    background-position: 0 -32px;
}

.layout_default .spplContentsInfo .button a:active {
    padding: 10px 8px 6px;
}

/* 生放送再生前：大バナー設定時 */

.layout_bnr_full.spplContentsInfoContainer {
    background: #333;
    height: 384px;
    position: relative;
    width: 672px;
}

.layout_bnr_full .spplContentsInfo {
    position: relative;
}

.layout_bnr_full .spplContentsInfo .image img {
    height: 384px;
    width: 672px;
}

.layout_bnr_full .spplContentsInfo .details {
    display: none;
}

/* ↑動画・生放送 情報テンプレ↑ */