---
version: alpha
name: LINE
description: LINEはLYコーポレーションが運営するメッセージングプラットフォーム。ブランドカラー「Forest Green」と専用書体「LINESeed」を中心に、クリーンで親しみやすいデジタルファーストのアイデンティティを持つ。
sources:
  - https://www.line.me/ja/
  - https://www.line.me/static/css/index.min.css
  - https://www.line.me/en/logo
  - https://brandpalettes.com/line-colors/
  - https://brandpalettes.com/line-logo-green-colors/
  - https://designsystem.line.me/LDSM/foundation/color/line-color-guide-ex-en
  - https://designsystem.line.me/LDSM/foundation/typography-ex-en
notes:
  - 直接証拠: www.line.me/static/css/index.min.css から全色値・フォント・スペーシングを抽出
  - 直接証拠: www.line.me/en/logo よりロゴ使用ガイドライン確認
  - 直接証拠: brandpalettes.com より公式ブランドカラー (Green #06C755, Pantone PMS 361 C) 確認
  - 公式散文: LINE Design System ドキュメントは JS レンダリングのため内容取得不可。デザインシステム名は「LDSM（LINE Design System for Messenger）」と確認済み
  - 公式散文: 2021年に Forest Green を公式アイデンティティカラーに制定、30色のコアカラーパレットを整備
  - 推論: ウェブサイト CSS の #07b53b と公式ブランドドキュメントの #06C755 は微妙に異なる。ウェブサイト実装値として #07b53b を記録し、公式ブランドシステム値として #06C755 を注記
  - 推論: LINE Design System は LDSM (Messenger) と LDSG (Global Family Services) の2系統に分かれており、line.me は LDSG 系に近い
colors:
  green: "#06C755"
  green-web: "#07b53b"
  black: "#000000"
  near-black: "#1e1e1e"
  gray-dark: "#616161"
  gray-mid: "#777777"
  gray-light: "#999999"
  gray-muted: "#b2b2b2"
  border: "#cccccc"
  surface-light: "#f6f7f8"
  surface-lighter: "#f7f8f9"
  white: "#ffffff"
typography:
  display:
    fontFamily: "LINESeed, SFPro, Arial, Noto Sans JP, Noto Sans KR, sans-serif"
    fontWeight: 700
    fontSize: "70px / 60px (mobile)"
  heading:
    fontFamily: "LINESeed, SFPro, Arial, Noto Sans JP, Noto Sans KR, sans-serif"
    fontWeight: 700
    fontSize: "40–60px"
  subheading:
    fontFamily: "SFPro, Arial, Noto Sans JP, Noto Sans KR, sans-serif"
    fontWeight: 500
    fontSize: "24–36px"
  body:
    fontFamily: "SFPro, Arial, Noto Sans JP, Noto Sans KR, sans-serif"
    fontWeight: 400
    fontSize: "14–16px (mobile: 14px, desktop: 20px base)"
  small:
    fontFamily: "SFPro, Arial, Noto Sans JP, Noto Sans KR, sans-serif"
    fontWeight: 400
    fontSize: "12–13px"
  english:
    fontFamily: "SFPro, Arial, sans-serif"
    note: "英語テキスト専用スタック"
  japanese:
    fontFamily: "SFPro, Arial, Noto Sans JP, AppleSDGothicNeo, sans-serif"
    note: "日本語テキスト用スタック（Korean を除く）"
rounded:
  small: "4px"
  medium: "8px"
  large: "10px"
  xlarge: "16px"
  pill: "50px"
  circle: "50%"
spacing:
  base: "8px"
  section-padding-mobile: "0 16px"
  section-padding-desktop: "0 20px"
  section-gap-small: "30px"
  section-gap-large: "85px"
  max-width: "1200px"
components:
  button-download-ghost:
    background: "transparent"
    border: "1px solid rgba(255,255,255,0.5)"
    color: "#ffffff"
    borderRadius: "4px"
    padding: "0 14px 0 18px"
    height: "50px"
    fontSize: "14px"
    lineHeight: "3.57"
  button-download-text:
    color: "#1e1e1e"
    fontSize: "13px"
    display: "inline-block with icon"
  card-service:
    borderRadius: "16px"
    background: "#ffffff"
  icon-app:
    borderRadius: "10px"
    size: "40px (footer)"
    minSizeMobile: "40px"
    minSizeDesktop: "20px"
    minSizePrint: "10mm"
---

## 概要

LINE は「Life on LINE」というタグラインで示される通り、コミュニケーションを日常の一部に溶け込ませることを目指すプラットフォームブランドである。ビジュアルアイデンティティは専用書体 **LINESeed** と **Forest Green (#06C755)** を核に構築されており、清潔感と国際対応（日本語・英語・韓国語・中国語・タイ語・インドネシア語）を両立させた設計になっている。

2021年に LINE Design System (LDSM) が発表され、アプリ内 UI は Forest Green を正式なアイデンティティカラーとする 30色のコアパレットに統一された。ウェブサイト (www.line.me) のスタイルシートでは `#07b53b` が実装値として使われており、アプリの公式値 (`#06C755`) とはわずかに異なる。新しく開発する場合は公式デザインシステム値 `#06C755` を優先すること。

---

## カラー

### プライマリ

| ロール | 値 | 用途 |
|---|---|---|
| Brand Green (公式) | `#06C755` | ロゴ、CTA、強調要素。Pantone PMS 361 C。「成長と善良さ」を象徴 |
| Brand Green (Web 実装) | `#07b53b` | www.line.me の CSS で実際に使われている緑。ロゴ下ライン、ホバー色など |
| Near-Black | `#1e1e1e` | 本文テキスト、フッターリンク、ナビゲーション |
| White | `#ffffff` | 背景、カード、ヘッダー背景 |

### ニュートラル

| ロール | 値 | 用途 |
|---|---|---|
| Gray Dark | `#616161` | 副次テキスト、ラベル |
| Gray Mid | `#777777` | プレースホルダー、補足情報 |
| Gray Light | `#999999` | 非アクティブ要素 |
| Gray Muted | `#b2b2b2` | 薄い補足テキスト |
| Border | `#cccccc` | 区切り線、インプット枠 |

### サーフェス

| ロール | 値 | 用途 |
|---|---|---|
| Surface Light | `#f6f7f8` | communication・banner セクション背景 |
| Surface Lighter | `#f7f8f9` | allProduct・singleBanner セクション背景 |

### オーバーレイ

| 値 | 用途 |
|---|---|
| `rgba(0,0,0,0.2)` | フッター区切り、画像オーバーレイ、アイコン区切り |
| `rgba(0,0,0,0.85)` | モーダルまたは重い背景オーバーレイ |
| `rgba(30,30,30,0.7)` | ナビゲーションの半透明テキスト |

---

## タイポグラフィ

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

LINE は専用書体 **LINESeed** を最高優先として配置し、プラットフォーム標準フォント（SFPro, Arial）、多言語対応フォント（Noto Sans JP, Noto Sans KR）をフォールバックに並べる。

```css
/* ディスプレイ・見出し（太字） */
font-family: LINESeed, SFPro, Arial, Noto Sans JP, Noto Sans KR, sans-serif;
font-weight: 700;

/* 本文・UI テキスト */
font-family: SFPro, Arial, Noto Sans JP, Noto Sans KR, sans-serif;
font-weight: 400;

/* 英語専用 */
font-family: SFPro, Arial, sans-serif;

/* 日本語（Korean 除外） */
font-family: SFPro, Arial, Noto Sans JP, AppleSDGothicNeo, sans-serif;
```

**LINESeed** は WOFF 形式で `/static/LINESeed_W_XBd-*.woff` として配信される（font-weight: 700 のみ）。

### スケール

| ロール | サイズ（モバイル）| サイズ（デスクトップ） | 書体 |
|---|---|---|---|
| ディスプレイ (Hero) | 約 48–60px | 70px | LINESeed 700 |
| H1 (セクション見出し) | 40px | 60px | LINESeed 700 |
| H2 | 28–36px | 40–50px | LINESeed 700 |
| H3 (サービス名) | 18–24px | 22–28px | SFPro/Noto 500–700 |
| Body | 14px | 20px (base reset) | SFPro/Noto 400 |
| Small / Label | 12–13px | 13–15px | SFPro/Noto 400 |

> **備考:** デスクトップ（min-width: 879px）では `body` の base font-size が 20px にリセットされ、全体スケールが拡大する。

---

## レイアウト

- **最大幅:** 1200px（コンテンツコンテナ）
- **ブレークポイント:** 879px（モバイル ↔ デスクトップ）
- **ヘッダー:** Fixed。スクロール後も常時表示。ロゴ + 水平ナビ + 言語セレクター
- **Hero（#mvArea）:** ビューポート全高。複数画像のクロスフェードスライダー。起動時は 720px 幅から 100vw へアニメーション拡大
- **セクション構造:** 上下 `padding: 30px 0`（標準）〜 `padding: 85px 0`（mainService）
- **グリッド:** 暗黙的フレックスレイアウト。明示的グリッドクラス (`.grid`) はあるが使用は限定的

### ナビゲーション

- 固定ヘッダー内の水平メニュー (`.gnb`)
- アクティブ項目には `.currentLine` クラスで下線アニメーション
- 言語切替 (JP/EN/KR/TW/TH/ID) はホバーで `.langMenu` ドロップダウン表示
- モバイル用 `.onlySp` / PC用 `.onlyPc` で出し分け

---

## コンポーネント

### ダウンロード CTA ボタン（Hero 内）

```css
width: auto;
height: 50px;
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 4px;
padding: 0 14px 0 18px;
color: #ffffff;
font-size: 14px;
line-height: 3.57;
```

Hero のダーク背景上ではゴースト（半透明ボーダー）ボタン。アイコン + テキストの組み合わせ。

### フッターダウンロードリンク

```css
/* リストアイテム区切り */
border-right: 1px solid rgba(0, 0, 0, 0.2); /* afterで実装 */
font-size: 13px;
color: #1e1e1e;

/* アプリアイコン */
width: 40px;
height: 40px;
border-radius: 10px;
overflow: hidden;
```

App Store / Google Play / Desktop / Win Store の 4 リンクを横並び。各リンク間に rgba 区切り線。

### サービスカード

```css
border-radius: 16px;
background: #ffffff;
```

テキストエリア + リンクエリアを縦積み。各セクションは `padding: 85px 0` の余白で分離。

### 製品カテゴリーメニュー

選択中カテゴリーは `background: #07b53b; color: #ffffff;` でハイライト。非選択は白背景・ダークテキスト。

---

## イメージリー

- **フォトグラフィー:** 実際の人物・生活シーンを用いたライフスタイル写真。多様な人種・年齢層が登場。
- **カラーコーディング:** ヒーローは暗背景（`rgba(0,0,0,.85)` オーバーレイ）＋白テキストのコントラスト構成
- **アニメーション:** ページロード時にヒーローエリアが 720px から全幅へ展開。複数スライドはクロスフェード（opacity + scale 1.5 → 1）
- **スプライトシート:** ダウンロードアイコンは `/static/img/sprite-download-list_1.png` でまとめて管理
- **SVG ロゴ:** `/static/img/icon-line_1.png`（ブランドアイコン）/ `/static/img/icon-lang-b_1.png`, `icon-lang-w_1.png`（言語アイコン）

---

## ロゴと使用ルール

（出典: https://www.line.me/en/logo）

- **所有権:** LY Corporation がすべてのロゴ・アイコンの権利を保有
- **改変禁止:** ロゴファイルはそのまま使用すること。色・余白・書体の変更不可
- **エフェクト禁止:** 拡大縮小アニメーション・回転・装飾の追加禁止
- **隔離ゾーン:** ロゴ周囲に他の要素を配置する際は隔離ゾーンを確保
- **最小サイズ:**
  - モバイル: 40px
  - PC: 20px
  - 印刷: 10mm
- **ダウンロード形式:** AI (RGB/CMYK)、PSD (RGB/CMYK)、PNG
- **メディア利用:** 問合せフォームより事前承認が必要

---

## Do's and Don'ts

### Do

- `LINESeed` フォントをディスプレイ・見出しに使用する（フォールバックは `Noto Sans JP`）
- ヒーロー背景にダークオーバーレイ (`rgba(0,0,0,0.85)`) を使用し、白テキストとのコントラストを確保する
- ダウンロード系 CTA はゴーストボタン（白ボーダー・白テキスト）で実装する（ダーク背景上）
- セクション背景は `#f6f7f8` / `#f7f8f9` の微妙に異なるトーンを交互に使い奥行きを表現する
- モバイルファーストで設計し、879px で `.onlyPc` / `.onlySp` を分岐させる
- ブランドグリーンは公式値 `#06C755` を使用する（ウェブ実装値 `#07b53b` はレガシー参照）

### Don't

- ロゴに色変更・グラデーション・影を加えない
- ブランドグリーンを本文テキストに多用しない（CTA・アクセント限定）
- `font-weight: 400` で LINESeed を使わない（LINESeed は 700 のみ配信されている）
- セクション間の余白を 30px 以下に詰めすぎない（最小 30px、大型セクションは 85px）
- ヒーロー画像にテキストを直接重ねる際はオーバーレイなしで使用しない（視認性確保のため必須）

{
  "$schema": "https://aistyles.dev/schema/tokens-v1.json",
  "version": "1.0",
  "brand": {
    "slug": "line",
    "name": "LINE",
    "url": "https://www.line.me/ja/",
    "description": "LY Corporation が運営するメッセージングプラットフォーム。タグライン『Life on LINE』のとおり、コミュニケーションを日常の一部に溶け込ませることを目指す。ビジュアルアイデンティティは専用書体『LINESeed』と『Forest Green (#06C755)』を核に構築されており、清潔感と国際対応 (日本語・英語・韓国語・中国語・タイ語・インドネシア語) を両立させたデジタルファーストの設計。2021 年に LINE Design System (LDSM) が発表され、30 色のコアカラーパレットに統一された。",
    "category": "tech",
    "tags": [
      "messaging",
      "japanese",
      "multilingual",
      "forest-green",
      "lineseed",
      "design-system",
      "platform",
      "ldsm"
    ],
    "theme": "light",
    "language": "ja"
  },
  "sources": [
    "https://www.line.me/ja/",
    "https://www.line.me/static/css/index.min.css",
    "https://www.line.me/en/logo",
    "https://brandpalettes.com/line-colors/",
    "https://brandpalettes.com/line-logo-green-colors/",
    "https://designsystem.line.me/LDSM/foundation/color/line-color-guide-ex-en",
    "https://designsystem.line.me/LDSM/foundation/typography-ex-en"
  ],
  "extractedAt": "2026-05-17",
  "notes": [
    "直接証拠: www.line.me/static/css/index.min.css から全色値・フォント・スペーシングを抽出。",
    "直接証拠: www.line.me/en/logo よりロゴ使用ガイドラインを確認。",
    "直接証拠: brandpalettes.com より公式ブランドカラー (Green #06C755, Pantone PMS 361 C) を確認。",
    "公式散文: LINE Design System ドキュメントは JS レンダリングのため内容取得不可。デザインシステム名は『LDSM (LINE Design System for Messenger)』と確認済み。",
    "公式散文: 2021 年に Forest Green を公式アイデンティティカラーに制定、30 色のコアカラーパレットを整備。",
    "推論: ウェブサイト CSS の #07b53b と公式ブランドドキュメントの #06C755 は微妙に異なる。ウェブサイト実装値として #07b53b を記録し、公式ブランドシステム値として #06C755 を注記。",
    "推論: LINE Design System は LDSM (Messenger) と LDSG (Global Family Services) の 2 系統に分かれており、line.me は LDSG 系に近い。",
    "重要: 新規開発では公式値 #06C755 を優先する。レガシー実装の参照値として #07b53b を保持。",
    "重要: LINESeed フォントは font-weight: 700 のみ配信されている — Regular ウェイトでの使用禁止。"
  ],
  "colors": {
    "groups": [
      {
        "label": "Brand Green",
        "tokens": [
          {
            "name": "Forest Green (Official)",
            "value": "#06C755",
            "token": "--color-green-official",
            "role": "公式アイデンティティカラー。Pantone PMS 361 C。『成長と善良さ』を象徴。ロゴ・CTA・強調要素 (新規実装はこちらを使う)"
          },
          {
            "name": "Brand Green (Web Implementation)",
            "value": "#07b53b",
            "token": "--color-green-web",
            "role": "www.line.me の CSS で実際に使われている緑。ロゴ下ライン・ホバー色 (レガシー参照値)"
          }
        ]
      },
      {
        "label": "Text & Surface",
        "tokens": [
          {
            "name": "Near Black",
            "value": "#1e1e1e",
            "token": "--color-near-black",
            "role": "本文テキスト・フッターリンク・ナビゲーション (純黒ではなく僅かに柔らかい黒)"
          },
          {
            "name": "Black",
            "value": "#000000",
            "token": "--color-black",
            "role": "オーバーレイ用 (rgba ベース色として使用)"
          },
          {
            "name": "White",
            "value": "#ffffff",
            "token": "--color-white",
            "role": "背景・カード・ヘッダー背景"
          },
          {
            "name": "Surface Light",
            "value": "#f6f7f8",
            "token": "--color-surface-light",
            "role": "communication・banner セクション背景"
          },
          {
            "name": "Surface Lighter",
            "value": "#f7f8f9",
            "token": "--color-surface-lighter",
            "role": "allProduct・singleBanner セクション背景 (Surface Light と僅かに違うトーン)"
          }
        ]
      },
      {
        "label": "Neutrals (Gray Scale)",
        "tokens": [
          {
            "name": "Gray Dark",
            "value": "#616161",
            "token": "--color-gray-dark",
            "role": "副次テキスト・ラベル"
          },
          {
            "name": "Gray Mid",
            "value": "#777777",
            "token": "--color-gray-mid",
            "role": "プレースホルダー・補足情報"
          },
          {
            "name": "Gray Light",
            "value": "#999999",
            "token": "--color-gray-light",
            "role": "非アクティブ要素"
          },
          {
            "name": "Gray Muted",
            "value": "#b2b2b2",
            "token": "--color-gray-muted",
            "role": "薄い補足テキスト"
          },
          {
            "name": "Border",
            "value": "#cccccc",
            "token": "--color-border",
            "role": "区切り線・インプット枠"
          }
        ]
      },
      {
        "label": "Overlays",
        "tokens": [
          {
            "name": "Overlay Light",
            "value": "rgba(0,0,0,0.2)",
            "token": "--color-overlay-light",
            "role": "フッター区切り・画像オーバーレイ・アイコン区切り"
          },
          {
            "name": "Overlay Heavy",
            "value": "rgba(0,0,0,0.85)",
            "token": "--color-overlay-heavy",
            "role": "モーダルまたは重い背景オーバーレイ (ヒーローのダーク化)"
          },
          {
            "name": "Overlay Text",
            "value": "rgba(30,30,30,0.7)",
            "token": "--color-overlay-text",
            "role": "ナビゲーションの半透明テキスト"
          }
        ]
      }
    ]
  },
  "typography": {
    "fonts": [
      {
        "family": "LINESeed",
        "stack": "LINESeed, SFPro, Arial, 'Noto Sans JP', 'Noto Sans KR', sans-serif",
        "weights": [
          700
        ],
        "role": "ディスプレイ・見出し専用書体。WOFF 形式で /static/LINESeed_W_XBd-*.woff として配信 (font-weight: 700 のみ)。Regular ウェイト不可"
      },
      {
        "family": "SFPro / Noto Sans",
        "stack": "SFPro, Arial, 'Noto Sans JP', 'Noto Sans KR', sans-serif",
        "weights": [
          400,
          500,
          700
        ],
        "role": "本文・UI テキスト。プラットフォーム標準フォント (SFPro/Arial) + 多言語フォールバック (Noto Sans JP/KR)"
      },
      {
        "family": "English Only",
        "stack": "SFPro, Arial, sans-serif",
        "weights": [
          400,
          500,
          700
        ],
        "role": "英語専用テキストスタック"
      },
      {
        "family": "Japanese (Korean Excluded)",
        "stack": "SFPro, Arial, 'Noto Sans JP', AppleSDGothicNeo, sans-serif",
        "weights": [
          400,
          500,
          700
        ],
        "role": "日本語専用テキストスタック (Korean を除外)"
      }
    ],
    "scale": [
      {
        "role": "display (Hero)",
        "size": "70px",
        "weight": 700,
        "lineHeight": 1.1,
        "note": "デスクトップ 70px / モバイル 48-60px、LINESeed 700 使用"
      },
      {
        "role": "h1 (Section Heading)",
        "size": "60px",
        "weight": 700,
        "lineHeight": 1.2,
        "note": "デスクトップ 60px / モバイル 40px、LINESeed 700"
      },
      {
        "role": "h2",
        "size": "50px",
        "weight": 700,
        "lineHeight": 1.2,
        "note": "デスクトップ 40-50px / モバイル 28-36px、LINESeed 700"
      },
      {
        "role": "h3 (Service Name)",
        "size": "28px",
        "weight": 500,
        "lineHeight": 1.3,
        "note": "デスクトップ 22-28px / モバイル 18-24px、SFPro/Noto 500-700"
      },
      {
        "role": "body",
        "size": "20px",
        "weight": 400,
        "lineHeight": 1.6,
        "note": "デスクトップ base reset 20px / モバイル 14px"
      },
      {
        "role": "small / label",
        "size": "15px",
        "weight": 400,
        "lineHeight": 1.5,
        "note": "デスクトップ 13-15px / モバイル 12-13px"
      }
    ],
    "japanese": {
      "fontStack": "SFPro, Arial, 'Noto Sans JP', AppleSDGothicNeo, sans-serif",
      "lineHeight": 1.6,
      "letterSpacing": "0",
      "openType": {
        "palt": false,
        "kern": true
      },
      "kinsoku": {
        "wordBreak": "keep-all",
        "lineBreak": "strict"
      },
      "notes": [
        "日本語専用スタックでは Korean (AppleSDGothicNeo は日本語フォールバックとしても機能) を含める",
        "ディスプレイ・見出しは LINESeed (700 のみ) + Noto Sans JP フォールバック",
        "本文は SFPro / Noto Sans JP (400) で日本語の可読性を確保",
        "デスクトップ (min-width: 879px) では body base が 20px にリセットされ、全体スケールが拡大"
      ]
    }
  },
  "spacing": {
    "baseUnit": "8px",
    "tokens": [
      {
        "name": "base",
        "value": "8px",
        "role": "スペーシング単位"
      },
      {
        "name": "section-padding-mobile",
        "value": "0 16px",
        "role": "モバイル左右余白"
      },
      {
        "name": "section-padding-desktop",
        "value": "0 20px",
        "role": "デスクトップ左右余白"
      },
      {
        "name": "section-gap-small",
        "value": "30px",
        "role": "小型セクション間隔 (標準)"
      },
      {
        "name": "section-gap-large",
        "value": "85px",
        "role": "大型セクション間隔 (mainService 等)"
      },
      {
        "name": "max-width",
        "value": "1200px",
        "role": "コンテンツコンテナ最大幅"
      }
    ]
  },
  "breakpoints": {
    "mobile": {
      "value": "≤ 878px",
      "role": "モバイル (.onlySp 表示・base font 14px)"
    },
    "desktop": {
      "value": "≥ 879px",
      "role": "デスクトップ (.onlyPc 表示・base font 20px に拡大)"
    }
  },
  "radius": {
    "s": "4px",
    "m": "8px",
    "l": "10px",
    "xl": "16px",
    "pill": "50px",
    "circle": "50%"
  },
  "components": [
    {
      "type": "button",
      "name": "Download CTA (Ghost on Dark)",
      "description": "Hero ダーク背景上のゴーストボタン。半透明白ボーダー + 白テキスト",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "transparent",
            "color": "#ffffff",
            "border": "1px solid rgba(255,255,255,0.5)",
            "borderRadius": "4px",
            "padding": "0 14px 0 18px",
            "height": "50px",
            "fontSize": "14px",
            "lineHeight": "3.57"
          }
        },
        {
          "label": "Hover",
          "props": {
            "background": "rgba(255,255,255,0.1)",
            "color": "#ffffff",
            "border": "1px solid rgba(255,255,255,0.7)",
            "borderRadius": "4px",
            "padding": "0 14px 0 18px",
            "height": "50px",
            "fontSize": "14px"
          }
        }
      ]
    },
    {
      "type": "link",
      "name": "Footer Download Link",
      "description": "App Store / Google Play / Desktop / Win Store の 4 リンク横並び。区切り線付き",
      "variants": [
        {
          "label": "Default",
          "props": {
            "color": "#1e1e1e",
            "fontSize": "13px",
            "borderRight": "1px solid rgba(0,0,0,0.2)"
          }
        }
      ]
    },
    {
      "type": "card",
      "name": "Service Card",
      "description": "白背景のサービス紹介カード。16px の大きな角丸",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#ffffff",
            "color": "#1e1e1e",
            "borderRadius": "16px",
            "padding": "32px"
          }
        }
      ]
    },
    {
      "type": "icon",
      "name": "App Icon",
      "description": "iOS / Android スタイルの角丸アプリアイコン",
      "variants": [
        {
          "label": "Default (Footer)",
          "props": {
            "width": "40px",
            "height": "40px",
            "borderRadius": "10px",
            "overflow": "hidden"
          }
        },
        {
          "label": "Minimum (Mobile)",
          "props": {
            "width": "40px",
            "height": "40px",
            "borderRadius": "10px"
          }
        },
        {
          "label": "Minimum (Desktop)",
          "props": {
            "width": "20px",
            "height": "20px",
            "borderRadius": "5px"
          }
        }
      ]
    },
    {
      "type": "badge",
      "name": "Product Category (Active)",
      "description": "選択中の製品カテゴリー。ブランドグリーン背景 + 白テキスト",
      "variants": [
        {
          "label": "Active",
          "props": {
            "background": "#07b53b",
            "color": "#ffffff",
            "fontSize": "14px",
            "padding": "8px 16px",
            "borderRadius": "50px"
          }
        },
        {
          "label": "Inactive",
          "props": {
            "background": "#ffffff",
            "color": "#1e1e1e",
            "fontSize": "14px",
            "padding": "8px 16px",
            "borderRadius": "50px",
            "border": "1px solid #cccccc"
          }
        }
      ]
    },
    {
      "type": "nav",
      "name": "Global Navigation",
      "description": "Fixed ヘッダー。スクロール後も常時表示。水平メニュー + 言語セレクター (JP/EN/KR/TW/TH/ID)",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#ffffff",
            "color": "#1e1e1e",
            "position": "fixed",
            "borderBottom": "1px solid rgba(0,0,0,0.2)"
          }
        },
        {
          "label": "Active Item",
          "props": {
            "background": "#ffffff",
            "color": "#1e1e1e",
            "underline": ".currentLine class with #07b53b animated underline"
          }
        }
      ]
    },
    {
      "type": "hero",
      "name": "Hero Section",
      "description": "ビューポート全高、ダークオーバーレイ (rgba(0,0,0,0.85)) + 白テキスト構成",
      "variants": [
        {
          "label": "Default",
          "props": {
            "height": "100vh",
            "overlay": "rgba(0,0,0,0.85)",
            "color": "#ffffff",
            "animation": "起動時に 720px 幅から 100vw へアニメーション拡大",
            "slideTransition": "クロスフェード (opacity + scale 1.5 → 1)"
          }
        }
      ]
    }
  ],
  "guidelines": {
    "do": [
      "LINESeed フォントをディスプレイ・見出しに使用する (フォールバックは Noto Sans JP)",
      "ヒーロー背景にダークオーバーレイ rgba(0,0,0,0.85) を使用し、白テキストとのコントラストを確保する",
      "ダウンロード系 CTA はゴーストボタン (白ボーダー・白テキスト) で実装する (ダーク背景上)",
      "セクション背景は #f6f7f8 / #f7f8f9 の微妙に異なるトーンを交互に使い奥行きを表現する",
      "モバイルファーストで設計し、879px で .onlyPc / .onlySp を分岐させる",
      "ブランドグリーンは公式値 #06C755 を使用する (ウェブ実装値 #07b53b はレガシー参照)",
      "Near Black (#1e1e1e) を本文に使う — 純黒 #000000 ではなく僅かに柔らかい黒",
      "言語切替メニュー (JP/EN/KR/TW/TH/ID) を必ず実装する (国際対応の核心)"
    ],
    "dont": [
      "ロゴに色変更・グラデーション・影を加えない",
      "ブランドグリーンを本文テキストに多用しない (CTA・アクセント限定)",
      "font-weight: 400 で LINESeed を使わない (LINESeed は 700 のみ配信されている)",
      "セクション間の余白を 30px 以下に詰めすぎない (最小 30px、大型セクションは 85px)",
      "ヒーロー画像にテキストを直接重ねる際はオーバーレイなしで使用しない (視認性確保のため必須)",
      "ロゴの最小サイズを下回って使用しない (モバイル 40px / PC 20px / 印刷 10mm)",
      "本文テキストに純黒 #000000 を使わない — Near Black #1e1e1e を使う",
      "デザインシステムにない独自カラーを追加しない (30 色のコアパレットで十分)"
    ]
  }
}