---
version: alpha
name: Cybozu
description: 日本企業向けグループウェア・クラウドサービス企業のコーポレートデザインシステム。シアンを基調としたクリーンな構造に、ピンク・ブルー・ピーチの3色放射グラデーションをアクセントとして用いる。
sources:
  - https://cybozu.co.jp/
  - https://cybozu.co.jp/assets/css/style.css
  - https://cybozu.co.jp/products/
notes:
  - CSSは /assets/css/style.css の単一ファイル（22,001行）から取得。CSS変数（カスタムプロパティ）は使用されていない。
  - フォントはGoogle Fonts経由でLatoを読み込み（latin用）。日本語はシステムフォントスタック。
  - レイアウトはfloatベースのグリッド。Flexboxは一部のみ使用。
  - ブランドの象徴的な「3色グラデーション」は直接CSSで記述（ラジアルグラデーション×3層）。
  - 推論：各プロダクト（kintone/Garoon/Office）は独自のアクセント色を持つが、コーポレートサイト上での使用は限定的。
colors:
  primary: "#139cb7"
  primary-light: "#64bdd4"
  primary-lighter: "#92d0e1"
  primary-surface: "#eff8fb"
  accent-pink: "#e94f90"
  accent-blue: "#287bf4"
  accent-peach: "#f5c39e"
  text: "#333"
  text-secondary: "#838d94"
  text-muted: "#aaa"
  text-faint: "#b8b8b8"
  border: "#e6e6e6"
  border-medium: "#ccc"
  surface: "#ffffff"
  surface-subtle: "#f6f6f6"
  link: "#139cb7"
  link-visited: "#5c1a86"
  link-focus: "#2693ff"
  footer-bg: "#31424e"
  footer-border: "#465560"
typography:
  base:
    fontFamily: '"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo", "メイリオ", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif'
    fontSize: "1.6rem"
    lineHeight: "2"
    color: "#333"
  latin:
    fontFamily: '"Lato", sans-serif'
    fontWeight: "400, 700"
    source: "Google Fonts"
  display:
    fontSize: "3rem"
    color: "#ffffff"
    fontSmoothing: antialiased
  nav:
    fontSize: "1.4rem"
    fontWeight: "bold"
  body:
    fontSize: "1.6rem"
    lineHeight: "2"
  small:
    fontSize: "1.2rem"
  caption:
    fontSize: "1.1rem"
components:
  button-primary:
    borderRadius: "30px"
    padding: "12px 20px"
    minWidth: "260px"
    fontSize: "1.6rem"
    fontWeight: "bold"
    color: "#139cb7"
    border: "2px solid #64bdd4"
    backgroundColor: "transparent"
    transition: "background 0.2s"
  input:
    padding: "20px 90px 20px 22px"
    fontSize: "1.6rem"
    border: "1px solid #e6e6e6"
    borderRadius: "6px"
    backgroundColor: "#f6f6f6"
    focusBorder: "1px solid #64bdd4"
    focusBackground: "#ffffff"
  tag-chip:
    padding: "5px 20px"
    fontSize: "1.2rem"
    color: "#139cb7"
    border: "1px solid #64bdd4"
    borderRadius: "18px"
  footer:
    backgroundColor: "#31424e"
    color: "#ffffff"
    borderTop: "1px solid #465560"
    metaColor: "#838d94"
---

## 概要

サイボウズ（Cybozu）は日本の中堅〜大企業向けグループウェア・SaaS企業。コーポレートサイトは情報密度を高く保ちながら、アクセシビリティを重視したクリーンな構成をとる。

ブランドの最大の特徴は**3色放射グラデーション**（ピンク・ブルー・ピーチ）で、ヘッダーアクセントバー・パンくず・ページヘッダー背景に一貫して使用される。主要UIカラーはシアン系2色（`#139cb7` / `#64bdd4`）。

---

## カラー

### プライマリカラー（シアン系）

| ロール | 値 | 用途 |
|---|---|---|
| primary | `#139cb7` | リンクテキスト・CTAテキスト・アイコン前景 |
| primary-light | `#64bdd4` | ボタンボーダー・アイコン背景ドット・タグボーダー |
| primary-lighter | `#92d0e1` | ホバー時の補助色 |
| primary-surface | `#eff8fb` | セクション背景の薄いシアン面 |

**使用規則**
- `primary` はテキストとして使う（背景には使わない）
- `primary-light` はボーダー・アイコン背景・装飾ドットに使う
- 白背景上での `primary` テキストはコントラスト比を確保している

### ブランドグラデーション（3色）

サイボウズの最も識別性の高いモチーフ。3層のラジアルグラデーションで構成：

```css
/* ヘッダーアクセントバー・パンくず・ページヘッダー共通パターン */
background-image:
  radial-gradient(circle farthest-corner at left bottom,
    #e94f90 0%, rgba(233, 79, 144, 0.01) 100%),   /* ピンク（左下） */
  radial-gradient(circle farthest-corner at right bottom,
    #287bf4 0%, rgba(40, 123, 244, 0.01) 100%);    /* ブルー（右下） */

/* 上層オーバーレイ（ピーチ、中上） */
background-image:
  radial-gradient(circle farthest-corner at 45% 0%,
    #f5c39e 0%, rgba(245, 195, 158, 0.01) 85%);
```

**使用箇所**
- ヘッダー下4pxアクセントライン（`background-size: 100% 600px`、位置をずらして使用）
- パンくずナビゲーション（`height: 40px`、背景全面）
- ページヘッダー（`height: 180px`）
- サブヘッダー

**禁止事項**
- このグラデーションをカード・ボタン・入力欄の背景に使わない
- 3色を単色で並べる使い方はしない（グラデーションの柔らかい混合がブランドモチーフ）

### テキスト・ニュートラル

| ロール | 値 | 用途 |
|---|---|---|
| text | `#333` | 本文テキスト |
| text-secondary | `#838d94` | フッターコピーライト・メタ情報 |
| text-muted | `#aaa` | 補助的なラベル |
| text-faint | `#b8b8b8` | プレースホルダー |
| border | `#e6e6e6` | カード・インプット・区切り線 |
| border-medium | `#ccc` | やや強めの区切り |
| surface | `#ffffff` | ページ背景・カード背景 |
| surface-subtle | `#f6f6f6` | 入力欄・コードブロック背景 |

### フッターカラー

| ロール | 値 | 用途 |
|---|---|---|
| footer-bg | `#31424e` | フッター全体の背景（ダークティール） |
| footer-border | `#465560` | フッター内セクション区切り |
| footer-text | `#ffffff` | フッターリンク |
| footer-meta | `#838d94` | コピーライトテキスト |

### リンクカラー

| 状態 | 値 |
|---|---|
| default | `#139cb7` |
| visited | `#5c1a86` |
| focus | `#2693ff` |
| hover / active | `#139cb7` |

hover/active は `text-decoration: underline` を付加する。

---

## タイポグラフィ

### フォントスタック

**日本語（本文・UI全般）**
```css
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",
  "Meiryo", "メイリオ", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
```
macOS/iOS向けにヒラギノを優先し、Windowsにはメイリオ・MSPゴシックでフォールバック。

**欧文（数字・英字アクセント用）**
```css
font-family: 'Lato', sans-serif; /* weight: 400, 700 */
```
Google Fonts経由で読み込む。日本語テキストの中に英数字が混在する箇所で自動的に適用される。

### サイズスケール

`html { font-size: 62.5%; }` を基準とするremスケール（1rem = 10px）。

| ロール | サイズ | 実ピクセル | 用途 |
|---|---|---|---|
| display | `3rem` | 30px | ページヘッダーh1（白抜き） |
| body | `1.6rem` | 16px | 本文テキスト |
| nav | `1.4rem` | 14px | グローバルナビゲーション |
| small | `1.2rem` | 12px | フッターリンク・フォームラベル |
| caption | `1.1rem` | 11px | パンくずテキスト |

### ライン高・ウェイト

- **本文ラインハイト**: `2`（日本語の可読性のため2倍と広め）
- **ナビ・フォームのラインハイト**: `2`（入力欄も同様）
- **ボールド**: `font-weight: 700`（見出し・CTAテキスト・ナビアイテム）
- **ページヘッダーh1**: `-webkit-font-smoothing: antialiased`（白テキスト用）

---

## レイアウト

### コンテナ

```css
/* 標準コンテナ */
.lo-SingleContainer {
  box-sizing: border-box;
  min-width: 1060px;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 40px;
}
```

- 最小幅: `1060px`（デスクトップファースト設計）
- 最大幅: `1360px`
- サイドパディング: `40px`

### グリッドシステム

floatベースのデータ属性グリッド：

```html
<div class="lo-Grid">
  <div class="lo-Grid_Item" data-pcGrid="50%">...</div>
  <div class="lo-Grid_Item" data-pcGrid="50%">...</div>
</div>
```

対応比率: `100%` / `75%` / `66%` / `50%` / `33%` / `25%` / `20%`

Flexbox版は `lo-Grid-flex` クラスで切り替え。

### セクションスペーシング（ユーティリティ）

垂直マージンのユーティリティクラスで定義された間隔：

| 値 | px |
|---|---|
| 14px | 小（関連要素の間） |
| 22px | やや小 |
| 30px | 中 |
| 40px | 大 |
| 60px | セクション間 |

### 2カラムレイアウト

```css
.lo-Column_Main { /* メインコンテンツ */ }
.lo-Column_Sub  { /* サイドバー */ }
```

---

## コンポーネント

### ボタン（`.mod-BtnLarge`）

```css
.mod-BtnLarge {
  display: table;
  min-width: 260px;
  margin: 60px auto;
  padding: 12px 20px;
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 2;
  text-align: center;
  color: #139cb7;
  border: 2px solid #64bdd4;
  border-radius: 30px;          /* ピル形状 */
  transition: background 0.2s;
}
```

- 前に `#64bdd4` の円形ドット＋矢印アイコンが付く（before疑似要素）
- `border-radius: 30px` で完全なピル型
- 外部リンクの場合はafterに「新しいウィンドウで開きます。」のSR用テキストと12pxアイコンを追加

### タグ・チップ（`.mod-Tag` / フィルター類）

```css
{
  padding: 5px 20px;
  font-size: 1.2rem;
  color: #139cb7;
  border: 1px solid #64bdd4;
  border-radius: 18px;
}
```

### 検索入力

```css
{
  padding: 20px 90px 20px 22px; /* 右に送信ボタンスペース */
  font-size: 1.6rem;
  border: 1px solid #e6e6e6;
  border-radius: 6px;
  background-color: #f6f6f6;
  transition: background 0.1s, border 0.1s;
}
/* フォーカス時 */
{
  border: 1px solid #64bdd4;
  background-color: #ffffff;
}
```

### カード（`.mod-LinkItem`）

- 画像サムネイル（縦横比固定、内部にimgをabsoluteで配置）
- タイトル前に `#64bdd4` の円形ドット＋矢印アイコン
- 外部リンクは右上にブランクアイコン
- PDF添付は専用アイコン
- ホバー時はタイトルに `text-decoration: underline`

### アコーディオン（`.mod-Accordion`）

- `.mod-Accordion_Tab` でトリガー
- `.is-open` クラスで展開状態
- Large variant: `.mod-Accordion_Tab-large`

### グローバルヘッダー（`.st-Header`）

```
[ ロゴ ]  [ ナビ項目 × 8 ]  [ 検索 | 電話 ]
─────── 4px グラデーションライン ───────────
```

- 背景: `#ffffff`、スクロール時に `box-shadow: 0 10px 10px rgba(0,0,0,0.1)`
- ナビゲーション: `font-size: 1.4rem`、ドロップダウンメガメニュー付き
- ロゴ下の4pxライン: 3色グラデーション（ブランドアクセント）

### グローバルフッター（`.st-Footer`）

```
[ フッターリンク × n ]           [ SNSアイコン ]
─────────────── border #465560 ───────────────
[ コピーライト © ]                [ プライバシー ]
```

- 背景: `#31424e`（ダークティール）
- 上段リンク: `#ffffff`, `font-size: 1.2rem`, `padding: 18px 0`
- 下段: `color: #838d94`, `padding: 38px 0`
- 右下にフロートする「ページトップへ」ボタン: `width/height: 50px`, `border-radius: 50%`, `background: #fff`

### パンくず（`.bc-Breadcrumbs`）

- 背景全面に3色グラデーション（height: 40px）
- テキスト: `#ffffff`, `font-size: 1.1rem`
- セパレーター: SVGアイコン（矢印）

### ページヘッダー（`.ph-PageHeader`）

- 背景: 3色グラデーション（height: 180px）
- H1: `font-size: 3rem`, `color: #fff`, `vertical-align: middle`
- 内部パディング: `0 40px`

---

## 画像・ビジュアル

### 写真スタイル
- プロダクトスクリーンショット（UIプレビュー用）
- 人物・チーム写真（社内文化・採用コンテンツ）
- アクセシビリティの配慮が明示されており、altテキスト設定が徹底されている

### アイコン
- SVG形式を使用
- アイコンは `#64bdd4` の円形背景ドットと組み合わせて使用
- 矢印アイコン（arrowLink.svg）: リンクアイテムの前置インジケーターとして全サイトで統一

### グラデーションモチーフ（再掲）
ブランド最重要ビジュアルパターン。ピンク・ブルー・ピーチの3色ラジアルグラデーションを柔らかく重ね合わせたもの。ヘッダー・パンくず・ページヘッダーに繰り返し使用し、ブランドの一貫性を担保する。

---

## ロゴと使用規則

- ロゴ画像: `/assets/img/logo_l.svg`（SVGフォーマット）
- ロゴエリアはpadding-top比率でアスペクト比保持（73.3945%）
- ヘッダー左上に配置。クリックでトップページへ

**推論（公式ガイドライン未確認）**
- ロゴ背景はwhite (`#fff`) のみで使用
- グラデーション背景上でのロゴ使用は確認されていない（ページヘッダー上にはロゴ非表示）

---

## Do's and Don'ts

### Do

- `#139cb7` はテキストとして白背景上で使う
- `#64bdd4` をアイコン背景・ボーダー・装飾ドットに使う
- 3色グラデーションはヘッダー系要素（ナビバー・パンくず・ページヘッダー）に使う
- 日本語テキストには `line-height: 2` を設定する
- ボタンは `border-radius: 30px`（ピル型）にする
- 外部リンクには後続アイコンとSR用テキストを付加する
- コンテナは `max-width: 1360px` / `padding: 0 40px` を守る

### Don't

- `#e94f90`・`#287bf4`・`#f5c39e` を単色で塗りつぶしに使わない（グラデーションアクセント専用）
- `#5c1a86`（訪問済みリンク紫）を意図的なデザイン色として使わない（ブラウザデフォルト挙動）
- コンテナ幅を `1060px` 未満にしない（floatレイアウトが崩れる）
- `font-size` を `1rem`（=10px）未満にしない
- フッター背景色 `#31424e` をコンテンツエリアに使わない
- ボタンの背景を塗りつぶしにしない（ゴーストボタンスタイルが標準）

---

## 設計システム命名規則

BEM亜種 + 名前空間プレフィックスを採用：

| プレフィックス | 役割 |
|---|---|
| `st-` | Structure（ヘッダー・フッターなどサイト構造） |
| `lo-` | Layout（コンテナ・グリッド） |
| `mod-` | Module（ボタン・カード・アコーディオンなど再利用コンポーネント） |
| `tp-` | Template（トップページ固有） |
| `pt-` | Product template（プロダクトページ固有） |
| `bc-` | Breadcrumb |
| `ph-` | Page header |
| `nr-` | News/release |
| `se-` | Seminar/search |
| `ar-` | Article |
| `co-` | Company |
| `ea-` | Accessibility |
| `ci-` | Customer interview |
| `hlp-` | Helper（`!important`ユーティリティ） |

{
  "$schema": "https://aistyles.dev/schema/tokens-v1.json",
  "version": "1.0",
  "brand": {
    "slug": "cybozu",
    "name": "Cybozu (サイボウズ)",
    "url": "https://cybozu.co.jp/",
    "description": "日本の中堅〜大企業向けグループウェア・SaaS 企業 (kintone / Garoon / Office) のコーポレートサイト。シアン系 2 色 (#139cb7 / #64bdd4) を主軸にしつつ、ブランドの最大の特徴である『3 色放射グラデーション (ピンク #e94f90 / ブルー #287bf4 / ピーチ #f5c39e)』をヘッダーアクセントバー・パンくず・ページヘッダーに一貫して使用。情報密度を高く保ちながら、アクセシビリティを重視したクリーンな構成。22,001 行の単一 CSS + BEM 亜種 + 12 種の名前空間プレフィックスというエンタープライズグレード設計。",
    "category": "saas",
    "tags": [
      "b2b",
      "japanese",
      "saas",
      "groupware",
      "radial-gradient",
      "tricolor",
      "bem",
      "enterprise"
    ],
    "theme": "light",
    "language": "ja"
  },
  "sources": [
    "https://cybozu.co.jp/",
    "https://cybozu.co.jp/assets/css/style.css",
    "https://cybozu.co.jp/products/"
  ],
  "extractedAt": "2026-05-17",
  "notes": [
    "直接証拠: CSS は /assets/css/style.css の単一ファイル (22,001 行) から取得。",
    "直接証拠: CSS 変数 (カスタムプロパティ) は使用されていない — 全色がハードコード値。",
    "直接証拠: フォントは Google Fonts 経由で Lato を読み込み (latin 用)、日本語はシステムフォントスタック。",
    "直接証拠: レイアウトは float ベースのグリッド (data-pcGrid 属性)、Flexbox は一部のみ。",
    "直接証拠: ブランド象徴の『3 色グラデーション』は直接 CSS で記述 (ラジアルグラデーション × 3 層)。",
    "推論: 各プロダクト (kintone / Garoon / Office) は独自のアクセント色を持つが、コーポレートサイト上での使用は限定的。",
    "重要: 3 色グラデーションのピンク・ブルー・ピーチは単色塗りつぶしには使わない — ラジアル混合のみがブランドモチーフ。",
    "重要: シアン #139cb7 はテキストとして白背景上に、#64bdd4 はボーダー・アイコン背景に使い分ける役割設計。",
    "重要: BEM 亜種 + 名前空間プレフィックス (st- / lo- / mod- / tp- / pt- / bc- / ph- / nr- / se- / ar- / co- / ea- / ci- / hlp-) で大規模 CSS を管理。"
  ],
  "colors": {
    "groups": [
      {
        "label": "Brand Cyan",
        "tokens": [
          {
            "name": "Primary (Cyan)",
            "value": "#139cb7",
            "token": "--color-primary",
            "role": "リンクテキスト・CTA テキスト・アイコン前景。白背景上のテキスト専用 (背景には使わない)"
          },
          {
            "name": "Primary Light",
            "value": "#64bdd4",
            "token": "--color-primary-light",
            "role": "ボタンボーダー・アイコン背景ドット・タグボーダー"
          },
          {
            "name": "Primary Lighter",
            "value": "#92d0e1",
            "token": "--color-primary-lighter",
            "role": "ホバー時の補助色"
          },
          {
            "name": "Primary Surface",
            "value": "#eff8fb",
            "token": "--color-primary-surface",
            "role": "セクション背景の薄いシアン面"
          }
        ]
      },
      {
        "label": "Tricolor Radial Gradient",
        "tokens": [
          {
            "name": "Accent Pink",
            "value": "#e94f90",
            "token": "--color-accent-pink",
            "role": "ラジアルグラデーション左下。3 色グラデーション専用、単色塗りつぶし禁止"
          },
          {
            "name": "Accent Blue",
            "value": "#287bf4",
            "token": "--color-accent-blue",
            "role": "ラジアルグラデーション右下。3 色グラデーション専用、単色塗りつぶし禁止"
          },
          {
            "name": "Accent Peach",
            "value": "#f5c39e",
            "token": "--color-accent-peach",
            "role": "ラジアルグラデーション中上 (オーバーレイ)。3 色グラデーション専用、単色塗りつぶし禁止"
          }
        ]
      },
      {
        "label": "Text",
        "tokens": [
          {
            "name": "Text Primary",
            "value": "#333333",
            "token": "--color-text",
            "role": "本文テキスト"
          },
          {
            "name": "Text Secondary",
            "value": "#838d94",
            "token": "--color-text-secondary",
            "role": "フッターコピーライト・メタ情報"
          },
          {
            "name": "Text Muted",
            "value": "#aaaaaa",
            "token": "--color-text-muted",
            "role": "補助的なラベル"
          },
          {
            "name": "Text Faint",
            "value": "#b8b8b8",
            "token": "--color-text-faint",
            "role": "プレースホルダー"
          }
        ]
      },
      {
        "label": "Surface & Border",
        "tokens": [
          {
            "name": "Surface",
            "value": "#ffffff",
            "token": "--color-surface",
            "role": "ページ背景・カード背景"
          },
          {
            "name": "Surface Subtle",
            "value": "#f6f6f6",
            "token": "--color-surface-subtle",
            "role": "入力欄・コードブロック背景"
          },
          {
            "name": "Border",
            "value": "#e6e6e6",
            "token": "--color-border",
            "role": "カード・インプット・区切り線"
          },
          {
            "name": "Border Medium",
            "value": "#cccccc",
            "token": "--color-border-medium",
            "role": "やや強めの区切り"
          }
        ]
      },
      {
        "label": "Footer (Dark Teal)",
        "tokens": [
          {
            "name": "Footer BG",
            "value": "#31424e",
            "token": "--color-footer-bg",
            "role": "フッター全体の背景 (ダークティール)。コンテンツエリアには流用しない"
          },
          {
            "name": "Footer Border",
            "value": "#465560",
            "token": "--color-footer-border",
            "role": "フッター内セクション区切り"
          }
        ]
      },
      {
        "label": "Link States",
        "tokens": [
          {
            "name": "Link Default",
            "value": "#139cb7",
            "token": "--color-link",
            "role": "デフォルトリンク色 (primary と同値)"
          },
          {
            "name": "Link Visited",
            "value": "#5c1a86",
            "token": "--color-link-visited",
            "role": "訪問済みリンク (ブラウザデフォルト紫、デザイン色として意図使用しない)"
          },
          {
            "name": "Link Focus",
            "value": "#2693ff",
            "token": "--color-link-focus",
            "role": "フォーカス時"
          }
        ]
      }
    ]
  },
  "typography": {
    "fonts": [
      {
        "family": "Hiragino Kaku Gothic Pro",
        "stack": "'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Meiryo', 'メイリオ', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif",
        "weights": [
          400,
          700
        ],
        "role": "日本語本文・UI 全般。macOS/iOS 向けにヒラギノ優先、Windows にメイリオ・MS P ゴシックでフォールバック"
      },
      {
        "family": "Lato",
        "stack": "'Lato', sans-serif",
        "weights": [
          400,
          700
        ],
        "role": "欧文・数字専用。Google Fonts 経由で読み込み、日本語テキスト中の英数字に自動適用"
      }
    ],
    "scale": [
      {
        "role": "display (h1 page header)",
        "size": "3rem",
        "weight": 700,
        "lineHeight": 1.4,
        "color": "#ffffff",
        "note": "30px、ページヘッダー H1 (3 色グラデーション背景上の白テキスト)、-webkit-font-smoothing: antialiased"
      },
      {
        "role": "body",
        "size": "1.6rem",
        "weight": 400,
        "lineHeight": 2,
        "color": "#333333",
        "note": "16px、本文テキスト (日本語可読性のため line-height: 2 と広め)"
      },
      {
        "role": "nav",
        "size": "1.4rem",
        "weight": 700,
        "lineHeight": 2,
        "note": "14px、グローバルナビゲーション (bold)"
      },
      {
        "role": "small",
        "size": "1.2rem",
        "weight": 400,
        "lineHeight": 1.5,
        "note": "12px、フッターリンク・フォームラベル"
      },
      {
        "role": "caption",
        "size": "1.1rem",
        "weight": 400,
        "lineHeight": 1.4,
        "note": "11px、パンくずテキスト"
      }
    ],
    "japanese": {
      "fontStack": "'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Meiryo', 'メイリオ', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif",
      "lineHeight": 2,
      "letterSpacing": "0",
      "openType": {
        "palt": false,
        "kern": true
      },
      "kinsoku": {
        "wordBreak": "keep-all",
        "lineBreak": "strict"
      },
      "notes": [
        "html { font-size: 62.5% } で 1rem = 10px に固定 (rem 計算が簡潔)",
        "本文 line-height: 2 は日本語の可読性を最優先する設計判断 (一般的な 1.6 より広い)",
        "weight は normal (400) と bold (700) の 2 段階運用",
        "Lato は欧文・数字専用、日本語には適用しない (自動的に日本語フォントへフォールバック)",
        "ページヘッダー H1 にはアンチエイリアス指定で白テキストの可読性を確保"
      ]
    }
  },
  "spacing": {
    "baseUnit": "2px",
    "tokens": [
      {
        "name": "xs",
        "value": "14px",
        "role": "関連要素の間 (小)"
      },
      {
        "name": "sm",
        "value": "22px",
        "role": "やや小"
      },
      {
        "name": "md",
        "value": "30px",
        "role": "中"
      },
      {
        "name": "lg",
        "value": "40px",
        "role": "大・コンテナサイドパディング"
      },
      {
        "name": "section-gap",
        "value": "60px",
        "role": "セクション間隔・ボタン上下マージン"
      },
      {
        "name": "container-min",
        "value": "1060px",
        "role": "最小コンテンツ幅 (これ未満で float が崩れる)"
      },
      {
        "name": "container-max",
        "value": "1360px",
        "role": "最大コンテンツ幅"
      }
    ]
  },
  "breakpoints": {
    "desktop": {
      "value": "≥ 1060px",
      "role": "デスクトップファースト設計、1060px 未満は非対応"
    }
  },
  "radius": {
    "small": "6px",
    "tag": "18px",
    "button": "30px",
    "circle": "50%",
    "default": "0px"
  },
  "components": [
    {
      "type": "button",
      "name": "Large Button (.mod-BtnLarge)",
      "description": "ピル型ゴーストボタン。シアン枠 + シアンテキスト、左に円形ドット + 矢印アイコン付き",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "transparent",
            "color": "#139cb7",
            "border": "2px solid #64bdd4",
            "borderRadius": "30px",
            "minWidth": "260px",
            "padding": "12px 20px",
            "fontSize": "1.6rem",
            "fontWeight": "700",
            "lineHeight": "2",
            "transition": "background 0.2s"
          }
        },
        {
          "label": "Hover",
          "props": {
            "background": "#eff8fb",
            "color": "#139cb7",
            "border": "2px solid #64bdd4",
            "borderRadius": "30px",
            "minWidth": "260px",
            "padding": "12px 20px",
            "fontSize": "1.6rem",
            "fontWeight": "700"
          }
        }
      ]
    },
    {
      "type": "badge",
      "name": "Tag / Chip",
      "description": "シアン枠 + シアンテキストの小型タグ",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "transparent",
            "color": "#139cb7",
            "border": "1px solid #64bdd4",
            "borderRadius": "18px",
            "padding": "5px 20px",
            "fontSize": "1.2rem"
          }
        }
      ]
    },
    {
      "type": "input",
      "name": "Search Input",
      "description": "薄グレー背景の検索入力。フォーカスでシアン枠 + 白背景に切替",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#f6f6f6",
            "color": "#333333",
            "border": "1px solid #e6e6e6",
            "borderRadius": "6px",
            "padding": "20px 90px 20px 22px",
            "fontSize": "1.6rem",
            "transition": "background 0.1s, border 0.1s"
          }
        },
        {
          "label": "Focus",
          "props": {
            "background": "#ffffff",
            "color": "#333333",
            "border": "1px solid #64bdd4",
            "borderRadius": "6px",
            "padding": "20px 90px 20px 22px",
            "fontSize": "1.6rem"
          }
        }
      ]
    },
    {
      "type": "card",
      "name": "Link Item Card (.mod-LinkItem)",
      "description": "画像サムネイル + タイトル + シアンドット矢印アイコンのカード。外部リンク・PDF アイコン付き",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#ffffff",
            "color": "#333333",
            "borderColor": "#e6e6e6",
            "iconDotColor": "#64bdd4",
            "iconShape": "circle with arrow"
          }
        },
        {
          "label": "Hover",
          "props": {
            "background": "#ffffff",
            "color": "#333333",
            "titleTextDecoration": "underline"
          }
        }
      ]
    },
    {
      "type": "decorator",
      "name": "Tricolor Radial Gradient",
      "description": "ブランド最重要モチーフ。3 層のラジアルグラデーションでピンク・ブルー・ピーチを柔らかく混合",
      "variants": [
        {
          "label": "Pattern (Background Image)",
          "props": {
            "backgroundImage": "radial-gradient(circle farthest-corner at left bottom, #e94f90 0%, rgba(233,79,144,0.01) 100%), radial-gradient(circle farthest-corner at right bottom, #287bf4 0%, rgba(40,123,244,0.01) 100%)",
            "overlayImage": "radial-gradient(circle farthest-corner at 45% 0%, #f5c39e 0%, rgba(245,195,158,0.01) 85%)",
            "appliedTo": "ヘッダーアクセントバー (height 4px) / パンくず (height 40px) / ページヘッダー (height 180px)"
          }
        }
      ]
    },
    {
      "type": "nav",
      "name": "Global Header (.st-Header)",
      "description": "白背景 + 4px の 3 色グラデーションアクセントライン下部",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#ffffff",
            "color": "#333333",
            "navFontSize": "1.4rem",
            "navFontWeight": "700",
            "bottomAccentLine": "4px tricolor radial gradient"
          }
        },
        {
          "label": "Scrolled",
          "props": {
            "background": "#ffffff",
            "color": "#333333",
            "boxShadow": "0 10px 10px rgba(0,0,0,0.1)",
            "bottomAccentLine": "4px tricolor radial gradient"
          }
        }
      ]
    },
    {
      "type": "breadcrumb",
      "name": "Breadcrumb (.bc-Breadcrumbs)",
      "description": "3 色グラデーション全面背景の白テキストパンくず",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "tricolor radial gradient",
            "color": "#ffffff",
            "height": "40px",
            "fontSize": "1.1rem",
            "separator": "SVG arrow icon"
          }
        }
      ]
    },
    {
      "type": "hero",
      "name": "Page Header (.ph-PageHeader)",
      "description": "3 色グラデーション全面背景の H1 ヘッダーセクション",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "tricolor radial gradient",
            "color": "#ffffff",
            "height": "180px",
            "padding": "0 40px",
            "h1FontSize": "3rem",
            "h1VerticalAlign": "middle"
          }
        }
      ]
    },
    {
      "type": "footer",
      "name": "Global Footer (.st-Footer)",
      "description": "ダークティール背景のフッター。リンクは白、メタ情報は薄グレー",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#31424e",
            "color": "#ffffff",
            "linkColor": "#ffffff",
            "linkFontSize": "1.2rem",
            "linkPadding": "18px 0",
            "borderTop": "1px solid #465560",
            "metaColor": "#838d94",
            "metaPadding": "38px 0"
          }
        }
      ]
    },
    {
      "type": "button",
      "name": "Page Top Button",
      "description": "右下に floating する『ページトップへ』円形ボタン",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#ffffff",
            "color": "#139cb7",
            "width": "50px",
            "height": "50px",
            "borderRadius": "50%",
            "boxShadow": "0 2px 8px rgba(0,0,0,0.15)"
          }
        }
      ]
    },
    {
      "type": "accordion",
      "name": "Accordion (.mod-Accordion)",
      "description": "FAQ・詳細展開用アコーディオン",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#ffffff",
            "color": "#333333",
            "borderColor": "#e6e6e6"
          }
        },
        {
          "label": "Open (.is-open)",
          "props": {
            "background": "#ffffff",
            "color": "#333333",
            "borderColor": "#64bdd4"
          }
        }
      ]
    }
  ],
  "guidelines": {
    "do": [
      "#139cb7 はテキストとして白背景上で使う (CTA テキスト・リンク・アイコン前景)",
      "#64bdd4 をアイコン背景・ボーダー・装飾ドットに使う",
      "3 色グラデーションはヘッダー系要素 (ナビバー・パンくず・ページヘッダー) に使う",
      "日本語テキストには line-height: 2 を設定する (一般値より広め)",
      "ボタンは border-radius: 30px (ピル型) にする",
      "外部リンクには後続アイコンと SR 用テキストを付加する",
      "コンテナは max-width: 1360px / padding: 0 40px を守る",
      "html { font-size: 62.5% } + rem スケールでタイポグラフィを管理する",
      "ボタン左にシアン (#64bdd4) の円形ドット + 矢印アイコンを付ける",
      "BEM 亜種命名規則 (st- / lo- / mod- / tp- 等) で大規模 CSS を管理する"
    ],
    "dont": [
      "#e94f90・#287bf4・#f5c39e を単色で塗りつぶしに使わない (グラデーションアクセント専用)",
      "#5c1a86 (訪問済みリンク紫) を意図的なデザイン色として使わない (ブラウザデフォルト挙動)",
      "コンテナ幅を 1060px 未満にしない (float レイアウトが崩れる)",
      "font-size を 1rem (=10px) 未満にしない",
      "フッター背景色 #31424e をコンテンツエリアに使わない (フッター専用)",
      "ボタンの背景を塗りつぶしにしない (ゴーストボタンスタイルが標準)",
      "3 色グラデーションをカード・ボタン・入力欄の背景に使わない",
      "3 色を単色で並べる使い方はしない (ラジアル混合の柔らかい混合がブランドモチーフ)",
      "Lato を日本語テキストに適用しない (英数字専用)",
      "BEM 亜種命名のプレフィックス (st- / lo- / mod-) を独自命名に置き換えない"
    ]
  }
}