Intelligence
in Motion.

【ヒーローセクション】ビューポート全体を覆う全画面レイアウト。左側60%に極太ディスプレイ見出しを左寄せで配置し、右側は暗色フィルターをかけた宇宙粒子系の背景画像が広がる構成。見出し末尾のピリオドのみをブルーアクセント色（#1a6dff）に変え、タイポグラフィ単体でブランドカラーを主張させるデザイン。

About section visual — full-bleed grayscale photo

ABOUT

【About セクション】
2カラム・グリッドレイアウト

左カラムは背景画像をグレースケール＋低輝度フィルターで全面表示し、右カラムはダークネイビー（#0a1020）の背景上にアイブロウ・大見出し・本文を縦積みで配置。アイブロウは0.18emのワイドレタースペーシングと青アクセントカラーで視覚的階層を明示する。本文は14px／行間1.8でリーダビリティを最優先。

SERVICE

【Service セクション】3カラム・カードグリッド

Strategy
Font Awesomeアイコン ＋ 英語見出し ＋ 青ラベル

各カードは#0d1525の暗色背景にborder: 1px solid rgba(255,255,255,0.07)の微細ボーダー。ホバー時にボーダーカラーをblue-accentへ遷移し、上部に青グラデーションのオーバーレイが現れるインタラクション。アイコン・タイトル・サブラベル・説明・矢印アイコンを縦中央揃えで積み上げる。

Design
カード間はgap: 2pxの極細スリット区切り

3枚のカードはCSS Grid（repeat(3,1fr)）で横並び。gap値を2pxに設定することで個別のカード境界を溝ではなく「面の継ぎ目」として表現し、全体をひとつの統一パネルに見せるレイアウト手法。モバイルでは1カラムへ縦積みに切り替わる。

Development
セクション見出しはアイブロウ＋Hタグ2段構造

セクション全体はtext-align: centerで中央揃え。上部に大文字アイブロウ（SERVICE）を配置し、直下に大見出しを置く2段構造はページを通じて統一されたセクション導入パターン。背景色はbg-primary（#050a12）でナビゲーション直下の暗さを維持する。

PROCESS

【Process セクション】縦タイムライン・3カラム構造

STEP 01
左列：ステップ番号

各行はgrid-template-columns: 120px 72px 1frの3列グリッド。左列に「STEP」小文字ラベルと42pxの太字ステップ番号、中央列にFont Awesomeアイコンを内包した円形ドット（border: 1px solid blue-accent）、右列にタイトルと本文を縦積み。ステップ間は青からtransparentへのグラデーションコネクターラインで接続する。

STEP 02
中央列：円形アイコンノード

円形ドット（48×48px）はbg-card背景＋border-blue枠線＋Font Awesomeアイコンの3層構造。ノード下部にposition: absoluteで配置した縦線コネクターが次ステップのノードへ繋がり、フローの連続性を視覚化する。最終ステップのみコネクターを非表示にする。

STEP 03
右列：タイトル＋説明テキスト

各行はborder-bottom: 1px solid rgba(255,255,255,0.07)の横線で区切られ、最終行のみボーダーなし。行間のpadding-top/bottomにより均一な余白を確保。背景はbg-secondary（#0a1020）でServiceセクションと明度差をつけ、ページリズムのコントラストを生む。

PERFORMANCE

【Performance セクション】数値4分割レイアウト

320%
Font Awesomeアイコン
アイコン→数値→ラベル→補足の4段積み
150+
背景：宇宙画像
hue-rotate(200deg)で青系に着色
98%
数値はblue-accent色（#1a6dff）
52px・font-weight:800・letter-spacing:-0.03em
12
4列はrepeat(4,1fr)グリッド
縦border-rightで等分割を視覚化

FAQ

【FAQ セクション】アコーディオン・リスト

【開閉アニメーション】max-height: 0 → 200px へのCSSトランジション（0.4s ease）でアコーディオン展開を実装。開いた状態では左端の小円ドットがblue-accentで塗りつぶされ、右端の「＋」アイコンが「−」に切り替わる。背景色はbg-primary（#050a12）で統一し、境界はborder-bottomの極細ラインのみで区切る。
質問ボタン（button要素）はwidth:100%でクリック領域を行全体に拡張。display:flexとjustify-content:space-betweenで質問テキストとアイコンを両端配置にする。hover時にテキストカラーをblue-accentへ遷移させ、インタラクティブな要素であることをユーザーに伝える。
FAQリストのコンテナにmax-width:760pxとmargin:0 autoを設定し、広いビューポートでも行長が長くなりすぎないよう制約。文章の最適可読幅（約65〜75文字/行）を保つための一般的なレイアウト手法。
toggleFaq()関数はクリック毎に全faq-itemのopenクラスを除去したのち、対象アイテムにopenクラスを付与することで排他制御を実現。CSSはopenクラスの有無でmax-heightとアイコン形状を切り替えるだけのシンプルな構造にし、JSとCSSの役割を明確に分離している。

Let's Work Together.

【CTAセクション】大見出し左寄せ＋ボタン右端配置のflexレイアウト。背景は背景画像にhue-rotate＋brightnessフィルターを重ね、rgba(5,10,18,0.6)オーバーレイで暗色化。中央語「Work」のみblue-accentで着色し、視線を自然に誘導する。