/* ----------------------------------------------------------------------
	
	馬主サイト - 馬主になるには 競走馬を購入するには
	
---------------------------------------------------------------------- */

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

div.block_sub_header > h4 { font-size: 1.5rem; }

div.horse_market {  }

div.horse_market > div.inner {
	/*width: 75%;*/
	margin-right: 230px;
	position: relative; 
	}
	
div.horse_market > div.inner:before {
    content: "";
    display: block;
    /*padding-top: 100%;*/
}


div.age_unit {
	position: relative;
	border-radius: 6px;
	background-color: #eee;
	border-bottom: 1px solid #fff;
}

div.age_unit > ul {
	display: table;
	table-layout: fixed;
	width: 100%;
}

div.age_unit > ul li {
	display:  table-cell;
	padding: 10px;
	background-color: #eee;
	border-right: 1px solid #fff;
}

div.age_unit > ul li.year {
	width: 64px;
	text-align: center;
	color: #fff;
	background-color: #555;
	background-color: #197ac1;
	font-size: 2rem;
	font-weight: bold;
	vertical-align: middle;
	text-shadow: 0 1px 4px rgba(0,0,0,0.4);
	border-radius: 4px 0 0 4px;
}

div.age_unit > ul li.growth {
	width: 200px;
	text-align: center;
	background-color: #eee;
	vertical-align: middle;
}

div.growth_unit > p {
	font-weight: bold;
    background-color: #eee;
    background-color: #fce0de;
    padding: 5px;
}

div.growth_unit div.img img {
	vertical-align: top;
}

div.age_unit > ul li.market {
	padding: 15px;
	padding-left: 10px;
	padding-right: 20px;
}


div.age_unit > ul li > dl { /*margin-top: 10px;*/ }

div.age_unit > ul li > dl dt {
	color: #1b521f;
	font-size: 1.4rem;
	font-weight: bold;
	padding: 5px 10px;	
	background-color: #fff;
	border-radius: 3px;
	
	/*font-size: 2rem;*/
	font-weight: bold;
	margin-bottom: 8px;
	/*text-align: center;*/
	padding: 5px;
	color: #fff;
	background-color: #444;
	border-radius: 3px;
	border: 1px solid #222;
	
	/*
	display: inline-block;
	min-width: 130px;
	*/
}

div.age_unit > ul li > dl dd {
	padding: 10px 0;
}

div.age_unit > ul li > p.sale {
	display: table;
	width: 100%;
	/*margin-top: 15px;*/
	padding-top: 10px;
	border-top: dotted 1px #ddd;
	/*background-color: #ecefec;
	border-radius: 3px;*/
}

div.age_unit > ul li > p.sale > span {
	display: table-cell;
	text-align: left;
}

div.age_unit > ul li > p.sale > span:first-child {
	width: 120px;
	white-space: nowrap;
	font-weight: bold;
	color: #555;
}

div.arrow {
	font-size: 4rem;
	color: #3c96d6;
	/*padding-top: 5px;*/
	padding-left: 40px;
	padding-left: 100px;
}


/* --- 庭先取引 --- */
div.deal_block_all,
div.deal_block {
	position: absolute;
	width: 240px;
	top: 20px;
	bottom 0;
	/*left: 97%;*/
	right: -225px;
	padding: 15px;
	/*padding-top: 250px;
	height: 600px;*/
	height: 94%;
	vertical-align: middle;
	border: solid 2px #f5cf82;
	background-color: rgba(245,211,141,0.7);
	border-radius: 4px;
	box-shadow: 1px 3px 8px rgba(0,0,0,0.2);
}

div.deal_block_all > dl,
div.deal_block > dl {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}

div.deal_block_all > dl dt,
div.deal_block > dl dt {
	font-size: 2rem;
	font-weight: bold;
	margin-bottom: 8px;
	text-align: center;
	padding: 5px;
	color: #fff;
	background-color: #444;
	border-radius: 3px;
	border: 1px solid #222;
}

div.deal_block_all > dl dd p img,
div.deal_block > dl dd p img {
	vertical-align: top;
}

div.deal_block_all > dl dd p.txt,
div.deal_block > dl dd p.txt {
	margin-top: 8px;
	text-align: left;
}

div.deal_block { display: none; }


/* --- ピックアップ　画像あり --- */

div.pickup.img > div.inner {
	display: table;
	width: 100%;
	table-layout: fixed;
	margin-top: 10px;
}

div.pickup.img > div.inner > p {
	display: table-cell;
	vertical-align: top;
}

div.pickup.img > div.inner > p.img {
	width: 240px;
	padding-right: 15px;
}

div.pickup.img > div.inner > p.img img {
	vertical-align: top;
}




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

	979px以下

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

div.horse_market > div.inner { margin-right: 180px; }
	
div.deal_block_all {
	width: 200px;
	right: -185px;
}
	
}


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

	840px〜768px

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


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

/*div.horse_market > div.inner { width: 70%;}*/

div.age_unit > ul li > p.sale,
div.age_unit > ul li > p.sale > span { display: block; }
	
}


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

	767px以下

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

div.horse_market > div.inner { margin-right: 160px; }

div.age_unit > ul li.growth {
	width: 180px;
}
	
div.deal_block_all {
	width: 180px;
	right: -165px;
}
	
}


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

	700px 〜 638px

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

div.age_unit > ul {
	display: block;
}

div.age_unit > ul > li.year,
div.age_unit > ul > li.growth,
div.age_unit > ul > li.market {
	display: block;
	width: 100%;
}

div.age_unit > ul li.year {
	border-radius: 4px 4px 0 0;
}

div.age_unit > ul > li.growth,
div.age_unit > ul > li.market {
	padding: 20px;
}

div.age_unit > ul > li.market { padding-top: 0; }

div.growth_unit {
	width: auto;
}

div.growth_unit > p {
	max-width: 422px;
	margin: 0 auto;
}

div.grid > div.txt {
	padding-top: 15px;
}

div.grid > div.img {
	padding-right: 0;
	width: 100%;
	text-align: center;
}

div.age_unit > p { margin-top: 0; }

div.age_unit > p > span { display: block; }

div.deal_block_all { display: none; }

div.horse_market > div.inner { margin-right: 0; }

div.age_unit {
	margin-right: 130px;
	margin-bottom: 20px;
	}
	
div.age_unit > ul li > p.sale {
	display: table;
	width: 100%;
	padding-top: 10px;
}

div.age_unit > ul li > p.sale > span {
	display: table-cell;
}

div.deal_block { 
	display: block;
	top: 65px;
	right: -135px;
	width: 150px;
	height: 85%;
	padding: 10px;
	}
	
}


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

	639px以下

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

div.deal_block > dl dt {
	font-size: 1.8rem;
}

div.deal_block > dl dd {
	font-size: 1.2rem;
}

div.pickup.img > div.inner,
div.pickup.img > div.inner > p {
	display: block;
}

div.pickup.img > div.inner { margin-top: 15px; }

div.pickup.img > div.inner > p.img {
	width: auto;
	text-align: center;
	padding-right: 0;
	margin-bottom: 15px;
}

}

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

	549〜480px

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

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

div.age_unit { margin-right: 110px; }
div.deal_block { 
	width: 130px;
	right: -115px;
}

}

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

	479px以下

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

div.age_unit {
	margin-right: 0;
	padding-right: 0;
}

div.age_unit > ul li {
    border: none;
}

div.icon > h5,
div.icon > p {
	font-size: 1.6rem;
}

div.arrow {
    text-align: center;
	padding: 0;
}

div.deal_block {
	position: static;
	margin:  20px;
	margin-top: 0;
	width: auto;
	padding: 10px;
	text-align: center;
}

div.deal_block > dl { 
	position: static;
	top: 0;
	transform: translateY(0%);
	}


div.deal_block > dl dt {
	font-size: 1.6rem;
	padding: 3px;
}

div.deal_block > dl dd p {
	width: 100%;
	text-align: center;
}

div.deal_block > dl dd { text-align: left; }


}



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

	359px以下

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

div.age_unit {
	/*padding-top: 48px;*/
}

div.age_unit > div.icon { width: auto; }

div.icon > h5,
div.icon > p {
	font-size: 1.4rem;
}

}