[
  {
    "id": 2969,
    "title": "メリット・デメリットBOX_P-23",
    "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": [
      "メリットデメリットボックス",
      "比較・レビュー",
      "メリット・デメリットBOX"
    ],
    "slug": "lazyblock/merit-demerit-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_c7eba44253": {
        "type": "select",
        "name": "box_type",
        "default": "merit",
        "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": "",
        "choices": [
          {
            "label": "メリット",
            "value": "merit"
          },
          {
            "label": "デメリット",
            "value": "demerit"
          }
        ]
      },
      "control_0898ef439f": {
        "type": "text",
        "name": "box_number",
        "default": "1",
        "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_a7987f430e": {
        "type": "text",
        "name": "box_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_139a0449c5": {
        "type": "rich_text",
        "name": "box_content",
        "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$type    = isset($attributes['box_type']) ? $attributes['box_type'] : 'merit';\r\n$number  = isset($attributes['box_number']) ? $attributes['box_number'] : '';\r\n$title   = isset($attributes['box_title']) ? $attributes['box_title'] : '';\r\n$content = isset($attributes['box_content']) ? $attributes['box_content'] : '';\r\n\r\n// タイプに応じたクラスとSVGアイコンの設定\r\n$is_merit    = ($type === 'merit');\r\n$color_class = $is_merit ? 'lzb-md-box--merit' : 'lzb-md-box--demerit';\r\n\r\n// SVGアイコン (パフォーマンスを考慮しインラインで記述)\r\n$icon_merit   = '<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3\"></path></svg>';\r\n$icon_demerit = '<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2h-2\"></path></svg>';\r\n$current_icon = $is_merit ? $icon_merit : $icon_demerit;\r\n?>\r\n\r\n<div class=\"lzb-md-box <?php echo esc_attr($color_class); ?>\">\r\n    <div class=\"lzb-md-box__header\">\r\n        <?php if ( ! empty($number) ) : ?>\r\n            <span class=\"lzb-md-box__number\"><?php echo esc_html($number); ?>.</span>\r\n        <?php endif; ?>\r\n        <span class=\"lzb-md-box__title\"><?php echo esc_html($title); ?></span>\r\n        <span class=\"lzb-md-box__icon\"><?php echo $current_icon; ?></span>\r\n    </div>\r\n    <div class=\"lzb-md-box__content\">\r\n        <?php echo wp_kses_post($content); ?>\r\n    </div>\r\n</div>",
      "frontend_callback": "",
      "show_preview": "always",
      "single_output": true
    },
    "style": {
      "block": "/* ==================================================\r\n   メリット・デメリットBOX (Lazy Blocks)\r\n================================================== */\r\n.lzb-md-box {\r\n    position: relative;\r\n    margin: 2.5em 0 1.5em; /* 上部にタイトルがはみ出す分の余白を確保 */\r\n    border: 2px solid #e5e7eb; /* 優しいグレーの境界線 */\r\n    border-radius: 8px;\r\n    background-color: #ffffff;\r\n    padding: 2.5em 1.5em 1.5em;\r\n    transition: box-shadow 0.3s ease, transform 0.3s ease;\r\n}\r\n\r\n/* 読者の目を引くモダンなホバーアニメーション */\r\n.lzb-md-box:hover {\r\n    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);\r\n    transform: translateY(-2px);\r\n}\r\n\r\n/* タイトル部分（線上に配置） */\r\n.lzb-md-box__header {\r\n    position: absolute;\r\n    top: 0;\r\n    left: 1.5em;\r\n    transform: translateY(-50%);\r\n    background: #ffffff;\r\n    padding: 0 12px;\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    font-weight: 700;\r\n    font-size: 1.15em;\r\n    letter-spacing: 0.05em;\r\n}\r\n\r\n/* メリット時のカラー設定 (画像「image_ccf9e2.png」に近いグリーン) */\r\n.lzb-md-box--merit .lzb-md-box__header {\r\n    color: #2ab68d;\r\n}\r\n\r\n/* デメリット時のカラー設定 (注意を促すレッド) */\r\n.lzb-md-box--demerit .lzb-md-box__header {\r\n    color: #ef4444;\r\n}\r\n\r\n/* アイコンのサイズ調整 */\r\n.lzb-md-box__icon svg {\r\n    width: 1.3em;\r\n    height: 1.3em;\r\n    display: block;\r\n    stroke-width: 2.5px;\r\n}\r\n\r\n/* 本文エリア */\r\n.lzb-md-box__content {\r\n    color: #374151;\r\n    line-height: 1.8;\r\n    font-size: 1em;\r\n}\r\n\r\n.lzb-md-box__content p:last-child {\r\n    margin-bottom: 0;\r\n}\r\n\r\n/* スマホ閲覧時の最適化 (余白の微調整) */\r\n@media (max-width: 600px) {\r\n    .lzb-md-box {\r\n        padding: 2.2em 1.2em 1.2em;\r\n        margin: 2em 0 1.5em;\r\n    }\r\n    .lzb-md-box__header {\r\n        font-size: 1.05em;\r\n        left: 1em;\r\n    }\r\n}",
      "editor": ""
    },
    "script": {
      "view": ""
    },
    "styles": [],
    "condition": [],
    "edit_url": null,
    "provide_context_to_blocks": "",
    "custom_context_slug": "",
    "allowed_blocks": "",
    "ancestor": ""
  }
]