@charset "utf-8";

/* マーキー（スクロール表示）のコンテナ（枠組み） */
.marquee-wrapper {
  overflow: hidden; /* コンテナからはみ出した要素を隠す */
  white-space: nowrap; /* テキストの折り返しを禁止する */
  /* width: 600px; /* 必要に応じてレイアウトに合わせて横幅を調整してください（現在は自動または親要素に依存） */
  margin: 0 auto; /* 必要に応じてマーキーを中央寄せにする */
  position: relative; /* 子要素の基準位置とする */
  background-color: transparent; /* 背景色（必要に応じて変更してください） */
}

/* マーキー（スクロール表示）の中身 */
.marquee-content {
  display: inline-block; /* インラインブロック要素として配置 */
  padding-left: 100%; /* アニメーション開始時に右端からスタートさせるため、親要素の幅分パディングを空ける */
  animation: marquee 35s linear infinite; /* アニメーション名: marquee, 時間: 60秒, 進行度: 一定, 繰り返し: 無限 */
  font-size: large; /* 文字サイズ */
  color: #ffffff; /* 文字色 */
}

/* ホバー時（マウスカーソルを乗せた時）にアニメーションを一時停止する設定（オプション）
   以下の設定を有効にする（コメントアウトを外す）と、マウスホバー時にスクロールが止まります。
   animation-play-state の設定値:
     - paused: アニメーションを一時停止します。
     - running: アニメーションを再生します（デフォルト）。
.marquee-wrapper:hover .marquee-content {
    animation-play-state: paused;
}
*/

/* アニメーションのキーフレーム定義（動きの内容） */
@keyframes marquee {
  0% {
    transform: translate(
      0,
      0
    ); /* 開始位置: 移動なし（padding-left により右端に見える状態） */
  }
  100% {
    transform: translate(
      -100%,
      0
    ); /* 終了位置: 左へ100%移動（見えなくなるまで） */
  }
}