function MainComponent() { const [products, setProducts] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); const [consultation, setConsultation] = useState(""); const [showResult, setShowResult] = useState(false); const [fortuneResult, setFortuneResult] = useState(null); const [fortuneLoading, setFortuneLoading] = useState(false); const [fortuneError, setFortuneError] = useState(null); const [showRecommendation, setShowRecommendation] = useState(false); const [currentIndex, setCurrentIndex] = useState(0); const [isTransitioning, setIsTransitioning] = useState(false); const [visibleProducts, setVisibleProducts] = useState([]); const [recommendedIndex, setRecommendedIndex] = useState(0); const [recommendedTransitioning, setRecommendedTransitioning] = useState(false); const starPositions = useMemo(()=>{ return Array.from({ length: 50 }).map(()=>({ left: `${Math.random() * 100}%`, top: `${Math.random() * 100}%`, delay: `${Math.random() * 5}s`, duration: `${Math.random() * 3 + 2}s` })); }, []); const shootingStarPositions = useMemo(()=>{ return Array.from({ length: 5 }).map(()=>({ delay: `${Math.random() * 5}s`, top: `${Math.random() * 100}%`, left: `${Math.random() * 100}%` })); }, []); const productThemes = { protection: { bg: "from-indigo-900/30 via-purple-900/20 to-blue-900/30", aura: "rgba(147, 51, 234, 0.2)", accent: "rgba(199, 210, 254, 0.3)" }, love: { bg: "from-rose-900/30 via-pink-900/20 to-red-900/30", aura: "rgba(244, 63, 94, 0.2)", accent: "rgba(253, 164, 175, 0.3)" }, healing: { bg: "from-emerald-900/30 via-green-900/20 to-teal-900/30", aura: "rgba(16, 185, 129, 0.2)", accent: "rgba(167, 243, 208, 0.3)" }, wisdom: { bg: "from-amber-900/30 via-yellow-900/20 to-orange-900/30", aura: "rgba(245, 158, 11, 0.2)", accent: "rgba(253, 230, 138, 0.3)" }, prosperity: { bg: "from-yellow-900/30 via-amber-900/20 to-orange-900/30", aura: "rgba(217, 119, 6, 0.2)", accent: "rgba(252, 211, 77, 0.3)" }, balance: { bg: "from-teal-900/30 via-cyan-900/20 to-sky-900/30", aura: "rgba(45, 212, 191, 0.2)", accent: "rgba(165, 243, 252, 0.3)" }, energy: { bg: "from-red-900/30 via-orange-900/20 to-yellow-900/30", aura: "rgba(249, 115, 22, 0.2)", accent: "rgba(254, 215, 170, 0.3)" }, peace: { bg: "from-blue-900/30 via-sky-900/20 to-indigo-900/30", aura: "rgba(59, 130, 246, 0.2)", accent: "rgba(191, 219, 254, 0.3)" } }; const getProductTheme = (effect)=>{ return productThemes[effect] || productThemes.protection; }; const handleSwipe = (direction)=>{ if (isTransitioning) return; setIsTransitioning(true); const newIndex = direction === "next" ? (currentIndex + 1) % visibleProducts.length : (currentIndex - 1 + visibleProducts.length) % visibleProducts.length; setCurrentIndex(newIndex); setTimeout(()=>setIsTransitioning(false), 500); }; const handleConsultation = async ()=>{ if (!consultation.trim()) { alert("相談内容を入力してください"); return; } setFortuneLoading(true); setFortuneError(null); try { const response = await fetch("/api/fortune-reading", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ question: consultation }) }); if (!response.ok) { throw new Error("鑑定結果の取得に失敗しました"); } const result = await response.json(); if (result.error) { throw new Error(result.error); } setFortuneResult({ fortune_reading: Object.values(result.reading_sections).join("\n\n"), recommended_products: result.recommended_products }); setShowResult(true); } catch (err) { console.error(err); setFortuneError("鑑定中にエラーが発生しました: " + err.message); } finally{ setFortuneLoading(false); } }; const handleRecommendedSwipe = (direction)=>{ if (recommendedTransitioning || !fortuneResult?.recommended_products) return; setRecommendedTransitioning(true); const newIndex = direction === "next" ? (recommendedIndex + 1) % fortuneResult.recommended_products.length : (recommendedIndex - 1 + fortuneResult.recommended_products.length) % fortuneResult.recommended_products.length; setRecommendedIndex(newIndex); setTimeout(()=>setRecommendedTransitioning(false), 500); }; const cardStyles = { display: "flex", flexDirection: "column", height: "100%" }; const cardContentStyles = { flex: 1, display: "flex", flexDirection: "column" }; const cardBottomStyles = { marginTop: "auto", display: "flex", flexDirection: "column", gap: "1rem", alignItems: "center" }; useEffect(()=>{ const fetchProducts = async ()=>{ try { const response = await fetch("/api/products", { method: "POST" }); if (!response.ok) { throw new Error("商品データの取得に失敗しました"); } const data = await response.json(); if (data.products && Array.isArray(data.products)) { setProducts(data.products); setVisibleProducts(data.products); } else { throw new Error("商品データが不正です"); } setLoading(false); } catch (err) { console.error(err); setError("商品データの読み込み中にエラーが発生しました"); setLoading(false); } }; fetchProducts(); }, []); useEffect(()=>{ if (fortuneResult?.recommended_products && fortuneResult.recommended_products.length > 0) { const recommendedItems = products.filter((product)=>fortuneResult.recommended_products.includes(product.id)); if (recommendedItems.length > 0) { setShowRecommendation(true); // 鑑定結果が表示されたら自動でスクロール setTimeout(()=>{ const recommendationSection = document.getElementById("recommendation-section"); if (recommendationSection) { recommendationSection.scrollIntoView({ behavior: "smooth", block: "start" }); } }, 300); // 少し遅延を入れてDOM更新を待つ } else { // 推奨商品が見つからない場合のフォールバック console.error("推奨商品が見つかりませんでした。全商品から選択します。"); const fallbackItems = products.slice(0, 3); setFortuneResult((prev)=>({ ...prev, recommended_products: fallbackItems.map((item)=>item.id) })); setShowRecommendation(true); // フォールバックの場合もスクロール setTimeout(()=>{ const recommendationSection = document.getElementById("recommendation-section"); if (recommendationSection) { recommendationSection.scrollIntoView({ behavior: "smooth", block: "start" }); } }, 300); } } }, [ fortuneResult, products ]); return /*#__PURE__*/ React.createElement("div", { className: "relative min-h-screen bg-gradient-to-b from-[#1a0933] via-[#0a0521] to-[#020314]", __source: { fileName: "", lineNumber: 246, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 pointer-events-none", __source: { fileName: "", lineNumber: 247, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "aurora-effect", __source: { fileName: "", lineNumber: 248, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "mystical-overlay", __source: { fileName: "", lineNumber: 249, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "magic-circle", __source: { fileName: "", lineNumber: 250, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "shooting-stars", __source: { fileName: "", lineNumber: 252, columnNumber: 9 }, __self: this }, shootingStarPositions.map((pos, i)=>/*#__PURE__*/ React.createElement("div", { key: i, className: "shooting-star", style: { animationDelay: pos.delay, top: pos.top, left: pos.left }, __source: { fileName: "", lineNumber: 254, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "sparkles", __source: { fileName: "", lineNumber: 266, columnNumber: 9 }, __self: this }, starPositions.map((pos, i)=>/*#__PURE__*/ React.createElement("div", { key: i, className: "sparkle", style: { left: pos.left, top: pos.top, animationDelay: pos.delay, animationDuration: pos.duration }, __source: { fileName: "", lineNumber: 268, columnNumber: 13 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "relative z-10 container mx-auto px-4 py-8 md:py-12", __source: { fileName: "", lineNumber: 282, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-16 floating-text", __source: { fileName: "", lineNumber: 283, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl md:text-5xl lg:text-6xl font-zen-old-mincho text-white mb-6 leading-relaxed tracking-wider", __source: { fileName: "", lineNumber: 284, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "block magical-text", __source: { fileName: "", lineNumber: 285, columnNumber: 13 }, __self: this }, "運命の石との出会い"), /*#__PURE__*/ React.createElement("span", { className: "block magical-text-delay-1", __source: { fileName: "", lineNumber: 286, columnNumber: 13 }, __self: this }, "あなたの魂が求める"), /*#__PURE__*/ React.createElement("span", { className: "block magical-text-delay-2", __source: { fileName: "", lineNumber: 289, columnNumber: 13 }, __self: this }, "神秘の導き")), /*#__PURE__*/ React.createElement("p", { className: "text-xl md:text-2xl font-zen-maru-gothic text-purple-200/90 leading-relaxed tracking-wide magical-text-delay-3", __source: { fileName: "", lineNumber: 291, columnNumber: 11 }, __self: this }, "古来より伝わる叡智と、魂の共鳴から", /*#__PURE__*/ React.createElement("br", { className: "hidden md:block", __source: { fileName: "", lineNumber: 293, columnNumber: 13 }, __self: this }), "あなただけの特別な石をお導きします")), /*#__PURE__*/ React.createElement("div", { className: "max-w-3xl mx-auto backdrop-blur-lg bg-white/5 rounded-2xl p-6 md:p-8 border border-white/10 shadow-mystical mb-12 crystal-card", __source: { fileName: "", lineNumber: 298, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-8", __source: { fileName: "", lineNumber: 299, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl md:text-4xl font-zen-old-mincho text-white mb-4 leading-relaxed tracking-wider magical-text", __source: { fileName: "", lineNumber: 300, columnNumber: 13 }, __self: this }, "🌙 魂の声を聴かせてください"), /*#__PURE__*/ React.createElement("p", { className: "text-lg font-zen-maru-gothic text-purple-200/90 tracking-wide", __source: { fileName: "", lineNumber: 303, columnNumber: 13 }, __self: this }, 'あなたの願いや悩みから、必要な"石"の導きを受け取りましょう')), /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 308, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 309, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { value: consultation, onChange: (e)=>setConsultation(e.target.value), placeholder: "心の奥底にある想いをお聞かせください... ✨ 今のあなたが感じている不安や願い、そして心が求めているものを、どうぞ自由にお書きください...", className: "w-full h-40 md:h-48 px-5 py-4 bg-white/10 rounded-xl border border-white/20 text-white placeholder-white/40 focus:outline-none focus:border-purple-300/50 focus:ring-2 focus:ring-purple-300/20 transition-all duration-300 resize-none text-lg leading-relaxed font-zen-maru-gothic", __source: { fileName: "", lineNumber: 310, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "input-glow", __source: { fileName: "", lineNumber: 319, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center pt-4", __source: { fileName: "", lineNumber: 322, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleConsultation, disabled: fortuneLoading, className: "mystical-button group relative overflow-hidden font-zen-old-mincho", __source: { fileName: "", lineNumber: 323, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "relative z-10 text-xl tracking-wider", __source: { fileName: "", lineNumber: 328, columnNumber: 17 }, __self: this }, fortuneLoading ? "✨ 魂の波動を読み取っています..." : "🔮 運命の石を探す"), /*#__PURE__*/ React.createElement("div", { className: "button-glow", __source: { fileName: "", lineNumber: 333, columnNumber: 17 }, __self: this }))))), error && /*#__PURE__*/ React.createElement("div", { className: "mt-6 text-red-400 text-center", __source: { fileName: "", lineNumber: 340, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 341, columnNumber: 13 }, __self: this }, error)), fortuneError && /*#__PURE__*/ React.createElement("div", { className: "mt-6 text-red-400 text-center", __source: { fileName: "", lineNumber: 346, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 347, columnNumber: 13 }, __self: this }, fortuneError)), showResult && !showRecommendation && /*#__PURE__*/ React.createElement("div", { className: "text-center mt-12", __source: { fileName: "", lineNumber: 352, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "inline-block animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-white", __source: { fileName: "", lineNumber: 353, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-white/80 mt-4", __source: { fileName: "", lineNumber: 354, columnNumber: 13 }, __self: this }, "鑑定結果を準備しています...")), !showResult && /*#__PURE__*/ React.createElement("div", { className: "mt-12 max-w-6xl mx-auto", __source: { fileName: "", lineNumber: 359, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl md:text-3xl font-crimson-text text-center text-white mb-8", __source: { fileName: "", lineNumber: 360, columnNumber: 13 }, __self: this }, "✨ 神秘的なアイテム一覧 ✨"), loading ? /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 365, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "inline-block animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-white", __source: { fileName: "", lineNumber: 366, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-white/80 mt-4", __source: { fileName: "", lineNumber: 367, columnNumber: 17 }, __self: this }, "商品を読み込んでいます...")) : error ? /*#__PURE__*/ React.createElement("div", { className: "text-center text-red-400", __source: { fileName: "", lineNumber: 370, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 371, columnNumber: 17 }, __self: this }, error)) : products.length === 0 ? /*#__PURE__*/ React.createElement("div", { className: "text-center text-white/80", __source: { fileName: "", lineNumber: 374, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 375, columnNumber: 17 }, __self: this }, "商品が見つかりませんでした")) : /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 px-4", __source: { fileName: "", lineNumber: 378, columnNumber: 15 }, __self: this }, products.map((product)=>{ const theme = getProductTheme(product.effects?.[0] || "protection"); return /*#__PURE__*/ React.createElement("div", { key: product.id, className: `relative p-6 rounded-2xl overflow-hidden bg-gradient-to-br ${theme.bg} transform hover:scale-[1.02] transition-all duration-300`, style: cardStyles, __source: { fileName: "", lineNumber: 385, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 opacity-50 pointer-events-none", style: { background: `radial-gradient(circle at 50% 50%, ${theme.aura}, transparent 70%)` }, __source: { fileName: "", lineNumber: 390, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("div", { style: cardContentStyles, className: "relative z-10", __source: { fileName: "", lineNumber: 397, columnNumber: 23 }, __self: this }, product.image_url && /*#__PURE__*/ React.createElement("div", { className: "relative aspect-square mb-6 rounded-xl overflow-hidden", __source: { fileName: "", lineNumber: 399, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: product.image_url, alt: product.name, className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 400, columnNumber: 29 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0", style: { background: `linear-gradient(to bottom, transparent 50%, ${theme.accent})` }, __source: { fileName: "", lineNumber: 405, columnNumber: 29 }, __self: this })), /*#__PURE__*/ React.createElement("h4", { className: "text-xl md:text-2xl text-white mb-4 font-zen-old-mincho text-center", __source: { fileName: "", lineNumber: 414, columnNumber: 25 }, __self: this }, product.name), /*#__PURE__*/ React.createElement("p", { className: "text-white/80 text-sm mb-8 leading-relaxed text-center line-clamp-3", __source: { fileName: "", lineNumber: 418, columnNumber: 25 }, __self: this }, product.description), /*#__PURE__*/ React.createElement("div", { style: cardBottomStyles, className: "relative z-20", __source: { fileName: "", lineNumber: 422, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-xl text-white font-zen-old-mincho", __source: { fileName: "", lineNumber: 423, columnNumber: 27 }, __self: this }, "¥", product.price.toLocaleString()), product.external_url && /*#__PURE__*/ React.createElement("a", { href: product.external_url, target: "_blank", rel: "noopener noreferrer", className: "refined-purchase-button w-full py-2 text-center inline-block hover:bg-white active:bg-white/90 pointer-events-auto", onClick: (e)=>{ e.stopPropagation(); window.open(product.external_url, "_blank"); }, __source: { fileName: "", lineNumber: 427, columnNumber: 29 }, __self: this }, "購入する"), !product.external_url && /*#__PURE__*/ React.createElement("button", { disabled: true, className: "refined-purchase-button w-full py-2 text-center bg-white/50 cursor-not-allowed pointer-events-none", __source: { fileName: "", lineNumber: 441, columnNumber: 29 }, __self: this }, "準備中")))); }))), showRecommendation && fortuneResult && /*#__PURE__*/ React.createElement("div", { id: "recommendation-section", className: "recommendation-section relative overflow-visible rounded-3xl p-8 md:p-12 mt-12", __source: { fileName: "", lineNumber: 459, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative z-10", __source: { fileName: "", lineNumber: 463, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto mb-16 backdrop-blur-lg bg-white/5 rounded-2xl p-6 md:p-8 border border-white/10 shadow-mystical", __source: { fileName: "", lineNumber: 464, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-2xl md:text-4xl font-zen-old-mincho text-white text-center mb-8 magical-header", __source: { fileName: "", lineNumber: 465, columnNumber: 17 }, __self: this }, "✧ あなたの魂の声を読み解きました ✧"), /*#__PURE__*/ React.createElement("div", { className: "fortune-reading-text whitespace-pre-wrap text-lg text-white/90 leading-relaxed font-zen-maru-gothic", __source: { fileName: "", lineNumber: 468, columnNumber: 17 }, __self: this }, fortuneResult.fortune_reading)), /*#__PURE__*/ React.createElement("h3", { className: "text-2xl md:text-4xl font-zen-old-mincho text-white text-center mb-4 magical-header", __source: { fileName: "", lineNumber: 473, columnNumber: 15 }, __self: this }, "✧ 今のあなたの波動に導かれた、運命の石です ✧"), /*#__PURE__*/ React.createElement("p", { className: "text-center text-purple-200/90 mb-8 font-zen-maru-gothic leading-relaxed magical-text-delay-1", __source: { fileName: "", lineNumber: 477, columnNumber: 15 }, __self: this }, "あなたの魂が求めていた石が、今まさに共鳴しています。", /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 479, columnNumber: 17 }, __self: this }), "この石には、あなたを導く特別な意味が込められています。"), /*#__PURE__*/ React.createElement("div", { className: "relative max-w-6xl mx-auto", __source: { fileName: "", lineNumber: 483, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", __source: { fileName: "", lineNumber: 484, columnNumber: 17 }, __self: this }, products.filter((product)=>fortuneResult.recommended_products.includes(product.id)).map((product)=>{ const theme = getProductTheme(product.effects?.[0] || "protection"); return /*#__PURE__*/ React.createElement("div", { key: product.id, className: `relative p-6 rounded-2xl overflow-hidden bg-gradient-to-br ${theme.bg} transform hover:scale-[1.02] transition-all duration-300`, style: cardStyles, __source: { fileName: "", lineNumber: 494, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 opacity-50 pointer-events-none", style: { background: `radial-gradient(circle at 50% 50%, ${theme.aura}, transparent 70%)` }, __source: { fileName: "", lineNumber: 499, columnNumber: 27 }, __self: this }), /*#__PURE__*/ React.createElement("div", { style: cardContentStyles, className: "relative z-10", __source: { fileName: "", lineNumber: 506, columnNumber: 27 }, __self: this }, product.image_url && /*#__PURE__*/ React.createElement("div", { className: "relative aspect-square mb-6 rounded-xl overflow-hidden", __source: { fileName: "", lineNumber: 511, columnNumber: 31 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: product.image_url, alt: product.name, className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 512, columnNumber: 33 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0", style: { background: `linear-gradient(to bottom, transparent 50%, ${theme.accent})` }, __source: { fileName: "", lineNumber: 517, columnNumber: 33 }, __self: this })), /*#__PURE__*/ React.createElement("h4", { className: "text-xl md:text-2xl text-white mb-4 font-zen-old-mincho text-center", __source: { fileName: "", lineNumber: 526, columnNumber: 29 }, __self: this }, product.name), /*#__PURE__*/ React.createElement("p", { className: "text-purple-200/90 text-base mb-6 font-zen-maru-gothic text-center crystal-guidance", __source: { fileName: "", lineNumber: 530, columnNumber: 29 }, __self: this }, "✨", " ", product.catchphrase || "あなたの魂が求めていた特別な石です"), /*#__PURE__*/ React.createElement("p", { className: "text-white/80 text-sm mb-8 leading-relaxed text-center line-clamp-3", __source: { fileName: "", lineNumber: 536, columnNumber: 29 }, __self: this }, product.description), /*#__PURE__*/ React.createElement("div", { style: cardBottomStyles, className: "relative z-20", __source: { fileName: "", lineNumber: 540, columnNumber: 29 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-2xl text-white font-zen-old-mincho", __source: { fileName: "", lineNumber: 544, columnNumber: 31 }, __self: this }, "¥", product.price.toLocaleString()), product.external_url && /*#__PURE__*/ React.createElement("a", { href: product.external_url, target: "_blank", rel: "noopener noreferrer", className: "refined-purchase-button w-full py-2 text-center inline-block hover:bg-white active:bg-white/90 pointer-events-auto", onClick: (e)=>{ e.stopPropagation(); window.open(product.external_url, "_blank"); }, __source: { fileName: "", lineNumber: 548, columnNumber: 33 }, __self: this }, "購入する"), !product.external_url && /*#__PURE__*/ React.createElement("span", { className: "refined-purchase-button w-full py-2 text-center opacity-50 cursor-not-allowed pointer-events-none", __source: { fileName: "", lineNumber: 562, columnNumber: 33 }, __self: this }, "準備中")))); }))), /*#__PURE__*/ React.createElement("div", { className: "text-center mt-12", __source: { fileName: "", lineNumber: 574, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowResult(false), className: "inline-block mystical-button", __source: { fileName: "", lineNumber: 575, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "relative z-10", __source: { fileName: "", lineNumber: 579, columnNumber: 19 }, __self: this }, "✨ すべての神秘的なアイテムを見る")))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 589, columnNumber: 7 }, __self: this }, ` .aurora-effect { position: fixed; inset: 0; background: linear-gradient( 45deg, rgba(224,195,252,0.1) 0%, rgba(142,197,252,0.1) 50%, rgba(96,165,250,0.1) 100% ); filter: blur(100px); animation: aurora 20s infinite; opacity: 0.5; } .mystical-overlay { position: fixed; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(88, 28, 135, 0.15) 0%, rgba(76, 29, 149, 0.1) 50%, rgba(30, 58, 138, 0.05) 100% ); mix-blend-mode: overlay; } .magic-circle { position: fixed; top: 50%; left: 50%; width: 800px; height: 800px; transform: translate(-50%, -50%); background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAwIiBoZWlnaHQ9IjgwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIGN4PSI0MDAiIGN5PSI0MDAiIHI9IjM5MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJyZ2JhKDI1NSwgMjU1LCAyNTUsIDAuMDUpIiBzdHJva2Utd2lkdGg9IjIiLz48L3N2Zz4='); opacity: 0.5; animation: rotate 60s linear infinite; } .shooting-star { position: absolute; width: 2px; height: 2px; background: white; animation: shooting 3s linear infinite; } .sparkle { position: absolute; width: 3px; height: 3px; background: white; border-radius: 50%; animation: twinkle 2s ease-in-out infinite; } @keyframes aurora { 0%, 100% { transform: translateY(0) scale(1); opacity: 0.5; } 50% { transform: translateY(-20px) scale(1.1); opacity: 0.7; } } @keyframes shooting { 0% { transform: translateX(0) translateY(0) rotate(45deg); opacity: 1; } 100% { transform: translateX(1000px) translateY(-1000px) rotate(45deg); opacity: 0; } } @keyframes rotate { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } } @keyframes twinkle { 0%, 100% { opacity: 0.2; transform: scale(0.5); } 50% { opacity: 1; transform: scale(1.2); } } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .magical-text { opacity: 0; animation: fadeInUp 0.8s ease-out forwards; } .magical-text-delay-1 { opacity: 0; animation: fadeInUp 0.8s ease-out 0.3s forwards; } .magical-text-delay-2 { opacity: 0; animation: fadeInUp 0.8s ease-out 0.6s forwards; } .magical-text-delay-3 { opacity: 0; animation: fadeInUp 0.8s ease-out 0.9s forwards; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .crystal-card { position: relative; overflow: hidden; } .crystal-card::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient( 45deg, transparent 0%, rgba(255,255,255,0.05) 50%, transparent 100% ); animation: crystal-shine 10s linear infinite; } @keyframes crystal-shine { 0% { transform: rotate(0) translate(-50%, -50%); } 100% { transform: rotate(360deg) translate(-50%, -50%); } } .mystical-button { background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(224,195,252,0.3)); color: white; padding: 1.2rem 3rem; border-radius: 9999px; font-size: 1.25rem; transition: all 0.3s; border: 1px solid rgba(255,255,255,0.2); position: relative; overflow: hidden; } .mystical-button::before { content: ''; position: absolute; top: 50%; left: 50%; width: 300px; height: 300px; background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 70%); transform: translate(-50%, -50%) scale(0); transition: transform 0.5s; } .mystical-button:hover::before { transform: translate(-50%, -50%) scale(1); } .mystical-button:hover { transform: translateY(-2px); background: linear-gradient(135deg, rgba(255,255,255,0.2), rgba(224,195,252,0.4)); border-color: rgba(255,255,255,0.3); box-shadow: 0 0 20px rgba(224,195,252,0.3); } .floating-text { animation: float 6s ease-in-out infinite; } @import url('https://fonts.googleapis.com/css2?family=Zen+Old+Mincho:wght@400;500;600&family=Zen+Maru+Gothic:wght@400;500&display=swap'); @media (max-width: 768px) { .mystical-button { width: 100%; padding: 1rem 2rem; font-size: 1.125rem; } } .purchase-button { background: linear-gradient(135deg, #ffffff, #faf0c5); color: #1a0933; padding: 0.5rem 1.5rem; border-radius: 9999px; font-weight: 600; font-family: 'Zen Maru Gothic', sans-serif; transition: all 0.3s ease; border: 1px solid rgba(255,255,255,0.3); position: relative; overflow: hidden; } .purchase-button:hover { transform: translateY(-2px); box-shadow: 0 0 20px rgba(250, 240, 197, 0.4); background: linear-gradient(135deg, #ffffff, #ffe4a1); } .purchase-button::before { content: ''; position: absolute; top: 50%; left: 50%; width: 150%; height: 150%; background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, transparent 70%); transform: translate(-50%, -50%) scale(0); transition: transform 0.5s ease; } .purchase-button:hover::before { transform: translate(-50%, -50%) scale(1); } .revelation-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; pointer-events: none; } .ripple-effect { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 10px; height: 10px; background: rgba(255, 255, 255, 0.8); border-radius: 50%; animation: ripple 2s ease-out forwards; } .star-burst { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 70%); animation: burst 2s ease-out forwards; } .light-rays { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 200px; height: 200px; background: conic-gradient( from 0deg, transparent 0deg, rgba(255,255,255,0.2) 90deg, transparent 180deg ); animation: rays 2s linear infinite; } .fade-in-up { opacity: 0; transform: translateY(20px); animation: fadeInUp 0.8s ease-out forwards; } @keyframes ripple { 0% { width: 10px; height: 10px; opacity: 1; } 100% { width: 200%; height: 200%; opacity: 0; } } @keyframes burst { 0% { transform: translate(-50%, -50%) scale(0); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; } } @keyframes rays { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } } .refined-purchase-button { background: rgba(255, 255, 255, 0.9); color: #1a0933; padding: 0.5rem 2rem; border-radius: 9999px; font-weight: 600; font-size: 1rem; font-family: 'Zen Maru Gothic', sans-serif; transition: all 0.3s ease; border: 1px solid rgba(255, 255, 255, 0.5); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 0 10px rgba(250, 240, 197, 0.2); } .refined-purchase-button:hover { transform: translateY(-1px); background: rgba(255, 255, 255, 1); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15), 0 0 15px rgba(250, 240, 197, 0.3); } .product-carousel-item { backface-visibility: hidden; will-change: transform, opacity; } .recommendation-section { position: relative; overflow: hidden; } .animate-gradient-shift { animation: gradientShift 8s ease infinite; } @keyframes gradientShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .crystal-aura { background: radial-gradient(circle at center, rgba(255, 255, 255, 0.2) 0%, rgba(167, 139, 250, 0.1) 30%, transparent 70% ); } .crystal-guidance { position: relative; padding: 0.5rem; border-radius: 0.5rem; background: rgba(255, 255, 255, 0.05); margin: 0.5rem 0; text-align: center; font-style: italic; } .magical-header { animation: magicalAppear 1s ease-out forwards; } @keyframes magicalAppear { 0% { opacity: 0; transform: translateY(-20px); } 100% { opacity: 1; transform: translateY(0); } } .fade-in-up { opacity: 0; transform: translateY(20px); animation: fadeInUp 0.8s ease-out forwards; } `)); } function getGuidanceText(effect) { const guidanceTexts = { protection: "あなたの心と魂を守護するために選ばれた石です", love: "あなたの愛と調和を育むために共鳴した石です", healing: "あなたの癒しと回復を促すために現れた石です", wisdom: "あなたの直感と知恵を高めるために導かれた石です", prosperity: "あなたの豊かさと成功を引き寄せる石です", balance: "あなたの心身のバランスを整える石です", energy: "あなたの生命力とエネルギーを高める石です", peace: "あなたの心に平安をもたらす石です" }; return guidanceTexts[effect] || "あなたの魂が求めていた特別な石です"; }

運命の石との出会いあなたの魂が求める神秘の導き

🌙 魂の声を聴かせてください

✨ 神秘的なアイテム一覧 ✨