/*
 パ・リーグTV 当日のライブ表示枠定義CSS

MMNMMNMMNMMNMMNMMNMMNMMNMMNMMNMMNMMNMMNMMNMMNMMNMM
MMMNMMMNMMMMNMMMNMMMMNMMMNMMMMNMMMNMMMMNMMMNMMMMNM
MMMMMMMMMMNMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMNMMM
MNMMNMNMMNMMMNMMMF     .MMMN     ,MMB'   .TMMNMMMM
MMMNMMMMMMMMMMNMM!     -MMMM     .MF  .Np  MMMMMNM
MMMMMMNMMNMMNMMMF      MMMMM_     Mb  ?"' .MMMMMMM
MMNMMMMNMMMMMMMM>     .MMMNM)     MMN,....MMMNMMMM
MMMNMMMMMMNMMNM#      dMMMMN]     dMMMMMMMMMNMMNMM
MMMMNMMNMMMMNMM%     .MMNMMMF     JMMMMMMMMMMMMMNM
MNMMMMMMNMMMMM#      dMMMMNMb     -MMNMNMNMNMMNMMM
MMMNMMNMMMNMMM]     .MMMMMMM#     ,MMMMMMMMMMMMMMM
MMMMMNMMMMMMNB      (MMNMNMMN     .MMNMMNMMNMMNMMN
MMNMMMMMNMF        .MMMMMMMMM      MMMMMMMMMNMMMMM
MMMNMMMMMM`       .dMMMMNMMNM_     MMMNMMNMMMMMNMM
MMMMMNMMMF      ..MMMMNMMMMMM)     dMMMMNMMNMMNMMM
MNMMMMNMMMMMNMMMMMMMMMMMMNMMNNNNNNNMMMMMMMMMMMMMMN
MMNMMMMMMMMMMMMMMMMNMMNMMMNMMMMMMMMMMNMMNMMNMMNMMM
MMMMNMMNMMNMMMMMMMMMNMMMNMMMMMNMMMMMMMMMMMMMNMMMMM
*/

/* 全項目共通定義 */
html, body {
    font-family: Helvetica Neue,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo","ＭＳ Ｐゴシック","MS P Gothic","Osaka",Helvetica,Arial,Verdana,sans-serif;
}
body {
    width: 100%;
    min-width: 1190px;
    height: 600px;
    min-height: 600px;
    margin: 0;
    padding: 0;
}
ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* 当日のライブ配信 枠 */
.container-todaysLive {
    display: block;
    width: 100%;
    height: 100%;
    /* 背景画像はとりあえずデフォルトで「試合なし」のものにする    */
     background: url("//imgtv.pacificleague.jp/pc/img/ptv2017/common/bg_top_none_20170327.jpg"), no-repeat;
    /* background: url("//imgtv.pacificleague.jp/pc/img/ptv2017/common/bg_top_none_201811.jpg"), no-repeat; */
    background-position: center;
    background-size: cover;
    white-space: nowrap;
    color: white;
    transition: 0.5s;
}


.container-todaysLiveBg {
    width: 100%;
    height: 100%;
    background: url("//imgtv.pacificleague.jp/pc/img/ptv2017/common/bg_pattern.png"), repeat;
}

/* ラベル部分 */
/* ラベル部分 枠 */
.todayLive_title {
    position: relative;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 15%;
}
h2#todaysLive-title {
    display: inline-block;
    font-family: Oswald;
    font-size: 60px;
    font-weight: normal;
    margin: 0 0 0 20px;
    color: white;
    background-image: none;
    background-color: rgba(0,0,0,0); /* 背景色を削除し、透明にする */
}
h3#todaysLive-title2 {
    display: inline-block;
    font-size: 20px;
    font-weight: 800;
    margin: 0 0 0 20px;
    color: white;
}

/* 試合情報(左部分) START ================== */
/* 左部分 大枠div */
.todaysLive_liveInfo {
    display: inline-block;
    position: relative;
    height: 100%;
    text-align: left;
    vertical-align: top;
    /*background-color: gray;*/
    float: left;
}
/* ライブのある場合は一覧表示領域用に幅を制限 */
.todaysLive_liveInfo_live {
    width: 70%;
}
/* ライブなしの場合は幅を最大で利用 */
.todaysLive_liveInfo_noLive {
    width: 100%;
}

.todaysLive_info_area {
    width: 100%;
    height: 85%;
}

/* 試合ありの場合 */
div.liveArea {
    position: relative;
    display: table;
    /*top: 0;*/
    /*bottom: 0;*/
    width: 50%;
    height: 100%;
    margin: auto;
    padding: 0 0 0 0;
}
div.liveArea_inner {
    /*position: absolute;*/
    display: table-cell;
    vertical-align: middle;
}
/* 試合の対戦カード */
ul.liveData {
    position: relative;
    margin: auto;
    padding: 0;
    list-style-type: none;
    width: 100%;
    max-width: 530px;
    height: auto;
    text-align: center;
    /*background-color: red;*/
    color: white;
}

/* 対戦カード詳細表示部分 START ============== */
li.live-homeData 
, li.live-visitorData {
    width: 30%;
    height: auto;
    vertical-align: middle;
    display: inline-block;
}
li.live-teamName {
    white-space: normal;
    font-size: 14px;
    font-weight: bold;
    margin-top: 5px;
    margin-bottom: 5px;
}

li.live-statusData {
    width: 30%;
    height: auto;
    display: inline-block;
    position: relative;
}

.game-status {
    width: 100px;
    height: 24px;
    line-height: 24px;
    font-size: 14px;
    font-weight: bold;
    margin: 0 auto;
}
.live_inning_Info_pre {
    color: black;
    background-color: white;
}
.live_inning_Info_onLive {
    color: white;
    background-color: red;
}
.live_inning_Info_post {
    color: white;
    background-color: black;
}
.live_inning_Info_stop {
    color: black;
    background-color: white;
}

.game-stadium_name {
    margin: 10px 0;
}

.game-score {
    line-height: 60px;
    font-size: 48px;
    font-weight: normal;
    font-family: Oswald;
}
.game-score > .gameStatus_vs {
    width: 48px;
    height: 48px;
    line-height: 60px;
}

ul.live-homeTeam 
, ul.live-status 
, ul.live-visitorTeam {
    width: 100%;
    height: auto;
    line-height: 100%;
    display: inline-block;
    vertical-align: middle;
}
/* 対戦カード詳細表示部分 END ================ */
/* イベント詳細表示部分 START ================ */
ul.live-eventInfo {
    height: 100%;
}
li.live-title {
    font-size: 38px;
    font-weight: bold;
}
li.live-liveDate {
    font-size: 48px;
    font-weight: normal;
    font-family: Oswald;
}
li.live-eventName {
    font-size: 20pt;
    font-weight: bold;
}

/* イベント詳細表示部分 END ================ */
/* ライブのサムネイル */
.liveThumbnail {
    display: block;
    position: relative;
    text-align: center;
    margin: 50px auto;
    padding: 0;
    /*height: 105px;*/
}
/* ライブのサムネイルの画像生成される部分 */
.liveThum_liveLink_img {
    width: 240px;
    height: 135px;
    position: relative;
    margin: auto;
}
.liveThum_liveLink_a figure {
    margin: 0;
    padding: 0;
    position: relative;
    height: 100%;
}
/* ライブのサムネイルのaタグ部分の定義 */
.liveThum_liveLink_a {
    height: 100%;
    line-height: 100%;
    width: 100%;
    display: inline-block;
}
/* ライブのサムネイルのリンク無効定義 */
.liveThum_liveLink_linkNone {
    pointer-events: none;
}
/* サムネイルのホバー時動作など */
.liveThum_postLive {
    opacity: 0.4;
    filter: opacity(40);
    -ms-filter: "alpha (opacity=40) ";
}
.liveThum_onLive {
    opacity: 1;
}

/* 試合のライブサムネイル */
.liveThum_game_img {
    width: 240px;
    height: 135px;
    position: absolute;
    top: 0;
    left: 0;
    border-style: none; /* IE9でリンクの線が表示されてしまう問題への対応 */
}
/* イベントのライブサムネイル */
.liveThum_event_img {
    width: 240px;
    height: 135px;
    margin: auto;
    left: 0;
    right: 0;
    border-style: none; /* IE9でリンクの線が表示されてしまう問題への対応 */
}
/* サムネイル鍵アイコン */
.liveThum_lock {
    position: absolute;
    width: 36px;
    height: 36px;
    right: 0;
    border-style: none; /* IE9でリンクの線が表示されてしまう問題への対応 */
}
/* サムネイル再生アイコン */
.liveThum_play {
    position: absolute;
    width: 48px;
    height: 48px;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    border-style: none; /* IE9でリンクの線が表示されてしまう問題への対応 */
}
/* ホバー時の白のレイヤ */
.liveThum_white_layer {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: rgba(255, 255, 255, 0);
}
.liveThum_liveLink_a:hover > figure > .liveThum_white_layer {
    border: solid 2px white;
    background-color: rgba(255, 255, 255, 0.2);
}

/* ダイジェスト・イニングへのリンク */
.liveThum_link_area {
    display: table;
    border-spacing: 3px;
    vertical-align: middle;
    text-align: center;
    /* width: 300px; */
    margin: 20px auto;
}
.liveThum_link {
    display: table-cell;
    position: relative;
    width: 100px;
    margin: auto;
    border: 1px solid;
    vertical-align: middle;
    color: white;
    text-decoration: none;
    font-size: 16px;
}
.liveThum_link a:link {
    display: block;
    color: white;
    text-decoration: none;
}
.liveThum_link a:visited {
    color: white;
    text-decoration: none;
}
.liveThum_link:hover {
    opacity: 0.6;
}
.lock_img a:before {
    content: '';
    background-image: url("//imgtv.pacificleague.jp/pc/img/ptv2017/common/ic_lock.png");
    background-size: 36px;
    position: absolute;
    width: 36px;
    height: 36px;
    top: 0;
    right: 0;
    border-style: none;
}
.liveThum_img {
    width: 40px;
    height: 40px;
    border-style: none;
}


/* 試合なしの場合 */
div.todayLive_noLive {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 140px;
    margin: auto;
    text-align: center;
    font-size: 18px;
}
/* 試合なしの時のPICK UP VIDO */
.todayLive_pickUpVideo {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 50%;
    max-height: 250px;
    background-color: rgba(255, 255, 255, 0.5);
}

/* PICK UP VIDEOのタイトル部分 START ======= */
.todayLice_pickUp_title {
    margin: 0;
    padding: 0;
    width: 100%;
}
h2#todayLive_pickUp_title_t1 {
    display: inline-block;
    font-family: Oswald;
    font-size: 38px;
    font-weight: normal;
    margin: 0 0 0 20px;
    color: white;
}
h1#todayLive_pickUp_title_t2 {
    display: inline-block;
    font-size: 18px;
    font-weight: bold;
    margin: 0 0 0 20px;
    color: white;
}
/* PICK UP VIDEOのタイトル部分 END ========= */

/* 試合情報(左部分) END ==================== */

/* 試合情報(右部分) START ==================== */
.todaysLive_liveList {
    display: table;
    position: relative;
    height: 100%;
    width: 30%;
    text-align: left;
    background-color: rgba(0, 0, 0, 0.4);
    float: left;
    /*overflow-y: auto;*/
}
.liveList_row {
    display: table-row;
}
#liveList_content {
    display: table-cell;
    position: relative;
    margin: auto;
    vertical-align: middle;
    /*top: 50%;*/
    /*transform: translateY(-50%);*/
    height: 90%;
}
#liveList_spLogo {
    display: table-row;
    height: 10%;
}
#liveList_spLogo img {
    border-style: none;
    width: 100%;
    max-width: 360px;
}
/* 試合がない場合 */
#liveList_spLogo_noLive {
    position: absolute;
    bottom: 0;
    right: 0;
    height: auto;
}
#liveList_spLogo_noLive img {
    border-style: none;
    width: 100%;
    max-width: 360px;
}

/* ライブの種別選択のタブの部分の共通定義 */
.liveList_tab {
    margin: 5% 0 5% 0;
}
.liveList_tab > ul {
    width: 100%;
    display: table;
    table-layout: fixed;
    text-align: center;
    padding-bottom: 5px;
}

/* タブ部分(選択していないとき) */
.leagueFilter {
    display: table-cell;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    color: white;
    border-bottom: solid  white 1px;
    opacity: 0.4;
}
/* タブ部分、選択時の強調表示(選択時にはこのクラスを追加する) */
.leagueFilterActive {
    border-bottom: solid white 4px;
    opacity: 1;
}

/* タブ部分のaタグの文字色等を指定 */
.leagueFilter > a {
    color: white;
    display: block;
    width: 100%;
    text-decoration: none;
    cursor: pointer;
}
.leagueFilter > a:hover {
    text-decoration: none;
}

/* 試合リストの試合ごとの表示の定義 == START */
.liveList_content {
    height: 50px;
    line-height: 50px;
    position: relative;
    cursor: pointer;    /* カーソルを「指」にする */
    border-top: solid 1px;
}
.liveList_content:nth-child(1) {
    border-top: none;   /* 最初の行の線は削除する */
}

.liveList_content > .liveList_cell {
    display: table;
    vertical-align: middle;
    width: 100%;
}

.liveList_homeT
, .liveList_visitorT {
    width: 40%;
    font-size: 12px;
    font-weight: bold;
    display: table-cell;
}
.liveList_homeT {
    text-align: left;
    padding-left: 10px;
}
.liveList_visitorT {
    text-align: right;
    padding-right: 10px;
}
/* 試合状況のテキスト指定 */
.liveList_liveStatus {
    font-family: Oswald;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
}

/* チームロゴのサイズ調整 */
.liveList_homeT > img 
, .liveList_visitorT > img {
    width: 24px;
    height: 24px;
    padding-left: 5px;
    padding-right: 5px;
    vertical-align: middle;
}

/* 試合選択状況保持用のチェックボックスレイアウト指定 */
.rad_selectGame {
    display: none;
}
/* ライブを選択した場合の背景色変更 */
.rad_selectGame:checked ~ .liveList_cell {
    background-color: black;
    opacity: 1;
}
/* ライブを選択していない時 */
.rad_selectGame ~ .liveList_cell {
    opacity: 0.6;
}
/* 選択しているライブに対しての矢印アイコンの表示・非表示 */
/* 通常時は非表示にしておく（画像サイズや場所は設定しておく） */
.rad_selectGame ~ .liveList_selectedIcon {
    display: none;
    width: 8px;
    height: 16px;
}

/* ライブが選択されているとき */
.rad_selectGame:checked ~ .liveList_selectedIcon {
    display: block;
    position: absolute;
    top: 50%;
    bottom: 50%;
    right: -8px;  /* リストの外に定義するためマイナス */
    /* 位置を上下の中央にするための対処→これで高さに関係なくできる */
    margin-top: auto;
    margin-bottom: auto;
}

/* 試合リストの試合ごとの表示の定義 == END */

/* イベントの表示部分 */
/* イベント内容の大枠の部分 */
.liveList_eventContent {
    position: relative;
}

.liveList_eventContent > .liveList_cell {
    padding: 10px;
    cursor: pointer;    /* カーソルを「指」にする */
}
/* イベントのタブとなる部分のaタグのリンクを無効にしておく */
#liveList_tab_event_title {
    pointer-events: none;
}

/* イベント自体の表示のサイズ定義 event1 (大きい表示) */
.liveList_event1 {
    width: 100%;
    height: 80px;
    margin: 0;
    /*background-color: #99001a;*/
}

/* イベントの時間等情報表示 event1 (大きい表示) */
.liveList_event1 > .event1_live {
    height: 100%;
    width: 100%;
    display: table-cell;
    vertical-align: top;
}
.liveList_event1 > .event1_live > .event1_liveName {
    position: relative;
    margin: 0;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.2);
    overflow: hidden;
}
.liveList_event1 > .event1_live > .event1_liveName:after {
    content: "";
    white-space: nowrap;
    display: inline-block;
}

.liveList_event1 > .event1_live > .event1_liveName > .event1_liveName_span {
    position: absolute;
    top: 0;
    white-space: nowrap;
    animation-name: marquee;
    animation-timing-function: linear;
    animation-duration: 20s;
    animation-iteration-count: infinite;
}
.liveList_event1 > .event1_live > .event1_liveName > .event1_liveName_span:hover {
    animation-play-state: paused;
    cursor: default;
}
@keyframes marquee {
    0% { left: 100%; transform: translate(0); }
    100% { left: 0; transform: translate(-100%); }
}

.liveList_event1 > .event1_live > .event1_liveTime {
    margin: 0;
    /*height: 80px;*/
    /*line-height: 80px;*/
    /*background-color: rgba(0, 0, 0, 0.2);*/
    text-align: center;
    font-family: Oswald;
    font-size: 24px;
}
.liveList_event1 > .event1_live > .event1_eventName {
    text-align: center;
    line-height: 44px;
    vertical-align: middle;
    /*background-color: #99001a;*/
    font-weight: bold;
    font-size: 12px;
}

/* サムネイルのサイズの調整 */
.event1_thum {
    margin: 0;
    display: table-cell;
}
.event1_thum > img {
    width: auto;
    height: 80px;
}

/* イベント自体の表示のサイズ定義 event2 (小さい表示) */
.liveList_event2 {
    width: 100%;
    height: 36px;
    line-height: 36px;
    margin: 0;
    display: inline-flex;
    justify-content: flex-start;
    background-color: #1873b9;
    text-align: center;
    vertical-align: middle;
}
.liveList_event2 > .event2_liveTime {
    height: 100%;
    width: 100px;
    background-color: rgba(0, 0, 0, 0.2);
    font-family: Oswald;
    font-size: 14px;
}

.liveList_event2 > .event2_eventName {
    font-size: 12px;
    font-weight: bold;
    padding: 0 10px 0 10px;
}

/* 試合情報(右部分) END ==================== */