---
version: alpha
name: FamilyMart
description: 日本最大手コンビニエンスストアチェーン。緑と青の2色ロゴを基軸に、清潔感・親しみやすさ・利便性を体現したリテール向けデザインシステム。
sources:
  - https://www.family.co.jp/
  - https://www.family.co.jp/etc/designs/family/component/css/common.css
  - https://www.family.co.jp/etc/designs/family/component/css/top.css
  - https://www.family.co.jp/company.html
notes:
  - common.css・top.css を直接取得し、セレクター名と値を確認した（直接証拠）。
  - ロゴ PNG を取得し目視で確認。緑ブロック上・青ブロック下の2段構成。
  - CSS カスタムプロパティ（変数）は使用されておらず、すべてハードコード値。
  - サイドバー幅・ヒーロー高さ等は CSS から実測値として取得（直接証拠）。
  - フォントサイズは rem ベースで `html { font-size: 0.94rem }` を基準に計算。
colors:
  primary-blue: "#0171a6"
  primary-blue-hover: "#026da0"
  primary-blue-button: "#0095da"
  primary-blue-accent: "#0296e6"
  primary-green: "#00ab4e"
  primary-green-dark: "#01873f"
  primary-green-active: "#007a39"
  primary-green-nav-border: "#1bac4a"
  text-primary: "#313131"
  text-secondary: "#535353"
  text-muted: "#747474"
  text-placeholder: "#707070"
  text-disabled: "#999"
  border-standard: "#dcdcdc"
  border-medium: "#b5b5b5"
  border-light: "#efefef"
  border-input: "#c0c0c0"
  surface-white: "#ffffff"
  surface-light: "#f5f5f5"
  surface-subtle: "#fafafa"
  surface-wash: "#eeeeee"
  surface-input: "#f9f9f9"
  accent-blue-tint: "#cdebff"
  accent-green-tint: "#80d5a7"
  accent-map-bg: "rgba(15, 70, 100, 0.12)"
  status-red: "#f43434"
  status-red-bright: "#f10101"
  status-orange: "#fbac23"
  status-pink: "#ff4a64"
  status-teal: "#008bcc"
  link-visited: "#663399"
  overlay: "rgba(0, 0, 0, 0.5)"
typography:
  base:
    fontFamily: '"Noto Sans JP", sans-serif'
    fontSize: "0.94rem"
    lineHeight: "1.6"
    color: "#313131"
  display:
    fontSize: "2em"
    fontWeight: "500"
    color: "#313131"
  h1:
    fontSize: "2em"
    fontWeight: "500"
  nav-primary:
    fontSize: "1.2rem"
    fontWeight: "500"
    color: "#313131"
  nav-secondary:
    fontSize: "1.0325rem"
    fontWeight: "500"
  body:
    fontSize: "0.94rem"
    lineHeight: "1.6"
  label:
    fontSize: "0.8rem"
  small:
    fontSize: "0.73333rem"
  button:
    fontSize: "1.15385rem"
  breadcrumb:
    fontSize: "0.76666rem"
  icon-font:
    fontFamily: '"icn_font"'
rounded:
  input: "3px"
  image: "8px"
  card: "8px"
  button: "25px"
  pill: "30px"
spacing:
  xs: "5px"
  sm: "10px"
  md: "15px"
  lg: "20px"
  xl: "28px"
  2xl: "30px"
  3xl: "40px"
  4xl: "50px"
  section: "80px"
  container-padding-desktop: "40px"
  container-padding-mobile: "15px"
  container-max-width: "1200px"
  sidebar-width: "216px"
  sidebar-gap: "30px"
components:
  button-primary:
    backgroundColor: "#0095da"
    color: "#ffffff"
    borderRadius: "25px"
    padding: "10px 28px"
    border: "2px solid #ddd"
    fontSize: "1.15385rem"
    transition: "all 0.2s"
    hover-border: "2px solid #0171a6"
  button-ghost:
    backgroundColor: "transparent"
    border: "2px solid #ddd"
    borderRadius: "25px"
    padding: "10px 28px"
    transition: "all 0.2s"
  link:
    color: "#0171a6"
    textDecoration: "none"
    hover-color: "#026da0"
    hover-textDecoration: "underline"
    visited-color: "#663399"
  link-hover-opacity:
    transition: "all 0.2s"
    hover-opacity: "0.7"
  nav-global:
    height: "71px"
    fontSize: "1.2rem"
    fontWeight: "500"
    color: "#313131"
    underline-color: "#00ab4e"
    underline-height: "3px"
    underline-animation: "transform 0.3s"
  nav-side:
    border-top: "5px solid #1bac4a"
    padding: "28px 10px"
    item-border: "1px solid #dcdcdc"
    item-padding: "15px 5px 15px 10px"
    item-hover-color: "#01873f"
    active-color: "#01873f"
  input-text:
    borderRadius: "3px"
    backgroundColor: "#f9f9f9"
    color: "#313131"
    fontFamily: '"Noto Sans JP", sans-serif'
    border: "none"
    height: "23px"
    padding: "0 28px 0 10px"
    transition: "all 0.5s ease-out"
  input-mobile:
    borderRadius: "30px"
    height: "50px"
    border: "1px solid #dcdcdc"
    padding: "0 20px"
  notice-important:
    border: "2px solid #f43434"
  hero-carousel:
    height: "360px"
    transition: "opacity"
    inactive-opacity: "0.5"
    active-opacity: "1"
  card-image:
    borderRadius: "8px"
  divider-solid:
    border-top: "1px solid #b5b5b5"
    margin: "80px 0"
---

## 概要

FamilyMart（ファミリーマート）は日本国内に約16,000店以上を展開するコンビニエンスストアチェーン。タグライン「あなたと、コンビに、ファミリーマート」が示すとおり、**地域に寄り添う家族的な親しみやすさ**と**日常の利便性**をブランドの核に置く。

デジタルサービス（FamiPay・アプリ）への注力や、サステナビリティへの取り組みを積極的に発信しており、ウェブデザインは清潔感・情報の見やすさ・モバイルファーストを重視している。

---

## カラー

### ブランドコア 2色
FamilyMart のアイデンティティはロゴの **緑+青** 2色ブロックで確立されている。

| 役割 | 値 | 用途 |
|---|---|---|
| **Primary Green** | `#00ab4e` | ナビゲーションアンダーライン、アクセントボーダー、バッジ |
| **Primary Green Dark** | `#01873f` | グリーンホバー・アクティブ状態 |
| **Primary Green Active** | `#007a39` | フォーカス・選択状態 |
| **Nav Border Green** | `#1bac4a` | サイドナビゲーション上部ボーダー（5px）|
| **Primary Blue** | `#0171a6` | リンク色、インタラクティブ要素 |
| **Primary Blue Hover** | `#026da0` | リンクホバー |
| **Button Blue** | `#0095da` | CTA ボタン背景色 |
| **Accent Blue** | `#0296e6` | トップカルーセル・ハイライト |

**使用上の注意:**
- 緑（`#00ab4e`）は装飾的なアクセントに使う。背景に大きく使うと読みやすさが落ちる。
- 青（`#0171a6`）はすべてのリンクとインタラクティブ要素のデフォルト。
- この2色を同じコンポーネント内で競合させない（ロゴのみ2色を並置する）。

### テキスト
| 役割 | 値 | 用途 |
|---|---|---|
| Text Primary | `#313131` | 本文・見出し（ほぼ黒） |
| Text Secondary | `#535353` | ラベル・補助テキスト |
| Text Muted | `#747474` | メタ情報・二次的説明 |
| Text Placeholder | `#707070` | フォーム入力プレースホルダー |
| Text Disabled | `#999` | 無効状態 |
| Link Visited | `#663399` | 訪問済みリンク（標準ブラウザ紫） |

### 背景・サーフェス
| 役割 | 値 | 用途 |
|---|---|---|
| Surface White | `#ffffff` | メインコンテンツ背景 |
| Surface Light | `#f5f5f5` | セクション区切り背景 |
| Surface Subtle | `#fafafa` | カード・パネル |
| Surface Wash | `#eeeeee` | 薄い区切り |
| Surface Input | `#f9f9f9` | 検索フォーム背景 |
| Accent Blue Tint | `#cdebff` | マップセクション背景 |
| Accent Green Tint | `#80d5a7` | ハイライト背景 |

### ボーダー
| 役割 | 値 |
|---|---|
| Border Standard | `#dcdcdc` |
| Border Medium | `#b5b5b5` |
| Border Light | `#efefef` |
| Border Input | `#c0c0c0` |

### ステータス
| 役割 | 値 | 用途 |
|---|---|---|
| Status Red | `#f43434` | 重要なお知らせ・エラーボーダー |
| Status Red Bright | `#f10101` | アラート |
| Status Orange | `#fbac23` | 警告・キャンペーン強調 |
| Status Pink | `#ff4a64` | プロモーション・セール |
| Status Teal | `#008bcc` | 情報系バッジ |

---

## タイポグラフィ

**ベースフォント:** `"Noto Sans JP", sans-serif`  
日本語テキストに最適化された Google Fonts のオープンソース書体。英数字も含めてこの1ファミリーで統一されており、別途欧文フォントの指定はない。

**アイコンフォント:** `"icn_font"` — サイト固有のカスタムアイコンフォント。外部リンク・PDF・矢印などを管理している。

### サイズスケール

| レベル | 値 | px換算（base=15px） | 用途 |
|---|---|---|---|
| Display / h1 | `2em` | ~30px | ページタイトル |
| Nav Primary | `1.2rem` | ~18px | グローバルナビゲーション |
| Nav Secondary | `1.0325rem` | ~15.5px | サブナビ項目 |
| Body | `0.94rem` | ~14px | 本文 |
| Button | `1.15385rem` | ~17px | CTA ボタン |
| Breadcrumb | `0.76666rem` | ~11.5px | パンくずリスト |
| Small | `0.73333rem` | ~11px | 注記・補足 |

**ベース:** `html { font-size: 0.94rem }` — フォントサイズ調整クラスで `ly-sizeS / ly-sizeM / ly-sizeL` が定義されており、アクセシビリティ対応の段階的調整が可能。

**フォントウェイト:** 本文 `normal`、見出し・ナビゲーション `500`。

---

## レイアウト

### グリッド・コンテナ
```css
/* デスクトップ */
.ly-wrp-cts {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
}

/* モバイル */
@media (max-width: 736px) {
  .ly-wrp-cts { padding: 0; }
  .ly-wrp-sp-cts { margin: 0 15px; }
}
```

### 2カラムレイアウト（コンテンツ + サイドバー）
```css
/* メインコンテンツ */
width: calc(100% - 246px);  /* サイドバー216px + ギャップ30px */

/* サイドバー */
width: 216px;
```
モバイルでは両者とも `width: 100%` に切り替わる。

### ブレークポイント
| 種別 | 値 |
|---|---|
| Mobile | `max-width: 736px` |
| Desktop | `min-width: 737px` |

### Z-index スタック
| 値 | 要素 |
|---|---|
| 500 | ヘッダーエリア（固定） |
| 105 | ロゴ、メニューボタン、検索ボタン |
| 101 | モバイルヘッダー、言語セレクター |
| 100 | ナビオーバーレイ、検索バックドロップ |
| 90 | ページオーバーレイ（`.ly-ov-page`） |

---

## コンポーネント

### ボタン
**Primary CTA:**
```css
background-color: #0095da;
color: #ffffff;
border-radius: 25px;
padding: 10px 28px;
border: 2px solid #ddd;
font-size: 1.15385rem;
transition: all 0.2s;
/* hover */
border-color: #0171a6;
```

**Ghost / Secondary:**
```css
background-color: transparent;
border: 2px solid #ddd;
border-radius: 25px;
padding: 10px 28px;
transition: all 0.2s;
```

**幅バリエーション:** `100px`, `110px`, `120px`（モジュール指定）またはテキスト依存の `auto`。

### リンク
```css
a:link    { color: #0171a6; text-decoration: none; }
a:hover   { color: #026da0; text-decoration: underline; }
a:visited { color: #663399; text-decoration: none; }

/* 画像リンクのフェード */
a.ly-hovr:hover { opacity: 0.7; transition: all 0.2s; }
```

### グローバルナビゲーション
- 高さ: `71px`（デスクトップ）
- ホバー時にアイテム下部から緑（`#00ab4e`）の3pxラインがスライドイン
- アニメーション: `transform: scale(0,1) → scale(1,1)` で `0.3s`

```css
.ly-gnav-list > li a::after {
  background: #00ab4e;
  height: 3px;
  transform: scale(0, 1);
  transition: transform .3s;
}
.ly-gnav-list > li a:hover::after {
  transform: scale(1, 1);
}
```

### サイドバーナビゲーション
```css
/* タイトル */
border-top: 5px solid #1bac4a;
padding: 28px 10px;
font-size: 1.2rem;
font-weight: 500;
color: #535353;

/* 項目 */
border-bottom: 1px solid #dcdcdc;
padding: 15px 5px 15px 10px;
font-size: 1.0325rem;
font-weight: 500;
/* hover/active */
color: #01873f;
```

### フォーム（検索入力）
```css
/* デスクトップ */
border-radius: 3px;
background-color: #f9f9f9;
height: 23px;
padding: 0 28px 0 10px;
font-family: "Noto Sans JP", sans-serif;
transition: all 0.5s ease-out;

/* モバイル */
border-radius: 30px;
height: 50px;
border: 1px solid #dcdcdc;
padding: 0 20px;
```

### ヒーローカルーセル
```css
height: 360px;
opacity: 0.5;           /* 非アクティブ */
opacity: 1;             /* アクティブ（.slick-center） */
```
画像は PC 用（1200×370px）とスマホ用（`_sp` サフィックス付き）を別アセットで管理。

### カード・サムネイル
- 標準サムネイルサイズ: `300×300px`
- 画像の `border-radius: 8px`
- ホバー時は `.ly-hovr` クラスで `opacity: 0.7`

### 重要なお知らせ
```css
border: 2px solid #f43434;
```

### ページトップボタン
```css
width: 50px;
height: 51px;
opacity: 0;                   /* 非表示時 */
transition: all 0.3s;
/* .ly-pagetop-show 追加時 */
opacity: 1;
```

---

## イメージ・ビジュアルトーン

- **写真スタイル:** 明るく清潔感のある商品・店舗写真。自然光ベースのトーン。派手な加工は使わない。
- **サムネイルグリッド:** 300×300px 正方形サムネイルを4列グリッドで配置するのが標準パターン。
- **アイコン:** SVG 系アイコン（外部リンク・PDF）と `icn_font` カスタムフォントアイコンを併用。カラーは `#0099df`（トグル）、`#999`（標準）。
- **ロゴ:** 左に緑ブロック（上）+青ブロック（下）の2段カラーブロック、右に青テキスト「FamilyMart」。
- **SNS アイコン:** X / Instagram / LINE / Facebook / YouTube / TikTok — 公式チャンネルをフッターに掲出。
- **モーション:** 派手なアニメーションは使わない。`0.2s–0.3s` の短いトランジションで落ち着いた動きに抑える。

---

## ロゴと使用ルール

### ロゴ構成
- **グリーンブロック（上）:** `#00ab4e` 系（直接 SVG 未取得のため CSS 値で近似）
- **ブルーブロック（下）:** `#0095da` 系（同上）
- **テキスト「FamilyMart」:** ブルー（`#0095da` 系）、ブランド専用書体

### 推定される制約（公式ガイドライン原文は未確認・推論）
- ロゴ2色ブロックの色比率・配置を変えない
- 白背景以外へのロゴ配置は専用白抜きまたは対応バリアントを使用
- テキストとカラーブロックを分離しない

---

## Do's and Don'ts

### Do's
- **グリーン（`#00ab4e`）はアクセント・アンダーラインに使う:** ナビの下線・ボーダーアクセントが典型。
- **ブルー（`#0171a6`）をリンクと CTA に統一する:** 全インタラクティブ要素はこの色でそろえる。
- **Noto Sans JP のみ使う:** 英数字も含めてフォント混在させない。
- **`0.2s–0.3s` のトランジションを使う:** アニメーションは短くシンプルに保つ。
- **コンテナは `max-width: 1200px` + `40px` パディング:** 幅広すぎる行幅を防ぐ。
- **モバイルブレークポイントは `736px`:** この値で一貫する。
- **ボタンは `border-radius: 25px` のピル形状:** 角丸が FamilyMart CTA の標準形。

### Don'ts
- **緑と青を1コンポーネント内で同格に使わない:** ロゴ以外で2色を競合させると混乱を招く。
- **ベースフォントサイズを `0.94rem` より大幅に変えない:** `ly-sizeS/M/L` クラスによる段階的調整が前提。
- **カスタムカラーをむやみに追加しない:** すでに十分なパレットが定義されており、拡張は最小限に。
- **PNG ロゴを直接拡縮しない:** `64×62px` の小サイズ PNG は小さいアバター専用。大きなヘッダーには別アセットを使う。
- **オーバーレイに不透明度 0.5 以上の色を置かない:** `rgba(0,0,0,0.5)` が上限として使われており、それ以上はコンテンツを隠す。
- **サイドバーを `216px` 未満に縮めない:** コンテンツ幅の計算（`calc(100% - 246px)`）がこの値に依存している。

{
  "$schema": "https://aistyles.dev/schema/tokens-v1.json",
  "version": "1.0",
  "brand": {
    "slug": "familymart",
    "name": "FamilyMart (ファミリーマート)",
    "url": "https://www.family.co.jp/",
    "description": "日本国内に約16,000店以上を展開する大手コンビニエンスストアチェーン。タグライン『あなたと、コンビに、ファミリーマート』のとおり、地域に寄り添う家族的な親しみやすさと日常の利便性をブランドの核に置く。ロゴの緑 (#00ab4e) + 青 (#0095da) 2色ブロックを軸にしつつ、UI 上では緑をアクセント・青を CTA に役割分離した実用本位のリテール向けデザイン。",
    "category": "ec",
    "tags": [
      "retail",
      "japanese",
      "convenience-store",
      "two-color",
      "noto-sans-jp",
      "mobile-first",
      "consumer"
    ],
    "theme": "light",
    "language": "ja"
  },
  "sources": [
    "https://www.family.co.jp/",
    "https://www.family.co.jp/etc/designs/family/component/css/common.css",
    "https://www.family.co.jp/etc/designs/family/component/css/top.css",
    "https://www.family.co.jp/company.html"
  ],
  "extractedAt": "2026-05-17",
  "notes": [
    "直接証拠: common.css・top.css を直接取得し、セレクター名と値を確認。",
    "直接証拠: ロゴ PNG を取得し目視で確認 (緑ブロック上・青ブロック下の 2 段構成)。",
    "直接証拠: サイドバー幅 (216px)・ヒーロー高さ (360px) 等は CSS から実測値として取得。",
    "注意: CSS カスタムプロパティ (変数) は使用されておらず、すべてハードコード値。",
    "注意: フォントサイズは rem ベースで html { font-size: 0.94rem } を基準に計算。",
    "推論: ロゴ公式ガイドラインの原文は未確認、制約は構造からの推定。",
    "重要: 緑と青を 1 コンポーネント内で同格に使わない — ロゴ以外で 2 色を競合させない、というのが FamilyMart の核心ルール。"
  ],
  "colors": {
    "groups": [
      {
        "label": "Brand Green",
        "tokens": [
          {
            "name": "Primary Green",
            "value": "#00ab4e",
            "token": "--color-primary-green",
            "role": "ナビゲーションアンダーライン・アクセントボーダー・バッジ。背景に大きく使わない"
          },
          {
            "name": "Primary Green Dark",
            "value": "#01873f",
            "token": "--color-primary-green-dark",
            "role": "グリーンホバー・アクティブ状態"
          },
          {
            "name": "Primary Green Active",
            "value": "#007a39",
            "token": "--color-primary-green-active",
            "role": "フォーカス・選択状態"
          },
          {
            "name": "Nav Border Green",
            "value": "#1bac4a",
            "token": "--color-primary-green-nav-border",
            "role": "サイドナビゲーション上部ボーダー (5px)"
          }
        ]
      },
      {
        "label": "Brand Blue",
        "tokens": [
          {
            "name": "Primary Blue",
            "value": "#0171a6",
            "token": "--color-primary-blue",
            "role": "リンク色・インタラクティブ要素のデフォルト"
          },
          {
            "name": "Primary Blue Hover",
            "value": "#026da0",
            "token": "--color-primary-blue-hover",
            "role": "リンクホバー状態"
          },
          {
            "name": "Button Blue",
            "value": "#0095da",
            "token": "--color-primary-blue-button",
            "role": "CTA ボタン背景色"
          },
          {
            "name": "Accent Blue",
            "value": "#0296e6",
            "token": "--color-primary-blue-accent",
            "role": "トップカルーセル・ハイライト"
          }
        ]
      },
      {
        "label": "Text",
        "tokens": [
          {
            "name": "Text Primary",
            "value": "#313131",
            "token": "--color-text-primary",
            "role": "本文・見出し (ほぼ黒)"
          },
          {
            "name": "Text Secondary",
            "value": "#535353",
            "token": "--color-text-secondary",
            "role": "ラベル・補助テキスト"
          },
          {
            "name": "Text Muted",
            "value": "#747474",
            "token": "--color-text-muted",
            "role": "メタ情報・二次的説明"
          },
          {
            "name": "Text Placeholder",
            "value": "#707070",
            "token": "--color-text-placeholder",
            "role": "フォーム入力プレースホルダー"
          },
          {
            "name": "Text Disabled",
            "value": "#999999",
            "token": "--color-text-disabled",
            "role": "無効状態のテキスト"
          },
          {
            "name": "Link Visited",
            "value": "#663399",
            "token": "--color-link-visited",
            "role": "訪問済みリンク (標準ブラウザ紫)"
          }
        ]
      },
      {
        "label": "Surface",
        "tokens": [
          {
            "name": "Surface White",
            "value": "#FFFFFF",
            "token": "--color-surface-white",
            "role": "メインコンテンツ背景"
          },
          {
            "name": "Surface Light",
            "value": "#f5f5f5",
            "token": "--color-surface-light",
            "role": "セクション区切り背景"
          },
          {
            "name": "Surface Subtle",
            "value": "#fafafa",
            "token": "--color-surface-subtle",
            "role": "カード・パネル"
          },
          {
            "name": "Surface Wash",
            "value": "#eeeeee",
            "token": "--color-surface-wash",
            "role": "薄い区切り"
          },
          {
            "name": "Surface Input",
            "value": "#f9f9f9",
            "token": "--color-surface-input",
            "role": "検索フォーム背景"
          },
          {
            "name": "Accent Blue Tint",
            "value": "#cdebff",
            "token": "--color-accent-blue-tint",
            "role": "マップセクション背景"
          },
          {
            "name": "Accent Green Tint",
            "value": "#80d5a7",
            "token": "--color-accent-green-tint",
            "role": "ハイライト背景"
          },
          {
            "name": "Map Background",
            "value": "rgba(15, 70, 100, 0.12)",
            "token": "--color-accent-map-bg",
            "role": "マップ系コンテンツの薄い背景"
          }
        ]
      },
      {
        "label": "Border",
        "tokens": [
          {
            "name": "Border Standard",
            "value": "#dcdcdc",
            "token": "--color-border-standard",
            "role": "標準ボーダー (カード・区切り線)"
          },
          {
            "name": "Border Medium",
            "value": "#b5b5b5",
            "token": "--color-border-medium",
            "role": "区切り線 (中間の濃さ)"
          },
          {
            "name": "Border Light",
            "value": "#efefef",
            "token": "--color-border-light",
            "role": "繊細な区切り"
          },
          {
            "name": "Border Input",
            "value": "#c0c0c0",
            "token": "--color-border-input",
            "role": "フォーム入力ボーダー"
          }
        ]
      },
      {
        "label": "Status",
        "tokens": [
          {
            "name": "Status Red",
            "value": "#f43434",
            "token": "--color-status-red",
            "role": "重要なお知らせ・エラーボーダー"
          },
          {
            "name": "Status Red Bright",
            "value": "#f10101",
            "token": "--color-status-red-bright",
            "role": "アラート (より鮮明)"
          },
          {
            "name": "Status Orange",
            "value": "#fbac23",
            "token": "--color-status-orange",
            "role": "警告・キャンペーン強調"
          },
          {
            "name": "Status Pink",
            "value": "#ff4a64",
            "token": "--color-status-pink",
            "role": "プロモーション・セール"
          },
          {
            "name": "Status Teal",
            "value": "#008bcc",
            "token": "--color-status-teal",
            "role": "情報系バッジ"
          },
          {
            "name": "Overlay",
            "value": "rgba(0, 0, 0, 0.5)",
            "token": "--color-overlay",
            "role": "モーダル・ナビオーバーレイ (上限不透明度)"
          }
        ]
      }
    ]
  },
  "typography": {
    "fonts": [
      {
        "family": "Noto Sans JP",
        "stack": "'Noto Sans JP', sans-serif",
        "weights": [
          400,
          500
        ],
        "role": "本文・見出し全般。日本語テキストに最適化された Google Fonts のオープンソース書体。英数字も含めてこの 1 ファミリーで統一"
      },
      {
        "family": "icn_font",
        "stack": "'icn_font'",
        "weights": [
          400
        ],
        "role": "サイト固有のカスタムアイコンフォント。外部リンク・PDF・矢印などを管理 (外部流用不可)"
      }
    ],
    "scale": [
      {
        "role": "display / h1",
        "size": "2em",
        "weight": 500,
        "lineHeight": 1.4,
        "note": "約 30px、ページタイトル"
      },
      {
        "role": "nav-primary",
        "size": "1.2rem",
        "weight": 500,
        "lineHeight": 1.4,
        "note": "約 18px、グローバルナビゲーション"
      },
      {
        "role": "nav-secondary",
        "size": "1.0325rem",
        "weight": 500,
        "lineHeight": 1.4,
        "note": "約 15.5px、サブナビ項目"
      },
      {
        "role": "button",
        "size": "1.15385rem",
        "weight": 500,
        "lineHeight": 1.2,
        "note": "約 17px、CTA ボタン"
      },
      {
        "role": "body",
        "size": "0.94rem",
        "weight": 400,
        "lineHeight": 1.6,
        "note": "約 14px、本文 (html ベースサイズと同値)"
      },
      {
        "role": "label",
        "size": "0.8rem",
        "weight": 400,
        "lineHeight": 1.5,
        "note": "約 12px、ラベル"
      },
      {
        "role": "breadcrumb",
        "size": "0.76666rem",
        "weight": 400,
        "lineHeight": 1.5,
        "note": "約 11.5px、パンくずリスト"
      },
      {
        "role": "small",
        "size": "0.73333rem",
        "weight": 400,
        "lineHeight": 1.5,
        "note": "約 11px、注記・補足"
      }
    ],
    "japanese": {
      "fontStack": "'Noto Sans JP', sans-serif",
      "lineHeight": 1.6,
      "letterSpacing": "0",
      "openType": {
        "palt": false,
        "kern": true
      },
      "kinsoku": {
        "wordBreak": "keep-all",
        "lineBreak": "strict"
      },
      "notes": [
        "Noto Sans JP のみで英数字も含めて統一、別途欧文フォントの指定なし",
        "html { font-size: 0.94rem } を基準に rem ベースで全サイズを計算",
        "本文 line-height: 1.6 で日本語の可読性を確保",
        "ly-sizeS / ly-sizeM / ly-sizeL クラスでアクセシビリティ対応の段階的調整が可能"
      ]
    }
  },
  "spacing": {
    "baseUnit": "5px",
    "tokens": [
      {
        "name": "xs",
        "value": "5px",
        "role": "最小スペーシング"
      },
      {
        "name": "sm",
        "value": "10px",
        "role": "小スペーシング"
      },
      {
        "name": "md",
        "value": "15px",
        "role": "中スペーシング (モバイル左右余白)"
      },
      {
        "name": "lg",
        "value": "20px",
        "role": "大スペーシング"
      },
      {
        "name": "xl",
        "value": "28px",
        "role": "ボタン左右パディング・サイドナビ縦パディング"
      },
      {
        "name": "2xl",
        "value": "30px",
        "role": "サイドバーギャップ"
      },
      {
        "name": "3xl",
        "value": "40px",
        "role": "デスクトップ左右余白"
      },
      {
        "name": "4xl",
        "value": "50px",
        "role": "中間セクション間隔"
      },
      {
        "name": "section",
        "value": "80px",
        "role": "メインセクション間隔 (divider マージン)"
      },
      {
        "name": "sidebar-width",
        "value": "216px",
        "role": "サイドバー固定幅 (これより縮めない)"
      },
      {
        "name": "sidebar-gap",
        "value": "30px",
        "role": "コンテンツ・サイドバー間隔"
      },
      {
        "name": "container-max",
        "value": "1200px",
        "role": "最大コンテンツ幅"
      }
    ]
  },
  "breakpoints": {
    "mobile": {
      "value": "≤ 736px",
      "role": "モバイル (左右余白 15px)"
    },
    "desktop": {
      "value": "≥ 737px",
      "role": "デスクトップ (左右余白 40px・2 カラムレイアウト)"
    }
  },
  "radius": {
    "input": "3px",
    "image": "8px",
    "card": "8px",
    "button": "25px",
    "pill": "30px"
  },
  "components": [
    {
      "type": "button",
      "name": "Primary CTA Button",
      "description": "ブルー背景のピル型 CTA。border-radius 25px が FamilyMart の標準形",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#0095da",
            "color": "#FFFFFF",
            "borderRadius": "25px",
            "padding": "10px 28px",
            "border": "2px solid #ddd",
            "fontSize": "1.15385rem",
            "fontWeight": "500",
            "transition": "all 0.2s"
          }
        },
        {
          "label": "Hover",
          "props": {
            "background": "#0095da",
            "color": "#FFFFFF",
            "borderRadius": "25px",
            "padding": "10px 28px",
            "border": "2px solid #0171a6",
            "fontSize": "1.15385rem",
            "fontWeight": "500",
            "transition": "all 0.2s"
          }
        }
      ]
    },
    {
      "type": "button",
      "name": "Ghost Button",
      "description": "透明背景 + グレー枠線のセカンダリボタン",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "transparent",
            "color": "#313131",
            "borderRadius": "25px",
            "padding": "10px 28px",
            "border": "2px solid #ddd",
            "fontSize": "1.15385rem",
            "transition": "all 0.2s"
          }
        }
      ]
    },
    {
      "type": "link",
      "name": "Text Link",
      "description": "ブルー色のテキストリンク。ホバーで下線、訪問済みは紫",
      "variants": [
        {
          "label": "Default",
          "props": {
            "color": "#0171a6",
            "textDecoration": "none"
          }
        },
        {
          "label": "Hover",
          "props": {
            "color": "#026da0",
            "textDecoration": "underline"
          }
        },
        {
          "label": "Visited",
          "props": {
            "color": "#663399",
            "textDecoration": "none"
          }
        }
      ]
    },
    {
      "type": "nav",
      "name": "Global Navigation",
      "description": "高さ 71px の固定ナビ。ホバー時にアイテム下部から緑 3px ラインがスライドイン",
      "variants": [
        {
          "label": "Default",
          "props": {
            "height": "71px",
            "background": "#FFFFFF",
            "color": "#313131",
            "fontSize": "1.2rem",
            "fontWeight": "500",
            "underlineColor": "#00ab4e",
            "underlineHeight": "3px",
            "underlineAnimation": "transform scale(0,1) → scale(1,1) / 0.3s"
          }
        }
      ]
    },
    {
      "type": "nav",
      "name": "Sidebar Navigation",
      "description": "上部に緑 5px ボーダー + アイテムごとに薄いグレー区切り線",
      "variants": [
        {
          "label": "Default",
          "props": {
            "borderTop": "5px solid #1bac4a",
            "padding": "28px 10px",
            "titleColor": "#535353",
            "titleFontSize": "1.2rem",
            "titleFontWeight": "500",
            "itemBorder": "1px solid #dcdcdc",
            "itemPadding": "15px 5px 15px 10px",
            "itemFontSize": "1.0325rem",
            "itemFontWeight": "500"
          }
        },
        {
          "label": "Hover / Active",
          "props": {
            "borderTop": "5px solid #1bac4a",
            "padding": "28px 10px",
            "itemColor": "#01873f"
          }
        }
      ]
    },
    {
      "type": "input",
      "name": "Search Input (Desktop)",
      "description": "デスクトップ用のシンプルな検索入力。薄グレー背景・ボーダーなし",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#f9f9f9",
            "color": "#313131",
            "border": "none",
            "borderRadius": "3px",
            "height": "23px",
            "padding": "0 28px 0 10px",
            "fontFamily": "'Noto Sans JP', sans-serif",
            "transition": "all 0.5s ease-out"
          }
        }
      ]
    },
    {
      "type": "input",
      "name": "Search Input (Mobile)",
      "description": "モバイル用のピル型検索入力。タッチ操作のため高さ 50px",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#FFFFFF",
            "color": "#313131",
            "border": "1px solid #dcdcdc",
            "borderRadius": "30px",
            "height": "50px",
            "padding": "0 20px",
            "fontFamily": "'Noto Sans JP', sans-serif"
          }
        }
      ]
    },
    {
      "type": "card",
      "name": "Card Image",
      "description": "標準サムネイル 300×300px 正方形、軽い角丸",
      "variants": [
        {
          "label": "Default",
          "props": {
            "borderRadius": "8px",
            "width": "300px",
            "height": "300px",
            "transition": "all 0.2s"
          }
        },
        {
          "label": "Hover",
          "props": {
            "borderRadius": "8px",
            "width": "300px",
            "height": "300px",
            "opacity": "0.7",
            "transition": "all 0.2s"
          }
        }
      ]
    },
    {
      "type": "alert",
      "name": "Important Notice",
      "description": "赤枠の重要なお知らせ枠",
      "variants": [
        {
          "label": "Default",
          "props": {
            "border": "2px solid #f43434",
            "background": "#FFFFFF",
            "color": "#313131",
            "padding": "15px"
          }
        }
      ]
    },
    {
      "type": "carousel",
      "name": "Hero Carousel",
      "description": "高さ 360px のメインカルーセル。非アクティブスライドは opacity 0.5",
      "variants": [
        {
          "label": "Active",
          "props": {
            "height": "360px",
            "opacity": "1",
            "transition": "opacity"
          }
        },
        {
          "label": "Inactive",
          "props": {
            "height": "360px",
            "opacity": "0.5",
            "transition": "opacity"
          }
        }
      ]
    }
  ],
  "guidelines": {
    "do": [
      "グリーン (#00ab4e) はアクセント・アンダーラインに使う — ナビの下線・ボーダーアクセントが典型",
      "ブルー (#0171a6) をリンクと CTA に統一する — 全インタラクティブ要素はこの色でそろえる",
      "Noto Sans JP のみ使う — 英数字も含めてフォント混在させない",
      "0.2s〜0.3s のトランジションを使う — アニメーションは短くシンプルに保つ",
      "コンテナは max-width: 1200px + 40px パディング — 幅広すぎる行幅を防ぐ",
      "モバイルブレークポイントは 736px で一貫する",
      "ボタンは border-radius: 25px のピル形状で統一",
      "サイドバーは 216px 固定幅を維持する (コンテンツ幅の計算が依存)",
      "300×300px 正方形サムネイル × 4 列グリッドが標準パターン"
    ],
    "dont": [
      "緑と青を 1 コンポーネント内で同格に使わない — ロゴ以外で 2 色を競合させない (核心ルール)",
      "ベースフォントサイズを 0.94rem より大幅に変えない — ly-sizeS/M/L クラスによる段階的調整が前提",
      "カスタムカラーをむやみに追加しない — すでに十分なパレットが定義されている",
      "PNG ロゴを直接拡縮しない — 64×62px の小サイズ PNG は小さいアバター専用",
      "オーバーレイに不透明度 0.5 以上の色を置かない — rgba(0,0,0,0.5) が上限",
      "サイドバーを 216px 未満に縮めない — コンテンツ幅の計算が破綻する",
      "アイコンフォント icn_font を外部サービスへ流用しない (サイト固有)",
      "派手なアニメーション・グラデーション・複雑なエフェクトを使わない (清潔感を維持)"
    ]
  }
}