---
version: alpha
name: サントリーホールディングス（SUNTORY）
description: "「水と生きる」をコーポレートメッセージとする日本の総合飲料・食品企業。「ウォーターブルー」を基軸に、透明感・躍動感・信頼感を表現したグラデーション主体のビジュアルアイデンティティ。"
sources:
  - https://www.suntory.co.jp/
  - https://www.suntory.co.jp/top/parts_2023/css/main.css?=20260406v2
  - https://sun-ad.co.jp/works/suntory/logotype_naming/
notes:
  - CSS取得方法: --compressed curl + Accept-Language ja-JP ヘッダ。Akamai CDN のため直接アクセスに制限あり、初回圧縮フェッチで全データ取得済み。
  - "main.css" 内の #suntory_contents スコープで全スタイルが定義されている（スコープ汚染防止のための意図的な設計）。
  - カラー頻度分析（CSS全体）: #fff(22回)・#1476CB(15回)・#000(11回)・#5BC2DC(4回)・#005CAD(1回)。
  - ホームページ HTML での #5BC2DC は16回確認（スコープが限定的なため CSS より多い）。
  - 403 のためサブページ CSS は取得不可。グローバルナビ CSS は別ファイルの可能性あり。
  - 全ページ共通フォントは同一スタックと推定（日本語 Hiragino 系）。

colors:
  water-blue: "#5BC2DC"
  suntory-blue: "#1476CB"
  deep-blue: "#005CAD"
  gradient-mid: "rgb(30, 150, 212)"
  text-black: "#000000"
  text-near-black: "#040000"
  surface-white: "#FFFFFF"
  border-default: "#CCCCCC"
  border-light: "#DDDDDD"
  surface-blue-pale: "#EDF4F7"
  surface-blue-hover: "#D3DADD"
  ios-blue: "#007AFF"

typography:
  base:
    fontFamily: '"ヒラギノ角ゴ W3", "Hiragino Kaku Gothic Pro", "Yu Gothic Medium", "游ゴシック Medium", "メイリオ", Meiryo, sans-serif'
    fontSize: "1.4rem"
    lineHeight: 1.75
    letterSpacing: "0.05em"
    color: "#000000"
    fontSmoothing: "antialiased"
  display:
    fontSize: "163.6%"
    fontWeight: 700
    note: "of parent 1.4rem = approx 2.3rem"
  section-title:
    fontSize: "163.6%"
    fontWeight: 700
    mobile-fontSize: "109%"
    decoration: "4px bar gradient(#5BC2DC→#1476CB) centered below"
  h2:
    fontSize: "127%"
    fontWeight: 700
  body:
    fontSize: "1.4rem"
    fontWeight: 400
    lineHeight: 1.75
    letterSpacing: "0.05em"
  button:
    fontSize: "72%"
    fontWeight: 700
    letterSpacing: "0"
  news-link:
    fontSize: "54%"
    lineHeight: 1.3
    letterSpacing: "0"
  caption:
    fontSize: "63%"
    fontWeight: 700

rounded:
  none: "0"
  small: "4px"
  medium: "10px"
  card: "15px"
  infobox: "20px"
  button-pill: "30px"
  circle: "50%"
  full: "100%"
  modal-corner: "0 0 0 15px"

spacing:
  side-padding: "30px"
  section-gap: "200px"
  section-gap-mobile: "80px"
  section-title-pb: "40px"
  section-title-pb-mobile: "24px"
  section-title-mb: "60px"
  section-title-mb-mobile: "40px"

components:
  button-primary:
    backgroundColor: "#FFFFFF"
    color: "#000000"
    border: "1px solid #CCCCCC"
    borderRadius: "30px"
    fontSize: "72%"
    fontWeight: 700
    minWidth: "200px"
    padding: "20px 40px 20px 20px"
    arrowColor: "#1476CB"
    transition: "all 0.3s cubic-bezier(0.4, 0, 0, 1)"
    hover-backgroundColor: "#1476CB"
    hover-color: "#FFFFFF"
    hover-border: "1px solid #FFFFFF"
    hover-arrowColor: "#FFFFFF"
  button-nav-circle:
    backgroundColor: "#1476CB"
    borderRadius: "50%"
    svgFill: "#FFFFFF"
    hover-backgroundColor: "#FFFFFF"
    hover-svgFill: "#1476CB"
  section-title:
    textAlign: "center"
    fontWeight: 700
    fontSize: "163.6%"
    paddingBottom: "40px"
    marginBottom: "60px"
    pseudoBefore: "width:100px; height:4px; border-radius:4px; background:linear-gradient(to right,#5BC2DC,#1476CB)"
  hero:
    background: "#5BC2DC"
    height: "100vh"
    minHeight: "549px"
    textAnimation: "infinite horizontal scroll, 26.42s linear"
  info-box:
    backgroundColor: "#FFFFFF"
    borderRadius: "20px"
    boxShadow: "0 0 0.5rem rgba(0,0,0,0.1)"
    padding: "10px 20px"
  project-card:
    borderRadius: "15px"
    backgroundGradient: "37deg, rgb(244,251,253), rgb(223,234,238) 50%, #FFFFFF 50%"
  purpose-section:
    backgroundGradient: "180deg, rgb(30,150,212) 49%, #005CAD 63%, #005CAD 72%"
    textColor: "#FFFFFF"
    fontWeight: 700
  pagetop-button:
    backgroundColor: "#EDF4F7"
    borderRadius: "50%"
    width: "50px"
    height: "50px"
    hover-backgroundColor: "#D3DADD"
  scroll-indicator:
    border: "1px solid #5BC2DC"
    borderRadius: "50%"
    width: "50px"
    height: "50px"
    svgFill: "#5BC2DC"
    hover-backgroundColor: "#1476CB"
    hover-svgFill: "#FFFFFF"
---

## Overview

サントリーホールディングス（Suntory Holdings Limited）は1899年創業の日本の総合飲料・食品・健康・花き企業。コーポレートメッセージ「**水と生きる SUNTORY**」のもと、水を全デザインの起点に置く。

ブランドカラー「**ウォーターブルー**（`#5BC2DC`）」は水の柔らかさ・躍動感・清涼感を表す。それに続く深みある「**サントリーブルー**（`#1476CB`）」との2色グラデーションが、コーポレートサイトの見出し装飾・アクセントの軸となる。

創業者・鳥井信治郎の言葉「**やってみなはれ**」精神がブランド全体に流れ、大きな余白と動きあるアニメーションで"挑戦と水の流れ"を体現する。


## Colors

| トークン | 値 | 出典 | 用途 |
|---|---|---|---|
| `water-blue` | `#5BC2DC` | CSS hero bg, scroll button / 公式 "ウォーターブルー" | ヒーロー背景、スクロールインジケーター、グラデーション始点 |
| `suntory-blue` | `#1476CB` | CSS ボタン hover bg・link・SVG fill（15回） | ボタン hover、リンク色、矢印、グラデーション終点 |
| `deep-blue` | `#005CAD` | CSS purpose section gradient end | 全面青セクション背景（ブランドステートメント） |
| `text-black` | `#000000` | CSS body color | 全 body テキスト |
| `surface-white` | `#FFFFFF` | CSS button bg・nav bg | ボタン通常時、白面背景 |
| `border-default` | `#CCCCCC` | CSS .l-btn border | ボタン通常時ボーダー |
| `surface-blue-pale` | `#EDF4F7` | CSS page-top button bg | ページトップボタン、薄青アクセント面 |
| `surface-blue-hover` | `#D3DADD` | CSS page-top hover bg | ホバー状態の薄青 |

**ブランドグラデーション**（見出し下ライン・重要セクション）:
```css
background: linear-gradient(to right, #5BC2DC, #1476CB);
```

**パーパスセクション全面グラデーション**:
```css
background: linear-gradient(180deg, rgb(30,150,212) 49%, #005CAD 63%, #005CAD 72%);
```

**禁止**: `water-blue` を単色ボタン背景に使う（グラデーション or スクロールUIのみ）。`suntory-blue` は直接テキストリンクに使うが、大面積塗りつぶしには hover 時のみ。


## Typography

### フォントスタック

```css
font-family: "ヒラギノ角ゴ W3", "Hiragino Kaku Gothic Pro",
             "Yu Gothic Medium", "游ゴシック Medium",
             "メイリオ", Meiryo, sans-serif;
```

外部ウェブフォント未使用。システムフォントスタック依存。英字部分もシステムフォントにフォールバック。

### スケール（ベース = 1.4rem / 22.4px at 16px root）

| ロール | サイズ（相対） | 換算 | ウェイト | 用途 |
|---|---|---|---|---|
| Section Title | 163.6% | ≈ 2.3rem | 700 | `.p-top-ttl`、セクション大見出し |
| H2 / Purpose | 127% | ≈ 1.78rem | 700 | ブランドコピー、サブ見出し |
| Body | 1.4rem | 22.4px | 400 | 本文全般 |
| Button Label | 72% | ≈ 1rem | 700 | `.l-btn` ボタンラベル |
| Caption/Meta | 63% | ≈ 0.88rem | 700 | ニュース区分タイトル |
| News Link | 54% | ≈ 0.76rem | 400 | ニュースリスト本文リンク |

- 行高: `1.75`（本文）/ `1.3`（ニュースリンク）/ `1`（ボタン）
- 字間: `0.05em`（本文）/ `0`（ボタン・見出し密着）/ `−0.02em`（featured アイテム）
- フォントレンダリング: `-webkit-font-smoothing: antialiased`

### セクションタイトル装飾

```css
.section-title::before {
  content: "";
  display: block;
  width: 100px;
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(to right, #5BC2DC, #1476CB);
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
```


## Layout

- **コンテナ幅**: 960px（レガシー基準）/ 1200px（project セクション）
- **サイドパディング**: 30px
- **ヒーロー**: `100vh`（min 549px）、Water Blue 背景
- **セクション間ギャップ**: 200px（デスクトップ）/ 80px（モバイル）
- **ブレイクポイント**: 767px（モバイル）/ 1060px（タブレット）/ 1163px（大タブレット）

### ページ構造（トップページ）

```
[Hero] 100vh 水色背景 + 横スクロールコピーアニメーション
  └ 左下: 最新のお知らせ インフォボックス (white, radius 20px)
  └ 右下: スクロールインジケーター (circle, border #5BC2DC)
[Purpose Section] 全面 #005CAD グラデーション / sticky アニメーション
  ├ やってみなはれ コピー（白 SVG）
  ├ ブランドステートメント（白 SVG）
  └ パーパス文言（白 SVG）
[今週のおすすめ商品] 白背景、商品カルーセル
[実施中のキャンペーン] 白背景、カルーセル
[最新のお知らせ] ニュース + サイドバー (2カラム)
[Projects / Activities] max 1200px、カード3カラム
```


## Components

### ボタン（`.l-btn`）

```css
/* Default */
display: inline-block;
min-width: 200px;
padding: 20px 40px 20px 20px;
border: 1px solid #ccc;
border-radius: 30px;          /* pill */
background: #fff;
color: #000;
font-size: 72%;               /* ≈1rem */
font-weight: 700;
text-align: left;
transition: all 0.3s cubic-bezier(0.4, 0, 0, 1);

/* Arrow icon: SVG 9×14px, fill: #1476CB */

/* Hover */
background: #1476CB;
color: #fff;
border-color: #fff;
/* arrow fill: #fff */
```

ボタンは左揃えテキスト + 右端矢印の非対称レイアウトが特徴。

### セクションタイトル（`.p-top-ttl`）

- 中央揃え、`font-weight: 700`
- 下にグラデーションバー（W100px × H4px、`#5BC2DC → #1476CB`）
- `padding-bottom: 40px → 24px`（mobile）
- `margin-bottom: 60px → 40px`（mobile）
- White variant（`.white`）: `color: #fff`

### ニュースリスト

- 2カラムレイアウト（ニュース本体 + サイド）
- リンク色: `#1476CB` hover
- 日付・カテゴリ: 小サイズ（63%）、本文: 54%
- 行高 `1.3`（コンパクト）

### プロジェクトカード

```css
border-radius: 15px;
overflow: hidden;
background: linear-gradient(37deg, rgb(244,251,253), rgb(223,234,238) 50%, #fff 50%);
```
画像は absolute fill、object-fit: cover。

### ヒーロー

```css
height: 100vh;
min-height: 549px;
background: #5BC2DC;
```
テキストは SVG を横方向に無限スクロールさせる `@keyframes herocopy`（26.42s）。

### パーパスセクション（スクロール連動アニメーション）

```css
background: linear-gradient(180deg, rgb(30,150,212) 49%, #005CAD 63%, #005CAD 72%);
```
`position: sticky` + `mix-blend-mode: lighten` でスクロール合わせて白テキスト SVG が浮かび上がる演出。


## Imagery

**写真スタイル**:
- 商品写真: 白 or 明るいグレー背景、正面・斜め前方から
- キャンペーン・ライフスタイル: 食卓シーン、アウトドア、鮮やかな色彩
- 自然・水: 清流・水面のマクロ、ブランドメッセージ関連

**SVG 使用**:
- ロゴ・コーポレートコピーはすべて SVG（テキスト画像化なし）
- 矢印・ナビゲーションアイコンも SVG（fill で色制御）
- パーパスセクションのコピーは `fill: #fff` SVG でスクロール演出

**アニメーション**:
- 標準 transition: `all 0.3s cubic-bezier(0.4, 0, 0, 1)` (Material Design ease)
- ヒーロー開幕: `all 1.8s cubic-bezier(0.4, 0, 0, 1) 0.8s`
- テキストスクロール: `26.42s linear infinite`
- 要素表示: `opacity + transform: translateY(1rem)` → `(0rem)` + `transition 1s`


## Logo And Usage

- ロゴ: SUNTORY ワードマーク（SVG）+ 上部の "S" ブランドマーク
- サイズ: デスクトップ `546×45px` / モバイル `146×51px`
- カラー: ウォーターブルー `#5BC2DC` on 白背景（標準）/ 白 on 青背景（反転）
- ロゴ下部: コーポレートメッセージ「水と生きる SUNTORY」は別テキスト要素
- 最小余白: ロゴ高の 1/2 以上を周囲に確保

**禁止**:
- ロゴカラーを `#1476CB` 単色に変更（ブランドカラー `#5BC2DC` を維持）
- ロゴの伸縮・変形
- 背景色との低コントラスト配置（`#5BC2DC` on 白以外の場合はコントラスト比確認）


## Do's and Don'ts

### Do
- セクション見出し下には必ずグラデーションバー（`#5BC2DC → #1476CB`、W100px、4px）を入れる
- ボタンは pill 形状（`border-radius: 30px`）+ 右端矢印の非対称レイアウトを守る
- 余白は大きめに取る（セクション間 200px デスクトップ）
- 本文 `letter-spacing: 0.05em` を維持（詰め字禁止）
- 見出しやコーポレートコピーは SVG で実装し、アニメーション連動を前提にする
- パーパス系のメッセージセクションには全面青グラデーション + 白テキストを使う
- 商品カードの画像角丸は `15px`、インフォボックスは `20px` で統一

### Don't
- `#5BC2DC`（Water Blue）を単色ボタン背景に使う（hover 時のみ `#1476CB`）
- フォントを Hiragino 以外の日本語フォントに変更する（`letter-spacing` が崩れる）
- セクション見出しを左揃えにする（`.p-top-ttl` は `text-align: center`）
- グラデーションバーを省略してシンプルな下線に変える
- `border-radius` をゼロにした矩形ボタンを使う
- 英字ウェブフォント（Google Fonts 等）を導入して日本語フォントスタックを分断する
- ヒーロー背景に `#5BC2DC` 以外の色を使う（ブランド体験の起点）

{
  "$schema": "https://aistyles.dev/schema/tokens-v1.json",
  "version": "1.0",
  "brand": {
    "slug": "suntory",
    "name": "サントリーホールディングス (SUNTORY)",
    "url": "https://www.suntory.co.jp/",
    "description": "「水と生きる」をコーポレートメッセージとする日本の総合飲料・食品企業。「ウォーターブルー」を基軸に、透明感・躍動感・信頼感を表現したグラデーション主体のビジュアルアイデンティティ。",
    "category": "tech",
    "tags": [
      "corporate",
      "japanese",
      "beverage",
      "gradient",
      "minimal"
    ],
    "theme": "light-with-dark-sections",
    "language": "ja"
  },
  "sources": [
    "https://www.suntory.co.jp/",
    "https://www.suntory.co.jp/top/parts_2023/css/main.css?=20260406v2",
    "https://sun-ad.co.jp/works/suntory/logotype_naming/"
  ],
  "extractedAt": "2026-05-16",
  "notes": [
    "CSS取得方法: --compressed curl + Accept-Language ja-JP ヘッダ。Akamai CDN のため直接アクセスに制限あり、初回圧縮フェッチで全データ取得済み。",
    "main.css 内の #suntory_contents スコープで全スタイルが定義されている(スコープ汚染防止のための意図的な設計)。",
    "カラー頻度分析(CSS全体): #fff(22回)・#1476CB(15回)・#000(11回)・#5BC2DC(4回)・#005CAD(1回)。",
    "ホームページ HTML での #5BC2DC は16回確認(スコープが限定的なため CSS より多い)。",
    "403 のためサブページ CSS は取得不可。グローバルナビ CSS は別ファイルの可能性あり。",
    "全ページ共通フォントは同一スタックと推定(日本語 Hiragino 系)。"
  ],
  "colors": {
    "groups": [
      {
        "label": "Brand Blue",
        "tokens": [
          {
            "name": "Water Blue",
            "value": "#5BC2DC",
            "token": "--color-water-blue",
            "role": "ヒーロー背景、スクロールインジケーター、グラデーション始点。ブランドの起点となる水の柔らかさを表現"
          },
          {
            "name": "Suntory Blue",
            "value": "#1476CB",
            "token": "--color-suntory-blue",
            "role": "ボタン hover、リンク色、矢印、グラデーション終点(CSS最頻出 15回)"
          },
          {
            "name": "Deep Blue",
            "value": "#005CAD",
            "token": "--color-deep-blue",
            "role": "全面青セクション背景(ブランドステートメント)、purpose section gradient end"
          },
          {
            "name": "Gradient Mid",
            "value": "rgb(30, 150, 212)",
            "token": "--color-gradient-mid",
            "role": "Purpose section の中間グラデーションカラー"
          }
        ]
      },
      {
        "label": "Text",
        "tokens": [
          {
            "name": "Text Black",
            "value": "#000000",
            "token": "--color-text-black",
            "role": "全 body テキスト"
          },
          {
            "name": "Text Near Black",
            "value": "#040000",
            "token": "--color-text-near-black",
            "role": "見出し・強調テキスト"
          }
        ]
      },
      {
        "label": "Surface",
        "tokens": [
          {
            "name": "Surface White",
            "value": "#FFFFFF",
            "token": "--color-surface-white",
            "role": "ボタン通常時、白面背景(CSS最頻出 22回)"
          },
          {
            "name": "Surface Blue Pale",
            "value": "#EDF4F7",
            "token": "--color-surface-blue-pale",
            "role": "ページトップボタン、薄青アクセント面"
          },
          {
            "name": "Surface Blue Hover",
            "value": "#D3DADD",
            "token": "--color-surface-blue-hover",
            "role": "ホバー状態の薄青"
          }
        ]
      },
      {
        "label": "Border",
        "tokens": [
          {
            "name": "Border Default",
            "value": "#CCCCCC",
            "token": "--color-border-default",
            "role": "ボタン通常時ボーダー"
          },
          {
            "name": "Border Light",
            "value": "#DDDDDD",
            "token": "--color-border-light",
            "role": "区切り線・ライトボーダー"
          }
        ]
      },
      {
        "label": "System",
        "tokens": [
          {
            "name": "iOS Blue",
            "value": "#007AFF",
            "token": "--color-ios-blue",
            "role": "iOS システムリンク (Webkit デフォルトリンク)"
          }
        ]
      }
    ]
  },
  "typography": {
    "fonts": [
      {
        "family": "Hiragino Kaku Gothic",
        "stack": "\"ヒラギノ角ゴ W3\", \"Hiragino Kaku Gothic Pro\", \"Yu Gothic Medium\", \"游ゴシック Medium\", \"メイリオ\", Meiryo, sans-serif",
        "role": "primary",
        "notes": "外部ウェブフォント未使用。システムフォントスタック依存。英字部分もシステムフォントにフォールバック。"
      },
      {
        "family": "Hiragino Kaku Gothic (Japanese)",
        "stack": "\"ヒラギノ角ゴ W3\", \"Hiragino Kaku Gothic Pro\", \"Yu Gothic Medium\", \"游ゴシック Medium\", \"メイリオ\", Meiryo, sans-serif",
        "role": "japanese",
        "notes": "日本語専用スタック。ヒラギノ角ゴ W3 が macOS / iOS で優先される。Yu Gothic は Windows 10 以降のフォールバック。"
      }
    ],
    "scale": [
      {
        "role": "section-title",
        "size": "163.6%",
        "weight": 700,
        "lineHeight": 1.2,
        "notes": "ベース 1.4rem の 163.6% = 約 2.3rem (36.8px)。`.p-top-ttl` セクション大見出し。モバイル時は 109% に縮小。"
      },
      {
        "role": "h2",
        "size": "127%",
        "weight": 700,
        "lineHeight": 1.4,
        "notes": "約 1.78rem (28.5px)。ブランドコピー、サブ見出し。"
      },
      {
        "role": "body",
        "size": "1.4rem",
        "weight": 400,
        "lineHeight": 1.75,
        "notes": "22.4px。本文全般。letter-spacing: 0.05em。"
      },
      {
        "role": "button",
        "size": "72%",
        "weight": 700,
        "lineHeight": 1,
        "notes": "約 1rem (16px)。.l-btn ボタンラベル。letter-spacing: 0。"
      },
      {
        "role": "caption",
        "size": "63%",
        "weight": 700,
        "lineHeight": 1.4,
        "notes": "約 0.88rem (14.1px)。ニュース区分タイトル。"
      },
      {
        "role": "news-link",
        "size": "54%",
        "weight": 400,
        "lineHeight": 1.3,
        "notes": "約 0.76rem (12.1px)。ニュースリスト本文リンク。letter-spacing: 0。"
      }
    ],
    "japanese": {
      "fontStack": "\"ヒラギノ角ゴ W3\", \"Hiragino Kaku Gothic Pro\", \"Yu Gothic Medium\", \"游ゴシック Medium\", \"メイリオ\", Meiryo, sans-serif",
      "lineHeight": 1.75,
      "letterSpacing": "0.05em",
      "kinsoku": {
        "wordBreak": "keep-all",
        "lineBreak": "strict",
        "overflowWrap": "anywhere"
      },
      "openType": {
        "palt": false,
        "kern": true
      },
      "notes": "本文の letter-spacing は 0.05em が基準で、詰めずに開放感を確保する。ボタンや見出しは letter-spacing: 0 で密着。featured アイテムは -0.02em で詰める。font-smoothing: antialiased。"
    }
  },
  "spacing": {
    "baseUnit": "1.4rem",
    "tokens": [
      {
        "name": "side-padding",
        "value": "30px",
        "role": "コンテナの左右パディング"
      },
      {
        "name": "section-gap",
        "value": "200px",
        "role": "セクション間の縦余白(デスクトップ)"
      },
      {
        "name": "section-gap-mobile",
        "value": "80px",
        "role": "セクション間の縦余白(モバイル)"
      },
      {
        "name": "section-title-pb",
        "value": "40px",
        "role": "セクションタイトル下の padding(デスクトップ)"
      },
      {
        "name": "section-title-pb-mobile",
        "value": "24px",
        "role": "セクションタイトル下の padding(モバイル)"
      },
      {
        "name": "section-title-mb",
        "value": "60px",
        "role": "セクションタイトル後の margin(デスクトップ)"
      },
      {
        "name": "section-title-mb-mobile",
        "value": "40px",
        "role": "セクションタイトル後の margin(モバイル)"
      }
    ]
  },
  "breakpoints": {
    "mobile": {
      "value": "767px",
      "role": "モバイル"
    },
    "tablet": {
      "value": "1060px",
      "role": "タブレット"
    },
    "large-tablet": {
      "value": "1163px",
      "role": "大タブレット"
    },
    "container-legacy": {
      "value": "960px",
      "role": "レガシーコンテナ最大幅"
    },
    "container-project": {
      "value": "1200px",
      "role": "Project セクションコンテナ最大幅"
    }
  },
  "radius": {
    "none": "0",
    "small": "4px",
    "medium": "10px",
    "card": "15px",
    "infobox": "20px",
    "button-pill": "30px",
    "circle": "50%",
    "full": "100%",
    "modal-corner": "0 0 0 15px",
    "notes": "ボタンは pill (30px)、商品カードは card (15px)、インフォボックスは infobox (20px) で統一。"
  },
  "shadows": [
    {
      "name": "info-box",
      "value": "0 0 0.5rem rgba(0,0,0,0.1)",
      "role": "インフォボックスの軽い浮き"
    }
  ],
  "gradients": [
    {
      "name": "brand-bar",
      "value": "linear-gradient(to right, #5BC2DC, #1476CB)",
      "role": "セクション見出し下のグラデーションバー(W100px × H4px)。ブランド署名の象徴"
    },
    {
      "name": "purpose-section",
      "value": "linear-gradient(180deg, rgb(30,150,212) 49%, #005CAD 63%, #005CAD 72%)",
      "role": "パーパスセクション全面背景。ブランドステートメントの強調"
    },
    {
      "name": "project-card",
      "value": "linear-gradient(37deg, rgb(244,251,253), rgb(223,234,238) 50%, #FFFFFF 50%)",
      "role": "プロジェクトカードの薄い斜めグラデーション"
    }
  ],
  "components": [
    {
      "type": "button",
      "name": "Primary Button (.l-btn)",
      "description": "SUNTORY の代表的なボタン。pill 形状で、左揃えテキスト + 右端矢印の非対称レイアウトが特徴。デフォルトは白背景、ホバー時にサントリーブルー反転。",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#FFFFFF",
            "color": "#000000",
            "border": "1px solid #CCCCCC",
            "borderRadius": "30px",
            "padding": "20px 40px 20px 20px",
            "fontSize": "1rem",
            "fontWeight": "700",
            "minWidth": "200px",
            "arrowColor": "#1476CB"
          }
        },
        {
          "label": "Hover",
          "props": {
            "background": "#1476CB",
            "color": "#FFFFFF",
            "border": "1px solid #FFFFFF",
            "borderRadius": "30px",
            "padding": "20px 40px 20px 20px",
            "arrowColor": "#FFFFFF"
          }
        }
      ]
    },
    {
      "type": "button",
      "name": "Nav Circle Button",
      "description": "ナビゲーション用の円形ボタン。サントリーブルー円 + 白アイコン構成。",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#1476CB",
            "color": "#FFFFFF",
            "borderRadius": "50%",
            "padding": "12px",
            "iconColor": "#FFFFFF"
          }
        },
        {
          "label": "Hover",
          "props": {
            "background": "#FFFFFF",
            "color": "#1476CB",
            "borderRadius": "50%",
            "border": "1px solid #1476CB",
            "iconColor": "#1476CB"
          }
        }
      ]
    },
    {
      "type": "button",
      "name": "Pagetop Button",
      "description": "ページトップへ戻るための薄青の円形ボタン。",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#EDF4F7",
            "color": "#1476CB",
            "borderRadius": "50%",
            "width": "50px",
            "height": "50px"
          }
        },
        {
          "label": "Hover",
          "props": {
            "background": "#D3DADD",
            "color": "#1476CB",
            "borderRadius": "50%",
            "width": "50px",
            "height": "50px"
          }
        }
      ]
    },
    {
      "type": "section",
      "name": "Section Title (.p-top-ttl)",
      "description": "中央揃えのセクション見出し。下にグラデーションバー(W100px × H4px、water-blue → suntory-blue)を必ず配置。",
      "variants": [
        {
          "label": "Default",
          "props": {
            "color": "#000000",
            "textAlign": "center",
            "fontSize": "163.6%",
            "fontWeight": "700",
            "paddingBottom": "40px",
            "marginBottom": "60px",
            "decorationBar": "100px × 4px linear-gradient(to right, #5BC2DC, #1476CB)"
          }
        },
        {
          "label": "White (on dark)",
          "props": {
            "color": "#FFFFFF",
            "textAlign": "center",
            "fontSize": "163.6%",
            "fontWeight": "700",
            "decorationBar": "100px × 4px linear-gradient(to right, #5BC2DC, #1476CB)"
          }
        }
      ]
    },
    {
      "type": "section",
      "name": "Hero",
      "description": "100vh のヒーローセクション。Water Blue 単色背景に横方向無限スクロールするテキストアニメーション。",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#5BC2DC",
            "color": "#FFFFFF",
            "height": "100vh",
            "minHeight": "549px",
            "textAnimation": "infinite horizontal scroll, 26.42s linear"
          }
        }
      ]
    },
    {
      "type": "section",
      "name": "Purpose Section",
      "description": "全面青グラデーションのパーパスセクション。ブランドステートメント用、白テキスト SVG をスクロール演出で浮かび上がらせる。",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "linear-gradient(180deg, rgb(30,150,212) 49%, #005CAD 63%, #005CAD 72%)",
            "color": "#FFFFFF",
            "fontWeight": "700"
          }
        }
      ]
    },
    {
      "type": "card",
      "name": "Info Box",
      "description": "ヒーロー左下の最新のお知らせインフォボックス。白背景 + 軽いシャドウ。",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#FFFFFF",
            "color": "#000000",
            "borderRadius": "20px",
            "boxShadow": "0 0 0.5rem rgba(0,0,0,0.1)",
            "padding": "10px 20px"
          }
        }
      ]
    },
    {
      "type": "card",
      "name": "Project Card",
      "description": "プロジェクトカード。薄い斜めグラデーション背景 + 角丸 15px。",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "linear-gradient(37deg, rgb(244,251,253), rgb(223,234,238) 50%, #FFFFFF 50%)",
            "color": "#000000",
            "borderRadius": "15px",
            "overflow": "hidden"
          }
        }
      ]
    },
    {
      "type": "navigation",
      "name": "Scroll Indicator",
      "description": "ヒーロー右下のスクロールインジケーター。Water Blue 枠の円形 + ダウンアロー。",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "transparent",
            "color": "#5BC2DC",
            "border": "1px solid #5BC2DC",
            "borderRadius": "50%",
            "width": "50px",
            "height": "50px",
            "iconColor": "#5BC2DC"
          }
        },
        {
          "label": "Hover",
          "props": {
            "background": "#1476CB",
            "color": "#FFFFFF",
            "border": "1px solid #1476CB",
            "borderRadius": "50%",
            "width": "50px",
            "height": "50px",
            "iconColor": "#FFFFFF"
          }
        }
      ]
    }
  ],
  "imagery": {
    "photography": {
      "style": "商品写真は白 or 明るいグレー背景、正面・斜め前方から。キャンペーン・ライフスタイル写真は食卓シーン、アウトドア、鮮やかな色彩。自然・水のマクロ撮影でブランドメッセージとの関連を強調。",
      "format": "JPEG / WebP",
      "notes": "ロゴ・コーポレートコピーはすべて SVG(テキスト画像化なし)。矢印・ナビゲーションアイコンも SVG(fill で色制御)。パーパスセクションのコピーは fill: #fff SVG でスクロール演出。"
    },
    "icons": {
      "font": "SVG ベースのカスタムアイコン。stroke / fill で色制御",
      "size": "矢印 9×14px、ナビゲーションアイコン 24×24px 基準"
    }
  },
  "motion": {
    "easing": {
      "default": "cubic-bezier(0.4, 0, 0, 1)",
      "fast": "cubic-bezier(0.4, 0, 0, 1)"
    },
    "duration": {
      "short": "0.3s",
      "medium": "1s",
      "hero-open": "1.8s",
      "text-scroll": "26.42s"
    },
    "notes": "標準 transition: all 0.3s cubic-bezier(0.4, 0, 0, 1) (Material Design ease)。ヒーロー開幕: all 1.8s cubic-bezier(0.4, 0, 0, 1) 0.8s。テキストスクロール: 26.42s linear infinite。要素表示: opacity + transform: translateY(1rem) → (0rem) + transition 1s。"
  },
  "logo": {
    "restrictions": [
      "ロゴ: SUNTORY ワードマーク(SVG)+ 上部の S ブランドマーク",
      "サイズ: デスクトップ 546×45px / モバイル 146×51px",
      "カラー: ウォーターブルー #5BC2DC on 白背景(標準)/ 白 on 青背景(反転)",
      "ロゴ下部に「水と生きる SUNTORY」コーポレートメッセージを別テキスト要素として配置",
      "最小余白: ロゴ高の 1/2 以上を周囲に確保",
      "ロゴカラーを #1476CB 単色に変更しない(ブランドカラー #5BC2DC を維持)",
      "ロゴの伸縮・変形は禁止",
      "背景色との低コントラスト配置を避ける(#5BC2DC on 白以外の場合はコントラスト比確認)"
    ],
    "navRepresentation": "ヘッダーは SUNTORY ワードマーク(SVG)。ウォーターブルー #5BC2DC で白背景に配置。"
  },
  "guidelines": {
    "do": [
      "セクション見出し下には必ずグラデーションバー(#5BC2DC → #1476CB、W100px、4px)を入れる",
      "ボタンは pill 形状(border-radius: 30px)+ 右端矢印の非対称レイアウトを守る",
      "余白は大きめに取る(セクション間 200px デスクトップ)",
      "本文 letter-spacing: 0.05em を維持(詰め字禁止)",
      "見出しやコーポレートコピーは SVG で実装し、アニメーション連動を前提にする",
      "パーパス系のメッセージセクションには全面青グラデーション + 白テキストを使う",
      "商品カードの画像角丸は 15px、インフォボックスは 20px で統一"
    ],
    "dont": [
      "#5BC2DC (Water Blue) を単色ボタン背景に使う(hover 時のみ #1476CB)",
      "フォントを Hiragino 以外の日本語フォントに変更する(letter-spacing が崩れる)",
      "セクション見出しを左揃えにする(.p-top-ttl は text-align: center)",
      "グラデーションバーを省略してシンプルな下線に変える",
      "border-radius をゼロにした矩形ボタンを使う",
      "英字ウェブフォント(Google Fonts 等)を導入して日本語フォントスタックを分断する",
      "ヒーロー背景に #5BC2DC 以外の色を使う(ブランド体験の起点)"
    ]
  }
}