[
  {
    "id": 2165,
    "title": "メリット・デメリット比較ボックス_P-8",
    "icon": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewbox=\"0 0 256 256\"><path d=\"M56,88l32,80c0,17.67-20,24-32,24s-32-6.33-32-24ZM200,56l-32,80c0,17.67,20,24,32,24s32-6.33,32-24Z\" fill=\"#9aa8c9\"/><path d=\"M239.43,133l-32-80h0a8,8,0,0,0-9.16-4.84L136,62V40a8,8,0,0,0-16,0V65.58L54.26,80.19A8,8,0,0,0,48.57,85h0v.06L16.57,165a7.92,7.92,0,0,0-.57,3c0,23.31,24.54,32,40,32s40-8.69,40-32a7.92,7.92,0,0,0-.57-3L66.92,93.77,120,82V208H104a8,8,0,0,0,0,16h48a8,8,0,0,0,0-16H136V78.42L187,67.1,160.57,133a7.92,7.92,0,0,0-.57,3c0,23.31,24.54,32,40,32s40-8.69,40-32A7.92,7.92,0,0,0,239.43,133ZM56,184c-7.53,0-22.76-3.61-23.93-14.64L56,109.54l23.93,59.82C78.76,180.39,63.53,184,56,184Zm144-32c-7.53,0-22.76-3.61-23.93-14.64L200,77.54l23.93,59.82C222.76,148.39,207.53,152,200,152Z\" fill=\"#1a1a2e\"/></svg>",
    "keywords": [
      "メリット",
      "デメリット",
      "比較・レビュー",
      "メリット・デメリット比較ボックス"
    ],
    "slug": "lazyblock/pros-cons-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_65ebb64df3": {
        "type": "panel",
        "name": "",
        "default": "",
        "label": "メリット・デメリット編集",
        "help": "",
        "child_of": "",
        "placement": "content",
        "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_1c093a4ac0": {
        "type": "repeater",
        "name": "pros_list",
        "default": "",
        "label": "メリット一覧",
        "help": "",
        "child_of": "",
        "placement": "content",
        "group": "settings",
        "width": "100",
        "hide_if_not_selected": "true",
        "required": "false",
        "translate": "false",
        "save_in_meta": "false",
        "save_in_meta_name": "",
        "placeholder": "",
        "characters_limit": ""
      },
      "control_19caf544f4": {
        "type": "rich_text",
        "name": "pro_text",
        "default": "",
        "label": "メリットのテキスト",
        "help": "Proで機能。複数の子項目として何個でも追加できます",
        "child_of": "control_1c093a4ac0",
        "placement": "content",
        "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_8d5ab34068": {
        "type": "repeater",
        "name": "cons_list",
        "default": "",
        "label": "デメリット一覧",
        "help": "Proで機能。複数の子項目として何個でも追加できます",
        "child_of": "",
        "placement": "content",
        "group": "settings",
        "width": "100",
        "hide_if_not_selected": "true",
        "required": "false",
        "translate": "false",
        "save_in_meta": "false",
        "save_in_meta_name": "",
        "placeholder": "",
        "characters_limit": ""
      },
      "control_c05be84183": {
        "type": "rich_text",
        "name": "con_text",
        "default": "",
        "label": "デメリットのテキスト",
        "help": "",
        "child_of": "control_8d5ab34068",
        "placement": "content",
        "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_bt1a2c3d4e": {
        "type": "text",
        "name": "box_title",
        "default": "",
        "label": "ボックスタイトル",
        "help": "空欄の場合はタイトルを表示しません",
        "child_of": "",
        "placement": "content",
        "group": "settings",
        "width": "100",
        "hide_if_not_selected": "true",
        "required": "false",
        "translate": "false",
        "save_in_meta": "false",
        "save_in_meta_name": "",
        "placeholder": "",
        "characters_limit": ""
      },
      "control_pl1a2c3d4e": {
        "type": "text",
        "name": "pros_label",
        "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_cl1a2c3d4e": {
        "type": "text",
        "name": "cons_label",
        "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$title      = $attributes['box_title'] ?? '';\r\n$pros       = $attributes['pros_list'] ?? [];\r\n$cons       = $attributes['cons_list'] ?? [];\r\n$pros_label = !empty($attributes['pros_label']) ? $attributes['pros_label'] : 'メリット';\r\n$cons_label = !empty($attributes['cons_label']) ? $attributes['cons_label'] : 'デメリット';\r\n?>\r\n\r\n<div class=\"pcb-box pcb-reveal-hook\">\r\n    <?php if ( !empty($title) ) : ?>\r\n        <div class=\"pcb-title\"><?php echo esc_html($title); ?></div>\r\n    <?php endif; ?>\r\n\r\n    <div class=\"pcb-card\">\r\n        <div class=\"pcb-header\">\r\n            <div class=\"pcb-h-item\"><?php echo esc_html($pros_label); ?></div>\r\n            <div class=\"pcb-h-item\"><?php echo esc_html($cons_label); ?></div>\r\n        </div>\r\n\r\n        <div class=\"pcb-body\">\r\n            <div class=\"pcb-col pcb-col-pros\">\r\n                <?php if ( !empty($pros) ) : ?>\r\n                    <ul class=\"pcb-list\">\r\n                        <?php foreach ( $pros as $pro ) : ?>\r\n                            <?php if ( !empty($pro['pro_text']) ) : ?>\r\n                                <li class=\"pcb-li\">\r\n                                    <div class=\"pcb-icon pcb-i-check\">\r\n                                        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"white\" stroke-width=\"3.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"></polyline></svg>\r\n                                    </div>\r\n                                    <div class=\"pcb-richtext\"><?php echo wp_kses_post($pro['pro_text']); ?></div>\r\n                                </li>\r\n                            <?php endif; ?>\r\n                        <?php endforeach; ?>\r\n                    </ul>\r\n                <?php endif; ?>\r\n            </div>\r\n\r\n            <div class=\"pcb-col pcb-col-cons\">\r\n                <?php if ( !empty($cons) ) : ?>\r\n                    <ul class=\"pcb-list\">\r\n                        <?php foreach ( $cons as $con ) : ?>\r\n                            <?php if ( !empty($con['con_text']) ) : ?>\r\n                                <li class=\"pcb-li\">\r\n                                    <div class=\"pcb-icon pcb-i-cross\">\r\n                                        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"white\" stroke-width=\"3.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line></svg>\r\n                                    </div>\r\n                                    <div class=\"pcb-richtext\"><?php echo wp_kses_post($con['con_text']); ?></div>\r\n                                </li>\r\n                            <?php endif; ?>\r\n                        <?php endforeach; ?>\r\n                    </ul>\r\n                <?php endif; ?>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>",
      "frontend_callback": "",
      "show_preview": "always",
      "single_output": true
    },
    "style": {
      "block": ".pcb-box {\r\n    max-width: 900px;\r\n    margin: 64px auto;\r\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\r\n    box-sizing: border-box;\r\n    opacity: 0;\r\n    transform: translateY(30px);\r\n    transition: opacity .8s cubic-bezier(.16, 1, .3, 1), transform .8s cubic-bezier(.16, 1, .3, 1);\r\n}\r\n\r\n.pcb-box.is-revealed { opacity: 1; transform: translateY(0); }\r\n\r\n.pcb-title {\r\n    text-align: center;\r\n    font-size: 1.7rem;\r\n    font-weight: 900;\r\n    margin: 0 0 32px;\r\n    color: #0f172a;\r\n    letter-spacing: -.01em;\r\n}\r\n\r\n.pcb-card {\r\n    background: #fff;\r\n    border-radius: 20px;\r\n    overflow: hidden;\r\n    box-shadow: 0 15px 35px -5px rgba(0,0,0,.08), 0 5px 15px rgba(0,0,0,.04);\r\n    border: 1px solid #e2e8f0;\r\n}\r\n\r\n.pcb-header, .pcb-body { display: flex; width: 100%; }\r\n\r\n.pcb-header { background: linear-gradient(90deg, #61b28f 0%, #61b28f 35%, #e07a7a 65%, #e07a7a 100%); }\r\n\r\n.pcb-h-item {\r\n    flex: 1;\r\n    padding: 22px;\r\n    text-align: center;\r\n    color: #fff;\r\n    font-weight: 800;\r\n    font-size: 1.2rem;\r\n    letter-spacing: .1em;\r\n}\r\n\r\n.pcb-body {\r\n    background: linear-gradient(90deg, #f0f9f6 0%, #f0f9f6 35%, #fff5f5 65%, #fff5f5 100%);\r\n    padding-bottom: 32px;\r\n}\r\n\r\n.pcb-col { flex: 1; padding: 44px 32px; }\r\n\r\n.pcb-list { all: unset; list-style: none!important; display: flex; flex-direction: column; gap: 22px; margin: 0!important; }\r\n\r\n.pcb-li {\r\n    all: unset;\r\n    display: flex!important;\r\n    align-items: flex-start;\r\n    transition: transform .3s ease;\r\n}\r\n\r\n.pcb-li:hover { transform: translateX(8px); }\r\n\r\n.pcb-icon {\r\n    width: 28px; height: 28px; border-radius: 8px;\r\n    display: flex; align-items: center; justify-content: center;\r\n    flex-shrink: 0; margin: 4px 14px 0 0;\r\n}\r\n\r\n.pcb-icon svg { width: 15px; height: 15px; display: block; }\r\n.pcb-i-check { background: linear-gradient(135deg, #34d399, #059669); box-shadow: 0 4px 12px rgba(16,185,129,.4); }\r\n.pcb-i-cross { background: linear-gradient(135deg, #f87171, #dc2626); box-shadow: 0 4px 12px rgba(239,68,68,.4); }\r\n\r\n.pcb-richtext { flex: 1; font-size: 1.1rem; line-height: 1.7; color: #1e293b; font-weight: 500; }\r\n.pcb-richtext strong { font-weight: 800; color: #000; background: linear-gradient(transparent 70%, rgba(250,204,21,.4) 70%); }\r\n.pcb-richtext p { margin-bottom: 10px!important; }\r\n.pcb-richtext p:last-child { margin-bottom: 0!important; }\r\n\r\n@media (max-width: 767px) {\r\n    .pcb-header { background: linear-gradient(180deg, #61b28f 45%, #e07a7a 55%); }\r\n    .pcb-body { flex-direction: column; background: linear-gradient(180deg, #f0f9f6 45%, #fff5f5 55%); padding-bottom: 12px; }\r\n    .pcb-col { padding: 32px 24px; }\r\n}",
      "editor": ".pcb-box { opacity: 1; transform: none; border: 1px solid #edf2f7; }\r\n\r\n.pcb-header, .pcb-body { display: flex!important; flex-direction: row!important; }\r\n\r\n.pcb-richtext { font-size: 1.1rem!important; color: #1e293b!important; }\r\n\r\n.pcb-header { background: linear-gradient(90deg, #61b28f 35%, #e07a7a 65%)!important; }\r\n\r\n.pcb-body { \r\n    background: linear-gradient(90deg, #f0f9f6 35%, #fff5f5 65%)!important;\r\n    border-radius: 0 0 20px 20px;\r\n}"
    },
    "script": {
      "view": "(() => {\r\n    const observer = new IntersectionObserver((entries, obs) => {\r\n        entries.forEach(entry => {\r\n            if (entry.isIntersecting) {\r\n                entry.target.classList.add('is-revealed');\r\n                obs.unobserve(entry.target);\r\n            }\r\n        });\r\n    }, { threshold: 0.15 });\r\n\r\n    if (document.readyState === 'loading') {\r\n        document.addEventListener('DOMContentLoaded', () => {\r\n            document.querySelectorAll('.pcb-reveal-hook').forEach(el => observer.observe(el));\r\n        });\r\n    } else {\r\n        document.querySelectorAll('.pcb-reveal-hook').forEach(el => observer.observe(el));\r\n    }\r\n})();"
    },
    "styles": [],
    "condition": [],
    "edit_url": null,
    "provide_context_to_blocks": "",
    "custom_context_slug": "",
    "allowed_blocks": "",
    "ancestor": ""
  }
]