---
version: alpha
name: Panasonic Holdings (パナソニック ホールディングス)
description: 日本を代表する電機・テクノロジーコングロマリットのコーポレートサイト。深い「パナソニックブルー」と Noto Sans JP を基軸に、日本的な精緻さと「Future Craft」哲学を体現するミニマルなコーポレート ID。
sources:
  - https://holdings.panasonic/jp/
notes:
  - "[直接証拠] panasonic-extraction.json（2026-05-16 抽出）— iPhone SE 相当の 430×932 モバイルビューで取得。rootVariables に CSS カスタムプロパティが直接記録されている。"
  - "[直接証拠] --panasonic-blue: #0041C0 / --standard-blue: #0063CC の 2 本立てが確認された。"
  - "[直接証拠] --font-family: \"Noto Sans JP\",\"Noto Sans\",sans-serif。Helvetica 系は UI フォントとして不使用（ロゴ専用と推定）。"
  - "[直接証拠] --base-max-width: 980px。コンテンツカラム幅は 1200px ではなく 980px。"
  - "[直接証拠] --text-color-normal-sub: #666。テキストセカンダリは #4D4D4D ではなく #666666。"
  - "[直接証拠] --pale-gray: #f2f2f2。サーフェスサブトルは #F5F5F5 ではなく #F2F2F2。"
  - "[直接証拠] ナビゲーション高さ: 84px（モバイル計測値）。"
  - "[直接証拠] gap-block 系スペーシング変数: xxs=8px, xs=16px, s=24px, m=32px, l=48px, xl=80px。"
  - "[直接証拠] ステータスカラー: --dark-red #b50000 / --notice-red #b81f14 / --standard-red #fc1921 / --standard-green #4fad26 / --dark-green #1f6600。"
  - "[推論] デスクトップ（min-width: 981px）でのナビ高さ・フォントスケールは未計測。モバイル値から推定。"
  - "[推論] ボタンの CTA スタイル（background-color）は JSON に未出現のため、カスタムプロパティから合成した推論値。"

colors:
  # ─── ブランドプライマリ（直接証拠）───
  brand-blue: "#0041C0"           # --panasonic-blue。Pantone PMS 2728 C。1974年採用。夜明けの空がモチーフ。
  brand-blue-alt: "#0040BE"       # 印刷系の微差別定義（外部ブランドDBより）
  standard-blue: "#0063CC"        # --standard-blue。UI リンク・ホバー等に使うセカンダリブルー。
  on-brand-blue: "#FFFFFF"        # ブランドブルー上テキスト・アイコン

  # ─── テキスト（直接証拠）───
  text-normal: "#1A1A1A"          # --text-color-normal。本文・見出しの最濃色。
  text-sub: "#666666"             # --text-color-normal-sub。ナビリンク・説明文。
  text-disabled: "#B3B3B3"        # --text-color-normal-disable。無効状態テキスト。
  text-light: "#E6E6E6"           # --text-color-light。ダーク背景上のメインテキスト。
  text-light-sub: "#999999"       # --text-color-light-sub。ダーク背景上のサブテキスト。
  text-light-disabled: "#4D4D4D"  # --text-color-light-disable。ダーク背景上の無効テキスト。

  # ─── ボーダー・ライン（直接証拠）───
  line-light: "#CCCCCC"           # --line-color-light / --medium-gray。区切り線・枠線。
  line-dark: "#666666"            # --line-color-dark。強調ボーダー。

  # ─── サーフェス（直接証拠）───
  surface-default: "#FFFFFF"
  surface-subtle: "#F2F2F2"       # --pale-gray。カード背景・フォーム背景。
  surface-dark: "#1F1F1F"         # --dark-gray。フッター・ダークパネル背景。

  # ─── ニュートラル（直接証拠）───
  black: "#000000"
  gray-50: "#E6E6E6"              # --btn-hover-color-normal。ホバー時の薄いグレー。
  gray-100: "#F2F2F2"             # --pale-gray
  gray-300: "#CCCCCC"             # --medium-gray / --line-color-light
  gray-400: "#999999"             # --text-color-light-sub
  gray-600: "#666666"             # --line-color-dark / --text-color-normal-sub
  gray-700: "#4D4D4D"             # --text-color-light-disable
  gray-900: "#1A1A1A"             # --text-color-normal
  dark: "#1F1F1F"                 # --dark-gray
  btn-hover-dark: "#333333"       # --btn-hover-color-dark

  # ─── ステータス（直接証拠）───
  status-error: "#B81F14"         # --notice-red。通知・エラー。
  status-error-dark: "#B50000"    # --dark-red。強調エラー。
  status-red: "#FC1921"           # --standard-red。汎用赤。
  status-success: "#4FAD26"       # --standard-green。成功・承認。
  status-success-dark: "#1F6600"  # --dark-green。強調成功。

typography:
  # ─── 日本語対応スタック（直接証拠）───
  # 実サイトは Noto Sans JP を Google Fonts から読み込み使用
  body:
    fontFamily: '"Noto Sans JP", "Noto Sans", sans-serif'
    fontSize: "16px"
    fontWeight: "400"
    lineHeight: "24px"   # 実計測値 = 1.5
    letterSpacing: "normal"

  # ─── 見出しスケール（推論: モバイル計測値をベースに補完）───
  display:
    fontFamily: '"Noto Sans JP", "Noto Sans", sans-serif'
    fontSize: "40px"      # デスクトップ推定。モバイルでは 24px 程度。
    fontWeight: "700"
    lineHeight: "1.3"

  h1:
    fontFamily: '"Noto Sans JP", "Noto Sans", sans-serif'
    fontSize: "32px"      # 推論
    fontWeight: "700"
    lineHeight: "1.3"

  h2:
    fontFamily: '"Noto Sans JP", "Noto Sans", sans-serif'
    fontSize: "24px"      # bodyText (.cmp-customizedtitle__text) 計測値
    fontWeight: "400"
    lineHeight: "36px"    # 実計測値 = 1.5

  h3:
    fontFamily: '"Noto Sans JP", "Noto Sans", sans-serif'
    fontSize: "20px"      # 推論
    fontWeight: "400"
    lineHeight: "1.5"

  label:
    fontFamily: '"Noto Sans JP", "Noto Sans", sans-serif'
    fontSize: "14px"
    fontWeight: "500"
    lineHeight: "1.5"

  caption:
    fontFamily: '"Noto Sans JP", "Noto Sans", sans-serif'
    fontSize: "12px"      # 実計測値（ロゴ下社名・ナビ小テキスト）
    fontWeight: "400"
    lineHeight: "18px"    # 実計測値 = 1.5

  # ─── レガシーフォールバック（直接証拠）───
  # 古いコンポーネントやブラウザ向け
  legacy-stack: '"lucida grande", tahoma, verdana, arial, "hiragino kaku gothic pro", meiryo, "ms pgothic", sans-serif'

rounded:
  none: "0px"
  small: "2px"    # ボタン・バッジ（推論）
  medium: "4px"   # カード・インプット（推論）
  large: "8px"    # モーダル・パネル（推論）
  full: "9999px"  # タグ・ピル（推論）
  # ※ 実サイトのボタン・ナビは border-radius: 0px が直接証拠として確認されている

spacing:
  # ─── gap-block 系（直接証拠）───
  # CSS変数名: --gap-block-{size}
  gap-xxs: "8px"
  gap-xs: "16px"
  gap-s: "24px"
  gap-m: "32px"
  gap-l: "48px"
  gap-xl: "80px"

  # ─── gap-inline 系（直接証拠）───
  gap-inline-m: "16px"
  column-gap: "8px"

  # ─── エイリアス（コンポーネント実装用）───
  xs: "8px"          # gap-xxs 相当
  sm: "16px"         # gap-xs 相当
  md: "24px"         # gap-s 相当
  lg: "32px"         # gap-m 相当
  xl: "48px"         # gap-l 相当
  xxl: "80px"        # gap-xl 相当

layout:
  # ─── ブレークポイント（直接証拠）───
  breakpoints:
    mobile: "max-width: 767px"
    tablet: "min-width: 768px"
    tablet-mid: "min-width: 768px) and (max-width: 1023px"
    desktop: "min-width: 981px"
    wide: "min-width: 1024px"

  # ─── コンテンツ幅（直接証拠）───
  base-max-width: "980px"     # --base-max-width（コンテンツカラム上限）
  base-min-width: "981px"     # --base-min-width（デスクトップ最小）

components:
  # ─── ナビゲーション（直接証拠）───
  nav-primary:
    backgroundColor: "rgba(0,0,0,0)"   # 透明ヘッダー
    color: "#1A1A1A"
    fontFamily: '"Noto Sans JP", "Noto Sans", sans-serif'
    fontSize: "16px"
    fontWeight: "400"
    lineHeight: "24px"
    height: "84px"                     # モバイル計測値
    borderRadius: "0px"
    linkColor: "#4D4D4D"               # item-link（第1階層）
    linkColorSub: "#666666"            # item-link（第2階層以降）
    linkHoverColor: "#0041C0"          # 推論

  # ─── ボタン（推論。実サイトのボタンはトグル系のみ確認）───
  button-primary:
    backgroundColor: "#0041C0"
    color: "#FFFFFF"
    fontFamily: '"Noto Sans JP", "Noto Sans", sans-serif'
    fontWeight: "700"
    fontSize: "14px"
    letterSpacing: "0.05em"
    padding: "12px 28px"
    borderRadius: "0px"                # 実サイトボタンの border-radius は 0px
    border: "none"
    transition: "all"
    hover:
      backgroundColor: "#333333"      # --btn-hover-color-dark

  button-secondary:
    backgroundColor: "transparent"
    color: "#0041C0"
    border: "1.5px solid #0041C0"
    fontWeight: "700"
    fontSize: "14px"
    padding: "12px 28px"
    borderRadius: "0px"
    hover:
      backgroundColor: "#E6E6E6"      # --btn-hover-color-normal

  # ─── カード（推論）───
  card:
    backgroundColor: "#FFFFFF"
    border: "1px solid #CCCCCC"
    borderRadius: "0px"               # ブランドトーンに合わせシャープコーナーを推奨
    padding: "24px"
    hover:
      boxShadow: "0 4px 16px rgba(0,0,0,0.10)"
      transform: "translateY(-2px)"

  # ─── インプット（直接証拠）───
  input:
    backgroundColor: "rgba(0,0,0,0)"
    border: "none"                    # ボトムラインのみのスタイル（推論）
    borderRadius: "0px"
    color: "#1A1A1A"
    fontFamily: '"Noto Sans JP", "Noto Sans", sans-serif'
    fontSize: "16px"
    fontWeight: "400"
    lineHeight: "24px"
    padding: "0px"
    transition: "all"
    focus:
      borderColor: "#0041C0"
      outline: "2px solid rgba(0,65,192,0.25)"

  # ─── タグ / フィルターチップ（推論）───
  tag:
    backgroundColor: "#F2F2F2"
    color: "#666666"
    fontSize: "12px"
    padding: "4px 10px"
    borderRadius: "9999px"
  tag-active:
    backgroundColor: "#0041C0"
    color: "#FFFFFF"

  # ─── ブレッドクラム ───
  breadcrumb:
    fontSize: "12px"
    color: "#999999"
    separator: ">"
    activeColor: "#1A1A1A"

  # ─── フッター（直接証拠: --dark-gray から推定）───
  footer:
    backgroundColor: "#1F1F1F"
    color: "#E6E6E6"
    linkColor: "#CCCCCC"
    linkHover: "#FFFFFF"

---

## Overview

パナソニック ホールディングス（旧：松下電器）の日本語コーポレートサイト。1918 年創業、2022 年に現持株会社体制へ移行。グループブランドは「Panasonic」に一本化され、サブブランド（Technics、Lumix、Toughbook、Eneloop）はマスターブランドの傘下に配置される。

デザインの核は **Panasonic Blue（#0041C0）** と **Noto Sans JP** の組み合わせ。過剰な装飾を排し、余白・タイポグラフィ・青の一点集中で「信頼性・有能さ・未来志向」を表現するアイデンティティ。

コーポレートデザインフィロソフィーは **「Future Craft」** — 慈しみと技をもってつくり、未来に受け渡す。日本的美学（繊細さ・精緻さ）と前向きな技術革新の融合。

---

## Colors

### Panasonic Blue（ブランドプライマリ）

| 形式 | 値 |
|------|---|
| Hex（デジタル・直接証拠） | `#0041C0`（--panasonic-blue） |
| Hex（印刷系別定義） | `#0040BE` |
| RGB | `0, 65, 192` |
| CMYK | `92, 79, 0, 0` |
| Pantone | PMS 2728 C |

- **由来**: 1974 年、夜明けの空の写真から着想。未来・希望・新しい日の始まりを象徴。
- **用途**: ロゴ、プライマリ CTA、アクティブ状態のアクセント。
- **禁止**: グラデーション・多色混合での使用（Panasonic Industry 部門を除く）。

### Standard Blue（UI セカンダリ）

`#0063CC`（--standard-blue）— リンクカラー・ホバーアクセント。ブランドブルーより明るく、本文中のリンク判別に使用。

### テキストカラー

| 変数名 | 値 | 用途 |
|--------|-----|------|
| --text-color-normal | `#1A1A1A` | 本文・見出し |
| --text-color-normal-sub | `#666666` | ナビリンク・説明文 |
| --text-color-normal-disable | `#B3B3B3` | 無効状態 |
| --text-color-light | `#E6E6E6` | ダーク背景上メイン |
| --text-color-light-sub | `#999999` | ダーク背景上サブ |
| --text-color-light-disable | `#4D4D4D` | ダーク背景上無効 |

### ニュートラル

| 役割 | Hex | 変数 |
|------|-----|------|
| Dark Background | `#1F1F1F` | --dark-gray |
| Border Light | `#CCCCCC` | --line-color-light |
| Border Dark | `#666666` | --line-color-dark |
| Surface Subtle | `#F2F2F2` | --pale-gray |
| Hover Normal | `#E6E6E6` | --btn-hover-color-normal |
| Hover Dark | `#333333` | --btn-hover-color-dark |

### ステータスカラー

| 種類 | 値 | 変数 |
|------|-----|------|
| エラー（通知） | `#B81F14` | --notice-red |
| エラー（強調） | `#B50000` | --dark-red |
| 汎用赤 | `#FC1921` | --standard-red |
| 成功 | `#4FAD26` | --standard-green |
| 成功（強調） | `#1F6600` | --dark-green |

---

## Typography

### フォントスタック（直接証拠）

**プライマリ（日本語・ラテン共用）**
```css
font-family: "Noto Sans JP", "Noto Sans", sans-serif;
```
実サイトの CSS カスタムプロパティ `--font-family` から直接取得。Google Fonts ベースの現代的な日本語対応フォントを採用。

**レガシーフォールバック**
```css
font-family: "lucida grande", tahoma, verdana, arial,
             "hiragino kaku gothic pro", meiryo, "ms pgothic", sans-serif;
```
古いコンポーネント向け。新規実装では使用しない。

**ロゴ専用（推論）**
ワードマーク "Panasonic" は Helvetica Black のカスタム改変版。UI テキストへの Helvetica 使用は確認されていない。

### タイポグラフィスケール

| ロール | サイズ | ウェイト | 行間 | 証拠 |
|--------|--------|----------|------|------|
| Display | 40px | 700 | 1.3 | 推論 |
| H1 | 32px | 700 | 1.3 | 推論 |
| H2（セクションタイトル） | 24px | 400 | 36px | 直接（cmp-customizedtitle__text） |
| Body | 16px | 400 | 24px | 直接（nav・body計測） |
| Caption / 社名 | 12px | 400 | 18px | 直接（h1.name 計測） |

---

## Layout

### コンテンツ幅（直接証拠）

```
--base-max-width: 980px   /* コンテンツカラムの上限 */
--base-min-width: 981px   /* デスクトップビューの最小幅 */
```

モバイル（430px）→ タブレット（768px〜）→ デスクトップ（981px〜）の 3 段階。

### ブレークポイント

| 名称 | メディアクエリ |
|------|----------------|
| Mobile | `(max-width: 767px)` |
| Tablet | `(min-width: 768px) and (max-width: 1023px)` |
| Desktop | `(min-width: 981px)` |
| Wide | `(min-width: 1024px)` |

### スペーシング（直接証拠: gap-block 変数）

```
8px  — gap-xxs（最小マージン、アイコン間）
16px — gap-xs（コンポーネント内小余白）
24px — gap-s（カード内パディング等）
32px — gap-m（コンポーネント間）
48px — gap-l（セクション内グループ間）
80px — gap-xl（メジャーセクション間）
```

### ナビゲーション構造

- ヘッダー高さ: **84px**（モバイル直接計測値。デスクトップは推論）
- 背景: 透明（`rgba(0,0,0,0)`）— スクロール前のグラスモーフィズム効果あり（推論）
- メガメニュー: クリック展開のアコーディオン式（`aria-expanded` 確認）
- ブレッドクラム: 12px グレー（#999999）
- フッター: ダーク背景 `#1F1F1F`、ホワイト系テキスト

---

## Components

### ボタン

**Primary CTA**
```css
background-color: #0041C0;
color: #FFFFFF;
font-family: "Noto Sans JP", "Noto Sans", sans-serif;
font-weight: 700;
font-size: 14px;
letter-spacing: 0.05em;
padding: 12px 28px;
border-radius: 0;      /* 実サイト確認値 */
border: none;
transition: all;
```
ホバー: `background-color: #333333`（--btn-hover-color-dark）

**Secondary**
```css
background: transparent;
color: #0041C0;
border: 1.5px solid #0041C0;
/* padding・radius 等は Primary と同値 */
```
ホバー: `background-color: #E6E6E6`（--btn-hover-color-normal）

### カード

```css
background: #FFFFFF;
border: 1px solid #CCCCCC;
border-radius: 0;          /* ブランドのシャープコーナー原則 */
padding: 24px;             /* gap-s */
transition: box-shadow 0.2s, transform 0.2s;
```
ホバー: `box-shadow: 0 4px 16px rgba(0,0,0,0.10); transform: translateY(-2px);`

### インプット（検索フォーム）

```css
background: rgba(0,0,0,0);
border: 0;                 /* ボトムラインのみのデザイン（推論）*/
color: #1A1A1A;
font-family: "Noto Sans JP", "Noto Sans", sans-serif;
font-size: 16px;
line-height: 24px;
transition: all;
```

### タグ / フィルターチップ

```css
/* 非アクティブ */
background: #F2F2F2;
color: #666666;
font-size: 12px;
padding: 4px 10px;
border-radius: 9999px;

/* アクティブ */
background: #0041C0;
color: #FFFFFF;
```

### アイコン

- SVG ベース。命名規則: `holdings-icn-{name}-{variant}.svg`
- バリアント: `gry`（グレー）確認済み
- 標準サイズ: 16px × 16px（トグルボタン計測値）

---

## Imagery

| 種類 | 特徴 |
|------|------|
| 製品写真 | ニュートラル〜白背景。シャープで正確なライティング。 |
| ライフスタイル写真 | 生活シーン。人物を主役に温かみある演出。 |
| コーポレートポートレート | クリーンなライティング。ニュートラルバック。 |
| デザインポートフォリオ | モノクロ多用または低彩度。製品の形状・質感を主役に。 |
| モーション | "Melt" コンセプト: スライド切替時に要素が溶け込む混合トランジション。通常 UI では 200〜300ms のフェード・スライドに留める。 |

- 余白を大きく取った空間構成。製品単体の「佇まい」を優先。
- イラスト: 原則使用せず。図解はラインアート・インフォグラフィックで対応（推論）。

---

## Logo And Usage

### スペック

| 項目 | 詳細 |
|------|------|
| タイプ | ワードマーク（テキストのみ） |
| フォントベース | Helvetica Black カスタム改変版 |
| ケース | タイトルケース（"Panasonic"） |
| エンブレム | なし（1971 年以来） |
| カラーバリアント | Blue `#0041C0` / Black `#000000` / White `#FFFFFF` |

### Holdings サイト確認ファイル

- `holdings-plogo-blue.svg` — 縦型・標準（183×80px）
- `holdings-plogo-horizontal.svg` — 横型・ヘッダー用（157×46px）

### クリアスペース・最小サイズ

- クリアスペース: 大文字「P」の高さ分を四辺に確保
- 最小デジタル: 80px 幅（実装上の目安）

### 禁止事項

- ロゴの変色・グラデーション適用
- ロゴの回転・変形・影付け
- クリアスペース内への他要素配置
- 低コントラスト背景への配置

---

## Do's and Don'ts

### Do

- **Noto Sans JP を全テキストに使う** — UI・ボディ・見出しすべてで一貫したスタック。
- **Panasonic Blue を単色でアクセントに使う** — CTA・アクティブ状態・リンクに限定。
- **大きな余白を確保する** — gap-xl（80px）をセクション間に。コンテンツ密度は低く。
- **border-radius は 0px を基本とする** — 実サイトのボタン・ナビはすべて 0px。カードのみ 4px まで許容（推論）。
- **テキスト階層はウェイトと色の組み合わせで作る** — Normal `#1A1A1A` / Sub `#666666` / Disabled `#B3B3B3` の 3 段階。
- **日本語 line-height は 1.5 以上** — 実計測値は 24px（=1.5）。日本語の読みやすさを確保。
- **ステータスカラーはアイコン・テキストと併用** — 色のみに依存しない UD 配慮。

### Don't

- **Helvetica・セリフ体を UI 本文に使わない** — Noto Sans JP 一本。Helvetica はロゴ専用。
- **ブランドブルーをページ背景に大面積で使わない** — 信頼性の失墜。ヒーローに使う場合は白テキストとのコントラスト比 4.5:1 以上を確保。
- **独自カラーを追加しない** — ブランドブルー・スタンダードブルー・ニュートラル以外の彩色はブランドのミニマル原則に反する。
- **ロゴにタグラインを添えない** — ワードマーク単体が原則。
- **アニメーションを多用しない** — 通常 UI では 200〜300ms のシンプルなフェード・スライドに留める。

---

## Inferred Choices（推論表示）

直接証拠のない推論値。実装前に公式 CSS を検証すること。

| 項目 | 推論値 | 根拠 |
|------|--------|------|
| デスクトップ nav 高さ | 56〜64px | モバイル 84px から縮小推定 |
| button border-radius | 0px | 実サイトのボタン計測値に倣う |
| card border-radius | 0〜4px | 許容範囲として最小値推奨 |
| フッター背景 | #1F1F1F | --dark-gray 変数値 |
| リンクカラー | #0063CC | --standard-blue（ブランドブルーより明度高） |
| スクロール時ヘッダー変化 | 背景色フェードイン（白）| 透明ヘッダーの標準的な動作 |
| コンテンツ最大幅（デスクトップ） | 980px | --base-max-width 直接証拠 |

{
  "$schema": "https://aistyles.dev/schema/tokens-v1.json",
  "version": "1.0",
  "brand": {
    "slug": "panasonic",
    "name": "Panasonic Holdings (パナソニック ホールディングス)",
    "url": "https://holdings.panasonic/jp/",
    "description": "1918 年創業、2022 年に持株会社体制へ移行した日本を代表する電機・テクノロジーコングロマリットのコーポレートサイト。深い『パナソニックブルー (#0041C0)』と Noto Sans JP を基軸に、過剰な装飾を排した余白・タイポグラフィ・青の一点集中で『信頼性・有能さ・未来志向』を表現する。デザインフィロソフィー『Future Craft』のもと、日本的美学と前向きな技術革新を融合させたミニマルなコーポレート ID。",
    "category": "tech",
    "tags": [
      "corporate",
      "japanese",
      "electronics",
      "conglomerate",
      "panasonic-blue",
      "noto-sans-jp",
      "minimal",
      "sharp-corners"
    ],
    "theme": "light",
    "language": "ja"
  },
  "sources": [
    "https://holdings.panasonic/jp/",
    "panasonic-extraction.json (DevTools 直接抽出、2026-05-16)"
  ],
  "extractedAt": "2026-05-17",
  "notes": [
    "直接証拠: panasonic-extraction.json (iPhone SE 相当の 430×932 モバイルビュー) で取得した rootVariables から CSS カスタムプロパティを直接記録。",
    "直接証拠: --panasonic-blue: #0041C0 / --standard-blue: #0063CC の 2 本立てを確認。",
    "直接証拠: --font-family: 'Noto Sans JP','Noto Sans',sans-serif。Helvetica 系は UI フォントとして不使用 (ロゴ専用と推定)。",
    "直接証拠: --base-max-width: 980px。コンテンツカラム幅は 1200px ではなく 980px。",
    "直接証拠: ナビゲーション高さ 84px (モバイル計測値)、gap-block 系スペーシング変数の完全取得。",
    "直接証拠: ステータスカラー (--notice-red #B81F14 / --standard-red #FC1921 / --standard-green #4FAD26 等) を確認。",
    "推論: デスクトップ (min-width: 981px) でのナビ高さ・フォントスケールは未計測、モバイル値から推定。",
    "推論: ボタンの CTA スタイル (background-color) は JSON に未出現のため、カスタムプロパティから合成した推論値。",
    "重要: 実サイトのボタン・ナビは border-radius: 0px が直接証拠として確認されている — シャープコーナーが Panasonic のブランド原則。",
    "注意: Panasonic Corporation (本体) と Panasonic Holdings (持株会社) の関係。本ガイドは Holdings 公式サイトのもの。"
  ],
  "colors": {
    "groups": [
      {
        "label": "Brand Blue",
        "tokens": [
          {
            "name": "Panasonic Blue",
            "value": "#0041C0",
            "token": "--panasonic-blue",
            "role": "ブランドの中核色。Pantone PMS 2728 C。1974 年採用、夜明けの空がモチーフ。ロゴ・プライマリ CTA・アクティブ状態専用"
          },
          {
            "name": "Brand Blue Alt (Print)",
            "value": "#0040BE",
            "token": "--panasonic-blue-print",
            "role": "印刷系の微差別定義 (外部ブランド DB より)"
          },
          {
            "name": "Standard Blue",
            "value": "#0063CC",
            "token": "--standard-blue",
            "role": "UI リンク・ホバー等に使うセカンダリブルー。ブランドブルーより明度高、本文中のリンク判別用"
          },
          {
            "name": "On Brand Blue",
            "value": "#FFFFFF",
            "token": "--on-brand-blue",
            "role": "ブランドブルー上テキスト・アイコン"
          }
        ]
      },
      {
        "label": "Text (Light Mode)",
        "tokens": [
          {
            "name": "Text Normal",
            "value": "#1A1A1A",
            "token": "--text-color-normal",
            "role": "本文・見出しの最濃色"
          },
          {
            "name": "Text Sub",
            "value": "#666666",
            "token": "--text-color-normal-sub",
            "role": "ナビリンク・説明文 (テキストセカンダリ)"
          },
          {
            "name": "Text Disabled",
            "value": "#B3B3B3",
            "token": "--text-color-normal-disable",
            "role": "無効状態テキスト"
          }
        ]
      },
      {
        "label": "Text (Dark Mode)",
        "tokens": [
          {
            "name": "Text Light",
            "value": "#E6E6E6",
            "token": "--text-color-light",
            "role": "ダーク背景上のメインテキスト"
          },
          {
            "name": "Text Light Sub",
            "value": "#999999",
            "token": "--text-color-light-sub",
            "role": "ダーク背景上のサブテキスト"
          },
          {
            "name": "Text Light Disabled",
            "value": "#4D4D4D",
            "token": "--text-color-light-disable",
            "role": "ダーク背景上の無効テキスト"
          }
        ]
      },
      {
        "label": "Surface & Border",
        "tokens": [
          {
            "name": "Surface Default",
            "value": "#FFFFFF",
            "token": "--surface-default",
            "role": "メイン背景・カード背景"
          },
          {
            "name": "Surface Subtle",
            "value": "#F2F2F2",
            "token": "--pale-gray",
            "role": "カード背景・フォーム背景・タグ非アクティブ背景"
          },
          {
            "name": "Surface Dark",
            "value": "#1F1F1F",
            "token": "--dark-gray",
            "role": "フッター・ダークパネル背景"
          },
          {
            "name": "Line Light",
            "value": "#CCCCCC",
            "token": "--line-color-light",
            "role": "区切り線・カード枠線 (medium-gray と同値)"
          },
          {
            "name": "Line Dark",
            "value": "#666666",
            "token": "--line-color-dark",
            "role": "強調ボーダー (text-sub と同値)"
          }
        ]
      },
      {
        "label": "Hover States",
        "tokens": [
          {
            "name": "Btn Hover Normal",
            "value": "#E6E6E6",
            "token": "--btn-hover-color-normal",
            "role": "セカンダリボタンのホバー時薄グレー"
          },
          {
            "name": "Btn Hover Dark",
            "value": "#333333",
            "token": "--btn-hover-color-dark",
            "role": "プライマリボタンのホバー時ダーク"
          }
        ]
      },
      {
        "label": "Status",
        "tokens": [
          {
            "name": "Notice Red",
            "value": "#B81F14",
            "token": "--notice-red",
            "role": "通知・エラー"
          },
          {
            "name": "Dark Red",
            "value": "#B50000",
            "token": "--dark-red",
            "role": "強調エラー"
          },
          {
            "name": "Standard Red",
            "value": "#FC1921",
            "token": "--standard-red",
            "role": "汎用赤"
          },
          {
            "name": "Standard Green",
            "value": "#4FAD26",
            "token": "--standard-green",
            "role": "成功・承認"
          },
          {
            "name": "Dark Green",
            "value": "#1F6600",
            "token": "--dark-green",
            "role": "強調成功"
          }
        ]
      }
    ]
  },
  "typography": {
    "fonts": [
      {
        "family": "Noto Sans JP",
        "stack": "'Noto Sans JP', 'Noto Sans', sans-serif",
        "weights": [
          400,
          500,
          700
        ],
        "role": "本文・見出し・UI 全般。Google Fonts ベースの現代的な日本語対応フォント。Helvetica 系は UI に使用しない"
      },
      {
        "family": "Legacy Fallback",
        "stack": "'lucida grande', tahoma, verdana, arial, 'hiragino kaku gothic pro', meiryo, 'ms pgothic', sans-serif",
        "weights": [
          400
        ],
        "role": "古いコンポーネントやブラウザ向けのレガシースタック。新規実装では使用しない"
      },
      {
        "family": "Helvetica Black (Logo Only)",
        "stack": "custom",
        "weights": [
          900
        ],
        "role": "ワードマーク 'Panasonic' 専用 (カスタム改変版)。UI テキストへの使用禁止"
      }
    ],
    "scale": [
      {
        "role": "display",
        "size": "40px",
        "weight": 700,
        "lineHeight": 1.3,
        "note": "デスクトップ推定。モバイルでは 24px 程度"
      },
      {
        "role": "h1",
        "size": "32px",
        "weight": 700,
        "lineHeight": 1.3,
        "note": "推論"
      },
      {
        "role": "h2 (section title)",
        "size": "24px",
        "weight": 400,
        "lineHeight": 1.5,
        "note": "実計測値 (cmp-customizedtitle__text)、line-height 36px = 1.5"
      },
      {
        "role": "h3",
        "size": "20px",
        "weight": 400,
        "lineHeight": 1.5,
        "note": "推論"
      },
      {
        "role": "body",
        "size": "16px",
        "weight": 400,
        "lineHeight": 1.5,
        "note": "実計測値 (nav・body)、line-height 24px = 1.5"
      },
      {
        "role": "label",
        "size": "14px",
        "weight": 500,
        "lineHeight": 1.5
      },
      {
        "role": "caption",
        "size": "12px",
        "weight": 400,
        "lineHeight": 1.5,
        "note": "実計測値 (h1.name 社名・ナビ小テキスト)、line-height 18px = 1.5"
      }
    ],
    "japanese": {
      "fontStack": "'Noto Sans JP', 'Noto Sans', sans-serif",
      "lineHeight": 1.5,
      "letterSpacing": "0",
      "openType": {
        "palt": false,
        "kern": true
      },
      "kinsoku": {
        "wordBreak": "keep-all",
        "lineBreak": "strict"
      },
      "notes": [
        "Noto Sans JP を Google Fonts から読み込み、UI 全テキストで一貫運用",
        "本文 line-height: 1.5 (24px / 16px) で日本語の可読性を確保",
        "Regular (400) / Medium (500) / Bold (700) の 3 段階運用",
        "テキスト階層はウェイトより色 (#1A1A1A / #666666 / #B3B3B3) で表現する設計"
      ]
    }
  },
  "spacing": {
    "baseUnit": "8px",
    "tokens": [
      {
        "name": "gap-xxs",
        "value": "8px",
        "role": "最小マージン・アイコン間隔"
      },
      {
        "name": "gap-xs",
        "value": "16px",
        "role": "コンポーネント内小余白・gap-inline-m"
      },
      {
        "name": "gap-s",
        "value": "24px",
        "role": "カード内パディング"
      },
      {
        "name": "gap-m",
        "value": "32px",
        "role": "コンポーネント間隔"
      },
      {
        "name": "gap-l",
        "value": "48px",
        "role": "セクション内グループ間隔"
      },
      {
        "name": "gap-xl",
        "value": "80px",
        "role": "メジャーセクション間隔"
      },
      {
        "name": "column-gap",
        "value": "8px",
        "role": "グリッドカラム間隔"
      },
      {
        "name": "base-max-width",
        "value": "980px",
        "role": "コンテンツカラム上限 (1200px ではなく 980px)"
      }
    ]
  },
  "breakpoints": {
    "mobile": {
      "value": "max-width: 767px",
      "role": "モバイル (左右余白縮小)"
    },
    "tablet": {
      "value": "min-width: 768px",
      "role": "タブレット"
    },
    "tablet-mid": {
      "value": "min-width: 768px and max-width: 1023px",
      "role": "タブレット中間"
    },
    "desktop": {
      "value": "min-width: 981px",
      "role": "デスクトップ (--base-min-width)"
    },
    "wide": {
      "value": "min-width: 1024px",
      "role": "ワイドビュー"
    }
  },
  "radius": {
    "none": "0px",
    "small": "2px",
    "medium": "4px",
    "large": "8px",
    "pill": "9999px",
    "default": "0px"
  },
  "components": [
    {
      "type": "button",
      "name": "Primary CTA Button",
      "description": "Panasonic Blue 背景のシャープコーナーボタン。border-radius: 0px がブランドの核心ルール",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#0041C0",
            "color": "#FFFFFF",
            "fontFamily": "'Noto Sans JP', 'Noto Sans', sans-serif",
            "fontWeight": "700",
            "fontSize": "14px",
            "letterSpacing": "0.05em",
            "padding": "12px 28px",
            "borderRadius": "0px",
            "border": "none",
            "transition": "all 0.2s"
          }
        },
        {
          "label": "Hover",
          "props": {
            "background": "#333333",
            "color": "#FFFFFF",
            "fontFamily": "'Noto Sans JP', 'Noto Sans', sans-serif",
            "fontWeight": "700",
            "fontSize": "14px",
            "letterSpacing": "0.05em",
            "padding": "12px 28px",
            "borderRadius": "0px",
            "border": "none",
            "transition": "all 0.2s"
          }
        }
      ]
    },
    {
      "type": "button",
      "name": "Secondary Button",
      "description": "透明背景 + ブランドブルー枠線のシャープコーナーボタン",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "transparent",
            "color": "#0041C0",
            "border": "1.5px solid #0041C0",
            "fontWeight": "700",
            "fontSize": "14px",
            "letterSpacing": "0.05em",
            "padding": "12px 28px",
            "borderRadius": "0px"
          }
        },
        {
          "label": "Hover",
          "props": {
            "background": "#E6E6E6",
            "color": "#0041C0",
            "border": "1.5px solid #0041C0",
            "fontWeight": "700",
            "fontSize": "14px",
            "letterSpacing": "0.05em",
            "padding": "12px 28px",
            "borderRadius": "0px"
          }
        }
      ]
    },
    {
      "type": "link",
      "name": "Text Link",
      "description": "Standard Blue 色のテキストリンク。ブランドブルーより明度を上げて本文中で判別しやすく",
      "variants": [
        {
          "label": "Default",
          "props": {
            "color": "#0063CC",
            "textDecoration": "none"
          }
        },
        {
          "label": "Hover",
          "props": {
            "color": "#0041C0",
            "textDecoration": "underline"
          }
        }
      ]
    },
    {
      "type": "nav",
      "name": "Global Navigation",
      "description": "透明背景の固定ヘッダー (高さ 84px)。スクロール時に白背景フェードイン (推論)",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "rgba(0,0,0,0)",
            "color": "#1A1A1A",
            "fontFamily": "'Noto Sans JP', 'Noto Sans', sans-serif",
            "fontSize": "16px",
            "fontWeight": "400",
            "lineHeight": "24px",
            "height": "84px",
            "borderRadius": "0px",
            "linkColor": "#4D4D4D",
            "linkColorSub": "#666666",
            "linkHoverColor": "#0041C0"
          }
        }
      ]
    },
    {
      "type": "card",
      "name": "Card",
      "description": "白背景のシャープコーナーカード。ホバーで軽い影 + 上方向 2px 移動",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#FFFFFF",
            "color": "#1A1A1A",
            "border": "1px solid #CCCCCC",
            "borderRadius": "0px",
            "padding": "24px",
            "transition": "box-shadow 0.2s, transform 0.2s"
          }
        },
        {
          "label": "Hover",
          "props": {
            "background": "#FFFFFF",
            "color": "#1A1A1A",
            "border": "1px solid #CCCCCC",
            "borderRadius": "0px",
            "padding": "24px",
            "boxShadow": "0 4px 16px rgba(0,0,0,0.10)",
            "transform": "translateY(-2px)"
          }
        }
      ]
    },
    {
      "type": "input",
      "name": "Text Input",
      "description": "ボトムラインのみのミニマル入力欄。背景透明、フォーカス時にブランドブルー",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "rgba(0,0,0,0)",
            "color": "#1A1A1A",
            "border": "none",
            "borderRadius": "0px",
            "fontFamily": "'Noto Sans JP', 'Noto Sans', sans-serif",
            "fontSize": "16px",
            "fontWeight": "400",
            "lineHeight": "24px",
            "padding": "0px"
          }
        },
        {
          "label": "Focus",
          "props": {
            "background": "rgba(0,0,0,0)",
            "color": "#1A1A1A",
            "borderColor": "#0041C0",
            "outline": "2px solid rgba(0,65,192,0.25)",
            "borderRadius": "0px",
            "fontFamily": "'Noto Sans JP', 'Noto Sans', sans-serif",
            "fontSize": "16px"
          }
        }
      ]
    },
    {
      "type": "badge",
      "name": "Filter Tag",
      "description": "ピル型のフィルターチップ。非アクティブはグレー、アクティブはブランドブルー",
      "variants": [
        {
          "label": "Inactive",
          "props": {
            "background": "#F2F2F2",
            "color": "#666666",
            "fontSize": "12px",
            "padding": "4px 10px",
            "borderRadius": "9999px"
          }
        },
        {
          "label": "Active",
          "props": {
            "background": "#0041C0",
            "color": "#FFFFFF",
            "fontSize": "12px",
            "padding": "4px 10px",
            "borderRadius": "9999px"
          }
        }
      ]
    },
    {
      "type": "breadcrumb",
      "name": "Breadcrumb",
      "description": "12px のグレーパンくず。区切りは『>』",
      "variants": [
        {
          "label": "Default",
          "props": {
            "fontSize": "12px",
            "color": "#999999",
            "separator": ">",
            "activeColor": "#1A1A1A"
          }
        }
      ]
    },
    {
      "type": "footer",
      "name": "Footer",
      "description": "ダーク背景 (#1F1F1F) のフッター。ホワイト系テキスト",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#1F1F1F",
            "color": "#E6E6E6",
            "linkColor": "#CCCCCC",
            "linkHoverColor": "#FFFFFF"
          }
        }
      ]
    }
  ],
  "guidelines": {
    "do": [
      "Noto Sans JP を全テキストに使う — UI・本文・見出しすべてで一貫したスタック",
      "Panasonic Blue (#0041C0) を単色でアクセントに使う — CTA・アクティブ状態・リンクに限定",
      "大きな余白を確保する — gap-xl (80px) をセクション間に使い、コンテンツ密度は低く保つ",
      "border-radius は 0px を基本とする — 実サイトのボタン・ナビはすべて 0px (シャープコーナー原則)",
      "テキスト階層はウェイトと色の組み合わせで作る — Normal #1A1A1A / Sub #666666 / Disabled #B3B3B3 の 3 段階",
      "日本語 line-height は 1.5 以上を確保する — 実計測値は 24px (=1.5)",
      "ステータスカラーはアイコン・テキストと併用する — 色のみに依存しない UD 配慮",
      "コンテンツ最大幅は 980px (1200px ではない) — --base-max-width に準拠",
      "リンクは Standard Blue (#0063CC)、ブランドブルー (#0041C0) はリンクに使わない (明度差で判別)"
    ],
    "dont": [
      "Helvetica・セリフ体を UI 本文に使わない — Noto Sans JP 一本。Helvetica はロゴ専用",
      "ブランドブルーをページ背景に大面積で使わない — 信頼性の失墜。ヒーローに使う場合はコントラスト比 4.5:1 以上を確保",
      "独自カラーを追加しない — ブランドブルー・スタンダードブルー・ニュートラル以外の彩色はミニマル原則に反する",
      "ロゴにタグラインを添えない — ワードマーク単体が原則",
      "アニメーションを多用しない — 通常 UI では 200〜300ms のシンプルなフェード・スライドに留める",
      "ロゴの変色・グラデーション適用・回転・変形・影付けを行わない",
      "border-radius を 8px 超で使わない — シャープコーナーのブランドトーンが崩れる",
      "ボタンに丸みのある形状を使わない — Panasonic ブランドの精緻さに反する"
    ]
  }
}