ECLEAR リカバリーウェア
長袖トップス + ロングパンツ セット

Create a "pain points" block for a recovery wear product page. Layout: 3 cards stacked vertically on mobile, side-by-side in a row on desktop. Each card has a rounded icon box (48px mobile, 64px desktop) on the left with an emoji or SVG icon, and text on the right with a bold heading (14px, weight 700) and description (12px, color #666). Card styling: white background, 1px border #e5e7eb, border-radius 10px, padding 16px. Below the 3 cards, add a centered "solution bridge" text block with a large bold heading (18px mobile, 24px desktop, weight 800) and smaller description text (14px, color #666, line-height 1.8). Use light gray (#f8f9fa) as the section background. Include editable settings for: section background color, card border radius, each card's icon, heading text, description text, solution heading text, and solution description text. Make all font sizes adjustable in theme editor settings with reasonable defaults.

Create a technology explanation block with a dark gradient background (from #0d1b2a to #1b3a4b). On mobile: single column with brand name heading (18px, weight 800, white), subtitle (12px, 70% opacity), then 3 numbered steps in a vertical list. Each step has a circular number badge (28px, semi-transparent white background) and description text (13px, white). On desktop: two-column layout with left side showing a placeholder for a technology diagram image (aspect-ratio 4:3) and right side showing the text content. Below the dark block, add a centered light blue (#f0f7ff) certification badge showing "Medical Device" registration info. Include editable settings for: gradient start/end colors, heading text, subtitle text, each step's description, certification text, section padding (32-64px), heading font size (16-32px), step text font size (12-16px), number badge size (24-40px), and border-radius of the dark container (0-20px).

Create a product features grid block. Section heading centered (20px mobile, 28px desktop, weight 800) with subheading below (13px, color #666). Grid layout: 2 columns on mobile, 4 columns on desktop. Each feature card has: an image placeholder with 4:3 aspect ratio on top, then a text area with bold title (13px, weight 700) and description (11px, color #666). Cards have 1px border #e5e7eb, border-radius 10px, overflow hidden. Below the grid, add a full-width highlight bar with light blue background (#f0f7ff), 1px border #bfdbfe, displaying a large number (32px, weight 800, color #0d5e8a), bold title, and description side by side. Include editable settings for: number of columns mobile (1-2) and desktop (2-4), card border-radius (0-20px), image aspect ratio, each card's image, title, description, the highlight bar number, title, description, section padding top/bottom (24-64px), section background color, heading font size (16-32px), card title font size (12-16px), card description font size (10-14px), and card gap (8-20px).

Create a usage scene showcase block with two scene cards stacked vertically on mobile. Each card has: a full-width image area (aspect-ratio 16:9) on top, and a text content area below with a bold heading (15px, weight 700) and description (12px, color #666, line-height 1.6). On desktop: each card becomes a side-by-side two-column layout (image 50%, text 50%). Alternate the image position: first card has image on left, second card has image on right. Cards have border-radius 12px, overflow hidden. Section has centered heading (20px mobile, 28px desktop) and subheading. Include editable settings for: each card's image, heading, description, image position (left/right), image aspect ratio mobile (16:9, 4:3, 1:1), desktop min-height (200-400px), card border-radius (0-20px), section padding (24-64px), heading font size (14-20px), description font size (11-14px), and section background color.

Create a centered call-to-action block with a gradient background (from #f8f9fa to #ffffff). Contains a full-width button (max-width 480px, centered) with dark background (#1a1a1a), white text, border-radius 8px, padding 16px, font-size 16px weight 700. Below the button, small centered note text (12px, color #666). The button text should include the product price. Include editable settings for: button text, button color, button text color, button border-radius (4-16px), button padding (12-20px), button font size (14-18px), button max-width (300-600px), note text, section padding top/bottom (16-48px), and gradient colors.

Create a product comparison table block. Section has centered heading (20px mobile, 28px desktop, weight 800) and subheading (13px, color #666). Table is full-width with 5 columns. First column is feature names (left-aligned, weight 600). Remaining columns are competitor labels. The second column (our product) should have a highlighted header (background #0d5e8a, white text) and highlighted cells (background #f0f7ff). Use checkmarks for supported features (color #059669), crosses for unsupported (color #999). Price row should have our price in red (#dc2626), weight 800, font-size 14px. Table cells: padding 10px 8px, border-bottom 1px solid #e5e7eb. On mobile the table should scroll horizontally if needed. Include editable settings for: number of comparison columns (3-5), heading text, subheading text, section background color, highlight column color, each row's feature name and values, section padding (24-64px), table font size (11-14px), heading font size (16-32px), and header background color.

Create a size guide table block with a centered heading (20px, weight 800) and model info subheading (13px, color #666). The table should be full-width with clean styling: header row with #f8f9fa background, weight 600. Table cells: padding 8px, 1px border #e5e7eb, centered text, font-size 12px. One row should be highlighted with light blue background (#f0f7ff) and weight 600 to indicate the recommended size. Below the table, add centered help text (12px, color #666). The table should scroll horizontally on small screens. Include editable settings for: heading text, subheading text (model info), number of size rows (3-8), number of columns (3-6), each column header text, each cell value, highlighted row index, help text, section padding (24-64px), table font size (11-14px), heading font size (16-28px), header background color, highlight row color, and section background color.

Create an FAQ accordion block. Section heading centered (20px mobile, 28px desktop, weight 800). Each FAQ item has a question row (14px, weight 600) with a "+" toggle icon on the right (18px, color #999) that rotates 45 degrees when opened. Answer text (13px, color #666, line-height 1.6) slides open with a smooth max-height CSS transition (300ms). Items separated by 1px border-bottom #e5e7eb. First item should be open by default. On desktop, max-width 700px centered. Include editable settings for: heading text, number of FAQ items (3-10), each item's question and answer text, toggle icon character, section padding (24-64px), question font size (13-18px), answer font size (12-15px), border color, section background color, section max-width on desktop (500-900px), and open/closed transition duration.

Create a trust/guarantee grid block. Layout: 2 columns on mobile, 4 columns on desktop. Each item is a centered card with: an icon/emoji (24px, margin-bottom 6px), bold heading (13px, weight 700), description text (11px, color #666). Cards have 1px border #e5e7eb, border-radius 10px, padding 16px 8px. Light gray section background (#f8f9fa). Include editable settings for: number of items (2-6), columns mobile (1-2), columns desktop (2-4), each item's icon, heading, description, card border-radius (0-20px), card padding, section padding (24-64px), icon size (18-36px), heading font size (12-16px), description font size (10-13px), section background color, and card border color.

Create a sticky bottom bar that fixes to the bottom of the viewport. The bar has white background, top border 1px solid #e5e7eb, box-shadow 0 -4px 12px rgba(0,0,0,0.08), padding 10px 16px. Contents: price text on the left (18px, weight 800) and a dark button (#1a1a1a, white text, border-radius 8px, padding 14px, font-size 15px weight 700) that fills remaining width (max-width 400px). The bar should only appear when the user scrolls past the main add-to-cart button (use IntersectionObserver). Slide-in animation: translateY(100%) to translateY(0) over 200ms. On desktop, the bar should be centered with max-width 1200px. Include editable settings for: button text, button color, button text color, button border-radius (4-16px), button font size (13-17px), price font size (14-22px), bar padding, bar background color, bar max-width desktop (800-1400px), and show/hide animation duration (100-400ms).