@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(../../assets/img/lineUp/lineUpBgsp.png) 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(../../assets/img/lineUp/spTtlshadow.png) no-repeat center center;
  background-size: auto 29.74vw;
  z-index: 1;

}
#mainTtl p{
  font-size: 5.13vw;
  font-weight: 600;
  z-index: 2;
}
h2{
width: 100%;
text-align: center;
font-size: 10.77vw;
margin-top: 4vw;
text-indent: -3vw;
padding-bottom: 1.9vw;
font-weight: bold;
font-family: "rockwell", 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: 12.08vw;
  min-width: 39.74vw;
  max-width: 100%;
  color: #555;
  font-size: 3.86vw;
  background: #FFF;
  border: .48vw solid #000;
  color: #000;
  margin: 5.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: 164.1vw;
  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,
#articleWrap section > div > ul > li.time svg{
  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,
.head .schedule svg{
  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(../../assets/img/lineUp/RACE_TrailRideSp.png) no-repeat top center;
  background-size: 100% auto;
  width: 100%;
  height: 100%;
  position: relative;
}
#Touring{
  background: url(../../assets/img/lineUp/TOURINGSp.png) no-repeat top center;
  background-size: contain;
  width: 100%;
  height: 100%;
  position: relative;
}
#raceAndTrailRidePlus .ttl{
  color: #FFF;
  font-size: 5.64vw;
  position: absolute;
  top: 12.18vw;
  left: 13.1vw;
  font-weight: 500;
  font-family: "DIN";
}
#Touring .mainttl{
  color: #FFF;
  font-size: 5.64vw;
  font-weight: 500;
  width: 100%;
  height: 28.21vw;
  display: flex;
  align-items: end;
  padding: 0 0 5.3vw 3.5vw;
  font-family: "DIN";
}
#Touring .ttl{
  color: #FFF;
  font-size: 3.33vw;
  font-weight: 500;
  width: 100%;
  font-family: "DIN";
}
#Touring a{
  font-size: 2.82vw;
}
#Touring a span{
  display: block;
  font-size: 2.05vw;
}
#raceAndTrailRidePlus a,#Touring a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  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;
}
#raceAndTrailRidePlus a::before,#Touring a::before{
  position: absolute;
  left: -2.5vw;
  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: -2.5vw;
  content: "";
  display: block;
  height: 8.21vw;
  width: 2.56vw;
  /* width: -3vw; */
  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.2vw;
}


#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,#6497B5,transparent);
}
#Touring a.blue{
  color: #fff;
}
#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: #6497B5;
}

.yellow{
  background-color: #F4D565;
} 
.green{
  background-color: #B2CABE;
}
#DHRace{
  width: 32.78vw;
  top:22.05vw;
  left: 59.72vw;
}

#DHTeam{
  width: 32.78vw;
  top:31.54vw;
  left: 59.72vw;
}
#XCRaceXCC{
  width: 15.61vw;
  top:41.28vw;
  left: 76.38vw;
}
#XCRaceXCO{
  width: 15.61vw;
  top:51.28vw;
  left: 76.38vw;
}
#GXRace{
  width: 14.84vw;
  top:61.28vw;
  left: 68.18vw;
}
#XCMasters{
  width: 15.61vw;
  top:71.28vw;
  left: 63.05vw;
}
#TRRace{
  width: 35.35vw;
  top:81.79vw;
  left: 43.25vw;
}
#TRRace-E{
  width: 35.35vw;
  top:91.28vw;
  left: 43.25vw;
}
#DHLight{
  width: 24.07vw;
  top:101.54vw;
  left: 14vw;
}
#XCEndurance{
  width: 28.68vw;
  top:101.54vw;
  left: 49.8vw;
}
#XCKids2{
  width: 10.74vw;
  top:111.28vw;
  left: 27.2vw;
}
#XCKids1{
  width: 10.74vw;
  top:121.28vw;
  left: 11vw;
}
#XCLight{
  width: 14.39vw;
  top:121.28vw;
  left: 43vw;
}
#GXLight{
  width: 11.64vw;
  top:131.28vw;
  left: 43vw;
}
#XCBeginner{
  width: 16.9vw;
  top:141.28vw;
  left: 16.41vw;
}
#TrailRide{
  width: 52.79vw;
  top:151.28vw;
  left: 27vw;
}



#MTBBeginnerTrail{
  width: 13.08vw;
  height: 20.51vw;
  top:33.59vw;
  left: 3.85vw;
}
#MTBShortTrail{
  width: 30.02vw;
  height: 20.51vw;
  top:33.59vw;
  left: 30.26vw;
}
#MTBLongTrail{
  width: 30.02vw;
  height: 20.51vw;
  top:33.59vw;
  left: 65.13vw;
}
.logein{
  color: #fff;
  height: 5.13vw;
  width: 91.28vw;
  left: 3.85vw;
}
.logein.ue{
  top: 56.67vw;
}
#GravelInner a.logein.shita{
  top: 100.26vw;
  justify-content: center;
}
#SundayGravel{
  width: 13.08vw;
  height: 20.51vw;
  top:77.18vw;
  left: 3.85vw;}
#firstGravelShort{
  width: 13.08vw;
  height: 20.51vw;
  top:77.18vw;
  left: 19.49vw;}
#satoyamaGravel{
  width: 13.08vw;
  height: 20.51vw;
  top:77.18vw;
  left: 35.38vw;}
#firstGravel{
  width: 13.08vw;
  height: 20.51vw;
  top:77.18vw;
  left: 51.03vw;}
#FUJIMIGravelShort{
  width: 13.08vw;
  height: 20.51vw;
  top:77.18vw;
  left: 66.41vw;}
#FUJIMIGravel{
  width: 13.08vw;
  height: 20.51vw;
  top:77.18vw;
  left: 82.31vw;}

#TouringInner,
#GravelInner,
#On-RoadInner{
  margin: auto;
  width: 93.04vw;
  height: 38.46vw;
}
#TouringInner,
#GravelInner{
  border-bottom: 1px solid #B4B4B4;
}
#GravelInner .ttl,#On-RoadInner .ttl{
  padding-top: 5.13vw;
}
#GravelInner,#On-RoadInner{
  height: 43.59vw;
}
#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;
}
#RideFish{
  width: 22.05vw;
  height: 16.67vw;
  top:120.51vw;
  left: 3.85vw;
}
#Rordride{ 
  width: 13.08vw;
  height: 16.67vw;
  top:120.51vw;
  left: 81.28vw;
}