---
version: alpha
name: ホットペッパーグルメ (HotPepper Gourmet)
description: リクルートが運営する日本最大級のグルメ・レストラン予約サービス。赤を基調としたブランドカラーと実用的な検索UIが特徴。
sources:
  - https://www.hotpepper.jp/index.html
  - https://imgfp.hotp.jp/SYS/PC/css/pages/ptp010/PTP01000.css
  - https://imgfp.hotp.jp/SYS/PC/images/logo/hotpepper_220x42.svg
  - https://imgfp.hotp.jp/SYS/PC/images/img/store_number_no1.svg
notes:
  - CSSは単一ファイル (PTP01000.css, 917行) から取得。直接観測値。
  - ロゴSVGから色値 #CC111B を直接抽出。ブランドレッドは #D0111B (CSS) と #CC111B (SVG) の2値が混在するが、SVGのロゴ値 #CC111B が基準と推定。
  - デスクトップ専用レイアウト (950px固定幅)。モバイル版は別URL/CSSで提供される可能性が高い。
  - 検索ボタンは青グラデーション（赤のブランドカラーと分離）— 行動促進色として意図的に使い分けている。
  - #FFD400（ゴールド/クラウン）はNo.1バッジ専用。一般UIには使用しない。
colors:
  brand-red: "#CC111B"
  action-red: "#D0111B"
  accent-orange-red: "#E73820"
  accent-orange: "#F6A004"
  action-blue-start: "#34B6EB"
  action-blue-end: "#20A7DE"
  action-blue-hover-start: "#22AEE6"
  action-blue-hover-end: "#0A92CC"
  action-blue-border: "#12A1C5"
  action-blue-focus: "#00C1F2"
  link: "#1470CC"
  link-visited: "#802680"
  surface-warm: "#F9EFE7"
  surface-pale: "#EFEFED"
  surface-hover-pink: "#FFE5E4"
  text-primary: "#333333"
  text-heading: "#35363F"
  text-secondary: "#4E4E4E"
  text-muted: "#666666"
  text-disabled: "#999999"
  text-white: "#FFFFFF"
  text-footer: "#435B67"
  border: "#CCCCCC"
  border-subtle: "#E0E0E0"
  disabled-bg: "#BCBFC2"
  disabled-border: "#D1D3D6"
  badge-gold: "#FFD400"
typography:
  font-stack: '"メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", MS PGothic, sans-serif'
  section-title:
    fontSize: 16px
    fontWeight: bold
    color: "{colors.text-heading}"
    lineHeight: 1.1
  body:
    fontSize: 13px
    color: "{colors.text-primary}"
    lineHeight: 1.5
  label:
    fontSize: 12px
    color: "{colors.text-primary}"
    lineHeight: 1.5
  small:
    fontSize: 10px
    color: "{colors.text-muted}"
    lineHeight: 1.4
  caption:
    fontSize: 11px
    color: "{colors.text-secondary}"
    lineHeight: 1.5
  interactive:
    fontSize: 14px
    color: "{colors.text-primary}"
    lineHeight: 1
rounded:
  small: 2px
  medium: 4px
  large: 5px
  pill: 20px
  hero: 36px
spacing:
  2: 2px
  5: 5px
  8: 8px
  10: 10px
  15: 15px
  17: 17px
  20: 20px
  25: 25px
  30: 30px
  35: 35px
  40: 40px
  45: 45px
  79: 79px
layout:
  content-width: 950px
components:
  button-search:
    width: 100px
    height: 37px
    borderRadius: "{rounded.small}"
    border: "1px solid {colors.action-blue-border}"
    background: "linear-gradient(to bottom, {colors.action-blue-start}, {colors.action-blue-end})"
    boxShadow: "0px 0px 1px 1px {colors.action-blue-focus} inset"
    color: "{colors.text-white}"
    fontSize: 14px
    fontWeight: bold
    hover:
      border: "1px solid {colors.action-blue-border}"
      background: "linear-gradient(to bottom, {colors.action-blue-hover-start}, {colors.action-blue-hover-end})"
    disabled:
      border: "1px solid {colors.disabled-bg}"
      background: "{colors.disabled-bg}"
  button-outline-pill:
    width: 144px
    height: 34px
    borderRadius: "{rounded.pill}"
    border: "1px solid {colors.action-red}"
    background: transparent
    color: "{colors.action-red}"
    fontSize: 14px
    hover:
      background: "{colors.action-red}"
      color: "{colors.text-white}"
    transition: "all 0.5s linear"
  section-title:
    paddingLeft: 16px
    borderLeft: "4px solid {colors.accent-orange-red}"
    color: "{colors.text-heading}"
    fontSize: 16px
    fontWeight: bold
    lineHeight: 1.1
  select-box:
    width: 222px
    border: "1px solid {colors.border}"
    padding: 2px
    fontSize: 12px
    selectedColor: "{colors.accent-orange-red}"
    background: "url('/SYS/PC/images/icn/arrow_down_11x7.png') no-repeat 50% 50%"
  dropdown-overlay:
    background: "{colors.disabled-bg}"
    zIndex: 1000
  area-link:
    height: 50px
    fontSize: 12px
    fontWeight: bold
    color: "{colors.text-primary}"
    hoverBackground: "{colors.surface-pale}"
  key-visual:
    width: 948px
    height: 475px
    borderRadius: "0 0 {rounded.hero} {rounded.hero}"
    animationDuration: 15s
    background: "{colors.surface-warm}"
  card:
    boxShadow: "4px 4px 6px 0 rgba(0,0,0,0.1)"
    border: "1px solid {colors.border}"
  footer:
    color: "{colors.text-secondary}"
    fontSize: 10px
    borderTop: "1px solid {colors.border}"
    copyrightColor: "{colors.text-footer}"
imagery:
  hero-photos: レストランの料理・空間の写真。明るく食欲をそそる構図。@2x retina対応。
  banner-icons: 90×90px または 65×65px の正方形サムネイル（宴会・誕生日・食べ放題等のシーン訴求）。
  logo-badge: No.1バッジはゴールド (#FFD400) とブランドレッド (#D0111B) の組み合わせ。王冠モチーフ。
  icons: 赤 (#D0111B または #E73820) の単色アイコン。地図ピン・検索グラス・ジャンル・円マーク等。
  cdn: imgfp.hotp.jp を使用。@2x形式で Retina 対応。
---

## 概要

ホットペッパーグルメは、リクルートが運営する日本最大級のレストラン検索・予約サービス。ブランドの核は **赤 (#CC111B / #D0111B)** で統一された信頼感と、「探す→予約する」の導線を最短化するユーティリティファーストなUIにある。

検索行動ボタンだけ意図的に **青グラデーション (#34B6EB→#20A7DE)** を使い、ブランドレッドと色分けして行動促進している点が独自性。

---

## カラーシステム

### ブランドカラー
| 役割 | 値 | 用途 |
|---|---|---|
| ブランドレッド | `#CC111B` | ロゴ SVG のメインカラー |
| アクションレッド | `#D0111B` | ボタン枠・ホバー塗り・強調テキスト |
| アクセントオレンジレッド | `#E73820` | セクションタイトルの左ボーダー・選択状態 |
| アクセントオレンジ | `#F6A004` | 店舗掲載CTA の再生ボタン装飾 |
| バッジゴールド | `#FFD400` | No.1 バッジの王冠のみ。一般UIに使わない。 |

### 行動促進カラー（検索ボタン専用）
| 役割 | 値 |
|---|---|
| ボタン上端 | `#34B6EB` |
| ボタン下端 | `#20A7DE` |
| ホバー上端 | `#22AEE6` |
| ホバー下端 | `#0A92CC` |
| ボーダー | `#12A1C5` |
| インナーグロウ | `#00C1F2` |

### テキスト
| 役割 | 値 |
|---|---|
| 見出し | `#35363F` |
| 本文 | `#333333` |
| サブテキスト | `#4E4E4E` |
| ミュート | `#666666` |
| 無効 | `#999999` |
| フッター著作権 | `#435B67` |

### サーフェス・ボーダー
| 役割 | 値 |
|---|---|
| ウォームベージュ背景 | `#F9EFE7` |
| 薄グレー背景 | `#EFEFED` |
| ホバーピンク | `#FFE5E4` |
| ボーダー標準 | `#CCCCCC` |
| ボーダー点線 | `#E0E0E0` |

---

## タイポグラフィ

**フォントスタック（日本語優先）:**
```
"メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", MS PGothic, sans-serif
```

| スタイル | サイズ | ウェイト | カラー | 行間 |
|---|---|---|---|---|
| セクションタイトル | 16px | bold | `#35363F` | 1.1 |
| インタラクティブ（ボタン等） | 14px | bold/normal | 各コンテキスト | 1 |
| ボディ | 13px | normal | `#333333` | 1.5 |
| ラベル | 12px | normal/bold | `#333333` | 1.5 |
| キャプション | 11px | normal | `#4E4E4E` | 1.5 |
| フッター・注釈 | 10px | normal/bold | `#4E4E4E` | 1.4 |

---

## レイアウト

- **コンテンツ幅:** 950px（中央寄せ固定。デスクトップ専用）
- **ヒーローエリア:** 948×475px、下角丸 `border-radius: 0 0 36px 36px`
- **ウォームベージュ背景帯** (`#F9EFE7`) でヒーロー〜クイック検索セクションを包む
- **セクション間隔:** padding-top/bottom 35px が標準セクション区切り
- グリッドは `display: flex` による手動制御。CSS Grid 未使用。

---

## コンポーネント

### 検索ボタン（青グラデーション）
```css
width: 100px; height: 37px;
border-radius: 2px;
border: 1px solid #12A1C5;
background: linear-gradient(to bottom, #34B6EB, #20A7DE);
box-shadow: 0px 0px 1px 1px #00C1F2 inset;
color: #FFFFFF; font-size: 14px;
```
**用途:** クイック検索の実行ボタン専用。赤ブランドから意図的に分離。

### アウトライン丸ボタン（赤・ピル型）
```css
width: 144px; height: 34px;
border-radius: 20px;
border: 1px solid #D0111B;
background: transparent; color: #D0111B;
font-size: 14px;
transition: all 0.5s linear;
/* hover: background #D0111B, color #FFFFFF */
```
**用途:** 「もっと見る」などのセカンダリアクション。

### セクションタイトル
```css
padding-left: 16px;
border-left: 4px solid #E73820;
color: #35363F; font-size: 16px; font-weight: bold;
```
**特徴:** 左に4px赤ボーダーを引くことでセクションを視覚的に区切る。ホットペッパー固有のパターン。

### プルダウン選択（クイック検索用）
```css
width: 222px;
border: 1px solid #CCCCCC;
padding: 2px;
font-size: 12px;
/* selected state: color #E73820 */
```

### エリアリンク行
```css
height: 50px;
font-size: 12px; font-weight: bold; color: #333333;
/* hover: background #EFEFED */
```

### カード
```css
box-shadow: 4px 4px 6px 0 rgba(0,0,0,0.1);
border: 1px solid #CCCCCC;
```

---

## 画像・映像

- **ヒーロー写真:** レストランの料理・内装。明るく食欲をそそる日本のグルメ写真スタイル。CDN: `imgfp.hotp.jp`
- **シーンバナー:** 90×90px or 65×65px の正方形サムネイル（女子会・誕生日・食べ放題・プレミアムなど）
- **アイコン:** 赤単色の PNG アイコン（地図ピン、ルーペ、ジャンル、円マーク）。@2x で Retina 対応。
- **No.1 バッジ:** ゴールド王冠 (`#FFD400`) ＋ ブランドレッド (`#D0111B`)。SVG。

---

## ロゴ・商標の取り扱い

- **ロゴ:** `hotpepper_220x42.svg`（220×42px。縦横比を維持すること）
- **ブランドカラー:** ロゴ内の赤は `#CC111B`（SVG実測値）
- **テキスト:** 「ホットペッパー HOTPEPPER グルメ」。フォントはSVGパス化済みで独自書体。
- **リクルートロゴ:** フッター専用 (`recruit_100x26.png`)。100×26px。本体デザインに混入させない。

---

## Do's and Don'ts

### Do
- 赤 (`#D0111B`) をブランドの強調色・CTA ホバーに使う
- セクションタイトルには必ず左ボーダー 4px `#E73820` を添える
- 検索実行ボタンは青グラデーションを維持し、ブランドレッドと混在させない
- `#F9EFE7` のウォームベージュ背景でヒーローエリアに温かみを出す
- 日本語フォントスタックを必ず先頭に置く（メイリオ優先）
- @2x 画像で Retina 対応する

### Don't
- ゴールド (`#FFD400`) を No.1 バッジ以外のUIに使わない
- `#CC111B`（ロゴ専用赤）と `#D0111B`（UI赤）を混同しない
- 950px 固定レイアウトをそのままモバイルに転用しない（別途レスポンシブ対応が必要）
- ブランドレッドで検索・実行ボタンを作らない（青グラデーション専用）
- リクルートロゴをヘッダーやコンテンツ領域に混入させない（フッター専用）

{
  "$schema": "https://aistyles.dev/schema/tokens-v1.json",
  "version": "1.0",
  "brand": {
    "slug": "hotpepper",
    "name": "ホットペッパーグルメ (HotPepper Gourmet)",
    "url": "https://www.hotpepper.jp/",
    "description": "リクルートが運営する日本最大級のグルメ・レストラン予約サービス。赤を基調としたブランドカラーと実用的な検索UIが特徴。検索アクションだけ青グラデーションを使い、ブランドレッドと意図的に色分けして行動促進している。",
    "category": "ec",
    "tags": [
      "utility",
      "japanese",
      "search",
      "reservation",
      "gourmet",
      "high-density"
    ],
    "theme": "light",
    "language": "ja"
  },
  "sources": [
    "https://www.hotpepper.jp/index.html",
    "https://imgfp.hotp.jp/SYS/PC/css/pages/ptp010/PTP01000.css",
    "https://imgfp.hotp.jp/SYS/PC/images/logo/hotpepper_220x42.svg",
    "https://imgfp.hotp.jp/SYS/PC/images/img/store_number_no1.svg"
  ],
  "extractedAt": "2026-05-16",
  "notes": [
    "CSS は単一ファイル(PTP01000.css、917行)から取得。直接観測値。",
    "ロゴ SVG から色値 #CC111B を直接抽出。ブランドレッドは #D0111B(CSS)と #CC111B(SVG)の2値が混在するが、SVG のロゴ値 #CC111B が基準と推定。",
    "デスクトップ専用レイアウト(950px 固定幅)。モバイル版は別 URL/CSS で提供される可能性が高い。",
    "検索ボタンは青グラデーション(赤のブランドカラーと分離)— 行動促進色として意図的に使い分けている。",
    "#FFD400(ゴールド/クラウン)は No.1 バッジ専用。一般 UI には使用しない。"
  ],
  "colors": {
    "groups": [
      {
        "label": "Brand Red",
        "tokens": [
          {
            "name": "Brand Red",
            "value": "#CC111B",
            "token": "--color-brand-red",
            "role": "ロゴ SVG のメインカラー"
          },
          {
            "name": "Action Red",
            "value": "#D0111B",
            "token": "--color-action-red",
            "role": "ボタン枠・ホバー塗り・強調テキスト"
          },
          {
            "name": "Accent Orange Red",
            "value": "#E73820",
            "token": "--color-accent-orange-red",
            "role": "セクションタイトルの左ボーダー・選択状態"
          },
          {
            "name": "Accent Orange",
            "value": "#F6A004",
            "token": "--color-accent-orange",
            "role": "店舗掲載 CTA の再生ボタン装飾"
          }
        ]
      },
      {
        "label": "Action Blue (Search)",
        "tokens": [
          {
            "name": "Action Blue Start",
            "value": "#34B6EB",
            "token": "--color-action-blue-start",
            "role": "検索ボタングラデーション上端"
          },
          {
            "name": "Action Blue End",
            "value": "#20A7DE",
            "token": "--color-action-blue-end",
            "role": "検索ボタングラデーション下端"
          },
          {
            "name": "Action Blue Hover Start",
            "value": "#22AEE6",
            "token": "--color-action-blue-hover-start",
            "role": "検索ボタンホバー上端"
          },
          {
            "name": "Action Blue Hover End",
            "value": "#0A92CC",
            "token": "--color-action-blue-hover-end",
            "role": "検索ボタンホバー下端"
          },
          {
            "name": "Action Blue Border",
            "value": "#12A1C5",
            "token": "--color-action-blue-border",
            "role": "検索ボタンボーダー"
          },
          {
            "name": "Action Blue Focus",
            "value": "#00C1F2",
            "token": "--color-action-blue-focus",
            "role": "検索ボタンインナーグロウ"
          }
        ]
      },
      {
        "label": "Text",
        "tokens": [
          {
            "name": "Text Heading",
            "value": "#35363F",
            "token": "--color-text-heading",
            "role": "見出し"
          },
          {
            "name": "Text Primary",
            "value": "#333333",
            "token": "--color-text-primary",
            "role": "本文"
          },
          {
            "name": "Text Secondary",
            "value": "#4E4E4E",
            "token": "--color-text-secondary",
            "role": "サブテキスト"
          },
          {
            "name": "Text Muted",
            "value": "#666666",
            "token": "--color-text-muted",
            "role": "ミュート(キャプション・補助)"
          },
          {
            "name": "Text Disabled",
            "value": "#999999",
            "token": "--color-text-disabled",
            "role": "無効・プレースホルダー"
          },
          {
            "name": "Text White",
            "value": "#FFFFFF",
            "token": "--color-text-white",
            "role": "暗背景上のテキスト"
          },
          {
            "name": "Text Footer",
            "value": "#435B67",
            "token": "--color-text-footer",
            "role": "フッター著作権テキスト"
          }
        ]
      },
      {
        "label": "Surface",
        "tokens": [
          {
            "name": "Surface Warm",
            "value": "#F9EFE7",
            "token": "--color-surface-warm",
            "role": "ヒーローエリアのウォームベージュ背景"
          },
          {
            "name": "Surface Pale",
            "value": "#EFEFED",
            "token": "--color-surface-pale",
            "role": "薄グレー背景・hover 背景"
          },
          {
            "name": "Surface Hover Pink",
            "value": "#FFE5E4",
            "token": "--color-surface-hover-pink",
            "role": "ピンク系 hover 背景"
          },
          {
            "name": "Link",
            "value": "#1470CC",
            "token": "--color-link",
            "role": "標準リンク色"
          },
          {
            "name": "Link Visited",
            "value": "#802680",
            "token": "--color-link-visited",
            "role": "訪問済みリンク色"
          }
        ]
      },
      {
        "label": "Border",
        "tokens": [
          {
            "name": "Border",
            "value": "#CCCCCC",
            "token": "--color-border",
            "role": "標準ボーダー"
          },
          {
            "name": "Border Subtle",
            "value": "#E0E0E0",
            "token": "--color-border-subtle",
            "role": "点線・薄いボーダー"
          },
          {
            "name": "Disabled BG",
            "value": "#BCBFC2",
            "token": "--color-disabled-bg",
            "role": "無効化された要素の背景"
          },
          {
            "name": "Disabled Border",
            "value": "#D1D3D6",
            "token": "--color-disabled-border",
            "role": "無効化された要素のボーダー"
          }
        ]
      },
      {
        "label": "Badge",
        "tokens": [
          {
            "name": "Badge Gold",
            "value": "#FFD400",
            "token": "--color-badge-gold",
            "role": "No.1 バッジの王冠のみ。一般 UI には使用しない"
          }
        ]
      }
    ]
  },
  "typography": {
    "fonts": [
      {
        "family": "Meiryo (system)",
        "stack": "\"メイリオ\", Meiryo, \"ヒラギノ角ゴ Pro W3\", \"ＭＳ Ｐゴシック\", MS PGothic, sans-serif",
        "role": "primary",
        "notes": "メイリオ(Windows 標準)を最優先するシステムフォントスタック。日本語専用のサービスとして信頼感を演出。Web フォント未使用。"
      },
      {
        "family": "Japanese System",
        "stack": "\"メイリオ\", Meiryo, \"ヒラギノ角ゴ Pro W3\", \"ＭＳ Ｐゴシック\", MS PGothic, sans-serif",
        "role": "japanese",
        "notes": "日本語表示専用スタック。メイリオが Windows、ヒラギノ角ゴが macOS で優先される。"
      }
    ],
    "scale": [
      {
        "role": "section-title",
        "size": "16px",
        "weight": 700,
        "lineHeight": 1.1,
        "notes": "セクションタイトル。左に4px赤ボーダー(#E73820)を必ず添える。"
      },
      {
        "role": "interactive",
        "size": "14px",
        "weight": 700,
        "lineHeight": 1,
        "notes": "ボタンラベル等のインタラクティブ要素"
      },
      {
        "role": "body",
        "size": "13px",
        "weight": 400,
        "lineHeight": 1.5,
        "notes": "本文。高密度な情報表示のため標準より小さめ。"
      },
      {
        "role": "label",
        "size": "12px",
        "weight": 400,
        "lineHeight": 1.5,
        "notes": "ラベル・選択肢"
      },
      {
        "role": "caption",
        "size": "11px",
        "weight": 400,
        "lineHeight": 1.5,
        "notes": "キャプション"
      },
      {
        "role": "small",
        "size": "10px",
        "weight": 400,
        "lineHeight": 1.4,
        "notes": "フッター・注釈・最小テキスト"
      }
    ],
    "japanese": {
      "fontStack": "\"メイリオ\", Meiryo, \"ヒラギノ角ゴ Pro W3\", \"ＭＳ Ｐゴシック\", MS PGothic, sans-serif",
      "lineHeight": 1.5,
      "letterSpacing": "normal",
      "kinsoku": {
        "wordBreak": "keep-all",
        "lineBreak": "strict",
        "overflowWrap": "anywhere"
      },
      "openType": {
        "palt": false,
        "kern": true
      },
      "notes": "情報密度が高い検索 UI のため、行間は 1.5 と標準的。Web フォントを使わずシステムフォントで配信速度を優先。"
    }
  },
  "spacing": {
    "baseUnit": "5px",
    "tokens": [
      {
        "name": "xs",
        "value": "2px",
        "role": "最小余白"
      },
      {
        "name": "sm",
        "value": "5px",
        "role": "小余白"
      },
      {
        "name": "md",
        "value": "10px",
        "role": "標準余白"
      },
      {
        "name": "lg",
        "value": "15px",
        "role": "大余白"
      },
      {
        "name": "xl",
        "value": "20px",
        "role": "セクション内余白"
      },
      {
        "name": "section-padding",
        "value": "35px",
        "role": "セクション間 padding (上下)"
      },
      {
        "name": "section-gap-large",
        "value": "45px",
        "role": "大セクション間余白"
      },
      {
        "name": "ad-strip",
        "value": "79px",
        "role": "広告ストリップ高さ"
      }
    ]
  },
  "breakpoints": {
    "content-width": {
      "value": "950px",
      "role": "コンテンツ幅(固定。デスクトップ専用)"
    },
    "hero-width": {
      "value": "948px",
      "role": "ヒーローエリア幅"
    }
  },
  "radius": {
    "small": "2px",
    "medium": "4px",
    "large": "5px",
    "pill": "20px",
    "hero": "36px",
    "notes": "ボタンは small (2px) / 検索ボタン。pill (20px) / アウトラインボタン。hero (36px) / ヒーローエリア下角。"
  },
  "shadows": [
    {
      "name": "card",
      "value": "4px 4px 6px 0 rgba(0,0,0,0.1)",
      "role": "カードシャドウ"
    },
    {
      "name": "search-button-inner",
      "value": "0px 0px 1px 1px #00C1F2 inset",
      "role": "検索ボタンのインナーグロウ"
    }
  ],
  "motion": {
    "easing": {
      "default": "linear"
    },
    "duration": {
      "short": "0.5s",
      "hero-animation": "15s"
    },
    "notes": "ピル型アウトラインボタンのホバーは 0.5s linear。ヒーローエリアのアニメーションは 15s で循環。"
  },
  "components": [
    {
      "type": "button",
      "name": "Search Button (Blue Gradient)",
      "description": "クイック検索の実行ボタン専用。赤ブランドから意図的に分離した青グラデーション。",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "linear-gradient(to bottom, #34B6EB, #20A7DE)",
            "color": "#FFFFFF",
            "border": "1px solid #12A1C5",
            "borderRadius": "2px",
            "boxShadow": "0px 0px 1px 1px #00C1F2 inset",
            "width": "100px",
            "height": "37px",
            "fontSize": "14px",
            "fontWeight": "700"
          }
        },
        {
          "label": "Hover",
          "props": {
            "background": "linear-gradient(to bottom, #22AEE6, #0A92CC)",
            "color": "#FFFFFF",
            "border": "1px solid #12A1C5",
            "borderRadius": "2px",
            "width": "100px",
            "height": "37px"
          }
        },
        {
          "label": "Disabled",
          "props": {
            "background": "#BCBFC2",
            "color": "#FFFFFF",
            "border": "1px solid #BCBFC2",
            "borderRadius": "2px",
            "width": "100px",
            "height": "37px"
          }
        }
      ]
    },
    {
      "type": "button",
      "name": "Outline Pill Button (Red)",
      "description": "「もっと見る」などのセカンダリアクション。アウトライン形式・ピル型・赤ブランド。",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "transparent",
            "color": "#D0111B",
            "border": "1px solid #D0111B",
            "borderRadius": "20px",
            "width": "144px",
            "height": "34px",
            "fontSize": "14px",
            "transition": "all 0.5s linear"
          }
        },
        {
          "label": "Hover",
          "props": {
            "background": "#D0111B",
            "color": "#FFFFFF",
            "border": "1px solid #D0111B",
            "borderRadius": "20px"
          }
        }
      ]
    },
    {
      "type": "section",
      "name": "Section Title",
      "description": "ホットペッパー固有の見出しパターン。左に4px赤ボーダーを引いてセクションを視覚的に区切る。",
      "variants": [
        {
          "label": "Default",
          "props": {
            "color": "#35363F",
            "fontSize": "16px",
            "fontWeight": "700",
            "lineHeight": "1.1",
            "paddingLeft": "16px",
            "borderLeft": "4px solid #E73820"
          }
        }
      ]
    },
    {
      "type": "input",
      "name": "Select Box (Quick Search)",
      "description": "クイック検索のプルダウン選択。選択状態でアクセントオレンジレッドのテキスト。",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#FFFFFF",
            "color": "#333333",
            "border": "1px solid #CCCCCC",
            "padding": "2px",
            "width": "222px",
            "fontSize": "12px"
          }
        },
        {
          "label": "Selected",
          "props": {
            "background": "#FFFFFF",
            "color": "#E73820",
            "border": "1px solid #CCCCCC",
            "fontSize": "12px"
          }
        }
      ]
    },
    {
      "type": "navigation",
      "name": "Area Link Row",
      "description": "エリアリンクの行表示。hover で薄グレー背景。",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "transparent",
            "color": "#333333",
            "height": "50px",
            "fontSize": "12px",
            "fontWeight": "700"
          }
        },
        {
          "label": "Hover",
          "props": {
            "background": "#EFEFED",
            "color": "#333333",
            "height": "50px"
          }
        }
      ]
    },
    {
      "type": "section",
      "name": "Key Visual (Hero)",
      "description": "ヒーローエリア。948×475px、下角丸36px、ウォームベージュ背景、15秒アニメーション。",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#F9EFE7",
            "color": "#333333",
            "width": "948px",
            "height": "475px",
            "borderRadius": "0 0 36px 36px",
            "animationDuration": "15s"
          }
        }
      ]
    },
    {
      "type": "card",
      "name": "Card",
      "description": "標準カード。軽いシャドウと細いボーダー。",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#FFFFFF",
            "color": "#333333",
            "border": "1px solid #CCCCCC",
            "boxShadow": "4px 4px 6px 0 rgba(0,0,0,0.1)"
          }
        }
      ]
    },
    {
      "type": "section",
      "name": "Footer",
      "description": "フッター。グレーテキスト + 上ボーダー + 著作権はフッターブルーグレー。",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#FFFFFF",
            "color": "#4E4E4E",
            "fontSize": "10px",
            "borderTop": "1px solid #CCCCCC",
            "copyrightColor": "#435B67"
          }
        }
      ]
    }
  ],
  "imagery": {
    "photography": {
      "style": "レストランの料理・内装。明るく食欲をそそる日本のグルメ写真スタイル。",
      "format": "@2x retina 対応の JPEG / PNG",
      "notes": "CDN: imgfp.hotp.jp を使用。シーンバナーは 90×90px or 65×65px の正方形サムネイル(女子会・誕生日・食べ放題・プレミアムなど)。"
    },
    "icons": {
      "font": "赤単色 (#D0111B または #E73820) の PNG アイコン。地図ピン、ルーペ、ジャンル、円マーク",
      "size": "@2x で Retina 対応"
    },
    "badge": {
      "no1": "ゴールド王冠 (#FFD400) + ブランドレッド (#D0111B) の SVG"
    }
  },
  "logo": {
    "restrictions": [
      "ロゴ: hotpepper_220x42.svg (220×42px、縦横比を維持すること)",
      "ブランドカラー: ロゴ内の赤は #CC111B (SVG 実測値)",
      "テキスト: 「ホットペッパー HOTPEPPER グルメ」。フォントは SVG パス化済みで独自書体",
      "リクルートロゴ: フッター専用 (recruit_100x26.png、100×26px)。本体デザインに混入させない",
      "ロゴの変形・着色禁止"
    ],
    "navRepresentation": "ヘッダーは hotpepper_220x42.svg(220×42px)を中央または左に配置。ブランドレッド #CC111B。"
  },
  "guidelines": {
    "do": [
      "赤 (#D0111B) をブランドの強調色・CTA ホバーに使う",
      "セクションタイトルには必ず左ボーダー 4px #E73820 を添える",
      "検索実行ボタンは青グラデーションを維持し、ブランドレッドと混在させない",
      "#F9EFE7 のウォームベージュ背景でヒーローエリアに温かみを出す",
      "日本語フォントスタックを必ず先頭に置く(メイリオ優先)",
      "@2x 画像で Retina 対応する"
    ],
    "dont": [
      "ゴールド (#FFD400) を No.1 バッジ以外の UI に使わない",
      "#CC111B(ロゴ専用赤)と #D0111B(UI 赤)を混同しない",
      "950px 固定レイアウトをそのままモバイルに転用しない(別途レスポンシブ対応が必要)",
      "ブランドレッドで検索・実行ボタンを作らない(青グラデーション専用)",
      "リクルートロゴをヘッダーやコンテンツ領域に混入させない(フッター専用)"
    ]
  }
}