Veliora Module — System Architecture

# フルスクリーンヒーローセクション。
ダークなパーティクル背景と
大見出しで構成されるレイアウト。

センター揃えのサブテキストエリア。ブランドキャッチコピーや製品概要など、簡潔なメッセージを配置するスペース。

## Philosophy

Section — 2カラムレイアウト / 左パネル

Our Philosophy

左半分のテキストパネル。ブランドの哲学やビジョンを説明するエリアです。複数行にわたる本文テキストが縦方向中央に配置され、セクションラベルとセットで構成されます。

Core Features

## 3カラムのフィーチャーグリッド。アイコン付きカード型レイアウト。

### 拡張性

アイコン・見出し・本文の3要素で構成されるフィーチャーカード。ホバー時にトップボーダーがアニメーション展開する設計。グリッドレイアウトで3列に並置されます。

### セキュリティ

各カードは独立した枠線で仕切られ、ダークトーンの背景色でフラットに設計されています。アクセントカラーのアイコンが視線を誘導する役割を担います。

### 高速処理

グリッド全体は細いボーダーで統一され、カード間のギャップを背景色で表現することで視覚的な整合性を保ちます。レスポンシブ時は1カラムに折り畳まれます。

150%UP

フルブリード3分割の数値表示。背景に写真を重ね、オーバーレイで暗度を調整。大型数字がメインビジュアルとなる統計セクション。

40%DOWN

Bebas Neue書体による巨大な数値が視覚的インパクトを生む。UP/DOWNバッジがカラーコードで方向性を示す。

98%

ホバー時に背景画像がズームし、オーバーレイ透明度が変化するインタラクション。各ブロックは縦下部にテキストを配置するデザイン。

How It Works

## 横並び3ステップのプロセスフロー。矢印コネクターで接続されたレイアウト。

Step 01

### ヒアリング

各ステップは円形アイコンと番号ラベル、見出し、説明文のセットで構成。ホバーでアクセントカラーが発光する。

Step 02

### モジュール設計

矢印アイコンがステップ間を橋渡しし、左右方向のフローを視覚化。モバイルでは縦方向に再配置される。

Step 03

### 実装・開発

最終ステップは連結矢印なしで終端。全体はmax-widthで中央配置されたflexレイアウトで構成される。

FAQ

## アコーディオン式よくある質問セクション。

各FAQ項目は、虫眼鏡アイコン・質問テキスト・プラスアイコンで構成されています。

クリック時にプラスアイコンが45度回転し、回答エリアがmax-heightアニメーションでスライド展開します。開いたアイテムにはアクセントカラーのボーダーが適用されます。

全体はmax-width 720pxで中央配置され、各項目は細い枠線で区切られたカードスタイルです。

背景はダークな単色で統一され、ホバー時にわずかに明るくなるトランジションが設定されています。回答テキストはやや小さいフォントサイズで、インデントを設けて可読性を確保します。

モバイルでもレイアウト崩れなく表示され、タッチ操作によるトグルが機能します。

FAQセクション全体はページ下部に配置され、フッターへの自然なブリッジ役を担います。項目数は任意に追加可能なコンポーネント設計です。