.banner-step-marquee{
  --banner-w: 200px;   /* バナー幅 */
  --banner-h: 150px;   /* バナー高 */
  --gap: 1px;         /* 余白 */
  --round: 0px;
  width: 100%;
  overflow: hidden;
  padding: 0px 0;
}
.step-viewport{
  mask-image: linear-gradient(to right, transparent 0, black 40px, black calc(100% - 40px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 40px, black calc(100% - 40px), transparent 100%);
}
.step-track{
  display: flex;
  align-items: center;
  gap: var(--gap);
  will-change: transform;
  transform: translateX(0);
}



/* バナーの箱：幅は自動（画像比率に追従）、高さは画像部で固定＋下に文字 */
.step-track a.banner-card{
  flex: 0 0 auto;
  width: auto;                 /* 横は画像比率に依存 */
  display: inline-flex;
  flex-direction: column;      /* 縦積み：thumbの下にcaption */
  border-radius: var(--round);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  background:#fff;             /* 背景を白に（お好みで） */
  text-decoration: none;       /* リンクの下線を消す */
  color: inherit;
}

/* 画像エリアは高さを固定、横は自動 */
.banner-card .thumb{
  height: var(--banner-h);     /* 例：150px */
  display: block;
  background: #f5f5f5;
}

.banner-card img{
  height: 100%;
  width: auto;                 /* 画像比率を維持 */
  display:block;
  object-fit: contain;         /* 切り抜きたくない場合。切り抜くなら cover */
}

/* キャプション：2行まで・はみ出し省略（お好み） */
.banner-card .caption{
  display: -webkit-box;
  -webkit-line-clamp: 2;       /* 表示は最大2行 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 8px 10px;
  line-height: 1.35;
  min-width: 160px;            /* 細すぎ回避（任意） */
  max-width: 360px;            /* 伸びすぎ回避（任意） */
  font-size: 14px;
  font-weight: 600;
  font-family: 'Noto Serif JP', serif;

}

/* ホバー時のちょい演出（任意） */
.banner-card:hover .thumb { filter: brightness(0.98); }
.banner-card:hover .caption { color:#fc864c; }

@media (max-width: 480px) {
  .banner-card .caption{
    font-size: 13px;
    line-height: 1.4; /* お好みで */
  }
}


/* 小さめ画面で縮小 */
@media (max-width: 480px) {
  .banner-step-marquee { --banner-w: 220px; --banner-h: 110px; --gap: 12px; }
}
@media (max-width: 420px) {
  .banner-step-marquee { --banner-w: 180px; --banner-h: 90px;  --gap: 10px; }
}

/* 動きを減らす設定の尊重：自動スクロール無効 */
@media (prefers-reduced-motion: reduce) {
  .step-track { transition: none !important; }
}


/* 初期は非表示（計算が終わったら解除） */
.step-viewport.precenter { visibility: hidden; }

/* もしフェードインしたければ（任意） */
.step-viewport { transition: opacity 120ms linear; }
.step-viewport.precenter { opacity: 0; }
.step-viewport:not(.precenter) { opacity: 1; }