ヒーロー（ファーストビュー）のCSS素材

文字だけで見せる、いちばん基本の形です。見出しの改行位置は <br> で決めています。画面いっぱいの高さにするときは min-height を 100svh にします。

写真の部分は色の面（グラデーション）にしてあります。.cs-hr02__photo の background を url(写真.jpg) center / cover に書き換えるか、中に <img> を入れて width: 100%; height: 100%; object-fit: cover; を指定してください。スマホでは写真が上、文字が下に並びます。写真の上の小さなカードは不要なら消してください。

写真の部分は色の面（グラデーション）にしてあります。.cs-hr03 の background を url(写真.jpg) center / cover に書き換えるか、中に <img> を入れて width: 100%; height: 100%; object-fit: cover; を指定してください。斜めの角度は clip-path の 72% の数字で変えられます。

背景の色のかたまりが、20秒ほどかけてゆっくり動きます。色は3つの変数で変えられます。動きを減らす設定の人には止まって見えます。

写真の部分は色の面（グラデーション）にしてあります。.cs-hr05 の background を url(写真.jpg) center / cover に書き換えるか、中に <img> を入れて width: 100%; height: 100%; object-fit: cover; を指定してください。写真の上に重ねた黒いグラデーション（::before）で、明るい写真でも白い文字が読めます。濃さは「暗さ」で変えられます。

見出しの1行ごとを <span class="cs-hr06__line"> で囲み、style="--i:1" の番号で出る順番をずらしています。行を増やすときは番号を続けて振ってください。見本の「最初から」でもう一度再生できます。

写真の部分は色の面（グラデーション）にしてあります。.cs-hr07 の background を url(写真.jpg) center / cover に書き換えるか、中に <img> を入れて width: 100%; height: 100%; object-fit: cover; を指定してください。下の「SCROLL」は次のセクションへのリンクです。href="#about" の部分を、次のセクションに付けた id に合わせてください。画面いっぱいの高さにするときは min-height を 100svh にします。

数字は例です。実際の数字に書き換えてください。数字の項目は3つ〜4つまで並べられます（スマホでは縦に並びます）。

背景の英字は、同じ内容の <p> を2つ並べてつなぎ目なく流しています。文字を変えるときは2つとも同じに書き換えてください（飾りなので読み上げ対象外にしてあります）。

写真の部分は色の面（グラデーション）にしてあります。3枚の .cs-hr10__photo の中に <img> を入れて width: 100%; height: 100%; object-fit: cover; を指定してください。重なり方は各写真の top・left・width で調整します。