---
version: alpha
name: LION Corporation (ライオン株式会社)
description: 生活用品・衛生用品メーカー。「今日を愛する。LION」をタグラインに、グリーンを主軸としたクリーン・ウェルネス系コーポレートデザイン。
sources:
  - https://www.lion.co.jp/ja/
  - https://www.lion.co.jp/ja/assets/css/all.css
  - https://www.lion.co.jp/ja/assets/css/style.css
notes:
  - all.css と style.css を直接取得して解析。ブランド固有トークンは style.css から、グローバル UI は all.css から抽出。
  - カラーは実CSS値。非公式ブランドカラー名称は推論。
  - タイポグラフィのウェイトは Google Fonts リクエストパラメータから確認。
  - 一部のスペーシングは vw 値で定義されており、px換算は375px基準で記載。
colors:
  primary: "#007a46"
  primary-hover: "#00854c"
  primary-mid: "#00a05c"
  surface-green-light: "#f1f8f5"
  surface-green-subtle: "#f3f8f6"
  surface-green-muted: "#e7eeed"
  text-body: "#202020"
  text-base: "#333333"
  text-secondary: "#555555"
  text-meta: "#93aab9"
  border-default: "#dae0e0"
  border-light: "#dce2e2"
  border-subtle: "#dfe1e2"
  neutral-mid: "#c2cbcc"
  accent-blue: "#0ca7d3"
  accent-blue-dark: "#2f5993"
  accent-blue-medium: "#3055b5"
  accent-yellow: "#e3bb00"
  accent-orange: "#f78832"
  error: "#e81524"
  white: "#ffffff"
typography:
  display:
    fontFamily: '"Jost", serif'
    fontStyle: italic
    fontWeight: 500
    fontSize: "54px (→ 4.154vw at 1300px breakpoint)"
    color: "#007a46"
    usage: セクション見出しの英語ラベル（Products, R&D, Sustainability など）
  body:
    fontFamily: 'YakuHanJPs_Noto, "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif'
    fontSize: "16px (1.6rem)"
    fontSizeMobile: "15px (1.5rem)"
    lineHeight: 1.3
    letterSpacing: "0.06em"
    fontFeatureSettings: '"palt"'
  body-long:
    lineHeight: 1.7
    usage: 本文テキスト、ニュースリスト
  heading-sub:
    fontSize: "13px"
    fontWeight: 500
    marginTop: "5px"
    usage: displayの下に付く日本語サブタイトル
  nav:
    fontFamily: 'YakuHanJPs_Noto, "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif'
    letterSpacing: "0.06em"
    fontFeatureSettings: '"palt"'
  available-weights: [300, 400, 500, 600, 700, 900]
rounded:
  button: "0 0 10px 0"
  button-sm: "0 0 8px 0"
  tag: "3px"
  pill: "50px"
  circle: "50%"
  section-mobile: "0 0 8vw 0"
  notice: "7px"
  brand-motif: "0 0 Xpx 0 — 右下のみ角丸。ブランドシグネチャー形状。"
spacing:
  container-max: "1200px"
  header-max: "1366px"
  body-min: "1000px"
  container-padding-desktop: "30px"
  container-padding-mobile: "5.333vw (~20px at 375px)"
  section-gap-desktop: "40px"
  section-gap-mobile: "8–13.333vw"
  base-scale: "8px (推論: 8/16/24/30/40/60)"
components:
  button-primary:
    backgroundColor: "#ffffff"
    color: "#007a46"
    border: "2px solid #007a46"
    borderRadius: "0 0 10px 0"
    padding: "15px 30px"
    fontSize: "15px"
    fontWeight: 500
    minWidth: "288px"
    maxWidth: "360px"
    transition: "background 0.4s, color 0.4s"
    hover:
      backgroundColor: "#007a46"
      color: "#ffffff"
    mobile:
      padding: "4vw 6.667vw"
      fontSize: "3.733vw"
  button-small:
    height: "60px"
    width: "300px"
    border: "1px solid #007a46"
    borderRadius: "0 0 8px 0"
    color: "#007a46"
    fontSize: "16px"
    hover:
      backgroundColor: "#00854c"
      borderColor: "#00854c"
      color: "#ffffff"
  header:
    position: fixed
    backgroundColor: "#ffffff"
    borderBottom: "1px solid #e7eeed"
    zIndex: 1000
    boxShadow-on-scroll: "0px 0px 8px 1px rgba(0,0,0,0.1)"
    logoWidth: "118px (desktop) / 24vw (mobile)"
    fontFamily: "body stack"
    transition: "top 1s, height 1s, background-color 1s — cubic-bezier(0.55, 0.085, 0, 0.99)"
  footer:
    backgroundColor: "#007a46"
    color: "#ffffff"
    fontFamily: "body stack"
  notice-banner:
    backgroundColor: "#007a46"
    color: "#ffffff"
    borderRadius: "7px"
    padding: "18px 50px"
    fontWeight: 500
  tag-default:
    border: "2px solid"
    borderRadius: "3px"
    fontSize: "13px"
    padding: "3px 10px"
    color: "#202020"
    width: "138px"
    variants:
      green:
        backgroundColor: "#007a46"
        color: "#ffffff"
      gray:
        borderColor: "#93aab9"
      orange:
        borderColor: "#f78832"
      yellow:
        borderColor: "#e3bb00"
      blue:
        borderColor: "#2f5993"
  side-nav:
    borderTop: "3px solid #007a46"
    width: "20%"
    headingFontSize: "18px"
    headingFontWeight: 700
    iconSize: "32px"
    iconBorder: "2px solid #007a46"
    iconBorderRadius: "50%"
  section-heading:
    displayFont: "Jost italic 500 54px"
    displayColor: "#007a46"
    subFont: "NotoSansJP 500 13px"
    subColor: "inherit (#202020)"
    gap: "5px"
  card-link:
    arrowCircle: "25px × 25px, border-radius: 25px, border: 1px solid #007a46"
    hoverColor: "#007a46"
    titleFontSize: "16px"
    transition: "0.3s"
imagery:
  photography: ウェルネス・自然・生活シーンを中心としたナチュラルトーン写真（ヒーロー背景に使用）
  icons: SVG形式。グリーン版（#007a46）とホワイト版（#fff）をペアで使用。ホバー時に切り替わる。
  logo: /ja/assets/img/all/ico_logo.svg（SVG）。118px × auto。ヘッダー左端固定配置。
  arrows: icn-arrow-right-green.svg / icn-arrow-right-white.svg のペアで使用。
---

## 概要

LIONコーポレートサイト（日本語版）のデザインシステム。ライオングリーン (`#007a46`) を唯一のブランドカラーとして全面展開し、清潔感・信頼感を表現する。サブカラー（オレンジ・ブルー・イエロー）はカテゴリタグにのみ使用する。

最大の視覚的特徴は**右下のみ角丸 `border-radius: 0 0 Xpx 0`**というシグネチャー形状。ボタン、コンテンツブロック、セクションラッパーに繰り返し登場する。

---

## カラー

### プライマリ（グリーン系）

| ロール | 値 | 用途 |
|---|---|---|
| primary | `#007a46` | ボタン border/text、リンクホバー、タグ bg、重要バナー bg、フッター bg、デコレーションライン |
| primary-hover | `#00854c` | ボタンホバー bg |
| primary-mid | `#00a05c` | サブアクセント |
| surface-green-light | `#f1f8f5` | セクション背景（最も明るい） |
| surface-green-subtle | `#f3f8f6` | カード背景 |
| surface-green-muted | `#e7eeed` | ヘッダーボーダー、セクション区切り |

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

| ロール | 値 | 用途 |
|---|---|---|
| text-body | `#202020` | メインコンテンツテキスト |
| text-base | `#333` | bodyデフォルト |
| text-secondary | `#555555` | キャプション、補足 |
| text-meta | `#93aab9` | 日付・メタ情報 |
| border-default | `#dae0e0` | 汎用ボーダー |
| neutral-mid | `#c2cbcc` | 非アクティブUI要素 |

### アクセント（カテゴリタグ専用）

| ロール | 値 | カテゴリ |
|---|---|---|
| accent-blue-dark | `#2f5993` | 更新 / プレゼンテーション |
| accent-orange | `#f78832` | IR / 決算 |
| accent-yellow | `#e3bb00` | プレスリリース |
| accent-blue | `#0ca7d3` | その他アクセント |

> **注意:** アクセントカラーはカテゴリタグの `border-color` にのみ使用。背景色やテキスト色への転用は避ける。

---

## タイポグラフィ

### フォント

- **英語ディスプレイ:** `"Jost"` — italic, weight 500。セクション大見出し専用。
- **日本語本文:** `YakuHanJPs_Noto, "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif`
  - YakuHanJPs_Noto は約物（句読点・括弧）幅最適化カスタムサブセット。
  - `font-feature-settings: "palt"` で約物のプロポーショナル化を強制。
  - 使用ウェイト: 300 / 400 / 500 / 600 / 700 / 900

### スケール

| ロール | サイズ | ウェイト | 行間 | 字間 |
|---|---|---|---|---|
| display (英語) | 54px | 500 italic | — | — |
| h2-section | 26px | 500 | 1.3 | 0.06em |
| body | 16px (desktop) / 15px (mobile) | 400 | 1.3 | 0.06em |
| body-long | 16px | 400 | 1.7 | 0.06em |
| label/tag | 13–14px | 400–500 | — | 0.06em |
| meta | 13px | 400 | — | — |

---

## レイアウト

- **コンテナ幅:** 1200px（コンテンツ）/ 1366px（ヘッダー）
- **ボディ最小幅:** 1000px（モバイルでは 100%）
- **コンテナ余白:** 30px（デスクトップ）/ 5.333vw（モバイル）
- **ブレークポイント:**
  - `≤ 767px` : モバイル（vw単位レイアウト）
  - `≥ 768px` : タブレット/デスクトップ
  - `≤ 1260px` : コンテナ余白縮小
  - `≤ 1300px` : ディスプレイフォント縮小

---

## コンポーネント

### ボタン（プライマリ）

```css
/* .mod-btn */
border: 2px solid #007a46;
border-radius: 0 0 10px 0;   /* ← ブランドシグネチャー形状 */
background-color: #fff;
color: #007a46;
padding: 15px 30px;
font-size: 15px;
font-weight: 500;
min-width: 288px;
max-width: 360px;
transition: background 0.4s, color 0.4s;

/* ホバー */
background-color: #007a46;
color: #fff;
```

### ボタン（スモール・インライン）

```css
width: 300px;
height: 60px;
border: 1px solid #007a46;
border-radius: 0 0 8px 0;
color: #007a46;
font-size: 16px;
/* ホバー */
background-color: #00854c;
border-color: #00854c;
color: #fff;
```

### グローバルヘッダー

```css
position: fixed;
top: 0;
z-index: 1000;
background-color: #fff;
border-bottom: 1px solid #e7eeed;
/* スクロール時 */
box-shadow: 0px 0px 8px 1px rgba(0,0,0,0.1);
```

### グローバルフッター

```css
background-color: #007a46;
color: #fff;
```

### お知らせバナー（.top-important）

```css
background-color: #007a46;
color: #fff;
border-radius: 7px;
padding: 18px 50px;
font-weight: 500;
```

### カテゴリタグ

```css
/* ベース */
border: 2px solid;
border-radius: 3px;
font-size: 13px;
padding: 3px 10px;
color: #202020;

/* Green (featured) */
background-color: #007a46; color: #fff;

/* Gray */        border-color: #93aab9;
/* Orange/IR */   border-color: #f78832;
/* Yellow/Press */border-color: #e3bb00;
/* Blue/Update */ border-color: #2f5993;
```

### セクション見出し（.common-headline）

```css
/* .main - 英語ラベル */
font-family: "Jost", serif;
font-style: italic;
font-weight: 500;
font-size: 54px;
color: #007a46;

/* .sub - 日本語サブタイトル */
font-size: 13px;
font-weight: 500;
margin-top: 5px;
```

### サイドナビゲーション

```css
border-top: 3px solid #007a46;
width: 20%;
/* アイコン円 */
width: 32px; height: 32px;
border-radius: 50%;
border: 2px solid #007a46;
```

### カードリンク矢印

```css
width: 25px; height: 25px;
border-radius: 25px;
border: 1px solid #007a46;
/* ホバー */
background-color: #007a46;
/* アイコン切替: icn-arrow-right-green.svg → icn-arrow-right-white.svg */
```

---

## 画像・アセット

- **ヒーロー写真:** 自然・生活シーン・ウェルネスモチーフ。ナチュラルカラー調。
- **アイコン:** SVG形式。`/ja/assets/img/all/` 配下。グリーン版とホワイト版のペア構成。
- **ロゴ:** `/ja/assets/img/all/ico_logo.svg`。横幅 118px（デスクトップ）/ 24vw（モバイル）。
- **SNSアイコン:** PNG形式（`footer-sns-linkedin.png` など）。

---

## ロゴ・商標

- ロゴは SVG で提供。白背景 or グリーン背景でのみ使用が想定される。
- ヘッダー左端に固定配置。ロゴ下部または隣接部への装飾要素の配置は避ける。
- タグライン「今日を愛する。LION」は独立したグラフィック要素として管理（ロゴ本体とは分離）。

---

## Do's and Don'ts

### Do

- ボタンおよびコンテンツブロックには `border-radius: 0 0 Xpx 0`（右下のみ）を使用する
- セクション大見出しには Jost italic を使い、必ず `#007a46` で表示する
- 日本語テキストには `font-feature-settings: "palt"` を必ず付与する
- カテゴリタグの色分けはボーダー色のみで行い、背景色で区別しない（グリーンタグを除く）
- ホバー遷移には `transition: 0.3s` または `0.4s` を使用する
- フッターとお知らせバナーにはブランドグリーン `#007a46` を使用する

### Don't

- アクセントカラー（オレンジ・イエロー・ブルー）を主要 UI やボタンに使用しない
- ボタンやカードに全角の角丸（`border-radius: 8px` など均一値）を使わない — ブランド形状を壊す
- `#007a46` 以外の緑系色（`#5ebf43`, `#2e8b57` など）をブランドカラーとして使用しない
- ディスプレイ見出しに Jost 以外のフォントを使用しない
- 英語のみのフォントスタックで日本語テキストをレンダリングしない

{
  "$schema": "https://aistyles.dev/schema/tokens-v1.json",
  "version": "1.0",
  "brand": {
    "slug": "lion",
    "name": "LION Corporation (ライオン株式会社)",
    "url": "https://www.lion.co.jp/ja/",
    "description": "「今日を愛する。LION」をタグラインに掲げる日本の生活用品・衛生用品メーカーのコーポレートサイト。ライオングリーン (#007a46) を唯一のブランドカラーとして全面展開し、清潔感・信頼感を表現。最大の視覚的特徴は『右下のみ角丸 (border-radius: 0 0 Xpx 0)』というブランドシグネチャー形状で、ボタン・コンテンツブロック・セクションラッパーに繰り返し登場する。",
    "category": "tech",
    "tags": [
      "corporate",
      "japanese",
      "wellness",
      "consumer-goods",
      "green",
      "signature-shape",
      "noto-sans-jp",
      "jost-italic"
    ],
    "theme": "light",
    "language": "ja"
  },
  "sources": [
    "https://www.lion.co.jp/ja/",
    "https://www.lion.co.jp/ja/assets/css/all.css",
    "https://www.lion.co.jp/ja/assets/css/style.css"
  ],
  "extractedAt": "2026-05-17",
  "notes": [
    "直接証拠: all.css と style.css を直接取得して解析。ブランド固有トークンは style.css から、グローバル UI は all.css から抽出。",
    "直接証拠: カラーは実 CSS 値。非公式ブランドカラー名称は推論。",
    "直接証拠: タイポグラフィのウェイトは Google Fonts リクエストパラメータから確認 (300/400/500/600/700/900)。",
    "直接証拠: 一部のスペーシングは vw 値で定義されており、px 換算は 375px 基準で記載。",
    "重要: 『右下のみ角丸 (border-radius: 0 0 Xpx 0)』が LION ブランドのシグネチャー形状 — ボタン・カード・セクションすべてに適用される唯一無二の特徴。",
    "重要: アクセントカラー (オレンジ・イエロー・ブルー) はカテゴリタグの border-color にのみ使用、背景・テキスト色への転用禁止。",
    "重要: YakuHanJPs_Noto は約物 (句読点・括弧) 幅最適化カスタムサブセット、font-feature-settings: 'palt' で約物のプロポーショナル化を強制。"
  ],
  "colors": {
    "groups": [
      {
        "label": "Brand Green",
        "tokens": [
          {
            "name": "Primary (LION Green)",
            "value": "#007a46",
            "token": "--color-primary",
            "role": "ブランドの中核色。ボタン border/text・リンクホバー・タグ bg・重要バナー bg・フッター bg・デコレーションライン"
          },
          {
            "name": "Primary Hover",
            "value": "#00854c",
            "token": "--color-primary-hover",
            "role": "ボタンホバー背景"
          },
          {
            "name": "Primary Mid",
            "value": "#00a05c",
            "token": "--color-primary-mid",
            "role": "サブアクセント"
          }
        ]
      },
      {
        "label": "Surface (Green Tints)",
        "tokens": [
          {
            "name": "Surface Green Light",
            "value": "#f1f8f5",
            "token": "--color-surface-green-light",
            "role": "セクション背景 (最も明るい)"
          },
          {
            "name": "Surface Green Subtle",
            "value": "#f3f8f6",
            "token": "--color-surface-green-subtle",
            "role": "カード背景"
          },
          {
            "name": "Surface Green Muted",
            "value": "#e7eeed",
            "token": "--color-surface-green-muted",
            "role": "ヘッダーボーダー・セクション区切り"
          },
          {
            "name": "Surface White",
            "value": "#ffffff",
            "token": "--color-white",
            "role": "メイン背景・ヘッダー・ボタン基本背景"
          }
        ]
      },
      {
        "label": "Text",
        "tokens": [
          {
            "name": "Text Body",
            "value": "#202020",
            "token": "--color-text-body",
            "role": "メインコンテンツテキスト"
          },
          {
            "name": "Text Base",
            "value": "#333333",
            "token": "--color-text-base",
            "role": "body デフォルト"
          },
          {
            "name": "Text Secondary",
            "value": "#555555",
            "token": "--color-text-secondary",
            "role": "キャプション・補足"
          },
          {
            "name": "Text Meta",
            "value": "#93aab9",
            "token": "--color-text-meta",
            "role": "日付・メタ情報 (グレータグの border-color と同値)"
          }
        ]
      },
      {
        "label": "Border & Neutral",
        "tokens": [
          {
            "name": "Border Default",
            "value": "#dae0e0",
            "token": "--color-border-default",
            "role": "汎用ボーダー"
          },
          {
            "name": "Border Light",
            "value": "#dce2e2",
            "token": "--color-border-light",
            "role": "繊細な区切り"
          },
          {
            "name": "Border Subtle",
            "value": "#dfe1e2",
            "token": "--color-border-subtle",
            "role": "最薄ボーダー"
          },
          {
            "name": "Neutral Mid",
            "value": "#c2cbcc",
            "token": "--color-neutral-mid",
            "role": "非アクティブ UI 要素"
          }
        ]
      },
      {
        "label": "Category Accents (Tag Borders Only)",
        "tokens": [
          {
            "name": "Accent Blue Dark",
            "value": "#2f5993",
            "token": "--color-accent-blue-dark",
            "role": "更新 / プレゼンテーションタグの border-color 専用"
          },
          {
            "name": "Accent Blue Medium",
            "value": "#3055b5",
            "token": "--color-accent-blue-medium",
            "role": "中間ブルー (補助)"
          },
          {
            "name": "Accent Blue",
            "value": "#0ca7d3",
            "token": "--color-accent-blue",
            "role": "その他アクセント"
          },
          {
            "name": "Accent Orange",
            "value": "#f78832",
            "token": "--color-accent-orange",
            "role": "IR / 決算タグの border-color 専用"
          },
          {
            "name": "Accent Yellow",
            "value": "#e3bb00",
            "token": "--color-accent-yellow",
            "role": "プレスリリースタグの border-color 専用"
          }
        ]
      },
      {
        "label": "Status",
        "tokens": [
          {
            "name": "Error",
            "value": "#e81524",
            "token": "--color-error",
            "role": "エラー表示・必須マーク"
          }
        ]
      }
    ]
  },
  "typography": {
    "fonts": [
      {
        "family": "Jost",
        "stack": "'Jost', serif",
        "weights": [
          500
        ],
        "role": "英語ディスプレイ専用 (italic 500)。セクション大見出しの英語ラベル (Products, R&D, Sustainability など)"
      },
      {
        "family": "Noto Sans JP (with YakuHanJPs)",
        "stack": "YakuHanJPs_Noto, 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif",
        "weights": [
          300,
          400,
          500,
          600,
          700,
          900
        ],
        "role": "日本語本文・UI 全般。YakuHanJPs_Noto は約物幅最適化カスタムサブセット。font-feature-settings: 'palt' で約物のプロポーショナル化を強制"
      }
    ],
    "scale": [
      {
        "role": "display (English)",
        "size": "54px",
        "weight": 500,
        "lineHeight": 1.2,
        "letterSpacing": "0",
        "note": "Jost italic 500、color: #007a46。1300px ブレークポイントで 4.154vw に縮小"
      },
      {
        "role": "h2 (section)",
        "size": "26px",
        "weight": 500,
        "lineHeight": 1.3,
        "letterSpacing": "0.06em",
        "note": "日本語セクション見出し"
      },
      {
        "role": "heading-sub",
        "size": "13px",
        "weight": 500,
        "lineHeight": 1.4,
        "note": "display の下に付く日本語サブタイトル、margin-top: 5px"
      },
      {
        "role": "body",
        "size": "16px",
        "weight": 400,
        "lineHeight": 1.3,
        "letterSpacing": "0.06em",
        "note": "デスクトップ本文 (1.6rem)、モバイルは 15px"
      },
      {
        "role": "body-long",
        "size": "16px",
        "weight": 400,
        "lineHeight": 1.7,
        "letterSpacing": "0.06em",
        "note": "本文テキスト・ニュースリストの長文用"
      },
      {
        "role": "body-mobile",
        "size": "15px",
        "weight": 400,
        "lineHeight": 1.3,
        "letterSpacing": "0.06em",
        "note": "モバイル本文 (1.5rem)"
      },
      {
        "role": "label / tag",
        "size": "13px",
        "weight": 500,
        "lineHeight": 1.4,
        "letterSpacing": "0.06em",
        "note": "13-14px の範囲"
      },
      {
        "role": "meta",
        "size": "13px",
        "weight": 400,
        "lineHeight": 1.4,
        "note": "日付・メタ情報"
      }
    ],
    "japanese": {
      "fontStack": "YakuHanJPs_Noto, 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif",
      "lineHeight": 1.3,
      "letterSpacing": "0.06em",
      "openType": {
        "palt": true,
        "kern": true
      },
      "kinsoku": {
        "wordBreak": "keep-all",
        "lineBreak": "strict"
      },
      "notes": [
        "YakuHanJPs_Noto は約物 (句読点・括弧) 幅最適化カスタムサブセット",
        "font-feature-settings: 'palt' で約物のプロポーショナル化を強制 (必須)",
        "letter-spacing: 0.06em が全テキストの標準値",
        "Regular/Medium/Bold (300-900) の 6 段階運用",
        "本文 line-height: 1.3 (短文)・1.7 (長文) で使い分け"
      ]
    }
  },
  "spacing": {
    "baseUnit": "8px",
    "tokens": [
      {
        "name": "base",
        "value": "8px",
        "role": "推論ベース (8/16/24/30/40/60)"
      },
      {
        "name": "container-padding-desktop",
        "value": "30px",
        "role": "デスクトップ左右余白"
      },
      {
        "name": "container-padding-mobile",
        "value": "5.333vw",
        "role": "モバイル左右余白 (~20px at 375px)"
      },
      {
        "name": "section-gap-desktop",
        "value": "40px",
        "role": "デスクトップセクション間隔"
      },
      {
        "name": "section-gap-mobile",
        "value": "8-13.333vw",
        "role": "モバイルセクション間隔 (vw ベース)"
      },
      {
        "name": "body-min",
        "value": "1000px",
        "role": "ボディ最小幅"
      },
      {
        "name": "container-max",
        "value": "1200px",
        "role": "コンテンツコンテナ最大幅"
      },
      {
        "name": "header-max",
        "value": "1366px",
        "role": "ヘッダー最大幅"
      }
    ]
  },
  "breakpoints": {
    "mobile": {
      "value": "≤ 767px",
      "role": "モバイル (vw 単位レイアウト)"
    },
    "tablet-desktop": {
      "value": "≥ 768px",
      "role": "タブレット/デスクトップ"
    },
    "container-shrink": {
      "value": "≤ 1260px",
      "role": "コンテナ余白縮小"
    },
    "display-shrink": {
      "value": "≤ 1300px",
      "role": "ディスプレイフォント縮小 (54px → vw)"
    }
  },
  "radius": {
    "tag": "3px",
    "notice": "7px",
    "button-sm": "0 0 8px 0",
    "button": "0 0 10px 0",
    "section-mobile": "0 0 8vw 0",
    "pill": "50px",
    "circle": "50%",
    "brand-signature": "0 0 Xpx 0",
    "note": "右下のみ角丸が LION ブランドの核心ルール — 均一な角丸 (border-radius: 8px など) を使わない"
  },
  "components": [
    {
      "type": "button",
      "name": "Primary Button (Brand Signature)",
      "description": "白背景 + グリーン枠 + 右下のみ角丸 10px のブランドシグネチャーボタン。ホバーでグリーン反転",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#ffffff",
            "color": "#007a46",
            "border": "2px solid #007a46",
            "borderRadius": "0 0 10px 0",
            "padding": "15px 30px",
            "fontSize": "15px",
            "fontWeight": "500",
            "minWidth": "288px",
            "maxWidth": "360px",
            "transition": "background 0.4s, color 0.4s"
          }
        },
        {
          "label": "Hover",
          "props": {
            "background": "#007a46",
            "color": "#ffffff",
            "border": "2px solid #007a46",
            "borderRadius": "0 0 10px 0",
            "padding": "15px 30px",
            "fontSize": "15px",
            "fontWeight": "500",
            "minWidth": "288px",
            "maxWidth": "360px",
            "transition": "background 0.4s, color 0.4s"
          }
        }
      ]
    },
    {
      "type": "button",
      "name": "Small Button (Inline)",
      "description": "右下のみ角丸 8px の小型ボタン。インライン使用",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#ffffff",
            "color": "#007a46",
            "border": "1px solid #007a46",
            "borderRadius": "0 0 8px 0",
            "width": "300px",
            "height": "60px",
            "fontSize": "16px",
            "fontWeight": "500"
          }
        },
        {
          "label": "Hover",
          "props": {
            "background": "#00854c",
            "color": "#ffffff",
            "border": "1px solid #00854c",
            "borderRadius": "0 0 8px 0",
            "width": "300px",
            "height": "60px",
            "fontSize": "16px",
            "fontWeight": "500"
          }
        }
      ]
    },
    {
      "type": "nav",
      "name": "Global Header",
      "description": "固定ヘッダー、スクロール時に軽い影が出る。1秒の遅いトランジション (cubic-bezier)",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#ffffff",
            "color": "#202020",
            "borderBottom": "1px solid #e7eeed",
            "position": "fixed",
            "zIndex": "1000",
            "logoWidth": "118px",
            "transition": "top 1s, height 1s, background-color 1s cubic-bezier(0.55, 0.085, 0, 0.99)"
          }
        },
        {
          "label": "On Scroll",
          "props": {
            "background": "#ffffff",
            "color": "#202020",
            "borderBottom": "1px solid #e7eeed",
            "boxShadow": "0px 0px 8px 1px rgba(0,0,0,0.1)",
            "position": "fixed",
            "zIndex": "1000"
          }
        }
      ]
    },
    {
      "type": "footer",
      "name": "Global Footer",
      "description": "ブランドグリーン全面背景の白文字フッター",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#007a46",
            "color": "#ffffff",
            "fontFamily": "YakuHanJPs_Noto, 'Noto Sans JP', sans-serif",
            "letterSpacing": "0.06em"
          }
        }
      ]
    },
    {
      "type": "alert",
      "name": "Notice Banner",
      "description": "グリーン背景の重要なお知らせバナー。角丸 7px",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#007a46",
            "color": "#ffffff",
            "borderRadius": "7px",
            "padding": "18px 50px",
            "fontWeight": "500"
          }
        }
      ]
    },
    {
      "type": "badge",
      "name": "Category Tag",
      "description": "カテゴリ別にボーダー色を切り替えるタグ。背景色は使わない (グリーンタグを除く)",
      "variants": [
        {
          "label": "Green (Featured)",
          "props": {
            "background": "#007a46",
            "color": "#ffffff",
            "border": "2px solid #007a46",
            "borderRadius": "3px",
            "fontSize": "13px",
            "padding": "3px 10px",
            "width": "138px"
          }
        },
        {
          "label": "Gray (General)",
          "props": {
            "background": "transparent",
            "color": "#202020",
            "border": "2px solid #93aab9",
            "borderRadius": "3px",
            "fontSize": "13px",
            "padding": "3px 10px",
            "width": "138px"
          }
        },
        {
          "label": "Orange (IR)",
          "props": {
            "background": "transparent",
            "color": "#202020",
            "border": "2px solid #f78832",
            "borderRadius": "3px",
            "fontSize": "13px",
            "padding": "3px 10px",
            "width": "138px"
          }
        },
        {
          "label": "Yellow (Press)",
          "props": {
            "background": "transparent",
            "color": "#202020",
            "border": "2px solid #e3bb00",
            "borderRadius": "3px",
            "fontSize": "13px",
            "padding": "3px 10px",
            "width": "138px"
          }
        },
        {
          "label": "Blue (Update)",
          "props": {
            "background": "transparent",
            "color": "#202020",
            "border": "2px solid #2f5993",
            "borderRadius": "3px",
            "fontSize": "13px",
            "padding": "3px 10px",
            "width": "138px"
          }
        }
      ]
    },
    {
      "type": "heading",
      "name": "Section Heading (.common-headline)",
      "description": "Jost italic 54px の英語ラベル + Noto Sans JP 13px の日本語サブタイトル",
      "variants": [
        {
          "label": "Default",
          "props": {
            "displayFont": "'Jost', serif italic 500",
            "displaySize": "54px",
            "displayColor": "#007a46",
            "subFont": "YakuHanJPs_Noto, 'Noto Sans JP' 500",
            "subSize": "13px",
            "subColor": "#202020",
            "gap": "5px"
          }
        }
      ]
    },
    {
      "type": "nav",
      "name": "Side Navigation",
      "description": "上部にグリーン 3px ボーダー、円形アイコン (32px) + グリーン枠",
      "variants": [
        {
          "label": "Default",
          "props": {
            "borderTop": "3px solid #007a46",
            "width": "20%",
            "headingFontSize": "18px",
            "headingFontWeight": "700",
            "iconSize": "32px",
            "iconBorder": "2px solid #007a46",
            "iconBorderRadius": "50%"
          }
        }
      ]
    },
    {
      "type": "link",
      "name": "Card Link with Arrow Circle",
      "description": "矢印円形 (25px) 付きのカードリンク。ホバーで円が塗りつぶしになり、アイコンが green → white に切替",
      "variants": [
        {
          "label": "Default",
          "props": {
            "arrowSize": "25px",
            "arrowBorderRadius": "25px",
            "arrowBorder": "1px solid #007a46",
            "arrowBackground": "transparent",
            "iconColor": "#007a46",
            "titleFontSize": "16px",
            "transition": "0.3s"
          }
        },
        {
          "label": "Hover",
          "props": {
            "arrowSize": "25px",
            "arrowBorderRadius": "25px",
            "arrowBorder": "1px solid #007a46",
            "arrowBackground": "#007a46",
            "iconColor": "#ffffff",
            "titleColor": "#007a46",
            "titleFontSize": "16px",
            "transition": "0.3s"
          }
        }
      ]
    }
  ],
  "guidelines": {
    "do": [
      "ボタンおよびコンテンツブロックには border-radius: 0 0 Xpx 0 (右下のみ) を使用する — ブランドシグネチャー形状",
      "セクション大見出しには Jost italic を使い、必ず #007a46 で表示する",
      "日本語テキストには font-feature-settings: 'palt' を必ず付与する",
      "letter-spacing: 0.06em を全テキストの標準値として適用する",
      "カテゴリタグの色分けはボーダー色のみで行い、背景色で区別しない (グリーンタグを除く)",
      "ホバー遷移には transition: 0.3s または 0.4s を使用する",
      "フッターとお知らせバナーにはブランドグリーン #007a46 を使用する",
      "ヒーロー写真は自然・ウェルネス・生活シーンのナチュラルカラー調を選ぶ",
      "矢印アイコンは green/white のペア SVG を用意し、ホバーで切り替える"
    ],
    "dont": [
      "アクセントカラー (オレンジ #f78832・イエロー #e3bb00・ブルー #2f5993) を主要 UI やボタンに使用しない",
      "ボタンやカードに全角の角丸 (border-radius: 8px など均一値) を使わない — ブランド形状を壊す",
      "#007a46 以外の緑系色 (#5ebf43, #2e8b57 など) をブランドカラーとして使用しない",
      "ディスプレイ見出しに Jost 以外のフォントを使用しない",
      "英語のみのフォントスタックで日本語テキストをレンダリングしない (YakuHanJPs_Noto は必須)",
      "カテゴリタグの背景色をアクセントカラーで塗らない (border-color のみ)",
      "letter-spacing: 0.06em を省略しない",
      "ロゴ下部または隣接部への装飾要素配置を行わない"
    ]
  }
}