[
  {
    "id": 2215,
    "title": "商品リンクカード_P-9",
    "icon": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewbox=\"0 0 256 256\"><path d=\"M232,72l-25.63,92.28A16,16,0,0,1,191,176H92.16a16,16,0,0,1-15.41-11.72L51.11,72Z\" fill=\"#9aa8c9\"/><path d=\"M104,216a16,16,0,1,1-16-16A16,16,0,0,1,104,216Zm88-16a16,16,0,1,0,16,16A16,16,0,0,0,192,200ZM239.71,74.14l-25.64,92.28A24.06,24.06,0,0,1,191,184H92.16A24.06,24.06,0,0,1,69,166.42L33.92,40H16a8,8,0,0,1,0-16H40a8,8,0,0,1,7.71,5.86L57.19,64H232a8,8,0,0,1,7.71,10.14ZM221.47,80H61.64l22.81,82.14A8,8,0,0,0,92.16,168H191a8,8,0,0,0,7.71-5.86Z\" fill=\"#1a1a2e\"/></svg>",
    "keywords": [
      "商品",
      "リンク",
      "アフィリエイト",
      "CTA・訴求",
      "商品リンクカード"
    ],
    "slug": "lazyblock/product-link-card",
    "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_4309e64076": {
        "type": "panel",
        "name": "link-card-edit",
        "default": "",
        "label": "項目編集",
        "help": "",
        "child_of": "",
        "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_987b85443d": {
        "type": "text",
        "name": "product_title",
        "default": "",
        "label": "商品名",
        "help": "",
        "child_of": "",
        "placement": "content",
        "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_ad8a274dcf": {
        "type": "image",
        "name": "product_image",
        "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": "",
        "conditional_logic": [],
        "insert_from_url": "true"
      },
      "control_f6a99b4733": {
        "type": "text",
        "name": "product_price",
        "default": "",
        "label": "価格（任意）",
        "help": "",
        "child_of": "",
        "placement": "content",
        "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_e9dbce4d43": {
        "type": "text",
        "name": "product_image_html",
        "default": "",
        "label": "商品画像（HTMLコード）",
        "help": "例: A8ネットなどのバナーHTML（<a>タグや<img>タグ）をそのまま貼り付けてください。こちらを入力すると優先して表示されます。",
        "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_4e9907479e": {
        "type": "number",
        "name": "rating",
        "default": "0",
        "label": "評価（0〜5）",
        "help": "0で非表示",
        "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": "",
        "step": "0.5",
        "min": "0",
        "max": "5"
      },
      "control_35cb98490a": {
        "type": "textarea",
        "name": "product_subtitle",
        "default": "例: 世界No.1モバイルバッテリーブランドの大人気モデル",
        "label": "サブタイトル（キャッチコピー）",
        "help": "キャッチコピーや一言説明（任意）",
        "child_of": "",
        "placement": "content",
        "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_1dba0a4813": {
        "type": "rich_text",
        "name": "product_description",
        "default": "",
        "label": "商品説明",
        "help": "商品の特徴や使用感などを入力してください。フロントエンドでは最大3行で表示されます",
        "child_of": "",
        "placement": "content",
        "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_92d92845a6": {
        "type": "repeater",
        "name": "buttons",
        "default": "",
        "label": "ボタン",
        "help": "mazon・楽天などの購入リンクを追加",
        "child_of": "",
        "placement": "content",
        "group": "settings",
        "width": "100",
        "hide_if_not_selected": "true",
        "required": "false",
        "translate": "false",
        "save_in_meta": "false",
        "save_in_meta_name": "",
        "placeholder": "",
        "characters_limit": "",
        "rows_label": "ボタン",
        "rows_add_button_label": "ボタンを追加"
      },
      "control_f288924616": {
        "type": "select",
        "name": "button_type",
        "default": "",
        "label": "button_type",
        "help": "",
        "child_of": "control_92d92845a6",
        "placement": "content",
        "group": "settings",
        "width": "50",
        "hide_if_not_selected": "false",
        "required": "false",
        "translate": "false",
        "save_in_meta": "false",
        "save_in_meta_name": "",
        "placeholder": "",
        "characters_limit": "",
        "choices": [
          {
            "label": "Amazon",
            "value": "#amazon"
          },
          {
            "label": "楽天市場",
            "value": "#rakuten"
          },
          {
            "label": "Yahoo!ショッピング",
            "value": "#yahoo"
          },
          {
            "label": "YouTube",
            "value": "#youtube"
          },
          {
            "label": "メルカリ",
            "value": "#mercari"
          },
          {
            "label": "公式サイト",
            "value": "#official"
          },
          {
            "label": "その他",
            "value": "#other"
          }
        ]
      },
      "control_f0ab3d44b5": {
        "type": "text",
        "name": "button_label",
        "default": "",
        "label": "ボタンラベル（任意）",
        "help": "",
        "child_of": "control_92d92845a6",
        "placement": "content",
        "group": "settings",
        "width": "50",
        "hide_if_not_selected": "false",
        "required": "false",
        "translate": "false",
        "save_in_meta": "false",
        "save_in_meta_name": "",
        "placeholder": "空欄でデフォルト表示",
        "characters_limit": ""
      },
      "control_354bf1457a": {
        "type": "url",
        "name": "button_url",
        "default": "https://",
        "label": "URL",
        "help": "アフィリエイトリンクを入力してください",
        "child_of": "control_92d92845a6",
        "placement": "content",
        "group": "settings",
        "width": "100",
        "hide_if_not_selected": "false",
        "required": "true",
        "translate": "false",
        "save_in_meta": "false",
        "save_in_meta_name": "",
        "placeholder": "",
        "characters_limit": ""
      },
      "control_2b8bc84645": {
        "type": "text",
        "name": "button_badge",
        "default": "",
        "label": "バッジテキスト（任意）",
        "help": "ボタン上部に吹き出しで表示されます（空欄で非表示）",
        "child_of": "control_92d92845a6",
        "placement": "content",
        "group": "settings",
        "width": "100",
        "hide_if_not_selected": "false",
        "required": "false",
        "translate": "false",
        "save_in_meta": "false",
        "save_in_meta_name": "",
        "placeholder": "＼セール中！／　ポイント+5倍",
        "characters_limit": "30"
      },
      "control_a80a124bba": {
        "type": "number",
        "name": "review_count",
        "default": "0",
        "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": "",
        "min": "0",
        "step": "1"
      }
    },
    "code": {
      "output_method": "php",
      "editor_html": "",
      "editor_callback": "",
      "frontend_html": "<?php\r\n// 画像・基本データの取得\r\n$img_data = $attributes['product_image'] ?? '';\r\n$img_url  = is_array( $img_data ) && isset( $img_data['url'] ) ? $img_data['url'] : ( is_string( $img_data ) ? $img_data : '' );\r\n$img_html = $attributes['product_image_html'] ?? ''; // ← HTMLコードを取得\r\n$title    = $attributes['product_title']       ?? '';\r\n$sub      = $attributes['product_subtitle']    ?? '';\r\n$desc     = $attributes['product_description'] ?? '';\r\n$rating   = (float) ($attributes['rating']     ?? 0);\r\n$rcount   = (int)   ($attributes['review_count'] ?? 0);\r\n$price    = $attributes['product_price']       ?? ''; \r\n$btns     = $attributes['buttons']             ?? [];\r\n\r\n// 星評価生成クロージャ\r\n$plc_stars = function( float $r ): string {\r\n    $html = '';\r\n    for ( $i = 1; $i <= 5; $i++ ) {\r\n        if ( $r >= $i ) { $html .= '<span class=\"plc-star plc-star--full\" aria-hidden=\"true\">★</span>'; }\r\n        elseif ( $r >= $i - 0.5 ) { $html .= '<span class=\"plc-star plc-star--half\" aria-hidden=\"true\"><span class=\"plc-star__fg\">★</span>★</span>'; }\r\n        else { $html .= '<span class=\"plc-star plc-star--empty\" aria-hidden=\"true\">★</span>'; }\r\n    }\r\n    return $html;\r\n};\r\n\r\n// アイコン生成クロージャ\r\n$plc_icon = function( string $type ): string {\r\n    if ( 'amazon' === $type ) return '<text x=\"50%\" y=\"52%\" font-size=\"22\" font-weight=\"900\" font-family=\"Arial, sans-serif\" text-anchor=\"middle\" dominant-baseline=\"middle\" fill=\"currentColor\">a</text>';\r\n    if ( 'rakuten' === $type ) return '<text x=\"50%\" y=\"52%\" font-size=\"19\" font-weight=\"900\" font-family=\"Arial, sans-serif\" text-anchor=\"middle\" dominant-baseline=\"middle\" fill=\"currentColor\">R</text>';\r\n    if ( 'yahoo' === $type ) return '<text x=\"50%\" y=\"52%\" font-size=\"15\" font-weight=\"900\" font-family=\"Arial, sans-serif\" text-anchor=\"middle\" dominant-baseline=\"middle\" fill=\"currentColor\">Y!</text>';\r\n    if ( 'youtube' === $type ) return '<path d=\"M21.5 6.5a2.8 2.8 0 0 0-1.9-2C17.9 4 12 4 12 4s-5.9 0-7.6.5a2.8 2.8 0 0 0-1.9 2C2 8.2 2 12 2 12s0 3.8.5 5.5a2.8 2.8 0 0 0 1.9 2C6.1 20 12 20 12 20s5.9 0 7.6-.5a2.8 2.8 0 0 0 1.9-2C22 15.8 22 12 22 12s0-3.8-.5-5.5z\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"/><path d=\"M10 15.5l6-3.5-6-3.5v7z\" fill=\"currentColor\"/>';\r\n    if ( 'mercari' === $type ) return '<text x=\"50%\" y=\"52%\" font-size=\"22\" font-weight=\"900\" font-family=\"Arial, sans-serif\" text-anchor=\"middle\" dominant-baseline=\"middle\" fill=\"currentColor\">m</text>';\r\n    if ( 'official' === $type ) return '<circle cx=\"12\" cy=\"12\" r=\"9.5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"/><path d=\"M8.5 12c0-1.93 1.34-3.5 3-3.5s3 1.57 3 3.5-1.34 3.5-3 3.5-3-1.57-3-3.5z\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\"/><line x1=\"2.5\" y1=\"12\" x2=\"21.5\" y2=\"12\" stroke=\"currentColor\" stroke-width=\"1.2\"/><path d=\"M12 2.5C10 6 9 9 9 12s1 6 3 9.5M12 2.5C14 6 15 9 15 12s-1 6-3 9.5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\"/>';\r\n    return '<circle cx=\"11\" cy=\"11\" r=\"7\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"/><path d=\"M21 21l-4-4\" stroke=\"currentColor\" stroke-width=\"2\"/>';\r\n};\r\n\r\n// ラベル生成クロージャ\r\n$plc_btn_label = function( string $type ): string {\r\n    $map = [ 'amazon' => 'Amazon', 'rakuten' => '楽天市場', 'yahoo' => 'Yahoo!', 'youtube' => 'YouTube', 'mercari' => 'メルカリ', 'official' => '公式サイト' ];\r\n    return $map[ $type ] ?? '詳細を見る';\r\n};\r\n?>\r\n<div class=\"plc-card\" data-plc-card>\r\n  <div class=\"plc-card__body\">\r\n    <?php /* --- 画像出力の条件分岐を追加 --- */ ?>\r\n    <?php if ( $img_html ) : ?>\r\n    <div class=\"plc-card__image-col\">\r\n      <div class=\"plc-card__image-frame plc-card__image-frame--html\">\r\n        <?php echo $img_html; ?>\r\n      </div>\r\n    </div>\r\n    <?php elseif ( $img_url ) : ?>\r\n    <div class=\"plc-card__image-col\">\r\n      <div class=\"plc-card__image-frame\">\r\n        <img class=\"plc-card__img\" src=\"<?php echo esc_url( $img_url ); ?>\" alt=\"<?php echo esc_attr( $title ); ?>\" loading=\"lazy\" decoding=\"async\">\r\n      </div>\r\n    </div>\r\n    <?php endif; ?>\r\n    \r\n    <div class=\"plc-card__info-col\">\r\n      <?php if ( $title ) : ?><div class=\"plc-card__title\"><?php echo esc_html( $title ); ?></div><?php endif; ?>\r\n      <?php if ( $sub ) : ?><p class=\"plc-card__subtitle\"><?php echo esc_html( $sub ); ?></p><?php endif; ?>\r\n      \r\n      <?php if ( $rating > 0 ) : ?>\r\n      <div class=\"plc-card__rating\" aria-label=\"評価: <?php echo $rating; ?> / 5\">\r\n        <span class=\"plc-card__stars\"><?php echo $plc_stars( $rating ); ?></span>\r\n        <span class=\"plc-card__score\"><?php echo number_format( $rating, 1 ); ?></span>\r\n        <?php if ( $rcount > 0 ) : ?><span class=\"plc-card__rcount\">(<?php echo number_format( $rcount ); ?>件)</span><?php endif; ?>\r\n      </div>\r\n      <?php endif; ?>\r\n      \r\n      <?php if ( $price ) : ?>\r\n      <div class=\"plc-card__price\"><?php echo esc_html( $price ); ?></div>\r\n      <?php endif; ?>\r\n      \r\n      <?php if ( $desc ) : ?>\r\n      <div class=\"plc-card__desc-wrap\">\r\n        <div class=\"plc-card__desc\"><?php echo wp_kses_post( $desc ); ?></div>\r\n        <button type=\"button\" class=\"plc-card__more-btn\" aria-expanded=\"false\">続きを表示</button>\r\n      </div>\r\n      <?php endif; ?>\r\n      \r\n      <?php if ( ! empty( $btns ) && is_array( $btns ) ) : ?>\r\n      <div class=\"plc-card__btns\">\r\n        <?php foreach ( $btns as $btn ) :\r\n          $raw_type = $btn['button_type'] ?? 'other';\r\n          if ( is_array( $raw_type ) ) { $raw_type = $raw_type['value'] ?? 'other'; }\r\n          \r\n          $type = strtolower( trim( ltrim( (string) $raw_type, '#' ) ) );\r\n          \r\n          $valid_types = ['amazon', 'rakuten', 'yahoo', 'youtube', 'mercari', 'official', 'other'];\r\n          if ( ! in_array( $type, $valid_types, true ) ) {\r\n              $type = 'other';\r\n          }\r\n          \r\n          $url   = $btn['button_url']   ?? '';\r\n          $badge = $btn['button_badge'] ?? '';\r\n          $label = ! empty( $btn['button_label'] ) ? $btn['button_label'] : $plc_btn_label( $type );\r\n          if ( ! $url ) continue;\r\n        ?>\r\n        <div class=\"plc-card__btn-wrap\">\r\n          <?php if ( $badge ) : ?>\r\n          <div class=\"plc-card__badge\"><?php echo esc_html( $badge ); ?></div>\r\n          <?php endif; ?>\r\n          <a class=\"plc-card__btn plc-card__btn--<?php echo esc_attr( $type ); ?>\" href=\"<?php echo esc_url( $url ); ?>\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">\r\n            <svg class=\"plc-btn-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><?php echo $plc_icon( $type ); ?></svg>\r\n            <span class=\"plc-btn-label\"><?php echo esc_html( $label ); ?></span>\r\n          </a>\r\n        </div>\r\n        <?php endforeach; ?>\r\n      </div>\r\n      <?php endif; ?>\r\n    </div>\r\n  </div>\r\n</div>",
      "frontend_callback": "",
      "show_preview": "always",
      "single_output": true
    },
    "style": {
      "block": "@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;700&family=Noto+Sans+JP:wght@400;500;700&display=swap');\r\n:root{--plc-font-serif:'Noto Serif JP',serif;--plc-font-sans:'Noto Sans JP',sans-serif;--plc-bg-card:#FFFFFF;--plc-bg-image:#F9F6F2;--plc-border:#E4DDD5;--plc-shadow:0 2px 16px rgba(60,40,20,.08),0 0 0 1px rgba(60,40,20,.04);--plc-shadow-hover:0 8px 36px rgba(60,40,20,.14),0 0 0 1px rgba(60,40,20,.06);--plc-title:#1A1410;--plc-subtitle:#7D6E60;--plc-text:#5A4E44;--plc-muted:#9E8E80;--plc-star-on:#F59E0B;--plc-star-off:#D9CEC4;--plc-radius:18px;--plc-radius-img:12px;--plc-ease:0.24s cubic-bezier(0.4,0,0.2,1);--plc-amazon:#FF9900;--plc-rakuten:#BF0000;--plc-yahoo:#FF0033;--plc-youtube:#FF0000;--plc-mercari:#E32B36;--plc-official:#0F3460;--plc-other:#3D4451}\r\n.plc-card { font-family: var(--plc-font-sans); position: relative; background: var(--plc-bg-card); border: 1.5px solid var(--plc-border); border-radius: var(--plc-radius); box-shadow: var(--plc-shadow); overflow: hidden; margin: 0 0 32px; opacity: 0; transform: translateY(20px); transition: box-shadow var(--plc-ease), transform var(--plc-ease); }\r\n.plc-card.plc-visible { animation: plcFadeUp .6s cubic-bezier(.22,1,.36,1) forwards; }\r\n@keyframes plcFadeUp { to { opacity: 1; transform: translateY(0); } }\r\n.plc-card:hover { box-shadow: var(--plc-shadow-hover); transform: translateY(-3px); }\r\n.plc-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--plc-star-on) 0%, var(--plc-amazon) 25%, var(--plc-rakuten) 50%, var(--plc-youtube) 75%, var(--plc-official) 100%); }\r\n.plc-card__body { display: flex; gap: 24px; padding: 28px; align-items: flex-start; }\r\n.plc-card__image-col { flex: 0 0 auto; width: 168px; }\r\n.plc-card__image-frame { width: 168px; height: 168px; border-radius: var(--plc-radius-img); background: var(--plc-bg-image); border: 1px solid var(--plc-border); overflow: hidden; display: flex; align-items: center; justify-content: center; }\r\n.plc-card__img { width: 100%; height: 100%; object-fit: contain; padding: 10px; transition: transform .45s cubic-bezier(.34,1.56,.64,1); will-change: transform; }\r\n.plc-card:hover .plc-card__img { transform: scale(1.07); }\r\n.plc-card__info-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; }\r\n.plc-card__title { font-family: var(--plc-font-serif); font-size: 1.05rem; font-weight: 700; line-height: 1.6; color: var(--plc-title); margin: 0; }\r\n.plc-card__subtitle { font-size: .78rem; color: var(--plc-subtitle); font-style: italic; margin: 0; }\r\n.plc-card__rating { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }\r\n.plc-card__stars { display: inline-flex; gap: 1px; line-height: 1; }\r\n.plc-star { font-size: 1.15rem; display: inline-block; }\r\n.plc-star--full { color: var(--plc-star-on); }\r\n.plc-star--empty { color: var(--plc-star-off); }\r\n.plc-star--half { position: relative; color: var(--plc-star-off); }\r\n.plc-star__fg { position: absolute; left: 0; top: 0; width: 50%; overflow: hidden; color: var(--plc-star-on); display: inline-block; }\r\n.plc-card__score { font-size: .92rem; font-weight: 700; color: var(--plc-star-on); font-variant-numeric: tabular-nums; }\r\n.plc-card__rcount { font-size: .72rem; color: var(--plc-muted); }\r\n.plc-card__price { font-size: 1.15rem; font-weight: 700; color: var(--plc-title); margin: 2px 0 6px; letter-spacing: 0.03em; }\r\n\r\n/* --- 追加：商品説明の折りたたみスタイル --- */\r\n.plc-card__desc-wrap { margin: 0; }\r\n.plc-card__desc { font-size: .82rem; line-height: 1.75; color: var(--plc-text); margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }\r\n.plc-card__desc-wrap.is-expanded .plc-card__desc { -webkit-line-clamp: unset; display: block; }\r\n.plc-card__more-btn { background: transparent; border: none; color: var(--plc-star-on); font-size: 0.76rem; font-weight: 700; padding: 4px 0 0; cursor: pointer; display: none; align-items: center; gap: 4px; font-family: var(--plc-font-sans); }\r\n.plc-card__more-btn::after { content: ''; width: 5px; height: 5px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform 0.2s; }\r\n.plc-card__desc-wrap.is-expanded .plc-card__more-btn::after { transform: rotate(225deg) translate(-2px, -2px); }\r\n\r\n.plc-card__btns { display: grid; grid-template-columns: repeat(auto-fit, minmax(108px, 1fr)); gap: 32px 8px; margin-top: 36px; position: relative; align-items: start; }\r\n.plc-card__btn-wrap { position: relative; display: block; align-self: start; height: fit-content; }\r\n.plc-card__badge { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: #EF4444; color: #fff; font-size: 0.64rem; font-weight: 700; padding: 3px 8px; border-radius: 20px; white-space: nowrap; letter-spacing: 0.05em; box-shadow: 0 2px 8px rgba(239,68,68,.35); animation: plcBadgePulse 2.4s ease-in-out infinite; pointer-events: none; z-index: 2; }\r\n.plc-card__badge::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #EF4444; border-bottom: 0; }\r\n@keyframes plcBadgePulse { 0%,100% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) scale(1.06); } }\r\n.plc-card__btn { position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px; border-radius: 9px; font-family: var(--plc-font-sans); font-size: .76rem; font-weight: 700; text-decoration: none; letter-spacing: .03em; overflow: hidden; transition: transform var(--plc-ease), box-shadow var(--plc-ease), filter var(--plc-ease); box-shadow: 0 2px 7px rgba(0,0,0,.18); width: 100%; text-align: center; word-break: keep-all; line-height: 1.4; box-sizing: border-box; }\r\n.plc-card__btn::after { content: ''; position: absolute; inset: 0; background: rgba(255,255,255,0); transition: background .2s ease; }\r\n.plc-card__btn:hover::after { background: rgba(255,255,255,.13); }\r\n.plc-card__btn:hover { transform: translateY(-2px); box-shadow: 0 5px 16px rgba(0,0,0,.22); text-decoration: none; }\r\n.plc-card__btn:active { transform: translateY(0) scale(.97); filter: brightness(.92); }\r\n.plc-card__btn:focus { outline: none; }\r\n.plc-card__btn:focus-visible { outline: 2px solid var(--plc-star-on); outline-offset: 2px; }\r\n.plc-ripple { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.4); transform: scale(0); animation: plcRippleAnim 0.6s linear forwards; pointer-events: none; z-index: 0; }\r\n@keyframes plcRippleAnim { to { transform: scale(2.5); opacity: 0; } }\r\n.plc-card__btn--amazon { background: var(--plc-amazon); color: #3A2000; }\r\n.plc-card__btn--rakuten { background: var(--plc-rakuten); color: #fff; }\r\n.plc-card__btn--yahoo { background: var(--plc-yahoo); color: #fff; }\r\n.plc-card__btn--youtube { background: var(--plc-youtube); color: #fff; }\r\n.plc-card__btn--mercari { background: var(--plc-mercari); color: #fff; }\r\n.plc-card__btn--official { background: var(--plc-official); color: #fff; }\r\n.plc-card__btn--other { background: var(--plc-other); color: #fff; }\r\n.plc-btn-icon { width: 18px; height: 18px; flex-shrink: 0; fill: currentColor; position: relative; z-index: 1; }\r\n.plc-btn-label { position: relative; z-index: 1; }\r\n@media(max-width:580px){ .plc-card__body { flex-direction: column; gap: 18px; padding: 20px; } .plc-card__image-col { width: 100%; } .plc-card__image-frame { width: 120px; height: 120px; margin: 0 auto; } .plc-card__btns { grid-template-columns: repeat(2, 1fr); gap: 32px 8px; margin-top: 32px; } }\r\n\r\n/* --- HTML画像出力用の追加スタイル --- */\r\n.plc-card__image-frame--html {\r\n    position: relative;\r\n    width: 168px; \r\n    height: 168px;\r\n    border-radius: var(--plc-radius-img);\r\n    background: var(--plc-bg-image);\r\n    border: 1px solid var(--plc-border);\r\n    overflow: hidden;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n}\r\n.plc-card__image-frame--html a {\r\n    display: flex;\r\n    width: 100%;\r\n    height: 100%;\r\n    align-items: center;\r\n    justify-content: center;\r\n}\r\n/* A8ネット等のバナー画像を枠内に収める */\r\n.plc-card__image-frame--html img {\r\n    max-width: 100%;\r\n    max-height: 100%;\r\n    width: auto !important;\r\n    height: auto !important;\r\n    object-fit: contain;\r\n    padding: 10px;\r\n    transition: transform .45s cubic-bezier(.34,1.56,.64,1);\r\n}\r\n.plc-card:hover .plc-card__image-frame--html img:not([width=\"1\"]) {\r\n    transform: scale(1.07);\r\n}\r\n/* 1x1のトラッキング用画像を透明・枠外化（レイアウト崩れ防止） */\r\n.plc-card__image-frame--html img[width=\"1\"] {\r\n    position: absolute;\r\n    width: 1px !important;\r\n    height: 1px !important;\r\n    padding: 0;\r\n    opacity: 0;\r\n    pointer-events: none;\r\n}\r\n@media(max-width:580px){\r\n    .plc-card__image-frame--html {\r\n        width: 120px;\r\n        height: 120px;\r\n        margin: 0 auto;\r\n    }\r\n}\n\n/* タブレット向け最適化（680px）：画像を少し縮小して詰まりを防ぐ */\n@media (max-width: 680px) {\n  .plc-card__body { gap: 16px; padding: 20px; }\n  .plc-card__image-col { width: 120px; }\n  .plc-card__image-frame { width: 120px; height: 120px; }\n}\n\n/* スマホ向け最適化（480px）：画像を上、情報を下に積み替えて崩れを防ぐ */\n@media (max-width: 480px) {\n  .plc-card__body { flex-direction: column; align-items: center; padding: 18px; gap: 14px; }\n  .plc-card__image-col { width: 140px; }\n  .plc-card__image-frame { width: 140px; height: 140px; }\n  .plc-card__info-col { width: 100%; align-items: center; text-align: center; }\n  .plc-card__btns { width: 100%; }\n}",
      "editor": "/* =====================================================================\r\n   商品リンクカード — Editor CSS (Lazy Blocks Block Editor)\r\n   ===================================================================== */\r\n\r\n.editor-styles-wrapper .plc-card {\r\n  opacity: 1 !important; transform: none !important; animation: none !important;\r\n  font-family: 'Noto Sans JP', sans-serif;\r\n  border: 1.5px solid #E4DDD5; border-radius: 18px;\r\n  box-shadow: 0 2px 16px rgba(60,40,20,.08);\r\n  overflow: hidden; margin: 0; position: relative;\r\n  background: #FFFFFF;\r\n}\r\n.editor-styles-wrapper .plc-card::before {\r\n  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;\r\n  background: linear-gradient(90deg, #F59E0B 0%, #FF9900 25%, #BF0000 50%, #FF0000 75%, #0F3460 100%);\r\n}\r\n.editor-styles-wrapper .plc-card__body { display: flex; gap: 24px; padding: 28px; align-items: flex-start; }\r\n.editor-styles-wrapper .plc-card__image-frame { width: 168px; height: 168px; border-radius: 12px; background: #F9F6F2; border: 1px solid #E4DDD5; display: flex; align-items: center; justify-content: center; overflow: hidden; }\r\n.editor-styles-wrapper .plc-card__img { width: 100%; height: 100%; object-fit: contain; padding: 10px; }\r\n.editor-styles-wrapper .plc-card__info-col { flex: 1; display: flex; flex-direction: column; gap: 10px; }\r\n.editor-styles-wrapper .plc-card__title { font-family: 'Noto Serif JP', serif; font-size: 1.05rem; font-weight: 700; color: #1A1410; line-height: 1.6; margin: 0; }\r\n.editor-styles-wrapper .plc-card__subtitle { font-size: 0.78rem; color: #7D6E60; font-style: italic; margin: 0; }\r\n.editor-styles-wrapper .plc-card__stars { display: inline-flex; gap: 1px; }\r\n.editor-styles-wrapper .plc-star { font-size: 1.15rem; }\r\n.editor-styles-wrapper .plc-star--full { color: #F59E0B; }\r\n.editor-styles-wrapper .plc-star--empty { color: #D9CEC4; }\r\n.editor-styles-wrapper .plc-card__score { font-size: 0.92rem; font-weight: 700; color: #F59E0B; }\r\n.editor-styles-wrapper .plc-card__rcount { font-size: 0.72rem; color: #9E8E80; }\r\n.editor-styles-wrapper .plc-card__price { font-size: 1.15rem; font-weight: 700; color: #1A1410; margin: 2px 0 6px; letter-spacing: 0.03em; }\r\n\r\n/* --- 修正：エディタ上では3行で固定し、ボタンは非表示 --- */\r\n.editor-styles-wrapper .plc-card__desc-wrap { margin: 0; }\r\n.editor-styles-wrapper .plc-card__desc { font-size: 0.82rem; line-height: 1.75; color: #5A4E44; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }\r\n.editor-styles-wrapper .plc-card__more-btn { display: none !important; }\r\n\r\n.editor-styles-wrapper .plc-card__btns { \r\n  display: grid; \r\n  grid-template-columns: repeat(auto-fit, minmax(108px, 1fr)); \r\n  gap: 32px 8px; \r\n  margin-top: 36px; \r\n  position: relative; \r\n  align-items: start; \r\n}\r\n.editor-styles-wrapper .plc-card__btn-wrap { \r\n  position: relative; \r\n  display: block; \r\n  align-self: start; \r\n  height: fit-content; \r\n}\r\n.editor-styles-wrapper .plc-card__btn { \r\n  display: flex; \r\n  align-items: center; \r\n  justify-content: center; \r\n  gap: 7px; \r\n  padding: 9px 15px; \r\n  border-radius: 9px; \r\n  font-size: 0.78rem; \r\n  font-weight: 700; \r\n  text-decoration: none; \r\n  letter-spacing: 0.04em; \r\n  color: #fff; \r\n  box-shadow: 0 2px 7px rgba(0,0,0,.18); \r\n  width: 100%; \r\n  text-align: center; \r\n  word-break: keep-all; \r\n  line-height: 1.4; \r\n  box-sizing: border-box;\r\n}\r\n\r\n.editor-styles-wrapper .plc-card__badge { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: #EF4444; color: #fff; font-size: 0.64rem; font-weight: 700; padding: 3px 8px; border-radius: 20px; white-space: nowrap; letter-spacing: 0.05em; box-shadow: 0 2px 8px rgba(239,68,68,.35); animation: none !important; pointer-events: none; z-index: 2; }\r\n.editor-styles-wrapper .plc-card__badge::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #EF4444; border-bottom: 0; }\r\n.editor-styles-wrapper .plc-card__btn::after { display: none; }\r\n.editor-styles-wrapper .plc-card__btn:focus { outline: none; }\r\n.editor-styles-wrapper .plc-card__btn--amazon { background: #FF9900; color: #3A2000; }\r\n.editor-styles-wrapper .plc-card__btn--rakuten { background: #BF0000; }\r\n.editor-styles-wrapper .plc-card__btn--yahoo { background: #FF0033; }\r\n.editor-styles-wrapper .plc-card__btn--youtube { background: #FF0000; }\r\n.editor-styles-wrapper .plc-card__btn--mercari { background: #E32B36; }\r\n.editor-styles-wrapper .plc-card__btn--official { background: #0F3460; }\r\n.editor-styles-wrapper .plc-card__btn--other { background: #3D4451; }\r\n.editor-styles-wrapper .plc-btn-icon { width: 18px; height: 18px; fill: currentColor; }\r\n\r\n/* --- HTML画像出力用の追加スタイル --- */\r\n.plc-card__image-frame--html {\r\n    position: relative;\r\n    width: 168px; \r\n    height: 168px;\r\n    border-radius: var(--plc-radius-img);\r\n    background: var(--plc-bg-image);\r\n    border: 1px solid var(--plc-border);\r\n    overflow: hidden;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n}\r\n.plc-card__image-frame--html a {\r\n    display: flex;\r\n    width: 100%;\r\n    height: 100%;\r\n    align-items: center;\r\n    justify-content: center;\r\n}\r\n/* A8ネット等のバナー画像を枠内に収める */\r\n.plc-card__image-frame--html img {\r\n    max-width: 100%;\r\n    max-height: 100%;\r\n    width: auto !important;\r\n    height: auto !important;\r\n    object-fit: contain;\r\n    padding: 10px;\r\n    transition: transform .45s cubic-bezier(.34,1.56,.64,1);\r\n}\r\n.plc-card:hover .plc-card__image-frame--html img:not([width=\"1\"]) {\r\n    transform: scale(1.07);\r\n}\r\n/* 1x1のトラッキング用画像を透明・枠外化（レイアウト崩れ防止） */\r\n.plc-card__image-frame--html img[width=\"1\"] {\r\n    position: absolute;\r\n    width: 1px !important;\r\n    height: 1px !important;\r\n    padding: 0;\r\n    opacity: 0;\r\n    pointer-events: none;\r\n}\r\n@media(max-width:580px){\r\n    .plc-card__image-frame--html {\r\n        width: 120px;\r\n        height: 120px;\r\n        margin: 0 auto;\r\n    }\r\n}"
    },
    "script": {
      "view": "(function(){\r\n'use strict';\r\nfunction initEntranceAnim(){\r\n  var cards=document.querySelectorAll('[data-plc-card]');\r\n  if(!cards.length)return;\r\n  var io=new IntersectionObserver(function(entries){\r\n    entries.forEach(function(entry){\r\n      if(!entry.isIntersecting)return;\r\n      var card=entry.target;\r\n      var delay=parseFloat(card.dataset.plcDelay||0);\r\n      setTimeout(function(){card.classList.add('plc-visible');},delay);\r\n      io.unobserve(card);\r\n    });\r\n  },{threshold:0.12});\r\n  cards.forEach(function(card,i){card.dataset.plcDelay=i*90;io.observe(card);});\r\n}\r\nfunction initRipple(){\r\n  document.addEventListener('click',function(e){\r\n    var btn=e.target.closest('.plc-card__btn');\r\n    if(!btn)return;\r\n    var rect=btn.getBoundingClientRect();\r\n    var size=Math.max(rect.width,rect.height)*1.8;\r\n    var x=e.clientX-rect.left-size/2;\r\n    var y=e.clientY-rect.top-size/2;\r\n    var r=document.createElement('span');\r\n    r.className='plc-ripple';\r\n    r.style.cssText='position:absolute; width:'+size+'px; height:'+size+'px; left:'+x+'px; top:'+y+'px; pointer-events:none;';\r\n    btn.appendChild(r);\r\n    var removeRipple=function(){if(r.parentNode)r.parentNode.removeChild(r);};\r\n    r.addEventListener('animationend',removeRipple);\r\n    setTimeout(removeRipple,800);\r\n  });\r\n}\r\nfunction initStarAnim(){\r\n  var s=document.createElement('style');\r\n  s.textContent='@keyframes plcStarPop{to{opacity:1;transform:scale(1)}}'\r\n    +'@keyframes plcBadgeShake{0%{transform:translateX(-50%) rotate(0)}20%{transform:translateX(-50%) rotate(-8deg)}40%{transform:translateX(-50%) rotate(8deg)}60%{transform:translateX(-50%) rotate(-5deg)}80%{transform:translateX(-50%) rotate(5deg)}100%{transform:translateX(-50%) rotate(0)}}';\r\n  document.head.appendChild(s);\r\n  var io=new IntersectionObserver(function(entries){\r\n    entries.forEach(function(entry){\r\n      if(!entry.isIntersecting)return;\r\n      entry.target.querySelectorAll('.plc-star--full,.plc-star__fg').forEach(function(el,i){\r\n        el.style.cssText='opacity:0;transform:scale(0.4);animation:plcStarPop .35s '+(i*.07)+'s cubic-bezier(.34,1.56,.64,1) forwards;';\r\n      });\r\n      io.unobserve(entry.target);\r\n    });\r\n  },{threshold:0.5});\r\n  document.querySelectorAll('.plc-card__rating').forEach(function(el){io.observe(el);});\r\n}\r\nfunction initBadgeShake(){\r\n  document.querySelectorAll('.plc-card__btn-wrap').forEach(function(wrap){\r\n    var badge=wrap.querySelector('.plc-card__badge');\r\n    var btn=wrap.querySelector('.plc-card__btn');\r\n    if(!badge||!btn)return;\r\n    btn.addEventListener('mouseenter',function(){\r\n      badge.style.animation='none';\r\n      void badge.offsetWidth;\r\n      badge.style.animation='plcBadgeShake .4s ease,plcBadgePulse 2.4s .4s ease-in-out infinite';\r\n    });\r\n  });\r\n}\r\n\r\n/* --- 追加：続きを読むトグルの処理 --- */\r\nfunction initReadMore(){\r\n  document.querySelectorAll('.plc-card__desc-wrap').forEach(function(wrap){\r\n    var desc=wrap.querySelector('.plc-card__desc');\r\n    var btn=wrap.querySelector('.plc-card__more-btn');\r\n    if(!desc||!btn)return;\r\n    \r\n    // 実際のテキストの高さが、表示領域（3行分）を超えているか判定\r\n    if(desc.scrollHeight > desc.offsetHeight){\r\n      btn.style.display='inline-flex';\r\n    }\r\n    \r\n    btn.addEventListener('click',function(){\r\n      var expanded = wrap.classList.toggle('is-expanded');\r\n      btn.setAttribute('aria-expanded', expanded);\r\n      btn.childNodes[0].textContent = expanded ? '閉じる' : '続きを表示';\r\n    });\r\n  });\r\n}\r\n\r\nfunction init(){initEntranceAnim();initRipple();initStarAnim();initBadgeShake();initReadMore();}\r\nif(document.readyState==='loading'){document.addEventListener('DOMContentLoaded',init);}else{init();}\r\n})();"
    },
    "styles": [],
    "condition": [],
    "edit_url": null,
    "provide_context_to_blocks": "",
    "custom_context_slug": "",
    "allowed_blocks": "",
    "ancestor": ""
  }
]