---
version: alpha
name: 花王 (Kao)
description: 花王株式会社のコーポレートデザインシステム — 緑/ティールを基調とした清潔感と信頼性を体現するコーポレートアイデンティティ。
sources:
  - https://www.kao.com/jp/
  - https://www.kao.com/jp/corporate/purpose/logo-symbol/logo_mark/
  - https://www.kao.com/etc/clientlibs/kao/component.css
  - https://www.kao.com/content/dam/sites/kao/www-kao-com/jp/ja/index/css/style.css
  - https://www.kao.com/content/dam/sites/kao/www-kao-com/jp/ja/corporate/common/css/corpCommon.css
notes:
  - ロゴカラー (#00ac8f) はロゴPNGのピクセル解析により直接取得。
  - CSS配色はAdobeExperience Managerで管理。デザイントークン変数名は非公開。
  - フォントはライセンス制UD角ゴシック体 (FP-Hiragino)。Webフォントとして埋め込み済み。
  - 英語テキスト向けにNeue Helvetica Paneuropeanを使用。
  - '#007c7a' と '#005856' はCSSの最頻出ブランドカラー (直接計測)。
colors:
  logo: "#00ac8f"
  primary: "#007c7a"
  primary-dark: "#005856"
  primary-medium: "#006b69"
  primary-green: "#00806d"
  primary-hover: "#009270"
  primary-bright: "#00b48c"
  primary-tint-strong: "#b0ded6"
  primary-tint-medium: "#c4e6e0"
  primary-tint-soft: "#ebf7f5"
  primary-overlay: "rgba(0,124,122,0.1)"
  surface: "#ffffff"
  surface-subtle: "#f6f6f4"
  surface-muted: "#f5f5f5"
  footer-bg: "#eeeeee"
  news-band: "#d7d7d7"
  text-primary: "#4e4d4e"
  text-secondary: "#333333"
  text-muted: "#65605a"
  text-disabled: "#8e8e8e"
  text-on-primary: "#ffffff"
  border: "#d7d7cf"
  border-strong: "#cccccc"
  border-light: "#eeeeee"
  accent-pastel: "rgba(223,241,191,0.4)"
typography:
  body:
    fontFamily: '"FP-ヒラギノUD角ゴ StdN W3", "FP-HiraginoUDSansStdN-W3", sans-serif'
    fontSize: "16px"
    lineHeight: "1.5"
    letterSpacing: "0.02em"
    color: "#4e4d4e"
  body-medium:
    fontFamily: '"FP-ヒラギノUD角ゴ StdN W4", FP-HiraginoUDSansStdN-W4, sans-serif'
  body-bold:
    fontFamily: '"FP-ヒラギノUD角ゴ StdN W6", FP-HiraginoUDSansStdN-W6, sans-serif'
  display-en:
    fontFamily: '"Neue-Helvetica-Paneuropean-Bold", sans-serif'
    note: "英語見出し・数字表示向け"
  body-en:
    fontFamily: '"Neue-Helvetica-Paneuropean-Light", sans-serif'
    note: "英語本文向け"
  caption:
    fontSize: "12px"
    lineHeight: "1.4"
    letterSpacing: "normal"
  label:
    fontSize: "14px"
    letterSpacing: "0.02em"
  body-large:
    fontSize: "18px"
  h5:
    fontSize: "20px"
    lineHeight: "1.5"
  h4:
    fontSize: "24px"
    lineHeight: "1.5"
  h3:
    fontSize: "30px"
    lineHeight: "1.4"
  h2:
    fontSize: "36px"
    lineHeight: "1.3"
  h1:
    fontSize: "42px"
    lineHeight: "1.25"
  display:
    fontSize: "52px"
    lineHeight: "1.25"
    note: "デスクトップヒーロー見出し。タブレット42px、モバイル32px"
rounded:
  small: "4px"
  medium: "10px"
  circle: "50%"
  note: "丸角10pxがカード・パネルの標準。4pxはラベル・タグ。50%はアイコンボタン。"
spacing:
  base: "8px"
  xs: "4px"
  sm: "8px"
  md: "16px"
  lg: "24px"
  xl: "32px"
  2xl: "40px"
  3xl: "48px"
  section-gap: "80px"
  section-padding-desktop: "0 77px"
  section-padding-tablet: "0 40px"
  section-padding-mobile: "0 20px"
shadow:
  card: "0 3px 8px rgba(0,0,0,0.2)"
transition:
  default: "0.3s ease"
  properties: "color, background-color"
components:
  button-primary:
    backgroundColor: "{colors.primary-dark}"
    color: "{colors.text-on-primary}"
    borderRadius: "{rounded.medium}"
    minHeight: "48px"
    fontSize: "16-20px"
    border: "2px solid {colors.primary-dark}"
    hover:
      backgroundColor: "{colors.primary-green}"
      transition: "0.3s ease"
  button-icon:
    width: "48px"
    height: "48px"
    borderRadius: "{rounded.circle}"
    border: "2px solid #ffffff"
    backgroundColor: "transparent"
    color: "#ffffff"
    hover:
      color: "{colors.primary-dark}"
      backgroundColor: "#ffffff"
  link:
    color: "{colors.primary-dark}"
    textDecoration: "none"
    hover:
      textDecoration: "underline"
      animatedUnderline: "linear-gradient(90deg, #005856, #005856) bottom/100% 1px"
  card:
    backgroundColor: "{colors.surface}"
    borderRadius: "{rounded.medium}"
    overflow: "hidden"
    shadow: "{shadow.card}"
    padding: "16px"
  heading-h2:
    borderBottom: "4px solid {colors.primary-tint-strong}"
    paddingBottom: "10px"
  topics-section:
    backgroundColor: "{colors.primary}"
    color: "{colors.text-on-primary}"
  news-band:
    backgroundColor: "{colors.news-band}"
    fontSize: "16px"
    padding: "16-28px 20-77px"
  label-tag:
    display: "inline-block"
    padding: "2px 8px"
    fontSize: "14px"
    backgroundColor: "{colors.surface}"
  navigation-global:
    backgroundColor: "{colors.surface}"
    color: "{colors.text-secondary}"
    fontSize: "12px"
    logoWidth: "70px"
    maxWidth: "1336px"
    linkHover: "{colors.primary-hover}"
  footer-global:
    backgroundColor: "{colors.footer-bg}"
    color: "{colors.text-secondary}"
    borderTop: "1px solid {colors.border-strong}"
    fontSize: "12px"
    chemicalDivision:
      backgroundColor: "{colors.primary-green}"
---

## Overview

花王株式会社（Kao Corporation）のコーポレートサイトは、緑/ティール系のブランドカラーを軸にしたクリーンなコーポレートデザインを採用しています。ブランドフィロソフィー「きれいを こころに 未来に」を視覚的に体現し、清潔感・信頼性・サステナビリティを伝えるデザインシステムです。

Adobe Experience Manager (AEM) をCMSとして使用しており、コンポーネントは`l-`（レイアウト）と`g-`（グローバル）プレフィックスで管理されます。

---

## Colors（カラー）

### ブランドカラー（直接証拠）

| 役割 | 値 | 使用場所 |
|------|-----|---------|
| **ロゴ** | `#00ac8f` | ロゴPNGから直接抽出。グローバルヘッダーロゴも同色 |
| **プライマリ（背景）** | `#007c7a` | トピックスセクション背景、主要コンテンツブロック |
| **プライマリ（暗・UI）** | `#005856` | リンク、ボタン、ホバー状態、見出し下線 (CSSで最頻出・40回) |
| **プライマリ（中）** | `#006b69` | ボーダー、アウトライン |
| **セカンダリグリーン** | `#00806d` | ケミカル事業部フッター背景、一部のアクセント |
| **ホバーグリーン** | `#009270` | ナビゲーションリンクホバー |
| **ブライトグリーン** | `#00b48c` | ヘッダーリンクホバー |

### サーフェスとティント

| 役割 | 値 | 使用場所 |
|------|-----|---------|
| **ティント（ボーダー）** | `#b0ded6` | h2見出し下線ボーダー（4px solid） |
| **ティント（ライト）** | `#c4e6e0` | 微細な背景アクセント |
| **ティント（ソフト）** | `#ebf7f5` | コンタクトエリア・強調エリア背景 |
| **プライマリオーバーレイ** | `rgba(0,124,122,0.1)` | カード・セクションの微細オーバーレイ |
| **ペール緑** | `rgba(223,241,191,0.4)` | 一部セクションの薄緑背景アクセント |

### ニュートラル

| 役割 | 値 | 使用場所 |
|------|-----|---------|
| **本文テキスト** | `#4e4d4e` | 全ページのメイン本文 |
| **二次テキスト** | `#333333` | ナビ・フッターテキスト |
| **補助テキスト** | `#65605a` | アイコン、補足テキスト、電話番号アイコン |
| **無効/ミュート** | `#8e8e8e` | 無効状態 |
| **ボーダー** | `#d7d7cf` | セクション区切り、カードボーダー |
| **ボーダー強** | `#cccccc` | フッターボーダー、ナビ区切り |
| **ニュースバンド** | `#d7d7d7` | ヒーロー下部のニュースバナー背景 |
| **フッター背景** | `#eeeeee` | グローバルフッター |
| **サーフェス微細** | `#f6f6f4` | ページ背景の微細差分 |
| **白** | `#ffffff` | メイン背景、カード面 |
| **白テキスト** | `#ffffff` | プライマリカラー背景上のテキスト |

---

## Typography（タイポグラフィ）

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

花王サイトは **FP-ヒラギノUD角ゴシック** をカスタムWebフォントとして全ページに使用する。これはUniversal Design対応のヒラギノフォントの有償ライセンス版。

```
日本語 Regular:  "FP-ヒラギノUD角ゴ StdN W3", "FP-HiraginoUDSansStdN-W3", sans-serif
日本語 Medium:   "FP-ヒラギノUD角ゴ StdN W4", FP-HiraginoUDSansStdN-W4, sans-serif
日本語 Bold:     "FP-ヒラギノUD角ゴ StdN W6", FP-HiraginoUDSansStdN-W6, sans-serif

英語 Light/Body: "Neue-Helvetica-Paneuropean-Light", sans-serif
英語 Bold/表示:  "Neue-Helvetica-Paneuropean-Bold", sans-serif

多言語フォールバック:
  zh/繁体字: "Hiragino-Sans-TC-W3", sans-serif
  zh-CN/簡体字: "FP-Hiragino-Sans-GB-W3", sans-serif
  th/thai: "Helvetica-Thai-Light", "SJThai-M", sans-serif
  ru: "Neue-HelveticaR-World-45-Light", sans-serif

アイコンフォント: 'kao_global_icon' (カスタム)
```

### タイプスケール

| レベル | サイズ | 用途 |
|--------|--------|------|
| caption | 12px | フッター、注釈、バッジ |
| label | 14px | ラベルタグ、スモールUI |
| body | 16px | 本文ベースライン |
| body-large | 18px | 強調本文 |
| h5 / button | 20px | ボタン、強調テキスト |
| h4 | 24px | セクション小見出し |
| h3 | 30px | セクション見出し |
| h2 | 36px | ページセクション見出し |
| h1 | 42px | ページタイトル |
| display | 52px (LG) / 42px (MD) / 32px (SM) | ヒーロー大見出し |

### ルールと行間

- **Line-height:** 見出し `1.25`、ナビ・フッター `1.4`、本文 `1.5`
- **Letter-spacing:** 本文 `0.02em`、ナビ `normal`
- **Font-smoothing:** `-webkit-font-smoothing: antialiased` 全体適用

---

## Layout（レイアウト）

### ブレークポイント

| 名称 | 条件 |
|------|------|
| `sm` (モバイル) | `max-width: 640px` |
| `md` (タブレット) | `641px ～ 1024px` |
| `lg` (デスクトップ) | `min-width: 1025px` |

### コンテンツ幅

- **最大コンテンツ幅:** `1440px`（メインコンテンツ）
- **ヘッダー最大幅:** `1336px`（`.g-GlHeader__inner`）
- **セクション横パディング:** デスクトップ `77px`、タブレット `40px`、モバイル `20-24px`

### ヒーローセクション

- **高さ:** デスクトップ `780px`、タブレット `576px`
- **テキストシャドウ:** `0 0 6px rgba(0,0,0,0.55)` でヒーロー画像上のテキストを保護
- **見出し位置:** デスクトップ `top: 34vh`、タブレット/モバイル `bottom: 20%`

### グリッドとカード

- **カードギャップ:** デスクトップ `32px`、モバイル `24px`
- **タイルグリッド:** CSS Flexbox + `flex-wrap: wrap` + ギャップ
- **カードパディング:** デスクトップ `16px`、モバイル `0`

---

## Components（コンポーネント）

### ヘッダー (`.g-GlHeader`)

- 背景: 白
- テキスト/リンク: `#333333`
- リンクホバー: `#009270`（ユーティリティ）/ `#00b48c`（会社リンク）
- ロゴ幅: `70px`（`.g-GlHeaderLogo`）
- インナー最大幅: `1336px`、`padding: 12px 0`

### グローバルフッター (`.g-GlFooter`)

- 背景: `#eeeeee`
- ボーダートップ: `1px solid #cccccc`
- テキスト: `#333333`
- フォントサイズ: `12px`
- ケミカル事業部バリアント: 背景 `#00806D`（緑）

### トピックスセクション (`.corpCommon__topics`)

- 背景: `#007c7a`（プライマリティール）
- 見出しテキスト: `#ffffff`
- 見出しサイズ: `24px`（SM+）/ `20px`（モバイル）

### プライマリボタン

- 背景: `#005856`
- テキスト: `#ffffff`
- ボーダー: `2px solid #fff`（白背景上では`#005856`）
- 最小高さ: `48px`
- ホバー: 背景色明転 `0.3s ease`

### アイコンボタン（円形）

- サイズ: `48px × 48px`
- ボーダー: `2px solid #ffffff`
- ボーダーラジウス: `50%`
- 背景: `transparent`
- アイコン: `\e006`（→矢印、icomoonフォント）
- ホバー: テキスト色 `#005856`、背景 `#ffffff`

### リンクテキスト

- カラー: `#005856`
- 通常状態: 下線なし
- ホバー: アニメーション下線 `linear-gradient(90deg, #005856, #005856)` が `background-size: 0 → 100%` でスライドイン（`0.3s ease`）

### 見出し（h2下線スタイル）

```css
border-bottom: 4px solid #b0ded6;
padding-bottom: 10px;
```

### ニュースバンド (`.corpCommon__mainVisual__newsBlock`)

- 背景: `#d7d7d7`
- パディング: デスクトップ `28px 77px`、タブレット `20px 40px`、モバイル `16px 20px`
- 日付フォント: `16px`、ラベルタグ: `14px` (白背景 `padding: 2px 8px`)

### カード

- 背景: `#ffffff`
- ボーダーラジウス: `10px`
- シャドウ: `0 3px 8px rgba(0,0,0,0.2)`
- トランジション: `0.3s ease`

### アコーディオン

- アクティブ色: `#005856`
- ボーダー: `#d7d7cf`

### ラベル/タグ

- ボーダーラジウス: `4px`
- パディング: `2px 8px`
- フォントサイズ: `14px`

---

## Imagery（画像）

### 配信インフラ

- **CDN:** `https://kao-h.assetsadobe3.com/` (Adobe Dynamic Media)
- **フォーマット変換:** `?fmt=webp` または `?fmt=webp-alpha` クエリパラメータ
- **レスポンシブ幅指定:** `?wid=320` など
- **アセットパス:** `/content/dam/sites/kao/www-kao-com/jp/ja/`

### 写真スタイル

- **ヒーロー画像:** 全画面幅の大判ランドスケープ写真。人・製品・自然を被写体にした高彩度の実写
- `object-fit: cover` で均一トリミング
- ヒーロー上のテキストには `text-shadow: 0 0 6px rgba(0,0,0,0.55)` で可読性を確保

### カード・サムネイル

- アスペクト比固定クロップ
- 角丸 `10px`（`.opt-border-radius-10`）
- ホバー時にティールオーバーレイ `rgba(0, 124, 122, 0.2)` がアニメーション展開

### アイコン

- カスタムアイコンフォント: `'kao_global_icon'`（`.kao-icon`）
- コード例: `\e901` (globe), `\e015` (search), `\e013` (menu)
- 標準サイズ: `1.2em`
- カラー: `#999999`（通常）/ `#cccccc`（反転/白背景用）

---

## Logo And Usage（ロゴ使用規則）

### 現行ロゴ（2021年〜）

- **表記:** 英字 "Kao"（花王月マークとの組み合わせ、またはWordmarkのみ）
- **コーポレートカラー:** `#00ac8f`（ロゴファイルから直接抽出）
- **最小幅:** ヘッダー実装では `70px`（`.g-GlHeaderLogo`）
- **余白:** ロゴ周囲に十分な余白を確保（AEMロゴコンポーネントが自動管理）

### 事業部別バリアント

| 事業 | 識別色 |
|------|--------|
| コンシューマー製品（日本・アジア） | `#007c7a` / `#005856` |
| ケミカル事業 | `#00806d` |
| グローバル共通 | `#00ac8f` |

### 禁止事項（推定）

- ロゴカラーの変更禁止（特に白背景以外への配置は公式承認が必要）
- トレードマーク記号を省略しない
- ロゴの変形・回転・エフェクト付与不可

---

## Do's and Don'ts

### Do（推奨）

- `#005856` をリンクと主要CTAの第一色として使う
- `#007c7a` はセクション背景など「塗り」の場面で使い、文字色には使わない
- 見出しには FP-ヒラギノUD W6（Bold）、本文には W3（Regular）を使う
- カードには `border-radius: 10px` と `box-shadow: 0 3px 8px rgba(0,0,0,0.2)` を組み合わせる
- テキストリンクはホバー時にスライドイン下線アニメーションで応答させる
- 48px 以上のタッチターゲットを確保する（ボタン最小高さ）
- ブレークポイントは `640/1024/1025px` の3段階を使う

### Don't（禁止）

- `#00ac8f`（ロゴカラー）を UI要素のテキストや背景に使わない — ロゴ専用
- `#007c7a` の背景上に同系色テキストを配置しない（コントラスト不足）
- `Neue-Helvetica` を日本語テキストに適用しない — 英語・ラテン文字専用
- フッターのグレー（`#eeeeee`）を本文エリアに流用しない — フッター専用
- シャドウを多重適用しない — 1カード1シャドウが原則
- `#00b48c` や `#009270` をボタンの通常状態に使わない — ホバー専用

{
  "$schema": "https://aistyles.dev/schema/tokens-v1.json",
  "version": "1.0",
  "brand": {
    "slug": "kao",
    "name": "花王 (Kao Corporation)",
    "url": "https://www.kao.com/jp/",
    "description": "花王株式会社のコーポレートサイト。ブランドフィロソフィー『きれいを こころに 未来に』を視覚的に体現し、緑/ティール系のブランドカラーを軸にしたクリーンなコーポレートデザイン。Adobe Experience Manager (AEM) を CMS として使用し、UD 対応の有償ヒラギノフォント (FP-ヒラギノUD角ゴ) を全ページに採用。ロゴカラー (#00ac8f) と UI 主役色 (#005856) を厳密に分離する役割設計が特徴。",
    "category": "tech",
    "tags": [
      "corporate",
      "japanese",
      "consumer-goods",
      "teal",
      "green",
      "ud-font",
      "aem",
      "sustainability"
    ],
    "theme": "light",
    "language": "ja"
  },
  "sources": [
    "https://www.kao.com/jp/",
    "https://www.kao.com/jp/corporate/purpose/logo-symbol/logo_mark/",
    "https://www.kao.com/etc/clientlibs/kao/component.css",
    "https://www.kao.com/content/dam/sites/kao/www-kao-com/jp/ja/index/css/style.css",
    "https://www.kao.com/content/dam/sites/kao/www-kao-com/jp/ja/corporate/common/css/corpCommon.css"
  ],
  "extractedAt": "2026-05-17",
  "notes": [
    "直接証拠: ロゴカラー (#00ac8f) はロゴ PNG のピクセル解析により直接取得。",
    "直接証拠: CSS 配色は Adobe Experience Manager で管理。component.css・style.css・corpCommon.css から実測。",
    "直接証拠: #007c7a と #005856 は CSS の最頻出ブランドカラー (40 回以上出現)。",
    "直接証拠: フォントはライセンス制 UD 角ゴシック体 (FP-Hiragino) を Web フォントとして埋め込み済み。",
    "直接証拠: 英語テキスト向けに Neue Helvetica Paneuropean を使用。",
    "推論: AEM デザイントークン変数名は非公開、命名は CSS クラス (l-*, g-*) から推定。",
    "重要: #00ac8f はロゴ専用カラー — UI 要素のテキスト・背景には絶対に使わない。これが Kao の核心ルール。",
    "重要: 事業部別カラーバリアントあり (コンシューマー #007c7a/#005856、ケミカル #00806d、グローバル共通 #00ac8f)。"
  ],
  "colors": {
    "groups": [
      {
        "label": "Brand Teal (Primary)",
        "tokens": [
          {
            "name": "Logo Color (Logo Only)",
            "value": "#00ac8f",
            "token": "--color-logo",
            "role": "ロゴ専用カラー。グローバルヘッダーロゴも同色。UI 要素のテキスト・背景には使わない"
          },
          {
            "name": "Primary (Section BG)",
            "value": "#007c7a",
            "token": "--color-primary",
            "role": "トピックスセクション背景・主要コンテンツブロックの『塗り』用。文字色には使わない"
          },
          {
            "name": "Primary Dark (UI)",
            "value": "#005856",
            "token": "--color-primary-dark",
            "role": "リンク・ボタン・ホバー状態・見出し下線。UI 主役色 (CSS 最頻出 40 回)"
          },
          {
            "name": "Primary Medium",
            "value": "#006b69",
            "token": "--color-primary-medium",
            "role": "ボーダー・アウトライン"
          },
          {
            "name": "Primary Green (Chemical Div)",
            "value": "#00806d",
            "token": "--color-primary-green",
            "role": "ケミカル事業部フッター背景・一部のアクセント"
          },
          {
            "name": "Primary Hover",
            "value": "#009270",
            "token": "--color-primary-hover",
            "role": "ナビゲーションリンクホバー専用"
          },
          {
            "name": "Primary Bright",
            "value": "#00b48c",
            "token": "--color-primary-bright",
            "role": "ヘッダーリンクホバー専用"
          }
        ]
      },
      {
        "label": "Tints & Overlays",
        "tokens": [
          {
            "name": "Tint Strong",
            "value": "#b0ded6",
            "token": "--color-primary-tint-strong",
            "role": "h2 見出し下線ボーダー (4px solid)"
          },
          {
            "name": "Tint Medium",
            "value": "#c4e6e0",
            "token": "--color-primary-tint-medium",
            "role": "微細な背景アクセント"
          },
          {
            "name": "Tint Soft",
            "value": "#ebf7f5",
            "token": "--color-primary-tint-soft",
            "role": "コンタクトエリア・強調エリア背景"
          },
          {
            "name": "Primary Overlay",
            "value": "rgba(0,124,122,0.1)",
            "token": "--color-primary-overlay",
            "role": "カード・セクションの微細オーバーレイ"
          },
          {
            "name": "Accent Pastel",
            "value": "rgba(223,241,191,0.4)",
            "token": "--color-accent-pastel",
            "role": "一部セクションの薄緑背景アクセント"
          }
        ]
      },
      {
        "label": "Text",
        "tokens": [
          {
            "name": "Text Primary",
            "value": "#4e4d4e",
            "token": "--color-text-primary",
            "role": "全ページのメイン本文 (純黒ではなくダークグレー)"
          },
          {
            "name": "Text Secondary",
            "value": "#333333",
            "token": "--color-text-secondary",
            "role": "ナビ・フッターテキスト"
          },
          {
            "name": "Text Muted",
            "value": "#65605a",
            "token": "--color-text-muted",
            "role": "アイコン・補足テキスト・電話番号アイコン"
          },
          {
            "name": "Text Disabled",
            "value": "#8e8e8e",
            "token": "--color-text-disabled",
            "role": "無効状態"
          },
          {
            "name": "Text on Primary",
            "value": "#ffffff",
            "token": "--color-text-on-primary",
            "role": "プライマリカラー背景上のテキスト"
          }
        ]
      },
      {
        "label": "Surface & Background",
        "tokens": [
          {
            "name": "Surface",
            "value": "#ffffff",
            "token": "--color-surface",
            "role": "メイン背景・カード面"
          },
          {
            "name": "Surface Subtle",
            "value": "#f6f6f4",
            "token": "--color-surface-subtle",
            "role": "ページ背景の微細差分"
          },
          {
            "name": "Surface Muted",
            "value": "#f5f5f5",
            "token": "--color-surface-muted",
            "role": "セクション区切り背景"
          },
          {
            "name": "Footer BG",
            "value": "#eeeeee",
            "token": "--color-footer-bg",
            "role": "グローバルフッター専用 (本文エリアには流用しない)"
          },
          {
            "name": "News Band",
            "value": "#d7d7d7",
            "token": "--color-news-band",
            "role": "ヒーロー下部のニュースバナー背景"
          }
        ]
      },
      {
        "label": "Border",
        "tokens": [
          {
            "name": "Border",
            "value": "#d7d7cf",
            "token": "--color-border",
            "role": "セクション区切り・カードボーダー"
          },
          {
            "name": "Border Strong",
            "value": "#cccccc",
            "token": "--color-border-strong",
            "role": "フッターボーダー・ナビ区切り"
          },
          {
            "name": "Border Light",
            "value": "#eeeeee",
            "token": "--color-border-light",
            "role": "繊細な区切り"
          }
        ]
      }
    ]
  },
  "typography": {
    "fonts": [
      {
        "family": "FP-Hiragino UD (Regular)",
        "stack": "'FP-ヒラギノUD角ゴ StdN W3', 'FP-HiraginoUDSansStdN-W3', sans-serif",
        "weights": [
          300
        ],
        "role": "日本語本文。Universal Design 対応の有償ヒラギノフォント (W3 = Regular)"
      },
      {
        "family": "FP-Hiragino UD (Medium)",
        "stack": "'FP-ヒラギノUD角ゴ StdN W4', 'FP-HiraginoUDSansStdN-W4', sans-serif",
        "weights": [
          400
        ],
        "role": "日本語中ウェイト (W4 = Medium)"
      },
      {
        "family": "FP-Hiragino UD (Bold)",
        "stack": "'FP-ヒラギノUD角ゴ StdN W6', 'FP-HiraginoUDSansStdN-W6', sans-serif",
        "weights": [
          600
        ],
        "role": "日本語見出し・強調 (W6 = Bold)"
      },
      {
        "family": "Neue Helvetica Paneuropean (Light)",
        "stack": "'Neue-Helvetica-Paneuropean-Light', sans-serif",
        "weights": [
          300
        ],
        "role": "英語本文専用 (日本語には適用しない)"
      },
      {
        "family": "Neue Helvetica Paneuropean (Bold)",
        "stack": "'Neue-Helvetica-Paneuropean-Bold', sans-serif",
        "weights": [
          700
        ],
        "role": "英語見出し・数字表示専用"
      },
      {
        "family": "Kao Icon Font",
        "stack": "'kao_global_icon'",
        "weights": [
          400
        ],
        "role": "カスタムアイコンフォント。globe (\\e901)・search (\\e015)・menu (\\e013) 等"
      }
    ],
    "scale": [
      {
        "role": "display",
        "size": "52px",
        "weight": 700,
        "lineHeight": 1.25,
        "letterSpacing": "0.02em",
        "note": "デスクトップヒーロー大見出し。タブレット 42px、モバイル 32px"
      },
      {
        "role": "h1",
        "size": "42px",
        "weight": 600,
        "lineHeight": 1.25,
        "letterSpacing": "0.02em",
        "note": "ページタイトル"
      },
      {
        "role": "h2",
        "size": "36px",
        "weight": 600,
        "lineHeight": 1.3,
        "letterSpacing": "0.02em",
        "note": "ページセクション見出し。border-bottom: 4px solid #b0ded6 を付与"
      },
      {
        "role": "h3",
        "size": "30px",
        "weight": 600,
        "lineHeight": 1.4,
        "letterSpacing": "0.02em",
        "note": "セクション見出し"
      },
      {
        "role": "h4",
        "size": "24px",
        "weight": 600,
        "lineHeight": 1.5,
        "letterSpacing": "0.02em",
        "note": "セクション小見出し"
      },
      {
        "role": "h5 / button",
        "size": "20px",
        "weight": 600,
        "lineHeight": 1.5,
        "letterSpacing": "0.02em",
        "note": "ボタン・強調テキスト"
      },
      {
        "role": "body-large",
        "size": "18px",
        "weight": 300,
        "lineHeight": 1.5,
        "letterSpacing": "0.02em",
        "note": "強調本文"
      },
      {
        "role": "body",
        "size": "16px",
        "weight": 300,
        "lineHeight": 1.5,
        "letterSpacing": "0.02em",
        "note": "本文ベースライン (FP-Hiragino W3)"
      },
      {
        "role": "label",
        "size": "14px",
        "weight": 300,
        "lineHeight": 1.4,
        "letterSpacing": "0.02em",
        "note": "ラベルタグ・スモール UI"
      },
      {
        "role": "caption",
        "size": "12px",
        "weight": 300,
        "lineHeight": 1.4,
        "letterSpacing": "normal",
        "note": "フッター・注釈・バッジ"
      }
    ],
    "japanese": {
      "fontStack": "'FP-ヒラギノUD角ゴ StdN W3', 'FP-HiraginoUDSansStdN-W3', sans-serif",
      "lineHeight": 1.5,
      "letterSpacing": "0.02em",
      "openType": {
        "palt": false,
        "kern": true
      },
      "kinsoku": {
        "wordBreak": "keep-all",
        "lineBreak": "strict"
      },
      "notes": [
        "FP-ヒラギノUD は Universal Design 対応の有償ライセンスフォント、Web フォントとして埋め込み済み",
        "W3 (Regular) / W4 (Medium) / W6 (Bold) の 3 段階運用",
        "letter-spacing: 0.02em が本文の標準値",
        "本文 line-height: 1.5、見出し 1.25-1.4 で使い分け",
        "Neue Helvetica Paneuropean は英語専用、日本語には適用しない",
        "-webkit-font-smoothing: antialiased を全体に適用"
      ]
    }
  },
  "spacing": {
    "baseUnit": "8px",
    "tokens": [
      {
        "name": "xs",
        "value": "4px",
        "role": "最小余白"
      },
      {
        "name": "sm",
        "value": "8px",
        "role": "ベースユニット"
      },
      {
        "name": "md",
        "value": "16px",
        "role": "カード内パディング"
      },
      {
        "name": "lg",
        "value": "24px",
        "role": "コンポーネント間"
      },
      {
        "name": "xl",
        "value": "32px",
        "role": "セクション内グループ間 (デスクトップカードギャップ)"
      },
      {
        "name": "2xl",
        "value": "40px",
        "role": "タブレットセクション横パディング"
      },
      {
        "name": "3xl",
        "value": "48px",
        "role": "大型セクション間隔・ボタン最小高さ"
      },
      {
        "name": "section-gap",
        "value": "80px",
        "role": "メジャーセクション間隔"
      },
      {
        "name": "section-padding-desktop",
        "value": "0 77px",
        "role": "デスクトップセクション横パディング"
      },
      {
        "name": "section-padding-tablet",
        "value": "0 40px",
        "role": "タブレットセクション横パディング"
      },
      {
        "name": "section-padding-mobile",
        "value": "0 20px",
        "role": "モバイルセクション横パディング"
      },
      {
        "name": "container-max",
        "value": "1440px",
        "role": "最大コンテンツ幅"
      },
      {
        "name": "header-max",
        "value": "1336px",
        "role": "ヘッダー最大幅"
      }
    ]
  },
  "breakpoints": {
    "mobile": {
      "value": "≤ 640px",
      "role": "モバイル (sm)"
    },
    "tablet": {
      "value": "641-1024px",
      "role": "タブレット (md)"
    },
    "desktop": {
      "value": "≥ 1025px",
      "role": "デスクトップ (lg)"
    }
  },
  "radius": {
    "small": "4px",
    "medium": "10px",
    "circle": "50%",
    "default": "10px"
  },
  "shadows": [
    {
      "name": "card",
      "value": "0 3px 8px rgba(0,0,0,0.2)",
      "role": "カードの軽い浮遊感 (1 カード 1 シャドウが原則)"
    }
  ],
  "components": [
    {
      "type": "button",
      "name": "Primary Button",
      "description": "ダークティール背景の主要 CTA。ホバーで明るいグリーンに切替",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#005856",
            "color": "#ffffff",
            "border": "2px solid #005856",
            "borderRadius": "10px",
            "minHeight": "48px",
            "padding": "12px 24px",
            "fontSize": "16px",
            "fontWeight": "600",
            "letterSpacing": "0.02em",
            "transition": "0.3s ease"
          }
        },
        {
          "label": "Hover",
          "props": {
            "background": "#00806d",
            "color": "#ffffff",
            "border": "2px solid #005856",
            "borderRadius": "10px",
            "minHeight": "48px",
            "padding": "12px 24px",
            "fontSize": "16px",
            "fontWeight": "600",
            "transition": "0.3s ease"
          }
        }
      ]
    },
    {
      "type": "button",
      "name": "Icon Button (Circle)",
      "description": "ヒーロー上の円形アイコンボタン (48×48px)。白枠・透明背景",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "transparent",
            "color": "#ffffff",
            "border": "2px solid #ffffff",
            "borderRadius": "50%",
            "width": "48px",
            "height": "48px",
            "transition": "0.3s ease"
          }
        },
        {
          "label": "Hover",
          "props": {
            "background": "#ffffff",
            "color": "#005856",
            "border": "2px solid #ffffff",
            "borderRadius": "50%",
            "width": "48px",
            "height": "48px",
            "transition": "0.3s ease"
          }
        }
      ]
    },
    {
      "type": "link",
      "name": "Text Link",
      "description": "ダークティール色のテキストリンク。ホバーで下線がスライドインアニメーション",
      "variants": [
        {
          "label": "Default",
          "props": {
            "color": "#005856",
            "textDecoration": "none"
          }
        },
        {
          "label": "Hover",
          "props": {
            "color": "#005856",
            "backgroundImage": "linear-gradient(90deg, #005856, #005856)",
            "backgroundPosition": "bottom",
            "backgroundSize": "100% 1px",
            "backgroundRepeat": "no-repeat",
            "transition": "background-size 0.3s ease"
          }
        }
      ]
    },
    {
      "type": "card",
      "name": "Card",
      "description": "白背景のコンテンツカード。10px 角丸 + 軽いシャドウ + 16px パディング",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#ffffff",
            "color": "#4e4d4e",
            "borderRadius": "10px",
            "overflow": "hidden",
            "boxShadow": "0 3px 8px rgba(0,0,0,0.2)",
            "padding": "16px",
            "transition": "0.3s ease"
          }
        },
        {
          "label": "Hover (Image Overlay)",
          "props": {
            "background": "#ffffff",
            "color": "#4e4d4e",
            "borderRadius": "10px",
            "imageOverlay": "rgba(0,124,122,0.2)",
            "transition": "0.3s ease"
          }
        }
      ]
    },
    {
      "type": "heading",
      "name": "Section Heading (h2)",
      "description": "セクション見出し。下にティント色の 4px ボーダー",
      "variants": [
        {
          "label": "Default",
          "props": {
            "fontSize": "36px",
            "fontWeight": "600",
            "lineHeight": 1.3,
            "color": "#4e4d4e",
            "borderBottom": "4px solid #b0ded6",
            "paddingBottom": "10px",
            "letterSpacing": "0.02em"
          }
        }
      ]
    },
    {
      "type": "section",
      "name": "Topics Section",
      "description": "プライマリティール背景の特集セクション。白テキスト",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#007c7a",
            "color": "#ffffff",
            "headingSize": "24px",
            "headingSizeMobile": "20px"
          }
        }
      ]
    },
    {
      "type": "alert",
      "name": "News Band",
      "description": "ヒーロー下部のニュースバナー。日付 + タグ + 見出しの 3 要素構成",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#d7d7d7",
            "color": "#333333",
            "paddingDesktop": "28px 77px",
            "paddingTablet": "20px 40px",
            "paddingMobile": "16px 20px",
            "dateFontSize": "16px",
            "tagFontSize": "14px",
            "tagBackground": "#ffffff",
            "tagPadding": "2px 8px"
          }
        }
      ]
    },
    {
      "type": "badge",
      "name": "Label Tag",
      "description": "小型ラベル/タグ。4px の控えめな角丸",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#ffffff",
            "color": "#4e4d4e",
            "borderRadius": "4px",
            "padding": "2px 8px",
            "fontSize": "14px",
            "display": "inline-block"
          }
        }
      ]
    },
    {
      "type": "nav",
      "name": "Global Navigation",
      "description": "白背景のヘッダー。ロゴ 70px + 多言語対応",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#ffffff",
            "color": "#333333",
            "fontSize": "12px",
            "logoWidth": "70px",
            "maxWidth": "1336px",
            "padding": "12px 0",
            "linkColor": "#333333"
          }
        },
        {
          "label": "Utility Link Hover",
          "props": {
            "color": "#009270"
          }
        },
        {
          "label": "Company Link Hover",
          "props": {
            "color": "#00b48c"
          }
        }
      ]
    },
    {
      "type": "footer",
      "name": "Global Footer",
      "description": "薄グレー背景のフッター。ケミカル事業部バリアントは緑背景",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#eeeeee",
            "color": "#333333",
            "borderTop": "1px solid #cccccc",
            "fontSize": "12px"
          }
        },
        {
          "label": "Chemical Division",
          "props": {
            "background": "#00806d",
            "color": "#ffffff",
            "borderTop": "1px solid #cccccc",
            "fontSize": "12px"
          }
        }
      ]
    },
    {
      "type": "hero",
      "name": "Hero Section",
      "description": "全画面幅のヒーロー画像。テキストにシャドウで可読性を確保",
      "variants": [
        {
          "label": "Desktop",
          "props": {
            "height": "780px",
            "imageObjectFit": "cover",
            "textShadow": "0 0 6px rgba(0,0,0,0.55)",
            "headingPosition": "top: 34vh"
          }
        },
        {
          "label": "Tablet",
          "props": {
            "height": "576px",
            "headingPosition": "bottom: 20%"
          }
        }
      ]
    },
    {
      "type": "accordion",
      "name": "Accordion",
      "description": "FAQ・詳細展開用アコーディオン",
      "variants": [
        {
          "label": "Default",
          "props": {
            "borderColor": "#d7d7cf",
            "activeColor": "#005856"
          }
        }
      ]
    }
  ],
  "guidelines": {
    "do": [
      "#005856 をリンクと主要 CTA の第一色として使う (UI 主役色)",
      "#007c7a はセクション背景など『塗り』の場面で使い、文字色には使わない",
      "見出しには FP-ヒラギノUD W6 (Bold)、本文には W3 (Regular) を使う",
      "カードには border-radius: 10px と box-shadow: 0 3px 8px rgba(0,0,0,0.2) を組み合わせる",
      "テキストリンクはホバー時にスライドイン下線アニメーションで応答させる",
      "48px 以上のタッチターゲットを確保する (ボタン最小高さ)",
      "ブレークポイントは 640/1024/1025px の 3 段階を使う",
      "h2 見出しには 4px の薄ティント下線 (#b0ded6) を付与する",
      "letter-spacing: 0.02em を本文の標準値として適用する",
      "ヒーロー画像上のテキストには text-shadow: 0 0 6px rgba(0,0,0,0.55) で可読性を確保する"
    ],
    "dont": [
      "#00ac8f (ロゴカラー) を UI 要素のテキストや背景に使わない — ロゴ専用",
      "#007c7a の背景上に同系色テキストを配置しない (コントラスト不足)",
      "Neue Helvetica を日本語テキストに適用しない — 英語・ラテン文字専用",
      "フッターのグレー (#eeeeee) を本文エリアに流用しない — フッター専用",
      "シャドウを多重適用しない — 1 カード 1 シャドウが原則",
      "#00b48c や #009270 をボタンの通常状態に使わない — ホバー専用",
      "ロゴカラーの変更を行わない (特に白背景以外への配置は公式承認が必要)",
      "ロゴの変形・回転・エフェクト付与をしない",
      "ケミカル事業部の #00806d を一般 UI に流用しない (事業部識別専用)",
      "10px 以外の角丸をカードに使わない (4px はラベル・タグ、50% はアイコンボタン専用)"
    ]
  }
}