[ { "id": 1872, "title": "アニメーションカスタムボタン_P-2", "icon": "", "keywords": [ "ボタン", "アニメーション", "CTA・訴求", "アニメーションカスタムボタン" ], "slug": "lazyblock/animebutton", "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_4a0b4041c1": { "type": "panel", "name": "settings_panel", "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": "", "initial_open": "false" }, "control_e1195b47b2": { "type": "rich_text", "name": "btn_text", "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_e538ed464b": { "type": "text", "name": "btn_url", "default": "", "label": "リンクURL", "help": "リンク先URL", "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_eff908431e": { "type": "radio", "name": "btn_type", "default": "", "label": "デザインタイプ", "help": "", "child_of": "", "placement": "inspector", "group": "settings", "width": "100", "hide_if_not_selected": "true", "required": "false", "translate": "false", "save_in_meta": "false", "save_in_meta_name": "", "placeholder": "", "characters_limit": "", "choices": [ { "label": "光沢", "value": "standard" }, { "label": "立体", "value": "3d" }, { "label": "フラット", "value": "flat" }, { "label": "フラット立体", "value": "flat-3d" } ] }, "control_08c81746c4": { "type": "select", "name": "btn_shape", "default": "rounded", "label": "ボタンの形状", "help": "Rounded (角丸) / Pill (カプセル) / Square (四角)", "child_of": "", "placement": "inspector", "group": "settings", "width": "100", "hide_if_not_selected": "true", "required": "false", "translate": "false", "save_in_meta": "false", "save_in_meta_name": "", "placeholder": "", "characters_limit": "", "choices": [ { "label": "角丸", "value": "rounded" }, { "label": "ピル", "value": "pill" }, { "label": " 四角", "value": "square" }, { "label": "超立体", "value": "super-3d" } ] }, "control_1dc8c446dd": { "type": "select", "name": "btn_size", "default": "md", "label": "ボタンサイズ", "help": "", "child_of": "", "placement": "inspector", "group": "settings", "width": "100", "hide_if_not_selected": "true", "required": "false", "translate": "false", "save_in_meta": "false", "save_in_meta_name": "", "placeholder": "", "characters_limit": "", "choices": [ { "label": "特大", "value": "xl" }, { "label": "大", "value": "lg" }, { "label": "中", "value": "md" }, { "label": "小", "value": "sm" } ] }, "control_060a0c44cf": { "type": "toggle", "name": "use_special_effect", "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_455ae64d86": { "type": "radio", "name": "btn_special", "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": "", "choices": [ { "label": "なし", "value": "none" }, { "label": "レインボー", "value": "rainbow" }, { "label": "ファイヤー", "value": "fire" }, { "label": "ダウンロード", "value": "download" }, { "label": "サイバー", "value": "cyber" }, { "label": "プレミアムゴールド", "value": "gold" }, { "label": "警告トラテープ", "value": "hazard" }, { "label": "スピード・アイス", "value": "ice" } ], "conditional_logic": [ [ { "control": "use_special_effect", "operator": "==", "value": "1" } ] ] }, "control_3199394e2d": { "type": "radio", "name": "btn_animation", "default": "", "label": "アニメーション", "help": "", "child_of": "", "placement": "inspector", "group": "settings", "width": "100", "hide_if_not_selected": "true", "required": "false", "translate": "false", "save_in_meta": "false", "save_in_meta_name": "", "placeholder": "", "characters_limit": "", "choices": [ { "label": "なし", "value": "none" }, { "label": "炭酸", "value": "bubbles" }, { "label": "鼓動", "value": "pulse" }, { "label": "キラリ", "value": "shine" }, { "label": "波紋", "value": "ripple" }, { "label": "震え", "value": "vibrate" }, { "label": "発光", "value": "glow" } ], "conditional_logic": [ [ { "control": "use_special_effect", "operator": "!=", "value": "1" } ] ] }, "control_c358554104": { "type": "select", "name": "btn_icon", "default": "", "label": "アイコン選択", "help": "なし / チェック / 矢印 / 外部リンク", "child_of": "", "placement": "inspector", "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_0eabcd49df": { "type": "panel", "name": "", "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": "", "endpoint": "false", "conditional_logic": [ [ { "control": "use_special_effect", "operator": "!=", "value": "1" } ] ] }, "control_66288646eb": { "type": "radio", "name": "btn_preset_color", "default": "blue", "label": "プリセットカラー", "help": "", "child_of": "", "placement": "inspector", "group": "settings", "width": "100", "hide_if_not_selected": "true", "required": "false", "translate": "false", "save_in_meta": "false", "save_in_meta_name": "", "placeholder": "", "characters_limit": "", "choices": [ { "label": "カスタムカラーを使用", "value": "custom" }, { "label": "ブルー", "value": "blue" }, { "label": "レッド", "value": "red" }, { "label": "グリーン", "value": "green" }, { "label": "オレンジ", "value": "orange" }, { "label": "パープル", "value": "purple" }, { "label": "ダークグレー", "value": "dark" } ], "conditional_logic": [ [ { "control": "use_special_effect", "operator": "!=", "value": "1" } ] ] }, "control_c07ac04322": { "type": "color", "name": "btn_color", "default": "#3b82f6", "label": "カスタムカラー", "help": "ボタンの基調色", "child_of": "", "placement": "inspector", "group": "settings", "width": "100", "hide_if_not_selected": "true", "required": "false", "translate": "false", "save_in_meta": "false", "save_in_meta_name": "", "placeholder": "", "characters_limit": "", "conditional_logic": [ [ { "control": "btn_preset_color", "operator": "==", "value": "custom" }, { "control": "use_special_effect", "operator": "!=", "value": "1" } ] ] }, "control_dbfa804a10": { "type": "toggle", "name": "btn_gradient", "default": "", "label": "グラデーションを適用", "help": "", "child_of": "", "placement": "inspector", "group": "settings", "width": "100", "hide_if_not_selected": "true", "required": "false", "translate": "false", "save_in_meta": "false", "save_in_meta_name": "", "placeholder": "", "characters_limit": "", "checked": "false", "conditional_logic": [ [ { "control": "use_special_effect", "operator": "!=", "value": "1" } ] ] }, "control_f14a73404d": { "type": "toggle", "name": "show_micro", "default": "", "label": "マイクロコピー表示", "help": "ONにすると入力項目が出現", "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_98188749a9": { "type": "text", "name": "micro_text", "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": "", "conditional_logic": [ [ { "control": "show_micro", "operator": "==", "value": "1" } ] ] }, "control_4198e84581": { "type": "select", "name": "micro_design", "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": "", "choices": [ { "label": "標準", "value": "default" }, { "label": "枠線のみ", "value": "line" }, { "label": "ダーク", "value": "dark" }, { "label": "アクセントカラー", "value": "accent" } ] }, "control_f95bba4a17": { "type": "radio", "name": "micro_ani", "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": "", "choices": [ { "label": "ふわふわ", "value": "float" }, { "label": "はねる", "value": "bound" }, { "label": "点滅", "value": "flash" }, { "label": "なし", "value": "none" } ] }, "control_9c2f1e5a70": { "type": "toggle", "name": "track_click", "default": "", "label": "クリックを計測する（GA4）", "help": "ONにすると、このボタンがクリックされた時にgtagイベント「cta_click_animebutton」を送信します", "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": "", "checked": "false", "alongside_text": "", "placeholder": "", "characters_limit": "" } }, "code": { "output_method": "html", "editor_html": "", "editor_callback": "", "frontend_html": "
\r\n \r\n {{#if show_micro}}\r\n {{#if micro_text}}\r\n
\r\n {{micro_text}}\r\n
\r\n {{/if}}\r\n {{/if}}\r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n
\r\n \r\n {{{btn_text}}}\r\n \r\n \r\n
\r\n
", "frontend_callback": "", "show_preview": "always", "single_output": true }, "style": { "block": "/* ===========================================\r\n Lazy Blocks Custom Button CSS (バグ修正・特殊8種完全版)\r\n=========================================== */\r\n\r\n/* 1. ベース・全体設定\r\n------------------------------------------- */\r\n.lb-btn-container { \r\n margin: 3.5em auto; text-align: center; width: 100%; font-family: sans-serif;\r\n --lb-btn-main: #3b82f6; \r\n}\r\n.lb-micro-copy-area { margin-bottom: 15px; }\r\n.lb-micro-bubble {\r\n display: inline-block; position: relative;\r\n font-size: 0.85em; font-weight: 700; padding: 4px 16px; border-radius: 50px;\r\n transition: all 0.3s ease;\r\n}\r\n.lb-micro-bubble::after { content: \"\"; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 7px solid transparent; }\r\n\r\n/* マイクロコピーデザイン */\r\n.lb-micro-design-default .lb-micro-bubble { background: #f3f4f6; color: #374151; }\r\n.lb-micro-design-default .lb-micro-bubble::after { border-top-color: #f3f4f6; }\r\n.lb-micro-design-line .lb-micro-bubble { background: #fff; color: #374151; border: 2px solid #e5e7eb; }\r\n.lb-micro-design-line .lb-micro-bubble::after { border-top-color: #e5e7eb; margin-top: 1px; }\r\n.lb-micro-design-dark .lb-micro-bubble { background: #1f2937; color: #fff; }\r\n.lb-micro-design-dark .lb-micro-bubble::after { border-top-color: #1f2937; }\r\n.lb-micro-design-accent .lb-micro-bubble { background: var(--lb-btn-main); color: #fff; }\r\n.lb-micro-design-accent .lb-micro-bubble::after { border-top-color: var(--lb-btn-main); }\r\n\r\n/* マイクロコピーアニメーション */\r\n.lb-micro-ani-float .lb-micro-bubble { animation: lb-micro-float 3s ease-in-out infinite; }\r\n.lb-micro-ani-bound .lb-micro-bubble { animation: lb-micro-bound 2s infinite; }\r\n.lb-micro-ani-flash .lb-micro-bubble { animation: lb-micro-flash 1.5s infinite; }\r\n@keyframes lb-micro-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }\r\n@keyframes lb-micro-bound { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-8px); } 60% { transform: translateY(-4px); } }\r\n@keyframes lb-micro-flash { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }\r\n\r\n/* 2. ボタン基本構造\r\n------------------------------------------- */\r\n.lb-actual-button {\r\n display: inline-flex; align-items: center; justify-content: center;\r\n width: 100%; max-width: 400px;\r\n padding: 1.25em 1.5em; font-size: 1.2em;\r\n text-decoration: none !important; font-weight: 800;\r\n color: #fff !important; \r\n background-color: var(--lb-btn-main); \r\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\r\n position: relative; z-index: 1; box-sizing: border-box;\r\n border-radius: 12px;\r\n}\r\n.lb-btn-label, .lb-btn-symbol { position: relative; z-index: 2; }\r\n.lb-internal-mask { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; z-index: 1; pointer-events: none; }\r\n\r\n/* サイズ設定 */\r\n.lb-size-sm .lb-actual-button { max-width: 280px; padding: 0.8em 1.2em; font-size: 0.95em; }\r\n.lb-size-lg .lb-actual-button { max-width: 500px; padding: 1.5em 2em; font-size: 1.4em; }\r\n.lb-size-xl .lb-actual-button { max-width: 600px; padding: 1.75em 2.5em; font-size: 1.6em; }\r\n\r\n/* 形状設定 */\r\n.lb-shape-rounded .lb-actual-button { border-radius: 12px !important; }\r\n.lb-shape-pill .lb-actual-button { border-radius: 100px !important; }\r\n.lb-shape-square .lb-actual-button { border-radius: 0 !important; }\r\n\r\n/* 3. デザインタイプ（光沢・立体・フラット）\r\n------------------------------------------- */\r\n.lb-type-glossy .lb-actual-button, .lb-type-standard .lb-actual-button {\r\n background-image: linear-gradient(to bottom, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.2) 48%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.1) 100%);\r\n box-shadow: inset 0 1px 1px rgba(255,255,255,0.8), 0 4px 10px rgba(0,0,0,0.1);\r\n border: 1px solid rgba(0,0,0,0.1);\r\n}\r\n.lb-shape-super-3d.lb-type-glossy .lb-actual-button, .lb-shape-super-3d.lb-type-standard .lb-actual-button { transform: translateY(-8px); box-shadow: inset 0 1px 1px rgba(255,255,255,0.8), 0 12px 25px rgba(0,0,0,0.2); }\r\n.lb-type-3d .lb-actual-button {\r\n background-image: linear-gradient(to bottom, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.15) 100%);\r\n box-shadow: 0 6px 0 rgba(0,0,0,0.2), inset 0 2px 3px rgba(255,255,255,0.4);\r\n transform: translateY(-3px);\r\n}\r\n.lb-type-3d .lb-actual-button:active { transform: translateY(3px); box-shadow: 0 0 0 rgba(0,0,0,0.2); }\r\n.lb-shape-super-3d.lb-type-3d .lb-actual-button { box-shadow: 0 14px 0 rgba(0,0,0,0.25), inset 0 2px 3px rgba(255,255,255,0.4); transform: translateY(-10px); }\r\n.lb-type-flat .lb-actual-button { background: transparent !important; border: 3px solid var(--lb-btn-main) !important; color: var(--lb-btn-main) !important; box-shadow: none; }\r\n.lb-shape-super-3d.lb-type-flat .lb-actual-button { background-color: var(--lb-btn-main) !important; border: none !important; color: #fff !important; box-shadow: 0 14px 0 rgba(0,0,0,0.2); transform: translateY(-10px); }\r\n.lb-type-flat-3d .lb-actual-button { box-shadow: 6px 6px 0 rgba(0,0,0,0.15); transform: translate(-3px, -3px); }\r\n.lb-shape-super-3d.lb-type-flat-3d .lb-actual-button { box-shadow: 12px 12px 0 rgba(0,0,0,0.15); transform: translate(-6px, -6px); }\r\n\r\n/* 4. カラー設定\r\n------------------------------------------- */\r\n.lb-preset-blue { --lb-btn-main: #3b82f6; }\r\n.lb-preset-red { --lb-btn-main: #ef4444; }\r\n.lb-preset-green { --lb-btn-main: #10b981; }\r\n.lb-preset-orange { --lb-btn-main: #f59e0b; }\r\n.lb-preset-purple { --lb-btn-main: #8b5cf6; }\r\n.lb-preset-dark { --lb-btn-main: #374151; }\r\n.lb-is-gradient .lb-actual-button { background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0%, rgba(0, 0, 0, 0.35) 100%) !important; }\r\n\r\n/* ===========================================\r\n ★ 特殊エフェクト集（最優先上書き）\r\n=========================================== */\r\n\r\n/* 🌈 レインボー (Rainbow) */\r\n.lb-special-rainbow .lb-actual-button {\r\n background-image: linear-gradient(115deg, #ff4b4b, #ff9000, #f6e000, #20d070, #0094ff, #8b5cf6, #ff4b4b) !important;\r\n background-size: 200% auto !important; animation: lb-rainbow-bg 3s linear infinite !important;\r\n border: none !important; color: #fff !important;\r\n}\r\n@keyframes lb-rainbow-bg { 0% { background-position: 0% center; } 100% { background-position: 200% center; } }\r\n\r\n/* 🔥 ガチ焚火 (Bonfire) */\r\n.lb-special-fire .lb-actual-button {\r\n background-color: #2a0800 !important; border: none !important; color: #fff !important; background-image: none !important;\r\n text-shadow: 0 2px 4px rgba(0,0,0,0.9), 0 0 12px rgba(255,160,0,0.9) !important;\r\n animation: lb-ember-pulse 1.5s ease-in-out infinite alternate !important;\r\n}\r\n.lb-special-fire .lb-internal-mask { mix-blend-mode: color-dodge; background: radial-gradient(ellipse at 50% 120%, #ff3a00 0%, transparent 70%); opacity: 0.9; }\r\n.lb-special-fire .lb-internal-mask::before {\r\n content: \"\"; position: absolute; inset: -20px; filter: blur(4px); animation: lb-flame-lick 1.2s ease-in infinite;\r\n background-image: radial-gradient(ellipse at 20% 90%, #ff5500 0%, transparent 30%), radial-gradient(ellipse at 50% 95%, #ff2200 0%, transparent 40%), radial-gradient(ellipse at 80% 90%, #ff7700 0%, transparent 30%);\r\n}\r\n.lb-special-fire .lb-internal-mask::after {\r\n content: \"\"; position: absolute; inset: -20px; filter: blur(2px); animation: lb-flame-lick 1s ease-in infinite 0.5s;\r\n background-image: radial-gradient(ellipse at 30% 95%, #ffcc00 0%, transparent 20%), radial-gradient(ellipse at 70% 95%, #ffffff 0%, transparent 15%);\r\n}\r\n@keyframes lb-ember-pulse { 0% { box-shadow: 0 5px 20px rgba(255, 30, 0, 0.4); } 100% { box-shadow: 0 8px 30px rgba(255, 80, 0, 0.7); } }\r\n@keyframes lb-flame-lick { 0% { transform: translateY(10px) scale(0.9); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(-40px) scale(1.1); opacity: 0; } }\r\n\r\n/* ☔️ ダウンロードの雨 (Download) */\r\n.lb-special-download .lb-actual-button { background: linear-gradient(135deg, #0284c7 0%, #2563eb 100%) !important; border: none !important; color: #fff !important; text-shadow: 0 2px 4px rgba(0,0,0,0.3); }\r\n.lb-special-download .lb-internal-mask::before, .lb-special-download .lb-internal-mask::after {\r\n content: \"\"; position: absolute; inset: -50px; background-repeat: repeat; pointer-events: none; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23ffffff' opacity='0.8' d='M23 10h6v12h6l-9 9-9-9h6z'/%3E%3Cpath fill='%23ffffff' opacity='0.6' d='M71 40h8v16h8l-12 12-12-12h8z'/%3E%3Cpath fill='%23ffffff' opacity='0.4' d='M32 70h4v8h4l-6 6-6-6h4z'/%3E%3Cpath fill='%23ffffff' opacity='0.2' d='M87 80h5v10h5l-7.5 7.5-7.5-7.5h5z'/%3E%3C/svg%3E\");\r\n}\r\n.lb-special-download .lb-internal-mask::before { background-size: 150px 150px; animation: lb-rain 3s linear infinite; opacity: 0.5; }\r\n.lb-special-download .lb-internal-mask::after { background-size: 220px 220px; background-position: 50px 0; animation: lb-rain-2 2s linear infinite; opacity: 0.9; }\r\n.lb-special-download .lb-actual-button:hover .lb-internal-mask::before { animation-duration: 1.2s; opacity: 0.7; }\r\n.lb-special-download .lb-actual-button:hover .lb-internal-mask::after { animation-duration: 0.8s; opacity: 1; }\r\n@keyframes lb-rain { 0% { background-position: 0px -150px; } 100% { background-position: 0px 0px; } }\r\n@keyframes lb-rain-2 { 0% { background-position: 50px -220px; } 100% { background-position: 50px 0px; } }\r\n\r\n/* 💻 サイバー (Cyber) */\r\n.lb-special-cyber .lb-actual-button { background: #000 !important; border: 1px solid #0f0 !important; color: #0f0 !important; text-shadow: 0 0 8px #0f0; font-family: monospace; }\r\n.lb-special-cyber .lb-internal-mask::before { content: \"\"; position: absolute; inset: 0; background: linear-gradient(rgba(0,255,0,0.1) 50%, transparent 50%); background-size: 100% 4px; animation: lb-cyber-scan 4s linear infinite; }\r\n.lb-special-cyber .lb-internal-mask::after { content: \"10101101001\"; position: absolute; top: -20px; left: 10%; color: #0f0; font-size: 10px; opacity: 0.4; animation: lb-cyber-code 2s linear infinite; }\r\n@keyframes lb-cyber-scan { 0% { background-position: 0 0; } 100% { background-position: 0 100%; } }\r\n@keyframes lb-cyber-code { 0% { transform: translateY(0); opacity: 0.5; } 100% { transform: translateY(100px); opacity: 0; } }\r\n\r\n/* 👑 プレミアムゴールド (Gold) */\r\n.lb-special-gold .lb-actual-button { background: linear-gradient(135deg, #bf953f 0%, #fcf6ba 25%, #b38728 50%, #fcf6ba 75%, #aa771c 100%) !important; background-size: 400% 400% !important; animation: lb-gold-shine 6s ease infinite !important; border: none !important; color: #6e4a00 !important; font-weight: 900 !important; box-shadow: 0 4px 15px rgba(184, 138, 0, 0.6) !important; }\r\n@keyframes lb-gold-shine { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }\r\n\r\n/* ⚠️ 警告トラテープ (Hazard) */\r\n.lb-special-hazard .lb-actual-button { background: repeating-linear-gradient(45deg, #facc15, #facc15 20px, #000 20px, #000 40px) !important; background-size: 200% 200% !important; animation: lb-hazard-move 2s linear infinite !important; border: 3px solid #000 !important; color: #fff !important; text-shadow: 2px 2px 0 #000; }\r\n@keyframes lb-hazard-move { 0% { background-position: 0 0; } 100% { background-position: 56px 0; } }\r\n\r\n/* ❄️ スピード・アイス (Ice) */\r\n.lb-special-ice .lb-actual-button { background: linear-gradient(135deg, #e0f2fe 0%, #7dd3fc 100%) !important; border: none !important; color: #0369a1 !important; box-shadow: 0 0 20px rgba(186, 230, 253, 0.8), inset 0 0 10px #fff !important; }\r\n.lb-special-ice .lb-internal-mask::before { content: \"\"; position: absolute; inset: 0; background: linear-gradient(to right, transparent, rgba(255,255,255,0.8), transparent); width: 20%; height: 100%; transform: skewX(-25deg); animation: lb-ice-wind 1.5s ease-in infinite; }\r\n@keyframes lb-ice-wind { 0% { left: -50%; opacity: 0; } 50% { opacity: 1; } 100% { left: 150%; opacity: 0; } }\r\n\r\n\r\n/* ===========================================\r\n 5. アイコン\r\n=========================================== */\r\n.lb-symbol-none { display: none !important; }\r\n.lb-btn-symbol { margin-left: 14px; width: 22px; height: 22px; flex-shrink: 0; }\r\n.lb-symbol-check::after { content: \"\"; position: absolute; width: 11px; height: 6px; border-left: 3.5px solid currentColor; border-bottom: 3.5px solid currentColor; transform: rotate(-45deg); top: 5px; left: 3px; }\r\n.lb-symbol-arrow::after { content: \"\"; position: absolute; width: 9px; height: 9px; border-top: 3.5px solid currentColor; border-right: 3.5px solid currentColor; transform: rotate(45deg); top: 6px; left: 5px; }\r\n\r\n\r\n/* ===========================================\r\n 6. 共通アニメーション演出 (FX)\r\n=========================================== */\r\n\r\n/* ★バグ修正箇所★：デフォルトでは炭酸を非表示にする */\r\n.lb-bubbles-layer { display: none; position: absolute; inset: 0; }\r\n.lb-fx-bubbles .lb-bubbles-layer { display: block; }\r\n\r\n.lb-bubbles-layer i { position: absolute; bottom: -20px; background-color: rgba(255, 255, 255, 0.7); border-radius: 50%; animation: lb-bubbles-rise linear infinite; display: block; }\r\n.lb-bubbles-layer i:nth-child(1) { width: 12px; height: 12px; left: 15%; animation-duration: 2.5s; }\r\n.lb-bubbles-layer i:nth-child(2) { width: 8px; height: 8px; left: 30%; animation-duration: 3.5s; animation-delay: 0.5s; }\r\n.lb-bubbles-layer i:nth-child(3) { width: 14px; height: 14px; left: 50%; animation-duration: 2s; animation-delay: 1.2s; }\r\n.lb-bubbles-layer i:nth-child(4) { width: 10px; height: 10px; left: 70%; animation-duration: 4s; animation-delay: 0.2s; }\r\n.lb-bubbles-layer i:nth-child(5) { width: 6px; height: 6px; left: 85%; animation-duration: 3s; animation-delay: 1.5s; }\r\n.lb-bubbles-layer i:nth-child(6) { width: 9px; height: 9px; left: 40%; animation-duration: 2.8s; animation-delay: 0.8s; }\r\n@keyframes lb-bubbles-rise { 0% { transform: translateY(0) scale(0.5); opacity: 0; } 20%, 80% { opacity: 1; } 100% { transform: translateY(-150px) scale(1.5); opacity: 0; } }\r\n\r\n/* 波紋 (Ripple) */\r\n.lb-fx-ripple::before { content: \"\"; position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--lb-btn-main); animation: lb-ripple-ani 2s cubic-bezier(0, 0.2, 0.8, 1) infinite; z-index: -1; pointer-events: none; }\r\n.lb-special-rainbow .lb-fx-ripple::before { border-color: #ff9000; }\r\n.lb-special-fire .lb-fx-ripple::before { border-color: #ff4500; }\r\n@keyframes lb-ripple-ani { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(1.4); opacity: 0; } }\r\n\r\n/* 自動キラリ (Shine) */\r\n.lb-fx-shine .lb-shine-layer::after { content: \"\"; position: absolute; top: 0; left: -150%; width: 60%; height: 100%; background: linear-gradient(to right, transparent, rgba(255,255,255,0.5), transparent); transform: skewX(-25deg); animation: lb-shine-auto 3.5s ease-in-out infinite; }\r\n@keyframes lb-shine-auto { 0% { left: -150%; } 20% { left: 150%; } 100% { left: 150%; } }\r\n\r\n/* 鼓動 (Pulse) */\r\n.lb-fx-pulse { animation: lb-pulse-ani 2s infinite; }\r\n@keyframes lb-pulse-ani { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }\r\n\r\n/* 振動 (Vibrate) */\r\n.lb-fx-vibrate { animation: lb-vibrate-ani 4s infinite; }\r\n@keyframes lb-vibrate-ani { 0%, 80%, 100% { transform: translateX(0); } 82%, 86%, 90%, 94%, 98% { transform: translateX(-3px); } 84%, 88%, 92%, 96% { transform: translateX(3px); } }\r\n\r\n/* 発光 (Glow) */\r\n.lb-fx-glow { animation: lb-glow-ani 2s infinite alternate; }\r\n@keyframes lb-glow-ani { 0% { box-shadow: 0 0 0px var(--lb-btn-main); } 100% { box-shadow: 0 0 15px var(--lb-btn-main), 0 0 30px var(--lb-btn-main); } }\r\n.lb-special-rainbow .lb-fx-glow { animation: lb-glow-rainbow 2s infinite alternate; }\r\n@keyframes lb-glow-rainbow { 0% { box-shadow: 0 0 0px #ff9000; } 100% { box-shadow: 0 0 15px #ff9000, 0 0 30px #ff9000; } }\r\n.lb-special-fire .lb-fx-glow { animation: none; } \r\n\r\n/* 7. レスポンシブ・安全対策\r\n------------------------------------------- */\r\n.lb-actual-button.lb-is-disabled { cursor: not-allowed !important; pointer-events: none !important; opacity: 0.6; }\r\n@media (max-width: 768px) { .lb-actual-button { width: 100%; max-width: 100% !important; } }", "editor": "" }, "script": { "view": "{{#if track_click}}\r\n(function () {\r\n var wrap = document.getElementById(\"lb-btn-{{blockId}}\");\r\n if (!wrap) return;\r\n var btn = wrap.querySelector(\".lb-actual-button\");\r\n if (!btn || btn.dataset.trackBound) return;\r\n btn.dataset.trackBound = \"true\";\r\n btn.addEventListener(\"click\", function () {\r\n if (typeof gtag === \"function\") {\r\n gtag('event', 'cta_click_animebutton');\r\n }\r\n });\r\n})();\r\n{{/if}}" }, "styles": [], "condition": [], "edit_url": null, "provide_context_to_blocks": "", "custom_context_slug": "", "allowed_blocks": "", "ancestor": "" } ]