---
version: alpha
name: ONICHA
description: HIKAKINが手がけた麦茶ブランド。「シンプルでかわいいデザイン」と遊び心あふれる世界観で、日本の麦茶を刷新することをミッションとする。
sources:
  - https://onicha.jp/
  - https://onicha.jp/assets/css/style.css
  - https://onicha.jp/assets/css/top.css
notes:
  - 色値・フォント・スペーシングはすべてCSSから直接取得（推測なし）。
  - 背景画像（mv_bg_pc.jpg等）はJPGアセットであり、再現する場合は単色またはグラデーションで代替する。
  - セクションタイトルはすべてSVGテキスト画像。ライブテキストとして再現する際はNotoSansJP Boldを使用する。
  - ナビゲーション・コピー等の文字列はページHTMLから直接取得。
colors:
  primary: "#00a0d2"
  text: "#231815"
  surface: "#ffffff"
  nav-overlay: "rgba(0, 160, 210, 0.97)"
typography:
  body:
    fontFamily: "NotoSansJP, sans-serif"
    fontWeight: 500
    fontSize: "15px"
    lineHeight: "25px"
  small:
    fontFamily: "NotoSansJP, sans-serif"
    fontWeight: 500
    fontSize: "12px"
    lineHeight: "20px"
  heading-product:
    fontFamily: "NotoSansJP, sans-serif"
    fontWeight: 700
    fontSize: "26px"
    lineHeight: "34px"
    color: "#00a0d2"
  cta-link:
    fontFamily: "NotoSansJP, sans-serif"
    fontWeight: 700
    fontSize: "21px"
    lineHeight: "35px"
    color: "#ffffff"
  copyright:
    fontFamily: "NotoSansJP, sans-serif"
    fontWeight: 500
    fontSize: "14px"
rounded:
  small: "5px"
  pill: "100px"
spacing:
  wrapper-max-width: "1225px"
  wrapper-width: "94%"
  wrapper-width-mobile: "83.6%"
  header-height: "110px"
  header-height-mobile: "70px"
  header-padding: "0 65px"
  header-padding-mobile: "0 20px 0 15px"
  section-gap-large: "140px"
  section-gap-small: "75px"
  sns-icon-gap: "20px"
  sns-icon-gap-mobile: "15px"
components:
  button-primary:
    backgroundColor: "#00a0d2"
    color: "#ffffff"
    borderRadius: "5px"
    padding: "0 15px"
    fontSize: "21px"
    lineHeight: "35px"
    fontWeight: 700
    display: "inline-block"
    hover: "opacity: 0.8"
  product-card:
    backgroundColor: "#ffffff"
    borderRadius: "100px"
    width: "580px"
    height: "145px"
    paddingLeft: "30px"
    display: "flex"
    alignItems: "center"
  nav-overlay:
    backgroundColor: "rgba(0, 160, 210, 0.97)"
    position: "fixed"
    fullViewport: true
    display: "flex"
    justifyContent: "center"
    alignItems: "center"
  hamburger:
    width: "35px"
    height: "20px"
    lineColor: "#ffffff"
    lineHeight: "2px"
    activeLineColor: "#231815"
  link-default:
    color: "#231815"
    textDecoration: "none"
    display: "block"
    transition: "all 0.2s"
    hover: "opacity: 0.8"
imagery:
  photography: "製品写真（600mlボトル、3種ラベル）とブランドシーンの実写。背景はセクションごとに異なるJPG背景画像。"
  illustration: "鬼（oni）モチーフのゆるかわキャラクターイラスト。PNG形式で各セクションに配置。"
  icons: "SNSアイコンはSVG。ヘッダーは白バリアント（_w.svg）、フッターはカラー/ダークバリアント（_02.svg）を使用。"
  section-titles: "すべてのセクション見出しはSVGテキスト画像。ライブテキスト実装時はNotoSansJP Bold使用。"
  logo-variants: "logo_w.svg（ダーク背景用・白色）、logo_b.svg（ライト背景用・黒色）の2種。"
  video: "YouTube埋め込み、9:16縦型（TikTok形式）。aspect-ratio: 9 / 16。"
---

## 概要

ONICHAは、YouTuber・HIKAKINが手がけた日本初の本格麦茶ブランド。「日本の麦茶、変える」をスローガンに、「シンプルでかわいいデザイン」と遊び心あふれる企画で、地味だった麦茶をイケてる飲み物へと刷新する。ラベル内側には「鬼みくじ」（おみくじ）が封入され、体験価値を提供する。

モノクロームベース（黒 `#231815`・白 `#ffffff`）に、鮮やかな空色 `#00a0d2` を差し色として使用。NotoSansJP を自己ホストし、画像ベースの見出しと流暢なスクロールアニメーションでポップかつ清潔感のある世界観を構築している。

---

## Colors

| 役割 | 値 | 出典・用途 |
|------|-----|-----------|
| Primary | `#00a0d2` | ナビオーバーレイ背景、CTAボタン、製品カードテキスト。ブランドの唯一のアクセントカラー。 |
| Text / Dark | `#231815` | 本文・リンク・フッターボーダー・ハンバーガーメニュー（アクティブ時）。ピュアブラックではなく僅かに茶みがかった黒。 |
| Surface | `#ffffff` | 製品カード背景、ハンバーガーライン（通常時）。 |
| Nav Overlay | `rgba(0, 160, 210, 0.97)` | フルスクリーンナビゲーションオーバーレイ。Primary に97%不透明度。 |

**使ってはいけない組み合わせ：**
- `#00a0d2` の背景に `#231815` テキスト（コントラスト不足）。白テキストを使うこと。
- 背景色による大面積の多色使い。Primary は差し色として小面積に限定する。

---

## Typography

フォントは NotoSansJP を自己ホスト（`/assets/fonts/`）。weight 500（Medium）と 700（Bold）の2ウェイト構成。ウェブフォント形式: ttf / eot / woff / woff2。

```
font-family: "NotoSansJP", sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
```

| 用途 | size / line-height | weight | 備考 |
|------|--------------------|--------|------|
| 本文コピー | 15px / 25px | 500 | メッセージ・製品説明 |
| 本文コピー（SP） | 12px / 20px | 500 | モバイル縮小版 |
| セクション見出し（Contact h3） | 20px / 30px | 500 | ライブテキストの場合 |
| 製品カード見出し（h4） | 26px / 34px | 700 | 色: `#00a0d2` |
| 製品カード本文（p） | 14px / 24px | 700 | 色: `#00a0d2` |
| CTAリンク | 21px / 35px | 700 | 色: `#ffffff`、背景: `#00a0d2` |
| 小文字注記 | 13px / 23px | 500 | 法的・補足テキスト |
| コピーライト | 14px / − | 500 | フッター中央揃え（SP: 11px） |
| フッターリンク | 12px | 500 | アンダーライン付き |

セクションタイトルは実装上すべてSVG画像。ライブテキスト実装の際は NotoSansJP Bold を使用する。

---

## Layout

### ブレークポイント

- デスクトップ: `min-width: 769px`
- モバイル: `max-width: 768px`

### ラッパー

```css
.wrapper {
  width: 94%;
  max-width: 1225px;
  margin: 0 auto;
}
/* モバイル */
.wrapper { width: 83.6%; }
```

### ヘッダー

- 高さ: 110px（SP: 70px）
- パディング: `0 65px`（SP: `0 20px 0 15px`）
- position: `absolute`（ページ上部に透明オーバーレイ）
- ロゴ: 左端、90px幅（SP: 55px）
- SNSアイコン + ハンバーガー: 右端、fixed position
- ハンバーガー: 35px × 20px、ライン3本（SP: 30px）

### ナビゲーション（フルスクリーンオーバーレイ）

- 背景: `rgba(0, 160, 210, 0.97)` 全画面
- ナビアイテム: SVGテキスト画像、縦並び、`margin-bottom: 70px`（SP: 55px）
- アイコン高さ: 40px（SP: 30px）
- 垂直中央配置: `position: relative; top: 50%; transform: translateY(-50%)`

### セクション間スペーシング

| セクション | 上padding | 下padding |
|------------|-----------|-----------|
| Pickup | 60px | 140px |
| Message | 45px | 55px |
| Special Movie | 45px | 100px |
| Product | 45px | 65px |
| Contact | 45px | 170px |

モバイルでは各セクション約30〜75px程度に縮小。

### フッター

- ロゴ（logo_b.svg）: 100px幅（SP: 80px）
- 上エリア: logo + SNS + テキストリンク をflexで両端揃え
- 下ボーダー: `1px solid #231815`
- SNS アイコン高さ: 30px（SP: 25px）、間隔: 15px（SP: 10px）
- テキストリンク（プライバシーポリシー等）: 12px、アンダーライン
- コピーライト: `padding-bottom: 40px`（SP: 30px）、中央揃え 14px（SP: 11px）

---

## Components

### CTAボタン / リンクボタン

```css
background-color: #00a0d2;
border-radius: 5px;
padding: 0 15px;
font-size: 21px;
line-height: 35px;
color: #ffffff;
font-weight: 700;
display: inline-block;
/* SP */
font-size: 16px;
line-height: 28px;
padding: 0 10px;
```

### 製品情報カード（ピルシェイプ）

```css
width: 580px;
height: 145px;
padding-left: 30px;
background-color: #ffffff;
border-radius: 100px;
display: flex;
align-items: center;
/* SP */
width: 100%;
max-width: 330px;
height: 85px;
padding-left: 15px;
```

- 左にロゴ画像（100px、SP: 60px）、右に見出し＋本文（color: `#00a0d2`、font-weight: 700）

### ハンバーガーメニュー

- 通常: ライン3本、`background-color: #ffffff`
- アクティブ（X状態）:
  - ライン1: `translateY(9px) rotate(-45deg)`
  - ライン2: `opacity: 0`
  - ライン3: `translateY(-9px) rotate(45deg)`
  - ライン色: `#231815`（オーバーレイ表示時）

### Pickupスライダー

- ライブラリ: Slick.js
- 矢印: SVG画像（`pickup_arrow01.svg` / `pickup_arrow02.svg`）
- アイテムpadding: `0 4.5%`（SP: `0 10.7%`）
- カテゴリラベル: SVG画像、高さ18px（SP: 14px）
- キャプション: 14px/24px（SP: 12px/20px）

### SNSアイコン

- ヘッダー: 白バリアント SVG、高さ25px（SP: 20px）、間隔20px
- フッター: ダーク/カラーバリアント SVG、高さ30px（SP: 25px）
- ホバー: `opacity: 0.8`

---

## Imagery

### 製品写真

- 600mlボトル、3種ラベルデザイン（PNG透過）
- 白背景や製品背景画像の上に配置
- ラベル内側に「鬼みくじ」（大吉・中吉・小吉・シークレット）が封入

### 背景画像

各セクションに専用の背景JPG:

| セクション | PC | SP |
|------------|----|----|
| MV（メインビジュアル） | `mv_bg_pc.jpg` | `mv_bg_sp.jpg` |
| Message | `message_bg_pc.jpg` | `message_bg_sp.jpg` |
| Product | `product_bg_pc.jpg` | `product_bg_sp.jpg` |

- `background-size: 100% 100%`（ストレッチフィット）

### イラスト

- 鬼（oni）モチーフのゆるかわキャラクター（PNG）
- 各セクションのアクセント装飾として絶対配置
- 浮遊感を出す `shake` アニメーション付き

### 動画

- YouTube縦型埋め込み（9:16アスペクト比）
- `aspect-ratio: 9 / 16` で実装

---

## Animation

### スクロール入場アニメーション（.pala システム）

```css
.pala {
  opacity: 0;
  transition: all 1s ease;
}
.pala.action {
  opacity: 1;
  transform: none;
}
```

**方向バリアント:**

| クラス | 初期transform |
|--------|--------------|
| `.pala--down` | `translateY(-10%)` |
| `.pala--down2` | `translateY(-20%)` |
| `.pala--up` | `translateY(10%)` |
| `.pala--up2` | `translateY(20%)` |
| `.pala--lr` | `translate(-10%, 0)` |
| `.pala--lr5` | `translate(-50%, 0)` |
| `.pala--rl` | `translate(10%, 0)` |
| `.pala--rl5` | `translate(50%, 0)` |
| `.pala--scaleUp` | `scale(0.1)` |
| `.pala--scaleDown` | `scale(1.5)` |

**遅延クラス:** `.delay50` 〜 `.delay2000`（50ms刻み、`transition-delay` で制御）

### シェイクアニメーション

```css
@keyframes shake {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(5px); }
}
/* 適用: animation: shake 2s infinite ease-in-out */
```

製品ボトル画像（`.item.shake`）に適用。注目を集めるループモーション。

### ホバー

- リンク・ボタン全般: `opacity: 0.8`、`transition: all 0.2s`
- ボタン要素: `transition: all 0.5s`（やや遅め）

---

## Logo And Usage

- **ロゴ形式:** SVGワードマーク（テキストベース）
- **白バリアント:** `logo_w.svg` — ダーク背景・MV・ヘッダーで使用
- **黒バリアント:** `logo_b.svg` — ライト背景・フッター・SP Message セクションで使用
- **ヘッダー表示サイズ:** 90px幅（SP: 55px）
- **フッター表示サイズ:** 100px幅（SP: 80px）
- `pointer-events: none` が全画像に適用（選択・ドラッグ不可）

---

## Do's and Don'ts

### Do

- `#00a0d2` は差し色として使う。CTAボタン・ナビオーバーレイ・重要な数値・見出しに限定する。
- NotoSansJP の500（Medium）と700（Bold）の2ウェイトだけで構成する。
- スクロール入場アニメーションは `.pala` システムを踏襲し、`ease 1s` で統一する。
- ロゴは背景色に合わせて白/黒バリアントを使い分ける。
- ピルシェイプ（`border-radius: 100px`）は製品情報カードのような「主役コンテナ」にのみ使う。
- イラスト・キャラクターは絶対配置でコンテンツの外縁に「飛び出す」ように置く。

### Don't

- `#00a0d2` を大面積の背景色として使わない（ナビオーバーレイ以外）。
- ブランドカラー以外のアクセントカラーを追加しない（黄・赤・緑等はブランドに存在しない）。
- セクションタイトルをライブテキストで実装する場合、NotoSansJP Bold 以外のフォントを使わない。
- ロゴのアスペクト比を変更しない。
- 背景画像なしでセクションを組む場合、代替として単色（白または `#00a0d2`）を使う。グラデーションは使わない。
- `pointer-events: none` を製品画像から外さない（ブランドの意図的な設定）。

{
  "$schema": "https://aistyles.dev/schema/tokens-v1.json",
  "version": "1.0",
  "brand": {
    "slug": "onicha",
    "name": "ONICHA",
    "url": "https://onicha.jp/",
    "description": "YouTuber HIKAKIN が手がけた麦茶ブランド。「日本の麦茶、変える」をスローガンに、シンプルでかわいいデザインと遊び心あふれる企画で、地味だった麦茶をイケてる飲み物へと刷新する。",
    "category": "ec",
    "tags": [
      "beverage",
      "japanese",
      "playful",
      "single-accent",
      "minimal",
      "consumer"
    ],
    "theme": "light",
    "language": "ja"
  },
  "sources": [
    "https://onicha.jp/",
    "https://onicha.jp/assets/css/style.css",
    "https://onicha.jp/assets/css/top.css"
  ],
  "extractedAt": "2026-05-16",
  "notes": [
    "色値・フォント・スペーシングはすべて CSS から直接取得(推測なし)。",
    "背景画像(mv_bg_pc.jpg 等)は JPG アセットであり、再現する場合は単色またはグラデーションで代替する。",
    "セクションタイトルはすべて SVG テキスト画像。ライブテキストとして再現する際は NotoSansJP Bold を使用する。",
    "ナビゲーション・コピー等の文字列はページ HTML から直接取得。"
  ],
  "colors": {
    "groups": [
      {
        "label": "Brand",
        "tokens": [
          {
            "name": "Primary (Sky Blue)",
            "value": "#00a0d2",
            "token": "--color-primary",
            "role": "ナビオーバーレイ背景、CTA ボタン、製品カードテキスト。ブランドの唯一のアクセントカラー"
          },
          {
            "name": "Nav Overlay",
            "value": "rgba(0, 160, 210, 0.97)",
            "token": "--color-nav-overlay",
            "role": "フルスクリーンナビゲーションオーバーレイ(Primary に 97% 不透明度)"
          }
        ]
      },
      {
        "label": "Text",
        "tokens": [
          {
            "name": "Text Dark",
            "value": "#231815",
            "token": "--color-text",
            "role": "本文・リンク・フッターボーダー・ハンバーガーメニュー(アクティブ時)。ピュアブラックではなく僅かに茶みがかった黒"
          }
        ]
      },
      {
        "label": "Surface",
        "tokens": [
          {
            "name": "Surface White",
            "value": "#ffffff",
            "token": "--color-surface",
            "role": "製品カード背景、ハンバーガーライン(通常時)"
          }
        ]
      }
    ]
  },
  "typography": {
    "fonts": [
      {
        "family": "Noto Sans JP",
        "stack": "\"NotoSansJP\", sans-serif",
        "role": "primary",
        "notes": "Noto Sans JP を自己ホスト(/assets/fonts/)。weight 500(Medium)と 700(Bold)の 2 ウェイト構成。Web フォント形式: ttf / eot / woff / woff2。"
      },
      {
        "family": "Noto Sans JP (Japanese)",
        "stack": "\"NotoSansJP\", sans-serif",
        "role": "japanese",
        "notes": "日本語表示も同じ自己ホストフォント。font-smoothing: antialiased を全体に適用。"
      }
    ],
    "scale": [
      {
        "role": "body",
        "size": "15px",
        "weight": 500,
        "lineHeight": 1.67,
        "notes": "本文コピー(15px / 25px)。モバイルでは 12px / 20px に縮小"
      },
      {
        "role": "heading-product",
        "size": "26px",
        "weight": 700,
        "lineHeight": 1.31,
        "notes": "製品カード見出し(h4)。色: #00a0d2"
      },
      {
        "role": "cta-link",
        "size": "21px",
        "weight": 700,
        "lineHeight": 1.67,
        "notes": "CTA リンク(21px / 35px)。色: #ffffff、背景: #00a0d2"
      },
      {
        "role": "product-body",
        "size": "14px",
        "weight": 700,
        "lineHeight": 1.71,
        "notes": "製品カード本文。色: #00a0d2"
      },
      {
        "role": "section-heading",
        "size": "20px",
        "weight": 500,
        "lineHeight": 1.5,
        "notes": "セクション見出し(Contact h3)。ライブテキストの場合"
      },
      {
        "role": "small",
        "size": "12px",
        "weight": 500,
        "lineHeight": 1.67,
        "notes": "本文コピー(SP)・フッターリンク。アンダーライン付き"
      },
      {
        "role": "caption",
        "size": "13px",
        "weight": 500,
        "lineHeight": 1.77,
        "notes": "小文字注記・法的・補足テキスト"
      },
      {
        "role": "copyright",
        "size": "14px",
        "weight": 500,
        "notes": "コピーライト。フッター中央揃え(SP: 11px)"
      }
    ],
    "japanese": {
      "fontStack": "\"NotoSansJP\", sans-serif",
      "lineHeight": 1.67,
      "letterSpacing": "normal",
      "kinsoku": {
        "wordBreak": "keep-all",
        "lineBreak": "strict",
        "overflowWrap": "anywhere"
      },
      "openType": {
        "palt": false,
        "kern": true
      },
      "notes": "Noto Sans JP の Medium(500)と Bold(700)の 2 ウェイトだけで構成。font-smoothing: antialiased + -moz-osx-font-smoothing: grayscale でレンダリング最適化。"
    }
  },
  "spacing": {
    "baseUnit": "5px",
    "tokens": [
      {
        "name": "wrapper-max-width",
        "value": "1225px",
        "role": "コンテンツ最大幅"
      },
      {
        "name": "wrapper-width",
        "value": "94%",
        "role": "ラッパー幅(デスクトップ)"
      },
      {
        "name": "wrapper-width-mobile",
        "value": "83.6%",
        "role": "ラッパー幅(モバイル)"
      },
      {
        "name": "header-height",
        "value": "110px",
        "role": "ヘッダー高さ(デスクトップ)"
      },
      {
        "name": "header-height-mobile",
        "value": "70px",
        "role": "ヘッダー高さ(モバイル)"
      },
      {
        "name": "section-gap-large",
        "value": "140px",
        "role": "大セクション間余白(Pickup の bottom padding)"
      },
      {
        "name": "section-gap-small",
        "value": "75px",
        "role": "小セクション間余白"
      },
      {
        "name": "sns-icon-gap",
        "value": "20px",
        "role": "SNS アイコン間隔(デスクトップ)"
      },
      {
        "name": "sns-icon-gap-mobile",
        "value": "15px",
        "role": "SNS アイコン間隔(モバイル)"
      }
    ]
  },
  "breakpoints": {
    "mobile": {
      "value": "768px",
      "role": "モバイル(max-width: 768px)"
    },
    "desktop": {
      "value": "769px",
      "role": "デスクトップ(min-width: 769px)"
    },
    "wrapper-max": {
      "value": "1225px",
      "role": "コンテンツ最大幅"
    }
  },
  "radius": {
    "none": "0",
    "small": "5px",
    "pill": "100px",
    "notes": "ボタンは small(5px)。製品情報カードのような「主役コンテナ」のみ pill(100px)。"
  },
  "shadows": [],
  "motion": {
    "easing": {
      "default": "ease",
      "hover": "ease",
      "button": "ease"
    },
    "duration": {
      "scroll-in": "1s",
      "hover": "0.2s",
      "button-hover": "0.5s",
      "shake": "2s"
    },
    "notes": "スクロール入場アニメーションは .pala システム(opacity + transform、ease 1s)で統一。リンク・ボタンのホバーは opacity 0.8 + transition 0.2s。製品ボトル画像には shake アニメーション(2s infinite)で注目を集める。"
  },
  "components": [
    {
      "type": "button",
      "name": "Primary Button",
      "description": "ブランドカラーの CTA ボタン。シンプルな角丸 5px。",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#00a0d2",
            "color": "#ffffff",
            "borderRadius": "5px",
            "padding": "0 15px",
            "fontSize": "21px",
            "lineHeight": "35px",
            "fontWeight": "700",
            "display": "inline-block"
          }
        },
        {
          "label": "Hover",
          "props": {
            "background": "#00a0d2",
            "color": "#ffffff",
            "borderRadius": "5px",
            "opacity": "0.8",
            "transition": "all 0.5s"
          }
        },
        {
          "label": "Mobile",
          "props": {
            "background": "#00a0d2",
            "color": "#ffffff",
            "borderRadius": "5px",
            "padding": "0 10px",
            "fontSize": "16px",
            "lineHeight": "28px",
            "fontWeight": "700"
          }
        }
      ]
    },
    {
      "type": "card",
      "name": "Product Info Card (Pill Shape)",
      "description": "ピルシェイプの製品情報カード。左にロゴ画像、右に見出しと本文を配置。",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#ffffff",
            "color": "#00a0d2",
            "borderRadius": "100px",
            "width": "580px",
            "height": "145px",
            "paddingLeft": "30px",
            "display": "flex",
            "alignItems": "center"
          }
        },
        {
          "label": "Mobile",
          "props": {
            "background": "#ffffff",
            "color": "#00a0d2",
            "borderRadius": "100px",
            "width": "100%",
            "maxWidth": "330px",
            "height": "85px",
            "paddingLeft": "15px"
          }
        }
      ]
    },
    {
      "type": "navigation",
      "name": "Nav Overlay (Fullscreen)",
      "description": "ハンバーガーをタップすると展開するフルスクリーンナビゲーション。Primary 色を 97% 不透明で重ねる。",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "rgba(0, 160, 210, 0.97)",
            "color": "#ffffff",
            "position": "fixed",
            "fullViewport": "true",
            "display": "flex",
            "justifyContent": "center",
            "alignItems": "center"
          }
        }
      ]
    },
    {
      "type": "navigation",
      "name": "Hamburger Menu",
      "description": "ハンバーガーボタン。通常時は白3本ライン、アクティブ時(X 状態)はダークライン。",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "transparent",
            "color": "#ffffff",
            "width": "35px",
            "height": "20px",
            "lineColor": "#ffffff",
            "lineHeight": "2px"
          }
        },
        {
          "label": "Active",
          "props": {
            "background": "transparent",
            "color": "#231815",
            "width": "35px",
            "height": "20px",
            "lineColor": "#231815",
            "transform": "line1: translateY(9px) rotate(-45deg) / line2: opacity 0 / line3: translateY(-9px) rotate(45deg)"
          }
        }
      ]
    },
    {
      "type": "link",
      "name": "Link Default",
      "description": "標準リンク。ホバー時に opacity 0.8。",
      "variants": [
        {
          "label": "Default",
          "props": {
            "color": "#231815",
            "textDecoration": "none",
            "display": "block",
            "transition": "all 0.2s"
          }
        },
        {
          "label": "Hover",
          "props": {
            "color": "#231815",
            "opacity": "0.8",
            "transition": "all 0.2s"
          }
        }
      ]
    },
    {
      "type": "section",
      "name": "Header",
      "description": "透明オーバーレイヘッダー。ページ最上部に absolute 配置。",
      "variants": [
        {
          "label": "Desktop",
          "props": {
            "background": "transparent",
            "color": "#ffffff",
            "height": "110px",
            "padding": "0 65px",
            "position": "absolute"
          }
        },
        {
          "label": "Mobile",
          "props": {
            "background": "transparent",
            "color": "#ffffff",
            "height": "70px",
            "padding": "0 20px 0 15px",
            "position": "absolute"
          }
        }
      ]
    }
  ],
  "animation": {
    "system": "pala",
    "description": "スクロール入場アニメーションシステム。.pala クラスで opacity: 0 → 1、各方向の transform を 1s ease で実行。",
    "variants": [
      ".pala--down: translateY(-10%)",
      ".pala--down2: translateY(-20%)",
      ".pala--up: translateY(10%)",
      ".pala--up2: translateY(20%)",
      ".pala--lr: translate(-10%, 0)",
      ".pala--lr5: translate(-50%, 0)",
      ".pala--rl: translate(10%, 0)",
      ".pala--rl5: translate(50%, 0)",
      ".pala--scaleUp: scale(0.1)",
      ".pala--scaleDown: scale(1.5)"
    ],
    "delays": ".delay50 から .delay2000 まで 50ms 刻みで transition-delay を制御",
    "shake": "@keyframes shake { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } } 製品ボトル画像(.item.shake)に 2s infinite ease-in-out で適用"
  },
  "imagery": {
    "photography": {
      "style": "製品写真(600ml ボトル、3 種ラベル)とブランドシーンの実写。背景はセクションごとに異なる JPG 背景画像。ラベル内側に「鬼みくじ」(大吉・中吉・小吉・シークレット)が封入され、体験価値を提供する。",
      "format": "PNG(透過製品写真)、JPG(背景画像)",
      "notes": "背景画像は MV / Message / Product の各セクション専用に PC / SP 別で提供。background-size: 100% 100% でストレッチフィット。"
    },
    "illustration": "鬼(oni)モチーフのゆるかわキャラクターイラスト。PNG 形式で各セクションに絶対配置。shake アニメーションで浮遊感を演出。",
    "icons": "SNS アイコンは SVG。ヘッダーは白バリアント(_w.svg)、フッターはカラー/ダークバリアント(_02.svg)を使用。",
    "section-titles": "すべてのセクション見出しは SVG テキスト画像。ライブテキスト実装時は NotoSansJP Bold 使用。",
    "video": "YouTube 埋め込み、9:16 縦型(TikTok 形式)。aspect-ratio: 9 / 16。"
  },
  "logo": {
    "restrictions": [
      "ロゴ形式: SVG ワードマーク(テキストベース)",
      "白バリアント logo_w.svg: ダーク背景・MV・ヘッダーで使用",
      "黒バリアント logo_b.svg: ライト背景・フッター・SP Message セクションで使用",
      "ヘッダー表示サイズ: 90px 幅(SP: 55px)",
      "フッター表示サイズ: 100px 幅(SP: 80px)",
      "pointer-events: none が全画像に適用(選択・ドラッグ不可)",
      "ロゴのアスペクト比を変更しない"
    ],
    "navRepresentation": "ヘッダーは logo_w.svg(白)を左端に配置。背景画像の上に透過オーバーレイで重ねる。"
  },
  "guidelines": {
    "do": [
      "#00a0d2 は差し色として使う。CTA ボタン・ナビオーバーレイ・重要な数値・見出しに限定する",
      "NotoSansJP の 500(Medium)と 700(Bold)の 2 ウェイトだけで構成する",
      "スクロール入場アニメーションは .pala システムを踏襲し、ease 1s で統一する",
      "ロゴは背景色に合わせて白/黒バリアントを使い分ける",
      "ピルシェイプ(border-radius: 100px)は製品情報カードのような「主役コンテナ」にのみ使う",
      "イラスト・キャラクターは絶対配置でコンテンツの外縁に「飛び出す」ように置く"
    ],
    "dont": [
      "#00a0d2 を大面積の背景色として使わない(ナビオーバーレイ以外)",
      "ブランドカラー以外のアクセントカラーを追加しない(黄・赤・緑等はブランドに存在しない)",
      "セクションタイトルをライブテキストで実装する場合、NotoSansJP Bold 以外のフォントを使わない",
      "ロゴのアスペクト比を変更しない",
      "背景画像なしでセクションを組む場合、代替として単色(白または #00a0d2)を使う。グラデーションは使わない",
      "pointer-events: none を製品画像から外さない(ブランドの意図的な設定)"
    ]
  }
}