@charset "UTF-8";

header section nav i,
header section nav b {
  background: #333;
}

/* ヘッダー */
header {
  /* background: #7E7862; */
  padding-top: 0;
  /* height: 15vw; */

}

/* header h1 {
  display: none;
  color: #FFF;
  margin: 7vw 0 0 9.8vw;
} */
.close {
  position: relative;
  width: 5.75vw;
  height: 5.75vw;
}

h1 b {
  margin: -1vw 0 0 2vw;
  font-size: 5.31vw;
}

#mainTtl {
  height: 70.77vw;
  width: 100%;
  background-color: #555;
  background: url(/2026/top/assets/img/lineUp/lineUpBgsp.jpg?20260421) no-repeat center center;
  background-size: cover;
  color: #FFF;
  /* text-shadow: rgba(0, 0,0, .8) 10px 10px 25px, rgba(0, 0,0, .6) 10px 10px 25px; */
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

#mainTtl::before {
  position: absolute;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: url(/2026/top/assets/img/lineUp/spTtlshadow.png) no-repeat center center;
  background-size: auto 29.74vw;
  opacity: .2;
  z-index: 1;

}

#mainTtl p {
  font-size: 5.13vw;
  font-weight: 600;
  z-index: 2;
}
main h2{
width: 100%;
text-align: center;
 font-size: 12.77vw;
margin-top: 4vw;
text-indent: -3vw;
padding-bottom: 1.9vw;
font-weight: bold;
font-family: "Rokkitt", sans-serif;
z-index: 2;
}

/* ヘッダー */
/* 動画 */
.videoWrap {
  width: 80%;
  margin: 8vw auto 4vw;
}

/* タブ */
#topAttention {
  padding: 5vw 10vw 0;
  font-size: 3.5vw;
  font-weight: 500;
}

#dayTabWrap {
  background: #F1F1F1;
  padding-top: 5.2vw;
  position: fixed;
  left: 0;
  top: 14.5vw;
  z-index: 2;
}

#articleWrap section {
  overflow: auto;
  width: 100vw;
}

#dayTabWrap .tab,
#articleWrap section .tab {
  padding: 0;
  margin: 0;
  border: none;
}

#dayTabWrap .tab li {
  background: #7E7862;
  color: #FFF;
  width: 50vw;
  border: none;
  font-size: 4.83vw;
  line-height: 3vw;
  font-weight: bold;
  padding: 4vw 0 3vw;
}

#dayTabWrap .tab li i {
  font-size: 2.9vw;
  font-style: normal;
}

#dayTabWrap .tab li.active {
  background: #FFF;
  color: #000;
}

#articleWrap section.active {
  display: block;
}

#articleWrap section .tab {
  flex-wrap: wrap;
  margin: 0 0 3.85vw;
  position: relative;
  background: none;
  z-index: 1;
}

#articleWrap section .tab li {
  position: relative;
  display: inline-block;
  padding: 0;
  height: 10vw;
  min-width: 39.74vw;
  max-width: 100%;
  color: #555;
  font-size: 3.86vw;
  line-height: 4.36vw;
  background: #FFF;
  border: .48vw solid #000;
  color: #000;
  margin: 13.28vw 1vw 2vw;
  border-radius: 1vw;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
}

#articleWrap section .tab li.active {
  background: #000;
  color: #FFF;
}

#articleWrap section .tab li:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -1.57vw;
  border: 1.57vw solid transparent;
  border-top: 2.9vw solid #000;
}

#articleWrap section .tab li p {
  margin: 0;
  padding: 0;
}

/* タブ */
/* 共通 */
#articleWrap section>div {
  display: none;
  width: 100vw;
  /* height: 192.56vw; */
  /* margin-bottom: 31.15vw; */
  -ms-overflow-style: none;
}

#articleWrap section>div::-webkit-scrollbar {
  display: none;
}

#articleWrap section>div.active {
  display: block;
}

#articleWrap img {
  max-width: initial;
}

#articleWrap section>div>ul {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
}

#articleWrap section>div>ul.head {
  position: fixed;
  left: 0;
  top: 49.5vw;
  padding-top: 6vw;
  background: #FFF;
  z-index: 1;
}

#articleWrap section>div>ul>li:nth-child(2) {
  overflow-x: scroll;
  /* left: 17.63vw; */
  -ms-overflow-style: none;
}

#articleWrap section>div>ul>li:nth-child(2)::-webkit-scrollbar {
  display: none;
}

#articleWrap section>div>ul>li.day,
#articleWrap section>div>ul>li.time,
#articleWrap section>div>ul>li.time img{
  width: 17.63vw;
  height: 100%;
  font-size: 4.83vw;
}

#articleWrap section>div>ul>li.day {
  line-height: 3vw;
  margin-top: 5vw;
}

.schedule {
  width: calc(100vw - 17.63vw);
}

.head .schedule img {
  height: 24.4vw;
}

.head .day i {
  font-size: 2.9vw;
  font-style: normal;
}

#articleWrap section>div>ul.main {
  margin-top: 63vw;
}

#articleWrap section>div>ul.main .time {
  margin-top: -10.62vw;
}

#raceAndTrailRidePlus {
  background: url(/2026/top/assets/img/lineUp/RACE_TrailRideSp.webp) no-repeat top center;
  background-size: 100% auto;
  width: 100%;
  height: 163.33vw;
  position: relative;
}
.no-webp #raceAndTrailRidePlus {
  background: url(/2026/top/assets/img/lineUp/RACE_TrailRideSp.png) no-repeat top center;
  background-size: 100% auto;
}

#Touring {
  background: url(/2026/top/assets/img/lineUp/TOURINGSp.png) no-repeat top center;
  background-size: cover;
  width: 100%;
  height: 100%;
  position: relative;
}
#raceAndTrailRidePlus a,
#Touring a{
  transition: all .4s;
}
#raceAndTrailRidePlus a:hover,
#Touring a:hover{
  box-shadow: 2px 2px 12px rgba(0, 0, 0, 1);
  filter: brightness(1.1);
}

#raceAndTrailRidePlus .ttl {
  color: #FFF;
  font-size: 3.33vw;
  position: absolute;
  top: 12.18vw;
  left: 13.1vw;
  font-weight: 500;
  font-family: "DIN",'DIN Alternate Bold',"Noto Sans JP";
  letter-spacing: .2vw;
}

#Touring .mainttl {
  color: #FFF;
  font-size: 4.1vw;
  letter-spacing: .2vw;
  font-weight: 500;
  width: 100%;
  height: 21.21vw;
  display: flex;
  align-items: end;
  text-align: center;
  padding: 0 0 5.3vw 3.5vw;
  font-family: "DIN";
  justify-content: center;
}

#Touring .ttl {
  color: #FFF;
  font-size: 3.33vw;
  font-weight: 500;
  width: 100%;
  font-family: "DIN";
}

#Touring a {
  font-size: 2.82vw;
  padding-top: 1vw;
}

#Touring a span {
  display: block;
  font-size: 2.05vw;
      line-height: 2.5vw;
}

#raceAndTrailRidePlus a,
#Touring a {
  display: inline-flex;
  align-items: center;
  justify-content: space-evenly;
  font-size: 3.33vw;
  font-weight: bold;
  text-align: center;
  position: relative;
  margin: 0 1.28vw;
  position: absolute;
  border-radius: 1px;
}

#raceAndTrailRidePlus a {
  height: 8.21vw;
}

#Touring a {
  flex-direction: column;
  font-size: 2.82vw;
  font-weight: 600;
  word-break: keep-all;
  letter-spacing: -.1vw;
  line-height: 3.2vw;
}
#Touring .newBalloon.top{
  top: -4.5vw;
  left: 7vw;
}
#Touring a.new{
  padding-top: 2vw;
}
#raceAndTrailRidePlus a::before,
#Touring a::before {
  position: absolute;
  left: calc(-2.5vw + .49px);
  top: 0;
  content: "";
  display: block;
  height: 8.21vw;
  width: 2.56vw;
  /* width: -3vw; */
  aspect-ratio: 1/2;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  transform: rotate(180deg);
  background: linear-gradient(90deg, #EFB6AE, transparent);
}

#raceAndTrailRidePlus a::after,
#Touring a::after {
  position: absolute;
  right: calc(-2.5vw + .5px);
  top: 0;
  content: "";
  display: block;
  height: 8.21vw;
  width: 2.56vw;
  aspect-ratio: 1/2;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  background: linear-gradient(90deg, #EFB6AE, transparent);
}

#Touring a::before,
#Touring a::after {
  height: 100%;
  width: 1.28vw;
}

#Touring a::after {
  right: -1.2vw;
}

#Touring a::before {
  left: -1.28vw;
}


#raceAndTrailRidePlus a.White::before,
#raceAndTrailRidePlus a.White::after,
#Touring a.White::before,
#Touring a.White::after {
  background: linear-gradient(90deg, #fff, transparent);
}

#raceAndTrailRidePlus a.blue::before,
#raceAndTrailRidePlus a.blue::after,
#Touring a.blue::before,
#Touring a.blue::after {
  background: linear-gradient(90deg, #82C2F2, transparent);
}

#raceAndTrailRidePlus a.rightGreen::before,
#raceAndTrailRidePlus a.rightGreen::after,
#raceAndTrailRidePlus #E_MTB a.rightGreen::before,
#raceAndTrailRidePlus #E_MTB a.rightGreen::after,
#Touring #WelcometoMTB.rightGreen::before,
#Touring #WelcometoMTB.rightGreen::after,
#Touring #RideFish.rightGreen::before,
#Touring #RideFish.rightGreen::after {
  background: linear-gradient(90deg, #9CE073, transparent);
}

#raceAndTrailRidePlus a#WelcomeToMTB.rightGreen::before,
#raceAndTrailRidePlus a#WelcomeToMTB.rightGreen::after {
  height: 14.36vw;
}


#raceAndTrailRidePlus a.yellow::before,
#raceAndTrailRidePlus a.yellow::after,
#Touring a.yellow::before,
#Touring a.yellow::after {
  background: linear-gradient(90deg, #F4D565, transparent);
}

#raceAndTrailRidePlus a.green::before,
#raceAndTrailRidePlus a.green::after,
#Touring a.green::before,
#Touring a.green::after {
  background: linear-gradient(90deg, #B2CABE, transparent);
}

.pink {
  background-color: #EFB6AE;
}

.White {
  background-color: #FFF;
}

.blue {
  background-color: #82C2F2;
}

.yellow {
  background-color: #F4D565;
}

.green {
  background-color: #B2CABE;
}

.rightGreen {
  background-color: #9CE073;
}

#DHRace {
  width: 32.78vw;
  top: 18.05vw;
  left: 61.72vw;
}

#DHTeam {
  width: 32.78vw;
  top: 27.54vw;
  left: 61.72vw;
}

#XCRaceXCC {
  width: 15.61vw;

  top: 27.54vw;
  left: 78.38vw;
}

#XCRaceXCO {
  width: 15.61vw;
  top: 37.28vw;
  left: 78.38vw;
}

#GXRace {
  width: 14.84vw;
  top: 47.28vw;
  left: 70.18vw;
}

#XCMasters {
  width: 15.61vw;
  top: 57.28vw;
  left: 65.05vw;
}

#TRRace {
  width: 35.35vw;
  top: 67.28vw;
  left: 45.25vw;
}

#E_MTB {
  width: 35.35vw;
  top: 77.79vw;
  left: 45.25vw;
}

#DHLight {
  width: 24.07vw;
  top: 87.28vw;
  left: 16vw;
}

#XCEndurance {
  width: 28.68vw;
  top: 87.28vw;
  left: 51.8vw;
}

#XCKids2 {
  width: 10.74vw;
  top: 97.54vw;
  left: 29.2vw;
}

#XCKids1 {
  width: 10.74vw;
  top: 107.28vw;
  left: 13vw;
}

#XCLight {
  width: 14.39vw;
  top: 107.28vw;
  left: 45vw;
}

#GXLight {
  width: 14.39vw;
  top: 117.28vw;
  left: 45vw;
}

#XCBeginner {
  width: 16.9vw;
  top: 127.28vw;
  left: 18.41vw;
}

#TrailRide {
  width: 52.79vw;
  top: 137.28vw;
  left: 29vw;
}

main #WelcomeToMTB {
  width: 17.56vw;
  top: 147.28vw;
  left: 12vw;
  height: 14.36vw;
}

/* タブ２ */



#MTBFlowWaveTrail {
  width: 32.86vw;
  height: 11.07vw;
  top: 25.9vw;
  left: 43.85vw;
}

#MTBFlowWaveTrailShort {
  width: 32.73vw;
  height: 11.07vw;
  top: 39.49vw;
  left: 62.36vw;
}

#MTBFlowWaveTrailMiddle {
  width: 32.73vw;
  height: 11.07vw;
  top: 53.33vw;
  left: 62.36vw;
}

#MTBLongTrail {
  width: 32.73vw;
  height: 11.07vw;
  top: 66.41vw;
  left: 62.36vw;
}

#MTBKanazawaGravel {
  width: 22.06vw;
  height: 18.36vw;
  top: 59.23vw;
  left: 31.79vw;
}

#WelcometoMTB {
  width: 22.06vw;
  height: 14.4vw;
  top: 42.56vw;
  left: 3.9vw;
}

#MTB_BIKEPACKING {
  width: 22.06vw;
  height: 18.36vw;
  top: 59.23vw;
  left: 3.9vw;
}




#firstGravel {
  width: 22.06vw;
  height: 18.21vw;
  top: 99.74vw;
  left: 24.15vw;
}

#Kanazawaravel {
  width: 22.06vw;
  height: 18.24vw;
  top: 122.56vw;
  left: 29.79vw;
}

#FUJIMIGravel {
  width: 32.73vw;
  height: 18.21vw;
  top: 99.74vw;
  left: 62.1vw;
}

#Gravel_BIKEPACKING {
  width: 22.06vw;
  height: 18.24vw;
  top: 122.56vw;
  left: 3.64vw;
}



#Touring .logein {
  padding-top: 0;
  height: 5.13vw;
  width: 56.67vw;
  left: 3.85vw;
}

.logein.ue {
  top: 80.26vw;
}

#GravelInner a.logein.shita {
  top: 143.59vw;
  justify-content: center;
}

#RideFish {
  width: 22.05vw;
  height: 16.67vw;
  top: 167.69vw;
  left: 3.85vw;
}

#Rordride {
  width: 32.73vw;
  height: 16.67vw;
  top: 167.69vw;
  left: 62.1vw;
}



#TouringInner,
#GravelInner,
#On-RoadInner {
  margin: auto;
  width: 93.04vw;
  height: 72.31vw;
}
#TouringInner{
  border-top: 2px solid #fff;
}
#TouringInner,
#GravelInner {
  border-bottom: 2px solid #fff;
}
#Touring .ttl,
#GravelInner .ttl,
#On-RoadInner .ttl {
  border-right: 2px solid #fff;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    margin-top: -2px;
    display: flex;
    width: 18.57vw;
    height: 5.81vw;
    justify-content: center;
    align-items: center;
}

#On-RoadInner {
  height: 34.87vw;
}
#GravelInner{
  height:63.33vw;
}

#GravelInner a {
  justify-content: space-between;
}

#GravelInner a span {
  padding-bottom: 2vw;
  line-height: 2.5vw;
  font-weight: lighter;
}

#GravelInner a p {
  height: 11.03vw;
  display: flex;
  align-items: center;
  padding-top: 1vw;
}



.newBalloon {
  background-image: url(/2026/top/assets/img/lineUp/iconEventNew.svg);
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  display: block;
  width: 7.24vw;
  height: 8.55vw;
}

.newBalloon.left {
  top: 0;
  left: -13%;
  right: 0;
}

.newBalloon.top {
  top: -7vw;
  left: 30%;
  right: 0;
}