@charset "UTF-8";

#floatingMenuSns img {
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(5765%) hue-rotate(174deg) brightness(118%) contrast(112%);
}

section {
  position: relative;
}

main {
  width: 100%;
  background-image: url(/2026/top/assets/img/Welcome_to_MTB/bottomLogo.svg), url(/2026/top/assets/img/Welcome_to_MTB/mainTopBg.webp), url(/2026/top/assets/img/Welcome_to_MTB/mainBg.webp);
  background-repeat: no-repeat;
  background-size: 49.83vw auto, 107.18vw auto, 107.18vw auto;
  background-position: bottom 10.38vw center, top left -6.4vw, top 0 left -6.4vw;
  padding: 0 0 59.49vw;
}
.no-webp main {
  background-image: url(/2026/top/assets/img/Welcome_to_MTB/bottomLogo.svg), url(/2026/top/assets/img/Welcome_to_MTB/mainTopBg.png), url(/2026/top/assets/img/Welcome_to_MTB/mainBg.png);
}

main p {
  position: relative;
  z-index: 1;
  color: #fff;
  padding: 0 15.15vw;
  font-size: 4.1vw;
  line-height: 7.18vw;
  /* letter-spacing: .2vw; */
}

main h1 img {
  width: 6.49vw;
  height: auto;
  display: block;
  margin: auto auto 2vw;
}

#FVslider {
  margin-top: 20.26vw;
  height: 100vh;
}

#FVslider li {
  width: 100vw;
}

#intro {
  position: relative;
  padding: 165.49vw 0 26vw;
  background-image: url(/2026/top/assets/img/Welcome_to_MTB/introBg.webp), url(/2026/top/assets/img/Welcome_to_MTB/introUnderBg.webp), url(/2026/top/assets/img/Welcome_to_MTB/mainTopBg.webp);
  background-size: 119.49vw auto, 100% auto, 107.18vw auto;
  background-repeat: no-repeat;
  background-position: bottom 2vw center, bottom -6vw center, top right -.9vw;
  z-index: 16;
}
.no-webp #intro {
  background-image: url(/2026/top/assets/img/Welcome_to_MTB/introBg.png), url(/2026/top/assets/img/Welcome_to_MTB/introUnderBg.png), url(/2026/top/assets/img/Welcome_to_MTB/mainTopBg.png);
}

#intro::before {
  content: "";
  display: block;
  position: absolute;
  background-image: url(/2026/top/assets/img/Welcome_to_MTB/introUnderAroow.png);
  background-size: auto 16.34vw;
  width: 9.92vw;
  height: 16.34vw;
  bottom: 4vw;
  left: 45vw;
  right: 0;

}


main section:first-of-type:before {
  content: "";
  display: block;
  position: absolute;
  background-image: url(/2026/top/assets/img/Welcome_to_MTB/imgCyclerbottom.png);
  background-position: bottom 0 left 0;
  background-size: contain;
  background-repeat: no-repeat;
  width: 30vw;
  height: 52.77vw;
  z-index: 11;
  bottom: -21vw;
  left: -4vw;
}

main section:first-of-type::after {
  content: "";
  display: block;
  position: absolute;
  background-image: url(/2026/top/assets/img/Welcome_to_MTB/imgCyclerUpSp.png);
  background-position: top 0 left 15vw;
  background-size: contain;
  background-repeat: no-repeat;
  width: 37.82vw;
  height: 32.69vw;
  z-index: 17;
  bottom: 1vw;
  left: -15vw;
}

#intro h1,
#intro p {
  color: #fff;
}

#intro h1,
#rental h1,
#lesson h1,
#selectCourse h1 {
  text-align: center;
  font-size: 6.3vw;
  line-height: 9.97vw;
  font-weight: 500;
  margin-bottom: 8.54vw;
  color: #fff;
  text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.4);

}

#rental h1,
#lesson h1 {
  font-size: 7.11vw;

}

#intro p {
  padding: 0 16.15vw;
  font-size: 3.65vw;
  line-height: 7.18vw;
  font-weight: 500;
  /* letter-spacing: .25vw; */
}

#intro .tab {
  width: 100%;
  position: absolute;
  bottom: 0;
}

#intro .controllScrollOver .controllScrollItemWrap,
#rental .controllScrollOver .controllScrollItemWrap,
#trailRide .controllScrollOver .controllScrollItemWrap,
#parklRide .controllScrollOver .controllScrollItemWrap {
  margin-right: 30vw;
}
#rental .controllScrollOver li:last-child{
  margin-right: 4vw;
}

#intro .controllScrollOver,
#rental .controllScrollOver,
#trailRide .controllScrollOver,
#parkRide .controllScrollOver {
  margin: 0 0 11.54vw;
}

#intro .controllScrollOver li,
#rental .controllScrollOver li,
#trailRide .controllScrollOver li,
#parkRide .controllScrollOver li {
  margin: 0 3.59vw 0 0;
  text-align: center;
}

#intro .controllScrollOver .controllScrollItemWrap {
  margin: 0 3.59vw 0 16.15vw;

}

#trailRide .controllScrollOver .controllScrollItemWrap,
#parkRide .controllScrollOver .controllScrollItemWrap {
  margin: 0 3.59vw 0 23.3vw;
}



#intro .controllScrollOver li img,
#trailRide .controllScrollOver li img,
#parkRide .controllScrollOver li img {
  /* display: block; */
  width: 66.15vw;
  height: auto;
  max-width: none;
}

.controllScrollButtonWrap .controllScrollButtonNext b {
  background-color: rgba(255, 255, 255, 0.51);
  width: 8.21vw;
  height: 8.21vw;
  position: absolute;
  right: 3vw;
  top: 30%;
  z-index: 20;
  border-radius: 50%;
}

/* .controllScrollButtonWrap .controllScrollButtonNext b img {
  fill: #fff;
} */

#rental .controllScrollItemWrap{
  margin-left: 12.15vw;
}
/* #rental .controllScrollOver li:first-child {
  margin: 0 -3vw 0 12.15vw;
  margin: 0 -3vw 0 0;
} */

#rental .controllScrollOver li span {
  display: block;
  position: absolute;
  margin-top: 0;
  bottom: 7vw;
  margin-right: 4vw;
  right: 0;
  left: 0;
  font-size: 3.85vw;
}

#rental .controllScrollButtonWrap .controllScrollButtonNext b {
  top: 7vw;
}

.controllScrollButtonNext img {
  height: 4.67vw;
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%);
}

#rental .controllScrollOver li span span {
  font-size: 2vw;
  line-height: 4vw;
  bottom: 4vw;
  left: 4vw;
  right: 0;
}

#rental .controllScrollOver li img {
  display: block;
  width: 79.28vw;
  height: auto;
  max-width: none;
  filter: drop-shadow(0vw 2vw .1vw rgba(0, 0, 0, .3));
}

#rental,
#lesson {
  position: relative;
  height: 58.21vw;
  overflow: hidden;
  background-image: url(/2026/top/assets/img/Welcome_to_MTB/rentalBg.png);
  background-position: top;
  background-repeat: no-repeat;
  background-size: 111% auto;
  z-index: 10;
  margin-top: 15vw;
  padding-top: 3vw;
  transition: height .3s;
}

#rental {
  margin-top: 8vw;
}

#lesson {
  margin-top: 15vw;
}

#rental::before,
#lesson::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  height: 58.21vw;
  bottom: 0;
  overflow: hidden;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 47%, rgba(0, 0, 0, 0.43) 80%, rgba(0, 0, 0, 1));
  background-position: top;
  background-repeat: no-repeat;
  background-size: 118% auto;
  z-index: 10;
}

/* #lesson.active {
  margin-top: 8.72vw;
  background-image: url(/2026/top/assets/img/Welcome_to_MTB/rentalBg.png);
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
} */
#rental.active::before,
#lesson.active::before {
  display: none;
}

#rental.active,
#lesson.active {
  height: auto;
  padding: 4vw 0 22vw;
  margin-top: 8.72vw;
  background-image: url(/2026/top/assets/img/Welcome_to_MTB/rentalBg.png);
  background-position: top;
  background-repeat: no-repeat;
  /* background-size: cover; */
  background-size: 110.3% auto;

}

#rental.active {
  margin-top: 9vw;
  padding-top: 3vw;
  height: 411.95vw;
}

#lesson.active {
  margin-top: 15vw;
  padding-top: 3vw;
  height: 154.36vw;
}

#rental .controllScrollOver {
  height: 80.54vw;
  color: #fff;
  background-image: url(/2026/top/assets/img/Welcome_to_MTB/rentalSrideBg.png);
  background-position: top 5vw right -22.26vw;
  background-repeat: no-repeat;
  background-size: 126% auto;
  padding: 24vw 0 0;
  margin: -24vw 0 0;
}

#rental h2 {
  text-align: center;
  color: #fff;
  margin: 9.49vw 0 3.59vw;
  font-size: 4.1vw;
}

#itemWrap {
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 3vw 10.41vw 0 14.36vw;
  background-image: url(/2026/top/assets/img/Welcome_to_MTB/itemBg.png);
  background-position: center;
  background-size: 83.59vw auto;
}

#itemWrap p {
  padding: 0;
}

#helmet img {
  width: 39.23vw;
}

#helmet p {
  text-indent: -8vw;
}

#globe img {
  width: 35vw;
}

#shoesLi {
  display: block;
  width: 86.92vw;
  margin: 6.41vw auto;
}

.center span {
  font-weight: 300;
}

#partnerTxt {
  font-size: 3.59vw;
  line-height: 5.64vw;
}

#partner {
  width: 39.49vw;
  margin: 8.72vw auto 10.26vw;
  gap: 4.79vw 3.33vw;
}

#partner li {
  padding: 0 0 8.72vw;
}

#partner li img {
  display: block;
  margin: auto;
}

#partner li:first-of-type img {
  width: 36.69vw;
}

#partner li:nth-of-type(2) img {
  width: 27.12vw;
}

#partner li:nth-of-type(3) img {
  width: 26.26vw;
}

#partner li:nth-of-type(4) img {
  width: 29.38vw;
}

#partner li:nth-of-type(5) img {
  width: 33.85vw;
}

#partner li:nth-of-type(6) img {
  width: 33.85vw;
}



#lesson>img {
  /* display: block; */
  width: 67.69vw;
  margin: 9.23vw auto 5.13vw;
}

main .tab {
  display: flex;
  justify-content: center;
}

main .tab li {
  width: 33.33vw;
  height: 20.51vw;
  color: #fff;
  background-color: #9D9D9D;
  padding: 4.36vw 2.56vw 0;
  font-size: 5.64vw;
  line-height: 7.18vw;
  text-align: center;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border: none;
}

main .tab li.active {
  background-color: #09A78E;
  color: #fff;
  border: none;
}

main .tabContent {
  display: none;
}

main .tabContent.active {
  display: block;
}

#trailRide,
#parkRide {
  background-image: url(/2026/top/assets/img/Welcome_to_MTB/trailRidebg.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom center;
  width: 84.62vw;
  margin: 0 auto;
  padding: 12.56vw 0 11.79vw;
}
.no-webp #trailRide,
.no-webp #parkRide {
  background-image: url(/2026/top/assets/img/Welcome_to_MTB/trailRidebg.png);
}

#trailRide h1,
#parkRide h1 {
  font-size: 8.29vw;
  letter-spacing: -.52vw;
  line-height: 10.26vw;
  font-weight: 500;
  text-align: center;
}

#trailRide h1 p,
#parkRide h1 p {
  border-top: 2px solid;
  width: 50vw;
  margin: 2vw auto 7vw;
  padding: 1vw 0 0;
  letter-spacing: 0;
  border-image: linear-gradient(to right, transparent 0%, #000 0% 100%, transparent 100%);
  border-image-slice: 2;
}

#trailRide h1 p img,
#parkRide h1 p img {
  padding: 2vw 0 0;
  margin: 2vw 0 0;
  height: 11.94vw;
  width: auto;
}

#trailRide p,
#parkRide p {
  color: #000;
  padding: 0 8.46vw;
  font-size: 3.85vw;
  font-weight: 600;
}

#trailRide .controllScrollOver,
#parkRide .controllScrollOver {
  margin: 6.69vw 0 0 -16vw;
  width: 108vw;
}

#selectCourse .tab {
  border: none;
  gap: 0 5.13vw;
}

#selectCourse {
  margin-top: 10.72vw;
  background-image: url(/2026/top/assets/img/Welcome_to_MTB/rentalBg.png);
  background-position: top;
  background-repeat: no-repeat;
  background-size: 110% auto;
  padding: 3vw 0 0;
}

.overviewWrap {
  width: 84.62vw;
  margin: 5.33vw auto 0;
  padding: 6.46vw 7.69vw 3vw;
  /* background-color: rgba(255, 255, 255, .56); */
  border-radius: 20px;
}

.overviewWrap h2 {
  font-weight: 600;
  width: 31.54vw;
  margin: 0px auto 7.23vw;
  padding: 0 0 3.33vw;
  display: block;
  font-size: 7.69vw;
  border-bottom: 2px solid #000;
  text-align: center;
}

.overviewWrap dl {
  display: flex;
  flex-wrap: wrap;
  font-size: 4.1vw;
  line-height: 7.16vw;
}

.overviewWrap dl dt {
  font-weight: 600;
  width: 21.54vw;
  text-align-last: justify;
  padding-right: 4.5vw;
}
.overviewWrap dl dt.cost{
  width: 28vw;
}

.overviewWrap dl dt::after {
  position: absolute;
  content: "：";

}

.overviewWrap dl dd {
  width: 47.18vw;
}
.overviewWrap dl dd.cost {
  width: 40vw;
}
.blackBtn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 67.69vw;
  height: 13.59vw;
  margin: 0 auto;
  padding-left: 3vw;
  background-color: #000;
  color: #fff;
  border-radius: 5px;
  font-size: 3.59vw;
  font-weight: 500;
  background-image: url(/2026/top/assets/img/Welcome_to_MTB/btnIcon.svg);
  background-repeat: no-repeat;
  background-size: 4.03vw 4.03vw;
  background-position: center right 3vw;
  /* letter-spacing: .4vw; */
}
.blackBtn.noimage{
  background-image: none;
  padding: 0;
  justify-content: center;
}

.readMe {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 67.69vw;
  height: 13.59vw;
  margin: 8.72vw auto;
  border: 1px solid #000;
  background-color: #FAFAB0;
  border-radius: 10px;
  text-align: center;
}

#rental.active .close {
  bottom: 8vw;
}

#lesson.active .close {
  bottom: 9vw;
}

.close {
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #000;
  font-size: 4.36vw;
  font-weight: 500;
  height: 11.79vw;
  width: 39.49vw;
  margin: 0 auto;
  padding: 0 4.36vw 0 6.15vw;
  border-radius: 9999px;
  position: absolute;
  z-index: 15;
  bottom: 10vw;
  left: 0;
  right: 0;
}

.close div::after {
  width: 20vw;

  text-align: left;
  content: "詳しくは";
  position: absolute;
  right: 8vw;
  top: -1.8vw;
  display: block;
}

.close i,
.close b {
  display: block;
  width: 4.36vw;
  background-color: #000;
  height: 1px;
}

.close b {
  transform: rotate(90deg);
}

.close div,
.active .close div {
  position: absolute;
  right: 5vw;
}

.active .close div::after {
  width: 20vw;
  content: "閉じる";
  position: absolute;
  right: 8vw;
  top: -1.8vw;
  display: block;
}

.active .close b {
  transform: rotate(0deg);
}