html,body{
    height: 100%;
    width: 100%;
}

body {
    text-align: center;
    font-family: 'Kiwi Maru' , serif;
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
}
#stage,
#result {
    max-width: 600px;
    margin:0px auto;
    flex:1;
}
#raceDatas,
#jockyAggregate {
    font-size: .8rem;
    table-layout: auto;
    width: 100%;
	border-collapse:collapse;
}
#raceDatas td,th{
    border: #5fa05e solid 1px;
}
#jockyAggregate td,th{
    border: #5fa05e solid 1px;
}
td.result0 {
    text-align: center;
}
td.result1 {
    padding: 0 2px;
    text-align: right;
}
td.result2 {
    padding: 0 2px;
    text-align: center;
}
td.result3 {
    padding: 0 2px;
    text-align: right;
}
.result3 {
    display: none;
}

td.niwaku{
	color:white;
	background-color:black;
}

td.sanwaku{
	color:white;
	background-color:red;
}

td.yonwaku{
	color:white;
	background-color:blue;
}

td.gowaku{
	color:black;
	background-color:yellow;
}

td.rokuwaku{
	color:white;
	background-color:green;
}

td.nanawaku{
	color:black;
	background-color:orange;
}

td.hachiwaku{
	color:black;
	background-color:pink;
}

.baba,
.distance {
    cursor: pointer;
}
h1 {
    margin: 30px 0 0;
    font-size: 40px;
}
h2 {
    margin-top: 6px;
}
#control{
    margin:10px 0;
    position: relative;
    left:2rem;
}
#reset {
    border-radius: 2rem 2rem 2rem 2rem;
    padding:.3rem 1.0rem .3rem 1.0rem;
    margin-right: 5rem;
}
#prev {
    border-radius: 2rem 0 0 2rem;
    padding:.3rem .3rem .3rem 1.0rem;
}
#next {
    border-radius: 0 2rem 2rem 0;
    padding:.3rem 1.0rem .3rem .3rem;
}
button.on {
    color:#fff;
    background-color: #5fa05e;
}
button.off {
    color:#fff;
    background-color: #b4c1d1;
    cursor:default;
}
.raceType {
    cursor: pointer;
}
.hidden {
    display: none;
}

/*フッター*/
footer {
    width: 100%;
    text-align: center;
    padding: 1rem;
}
footer small {
    color: #c7c3ba;
    font-size: .875rem;
}

/*NONMOBILE SIZE*/
@media(min-width:500px) {
    #control{
        position:static;
    }
    #reset {
        margin-right: 15rem;
    }
    #prev {
        display:none;
    }
    #next {
        display:none;
    }
    #stage {
        max-width: 680px;
    }
    #raceDatas,
    #jockyAggregate {
        font-size: 1.0rem;
    }
    td.result0 {
        padding: 0 5px;
        text-align: center;
    }
    td.result1 {
        padding: 0 5px;
        text-align: right;
    }
    td.result2 {
        padding: 0 5px;
        text-align: center;
    }
    td.result3 {
        padding: 0 5px;
        text-align: right;
    }
    .result3 {
        display:table-cell;
    }
}