1つずつが右向きの矢印の形（clip-path）になっていて、すき間なくつながります。幅が600px以下では縦に並び、矢印も下向きになります。
STEP
ステップ・流れ・タイムラインのCSS素材
「ご利用の流れ」や「沿革」のように、順番のある内容を見せる素材です。PCでは横、スマホでは縦に並ぶものもあります。
10種類
左の丸と縦線は ::before ::after で描いています。最後の項目では線が止まります。
PCでは横、幅が560px以下では縦に並びます。丸の中は番号の代わりにSVGアイコンにもできます。
左に年、右に出来事を並べ、間の縦線に点を打っています。<dl> を使っているので、行（<div>）をコピーして増やせます。
済んだ段階に cs-st05__done、今の段階に aria-current="step" を付けます。フォームの上に置くと、あと何段階あるかが分かります。
中央の線をはさんで、項目が左・右・左…と交互に並びます。幅が600px以下では、線が左に寄って片側に並びます。
カードの間に小さな三角を置いています。幅が640px以下では縦に並び、三角が下向きになります。
各段階の右に目安の時間（<time>）を出し、最後に合計を置いています。時間は例です。
横いっぱいの帯を、下向きの大きな三角でつないでいます。左の「STEP」の欄は番号が自動で入ります。
項目が多い流れや年表を、横にスクロールして見せます。scroll-snap で1つずつぴたりと止まります。項目は <li> をコピーして増やせます。