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

	育成研究業務：JRA育成馬

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


/* - データリスト
-------------------------------------------------- */

ul.data_list {
	width:100%;
}

ul.data_list:after {
	content:'';
	display:block;
	clear:both;
}

ul.data_list > li {
	float:left;
}

ul.data_list > li > .content > .inner > .img img {
	max-width:140px;
	
}

ul.data_list.col1 > li {
	float:none;
	width:100%;
	margin-top:30px;
}

ul.data_list.col1 > li:first-child {
	margin-top:0;
}

ul.data_list > li > h3,
ul.data_list > li > h4,
ul.data_list > li > h5 {
	background-color: #1b521f;
	color: #fff;
	font-weight: bold;
	font-size: 1.4rem;
	padding: 8px;
}

ul.data_list > li > h3 > span,
ul.data_list > li > h4 > span,
ul.data_list > li > h5 > span {
	font-size:1.1rem;
	padding-left:0.5em;
}

ul.data_list > li > .content {
	border: 1px solid #e0e0e0;
	border-top: none;
	padding:19px;
}


ul.data_list.col1 > li > .content > .inner {
	display:table;
	width:100%;
	border-top:1px dotted #CCC;
	margin-top:20px;
	padding-top:20px;
}

ul.data_list.col1 > li > .content > .inner:first-child {
	border-top:none;
	margin-top:0;
	padding-top:0;
	
}

ul.data_list.col1 > li > .content > .inner > div {
	display:table-cell;
	vertical-align:top;
}

ul.data_list.col1 > li > .content > .inner > div.img {
	width:280px;
}

ul.data_list.col1 > li > .content > .inner > div.img img {
	max-width:200px;
}


ul.data_list.col1 > li > .content > .inner > div.img.center {
	text-align:center;
}

ul.data_list > li > .content > .inner > div.txt {
	margin-top:15px;
}

ul.data_list.col1 > li > .content > .inner > div.txt {
	padding-left:30px;
}

ul.data_list > li > .content > .inner > div.txt p.sub > span {
	display:block;
}


ul.data_list.col2 {
	display:table;
	width:100%;
}

ul.data_list.col2 > li {
	width:50%;
	padding:10px;
	padding:10px 0;
}

ul.data_list.col2 > li:nth-child(odd) { padding-right:9px; }
ul.data_list.col2 > li:nth-child(even) { padding-left:9px; }


ul.data_list > li {
	float:left;
}


/* - 映像を見るボタン／詳細ボタン
-------------------------------------------------- */
ul.data_list > li > .btn {
	background-color: #eaeaea;
	border: 1px solid #d0d0d0;
	border-top: none;
	padding: 9px;
}

ul.data_list > li > .btn a {
	display: block;
	background-color: #fff;
	border-radius: 4px;
	box-shadow: 0 1px 4px 0 rgba(0,0,0,0.1);
	text-decoration: none;
	color: #188542;
	font-size: 1.4rem;
	text-align: center;
	font-weight: bold;
	padding: 5px 0;
}

ul.data_list > li > .btn a:hover {
	background-color: #f1f8e9;
	background-color: #fff8e1;
	color: #333;
}

ul.data_list > li > .btn a > i { margin-right: 0.5rem; }

ul.data_list > li > .btn a > span.opt-xs {
	font-size:1.1rem;
}







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

	767px以下

------------------------------------------------------------ */
@media screen and ( max-width : 767px ) {


}


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

	767px以下

------------------------------------------------------------ */
@media screen and ( max-width : 690px ) {

ul.data_list > li > h4 > span , ul.data_list > li > h5 > span {
	display:block;
	margin-top:2px;
	padding-left:0;
}

}



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

	639px以下

------------------------------------------------------------ */
@media screen and ( max-width : 639px ) {

ul.data_list > li > .content {
	padding:14px;
}

ul.data_list > li > .content > .inner {
	display:block;
}

ul.data_list.col1 > li > .content > .inner > div {
	display:block;
	vertical-align:top;
}

ul.data_list.col1 > li > .content > .inner > div.img {
	width:100%;
	margin:0 auto;
	text-align:center;
}

ul.data_list.col1 > li > .content > .inner > div.txt {
	padding-left:0;
	margin-top:15px;
}	

}

@media screen and ( max-width : 479px ) {

ul.data_list.col2 > li {
	width:100%;
	display:block;
	padding:15px 0;
	float:none;
}

ul.data_list.col2 > li > .content > .inner > div.img {
	text-align:center;
}

ul.data_list.col2 > li:first-child { padding-top:10px; } 

ul.data_list.col2 > li:nth-child(odd) { padding-right:0; }
ul.data_list.col2 > li:nth-child(even) { padding-left:0; }

ul.data_list > li > h3 > span,
ul.data_list > li > h4 > span,
ul.data_list > li > h5 > span {
	display:inline-block;
	padding-left:0.5em;
	margin-top:0;
}


}

@media screen and ( max-width : 359px ) {
	
ul.data_list > li > h3 > span,
ul.data_list > li > h4 > span,
ul.data_list > li > h5 > span {
	display:block;
	padding-left:0;
	margin-top:2px;
}
	
	
}