---
version: alpha
name: 日本郵便 (Japan Post)
description: 赤×紺の2色軸に Noto Sans JP を用いた、官公庁的信頼感と温かみを両立するデザインシステム。スローガン「進化するぬくもり。」が示すとおり、機能的整合性を最優先にしながら親しみやすさを添える。
sources:
  - https://www.post.japanpost.jp/
  - https://www.post.japanpost.jp/assets/css/style.css
  - https://www.post.japanpost.jp/assets/css/common.css
  - https://www.post.japanpost.jp/assets/css/module.css
notes:
  - 全CSS変数は :root に一元定義されており、直接観測した値（直接エビデンス）。
  - ブランドガイドラインページは404のため、デザイン意図はCSSコメント・クラス命名・構造から推定（推論）。
  - ロゴ・スローガンはSVGアセット（siteid.svg / slogan.svg）として提供されており、テキスト再現不可。
  - カスタムアイコンフォント "icon-jp-post2025" を使用（外部非公開フォント）。
colors:
  primary: "#CC0000"
  secondary: "#0B2A3A"
  link: "#0063BE"
  fill: "#EAF3F6"
  bg: "#FFFFFF"
  bg-secondary: "#F7F7F7"
  text-primary: "#0B2A3A"
  text-secondary: "#546A75"
  button-primary: "#0B2A3A"
  button-secondary: "#637985"
  alert: "#C8395B"
  success: "#19A939"
  warning: "#E0B928"
typography:
  body:
    fontFamily: '"Noto Sans JP", "BIZ UDPGothic", "Helvetica Neue", Arial, "Hiragino Sans", Meiryo, sans-serif'
    fontSize: 1rem
    fontWeight: 400
    lineHeight: 1.7
  display:
    fontSize: 3.25rem
    fontWeight: 700
  h1:
    fontSize: 2.75rem
    fontWeight: 700
  h2:
    fontSize: 2.25rem
    fontWeight: 700
  h3:
    fontSize: 1.375rem
    fontWeight: 700
  label:
    fontSize: 0.875rem
    fontWeight: 400
components:
  button-primary:
    backgroundColor: "{colors.button-primary}"
    color: "#FFFFFF"
    borderRadius: "{rounded.large}"
    border: "1px solid {colors.button-primary}"
    fontWeight: 700
    hoverBackground: "#FFFFFF"
    hoverColor: "{colors.button-primary}"
  input:
    background: "#FFFFFF"
    border: "1px solid {colors.text-primary}"
    borderRadius: "{rounded.large}"
    padding: "1rem"
    focusOutline: "2px solid {colors.button-focus}"
    errorBorder: "1px solid {colors.alert}"
    errorBackground: "{colors.alert-light}"
rounded:
  small: 4px
  medium: 8px
  large: 12px
  full: 999999px
spacing:
  X4S: 4px
  X3S: 8px
  X2S: 12px
  XS: 16px
  S: 20px
  M: 24px
  L: 32px
  XL: 40px
  X2L: 48px
  X3L: 64px
  X4L: 80px
  X5L: 128px
---

## Overview

日本郵便（Japan Post）は「送る・受け取る・サービス・買う・銀行・保険」を束ねる総合インフラ企業。
スローガン **「進化するぬくもり。」** のとおり、赤（行動・ブランド）と紺（信頼・落ち着き）を軸とし、Noto Sans JP でやわらかさを加えた実用本位のデザイン体系を持つ。

---

## Colors

### ブランドカラー

| トークン名 | 値 | 用途 |
|---|---|---|
| `--color-primary` | `#CC0000` | ロゴ背景・強調テキスト・h2ボーダーアクセント・重要ステータス。サイト全体の識別色 |
| `--color-secondary` | `#0B2A3A` | ボタン背景・見出しテキスト・フォームアウトライン。ネイビーが信頼感の主軸 |

### テキスト・アイコン

| トークン名 | 値 | 用途 |
|---|---|---|
| `--color-text-primary` / `--color-texticon-primary` | `#0B2A3A` | 本文・見出し全般 |
| `--color-text-secondary` / `--color-texticon-secondary` | `#546A75` | 補足テキスト・リンク・ナビゲーション |
| `--color-texticon-tertiary` | `#7C929C` | プレースホルダー・サブラベル |
| `--color-texticon-disable` | `#A6A6A6` | 無効状態のテキスト |
| `--color-texticon-accent` | `#E02828` | 強調赤テキスト（`em`要素・必須マーク） |

### 背景・サーフェス

| トークン名 | 値 | 用途 |
|---|---|---|
| `--color-bg` | `#FFFFFF` | メインコンテンツ背景 |
| `--color-bg-secondary` | `#F7F7F7` | セクション区切り背景・テーブル行ストライプ |
| `--color-fill` | `#EAF3F6` | カードのアイコン背景・フィルインプット背景。薄い青が「郵政ブルー」の残像 |
| `--color-lightblue` | `#BDDFEB` | 情報ブロック背景（強め） |
| `--color-lightpink` | `#FFF3F2` | サービスカードのピンク系アイコン背景 |
| `--color-aleatlight` | `#FEF8F9` | エラー入力フィールド背景 |

### ボーダー・区切り

| トークン名 | 値 | 用途 |
|---|---|---|
| `--color-gray` / `--color-separate-primary` | `#CACACA` | 主要ボーダー（テーブル・区切り線） |
| `--color-gray2` | `#D7E0E4` | 見出し上ボーダー（h2.border の上線） |
| `--color-separate-secondary` | `#E9E9E9` | 繊細な区切り（ナビゲーションシャドウ底辺など） |

### ボタン状態

| トークン名 | 値 | 用途 |
|---|---|---|
| `--color-button-primary` | `#0B2A3A` | 標準ボタン背景 |
| `--color-button-secondary` | `#637985` | セカンダリボタン・強調ボーダー |
| `--color-button-disable` | `#F3F4F4` | 無効ボタン背景 |
| `--color-button-disable2` | `#DBDBDB` | 無効ボタンテキスト色 |
| `--color-button-focus` | `#3382CB` | フォーカスリング（アクセシビリティ） |

### ステータス

| トークン名 | 値 | 用途 |
|---|---|---|
| `--color-link` | `#0063BE` | テキストリンク |
| `--color-aleat` | `#C8395B` | エラー・アラート |
| `--color-success` | `#19A939` | 成功状態 |
| `--color-warning` | `#E0B928` | 警告状態 |

---

## Typography

### フォントファミリー

```
"Noto Sans JP", "BIZ UDPGothic", "Helvetica Neue", Arial, "Hiragino Sans", Meiryo, sans-serif
```

- **直接エビデンス**: CSS `@font-face` で Noto Sans Japanese（Light/Regular/Bold、woffフォーマット）を自己ホスト
- 日本語書体を最優先に並べ、欧文はHelvetica Neue → Arialでフォールバック
- 本文の基本ウェイトは `normal`（400）

### フォントウェイト

| ウェイト | 用途 |
|---|---|
| 200 (Light) | 装飾的な大見出し（推論） |
| 400 (Regular) | 本文・補足テキスト |
| 700 (Bold) | 全見出し・ボタンラベル・強調 |

### サイズスケール

| トークン | rem | px | 用途 |
|---|---|---|---|
| `--font-xxxs` | 0.625rem | 10px | 超小テキスト |
| `--font-xxs` | 0.75rem | 12px | 注釈・バッジラベル |
| `--font-xs` | 0.875rem | 14px | 補足・キャプション・`small` |
| `--font-s` | 1rem | 16px | **本文基準サイズ** |
| `--font-m` | 1.125rem | 18px | カードタイトル・強調文 |
| `--font-l` | 1.25rem | 20px | linkSetタイトル |
| `--font-xl` | 1.5rem | 24px | セクション小見出し |

### 見出しスケール（`--font-head-*`）

| トークン | rem | px | 対応要素 |
|---|---|---|---|
| `--font-head-xs` | 1.125rem | 18px | h4 |
| `--font-head-s` | 1.375rem | 22px | h3（SP: 18px） |
| `--font-head-m` | 1.625rem | 26px | h2小 |
| `--font-head-l` | 2.25rem | 36px | h2大・h1最小 |
| `--font-head-xl` | 2.75rem | 44px | h1中 |
| `--font-head-xxl` | 3.25rem | 52px | **ページメインタイトル**（SP: 36px） |

- PC見出しはすべて `clamp()` でビューポートに応じてスケール
- 行の高さ: 本文 `1.7`、見出しは未定義（tight）

---

## Layout

### グリッド

- **最大コンテンツ幅**: `1166px`（中央揃え）
- **ブレークポイント**:
  - SP: `≤ 767px`
  - Tablet: `768px – 1330px`
  - PC: `> 1330px`

### ヘッダー構造

```
[16px 赤トップボーダー]
[ロゴエリア (赤背景 60px高) | スローガン SVG | サブナビ右寄せ]
[グローバルナビゲーション (sticky)]
```

- ロゴ背景: `--color-primary` (#CC0000)、高さ60px、padding 16px 32px 12px
- ヘッダー上端に `border-top: 16px solid var(--color-primary)` → 赤ラインがブランドの第一印象

### メインコンテンツ

- `padding-bottom: var(--X4L)` (80px) でフッターとの余白を確保
- SPでは `main.page` が flex column に切り替わり、パンくずが本文下へ移動

---

## Spacing

8px グリッドベースの命名体系（T-shirt sizing）。

| トークン | 値 | 主な用途 |
|---|---|---|
| `--X4S` | 4px | アイコンとテキストの隙間・タグpadding縦 |
| `--X3S` | 8px | タグpadding横・リスト行間・パンくずpadding |
| `--X2S` | 12px | カード内要素間・テキスト段落間 |
| `--XS` | 16px | ロゴpadding・タグチップpadding・標準インデント |
| `--S` | 20px | セクション内小区切り・h2.border padding |
| `--M` | 24px | ロゴpadding上・サブナビ要素間・標準セクション間 |
| `--L` | 32px | h2.border padding-top・ロゴ横padding |
| `--XL` | 40px | セクション大区切り |
| `--X2L` | 48px | 大セクション区切り |
| `--X3L` | 64px | ページレベルの区切り |
| `--X4L` | 80px | ページ下余白 |
| `--X5L` | 128px | 最大余白（ヒーローセクション等） |

---

## Border Radius

| トークン | 値 | 用途 |
|---|---|---|
| `--radius-s` | 4px | タグ・バッジ・小要素 |
| `--radius-m` | 8px | アイコンサムネイル背景・support-badgesグリッド |
| `--radius-l` | 12px | ボタン・フォーム入力欄 |
| `--radius-full` | 999999px | ピル型タグ・カルーセルナビボタン・顧客種別セレクター |

ブランドとしての特徴：**角丸は全体的に大きめ（radius-l: 12px が主役）**、ボタンもフォームも同じ半径で統一感を出す。

---

## Shadows

色ベースの影（透明度を調整した `#0B2A3A` ネイビー）で一貫性を保つ。

| トークン | 値 | 用途 |
|---|---|---|
| `--shadow-level0` | none | 影なし |
| `--shadow-level1` | `0 2px 4px rgba(11,42,58,.12)` | カード標準 |
| `--shadow-level2` | `0 4px 8px rgba(11,42,58,.12)` | ホバー・強調カード |
| `--shadow-level3` | `0 8px 10px rgba(11,42,58,.12)` | モーダル・ドロップダウン |
| `--shadow-level4` | `0 10px 14px rgba(11,42,58,.12)` | メガメニューパネル |
| `--shadow-level5` | `0 14px 18px rgba(11,41,58,.12)` | 最大浮き上がり |
| `--shadow-bottom` | `0 -8px 12px rgba(11,41,58,.05)` | フッター上端の底面影 |
| `--shadow-object-red` | `0 14px 18px rgba(202,70,49,.18)` | 赤ボタン・赤CTAの影（ブランドアクセント） |

---

## Components

### ボタン

```css
/* プライマリボタン (.btn.btnL / .btn.btnM / .btn.btnS) */
background: var(--color-button-primary);   /* #0B2A3A */
color: #FFF;
border: 1px solid var(--color-button-primary);
border-radius: var(--radius-l);            /* 12px */
font-weight: 700;

/* ホバー: 色反転（白背景 + 紺テキスト） */
:hover {
  background: #FFF;
  border: 1px solid var(--color-button-primary);
  color: var(--color-button-primary);
}
```

- サイズバリアント: `btnL`（大）/ `btnM`（中）/ `btnS`（小）
- アイコン付きバリアント: `.ic-prev`（左矢印）、`.ic-next`（右矢印）
- **赤いCTAは使わない**: 赤（primary）はブランドアクセントであり、ボタン色は紺（secondary）が原則

### フォーム入力

```css
/* テキスト・メール・電話・パスワード・日付 */
background: #FFF;
border: 1px solid var(--color-texticon-primary);  /* #0B2A3A */
border-radius: var(--radius-l);                    /* 12px */
padding: 1rem;

/* フォーカス */
outline: 2px solid var(--color-button-focus);      /* #3382CB */
outline-offset: -2px;

/* エラー */
border: 1px solid var(--color-aleat);              /* #C8395B */
background: var(--color-aleatlight);               /* #FEF8F9 */

/* 無効 */
background: var(--color-button-disable);           /* #F3F4F4 */
color: var(--color-texticon-disable);              /* #A6A6A6 */
```

### タグ / チップ

```css
/* .tag-chip */
padding: 9px var(--XS);                           /* 9px 16px */
border: 1px solid var(--color-separate-primary);  /* #CACACA */
border-radius: 3rem;                               /* ピル型 */
:hover { background: var(--color-bg-secondary); }
:focus-visible { border-color: var(--color-button-focus); }
```

### linkSet（サービスカード）

日本郵便の主要 UI パターン。サービス一覧ページで多用する。

```
[アイコン/サムネイル (72×72px、.blue/.pink 背景)] + [タイトル (font-l, bold)] + [補足テキスト (font-xs, secondary)] + [サブリンク一覧]
```

- アイコン背景: `.blue` = `--color-fill` (#EAF3F6)、`.pink` = `--color-lightpink` (#FFF3F2)
- タイトル後に矢印アイコン（`icon-jp-post2025` フォント）自動付与
- 外部リンクは別窓アイコン自動付与

### h2.border（セクション見出し）

```css
border-top: 1px solid var(--color-gray2);    /* #D7E0E4 */
padding: var(--L) 0 var(--S);

/* 赤アクセントライン（疑似要素） */
::before {
  width: 100px;
  height: 4px;
  background: var(--color-primary);           /* #CC0000 */
  position: absolute; top: 0; left: 0;
}
```

赤の4px横線がセクションの区切りとして機能する。Japan Post の赤をタイポグラフィに織り込む主要手法。

### パンくずリスト

```css
background: var(--color-bg-secondary);       /* #F7F7F7 */
padding: 5px 0;
/* 区切り文字: icon-jp-post2025 の矢印アイコン */
color: var(--color-texticon-secondary);      /* #546A75 */
```

### グローバルナビゲーション

6カテゴリのメガメニュー：

| ラベル | 概要 |
|---|---|
| 送る | 郵便・荷物送付サービス |
| 受け取る | 集荷・再配達・郵便局受取 |
| サービス・お手続き | 転居・不在通知・各種手続き |
| 買う | 切手・グッズ・ゆうパックスマホ割 |
| 銀行・保険 | ゆうちょ銀行・かんぽ生命へのリンク |
| エンタメ | ぽすくまグッズ等 |

- sticky ナビとして `z-index: 50` で固定
- 顧客種別セレクター（個人/法人）はピル型トグル：アクティブ = `--color-button-primary` 背景 + 白テキスト

---

## Imagery

### ロゴ

- **siteid.svg**: 「〒」マーク + ゆうびんロゴを赤背景に白抜き
- **slogan.svg**: 「進化するぬくもり。」書体SVG（PCのみ表示、SPは非表示）
- **logo-yubin-text.svg**: 「日本郵便株式会社」社名ロゴ（フッター用）
- **logo-group.svg**: 日本郵政グループロゴ（フッター）

グループ会社ロゴ（.pngフォーマット）も同一フッターに整列：日本郵政 / ゆうちょ銀行 / かんぽ生命 / JP CAST

### アイコン

- カスタムアイコンフォント `"icon-jp-post2025"` を使用（外部非公開）
- SVGアセットも `/assets/css/fonts/svg/` に格納（カラーアイコン、サービス種別ごと）
- 例: `color_cal_yupack.svg`（ゆうパックカレンダー）、`color_postoffice_pin.svg`（郵便局ピン）
- アイコンサイズ: 1.2em（標準）/ 1.7em（L）/ 2em（LL）/ 0.8em（S）

### キャラクター

- **ぽすくま（Posukuma）**: 公式マスコットキャラクター。エンタメコンテンツ・グッズページに登場。UI上の感情的アンカー。

### フォトグラフィ

- プロダクト・サービス説明に実写写真を使用（配達員・郵便局・パッケージ）
- カード型に収めた際、アスペクト比は一定に保つ（object-fit: cover 推奨）

---

## Logo And Usage

- ロゴはSVG形式のみ使用。PNG再現・テキスト代替は不可
- 赤背景（`#CC0000`）の上に白抜きで表示するのがロゴ本来の形
- 最小表示サイズ: ヘッダー内で高さ約28px相当（padding込みエリア60px）
- スローガン「進化するぬくもり。」はslogan.svgで表示し、テキストによる再現は避ける
- SPではスローガン非表示（`.pcDisp`クラスで制御）

---

## Do's and Don'ts

### Do

- 赤（`#CC0000`）は **ブランドアクセント・識別色** として見出しボーダー・ロゴ・強調テキストに限定して使う
- ボタンは **紺（`#0B2A3A`）** を基本色とし、ホバー時に白反転させる
- フォーム・ボタンはともに `border-radius: 12px`（`--radius-l`）で統一する
- 影は `rgba(11,42,58,0.12)` ベースの **5段階レベル**でコンテキストに応じて選ぶ
- アイコン背景は `.blue`（`#EAF3F6`）または `.pink`（`#FFF3F2`）の2種から選ぶ
- セクション見出し（h2）には `border-top` + 赤4px疑似要素アクセントを付ける

### Don't

- 赤を **ボタン背景**として使わない（アラート・エラー用の `--color-aleat: #C8395B` とも別物）
- 白背景に白文字、紺背景に黒文字など **コントラスト不足**の組み合わせを避ける
- カスタムアイコンフォント `icon-jp-post2025` は外部非公開のため、**外部サービスへの流用不可**
- ロゴ・スローガンをビットマップ（JPEG/PNG）に変換して再配置しない
- Noto Sans JP 以外の日本語書体（明朝体・手書き風など）を本文に使わない
- `--color-primary`（赤）と `--color-fill`（水色）を隣接させると視覚的衝突が起きる（推論）

{
  "$schema": "https://aistyles.dev/schema/tokens-v1.json",
  "version": "1.0",
  "brand": {
    "slug": "japanpost",
    "name": "日本郵便 (Japan Post)",
    "url": "https://www.post.japanpost.jp/",
    "description": "「送る・受け取る・サービス・買う・銀行・保険」を束ねる日本の総合インフラ企業。スローガン『進化するぬくもり。』のとおり、赤 (行動・ブランド) と紺 (信頼・落ち着き) を 2 色軸とし、Noto Sans JP でやわらかさを加えた実用本位のデザイン体系。CSS 変数が :root に一元定義された堅牢な設計トークン。",
    "category": "tech",
    "tags": [
      "infrastructure",
      "japanese",
      "government-style",
      "trust",
      "noto-sans-jp",
      "design-tokens",
      "accessible"
    ],
    "theme": "light",
    "language": "ja"
  },
  "sources": [
    "https://www.post.japanpost.jp/",
    "https://www.post.japanpost.jp/assets/css/style.css",
    "https://www.post.japanpost.jp/assets/css/common.css",
    "https://www.post.japanpost.jp/assets/css/module.css"
  ],
  "extractedAt": "2026-05-16",
  "notes": [
    "直接証拠: 全 CSS 変数は :root に一元定義されており、直接観測した値。",
    "直接証拠: フォントは @font-face で Noto Sans Japanese (Light/Regular/Bold、woff) を自己ホスト。",
    "推論: ブランドガイドラインページは 404 のため、デザイン意図は CSS コメント・クラス命名・構造から推定。",
    "注意: ロゴ・スローガンは SVG アセット (siteid.svg / slogan.svg) として提供されており、テキスト再現不可。",
    "注意: カスタムアイコンフォント 'icon-jp-post2025' を使用 (外部非公開フォント)、aistyles 用途には流用不可。",
    "重要: 赤 (#CC0000) はブランドアクセント・識別色専用。ボタン背景には使わず、紺 (#0B2A3A) を基本色とする — これが Japan Post の核心ルール。"
  ],
  "colors": {
    "groups": [
      {
        "label": "Brand",
        "tokens": [
          {
            "name": "Primary (Brand Red)",
            "value": "#CC0000",
            "token": "--color-primary",
            "role": "ロゴ背景・強調テキスト・h2 ボーダーアクセント・重要ステータス。サイト全体の識別色。ボタン背景には使わない"
          },
          {
            "name": "Secondary (Navy)",
            "value": "#0B2A3A",
            "token": "--color-secondary",
            "role": "ボタン背景・見出しテキスト・フォームアウトライン。ネイビーが信頼感の主軸"
          },
          {
            "name": "Accent Red (Text Emphasis)",
            "value": "#E02828",
            "token": "--color-texticon-accent",
            "role": "強調赤テキスト (em 要素・必須マーク)。primary より明るい赤"
          }
        ]
      },
      {
        "label": "Text & Icon",
        "tokens": [
          {
            "name": "Text Primary",
            "value": "#0B2A3A",
            "token": "--color-text-primary",
            "role": "本文・見出し全般"
          },
          {
            "name": "Text Secondary",
            "value": "#546A75",
            "token": "--color-text-secondary",
            "role": "補足テキスト・リンク・ナビゲーション"
          },
          {
            "name": "Text Tertiary",
            "value": "#7C929C",
            "token": "--color-texticon-tertiary",
            "role": "プレースホルダー・サブラベル"
          },
          {
            "name": "Text Disabled",
            "value": "#A6A6A6",
            "token": "--color-texticon-disable",
            "role": "無効状態のテキスト"
          }
        ]
      },
      {
        "label": "Surface",
        "tokens": [
          {
            "name": "Background",
            "value": "#FFFFFF",
            "token": "--color-bg",
            "role": "メインコンテンツ背景"
          },
          {
            "name": "Background Secondary",
            "value": "#F7F7F7",
            "token": "--color-bg-secondary",
            "role": "セクション区切り背景・テーブル行ストライプ・パンくず背景"
          },
          {
            "name": "Fill (Light Blue)",
            "value": "#EAF3F6",
            "token": "--color-fill",
            "role": "カードのアイコン背景 (.blue)・フィルインプット背景。郵政ブルーの残像"
          },
          {
            "name": "Light Blue (Strong)",
            "value": "#BDDFEB",
            "token": "--color-lightblue",
            "role": "情報ブロック背景 (強め)"
          },
          {
            "name": "Light Pink",
            "value": "#FFF3F2",
            "token": "--color-lightpink",
            "role": "サービスカードのピンク系アイコン背景 (.pink)"
          },
          {
            "name": "Alert Light",
            "value": "#FEF8F9",
            "token": "--color-aleatlight",
            "role": "エラー入力フィールド背景"
          }
        ]
      },
      {
        "label": "Border & Divider",
        "tokens": [
          {
            "name": "Gray (Primary Border)",
            "value": "#CACACA",
            "token": "--color-gray",
            "role": "主要ボーダー (テーブル・区切り線・タグチップ)"
          },
          {
            "name": "Gray Light",
            "value": "#D7E0E4",
            "token": "--color-gray2",
            "role": "見出し上ボーダー (h2.border の上線)"
          },
          {
            "name": "Separator Secondary",
            "value": "#E9E9E9",
            "token": "--color-separate-secondary",
            "role": "繊細な区切り (ナビゲーションシャドウ底辺など)"
          }
        ]
      },
      {
        "label": "Button States",
        "tokens": [
          {
            "name": "Button Primary",
            "value": "#0B2A3A",
            "token": "--color-button-primary",
            "role": "標準ボタン背景 (Navy)"
          },
          {
            "name": "Button Secondary",
            "value": "#637985",
            "token": "--color-button-secondary",
            "role": "セカンダリボタン・強調ボーダー"
          },
          {
            "name": "Button Disabled BG",
            "value": "#F3F4F4",
            "token": "--color-button-disable",
            "role": "無効ボタン背景"
          },
          {
            "name": "Button Disabled Text",
            "value": "#DBDBDB",
            "token": "--color-button-disable2",
            "role": "無効ボタンテキスト色"
          },
          {
            "name": "Button Focus",
            "value": "#3382CB",
            "token": "--color-button-focus",
            "role": "フォーカスリング (アクセシビリティ)"
          }
        ]
      },
      {
        "label": "Status",
        "tokens": [
          {
            "name": "Link",
            "value": "#0063BE",
            "token": "--color-link",
            "role": "テキストリンク"
          },
          {
            "name": "Alert",
            "value": "#C8395B",
            "token": "--color-aleat",
            "role": "エラー・アラート (primary 赤とは別物)"
          },
          {
            "name": "Success",
            "value": "#19A939",
            "token": "--color-success",
            "role": "成功状態"
          },
          {
            "name": "Warning",
            "value": "#E0B928",
            "token": "--color-warning",
            "role": "警告状態"
          }
        ]
      }
    ]
  },
  "typography": {
    "fonts": [
      {
        "family": "Noto Sans JP",
        "stack": "'Noto Sans JP', 'BIZ UDPGothic', 'Helvetica Neue', Arial, 'Hiragino Sans', Meiryo, sans-serif",
        "weights": [
          200,
          400,
          700
        ],
        "role": "本文・見出し全般。@font-face で Noto Sans Japanese を自己ホスト。日本語書体を最優先に並べ、欧文は Helvetica Neue → Arial へフォールバック"
      }
    ],
    "scale": [
      {
        "role": "display (h1 main)",
        "size": "3.25rem",
        "weight": 700,
        "lineHeight": 1.2,
        "note": "PC: 52px、SP: 36px (clamp でビューポート対応)"
      },
      {
        "role": "h1",
        "size": "2.75rem",
        "weight": 700,
        "lineHeight": 1.2,
        "note": "44px"
      },
      {
        "role": "h2",
        "size": "2.25rem",
        "weight": 700,
        "lineHeight": 1.3,
        "note": "36px"
      },
      {
        "role": "h3",
        "size": "1.375rem",
        "weight": 700,
        "lineHeight": 1.4,
        "note": "22px (SP: 18px)"
      },
      {
        "role": "h4 / card-title",
        "size": "1.125rem",
        "weight": 700,
        "lineHeight": 1.4,
        "note": "18px"
      },
      {
        "role": "body",
        "size": "1rem",
        "weight": 400,
        "lineHeight": 1.7,
        "note": "16px 基準サイズ"
      },
      {
        "role": "label",
        "size": "0.875rem",
        "weight": 400,
        "lineHeight": 1.5,
        "note": "14px 補足・キャプション"
      },
      {
        "role": "caption",
        "size": "0.75rem",
        "weight": 400,
        "lineHeight": 1.5,
        "note": "12px 注釈・バッジラベル"
      }
    ],
    "japanese": {
      "fontStack": "'Noto Sans JP', 'BIZ UDPGothic', 'Helvetica Neue', Arial, 'Hiragino Sans', Meiryo, sans-serif",
      "lineHeight": 1.7,
      "letterSpacing": "0",
      "openType": {
        "palt": false,
        "kern": true
      },
      "kinsoku": {
        "wordBreak": "keep-all",
        "lineBreak": "strict"
      },
      "notes": [
        "Noto Sans JP を自己ホスト (woff フォーマット) し、Light/Regular/Bold の 3 段階運用",
        "本文 line-height: 1.7 で日本語の可読性を最優先",
        "見出しは clamp() でビューポートに応じてスケール"
      ]
    }
  },
  "spacing": {
    "baseUnit": "8px",
    "tokens": [
      {
        "name": "X4S",
        "value": "4px",
        "role": "アイコンとテキストの隙間・タグ padding 縦"
      },
      {
        "name": "X3S",
        "value": "8px",
        "role": "タグ padding 横・リスト行間・パンくず padding"
      },
      {
        "name": "X2S",
        "value": "12px",
        "role": "カード内要素間・テキスト段落間"
      },
      {
        "name": "XS",
        "value": "16px",
        "role": "ロゴ padding・タグチップ padding・標準インデント"
      },
      {
        "name": "S",
        "value": "20px",
        "role": "セクション内小区切り・h2.border padding"
      },
      {
        "name": "M",
        "value": "24px",
        "role": "ロゴ padding 上・サブナビ要素間・標準セクション間"
      },
      {
        "name": "L",
        "value": "32px",
        "role": "h2.border padding-top・ロゴ横 padding"
      },
      {
        "name": "XL",
        "value": "40px",
        "role": "セクション大区切り"
      },
      {
        "name": "X2L",
        "value": "48px",
        "role": "大セクション区切り"
      },
      {
        "name": "X3L",
        "value": "64px",
        "role": "ページレベルの区切り"
      },
      {
        "name": "X4L",
        "value": "80px",
        "role": "ページ下余白"
      },
      {
        "name": "X5L",
        "value": "128px",
        "role": "最大余白 (ヒーローセクション等)"
      }
    ]
  },
  "breakpoints": {
    "mobile": {
      "value": "≤ 767px",
      "role": "SP (スマートフォン)"
    },
    "tablet": {
      "value": "768px - 1330px",
      "role": "タブレット"
    },
    "desktop": {
      "value": "> 1330px",
      "role": "PC"
    },
    "containerMax": {
      "value": "1166px",
      "role": "最大コンテンツ幅 (中央揃え)"
    }
  },
  "radius": {
    "s": "4px",
    "m": "8px",
    "l": "12px",
    "full": "999999px"
  },
  "shadows": [
    {
      "name": "level0",
      "value": "none",
      "role": "影なし"
    },
    {
      "name": "level1",
      "value": "0 2px 4px rgba(11,42,58,0.12)",
      "role": "カード標準"
    },
    {
      "name": "level2",
      "value": "0 4px 8px rgba(11,42,58,0.12)",
      "role": "ホバー・強調カード"
    },
    {
      "name": "level3",
      "value": "0 8px 10px rgba(11,42,58,0.12)",
      "role": "モーダル・ドロップダウン"
    },
    {
      "name": "level4",
      "value": "0 10px 14px rgba(11,42,58,0.12)",
      "role": "メガメニューパネル"
    },
    {
      "name": "level5",
      "value": "0 14px 18px rgba(11,41,58,0.12)",
      "role": "最大浮き上がり"
    },
    {
      "name": "bottom",
      "value": "0 -8px 12px rgba(11,41,58,0.05)",
      "role": "フッター上端の底面影"
    },
    {
      "name": "object-red",
      "value": "0 14px 18px rgba(202,70,49,0.18)",
      "role": "赤ボタン・赤 CTA の影 (ブランドアクセント)"
    }
  ],
  "components": [
    {
      "type": "button",
      "name": "Primary Button (Navy)",
      "description": "紺背景の標準ボタン。ホバーで色反転 (白背景 + 紺テキスト)。赤は使わない",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#0B2A3A",
            "color": "#FFFFFF",
            "border": "1px solid #0B2A3A",
            "borderRadius": "12px",
            "padding": "16px 24px",
            "fontWeight": "700",
            "fontSize": "1rem"
          }
        },
        {
          "label": "Hover (Invert)",
          "props": {
            "background": "#FFFFFF",
            "color": "#0B2A3A",
            "border": "1px solid #0B2A3A",
            "borderRadius": "12px",
            "padding": "16px 24px",
            "fontWeight": "700",
            "fontSize": "1rem"
          }
        },
        {
          "label": "Disabled",
          "props": {
            "background": "#F3F4F4",
            "color": "#DBDBDB",
            "border": "1px solid #F3F4F4",
            "borderRadius": "12px",
            "padding": "16px 24px",
            "fontWeight": "700"
          }
        }
      ]
    },
    {
      "type": "input",
      "name": "Form Input",
      "description": "紺ボーダーの統一スタイル。フォーカス時に青リング、エラー時に赤ボーダー + ピンク背景",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#FFFFFF",
            "color": "#0B2A3A",
            "border": "1px solid #0B2A3A",
            "borderRadius": "12px",
            "padding": "16px"
          }
        },
        {
          "label": "Focus",
          "props": {
            "background": "#FFFFFF",
            "color": "#0B2A3A",
            "border": "1px solid #0B2A3A",
            "borderRadius": "12px",
            "padding": "16px",
            "outline": "2px solid #3382CB",
            "outlineOffset": "-2px"
          }
        },
        {
          "label": "Error",
          "props": {
            "background": "#FEF8F9",
            "color": "#0B2A3A",
            "border": "1px solid #C8395B",
            "borderRadius": "12px",
            "padding": "16px"
          }
        },
        {
          "label": "Disabled",
          "props": {
            "background": "#F3F4F4",
            "color": "#A6A6A6",
            "border": "1px solid #F3F4F4",
            "borderRadius": "12px",
            "padding": "16px"
          }
        }
      ]
    },
    {
      "type": "badge",
      "name": "Tag Chip",
      "description": "ピル型のタグチップ。ボーダー付き白背景、ホバーで薄グレー背景",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#FFFFFF",
            "color": "#0B2A3A",
            "border": "1px solid #CACACA",
            "borderRadius": "3rem",
            "padding": "9px 16px",
            "fontSize": "0.875rem"
          }
        },
        {
          "label": "Hover",
          "props": {
            "background": "#F7F7F7",
            "color": "#0B2A3A",
            "border": "1px solid #CACACA",
            "borderRadius": "3rem",
            "padding": "9px 16px",
            "fontSize": "0.875rem"
          }
        },
        {
          "label": "Focus",
          "props": {
            "background": "#FFFFFF",
            "color": "#0B2A3A",
            "border": "1px solid #3382CB",
            "borderRadius": "3rem",
            "padding": "9px 16px",
            "fontSize": "0.875rem"
          }
        }
      ]
    },
    {
      "type": "card",
      "name": "linkSet Card",
      "description": "サービス一覧の主要 UI パターン。72×72px アイコン (.blue/.pink 背景) + タイトル + サブリンク",
      "variants": [
        {
          "label": "Blue Icon",
          "props": {
            "background": "#FFFFFF",
            "color": "#0B2A3A",
            "borderRadius": "8px",
            "iconBackground": "#EAF3F6",
            "iconSize": "72px",
            "boxShadow": "0 2px 4px rgba(11,42,58,0.12)",
            "padding": "16px"
          }
        },
        {
          "label": "Pink Icon",
          "props": {
            "background": "#FFFFFF",
            "color": "#0B2A3A",
            "borderRadius": "8px",
            "iconBackground": "#FFF3F2",
            "iconSize": "72px",
            "boxShadow": "0 2px 4px rgba(11,42,58,0.12)",
            "padding": "16px"
          }
        }
      ]
    },
    {
      "type": "heading",
      "name": "h2 Section Heading",
      "description": "セクション見出し。上に薄グレーボーダー + 左端に赤 4px の疑似要素アクセント。Japan Post の赤を主張する主要手法",
      "variants": [
        {
          "label": "Default",
          "props": {
            "borderTop": "1px solid #D7E0E4",
            "padding": "32px 0 20px",
            "fontSize": "2.25rem",
            "fontWeight": "700",
            "color": "#0B2A3A",
            "accentBar": "100px × 4px #CC0000 (position: absolute; top: 0; left: 0)"
          }
        }
      ]
    },
    {
      "type": "nav",
      "name": "Header & Global Navigation",
      "description": "ヘッダー上端の 16px 赤トップボーダー + 赤背景ロゴエリア + sticky グローバルナビ",
      "variants": [
        {
          "label": "Default",
          "props": {
            "topBorder": "16px solid #CC0000",
            "logoAreaBackground": "#CC0000",
            "logoAreaHeight": "60px",
            "logoAreaPadding": "16px 32px 12px",
            "navStickyZIndex": "50",
            "navBackground": "#FFFFFF"
          }
        }
      ]
    },
    {
      "type": "breadcrumb",
      "name": "Breadcrumb",
      "description": "薄グレー背景のパンくずリスト。区切りはカスタムアイコンフォントの矢印",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#F7F7F7",
            "color": "#546A75",
            "padding": "5px 0",
            "fontSize": "0.875rem"
          }
        }
      ]
    },
    {
      "type": "toggle",
      "name": "Customer Type Selector",
      "description": "個人/法人切り替えのピル型トグル。アクティブ時に紺背景 + 白テキスト",
      "variants": [
        {
          "label": "Active",
          "props": {
            "background": "#0B2A3A",
            "color": "#FFFFFF",
            "borderRadius": "999999px",
            "padding": "8px 16px",
            "fontWeight": "700"
          }
        },
        {
          "label": "Inactive",
          "props": {
            "background": "transparent",
            "color": "#546A75",
            "borderRadius": "999999px",
            "padding": "8px 16px"
          }
        }
      ]
    }
  ],
  "guidelines": {
    "do": [
      "赤 (#CC0000) は『ブランドアクセント・識別色』として見出しボーダー・ロゴ・強調テキストに限定して使う",
      "ボタンは紺 (#0B2A3A) を基本色とし、ホバー時に白反転させる",
      "フォーム・ボタンはともに border-radius: 12px (--radius-l) で統一する",
      "影は rgba(11,42,58,0.12) ベースの 5 段階レベルでコンテキストに応じて選ぶ",
      "アイコン背景は .blue (#EAF3F6) または .pink (#FFF3F2) の 2 種から選ぶ",
      "セクション見出し (h2) には border-top + 赤 4px 疑似要素アクセントを付ける",
      "本文 line-height: 1.7 で日本語の可読性を最優先する",
      "ヘッダー上端の 16px 赤トップボーダーをブランド第一印象として活用する",
      "8px グリッドベースの T-shirt sizing (X4S 〜 X5L) でスペーシングを統一する"
    ],
    "dont": [
      "赤 (#CC0000) をボタン背景として使わない (アラート用 #C8395B とも別物)",
      "白背景に白文字、紺背景に黒文字などコントラスト不足の組み合わせを避ける",
      "カスタムアイコンフォント icon-jp-post2025 を外部サービスへ流用しない (非公開)",
      "ロゴ・スローガンをビットマップ (JPEG/PNG) に変換して再配置しない",
      "Noto Sans JP 以外の日本語書体 (明朝体・手書き風など) を本文に使わない",
      "primary (赤) と fill (#EAF3F6 水色) を隣接させない (視覚的衝突)",
      "ロゴテキスト『進化するぬくもり。』をライブテキストで再現しない (SVG 専用)",
      "12px (radius-l) 以外の角丸をボタン・フォームに使わない (統一感を崩す)"
    ]
  }
}