---
version: beta
name: Nintendo Japan (nintendo.com/jp)
description: Japanのコンシューマー向けポータルサイト。ゲームアートワークを主役とした白基調のクリーンなデザインに、ブランドレッドをアクセントとして用いる。デザインシステム名は内部的に "nc3"。
sources:
  - nintendo-all-css.css (実測・直接抽出)
  - https://www.nintendo.com/jp/index.html
  - https://www.nintendo.com/jp/topics/
  - https://www.nintendo.com/jp/hardware/switch/index.html
notes:
  - >
    直接証拠: nintendo-all-css.css を grep/正規表現で全数集計。
    カラー・フォント・border-radius・transition・breakpoint はすべて実測値。
  - >
    確認済み訂正 (旧 DESIGN.md alpha からの差分):
    フォントは Hiragino Sans ではなく NotoSansJP (nc3Jp) + YakuHanJPs のカスタムウェブフォントを使用。
    テキスト色は #1A1A1A ではなく #3c3c3c。
    サブテキスト色は #666666 ではなく #8c8c8c。
    border-subtle は #EBEBEB ではなく #e6e6e6。
    surface-muted は #F5F5F5 ではなく #f2f2f2。
    ボタン border-radius は pill (24px) ではなく 2px。
    ナビ高さは 64px ではなく 73px。
    body line-height は 1.7 ではなく 2。
    Nintendo blue は #0AB9E6 ではなく #0096c8 (My Nintendo / 情報色)。
    hover/active red は #ce181e。
  - >
    推論: layout.max-width は CSS で 1200px が最多使用。
    セクション padding は 40–60px 帯が多いが変数化されていないため代表値を採用。
colors:
  primary: "#e60012"
  primary-hover: "#ce181e"
  on-primary: "#ffffff"
  surface: "#ffffff"
  surface-muted: "#f2f2f2"
  surface-overlay-dark: "rgba(0,0,0,0.92)"
  text-primary: "#3c3c3c"
  text-secondary: "#8c8c8c"
  text-disabled: "#b4b4b4"
  border: "#d9d9d9"
  border-subtle: "#e6e6e6"
  nintendo-blue: "#0096c8"
  sale-orange: "#d46700"
  highlight-yellow: "#f8ea90"
  social-twitter: "#1da1f2"
  social-line: "#06c755"
typography:
  base:
    fontFamily: "'YakuHanJPs', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'nc3Jp', sans-serif"
    fontSize: "16px"
    fontWeight: "400"
    lineHeight: "2"
    color: "#3c3c3c"
  h1:
    fontSize: "36px"
    fontSize-mobile: "24px"
    fontWeight: "bold"
    lineHeight: "1.4"
  h2:
    fontSize: "30px"
    fontSize-mobile: "24px"
    fontWeight: "bold"
    lineHeight: "1.4"
  h3:
    fontSize: "24px"
    fontSize-mobile: "18px"
    fontWeight: "bold"
    lineHeight: "1.4"
  h4:
    fontSize: "18px"
    fontSize-mobile: "16px"
    fontWeight: "bold"
    lineHeight: "1.4"
  body:
    fontSize: "16px"
    fontWeight: "400"
    lineHeight: "2"
  label:
    fontSize: "14px"
    fontWeight: "bold"
    lineHeight: "1.4"
  caption:
    fontSize: "12px"
    fontWeight: "400"
    lineHeight: "1.8"
  small:
    fontSize: "10px"
    fontWeight: "400"
rounded:
  none: "0"
  sharp: "2px"
  small: "4px"
  circle: "50%"
  pill: "18px"
spacing:
  xs: "5px"
  sm: "12px"
  md: "20px"
  lg: "24px"
  xl: "40px"
  section-y: "40px"
  section-y-lg: "60px"
layout:
  max-width: "1200px"
  content-max-width: "980px"
  gutter: "20px"
  gutter-mobile: "16px"
  nav-height: "73px"
breakpoints:
  mobile: "759.98px"
  tablet: "760px"
  desktop: "980px"
  wide: "1200px"
motion:
  duration-fast: "150ms"
  duration-normal: "240ms"
  duration-slow: "300ms"
  easing-primary: "cubic-bezier(.165,.84,.44,1)"
  easing-in-out: "cubic-bezier(.445,.05,.55,.95)"
  easing-out: "cubic-bezier(.25,.46,.45,.94)"
  easing-in: "cubic-bezier(.455,.03,.515,.955)"
  transition-color: "border-color 150ms linear, background-color 150ms linear, color 150ms linear"
  transition-opacity: "opacity 150ms cubic-bezier(.165,.84,.44,1)"
components:
  button:
    borderWidth: "2px"
    borderStyle: "solid"
    borderRadius: "2px"
    padding: "11px 24px"
    fontSize: "14px"
    fontWeight: "bold"
    transition: "{motion.transition-color}"
    cursor: "pointer"
    boxSizing: "border-box"
    lineHeight: "normal"
  button-primary:
    backgroundColor: "{colors.primary}"
    color: "{colors.on-primary}"
    borderColor: "{colors.primary}"
  button-outline:
    backgroundColor: "{colors.surface}"
    color: "currentColor"
    borderColor: "currentColor"
  button-white:
    backgroundColor: "{colors.surface}"
    borderColor: "{colors.border}"
    color: "{colors.text-primary}"
  button-gray:
    backgroundColor: "{colors.surface-muted}"
    borderColor: "{colors.border-subtle}"
    color: "{colors.text-secondary}"
  button-small:
    padding: "7px 16px"
    fontSize: "12px"
  button-large:
    padding: "14px 32px"
    fontSize: "16px"
  nav:
    backgroundColor: "{colors.surface}"
    height: "73px"
    borderBottom: "1px solid {colors.border-subtle}"
    position: "sticky"
    top: "0"
    zIndex: "9999"
    paddingX: "20px"
  nav-logo:
    color: "{colors.primary}"
  nav-link:
    color: "{colors.text-primary}"
    fontSize: "14px"
    fontWeight: "bold"
  link:
    color: "{colors.primary}"
    transition: "{motion.transition-color}"
  badge-new:
    backgroundColor: "{colors.primary}"
    color: "{colors.on-primary}"
    borderRadius: "{rounded.sharp}"
    padding: "2px 8px"
    fontSize: "10px"
    fontWeight: "bold"
  badge-sale:
    backgroundColor: "{colors.sale-orange}"
    color: "{colors.on-primary}"
    borderRadius: "{rounded.sharp}"
  section:
    paddingY: "{spacing.section-y}"
    backgroundColor: "{colors.surface}"
  section-muted:
    paddingY: "{spacing.section-y}"
    backgroundColor: "{colors.surface-muted}"
  overlay:
    backgroundColor: "{colors.surface-overlay-dark}"
    zIndex: "99999"
---

## Overview

Nintendo Japan (nintendo.com/jp) はハードウェア・ソフトウェアの情報をまとめた公式コンシューマーポータル。デザインの中心は「ゲームアートワークを最大限に見せる」こと。UIクロームは最小限に抑え、白とグレーの余白の中にゲームカバーアートを大きく配置する。

内部デザインシステムは **nc3** と呼ばれ、BEM 命名規則で `nc3-[layer]-[component]--[modifier]` の形式を取る。レイヤーは `a`（atom）、`c`（component）、`m`（module）。

ブランドアイデンティティの核は **Nintendo Red (#e60012)** — ロゴ・プライマリボタン・ラベル・アクティブ状態に一貫して使用される。それ以外のカラーはほぼニュートラル（白・グレー）に抑えられ、ゲームのビジュアルに視線を集める構造になっている。

---

## Colors

### Primary

| ロール | Hex | 実測頻度 | 用途 |
|---|---|---|---|
| `primary` | `#e60012` | 231+ | Nintendo Red。ロゴ・プライマリボタン・強調ラベル・アクティブ状態 |
| `primary-hover` | `#ce181e` | 29 | ホバー・押下状態の赤 |
| `on-primary` | `#ffffff` | 282 | primary 背景上のテキスト |

> **直接証拠:** #e60012 は CSS 全体で 231 回以上使用。#ce181e はホバー・フォーカス状態のコンテキストで 29 回確認。

### Surfaces

| ロール | Hex | 実測頻度 | 用途 |
|---|---|---|---|
| `surface` | `#ffffff` | 282 | ページ背景・カード・ナビゲーション |
| `surface-muted` | `#f2f2f2` | 31 | 奇数セクション背景・入力フィールド背景 |
| `surface-overlay-dark` | `rgba(0,0,0,0.92)` | 2 | モーダル背景 |

### Text

| ロール | Hex | 実測頻度 | 用途 |
|---|---|---|---|
| `text-primary` | `#3c3c3c` | 49 | body color の実測値。見出し・本文 |
| `text-secondary` | `#8c8c8c` | 81 | 日付・補足テキスト・キャプション |
| `text-disabled` | `#b4b4b4` | 171 | 無効化された要素・placeholder |

### Borders

| ロール | Hex | 実測頻度 | 用途 |
|---|---|---|---|
| `border` | `#d9d9d9` | 38 | カード枠・入力枠 |
| `border-subtle` | `#e6e6e6` | 135 | ナビボーダー・薄い区切り線・ページャー枠 |

### Brand Accent Colors

| ロール | Hex | 実測頻度 | 用途 |
|---|---|---|---|
| `nintendo-blue` | `#0096c8` | 30 | My Nintendo・情報バッジ・リンク色 |
| `sale-orange` | `#d46700` | 21 | セール価格・割引バッジ |
| `highlight-yellow` | `#f8ea90` | 13 | ハイライト・注目エリア |

### Social Colors

| ロール | Hex | 用途 |
|---|---|---|
| `social-twitter` | `#1da1f2` | Twitter/X シェアボタン |
| `social-line` | `#06c755` | LINE シェアボタン |

---

## Typography

### フォントスタック (実測)

Nintendo Japan はカスタムウェブフォントを使用している。

```css
/* カスタム @font-face */
@font-face {
  font-family: "nc3Jp";          /* = Noto Sans JP */
  src: url("/jp/common/font/NotoSansJP-Regular.woff2");
}
@font-face {
  font-family: "YakuHanJPs";    /* 日本語約物専用フォント */
  src: url("/jp/common/font/YakuHanJPs-Regular.woff2");
}

/* body に適用される実測スタック */
font-family: "YakuHanJPs", "Hiragino Kaku Gothic ProN",
             "ヒラギノ角ゴ ProN W3", "nc3Jp", sans-serif;
```

> **直接証拠:** `@font-face` 定義・`body { font-family: ... }` を実測。YakuHanJPs が先頭に来るのは約物（句読点・括弧類）の字形を最適化するため。

### スケール (実測)

| ロール | デスクトップ | モバイル | ウェイト | 行間 |
|---|---|---|---|---|
| `h1` | 36px | 24px | bold | 1.4 |
| `h2` | 30px | 24px | bold | 1.4 |
| `h3` | 24px | 18px | bold | 1.4 |
| `h4` | 18px | 16px | bold | 1.4 |
| `body` | 16px | 16px | 400 | **2.0** |
| `label` | 14px | 14px | bold | 1.4 |
| `caption` | 12px | 12px | 400 | 1.8 |
| `small` | 10px | 10px | 400 | — |

> body の `line-height: 2` は日本語の可読性確保のため。英文サイトの標準 (1.5〜1.7) より大幅に広い。

---

## Layout

```
max-width: 1200px       ← コンテンツ全体の最大幅 (CSS で最多使用)
content-max-width: 980px ← 記事・テキスト中心コンテンツ
gutter: 20px            ← デスクトップ左右余白
gutter-mobile: 16px     ← モバイル左右余白
nav-height: 73px        ← スティッキーナビの実測高さ (旧推定 64px は誤り)
section-y: 40px         ← セクション上下 padding
section-y-lg: 60px      ← ヒーローセクション上下 padding
```

### ブレークポイント (実測)

| 名称 | 値 | 備考 |
|---|---|---|
| mobile | ≤ 759.98px | 最多使用 (936 箇所) |
| tablet | ≥ 760px | 943 箇所 |
| desktop | ≥ 980px | 557 箇所 |
| wide | ≥ 1200px | 24 箇所 |

**グリッド:**
- ソフト一覧: デスクトップ 4〜6列 / タブレット 3列 / モバイル 2列
- トピックスカード: デスクトップ 3列 / タブレット 2列 / モバイル 1列
- ピックアップ: 1〜2列（大型バナー）

---

## Motion

Nintendo のアニメーションは **150ms** の短いデュレーションと独自イージングが特徴。

```css
/* 最も使用されるイージング (475 箇所) — EaseOutQuart 相当 */
cubic-bezier(.165, .84, .44, 1)

/* カラー変化のデフォルトトランジション (106 箇所) */
transition: border-color 150ms linear,
            background-color 150ms linear,
            color 150ms linear;

/* フェードイン/アウト (116 箇所) */
transition: opacity 150ms cubic-bezier(.165, .84, .44, 1);

/* パネル開閉など (54 箇所) */
transition: all 300ms cubic-bezier(.445, .05, .55, .95);
```

---

## Components

### ナビゲーション (実測)

```css
/* .nc3-c-gheader */
height: 73px;
background-color: #ffffff;
border-bottom: 1px solid #e6e6e6;
position: sticky;
top: 0;
z-index: 9999;
padding: 0 20px;
```

- ロゴ: 左寄せ、Nintendo Red (#e60012)
- ナビリンク: 14px / bold / #3c3c3c → hover: #e60012
- サーチ・アカウントアイコン: 右端

### ボタン (実測)

**共通ベース (.nc3-a-button)**
```css
border-style: solid;
border-width: 2px;
border-radius: 2px;      /* ← pill ではなく sharp corners */
padding: 11px 24px;
font-size: 14px;
font-weight: bold;
line-height: normal;
box-sizing: border-box;
cursor: pointer;
transition: border-color 150ms linear,
            background-color 150ms linear,
            color 150ms linear;
```

**Primary（Nintendo Red）**
```css
background-color: #e60012;
color: #ffffff;
border-color: #e60012;
```

**Outline**
```css
background-color: #ffffff;
color: currentColor;      /* 親の色を継承して汎用的に使う */
border-color: currentColor;
```

**White**
```css
background-color: #ffffff;
color: #3c3c3c;
border-color: #d9d9d9;
```

**サイズバリエーション**
```css
/* small */
padding: 7px 24px;
/* large */
padding: 14px 32px;
```

> **旧 DESIGN.md との差分:** border-radius は 24px (pill) ではなく **2px**。Nintendo のボタンは角丸でなくシャープコーナー。

### 見出し (.nc3-a-heading)

```css
/* h1 — デスクトップ */
font-size: 36px; line-height: 1.4;

/* h2 — デスクトップ */
font-size: 30px; line-height: 1.4;

/* h3 — デスクトップ */
font-size: 24px; line-height: 1.4;

/* h4 — デスクトップ */
font-size: 18px; line-height: 1.8;

/* モバイル (@media max-width: 759.98px) は各 4–6px 縮小 */
```

### キャプション (.nc3-a-caption)

```css
font-size: 12px;
line-height: 1.8;
color: #8c8c8c;
```

### ページャー (.nc3-as-pager)

```css
border: solid 2px #e6e6e6;
border-radius: 2px;
```

ページャー項目: 38×38px / 14px

### バッジ

```css
/* NEW バッジ */
background-color: #e60012;
color: #ffffff;
border-radius: 2px;
padding: 2px 8px;
font-size: 10px;
font-weight: bold;

/* SALE バッジ */
background-color: #d46700;
color: #ffffff;
border-radius: 2px;
```

### セクション

```css
/* 通常セクション */
padding: 40px 0;
background-color: #ffffff;

/* ミュートセクション */
padding: 40px 0;
background-color: #f2f2f2;
```

---

## Page Structure (ホームページ)

直接観察されたセクション構成（日本語ラベルは実測値）:

```
[グローバルナビ]  ← sticky, #fff background, height: 73px, z-index: 9999
  トピックス | ピックアップ | ゲームソフト | 更新情報

[TOPICS セクション]
  記事カード × n
  「トピックス記事一覧」リンク

[PICKUP セクション]
  特集バナー（大）

[GAME SOFTWARE セクション]
  Nintendo Switch 2 ソフト一覧
  Nintendo Switch ソフト一覧
  スマートフォン向けアプリ一覧
  発売スケジュール
  セール中のソフト

[WHAT'S NEW セクション]
  更新情報一覧

[お客様へのお知らせ]
  ニュース・告知

[フッター]
  サービスアイコン（GIF形式: gfooter-service-icon-*.gif）
```

---

## Imagery

**ゲームアートワーク**
- フォーマット: WebP (メイン), PNG (fallback)
- デスクトップ/モバイル別途提供: `*-sp.webp` (スマートフォン用)
- 比率: 横長 2:1 (ソフトカード), 正方形 1:1 (アイコン用途)
- CDN: `https://assets.nintendo.com/image/upload/...`
- Topics CDN: `https://assets.topics.apps-jp.nintendo.com/image/`

**見出しテキスト**
- ページ見出しに SVG テキストを多用（日本語レンダリングを安定させる意図）
- Switch 2 ランディングページは特に SVG 見出しが主体

**アイコン**
- UIアイコン: SVG形式 (例: `icon-question.svg`)
- フッターサービスアイコン: GIF形式 (`gfooter-service-icon-store.gif` 等)
- ロゴ・バッジ: SVG形式

**写真スタイル**
- ゲーム世界観を直接表現するアートワーク主体
- ハードウェア商品写真: 白背景か自然環境
- 人物写真は最小限; 使う場合はゲームキャラクターとの合成多め

---

## Logo And Usage

**Nintendo ワードマーク**
- 公式色: `#e60012` (Nintendo Red)
- 白背景時: 赤ワードマーク
- 赤背景時: 白ワードマーク
- ナビゲーション: 赤ワードマーク on 白背景

**Nintendo Switch ロゴ**
- SVG形式で提供 (`soft-hardlink-logo_switch.svg` 等)
- 黒または白での使用が基本

**保護空間**
- ロゴ周囲にワードマーク高さ相当のクリアスペースを確保
- ロゴの色変更・変形・傾斜不可

---

## Design System (nc3)

Nintendo の CSS は内部的に **nc3** という設計システムで管理されている。

**BEM 命名規則:**
```
nc3-[layer]-[component]--[modifier]__[element]

例:
  .nc3-a-button                 ← atom: ボタン基本
  .nc3-a-button--switch         ← modifier: Switch テーマ (color: #e60012)
  .nc3-a-button--outline        ← modifier: アウトラインスタイル
  .nc3-a-button--small          ← modifier: 小サイズ
  .nc3-a-button--large          ← modifier: 大サイズ
  .nc3-c-gheader                ← component: グローバルヘッダー
  .nc3-a-heading--h1            ← atom: h1 見出し
  .nc3-a-caption                ← atom: キャプション
  .nc3-as-pager                 ← async component: ページャー
```

**ハードウェア BEM パターン (旧来ページ):**
```
.local-hero__pic_{model}
.local-hero__name_{model}
モデル名: oled, had (通常Switch), lite
```

---

## Do's and Don'ts

### Do

- ゲームアートワークを主役に据え、UI を脇役にする
- セクション背景を `#ffffff` / `#f2f2f2` で交互に切り替えてリズムを作る
- ボタンは **border-radius: 2px** のシャープコーナー + 2px border で実装する
- body テキストは `line-height: 2` で設定する（日本語の可読性確保）
- アニメーションは `150ms + cubic-bezier(.165,.84,.44,1)` を基本とする
- 日付・メタ情報は `#8c8c8c` で本文より軽く見せる
- フォントは YakuHanJPs → Hiragino Kaku Gothic ProN → nc3Jp の順で宣言する
- ナビの `z-index` は 9999 を使用する

### Don't

- Nintendo Red を装飾的な背景色として広範囲に使わない（ロゴ・ボタン・ラベルに限定）
- ボタンに `border-radius: 24px` の pill 形を使わない — nc3 の実測は 2px
- body に `line-height: 1.4` 以下を使わない — 日本語が詰まって読みにくくなる
- テキスト色に `#1a1a1a` や `#666666` を使わない — 実測値は `#3c3c3c` と `#8c8c8c`
- ゲームアートワークにフィルター・グラデーションオーバーレイをかけない
- Nintendo のロゴ・ハードウェア名称を独自に加工・変形しない
- カスタムウェブフォント (nc3Jp / YakuHanJPs) なしでシステムフォントのみに頼らない
- transition の duration を 300ms 超にしない（例外: パネル開閉の 300ms のみ許容）

{
  "$schema": "https://aistyles.dev/schema/tokens-v1.json",
  "version": "1.0",
  "brand": {
    "slug": "nintendo",
    "name": "Nintendo Japan (nintendo.com/jp)",
    "url": "https://www.nintendo.com/jp/",
    "description": "日本のコンシューマー向けポータルサイト。ゲームアートワークを主役とした白基調のクリーンなデザインに、ブランドレッドをアクセントとして用いる。内部デザインシステムは nc3 と呼ばれ、BEM 命名規則を採用。",
    "category": "tech",
    "tags": [
      "gaming",
      "japanese",
      "premium",
      "minimal",
      "consumer",
      "brand-heritage"
    ],
    "theme": "light",
    "language": "ja"
  },
  "sources": [
    "nintendo-all-css.css (実測・直接抽出)",
    "https://www.nintendo.com/jp/index.html",
    "https://www.nintendo.com/jp/topics/",
    "https://www.nintendo.com/jp/hardware/switch/index.html"
  ],
  "extractedAt": "2026-05-16",
  "notes": [
    "直接証拠: nintendo-all-css.css を grep/正規表現で全数集計。カラー・フォント・border-radius・transition・breakpoint はすべて実測値。",
    "フォントは Hiragino Sans ではなく NotoSansJP (nc3Jp) + YakuHanJPs のカスタムウェブフォントを使用。",
    "テキスト色は #1A1A1A ではなく #3c3c3c。サブテキスト色は #666666 ではなく #8c8c8c。",
    "ボタン border-radius は pill (24px) ではなく 2px の sharp corners。",
    "ナビ高さは 64px ではなく 73px(実測)。",
    "body line-height は 1.7 ではなく 2(日本語可読性のため広め)。",
    "Nintendo blue は #0AB9E6 ではなく #0096c8(My Nintendo / 情報色)。",
    "hover/active red は #ce181e。",
    "推論: layout.max-width は CSS で 1200px が最多使用。セクション padding は 40-60px 帯が多いが変数化されていないため代表値を採用。"
  ],
  "colors": {
    "groups": [
      {
        "label": "Primary",
        "tokens": [
          {
            "name": "Nintendo Red",
            "value": "#e60012",
            "token": "--color-primary",
            "role": "ロゴ・プライマリボタン・強調ラベル・アクティブ状態(CSS最頻出 231+ 回)"
          },
          {
            "name": "Primary Hover",
            "value": "#ce181e",
            "token": "--color-primary-hover",
            "role": "ホバー・押下状態の赤(29 回)"
          },
          {
            "name": "On Primary",
            "value": "#ffffff",
            "token": "--color-on-primary",
            "role": "primary 背景上のテキスト"
          }
        ]
      },
      {
        "label": "Surface",
        "tokens": [
          {
            "name": "Surface",
            "value": "#ffffff",
            "token": "--color-surface",
            "role": "ページ背景・カード・ナビゲーション(282 回)"
          },
          {
            "name": "Surface Muted",
            "value": "#f2f2f2",
            "token": "--color-surface-muted",
            "role": "奇数セクション背景・入力フィールド背景(31 回)"
          },
          {
            "name": "Surface Overlay Dark",
            "value": "rgba(0,0,0,0.92)",
            "token": "--color-surface-overlay-dark",
            "role": "モーダル背景"
          }
        ]
      },
      {
        "label": "Text",
        "tokens": [
          {
            "name": "Text Primary",
            "value": "#3c3c3c",
            "token": "--color-text-primary",
            "role": "body color の実測値。見出し・本文(49 回)"
          },
          {
            "name": "Text Secondary",
            "value": "#8c8c8c",
            "token": "--color-text-secondary",
            "role": "日付・補足テキスト・キャプション(81 回)"
          },
          {
            "name": "Text Disabled",
            "value": "#b4b4b4",
            "token": "--color-text-disabled",
            "role": "無効化された要素・placeholder(171 回)"
          }
        ]
      },
      {
        "label": "Border",
        "tokens": [
          {
            "name": "Border",
            "value": "#d9d9d9",
            "token": "--color-border",
            "role": "カード枠・入力枠(38 回)"
          },
          {
            "name": "Border Subtle",
            "value": "#e6e6e6",
            "token": "--color-border-subtle",
            "role": "ナビボーダー・薄い区切り線・ページャー枠(135 回)"
          }
        ]
      },
      {
        "label": "Brand Accent",
        "tokens": [
          {
            "name": "Nintendo Blue",
            "value": "#0096c8",
            "token": "--color-nintendo-blue",
            "role": "My Nintendo・情報バッジ・リンク色(30 回)"
          },
          {
            "name": "Sale Orange",
            "value": "#d46700",
            "token": "--color-sale-orange",
            "role": "セール価格・割引バッジ(21 回)"
          },
          {
            "name": "Highlight Yellow",
            "value": "#f8ea90",
            "token": "--color-highlight-yellow",
            "role": "ハイライト・注目エリア(13 回)"
          }
        ]
      },
      {
        "label": "Social",
        "tokens": [
          {
            "name": "Twitter / X",
            "value": "#1da1f2",
            "token": "--color-social-twitter",
            "role": "Twitter/X シェアボタン"
          },
          {
            "name": "LINE",
            "value": "#06c755",
            "token": "--color-social-line",
            "role": "LINE シェアボタン"
          }
        ]
      }
    ]
  },
  "typography": {
    "fonts": [
      {
        "family": "nc3Jp (Noto Sans JP)",
        "stack": "\"YakuHanJPs\", \"Hiragino Kaku Gothic ProN\", \"ヒラギノ角ゴ ProN W3\", \"nc3Jp\", sans-serif",
        "role": "primary",
        "notes": "Nintendo Japan のカスタムウェブフォント。nc3Jp は Noto Sans JP の別名として配信される(/jp/common/font/NotoSansJP-Regular.woff2)。"
      },
      {
        "family": "YakuHanJPs",
        "stack": "\"YakuHanJPs\"",
        "role": "japanese-punctuation",
        "notes": "日本語約物(句読点・括弧類)専用フォント。Hiragino や Noto の前に宣言することで約物だけ字形を最適化する。/jp/common/font/YakuHanJPs-Regular.woff2 で配信。"
      },
      {
        "family": "Hiragino Kaku Gothic ProN",
        "stack": "\"Hiragino Kaku Gothic ProN\", \"ヒラギノ角ゴ ProN W3\", sans-serif",
        "role": "japanese",
        "notes": "macOS / iOS のシステム日本語フォント。ウェブフォント未ロード時のフォールバック。"
      }
    ],
    "scale": [
      {
        "role": "h1",
        "size": "36px",
        "weight": 700,
        "lineHeight": 1.4,
        "notes": "デスクトップ 36px / モバイル 24px"
      },
      {
        "role": "h2",
        "size": "30px",
        "weight": 700,
        "lineHeight": 1.4,
        "notes": "デスクトップ 30px / モバイル 24px"
      },
      {
        "role": "h3",
        "size": "24px",
        "weight": 700,
        "lineHeight": 1.4,
        "notes": "デスクトップ 24px / モバイル 18px"
      },
      {
        "role": "h4",
        "size": "18px",
        "weight": 700,
        "lineHeight": 1.4,
        "notes": "デスクトップ 18px / モバイル 16px"
      },
      {
        "role": "body",
        "size": "16px",
        "weight": 400,
        "lineHeight": 2,
        "notes": "line-height: 2 は日本語の可読性確保のため。英文サイトの標準(1.5-1.7)より大幅に広い。"
      },
      {
        "role": "label",
        "size": "14px",
        "weight": 700,
        "lineHeight": 1.4,
        "notes": "ボタンラベル・ナビリンク"
      },
      {
        "role": "caption",
        "size": "12px",
        "weight": 400,
        "lineHeight": 1.8,
        "notes": "日付・メタ情報"
      },
      {
        "role": "small",
        "size": "10px",
        "weight": 400,
        "notes": "バッジ・最小テキスト"
      }
    ],
    "japanese": {
      "fontStack": "\"YakuHanJPs\", \"Hiragino Kaku Gothic ProN\", \"ヒラギノ角ゴ ProN W3\", \"nc3Jp\", sans-serif",
      "lineHeight": 2,
      "letterSpacing": "normal",
      "kinsoku": {
        "wordBreak": "keep-all",
        "lineBreak": "strict",
        "overflowWrap": "anywhere"
      },
      "openType": {
        "palt": false,
        "kern": true
      },
      "notes": "YakuHanJPs を先頭に宣言することで約物の字形を最適化。body の line-height: 2 は日本語可読性のための広めの設定。"
    }
  },
  "spacing": {
    "baseUnit": "4px",
    "tokens": [
      {
        "name": "xs",
        "value": "5px",
        "role": "最小間隔"
      },
      {
        "name": "sm",
        "value": "12px",
        "role": "小間隔"
      },
      {
        "name": "md",
        "value": "20px",
        "role": "標準間隔(デスクトップガター)"
      },
      {
        "name": "lg",
        "value": "24px",
        "role": "大間隔"
      },
      {
        "name": "xl",
        "value": "40px",
        "role": "セクション内余白"
      },
      {
        "name": "section-y",
        "value": "40px",
        "role": "セクション上下 padding(標準)"
      },
      {
        "name": "section-y-lg",
        "value": "60px",
        "role": "ヒーローセクション上下 padding"
      },
      {
        "name": "gutter-mobile",
        "value": "16px",
        "role": "モバイル時の左右余白"
      },
      {
        "name": "nav-height",
        "value": "73px",
        "role": "スティッキーナビの実測高さ"
      }
    ]
  },
  "breakpoints": {
    "mobile": {
      "value": "759.98px",
      "role": "モバイル以下(最多使用 936 箇所)"
    },
    "tablet": {
      "value": "760px",
      "role": "タブレット(943 箇所)"
    },
    "desktop": {
      "value": "980px",
      "role": "デスクトップ(557 箇所)"
    },
    "wide": {
      "value": "1200px",
      "role": "ワイドスクリーン(24 箇所)"
    },
    "max-content": {
      "value": "1200px",
      "role": "コンテンツ全体の最大幅"
    },
    "max-article": {
      "value": "980px",
      "role": "記事・テキスト中心コンテンツの最大幅"
    }
  },
  "radius": {
    "none": "0",
    "sharp": "2px",
    "small": "4px",
    "pill": "18px",
    "circle": "50%",
    "notes": "Nintendo nc3 のボタン・バッジは sharp (2px) が基本。pill 形状は採用していない。これが Nintendo らしさの一部。"
  },
  "shadows": [],
  "motion": {
    "easing": {
      "default": "cubic-bezier(.165, .84, .44, 1)",
      "fast": "cubic-bezier(.25, .46, .45, .94)",
      "in": "cubic-bezier(.455, .03, .515, .955)",
      "in-out": "cubic-bezier(.445, .05, .55, .95)"
    },
    "duration": {
      "fast": "150ms",
      "normal": "240ms",
      "slow": "300ms"
    },
    "notes": "Nintendo のアニメーションは 150ms の短いデュレーションと独自イージング(EaseOutQuart 相当 cubic-bezier(.165,.84,.44,1))が特徴。475 箇所で使用される最頻出イージング。カラー変化のデフォルトトランジションは 150ms linear。"
  },
  "components": [
    {
      "type": "button",
      "name": "Primary Button (Nintendo Red)",
      "description": "Nintendo の代表的なプライマリ CTA。Nintendo Red 背景 + sharp 2px corners が特徴。pill 形状は採用しない。",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#e60012",
            "color": "#ffffff",
            "border": "2px solid #e60012",
            "borderRadius": "2px",
            "padding": "11px 24px",
            "fontSize": "14px",
            "fontWeight": "700",
            "lineHeight": "normal",
            "transition": "border-color 150ms linear, background-color 150ms linear, color 150ms linear"
          }
        },
        {
          "label": "Hover",
          "props": {
            "background": "#ce181e",
            "color": "#ffffff",
            "border": "2px solid #ce181e",
            "borderRadius": "2px",
            "padding": "11px 24px"
          }
        }
      ]
    },
    {
      "type": "button",
      "name": "Outline Button",
      "description": "アウトライン形式のセカンダリ CTA。currentColor で親の色を継承して汎用的に使う。",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#ffffff",
            "color": "currentColor",
            "border": "2px solid currentColor",
            "borderRadius": "2px",
            "padding": "11px 24px",
            "fontSize": "14px",
            "fontWeight": "700"
          }
        }
      ]
    },
    {
      "type": "button",
      "name": "White Button",
      "description": "白背景のニュートラルボタン。",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#ffffff",
            "color": "#3c3c3c",
            "border": "2px solid #d9d9d9",
            "borderRadius": "2px",
            "padding": "11px 24px",
            "fontSize": "14px",
            "fontWeight": "700"
          }
        }
      ]
    },
    {
      "type": "button",
      "name": "Gray Button",
      "description": "グレー背景の控えめなボタン。無効化に近いトーン。",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#f2f2f2",
            "color": "#8c8c8c",
            "border": "2px solid #e6e6e6",
            "borderRadius": "2px",
            "padding": "11px 24px",
            "fontSize": "14px",
            "fontWeight": "700"
          }
        }
      ]
    },
    {
      "type": "button",
      "name": "Small Button",
      "description": "小サイズボタン。",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#e60012",
            "color": "#ffffff",
            "border": "2px solid #e60012",
            "borderRadius": "2px",
            "padding": "7px 16px",
            "fontSize": "12px",
            "fontWeight": "700"
          }
        }
      ]
    },
    {
      "type": "button",
      "name": "Large Button",
      "description": "大サイズボタン。ヒーローセクションの CTA で使用。",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#e60012",
            "color": "#ffffff",
            "border": "2px solid #e60012",
            "borderRadius": "2px",
            "padding": "14px 32px",
            "fontSize": "16px",
            "fontWeight": "700"
          }
        }
      ]
    },
    {
      "type": "navigation",
      "name": "Global Header (.nc3-c-gheader)",
      "description": "スティッキーグローバルヘッダー。白背景 + 下部に薄ボーダー。",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#ffffff",
            "color": "#3c3c3c",
            "borderBottom": "1px solid #e6e6e6",
            "height": "73px",
            "position": "sticky",
            "top": "0",
            "zIndex": "9999",
            "padding": "0 20px",
            "logoColor": "#e60012"
          }
        }
      ]
    },
    {
      "type": "tag",
      "name": "New Badge",
      "description": "NEW バッジ。Nintendo Red 背景 + 白文字 + sharp 2px corners。",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#e60012",
            "color": "#ffffff",
            "borderRadius": "2px",
            "padding": "2px 8px",
            "fontSize": "10px",
            "fontWeight": "700"
          }
        }
      ]
    },
    {
      "type": "tag",
      "name": "Sale Badge",
      "description": "SALE バッジ。Sale Orange 背景。",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#d46700",
            "color": "#ffffff",
            "borderRadius": "2px",
            "padding": "2px 8px",
            "fontSize": "10px",
            "fontWeight": "700"
          }
        }
      ]
    },
    {
      "type": "section",
      "name": "Section",
      "description": "通常セクション。白背景。",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#ffffff",
            "color": "#3c3c3c",
            "padding": "40px 0"
          }
        }
      ]
    },
    {
      "type": "section",
      "name": "Section Muted",
      "description": "ミュートセクション。薄グレー背景。奇数セクションで使用してリズムを作る。",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#f2f2f2",
            "color": "#3c3c3c",
            "padding": "40px 0"
          }
        }
      ]
    }
  ],
  "imagery": {
    "photography": {
      "style": "ゲームアートワーク主体。フォーマット WebP(メイン) / PNG(fallback)。デスクトップとモバイルで別途提供(*-sp.webp)。比率は横長 2:1(ソフトカード)、正方形 1:1(アイコン用途)。",
      "format": "WebP, PNG",
      "notes": "CDN: https://assets.nintendo.com/image/upload/... Topics CDN: https://assets.topics.apps-jp.nintendo.com/image/。ゲーム世界観を直接表現するアートワーク主体。ハードウェア商品写真は白背景か自然環境。"
    },
    "icons": {
      "font": "UI アイコンは SVG 形式。フッターサービスアイコンは GIF 形式(レガシー)。ロゴ・バッジは SVG。",
      "size": "標準アイコン 24×24px"
    }
  },
  "designSystem": {
    "name": "nc3",
    "namingConvention": "BEM: nc3-[layer]-[component]--[modifier]__[element]",
    "layers": {
      "a": "atom (基本要素)",
      "c": "component (機能単位)",
      "m": "module (複合)",
      "as": "async component"
    },
    "examples": [
      ".nc3-a-button (atom: ボタン基本)",
      ".nc3-a-button--switch (modifier: Switch テーマ color: #e60012)",
      ".nc3-a-button--outline (modifier: アウトラインスタイル)",
      ".nc3-c-gheader (component: グローバルヘッダー)",
      ".nc3-a-heading--h1 (atom: h1 見出し)",
      ".nc3-as-pager (async component: ページャー)"
    ]
  },
  "logo": {
    "restrictions": [
      "Nintendo ワードマーク公式色: #e60012(Nintendo Red)",
      "白背景時: 赤ワードマーク / 赤背景時: 白ワードマーク",
      "ナビゲーション: 赤ワードマーク on 白背景",
      "Nintendo Switch ロゴは SVG 形式で提供。黒または白での使用が基本",
      "ロゴ周囲にワードマーク高さ相当のクリアスペースを確保",
      "ロゴの色変更・変形・傾斜不可",
      "Nintendo、Nintendo Switch、ゲームタイトル、キャラクター名はすべて商標保護対象"
    ],
    "navRepresentation": "ヘッダーは Nintendo ワードマーク。Nintendo Red #e60012 で白背景に配置。"
  },
  "guidelines": {
    "do": [
      "ゲームアートワークを主役に据え、UI を脇役にする",
      "セクション背景を #ffffff / #f2f2f2 で交互に切り替えてリズムを作る",
      "ボタンは border-radius: 2px のシャープコーナー + 2px border で実装する",
      "body テキストは line-height: 2 で設定する(日本語の可読性確保)",
      "アニメーションは 150ms + cubic-bezier(.165,.84,.44,1) を基本とする",
      "日付・メタ情報は #8c8c8c で本文より軽く見せる",
      "フォントは YakuHanJPs → Hiragino Kaku Gothic ProN → nc3Jp の順で宣言する",
      "ナビの z-index は 9999 を使用する"
    ],
    "dont": [
      "Nintendo Red を装飾的な背景色として広範囲に使わない(ロゴ・ボタン・ラベルに限定)",
      "ボタンに border-radius: 24px の pill 形を使わない(nc3 の実測は 2px)",
      "body に line-height: 1.4 以下を使わない(日本語が詰まって読みにくくなる)",
      "テキスト色に #1a1a1a や #666666 を使わない(実測値は #3c3c3c と #8c8c8c)",
      "ゲームアートワークにフィルター・グラデーションオーバーレイをかけない",
      "Nintendo のロゴ・ハードウェア名称を独自に加工・変形しない",
      "カスタムウェブフォント(nc3Jp / YakuHanJPs)なしでシステムフォントのみに頼らない",
      "transition の duration を 300ms 超にしない(例外: パネル開閉の 300ms のみ許容)"
    ]
  }
}