マルチデバイス対応H.Pのファイルリンクについて

Question

前提・実現したいこと

マルチデバイス対応のWEB H.Pを制作中。以下構成のファイル(html)のリンク,ジャンプで苦戦してます。プログラム初学者です。
(1)SP/PCの共通構成したフレキシブルなページに貼り付けたボタンに項(2)へのリンクを設定。
(2)表示したサイトサイズで振り分けるHTMLファイルを作成。
別WEB検索で、CCSに　.toggle-pc { display: block; }--- @media only screen and (max-width: 414px) ---- .toggle-pc { display: none; }---を追加。
またHTMLファイルで <a class="toggle-sp" href="gene-photo-10-sp.html#sp-point" ></a>---を追加。
** CCSSの属性 <a class="toggle-sp" href="gen----が正解か不明?
(3)項(2)リンク,ジャンプ先ファイルにサイトサイズに対応するそれぞれ異なる構成のHTMK
ファイルを作成。
以下の動作となり、計画通りに上手くいかず苦戦中。

発生している問題・エラーメッセージ

　項(1)のボタンをクリックしても現表示サイズのスクリーンの背景のみ表示され、項(3)
ファイル(HTML)にリンク,ジャンプされない。
対応策や修正等をどのようにしたらよいのかご示教ください。

エラーメッセージ

該当のソースコード

ソースコード

WINDOWS10,HTML5,CSS3

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。