/* =========================
   Marquee Slider
========================= */

.lp-marquee{
  padding: 46px 0 34px;
}

/* タイトルは中央・デザインの“/ \”を疑似要素で */
.lp-marquee__head{
  max-width: 1250px;
  margin: 0 auto 22px;
  padding: 0 24px;
  text-align: center;
}

.lp-marquee__title{
  margin: 0;
  font-weight: 900;
  letter-spacing: .04em;
  line-height: 1.25;
  font-size: clamp(22px, 2.4vw, 34px);
  color: #333;
}

.lp-marquee__title-em{
  color: #1b2a7a;
}

.lp-marquee__slashes{
  position: relative;
  height: 20px;
  margin-top: 10px;
}
.lp-marquee__slashes::before,
.lp-marquee__slashes::after{
  content: "";
  position: absolute;
  top: -180%;
  width: 84px;
  height: 3px;
  background: #333;
  transform: translateY(-50%) rotate(40deg);
}
.lp-marquee__slashes::before{
  left: calc(50% - 330px);
}
.lp-marquee__slashes::after{
  right: calc(50% - 330px);
  transform: translateY(-50%) rotate(-40deg);
}

/* ▼ここが重要：PCもスライダー範囲をフル幅 */
.lp-marquee__viewport{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
}

/* 流れの本体 */
.lp-marquee__track{
  --gap: 34px;
  --item: 220px;
  --speed: 60;
  display: flex;
  gap: var(--gap);
  width: max-content;
  animation: marquee var(--duration, 28s) linear infinite;
  will-change: transform;
}

/* アイテム：背景/シャドウ無し版 */
.lp-marquee__item{
  flex: 0 0 var(--item);
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  overflow: hidden;
  background: transparent;
  box-shadow: none;
}

.lp-marquee__item img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* hoverで止めたいなら（不要なら削除OK） */
.lp-marquee__viewport:hover .lp-marquee__track{
  animation-play-state: paused;
}

@keyframes marquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(var(--loop, -50%)); }
}

/* SP：1枚＋次が半分見える */
@media (max-width: 767px){
  .lp-marquee{
    padding: 34px 0 24px;
  }

  .lp-marquee__head{
    padding: 0 16px;
    margin-bottom: 16px;
  }

  .lp-marquee__slashes::before,
  .lp-marquee__slashes::after{
    width: 40px;
    top: -130%;
  }
  .lp-marquee__slashes::before{ left: calc(50% - 190px); }
  .lp-marquee__slashes::after{ right: calc(50% - 190px); }

  .lp-marquee__track{
    --gap: 14px;
    --item: 64vw;
    --duration: 22s;
  }
}

/* 動きが苦手な人向け */
@media (prefers-reduced-motion: reduce){
  .lp-marquee__track{ animation: none; }
}
.lp-marquee{ overflow-x: clip; } /* Safari含め安定 */