/* CSS Document */
header article#Head h1{
	width:100%;
	text-align: center;
}

main {
	text-align: justify;
}
main article section {
/*	border: 5px solid rgba(56,25,161,1.00); */
/*	border-radius: 0.5em;*/
	margin: 0 0 3em 0;
}

main article section h3 {
	margin-top: 0;
}

section#Name {
	font-size: 2rem;
	text-align: left;
	color: rgba(10,52,104,1.00);
	border-bottom: 1px solid rgba(10,52,104,1.00);
	display: flex;
	width:100%;
	margin-bottom: 0;
}

section#Name p {
	width: 60%;
}

section#Name p.main_link {
	text-align: right;
	width: calc(100% /5);
	font-size: 1.6rem;
}

section#Name p.main_link a {
	display: block;
	width:90%;
	font-weight: 700;
	background: rgba(14,104,181,1.00);
	color: #fff;
	text-align: center;
	border-radius: 2em;
	padding: 3px 0;
	margin-left: 1em;
	margin-bottom: 5px;
}

section#Name p.main_link a:hover {
	background:rgba(198,9,12,1.00);
	color: #fff;
	transition: 0.3s;
}

main article section#Point {
	margin: 0 0;
	display: flex;
}
section#Point p {
	width:50%;
}
section#Point p#Zan {
	padding: 5px;
	font-weight: 700;
	background: rgba(14,104,181,1.00);
	color: #fff;
	text-align: center;
}
section#Point p#GET {
	padding: 5px;
	font-weight: 700;
	background:rgba(198,9,12,1.00);
	color: #fff;
	text-align: center;
}


p.jplink {
	width:10%;
	float: right;
}

p.jplink a {
	display: block;
	width:auto;
	margin: 10px 0;
	background:rgba(6,84,171,1.00);
	padding: 5px;
	border-radius: 2em;
	color:rgba(255,255,255,1.00);
	font-weight: 700;
	font-size: 1.8rem;
	text-align: center;
}

main img.tekichu {
	height: 20px;
	width: auto;
}

section table {
	width:98%;
	margin:10px;
	border:1px #666 solid;
	color:#000;
	text-shadow:none;
	box-sizing: border-box;
	table-layout: fixed;
}

section table th,
section table td {
	padding:5px;
	border:1px #666 solid;
	text-align:center;
	background:#FFF;
	line-height: 1;
	vertical-align: middle;
}

section table th {
	text-align:center;
	font-weight:400;
	background: rgba(10,52,104,1.00);
	color:#FFF;
}

section table th.votehead {
	font-size: 2rem;
	font-weight: 700;
	color: rgba(10,52,104,1.00);
	padding: 3px;
	background: rgba(210,222,255,1.00);
}

section table th.day {
	width:6em;
}

section table th.raceno {
	width:4em;
}

section table th.racetitle ,
section table td.racetitle {
	text-align: justify;
}


section table th ,
section table td {
	vertical-align:middle;
}
	
main article section#VoteRace {
	margin-top: 1em;
	margin-bottom: 0;
}

p.backtop {
	width:30%;
	margin: 4em auto 1em;
}

p.backtop a {
	display: block;
	width:100%;
	font-weight: 700;
	background: rgba(14,104,181,1.00);
	color: #fff;
	text-align: center;
	border-radius: 2em;
	padding: 3px 0;
}


p.target_race {
	font-size: 2.4rem;
	font-weight: 700;
	text-align: center;
}

p.target_race span {
	font-size: 1.8rem;
	margin-right: 1em;
}

p.target_race br {
	display: none;
}

p.w80{
	width:85%;
	float: left;
	text-align: justify;
}

div.kakuteibox {
	width:60%;
	padding: 0.5em;
	background: rgba(255,227,227,1.00);
	border: 2px solid rgba(218,18,21,1.00);
	border-radius: 1em;
	margin: 0.25em auto;
}


div.kakuteibox h4 {
	text-align: center;
	border: none;
	color: rgba(191,0,3,1.00);
}

p.kakutei {
	font-weight: 700;
	position: relative;
}

p.kakutei span {
	margin-left: 1em;
} 

p.kakutei span::after {
	content:"/";
}

p.tohyo {
	font-size: 2rem;
	font-weight: 700;
}

p.tohyo br {
	display: none;
}

p.tohyo span::before {
	content: "/ ";
}


ol#Vote1 {
	list-style: none;
}

#Vote1 input {
	display: none;
}
#Vote1 label{
	display: block;
	cursor: pointer;
	width: 80%;
	height: 40px;
	margin:5px auto;
	padding:24px 5px 12px 5px;
	border-right: 1px solid #abb2b7;
	background: #bdc3c7;
	color: #555e64;
	text-align: center;
	line-height: 1;
	transition: .2s;
	font-size: 2.4rem;
}
#Vote1 label:first-of-type{
	border-radius: 3px 0 0 3px;
}
#Vote1 label:last-of-type{
	border-right: 0px;
	border-radius: 0 3px 3px 0;
}
#Vote1 input[type="radio"]:checked + label {
	background-color: rgba(10,52,104,1.00);
	color: #fff;
}

#Vote1 input[type="radio"].disabled + label {
	background-color: rgba(30,30,30,1.00);
	color: #fff;
}
#Vote1 input[type="radio"].disabled + label::after {
	content:"(投票上限を超えるためご利用になれません)";
	font-size: 1.4rem;
	color: #fff;
}

table#Rentan3 td {
	white-space: nowrap;
}

#Rentan3 input[type="number"] {
	width:5em;
}

#Rentan3 option:nth-of-type(3) {
	background: #ccc;
	
}

input.voteten {
	border: none;
	width:1em;
	padding: 0;
}

.boatcheck {
	background: #000;
}

td.boatcheck {
	padding: 0;
}
.boatcheck input[type="checkbox"] {
	display: none;
}
.boatcheck label {
	width:calc(100%/6);
	float: left;
	display: block;
	font-size: 3.2rem;
	border:1px solid #000;
	padding: 2rem 0;
	box-sizing: border-box;
	opacity: 0.4;
}

.boatcheck label.del {
	opacity: 0.2;
}

td.boatcheck label {
	width:100%;
	float: none;
	border: none;
}
.boatcheck label span {
	width:100%;
	padding-top: 100%;
}

.boatcheck label:nth-of-type(1) ,
.boatcheck span:nth-of-type(1) label {
	background-color: #FFFFFF;
	color:#000;
}

.boatcheck label:nth-of-type(2) ,
.boatcheck span:nth-of-type(2) label {
	color: #FFFFFF;
	background-color: #888888;
}

.boatcheck label:nth-of-type(3) ,
.boatcheck span:nth-of-type(3) label {
	color: #FFFFFF;
	background-color: #e41d24;
}

.boatcheck label:nth-of-type(4) ,
.boatcheck span:nth-of-type(4) label {
	color: #FFFFFF;
	background-color: #00a9e7;
}

.boatcheck label:nth-of-type(5) ,
.boatcheck span:nth-of-type(5) label {
	background-color: #efc434;
	color:#000;
}

.boatcheck label:nth-of-type(6) ,
.boatcheck span:nth-of-type(6) label {
	color: #FFFFFF;
	background-color: #46bd21;
}

.boatcheck label:nth-of-type(7) ,
.boatcheck span:nth-of-type(7) label {
	color: #FFFFFF;
	background-color: #fd9427;
}

.boatcheck label:nth-of-type(8) ,
.boatcheck span:nth-of-type(8) label {
	color: #FFFFFF;
	background-color: #f04d9d;
}

.boatcheck label:nth-of-type(9) ,
.boatcheck span:nth-of-type(9) label {
	color: #FFFFFF;
	background-color: #8136d6;
}

.boatcheck input:checked+label {
	opacity: 1;
}

.boxbp input {
	width:5em;
	display: inline;
}

input[type="number"]::-webkit-outer-spin-button, 
input[type="number"]::-webkit-inner-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
} 

input[type="number"] { 
  -moz-appearance:textfield; 
}

select.pointbox {
	width:4em;
}

p textarea {
	display: inline-block;
	width:4em;
	height: 1.1em;
	background: none;
	border: none;
	padding: 0;
	resize: none;
}

p textarea:focus {
	border: none;
	box-shadow: none;
}

#Rule p ,
#Rule ul {
	margin:0.5em 1em;
	line-height: 1.5;
}

#Rule p {
	font-size: 1.8rem;
}


#Rule ul li {
	margin-left: 1em;
	list-style: none;
	text-indent: -1em;
}

#Rule ul li:before {
	content: "※";
}

#RaceList #TodayRace {
}

#RaceList #TodayRace dl {
	padding: 5px;
	margin: 5px;
	text-align: center;
	box-sizing: border-box;
	background:rgba(255,233,192,0.8);
	border-radius: 1em;
}


#RaceList dl dt ,
#RaceList dl dd {
	background: transparent;
	border: none;
	margin: 0 0;
	white-space: nowrap;
}

#RaceList dl dt {
	font-weight: 700;
	line-height: 1.35;
}


#RaceList dl dd {
	padding-left: 0;
	margin: 0.75em 0.25em;
}

#RaceList dl dd a {
	display: block;
	width:auto;
	margin: 10px 0;
	background:rgba(6,84,171,1.00);
	padding: 5px;
	border-radius: 1em;
	color:rgba(255,255,255,1.00);
	font-weight: 700;
	font-size: 1.8rem;
}

#RaceList dl dd.votebtn a {
	background: rgba(194,39,41,1.00);
}

#RaceList dl dd a:hover {
	background: rgba(182,201,216,1.00);
	color: rgba(255,68,71,1.00);
	transition: 0.3s;
}

#RaceList dl dd.votebtn a:hover {
	background:rgba(255,203,204,1.00);
}

label.shaban select {
	width:2em;
	padding:  2px 5px;
}

label.shaban::after {
	content: "-";
}

label.shaban:last-of-type::after {
	content: "";
}

label + span.errorvote {
	font-size: 2rem;
	display: inline-block;
	width:1.25em;
	height: 1.25em;
	margin-left: 5px;
	position: absolute;
}

main section dl#Login dt ,
main section dl#Login dd {
	text-align: center;
}

#Ranking p.ranklink {
	width:100%;
	text-align: right;
}
#Ranking p.ranklink a {
	display: inline-block;
	font-weight: 700;
	position: relative;
    padding: 0 0 0 2.6rem;
    vertical-align: middle;
    text-decoration: none;
	font-size: 2rem;
}

#Ranking p.ranklink a::before,
#Ranking p.ranklink a::after {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    content: "";
    vertical-align: middle;
}

#Ranking p.ranklink a::before{
    width: 2.4rem;
    height: 2.4rem;
    -webkit-border-radius: 25%;
    border-radius: 25%;
    background:rgba(221,0,3,1.00);
}

#Ranking p.ranklink a::after{
    left: 9px;
    box-sizing: border-box;
    width: 8px;
    height: 8px;
    border: 8px solid transparent;
    border-left: 8px solid #fff;
}

#Present div.presentbox {
	margin-bottom:5em;
	padding: 1em;
	color: #000;
	text-align: center;
}

#Present div.presentbox h4 {
	border: none;
	text-align: center;
	font-size: 2.4rem;
	font-weight: 700;
	color: #000;
}

#Present div.presentbox ol {
	font-size: 2.4rem;
	font-weight: 700;
}


#Present div.presentbox p img {
	width:80%;
	height: auto;
}

#Present div#Dairy {
	border:3px solid rgba(81,197,41,1.00);
	border-radius: 1em;
}

#Present div#Dairy h4 {
	color: rgba(81,197,41,1.00);
}


#Present div#Total {
	border:3px solid rgba(187,0,3,1.00);
	border-radius: 1em;
}

#Present div#Total h4 {
	color: rgba(187,0,3,1.00);
}

#Present ol li span.shohin {
	margin-right: 0.1em;
	font-weight: 700;
	color: transparent;
	background: -webkit-linear-gradient(bottom, #B67B03 0%, #DAAF08 45%, #DAAF08 85%, #B67B03 90%);
	-webkit-background-clip: text;
	font-size: 2.6rem;
}



#Present ol {
	font-size: 1.6rem;
	text-align: justify;
}

#Present ol li {
	border-bottom: dotted 1px rgba(127,127,127,1.00);
}

#Present ol li span {
	font-size:2.4rem;
}


#Present ol li span.tou ,
#Present ol li span.ninzu {
	font-weight: 700;
}

#Present ol li span.tou {
	color: rgba(255,0,4,1.00);
}

#Present ol li span.tou:nth-of-type(2) {
	color:rgba(15,0,202,1.00);
}

#Rule dl {
	width:100%;
	text-align: center;
	display: flex;
	flex-wrap: wrap;
	justify-content:flex-start;
	border-left:1px solid #000;
	border-top:1px solid #000;
	margin: 0;
}

#Rule dl dt {
	padding: 2px;
	width:100%;
	border-top:none;
	border-right:1px solid #000;
	border-bottom:1px solid #000;
	line-height: 1.5;
	margin: 0;
}

#Rule dl dd {
	padding: 2px;
	width:calc(100%/3);
	border-right:1px solid #000;
	border-bottom:1px solid #000;
	line-height: 1.5;
	margin: 0;
}

#Rule p {
	text-indent: -1em;
}

@media only screen and (max-width: 999px){
	header article h1 {
		width:100%;
		margin-top: 0.25em;
	}
	
	section table {
		table-layout: auto;
		margin:10px 0;
		width:100%;
	}
	th, td {
		white-space: normal;
		vertical-align: middle;
	}
	section table th.day {
		width:4em;
	}

	section table th.raceno {
		width:3em;
	}

	textarea#3tan {
		width:3em;
		height: 1.5em;
		background: none;
		border: none;
	}
	main article {
		width:96%;
		margin: auto;
	}
	p.backtop {
		width:70%;
	}
	p.target_race {
		text-align: center;
		line-height: 1.25;
		font-size: 1.8rem;
	}
	p.target_race span {
		font-size: 1.6rem;
	}

	p.target_race br {
		display: inherit;
	}
	
	p.w80 {
		text-align: center;
		float: inherit;
	}
	
	section#Name {
		display:inherit;
	}

	section#Name p {
		width: 100%;
		border: none;
		text-align: center;
	}

	section#Name p.main_link {
		text-align: center;
		width: calc(100% /2);
		font-size: 1.6rem;
		float: left;
	}


	main article section#Point {
		display: block;
	}
	
	section#Point p {
		width:100%;
	}
	section#Point p#Zan ,
	section#Point p#GET {
		text-align: center;
	}
	
	#RaceList #TodayRace {
		display: inherit;
		width:100%;
		background: transparent;
	}
	#RaceList #TodayRace dl {
		width:98%;
		margin: 5px auto;
	}
	p.target_race {
		width:100%;
		float: inherit;
	}

	p.jplink {
		width:50%;
		float: inherit;
		margin: 0.5em auto;
	}
	
	label.shaban select {
		width:2em;
	}

	#Ranking p.ranking {
		width:100%;
		text-align: right;
	}

	div.kakuteibox {
		width:90%;
	}

	p.tohyo br {
		display: inherit;
	}

	p.tohyo span::before {
		content: "";
	}
	#Present div.presentbox {
		text-align: justify;
	}
	
	#Present div.presentbox ol {
		font-size: 1.4rem;
		font-weight: 700;
	}

	#Present div.presentbox ol li {
		margin-bottom: 0.5em;
	}
	

	#Rule dl dd {
		width:calc(100%/2);
	}
	
}

/*------------------------------------------------------------------------------*/
/*-- PC用 --*/

header article#Navi {
	position: fixed;
	width:120px;
	top:40px;
	right: 0px;
	margin: 0;
	z-index: 100;
}

header article#Navi ul {
	line-height: 1;
}

header article#Navi ul li {
	margin-top: 5px;
	background:rgba(255,221,181,0.80);
	border-radius: 5px 0 0 5px;
	padding: 5px 15px;;
	font-size: 1.4rem;
}

header article#Navi ul li a {
	color: rgba(0,61,146,1.00);
	font-weight: 700;
}

header article#Navi ul li:hover {
	background: rgba(255,247,154,1.00);
}

header article#Navi ul li:first-child {
	margin-top: 0;
}

header article#Navi ul li img {
	opacity: 0.75;
}

header article#Navi ul li img:hover {
	opacity: 1;
	transition: 0.2s;
}

/*------------------------------------------------------------------------------*/
/*-- スマホ用 --*/
@media screen and (max-width: 1180px) {/* 1000px以下*/
	footer {
		padding-bottom:17vw;
	}
	
	header article#Navi {
		height: 17vw;
		position: fixed;
		padding-bottom: 0px;
		width:100%;
		top: inherit;
		bottom:0;
		right: 0 ;
		left: 0;
		z-index: 1000;
		background:rgba(255,221,181,0.80);
	}
	
	header article#Navi nav ul {
		display: flex;
		background:rgba(255,221,181,0.80);
		justify-content: center;
		align-items: center;
	}
	header article#Navi nav ul li {
		background:rgba(255,221,181,0.80);
		line-height: 1;
		margin: 0;
		border-radius: 0px;
		padding:3px ;
		font-size: 0.875rem;

	}
	header article#Navi nav ul li img  {
		width:70%;
		max-width: 16vw;
		max-height: 16vw;
	}


}