[
  {
    "id": 3303,
    "title": "料金表_F-8",
    "icon": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewbox=\"0 0 256 256\"><path d=\"M237.66,153,153,237.66a8,8,0,0,1-11.31,0L42.34,138.34A8,8,0,0,1,40,132.69V40h92.69a8,8,0,0,1,5.65,2.34l99.32,99.32A8,8,0,0,1,237.66,153Z\" fill=\"#9aa8c9\"/><path d=\"M243.31,136,144,36.69A15.86,15.86,0,0,0,132.69,32H40a8,8,0,0,0-8,8v92.69A15.86,15.86,0,0,0,36.69,144L136,243.31a16,16,0,0,0,22.63,0l84.68-84.68a16,16,0,0,0,0-22.63Zm-96,96L48,132.69V48h84.69L232,147.31ZM96,84A12,12,0,1,1,84,72,12,12,0,0,1,96,84Z\" fill=\"#1a1a2e\"/></svg>",
    "keywords": [
      "料金表",
      "テーブル・データ表示"
    ],
    "slug": "lazyblock/f-pricing-table",
    "description": "複数のプランを横並びで比較できる料金表ブロックです。トグルをオンにすることで、特定プランを目立たせる「おすすめ」バッジの表示と枠線のハイライトが可能です。",
    "category": "Lazyblocks Free",
    "category_label": "Lazyblocks Free",
    "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_a7abea42e3": {
        "type": "repeater",
        "name": "plan_list",
        "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_b788b94ae3": {
        "type": "text",
        "name": "plan_name",
        "default": "",
        "label": "プラン名",
        "help": "",
        "child_of": "control_a7abea42e3",
        "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_ef8a6c4a46": {
        "type": "number",
        "name": "plan_price",
        "default": "",
        "label": "月額料金",
        "help": "",
        "child_of": "control_a7abea42e3",
        "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_86b8da40a7": {
        "type": "toggle",
        "name": "plan_recommended",
        "default": "",
        "label": "おすすめプラン",
        "help": "",
        "child_of": "control_a7abea42e3",
        "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_d6b9a74abd": {
        "type": "textarea",
        "name": "plan_features",
        "default": "",
        "label": "特徴（1行1項目）",
        "help": "",
        "child_of": "control_a7abea42e3",
        "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$plan_list = isset( $attributes['plan_list'] ) && is_array( $attributes['plan_list'] ) ? $attributes['plan_list'] : [];\r\n?>\r\n\r\n<?php if ( empty( $plan_list ) ) : ?>\r\n  <div style=\"padding: 24px; background: #11151f; border: 2px dashed #00d2d3; border-radius: 12px; text-align: center; color: #ffffff;\">\r\n    <p style=\"margin: 0;\">💰 <strong>料金表ブロック</strong><br><span style=\"font-size: 13px; color: #8b92a5;\">右側のパネルから「プラン一覧」を追加してください。</span></p>\r\n  </div>\r\n<?php else : ?>\r\n  <div class=\"pricing-table-grid\">\r\n    <?php foreach ( $plan_list as $plan ) :\r\n      $features = ! empty( $plan['plan_features'] ) ? explode( \"\\n\", trim( $plan['plan_features'] ) ) : [];\r\n      $is_reco  = ! empty( $plan['plan_recommended'] );\r\n      $name     = isset( $plan['plan_name'] ) ? $plan['plan_name'] : '';\r\n      $price    = isset( $plan['plan_price'] ) ? (float) $plan['plan_price'] : 0;\r\n    ?>\r\n    <div class=\"pricing-card<?php echo $is_reco ? ' is-recommended' : ''; ?>\">\r\n      <?php if ( $is_reco ) : ?><span class=\"pricing-badge\">おすすめ</span><?php endif; ?>\r\n      <p class=\"pricing-name\"><?php echo esc_html( $name ); ?></p>\r\n      <p class=\"pricing-price\"><?php echo esc_html( number_format( $price ) ); ?><span>円/月</span></p>\r\n      <ul class=\"pricing-features\">\r\n        <?php foreach ( $features as $f ) : ?>\r\n          <li><?php echo esc_html( trim( $f ) ); ?></li>\r\n        <?php endforeach; ?>\r\n      </ul>\r\n    </div>\r\n    <?php endforeach; ?>\r\n  </div>\r\n\r\n  <style>\r\n  .pricing-table-grid, .pricing-table-grid * { box-sizing: border-box; }\r\n  .pricing-table-grid ul, .pricing-table-grid li { list-style: none !important; margin: 0 !important; padding: 0 !important; }\r\n  .pricing-table-grid p { margin: 0 !important; }\r\n  .pricing-table-grid {\r\n    display: grid;\r\n    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));\r\n    gap: 20px;\r\n    margin: 24px 0;\r\n    width: 100%;\r\n  }\r\n  .pricing-card {\r\n    background: #111622;\r\n    border: 1px solid #283042;\r\n    border-radius: 8px;\r\n    padding: 28px 20px;\r\n    text-align: center;\r\n    position: relative;\r\n    box-shadow: 0 4px 12px rgba(0,0,0,0.08);\r\n    transition: transform 0.2s ease, box-shadow 0.2s ease;\r\n  }\r\n  .pricing-card:hover { \r\n    transform: translateY(-4px); \r\n    box-shadow: 0 8px 20px rgba(0,0,0,0.15); \r\n  }\r\n  .pricing-card.is-recommended { border: 2px solid #00d2d3; }\r\n  .pricing-badge {\r\n    position: absolute; \r\n    top: -12px; \r\n    left: 50%; \r\n    transform: translateX(-50%);\r\n    background: #00d2d3; \r\n    color: #11151f; \r\n    font-size: 12px; \r\n    font-weight: 600;\r\n    padding: 3px 14px; \r\n    border-radius: 999px;\r\n  }\r\n  .pricing-name { \r\n    color: #ffffff; \r\n    font-family: sans-serif; \r\n    font-weight: 700; \r\n    font-size: 16px; \r\n    margin: 6px 0 14px !important; \r\n  }\r\n  .pricing-price { \r\n    color: #00d2d3; \r\n    font-size: 30px; \r\n    font-weight: 700; \r\n    margin: 0 0 18px !important; \r\n  }\r\n  .pricing-price span { \r\n    font-size: 13px; \r\n    font-weight: 400; \r\n    color: #8b92a5; \r\n  }\r\n  .pricing-features { \r\n    list-style: none; \r\n    padding: 0; \r\n    margin: 0; \r\n    text-align: left; \r\n  }\r\n  .pricing-features li { \r\n    color: #8b92a5; \r\n    padding: 8px 0; \r\n    border-top: 1px solid #283042; \r\n    font-size: 13px; \r\n  }\r\n  .pricing-features li:first-child { border-top: none; }\r\n  @media (max-width: 480px) {\r\n    .pricing-table-grid { grid-template-columns: 1fr; }\r\n  }\r\n  </style>\r\n<?php endif; ?>",
      "frontend_callback": "",
      "show_preview": "always",
      "single_output": true
    },
    "style": {
      "block": "",
      "editor": ""
    },
    "script": {
      "view": ""
    },
    "styles": [],
    "condition": [],
    "edit_url": null,
    "provide_context_to_blocks": "",
    "custom_context_slug": "",
    "allowed_blocks": "",
    "ancestor": ""
  }
]