{
  "$schema": "https://aistyles.dev/schema/tokens-v1.json",
  "version": "1.0",
  "brand": {
    "slug": "sej",
    "name": "セブン-イレブン・ジャパン (Seven-Eleven Japan)",
    "url": "https://www.sej.co.jp/",
    "description": "日本最大のコンビニチェーンのコーポレートサイト。グリーン (#008833) を主要インタラクション色として全 UI を統一し、赤 (#FF0000) はロゴマーク専用に限定。2022 年リニューアル (rn202304) で 1200px 中央レイアウト + モダン JP フォントスタックへ移行し、2025 年リニューアル (rn202601) ではトリカラーグラデーション見出し下線・グラスモーフィズムカード・グリーン系グラデーションヒーローが追加された。商品写真・カードグリッド・ピルボタン・グラスモーフィズムで構成するコンテンツファースト設計。",
    "category": "ec",
    "tags": [
      "retail",
      "japanese",
      "convenience-store",
      "green",
      "glassmorphism",
      "tricolor-gradient",
      "two-generation",
      "consumer"
    ],
    "theme": "light",
    "language": "ja"
  },
  "sources": [
    "https://www.sej.co.jp/",
    "sej-all-css.json (34 シート全取得、2026-05-17)",
    "https://www.sej.co.jp/library/common/rn202304/css/pc.css",
    "https://www.sej.co.jp/library/common/rn202601/css/top_0423/top.css",
    "https://www.sej.co.jp/library/common/rn202304/css/header_pc.css",
    "https://www.sej.co.jp/library/common/rn202304/css/footer_pc.css"
  ],
  "extractedAt": "2026-05-17",
  "notes": [
    "直接証拠: 全カラー値は CSS 実測値 (rgb() 形式)、hex 変換は Python で計算。",
    "直接証拠: 全 34 シートを Console スクリプトで一括取得し、頻度分析で主要色を確定。",
    "直接証拠: html { font-size: 62.5% } → 1rem = 10px として rem 換算 (pc.css 由来)。",
    "重要: rn202304 = 2022 年リニューアルデザインシステム (現行 PC/SP 共通レイアウト)。rn202601 = 2025 年トップページ専用リニューアル (#rn202601 スコープで管理)。",
    "重要: ロゴの赤 (#FF0000) はロゴマーク自体の色。UI の主要インタラクション色はグリーン (#008833) — 80 回以上の出現が確認されている。",
    "重要: body min-width: 1200px (PC)、769px 未満でモバイルレイアウト。",
    "推論: 一部のホバー状態色は CSS 内コメントとパターンからの推定。"
  ],
  "colors": {
    "groups": [
      {
        "label": "Brand Green",
        "tokens": [
          {
            "name": "Primary (Brand Green)",
            "value": "#008833",
            "token": "--color-primary",
            "role": "ブランドの中核色。ボタン文字・枠、ナビホバー、メガメニュー、リンク、アクティブ状態。CSS 中 80 回以上出現"
          },
          {
            "name": "Primary Dark",
            "value": "#00490A",
            "token": "--color-primary-dark",
            "role": "primary のホバー・アクティブ状態"
          },
          {
            "name": "Primary Deep",
            "value": "#054B29",
            "token": "--color-primary-deep",
            "role": "ダーク文脈の深緑"
          },
          {
            "name": "Primary Surface",
            "value": "#F7FAF8",
            "token": "--color-primary-surface",
            "role": "緑系ライトサーフェス (ハラスメント通知 bg 等)"
          },
          {
            "name": "Primary Surface Alt",
            "value": "#E2EBD6",
            "token": "--color-primary-surface-alt",
            "role": "緑系パネル背景"
          }
        ]
      },
      {
        "label": "Hero Gradient (rn202601)",
        "tokens": [
          {
            "name": "Hero Green Start",
            "value": "#45BF6B",
            "token": "--color-hero-green-start",
            "role": "ヒーローバー始点・SEJ アプリカード背景"
          },
          {
            "name": "Hero Green End",
            "value": "#287C42",
            "token": "--color-hero-green-end",
            "role": "ヒーローバーグラデーション終端"
          }
        ]
      },
      {
        "label": "Tricolor Gradient (Section Underline)",
        "tokens": [
          {
            "name": "Tricolor Mint",
            "value": "#89C0A6",
            "token": "--color-tricolor-mint",
            "role": "セクション見出し下線グラデーション始点"
          },
          {
            "name": "Tricolor Peach",
            "value": "#F89B54",
            "token": "--color-tricolor-peach",
            "role": "セクション見出し下線グラデーション中点 (rgba 0.6)"
          },
          {
            "name": "Tricolor Crimson",
            "value": "#D8273A",
            "token": "--color-tricolor-crimson",
            "role": "セクション見出し下線グラデーション終点 (rgba 0.6)"
          }
        ]
      },
      {
        "label": "Text",
        "tokens": [
          {
            "name": "Text (rn202601)",
            "value": "#241E18",
            "token": "--color-text",
            "role": "rn202601 本文・リンク default (温かみのあるダークブラウン)"
          },
          {
            "name": "Text Nav",
            "value": "#474646",
            "token": "--color-text-nav",
            "role": "ヘッダー・ナビテキスト (common.css)"
          },
          {
            "name": "Text Secondary",
            "value": "#6C6C6C",
            "token": "--color-text-secondary",
            "role": "商品テキスト・サブコピー"
          },
          {
            "name": "Text Muted",
            "value": "#999999",
            "token": "--color-text-muted",
            "role": "プレースホルダー・非アクティブ dot"
          },
          {
            "name": "Text Black",
            "value": "#000000",
            "token": "--color-text-black",
            "role": "ナビ default・フッターテキスト"
          }
        ]
      },
      {
        "label": "Surface",
        "tokens": [
          {
            "name": "Surface",
            "value": "#FFFFFF",
            "token": "--color-surface",
            "role": "ページ背景・カード・ナビ背景"
          },
          {
            "name": "Surface Alt",
            "value": "#F6F6F6",
            "token": "--color-surface-alt",
            "role": "セクション区切り背景"
          },
          {
            "name": "Surface Warm",
            "value": "#FFF4E7",
            "token": "--color-surface-warm",
            "role": "軽いウォームパネル"
          },
          {
            "name": "Surface 7NOW App",
            "value": "#EBEBEB",
            "token": "--color-surface-app-7now",
            "role": "7NOW アプリカード背景"
          }
        ]
      },
      {
        "label": "Border & Divider",
        "tokens": [
          {
            "name": "Border",
            "value": "#CCCCCC",
            "token": "--color-border",
            "role": "主要ボーダー (CSS 中 54-88 回出現)"
          },
          {
            "name": "Border Light",
            "value": "#D9D9D9",
            "token": "--color-border-light",
            "role": "カード境界線"
          },
          {
            "name": "Border Divider",
            "value": "#E5E5E5",
            "token": "--color-border-divider",
            "role": "ヘッダーボトムライン・フッタートップライン"
          },
          {
            "name": "Footer BG",
            "value": "#E5E5E5",
            "token": "--color-footer-bg",
            "role": "copyright バー・regional link bg"
          },
          {
            "name": "Neutral UI",
            "value": "#EEEEEE",
            "token": "--color-neutral-ui",
            "role": "siteStructure bg (breadcrumb)"
          }
        ]
      },
      {
        "label": "Status & Accent",
        "tokens": [
          {
            "name": "Alert Text",
            "value": "#DE3A3A",
            "token": "--color-alert-text",
            "role": "お知らせ赤テキスト"
          },
          {
            "name": "Alert BG",
            "value": "#FDF2F2",
            "token": "--color-alert-bg",
            "role": "お知らせ赤背景"
          },
          {
            "name": "Orange CTA",
            "value": "#D43500",
            "token": "--color-orange-cta",
            "role": "キャンペーンリンクホバー・外部リンク"
          },
          {
            "name": "Logo Red (Logo Only)",
            "value": "#FF0000",
            "token": "--color-logo-red",
            "role": "ロゴアイコンの赤ストライプ専用。UI には使わない"
          },
          {
            "name": "Logo Orange (Logo Only)",
            "value": "#FF6600",
            "token": "--color-logo-orange",
            "role": "ロゴアイコンの橙ストライプ専用。UI には使わない"
          }
        ]
      }
    ]
  },
  "typography": {
    "fonts": [
      {
        "family": "モトヤLシーダ3等幅 (Motoya L Cedar) + Hiragino",
        "stack": "モトヤLシーダ3等幅, 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', メイリオ, Meiryo, 'ＭＳ Ｐゴシック', helvetica, sans-serif",
        "weights": [
          400,
          700
        ],
        "role": "rn202304 本文・ナビ。モトヤLシーダ3等幅を最優先 + Hiragino フォールバック"
      },
      {
        "family": "Hiragino Kaku Gothic ProN (rn202601)",
        "stack": "'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', メイリオ, Meiryo, 'ＭＳ Ｐゴシック', helvetica, sans-serif",
        "weights": [
          400,
          700
        ],
        "role": "rn202601 本文・見出し。モトヤを外しヒラギノ系のみで統一"
      },
      {
        "family": "Arial (Footer)",
        "stack": "Arial, Helvetica, sans-serif",
        "weights": [
          400
        ],
        "role": "フッター英数字・copyright バー専用"
      }
    ],
    "scale": [
      {
        "role": "display (rn202304)",
        "size": "4.2rem",
        "weight": 700,
        "lineHeight": 1,
        "letterSpacing": "0.1em",
        "note": "42px、.titleC クラス、PC のみ"
      },
      {
        "role": "h1 section (rn202601)",
        "size": "4rem",
        "weight": 700,
        "lineHeight": 1,
        "letterSpacing": "0.1em",
        "note": ".c-ttl PC 40px / SP 3rem (30px)"
      },
      {
        "role": "h1 section (rn202304)",
        "size": "3.6rem",
        "weight": 700,
        "lineHeight": 1,
        "letterSpacing": "0.1em",
        "note": ".titleA / .titleD PC 36px"
      },
      {
        "role": "h2 section",
        "size": "3.2rem",
        "weight": 700,
        "lineHeight": 1,
        "letterSpacing": "0.1em",
        "note": ".titleB PC 32px、center align"
      },
      {
        "role": "h3 left (rn202601)",
        "size": "3rem",
        "weight": 700,
        "lineHeight": 1.2,
        "note": ".c-leftTtl PC 30px / SP 2.5rem (25px)"
      },
      {
        "role": "h4 body",
        "size": "2.4rem",
        "weight": 700,
        "lineHeight": 1.3,
        "note": "24px"
      },
      {
        "role": "body",
        "size": "1.6rem",
        "weight": 400,
        "lineHeight": 1.5,
        "note": "16px、pc.css body !important。rn202601 では min(3.5vw, 1rem) でクランプ"
      },
      {
        "role": "body-text",
        "size": "1.5rem",
        "weight": 400,
        "lineHeight": 1.5,
        "note": "コンテンツ文字サイズ最頻出"
      },
      {
        "role": "nav-global",
        "size": "16px",
        "weight": 400,
        "lineHeight": 1,
        "note": "ul.globalNaviList"
      },
      {
        "role": "nav-utility",
        "size": "14px",
        "weight": 400,
        "lineHeight": 1,
        "note": "ヘッダー上部ユーティリティリンク"
      },
      {
        "role": "small",
        "size": "1.4rem",
        "weight": 400,
        "lineHeight": 1.4,
        "note": "14px、ナビ・パンくず・補足テキスト (50 回出現)"
      },
      {
        "role": "label",
        "size": "1.2rem",
        "weight": 400,
        "lineHeight": 1,
        "note": "12px、タブボタン SP・注記"
      }
    ],
    "japanese": {
      "fontStack": "'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', メイリオ, Meiryo, 'ＭＳ Ｐゴシック', helvetica, sans-serif",
      "lineHeight": 1.5,
      "letterSpacing": "0",
      "openType": {
        "palt": false,
        "kern": true
      },
      "kinsoku": {
        "wordBreak": "keep-all",
        "lineBreak": "strict"
      },
      "notes": [
        "html { font-size: 62.5% } で 1rem = 10px に固定 (rem 計算が簡潔になる)",
        "rn202304 はモトヤLシーダ3等幅を最優先、rn202601 ではヒラギノ系のみに変更",
        "見出しクラスは letter-spacing: 0.1em を必ず付与、本文は 0",
        "ウェイトは normal (400) と bold (700) の 2 段階運用のみ",
        "rn202601 本文は min(3.5vw, 1rem) でビューポート幅クランプ"
      ]
    }
  },
  "spacing": {
    "baseUnit": "10px",
    "tokens": [
      {
        "name": "0",
        "value": "0px",
        "role": "ゼロ余白"
      },
      {
        "name": "xs",
        "value": "4px",
        "role": "最小余白"
      },
      {
        "name": "sm",
        "value": "5px",
        "role": "小余白"
      },
      {
        "name": "md",
        "value": "10px",
        "role": "中余白"
      },
      {
        "name": "lg",
        "value": "20px",
        "role": "大余白"
      },
      {
        "name": "xl",
        "value": "40px",
        "role": "特大余白"
      },
      {
        "name": "section-gap",
        "value": "60px",
        "role": "セクション間隔 (fLink_pc padding-top)"
      },
      {
        "name": "section-gap-lg",
        "value": "80px",
        "role": "大型セクション間隔 (titleA padding)"
      },
      {
        "name": "section-gap-xl",
        "value": "120px",
        "role": "最大セクション間隔 (titleD padding-top)"
      },
      {
        "name": "inner-pc-a",
        "value": "0 50px",
        "role": ".innerA 内側余白 PC"
      },
      {
        "name": "inner-pc-b",
        "value": "0 120px",
        "role": ".innerB 内側余白 PC"
      },
      {
        "name": "inner-sp",
        "value": "0 20px",
        "role": ".c-inner 内側余白 SP"
      },
      {
        "name": "em-hero",
        "value": "10em",
        "role": "rn202601 ヒーロー em ベース最大"
      },
      {
        "name": "content-width",
        "value": "1200px",
        "role": ".fitWidthA コンテンツ幅"
      },
      {
        "name": "content-max-width",
        "value": "1440px",
        "role": ".fitWidthB 最大コンテンツ幅"
      }
    ]
  },
  "breakpoints": {
    "mobile": {
      "value": "≤ 768px",
      "role": "モバイル (1〜2 列グリッド)"
    },
    "desktop": {
      "value": "≥ 769px",
      "role": "デスクトップ (4 列商品グリッド・min-width 1200px)"
    }
  },
  "radius": {
    "none": "0px",
    "badge": "2px",
    "tab": "8px",
    "card-sm": "10px",
    "card-img": "15px",
    "card-glass": "16px",
    "bubble": "30px",
    "pill": "40px",
    "circle": "50%"
  },
  "components": [
    {
      "type": "button",
      "name": "Pill Button (Primary)",
      "description": "白地・グリーン枠・グリーン文字のアウトラインピルボタン。ホバーで塗り反転、右端に chevron 矢印",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#FFFFFF",
            "color": "#008833",
            "border": "2px solid #008833",
            "borderRadius": "40px",
            "width": "280px",
            "padding": "18px 2.5em",
            "fontSize": "1.4rem",
            "fontWeight": "700",
            "boxShadow": "rgb(164,164,164) 0px 4px 14px -4px",
            "transition": "0.3s"
          }
        },
        {
          "label": "Hover",
          "props": {
            "background": "#008833",
            "color": "#FFFFFF",
            "border": "2px solid #008833",
            "borderRadius": "40px",
            "width": "280px",
            "padding": "18px 2.5em",
            "fontSize": "1.4rem",
            "fontWeight": "700",
            "boxShadow": "rgb(164,164,164) 0px 4px 14px -4px",
            "transition": "0.3s"
          }
        }
      ]
    },
    {
      "type": "button",
      "name": "Pill Button (Small)",
      "description": "ピルボタンの小型版。サイズと padding が縮小",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#FFFFFF",
            "color": "#008833",
            "border": "2px solid #008833",
            "borderRadius": "40px",
            "width": "200px",
            "padding": "12px 2.5em",
            "fontSize": "1.2rem",
            "fontWeight": "700",
            "boxShadow": "rgb(164,164,164) 0px 3px 10px -4px"
          }
        }
      ]
    },
    {
      "type": "badge",
      "name": "Nav Badge",
      "description": "ナビゲーション上部のグリーン背景バッジ",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#008833",
            "color": "#FFFFFF",
            "borderRadius": "2px",
            "padding": "6px 12px",
            "height": "26px",
            "lineHeight": "1"
          }
        },
        {
          "label": "Hover",
          "props": {
            "background": "#00490A",
            "color": "#FFFFFF",
            "borderRadius": "2px",
            "padding": "6px 12px",
            "height": "26px"
          }
        }
      ]
    },
    {
      "type": "button",
      "name": "Outline White (on Dark)",
      "description": "ダーク背景上の白枠アウトラインボタン",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "transparent",
            "color": "#FFFFFF",
            "border": "1px solid #FFFFFF",
            "padding": "11px",
            "width": "340px",
            "textAlign": "center"
          }
        },
        {
          "label": "Hover",
          "props": {
            "background": "rgba(255,255,255,0.3)",
            "color": "#FFFFFF",
            "border": "1px solid #FFFFFF"
          }
        }
      ]
    },
    {
      "type": "card",
      "name": "Product Card",
      "description": "商品カード。PC は 4 列、SP は 2 列グリッド。画像は border-radius 15px、ホバーでテキストがグリーンに",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#FFFFFF",
            "color": "#241E18",
            "imageRadius": "15px",
            "textAlign": "center",
            "textSize": "1.5em",
            "gridPC": "repeat(4, 1fr)",
            "gridSP": "1fr 1fr",
            "gap": "1rem"
          }
        },
        {
          "label": "Hover",
          "props": {
            "color": "#008833",
            "textDecoration": "underline"
          }
        }
      ]
    },
    {
      "type": "card",
      "name": "Glassmorphism Card (rn202601)",
      "description": "rn202601 で導入された半透明白地 + blur のフローティングカード",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "linear-gradient(rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.65) 100%)",
            "backdropFilter": "blur(12px)",
            "borderRadius": "16px",
            "boxShadow": "rgba(0,0,0,0.08) 0px 10px 25px, rgba(0,0,0,0.04) 0px 2px 8px"
          }
        }
      ]
    },
    {
      "type": "card",
      "name": "Link Card",
      "description": "横並びリンクカード。画像 22% + タイトル 78% の比率",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#FFFFFF",
            "borderRadius": "10px",
            "boxShadow": "rgb(182,182,182) 0px 6px 21px -10px",
            "display": "flex",
            "alignItems": "center",
            "imageWidth": "22%",
            "titleWidth": "78%"
          }
        },
        {
          "label": "Hover",
          "props": {
            "background": "#FFFFFF",
            "borderRadius": "10px",
            "titleColor": "#008833"
          }
        }
      ]
    },
    {
      "type": "heading",
      "name": "Section Title (rn202601)",
      "description": "rn202601 セクション見出し。下にトリカラーグラデーション 4px ラインを ::after で追加",
      "variants": [
        {
          "label": "Center",
          "props": {
            "fontSize": "4rem",
            "fontWeight": "700",
            "letterSpacing": "0.1em",
            "textAlign": "center",
            "margin": "8rem 0 6rem",
            "underlineWidth": "120px",
            "underlineHeight": "4px",
            "underlineBackground": "linear-gradient(to right, rgb(137,192,166), rgba(248,155,84,0.6), rgba(216,39,58,0.6))"
          }
        },
        {
          "label": "Left",
          "props": {
            "fontSize": "3rem",
            "fontWeight": "700",
            "textAlign": "left",
            "marginBottom": "1em",
            "underlineWidth": "100px",
            "underlineHeight": "3px",
            "underlineBackground": "linear-gradient(to right, rgb(137,192,166), rgba(248,155,84,0.6), rgba(216,39,58,0.6))"
          }
        }
      ]
    },
    {
      "type": "nav",
      "name": "Global Navigation",
      "description": "880px 幅のグローバルナビ。アクティブ・ホバーでグリーン + 下線アニメーション",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#FFFFFF",
            "color": "#474646",
            "width": "880px",
            "fontSize": "16px",
            "itemPadding": "8px 10px 28px"
          }
        },
        {
          "label": "Active / Hover",
          "props": {
            "background": "#FFFFFF",
            "color": "#008833",
            "borderBottom": "1px solid #008833 (position: -2px)"
          }
        }
      ]
    },
    {
      "type": "nav",
      "name": "Mega Menu",
      "description": "全面グリーン背景のメガメニュー。白テキストリンク、商品アイテムは白背景 224×160px",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#008833",
            "color": "#FFFFFF",
            "minHeight": "234px",
            "padding": "20px 0",
            "zIndex": "100000",
            "position": "absolute (top: 97px)",
            "productItemBackground": "#FFFFFF",
            "productItemSize": "224px × 160px",
            "linkFontSize": "18px"
          }
        }
      ]
    },
    {
      "type": "hero",
      "name": "Hero Line Bar (rn202601)",
      "description": "rn202601 の上部告知バー。60deg のグリーン系グラデーション",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "linear-gradient(60deg, rgb(69,191,107), rgb(40,124,66))",
            "color": "#FFFFFF",
            "fontSize": "1.5rem",
            "textAlign": "center",
            "padding": "1rem"
          }
        }
      ]
    },
    {
      "type": "tab",
      "name": "Campaign Tabs",
      "description": "キャンペーンタブ。PC 5 列・SP 2 列、白地グリーン枠、アクティブで塗り反転",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#FFFFFF",
            "color": "#008833",
            "border": "1px solid #008833",
            "borderRadius": "8px",
            "padding": "0.8em 1em",
            "fontSize": "1.5em",
            "boxShadow": "rgb(164,164,164) 0px 2px 5px -2px",
            "transition": "0.3s"
          }
        },
        {
          "label": "Active",
          "props": {
            "background": "#008833",
            "color": "#FFFFFF",
            "border": "1px solid #008833",
            "borderRadius": "8px",
            "padding": "0.8em 1em",
            "fontSize": "1.5em"
          }
        }
      ]
    },
    {
      "type": "alert",
      "name": "Notice Alert",
      "description": "赤背景・赤文字のアラートボックス。緊急告知専用",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#FDF2F2",
            "color": "#DE3A3A",
            "fontSize": "2em",
            "lineHeight": "1.4",
            "fontWeight": "700",
            "padding": "0.5em 1em"
          }
        }
      ]
    },
    {
      "type": "input",
      "name": "Search Input",
      "description": "ヘッダー検索入力。221px 幅、薄ボーダー、フォントサイズ 12px",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#FFFFFF",
            "color": "#000000",
            "border": "1px solid #CCCCCC",
            "borderRadius": "2px",
            "width": "221px",
            "padding": "3px 0 3px 8px",
            "fontSize": "12px"
          }
        }
      ]
    },
    {
      "type": "breadcrumb",
      "name": "Breadcrumb",
      "description": "サイト構造パンくず。区切りは ' > '、薄グレー背景",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#EEEEEE",
            "color": "#000000",
            "borderTop": "2px solid #E5E5E5",
            "padding": "12px 0",
            "fontSize": "14px",
            "separator": " > "
          }
        }
      ]
    },
    {
      "type": "footer",
      "name": "Footer",
      "description": "SNS 6 種 + リンクリスト + 地域バー + copyright バーの 4 層構造。copyright バーは Arial 14px",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#FFFFFF",
            "color": "#000000",
            "marginTop": "40px",
            "snsSectionPadding": "30px 0",
            "snsSectionBorderTop": "2px solid #E5E5E5",
            "linkSectionPadding": "60px 0 48px",
            "copyrightBackground": "#E5E5E5",
            "copyrightFontFamily": "Arial, Helvetica, sans-serif",
            "copyrightFontSize": "14px",
            "socialIcons": "Facebook, X (Twitter), Instagram, YouTube, LINE, TikTok (各 40×40px)"
          }
        }
      ]
    },
    {
      "type": "decorator",
      "name": "Decorator Circles (PC only)",
      "description": "PC のみ表示される装飾サークル。赤丸 + 緑丸を opacity 0.1 で背景配置",
      "variants": [
        {
          "label": "Red Circle",
          "props": {
            "asset": "bg_round--red.png",
            "position": "left -10%",
            "opacity": "0.1"
          }
        },
        {
          "label": "Green Circle",
          "props": {
            "asset": "bg_round--green.png",
            "position": "right 60%",
            "opacity": "0.1"
          }
        }
      ]
    }
  ],
  "guidelines": {
    "do": [
      "#008833 グリーンをボタン・リンク・ナビのインタラクション色として統一する (UI の主役色)",
      "ピルボタン (border-radius: 40px) を主要 CTA に使う",
      "セクション見出しにトリカラーグラデーション下線を添える (rn202601 ページ)",
      "1200px コンテンツ幅を維持し、中央寄せで配置する",
      "日本語フォントスタックを先頭に置く (英数フォントを日本語テキストに適用しない)",
      "html { font-size: 62.5% } + rem 単位でタイプスケールを管理する",
      "img { object-fit: cover; vertical-align: top } を画像に適用する",
      "見出しクラスには letter-spacing: 0.1em を必ず付与する",
      "SNS アイコン 6 種 (Facebook / X / Instagram / YouTube / LINE / TikTok) を一セットで揃える",
      "ホバートランジションは 0.3s で統一する"
    ],
    "dont": [
      "ロゴの赤 (#FF0000) を UI ボタン・リンク・ナビに使わない (ロゴマーク専用)",
      "ロゴの橙 (#FF6600) を独立ブランドカラーとして UI に使わない (ロゴ専用)",
      "メガメニュー以外の背景全面をグリーンに塗らない",
      "グラスモーフィズム (backdrop-filter: blur) を旧ページシステム (rn202304) のカードに混在させない",
      "トリカラーグラデーションをボタンや本文装飾に転用しない (見出し下線のみ)",
      "line-height: 1 (CSS reset 値) を本文テキストに使ったままにしない (1.4〜1.5 に上書き)",
      "1200px 未満での PC レイアウトを定義しない (min-width: 1200px が前提)",
      "赤アラート (#DE3A3A / #FDF2F2) を緊急告知以外の用途で使わない",
      "rn202304 と rn202601 のコンポーネントスタイルを混在させない",
      "ウェイトを normal / bold 以外で増やさない (CSS 実測の 2 段階を維持)"
    ]
  }
}