@import "base.css";
@media screen and (min-width: 751px) {
  .sp {
    display: none !important;
  }
  .pc {
    display: block;
  }
  .navi01, .navi01h, .navi02, .navi03, .navi04 {
    cursor: pointer;
  }
}
@media screen and (max-width: 750px) {
  .pc {
    display: none !important;
  }
  .sp {
    display: block;
  }
  .fit {
    width: 100%;
    height: auto;
  }
  a:hover {
    opacity: 1;
  }
}
.colRed {
  color: #ff0000;
}

.colBlue {
  color: #0078ff;
}

.colOrange {
  color: #ff9100;
}

.sizeL {
  font-size: 1.2rem;
}

.sizeM {
  font-size: 1.1rem;
}

.sizeN {
  font-size: 1rem;
}

.sizeS {
  font-size: 0.9rem;
}

img {
  max-width: 100%;
  height: auto;
}

/*-------------------------------------------------
	++ BASE
-------------------------------------------------*/
body {
  position: relative;
  font-size: 16px;
}
@media screen and (min-width: 751px) {
  body::before {
    content: "";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100vh;
    background: url(../../img/2026dirtclassic/bg01.jpg) no-repeat center center;
    background-size: cover;
  }
}
@media screen and (max-width: 750px) {
  body {
    font-size: 4.8vw;
  }
}

#container {
  margin: 0 auto;
  text-align: center;
  position: relative;
  width: 100%;
}
#contents {
  margin: 0 auto;
  width: 100%;
  position: relative;
  background-color: #FFF;
  width: 100%;
}
@media screen and (min-width: 751px) {
  #contents {
    max-width: 600px;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.25);
    min-height: 100vh;
  }
}

@media screen and (min-width: 751px) {
  #mainContentWrap {
    display: flex;
    flex-direction: column;
  }
}

@media screen and (min-width: 751px) {
  .fixBox {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    gap: 100px;
  }
}
@media screen and (max-width: 1100px) {
  .fixBox {
    gap: 5vw;
  }
}
@media (max-width: 820px) and (min-width: 751px) {
  .fixBox {
    justify-content: center;
  }
}
.fixBox .fixBoxLeft {
  width: calc(100% - 600px - 100px);
}
@media screen and (max-width: 1100px) {
  .fixBox .fixBoxLeft {
    width: calc(100% - 600px - 5vw);
  }
}
@media screen and (max-width: 750px) {
  .fixBox .fixBoxLeft {
    position: fixed;
    top: 0;
    left: 0;
    background: #00005d;
    z-index: 998;
    transition: all 0.2s ease-in;
    transform: translateX(-100%);
    width: 100%;
  }
  .fixBox .fixBoxLeft.current {
    transform: translateX(0%);
  }
}
@media (max-width: 820px) and (min-width: 751px) {
  .fixBox .fixBoxLeft {
    position: fixed;
    top: 0;
    left: 0;
    background: #00005d;
    z-index: 998;
    transition: all 0.2s ease-in;
    transform: translateX(-100%);
    width: 100%;
  }
  .fixBox .fixBoxLeft.current {
    transform: translateX(0%);
  }
}

#main {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}

/*-------------------------------------------------
	++ MENU
-------------------------------------------------*/
#menuBtn {
  display: block;
  position: fixed;
  top: 3vw;
  right: 3vw;
  cursor: pointer;
  width: 10vw;
  aspect-ratio: 1/1;
  background-color: #00005d;
  border-radius: 100%;
  z-index: 999;
}
#menuBtn span {
  display: inline-block;
  position: absolute;
  height: 0.8vw;
  background-color: white;
  transition: all 0.2s ease-in;
  right: 25%;
  top: 50%;
  width: 50%;
  transform: translateY(-50%);
}
#menuBtn span:nth-of-type(1) {
  margin-top: -1.8vw;
}
#menuBtn span:nth-of-type(4) {
  margin-top: 1.8vw;
}
#menuBtn.current span:nth-of-type(1) {
  display: none;
}
#menuBtn.current span:nth-of-type(2) {
  transform: rotate(45deg);
  margin-top: 0;
}
#menuBtn.current span:nth-of-type(3) {
  transform: rotate(-45deg);
  margin-top: 0;
}
#menuBtn.current span:nth-of-type(4) {
  display: none;
}

@media screen and (min-width: 751px) {
  #menuBtn,
  .menuWrap {
    display: none;
  }
}
@media (max-width: 820px) and (min-width: 751px) {
  #menuBtn {
    display: block;
  }
}
/*-------------------------------------------------
	++ HEAD
-------------------------------------------------*/
.pcMenu {
  position: sticky;
  top: 0;
  width: min(100%, 450px);
  margin: 0 auto;
  padding: 20px 0;
  text-align: left;
}
@media screen and (min-width: 751px) and (max-height: 600px) {
  .pcMenu {
    padding: 3vh 0;
  }
}
@media screen and (max-width: 750px) {
  .pcMenu {
    transition: all 0.2s ease-in;
    background-color: #00005d;
    width: 100%;
    height: 100vh;
    padding: 20vw 5vw;
  }
}
@media (max-width: 820px) and (min-width: 751px) {
  .pcMenu {
    transition: all 0.2s ease-in;
    background-color: #00005d;
    width: 100%;
    height: 100vh;
    padding: 20vw 5vw;
  }
}

.menuTitle {
  margin-bottom: min(20px, 5vw);
}
@media screen and (max-width: 750px) {
  .menuTitle {
    text-align: center;
  }
}
@media screen and (min-width: 751px) and (max-height: 600px) {
  .menuTitle {
    width: 20vh;
    margin-bottom: 2vh;
  }
}

.bnrBox {
  margin-top: min(30px, 5vw);
}
@media screen and (max-width: 750px) {
  .bnrBox {
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
  }
}

.menuLink {
  display: flex;
  flex-direction: column;
  gap: min(10px, 3vw);
}
@media screen and (min-width: 751px) and (max-height: 600px) {
  .menuLink {
    gap: 2vh;
  }
}
.menuLink li a {
  display: block;
  color: #FFF;
  position: relative;
}
@media screen and (min-width: 751px) {
  .menuLink li a {
    padding: 10px 50px;
    border-radius: 9999px;
  }
}
@media screen and (min-width: 751px) and (max-height: 600px) {
  .menuLink li a {
    padding: 1vh 7.5vh;
  }
}
.menuLink li a::before {
  content: "";
  display: block;
  width: 26px;
  aspect-ratio: 1/1;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
}
@media screen and (min-width: 751px) and (max-height: 600px) {
  .menuLink li a::before {
    width: 4vh;
    left: 1.8vh;
  }
}
@media screen and (max-width: 750px) {
  .menuLink li a::before {
    width: 4vw;
    left: 0;
  }
}
@media screen and (min-width: 751px) {
  .menuLink li a.toRace {
    font-size: 1.12em;
  }
}
.menuLink li a.blank::after {
  content: "";
  display: block;
  width: 18px;
  aspect-ratio: 1/1;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg  xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'  preserveAspectRatio='none'%3E%3Cg%3E%3Cpath fill='%23FFFFFF' d='M15.8,8.9h-1.2c-.2,0-.5.2-.5.5v5.5c0,.3-.2.5-.5.5H3.1c-.3,0-.5-.2-.5-.5V4.4c0-.3.2-.5.5-.5h5.8c.2,0,.5-.2.5-.5v-1.2c0-.2-.2-.5-.5-.5H3.1c-1.5,0-2.6,1.2-2.6,2.6v10.5c0,1.5,1.2,2.6,2.6,2.6h10.5c1.5,0,2.6-1.2,2.6-2.6v-5.5c0-.2-.2-.5-.5-.5Z' /%3E%3Cpath fill='%23FFFFFF' d='M17.1.5h-4.8c-.2,0-.5.2-.5.5v1.2c0,.2.2.5.5.5h1.6l-6.2,6.2c-.2.2-.2.5,0,.6l.9.9c0,0,.2.1.3.1s.2,0,.3-.1l6.2-6.2v1.6c0,.2.2.5.5.5h1.2c.2,0,.5-.2.5-.5V.9c0-.2-.2-.5-.5-.5Z' /%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}
@media screen and (min-width: 751px) and (max-height: 600px) {
  .menuLink li a.blank::after {
    width: 3.6vh;
  }
}
@media screen and (max-width: 750px) {
  .menuLink li:not(.spat4Link):nth-of-type(1) a {
    border-top: 1px dotted #FFF;
  }
}
@media screen and (min-width: 751px) {
  .menuLink li:not(.spat4Link) a {
    background-color: rgba(0, 0, 53, 0.7);
  }
}
@media screen and (max-width: 750px) {
  .menuLink li:not(.spat4Link) a {
    padding: 3vw 10vw;
    text-align: left;
    border-bottom: 1px dotted #FFF;
  }
}
.menuLink li:not(.spat4Link) a::before {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg  xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'  preserveAspectRatio='none'%3E%3Cg%3E%3Cpath fill='%23FFFFFF' d='M13,.2C5.9.2.2,5.9.2,13s5.7,12.8,12.8,12.8,12.8-5.7,12.8-12.8S20.1.2,13,.2ZM13,23.7c-5.9,0-10.7-4.8-10.7-10.7S7.1,2.3,13,2.3s10.7,4.8,10.7,10.7-4.8,10.7-10.7,10.7Z' /%3E%3Cpath fill='%23FFFFFF' d='M11.6,6.9c-.4-.4-1.1-.4-1.5,0-.4.4-.4,1.1,0,1.5l4.6,4.6-4.6,4.6c-.4.4-.4,1.1,0,1.5.4.4,1.1.4,1.5,0l5.3-5.3c.4-.4.4-1.1,0-1.5l-5.3-5.3Z' /%3E%3C/g%3E%3C/svg%3E");
}
@media screen and (max-width: 750px) {
  .menuLink li.spat4Link {
    margin-top: 5vw;
  }
}
.menuLink li.spat4Link a {
  background: #0025b6;
  border: 1px solid #FFF;
}
.menuLink li.spat4Link a::before {
  width: 32px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg  xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'  preserveAspectRatio='none'%3E%3Cg%3E%3Cpath fill='%23FFFFFF' d='M31.1,10.2s-.5-5.4-1.3-6.3l-.3-1.8-1.2,1.7s-5-1.6-7.8,5.7c0,0-.1.2-.3.5-.4-.1-.7-.3-.8-.4-.2-.2-.2-.8-.1-1.1.1-.4,0-2.1,0-2.1,1,0,1.4-1.1,1.4-1.1l.5.3c.3-.4,0-1.4-.1-1.7-.8-1.8-2.7-.8-2.7-.8-1.2.9-.2,1.5-.2,1.5-.5,0-2.2.3-2.9.6-1.3.5-3.7,2.9-3.7,2.9-1.2,1.2-.5,2.3-.5,2.3.4.8,3.5,2.5,3.5,2.5.1.1.2.3.3.5-.7,0-1.5,0-2.3-.3-1.6-.5-3-1.9-6.5,2,0,0-6.3,0-4.9,7.9,0,0,2.4-1.1,3-4.3,0,0,.5-2.5,1.7-2.2,0,0-.8,3.9,4,5.8,0,0,0,1.2-.7,1.8,0,0-.9,1.4,1.9,2.4,0,0,2.8,1.2,3.4,2.3,0,0,.6.4,1.3.2,0,0-.3.9,1,.9,0,0,1.2.2,1.2-.4,0,0-.4-1-1.1-1.1,0,0-1-1.3-2.2-1.5,0,0-2.2-.2-2.1-2.3,0,0,1.4-2.3,1.1-4.4,0,0,7.2,1.5,9.5-.2,0,0,.2.7.8.7v.6c0,0-.4,0-.5.5,0,0-.1.3.5.3v.7s0,.6,1.2-.1c0,0,2.2-.3,2.9-1.6,0,0,3.1-1.3,2.2-2.8,0,0-.6-1.3-2-1h-1.6c0,0,.9-1.5-.2-2.8,0,0,1.1-3.8.8-6,0,0,.7,1.9,1.7,2.2,0,0-.1,1.4,1.7,1.2,0,0,1.1-.1.8-1.7ZM17.7,8.3s.2,1.2.4,1.4c0,0-.7,0-.8-.3,0-.2-.1-.9-.1-.9,0,0,.5-.2.5-.2ZM17.6,12.4c-.5-.9-2.1-2.1-2.1-2.1-.9-.9.5-1.2.5-1.2l.3,1.3c.6,1,3,.5,3,.5h0c-.5.5-1,1-1.8,1.5ZM27.5,19.5c-.5.8-2.2,1.2-2.2,1.2.3-.5,2.2-1.2,2.2-1.2Z' /%3E%3C/g%3E%3C/svg%3E");
}
@media screen and (min-width: 751px) and (max-height: 600px) {
  .menuLink li.spat4Link a::before {
    width: 4.4vh;
  }
}
@media screen and (max-width: 750px) {
  .menuLink li.spat4Link a {
    border-radius: 2vw;
    padding: 5vw 12vw;
    text-align: center;
  }
  .menuLink li.spat4Link a::before {
    width: 7.2vw;
    left: 3vw;
  }
}

.newsArea {
  background-color: #FFF;
  padding: min(20px, 2vw) min(20px, 3vw);
  text-align: left;
  position: relative;
}
@media screen and (min-width: 751px) {
  .newsArea {
    margin-top: 30px;
  }
}
@media screen and (min-width: 751px) and (max-height: 600px) {
  .newsArea {
    margin-top: 3vh;
    padding: 3vh;
  }
}
.newsArea .menuTitle {
  margin-bottom: 10px;
}
@media screen and (min-width: 751px) and (max-height: 600px) {
  .newsArea .menuTitle {
    width: 20vh;
    margin-bottom: 1vh;
  }
}
@media screen and (max-width: 750px) {
  .newsArea .menuTitle {
    width: 25vw;
    margin-bottom: 2vw;
  }
  .newsArea .menuTitle img {
    width: 100%;
    height: auto;
  }
}
.newsArea ul li {
  padding-left: 20px;
  position: relative;
  font-size: min(14px, 3.2vw);
  clear: both;
  padding: 5px 0 5px 17px;
  border-bottom: 1px dotted #CCC;
}
.newsArea ul li:not(:last-child) {
  margin-bottom: 5px;
}
@media screen and (max-width: 750px) {
  .newsArea ul li {
    padding-left: 5vw;
  }
  .newsArea ul li:not(:last-child) {
    margin-bottom: 1vw;
  }
}
.newsArea ul li::before {
  content: "";
  display: block;
  width: 12px;
  aspect-ratio: 1/1;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg  xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'  preserveAspectRatio='none'%3E%3Cg%3E%3Cpath fill='%23c88f2f' d='M13,.2C5.9.2.2,5.9.2,13s5.7,12.8,12.8,12.8,12.8-5.7,12.8-12.8S20.1.2,13,.2ZM13,23.7c-5.9,0-10.7-4.8-10.7-10.7S7.1,2.3,13,2.3s10.7,4.8,10.7,10.7-4.8,10.7-10.7,10.7Z' /%3E%3Cpath fill='%23c88f2f' d='M11.6,6.9c-.4-.4-1.1-.4-1.5,0-.4.4-.4,1.1,0,1.5l4.6,4.6-4.6,4.6c-.4.4-.4,1.1,0,1.5.4.4,1.1.4,1.5,0l5.3-5.3c.4-.4.4-1.1,0-1.5l-5.3-5.3Z' /%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  position: absolute;
  top: 8px;
  left: 0px;
}
@media screen and (max-width: 750px) {
  .newsArea ul li::before {
    width: 3vw;
    top: 2vw;
  }
}
.newsArea ul li a {
  display: block;
}
.newsArea ul li .date {
  width: 85px;
  display: table-cell;
}
.newsArea ul li .text {
  width: calc(100% - 85px);
  display: table-cell;
}

/*-------------------------------------------------
	++ CONTENTS
-------------------------------------------------*/
#logo {
  margin-bottom: 470px;
  padding: 30px 30px 0 30px;
  position: relative;
}
@media screen and (max-width: 750px) {
  #logo {
    margin-bottom: 74vw;
    padding: 10vw 7vw 0 7vw;
  }
}

.nextPanel {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 997;
  pointer-events: none;
}
@media screen and (min-width: 751px) {
  .nextPanel {
    padding-bottom: 25px;
  }
}
@media screen and (max-width: 750px) {
  .nextPanel {
    padding-bottom: 4vw;
  }
}
.nextPanel a {
  display: inline-block;
  pointer-events: all;
}
@media screen and (max-width: 750px) {
  .nextPanel a {
    max-width: 72vw;
  }
}

.tabSwitch {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  background-color: #00005d;
  padding-bottom: 6px;
}
@media screen and (max-width: 750px) {
  .tabSwitch {
    padding-bottom: 1vw;
  }
}
.tabSwitch .tab {
  background-color: #00005d;
  color: #FFF;
  font-size: min(24px, 5vw);
  font-weight: bold;
  width: 50%;
  position: relative;
  line-height: 1;
}
.tabSwitch .tab:not(.current) {
  background-color: #7878c5;
}
.tabSwitch .tab:not(.current) a, .tabSwitch .tab:not(.current) span {
  opacity: 0.3;
}
.tabSwitch .tab a, .tabSwitch .tab span {
  color: #FFF;
  display: block;
  padding: 28px 23px 18px 23px;
}
@media screen and (max-width: 750px) {
  .tabSwitch .tab a, .tabSwitch .tab span {
    padding: 5.5vw 5vw 3.8vw 5vw;
  }
}
.tabSwitch .tab.current:before {
  content: "";
  display: block;
  width: calc(100% - 10px);
  height: 50%;
  background-color: rgba(255, 255, 255, 0.18);
  position: absolute;
  top: 5px;
  left: 5px;
}

.tabSection {
  width: 100%;
  overflow: hidden;
}

.raceContent {
  padding: 20px 13px 20px 13px;
  transition: all 0.3s ease-in;
}
@media screen and (max-width: 750px) {
  .raceContent {
    padding: 3vw 3vw 5vw 3vw;
  }
}
.raceContent h2 {
  background-color: #00005d;
  border-radius: 10px;
  padding: 10px;
  font-size: min(24px, 4vw);
  color: #FFF;
  margin-bottom: 10px;
}
.raceContent .tips {
  padding: 20px 0;
}
@media screen and (max-width: 750px) {
  .raceContent .tips {
    padding: 3vw 0;
  }
}

.racePanel {
  position: relative;
}
.racePanel:not(:last-child) {
  margin-bottom: 10px;
}
@media screen and (max-width: 750px) {
  .racePanel:not(:last-child) {
    margin-bottom: 2.3vw;
  }
}
.racePanel > a {
  display: block;
}
.racePanel.tipopen .raceTip {
  pointer-events: all;
}
.racePanel .raceTip {
  position: absolute;
  top: 0;
  right: 0;
  width: 40%;
  height: 100%;
  pointer-events: none;
}
.racePanel .raceTip.withArrow .tiplabel {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 1.3" ><rect x="9.5" y="0" width="3" height="1.3" fill="%23e83331"/><rect x="12.5" y="0" width="1" height="1.3" fill="%23FFFFFF"/><rect x="8.5" y="0" width="1" height="1.3" fill="%23FFFFFF"/></svg>');
  background-position: center top;
  background-repeat: repeat-y;
  background-size: 22px;
}
@media screen and (max-width: 750px) {
  .racePanel .raceTip.withArrow .tiplabel {
    background-size: 4.4vw;
  }
}
.racePanel .raceTip.withArrow .tiplabel::after {
  content: "";
  width: 100%;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 23" ><polygon points="12.6 0 12.6 1 20.1 1 11 19.9 1.9 1 9.6 1 9.6 0 .3 0 11 22.2 21.7 0 12.6 0" fill="%23FFFFFF"/><polygon points="12.6 1 12.6 0 9.6 0 9.6 1 1.9 1 11 19.9 20.1 1 12.6 1" fill="%23e83331"/></svg>');
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 22px;
  aspect-ratio: 22/23;
  position: absolute;
  top: 100%;
  left: 0;
}
@media screen and (max-width: 750px) {
  .racePanel .raceTip.withArrow .tiplabel::after {
    background-size: 4.4vw;
  }
}
.racePanel .raceTip .tiplabel {
  transform: translateY(-13px);
  position: absolute;
  top: 50%;
  z-index: 800;
  width: 26px;
  transition: all 0.3s;
}
.racePanel .raceTip .tiplabel.current {
  z-index: 899;
}
.racePanel .raceTip .tiplabel.current .tooltip {
  display: block;
}
@media screen and (max-width: 750px) {
  .racePanel .raceTip .tiplabel {
    transform: translateY(-2.2vw);
    width: 5.2vw;
  }
}
.racePanel .raceTip .tiplabel img {
  width: 100%;
  height: auto;
}
.racePanel .raceTip .tiplabel.col1 {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 1.3" ><rect x="9.5" y="0" width="3" height="1.3" fill="%23e83331"/><rect x="12.5" y="0" width="1" height="1.3" fill="%23FFFFFF"/><rect x="8.5" y="0" width="1" height="1.3" fill="%23FFFFFF"/></svg>');
  background-position: center top;
  background-repeat: repeat-y;
  background-size: 22px;
}
@media screen and (max-width: 750px) {
  .racePanel .raceTip .tiplabel.col1 {
    background-size: 4.4vw;
  }
}
.racePanel .raceTip .tiplabel.col1::after {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 23" ><polygon points="12.6 0 12.6 1 20.1 1 11 19.9 1.9 1 9.6 1 9.6 0 .3 0 11 22.2 21.7 0 12.6 0" fill="%23FFFFFF"/><polygon points="12.6 1 12.6 0 9.6 0 9.6 1 1.9 1 11 19.9 20.1 1 12.6 1" fill="%23e83331"/></svg>');
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 22px;
}
@media screen and (max-width: 750px) {
  .racePanel .raceTip .tiplabel.col1::after {
    background-size: 4.4vw;
  }
}
.racePanel .raceTip .tiplabel.col2 {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 1.3" ><rect x="9.5" y="0" width="3" height="1.3" fill="%230059ff"/><rect x="12.5" y="0" width="1" height="1.3" fill="%23FFFFFF"/><rect x="8.5" y="0" width="1" height="1.3" fill="%23FFFFFF"/></svg>');
  background-position: center top;
  background-repeat: repeat-y;
  background-size: 22px;
}
@media screen and (max-width: 750px) {
  .racePanel .raceTip .tiplabel.col2 {
    background-size: 4.4vw;
  }
}
.racePanel .raceTip .tiplabel.col2::after {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 23" ><polygon points="12.6 0 12.6 1 20.1 1 11 19.9 1.9 1 9.6 1 9.6 0 .3 0 11 22.2 21.7 0 12.6 0" fill="%23FFFFFF"/><polygon points="12.6 1 12.6 0 9.6 0 9.6 1 1.9 1 11 19.9 20.1 1 12.6 1" fill="%230059ff"/></svg>');
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 22px;
}
@media screen and (max-width: 750px) {
  .racePanel .raceTip .tiplabel.col2::after {
    background-size: 4.4vw;
  }
}
.racePanel .raceTip .tiplabel.col3 {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 1.3" ><rect x="9.5" y="0" width="3" height="1.3" fill="%23a1a1a1"/><rect x="12.5" y="0" width="1" height="1.3" fill="%23FFFFFF"/><rect x="8.5" y="0" width="1" height="1.3" fill="%23FFFFFF"/></svg>');
  background-position: center top;
  background-repeat: repeat-y;
  background-size: 22px;
}
@media screen and (max-width: 750px) {
  .racePanel .raceTip .tiplabel.col3 {
    background-size: 4.4vw;
  }
}
.racePanel .raceTip .tiplabel.col3::after {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 23" ><polygon points="12.6 0 12.6 1 20.1 1 11 19.9 1.9 1 9.6 1 9.6 0 .3 0 11 22.2 21.7 0 12.6 0" fill="%23FFFFFF"/><polygon points="12.6 1 12.6 0 9.6 0 9.6 1 1.9 1 11 19.9 20.1 1 12.6 1" fill="%23a1a1a1"/></svg>');
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 22px;
}
@media screen and (max-width: 750px) {
  .racePanel .raceTip .tiplabel.col3::after {
    background-size: 4.4vw;
  }
}
.racePanel .raceTip .tiplabel.left1 {
  left: 0%;
}
@media screen and (max-width: 750px) {
  .racePanel .raceTip .tiplabel.left1 .tooltip {
    transform: translate(-65%, 8px);
  }
  .racePanel .raceTip .tiplabel.left1 .tooltip::before {
    left: 65%;
  }
}
.racePanel .raceTip .tiplabel.left2 {
  left: 15%;
}
@media screen and (max-width: 750px) {
  .racePanel .raceTip .tiplabel.left2 .tooltip {
    transform: translate(-65%, 8px);
  }
  .racePanel .raceTip .tiplabel.left2 .tooltip::before {
    left: 65%;
  }
}
.racePanel .raceTip .tiplabel.left3 {
  left: 30%;
}
.racePanel .raceTip .tiplabel.left3 .tooltip {
  transform: translate(-65%, 8px);
}
.racePanel .raceTip .tiplabel.left3 .tooltip::before {
  left: 65%;
}
@media screen and (max-width: 750px) {
  .racePanel .raceTip .tiplabel.left3 .tooltip {
    transform: translate(-85%, 8px);
  }
  .racePanel .raceTip .tiplabel.left3 .tooltip::before {
    left: 85%;
  }
}
.racePanel .raceTip .tiplabel.left4 {
  left: 45%;
}
.racePanel .raceTip .tiplabel.left4 .tooltip {
  transform: translate(-85%, 8px);
}
.racePanel .raceTip .tiplabel.left4 .tooltip::before {
  left: 85%;
}
.racePanel .raceTip .tiplabel.left5 {
  left: 60%;
}
.racePanel .raceTip .tiplabel.left5 .tooltip {
  transform: translate(-85%, 8px);
}
.racePanel .raceTip .tiplabel.left5 .tooltip::before {
  left: 85%;
}
@media screen and (max-width: 750px) {
  .racePanel .raceTip .tiplabel.left5 .tooltip {
    transform: translate(-88%, 8px);
  }
  .racePanel .raceTip .tiplabel.left5 .tooltip::before {
    left: 88%;
  }
}
.racePanel .raceTip .tiplabel.left6 {
  left: 75%;
}
.racePanel .raceTip .tiplabel.left6 .tooltip {
  transform: translate(-85%, 8px);
}
.racePanel .raceTip .tiplabel.left6 .tooltip::before {
  left: 85%;
}
@media screen and (max-width: 750px) {
  .racePanel .raceTip .tiplabel.left6 .tooltip {
    transform: translate(-95%, 8px);
  }
  .racePanel .raceTip .tiplabel.left6 .tooltip::before {
    left: 93%;
  }
}
.racePanel .raceTip .tiplabel.shitei {
  width: 66px;
}
@media screen and (max-width: 750px) {
  .racePanel .raceTip .tiplabel.shitei {
    width: 13.2vw;
  }
}
.racePanel .raceTip .tiplabel.shitei .tipTrgr {
  aspect-ratio: 1/0.55;
}
.racePanel .raceTip .tipTrgr {
  position: absolute;
  top: -10px;
  left: -10px;
  display: block;
  z-index: 801;
  width: calc(100% + 20px);
  aspect-ratio: 1/1;
  cursor: pointer;
  pointer-events: visible;
}
.racePanel .raceTip .tipTrgr::after {
  content: "";
  width: 10px;
  aspect-ratio: 1/1;
  background-color: #ff9100;
  border-radius: 100%;
  position: absolute;
  top: 7px;
  right: 7px;
}
.racePanel .raceTip .tooltip {
  display: none;
  position: absolute;
  padding: min(10px, 5vw);
  font-size: min(16px, 3vw);
  text-align: left;
  background: #c88f2f;
  color: #FFF;
  font-size: 13px;
  border-radius: 5px;
  width: -moz-fit-content;
  width: fit-content;
  width: min(280px, 80vw);
  left: 50%;
  transition: all 0.3s;
  transform: translate(-50%, 8px);
  z-index: 900;
}
.racePanel .raceTip .tooltip::before {
  content: "";
  display: block;
  width: 10px;
  aspect-ratio: 10/22;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg  xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 22'%3E%3Cg%3E%3Cpolygon fill='%23c88f2f' points='0 22 5 0 10 22 0 22' /%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
}
.racePanel .raceTip .tooltip .tooltipClose {
  position: absolute;
  top: -10px;
  right: -10px;
  background: #c88f2f;
  border: 1px solid #FFF;
  border-radius: 100%;
  width: 20px;
  aspect-ratio: 1/1;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg  xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cg%3E%3Cpath fill='%23FFFFFF' d='M10,9.3l-.7.7-4.3-4.3L.7,10,0,9.3l4.3-4.3L0,.7.7,0l4.3,4.3L9.3,0l.7.7-4.3,4.3s4.3,4.3,4.3,4.3Z' /%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 60% 60%;
  cursor: pointer;
}
.racePanel#race2_03 .raceTip.withArrow .tiplabel {
  height: 1180px;
}
.racePanel#race2_05 .raceTip.withArrow .tiplabel {
  height: 796px;
}
.racePanel#race2_06 .raceTip.withArrow .tiplabel {
  height: 630px;
}
.racePanel#race2_07 .raceTip.withArrow .tiplabel {
  height: 463px;
}
.racePanel#race2_08 .raceTip.withArrow .tiplabel {
  height: 680px;
}
.racePanel#race3_02 .raceTip.withArrow .tiplabel {
  height: 1153px;
}
.racePanel#race3_03 .raceTip.withArrow .tiplabel {
  height: 937px;
}
.racePanel#race3_04 .raceTip.withArrow .tiplabel {
  height: 770px;
}
.racePanel#race3_06 .raceTip.withArrow .tiplabel {
  height: 486px;
}
.racePanel#race3_07 .raceTip.withArrow .tiplabel {
  height: 320px;
}
.racePanel#race3_09 .raceTip.withArrow .tiplabel {
  height: 552px;
}
.racePanel#race3_10 .raceTip.withArrow .tiplabel {
  height: 285px;
}
.racePanel#race3_17 .raceTip.withArrow .tiplabel {
  height: 135px;
}
.racePanel#race3_18 .raceTip.withArrow .tiplabel.no3 {
  height: 185px;
}
.racePanel#race3_18 .raceTip.withArrow .tiplabel.no1 {
  height: 407px;
}
.racePanel#race3_19 .raceTip.withArrow .tiplabel {
  height: 190px;
}
.racePanel#race3_08 .raceTip .tiplabel.shitei {
  transform: translateY(-36px) translateX(-68px);
}
@media screen and (max-width: 750px) {
  .racePanel#race2_03 .raceTip.withArrow .tiplabel {
    height: 198vw;
  }
  .racePanel#race2_05 .raceTip.withArrow .tiplabel {
    height: 134vw;
  }
  .racePanel#race2_06 .raceTip.withArrow .tiplabel {
    height: 106vw;
  }
  .racePanel#race2_07 .raceTip.withArrow .tiplabel {
    height: 78vw;
  }
  .racePanel#race2_08 .raceTip.withArrow .tiplabel {
    height: 113vw;
  }
  .racePanel#race3_02 .raceTip.withArrow .tiplabel {
    height: 192vw;
  }
  .racePanel#race3_03 .raceTip.withArrow .tiplabel {
    height: 156vw;
  }
  .racePanel#race3_04 .raceTip.withArrow .tiplabel {
    height: 128vw;
  }
  .racePanel#race3_06 .raceTip.withArrow .tiplabel {
    height: 80.4vw;
  }
  .racePanel#race3_07 .raceTip.withArrow .tiplabel {
    height: 52.4vw;
  }
  .racePanel#race3_09 .raceTip.withArrow .tiplabel {
    height: 91vw;
  }
  .racePanel#race3_10 .raceTip.withArrow .tiplabel {
    height: 46.5vw;
  }
  .racePanel#race3_17 .raceTip.withArrow .tiplabel {
    height: 22vw;
  }
  .racePanel#race3_18 .raceTip.withArrow .tiplabel.no3 {
    height: 30vw;
  }
  .racePanel#race3_18 .raceTip.withArrow .tiplabel.no1 {
    height: 65vw;
  }
  .racePanel#race3_19 .raceTip.withArrow .tiplabel {
    height: 29vw;
  }
  .racePanel#race3_08 .raceTip .tiplabel.shitei {
    transform: translateY(-8vw) translateX(-13vw);
  }
}

/*-------------------------------------------------
	++ CONTENTS
-------------------------------------------------*/
.tips {
  padding: 20px 13px;
}
@media screen and (max-width: 750px) {
  .tips {
    padding: 3vw;
    font-size: 3.2vw;
  }
}

#pageTop {
  position: fixed;
  bottom: 3vw;
  right: 3vw;
  display: none;
  z-index: 997;
  width: 70px;
}
#pageTop img {
  width: 100%;
  height: auto;
}
@media screen and (max-width: 750px) {
  #pageTop {
    transition: all 0.3s;
    width: 11vw;
    height: 11vw;
  }
}

#footer {
  width: 100%;
  background-color: #00005d;
  color: #FFF;
  padding: 40px 13px;
}
#footer #footerLogo img {
  width: 100%;
  height: auto;
  max-width: 318px;
}