[
  {
    "id": 2449,
    "title": "3セクション比較ボックス_P-13",
    "icon": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewbox=\"0 0 256 256\"><path d=\"M112,48V208a8,8,0,0,1-8,8H64a8,8,0,0,1-8-8V48a8,8,0,0,1,8-8h40A8,8,0,0,1,112,48Zm80-8H152a8,8,0,0,0-8,8V208a8,8,0,0,0,8,8h40a8,8,0,0,0,8-8V48A8,8,0,0,0,192,40Z\" fill=\"#9aa8c9\"/><path d=\"M104,32H64A16,16,0,0,0,48,48V208a16,16,0,0,0,16,16h40a16,16,0,0,0,16-16V48A16,16,0,0,0,104,32Zm0,176H64V48h40ZM192,32H152a16,16,0,0,0-16,16V208a16,16,0,0,0,16,16h40a16,16,0,0,0,16-16V48A16,16,0,0,0,192,32Zm0,176H152V48h40Z\" fill=\"#1a1a2e\"/></svg>",
    "keywords": [
      "3セクション比較ボックス",
      "比較・レビュー"
    ],
    "slug": "lazyblock/three-section-compare-box",
    "description": "",
    "category": "Lazyblocks Pro",
    "category_label": "Lazyblocks Pro",
    "supports": {
      "customClassName": true,
      "anchor": false,
      "html": false,
      "multiple": true,
      "inserter": true,
      "reusable": true,
      "color": false,
      "layout": false,
      "shadow": false,
      "spacing": false,
      "dimensions": false,
      "typography": false,
      "lock": true,
      "align": [
        "wide",
        "full"
      ],
      "ghostkit": {
        "effects": false,
        "position": false,
        "spacings": false,
        "frame": false,
        "transform": false,
        "customCSS": false,
        "display": false,
        "attributes": false
      }
    },
    "controls": {
      "control_e4997f4255": {
        "type": "text",
        "name": "top_header",
        "default": "基準テキスト",
        "label": "【上部】サブ見出し",
        "help": "",
        "child_of": "",
        "placement": "inspector",
        "group": "settings",
        "width": "100",
        "hide_if_not_selected": "false",
        "required": "false",
        "translate": "false",
        "save_in_meta": "false",
        "save_in_meta_name": "",
        "placeholder": "",
        "characters_limit": ""
      },
      "control_1ad8514e2c": {
        "type": "text",
        "name": "top_cite",
        "default": "引用元や補足など",
        "label": "【上部】補足テキスト",
        "help": "引用元や補足など",
        "child_of": "",
        "placement": "inspector",
        "group": "settings",
        "width": "100",
        "hide_if_not_selected": "false",
        "required": "false",
        "translate": "false",
        "save_in_meta": "false",
        "save_in_meta_name": "",
        "placeholder": "",
        "characters_limit": ""
      },
      "control_c2481c43dd": {
        "type": "rich_text",
        "name": "top_text",
        "default": "",
        "label": "【上部】メインテキスト",
        "help": "",
        "child_of": "",
        "placement": "inspector",
        "group": "settings",
        "width": "100",
        "hide_if_not_selected": "false",
        "required": "false",
        "translate": "false",
        "save_in_meta": "false",
        "save_in_meta_name": "",
        "placeholder": "",
        "characters_limit": ""
      },
      "control_f5cb4d4006": {
        "type": "text",
        "name": "left_title",
        "default": "",
        "label": "【左】タイトル",
        "help": "",
        "child_of": "",
        "placement": "inspector",
        "group": "settings",
        "width": "100",
        "hide_if_not_selected": "false",
        "required": "false",
        "translate": "false",
        "save_in_meta": "false",
        "save_in_meta_name": "",
        "placeholder": "",
        "characters_limit": ""
      },
      "control_83ca314371": {
        "type": "text",
        "name": "left_badge",
        "default": "",
        "label": "【左】バッジ",
        "help": "",
        "child_of": "",
        "placement": "inspector",
        "group": "settings",
        "width": "100",
        "hide_if_not_selected": "false",
        "required": "false",
        "translate": "false",
        "save_in_meta": "false",
        "save_in_meta_name": "",
        "placeholder": "",
        "characters_limit": ""
      },
      "control_0db97a4784": {
        "type": "rich_text",
        "name": "left_text",
        "default": "",
        "label": "【左】本文",
        "help": "",
        "child_of": "",
        "placement": "inspector",
        "group": "settings",
        "width": "100",
        "hide_if_not_selected": "false",
        "required": "false",
        "translate": "false",
        "save_in_meta": "false",
        "save_in_meta_name": "",
        "placeholder": "",
        "characters_limit": ""
      },
      "control_710afa4096": {
        "type": "text",
        "name": "right_title",
        "default": "",
        "label": "【右】タイトル",
        "help": "",
        "child_of": "",
        "placement": "inspector",
        "group": "settings",
        "width": "100",
        "hide_if_not_selected": "false",
        "required": "false",
        "translate": "false",
        "save_in_meta": "false",
        "save_in_meta_name": "",
        "placeholder": "",
        "characters_limit": ""
      },
      "control_58d81c41c9": {
        "type": "text",
        "name": "right_badge",
        "default": "",
        "label": "【右】バッジ",
        "help": "",
        "child_of": "",
        "placement": "inspector",
        "group": "settings",
        "width": "100",
        "hide_if_not_selected": "false",
        "required": "false",
        "translate": "false",
        "save_in_meta": "false",
        "save_in_meta_name": "",
        "placeholder": "",
        "characters_limit": ""
      },
      "control_5478724347": {
        "type": "rich_text",
        "name": "right_text",
        "default": "",
        "label": "【右】本文",
        "help": "",
        "child_of": "",
        "placement": "inspector",
        "group": "settings",
        "width": "100",
        "hide_if_not_selected": "false",
        "required": "false",
        "translate": "false",
        "save_in_meta": "false",
        "save_in_meta_name": "",
        "placeholder": "",
        "characters_limit": ""
      }
    },
    "code": {
      "output_method": "php",
      "editor_html": "",
      "editor_callback": "",
      "frontend_html": "<?php\r\n// 上部エリア（基準・テーマなど）\r\n$top_header = $attributes['top_header'] ?? '';\r\n$top_cite   = $attributes['top_cite'] ?? '';\r\n$top_text   = $attributes['top_text'] ?? '';\r\n\r\n// 左側エリア（比較対象Aなど）\r\n$l_title    = $attributes['left_title'] ?? '';\r\n$l_badge    = $attributes['left_badge'] ?? '';\r\n$l_text     = $attributes['left_text'] ?? '';\r\n\r\n// 右側エリア（比較対象B・おすすめなど）\r\n$r_title    = $attributes['right_title'] ?? '';\r\n$r_badge    = $attributes['right_badge'] ?? '';\r\n$r_text     = $attributes['right_text'] ?? '';\r\n?>\r\n\r\n<div class=\"lzb-3sec-box\">\r\n    \r\n    <div class=\"lzb-3sec-top\">\r\n        <div class=\"lzb-3sec-top-info\">\r\n            <?php if ( !empty($top_header) ) : ?>\r\n                <span class=\"lzb-3sec-top-title\">▼ <?php echo esc_html($top_header); ?></span>\r\n            <?php endif; ?>\r\n            <?php if ( !empty($top_cite) ) : ?>\r\n                <span class=\"lzb-3sec-top-cite\">— <?php echo esc_html($top_cite); ?></span>\r\n            <?php endif; ?>\r\n        </div>\r\n        <?php if ( !empty($top_text) ) : ?>\r\n            <div class=\"lzb-3sec-top-text\">\r\n                <?php echo wp_kses_post($top_text); ?>\r\n            </div>\r\n        <?php endif; ?>\r\n    </div>\r\n\r\n    <div class=\"lzb-3sec-bottom\">\r\n        \r\n        <div class=\"lzb-3sec-col lzb-3sec-left\">\r\n            <div class=\"lzb-3sec-col-header\">\r\n                <?php if ( !empty($l_title) ) : ?>\r\n                    <span class=\"lzb-3sec-col-title\"><?php echo esc_html($l_title); ?></span>\r\n                <?php endif; ?>\r\n                <?php if ( !empty($l_badge) ) : ?>\r\n                    <span class=\"lzb-3sec-badge lzb-badge-neutral\"><?php echo esc_html($l_badge); ?></span>\r\n                <?php endif; ?>\r\n            </div>\r\n            <div class=\"lzb-3sec-text\">\r\n                <?php echo wp_kses_post($l_text); ?>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"lzb-3sec-col lzb-3sec-right\">\r\n            <div class=\"lzb-3sec-col-header\">\r\n                <?php if ( !empty($r_title) ) : ?>\r\n                    <span class=\"lzb-3sec-col-title lzb-title-good\"><?php echo esc_html($r_title); ?></span>\r\n                <?php endif; ?>\r\n                <?php if ( !empty($r_badge) ) : ?>\r\n                    <span class=\"lzb-3sec-badge lzb-badge-good\"><?php echo esc_html($r_badge); ?></span>\r\n                <?php endif; ?>\r\n            </div>\r\n            <div class=\"lzb-3sec-text\">\r\n                <?php echo wp_kses_post($r_text); ?>\r\n            </div>\r\n        </div>\r\n\r\n    </div>\r\n</div>",
      "frontend_callback": "",
      "show_preview": "always",
      "single_output": true
    },
    "style": {
      "block": "/* =========================================================\r\n   Lazy Blocks: 汎用3セクション比較ボックス\r\n========================================================= */\r\n/* 全体の外枠と角丸 */\r\n.lzb-3sec-box {\r\n    border: 1px solid #e2e8f0;\r\n    border-radius: 8px;\r\n    overflow: hidden;\r\n    margin: 2.5em 0;\r\n    background-color: #ffffff;\r\n    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);\r\n}\r\n\r\n/* -----------------------------------\r\n   上部：テーマ・基準エリア\r\n----------------------------------- */\r\n.lzb-3sec-top {\r\n    background-color: #f7f9fa;\r\n    padding: 24px 32px;\r\n    border-bottom: 1px solid #e2e8f0;\r\n}\r\n\r\n.lzb-3sec-top-info {\r\n    font-size: 0.85em;\r\n    font-weight: bold;\r\n    color: #718096;\r\n    margin-bottom: 12px;\r\n    letter-spacing: 0.05em;\r\n}\r\n.lzb-3sec-top-cite {\r\n    color: #a0aec0;\r\n    font-weight: normal;\r\n    margin-left: 8px;\r\n}\r\n\r\n/* 上部テキスト（セリフ体＆斜体で引用風の美しいデザインを維持） */\r\n.lzb-3sec-top-text {\r\n    font-family: \"Georgia\", \"Times New Roman\", \"Yu Mincho\", \"Noto Serif JP\", \"Hiragino Mincho ProN\", serif;\r\n    font-style: italic;\r\n    font-size: 1.05em;\r\n    line-height: 1.6;\r\n    color: #4a5568;\r\n}\r\n.lzb-3sec-top-text p { margin-bottom: 0.5em !important; }\r\n.lzb-3sec-top-text p:last-child { margin-bottom: 0 !important; }\r\n\r\n/* -----------------------------------\r\n   下部：2カラム比較エリア\r\n----------------------------------- */\r\n.lzb-3sec-bottom {\r\n    display: flex;\r\n}\r\n\r\n/* 左右カラム共通 */\r\n.lzb-3sec-col {\r\n    flex: 1;\r\n    padding: 28px 32px;\r\n    box-sizing: border-box;\r\n}\r\n\r\n/* 左カラムの右境界線 */\r\n.lzb-3sec-left {\r\n    border-right: 1px solid #e2e8f0;\r\n}\r\n\r\n/* 各カラムのヘッダー（タイトル＆バッジ） */\r\n.lzb-3sec-col-header {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 12px;\r\n    margin-bottom: 20px;\r\n}\r\n\r\n/* タイトル */\r\n.lzb-3sec-col-title {\r\n    font-size: 0.9em;\r\n    font-weight: 700;\r\n    letter-spacing: 0.05em;\r\n    color: #718096; /* 左側グレー */\r\n}\r\n.lzb-title-good {\r\n    color: #27794b; /* 右側グリーン */\r\n}\r\n\r\n/* バッジ共通設定 */\r\n.lzb-3sec-badge {\r\n    font-size: 0.75em;\r\n    font-weight: 700;\r\n    padding: 4px 12px;\r\n    border-radius: 20px;\r\n}\r\n/* 左側（ニュートラル）バッジ */\r\n.lzb-badge-neutral {\r\n    background-color: #edf2f7;\r\n    color: #718096;\r\n}\r\n/* 右側（ポジティブ）バッジ */\r\n.lzb-badge-good {\r\n    background-color: #e6f4ea;\r\n    color: #27794b;\r\n}\r\n\r\n/* 本文テキスト */\r\n.lzb-3sec-text {\r\n    font-size: 1em;\r\n    line-height: 1.8;\r\n    color: #2d3748;\r\n}\r\n.lzb-3sec-text p { margin-bottom: 1em !important; }\r\n.lzb-3sec-text p:last-child { margin-bottom: 0 !important; }\r\n\r\n/* -----------------------------------\r\n   レスポンシブ対応（スマホ）\r\n----------------------------------- */\r\n@media screen and (max-width: 768px) {\r\n    .lzb-3sec-bottom {\r\n        flex-direction: column;\r\n    }\r\n    .lzb-3sec-left {\r\n        border-right: none;\r\n        border-bottom: 1px solid #e2e8f0;\r\n    }\r\n    .lzb-3sec-top,\r\n    .lzb-3sec-col {\r\n        padding: 24px 20px;\r\n    }\r\n}\n\n@media screen and (max-width: 480px) {\n    .lzb-3sec-top, .lzb-3sec-col { padding: 18px 16px; }\n    .lzb-3sec-col-title { font-size: 0.85em; }\n}",
      "editor": "/* =========================================================\r\n   Lazy Blocks: エディター専用CSS（汎用3セクション比較ボックス）\r\n========================================================= */\r\n.editor-styles-wrapper .lzb-3sec-bottom {\r\n    display: flex !important;\r\n}\r\n\r\n@media screen and (max-width: 768px) {\r\n    .editor-styles-wrapper .lzb-3sec-bottom {\r\n        flex-direction: column !important;\r\n    }\r\n}"
    },
    "script": {
      "view": ""
    },
    "styles": [],
    "condition": [],
    "edit_url": null,
    "provide_context_to_blocks": "",
    "custom_context_slug": "",
    "allowed_blocks": "",
    "ancestor": ""
  }
]