/* 自動スクロールSwiper */
.autoScrollSwiper .swiper-slide {
  width: 300px !important;
  height: 300px;
}

.autoScrollSwiper .swiper-wrapper {
  transition-timing-function: linear !important;
}

.basic-section-sub-title {
  font-weight: 300;
  line-height: 1;
  font-size: 18px;
  color: #7e8991;
}

.basic-section-title {
  font-weight: 200;
  line-height: 1;
}

/* ナビゲーションリンク */
.basic-nav-link {
  border-bottom: 1px solid transparent;
}

.basic-nav-link:hover {
  border-bottom: 1px solid #000000;
}

/* ボタン付きカルーセルのスタイル */
.productSwiper {
  padding: 0 0;
}

.marquee {
  overflow: hidden;
  width: 100%;
}

.marquee-content {
  display: flex;
  width: max-content;
  animation: marquee 150s linear infinite;
}

.marquee-item {
  flex-shrink: 0;
  margin-right: 8px; /* Swiperの spaceBetween と同じ */
}

/* ホバー時にアニメーション停止 */
.marquee:hover .marquee-content {
  animation-play-state: paused;
}

/* 横スクロールのアニメーション */
@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.section-bg {
  background: linear-gradient(180deg, #f5f5f5 0%, #e3e3e1 100%);
}

/* ナビゲーションボタンのスタイル */
.product-swiper-button-prev,
.product-swiper-button-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  z-index: 10;
}

.product-swiper-button-prev {
  left: -50px;
  background-image: url('/user_data/feature_basic_by_two_one_style/images/util/chevron-left.svg');
}

.product-swiper-button-next {
  right: -50px;
  background-image: url('/user_data/feature_basic_by_two_one_style/images/util/chevron-right.svg');
}

.product-swiper-button-prev:after,
.product-swiper-button-next:after {
  content: '';
}

.section-linc-button {
  border: 1px solid rgba(155, 170, 181, 1);
}

.section-linc-button:hover,
.section-linc-button:focus,
.section-linc-button:active,
.section-linc-button:focus-visible {
  border: 1px solid rgba(155, 170, 181, 1);
  background-color: #9baab5;
  color: #ffffff;
  outline: none;
  opacity: 1;
}

/* スムーズスクロール */
html {
  scroll-behavior: smooth;
}