---
version: alpha
name: カオナビ (Kaonavi)
description: タレントマネジメントシステム「カオナビ」のブランドデザインシステム。自然をモチーフにした色名体系と、Noto Sans JP / Inter によるバイリンガル組版が特徴。
sources:
  - https://www.kaonavi.jp/
  - https://www.kaonavi.jp/css/common/base-child.css
  - https://www.kaonavi.jp/css/common/base.css
  - https://www.kaonavi.jp/css/top-child.css
notes:
  - カラー変数はすべて base-child.css の :root に直接定義されており、CSS カスタムプロパティとして実装されている（直接証拠）
  - フォント名 --noto / --inter も変数化されており、意図的なトークン設計が確認できる（直接証拠）
  - タイポグラフィサイズ・ボタン高さはCSSから実測値として抽出（直接証拠）
  - セクション背景色の用途はCSS コメントと変数使用箇所から推定（推論）
  - ロゴ詳細寸法（アスペクト比・保護領域）はブランドガイドページへのアクセスができないため不明（制限）

colors:
  # --- コアブランドカラー（自然モチーフ命名） ---
  sun: "#FFDA1B"
  water: "#447FE0"
  night: "#202226"
  cloud: "#FFFFFF"
  leaf: "#2F7417"

  # --- Lyrical（赤系ステータス） ---
  ly-600: "#AD2929"
  ly-400: "#D64C3A"
  ly-200: "#FE9384"
  ly-50:  "#FDF3F1"

  # --- Passion（オレンジ系） ---
  pa-600: "#734B15"
  pa-400: "#EE7100"
  pa-200: "#FEC010"
  pa-50:  "#FFFBD9"

  # --- Avocado（緑系） ---
  av-600: "#025D2C"
  av-400: "#30A143"
  av-200: "#61D45D"
  av-50:  "#ECFAEC"

  # --- Purple（青紫系、インタラクティブ要素に多用） ---
  pu-600: "#303560"
  pu-400: "#3F6ECC"
  pu-200: "#579EF2"
  pu-50:  "#EDF6FF"

  # --- Gray スケール ---
  gr-600: "#56575B"
  gr-500: "#737378"
  gr-400: "#949598"
  gr-300: "#ACADB0"
  gr-250: "#D0D1D3"
  gr-200: "#DADCDF"
  gr-150: "#E5E6EA"
  gr-100: "#F0F1F5"
  gr-50:  "#FAFAFC"

  # --- Sand スケール（暖色系背景） ---
  sa-600: "#EDDFBB"
  sa-400: "#F3EACF"
  sa-200: "#F8F3E1"
  sa-50:  "#FBF8EE"

typography:
  page-title:
    fontFamily: "Noto Sans JP, sans-serif"
    fontSize: "48px"
    fontSizeMobile: "32px"
    fontWeight: 700
    lineHeight: "1.4em"
    letterSpacing: "1px"
  page-taxonomy-title:
    fontFamily: "Noto Sans JP, sans-serif"
    fontSize: "32px"
    fontWeight: 800
    lineHeight: "1.4em"
    letterSpacing: "1px"
  section-title:
    fontSize: "40px"
    fontSizeMobile: "24px"
    fontWeight: "bold"
    lineHeight: 1.4
    letterSpacing: "1px"
  section-subtitle:
    fontSize: "18px"
    fontSizeMobile: "16px"
    fontWeight: "bold"
    lineHeight: "1.5em"
    letterSpacing: "1px"
    marginTop: "24px"
  body:
    fontFamily: "YakuHanJP, 游ゴシック体, YuGothic, ヒラギノ角ゴ ProN, メイリオ, sans-serif"
    fontSize: "16px"
    fontWeight: 500
    lineHeight: "1.8em"
    letterSpacing: "1px"
  caption:
    fontSize: "14px"
  small:
    fontSize: "12px"
  label-numeric:
    fontFamily: "Inter, sans-serif"
    fontWeight: 700

components:
  button-primary:
    height: "72px"
    borderRadius: "12px"
    backgroundColor: "{colors.water}"
    border: "2px solid {colors.water}"
    color: "{colors.cloud}"
    fontSize: "16px"
    fontWeight: "bold"
    lineHeight: "1.5em"
    hover:
      backgroundColor: "{colors.sun}"
      color: "{colors.pu-400}"
  button-secondary:
    height: "72px"
    borderRadius: "12px"
    backgroundColor: "{colors.cloud}"
    border: "2px solid {colors.water}"
    color: "{colors.pu-400}"
    fontSize: "16px"
    fontWeight: "bold"
    lineHeight: "1.5em"
    hover:
      backgroundColor: "{colors.sun}"
      color: "{colors.pu-400}"
  button-free-badge:
    position: "absolute top-right"
    size: "56px"
    shape: "circle"
    backgroundColor: "{colors.pa-400}"
    color: "#FFFFFF"
    fontSize: "14px"
    fontWeight: "bold"
    label: "無料"
  section-tag:
    backgroundColor: "{colors.sun}"
    borderRadius: "12px"
    fontWeight: "bold"
    color: "{colors.night}"
---

## 概要

カオナビは「個の力を最大化する」タレントマネジメントシステム。4,500社以上に導入されシェアNo.1。
ブランドカラーは **Sun（黄）／Water（青）／Night（濃紺）** の3軸を核とし、自然をモチーフにした詩的な命名規則でカラーパレットが構成されている。
日本語UIには Noto Sans JP＋ YakuHanJP（約物半角化）、欧文・数値には Inter を使い分けるバイリンガル組版が前提。

---

## カラー

### コアブランドカラー

| トークン名 | 値 | 用途 |
|---|---|---|
| `--sun` | `#FFDA1B` | アクセント黄。ホバー背景、ハイライト、「NEW」バッジ |
| `--water` | `#447FE0` | プライマリ青。CTAボタン、リンク、フォーカスリング |
| `--night` | `#202226` | 基本テキスト色。本文・見出し全般 |
| `--cloud` | `#FFFFFF` | 白背景。カード、ヘッダー、フッター |
| `--leaf` | `#2F7417` | 緑アクセント。成功・ポジティブ系表示（限定使用） |

### Purple パレット（インタラクティブ UI）

`--pu-400: #3F6ECC` がボタンテキスト・リンクに多用される中間色。
`--pu-600: #303560` は強調見出し・ダーク配置用。
`--pu-50: #EDF6FF` はカード・セクション背景として使用。

### Passion パレット（オレンジ系）

`--pa-400: #EE7100` は「無料」バッジなど強調CTA装飾に使用。
`--pa-50: #FFFBD9` はセクション背景バリエーション。

### Lyrical パレット（赤系ステータス）

エラー・警告・ネガティブステータス専用。通常のUIには使用しない。

### Avocado パレット（緑系ステータス）

成功・完了・ポジティブステータス専用。

### グレースケール

| トークン | 値 | 用途例 |
|---|---|---|
| `--gr-600` | `#56575B` | 訪問済みリンク、淡いテキスト |
| `--gr-300` | `#ACADB0` | ボーダー、区切り線 |
| `--gr-100` | `#F0F1F5` | 薄い背景 |
| `--gr-50`  | `#FAFAFC` | 最も薄い背景（フッターなど） |

### Sand パレット（暖色系背景）

`--sa-50: #FBF8EE` など、温かみのあるセクション背景に使用。情報系セクション・プレミアム感の演出。

### セクション背景の組み合わせ

CSS 内で確認された背景色パターン：

- 白（`--cloud`）：標準カード・ヘッダー・フッター
- Sand（`--sa-50`）：暖色系セクション（事例紹介など）
- Light Gray（`--gr-50`）：フッターナビゲーション背景
- Light Purple（`--pu-50`）：機能紹介セクション
- Light Orange（`--pa-50`）：価格・CTA強調セクション

---

## タイポグラフィ

### フォントスタック

**日本語本文・見出し（`--noto`）**
```
"Noto Sans JP", sans-serif
```
ページタイトル・タクソノミータイトルに使用。Web フォントとして Google Fonts から読み込む。

**欧文・数値（`--inter`）**
```
"Inter", sans-serif
```
フッター電話番号など、欧文専用箇所に限定使用。

**本文フォールバックスタック**
```
YakuHanJP, "游ゴシック体", YuGothic, "ヒラギノ角ゴ ProN W3", "メイリオ", sans-serif
```
YakuHanJP は約物（「」、。など）の半角化 Web フォント。body 全体に適用。

### タイプスケール

| 役割 | PC | SP | weight | line-height | letter-spacing |
|---|---|---|---|---|---|
| page-title（H1相当） | 48px | 32px | 700 | 1.4em | 1px |
| page-taxonomy-title | 32px | — | 800 | 1.4em | 1px |
| section-title（H2相当） | 40px | 24px | bold | 1.4 | 1px |
| section-subtitle（H3相当） | 18px | 16px | bold | 1.5em | 1px |
| body | 16px | 16px | 500 | 1.8em | 1px |
| caption | 14px | — | normal | — | — |
| small | 12px | — | normal | — | — |
| label-numeric | 24px（Inter） | — | 700 | — | — |

### 組版上のルール

- `font-feature-settings: "palt"` を body に指定し、プロポーショナルメトリクスを有効化（日本語詰め組み）
- letter-spacing 1px は見出し・本文全般に統一して適用
- section-subtitle の margin-top は 24px（SP: 8px）

---

## レイアウト

### グリッド

- **コンテンツ最大幅**：`max-width: 1280px`（`.child-inner`）
- **ラッパー最小幅**：`min-width: 1024px`（デスクトップ専用）
- **モバイルブレークポイント**：`768px`
- `scroll-padding-top`: 128px（PC）/ 104px（SP）— 固定ヘッダーのアンカー補正

### スペーシングスケール

セクション間マージン（CSS から抽出）：

| トークン相当 | 値 | SP 値 |
|---|---|---|
| small | 20px | 20px |
| medium | 40px | 20px |
| large | 60px | 40px |
| xlarge | 80px | 60px |

フッタースタック内パディング: `80px 60px`（SP: 縮小）

---

## エレベーション（影）

```css
/* elevation-1: カード・ボタン等 */
box-shadow:
  0 1px 4px 0 rgba(32, 34, 38, 0.12),
  0 4px 8px 0 rgba(32, 34, 38, 0.07),
  0 10px 12px 0 rgba(32, 34, 38, 0.04);

/* elevation-2: モーダル・ドロップダウン等 */
box-shadow:
  0 1px 4px 0 rgba(32, 34, 38, 0.12),
  0 6px 12px 0 rgba(32, 34, 38, 0.10),
  0 12px 24px 0 rgba(32, 34, 38, 0.08);

/* レガシー カード影（一部コンポーネント） */
box-shadow:
  0 2px 2px 0 rgba(0,0,0,0.14),
  0 6px 10px -2px rgba(0,0,0,0.14),
  0 1px 5px 0 rgba(0,0,0,0.2);
```

影のベースカラーは `--night (#202226)` の RGB 値 (32, 34, 38) に統一。

---

## コンポーネント

### ボタン

**プライマリ（`.child-button.ylw`）**
```
height: 72px
border-radius: 12px
background: #447FE0 (--water)
border: 2px solid #447FE0
color: #FFFFFF
font: 16px bold
hover → background: #FFDA1B (--sun), color: #3F6ECC (--pu-400)
```

**セカンダリ（`.child-button.wht`）**
```
height: 72px
border-radius: 12px
background: #FFFFFF
border: 2px solid #447FE0 (--water)
color: #3F6ECC (--pu-400)
hover → background: #FFDA1B (--sun), color: #3F6ECC
```

**「無料」バッジ付き（`.child-button.free`）**
- ボタン右上に直径 56px の円形バッジ
- 背景：`#EE7100`（--pa-400）、テキスト：白、14px bold
- 「無料」の文字を表示

### ナビゲーション

**ヘッダー（デスクトップ）**
- ロゴ幅：260px（上部展開時）→ スクロール後 36px（アイコンのみ）
- ナビリンク：16px、bold、カラー `#313131`
- スクロール後：14px、padding 16px
- アクティブ・ホバー色：`#ffcd46`（--sun に近似）
- 「NEW」バッジ：`#ffcd46` 背景、白テキスト、10px、border-radius 10px

**ヘッダー（モバイル）**
- 高さ：64px
- ロゴ幅：128px

### セクションタグ / カテゴリバッジ

```
background: #FFDA1B (--sun)
border-radius: 12px
font-weight: bold
color: --night
padding: 4px 8px
```

### リンク

- デフォルト：`color: #000`、`text-decoration: underline`
- 訪問済み：`color: #666`（または `--gr-600`）
- ホバー：`color: #b26000`（旧スタック）または `--water`（新スタック）
- ヒーロー内リンク：`color: #335799`、border-bottom 1px、ホバーで `#f3bf35`（sun相当）

### フッター

- 背景（ナビエリア）：`--gr-50`（#FAFAFC）
- ロゴ幅：最大 280px
- 電話番号：Inter、24px、weight 700

---

## 画像・ビジュアル

### ヒーロー

- 背景画像：`/img/common/hero_back.png`（SP: `hero_back_sp.png`）、center center、`cover`
- page-title の `strong` 要素：`color: --pu-400`、背景に `--sun` のハイライト
- アワードバッジ（Good Design Award など）：1px solid `#ddd`、border-radius 4px

### 写真・スクリーンショット

- PC モックアップ＋スマートフォンモックアップを組み合わせたプロダクトショット
- SP 対応画像は `_sp.png` サフィックスで別ファイル管理
- 導入事例：企業ロゴグリッド（40社以上）をカルーセル表示

### アイコン

- SVG 形式（`/img/common/*.svg`）
- 矢印アイコン：青（`child_icon_arrow_blu.svg`）と黄（`child_icon_arrow_ylw.svg`）の2色セット
- SNS アイコン：Facebook、X（Twitter）

---

## ロゴ・商標

- ロゴ表記：**カオナビ**（日本語）/ **kaonavi**（英語）
- ロゴファイル：`/img/common/child_logo.png`
- エンタープライズロゴ：`/img/enterprise/ep_logo_small.png`
- ファビコン：64×64px、Apple Touch Icon：192×192px

**サイズ規定（CSS から抽出）：**
- 大ロゴ（ページ上部）：width 260px
- スクロール後コンパクト：36px × 40px（アイコン部分のみ）
- モバイル：128px

> **注意**：公式ブランドガイドラインページが非公開のため、保護領域・最小サイズ・禁止事項の詳細は未確認。推論で利用しないこと。

---

## Do's and Don'ts

### Do

- ホバー状態には必ず `--sun (#FFDA1B)` + `--pu-400 (#3F6ECC)` の組み合わせを使う（サイト全体で統一）
- 見出し・CTAには `letter-spacing: 1px` を適用する
- 日本語テキストには YakuHanJP を前置して約物を半角化する
- 数値・電話番号には Inter を使う
- カードの影は elevation トークンから選ぶ（自作の box-shadow を使わない）
- セクション背景は定義済みパレット（sa-50、gr-50、pu-50、pa-50）から選ぶ

### Don't

- `--sun` を大面積の背景色として使わない（アクセント・ハイライト専用）
- `--leaf` や `--av-*` を装飾目的で多用しない（ステータス系の意味が薄れる）
- `--ly-*`（赤系）を単なるデザイン装飾に使わない（エラー・警告の意味を持つ）
- ボタン高さ 72px を独自値に変更しない（CTA の視認性・タップ領域が劣化する）
- 日本語本文に Inter を使わない（YakuHanJP/Noto Sans JP スタックを維持する）
- ロゴのアスペクト比を変更しない・テキストを重ねない

{
  "$schema": "https://aistyles.dev/schema/tokens-v1.json",
  "version": "1.0",
  "brand": {
    "slug": "kaonavi",
    "name": "カオナビ (Kaonavi)",
    "url": "https://www.kaonavi.jp/",
    "description": "「個の力を最大化する」をミッションとするタレントマネジメントシステム。4,500 社以上に導入されシェア No.1。ブランドカラーは Sun (黄) / Water (青) / Night (濃紺) の 3 軸を核とし、自然をモチーフにした詩的な命名規則 (Lyrical / Passion / Avocado / Purple / Sand) でカラーパレットが構成されている。日本語 UI には Noto Sans JP + YakuHanJP (約物半角化)、欧文・数値には Inter を使い分けるバイリンガル組版が前提。CSS Custom Properties で全トークンが :root に一元定義された堅牢な設計。",
    "category": "saas",
    "tags": [
      "b2b",
      "japanese",
      "saas",
      "hr-tech",
      "talent-management",
      "design-tokens",
      "noto-sans-jp",
      "yakuhanjp",
      "poetic-naming"
    ],
    "theme": "light",
    "language": "ja"
  },
  "sources": [
    "https://www.kaonavi.jp/",
    "https://www.kaonavi.jp/css/common/base-child.css",
    "https://www.kaonavi.jp/css/common/base.css",
    "https://www.kaonavi.jp/css/top-child.css"
  ],
  "extractedAt": "2026-05-17",
  "notes": [
    "直接証拠: カラー変数はすべて base-child.css の :root に直接定義されており、CSS カスタムプロパティとして実装されている。",
    "直接証拠: フォント名 --noto / --inter も変数化されており、意図的なトークン設計が確認できる。",
    "直接証拠: タイポグラフィサイズ・ボタン高さは CSS から実測値として抽出。",
    "推論: セクション背景色の用途は CSS コメントと変数使用箇所から推定。",
    "制限: ロゴ詳細寸法 (アスペクト比・保護領域) はブランドガイドページへのアクセスができないため不明。",
    "重要: 詩的なカラー命名規則 (Sun / Water / Night / Cloud / Leaf + Lyrical / Passion / Avocado / Purple / Sand) は aistyles 全サイト中で最もユニークな設計。",
    "重要: ホバー状態は必ず --sun (#FFDA1B) + --pu-400 (#3F6ECC) の組み合わせ — サイト全体で統一されている核心ルール。",
    "重要: ボタン高さ 72px は CTA の視認性・タップ領域確保のため変更禁止。"
  ],
  "colors": {
    "groups": [
      {
        "label": "Core Brand (Nature Naming)",
        "tokens": [
          {
            "name": "Sun",
            "value": "#FFDA1B",
            "token": "--sun",
            "role": "アクセント黄。ホバー背景・ハイライト・『NEW』バッジ。大面積背景には使わない"
          },
          {
            "name": "Water",
            "value": "#447FE0",
            "token": "--water",
            "role": "プライマリ青。CTA ボタン・リンク・フォーカスリング"
          },
          {
            "name": "Night",
            "value": "#202226",
            "token": "--night",
            "role": "基本テキスト色。本文・見出し全般 (RGB 32,34,38 は影のベースカラーにも使用)"
          },
          {
            "name": "Cloud",
            "value": "#FFFFFF",
            "token": "--cloud",
            "role": "白背景。カード・ヘッダー・フッター"
          },
          {
            "name": "Leaf",
            "value": "#2F7417",
            "token": "--leaf",
            "role": "緑アクセント。成功・ポジティブ系表示 (限定使用)"
          }
        ]
      },
      {
        "label": "Purple (Interactive UI)",
        "tokens": [
          {
            "name": "Purple 600",
            "value": "#303560",
            "token": "--pu-600",
            "role": "強調見出し・ダーク配置用"
          },
          {
            "name": "Purple 400",
            "value": "#3F6ECC",
            "token": "--pu-400",
            "role": "ボタンテキスト・リンクに多用される中間色。ホバー時のテキスト色"
          },
          {
            "name": "Purple 200",
            "value": "#579EF2",
            "token": "--pu-200",
            "role": "明るいアクセント"
          },
          {
            "name": "Purple 50",
            "value": "#EDF6FF",
            "token": "--pu-50",
            "role": "機能紹介セクション背景"
          }
        ]
      },
      {
        "label": "Passion (Orange)",
        "tokens": [
          {
            "name": "Passion 600",
            "value": "#734B15",
            "token": "--pa-600",
            "role": "ダークオレンジ強調"
          },
          {
            "name": "Passion 400",
            "value": "#EE7100",
            "token": "--pa-400",
            "role": "『無料』バッジなど強調 CTA 装飾"
          },
          {
            "name": "Passion 200",
            "value": "#FEC010",
            "token": "--pa-200",
            "role": "明るいオレンジアクセント"
          },
          {
            "name": "Passion 50",
            "value": "#FFFBD9",
            "token": "--pa-50",
            "role": "価格・CTA 強調セクション背景"
          }
        ]
      },
      {
        "label": "Lyrical (Error / Red)",
        "tokens": [
          {
            "name": "Lyrical 600",
            "value": "#AD2929",
            "token": "--ly-600",
            "role": "エラー・警告強調 (ネガティブステータス専用)"
          },
          {
            "name": "Lyrical 400",
            "value": "#D64C3A",
            "token": "--ly-400",
            "role": "エラー標準色"
          },
          {
            "name": "Lyrical 200",
            "value": "#FE9384",
            "token": "--ly-200",
            "role": "エラーアクセント"
          },
          {
            "name": "Lyrical 50",
            "value": "#FDF3F1",
            "token": "--ly-50",
            "role": "エラー背景"
          }
        ]
      },
      {
        "label": "Avocado (Success / Green)",
        "tokens": [
          {
            "name": "Avocado 600",
            "value": "#025D2C",
            "token": "--av-600",
            "role": "成功・完了強調 (ポジティブステータス専用)"
          },
          {
            "name": "Avocado 400",
            "value": "#30A143",
            "token": "--av-400",
            "role": "成功標準色"
          },
          {
            "name": "Avocado 200",
            "value": "#61D45D",
            "token": "--av-200",
            "role": "成功アクセント"
          },
          {
            "name": "Avocado 50",
            "value": "#ECFAEC",
            "token": "--av-50",
            "role": "成功背景"
          }
        ]
      },
      {
        "label": "Gray Scale",
        "tokens": [
          {
            "name": "Gray 600",
            "value": "#56575B",
            "token": "--gr-600",
            "role": "訪問済みリンク・淡いテキスト"
          },
          {
            "name": "Gray 500",
            "value": "#737378",
            "token": "--gr-500",
            "role": "セカンダリテキスト"
          },
          {
            "name": "Gray 400",
            "value": "#949598",
            "token": "--gr-400",
            "role": "中間グレー"
          },
          {
            "name": "Gray 300",
            "value": "#ACADB0",
            "token": "--gr-300",
            "role": "ボーダー・区切り線"
          },
          {
            "name": "Gray 250",
            "value": "#D0D1D3",
            "token": "--gr-250",
            "role": "薄ボーダー"
          },
          {
            "name": "Gray 200",
            "value": "#DADCDF",
            "token": "--gr-200",
            "role": "繊細な区切り"
          },
          {
            "name": "Gray 150",
            "value": "#E5E6EA",
            "token": "--gr-150",
            "role": "最薄ボーダー"
          },
          {
            "name": "Gray 100",
            "value": "#F0F1F5",
            "token": "--gr-100",
            "role": "薄い背景"
          },
          {
            "name": "Gray 50",
            "value": "#FAFAFC",
            "token": "--gr-50",
            "role": "最も薄い背景 (フッターナビ等)"
          }
        ]
      },
      {
        "label": "Sand (Warm Background)",
        "tokens": [
          {
            "name": "Sand 600",
            "value": "#EDDFBB",
            "token": "--sa-600",
            "role": "ダークサンド (強調)"
          },
          {
            "name": "Sand 400",
            "value": "#F3EACF",
            "token": "--sa-400",
            "role": "中間サンド"
          },
          {
            "name": "Sand 200",
            "value": "#F8F3E1",
            "token": "--sa-200",
            "role": "明るいサンド"
          },
          {
            "name": "Sand 50",
            "value": "#FBF8EE",
            "token": "--sa-50",
            "role": "暖色系セクション背景 (事例紹介など)。プレミアム感の演出"
          }
        ]
      }
    ]
  },
  "typography": {
    "fonts": [
      {
        "family": "Noto Sans JP",
        "stack": "'Noto Sans JP', sans-serif",
        "weights": [
          500,
          700,
          800
        ],
        "role": "日本語見出し・ページタイトル・タクソノミータイトル。Web フォントとして Google Fonts から読み込み (--noto 変数化)"
      },
      {
        "family": "Inter",
        "stack": "'Inter', sans-serif",
        "weights": [
          400,
          700
        ],
        "role": "欧文・数値専用。フッター電話番号など (--inter 変数化)"
      },
      {
        "family": "Body Fallback Stack",
        "stack": "YakuHanJP, '游ゴシック体', YuGothic, 'ヒラギノ角ゴ ProN W3', 'メイリオ', sans-serif",
        "weights": [
          400,
          500,
          700
        ],
        "role": "本文・UI。YakuHanJP は約物 (「」、。) の半角化 Web フォント、body 全体に適用"
      }
    ],
    "scale": [
      {
        "role": "page-title (H1)",
        "size": "48px",
        "weight": 700,
        "lineHeight": 1.4,
        "letterSpacing": "1px",
        "note": "デスクトップ 48px / モバイル 32px、Noto Sans JP"
      },
      {
        "role": "page-taxonomy-title",
        "size": "32px",
        "weight": 800,
        "lineHeight": 1.4,
        "letterSpacing": "1px",
        "note": "タクソノミー (カテゴリ) ページのタイトル、Noto Sans JP 800"
      },
      {
        "role": "section-title (H2)",
        "size": "40px",
        "weight": 700,
        "lineHeight": 1.4,
        "letterSpacing": "1px",
        "note": "デスクトップ 40px / モバイル 24px"
      },
      {
        "role": "section-subtitle (H3)",
        "size": "18px",
        "weight": 700,
        "lineHeight": 1.5,
        "letterSpacing": "1px",
        "note": "デスクトップ 18px / モバイル 16px、margin-top: 24px (SP: 8px)"
      },
      {
        "role": "body",
        "size": "16px",
        "weight": 500,
        "lineHeight": 1.8,
        "letterSpacing": "1px",
        "note": "PC/SP 共通 16px、YakuHanJP + 游ゴシック体スタック"
      },
      {
        "role": "caption",
        "size": "14px",
        "weight": 400,
        "lineHeight": 1.5,
        "note": "補足テキスト"
      },
      {
        "role": "small",
        "size": "12px",
        "weight": 400,
        "lineHeight": 1.4,
        "note": "注釈・最小テキスト"
      },
      {
        "role": "label-numeric",
        "size": "24px",
        "weight": 700,
        "lineHeight": 1.2,
        "note": "Inter 700、電話番号・数値表示専用"
      }
    ],
    "japanese": {
      "fontStack": "YakuHanJP, '游ゴシック体', YuGothic, 'ヒラギノ角ゴ ProN W3', 'メイリオ', sans-serif",
      "lineHeight": 1.8,
      "letterSpacing": "1px",
      "openType": {
        "palt": true,
        "kern": true
      },
      "kinsoku": {
        "wordBreak": "keep-all",
        "lineBreak": "strict"
      },
      "notes": [
        "YakuHanJP を最先頭に置き、約物の半角化を強制",
        "font-feature-settings: 'palt' を body に指定、プロポーショナルメトリクス有効化",
        "letter-spacing: 1px が見出し・本文全般の標準値",
        "本文 line-height: 1.8 で日本語の可読性を最優先",
        "Noto Sans JP は見出し・タイトル専用、本文には YakuHanJP/游ゴシック体スタックを使用",
        "Inter は欧文・数値専用、日本語には絶対に適用しない"
      ]
    }
  },
  "spacing": {
    "baseUnit": "8px",
    "tokens": [
      {
        "name": "small",
        "value": "20px",
        "role": "セクション間マージン (小)、SP も同値"
      },
      {
        "name": "medium",
        "value": "40px",
        "role": "セクション間マージン (中)、SP は 20px"
      },
      {
        "name": "large",
        "value": "60px",
        "role": "セクション間マージン (大)、SP は 40px"
      },
      {
        "name": "xlarge",
        "value": "80px",
        "role": "セクション間マージン (特大)、SP は 60px"
      },
      {
        "name": "footer-padding",
        "value": "80px 60px",
        "role": "フッタースタック内パディング (SP: 縮小)"
      },
      {
        "name": "scroll-padding-top",
        "value": "128px",
        "role": "PC 固定ヘッダーのアンカー補正 (SP: 104px)"
      },
      {
        "name": "container-max",
        "value": "1280px",
        "role": "コンテンツ最大幅 (.child-inner)"
      },
      {
        "name": "wrapper-min",
        "value": "1024px",
        "role": "ラッパー最小幅 (デスクトップ専用)"
      }
    ]
  },
  "breakpoints": {
    "mobile": {
      "value": "≤ 767px",
      "role": "モバイル (1 カラム)"
    },
    "desktop": {
      "value": "≥ 768px",
      "role": "デスクトップ (min-width 1024px ラッパー・max-width 1280px コンテンツ)"
    }
  },
  "radius": {
    "button": "12px",
    "tag": "12px",
    "badge": "10px",
    "circle": "50%",
    "default": "12px"
  },
  "shadows": [
    {
      "name": "elevation-1",
      "value": "0 1px 4px 0 rgba(32,34,38,0.12), 0 4px 8px 0 rgba(32,34,38,0.07), 0 10px 12px 0 rgba(32,34,38,0.04)",
      "role": "カード・ボタンの軽い浮遊感 (3 段階重ね)"
    },
    {
      "name": "elevation-2",
      "value": "0 1px 4px 0 rgba(32,34,38,0.12), 0 6px 12px 0 rgba(32,34,38,0.10), 0 12px 24px 0 rgba(32,34,38,0.08)",
      "role": "モーダル・ドロップダウンの強い浮遊感"
    },
    {
      "name": "legacy-card",
      "value": "0 2px 2px 0 rgba(0,0,0,0.14), 0 6px 10px -2px rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.2)",
      "role": "一部レガシーカード用 (Material 系)"
    }
  ],
  "components": [
    {
      "type": "button",
      "name": "Primary Button (Water)",
      "description": "Water (青) 背景の主要 CTA。ホバーで Sun (黄) + Purple-400 テキストに切替",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#447FE0",
            "color": "#FFFFFF",
            "border": "2px solid #447FE0",
            "borderRadius": "12px",
            "height": "72px",
            "padding": "0 32px",
            "fontSize": "16px",
            "fontWeight": "700",
            "lineHeight": "1.5em",
            "letterSpacing": "1px"
          }
        },
        {
          "label": "Hover",
          "props": {
            "background": "#FFDA1B",
            "color": "#3F6ECC",
            "border": "2px solid #FFDA1B",
            "borderRadius": "12px",
            "height": "72px",
            "padding": "0 32px",
            "fontSize": "16px",
            "fontWeight": "700"
          }
        }
      ]
    },
    {
      "type": "button",
      "name": "Secondary Button (White)",
      "description": "白背景 + Water 枠のセカンダリボタン。ホバーで Primary と同じ Sun/Purple 切替",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#FFFFFF",
            "color": "#3F6ECC",
            "border": "2px solid #447FE0",
            "borderRadius": "12px",
            "height": "72px",
            "padding": "0 32px",
            "fontSize": "16px",
            "fontWeight": "700",
            "lineHeight": "1.5em",
            "letterSpacing": "1px"
          }
        },
        {
          "label": "Hover",
          "props": {
            "background": "#FFDA1B",
            "color": "#3F6ECC",
            "border": "2px solid #FFDA1B",
            "borderRadius": "12px",
            "height": "72px"
          }
        }
      ]
    },
    {
      "type": "badge",
      "name": "Free Badge (Circle)",
      "description": "ボタン右上に絶対配置される直径 56px の円形『無料』バッジ",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#EE7100",
            "color": "#FFFFFF",
            "borderRadius": "50%",
            "width": "56px",
            "height": "56px",
            "fontSize": "14px",
            "fontWeight": "700",
            "position": "absolute",
            "label": "無料"
          }
        }
      ]
    },
    {
      "type": "badge",
      "name": "Section Tag (Sun)",
      "description": "Sun 黄色背景の小型カテゴリバッジ",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#FFDA1B",
            "color": "#202226",
            "borderRadius": "12px",
            "padding": "4px 8px",
            "fontWeight": "700"
          }
        }
      ]
    },
    {
      "type": "badge",
      "name": "NEW Badge (Nav)",
      "description": "ナビゲーション内の『NEW』表示バッジ",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#FFCD46",
            "color": "#FFFFFF",
            "borderRadius": "10px",
            "fontSize": "10px",
            "fontWeight": "700",
            "padding": "2px 6px"
          }
        }
      ]
    },
    {
      "type": "nav",
      "name": "Global Header (Desktop)",
      "description": "デスクトップヘッダー。ロゴはスクロール時にアイコンのみへ縮小",
      "variants": [
        {
          "label": "Default (Top)",
          "props": {
            "background": "#FFFFFF",
            "color": "#313131",
            "logoWidth": "260px",
            "linkFontSize": "16px",
            "linkFontWeight": "700",
            "hoverColor": "#FFCD46"
          }
        },
        {
          "label": "Scrolled",
          "props": {
            "background": "#FFFFFF",
            "color": "#313131",
            "logoWidth": "36px",
            "linkFontSize": "14px",
            "linkPadding": "16px",
            "hoverColor": "#FFCD46"
          }
        }
      ]
    },
    {
      "type": "nav",
      "name": "Global Header (Mobile)",
      "description": "モバイルヘッダー。高さ 64px、ロゴ 128px",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#FFFFFF",
            "color": "#313131",
            "height": "64px",
            "logoWidth": "128px"
          }
        }
      ]
    },
    {
      "type": "link",
      "name": "Text Link",
      "description": "本文中のテキストリンク。下線常時表示、訪問済みはグレー",
      "variants": [
        {
          "label": "Default",
          "props": {
            "color": "#000000",
            "textDecoration": "underline"
          }
        },
        {
          "label": "Visited",
          "props": {
            "color": "#56575B",
            "textDecoration": "underline"
          }
        },
        {
          "label": "Hover (New Stack)",
          "props": {
            "color": "#447FE0",
            "textDecoration": "underline"
          }
        }
      ]
    },
    {
      "type": "link",
      "name": "Hero Link",
      "description": "ヒーロー内リンク。border-bottom 1px、ホバーで黄色",
      "variants": [
        {
          "label": "Default",
          "props": {
            "color": "#335799",
            "borderBottom": "1px solid #335799",
            "textDecoration": "none"
          }
        },
        {
          "label": "Hover",
          "props": {
            "color": "#F3BF35",
            "borderBottom": "1px solid #F3BF35"
          }
        }
      ]
    },
    {
      "type": "card",
      "name": "Card with Elevation",
      "description": "elevation-1 (3 段重ね影) を使った浮遊感のあるカード",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#FFFFFF",
            "color": "#202226",
            "borderRadius": "12px",
            "padding": "24px",
            "boxShadow": "0 1px 4px 0 rgba(32,34,38,0.12), 0 4px 8px 0 rgba(32,34,38,0.07), 0 10px 12px 0 rgba(32,34,38,0.04)"
          }
        }
      ]
    },
    {
      "type": "section",
      "name": "Background Sections",
      "description": "セクション背景の組み合わせパターン (5 種)",
      "variants": [
        {
          "label": "White (Default)",
          "props": {
            "background": "#FFFFFF",
            "role": "標準カード・ヘッダー・フッター"
          }
        },
        {
          "label": "Sand 50 (Warm)",
          "props": {
            "background": "#FBF8EE",
            "role": "暖色系セクション (事例紹介)"
          }
        },
        {
          "label": "Gray 50 (Footer Nav)",
          "props": {
            "background": "#FAFAFC",
            "role": "フッターナビゲーション"
          }
        },
        {
          "label": "Purple 50 (Features)",
          "props": {
            "background": "#EDF6FF",
            "role": "機能紹介セクション"
          }
        },
        {
          "label": "Passion 50 (CTA)",
          "props": {
            "background": "#FFFBD9",
            "role": "価格・CTA 強調セクション"
          }
        }
      ]
    },
    {
      "type": "hero",
      "name": "Hero Section",
      "description": "背景画像 + page-title (strong には Sun ハイライト) + アワードバッジ",
      "variants": [
        {
          "label": "Desktop",
          "props": {
            "backgroundImage": "/img/common/hero_back.png",
            "backgroundPosition": "center center",
            "backgroundSize": "cover",
            "titleFontSize": "48px",
            "titleStrongColor": "#3F6ECC",
            "titleStrongBackground": "#FFDA1B",
            "awardBadgeBorder": "1px solid #ddd",
            "awardBadgeBorderRadius": "4px"
          }
        },
        {
          "label": "Mobile",
          "props": {
            "backgroundImage": "/img/common/hero_back_sp.png",
            "titleFontSize": "32px"
          }
        }
      ]
    },
    {
      "type": "footer",
      "name": "Footer",
      "description": "薄グレー背景のフッター。電話番号は Inter 24px 700",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#FAFAFC",
            "color": "#202226",
            "logoMaxWidth": "280px",
            "phoneFontFamily": "'Inter', sans-serif",
            "phoneFontSize": "24px",
            "phoneFontWeight": "700",
            "padding": "80px 60px"
          }
        }
      ]
    }
  ],
  "guidelines": {
    "do": [
      "ホバー状態には必ず --sun (#FFDA1B) + --pu-400 (#3F6ECC) の組み合わせを使う (サイト全体で統一)",
      "見出し・CTA には letter-spacing: 1px を適用する",
      "日本語テキストには YakuHanJP を前置して約物を半角化する",
      "数値・電話番号には Inter を使う",
      "カードの影は elevation トークン (elevation-1 / elevation-2) から選ぶ (自作の box-shadow を使わない)",
      "セクション背景は定義済みパレット (sa-50 / gr-50 / pu-50 / pa-50) から選ぶ",
      "ボタン高さ 72px を維持する (CTA の視認性・タップ領域確保)",
      "border-radius は 12px を標準とする (ボタン・タグ共通)",
      "font-feature-settings: 'palt' を body に必ず適用する",
      "本文 line-height: 1.8 で日本語の可読性を最優先する"
    ],
    "dont": [
      "--sun を大面積の背景色として使わない (アクセント・ハイライト専用)",
      "--leaf や --av-* を装飾目的で多用しない (ステータス系の意味が薄れる)",
      "--ly-* (赤系) を単なるデザイン装飾に使わない (エラー・警告の意味を持つ)",
      "ボタン高さ 72px を独自値に変更しない (CTA の視認性・タップ領域が劣化する)",
      "日本語本文に Inter を使わない (YakuHanJP/Noto Sans JP スタックを維持する)",
      "ロゴのアスペクト比を変更しない・テキストを重ねない",
      "elevation トークン以外の独自 box-shadow を作らない",
      "セクション背景に未定義の中間色を導入しない (sa-50 / gr-50 / pu-50 / pa-50 の 4 種から選ぶ)",
      "詩的命名 (Sun / Water / Night / Cloud / Leaf) を別の命名規則に置き換えない (ブランド資産)"
    ]
  }
}