@charset "utf-8";
/* CSS Document */


/********* table *********/
table.ranking {
    width:100%;
    border-collapse: collapse;
    background-color:#fff;
}
table.ranking tr td {
    border:1px solid #916207;
    padding:0px;
}

table.ranking tr th {
    border:1px solid #916207;
    padding:3px;
    background-color:#a06a01;
    color:#FFF;
    text-align:center;
}
table.ranking tr td {
    text-align:center;
}
table.ranking tr td.rig {
    text-align:right;
}
table.ranking tr td.lef,
table.ranking tr td.horse {
    text-align:left;
}

.ranking tr .photo {
    padding:0 !important;
    margin:0 !important;
    border:none !important;
    width:100px;
    height:100px;
}


/********* 開く *********/

.grad-wrap {
  position: relative;
  margin-bottom: 30px;
}
.grad-btn {
  z-index: 2;
  position: absolute;
  right: 0;
  bottom: -40px;
  left: 0;
  width: 148px;
  margin: auto;
  padding: .3em 0;
  border-radius: 2px;
  background: #b47700;
  color: #fff;
  font-size: 16px;
  text-align: center;
  cursor: pointer;
  transition: .2s ease;
  box-shadow: 0 0 3px rgba(0,0,0,.3);
  /*デモ用の一例です。.grad-btnのCSSは表示/非表示の動作には関係ないので、ご自由にどうぞ。*/
}
.grad-btn::before {
  content: "開く"
}
.grad-item {
  position: relative;
  overflow: hidden;
  height: 240px; /*隠した状態の高さ*/
}
.grad-item::before {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80px; /*グラデーションで隠す高さ*/
  background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.9) 50%, #fff 100%);
  background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.9) 50%, #fff 100%);
  content: "";
}
.grad-trigger {
  display: none; /*チェックボックスは常に非表示*/
}
.grad-trigger:checked ~ .grad-btn::before {
  content: "閉じる" /*チェックされていたら、文言を変更する*/
}
.grad-trigger:checked ~ .grad-item {
  height: auto; /*チェックされていたら、高さを戻す*/
}
.grad-trigger:checked ~ .grad-item::before {
  display: none; /*チェックされていたら、grad-itemのbeforeを非表示にする*/
}

/********* SP Table *********/



.scroll {
  overflow: auto;　　　　/*tableをスクロールさせる*/
  overflow-y:hidden;
  white-space: nowrap;　　/*tableのセル内にある文字の折り返しを禁止*/
}
.scroll::-webkit-scrollbar {　　/*tableにスクロールバーを追加*/
  height: 5px;
}
.scroll::-webkit-scrollbar-track {　　/*tableにスクロールバーを追加*/
  background: #F1F1F1;
}
.scroll::-webkit-scrollbar-thumb {　　/*tableにスクロールバーを追加*/
  background: #BCBCBC;
}

//-->
</style>

<style type="text/css">
<!--

.tbl-scroll table {
	margin-bottom: .5em;
}
.tbl-scroll {
	overflow: auto;
	margin-bottom: 2em;
}
.tbl-scroll::-webkit-scrollbar {
 height: 15px;
}
.tbl-scroll::-webkit-scrollbar-track {
 background: #f1f1f1;
}
.tbl-scroll::-webkit-scrollbar-thumb {
 background: #bcbcbc;
}
.tbl {
	width: 100%;
	background: #fff;
}
.tbl {
	font-size: 16px;
	margin: 0 0 10px;
	border-collapse: collapse;
	border: 1px solid #ccc;
}
.tbl th {
	font-weight: bold;
	padding: 5px;
	text-align: center;
	color: #222;
	border: 1px solid #ccc;
	background: #e5e5e5;
}
.tbl td {
	padding: 5px;
	border: 1px solid #ccc;
	background: none;
}
.tbl td {
	vertical-align: middle !important;
}
.tbl tr:nth-child(odd) {
 background: #fafafa;
}
td.tdC {
	text-align: center;
}


/********* MV *********/

/*
.mvpc {
    width: 260px !important;
}
.mvpc img {
    width: 260px !important;
}
*/

/********* Table background-color *********/

.tdbgc {
    background-color:#f9e8e8 !important;
}