/* トップページ「業界最多の20社以上」のロゴの流れ（2026-10-28）
   以前は slick（1枚ずつめくるスライダー）を間隔0秒で動かし続けて流れているように見せていたため、
   触ると止まる・横に払うと逆に動く・一周のつなぎ目で巻き戻りが見える、といった乱れがあった。
   ロゴの列を2つつなげ（2つ目は読み上げ対象外）、CSS で一定の速さで流し続ける形に置き換え。
   見た目は以前と同じ：1画面に並ぶ数（1400px以上 9／1000px以上 8／480px以上 5／それ未満 3）、1枚あたり3秒 */

#toppage .logoSlide { container-type: inline-size; overflow: hidden; }

#toppage .logoMarquee {
  --per-view: 9;
  overflow: hidden;
  width: 100%;
}
#toppage .logoMarquee.pcOnly { display: block; }
#toppage .spOnly .logoMarquee { display: none; }

#toppage .logoMarquee__track,
#toppage .logoMarquee__dup {
  display: flex;
  align-items: center;
}
#toppage .logoMarquee__track {
  width: max-content;
  animation: salweb-logo-marquee calc(var(--logo-count) * 3s) linear infinite;
  will-change: transform;
}
#toppage .logoMarquee .itemLogo,
#toppage .logoMarquee .itemLogo--second {
  flex: 0 0 calc(100cqw / var(--per-view));
  width: calc(100cqw / var(--per-view));
  margin: 0;
  box-sizing: border-box;
}
#toppage .logoMarquee .itemLogo > img,
#toppage .logoMarquee .itemLogo--second > img {
  display: block;
  width: 100%;
  height: auto;
}
/* 2段目は半枚ずらす（以前の .itemLogo--second の translateX(50%) と同じ見え方） */
#toppage .logoMarquee .itemLogo--second { transform: none; }
#toppage .logoMarquee--second .logoMarquee__track { margin-left: calc(50cqw / var(--per-view)); }

@keyframes salweb-logo-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media screen and (max-width: 1399px) { #toppage .logoMarquee { --per-view: 8; } }
@media screen and (max-width: 1000px) {
  #toppage .logoMarquee { --per-view: 5; }
  #toppage .logoMarquee.pcOnly { display: none !important; }
  #toppage .spOnly .logoMarquee { display: block !important; }
}
@media screen and (max-width: 479px) { #toppage .logoMarquee { --per-view: 3; } }

/* 動きを減らす設定の端末では止めて表示 */
@media (prefers-reduced-motion: reduce) {
  #toppage .logoMarquee__track { animation: none; }
}

/* スマホの2段の間隔を以前（slick）と同じに */
@media screen and (max-width: 1000px) {
  #toppage .spOnly .logoMarquee { padding-bottom: 15px; }
}