@charset "UTF-8";

/* CSS Document */

/*main*/
.main-visual {
  padding: 40px;
  margin-bottom: 40px;
}
.main-visual img {
  width: 70vw;
  object-fit: cover;
}
@media (min-width: 1080px) {
  .main-visual {
    padding: 120px;
    margin-bottom: 120px;
  }
  .main-visual img {
    max-width: 600px;
  }
}

/*トラックについて*/
.truck {
  padding: 0 20px;
  margin-bottom: 120px;
}
.truck h1 {
  margin-bottom: 60px;
  position: relative;
}
.truck h1::after {
  display: block;
  content: "";
  background: linear-gradient(90deg, rgba(255, 102, 51, 1) 0%, rgba(255, 102, 51, 1) 30%, rgba(66, 125, 157, 1) 31%, rgba(66, 125, 157, 1) 100%);
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 3px; /*線の太さ*/
  width: 90%;
  margin: 0 auto;
  max-width: 235px;
}
.truck__text_block {
  margin: 0 auto 40px auto;
  text-align: left;
  max-width: 600px;
}
.truck__note {
  margin: 0 auto;
  font-size: 1.4rem;
  text-align: left;
  max-width: 600px;
}
@media (min-width: 1080px) {
  .truck {
    padding: 0 120px;
    margin-bottom: 120px;
  }
  .truck h1 br {
    display: none;
  }
  .truck h1::after {
    max-width: 480px;
  }
}

/*トラック制作過程*/
.truck__process {
  padding: 0 20px;
  margin-bottom: 120px;
}
.truck__process h2 {
  margin-bottom: 60px;
  position: relative;
}
.truck__process h2::after {
  display: block;
  content: "";
  background: linear-gradient(90deg, rgba(255, 102, 51, 1) 0%, rgba(255, 102, 51, 1) 30%, rgba(66, 125, 157, 1) 31%, rgba(66, 125, 157, 1) 100%);
  position: absolute;
  left: 0px;
  right: 0;
  bottom: -5px;
  height: 3px; /*線の太さ*/
  width: 62%;
  margin: 0 auto;
  max-width: 215px;
}
.truck__slick {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}
.truck__slick img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  margin-bottom: 20px;
}
.slick-prev {
  left: 0px;
  z-index: 1;
}
.slick-next {
  right: 0px;
}

@media (min-width: 1080px) {
  .truck__process {
    padding: 0 120px;
  }
  .slick-prev {
    left: -60px;
    z-index: 1;
  }
  .slick-next {
    right: -60px;
  }
  .slick-prev:before, .slick-next:before {
    color: #ff6633;
  }
}

/*日本一周*/
.japan {
  padding: 60px 20px;
  background-color: #ff9966;
}
.japan h1 {
  color: #fff;
  font-size: 2.4rem;
  margin-bottom: 40px;
}
.japan p {
  color: #fff;
  text-align: left;
  margin: 0 auto 40px auto;
  max-width: 600px;
}
.japan a {
  padding: 5px 40px;
  color: #fff;
  border: solid 1px #fff;
  text-decoration: none;
}
@media (min-width: 1080px) {
  .japan {
    padding: 60px 120px;
  }
}