/***************	共通	***************/
BODY	{
	text-align:			center;
	font-size:			16px;
	line-height:		20px;
}
/* テキスト */
.text_bold	{
	font-weight: bold;
}
.text_font_l {
	font-size:			30px;
	line-height:		30px;
}
.text_font_m {
	font-size:			16px;
	line-height:		20px;
}
.text_font_s {
	font-size:			12px;
	line-height:		20px;
}
.text_black {
	color:				black;
}
.text_white {
	color:				white;
}
.text_center {
    text-align:         center;
}
.text_left {
    text-align:         left;
    padding-left:       10px;
}
.text_right {
    text-align:         right;
    padding-right:      10px;
}
.text_frame_black {
    text-shadow    :
       2px  2px 1px black,
      -2px  2px 1px black,
       2px -2px 1px black,
      -2px -2px 1px black,
       2px  0px 1px black,
       0px  2px 1px black,
      -2px  0px 1px black,
       0px -2px 1px black;
}
.text_frame_white {
    text-shadow    :
       2px  2px 1px white,
      -2px  2px 1px white,
       2px -2px 1px white,
      -2px -2px 1px white,
       2px  0px 1px white,
       0px  2px 1px white,
      -2px  0px 1px white,
       0px -2px 1px white;
}
/* ボタン */
.button {
	display:			block;
	position:			relative;
	width:				80px;
	height:				50px;
	color:				white;
	vertical-align:		middle;
	border-radius:		10px;
	background-color:	darkslategray;
	box-shadow:			0 2px 1px lightgrey;
	text-decoration:	none;
	padding:			5px 5px 10px;
	margin:				5px auto;
}
.button:hover {
	top:				4px;
	box-shadow: 		0 1px 0 gray;
}
/* 点滅 */
.blink {
	animation:		blinkColor 0.5s infinite alternate;
}
@keyframes blinkColor {
	0% {
		color:	#FFFF00;
	}
	20% {
		color:	#FFFF00;
	}
	100% {
		color:	#C08000;
	}
}

/* float Clear */
.clear_float::after {
	content:	"";
	display:	block;
	clear:		both;
}

.left_border_white {
	border-left:	solid 1px white;
}
.left_border_gray {
	border-left:	solid 1px gray;
}
.left_border_black {
	border-left:	solid 1px black;
}
/***************	日付	***************/
.top_date {
	background-color:	palegoldenrod;
	font-size:			24px;
	line-height:		24px;
	height:				70px;
}
.date_cell {
	width:				800px;
	position:			relative;
	float:				left;
}
.date {
	color:				white;
	width:				320px;
	padding:			10px 240px;
}
.date_text {
	background-color:	black;
	border-radius:		20px;
	display:			block;
	text-shadow:		0px 0px 1px #fff,
		0px 0px 2px #fff,
		0px 0px 3px #fff,
		0px 0px 4px #f80,
		0px 0px 7px #f80,
		0px 0px 8px #f80,
		0px 0px 10px #f80,
		0px 0px 15px #f80;
	padding:			10px 0px;
}
.date_now {
	padding:			10px 0px;
}
.date_now_text {
	color:			darkgreen;
	font-weight:	bold;
	border-style:	solid;
	border-radius:	15px;
	padding:		5px;
}
.date_noRace {
    width:				550px;
    height:				486px;
    margin:				auto;
	background-image:	url(../img/sorry.jpg);
}

/***************	AnalogClock			***************/
.analogArea {
    width: 100%;
    box-sizing: border-box;

    display: flex;
    align-items: center;
    flex-direction: column;
}

.clock {
    background-color: yellowgreen;
    border: 3px solid black;
    width: 50px;
    height: 50px;
    position: relative;
//    border-radius: 50%;
}

.clock::after {
    width: 6px;
    height: 6px;
    background: black;
    content: "";

    position: absolute;
    top: calc(50% - 3px);
    left: calc(50% - 3px);
    border-radius: 50%;
}

.line {
    position: absolute;
    transform-origin: bottom;
}

.hour {
    width: 3px;
    height: 12px;
    background: black;
    top: calc(50% - 12px);
    left: calc(50% - 1.5px);
}

.min {
    width: 2px;
    height: 22px;
    background: black;
    top: calc(50% - 22px);
    left: calc(50% - 1px);
}

.sec {
    display: none;
    width: 1px;
    height: 40px;
    background: black;
    top: calc(50% - 40px);
    left: calc(50% - 0.5px);
}

.scale {
    position: relative;
    width: 100%;
    height: 100%;
}

.scale > div {
    position: absolute;
    top: 2%;
    left: calc(50% - 1px);
    width: 2px;
    height: 48%;
    transform-origin: bottom;
}

.scale > div::after {
    position: absolute;
    top: 0;
    content: "";
    width: 2px;
    height: 5px;
    background-color: black;
}

/***************	top			***************/
.top_title {
	height:				300px;
	background-image:	url(/img/image0.jpg?v=1);
}
.top_title_logo_area {
	float:				left;
}
.top_title_logo_area h1 {
	width:				650px;
	font-size:			40px;
	font-weight:		bold;
	line-height:		60px;
	margin:				30px 0px 0px 100px;
	text-align:			left;
    color:				goldenrod;
    text-shadow:
       2px  2px 1px saddlebrown,
      -2px  2px 1px saddlebrown,
       2px -2px 1px saddlebrown,
      -2px -2px 1px saddlebrown,
       2px  0px 1px saddlebrown,
       0px  2px 1px saddlebrown,
      -2px  0px 1px saddlebrown,
       0px -2px 1px saddlebrown;
}
.top_title_logo_area h2 {
	color:				saddlebrown;
	font-size:			28px;
	font-weight:		bold;
	line-height:		40px;
    text-shadow:
       2px  2px 1px white,
      -2px  2px 1px white,
       2px -2px 1px white,
      -2px -2px 1px white,
       2px  0px 1px white,
       0px  2px 1px white,
      -2px  0px 1px white,
       0px -2px 1px white;
}

.top_block_title {
	float:				left;
	width:				400px;
	margin-left:		20px;
}
.top_block_title h3 {
	font-size:			24px;
	line-height:		45px;
	font-weight:		bolder;
	text-align:			left;
	color:				gold;
    text-shadow    :
       2px  2px 1px black,
      -2px  2px 1px black,
       2px -2px 1px black,
      -2px -2px 1px black,
       2px  0px 1px black,
       0px  2px 1px black,
      -2px  0px 1px black,
       0px -2px 1px black;
	margin-block-start:	0;
	margin-block-end:	0;
}

.top_message {
	float:				left;
	width:				400px;
	margin:				0px 30px;
	border-radius:		5px;
	border-style:		solid;
	padding:			5px;
	color:				white;
}
.top_message h4 {
	text-align:			left;
	margin-block-start:	0;
	margin-block-end:	0;
}
.top_message_l {
	width:				525px;
}

.top_button {
	width:				300px;
	height:				35px;
	float:				left;
	text-align:			center;
//	background-color:	black;
	background:		linear-gradient(to bottom right, silver 0%, black 10%, black 90%, silver);
	margin:				10px 50px 5px;
}
.top_button_text {
	margin: 10px;
}

/***************	top main	***************/
.top_main {
	background-color:	palegoldenrod;
	padding:			10px;
}

.top_odds_block {
	width:				1080px;
	height:				275px;
	margin:				10px auto;
}

/***************	top left	***************/
.top_left {
	width:				640px;
	height:				960px;
	background-color:	palegoldenrod;
	float:				left;
}

.top_left_block {
	width:				600px;
	height:				205px;
	margin:				10px auto;
}

.top_left_color_odds {
	background-color:	darkred;
}

.top_left_color_paddock {
	background-color:	darkblue;
}
.top_left_color_graph {
	background-color:	darkgoldenrod;
}

.top_left_color_result {
	background-color:	darkgreen;
}

.top_left_color_win5 {
	background-color:	saddlebrown;
}

.top_left_color_book {
	background-color:	mediumvioletred;
}

.top_left_color_secret {
	background-color:	saddlebrown;
}

.top_left_book_image, .top_left_odds_image {
	width:				120px;
    height:				120px;
    position:			relative;
    top:				40px;
    left:				460px;
    background-size:	120px 120px;
    border-radius:		20px;
    border-style:		solid;
	border-color:		greenyellow;
}

.top_left_book_image {
    background-image:	url(/img/image2.jpg?v=0);
}

.top_left_odds_image {
    background-image:	url(/img/image3.jpg?v=0);
}

.top_left_win5_image, .top_left_odds_image1, .top_left_odds_image2,
.top_left_odds_image3, .top_left_odds_image4, .top_left_odds_image5,
.top_left_paddock_image {
	width:				120px;
    height:				80px;
    position:			relative;
    background-size:	120px 80px;
    border-radius:		20px;
    border-style:		solid;
	border-color:		greenyellow;
}

.top_left_win5_image {
    top:				60px;
    left:				460px;
    background-image:	url(/img/top_win5.PNG?v=0);
}
.top_left_odds_image1 {
	width:				240px;
	height:				160px;
	top:				15px;
	left:				600px;
    background-image:	url(/img/top_race1.PNG?v=0);
	background-size:	240px 160px;
}
.top_left_odds_image2 {
	width:				180px;
	height:				120px;
    top:				-30px;
    left:				720px;
    background-image:	url(/img/top_race2.PNG?v=0);
	background-size:	180px 120px;
}
.top_left_odds_image3 {
    top:				-275px;
    left:				835px;
    background-image:	url(/img/top_race3.PNG?v=0);
}
.top_left_odds_image4 {
    top:				-285px;
    left:				885px;
    background-image:	url(/img/top_race4.PNG?v=0);
}
.top_left_odds_image5 {
    top:				-295px;
    left:				935px;
    background-image:	url(/img/top_race5.PNG?v=0);
}
.top_left_paddock_image {
	width:				372px;
	height:				180px;
	top:				15px;
	left:				600px;
    background-image:	url(/img/top_paddock1.PNG?v=0);
	background-size:	372px 180px;
}

.top_button_s {
	width:				140px;
	height:				60px;
	float:				left;
//	background-color:	black;
	background:		linear-gradient(to bottom right, silver 0%, black 10%, black 90%, silver);
	text-align:			center;
	margin:				10px 10px 5px;
}


/***************	top right	***************/
.top_right {
	width:				480px;
	height:				960px;
	float:				right;
	background-color:	palegoldenrod;
}

.top_right_bgm_text {
	width:				300px;
	font-size:			18px;
	font-weight:		bold;
	margin:				auto;
}

.top_right_banner {
	width:				460px;
	height:				260px;
	padding:			10px 0px;
}

.top_right_profile {
	width:				460px;
	height:				500px;
	background-image:	url(/img/image4.jpg);
	background-size:	840px 620px;
    color:				yellow;
	padding:			50px 0px;
	margin:				10px;
    text-shadow:
       2px  2px 1px saddlebrown,
      -2px  2px 1px saddlebrown,
       2px -2px 1px saddlebrown,
      -2px -2px 1px saddlebrown,
       2px  0px 1px saddlebrown,
       0px  2px 1px saddlebrown,
      -2px  0px 1px saddlebrown,
       0px -2px 1px saddlebrown;
}


/***************	gourmet	***************/
.top_gourmet {
	width:				1120px;
	height:				340px;
	background-color:	palegoldenrod;
	padding-top:		10px;
}

.top_gourmet_block {
	width:				1100px;
	height:				320px;
	background-color:	mediumvioletred;
	margin:				10px auto;
}
.top_gourmet_area {
	width:				960px;
	float:				left;
	padding:			0px 60px;
}

.top_gourmet_item {
	width:				320px;
	height:				280px;
	float:				left;
}

.gourmet_button {
	width:				180px;
	height:				240px;
	background-color:	white;
}

.gourmet_name, .gourmet_price {
	font-size:			14px;
	font-weight:		bold;
	color:				black;
	padding:			5px;
}
.gourmet_name {
	text-decoration: underline;
}

.gourmet_area, .gourmet_catch {
	font-size:			14px;
}

.gourmet_image {
	margin:				auto;
}

.gourmet_comment {
	font-size:			12px;
	line-height:		16px;
}

.gourmet_amazon_label {

}

.gourmet_amazon_button {
	height:		30px;
	background:	linear-gradient(to bottom, #f8e6b8 0, #f3d686 6%, #ebb62c 100%);
	color:		black;
	line-height:	35px;
}
.gourmet_amazon_mark {
	width:		25px;
	height:		25px;
	float: 		left;
	margin:		3px 0px 0px 5px;
	background-image:	url(https://wms-fe.amazon-adsystem.com/panda/20070822/US/img/cart.gif);
}

/***************	top footer	***************/
.top_footer {
	width:		1120px;
	color:		white;
	padding:	20px 0px;
}

.top_footer_text {
	text-align:	center;
	padding: 10px;
}

.top_footer a {
	color:		yellow;
}


/***************	schedule	***************/
.schedule {
	width:				100%;
	margin:				0px auto 20px;
}

.schedule_row {
	width:				100%;
	height:				100px;
	display:			table;
}

.schedule_cell {
	width:				33%;
	display:			table-cell;
}

/***************	graph			***************/
.graph_race {
	height:	50px;
}
.graph_race_name {
	font-size:		30px;
	line-height:	50px;
	float:			left;
	padding:		10px 0px 10px 20px;
	color:			white;
}
.graph_odds {
	margin:	20px;
	background-color:	black;
}

/***************	 結果一覧	***************/
.result_line_date {
    font-weight:		bold;
	background-color:	palegoldenrod;
	color:				black;
	padding:			10px;
}

.result_count_jockey {
	display:		table-cell;
	width:			230px;
	padding:		10px 0px;
}

.result_count_position_label {
	display:		table-cell;
	width:			150px;
	padding:		10px 0px;
}
.result_count_position {
	display:		table-cell;
	width:			180px;
	padding:		10px 0px;
}

.result_line_label {
	background-color:	lightgray;
	color:				black;
}

.result_race {
	display:		table-cell;
	width:			120px;
	padding:		5px 0px;
}

.result_rank {
	display:		table-cell;
	width:			199px;
	border-left:	solid 1px gray;
	padding:		5px 0px;
}

.result_element {
	padding:		0px 5px;
	margin:			0px 5px;
}

.result_element_line {
	padding:		5px 0px;
}


/***************	 WIN5	***************/
.win5_title {
    margin:				20px 0px;
}
.win5_title h1 {
    width:				650px;
    font-size:			40px;
    font-weight:		bold;
    line-height:		60px;
    margin:				30px 0px 0px 100px;
    text-align:			left;
    color:				goldenrod;
    text-shadow:
        2px  2px 1px saddlebrown,
        -2px  2px 1px saddlebrown,
        2px -2px 1px saddlebrown,
        -2px -2px 1px saddlebrown,
        2px  0px 1px saddlebrown,
        0px  2px 1px saddlebrown,
        -2px  0px 1px saddlebrown,
        0px -2px 1px saddlebrown;
}
.win5_title h2 {
    color:				saddlebrown;
    font-size:			28px;
    font-weight:		bold;
    line-height:		40px;
    text-shadow:
        2px  2px 1px white,
        -2px  2px 1px white,
        2px -2px 1px white,
        -2px -2px 1px white,
        2px  0px 1px white,
        0px  2px 1px white,
        -2px  0px 1px white,
        0px -2px 1px white;
}

.win5 {
    color:				white;
    border-style:		solid;
    font-size:			20px;
    margin:				20px 0px;
}
.win5_label_l, .win5_value_l {
	display:			table-cell;
	width:				557px;
	padding:			20px 0px;
}

.win5_label_s {
	display:			table-cell;
	width:				154px;
	vertical-align:		middle;
	line-height:		30px;
	padding:			20px 0px;
}

.win5_value {
	display:			table-cell;
	width:				319px;
	vertical-align:		middle;
	padding:			20px 0px;
	border-left:		solid 1px gray;
}

.tv_win5 {
	background-color:	darkred;
	margin-top: 20px;
}
.tv_win5_label {
	height:				50px;
    padding-top:		20px;
}
.tv_win5_label_win5 {
	float:				left;
    padding-left:		30px;
    font-size:			60px;
    line-height:		60px;
}
.tv_win5_label_payoff {
	float:				left;
	font-size:			40px;
    padding-left:		20px;
}
.tv_win5_label_date {
	float:				right;
	font-size:			40px;
    padding-right:		20px;
}

.tv_win5_label_line, .tv_win5_payoff_line {
	height:				20px;
	background:			linear-gradient(to right, red, hotpink);
}
.tv_win5_label_line {
	margin-top:			30px;
}
.tv_win5_payoff_line {
	margin-top:			-20px;
}

.tv_win5_result {
	background-color:	black;
    height:				200px;
    padding:			30px 30px;
}
.tv_win5_result_race {
	width:				120px;
    height:				160px;
    background-color:	gold;
    float:				left;
    border-radius:		20px;
	background:			linear-gradient(to right, gold, yellow, lightyellow, yellow, gold);
	box-shadow:			5px 5px 0px 0 khaki;
}
.tv_win5_result_race_no {
	font-size:			20px;
    color:				black;
    font-weight:		bold;
}
.tv_win5_result_race_umaban {
	width:				80px;
    height:				80px;
    color:				yellow;
	font-size:			40px;
    background-color:	red;
    border-radius:		40px;
    line-height:		80px;
    margin:				0px auto;
	box-shadow:			5px 5px 0px 0 gray;
}
.tv_win5_result_hyphen {
	height:				160px;
    float:				left;
    font-size:			50px;
    line-height:		160px;
    color:				yellow;
    padding:			5px;
}
.tv_win5_payoff {
	height:				120px;
}
.tv_win5_payoff_payoff {
	font-size:			80px;
    text-align:			right;
    padding-right:		40px;
    margin-top:			60px;
}
.tv_win5_payoff_payoff_en {
	font-size:			60px;
}
.tv_win5_font_color {
//	background:		linear-gradient(to bottom, goldenrod, gold, yellow, gold, goldenrod);
	color:				gold;
}

/***************	 プライバシー	***************/

.privacy {
	color:			white;
	text-align:		left;
	padding:		50px;
}

.privacy a {
	color:			yellow;
}

.privacy_text {
	padding:		0px 30px;
}

/***************	 色		***************/
.color_bg1_east 	{	background-color:	blue;			}
.color_bg2_east 	{	background-color:	#0000D8;		}
.color_bg3_east 	{	background-color:	darkblue;		}
.color_bg4_east 	{	background-color:   royalblue;		}
.color_bg1_west 	{	background-color:	green;			}
.color_bg2_west 	{	background-color:	#00D800;		}
.color_bg3_west 	{	background-color:	darkgreen;		}
.color_bg4_west  	{	background-color:   forestgreen;	}
.color_bg1_local 	{	background-color:	magenta;		}
.color_bg2_local 	{	background-color:	#D800D8;		}
.color_bg3_local 	{	background-color:	darkmagenta;	}
.color_bg4_local 	{	background-color:   purple;      	}

.color_turf 		{	background-color:	Green;			color:	white;	border-radius:	5px;	}
.color_dirt 		{	background-color:	darkgoldenrod;	color:	white;	border-radius:	5px;	}
.color_jump 		{	background-color:	mediumpurple;	color:	white;	border-radius:	5px;	}

/* 番 */
.color1 			{	background-color:	white;		color:	black;	}
.color2 			{	background-color:	black;		color:	white;	}
.color3 			{	background-color:	red;		color:	white;	}
.color4 			{	background-color:	blue;		color:	white;	}
.color5 			{	background-color:	yellow;		color:	black;	}
.color6 			{	background-color:	green;		color:	white;	}
.color7 			{	background-color:	orange;		color:	black;	}
.color8 			{	background-color:	pink;		color:	black;	}

.color1w 			{	background-color:	white;		color:	black;
	border-style:	solid;	border-color:	white;	border-width:	2px;	}
.color2w 			{	background-color:	black;		color:	white;
	border-style:	solid;	border-color:	white;	border-width:	2px;	}
.color3w 			{	background-color:	red;		color:	white;
	border-style:	solid;	border-color:	white;	border-width:	2px;	}
.color4w 			{	background-color:	blue;		color:	white;
	border-style:	solid;	border-color:	white;	border-width:	2px;	}
.color5w 			{	background-color:	yellow;		color:	black;
	border-style:	solid;	border-color:	white;	border-width:	2px;	}
.color6w 			{	background-color:	green;		color:	white;
	border-style:	solid;	border-color:	white;	border-width:	2px;	}
.color7w 			{	background-color:	orange;		color:	black;
	border-style:	solid;	border-color:	white;	border-width:	2px;	}
.color8w 			{	background-color:	pink;		color:	black;
	border-style:	solid;	border-color:	white;	border-width:	2px;	}

/* 毛色 */
.color_white 			{	background-color:white;		}	/* 白毛 */
.color_bay 				{	background-color:#E0CCC6;	}	/* 鹿毛 */
.color_dark_bay 		{	background-color:#C8C4C2;	}	/* 青鹿毛 */
.color_brown 			{	background-color:#C2C4CA;	}	/* 黒鹿毛 */
.color_chestnut 		{	background-color:#F0D4C4;	}	/* 栗毛 */
.color_dark_chestnut 	{	background-color:#E8DACE;	}	/* 栃栗毛 */
.color_black 			{	background-color:#C0C0C0;	}	/* 青毛 */
.color_gray 			{	background-color:#F0F0F0;	}	/* 芦毛 */
.color_bg	 			{	background-color:blak;		}	/* 背景 */

/* ページレイアウト色 */
.line_color_0 			{	background-color: black;			color: white;	}
.line_color_1 			{	background-color: #202020;			color: white;	}
.label_color_0 			{	background-color: indigo;			color: white;	}
.label_color_1 			{	background-color: darkslateblue;	color: white;	}
.label_color 			{	background-color:	lightgray;		color: black;	}