📌 【ヒーロー実装注釈】
コピーは要確認・仮テキスト。背景は
--bg-dark + 2色のラジアルグラデで柔らかい印象に。
CTA は .hero-cta 1つのみ。スマホでは padding を縮小し h1 のフォントサイズを 28px まで落とす。
このサイトで学べること
7つのテーマで、Webデザイナーとして活躍するための知識を体系的にまとめています。気になるカードから読んでもOK。
📌 【カードグリッド実装注釈】
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) で自動折返し。
PC：3〜4列／タブレット：2列／スマホ：1列に自動変化。各カードはページ全体がリンク（<a>）で cursor: pointer。
アイコンは Font Awesome 6 から選定（仮）。色は --accent 統一（カラーバリエーションなし）。
このサイトの使い方
📌 【使い方セクション実装注釈】
2カラム（
grid-template-columns: 1fr 1fr）。スマホでは1カラムに縦積み。
テキストは確定予定（現段階は仮コピー）。アイコンは仕事イメージを喚起できるものに差し替え可。
はじめての方は順番に
Page 01 から Page 07 へ進むと、Webデザイナーの仕事の全体像が自然に理解できる構成になっています。
気になるテーマから読んでもOK
各ページは独立して読める構成です。ヘッダーのナビから気になるテーマへ直接ジャンプしてください。
研修コンテンツとの連携
📌 【研修連携実装注釈】
Page 05（AIとWebデザイン）から既存研修の
../vol*.html へ動画カードでリンクする予定。
本バナーは「研修サイトへ戻る」用の主導線。Antigravity デプロイ時は相対パス ../index.html で動作確認。
【DX】社員教育とAI 研修サイト
「AIとWebデザイン（Page 05）」は研修の vol*.html と連動。動画・課題・ミッションにそのままアクセスできます。
📌 【ページナビ実装注釈】
トップは「次へ」ボタンのみ（前ページなし）。以降の page01〜page07 は両側に配置。
スマホでは縦積み、
.next の margin-left: auto を解除。