@charset "UTF-8";

@font-face {
  font-family: "oswald";
  src: url("/2026/top/assets/font/DINAlternate-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
}

main .tab li:first-of-type {
  padding: 0 3.61vw 0 5.61vw;
}

main .tab li:nth-of-type(2) {
  padding: 0 3.45vw;
}

main .tab li:nth-of-type(3) {
  padding: 0 3.71vw;
}

main .tab li:last-of-type {
  padding: 0 3.58vw;
}

.tabContent {
  display: none;
}


main .tabContent.active {
  display: block;
  position: relative;
  padding: 12.56vw 0 0;
  width: 100vw;

}

main {
  position: relative;
}

/* popup */
.popup {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 100dvh;
  background-color: rgba(162, 162, 162, .9);
  background-color: rgba(62, 62, 62, .5);
  color: #000;
  box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.1);
  z-index: 100;
  transform: translateY(100%);
  transition: all 0.3s ease;
  padding-top: env(safe-area-inset-top, 0px);
}

.popup>div.popupInnnerWrap {
  height: auto;
  position: relative;
  margin-top: auto;
  padding: 9.49vw 0 0;
}

.popupInnner {
  height: auto;
  display: flex;
  flex-flow: column;
  bottom: 0;

}

.popupInnner>div {
  margin-top: auto;
  background-color: #fff;
  position: relative;
  padding: 6.72vw 9.23vw;
}

.popup.active {
  transform: translateY(0);
  display: flex;
  flex-flow: column;
  justify-content: start;
  z-index: 50;
  overflow-y: auto;
}

.popup i.closeTabId {
  position: absolute;
  top: -58vw;
  right: 0;
  left: 45%;
  width: 8.21vw;
  height: 8.21vw;
  border-radius: 50%;
  font-style: normal;
  background-color: #000;
  color: #FFF;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  cursor: pointer;
}

.popup img {
  width: 100%;
}

#mapWrap .popup img {
  width: 100%;
  height: auto;
  margin-bottom: 10vw;
}

.popup .popupTtl {
  width: 100%;
  font-weight: 500;
  padding: 0 0 8.38vw;
  font-size: 5.13vw;
  line-height: 7.44vw;
  text-align: left;
}

.popup .popupTtl.new {
  background-image: url(/2026/top/assets/img/raceIntroduction/newBubble.webp);
  background-repeat: no-repeat;
  background-size: 14.36vw 15.9vw;
  background-position-x: 0vw;
  padding-left: 19vw;
  line-height: 16vw;
  text-align: left;
  padding-bottom: 0;
}

.popup p {
  font-size: 3.85vw;
  line-height: 6.41vw;
  text-align: left;
}

.popupCuption span {
  display: block;
  font-size: 2.82vw;
  line-height: 4.36vw;
  padding-top: 3vw;

}

.popup div.popupBtn {
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;
  margin-top: 0;
  padding: 0;
}

.popup div.popupBtn a {
  padding: 0;
  height: 14.1vw;
  font-size: 3.85vw;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
  color: #FFF;
}

.popup div.popupBtn a:last-child {
  background-color: #3E4548;
}

.popup div.popupBtn a:first-child {
  background-color: #7b7601;
}

.popup div.popupBtn a.darkyellow:first-child {
  background-color: #D0AA51;
}

.popup div.popupBtn a.aqua:first-child {
  background-color: #50B9C7;
}

.popup div.popupBtn a.yellow:first-child {
  background-color: #FBD541;
  color: #000;
}

.popup div.popupBtn a.green:first-child {
  background-color: #007C79;
}

.popup div.popupBtn a.brown:first-child {
  background-color: #BB7E59;
}

.popup div.popupBtn a.blueGrey:first-child {
  background-color: #496673;
}

.close {
  position: absolute;
  display: block;
  width: 5.13vw;
  height: 5.13vw;
  z-index: 5;
  opacity: 1;
  right: 2vw;
  top: 7vw;
}

.close i,
.close b {
  width: 49%;
  position: absolute;
  height: 1px;
  background: #FFF;
  display: inline-block;
  transform: rotate(0);
  transition: all .4s;
}

.close i {
  transform: rotate(45deg);
  top: calc(50% - .5px);
  left: 25.5%;
}

.close b {
  transform: rotate(-45deg);
  top: calc(50% - .5px);
  left: 25.5%;
}

/* 個人種目レベル別 */
#sideMenu {
  color: #fff;
  position: sticky;
  top: 42.5dvh;
  left: 0;
  z-index: 2;
  width: 15.9vw;
}

#sideMenu li a {
  height: 23.08vw;
  width: 15.9vw;
  padding: 2vw 0;
  display: flex;
  flex-flow: column;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  text-align: center;

}

#sideMenu li:nth-of-type(1) {
  background-color: #D0AA51;
  border-top-right-radius: 10px;
}

#sideMenu li:nth-of-type(2) {
  background-color: #BB7E59;
}

#sideMenu li:nth-of-type(3) {
  background-color: #496673;
  border-bottom-right-radius: 10px;
}

#sideMenu li:nth-of-type(3) img {
  transform: rotate(180deg);

}

#sideMenu li img {
  width: 2.82vw;
  height: 2.82vw;
  /* padding: 4.1vw 0; */
  margin: auto;
}

#sideMenu li a span {
  margin: auto;
  writing-mode: vertical-lr;
  font-size: 3.85vw;
  font-weight: 600;
}

main h2 {
  text-align: center;
  font-size: 5.64vw;
  font-weight: 600;
  padding: 5.13vw 0 0;
}

main .tab {
  padding: 0;
  margin-top: 7.2vw;
  border-bottom: none;
  justify-content: space-between;
  background-color: #A8A8A1;
}

main .tab li {
  height: 14.1vw;
  background-color: #A8A8A1;
  color: #fff;
  font-size: 3.85vw;
  line-height: 4.36vw;
  font-weight: 500;
  padding: 0 3.65vw;
  display: flex;
  justify-content: center;
  align-items: center;
  border-left: none;
  border-image: none;
  position: relative;
  flex: 1 1 auto;
}

main .tab li + li::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 37.5%;
  height: 27.5%;
  width: 2px;
  background-color: #fff;
  z-index: 1;
  border-radius: 25%;
}

main .tab li.active {
  background-color: #fff;
  color: #000;
}

.subttl {
  padding: 0;
  font-size: 4.62vw;
  font-weight: 600;
  border-radius: 9999px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 84.62vw;
  height: 11.28vw;
  margin: 0 auto 7.56vw;
}

#driversTakeTurnsDrivingOneByOne .subttl {
  background-color: #50B9C9;
}

#drivingInFormation_withTheLeadPositionBeingTakenOverByOthers .subttl {
  background-color: #FBD642;
  color: #000;
}

#teamsOf4-6PeopleWillCompeteInThreeRacesInOneDay .subttl {
  background-color: #496673;
}

.ttl {
  font-size: 4.62vw;
  line-height: 6vw;
  font-weight: 600;
  padding: 0 0 4.87vw;
  width: 100%;
}

.ttl.ttlindent {
  text-indent: -6vw;
  padding-left: 7vw;
}

.ttl span {
  font-size: 3.08vw;
  display: block;
  padding: 2vw 0 0 6.5vw;
}

.ttl::before {
  content: "●";
  font-size: 4.5vw;
  padding-right: 2vw;
}

.yellow .ttl::before {
  color: #FBD541;
}

.brown .ttl::before {
  color: #BB7E59;
}

.blueGrey .ttl::before {
  color: #496673;
}

.aqua .ttl::before {
  color: #50B9C9;
}

.darkyellow .ttl::before {
  color: #D0AA51;
}

.green .ttl::before {
  color: #007C79;
}


#individualEventsByLevel>div {
  margin-left: 28.21vw;
  margin-bottom: 14.62vw;
  width: 63.85vw;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

#individualEventsByLevel>div#advanced .left {
  width: 34.85vw;
}

#popupWrap{
  position: relative;
  z-index: 200;
}

#popupWrap>div.popup {
  display: none;
}

#popupWrap>div.popup.active {
  display: flex;
  flex-flow: column;
  /* justify-content: end; */
  z-index: 123;

}

#individualEventsByLevel>div .left {
  /* width: 37.33vw; */
  width: auto;
  flex-flow: row;
  align-items: end;
}

#individualEventsByLevel>div .right {
  width: 23.85vw;
}

#individualEventsByLevel>div:first-of-type .left {
  width: 25.82vw;
}

#individualEventsByLevel>div:first-of-type .right {
  width: 33.33vw;
}

#individualEventsByLevel>div:first-of-type .dataTop .big {
  font-size: 13.44vw;
}

#individualEventsByLevel>div:first-of-type .dataTop {
  margin: 0 0 2vw;
  display: flex;
  align-items: end;
  justify-content: end;
}

#popupWrap>div.popup {
  width: 100vw;
  height: 100dvh;
  overflow-y: scroll;
  margin: 0;
}

.popup div.balloon {
  width: 100vw;
  padding: 0;
  background-color: transparent;
}

.popup div.balloonInnner {
  background-color: #fff;
  background-image: url(/2026/top/assets/img/raceIntroduction/balloonBg.webp);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 8.21vw auto;
  border-radius: 10px;
  height: 71.79vw;
  width: 81.03vw;
  margin: auto;
  box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35);
  padding: 0 7.69vw;
  margin: 0 auto 9vw;
}

.popup div.balloonInnner::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  border-style: solid;
  border-width: 1px 10px 0 10px;
  border-color: #000000 transparent transparent;
  translate: -50% 100%;
}

.popup div.balloonInnner::after {
  content: "";
  position: absolute;
  bottom: 10vw;
  left: 50%;
  border-style: solid;
  border-width: 5.15vw 4.18vw 0 4.18vw;
  border-color: #fff transparent transparent;
  translate: -50% 100%;
}

.balloon p:first-of-type {
  font-size: 4.62vw;
  line-height: 7.44vw;
  padding: 6.69vw 0 5.18vw;
  text-align: center;
  font-weight: 700;
}

.popup div.balloon i.closeTabId {
  top: 78vw;
  left: 46vw;
  right: auto;
}

.popup div.balloon i.closeTabId i,
.popup div.balloon i.closeTabId b {
  left: 50%;
  top: 50%;
  right: auto;
  bottom: auto;
}

.popup div.balloon i.closeTabId i {
  transform: translate(-50%, -50%) rotate(45deg);
}

.popup div.balloon i.closeTabId b {
  transform: translate(-50%, -50%) rotate(-45deg);
}

#individualEventsByLevel h3,
#teamsEventsByLevel h3,
#byAge h3,
#SportsWithAwideRangeOfCompetitiveLevels h3 {
  text-align: center;
  font-size: 5.64vw;
  font-weight: 600;
  margin: 0;
}

#individualEventsByLevel h3 {
  margin-top: -69.5vw;
}

#individualEventsByLevel p.dot,
#teamsEventsByLevel p.dot,
#byAge p.dot,
#SportsWithAwideRangeOfCompetitiveLevels p.dot {
  text-align: center;
  padding: 2.26vw 0 2.26vw;
  font-size: 11vw;
}

#individualEventsByLevel p.dot {
  padding: 5.26vw 0 6.26vw;

}

.tabContent a.detailBtn {
  width: 63.59vw;
  height: 11.54vw;
  margin: 3.85vw 0 0;
  font-size: 3.85vw;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 9999px;
  background-color: #000;
}

.tabContent a.detailBtn img {
  width: 1.39vw;
  filter: brightness(0) saturate(100%) invert(100%) sepia(42%) saturate(2386%) hue-rotate(180deg) brightness(105%) contrast(124%);
  margin-right: 1.5vw;
}

.tabContent .yellow a {
  background-color: #D0AA51;
}

.tabContent .brown a {
  background-color: #BB7E59;
  color: #fff;
}

.tabContent .blue a {
  background-color: #496673;
}

.tabContent .aqua a {
  background-color: #50B9C9;
  color: #fff;
}

.tabContent .green a {
  background-color: #007C79;
  color: #fff;
}

.tabContent .yellow a {
  background-color: #FBD541;
  color: #000;
}

.tabContent .yellow a img {
  filter: none;
}

.tabContent .darkyellow a {
  background-color: #D0AA51;
  color: #fff;
}

.tabContent .blueGrey a {
  background-color: #496673;
  color: #fff;
}


.dataTop {
  text-align-last: justify;
  border-bottom: 1px solid #000;
  position: relative;
  padding-bottom: 2.13vw;
  margin-bottom: 2.33vw;
  text-align: right;
}

.dataTop .big {
  font-size: 15.44vw;
  font-weight: 400;
  font-family: "oswald", sans-serif;
}
.dataTop .big.fullWide{
  letter-spacing: -.7vw;
}

.dataTop .unit {
  font-size: 9.26vw;
  font-weight: 500;
  font-family: "oswald", sans-serif;

}

.dataTop .sub {
  position: absolute;
  right: -2vw;
  top: 1vw;
  font-weight: 500;
  font-size: 4.9vw;
  font-family: "oswald", sans-serif;

}

#individualEventsByLevel .dataTop .sub {
  right: 0;

}

.dataTop .sub span {
  font-size: 3.08vw;
}

#advanced .AverageTime {
  margin-bottom: 4.5vw;

}


#advanced .AverageTime p {
  text-align: left;
}

#advanced .left div:last-of-type {
  margin-bottom: 0;
}

.AverageTimeWrap {
  display: flex;
  justify-content: left;
  gap: 0 2vw;
}

.AverageTime {
  text-align: center;
  display: flex;
  flex-flow: column;

}

.AverageTime.left {
  text-align: left;

}

.AverageTime p {
  display: inline-block;
  font-size: 3.01vw;
  line-height: 4vw;
  font-weight: 500;
  text-align: center;
}

#beginner .AverageTime p {

  text-align: left;
}

.AverageTime .big {
  font-size: 8.51vw;
  font-family: "oswald", sans-serif;
  margin-left: 2vw;
}

.AverageTime .unit {
  font-size: 3.85vw;
}

#individualEventsByLevel>div.colorBar {
  top: 41.79vw;
  height: 406.08vw;
  margin: 0;
  right: 0;
  flex-flow: column;
  width: 2.56vw;
}

#teamsEventsByLevel>div.colorBar {
  top: 104.79vw;
  height: 406.08vw;

}

#byAge>div.colorBar {
  top: 88.79vw;
  height: 406.08vw;
}

#SportsWithAwideRangeOfCompetitiveLevels>div.colorBar {
  top: 101.79vw;
  height: 406.08vw;
}

.colorBar {
  position: absolute;
  right: 0;
  width: 2.56vw;
  display: block;
  margin: 0;
}



.colorBar .aqua {
  background-color: #50B9C9;
}

#teamsEventsByLevel .colorBar .aqua {
  height: 162.05vw;
}

#SportsWithAwideRangeOfCompetitiveLevels .colorBar .aqua {
  height: 90.77vw;
}

#byAge .colorBar .aqua {
  height: 185.13vw;
}

.colorBar .green {
  background-color: #007C79;
}

#SportsWithAwideRangeOfCompetitiveLevels .colorBar .green {
  height: 95.38vw;
}

#byAge .colorBar .green {
  height: 55.64vw;
}

.colorBar .yellow {
  background-color: #FBD642;
}


#individualEventsByLevel .colorBar .darkyellow {
  height: 57.18vw;
}

#teamsEventsByLevel .colorBar .yellow {
  height: 122.09vw;
}

#byAge .colorBar .yellow {
  height: 138.72vw;
}

#SportsWithAwideRangeOfCompetitiveLevels .colorBar .yellow {
  height: 95.38vw;
}


.colorBar .darkyellow {
  background-color: #D0AA51;
}


#individualEventsByLevel .colorBar .darkyellow {
  height: 57.18vw;
}

#teamsEventsByLevel .colorBar .darkyellow {
  height: 138.72vw;
}

#byAge .colorBar .darkyellow {
  height: 57.18vw;
}

#SportsWithAwideRangeOfCompetitiveLevels .colorBar .darkyellow {
  height: 57.18vw;
}



.colorBar .brown {
  background-color: #BB7E59;
}

#individualEventsByLevel .colorBar .brown {
  height: 229.74vw;
}


#teamsEventsByLevel .colorBar .brown {
  height: 57.18vw;
}

#byAge .colorBar .brown {
  height: 57.18vw;
}

#SportsWithAwideRangeOfCompetitiveLevels .colorBar .brown {
  height: 95.38vw;
}

.colorBar .blue {
  background-color: #496673;
}

#individualEventsByLevel .colorBar .blue {
  height: 119.16vw;
}

#teamsEventsByLevel .colorBar .blue {
  height: 121.54vw;
}

#byAge .colorBar .blue {
  height: 90.26vw;
}

#SportsWithAwideRangeOfCompetitiveLevels .colorBar .blue {
  height: 95.9vw;
}




/* チーム種目レベル別 */
#teamsEventsByLevel {
  text-align: center;
}

#teamsEventsByLevel .detailBtn {
  margin: 6.15vw auto 15.67vw;
}

#teamsEventsByLevel .detail {
  padding: 1.15vw 0;
  font-weight: 600;
  font-size: 3.59vw;
  line-height: 5.64vw;
}

#teamsEventsByLevel .detail:first-of-type {
  padding-top: 5.15vw;
  font-size: 3.85vw;
  line-height: 6.41vw;
}

#teamsEventsByLevel .aqua .data>div:last-of-type {
  margin-top: 8vw;
}

.note {
  font-size: 3.59vw;
  line-height: 5.64vw;
  font-weight: 600;
}

#teamsMenu {
  margin-bottom: 21.23vw;
}

#teamsMenu li {
  width: 84.62vw;
  height: 16.67vw;
  margin: 0 auto 3.85vw;
  border-radius: 10px;
}

#teamsMenu li a {
  height: 100%;
  width: 100%;
  display: flex;
  text-align: left;
  align-items: center;
  justify-content: space-between;
  padding: 0 5.13vw 0 5vw;
  font-size: 4.62vw;
  line-height: 6.44vw;
  border-radius: 10px;
  font-weight: 500;
}

#timeTrialBox {
  display: flex;
  justify-content: space-between;
  margin: 2vw 7.69vw;
}

#timeTrialBox div {
  position: relative;
  width: 50%;
  text-align: center;

}

#timeTrialBox div:first-of-type {
  border-right: 1px solid #000;
}

#timeTrialBox div p {
  font-size: 4.1vw;
  line-height: 4.62vw;
  font-weight: 600;
}

#timeTrialBox .sub {
  position: absolute;
  right: 3vw;
  top: 8vw;
  font-size: 5.15vw;
}

#timeTrialBox .sub span {
  font-size: 3.59vw;
}

#stageSuzuka {
  padding: 0 4.55vw;
}

#stageSuzukaData {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 5.69vw;

}

#stageSuzukaData .left {
  font-size: 3.85vw;
  width: 32.74vw;
  font-weight: 700;
  text-align: left;
}

#stageSuzukaData .left .big {
  font-size: 7.49vw;
  line-height: 10vw;
  font-weight: 400;
  font-family: "oswald", sans-serif;

}

#stageSuzukaData .right {
  position: relative;

}

#stageSuzukaData .right .big {
  font-size: 23.18vw;
  font-family: "oswald", sans-serif;

}

#stageSuzukaData .right .sub {
  font-family: "oswald", sans-serif;
  position: absolute;
  right: 0;
  top: 8vw;
  font-size: 4.62vw;
}

#stageSuzukaData .right .unit {
  font-size: 10.51vw;
  font-family: "oswald", sans-serif;

}

#stage3 {
  display: flex;
  justify-content: space-between;
  font-family: "oswald", sans-serif;
  margin: 6vw 4vw 0;

}

#stage3 div {
  padding: 0 3.85vw;
  font-size: 3.85vw;
  line-height: 6.15vw;
}

#stage3 div span:first-child {
  display: block;
  padding-bottom: 3vw;
}

#stage3 div:first-of-type {
  padding-left: 0;
}

#stage3 div:last-of-type {
  padding-right: 0;
}

#stage3 div:not(:last-child) {
  border-right: 1px solid #000;
}

#stage3 .big {
  padding-bottom: 3vw;
  font-size: 9.77vw;
  font-weight: 400;
  font-family: "oswald", sans-serif;

}

#stage3 .unit {
  font-size: 5.38vw;
  font-family: "oswald", sans-serif;

}

/* 年齢別 */
/* #byAge {
  padding: 3.85vw 2.56vw 23.08vw;
  background-color: #A8A8A1;
} */

#buAgeinner {
  padding: 0 8.13vw 23.08vw;
  background-color: #fff;
  border-radius: 10px;
}

#byAgemenu,
#SportsWithAwideRangeOfCompetitiveLevelsMenu {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 0 18.21vw;
}

#SportsWithAwideRangeOfCompetitiveLevelsMenu {
  margin: 0 0 14.21vw;
}

#byAgemenu {
  margin: 0 0 22.21vw;

}

#SportsWithAwideRangeOfCompetitiveLevelsMenu .yellow img,
#byAgemenu .yellow img,
.teamsMenu .yellow img {
  filter: brightness(0) saturate(100%) invert(0%) sepia(100%) saturate(0%) hue-rotate(314deg) brightness(95%) contrast(102%);
}

#byAgemenu li a,
#SportsWithAwideRangeOfCompetitiveLevelsMenu li a {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 3vw 5.13vw;
  align-items: center;
  width: 39.74vw;
  height: 16.67vw;
  margin: 0 0 3.85vw;
  border-radius: 10px;
  font-size: 4.62vw;
  line-height: 5.44vw;
  font-weight: 600;
}

#SportsWithAwideRangeOfCompetitiveLevelsMenu li:last-child,
#SportsWithAwideRangeOfCompetitiveLevelsMenu li:last-child a {
  width: 100%;
}

#byAgemenu li a span,
#SportsWithAwideRangeOfCompetitiveLevelsMenu li a span {
  font-size: 3.85vw;
}

#byAgemenu li a img,
#SportsWithAwideRangeOfCompetitiveLevelsMenu li a img,
#teamsMenu li a img {
  width: 2.4vw;
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7434%) hue-rotate(350deg) brightness(91%) contrast(114%);
  transform: rotate(90deg);
  margin-left: 2vw;
}

#teamsMenu li.yellow a img {
  filter: none;
}

.age {
  font-weight: 600;
  font-size: 6.92vw;
  line-height: 8vw;
  text-align: center;
}

.age span {
  font-weight: 500;
  display: block;
  font-size: 5.13vw;
}

.age.new {
  background-image: url(/2026/top/assets/img/raceIntroduction/newBubble.webp);
  background-repeat: no-repeat;
  background-size: 14.36vw 15.9vw;
  background-position-x: 22vw;
  padding-left: 39vw;
  text-align: left;
}

.attention {
  font-size: 3.33vw;
  font-weight: 500;
  text-align: center;
  padding: 0 0 5.13vw;
}

#byAge .details {
  font-size: 3.85vw;
  line-height: 5vw;
  font-weight: 600;
  text-align: center;
  padding: 2.8vw 0 4.1vw;
}

#byAge .detailBtn {
  width: 30.77vw;
  margin: 0 auto 15.38vw;
}

#elementary .detailBtn {
  background-color: #50B9C8;

}

#seniorHight .detailBtn {
  background-color: #007C7A;

}

#under19 .detailBtn {
  background-color: #FBD541;
  color: #000;

}

#under19 .detailBtn img {
  filter: none;
}

#over30 .detailBtn {
  background-color: #496672;

}

/* 競技レベルが幅広い種目 */
#SportsWithAwideRangeOfCompetitiveLevels {
  padding: 12.56vw 7.69vw 0;
}

.data {
  font-weight: 600;
}

.data .big {
  font-family: "oswald", sans-serif;
  font-size: 17.08vw;
  font-weight: 500;
}

.data .unit {
  font-size: 8.13vw;
  font-family: "oswald", sans-serif;
  font-weight: 400;

}

.data .middle {
  font-size: 12.13vw;
  font-family: "oswald", sans-serif;
  font-weight: 500;
  padding-left: 3vw;

}

#SportsWithAwideRangeOfCompetitiveLevels .detailBtn {
  width: 60.77vw;
  margin: 6.41vw 0 0;
  margin-bottom: 25.64vw;
}

#SportsWithAwideRangeOfCompetitiveLevels .detail {
  font-size: 3.85vw;
  line-height: 5.64vw;
  font-weight: 600;
  width: 63vw;
}

#SportsWithAwideRangeOfCompetitiveLevelsInner {
  border-left: 3px solid;
  border-image: linear-gradient(to bottom, transparent 0%, #a8a8a1 0% 84%, transparent 84%);
  border-image-slice: 2;
  margin: 0 0 0 3.75vw;
  padding: 0 0 0 7.3vw;
  position: relative;
}

#halfAnHour{
  padding-top: 1vw;
}
#oneHour{
  padding-top: .5vw;
}
#ninetyMinutes{
  padding-top: 1vw;
}
#ninetyMinutes .detailBtn{
  margin-bottom: 37vw;
}
#twoHours{
  padding-top: 1vw;
}
#twoHours .detailBtn{
  margin-bottom: 24vw;
}
#timeTrial{
  padding-top: 1vw;
}

#SportsWithAwideRangeOfCompetitiveLevelsInner .ttl::before {
  content: none;
}

#SportsWithAwideRangeOfCompetitiveLevelsInner::before {
  content: "";
  position: absolute;
  display: block;
  height: 100%;
  width: 100%;
  z-index: 3;
  background-image: url(/2026/top/assets/img/raceIntroduction/circleAqua.webp), url(/2026/top/assets/img/raceIntroduction/circleGreen.webp), url(/2026/top/assets/img/raceIntroduction/circleYellow.webp), url(/2026/top/assets/img/raceIntroduction/circleBrown.webp), url(/2026/top/assets/img/raceIntroduction/circleBlueGrey.webp);
  background-repeat: no-repeat;
  background-position: left 0vw top, left top 20.65%, left top 42.2%, left top 65%, left top 85.25%;
  background-size: 7.69vw auto;
  margin-left: -11.5vw;
  pointer-events: none;
}

#ninetyMinutes {
  background-image: url(/2026/top/assets/img/raceIntroduction/newBubble.webp);
  background-repeat: no-repeat;
  background-size: 14.36vw auto;
  background-position: left top;
}

#ninetyMinutes .ttl {
  padding: 0;
  padding-left: 19vw;
  line-height: 14vw;
  text-align: left;
}

#SportsWithAwideRangeOfCompetitiveLevels .note {
  font-size: 2.82vw;
  padding: 3.9vw 0 3vw;
}