フッターのCSS素材

左に会社の情報、右にリンクの段を並べた、いちばんよく使う形です。段の数は .cs-ft01__col を足し引きするだけで、幅に合わせて自動で並びます。スマホでは会社情報が上、リンクが2列になります。

フッターの上に、画面幅いっぱいの大きなお問い合わせリンクを置いた形です。ページの最後まで読んだ人を、迷わず問い合わせへ案内できます。マウスを乗せると右の矢印が動きます。

ロゴ・リンク・コピーライトを1行に並べた、小さなサイトやLP向けのフッターです。幅が足りなくなると自動で折り返し、スマホでは中央にそろいます。

地図の部分は色の面にしてあります。Googleマップの「地図を埋め込む」で出る <iframe> を .cs-ft04__map の中に貼ると、枠いっぱいに表示されます（CSSで大きさを合わせてあります）。中のピンと道の絵は見本用なので、そのとき消してください。

SNSの丸いアイコンは、ブランドのロゴではなく、写真・動画・トーク・メールを表す汎用の絵（インラインSVG）です。各SNSの公式ロゴを使うときは、それぞれが配布しているロゴ画像と使い方の決まりに従って差し替えてください。リンク先と aria-label もサービス名に書き換えます。

一番下に、画面幅いっぱいの大きな英字ロゴを敷いた形です。文字の大きさは vw（画面幅に対する割合）で決めているので、どの幅でも横いっぱいに収まります。文字を変えたら font-size の 19vw を調整してください。

画面の一番下に固定して、いつでも電話・問い合わせができるようにするバーです。ページの最後がバーに隠れないよう、body に padding-bottom: 64px; を付けてください。スマホだけに出したいときは、CSSの最後に @media (min-width: 769px) { .cs-ft07 { display: none; } } を足します。

フッターの上の線にかかるように、丸い「TOP」ボタンを置いています。リンク先の #top はページの一番上を表す決まりなので、JavaScriptなしで戻れます。html の scroll-behavior でなめらかに戻ります（不要なら消してください）。