[
  {
    "id": 2442,
    "title": "独立型・比較カードボックス_P-12",
    "icon": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewbox=\"0 0 256 256\"><path d=\"M208,80v96H48V80Z\" fill=\"#9aa8c9\"/><path d=\"M213.66,181.66l-32,32a8,8,0,0,1-11.32-11.32L188.69,184H48a8,8,0,0,1,0-16H188.69l-18.35-18.34a8,8,0,0,1,11.32-11.32l32,32A8,8,0,0,1,213.66,181.66Zm-139.32-64a8,8,0,0,0,11.32-11.32L67.31,88H208a8,8,0,0,0,0-16H67.31L85.66,53.66A8,8,0,0,0,74.34,42.34l-32,32a8,8,0,0,0,0,11.32Z\" fill=\"#1a1a2e\"/></svg>",
    "keywords": [
      "メリット",
      "デメリット",
      "比較・レビュー",
      "独立型・比較カードボックス"
    ],
    "slug": "lazyblock/versus-card-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_757a484386": {
        "type": "text",
        "name": "bad_badge",
        "default": "",
        "label": "左バッジ見出し",
        "help": "",
        "child_of": "",
        "placement": "inspector",
        "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_33d8f84a59": {
        "type": "text",
        "name": "bad_title",
        "default": "",
        "label": "左側タイトル",
        "help": "",
        "child_of": "",
        "placement": "inspector",
        "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_1739a14e3b": {
        "type": "repeater",
        "name": "cons_list",
        "default": "",
        "label": "デメリット一覧",
        "help": "",
        "child_of": "",
        "placement": "inspector",
        "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_cbd8174e14": {
        "type": "text",
        "name": "good_badge",
        "default": "",
        "label": "右側バッジ見出し",
        "help": "",
        "child_of": "",
        "placement": "inspector",
        "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_b8d8d0448a": {
        "type": "text",
        "name": "good_title",
        "default": "",
        "label": "右側タイトル",
        "help": "",
        "child_of": "",
        "placement": "inspector",
        "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_a1a83443f9": {
        "type": "repeater",
        "name": "pros_list",
        "default": "",
        "label": "メリット一覧",
        "help": "",
        "child_of": "",
        "placement": "inspector",
        "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_0a2aaa458e": {
        "type": "panel",
        "name": "",
        "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_2c9b6b4cd0": {
        "type": "rich_text",
        "name": "con_text",
        "default": "",
        "label": "デメリットのテキスト",
        "help": "",
        "child_of": "control_1739a14e3b",
        "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_5159f248dd": {
        "type": "rich_text",
        "name": "pro_text",
        "default": "",
        "label": "メリットのテキスト",
        "help": "",
        "child_of": "control_a1a83443f9",
        "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// 左側（デメリット/比較対象）のデータ取得\r\n$bad_badge = $attributes['bad_badge'] ?? '';\r\n$bad_title = $attributes['bad_title'] ?? '';\r\n$cons      = $attributes['cons_list'] ?? [];\r\n\r\n// 右側（メリット/おすすめ）のデータ取得\r\n$good_badge = $attributes['good_badge'] ?? '';\r\n$good_title = $attributes['good_title'] ?? '';\r\n$pros       = $attributes['pros_list'] ?? [];\r\n?>\r\n\r\n<div class=\"lzb-vs-container\">\r\n    \r\n    <div class=\"lzb-vs-card lzb-vs-bad\">\r\n        <?php if ( !empty($bad_badge) ) : ?>\r\n            <div class=\"lzb-vs-badge\"><?php echo esc_html($bad_badge); ?></div>\r\n        <?php endif; ?>\r\n        \r\n        <?php if ( !empty($bad_title) ) : ?>\r\n            <div class=\"lzb-vs-title\"><?php echo esc_html($bad_title); ?></div>\r\n        <?php endif; ?>\r\n\r\n        <?php if ( !empty($cons) ) : ?>\r\n            <ul class=\"lzb-vs-list\">\r\n                <?php foreach ( $cons as $con ) : ?>\r\n                    <?php if ( !empty($con['con_text']) ) : ?>\r\n                        <li class=\"lzb-item-cross\">\r\n                            <div class=\"lzb-vs-text\"><?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\r\n    <div class=\"lzb-vs-card lzb-vs-good\">\r\n        <?php if ( !empty($good_badge) ) : ?>\r\n            <div class=\"lzb-vs-badge\"><?php echo esc_html($good_badge); ?></div>\r\n        <?php endif; ?>\r\n        \r\n        <?php if ( !empty($good_title) ) : ?>\r\n            <div class=\"lzb-vs-title\"><?php echo esc_html($good_title); ?></div>\r\n        <?php endif; ?>\r\n\r\n        <?php if ( !empty($pros) ) : ?>\r\n            <ul class=\"lzb-vs-list\">\r\n                <?php foreach ( $pros as $pro ) : ?>\r\n                    <?php if ( !empty($pro['pro_text']) ) : ?>\r\n                        <li class=\"lzb-item-check\">\r\n                            <div class=\"lzb-vs-text\"><?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>",
      "frontend_callback": "",
      "show_preview": "always",
      "single_output": true
    },
    "style": {
      "block": "/* =========================================================\r\n   Lazy Blocks: 独立型・比較カードボックス（サイト表示用）\r\n========================================================= */\r\n.lzb-vs-container {\r\n    display: flex;\r\n    gap: 20px;\r\n    max-width: 1000px;\r\n    margin: 3em auto;\r\n    box-sizing: border-box;\r\n    /* アニメーション初期状態（フェードイン・アップ） */\r\n    opacity: 0;\r\n    transform: translateY(30px);\r\n    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);\r\n}\r\n\r\n/* アニメーション発火状態 */\r\n.lzb-vs-container.is-revealed {\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n}\r\n\r\n/* カード共通 */\r\n.lzb-vs-card {\r\n    flex: 1;\r\n    border-radius: 8px;\r\n    padding: 40px 32px;\r\n    box-sizing: border-box;\r\n}\r\n\r\n/* 左側カード（ネガティブ） */\r\n.lzb-vs-bad {\r\n    background-color: #fffafb;\r\n    border: 1px solid #f8d7da;\r\n}\r\n.lzb-vs-bad .lzb-vs-badge {\r\n    background-color: #fde8ea;\r\n    color: #d6454d;\r\n}\r\n\r\n/* 右側カード（ポジティブ） */\r\n.lzb-vs-good {\r\n    background-color: #f4faf5;\r\n    border: 1px solid #c8e6d2;\r\n}\r\n.lzb-vs-good .lzb-vs-badge {\r\n    background-color: #d8efe1;\r\n    color: #27794b;\r\n}\r\n\r\n/* 小バッジ */\r\n.lzb-vs-badge {\r\n    display: inline-block;\r\n    padding: 5px 16px;\r\n    border-radius: 30px;\r\n    font-size: 0.85em;\r\n    font-weight: 700;\r\n    margin-bottom: 8px; \r\n    letter-spacing: 0.05em;\r\n}\r\n\r\n/* メインタイトル（明朝体） */\r\n.lzb-vs-title {\r\n    font-family: \"Yu Mincho\", \"Noto Serif JP\", \"Hiragino Mincho ProN\", serif;\r\n    font-size: 1.5em;\r\n    font-weight: 700;\r\n    color: #222b38;\r\n    margin: 0 0 24px 0 !important; \r\n    padding: 0 !important;\r\n    line-height: 1.3;\r\n}\r\n\r\n/* リスト全体のコンテナ */\r\n.lzb-vs-list {\r\n    list-style: none !important;\r\n    padding: 0 !important;\r\n    margin: 0 !important;\r\n}\r\n\r\n/* 各リスト項目（下線付き） */\r\n.lzb-item-cross, \r\n.lzb-item-check {\r\n    display: flex;\r\n    align-items: flex-start;\r\n    padding: 14px 0;\r\n    border-bottom: 1px solid #f0f2f5;\r\n    margin: 0 !important;\r\n}\r\n.lzb-item-cross:last-child, \r\n.lzb-item-check:last-child {\r\n    border-bottom: none;\r\n    padding-bottom: 0;\r\n}\r\n\r\n/* アイコン（擬似要素）の共通描画設定 */\r\n.lzb-item-cross::before, \r\n.lzb-item-check::before {\r\n    content: \"\";\r\n    display: block;\r\n    width: 16px;\r\n    height: 16px;\r\n    margin-top: 5px;\r\n    margin-right: 12px;\r\n    flex-shrink: 0;\r\n    background-size: contain;\r\n    background-repeat: no-repeat;\r\n    background-position: center;\r\n}\r\n\r\n/* バツ印SVGの流し込み */\r\n.lzb-item-cross::before {\r\n    background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d6454d' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E\");\r\n}\r\n\r\n/* チェック印SVGの流し込み */\r\n.lzb-item-check::before {\r\n    background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2327794b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17L4 12'/%3E%3C/svg%3E\");\r\n}\r\n\r\n/* 本文テキスト */\r\n.lzb-vs-text {\r\n    font-size: 0.95em;\r\n    line-height: 1.6;\r\n    color: #444444;\r\n    flex: 1;\r\n}\r\n\r\n/* 768px以下（タブレット・スマホ）での縦並びレスポンシブ */\r\n@media screen and (max-width: 768px) {\r\n    .lzb-vs-container {\r\n        flex-direction: column;\r\n        gap: 20px;\r\n    }\r\n    .lzb-vs-card {\r\n        padding: 32px 24px;\r\n    }\r\n    .lzb-vs-title {\r\n        font-size: 1.3em;\r\n        margin-bottom: 20px !important; \r\n    }\r\n}\n\n@media screen and (max-width: 480px) {\n    .lzb-vs-card { padding: 24px 18px; }\n    .lzb-vs-title { font-size: 1.15em; margin-bottom: 16px !important; }\n}",
      "editor": "/* =========================================================\r\n   Lazy Blocks: エディター専用CSS（完全クリーンアップ版）\r\n========================================================= */\r\n/* 管理画面内でのフェードイン初期化（常に100%表示） */\r\n.editor-styles-wrapper .lzb-vs-container {\r\n    opacity: 1 !important;\r\n    transform: none !important;\r\n    display: flex !important;\r\n    gap: 20px !important;\r\n}\r\n\r\n.editor-styles-wrapper .lzb-vs-card {\r\n    border: 1px solid #e2e8f0 !important;\r\n}\r\n\r\n/* テーマ側のリストスタイル干渉を強制リセット */\r\n.editor-styles-wrapper .lzb-vs-list li {\r\n    display: flex !important;\r\n    align-items: flex-start !important;\r\n    list-style: none !important;\r\n    padding: 14px 0 !important;\r\n    margin: 0 !important;\r\n}\r\n\r\n/* エディター内でのアイコンサイズと描画の強制指定 */\r\n.editor-styles-wrapper .lzb-vs-list li::before {\r\n    content: \"\" !important;\r\n    display: block !important;\r\n    width: 16px !important;\r\n    height: 16px !important;\r\n    min-width: 16px !important;\r\n    min-height: 16px !important;\r\n    margin-top: 5px !important;\r\n    margin-right: 12px !important;\r\n    flex-shrink: 0 !important;\r\n    background-size: contain !important;\r\n    background-repeat: no-repeat !important;\r\n    background-position: center !important;\r\n}\r\n\r\n/* エディター用バツ画像 */\r\n.editor-styles-wrapper .lzb-vs-list li.lzb-item-cross::before {\r\n    background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d6454d' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E\") !important;\r\n}\r\n\r\n/* エディター用チェック画像 */\r\n.editor-styles-wrapper .lzb-vs-list li.lzb-item-check::before {\r\n    background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2327794b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17L4 12'/%3E%3C/svg%3E\") !important;\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('.lzb-vs-container').forEach(el => observer.observe(el));\r\n    };\r\n\r\n    if (document.readyState === 'loading') {\r\n        document.addEventListener('DOMContentLoaded', init);\r\n    } else {\r\n        init();\r\n    }\r\n})();"
    },
    "styles": [],
    "condition": [],
    "edit_url": null,
    "provide_context_to_blocks": "",
    "custom_context_slug": "",
    "allowed_blocks": "",
    "ancestor": ""
  }
]