前世キャリア診断 PastLifeJob - あなたの前世の職業を暴く

## 1. アプリの目的・ターゲットユーザー
「前世で何の仕事をしていたか」をテーマにした、エンタメ寄りの心理診断アプリ。既存の性格診断（MBTI系）やストレス診断とは異なり、「価値観・行動パターン・こだわり」から中世〜近世の職業（騎士、錬金術師、吟遊詩人、占星術師、商人、修道士など）を導き出す。20〜30代の働く世代がSNSでシェアしたくなるキャッチーな結果カードを提供することで、自然な拡散を促す。ターゲット：15〜35歳のエンタメ診断好きなユーザー（特にSNSシェアを楽しむ層）。

## 2. 主要機能
- **20問の選択式診断**：「大勢の中で1人でいる方が楽 vs みんなと動く方が楽」「直感で決める vs データを集めてから決める」など、日常行動・価値観の二択または四択を20問で回答。質問は全5ページ×4問のステップ形式でプログレスバーを表示。
- **前世職業の診断結果（全20種）**：錬金術師、吟遊詩人、騎士、魔術師、航海士、聖職者、医師、商人、農夫、芸術家、建築家、占星術師、傭兵、図書館員、宮廷道化師、鍛冶師、宮廷料理人、スパイ、外交官、貴族の20種類。各職業に「前世の生き方・特徴」「現代の仕事との対応ヒント」「相性の良い前世職業」「ひとこと診断コメント」を収録。
- **結果カード生成**：職業名・イラスト風アイコン（SVGで内製）・一言診断文をカード状に表示。OGPメタタグとURL共有ボタン（Twitter/X・LINE・コピー）を実装し、結果URLにtype_idをクエリパラメーターとして付与して直接シェア可能。
- **相性診断（おまけ）**：友人・パートナーの結果タイプIDを入力すると「前世での関係性（戦友/商売仲間/ライバル等）」を表示するミニ相性コンテンツ。
- **診断ランキング**：DBに蓄積した結果データを集計し「今週最も多い前世職業TOP5」を表示。投票数が可視化されることで再訪・シェアを誘発。

## 3. 画面構成
- **トップページ（index.php）**：キャッチコピー「あなたの魂が生きた職業は？」、診断スタートボタン、今週のランキングTOP5カード（横スクロール）、シェアされた結果ツイート風サンプル表示。
- **診断ページ（quiz.php）**：5ステップ×4問のフォーム。JSで画面遷移（ページ遷移なし・SPA風）。プログレスバー（1/5〜5/5）、選択肢はカード型ボタン。各問に絵文字アイコン付き。
- **結果ページ（result.php?type=alchemist 等）**：大きな職業イラストアイコン（SVG内製）、職業名（日本語＋英語）、4段落の診断テキスト、相性職業バッジ×2、シェアボタン群、「もう一度診断する」ボタン、「相性を調べる」フォーム。
- **相性ページ（compat.php）**：自分のタイプと相手のタイプを選択するドロップダウン、関係性テキスト、アイコン2つを並べた表示。
- **ランキングページ（ranking.php）**：今週・全期間の職業別診断数を棒グラフ（CSS純正）で表示。

## 4. データ構造
**テーブル: diagnosis_results**
```
id INT AUTO_INCREMENT PRIMARY KEY
type_id VARCHAR(30) -- 職業キー（例: alchemist）
session_id VARCHAR(64) -- PHP session_id（重複防止に利用）
created_at DATETIME DEFAULT CURRENT_TIMESTAMP
```
診断ロジックはPHP側で回答の集計スコアをもとに5軸（創造性・社交性・論理性・冒険心・奉仕精神）を算出し、最もスコアが近い職業タイプにマッピング。質問・職業データはPHPの連想配列定数として実装（DBなし）。DBは診断結果件数の集計のみに使用。

## 5. デザインの方向性
- **世界観**：羊皮紙×中世ファンタジー風。背景はダークブラウン〜深緑のグラデーション（CSS）。装飾はアーチ型ボーダー、インクにじみ風テキストシャドウ、蝋燭アイコン（絵文字）で演出。
- **フォント**：日本語はNoto Serif JP（Google Fonts）、英語見出しはCinzel（Google Fonts）でクラシカル感を演出。
- **カラーパレット**：ダークパーチメント（#2B1B0E）・ゴールド（#C9A84C）・ディープグリーン（#1E3A2F）・オフホワイト（#F5ECD7）。
- **結果カード**：シェア映えするよう縦長カード（360×560px相当）デザイン。職業SVGアイコンは線画スタイルで内製20種を用意。スマホでの全画面表示を優先。
- **アニメーション**：診断完了時にcanvasで魔法陣が回転するローディング演出（2秒）をJSで実装。