[
  {
    "id": 3166,
    "title": "Bento機能グリッド_P-26",
    "icon": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewbox=\"0 0 256 256\"><path d=\"M112,56v48a8,8,0,0,1-8,8H56a8,8,0,0,1-8-8V56a8,8,0,0,1,8-8h48A8,8,0,0,1,112,56Zm88-8H152a8,8,0,0,0-8,8v48a8,8,0,0,0,8,8h48a8,8,0,0,0,8-8V56A8,8,0,0,0,200,48Zm-96,96H56a8,8,0,0,0-8,8v48a8,8,0,0,0,8,8h48a8,8,0,0,0,8-8V152A8,8,0,0,0,104,144Zm96,0H152a8,8,0,0,0-8,8v48a8,8,0,0,0,8,8h48a8,8,0,0,0,8-8V152A8,8,0,0,0,200,144Z\" fill=\"#9aa8c9\"/><path d=\"M200,136H152a16,16,0,0,0-16,16v48a16,16,0,0,0,16,16h48a16,16,0,0,0,16-16V152A16,16,0,0,0,200,136Zm0,64H152V152h48v48ZM104,40H56A16,16,0,0,0,40,56v48a16,16,0,0,0,16,16h48a16,16,0,0,0,16-16V56A16,16,0,0,0,104,40Zm0,64H56V56h48v48Zm96-64H152a16,16,0,0,0-16,16v48a16,16,0,0,0,16,16h48a16,16,0,0,0,16-16V56A16,16,0,0,0,200,40Zm0,64H152V56h48v48Zm-96,32H56a16,16,0,0,0-16,16v48a16,16,0,0,0,16,16h48a16,16,0,0,0,16-16V152A16,16,0,0,0,104,136Zm0,64H56V152h48v48Z\" fill=\"#1a1a2e\"/></svg>",
    "keywords": [
      "bento",
      "ベントー",
      "グリッド",
      "機能",
      "カード",
      "特徴",
      "レイアウト・デザイン",
      "Bento機能グリッド"
    ],
    "slug": "lazyblock/daily-2026-07-11-bento-grid",
    "description": "Bento（ベントー）レイアウトの非対称カードグリッド。AIツールやサービスの機能・特徴を一覧で見せるのに向く。",
    "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_5a09675889": {
        "type": "text",
        "name": "grid_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_68bb3346fd": {
        "type": "textarea",
        "name": "grid_lead",
        "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_b88648896f": {
        "type": "repeater",
        "name": "items",
        "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": "",
        "rows_min": "",
        "rows_max": "",
        "rows_label": "",
        "rows_add_button_label": "カードを追加",
        "rows_collapsible": "true",
        "rows_collapsed": "true"
      },
      "control_12df20cd14": {
        "type": "select",
        "name": "item_size",
        "default": "normal",
        "label": "カードサイズ",
        "help": "",
        "child_of": "control_b88648896f",
        "placement": "content",
        "group": "settings",
        "width": "100",
        "hide_if_not_selected": "false",
        "required": "false",
        "translate": "false",
        "save_in_meta": "false",
        "save_in_meta_name": "",
        "choices": "[{\"label\":\"ノーマル\",\"value\":\"normal\"},{\"label\":\"ワイド（横2）\",\"value\":\"wide\"},{\"label\":\"トール（縦2）\",\"value\":\"tall\"},{\"label\":\"ラージ（2×2）\",\"value\":\"large\"}]",
        "allow_null": "false",
        "multiple": "false",
        "output_format": ""
      },
      "control_44a307933b": {
        "type": "select",
        "name": "item_accent",
        "default": "blue",
        "label": "アクセント色",
        "help": "",
        "child_of": "control_b88648896f",
        "placement": "content",
        "group": "settings",
        "width": "100",
        "hide_if_not_selected": "false",
        "required": "false",
        "translate": "false",
        "save_in_meta": "false",
        "save_in_meta_name": "",
        "choices": "[{\"label\":\"ブルー\",\"value\":\"blue\"},{\"label\":\"パープル\",\"value\":\"purple\"},{\"label\":\"グリーン\",\"value\":\"green\"},{\"label\":\"オレンジ\",\"value\":\"orange\"},{\"label\":\"ピンク\",\"value\":\"pink\"},{\"label\":\"スレート\",\"value\":\"slate\"}]",
        "allow_null": "false",
        "multiple": "false",
        "output_format": ""
      },
      "control_9b3da4df76": {
        "type": "text",
        "name": "item_icon",
        "default": "",
        "label": "アイコン（絵文字）",
        "help": "",
        "child_of": "control_b88648896f",
        "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_060938d781": {
        "type": "text",
        "name": "item_badge",
        "default": "",
        "label": "バッジ（任意）",
        "help": "",
        "child_of": "control_b88648896f",
        "placement": "content",
        "group": "settings",
        "width": "100",
        "hide_if_not_selected": "false",
        "required": "false",
        "translate": "false",
        "save_in_meta": "false",
        "save_in_meta_name": "",
        "placeholder": "NEW",
        "characters_limit": ""
      },
      "control_fb009a0178": {
        "type": "text",
        "name": "item_title",
        "default": "",
        "label": "カード見出し",
        "help": "",
        "child_of": "control_b88648896f",
        "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_9734655c62": {
        "type": "textarea",
        "name": "item_desc",
        "default": "",
        "label": "説明文",
        "help": "",
        "child_of": "control_b88648896f",
        "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\n// Bento機能グリッド — frontend (LazyBlocks: 名前付き関数は宣言しない / 無名クロージャ・インラインのみ)\n$title = isset( $attributes['grid_title'] ) ? $attributes['grid_title'] : '';\n$lead  = isset( $attributes['grid_lead'] ) ? $attributes['grid_lead'] : '';\n$items = ( isset( $attributes['items'] ) && is_array( $attributes['items'] ) ) ? $attributes['items'] : array();\nif ( ! empty( $items ) ) :\n?>\n<div class=\"ptbento\">\n\t<?php if ( '' !== $title ) : ?>\n\t\t<div class=\"ptbento__title\"><?php echo esc_html( $title ); ?></div>\n\t<?php endif; ?>\n\t<?php if ( '' !== $lead ) : ?>\n\t\t<p class=\"ptbento__lead\"><?php echo esc_html( $lead ); ?></p>\n\t<?php endif; ?>\n\t<div class=\"ptbento__grid\">\n\t\t<?php foreach ( $items as $item ) :\n\t\t\t$size   = ( isset( $item['item_size'] ) && $item['item_size'] ) ? $item['item_size'] : 'normal';\n\t\t\t$accent = ( isset( $item['item_accent'] ) && $item['item_accent'] ) ? $item['item_accent'] : 'blue';\n\t\t\t$icon   = isset( $item['item_icon'] ) ? $item['item_icon'] : '';\n\t\t\t$ttl    = isset( $item['item_title'] ) ? $item['item_title'] : '';\n\t\t\t$desc   = isset( $item['item_desc'] ) ? $item['item_desc'] : '';\n\t\t\t$badge  = isset( $item['item_badge'] ) ? $item['item_badge'] : '';\n\t\t?>\n\t\t\t<div class=\"ptbento__card ptbento__card--<?php echo esc_attr( $size ); ?> ptbento__card--<?php echo esc_attr( $accent ); ?>\">\n\t\t\t\t<?php if ( '' !== $badge ) : ?><span class=\"ptbento__badge\"><?php echo esc_html( $badge ); ?></span><?php endif; ?>\n\t\t\t\t<?php if ( '' !== $icon ) : ?><span class=\"ptbento__icon\" aria-hidden=\"true\"><?php echo esc_html( $icon ); ?></span><?php endif; ?>\n\t\t\t\t<?php if ( '' !== $ttl ) : ?><div class=\"ptbento__ttl\"><?php echo esc_html( $ttl ); ?></div><?php endif; ?>\n\t\t\t\t<?php if ( '' !== $desc ) : ?><p class=\"ptbento__desc\"><?php echo nl2br( esc_html( $desc ) ); ?></p><?php endif; ?>\n\t\t\t</div>\n\t\t<?php endforeach; ?>\n\t</div>\n</div>\n<?php endif; ?>\n",
      "frontend_callback": "",
      "show_preview": "always",
      "single_output": true
    },
    "style": {
      "block": "/* Bento機能グリッド — Block CSS (フロント＆エディター共通) */\n.ptbento{ margin:2.2em 0; }\n.ptbento__title{ font-size:1.35em; font-weight:800; margin:0 0 .35em; letter-spacing:.01em; line-height:1.4; }\n.ptbento__lead{ margin:0 0 1.15em; color:#5b6472; font-size:.95em; line-height:1.75; }\n\n.ptbento__grid{\n\tdisplay:grid;\n\tgrid-template-columns:repeat(4,1fr);\n\tgrid-auto-rows:132px;\n\tgap:14px;\n}\n\n.ptbento__card{\n\tposition:relative;\n\toverflow:hidden;\n\tborder-radius:18px;\n\tpadding:18px 18px 16px;\n\tbackground:#fff;\n\tborder:1px solid rgba(15,23,42,.06);\n\tbox-shadow:0 1px 2px rgba(15,23,42,.04), 0 8px 24px -16px rgba(15,23,42,.25);\n\tdisplay:flex;\n\tflex-direction:column;\n\tjustify-content:flex-start;\n\ttransition:transform .25s ease, box-shadow .25s ease;\n}\n.ptbento__card::before{\n\tcontent:\"\";\n\tposition:absolute;\n\tinset:0 0 auto 0;\n\theight:4px;\n\tbackground:var(--ptb-accent,#3b82f6);\n}\n.ptbento__card::after{\n\tcontent:\"\";\n\tposition:absolute;\n\tinset:0;\n\tbackground:radial-gradient(120% 120% at 100% 0%, var(--ptb-accent,#3b82f6) 0%, transparent 42%);\n\topacity:.06;\n\tpointer-events:none;\n}\n.ptbento__card:hover{\n\ttransform:translateY(-4px);\n\tbox-shadow:0 6px 14px rgba(15,23,42,.08), 0 22px 40px -20px rgba(15,23,42,.45);\n}\n\n/* サイズ（Bentoの非対称セル） */\n.ptbento__card--wide{ grid-column:span 2; }\n.ptbento__card--tall{ grid-row:span 2; }\n.ptbento__card--large{ grid-column:span 2; grid-row:span 2; }\n\n.ptbento__badge{\n\tposition:absolute; top:12px; right:12px;\n\tfont-size:.66em; font-weight:700; letter-spacing:.04em;\n\tcolor:#fff; background:var(--ptb-accent,#3b82f6);\n\tpadding:2px 9px; border-radius:999px;\n}\n.ptbento__icon{ font-size:1.75em; line-height:1; margin-bottom:.35em; }\n.ptbento__ttl{ font-size:1.02em; font-weight:700; margin:0 0 .3em; color:#0f172a; line-height:1.45; }\n.ptbento__desc{ margin:0; font-size:.86em; line-height:1.7; color:#556070; }\n\n.ptbento__card--large .ptbento__ttl{ font-size:1.2em; }\n.ptbento__card--large .ptbento__icon{ font-size:2.15em; }\n\n/* アクセントカラー */\n.ptbento__card--blue{ --ptb-accent:#3b82f6; }\n.ptbento__card--purple{ --ptb-accent:#8b5cf6; }\n.ptbento__card--green{ --ptb-accent:#10b981; }\n.ptbento__card--orange{ --ptb-accent:#f59e0b; }\n.ptbento__card--pink{ --ptb-accent:#ec4899; }\n.ptbento__card--slate{ --ptb-accent:#64748b; }\n\n/* レスポンシブ */\n@media (max-width:782px){\n\t.ptbento__grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:auto; }\n\t.ptbento__card{ min-height:118px; }\n\t.ptbento__card--tall{ grid-row:span 1; }\n\t.ptbento__card--wide, .ptbento__card--large{ grid-column:span 2; grid-row:span 1; }\n}\n@media (max-width:480px){\n\t.ptbento__grid{ grid-template-columns:1fr; }\n\t.ptbento__card--wide, .ptbento__card--large, .ptbento__card--tall{ grid-column:span 1; grid-row:span 1; }\n}\n",
      "editor": "/* Bento機能グリッド — Editor CSS (エディター内プレビュー用の微調整) */\n.ptbento{ margin:1em 0; }\n/* 空カードでもグリッドが見えるように最低高さを確保 */\n.ptbento__grid{ min-height:60px; }\n.ptbento__card{ cursor:default; }\n/* エディターではホバーの浮きを弱めて誤操作感を減らす */\n.ptbento__card:hover{ transform:none; }\n"
    },
    "script": {
      "view": "/* Bento機能グリッド — Frontend View Script\n   スクロールで各カードをふわっと表示（micro-delight）。\n   名前付きグローバル関数は作らず即時関数（IIFE）で完結させる。 */\n(function () {\n\tvar cards = document.querySelectorAll('.ptbento__card');\n\tif (!cards.length) { return; }\n\n\t// IntersectionObserver 非対応環境ではそのまま表示（フォールバック）\n\tif (!('IntersectionObserver' in window)) { return; }\n\n\tcards.forEach(function (c) {\n\t\tc.style.opacity = '0';\n\t\tc.style.transform = 'translateY(14px)';\n\t\tc.style.willChange = 'opacity, transform';\n\t});\n\n\tvar io = new IntersectionObserver(function (entries) {\n\t\tentries.forEach(function (e) {\n\t\t\tif (!e.isIntersecting) { return; }\n\t\t\tvar el = e.target;\n\t\t\tel.style.transition = 'opacity .5s ease, transform .5s ease';\n\t\t\tel.style.opacity = '1';\n\t\t\tel.style.transform = 'translateY(0)';\n\t\t\tio.unobserve(el);\n\t\t});\n\t}, { threshold: 0.15 });\n\n\tcards.forEach(function (c) { io.observe(c); });\n})();\n"
    },
    "styles": [],
    "condition": [],
    "edit_url": null,
    "provide_context_to_blocks": "",
    "custom_context_slug": "",
    "allowed_blocks": "",
    "ancestor": ""
  }
]