セクションのCSSレイアウト素材

アイコンは短いインラインSVGです。線の色は currentColor なので、アクセント色に合わせて変わります。列は <li> を足すと4列にもなります（幅が足りなければ自動で折り返します）。

写真の部分は色の面にしてあります。.cs-sc02__photo の中に <img> を入れ、width: 100%; height: 100%; object-fit: cover; を指定して差し替えてください。偶数番目の行は自動で左右が入れ替わります。行は <div class="cs-sc02__row"> を増やすだけで足せます。

数字は例です。根拠のある数字に書き換え、集計した時期や条件を下の注記に書いておくと信頼につながります。

電話番号は tel: リンクなので、スマホで押すとそのまま電話をかけられます。番号は href と表示の両方を書き換えてください。

チェックの印はCSSで描いています。項目は <li> を足し引きするだけです。最後の三角と一文で、次のセクション（解決策）へつなげます。

写真の部分は色の面にしてあります。.cs-sc06__photo の中に <img> を入れ、width: 100%; height: 100%; object-fit: cover; を指定して差し替えてください。スマホでは上下に並び、間の矢印が下向きになります。

左側に position: sticky を付けて、スクロールしても画面の上にとどまるようにしています。止まる位置は top の値で変えられます（固定ヘッダーがあるときは、その高さ分を足してください）。親の要素に overflow: hidden があると止まらないので注意。スマホでは普通に縦に並びます。

写真の部分は色の面にしてあります。.cs-sc08__photo の中に <img> を入れ、width: 100%; height: 100%; object-fit: cover; を指定して差し替えてください。並び方は grid-template-areas で決めています。スマホでは文章が上、写真が2列になります。

background-attachment: fixed で背景だけを画面に固定し、窓からのぞくように見せます。写真は .cs-sc09 の background を url(写真.jpg) center / cover に書き換えてください。iPhone・iPadのSafariはこの指定に対応していないため、最後の @supports で普通の背景に切り替えています。

番号は counter で自動で振られます。項目を増やせば 04・05 と続きます。

番号の丸どうしを線でつないでいます。PCでは横に、スマホでは縦に並びます。ステップは <li> を足すと増やせます（PCで横に並ぶ数は repeat(4, 1fr) の数字を合わせてください）。