/* ----------------------------------------------------------------------
	
	出走馬レーティング
	
---------------------------------------------------------------------- */


#rating { margin-top: 30px; }

#rating .content { margin-top: 30px; }

div.update_area {
    max-width: 940px;
    margin-bottom: 15px;
    border-bottom: 1px solid #CCC;
    padding-bottom: 5px;
}

div.update_area > p { font-size: 1.3rem; }

.content p {
	line-height: 1.6;
	font-size: 1.4rem;
}


p.signature {
	text-align: right;
	max-width: 940px;
}

p.sp_line { display:none; }


div.column_block > h2.lv6 {
	font-size: 1.8rem;
	line-height: 1.4;
	font-weight: bold;
	color: #0c6194;
}


div.rating_block { margin-top: 30px; }
div.rating_block.upper { margin-top: 20px; }

div.rating_block > h2,
div.rating_block > h3 {
	font-weight: bold;
	font-size: 1.6rem;
	margin-bottom: 0.5em;
}

div.rating_block > div.inner {
	display: table;
	width: 100%;
	table-layout: fixed;
}

div.rating_block > div.inner > div { display: table-cell; }
div.rating_block > div.inner > div.left { padding-right: 10px; }
div.rating_block > div.inner > div.right { padding-left: 10px; }




table.rating,
table.other_horse {
	width:100%;
	border-collapse:collapse;
	line-height: 1.6;
	font-size: 1.4rem;
    position: relative;
}

table.rating caption {
	text-align:left;
	/*margin-bottom:5px;*/
	font-size: 1.6rem;
	font-weight:bold;
	
	/*display: none;*/
    position: absolute;
    left: -999999px;
    font-size: 1rem;
}

table.rating thead tr,
table.basic.other_horse thead > tr > th {
	background-color:#333;
	color:#FFF;
	text-align:center;
}

table.rating thead tr th {
	padding:6px;
	border:1px solid #DBDBDB;
	font-weight:bold;
	vertical-align:middle;
}

table.rating thead tr th.rank { width:60px; }

table.rating tbody tr {  }

table.rating tbody tr th,
table.other_horse tbody tr th {
	border:1px solid #DBDBDB;
	padding:6px;
	font-weight:bold;
	background-color:#f3f9fc;
	vertical-align:middle;
	padding: 6px 4px;
}

/*table.rating tbody tr th span {
	display:block;
	font-size:1.0rem;
}*/

table.rating tbody tr td {
	border:1px solid #DBDBDB;
	padding:6px;
	text-align:center;
	vertical-align:middle;
}


table.rating tbody tr td.bikou { font-size: 1.2rem; }/* --- 牝馬（備考）用 --- */


table.rating tbody tr td.horse {

}

table.rating tbody tr td.horse span,
table.other_horse tbody tr td.horse span {
	display:block;
	font-size: 1.2rem;
}

table.rating tbody tr td.horse span.cancel {
	font-size: 1.3rem;
	font-weight:bold;
	color:#c00;
	margin-top:5px;
}

strong.cancel { color:#c00; }

table.rating tbody tr.even > td { background-color:#F3F3F3; }
table.rating tbody tr.even > td.line_f { background-color:#FFF; }



/* --- 備考リスト --- */
ul.annotation { }
ul.annotation > li {
	display: table;
	font-size: 1.2rem;
	line-height: 1.4;
	margin-top: 4px;
}

ul.annotation > li.cancel {
	font-size:1.3rem;
	font-weight:bold;
	color:#c00;
	
}

ul.annotation > li:first-child { margin-top: 0; }
ul.annotation > li > span { display: table-cell; }
ul.annotation > li > span:first-child { white-space: nowrap; }




/* - グラフ
------------------------------------------------------------ */
div.rating_block > div.inner > div { vertical-align: top; }

div.rating_block > div.inner > div.right div.graph_area > h2,
div.rating_block > div.inner > div.right div.graph_area > h3,
div.rating_block > div.inner > div.right div.graph_area > h4 {
	padding: 10px;
	background-color: #333;
	color: #fff;
	font-weight: bold;
	font-size: 1.3rem;
	line-height: 1.3;
}

#graph_block { position: relative; }


#graph_block div.bg {
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: -1;
	overflow: hidden;
}

#graph_block div.bg div.line {
	border-left: 1px dotted #ccc;
	border-left: 1px dotted #ddd;
	width: 1px;
	height: 100%;
	position: absolute;
	left: 75%;
	display: block;
}

#graph_block div.bg div.line.pos75 { left: 75%; }
#graph_block div.bg div.line.pos50 { left: 50%; }
#graph_block div.bg div.line.pos25 { left: 25%; }


div.barchart {
  width: 100%;
  margin: 0 auto;
  border: solid 1px #ddd;  
  padding: 0;
  overflow: hidden;
}


div.barchart > ul.bars {  }

div.barchart > ul.bars > li {
	border: 1px solid #ddd;
	border-left: none;
	box-sizing: border-box;
	height: auto;
	border-radius: 0 4px 4px 0;
	background: #fff;
	text-align: right;
	margin: 12px 0;
	line-height: 1;
	opacity: 0;
}

.android4u div.barchart > ul.bars > li { opacity: 1; }


div.barchart > ul.bars > li.on {
	opacity: 1;
	
	-moz-animation: graphbar 1.2s 1 cubic-bezier(.175, .885,.32,1.275);
	-webkit-animation: graphbar 1.2s 1 cubic-bezier(.175, .885,.32,1.275);
	animation: graphbar 1.2s 1 cubic-bezier(.175, .885,.32,1.275);
}

div.barchart > ul.bars > li div.inner {
	padding: 5px;
	line-height: 1;
	height: auto;
	box-sizing: border-box;
	font-size: 0;
	position: relative;
}

div.barchart > ul.bars > li div.inner > span.allowance {
	background-color: #c00;
	border-radius: 0 3px 3px 0;
	position: absolute;
	right: 0;
	top: 0;
	height: 100%;
	width: auto;
	z-index: 1;
}

div.barchart > ul.bars > li div.inner > div.inner_line {
	position: relative;
	z-index: 10;
}

div.barchart > ul.bars > li div.inner > div.inner_line > div.name_line {
	display: table;
	width: 100%;
}

div.barchart > ul.bars > li div.inner > div.inner_line > div.name_line > div.cell {
	display: table-cell;
	text-align: left;
	vertical-align: middle;
}

div.barchart > ul.bars > li div.inner > div.inner_line > div.name_line > div.cell.name {
	text-align: left;
}

div.barchart > ul.bars > li div.inner > div.inner_line > div.name_line > div.cell.rate {
	text-align: right;
}


div.barchart > ul.bars > li div.inner > div.inner_line > div.name_line > div.cell.name > p {
	font-size: 1.2rem;
	font-weight:bold;
	padding: 4px 8px;
	background-color: rgba(255,255,255,0.8);
	border-radius: 3px;
	
	color: #444;
	border: 1px solid #ddd;
	box-sizing: border-box;
	
	overflow: hidden;
	white-space: nowrap;
	box-sizing: border-box;
	
	display: inline-block;
	opacity: 0;
	
	position: relative;
	z-index: 10;
}


.android4u div.barchart > ul.bars > li div.inner > div.inner_line > div.name_line > div.cell.name > p { opacity: 1; }


div.barchart > ul.bars > li div.inner > div.inner_line > div.name_line > div.cell.name > p.on {
	opacity: 1;
	-moz-animation: graphcap 0.4s 1 cubic-bezier(.645,.045,.355,1);
	-webkit-animation: graphcap 0.4s 1 cubic-bezier(.645,.045,.355,1);
	animation: graphcap 0.4s 1 cubic-bezier(.645,.045,.355,1);
}


div.barchart > ul.bars > li div.inner > div.inner_line > div.name_line > div.cell.rate > p {
	display: inline-block;
	padding: 4px 5px;
	font-size: 1.1rem;
	font-weight:bold;
	color: #fff;
	border-radius: 3px;
	line-height: 1;
	background-color: #555;
	border: 1px solid #ddd;
	opacity: 0;
}


.android4u div.barchart > ul.bars > li div.inner > div.inner_line > div.name_line > div.cell.rate > p { opacity: 1; }


div.barchart > ul.bars > li div.inner > div.inner_line > div.name_line > div.cell.rate > p.on {
	opacity: 1;
	-moz-animation: graphcapnum 0.6s 1 cubic-bezier(.645,.045,.355,1);
	-webkit-animation: graphcapnum 0.6s 1 cubic-bezier(.645,.045,.355,1);
	animation: graphcapnum 0.6s 1 cubic-bezier(.645,.045,.355,1);
}



@-webkit-keyframes graphbar {
	0% { width: 0px; }
}
@keyframes graphbar {
	0% { width: 0px; }
}

@-webkit-keyframes graphcap {
	0% {
		opacity: 0;
		-webkit-transform: scale(4,4) translate(60px,0px);
	},
	100% {
		opacity: 1;
		-webkit-transform: scale(1,1) translate(0,0);
	}
}
@keyframes graphcap {
	0% {
		opacity: 0;
		transform: scale(4,4) translate(60px,0px);
	},
	100% {
		opacity: 1;
		transform: scale(0,0) translate(0,0);
	}
}


@-webkit-keyframes graphcapnum {
	0% {
		opacity: 0;
		-webkit-transform: scale(4,4) translate(20px,20px);
	},
	100% {
		opacity: 1;
		-webkit-transform: scale(1,1) translate(0,0);
	}
}
@keyframes graphcapnum {
	0% {
		opacity: 0;
		transform: scale(4,4) translate(20px,20px);
	},
	100% {
		opacity: 1;
		transform: scale(0,0) translate(0,0);
	}
}




/* - レーティング距離区分
------------------------------------------------------------ */
.rating_dist {}

.rating_dist h3 {
    font-weight: bold;
    font-size: 1.3rem;
    padding-bottom: 0.3em;
    /*border-bottom: 1px dashed #ccc;*/
    
    background-color: #333;
    color: #fff;
    padding: 8px;
}

.rating_dist > .contents {
    border: 1px solid #ddd;
    border-top: none;
    padding: 15px;
}


ul.dist_list {  }

ul.dist_list > li {
    display: table;
}

ul.dist_list > li + li { margin-top: 5px; }

ul.dist_list > li > div {
    display: table-cell;
    vertical-align: top;
    padding: 2px 0;
    line-height: 1.4;
}

ul.dist_list > li > div.cap { white-space: nowrap; }


span.cancel {
	color:#c00;
	font-weight:bold;
}





/* ------------------------------------------------------------

	768px〜979px

------------------------------------------------------------ */

@media screen and ( max-width : 979px ) {
	
	/*#rating > .content { margin: 20px 10px 0 10px; }*/
	
	/* --- 出走馬レーティング表 --- */
	table.rating thead tr th { font-size: 1.3rem; }
	table.rating tbody tr th { font-size: 1.3rem; }
	table.rating thead tr th.rank { width: 50px; }
	table.rating tbody tr td { font-size: 1.3rem; }
	
}

/* ------------------------------------------------------------

	-767px

------------------------------------------------------------ */

@media screen and ( max-width : 767px ) {
	
	/* --- 出走馬レーティング表 --- */
	table.rating thead tr th { font-size: 1.2rem; }
	table.rating tbody tr th { font-size: 1.2rem; }
	table.rating thead tr th.rank { width: 44px; }
	table.rating tbody tr td { font-size: 1.2rem; }
	
	
}


/* ------------------------------------------------------------

	-639px

------------------------------------------------------------ */

@media screen and ( max-width : 639px ) {
	
  #rating { margin-top: 25px; }
  
	/* --- 出走馬レーティング表 --- */
	div.rating_block > div.inner { display: block; }
	div.rating_block > div.inner > div { display: block; }
	div.rating_block > div.inner > div.left { padding-right: 0; }
	div.rating_block > div.inner > div.right { padding-left: 0; margin-top: 20px; }
	
	table.rating tbody tr td.horse span { font-size: 1.1rem; }
    
    
  ul.dist_list > li { display: block; }
  ul.dist_list > li > div { display: block; }
  ul.dist_list > li > div.txt span {
      display: block;
      font-size: 1.1rem;
  }
}



/* ------------------------------------------------------------

	〜479px

------------------------------------------------------------ */

@media screen and ( max-width : 479px ) {
	
	div.barchart > ul.bars > li div.inner > p { font-size: 1rem; }
	div.barchart > ul.bars > li div.inner > p > span { font-size: 1rem; }
	
}



/* ------------------------------------------------------------

	〜359px

------------------------------------------------------------ */

@media screen and ( max-width : 359px ) {
	/* --- 出走馬レーティング表 --- */
	table.rating thead tr th { font-size: 1.1rem; }
	table.rating tbody tr th { font-size: 1.1rem; }
	table.rating thead tr th.rank { width: 40px; }
	table.rating tbody tr td { font-size: 1.2rem; }
	
	
	/* --- 出走馬レーティング グラフ --- */
	div.barchart > ul.bars > li div.inner > div.inner_line > div.name_line > div.cell.name > p,
	div.barchart > ul.bars > li div.inner > div.inner_line > div.name_line > div.cell.rate > p {
		font-size: 1rem;
	}
	
}


/* ------------------------------------------------------------

	印刷用

------------------------------------------------------------ */

@media print {
  html,body { height: auto; }
  #wrapper { min-height: 1px; }
  #contentsBody table { border-collapse: separate; }
  #race_title > h1 { background-color:#333; }
}