.ticker-container {
    overflow: hidden; /* はみ出したテキストを隠す */
    white-space: nowrap; /* テキストが改行されないようにする */
    width: 100%; /* コンテナの幅を調整 */
    border: 3px solid orange;
}
.ticker-text {
    display: inline-block; /* inline要素として扱いつつ幅を持たせる */
    padding-left: 100%; /* 初期位置を右端に設定 */
    animation: marquee 20s linear infinite; /* アニメーションの適用 */
    font-size: 20px;
}
@keyframes marquee {
    0% { transform: translateX(0); } /* 開始位置 */
    100% { transform: translateX(-100%); } /* 終了位置 */
}