@charset "UTF-8";
/* ------------------------------------------------------------
// introduction
------------------------------------------------------------ */
/* ------------------------------------------------------------
// Fluid Design Function
// 最小値〜最大値の間で数値を可変させる共通関数
------------------------------------------------------------ */
.content-introduction-ttl {
  background: url("../images/introduction/bg-introduction.webp") no-repeat center center/cover;
}

.introduction-content {
  position: relative;
}
.introduction-content .introduction-content-bg {
  position: absolute;
  mix-blend-mode: multiply;
  margin-top: -200px;
  margin-left: -300px;
}
.introduction-content .introduction-content-txt {
  width: 100%;
  max-width: clamp(360px, 55.0264550265vw + 153.6507936508px, 880px);
  padding-block: clamp(20px, 36.1663652803vw + -257.3960216998px, 220px);
  margin-left: auto;
}
.introduction-content .introduction-content-txt p {
  font-size: clamp(16px, 1.0849909584vw + 7.678119349px, 22px);
}
@media screen and (max-width: 767px) {
  .introduction-content .introduction-content-bg {
    position: sticky;
    margin-top: 0;
    margin-left: 0;
  }
  .introduction-content .introduction-content-txt {
    max-width: 100%;
  }
}

.introduction-loop-txt {
  width: 100%;
  max-width: 1318px;
  margin-block: clamp(50px, 5.291005291vw + 30.1587301587px, 100px) clamp(20px, 8.4656084656vw + -11.746031746px, 100px);
  margin-inline: auto;
}

.introduction-loop-slider {
  overflow: hidden;
  display: flex;
  width: calc(100% + 40px);
  margin-inline: -20px;
}

.slider-track {
  display: flex;
  gap: 10px;
  width: 5400px;
  animation: scroll-left 60s linear infinite;
}

.slider-track img {
  width: 440px;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
  flex-shrink: 0;
  display: block;
}

@media (max-width: 767px) {
  .slider-track {
    width: 2520px;
  }
  .slider-track img {
    width: 200px;
  }
  @keyframes scroll-left {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-1260px);
    }
  }
}
@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-2700px);
  }
}