{"id":10,"date":"2024-07-09T17:01:57","date_gmt":"2024-07-09T08:01:57","guid":{"rendered":"https:\/\/demo.support-networks.com\/?page_id=10"},"modified":"2025-12-26T10:06:24","modified_gmt":"2025-12-26T01:06:24","slug":"home","status":"publish","type":"page","link":"https:\/\/catalog.act-flowers.com\/","title":{"rendered":"HOME"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"10\" class=\"elementor elementor-10\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7f977c8 e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-parent\" data-id=\"7f977c8\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6546c58 elementor-widget elementor-widget-spacer\" data-id=\"6546c58\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-aba94a4 elementor-widget elementor-widget-text-editor\" data-id=\"aba94a4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>\u3053\u306e\u30da\u30fc\u30b8\u3067\u9078\u3093\u3067\u3044\u305f\u3060\u3044\u305f\u5185\u5bb9\u3092\u3082\u3068\u306b\u3001<br data-start=\"241\" data-end=\"244\" \/>\u5236\u4f5c\u5074\u3067\u5168\u4f53\u8a2d\u8a08\u30fb\u30c7\u30b6\u30a4\u30f3\u3092\u6574\u3048\u307e\u3059\u3002<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-d2a768f e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-parent\" data-id=\"d2a768f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-789aab2 elementor-widget elementor-widget-shortcode\" data-id=\"789aab2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">\t<div id=\"hp-builder-root\" style=\"min-height: 400px;\">\u8aad\u307f\u8fbc\u307f\u4e2d...<\/div>\r\n\t\r\n\t<script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n\t<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+JP:wght@400;700&family=Noto+Serif+JP:wght@400;700&family=M+PLUS+Rounded+1c:wght@400;700&family=Sawarabi+Gothic&family=Sawarabi+Mincho&display=swap\" rel=\"stylesheet\">\r\n\t\r\n\t<script src=\"https:\/\/unpkg.com\/react@18\/umd\/react.production.min.js\"><\/script>\r\n\t<script src=\"https:\/\/unpkg.com\/react-dom@18\/umd\/react-dom.production.min.js\"><\/script>\r\n\t<script src=\"https:\/\/unpkg.com\/@babel\/standalone\/babel.min.js\"><\/script>\r\n\t\r\n\t<script type=\"text\/babel\">\r\n\tconst { useState, useEffect, useRef } = React;\r\n\r\n\tconst IconChevronLeft = () => <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M15 18l-6-6 6-6\"\/><\/svg>;\r\n\tconst IconCheck = () => <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>;\r\n\tconst IconExternal = () => <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className=\"inline ml-1\"><path d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\"\/><polyline points=\"15 3 21 3 21 9\"\/><line x1=\"10\" y1=\"14\" x2=\"21\" y2=\"3\"\/><\/svg>;\r\n\r\n\tconst HPBuilderTool = () => {\r\n\t\tconst [currentStep, setCurrentStep] = useState(0);\r\n\t\tconst [copied, setCopied] = useState(false);\r\n\t\tconst scrollContainerRef = useRef(null);\r\n\t\tconst [formData, setFormData] = useState({\r\n\t\t\tpurpose: '',\r\n\t\t\ttarget: '',\r\n\t\t\tcolorScheme: '',\r\n\t\t\tcustomColor: '',\r\n\t\t\tfont: '',\r\n\t\t\tcustomFont: '',\r\n\t\t\tsections: [],\r\n\t\t\tcustomSectionText: '',\r\n\t\t\tcompanyName: '',\r\n\t\t\taddress: '',\r\n\t\t\ttel: ''\r\n\t\t});\r\n\r\n\t\tconst MAIN_COLOR = \"#1e293b\";\r\n\t\tconst HOVER_COLOR = \"#0A0809\";\r\n\t\tconst SUB_COLOR = \"#94a3b8\";\r\n\t\tconst BG_COLOR = \"#ffffff\";\r\n\t\tconst BG_LIGHT = \"#f8fafc\";\r\n\t\tconst BORDER_COLOR = \"#e2e8f0\";\r\n\t\tconst OMAKASE_IMG = \"https:\/\/catalog.act-flowers.com\/wp-content\/uploads\/2025\/12\/Gemini_Generated_Image_7bdkzt7bdkzt7bdk.png\";\r\n\t\tconst GOOGLE_FONTS_URL = \"https:\/\/fonts.google.com\/?subset=japanese&lang=ja_Jpan\";\r\n\t\tconst COLOR_REF_URL = \"https:\/\/www.colordic.org\/\";\r\n\r\n\t\tuseEffect(() => {\r\n\t\t\tif (scrollContainerRef.current) {\r\n\t\t\t\tscrollContainerRef.current.scrollTop = 0;\r\n\t\t\t}\r\n\t\t}, [currentStep]);\r\n\r\n\t\tconst assetsData = {\r\n\t\t\t'\u30b0\u30ed\u30fc\u30d0\u30eb\u30ca\u30d3': {\r\n\t\t\t\t'\u6848A': { img: 'https:\/\/catalog.act-flowers.com\/wp-content\/uploads\/2025\/12\/sapojapan.net_.png', url: 'https:\/\/sapojapan.net\/', desc: '\u30b7\u30f3\u30d7\u30eb' },\r\n\t\t\t\t'\u6848B': { img: 'https:\/\/catalog.act-flowers.com\/wp-content\/uploads\/2025\/12\/nicolina-cake.com_.png', url: 'https:\/\/nicolina-cake.com\/', desc: '\u30dd\u30c3\u30d7' },\r\n\t\t\t\t'\u6848C': { img: 'https:\/\/catalog.act-flowers.com\/wp-content\/uploads\/2025\/12\/ozasaorimono.com_.png', url: 'https:\/\/ozasaorimono.com\/', desc: '\u548c\u98a8\u30fb\u30e2\u30c0\u30f3' },\r\n\t\t\t\t'\u6848D': { img: OMAKASE_IMG, url: '', desc: '\u30d7\u30ed\u306b\u304a\u307e\u304b\u305b' }\r\n\t\t\t},\r\n\t\t\t'\u30e1\u30a4\u30f3\u30d3\u30b8\u30e5\u30a2\u30eb': {\r\n\t\t\t\t'\u6848A': { img: 'https:\/\/catalog.act-flowers.com\/wp-content\/uploads\/2025\/12\/salon.sticklank.com_.png', url: 'https:\/\/salon.sticklank.com\/', desc: '\u30b9\u30e9\u30a4\u30c9\u30b7\u30e7\u30fc' },\r\n\t\t\t\t'\u6848B': { img: 'https:\/\/catalog.act-flowers.com\/wp-content\/uploads\/2025\/12\/bbqburgerbp.com_.png', url: 'https:\/\/bbqburgerbp.com\/', desc: '\u80cc\u666f\u52d5\u753b' },\r\n\t\t\t\t'\u6848C': { img: 'https:\/\/catalog.act-flowers.com\/wp-content\/uploads\/2025\/12\/f-union-assoc.net_.png', url: 'https:\/\/f-union-assoc.net\/', desc: '\u30a4\u30e1\u30fc\u30b8\u753b\u50cf' },\r\n\t\t\t\t'\u6848D': { img: OMAKASE_IMG, url: '', desc: '\u30d7\u30ed\u306b\u304a\u307e\u304b\u305b' }\r\n\t\t\t},\r\n\t\t\t'\u7279\u5fb4\u30fb\u5f37\u307f\u30fb\u30b3\u30f3\u30bb\u30d7\u30c8': {\r\n\t\t\t\t'\u6848A': { img: 'https:\/\/catalog.act-flowers.com\/wp-content\/uploads\/2025\/12\/httpsbistrotq.compage_id152.png', url: 'https:\/\/bistrotq.com\/', desc: '\u753b\u50cf\uff0b\u30c6\u30ad\u30b9\u30c8' },\r\n\t\t\t\t'\u6848B': { img: 'https:\/\/catalog.act-flowers.com\/wp-content\/uploads\/2025\/12\/www.apix-intl.co_.jpconcept.png', url: 'https:\/\/www.apix-intl.co.jp\/', desc: '\u30e2\u30c0\u30f3' },\r\n\t\t\t\t'\u6848C': { img: 'https:\/\/catalog.act-flowers.com\/wp-content\/uploads\/2025\/12\/sapojapan.netpage_id394.png', url: 'https:\/\/sapojapan.net\/', desc: '\u30c6\u30ad\u30b9\u30c8\uff0b\u52d5\u753b' },\r\n\t\t\t\t'\u6848D': { img: OMAKASE_IMG, url: '', desc: '\u30d7\u30ed\u306b\u304a\u307e\u304b\u305b' }\r\n\t\t\t},\r\n\t\t\t'\u6599\u91d1\u8868': {\r\n\t\t\t\t'\u6848A': { img: 'https:\/\/catalog.act-flowers.com\/wp-content\/uploads\/2025\/12\/yururira888.com_.png', url: 'https:\/\/yururira888.com\/', desc: '\u30b7\u30f3\u30d7\u30eb' },\r\n\t\t\t\t'\u6848B': { img: 'https:\/\/catalog.act-flowers.com\/wp-content\/uploads\/2025\/12\/seed-rhythmickids-fukuchiyama.com_.png', url: 'https:\/\/seed-rhythmickids-fukuchiyama.com\/', desc: '\u30dd\u30c3\u30d7' },\r\n\t\t\t\t'\u6848C': { img: 'https:\/\/catalog.act-flowers.com\/wp-content\/uploads\/2025\/12\/cloudy-fukuchiyama.com_.png', url: 'https:\/\/cloudy-fukuchiyama.com\/', desc: '\u30b9\u30bf\u30a4\u30ea\u30c3\u30b7\u30e5' },\r\n\t\t\t\t'\u6848D': { img: OMAKASE_IMG, url: '', desc: '\u30d7\u30ed\u306b\u304a\u307e\u304b\u305b' }\r\n\t\t\t},\r\n\t\t\t'\u304a\u77e5\u3089\u305b': {\r\n\t\t\t\t'\u6848A': { img: 'https:\/\/catalog.act-flowers.com\/wp-content\/uploads\/2025\/12\/love35care.com_.png', url: 'https:\/\/love35care.com\/', desc: '\u30ab\u30fc\u30c9' },\r\n\t\t\t\t'\u6848B': { img: 'https:\/\/catalog.act-flowers.com\/wp-content\/uploads\/2025\/12\/i-sorashido.com_.png', url: 'https:\/\/i-sorashido.com\/', desc: '\u30ea\u30b9\u30c8' },\r\n\t\t\t\t'\u6848C': { img: 'https:\/\/catalog.act-flowers.com\/wp-content\/uploads\/2025\/12\/ozasaorimono.com1_.png', url: 'https:\/\/ozasaorimono.com\/', desc: '\u753b\u50cf\u30e1\u30a4\u30f3' },\r\n\t\t\t\t'\u6848D': { img: OMAKASE_IMG, url: '', desc: '\u30d7\u30ed\u306b\u304a\u307e\u304b\u305b' }\r\n\t\t\t},\r\n\t\t\t'\u304a\u5ba2\u69d8\u306e\u58f0': {\r\n\t\t\t\t'\u6848A': { img: 'https:\/\/catalog.act-flowers.com\/wp-content\/uploads\/2025\/12\/lc-training.comvoice.png', url: 'https:\/\/lc-training.com\/', desc: '\u30a4\u30f3\u30bf\u30d3\u30e5\u30fc' },\r\n\t\t\t\t'\u6848B': { img: 'https:\/\/catalog.act-flowers.com\/wp-content\/uploads\/2025\/12\/konkatsu-ouen-kai.com_.png', url: 'https:\/\/konkatsu-ouen-kai.com\/', desc: '\u30ab\u30fc\u30c9' },\r\n\t\t\t\t'\u6848C': { img: 'https:\/\/catalog.act-flowers.com\/wp-content\/uploads\/2025\/12\/moco-a-table.jp_.png', url: 'https:\/\/moco-a-table.jp\/', desc: '\u30b7\u30f3\u30d7\u30eb' },\r\n\t\t\t\t'\u6848D': { img: OMAKASE_IMG, url: '', desc: '\u30d7\u30ed\u306b\u304a\u307e\u304b\u305b' }\r\n\t\t\t},\r\n\t\t\t'\u3088\u304f\u3042\u308b\u8cea\u554f': {\r\n\t\t\t\t'\u6848A': { img: 'https:\/\/catalog.act-flowers.com\/wp-content\/uploads\/2025\/12\/sportsgym-atlas.co_.png', url: 'https:\/\/sportsgym-atlas.co.jp\/', desc: '\u30a2\u30b3\u30fc\u30c7\u30a3\u30aa\u30f3' },\r\n\t\t\t\t'\u6848B': { img: 'https:\/\/catalog.act-flowers.com\/wp-content\/uploads\/2025\/12\/masyu0825.com_-2.png', url: 'https:\/\/masyu0825.com\/', desc: '\u30b7\u30f3\u30d7\u30eb' },\r\n\t\t\t\t'\u6848C': { img: 'https:\/\/catalog.act-flowers.com\/wp-content\/uploads\/2025\/12\/koritorinonbiriya.com_-e1766556389128.png', url: 'https:\/\/koritorinonbiriya.com\/', desc: '\u30dd\u30c3\u30d7' },\r\n\t\t\t\t'\u6848D': { img: OMAKASE_IMG, url: '', desc: '\u30d7\u30ed\u306b\u304a\u307e\u304b\u305b' }\r\n\t\t\t},\r\n\t\t\t'\u30a2\u30af\u30bb\u30b9': {\r\n\t\t\t\t'\u6848A': { img: 'https:\/\/catalog.act-flowers.com\/wp-content\/uploads\/2025\/12\/kapua-fukuchiyama.com_.png', url: 'https:\/\/kapua-fukuchiyama.com\/', desc: '\u6a19\u6e96' },\r\n\t\t\t\t'\u6848B': { img: 'https:\/\/catalog.act-flowers.com\/wp-content\/uploads\/2025\/12\/rio-fukuchiyama.com_.png', url: 'https:\/\/rio-fukuchiyama.com\/', desc: '\u30b7\u30f3\u30d7\u30eb' },\r\n\t\t\t\t'\u6848C': { img: 'https:\/\/catalog.act-flowers.com\/wp-content\/uploads\/2025\/12\/yamamori-cct.com_.png', url: 'https:\/\/yamamori-cct.com\/', desc: '\u30ef\u30a4\u30c9' },\r\n\t\t\t\t'\u6848D': { img: OMAKASE_IMG, url: '', desc: '\u30d7\u30ed\u306b\u304a\u307e\u304b\u305b' }\r\n\t\t\t},\r\n\t\t\t'\u304a\u554f\u3044\u5408\u308f\u305b': {\r\n\t\t\t\t'\u6848A': { img: 'https:\/\/catalog.act-flowers.com\/wp-content\/uploads\/2025\/12\/ochanoko-3131.com_.png', url: 'https:\/\/ochanoko-3131.com\/', desc: '\u6a19\u6e96\u30d5\u30a9\u30fc\u30e0' },\r\n\t\t\t\t'\u6848B': { img: 'https:\/\/catalog.act-flowers.com\/wp-content\/uploads\/2025\/12\/cuezgarden.com_.png', url: 'https:\/\/cuezgarden.com\/', desc: '\u8a73\u7d30\u5165\u529b' },\r\n\t\t\t\t'\u6848C': { img: 'https:\/\/catalog.act-flowers.com\/wp-content\/uploads\/2025\/12\/jcircuitsuehiro.commuryou.png', url: 'https:\/\/jcircuitsuehiro.com\/', desc: '\u4f53\u9a13\u53d7\u4ed8' },\r\n\t\t\t\t'\u6848D': { img: OMAKASE_IMG, url: '', desc: '\u30d7\u30ed\u306b\u304a\u307e\u304b\u305b' }\r\n\t\t\t},\r\n\t\t\t'\u30d5\u30c3\u30bf\u30fc': {\r\n\t\t\t\t'\u6848A': { img: 'https:\/\/catalog.act-flowers.com\/wp-content\/uploads\/2025\/12\/lavieayabe.site-.png', url: 'https:\/\/lavieayabe.site\/', desc: '\u30b7\u30f3\u30d7\u30eb' },\r\n\t\t\t\t'\u6848B': { img: 'https:\/\/catalog.act-flowers.com\/wp-content\/uploads\/2025\/12\/tsumugu-wedding.com_.png', url: 'https:\/\/tsumugu-wedding.com\/', desc: '\u30e1\u30cb\u30e5\u30fc\u6709' },\r\n\t\t\t\t'\u6848C': { img: 'https:\/\/catalog.act-flowers.com\/wp-content\/uploads\/2025\/12\/happy-rabbit0418.com_.png', url: 'https:\/\/happy-rabbit0418.com\/', desc: '\u30dd\u30c3\u30d7' },\r\n\t\t\t\t'\u6848D': { img: OMAKASE_IMG, url: '', desc: '\u30d7\u30ed\u306b\u304a\u307e\u304b\u305b' }\r\n\t\t\t}\r\n\t\t};\r\n\r\n\t\tconst updateField = (field, value) => {\r\n\t\t\tsetFormData(prev => ({ ...prev, [field]: value }));\r\n\t\t};\r\n\r\n\t\tconst toggleSection = (sec) => {\r\n\t\t\tsetFormData(prev => ({\r\n\t\t\t\t...prev,\r\n\t\t\t\tsections: prev.sections.includes(sec)\r\n\t\t\t\t\t? prev.sections.filter(s => s !== sec)\r\n\t\t\t\t\t: [...prev.sections, sec]\r\n\t\t\t}));\r\n\t\t};\r\n\r\n\t\tconst generateOutput = () => {\r\n\t\t\tconst fullStructure = [\r\n\t\t\t\t{ id: 'header', name: '\u30b0\u30ed\u30fc\u30d0\u30eb\u30ca\u30d3' },\r\n\t\t\t\t{ id: 'hero', name: '\u30e1\u30a4\u30f3\u30d3\u30b8\u30e5\u30a2\u30eb' },\r\n\t\t\t\t...formData.sections.filter(s => s !== '\u305d\u306e\u4ed6').map((s, i) => ({ id: `section_${i}`, name: s })),\r\n\t\t\t\t{ id: 'footer', name: '\u30d5\u30c3\u30bf\u30fc' }\r\n\t\t\t];\r\n\r\n\t\t\tlet out = `\u3010\u5236\u4f5c\u30d2\u30a2\u30ea\u30f3\u30b0\u30b7\u30fc\u30c8\u3011\\n\\n`;\r\n\t\t\tout += `\u5e0c\u671b\u30ab\u30e9\u30fc: ${formData.colorScheme === '\u81ea\u5206\u3067\u9078\u3076' ? formData.customColor : formData.colorScheme} (\u53c2\u7167: ${COLOR_REF_URL})\\n`;\r\n\t\t\tout += `\u5e0c\u671b\u30d5\u30a9\u30f3\u30c8: ${formData.font === '\u81ea\u5206\u3067\u9078\u3076' ? formData.customFont : formData.font} (\u53c2\u7167: ${GOOGLE_FONTS_URL})\\n`;\r\n\t\t\tout += `\u30b5\u30a4\u30c8\u76ee\u7684: ${formData.purpose}\\n`;\r\n\t\t\tout += `\u30bf\u30fc\u30b2\u30c3\u30c8: ${formData.target}\\n\\n`;\r\n\t\t\tout += `\u25a0\u69cb\u6210\u6848(\u53c2\u8003\u30ea\u30f3\u30af\u4ed8\u304d)\\n`;\r\n\r\n\t\t\tfullStructure.forEach(s => {\r\n\t\t\t\tconst selected = formData[s.id];\r\n\t\t\t\tlet detail = '\u672a\u9078\u629e';\r\n\t\t\t\tif (selected === '\u6848D') {\r\n\t\t\t\t\tdetail = '\u6848D (\u30d7\u30ed\u306b\u304a\u307e\u304b\u305b)';\r\n\t\t\t\t} else if (selected) {\r\n\t\t\t\t\tconst info = assetsData[s.name][selected];\r\n\t\t\t\t\tdetail = `${selected} (${info.desc}) -> ${info.url}`;\r\n\t\t\t\t}\r\n\t\t\t\tout += `\u30fb${s.name}: ${detail}\\n`;\r\n\t\t\t});\r\n\r\n\t\t\tif (formData.sections.includes('\u305d\u306e\u4ed6')) {\r\n\t\t\t\tout += `\u30fb\u81ea\u7531\u8981\u671b: ${formData.customSectionText || '\u7279\u306b\u306a\u3057'}\\n`;\r\n\t\t\t}\r\n\t\t\tout += `\\n\u3010\u5e97\u8217\u60c5\u5831\u3011\\n\u5e97\u540d: ${formData.companyName}\\n\u4f4f\u6240: ${formData.address}\\n\u96fb\u8a71: ${formData.tel}`;\r\n\t\t\treturn out;\r\n\t\t};\r\n\r\n\t\tconst canProceed = () => {\r\n\t\t\tif (currentStep === 0) return formData.purpose && formData.target;\r\n\t\t\tif (currentStep === 1) return formData.colorScheme;\r\n\t\t\tif (currentStep === 2) return formData.font;\r\n\t\t\tif (currentStep === 3) return formData.sections.length > 0;\r\n\t\t\tif (currentStep === 4) return formData.companyName;\r\n\t\t\treturn true;\r\n\t\t};\r\n\r\n\t\tconst renderStep = () => {\r\n\t\t\tif (currentStep === 0) {\r\n\t\t\t\treturn (\r\n\t\t\t\t\t<div className=\"space-y-4 animate-fadeIn\">\r\n\t\t\t\t\t\t<div>\r\n\t\t\t\t\t\t\t<label className=\"text-sm font-bold text-slate-700 block mb-1\">\u30b5\u30a4\u30c8\u306e\u76ee\u7684 *<\/label>\r\n\t\t\t\t\t\t\t<textarea \r\n\t\t\t\t\t\t\t\tclassName=\"w-full p-3 border-2 rounded-xl text-sm\" \r\n\t\t\t\t\t\t\t\trows=\"3\" \r\n\t\t\t\t\t\t\t\tvalue={formData.purpose} \r\n\t\t\t\t\t\t\t\tonChange={(e) => updateField('purpose', e.target.value)} \r\n\t\t\t\t\t\t\t\/>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t<div>\r\n\t\t\t\t\t\t\t<label className=\"text-sm font-bold text-slate-700 block mb-1\">\u30bf\u30fc\u30b2\u30c3\u30c8\u5c64 *<\/label>\r\n\t\t\t\t\t\t\t<textarea \r\n\t\t\t\t\t\t\t\tclassName=\"w-full p-3 border-2 rounded-xl text-sm\" \r\n\t\t\t\t\t\t\t\trows=\"3\" \r\n\t\t\t\t\t\t\t\tvalue={formData.target} \r\n\t\t\t\t\t\t\t\tonChange={(e) => updateField('target', e.target.value)} \r\n\t\t\t\t\t\t\t\/>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t);\r\n\t\t\t}\r\n\r\n\t\t\tif (currentStep === 1) {\r\n\t\t\t\tconst colorOptions = [\r\n\t\t\t\t\t{ name: '\u9752\u7cfb(\u4fe1\u983c)', hex: '#2394B4' },\r\n\t\t\t\t\t{ name: '\u7dd1\u7cfb(\u7652\u3057)', hex: '#16a34a' },\r\n\t\t\t\t\t{ name: '\u9ec4\u8272\u7cfb(\u5143\u6c17\u30fb\u5e0c\u671b)', hex: '#F6EF12' },\r\n\t\t\t\t\t{ name: '\u8336\u7cfb(\u81ea\u7136)', hex: '#92400e' },\r\n\t\t\t\t\t{ name: '\u8d64\u7cfb(\u60c5\u71b1)', hex: '#dc2626' },\r\n\t\t\t\t\t{ name: '\u30b0\u30ec\u30fc\u7cfb(\u30e2\u30c0\u30f3)', hex: '#475569' },\r\n\t\t\t\t\t{ name: '\u81ea\u5206\u3067\u9078\u3076', hex: 'custom' }\r\n\t\t\t\t];\r\n\r\n\t\t\t\treturn (\r\n\t\t\t\t\t<div className=\"space-y-3 animate-fadeIn\">\r\n\t\t\t\t\t\t{colorOptions.map(c => (\r\n\t\t\t\t\t\t\t<div key={c.name}>\r\n\t\t\t\t\t\t\t\t<button \r\n\t\t\t\t\t\t\t\t\tonClick={() => updateField('colorScheme', c.name)} \r\n\t\t\t\t\t\t\t\t\tclassName=\"w-full p-3 border-2 rounded-xl flex items-center justify-between transition bg-white hover-button\" \r\n\t\t\t\t\t\t\t\t\tstyle={{ borderColor: formData.colorScheme === c.name ? MAIN_COLOR : BORDER_COLOR }}\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t<div className=\"flex items-center gap-3\">\r\n\t\t\t\t\t\t\t\t\t\t<div \r\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"w-6 h-6 rounded-full border shadow-inner\" \r\n\t\t\t\t\t\t\t\t\t\t\tstyle={{ backgroundColor: c.hex === 'custom' ? BG_LIGHT : c.hex }}\r\n\t\t\t\t\t\t\t\t\t\t><\/div>\r\n\t\t\t\t\t\t\t\t\t\t<span className=\"font-bold text-sm text-slate-700\">{c.name}<\/span>\r\n\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t{formData.colorScheme === c.name && (\r\n\t\t\t\t\t\t\t\t\t\t<div style={{ color: MAIN_COLOR }}>\r\n\t\t\t\t\t\t\t\t\t\t\t<IconCheck \/>\r\n\t\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t\t\t<\/button>\r\n\t\t\t\t\t\t\t\t{c.name === '\u81ea\u5206\u3067\u9078\u3076' && formData.colorScheme === '\u81ea\u5206\u3067\u9078\u3076' && (\r\n\t\t\t\t\t\t\t\t\t<input \r\n\t\t\t\t\t\t\t\t\t\tclassName=\"w-full mt-2 p-3 border-2 border-dashed rounded-xl text-sm\" \r\n\t\t\t\t\t\t\t\t\t\tplaceholder=\"\u4f8b:\u539f\u8272\u5927\u8f9e\u5178\u306e\u300c\u831c\u8272\u300d\" \r\n\t\t\t\t\t\t\t\t\t\tvalue={formData.customColor} \r\n\t\t\t\t\t\t\t\t\t\tonChange={(e) => updateField('customColor', e.target.value)} \r\n\t\t\t\t\t\t\t\t\t\/>\r\n\t\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t))}\r\n\t\t\t\t\t\t<a \r\n\t\t\t\t\t\t\thref={COLOR_REF_URL} \r\n\t\t\t\t\t\t\ttarget=\"_blank\" \r\n\t\t\t\t\t\t\trel=\"noopener noreferrer\"\r\n\t\t\t\t\t\t\tclassName=\"p-3 bg-slate-50 border border-slate-100 rounded-lg text-[10px] font-bold text-slate-500 flex items-center justify-center gap-1\"\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\u8272\u898b\u672c(\u539f\u8272\u5927\u8f9e\u5178)\u3092\u78ba\u8a8d <IconExternal \/>\r\n\t\t\t\t\t\t<\/a>\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t);\r\n\t\t\t}\r\n\r\n\t\t\tif (currentStep === 2) {\r\n\t\t\t\tconst fontOptions = [\r\n\t\t\t\t\t{ name: 'Noto Sans JP', family: \"'Noto Sans JP', sans-serif\" },\r\n\t\t\t\t\t{ name: 'M PLUS Rounded 1c', family: \"'M PLUS Rounded 1c', sans-serif\" },\r\n\t\t\t\t\t{ name: 'Noto Serif JP', family: \"'Noto Serif JP', serif\" },\r\n\t\t\t\t\t{ name: 'Sawarabi Gothic', family: \"'Sawarabi Gothic', sans-serif\" },\r\n\t\t\t\t\t{ name: 'Sawarabi Mincho', family: \"'Sawarabi Mincho', serif\" },\r\n\t\t\t\t\t{ name: '\u81ea\u5206\u3067\u9078\u3076', family: 'inherit' }\r\n\t\t\t\t];\r\n\r\n\t\t\t\treturn (\r\n\t\t\t\t\t<div className=\"space-y-3 animate-fadeIn\">\r\n\t\t\t\t\t\t{fontOptions.map(f => (\r\n\t\t\t\t\t\t\t<div key={f.name}>\r\n\t\t\t\t\t\t\t\t<button \r\n\t\t\t\t\t\t\t\t\tonClick={() => updateField('font', f.name)} \r\n\t\t\t\t\t\t\t\t\tclassName=\"w-full p-3 border-2 rounded-xl text-left transition bg-white hover-button font-button\" \r\n\t\t\t\t\t\t\t\t\tstyle={{ borderColor: formData.font === f.name ? MAIN_COLOR : BORDER_COLOR }}\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t<div className=\"flex justify-between items-center\">\r\n\t\t\t\t\t\t\t\t\t\t<span className=\"text-xs font-bold text-slate-400 font-label\">{f.name}<\/span>\r\n\t\t\t\t\t\t\t\t\t\t{formData.font === f.name && (\r\n\t\t\t\t\t\t\t\t\t\t\t<div style={{ color: MAIN_COLOR }}>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<IconCheck \/>\r\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t<div style={{ fontFamily: f.family }} className=\"text-lg tracking-tight text-slate-800 font-sample\">\r\n\t\t\t\t\t\t\t\t\t\t\u672c\u65e5\u306f\u3001\u6674\u5929\u306a\u308a\u3002Sample Text\r\n\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t<\/button>\r\n\t\t\t\t\t\t\t\t{f.name === '\u81ea\u5206\u3067\u9078\u3076' && formData.font === '\u81ea\u5206\u3067\u9078\u3076' && (\r\n\t\t\t\t\t\t\t\t\t<input \r\n\t\t\t\t\t\t\t\t\t\tclassName=\"w-full mt-2 p-3 border-2 border-dashed rounded-xl text-sm\" \r\n\t\t\t\t\t\t\t\t\t\tplaceholder=\"Google Fonts\u306e\u30d5\u30a9\u30f3\u30c8\u540d\u3092\u5165\u529b\" \r\n\t\t\t\t\t\t\t\t\t\tvalue={formData.customFont} \r\n\t\t\t\t\t\t\t\t\t\tonChange={(e) => updateField('customFont', e.target.value)} \r\n\t\t\t\t\t\t\t\t\t\/>\r\n\t\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t))}\r\n\t\t\t\t\t\t<a \r\n\t\t\t\t\t\t\thref={GOOGLE_FONTS_URL} \r\n\t\t\t\t\t\t\ttarget=\"_blank\" \r\n\t\t\t\t\t\t\trel=\"noopener noreferrer\"\r\n\t\t\t\t\t\t\tclassName=\"p-3 bg-slate-50 border border-slate-100 rounded-lg text-[10px] font-bold text-slate-500 flex items-center justify-center gap-1\"\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\tGoogle Fonts\u3092\u78ba\u8a8d <IconExternal \/>\r\n\t\t\t\t\t\t<\/a>\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t);\r\n\t\t\t}\r\n\r\n\t\t\tif (currentStep === 3) {\r\n\t\t\t\tconst sectionOptions = Object.keys(assetsData).concat('\u305d\u306e\u4ed6');\r\n\t\t\t\tconst sectionDescriptions = {\r\n\t\t\t\t\t'\u30b0\u30ed\u30fc\u30d0\u30eb\u30ca\u30d3': '\u30b5\u30a4\u30c8\u4e0a\u90e8\u306e\u30e1\u30cb\u30e5\u30fc(\u4f1a\u793e\u6982\u8981\u30fb\u30b5\u30fc\u30d3\u30b9\u6848\u5185\u306a\u3069\u306e\u30ea\u30f3\u30af\u96c6)',\r\n\t\t\t\t\t'\u30e1\u30a4\u30f3\u30d3\u30b8\u30e5\u30a2\u30eb': '\u30c8\u30c3\u30d7\u30da\u30fc\u30b8\u306e\u4e00\u756a\u76ee\u7acb\u3064\u5927\u304d\u306a\u753b\u50cf\u3084\u30b9\u30e9\u30a4\u30c9',\r\n\t\t\t\t\t'\u7279\u5fb4\u30fb\u5f37\u307f\u30fb\u30b3\u30f3\u30bb\u30d7\u30c8': '\u3042\u306a\u305f\u306e\u4f1a\u793e\u30fb\u304a\u5e97\u306e\u9b45\u529b\u3092\u4f1d\u3048\u308b\u30bb\u30af\u30b7\u30e7\u30f3',\r\n\t\t\t\t\t'\u6599\u91d1\u8868': '\u30b5\u30fc\u30d3\u30b9\u3084\u5546\u54c1\u306e\u4fa1\u683c\u4e00\u89a7',\r\n\t\t\t\t\t'\u304a\u77e5\u3089\u305b': '\u6700\u65b0\u60c5\u5831\u3084\u30d6\u30ed\u30b0\u8a18\u4e8b\u306e\u4e00\u89a7',\r\n\t\t\t\t\t'\u304a\u5ba2\u69d8\u306e\u58f0': '\u5b9f\u969b\u306b\u5229\u7528\u3055\u308c\u305f\u304a\u5ba2\u69d8\u306e\u611f\u60f3',\r\n\t\t\t\t\t'\u3088\u304f\u3042\u308b\u8cea\u554f': '\u304a\u5ba2\u69d8\u304b\u3089\u3088\u304f\u805e\u304b\u308c\u308b\u8cea\u554f\u3068\u56de\u7b54',\r\n\t\t\t\t\t'\u30a2\u30af\u30bb\u30b9': '\u5e97\u8217\u307e\u3067\u306e\u5730\u56f3\u3084\u4ea4\u901a\u624b\u6bb5\u306e\u6848\u5185',\r\n\t\t\t\t\t'\u304a\u554f\u3044\u5408\u308f\u305b': '\u9023\u7d61\u5148\u30d5\u30a9\u30fc\u30e0\u3084\u96fb\u8a71\u756a\u53f7\u306e\u63b2\u8f09',\r\n\t\t\t\t\t'\u30d5\u30c3\u30bf\u30fc': '\u30b5\u30a4\u30c8\u4e0b\u90e8\u306e\u4f1a\u793e\u60c5\u5831\u3084\u30ea\u30f3\u30af\u96c6',\r\n\t\t\t\t\t'\u305d\u306e\u4ed6': '\u4e0a\u8a18\u4ee5\u5916\u3067\u5fc5\u8981\u306a\u30da\u30fc\u30b8\u3084\u6a5f\u80fd'\r\n\t\t\t\t};\r\n\t\t\t\t\r\n\t\t\t\treturn (\r\n\t\t\t\t\t<div className=\"space-y-2 animate-fadeIn pr-1\">\r\n\t\t\t\t\t\t{sectionOptions.map(s => (\r\n\t\t\t\t\t\t\t<div key={s}>\r\n\t\t\t\t\t\t\t\t<button \r\n\t\t\t\t\t\t\t\t\tonClick={() => toggleSection(s)} \r\n\t\t\t\t\t\t\t\t\tclassName=\"w-full p-3 border-2 rounded-xl text-left transition relative\" \r\n\t\t\t\t\t\t\t\t\tstyle={{\r\n\t\t\t\t\t\t\t\t\t\tborderColor: formData.sections.includes(s) ? MAIN_COLOR : BORDER_COLOR,\r\n\t\t\t\t\t\t\t\t\t\tbackgroundColor: formData.sections.includes(s) ? BG_LIGHT : BG_COLOR\r\n\t\t\t\t\t\t\t\t\t}}\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t<div className=\"font-bold text-xs text-slate-700 mb-1\">{s}<\/div>\r\n\t\t\t\t\t\t\t\t\t<div className=\"text-[10px] text-slate-500\">{sectionDescriptions[s]}<\/div>\r\n\t\t\t\t\t\t\t\t\t{formData.sections.includes(s) && (\r\n\t\t\t\t\t\t\t\t\t\t<div className=\"absolute top-3 right-3\" style={{ color: MAIN_COLOR }}>\r\n\t\t\t\t\t\t\t\t\t\t\t<IconCheck \/>\r\n\t\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t\t\t<\/button>\r\n\t\t\t\t\t\t\t\t{s === '\u305d\u306e\u4ed6' && formData.sections.includes('\u305d\u306e\u4ed6') && (\r\n\t\t\t\t\t\t\t\t\t<textarea \r\n\t\t\t\t\t\t\t\t\t\tclassName=\"w-full mt-2 p-3 border-2 border-dashed rounded-xl text-xs bg-slate-50\" \r\n\t\t\t\t\t\t\t\t\t\tplaceholder=\"\u8981\u671b\u3092\u5165\u529b...\" \r\n\t\t\t\t\t\t\t\t\t\trows=\"3\" \r\n\t\t\t\t\t\t\t\t\t\tvalue={formData.customSectionText} \r\n\t\t\t\t\t\t\t\t\t\tonChange={(e) => updateField('customSectionText', e.target.value)} \r\n\t\t\t\t\t\t\t\t\t\/>\r\n\t\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t))}\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t);\r\n\t\t\t}\r\n\r\n\t\t\tif (currentStep === 4) {\r\n\t\t\t\treturn (\r\n\t\t\t\t\t<div className=\"space-y-4 animate-fadeIn\">\r\n\t\t\t\t\t\t<input \r\n\t\t\t\t\t\t\tclassName=\"w-full p-3 border-2 rounded-xl text-sm\" \r\n\t\t\t\t\t\t\tplaceholder=\"\u5e97\u540d\u30fb\u4f1a\u793e\u540d *\" \r\n\t\t\t\t\t\t\tvalue={formData.companyName} \r\n\t\t\t\t\t\t\tonChange={(e) => updateField('companyName', e.target.value)} \r\n\t\t\t\t\t\t\/>\r\n\t\t\t\t\t\t<input \r\n\t\t\t\t\t\t\tclassName=\"w-full p-3 border-2 rounded-xl text-sm\" \r\n\t\t\t\t\t\t\tplaceholder=\"\u4f4f\u6240\" \r\n\t\t\t\t\t\t\tvalue={formData.address} \r\n\t\t\t\t\t\t\tonChange={(e) => updateField('address', e.target.value)} \r\n\t\t\t\t\t\t\/>\r\n\t\t\t\t\t\t<input \r\n\t\t\t\t\t\t\tclassName=\"w-full p-3 border-2 rounded-xl text-sm\" \r\n\t\t\t\t\t\t\tplaceholder=\"\u96fb\u8a71\u756a\u53f7\" \r\n\t\t\t\t\t\t\tvalue={formData.tel} \r\n\t\t\t\t\t\t\tonChange={(e) => updateField('tel', e.target.value)} \r\n\t\t\t\t\t\t\/>\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t);\r\n\t\t\t}\r\n\r\n\t\t\tconst sList = [\r\n\t\t\t\t{ id: 'header', name: '\u30b0\u30ed\u30fc\u30d0\u30eb\u30ca\u30d3' },\r\n\t\t\t\t{ id: 'hero', name: '\u30e1\u30a4\u30f3\u30d3\u30b8\u30e5\u30a2\u30eb' },\r\n\t\t\t\t...formData.sections.filter(s => s !== '\u305d\u306e\u4ed6').map((s, i) => ({ id: `section_${i}`, name: s })),\r\n\t\t\t\t{ id: 'footer', name: '\u30d5\u30c3\u30bf\u30fc' }\r\n\t\t\t];\r\n\t\t\tconst sIndex = currentStep - 5;\r\n\r\n\t\t\tif (sIndex >= 0 && sIndex < sList.length) {\r\n\t\t\t\tconst cur = sList[sIndex];\r\n\t\t\t\tconst planOptions = ['\u6848A', '\u6848B', '\u6848C', '\u6848D'];\r\n\r\n\t\t\t\treturn (\r\n\t\t\t\t\t<div className=\"space-y-4 animate-fadeIn text-center px-1\">\r\n\t\t\t\t\t\t<h3 className=\"font-bold text-slate-800 border-b pb-2\">\u300c{cur.name}\u300d\u6848<\/h3>\r\n\t\t\t\t\t\t{planOptions.map(p => {\r\n\t\t\t\t\t\t\tconst item = assetsData[cur.name]?.[p] || { img: OMAKASE_IMG, desc: p, url: '' };\r\n\t\t\t\t\t\t\treturn (\r\n\t\t\t\t\t\t\t\t<div key={p} className=\"flex flex-col gap-2\">\r\n\t\t\t\t\t\t\t\t\t<button \r\n\t\t\t\t\t\t\t\t\t\tonClick={() => updateField(cur.id, p)} \r\n\t\t\t\t\t\t\t\t\t\tclassName=\"w-full border-2 rounded-2xl overflow-hidden bg-white shadow-sm\" \r\n\t\t\t\t\t\t\t\t\t\tstyle={{ borderColor: formData[cur.id] === p ? MAIN_COLOR : BORDER_COLOR }}\r\n\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\t<div className=\"relative\">\r\n\t\t\t\t\t\t\t\t\t\t\t<img src={item.img} alt={`${p} ${item.desc}`} className=\"w-full h-auto\" \/>\r\n\t\t\t\t\t\t\t\t\t\t\t{formData[cur.id] === p && (\r\n\t\t\t\t\t\t\t\t\t\t\t\t<div \r\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"absolute inset-0 flex items-center justify-center\" \r\n\t\t\t\t\t\t\t\t\t\t\t\t\tstyle={{ backgroundColor: 'rgba(0,0,0,.06)' }}\r\n\t\t\t\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t<div className=\"bg-white rounded-full p-1\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<IconCheck \/>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t\t<div className=\"p-3 text-[11px] font-bold text-slate-600 bg-white\">\r\n\t\t\t\t\t\t\t\t\t\t\t{p}: {item.desc}\r\n\t\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t<\/button>\r\n\t\t\t\t\t\t\t\t\t{item.url && (\r\n\t\t\t\t\t\t\t\t\t\t<a \r\n\t\t\t\t\t\t\t\t\t\t\thref={item.url} \r\n\t\t\t\t\t\t\t\t\t\t\ttarget=\"_blank\" \r\n\t\t\t\t\t\t\t\t\t\t\trel=\"noopener noreferrer\"\r\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"p-2 bg-slate-50 border border-slate-100 rounded-lg text-[10px] font-bold text-slate-500 flex items-center justify-center gap-1 mb-2\"\r\n\t\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\t\t\u30b5\u30a4\u30c8\u3092\u78ba\u8a8d <IconExternal \/>\r\n\t\t\t\t\t\t\t\t\t\t<\/a>\r\n\t\t\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t);\r\n\t\t\t\t\t\t})}\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t);\r\n\t\t\t}\r\n\r\n\t\t\treturn (\r\n\t\t\t\t<div className=\"text-center pt-8 animate-fadeIn\">\r\n\t\t\t\t\t<div className=\"w-16 h-16 bg-slate-800 text-white rounded-full flex items-center justify-center mx-auto mb-4\">\r\n\t\t\t\t\t\t<IconCheck \/>\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t\t<button \r\n\t\t\t\t\t\tonClick={() => {\r\n\t\t\t\t\t\t\tnavigator.clipboard.writeText(generateOutput());\r\n\t\t\t\t\t\t\tsetCopied(true);\r\n\t\t\t\t\t\t}} \r\n\t\t\t\t\t\tclassName=\"w-full p-4 text-white rounded-2xl font-bold shadow-xl active:scale-95 transition-all\" \r\n\t\t\t\t\t\tstyle={{ backgroundColor: MAIN_COLOR }}\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t{copied ? '\u30b3\u30d4\u30fc\u5b8c\u4e86!\u30d5\u30a9\u30fc\u30e0\u3078\u8cbc\u308a\u4ed8\u3051' : '\u7d50\u679c\u3092\u30b3\u30d4\u30fc\u3059\u308b'}\r\n\t\t\t\t\t<\/button>\r\n\t\t\t\t<\/div>\r\n\t\t\t);\r\n\t\t};\r\n\r\n\t\tconst totalSteps = 5 + (2 + formData.sections.filter(s => s !== '\u305d\u306e\u4ed6').length + 1);\r\n\r\n\t\treturn (\r\n\t\t\t<div className=\"max-w-md mx-auto bg-white rounded-3xl shadow-2xl border border-slate-200 overflow-hidden my-4 flex flex-col min-h-[720px]\">\r\n\t\t\t\t<div className=\"p-8 bg-slate-900 text-white flex justify-between items-center border-b border-slate-700\">\r\n\t\t\t\t\t<div>\r\n\t\t\t\t\t\t<h2 className=\"text-lg font-black tracking-tighter text-white\">\u5236\u4f5c\u30d2\u30a2\u30ea\u30f3\u30b0<\/h2>\r\n\t\t\t\t\t\t<p className=\"text-[10px] text-slate-400\">FOR WEB PRODUCTION<\/p>\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t\t<div className=\"text-2xl font-black text-slate-300\">\r\n\t\t\t\t\t\t{currentStep + 1}\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\r\n\t\t\t\t<div className=\"p-8 flex-1 flex flex-col bg-white overflow-hidden\">\r\n\t\t\t\t\t<div \r\n\t\t\t\t\t\tref={scrollContainerRef} \r\n\t\t\t\t\t\tclassName=\"flex-1 overflow-y-auto pr-1 custom-scrollbar\" \r\n\t\t\t\t\t\tstyle={{ maxHeight: '480px' }}\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t{renderStep()}\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t\t\t\t{currentStep < totalSteps && (\r\n\t\t\t\t\t\t<div className=\"mt-8 flex gap-3 pt-6 border-t border-slate-100 bg-white\">\r\n\t\t\t\t\t\t\t{currentStep > 0 && (\r\n\t\t\t\t\t\t\t\t<button \r\n\t\t\t\t\t\t\t\t\tonClick={() => setCurrentStep(s => s - 1)} \r\n\t\t\t\t\t\t\t\t\tclassName=\"p-4 border-2 rounded-2xl text-slate-400 transition-colors back-button\"\r\n\t\t\t\t\t\t\t\t\tstyle={{ borderColor: BORDER_COLOR }}\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t<IconChevronLeft \/>\r\n\t\t\t\t\t\t\t\t<\/button>\r\n\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t\t<button\r\n\t\t\t\t\t\t\t\tonClick={() => canProceed() && setCurrentStep(s => s + 1)}\r\n\t\t\t\t\t\t\t\tdisabled={!canProceed()}\r\n\t\t\t\t\t\t\t\tclassName=\"flex-1 p-4 rounded-2xl text-white font-bold transition-all\"\r\n\t\t\t\t\t\t\t\tstyle={{ backgroundColor: canProceed() ? MAIN_COLOR : '#cbd5e1' }}\r\n\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\u6b21\u3078\u9032\u3080\r\n\t\t\t\t\t\t\t<\/button>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t)}\r\n\t\t\t\t<\/div>\r\n\t\t\t<\/div>\r\n\t\t);\r\n\t};\r\n\r\n\tif (document.getElementById('hp-builder-root')) {\r\n\t\tconst root = ReactDOM.createRoot(document.getElementById('hp-builder-root'));\r\n\t\troot.render(<HPBuilderTool \/>);\r\n\t}\r\n\t<\/script>\r\n\t\r\n\t<style>\r\n\t.custom-scrollbar::-webkit-scrollbar {\r\n\t\twidth: 6px;\r\n\t}\r\n\t.custom-scrollbar::-webkit-scrollbar-track {\r\n\t\tbackground: #f1f5f9;\r\n\t\tborder-radius: 10px;\r\n\t}\r\n\t.custom-scrollbar::-webkit-scrollbar-thumb {\r\n\t\tbackground: #cbd5e1;\r\n\t\tborder-radius: 10px;\r\n\t}\r\n\t.custom-scrollbar::-webkit-scrollbar-thumb:hover {\r\n\t\tbackground: #94a3b8;\r\n\t}\r\n\t@keyframes fadeIn {\r\n\t\tfrom {\r\n\t\t\topacity: 0;\r\n\t\t\ttransform: translateY(10px);\r\n\t\t}\r\n\t\tto {\r\n\t\t\topacity: 1;\r\n\t\t\ttransform: translateY(0);\r\n\t\t}\r\n\t}\r\n\t.animate-fadeIn {\r\n\t\tanimation: fadeIn 0.3s ease-out;\r\n\t}\r\n\t.hover-button:hover {\r\n\t\tbackground-color: #0A0809 !important;\r\n\t\tborder-color: #0A0809 !important;\r\n\t}\r\n\t.hover-button:hover span {\r\n\t\tcolor: white !important;\r\n\t}\r\n\t.font-button:hover .font-label {\r\n\t\tcolor: white !important;\r\n\t}\r\n\t.font-button:hover .font-sample {\r\n\t\tcolor: white !important;\r\n\t}\r\n\t.back-button:hover {\r\n\t\tbackground-color: #0A0809 !important;\r\n\t\tborder-color: #0A0809 !important;\r\n\t}\r\n\t.back-button:hover svg {\r\n\t\tstroke: white !important;\r\n\t}\r\n\t<\/style>\r\n\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-71bac20 e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-parent\" data-id=\"71bac20\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ca04e60 elementor-widget elementor-widget-text-editor\" data-id=\"ca04e60\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>\u203b\u4e0a\u306e\u7d50\u679c\u3092\u30d2\u30a2\u30ea\u30f3\u30b0\u7d50\u679c\u306e\u8cbc\u308a\u4ed8\u3051\u306b\u30b3\u30d4\u30da\u3057\u3066\u304f\u3060\u3055\u3044<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-15488cf e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-parent\" data-id=\"15488cf\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-16eb26d e-con-full elementor-hidden-tablet elementor-hidden-mobile e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-child\" data-id=\"16eb26d\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-0064bd7 e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-child\" data-id=\"0064bd7\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c48b67f elementor-widget elementor-widget-shortcode\" data-id=\"c48b67f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">\n<div class=\"wpcf7 no-js\" id=\"wpcf7-f12-o1\" lang=\"ja\" dir=\"ltr\" data-wpcf7-id=\"12\">\n<div class=\"screen-reader-response\"><p role=\"status\" aria-live=\"polite\" aria-atomic=\"true\"><\/p> <ul><\/ul><\/div>\n<form action=\"\/index.php?rest_route=%2Fwp%2Fv2%2Fpages%2F10#wpcf7-f12-o1\" method=\"post\" class=\"wpcf7-form init\" aria-label=\"\u30b3\u30f3\u30bf\u30af\u30c8\u30d5\u30a9\u30fc\u30e0\" novalidate=\"novalidate\" data-status=\"init\">\n<fieldset class=\"hidden-fields-container\"><input type=\"hidden\" name=\"_wpcf7\" value=\"12\" \/><input type=\"hidden\" name=\"_wpcf7_version\" value=\"6.1.5\" \/><input type=\"hidden\" name=\"_wpcf7_locale\" value=\"ja\" \/><input type=\"hidden\" name=\"_wpcf7_unit_tag\" value=\"wpcf7-f12-o1\" \/><input type=\"hidden\" name=\"_wpcf7_container_post\" value=\"0\" \/><input type=\"hidden\" name=\"_wpcf7_posted_data_hash\" value=\"\" \/>\n<\/fieldset>\n<div class=\"custom-contact-form\">\n\t<p><strong>\u304a\u540d\u524d<\/strong><span class=\"wpcf7-form-control-wrap\" data-name=\"your-name\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text wpcf7-validates-as-required\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"\u4f8b\uff1a\u5c71\u7530 \u592a\u90ce\" value=\"\" type=\"text\" name=\"your-name\" \/><\/span>\n\t<\/p>\n\t<p><strong>\u30e1\u30fc\u30eb\u30a2\u30c9\u30ec\u30b9<\/strong><span class=\"wpcf7-form-control-wrap\" data-name=\"your-email\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-email wpcf7-validates-as-required wpcf7-text wpcf7-validates-as-email\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"\u4f8b\uff1aexample@mail.com\" value=\"\" type=\"email\" name=\"your-email\" \/><\/span>\n\t<\/p>\n\t<p><strong>\u30d2\u30a2\u30ea\u30f3\u30b0\u7d50\u679c\u306e\u8cbc\u308a\u4ed8\u3051<\/strong>\n\t<\/p>\n\t<p><span class=\"form-sub-text\">\u203b\u4e0a\u306e\u30c4\u30fc\u30eb\u3067\u30b3\u30d4\u30fc\u3057\u305f\u5185\u5bb9\u3092\u3053\u3053\u306b\u8cbc\u308a\u4ed8\u3051\u3066\u304f\u3060\u3055\u3044<\/span><br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"your-message\"><textarea cols=\"40\" rows=\"5\" maxlength=\"2000\" class=\"wpcf7-form-control wpcf7-textarea wpcf7-validates-as-required\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"\u3053\u3061\u3089\u306b\u8cbc\u308a\u4ed8\u3051\u3092\u304a\u9858\u3044\u3057\u307e\u3059\" name=\"your-message\"><\/textarea><\/span>\n\t<\/p>\n\t<p class=\"form-submit-btn\"><input class=\"wpcf7-form-control wpcf7-submit has-spinner\" type=\"submit\" value=\"\u3053\u306e\u5185\u5bb9\u3067\u9001\u4fe1\u3059\u308b\" \/>\n\t<\/p>\n<\/div><div class=\"wpcf7-response-output\" aria-hidden=\"true\"><\/div>\n<\/form>\n<\/div>\n<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-f342be2 e-con-full elementor-hidden-tablet elementor-hidden-mobile e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-child\" data-id=\"f342be2\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u3053\u306e\u30da\u30fc\u30b8\u3067\u9078\u3093\u3067\u3044\u305f\u3060\u3044\u305f\u5185\u5bb9\u3092\u3082\u3068\u306b\u3001\u5236\u4f5c\u5074\u3067\u5168\u4f53\u8a2d\u8a08\u30fb\u30c7\u30b6\u30a4\u30f3\u3092\u6574\u3048\u307e\u3059\u3002 \u203b\u4e0a\u306e\u7d50\u679c\u3092\u30d2\u30a2\u30ea\u30f3\u30b0\u7d50\u679c\u306e\u8cbc\u308a\u4ed8\u3051\u306b\u30b3\u30d4\u30da\u3057\u3066\u304f\u3060\u3055\u3044<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"off","neve_meta_content_width":100,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"","neve_meta_disable_header":"","neve_meta_disable_footer":"","neve_meta_disable_title":"","footnotes":""},"class_list":["post-10","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/catalog.act-flowers.com\/index.php?rest_route=\/wp\/v2\/pages\/10","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/catalog.act-flowers.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/catalog.act-flowers.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/catalog.act-flowers.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/catalog.act-flowers.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=10"}],"version-history":[{"count":41,"href":"https:\/\/catalog.act-flowers.com\/index.php?rest_route=\/wp\/v2\/pages\/10\/revisions"}],"predecessor-version":[{"id":1242,"href":"https:\/\/catalog.act-flowers.com\/index.php?rest_route=\/wp\/v2\/pages\/10\/revisions\/1242"}],"wp:attachment":[{"href":"https:\/\/catalog.act-flowers.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=10"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}