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

	トレセン：トレセンの紹介

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


/* - アンカーボタン
-------------------------------------------------- */

ul.btns {
	display: table;
	width: 100%;
	background-color: #f5f5f5;
	background-color: #ebebeb;
	padding: 5px;
}

ul.btns > li {
	display: table-cell;
	width: 33.33%;
	box-sizing: border-box;
	padding: 5px;
}

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

ul.btns > li > a:hover {
	background-color: #fff8e1;
}

ul.btns > li > a > div.inner {
	display: table;
	margin: 0 auto;
}

ul.btns > li > a > div.inner > div {
	display: table-cell;
	vertical-align: middle;
}

ul.btns > li > a > div.inner > div.icon i {
	margin-right: 0.5em;
	color: #188542;
	font-size: 1.4rem;
	vertical-align: middle;
	position: relative;
	top: -1px;
}

ul.btns > li > a > div.inner > div.cap {
	font-size: 1.2rem;
}

ul.btns > li > a > div.inner > div.txt {
	padding-left: 0.2em;
	white-space: nowrap;
}


/* - 美浦トレセンの沿革：沿革リスト
-------------------------------------------------- */


div.history_list > ul > li {
	margin-top: 1px;
}

div.history_list > ul > li:first-child {
	margin-top: 0;
}


div.history_unit {
	display: table;
	width: 100%;
}

div.history_unit > div {
	display: table-cell;
	vertical-align: middle;
}

div.history_unit > div.head {
	box-sizing: border-box;
	width: 140px;
	background-color: #eaeade;
	padding: 15px 20px;
	color: #444;
	font-size: 1.4rem;
	border-right: 2px solid #dfdfd3;
	position: relative;
	text-align: center;
	text-align: right;
}


div.history_unit > div.head > strong { font-weight: bold; }

div.history_unit > div.content {
	padding: 15px 20px;
	background-color: #f3f3f3;
	color: #444;
	border-left: 1px solid #fff;
}


/* - 美浦トレセンでの調教：調教時間テーブル
-------------------------------------------------- */

div.traning_time > table caption {
	background-color: #188542;
    color: #fff;
	font-size: 1.3rem;
    padding: 10px;
	text-align: center;
	white-space: nowrap;
}

div.traning_time > table > tbody th {
    background-color: #f1f1f1;
    border: 1px solid #ddd;
    padding: 10px 20px;
    text-align: center;
    vertical-align: middle;
    font-size: 1.3rem;
    line-height: 1.4;
}

div.traning_time > table > tbody td {
    border: 1px solid #ddd;
    padding: 10px 20px;
    text-align: center;
    vertical-align: middle;
    font-size: 1.3rem;
}


/* - 美浦トレセンでの調教：調教ゼッケン
-------------------------------------------------- */


div.bib_block > ul {
	display: grid;
	grid: auto / repeat(3, min-content);
}

div.bib_block > ul > li {
	display: grid;
	grid-template-rows: subgrid;
	align-items: stretch;
	grid-row: span 4;
	min-width: 190px;
	background: #fff;
	outline: 1px solid #ddd;
}

div.bib_block > ul > li > div.cap_inner > p {
	background-color: #188542;
    color: #fff;
    padding: 10px 8px;
	text-align: center;
    display: flex;
	justify-content: center;
    align-items: center;
	height: 100%;
}

div.bib_block img {
    width: 100%;
	max-width: 150px;
    height: auto;
}

div.bib_block > ul > li > figure {
	text-align: center;
}

figcaption {
	padding: 6px;
	background-color: #f1f1f1;
	font-size: 1.2rem;
}



/* - 美浦トレセンでの調教：帽色
-------------------------------------------------- */

div.hat_block ul {
	width: 100%;
}

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

div.hat_block > ul > li {
	float: left;
	font-size: 1.3rem;
}

div.hat_block > ul > li:last-child {
	border-right: 1px solid #ddd;
}

div.hat_block > ul > li > figure {
	border-top: 1px solid #ddd;
	border-left: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	text-align: center;
}
div.hat_block > ul > li > figure img {
	vertical-align: top;
	margin: 20px 10px;
}

div.hat_block > ul > li > figure figcaption {
	padding: 6px;
	background-color: #f1f1f1;
	border-top: 1px solid #ddd;
	font-size: 1.2rem;
}


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

	767px以下

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

	div.hat_block > ul > li {
		width:  33.33%;
	}
	
	div.hat_block > ul > li:last-child {
	border-right: none;
}

	div.hat_block > ul > li:nth-child(3n) {
		border-right: 1px solid #ddd;
	}

	div.hat_block > ul > li:nth-child(-n+3) > figure {
		border-bottom: none;
	}
	
}


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

	639px以下

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

	ul.btns {
		display: block;
	}

	ul.btns > li {
		display: block;
		width: auto;
	}

	ul.btns > li > a > div.inner {
		width: auto;
		margin: 0 auto;
	}

	div.bib_block > ul{
		display: block;
	}
}


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

	479px以下

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

	div.hat_block > ul > li {
		width:  50%;
	}

	div.hat_block > ul > li:nth-child(3n) {
		border-right: none;
	}

	div.hat_block > ul > li:nth-child(2n) {
		border-right: 1px solid #ddd;
	}

	div.hat_block > ul > li > figure {
		border-top: 1px solid #ddd;
		border-left: 1px solid #ddd;
		border-bottom: 1px solid #ddd;
	}

	div.hat_block > ul > li:nth-child(-n+4) > figure {
		border-bottom: none;
	}

}


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

	359px未満

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


	div.history_unit > div { display: block; }
	
	div.history_unit > div.head {
		width: auto;
		text-align: left;
		border: none;
	}
	
	div.traning_time > table caption {
		text-align: left;
		white-space: normal;
	}
	
	div.traning_time > table > tbody th,
	div.traning_time > table > tbody td { padding: 10px; }
		
	div.hat_block > ul > li > figure img {
		margin: 20px 0;
	}
}

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

	329px未満

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

	ul.btns > li > a > div.inner {
		margin: 0;
	}

	div.hat_block > ul > li {
		float: none;
		width: 100%;
	}
	
	div.hat_block > ul > li:nth-child(3n),
	div.hat_block > ul > li {
		border-right: 1px solid #ddd;
	}
	
	div.hat_block > ul > li:last-child > figure {
    border-top: none;
}
}