[ { "id": 2501, "title": "料金表/月額年額対応_P-15", "icon": "", "keywords": [ "テーブル・データ表示", "料金表/月額年額対応" ], "slug": "lazyblock/pricing-table", "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_4359dc44fd": { "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": "" }, "control_93ab504cb9": { "type": "color", "name": "brand_color", "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_34dade4b30": { "type": "message", "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": "", "message_text": "料金表設定", "message_new_lines": "paragraphs" }, "control_733b634eff": { "type": "repeater", "name": "plans", "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_0d595c4b80": { "type": "text", "name": "plan_name", "default": "", "label": "プラン名", "help": "", "child_of": "control_733b634eff", "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_fecae34029": { "type": "select", "name": "plan_icon", "default": "", "label": "プランアイコン", "help": "", "child_of": "control_733b634eff", "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": "", "choices": [ { "label": "✦ きらめき (Free向き)", "value": "sparkles" }, { "label": "⚡ 稲妻 (Pro向き)", "value": "bolt" }, { "label": "◆ ダイヤ (Max向き)", "value": "diamond" }, { "label": "🚀 ロケット", "value": "rocket" }, { "label": "👑 王冠", "value": "crown" }, { "label": "★ 星", "value": "star" }, { "label": "🔥 炎", "value": "flame" }, { "label": "♥ ハート", "value": "heart" }, { "label": "🎁 ギフト", "value": "gift" }, { "label": "🏢 ビル", "value": "building" }, { "label": "● サークル", "value": "circle" } ] }, "control_5f0bf24ebd": { "type": "toggle", "name": "is_highlighted", "default": "", "label": "おすすめハイライト", "help": "ONにすると特別デザインになります", "child_of": "control_733b634eff", "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_54b9374e85": { "type": "text", "name": "badge_text", "default": "", "label": "バッジテキスト", "help": "例: 最も人気 （※ハイライトON時のみ表示推奨）", "child_of": "control_733b634eff", "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_216be249ee": { "type": "text", "name": "price", "default": "", "label": "【月額】金額", "help": "", "child_of": "control_733b634eff", "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_ef3bfc42cd": { "type": "text", "name": "period", "default": "", "label": "【月額】期間", "help": "", "child_of": "control_733b634eff", "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_66187a45ef": { "type": "toggle", "name": "has_annual", "default": "", "label": "年額の設定", "help": "", "child_of": "control_733b634eff", "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_1b884146dc": { "type": "text", "name": "price_annual", "default": "", "label": "【年額】金額", "help": "", "child_of": "control_733b634eff", "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": "", "conditional_logic": [ [ { "control": "plans.has_annual", "operator": "==", "value": "1" } ] ] }, "control_026b3d44a3": { "type": "text", "name": "period_annual", "default": "", "label": "【年額】期間", "help": "例）/年", "child_of": "control_733b634eff", "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": "", "conditional_logic": [ [ { "control": "plans.has_annual", "operator": "==", "value": "1" } ] ] }, "control_d8e9044d44": { "type": "text", "name": "toggle_text", "default": "", "label": "トグル横テキスト", "help": "トグルスイッチの左側に表示される訴求テキストです（例：年間契約で50%節約）。", "child_of": "control_733b634eff", "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": "", "conditional_logic": [ [ { "control": "plans.has_annual", "operator": "==", "value": "1" } ] ] }, "control_e0a9b449a7": { "type": "text", "name": "sub_price", "default": "", "label": "サブ価格", "help": "サブ価格 (例: US$995/年)", "child_of": "control_733b634eff", "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_3f2bdc4a78": { "type": "text", "name": "discount_text", "default": "", "label": "サブ価格_打消し線", "help": "（例）年間契約で17%節約 ※年額切替時のみ表示されます", "child_of": "control_733b634eff", "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_215b9649de": { "type": "text", "name": "button_text", "default": "", "label": "ボタンテキスト", "help": "", "child_of": "control_733b634eff", "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_276b2f470b": { "type": "url", "name": "button_url", "default": "", "label": "ボタンURL", "help": "", "child_of": "control_733b634eff", "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_eec82b4f42": { "type": "textarea", "name": "features_text", "default": "", "label": "機能リスト(改行区切り)", "help": "", "child_of": "control_733b634eff", "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": "\r\n
\r\n
料金表ブロックが設置されました
\r\n
右サイドバーの「プラン基本情報」の「＋追加」からプランを追加してください。メインカラーも変更できます。
\r\n
\r\n '',\r\n\t'bolt' => '',\r\n\t'diamond' => '',\r\n\t'rocket' => '',\r\n\t'crown' => '',\r\n\t'star' => '',\r\n\t'flame' => '',\r\n\t'heart' => '',\r\n\t'gift' => '',\r\n\t'building' => '',\r\n\t'circle' => '',\r\n);\r\n\r\n// プランのアイコンキーを安全に解決（未設定や不正値はsparklesにフォールバック）\r\n$lzb_get_icon = function( $key ) use ( $lzb_icons ) {\r\n\t$key = is_string( $key ) ? trim( $key ) : '';\r\n\treturn isset( $lzb_icons[ $key ] ) ? $lzb_icons[ $key ] : $lzb_icons['sparkles'];\r\n};\r\n\r\n// このブロック固有のIDを発番（複数設置時の競合防止）\r\n$lzb_uid = 'lzb-pt-' . substr( md5( uniqid( '', true ) ), 0, 8 );\r\n\r\n// 年額を持つプランが1つでもあるか判定（あればトグルUIを表示）\r\n$has_any_annual = false;\r\nforeach ( $attributes['plans'] as $plan ) {\r\n if ( ! empty( $plan['has_annual'] ) && $plan['has_annual'] ) {\r\n $has_any_annual = true;\r\n break;\r\n }\r\n}\r\n\r\n// トグル横テキスト（最初に設定されているものを採用）\r\n$toggle_label_monthly = '月額';\r\n$toggle_label_annual = '年額';\r\nforeach ( $attributes['plans'] as $plan ) {\r\n if ( ! empty( $plan['toggle_text'] ) ) {\r\n $toggle_label_annual = $plan['toggle_text'];\r\n break;\r\n }\r\n}\r\n?>\r\n\r\n
\" class=\"lzb-pricing-container\" style=\"--lzb-brand: ;\">\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 \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
>\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 \r\n \r\n \r\n \r\n \r\n \r\n
\r\n\r\n \r\n \" class=\"lzb-plan-button \">\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
", "frontend_callback": "", "show_preview": "always", "single_output": true }, "style": { "block": "/* =========================================================\r\n 料金表ブロック ─ プロ仕様スタイル\r\n ========================================================= */\r\n.lzb-pricing-container {\r\n /* メインカラーから派生色を自動生成 */\r\n --lzb-brand-light: color-mix(in srgb, var(--lzb-brand) 72%, white) !important;\r\n --lzb-brand-dark: color-mix(in srgb, var(--lzb-brand) 88%, black) !important;\r\n --lzb-brand-tint: color-mix(in srgb, var(--lzb-brand) 8%, white) !important;\r\n --lzb-ink: #0f172a !important;\r\n --lzb-muted: #64748b !important;\r\n --lzb-line: #eef0f4 !important;\r\n --lzb-radius: 24px !important;\r\n box-sizing: border-box !important;\r\n width: 100% !important;\r\n margin: 0 auto !important;\r\n padding: 8px 0 !important;\r\n font-family: -apple-system, BlinkMacSystemFont, \"Helvetica Neue\", \"Segoe UI\", \"Hiragino Sans\", \"Noto Sans JP\", Roboto, Arial, sans-serif !important;\r\n -webkit-font-smoothing: antialiased !important;\r\n}\r\n.lzb-pricing-container *,\r\n.lzb-pricing-container *::before,\r\n.lzb-pricing-container *::after { box-sizing: border-box !important; }\r\n\r\n/* ---- 月額 / 年額 切替スイッチ（中央集約・1つだけ） ---- */\r\n.lzb-billing-switch {\r\n position: relative !important;\r\n display: inline-flex !important;\r\n align-items: center !important;\r\n gap: 0 !important;\r\n margin: 4px auto 40px auto !important;\r\n padding: 5px !important;\r\n background: #f1f3f7 !important;\r\n border-radius: 999px !important;\r\n width: max-content !important;\r\n max-width: 100% !important;\r\n box-shadow: inset 0 0 0 1px rgba(15,23,42,0.04) !important;\r\n cursor: pointer !important;\r\n}\r\n/* 中央寄せ：コンテナを text-align:center にし、switch を inline-flex で中央配置 */\r\n.lzb-pricing-container { text-align: center !important; }\r\n.lzb-billing-switch { margin-left: auto !important; margin-right: auto !important; }\r\n\r\n.lzb-billing-option {\r\n position: relative !important;\r\n z-index: 2 !important;\r\n border: none !important;\r\n background: transparent !important;\r\n cursor: pointer !important;\r\n padding: 9px 26px !important;\r\n font-size: 14px !important;\r\n font-weight: 700 !important;\r\n color: var(--lzb-muted) !important;\r\n border-radius: 999px !important;\r\n transition: color 0.3s ease !important;\r\n white-space: nowrap !important;\r\n font-family: inherit !important;\r\n line-height: 1 !important;\r\n}\r\n.lzb-billing-option.is-active { color: var(--lzb-brand-dark) !important; }\r\n.lzb-billing-indicator {\r\n position: absolute !important;\r\n z-index: 1 !important;\r\n top: 5px !important;\r\n bottom: 5px !important;\r\n left: 5px !important;\r\n width: calc(50% - 5px) !important;\r\n background: #ffffff !important;\r\n border-radius: 999px !important;\r\n box-shadow: 0 2px 8px rgba(15,23,42,0.10), 0 0 0 1px rgba(15,23,42,0.03) !important;\r\n transition: transform 0.45s cubic-bezier(0.16,1,0.3,1) !important;\r\n}\r\n.lzb-pricing-container.is-annual-active .lzb-billing-indicator { transform: translateX(100%) !important; }\r\n.lzb-billing-switch:focus-visible { outline: 2px solid var(--lzb-brand) !important; outline-offset: 3px !important; }\r\n.lzb-billing-switch:hover .lzb-billing-option:not(.is-active) { color: var(--lzb-brand-dark) !important; opacity: 0.7 !important; }\r\n\r\n/* ---- カードレイアウト ---- */\r\n.lzb-pricing-wrapper {\r\n display: grid !important;\r\n grid-template-columns: 1fr !important;\r\n gap: 20px !important;\r\n width: 100% !important;\r\n margin: 0 auto !important;\r\n padding: 4px 0 8px 0 !important;\r\n text-align: left !important;\r\n align-items: stretch !important;\r\n}\r\n\r\n/* ---- カード本体 ---- */\r\n.lzb-pricing-card {\r\n position: relative !important;\r\n display: flex !important;\r\n flex-direction: column !important;\r\n background: #ffffff !important;\r\n border: 1px solid var(--lzb-line) !important;\r\n border-radius: var(--lzb-radius) !important;\r\n padding: 36px 26px 32px !important;\r\n box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 8px 24px -16px rgba(15,23,42,0.10) !important;\r\n transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), box-shadow 0.4s cubic-bezier(0.16,1,0.3,1) !important;\r\n}\r\n.lzb-pricing-card:hover {\r\n transform: translateY(-6px) !important;\r\n box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 24px 48px -24px rgba(15,23,42,0.22) !important;\r\n}\r\n\r\n/* ---- おすすめハイライト ---- */\r\n.lzb-pricing-card.is-highlighted {\r\n border: 1.5px solid transparent !important;\r\n background:\r\n linear-gradient(#ffffff, #ffffff) padding-box,\r\n linear-gradient(150deg, var(--lzb-brand-light), var(--lzb-brand)) border-box !important;\r\n box-shadow: 0 12px 40px -16px color-mix(in srgb, var(--lzb-brand) 55%, transparent), 0 2px 8px rgba(15,23,42,0.06) !important;\r\n}\r\n.lzb-pricing-card.is-highlighted:hover {\r\n transform: translateY(-8px) !important;\r\n box-shadow: 0 28px 56px -20px color-mix(in srgb, var(--lzb-brand) 60%, transparent), 0 2px 8px rgba(15,23,42,0.06) !important;\r\n}\r\n\r\n/* ---- バッジ（カード上辺中央） ---- */\r\n.lzb-pricing-badge {\r\n position: absolute !important;\r\n top: 0 !important;\r\n left: 50% !important;\r\n transform: translate(-50%, -50%) !important;\r\n display: inline-flex !important;\r\n align-items: center !important;\r\n gap: 6px !important;\r\n background: linear-gradient(135deg, var(--lzb-brand-light), var(--lzb-brand)) !important;\r\n color: #ffffff !important;\r\n font-size: 12px !important;\r\n font-weight: 800 !important;\r\n letter-spacing: 0.02em !important;\r\n padding: 7px 16px !important;\r\n border-radius: 999px !important;\r\n white-space: nowrap !important;\r\n line-height: 1 !important;\r\n box-shadow: 0 6px 16px -4px color-mix(in srgb, var(--lzb-brand) 60%, transparent) !important;\r\n}\r\n.lzb-pricing-badge svg { width: 13px !important; height: 13px !important; flex-shrink: 0 !important; }\r\n\r\n/* ---- ヘッダー ---- */\r\n.lzb-plan-header {\r\n display: flex !important;\r\n align-items: center !important;\r\n gap: 8px !important;\r\n margin-bottom: 18px !important;\r\n}\r\n.lzb-plan-icon {\r\n display: inline-flex !important;\r\n align-items: center !important;\r\n justify-content: center !important;\r\n width: 34px !important; height: 34px !important;\r\n border-radius: 10px !important;\r\n background: var(--lzb-brand-tint) !important;\r\n color: var(--lzb-brand) !important;\r\n flex-shrink: 0 !important;\r\n}\r\n.lzb-plan-icon svg { width: 20px !important; height: 20px !important; display: block !important; }\r\n.lzb-plan-name {\r\n font-size: 19px !important;\r\n font-weight: 800 !important;\r\n color: var(--lzb-ink) !important;\r\n letter-spacing: -0.01em !important;\r\n line-height: 1.2 !important;\r\n}\r\n\r\n/* ---- 価格 ---- */\r\n.lzb-plan-price-wrap { min-height: 48px !important; margin-bottom: 6px !important; }\r\n.lzb-price-group { display: flex !important; align-items: baseline !important; gap: 4px !important; }\r\n.lzb-price-annual { display: none !important; }\r\n.lzb-pricing-container.is-annual-active .lzb-price-monthly { display: none !important; }\r\n.lzb-pricing-container.is-annual-active .lzb-price-annual { display: flex !important; animation: lzbFadeIn 0.35s ease !important; }\r\n.lzb-price-amount {\r\n font-size: clamp(34px, 9vw, 44px) !important;\r\n font-weight: 800 !important;\r\n color: var(--lzb-ink) !important;\r\n letter-spacing: -0.035em !important;\r\n font-variant-numeric: tabular-nums !important;\r\n line-height: 1 !important;\r\n}\r\n.lzb-price-period { font-size: 14px !important; color: var(--lzb-muted) !important; font-weight: 600 !important; }\r\n\r\n/* ---- サブ価格 / 打消し（高さ固定で全カードのボタン位置を揃える） ---- */\r\n.lzb-sub-price-wrap {\r\n display: flex !important;\r\n flex-direction: column !important;\r\n align-items: flex-start !important;\r\n gap: 2px !important;\r\n min-height: 44px !important;\r\n margin-bottom: 4px !important;\r\n justify-content: flex-start !important;\r\n}\r\n.lzb-sub-price { font-size: 13px !important; color: var(--lzb-muted) !important; font-weight: 500 !important; line-height: 1.4 !important; }\r\n.lzb-sub-price-strike { font-size: 13px !important; color: #b0b7c3 !important; text-decoration: line-through !important; line-height: 1.4 !important; }\r\n\r\n/* 年額用サブ価格・打消し線は、年額トグルON時のみ表示（月額時は隠す） */\r\n.lzb-sub-price-wrap.is-annual-only > .lzb-sub-price,\r\n.lzb-sub-price-wrap.is-annual-only > .lzb-sub-price-strike {\r\n display: none !important;\r\n}\r\n.lzb-pricing-container.is-annual-active .lzb-sub-price-wrap.is-annual-only > .lzb-sub-price,\r\n.lzb-pricing-container.is-annual-active .lzb-sub-price-wrap.is-annual-only > .lzb-sub-price-strike {\r\n display: inline !important;\r\n animation: lzbFadeIn 0.35s ease !important;\r\n}\r\n\r\n/* ---- ボタン（高さ固定：2行でも崩れず機能リスト開始位置を揃える） ---- */\r\n.lzb-plan-button {\r\n display: flex !important;\r\n align-items: center !important;\r\n justify-content: center !important;\r\n text-align: center !important;\r\n width: 100% !important;\r\n box-sizing: border-box !important;\r\n min-height: 54px !important;\r\n padding: 12px 16px !important;\r\n border-radius: 12px !important;\r\n font-size: 14.5px !important;\r\n font-weight: 700 !important;\r\n text-decoration: none !important;\r\n line-height: 1.35 !important;\r\n white-space: normal !important;\r\n word-break: keep-all !important;\r\n overflow-wrap: anywhere !important;\r\n transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease !important;\r\n}\r\n.btn-secondary { background: #f3f4f7 !important; color: var(--lzb-ink) !important; }\r\n.btn-secondary:hover { background: #e9ebf0 !important; transform: translateY(-2px) !important; }\r\n.btn-primary {\r\n background: linear-gradient(180deg, var(--lzb-brand-light), var(--lzb-brand)) !important;\r\n color: #ffffff !important;\r\n box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--lzb-brand) 70%, transparent) !important;\r\n}\r\n.btn-primary:hover { transform: translateY(-2px) !important; box-shadow: 0 14px 28px -10px color-mix(in srgb, var(--lzb-brand) 75%, transparent) !important; }\r\n.lzb-plan-button-space { height: 54px !important; }\r\n\r\n/* ---- 区切り線 ---- */\r\n.lzb-plan-divider {\r\n height: 1px !important;\r\n background: linear-gradient(90deg, transparent, var(--lzb-line) 20%, var(--lzb-line) 80%, transparent) !important;\r\n margin: 26px 0 !important;\r\n}\r\n\r\n/* ---- 機能リスト ---- */\r\n.lzb-plan-features { list-style: none !important; padding: 0 !important; margin: 0 !important; flex-grow: 1 !important; }\r\n.lzb-plan-features li {\r\n display: flex !important;\r\n align-items: flex-start !important;\r\n gap: 11px !important;\r\n font-size: 14px !important;\r\n color: #475569 !important;\r\n line-height: 1.6 !important;\r\n overflow-wrap: break-word !important;\r\n word-break: normal !important;\r\n padding-bottom: 13px !important;\r\n margin-bottom: 13px !important;\r\n border-bottom: 1px solid rgba(15,23,42,0.05) !important;\r\n}\r\n.lzb-plan-features li:last-child { padding-bottom: 0 !important; margin-bottom: 0 !important; border-bottom: none !important; }\r\n.lzb-feature-icon { flex-shrink: 0 !important; width: 20px !important; height: 20px !important; color: var(--lzb-brand) !important; margin-top: 1px !important; }\r\n.lzb-feature-icon svg { width: 100% !important; height: 100% !important; fill: currentColor !important; }\r\n.lzb-feature-text { flex-grow: 1 !important; }\r\n\r\n@keyframes lzbFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }\r\n\r\n/* =========================================================\r\n レスポンシブ\r\n ========================================================= */\r\n/* タブレット：基本2カラム。1プランなら中央1カラム */\r\n@media (min-width: 600px) and (max-width: 919px) {\r\n .lzb-pricing-wrapper { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; max-width: 720px !important; }\r\n .lzb-pricing-wrapper:not(:has(.lzb-pricing-card:nth-child(2))) {\r\n grid-template-columns: minmax(0, 360px) !important;\r\n max-width: 360px !important;\r\n }\r\n}\r\n/* PC：プラン数に応じてカラム数を自動調整。常に中央寄せで余白を均等に */\r\n@media (min-width: 920px) {\r\n .lzb-pricing-wrapper {\r\n grid-template-columns: repeat(3, minmax(0, 320px)) !important;\r\n justify-content: center !important;\r\n max-width: none !important;\r\n gap: 24px !important;\r\n }\r\n .lzb-pricing-card { padding: 40px 30px 36px !important; }\r\n .lzb-plan-name { font-size: 20px !important; }\r\n\r\n /* プラン1つ：1カラム */\r\n .lzb-pricing-wrapper:not(:has(.lzb-pricing-card:nth-child(2))) {\r\n grid-template-columns: minmax(0, 360px) !important;\r\n }\r\n /* プラン2つ：2カラム（右の空き列をなくす） */\r\n .lzb-pricing-wrapper:has(.lzb-pricing-card:nth-child(2)):not(:has(.lzb-pricing-card:nth-child(3))) {\r\n grid-template-columns: repeat(2, minmax(0, 340px)) !important;\r\n }\r\n /* プラン3つ：3カラム（既定） */\r\n /* プラン4つ以上：自動折返し */\r\n .lzb-pricing-wrapper:has(.lzb-pricing-card:nth-child(4)) {\r\n grid-template-columns: repeat(auto-fit, minmax(260px, 300px)) !important;\r\n }\r\n}", "editor": "/* エディタ用プレースホルダー */\r\n.lzb-pricing-editor-placeholder { display: none; }\r\n.editor-styles-wrapper .lzb-pricing-editor-placeholder,\r\nbody.wp-admin .lzb-pricing-editor-placeholder {\r\n display: block; background: #faf8ff; border: 2px dashed #ddd2f7;\r\n border-radius: 18px; padding: 40px 24px; text-align: center; box-sizing: border-box;\r\n margin: 16px 0; font-family: system-ui, -apple-system, sans-serif;\r\n}\r\n.lzb-placeholder-title { font-size: 16px; font-weight: 700; color: #1f2937; margin-bottom: 8px; }\r\n.lzb-placeholder-desc { font-size: 13px; color: #6b7280; line-height: 1.7; max-width: 460px; margin: 0 auto; }\r\n.lzb-placeholder-desc strong { color: #7c3aed; }\r\n\r\n/* =========================================================\r\n 料金表ブロック ─ プロ仕様スタイル\r\n ========================================================= */\r\n.lzb-pricing-container {\r\n /* メインカラーから派生色を自動生成 */\r\n --lzb-brand-light: color-mix(in srgb, var(--lzb-brand) 72%, white) !important;\r\n --lzb-brand-dark: color-mix(in srgb, var(--lzb-brand) 88%, black) !important;\r\n --lzb-brand-tint: color-mix(in srgb, var(--lzb-brand) 8%, white) !important;\r\n --lzb-ink: #0f172a !important;\r\n --lzb-muted: #64748b !important;\r\n --lzb-line: #eef0f4 !important;\r\n --lzb-radius: 24px !important;\r\n box-sizing: border-box !important;\r\n width: 100% !important;\r\n margin: 0 auto !important;\r\n padding: 8px 0 !important;\r\n font-family: -apple-system, BlinkMacSystemFont, \"Helvetica Neue\", \"Segoe UI\", \"Hiragino Sans\", \"Noto Sans JP\", Roboto, Arial, sans-serif !important;\r\n -webkit-font-smoothing: antialiased !important;\r\n}\r\n.lzb-pricing-container *,\r\n.lzb-pricing-container *::before,\r\n.lzb-pricing-container *::after { box-sizing: border-box !important; }\r\n\r\n/* ---- 月額 / 年額 切替スイッチ（中央集約・1つだけ） ---- */\r\n.lzb-billing-switch {\r\n position: relative !important;\r\n display: inline-flex !important;\r\n align-items: center !important;\r\n gap: 0 !important;\r\n margin: 4px auto 40px auto !important;\r\n padding: 5px !important;\r\n background: #f1f3f7 !important;\r\n border-radius: 999px !important;\r\n width: max-content !important;\r\n max-width: 100% !important;\r\n box-shadow: inset 0 0 0 1px rgba(15,23,42,0.04) !important;\r\n cursor: pointer !important;\r\n}\r\n/* 中央寄せ：コンテナを text-align:center にし、switch を inline-flex で中央配置 */\r\n.lzb-pricing-container { text-align: center !important; }\r\n.lzb-billing-switch { margin-left: auto !important; margin-right: auto !important; }\r\n\r\n.lzb-billing-option {\r\n position: relative !important;\r\n z-index: 2 !important;\r\n border: none !important;\r\n background: transparent !important;\r\n cursor: pointer !important;\r\n padding: 9px 26px !important;\r\n font-size: 14px !important;\r\n font-weight: 700 !important;\r\n color: var(--lzb-muted) !important;\r\n border-radius: 999px !important;\r\n transition: color 0.3s ease !important;\r\n white-space: nowrap !important;\r\n font-family: inherit !important;\r\n line-height: 1 !important;\r\n}\r\n.lzb-billing-option.is-active { color: var(--lzb-brand-dark) !important; }\r\n.lzb-billing-indicator {\r\n position: absolute !important;\r\n z-index: 1 !important;\r\n top: 5px !important;\r\n bottom: 5px !important;\r\n left: 5px !important;\r\n width: calc(50% - 5px) !important;\r\n background: #ffffff !important;\r\n border-radius: 999px !important;\r\n box-shadow: 0 2px 8px rgba(15,23,42,0.10), 0 0 0 1px rgba(15,23,42,0.03) !important;\r\n transition: transform 0.45s cubic-bezier(0.16,1,0.3,1) !important;\r\n}\r\n.lzb-pricing-container.is-annual-active .lzb-billing-indicator { transform: translateX(100%) !important; }\r\n.lzb-billing-switch:focus-visible { outline: 2px solid var(--lzb-brand) !important; outline-offset: 3px !important; }\r\n.lzb-billing-switch:hover .lzb-billing-option:not(.is-active) { color: var(--lzb-brand-dark) !important; opacity: 0.7 !important; }\r\n\r\n/* ---- カードレイアウト ---- */\r\n.lzb-pricing-wrapper {\r\n display: grid !important;\r\n grid-template-columns: 1fr !important;\r\n gap: 20px !important;\r\n width: 100% !important;\r\n margin: 0 auto !important;\r\n padding: 4px 0 8px 0 !important;\r\n text-align: left !important;\r\n align-items: stretch !important;\r\n}\r\n\r\n/* ---- カード本体 ---- */\r\n.lzb-pricing-card {\r\n position: relative !important;\r\n display: flex !important;\r\n flex-direction: column !important;\r\n background: #ffffff !important;\r\n border: 1px solid var(--lzb-line) !important;\r\n border-radius: var(--lzb-radius) !important;\r\n padding: 36px 26px 32px !important;\r\n box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 8px 24px -16px rgba(15,23,42,0.10) !important;\r\n transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), box-shadow 0.4s cubic-bezier(0.16,1,0.3,1) !important;\r\n}\r\n.lzb-pricing-card:hover {\r\n transform: translateY(-6px) !important;\r\n box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 24px 48px -24px rgba(15,23,42,0.22) !important;\r\n}\r\n\r\n/* ---- おすすめハイライト ---- */\r\n.lzb-pricing-card.is-highlighted {\r\n border: 1.5px solid transparent !important;\r\n background:\r\n linear-gradient(#ffffff, #ffffff) padding-box,\r\n linear-gradient(150deg, var(--lzb-brand-light), var(--lzb-brand)) border-box !important;\r\n box-shadow: 0 12px 40px -16px color-mix(in srgb, var(--lzb-brand) 55%, transparent), 0 2px 8px rgba(15,23,42,0.06) !important;\r\n}\r\n.lzb-pricing-card.is-highlighted:hover {\r\n transform: translateY(-8px) !important;\r\n box-shadow: 0 28px 56px -20px color-mix(in srgb, var(--lzb-brand) 60%, transparent), 0 2px 8px rgba(15,23,42,0.06) !important;\r\n}\r\n\r\n/* ---- バッジ（カード上辺中央） ---- */\r\n.lzb-pricing-badge {\r\n position: absolute !important;\r\n top: 0 !important;\r\n left: 50% !important;\r\n transform: translate(-50%, -50%) !important;\r\n display: inline-flex !important;\r\n align-items: center !important;\r\n gap: 6px !important;\r\n background: linear-gradient(135deg, var(--lzb-brand-light), var(--lzb-brand)) !important;\r\n color: #ffffff !important;\r\n font-size: 12px !important;\r\n font-weight: 800 !important;\r\n letter-spacing: 0.02em !important;\r\n padding: 7px 16px !important;\r\n border-radius: 999px !important;\r\n white-space: nowrap !important;\r\n line-height: 1 !important;\r\n box-shadow: 0 6px 16px -4px color-mix(in srgb, var(--lzb-brand) 60%, transparent) !important;\r\n}\r\n.lzb-pricing-badge svg { width: 13px !important; height: 13px !important; flex-shrink: 0 !important; }\r\n\r\n/* ---- ヘッダー ---- */\r\n.lzb-plan-header {\r\n display: flex !important;\r\n align-items: center !important;\r\n gap: 8px !important;\r\n margin-bottom: 18px !important;\r\n}\r\n.lzb-plan-icon {\r\n display: inline-flex !important;\r\n align-items: center !important;\r\n justify-content: center !important;\r\n width: 34px !important; height: 34px !important;\r\n border-radius: 10px !important;\r\n background: var(--lzb-brand-tint) !important;\r\n color: var(--lzb-brand) !important;\r\n flex-shrink: 0 !important;\r\n}\r\n.lzb-plan-icon svg { width: 20px !important; height: 20px !important; display: block !important; }\r\n.lzb-plan-name {\r\n font-size: 19px !important;\r\n font-weight: 800 !important;\r\n color: var(--lzb-ink) !important;\r\n letter-spacing: -0.01em !important;\r\n line-height: 1.2 !important;\r\n}\r\n\r\n/* ---- 価格 ---- */\r\n.lzb-plan-price-wrap { min-height: 48px !important; margin-bottom: 6px !important; }\r\n.lzb-price-group { display: flex !important; align-items: baseline !important; gap: 4px !important; }\r\n.lzb-price-annual { display: none !important; }\r\n.lzb-pricing-container.is-annual-active .lzb-price-monthly { display: none !important; }\r\n.lzb-pricing-container.is-annual-active .lzb-price-annual { display: flex !important; animation: lzbFadeIn 0.35s ease !important; }\r\n.lzb-price-amount {\r\n font-size: clamp(34px, 9vw, 44px) !important;\r\n font-weight: 800 !important;\r\n color: var(--lzb-ink) !important;\r\n letter-spacing: -0.035em !important;\r\n font-variant-numeric: tabular-nums !important;\r\n line-height: 1 !important;\r\n}\r\n.lzb-price-period { font-size: 14px !important; color: var(--lzb-muted) !important; font-weight: 600 !important; }\r\n\r\n/* ---- サブ価格 / 打消し（高さ固定で全カードのボタン位置を揃える） ---- */\r\n.lzb-sub-price-wrap {\r\n display: flex !important;\r\n flex-direction: column !important;\r\n align-items: flex-start !important;\r\n gap: 2px !important;\r\n min-height: 44px !important;\r\n margin-bottom: 4px !important;\r\n justify-content: flex-start !important;\r\n}\r\n.lzb-sub-price { font-size: 13px !important; color: var(--lzb-muted) !important; font-weight: 500 !important; line-height: 1.4 !important; }\r\n.lzb-sub-price-strike { font-size: 13px !important; color: #b0b7c3 !important; text-decoration: line-through !important; line-height: 1.4 !important; }\r\n\r\n/* 年額用サブ価格・打消し線は、年額トグルON時のみ表示（月額時は隠す） */\r\n.lzb-sub-price-wrap.is-annual-only > .lzb-sub-price,\r\n.lzb-sub-price-wrap.is-annual-only > .lzb-sub-price-strike {\r\n display: none !important;\r\n}\r\n.lzb-pricing-container.is-annual-active .lzb-sub-price-wrap.is-annual-only > .lzb-sub-price,\r\n.lzb-pricing-container.is-annual-active .lzb-sub-price-wrap.is-annual-only > .lzb-sub-price-strike {\r\n display: inline !important;\r\n animation: lzbFadeIn 0.35s ease !important;\r\n}\r\n\r\n/* ---- ボタン（高さ固定：2行でも崩れず機能リスト開始位置を揃える） ---- */\r\n.lzb-plan-button {\r\n display: flex !important;\r\n align-items: center !important;\r\n justify-content: center !important;\r\n text-align: center !important;\r\n width: 100% !important;\r\n box-sizing: border-box !important;\r\n min-height: 54px !important;\r\n padding: 12px 16px !important;\r\n border-radius: 12px !important;\r\n font-size: 14.5px !important;\r\n font-weight: 700 !important;\r\n text-decoration: none !important;\r\n line-height: 1.35 !important;\r\n white-space: normal !important;\r\n word-break: keep-all !important;\r\n overflow-wrap: anywhere !important;\r\n transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease !important;\r\n}\r\n.btn-secondary { background: #f3f4f7 !important; color: var(--lzb-ink) !important; }\r\n.btn-secondary:hover { background: #e9ebf0 !important; transform: translateY(-2px) !important; }\r\n.btn-primary {\r\n background: linear-gradient(180deg, var(--lzb-brand-light), var(--lzb-brand)) !important;\r\n color: #ffffff !important;\r\n box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--lzb-brand) 70%, transparent) !important;\r\n}\r\n.btn-primary:hover { transform: translateY(-2px) !important; box-shadow: 0 14px 28px -10px color-mix(in srgb, var(--lzb-brand) 75%, transparent) !important; }\r\n.lzb-plan-button-space { height: 54px !important; }\r\n\r\n/* ---- 区切り線 ---- */\r\n.lzb-plan-divider {\r\n height: 1px !important;\r\n background: linear-gradient(90deg, transparent, var(--lzb-line) 20%, var(--lzb-line) 80%, transparent) !important;\r\n margin: 26px 0 !important;\r\n}\r\n\r\n/* ---- 機能リスト ---- */\r\n.lzb-plan-features { list-style: none !important; padding: 0 !important; margin: 0 !important; flex-grow: 1 !important; }\r\n.lzb-plan-features li {\r\n display: flex !important;\r\n align-items: flex-start !important;\r\n gap: 11px !important;\r\n font-size: 14px !important;\r\n color: #475569 !important;\r\n line-height: 1.6 !important;\r\n overflow-wrap: break-word !important;\r\n word-break: normal !important;\r\n padding-bottom: 13px !important;\r\n margin-bottom: 13px !important;\r\n border-bottom: 1px solid rgba(15,23,42,0.05) !important;\r\n}\r\n.lzb-plan-features li:last-child { padding-bottom: 0 !important; margin-bottom: 0 !important; border-bottom: none !important; }\r\n.lzb-feature-icon { flex-shrink: 0 !important; width: 20px !important; height: 20px !important; color: var(--lzb-brand) !important; margin-top: 1px !important; }\r\n.lzb-feature-icon svg { width: 100% !important; height: 100% !important; fill: currentColor !important; }\r\n.lzb-feature-text { flex-grow: 1 !important; }\r\n\r\n@keyframes lzbFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }\r\n\r\n/* =========================================================\r\n レスポンシブ\r\n ========================================================= */\r\n/* タブレット：基本2カラム。1プランなら中央1カラム */\r\n@media (min-width: 600px) and (max-width: 919px) {\r\n .lzb-pricing-wrapper { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; max-width: 720px !important; }\r\n .lzb-pricing-wrapper:not(:has(.lzb-pricing-card:nth-child(2))) {\r\n grid-template-columns: minmax(0, 360px) !important;\r\n max-width: 360px !important;\r\n }\r\n}\r\n/* PC：プラン数に応じてカラム数を自動調整。常に中央寄せで余白を均等に */\r\n@media (min-width: 920px) {\r\n .lzb-pricing-wrapper {\r\n grid-template-columns: repeat(3, minmax(0, 320px)) !important;\r\n justify-content: center !important;\r\n max-width: none !important;\r\n gap: 24px !important;\r\n }\r\n .lzb-pricing-card { padding: 40px 30px 36px !important; }\r\n .lzb-plan-name { font-size: 20px !important; }\r\n\r\n /* プラン1つ：1カラム */\r\n .lzb-pricing-wrapper:not(:has(.lzb-pricing-card:nth-child(2))) {\r\n grid-template-columns: minmax(0, 360px) !important;\r\n }\r\n /* プラン2つ：2カラム（右の空き列をなくす） */\r\n .lzb-pricing-wrapper:has(.lzb-pricing-card:nth-child(2)):not(:has(.lzb-pricing-card:nth-child(3))) {\r\n grid-template-columns: repeat(2, minmax(0, 340px)) !important;\r\n }\r\n /* プラン3つ：3カラム（既定） */\r\n /* プラン4つ以上：自動折返し */\r\n .lzb-pricing-wrapper:has(.lzb-pricing-card:nth-child(4)) {\r\n grid-template-columns: repeat(auto-fit, minmax(260px, 300px)) !important;\r\n }\r\n}" }, "script": { "view": "document.addEventListener('DOMContentLoaded', function () {\r\n var containers = document.querySelectorAll('.lzb-pricing-container');\r\n var easeOutQuart = function (t) { return 1 - Math.pow(1 - t, 4); };\r\n\r\n // \"¥1,200/月\" のような文字列を 接頭辞・数値・接尾辞・小数桁 に分解\r\n var parsePrice = function (str) {\r\n if (!str) return null;\r\n var match = str.match(/^([^0-9]*)([0-9,\\.]+)([^0-9]*)$/);\r\n if (!match) return null;\r\n var numStr = match[2].replace(/,/g, '');\r\n var decimals = numStr.indexOf('.') !== -1 ? numStr.split('.')[1].length : 0;\r\n return { prefix: match[1], val: parseFloat(numStr), suffix: match[3], decimals: decimals };\r\n };\r\n\r\n var formatNumber = function (num, decimals) {\r\n return num.toLocaleString('en-US', {\r\n minimumFractionDigits: decimals,\r\n maximumFractionDigits: decimals\r\n });\r\n };\r\n\r\n containers.forEach(function (container) {\r\n var options = container.querySelectorAll('.lzb-billing-option');\r\n if (options.length === 0) return;\r\n\r\n var cards = container.querySelectorAll('.lzb-pricing-card');\r\n\r\n // 数値カウントアップ演出（年額のみを持つカードに対して）\r\n var animateCard = function (card, toAnnual) {\r\n var monthlyAmt = card.querySelector('.lzb-price-monthly .lzb-price-amount');\r\n var annualAmt = card.querySelector('.lzb-price-annual .lzb-price-amount');\r\n if (!monthlyAmt || !annualAmt) return;\r\n\r\n var mData = parsePrice(monthlyAmt.dataset.original);\r\n var aData = parsePrice(annualAmt.dataset.original);\r\n if (!mData || !aData) return;\r\n\r\n var targetEl = toAnnual ? annualAmt : monthlyAmt;\r\n var startVal = toAnnual ? mData.val : aData.val;\r\n var endVal = toAnnual ? aData.val : mData.val;\r\n var prefix = toAnnual ? aData.prefix : mData.prefix;\r\n var suffix = toAnnual ? aData.suffix : mData.suffix;\r\n var decimals = toAnnual ? aData.decimals : mData.decimals;\r\n\r\n var duration = 600, startTime = null;\r\n var step = function (now) {\r\n if (!startTime) startTime = now;\r\n var progress = Math.min((now - startTime) / duration, 1);\r\n var cur = startVal + (endVal - startVal) * easeOutQuart(progress);\r\n targetEl.textContent = prefix + formatNumber(cur, decimals) + suffix;\r\n if (progress < 1) {\r\n window.requestAnimationFrame(step);\r\n } else {\r\n targetEl.textContent = targetEl.dataset.original;\r\n }\r\n };\r\n window.requestAnimationFrame(step);\r\n };\r\n\r\n var setBilling = function (billing) {\r\n var toAnnual = (billing === 'annual');\r\n container.classList.toggle('is-annual-active', toAnnual);\r\n\r\n options.forEach(function (opt) {\r\n var active = opt.dataset.billing === billing;\r\n opt.classList.toggle('is-active', active);\r\n opt.setAttribute('aria-pressed', active ? 'true' : 'false');\r\n });\r\n\r\n cards.forEach(function (card) { animateCard(card, toAnnual); });\r\n };\r\n\r\n var isAnnual = function () { return container.classList.contains('is-annual-active'); };\r\n\r\n options.forEach(function (opt) {\r\n opt.addEventListener('click', function (e) {\r\n e.stopPropagation();\r\n var target = opt.dataset.billing;\r\n // すでにアクティブな側をもう一度押したら反対側へトグル\r\n if ((target === 'annual') === isAnnual()) {\r\n setBilling(isAnnual() ? 'monthly' : 'annual');\r\n } else {\r\n setBilling(target);\r\n }\r\n });\r\n });\r\n\r\n // スイッチ本体（余白部分含む）のクリックでも月⇄年をトグル\r\n var switchEl = container.querySelector('.lzb-billing-switch');\r\n if (switchEl) {\r\n switchEl.addEventListener('click', function () {\r\n setBilling(isAnnual() ? 'monthly' : 'annual');\r\n });\r\n // キーボード操作（Enter / Space）対応\r\n switchEl.setAttribute('tabindex', '0');\r\n switchEl.addEventListener('keydown', function (e) {\r\n if (e.key === 'Enter' || e.key === ' ' || e.key === 'Spacebar') {\r\n e.preventDefault();\r\n setBilling(isAnnual() ? 'monthly' : 'annual');\r\n }\r\n });\r\n }\r\n });\r\n});" }, "styles": [], "condition": [], "edit_url": null, "provide_context_to_blocks": "", "custom_context_slug": "", "allowed_blocks": "", "ancestor": "" } ]