@charset "UTF-8";


/*-------------------------------------------------
	++ TOP MAIN SLIDER
-------------------------------------------------*/
#main {
}
.slider img {
	width:100%;
	height:auto;
}
.slider li {
	position:relative;
}
.slider li .checked {
	display:block;
	position:absolute;
	right:3vw;
	bottom:3vw;
}
.slider li .checked img {
	width:15vw;
	height:auto;
}
.slider-nav {
	display:none;
}


.slick-prev,
.slick-next {
/*
    position: absolute;
    top: 50%;
	left:50%;
*/
    display: block;
    width: 20px;
    height: 58px;
	margin-top:-29px;
    padding: 0;
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    background: transparent;
	z-index: 9998;
}
.slick-prev {
    position: absolute;
    top: 50%;
	left:4vw;
    background: url(/images/banner/slide/arrow06.png) center center no-repeat;
    background-size: 100%;
/*	margin-left:-50%;*/
}
.slick-next {
    position: absolute;
    top: 50%;
	right:4vw;
    background: url(/images/banner/slide/arrow05.png) center center no-repeat;
    background-size: 100%;
/*	margin-left:40%;*/
}



/*-------------------------------------------------
	++ TOP RACE
-------------------------------------------------*/
#topRace{
    padding: 0;
}
#topRace .secTitle {
	margin-bottom: 0;
}
#topRace .date {
	margin-bottom:3vw;
}
#topRace .raceTitle {
	text-align: left;
	font-weight:bold;
	padding:3vw 3vw 0 15vw;
	min-height:10vw;
}
#topRace .topRaceKeirin .raceTitle {
	background:url(/images/icon/keirin.png) 2vw center no-repeat;
	color:#1496be;
	border-bottom:3px solid #1496be;
}
#topRace .topRaceKeirin .raceTitle a {
    display: inline-block;
    color: #1496be;
    padding-left: 15vw;
    margin-left: -15vw;
}
#topRace .topRaceAutorace .raceTitle {
	background:url(/images/icon/auto.png) 2vw center no-repeat;
	color:#eb6363;
	border-bottom:3px solid #eb6363;
}
#topRace .topRaceAutorace .raceTitle a {
    display: inline-block;
    color: #eb6363;
    padding-left: 17vw;
    margin-left: -17vw;
}

.topRaceKeirin,
.topRaceAutorace {
	position: relative;
}
.topRaceKeirin {
	margin: 2vw 0 2.5vw 0;
}
.topRaceKeirin .link,
.topRaceAutorace .link {
	margin: 1vw 0;
}
.racepanel {
	margin-top:3vw;
	padding-left:1vw;
}
.racepanel ul li {
	width:30%;
	padding:1vw;
	margin:0 2vw 2vw 1vw;
	float:left;
	height: 18vw;
	position:relative;
	border-radius:5px;
	box-shadow:1px 1px 1px 0px rgba(0,0,0,0.3);
}
.racepanel ul li a{
	display: block;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index:1;
}
.topRaceKeirin .racepanel ul li {
	background:#e6f6ff;
	border:1px solid #1496be;
}
.topRaceAutorace .racepanel ul li {
	background:#ffeeee;
	border:1px solid #eb6363;
}
.topRaceAutorace .racepanel ul li.canceled:before ,
.topRaceKeirin .racepanel ul li.canceled:before {
	content:""; 
	width: 100%;
	height: 100%;
	background:black;
	z-index: 10; 
	top: 0px;
	left: 0px;
	display: block;
	opacity: 0.5;
	position: absolute;
}
#topRace .topRaceAutorace .moriInfo {
	position:absolute;
	top: 0vw;
	right:0;
}
#topRace .topRaceAutorace .moriInfo .moriBox {
	padding:15px;
	text-align: center;
}
#topRace .topRaceAutorace .moriInfo .moriBtn {
	display:inline-block;
	background:#ffcd44;
	padding:2vw 4vw 1vw 3vw;
	border-radius:5vw;
	color:#000;
	box-shadow:2px 2px 4px 0px rgba(0,0,0,0.2);
	cursor:pointer;
	margin-right:3vw;
}
#topRace .topRaceAutorace .moriInfo .moriBtn span {
	background:url(/images/icon/icon_mori.png) left center no-repeat;
	background-size:5vw;
	padding-left:6vw;
}
#topRace .topRaceAutorace .moriInfo .moriBox {
	right: 3vw;
	border-radius:3vw;
	width:90vw;
}
#topRace .topRaceAutorace .moriInfo .moriBox .moriRace {
	display:inline-block;
	background:#ffcd44;
	padding:2vw 3vw;
	border-radius:30px;
	color:#000;
	margin:3vw 0;
}
#topRace .topRaceAutorace .moriInfo .moriBox a {
	color:#ffcd44;
	display:block;
}


.topRaceAutorace .racepanel ul li.newMoriBox {
    background-color: #f0ffe1;
    border: 1px #5c9400 solid;
    border-radius: 0px;
    box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.3);
    width: 98%;
    padding: 0;
    margin: 0 0 2vw 0;
    display: flex;
    justify-content: space-between;
    align-items: center;}
.topRaceAutorace .racepanel ul li.newMoriBox .ImgBox {
    width: 17.5vw;
    display: inline-flex;}
.topRaceAutorace .racepanel ul li.newMoriBox .TxtBox {
    width: 78%;
    padding: 5px 5px 5px 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;}
.topRaceAutorace .racepanel ul li.newMoriBox .TxtBox .ttl {
    width: 100%;
    color: #5c9400;
    font-weight: bold;
    font-size: 120%;
    text-align: left;}
.topRaceAutorace .racepanel ul li.newMoriBox .TxtBox .support {
    width: 20%;
    height: 10vw;
    background-color: #ffcd44;
    border-radius: 5px;
    color: #1b1b1b;
    line-height: 1.2em;
    font-weight: normal;
    font-size: 100%;
    padding: 2px 0 0 0;}
.topRaceAutorace .racepanel ul li.newMoriBox .TxtBox .support a {
    position: static;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;}
.topRaceAutorace .racepanel ul li.newMoriBox .TxtBox .schedule {
    width: 78%;
    height: 10vw;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1b1b1b;
    padding: 5px;
    border-radius: 5px;
    font-size: 100%;
    line-height: 1.3em;
    font-weight: normal;
    background-color: #fff;
    border: 1px #5c9400 solid;}


.racepanel ul li .flag {
	position:absolute;
	top:0.8vw;
	left:-1vw;
	width:9.5vw;
	padding:0 1vw;
	background:#999;
	color:#FFF;
}
.racepanel ul li .flag:before {
	content: "";
    position: absolute;
    bottom: -1px;
    left: 1vw;
    width: 8vw;
    height: 1px;
    background: rgba(0,0,0,0.2);
}
.racepanel ul li .flag:after{
content: "";
  position: absolute;
  bottom: -0.8vw;
  left: -0.1vw;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent #888 transparent transparent;
  border-width: 0 0.8vw 0.8vw 0;
}
.racepanel ul li.grade-f1 .flag {background:#92df2d;}
.racepanel ul li.grade-f1 .flag:after {border-right-color:#7bb531;}
.racepanel ul li.grade-f2 .flag {background:#6375c6;}
.racepanel ul li.grade-f2 .flag:after {border-right-color:#3148a5;}
.racepanel ul li.grade-g1 .flag {background:#ff7070;}
.racepanel ul li.grade-g1 .flag:after {border-right-color:#e24646;}
.racepanel ul li.grade-g2 .flag {background:#aa78ef;}
.racepanel ul li.grade-g2 .flag:after {border-right-color:#8541e2;}
.racepanel ul li.grade-g3 .flag {background:#f5a26c;}
.racepanel ul li.grade-g3 .flag:after {border-right-color:#ec9256;}
.racepanel ul li.grade-sg .flag {background:#6f6f6f;color:#ffd500;}
.racepanel ul li.grade-sg .flag:after {border-right-color:#505050;}
.racepanel ul li.grade-gp .flag {background:#e8c208;}
.racepanel ul li.grade-gp .flag:after {border-right-color:#d2b110;}

.racepanel ul li.grade-hu2 .flag {color: #000; background: #FFF; border: 1px solid #d0d0d0;}
.racepanel ul li.grade-hu2 .flag:after {border-right-color:#999;}

.racepanel ul li .time {
	display:block;
	padding-left:0;
	font-size:100%;
	text-align: center;
	font-weight: bold;
	color: #4d4d4d;
	line-height: 1.2em;
	height: 1.2em;
}
.racepanel ul li .time.time30 {
    color: #ff0000;}


.racepanel ul li h4 {
	display:block;
	padding-left:6vw;
	font-size:116%;
	text-align: center;
}

.topRaceKeirin .racepanel ul li h4 {
	color:#1496be;
color:#06799c;}

.topRaceAutorace .racepanel ul li h4 {
color:#eb6363;}

.topRaceAutorace .link a.expectBtn,
.topRaceAutorace .link a.voteBtn {
	background-color:#eb6363;
}


.lineheight {
    line-height: 1em;}
.racepanel ul li .campaignK {
    width: 100%;
    position: absolute;
    top: auto;
    left: 0;
    bottom: 0;
    background-color: #1496be;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    font-size: 75%;
    line-height: 1.4em;
    height: 1.4em;
    text-align: center;
    color: #FFFFFF;}
.racepanel ul li .campaignA {
    width: 100%;
    position: absolute;
    top: auto;
    left: 0;
    bottom: 0;
    background-color: #eb6363;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    font-size: 70%;
    line-height: 1.4em;
    height: 1.4em;
    text-align: center;
    color: #FFFFFF;}
.campaignK_on {
	display:block;
    background-image: url("../../../images/icon/ic_check_on.png");
    background-position: 97% center;
    background-repeat: no-repeat;
    background-size: 10%;}
.campaignK_off {
	display:block;
    background-image: url("../../../images/icon/ic_check_k.png");
    background-position: 97% center;
    background-repeat: no-repeat;
    background-size: 10%;}
.campaignA_on {
	display:block;
    background-image: url("../../../images/icon/ic_check_on.png");
    background-position: 97% center;
    background-repeat: no-repeat;
    background-size: 10%;}
.campaignA_off {
	display:block;
    background-image: url("../../../images/icon/ic_check_a.png");
    background-position: 97% center;
    background-repeat: no-repeat;
    background-size: 10%;}

/*-------------------------------------------------
	++ TOP INFORMATION
-------------------------------------------------*/
#topInformation {
	background:#fafaf5;}
.ybt2px2 {
	border-top:2px solid #ffd500;
    width: 100vw !important;
    margin: 0 calc(50% - 50vw);
    padding-bottom: 4vw;}

.infoContenthalf {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;}
.infoContenthalfItem {width: 100%;position: relative;margin-bottom: 4vw;}
.infoItemTtl {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 20px;
    padding-top: 5px;}

.infoContent {
	margin-top:3vw;
	padding:0 3vw;
}
.infoContenthalfItem ul li,
.infoContent ul li {
	border-bottom:1px solid #d0d0d0;
	margin-bottom:1vw;
	padding:2vw;
	text-align: left;
}
.infoContenthalfItem ul li a,
.infoContent ul li a {
	display:block;
	background:url(/images/arrow/arrow_gray.png) right center no-repeat;
}
.infoContent ul li a .title {
	display:block;
}

/*-------------------------------------------------
	++ TOP CGI�E�p�E�[�E�c�E�p
-------------------------------------------------*/
.toppage_pinfo{
	overflow-wrap: break-word;
    word-break: break-all;
}


/*-------------------------------------------------
	++ TOP POPULAR
-------------------------------------------------*/
#topPopular {
	position:relative;
}
.popularContent ul li {
	text-align: left;
	padding:0 5vw 10vw 5vw;
	/* background:url(/images/arrow/arrow_yellow.png) right 5vw bottom 5vw no-repeat; */
	padding-bottom: 5vw;
}
.popularContent ul li img {
	width:100%;
	height:auto;
}
.popularContent ul li h3 {
	font-size:116%;
}

#topRace .topRaceKeirin .topRaceKeirinBtn,
#topRace .topRaceAutorace .topRaceAutoraceBtn {
        position: absolute;
        top: -2vw;
        right: 2%;}

@media screen and (min-width:400px) and ( max-width:640px) {
#topRace .topRaceKeirin .topRaceKeirinBtn,
#topRace .topRaceAutorace .topRaceAutoraceBtn {
        top: -1vw;}

}


/*2023060�lj�*/
#topRace .topRaceKeirin {position: relative;}
#topRace .topRaceKeirin .featuredrace {
	position:absolute;
	top: 0;
	right:0;}
#topRace .topRaceKeirin .featuredrace {
	display:inline-block;
	background:#ffcd44;
	padding: 0vw 3vw;
	border-radius:5vw;
	color:#000;
	box-shadow:2px 2px 4px 0px rgba(0,0,0,0.2);
	cursor:pointer;
	margin-right:3vw;}
#topRace .topRaceKeirin .featuredrace span {
	background:url(/images/icon/icon_keirin2.png) 4vw center no-repeat;
	background-size:5vw;
    display: inline-block;}
#topRace .topRaceKeirin .featuredrace span a {
    width: 100%;
	display:block;
    padding:2vw 4vw 1vw 10vw;}

#topRace .topRaceKeirin .featuredrace a:link,#topRace .topRaceKeirin .featuredrace a:visited {color:#000;text-decoration:none;}
#topRace .topRaceKeirin .featuredrace a:hover,#topRace .topRaceKeirin .featuredrace a:active {color:#000;text-decoration:none;}

/*-------------------------------------------------
	++ TOP POPULAR
-------------------------------------------------*/


.secTitle2025 {
	font-size:116%;
	position: relative;
	display: block;
	margin-bottom:5vw;
	text-align: left;}
.pointBox2025 {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    background-color: #fffcdf;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 20px;
    position: relative;}
.pointBox2025Box {
    padding: 0px 0px;
    margin: 0;
    width: 82%;}
.pointBox2025Box2 {
    width: 15%;
    position: absolute; 
    top: 50%;
    right: 10px;
    transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);}
.pointBox2025Box a,.pointBox2025Box2 a {display: block;}
.pointBox2025Box a:hover,.pointBox2025Box2 a:hover {opacity: 0.8;}
.exchange2025Box {
    background: linear-gradient(90deg, #f09500 25%, #2398cd 75%);
    background: -webkit-linear-gradient(top, #f09500 25%, #2398cd 75%);
    width: 100%;
    height: 70px;
    border-radius: 20px;
    color: #fff;
    font-size: 110%;
    line-height: 70px;
    font-weight: bold;
    position: relative;
    display: inline-block;
    padding: 0px;}
.exchange2025Box:before {
    content: '';
    width: 10px;
    height: 10px;
    border: 0;
    border-bottom: solid 2px #fff;
    border-right: solid 2px #fff;
    transform: rotate(45deg);
    position: absolute;
    left: 0;
    right: 0;
    bottom: 10px;
    margin: auto;}
.pointBox2025Ttl {
    display: inline-block;
    float: left;
    color: #fff;
    font-size: 100%;
    font-weight: bold;
    text-align: center;
    padding: 0px;
    width: 48%;
    height: 35px;
    line-height: 37px;
    margin: 3px 0;
    border-top-left-radius:5px;
    border-bottom-left-radius:5px;}
.pointBox2025Detail {
    display: inline-block;
    float: left;
    background-color: #fff;
    color: #000;
    font-size: 105%;
    font-weight: bold;
    text-align: right;
    padding: 0 10px 0 0;
    width: 52%;
    height: 35px;
    line-height: 35px;
    margin: 3px 0;
    border-top-right-radius:5px;
    border-bottom-right-radius:5px;}
.PB2025bgY {background-color: #f09500;}
.PB2025bdY {border: 2px #f09500 solid;}
.PB2025bgB {background-color: #2398cd;}
.PB2025bdB {border: 2px #2398cd solid;}