[
  {
    "id": 1757,
    "title": "review stars_F-5",
    "icon": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewbox=\"0 0 256 256\"><path d=\"M229.06,108.79l-48.7,42,14.88,62.79a8.4,8.4,0,0,1-12.52,9.17L128,189.09,73.28,222.74a8.4,8.4,0,0,1-12.52-9.17l14.88-62.79-48.7-42A8.46,8.46,0,0,1,31.73,94L95.64,88.8l24.62-59.6a8.36,8.36,0,0,1,15.48,0l24.62,59.6L224.27,94A8.46,8.46,0,0,1,229.06,108.79Z\" fill=\"#9aa8c9\"/><path d=\"M239.18,97.26A16.38,16.38,0,0,0,224.92,86l-59-4.76L143.14,26.15a16.36,16.36,0,0,0-30.27,0L90.11,81.23,31.08,86a16.46,16.46,0,0,0-9.37,28.86l45,38.83L53,211.75a16.38,16.38,0,0,0,24.5,17.82L128,198.49l50.53,31.08A16.4,16.4,0,0,0,203,211.75l-13.76-58.07,45-38.83A16.43,16.43,0,0,0,239.18,97.26Zm-15.34,5.47-48.7,42a8,8,0,0,0-2.56,7.91l14.88,62.8a.37.37,0,0,1-.17.48c-.18.14-.23.11-.38,0l-54.72-33.65a8,8,0,0,0-8.38,0L69.09,215.94c-.15.09-.19.12-.38,0a.37.37,0,0,1-.17-.48l14.88-62.8a8,8,0,0,0-2.56-7.91l-48.7-42c-.12-.1-.23-.19-.13-.5s.18-.27.33-.29l63.92-5.16A8,8,0,0,0,103,91.86l24.62-59.61c.08-.17.11-.25.35-.25s.27.08.35.25L153,91.86a8,8,0,0,0,6.75,4.92l63.92,5.16c.15,0,.24,0,.33.29S224,102.63,223.84,102.73Z\" fill=\"#1a1a2e\"/></svg>",
    "keywords": [
      "review stars",
      "比較・レビュー"
    ],
    "slug": "lazyblock/review-stars",
    "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_fe1a9f493f": {
        "type": "text",
        "name": "text-control",
        "default": "",
        "label": "Text Control",
        "help": "",
        "child_of": "",
        "placement": "inspector",
        "group": "default",
        "width": "100",
        "hide_if_not_selected": "false",
        "required": "false",
        "translate": "false",
        "save_in_meta": "false",
        "save_in_meta_name": "",
        "placeholder": "",
        "characters_limit": ""
      },
      "control_a1bb6c4aad": {
        "type": "text",
        "name": "label_1",
        "default": "",
        "label": "項目名1",
        "help": "",
        "child_of": "",
        "placement": "content",
        "group": "default",
        "width": "100",
        "hide_if_not_selected": "false",
        "required": "false",
        "translate": "false",
        "save_in_meta": "false",
        "save_in_meta_name": "",
        "placeholder": "",
        "characters_limit": ""
      },
      "control_067b5d4912": {
        "type": "text",
        "name": "label_2",
        "default": "",
        "label": "項目名2",
        "help": "",
        "child_of": "",
        "placement": "content",
        "group": "default",
        "width": "100",
        "hide_if_not_selected": "false",
        "required": "false",
        "translate": "false",
        "save_in_meta": "false",
        "save_in_meta_name": "",
        "placeholder": "",
        "characters_limit": ""
      },
      "control_24e87f4a21": {
        "type": "text",
        "name": "label_3",
        "default": "",
        "label": "項目名3",
        "help": "",
        "child_of": "",
        "placement": "content",
        "group": "default",
        "width": "100",
        "hide_if_not_selected": "false",
        "required": "false",
        "translate": "false",
        "save_in_meta": "false",
        "save_in_meta_name": "",
        "placeholder": "",
        "characters_limit": ""
      },
      "control_519a6f489e": {
        "type": "text",
        "name": "label_4",
        "default": "",
        "label": "項目名4",
        "help": "",
        "child_of": "",
        "placement": "content",
        "group": "default",
        "width": "100",
        "hide_if_not_selected": "false",
        "required": "false",
        "translate": "false",
        "save_in_meta": "false",
        "save_in_meta_name": "",
        "placeholder": "",
        "characters_limit": ""
      },
      "control_7c4b3d49ef": {
        "type": "text",
        "name": "label_5",
        "default": "",
        "label": "項目名5",
        "help": "",
        "child_of": "",
        "placement": "content",
        "group": "default",
        "width": "100",
        "hide_if_not_selected": "false",
        "required": "false",
        "translate": "false",
        "save_in_meta": "false",
        "save_in_meta_name": "",
        "placeholder": "",
        "characters_limit": ""
      },
      "control_186a99457b": {
        "type": "range",
        "name": "score_1",
        "default": "",
        "label": "スコア1",
        "help": "",
        "child_of": "",
        "placement": "content",
        "group": "default",
        "width": "100",
        "hide_if_not_selected": "false",
        "required": "false",
        "translate": "false",
        "save_in_meta": "false",
        "save_in_meta_name": "",
        "placeholder": "",
        "characters_limit": "",
        "min": "1",
        "max": "5",
        "step": "1"
      },
      "control_4dba6340f7": {
        "type": "range",
        "name": "score_2",
        "default": "",
        "label": "スコア2",
        "help": "",
        "child_of": "",
        "placement": "content",
        "group": "default",
        "width": "100",
        "hide_if_not_selected": "false",
        "required": "false",
        "translate": "false",
        "save_in_meta": "false",
        "save_in_meta_name": "",
        "placeholder": "",
        "characters_limit": "",
        "min": "1",
        "max": "5",
        "step": "1"
      },
      "control_d7c94f4ff7": {
        "type": "range",
        "name": "score_3",
        "default": "",
        "label": "スコア3",
        "help": "",
        "child_of": "",
        "placement": "content",
        "group": "default",
        "width": "100",
        "hide_if_not_selected": "false",
        "required": "false",
        "translate": "false",
        "save_in_meta": "false",
        "save_in_meta_name": "",
        "placeholder": "",
        "characters_limit": "",
        "max": "5",
        "min": "1",
        "step": "1"
      },
      "control_83d9d44c20": {
        "type": "range",
        "name": "score_4",
        "default": "",
        "label": "スコア4",
        "help": "",
        "child_of": "",
        "placement": "content",
        "group": "default",
        "width": "100",
        "hide_if_not_selected": "false",
        "required": "false",
        "translate": "false",
        "save_in_meta": "false",
        "save_in_meta_name": "",
        "placeholder": "",
        "characters_limit": "",
        "min": "1",
        "max": "5",
        "step": "1"
      },
      "control_7ba8ff4bfb": {
        "type": "range",
        "name": "score_5",
        "default": "",
        "label": "スコア5",
        "help": "",
        "child_of": "",
        "placement": "content",
        "group": "default",
        "width": "100",
        "hide_if_not_selected": "false",
        "required": "false",
        "translate": "false",
        "save_in_meta": "false",
        "save_in_meta_name": "",
        "placeholder": "",
        "characters_limit": "",
        "min": "1",
        "max": "5",
        "step": "1"
      }
    },
    "code": {
      "output_method": "html",
      "editor_html": "",
      "editor_callback": "",
      "frontend_html": "<style>\r\n/* --- スター専用ブロック：ベースデザイン --- */\r\n.lb-star-box {\r\n    background: #fff;\r\n    border: 2px solid #f0f8ff;\r\n    border-radius: 8px;\r\n    padding: 25px 30px;\r\n    box-shadow: 0 4px 15px rgba(0,0,0,0.03);\r\n    margin-bottom: 2em;\r\n    max-width: 450px; /* 広がりすぎないよう幅を制限 */\r\n    font-family: sans-serif;\r\n}\r\n.lb-s-row {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    margin-bottom: 18px;\r\n    font-size: 1.05rem;\r\n    font-weight: bold;\r\n    --star-color: #ffc107; /* デフォルトの色（イエロー） */\r\n}\r\n.lb-s-row:last-child { margin-bottom: 0; }\r\n.lb-s-label { flex: 1; color: #444; }\r\n\r\n/* ====================================================\r\n   ★条件分岐：スコアが4以上の時だけパッションピンクに変更★\r\n   ==================================================== */\r\n/* data-scoreが4か5で始まる（4, 4.0, 4.5, 5, 5.0）時に発動 */\r\n.lb-s-row[data-score^=\"4\"],\r\n.lb-s-row[data-score^=\"5\"] {\r\n    --star-color: #ff1493; /* パッションピンク */\r\n}\r\n/* ==================================================== */\r\n\r\n/* 星と数値をまとめるラッパー */\r\n.lb-s-icon-wrap {\r\n    display: flex;\r\n    align-items: center;\r\n}\r\n\r\n/* 星アイコン（小数対応のグラデーション） */\r\n.lb-s-icon {\r\n    --percent: calc(var(--rating) / 5 * 100%);\r\n    position: relative;\r\n    display: inline-block;\r\n    font-size: 1.4rem;\r\n    line-height: 1;\r\n    letter-spacing: 2px;\r\n    background: linear-gradient(90deg, var(--star-color) var(--percent), #e4e5e9 var(--percent));\r\n    -webkit-background-clip: text;\r\n    -webkit-text-fill-color: transparent;\r\n    z-index: 2;\r\n}\r\n.lb-s-icon::before { content: '★★★★★'; }\r\n\r\n/* ====================================================\r\n   ★アニメーション：4以上の時だけ波紋（リップル）を発生★\r\n   ==================================================== */\r\n@keyframes star-ripple {\r\n    0% { transform: scale(1); opacity: 0.6; }\r\n    100% { transform: scale(1.4); opacity: 0; }\r\n}\r\n\r\n/* 星の裏側に複製した星を配置し、拡大させながら消すことで波紋を表現 */\r\n.lb-s-row[data-score^=\"4\"] .lb-s-icon::after,\r\n.lb-s-row[data-score^=\"5\"] .lb-s-icon::after {\r\n    content: '★★★★★';\r\n    position: absolute;\r\n    left: 0;\r\n    top: 0;\r\n    background: inherit; /* 表の星と同じグラデーションを継承 */\r\n    -webkit-background-clip: text;\r\n    -webkit-text-fill-color: transparent;\r\n    z-index: -1;\r\n    animation: star-ripple 1.5s infinite ease-out;\r\n    pointer-events: none;\r\n}\r\n/* ==================================================== */\r\n\r\n/* 数値テキスト（星の色と自動連動します） */\r\n.lb-s-num {\r\n    width: 45px;\r\n    text-align: right;\r\n    color: var(--star-color);\r\n    margin-left: 12px;\r\n    font-size: 1.15rem;\r\n    font-weight: 900;\r\n}\r\n\r\n/* スマホ用最適化 */\r\n@media (max-width: 650px) {\r\n    .lb-star-box { max-width: 100%; padding: 20px; }\r\n    .lb-s-icon { font-size: 1.3rem; letter-spacing: 1px; }\r\n}\r\n</style>\r\n\r\n<div class=\"lb-star-box\">\r\n  {{#if label_1}}\r\n  <div class=\"lb-s-row\" data-score=\"{{score_1}}\">\r\n    <span class=\"lb-s-label\">{{label_1}}</span>\r\n    <div class=\"lb-s-icon-wrap\">\r\n        <span class=\"lb-s-icon\" style=\"--rating: {{score_1}};\"></span>\r\n        <span class=\"lb-s-num\">{{score_1}}</span>\r\n    </div>\r\n  </div>\r\n  {{/if}}\r\n\r\n  {{#if label_2}}\r\n  <div class=\"lb-s-row\" data-score=\"{{score_2}}\">\r\n    <span class=\"lb-s-label\">{{label_2}}</span>\r\n    <div class=\"lb-s-icon-wrap\">\r\n        <span class=\"lb-s-icon\" style=\"--rating: {{score_2}};\"></span>\r\n        <span class=\"lb-s-num\">{{score_2}}</span>\r\n    </div>\r\n  </div>\r\n  {{/if}}\r\n\r\n  {{#if label_3}}\r\n  <div class=\"lb-s-row\" data-score=\"{{score_3}}\">\r\n    <span class=\"lb-s-label\">{{label_3}}</span>\r\n    <div class=\"lb-s-icon-wrap\">\r\n        <span class=\"lb-s-icon\" style=\"--rating: {{score_3}};\"></span>\r\n        <span class=\"lb-s-num\">{{score_3}}</span>\r\n    </div>\r\n  </div>\r\n  {{/if}}\r\n\r\n  {{#if label_4}}\r\n  <div class=\"lb-s-row\" data-score=\"{{score_4}}\">\r\n    <span class=\"lb-s-label\">{{label_4}}</span>\r\n    <div class=\"lb-s-icon-wrap\">\r\n        <span class=\"lb-s-icon\" style=\"--rating: {{score_4}};\"></span>\r\n        <span class=\"lb-s-num\">{{score_4}}</span>\r\n    </div>\r\n  </div>\r\n  {{/if}}\r\n\r\n  {{#if label_5}}\r\n  <div class=\"lb-s-row\" data-score=\"{{score_5}}\">\r\n    <span class=\"lb-s-label\">{{label_5}}</span>\r\n    <div class=\"lb-s-icon-wrap\">\r\n        <span class=\"lb-s-icon\" style=\"--rating: {{score_5}};\"></span>\r\n        <span class=\"lb-s-num\">{{score_5}}</span>\r\n    </div>\r\n  </div>\r\n  {{/if}}\r\n</div>",
      "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": ""
  }
]