[
    {
        "id": 2165,
        "title": "メリット・デメリット比較ボックス",
        "icon": "<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path fill=\"#010101\" d=\"M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.89-2-2-2zm0 14H5V8h14v10z\" \/><\/svg>",
        "keywords": [
            "メリット",
            "デメリット"
        ],
        "slug": "lazyblock\/pros-cons-box",
        "description": "",
        "category": "lazyblocks",
        "category_label": "lazyblocks",
        "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": "",
                "icon": "",
                "initial_open": "true",
                "endpoint": "false",
                "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": "",
                "rows_min": "",
                "rows_max": "",
                "rows_label": "",
                "rows_add_button_label": "",
                "rows_collapsible": "true",
                "rows_collapsed": "true",
                "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": "",
                "rows_min": "",
                "rows_max": "",
                "rows_label": "",
                "rows_add_button_label": "",
                "rows_collapsible": "true",
                "rows_collapsed": "true",
                "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": ""
            }
        },
        "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?>\r\n\r\n<div class=\"pcb-box pcb-reveal-hook\">\r\n    <?php if ( !empty($title) ) : ?>\r\n        <h3 class=\"pcb-title\"><?php echo esc_html($title); ?><\/h3>\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\">メリット<\/div>\r\n            <div class=\"pcb-h-item\">デメリット<\/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    const init = () => {\r\n        document.querySelectorAll('.pcb-reveal-hook').forEach(el => observer.observe(entry.target));\r\n    };\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": [],
        "provide_context_to_blocks": "",
        "custom_context_slug": "",
        "allowed_blocks": "",
        "ancestor": ""
    }
]