/* 全画面共通仕様: UI幅を超えた文字列の電光掲示板スクロール (先頭一時停止付き) */

/* Bootstrap 5 には .min-w-0 が標準で無いため、Flexboxのはみ出し防止用に共通定義 */
.min-w-0 {
  min-width: 0 !important;
}

.marquee-viewport {
  overflow: hidden !important;
  white-space: nowrap !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  position: relative;
  display: block;
}

.marquee-content {
  display: inline-block;
  white-space: nowrap !important;
  will-change: transform;
}

.marquee-content.is-scrolling {
  animation: commonTickerPauseThenScroll var(--marquee-duration, 7s) linear infinite;
}

/* 文字の先頭が一番左に来た状態(0%〜28%)でピタッと止まり、そこから左へ流れ、末尾で少し止まって先頭へ戻る */
@keyframes commonTickerPauseThenScroll {
  0%, 28% {
    transform: translateX(0);
  }
  82%, 94% {
    transform: translateX(var(--marquee-dist, -100px));
  }
  100% {
    transform: translateX(0);
  }
}