{"id":366,"date":"2026-01-24T16:35:43","date_gmt":"2026-01-24T07:35:43","guid":{"rendered":"https:\/\/nisshin.color-chikara.jp\/?page_id=366"},"modified":"2026-01-25T13:06:34","modified_gmt":"2026-01-25T04:06:34","slug":"lp","status":"publish","type":"page","link":"https:\/\/nisshin.color-chikara.jp\/wp\/lp\/","title":{"rendered":"lp"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\n\n \n \n \n \u767d\u9aea\u67d3\u3081\u5c02\u9580\u5e97 \u30ab\u30e9\u30fc\u306e\u3061\u304b\u3089\u65e5\u9032\u7c73\u91ce\u6728\u99c5\u524d\u5e97<\/title>\n \n <!-- React & ReactDOM -->\n <script crossorigin src=\"https:\/\/unpkg.com\/react@18\/umd\/react.development.js\"><\/script>\n <script crossorigin src=\"https:\/\/unpkg.com\/react-dom@18\/umd\/react-dom.development.js\"><\/script>\n \n <!-- Babel for JSX -->\n <script src=\"https:\/\/unpkg.com\/@babel\/standalone\/babel.min.js\"><\/script>\n \n <!-- Tailwind CSS -->\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n \n <!-- Google Fonts -->\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+JP:wght@400;500;700&family=Noto+Serif+JP:wght@400;600;700&family=Zen+Maru+Gothic:wght@500;700&display=swap\" rel=\"stylesheet\">\n \n <!-- Lucide Icons -->\n <script src=\"https:\/\/unpkg.com\/lucide@latest\"><\/script>\n\n <style>\n body {\n font-family: 'Noto Sans JP', sans-serif;\n color: #44403C; \/* Stone 800 *\/\n }\n h1, h2, h3, .serif {\n font-family: 'Noto Serif JP', serif;\n }\n .maru-gothic {\n font-family: 'Zen Maru Gothic', sans-serif;\n }\n .fade-up {\n animation: fadeUp 0.8s ease-out forwards;\n opacity: 0;\n transform: translateY(20px);\n }\n @keyframes fadeUp {\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n .bg-leaf-pattern {\n background-color: #f5f5f4;\n background-image: radial-gradient(#d6d3d1 1px, transparent 1px);\n background-size: 20px 20px;\n }\n <\/style>\n<\/head>\n<body class=\"bg-stone-50\">\n\n <div id=\"root\"><\/div>\n\n <script type=\"text\/babel\">\n const { useState, useEffect } = React;\n\n \/\/ Custom Icons\n const StarIcon = () => (\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" className=\"h-4 w-4 text-yellow-400\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n <path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\" \/>\n <\/svg>\n );\n\n const LineIcon = () => (\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"currentColor\" className=\"w-8 h-8 mr-2\">\n <path d=\"M22.288 9.293c0-4.636-4.996-8.414-11.144-8.414S0 4.657 0 9.293c0 4.14 3.938 7.618 9.328 8.272.363.078.855.24 1 .547.114.246.074.629.04.918-.086.711-.539 2.766-.609 3.031-.094.359-.282 1.344 1.18 1.059.805-.156 4.383-2.586 6.008-4.242 3.297-1.727 5.344-4.594 5.344-8.086\"\/>\n <path fill=\"#fff\" d=\"M22.288 9.293c0-4.636-4.996-8.414-11.144-8.414S0 4.657 0 9.293c0 4.14 3.938 7.618 9.328 8.272.363.078.855.24 1 .547.114.246.074.629.04.918-.086.711-.539 2.766-.609 3.031-.094.359-.282 1.344 1.18 1.059.805-.156 4.383-2.586 6.008-4.242 3.297-1.727 5.344-4.594 5.344-8.086\" opacity=\"0\"\/>\n <\/svg>\n );\n\n const reviewsData = [\n { name: \"\u30c8\u30aa\u30ab\u69d8\", date: \"2026\/01\/11\", content: \"\u30ab\u30e9\u30fc\u306e\u307f\u306a\u3089\u5165\u5e97\u3057\u3066\u304b\u30891\u6642\u9593\u4ee5\u5185\u306b\u7d42\u308f\u308b\u306e\u3067\u3059\u3054\u304f\u6709\u96e3\u3044\u3067\u3059\u3002\u30b9\u30d4\u30fc\u30c7\u30a3\u3067\u52a9\u304b\u308a\u307e\u3059\u3002\", stars: 5 },\n { name: \"\u307e\u3041\u3061\u3083\u3093\u69d8\", date: \"2026\/01\/06\", content: \"\u8981\u671b\u306b\u7b54\u3048\u3066\u304f\u308c\u3066\u3042\u308a\u304c\u3068\u3046\u3002\u3068\u3066\u3082\u6e80\u8db3\u3057\u3066\u3044\u307e\u3059\u3002\", stars: 5 },\n { name: \"\u30c9\u30a8\u30a4\u69d8\", date: \"2025\/12\/31\", content: \"2\u56de\u76ee\u306e\u8a2a\u554f\u3067\u3059\u3002\u5bb6\u5185\u3068\u3053\u306e\u304a\u5e97\u3092\u5229\u7528\u3057\u3066\u304a\u308a\u3001\u6c17\u306b\u5165\u3063\u3066\u307e\u3059\u3002\", stars: 4 },\n { name: \"\u732b3\u5339\u3044\u308b\u3088\u69d8\", date: \"2025\/12\/30\", content: \"\u9aea\u306e\u6bdb\u3064\u3084\u3064\u3084\u306b\u306a\u308b\u3057\u30d8\u30c3\u30c9\u30b9\u30d1\u3059\u3054\u304f\u3044\u3044\u3067\u3059\uff01\uff11\u5ea6\u4f53\u9a13\u3057\u3066\u6b32\u3057\u3044\u3067\u3059\uff01\", stars: 5 },\n { name: \"haru.\u69d8\", date: \"2025\/12\/28\", content: \"\u6bce\u56de\u70ad\u9178\u30b7\u30e3\u30f3\u30d7\u30fc\u5229\u7528\u3057\u3066\u307e\u3059\u3002\u4e01\u5be7\u306b\u6d17\u3063\u3066\u304f\u3060\u3055\u308a\u70ad\u9178\u30b7\u30e3\u30f3\u30d7\u30fc\u3059\u308b\u4e8b\u3067\u5730\u808c\u304c\u30b9\u30c3\u30ad\u30ea\u30ea\u30bb\u30c3\u30c8\u51fa\u6765\u3066\u5927\u5909\u6c17\u6301\u3061\u3088\u304f\u7652\u3055\u308c\u3066\u3044\u307e\u3059\u3002\", stars: 5 },\n { name: \"\u3088\u3061\u3053\u69d8\", date: \"2025\/12\/26\", content: \"\u5168\u4f53\u67d3\u3092\u3057\u307e\u3057\u305f\u3002\u6bdb\u5148\u306e\u65b9\u304c\u8272\u843d\u3061\u3057\u3066\u3044\u305f\u306e\u3067\u3001\u3068\u3066\u3082\u7dba\u9e97\u306b\u4ed5\u4e0a\u304c\u308a\u307e\u3057\u305f\u3002\u6e80\u8db3\u3067\u3059\u3002\u62c5\u5f53\u3055\u308c\u305f\u65b9\u3082\u3001\u3068\u3063\u3066\u3082\u89aa\u5207\u3067\u3057\u305f\u3002\", stars: 5 },\n { name: \"\u3053\u308a\u69d8\", date: \"2025\/12\/18\", content: \"LINE\u30af\u30fc\u30dd\u30f3\u5238\u3092\u5229\u7528\u3057\u3066\u767d\u9aea\u67d3\u3081\u3068\u70ad\u9178\u30af\u30ec\u30f3\u30b8\u30f3\u30b0\u3001\u30c8\u30ea\u30fc\u30c8\u30e1\u30f3\u30c8\u3092\u3057\u3066\u3044\u305f\u3060\u304d\u307e\u3057\u305f\u3002\u8276\u3084\u306f\u308a\u304c\u3067\u3066\u3068\u3066\u3082\u6e80\u8db3\u3067\u3059\u3002\", stars: 5 },\n { name: \"\u3061\u3043\u3061\u3083\u3093\u69d8\", date: \"2025\/12\/04\", content: \"\u30ab\u30e9\u30fc\u306e\u5f8c\u3001\u4f55\u65e5\u304b\u9aea\u306e\u6bdb\u304c\u30ad\u30b7\u30ad\u30b7\u3057\u304c\u3061\u3067\u3059\u304c\u3001\u3053\u3053\u3067\u67d3\u3081\u308b\u3068\u30b5\u30e9\u30b5\u30e9\u306b\u306a\u308a\u307e\u3059\u3002\", stars: 5 },\n { name: \"\u3061\u3073\u3053\u69d8\", date: \"2025\/11\/19\", content: \"\u30b9\u30bf\u30c3\u30d5\u3055\u3093\u3082\u3001\u3059\u3054\u304f\u611f\u3058\u304c\u826f\u304f\u3066\u3001\u624b\u969b\u3088\u304f\u6280\u8853\u3082\u826f\u3044\u3068\u611f\u3058\u307e\u3059\u3002\", stars: 4 },\n { name: \"\u732b\u3055\u3093\u69d8\", date: \"2025\/11\/18\", content: \"\u4e01\u5be7\u306a\u65bd\u8853\u3067\u3068\u3066\u3082\u30d5\u30ec\u30f3\u30c9\u30ea\u30fc\u3067\u5b89\u5fc3\u3057\u3066\u4efb\u305b\u3089\u308c\u307e\u3059\u3002\u9aea\u8cea\u3082\u30b5\u30e9\u30b5\u30e9\u306b\u306a\u3063\u3066\u3073\u3063\u304f\u308a\u3057\u307e\u3059\u3002\", stars: 5 },\n { name: \"\u30b8\u30e3\u30e0\u69d8\", date: \"2025\/11\/09\", content: \"\u4e88\u7d04\u5236\u3067\u5f85\u3061\u6642\u9593\u304c\u306a\u304f\u3001\u30b3\u30b9\u30d1\u3082\u826f\u304f\u3001\u3057\u3063\u304b\u308a\u67d3\u307e\u308b\u306e\u3067\u30ea\u30d4\u30fc\u30bf\u30fc\u306b\u306a\u308a\u307e\u3057\u305f\u3002\u67d3\u3081\u65b9\u3084\u6d17\u3044\u65b9\u3082\u4e01\u5be7\u3067\u826f\u3044\u3067\u3059\u3002\", stars: 5 },\n { name: \"\u864e\u30de\u30de\u69d8\", date: \"2025\/10\/17\", content: \"\u307b\u3093\u3068\u306b\u9aea\u8cea\u6539\u5584\u3055\u308c\u307e\u3059\uff01\u8272\u5473\u3082\u4e01\u5be7\u306b\u30ab\u30a6\u30bb\u30ea\u30f3\u30b0\u3057\u3066\u3082\u3089\u3048\u3001\u65bd\u8853\u3082\u3068\u3066\u3082\u4e01\u5be7\u306b\u3057\u3066\u3082\u3089\u3048\u307e\u3059\uff01\uff01\", stars: 5 },\n { name: \"\u307f\u30fc\u3054\u308d\u3046\u69d8\", date: \"2025\/10\/19\", content: \"\u3044\u3064\u3082\u4e01\u5be7\u306a\u65bd\u8853\u3067\u3068\u3066\u3082\u6e80\u8db3\u3057\u3066\u3044\u307e\u3059\u3002\u30b9\u30bf\u30c3\u30d5\u3055\u3093\u3082\u3069\u306a\u305f\u3082\u611f\u3058\u304c\u826f\u304f\u30b7\u30e3\u30f3\u30d7\u30fc\u3082\u3068\u3066\u3082\u4e01\u5be7\u3067\u6c17\u6301\u3061\u304c\u3044\u3044\u3067\u3059\u3002\", stars: 5 },\n { name: \"\u307e\u3055\u307f\u69d8\", date: \"2025\/10\/01\", content: \"\u3044\u3064\u3082\u624b\u65e9\u3044\u306a\u304c\u3089\u3082\u4e01\u5be7\u306b\u85ac\u5264\u3092\u5857\u3063\u3066\u3044\u305f\u3060\u304d\u3001\u30b7\u30e3\u30f3\u30d7\u30fc\u3082\u6c17\u6301\u3061\u826f\u304f\u3066\u6e80\u8db3\u3067\u3059\u3002\u30c8\u30ea\u30fc\u30c8\u30e1\u30f3\u30c8\u3082\u3057\u3066\u3082\u3089\u3063\u3066\u30b5\u30e9\u30b5\u30e9\u306b\u306a\u308a\u307e\u3057\u305f\uff01\", stars: 5 },\n { name: \"\u3046\u30fc\u69d8\", date: \"2025\/09\/27\", content: \"\u3044\u3064\u3082\u304a\u4e16\u8a71\u306b\u306a\u3063\u3066\u3044\u307e\u3059\u3002\u67d3\u3081\u4e0a\u304c\u308a\u304c\u3068\u3066\u3082\u901f\u3044\u306e\u3067\u52a9\u304b\u3063\u3066\u3044\u307e\u3059\u3002\u30ab\u30e9\u30fc\u72ec\u7279\u306e\u5302\u3044\u3082\u307b\u3068\u3093\u3069\u306a\u304f\u3001\u75d2\u307f\u3082\u306a\u3044\u306e\u3067\u52a9\u304b\u308a\u307e\u3059\u3002\", stars: 4 },\n { name: \"\u3082\u3082\u3061\u308a\u69d8\", date: \"2025\/10\/30\", content: \"\uff16\u56de\u76ee\u3067\u3059\u3002\u30af\u30bb\u304c\u3072\u3069\u304f\u3066\u307e\u3068\u307e\u308a\u306b\u304f\u304b\u3063\u305f\u9aea\u304c\u3001\u843d\u3061\u7740\u3044\u3066\u304d\u307e\u3057\u305f\u3002\u6bce\u65e5\u306e\u304a\u624b\u5165\u308c\u304c\u697d\u306b\u306a\u3063\u3066\u3001\u3068\u3066\u3082\u5b09\u3057\u3044\u3067\u3059\uff01\", stars: 5 },\n { name: \"\u30b4\u30fc\u30df\u30fc\u69d8\", date: \"2025\/07\/22\", content: \"\u767d\u9aea\u67d3\u3081\u3082\u3001\u6e80\u8db3\u3057\u3066\u3044\u307e\u3059\u304c\u3001\u30b9\u30bf\u30c3\u30d5\u3055\u3093\u306e\u63a5\u5ba2\u304c\u3068\u3066\u3082\u826f\u304f\u3066\u304a\u5e97\u306b\u5c45\u308b1\u6642\u9593\u3068\u3066\u3082\u7652\u3084\u3055\u308c\u307e\u3059\u3002\", stars: 5 },\n { name: \"\u307f\u3044\u69d8\", date: \"2025\/07\/04\", content: \"\u5e97\u5185\u3082\u7dba\u9e97\u306b\u6e05\u6383\u3055\u308c\u3066\u3044\u307e\u3059\u3002\u3068\u3066\u3082\u7dba\u9e97\u306b\u67d3\u307e\u308a\u3001\u6e80\u8db3\u3067\u3059\u3002\u30b9\u30bf\u30c3\u30d5\u306e\u65b9\u3005\u306e\u63a5\u5ba2\u3082\uff64\u4e01\u5be7\u597d\u611f\u304c\u6301\u3066\u307e\u3059\u3002\", stars: 5 },\n { name: \"\u3086\u3063\u307f\u69d8\", date: \"2025\/03\/06\", content: \"\u81ea\u5206\u3067\u306f\u4e0a\u624b\u304f\u3067\u304d\u306a\u3044\u3046\u3048\u306b\u30d1\u30b5\u30d1\u30b5\u306b\u306a\u308a\u304c\u3061\u306a\u306e\u306b\u3001\u3053\u3093\u306a\u306b\u7dba\u9e97\u306b\u3057\u3066\u3082\u3089\u3048\u3066\u3059\u3053\u304f\u6c17\u306b\u5165\u308a\u307e\u3057\u305f\u3002\u307e\u305f\u884c\u304d\u307e\u3059\u3002\", stars: 5 },\n { name: \"\u3072\u3068\u307f\u69d8\", date: \"2025\/03\/20\", content: \"\u6bce\u56de\u5927\u5909\u304a\u4e16\u8a71\u306b\u306a\u3063\u3066\u307e\u3059\u3002\u30ab\u30e9\u30fc\u306f\u3082\u3061\u308d\u3093\u30b9\u30bf\u30c3\u30d5\u3055\u3093\u3082\u3068\u3066\u3082\u6c17\u306b\u5165\u3063\u3066\u3044\u307e\u3059\u3002\u70ad\u9178\u30b7\u30e3\u30f3\u30d7\u30fc\u30aa\u30b9\u30b9\u30e1\u3067\u3059\u3002\", stars: 5 }\n ];\n\n const App = () => {\n const [scrolled, setScrolled] = useState(false);\n const [showAllReviews, setShowAllReviews] = useState(false);\n\n useEffect(() => {\n const handleScroll = () => {\n setScrolled(window.scrollY > 50);\n };\n window.addEventListener('scroll', handleScroll);\n return () => window.removeEventListener('scroll', handleScroll);\n }, []);\n\n const displayedReviews = showAllReviews ? reviewsData : reviewsData.slice(0, 6);\n\n return (\n <div className=\"min-h-screen flex flex-col relative pb-24 md:pb-0 font-sans text-stone-700\">\n \n {\/* Header *\/}\n <header className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${scrolled ? 'bg-white\/95 shadow-md py-2' : 'bg-transparent py-4'}`}>\n <div className=\"container mx-auto px-4 flex justify-between items-center\">\n <h1 className=\"text-xl md:text-2xl font-bold text-green-800 tracking-wide flex items-center gap-2\">\n <span className=\"bg-green-700 text-white w-8 h-8 rounded-full flex items-center justify-center text-sm font-serif\">\u529b<\/span>\n \u30ab\u30e9\u30fc\u306e\u3061\u304b\u3089\u65e5\u9032\u7c73\u91ce\u6728\u99c5\u524d\u5e97\n <\/h1>\n <a\n href=\"https:\/\/lin.ee\/hKNtKLt\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n onClick={() => {\n if (typeof window.ytag === \"function\") {\n window.ytag({\n type: \"yss_conversion\",\n config: {\n yahoo_conversion_id: \"1001380770\",\n yahoo_conversion_label: \"3a9ZCNfahOwbEJy0uOxB\",\n yahoo_conversion_value: \"0\",\n },\n });\n }\n }}\n className=\"hidden md:flex bg-[#06C755] hover:bg-[#05b34c] text-white px-6 py-2 rounded-full font-bold items-center gap-2 transition-transform hover:scale-105 shadow-lg\"\n>\n <LineIcon \/>\n LINE\u3067\u4e88\u7d04\u3059\u308b\n<\/a>\n <\/div>\n <\/header>\n\n {\/* Hero Section *\/}\n <section className=\"relative pt-24 pb-16 md:pt-32 md:pb-24 overflow-hidden bg-stone-50\">\n <div className=\"container mx-auto px-4 relative z-10\">\n <div className=\"flex flex-col md:flex-row items-center gap-8 md:gap-16\">\n {\/* Text Content *\/}\n <div className=\"md:w-1\/2 fade-up relative z-10 order-2 md:order-1\">\n <p className=\"text-green-700 font-bold tracking-widest mb-4 bg-green-100 inline-block px-4 py-1 rounded-full text-sm md:text-base\">\n 40\u4ee3\u304b\u3089\u306e\u9aea\u3092\u3001\u3082\u3063\u3068\u7f8e\u3057\u304f\u3002\n <\/p>\n <h2 className=\"text-4xl md:text-5xl lg:text-6xl font-serif font-bold text-stone-800 leading-tight mb-6\">\n \u67d3\u3081\u308b\u305f\u3073\u3001<br\/>\n <span className=\"text-green-700\">\u81ea\u4fe1<\/span>\u304c\u6e80\u3061\u308b<br\/>\n \u5927\u4eba\u306e\u8276\u30ab\u30e9\u30fc\u3002\n <\/h2>\n <p className=\"text-lg md:text-xl text-stone-700 mb-8 leading-relaxed font-medium\">\n \u300c\u305f\u3060\u67d3\u307e\u308c\u3070\u3044\u3044\u300d\u306f\u5352\u696d\u3057\u307e\u305b\u3093\u304b\uff1f<br\/>\n \u8cea\u611f\u306b\u3053\u3060\u308f\u308b\u3001\u5927\u4eba\u306e\u305f\u3081\u306e\u767d\u9aea\u67d3\u3081\u5c02\u9580\u5e97\u3002\n <\/p>\n \n <div className=\"bg-white\/90 backdrop-blur-sm p-6 rounded-2xl shadow-xl border border-green-100 max-w-md\">\n <div className=\"flex items-start gap-4 mb-4\">\n <div className=\"bg-red-50 text-red-500 font-bold px-3 py-1 rounded text-xs border border-red-200 shrink-0 mt-1\">\n \u91cd\u8981\n <\/div>\n <p className=\"text-sm text-stone-600\">\n \u73fe\u5728\u3001<strong className=\"text-red-600 border-b-2 border-red-200\">\u3054\u4e88\u7d04\u306e80%\u4ee5\u4e0a\u304c\u30ea\u30d4\u30fc\u30bf\u30fc\u69d8<\/strong>\u3067\u57cb\u307e\u3063\u3066\u304a\u308a\u307e\u3059\u3002\u7a7a\u304d\u67a0\u3092\u898b\u3064\u3051\u305f\u3089\u304a\u65e9\u3081\u306b\u3054\u4e88\u7d04\u304f\u3060\u3055\u3044\u3002\n <\/p>\n <\/div>\n <a\n href=\"https:\/\/lin.ee\/hKNtKLt\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n onClick={() => {\n if (typeof window.ytag === \"function\") {\n window.ytag({\n type: \"yss_conversion\",\n config: {\n yahoo_conversion_id: \"1001380770\",\n yahoo_conversion_label: \"3a9ZCNfahOwbEJy0uOxB\",\n yahoo_conversion_value: \"0\",\n },\n });\n }\n }}\n className=\"w-full bg-[#06C755] hover:bg-[#05b34c] text-white py-4 rounded-xl font-bold text-lg flex justify-center items-center shadow-md transition-all hover:shadow-lg\"\n>\n LINE\u3067\u7a7a\u304d\u72b6\u6cc1\u3092\u78ba\u8a8d\u3059\u308b\n<\/a>\n <\/div>\n <\/div>\n \n {\/* Hero Image *\/}\n <div className=\"md:w-1\/2 order-1 md:order-2 fade-up relative\">\n <div className=\"relative rounded-bl-[80px] rounded-tr-[80px] overflow-hidden shadow-2xl border-4 border-white\">\n {\/* \u3053\u3053\u306b yoko3.jpg \u3092\u8a2d\u5b9a\u3057\u3066\u304f\u3060\u3055\u3044\u3002\n \u4f8b: <img decoding=\"async\" src=\".\/yoko3.jpg\" ... \/>\n \u73fe\u5728\u306f\u30c0\u30df\u30fc\u753b\u50cf\u3092\u4f7f\u7528\u3057\u3066\u3044\u307e\u3059\u3002\n *\/}\n <img decoding=\"async\" \n src=\"https:\/\/ichinomiya1.color-chikara.jp\/wp-content\/uploads\/2025\/03\/\u3086\u304c\u307f\u3092.png\" \n alt=\"\u7f8e\u3057\u3044\u9aea\u306e\u65e5\u672c\u4eba\u5973\u6027\" \n className=\"w-full h-[400px] md:h-[500px] object-cover hover:scale-105 transition-transform duration-700\"\n \/>\n {\/* Decorative elements *\/}\n <div className=\"absolute -bottom-4 -left-4 bg-green-100 w-24 h-24 rounded-full -z-10\"><\/div>\n <div className=\"absolute top-4 right-4 bg-yellow-100\/50 w-16 h-16 rounded-full -z-10\"><\/div>\n <\/div>\n <div className=\"absolute -bottom-6 -right-6 md:right-10 bg-white p-4 rounded-xl shadow-lg flex items-center gap-3\">\n <div className=\"bg-green-100 p-2 rounded-full\">\n <StarIcon \/>\n <\/div>\n <div>\n <p className=\"text-xs text-stone-500 font-bold uppercase\">\u304a\u5ba2\u69d8\u5e73\u5747\u53e3\u30b3\u30df\u8a55\u4fa1<\/p>\n <p className=\"text-green-800 font-bold text-lg\">4.8 \/ 5.0<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n {\/* Empathy \/ Problem Section *\/}\n <section className=\"py-20 bg-white\">\n <div className=\"container mx-auto px-4 text-center\">\n <h3 className=\"text-2xl md:text-3xl font-serif font-bold text-stone-800 mb-12 flex flex-col items-center\">\n <span className=\"text-base text-green-600 font-sans font-bold tracking-wider mb-2\">\u3053\u3093\u306a\u304a\u60a9\u307f\u3042\u308a\u307e\u305b\u3093\u304b\uff1f<\/span>\n \u6700\u8fd1\u3001\u9aea\u306e\u66f2\u304c\u308a\u89d2\u3092\u611f\u3058\u3066\u3044\u308b\u3042\u306a\u305f\u3078\n <\/h3>\n \n <div className=\"grid md:grid-cols-3 gap-8 max-w-5xl mx-auto\">\n {[\n { img: \"https:\/\/nisshin.color-chikara.jp\/wp-content\/uploads\/2026\/01\/cc1.png\", text: \"\u983b\u7e41\u306b\u67d3\u3081\u305f\u3044\u3051\u3069\u3001\u9aea\u3084\u982d\u76ae\u3078\u306e\u30c0\u30e1\u30fc\u30b8\u304c\u5fc3\u914d...\" },\n { img: \"https:\/\/nisshin.color-chikara.jp\/wp-content\/uploads\/2026\/01\/cc2.png\", text: \"\u5b89\u3044\u30ab\u30e9\u30fc\u5c02\u9580\u5e97\u306b\u884c\u3063\u305f\u3089\u3001\u9aea\u304c\u30d1\u30b5\u30d1\u30b5\u306b\u306a\u3063\u305f...\" },\n { img: \"https:\/\/nisshin.color-chikara.jp\/wp-content\/uploads\/2026\/01\/cc3.png\", text: \"\u7f8e\u5bb9\u5ba4\u306e\u30ab\u30e9\u30fc\u306f\u6642\u9593\u304c\u304b\u304b\u308b\u3057\u3001\u6599\u91d1\u3082\u9ad8\u3044...\" }\n ].map((item, idx) => (\n <div key={idx} className=\"bg-stone-50 rounded-2xl overflow-hidden shadow-sm hover:shadow-md transition-shadow\">\n <div className=\"h-48 overflow-hidden\">\n <img src={item.img} alt=\"\u60a9\u307f\u30a4\u30e1\u30fc\u30b8\" className=\"w-full h-full object-cover transition-transform hover:scale-105 duration-500\" \/>\n <\/div>\n <div className=\"p-6\">\n <div className=\"flex justify-center -mt-10 mb-4\">\n <div className=\"bg-stone-50 p-2 rounded-full\">\n <div className=\"bg-gray-200 w-8 h-8 rounded-full flex items-center justify-center text-gray-500 font-bold\">?<\/div>\n <\/div>\n <\/div>\n <p className=\"text-lg font-medium text-stone-700 leading-relaxed text-left\">\n <span className=\"text-green-600 font-bold text-xl block mb-2\">0{idx + 1}.<\/span>\n {item.text}\n <\/p>\n <\/div>\n <\/div>\n ))}\n <\/div>\n\n <div className=\"mt-16 bg-green-50 p-8 rounded-3xl max-w-4xl mx-auto border border-green-100\">\n <p className=\"text-xl md:text-2xl font-serif text-green-800 font-bold leading-relaxed\">\n \u305d\u306e\u304a\u60a9\u307f\u3001<br className=\"md:hidden\"\/>\u300c\u30ab\u30e9\u30fc\u306e\u3061\u304b\u3089\u300d\u306b\u304a\u4efb\u305b\u304f\u3060\u3055\u3044\u3002<br\/>\n <span className=\"text-base md:text-lg font-sans font-normal text-stone-600 mt-4 block\">\n \u79c1\u305f\u3061\u306f\u3001\u305f\u3060\u67d3\u3081\u308b\u3060\u3051\u3067\u306f\u3042\u308a\u307e\u305b\u3093\u3002<br\/>\n \u9aea\u672c\u6765\u306e\u7f8e\u3057\u3055\u3092\u5f15\u304d\u51fa\u3059\u300c\u8cea\u611f\u300d\u306b\u3068\u3053\u3068\u3093\u3053\u3060\u308f\u308a\u307e\u3057\u305f\u3002\n <\/span>\n <\/p>\n <\/div>\n <\/div>\n <\/section>\n\n {\/* Solutions \/ Features *\/}\n <section className=\"py-20 bg-stone-100 bg-leaf-pattern\">\n <div className=\"container mx-auto px-4\">\n <div className=\"text-center mb-16\">\n <span className=\"text-green-600 font-bold tracking-widest text-sm uppercase\">Our Policy<\/span>\n <h2 className=\"text-3xl md:text-4xl font-serif font-bold text-stone-800 mt-2\">\n \u9078\u3070\u308c\u7d9a\u3051\u308b<br className=\"md:hidden\"\/>\u300c3\u3064\u306e\u7406\u7531\u300d\n <\/h2>\n <\/div>\n\n {\/* Reason 1 *\/}\n <div className=\"bg-white rounded-3xl p-6 md:p-12 shadow-lg mb-12 max-w-5xl mx-auto flex flex-col md:flex-row items-center gap-8 md:gap-16\">\n <div className=\"md:w-1\/2\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1560066984-138dadb4c035?auto=format&fit=crop&q=80&w=800\" alt=\"\u9ad8\u54c1\u8cea\u306a\u85ac\u5264\" className=\"rounded-2xl w-full h-64 object-cover shadow-md\" \/>\n <\/div>\n <div className=\"md:w-1\/2 text-left\">\n <h3 className=\"text-2xl font-bold text-green-800 mb-4 flex items-center\">\n <span className=\"bg-green-700 text-white text-lg rounded-full w-10 h-10 flex items-center justify-center mr-3 font-serif\">1<\/span>\n \u6700\u9ad8\u7d1a\u306e\u85ac\u5264\u3092\u4f7f\u7528\n <\/h3>\n <p className=\"text-lg text-stone-600 leading-loose\">\n \u4e00\u822c\u7684\u306a\u30ab\u30e9\u30fc\u5c02\u9580\u5e97\u3068\u306f\u9055\u3044\u3001\u7f8e\u5bb9\u5ba4\u3067\u3082\u30c8\u30c3\u30d7\u30af\u30e9\u30b9\u306e\u9ad8\u54c1\u8cea\u306a\u767d\u9aea\u67d3\u3081\u30ab\u30e9\u30fc\u6750\u3092\u4f7f\u7528\u3002<br\/>\n <strong className=\"text-green-700 bg-green-50 px-1\">\u30ab\u30e9\u30fc\u6750\u306f\u81ea\u793e\u958b\u767a\u306e\u30a4\u30aa\u30f3\u306e\u529b\u3067\u9aea\u8cea\u6539\u5584\u3059\u308b\u767d\u9aea\u67d3\u3081<\/strong>\u3002\u7e70\u308a\u8fd4\u3059\u307b\u3069\u306b\u81ea\u7136\u306a\u30c4\u30e4\u304c\u751f\u307e\u308c\u307e\u3059\u3002\n <\/p>\n <\/div>\n <\/div>\n\n {\/* Reason 2 *\/}\n <div className=\"bg-white rounded-3xl p-6 md:p-12 shadow-lg mb-12 max-w-5xl mx-auto flex flex-col md:flex-row-reverse items-center gap-8 md:gap-16\">\n <div className=\"md:w-1\/2\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1540555700478-4be289fbecef?auto=format&fit=crop&q=80&w=800\" alt=\"\u30b5\u30ed\u30f3\u30af\u30aa\u30ea\u30c6\u30a3\u306e\u30b7\u30e3\u30f3\u30d7\u30fc\" className=\"rounded-2xl w-full h-64 object-cover shadow-md\" \/>\n <\/div>\n <div className=\"md:w-1\/2 text-left\">\n <h3 className=\"text-2xl font-bold text-green-800 mb-4 flex items-center\">\n <span className=\"bg-green-700 text-white text-lg rounded-full w-10 h-10 flex items-center justify-center mr-3 font-serif\">2<\/span>\n \u6975\u4e0a\u306e\u30d8\u30a2\u30b1\u30a2\u4f53\u9a13\n <\/h3>\n <p className=\"text-lg text-stone-600 leading-loose\">\n \u300c\u5b89\u3044\u304b\u3089\u30b7\u30e3\u30f3\u30d7\u30fc\u306f\u96d1\u300d\u306a\u3093\u3066\u3053\u3068\u306f\u3042\u308a\u307e\u305b\u3093\u3002<br\/>\n \u901a\u5e38\u306e\u7f8e\u5bb9\u5ba4\u3068\u540c\u7b49\u4ee5\u4e0a\u306e<strong className=\"text-green-700 bg-green-50 px-1\">\u9ad8\u54c1\u8cea\u30b7\u30e3\u30f3\u30d7\u30fc\uff06\u30c8\u30ea\u30fc\u30c8\u30e1\u30f3\u30c8<\/strong>\u3092\u4f7f\u7528\u3002\u30d7\u30ed\u306e\u624b\u306b\u3088\u308b\u4e01\u5be7\u306a\u30b7\u30e3\u30f3\u30d7\u30fc\u3067\u3001\u982d\u76ae\u306e\u6c5a\u308c\u3082\u3057\u3063\u304b\u308a\u843d\u3068\u3057\u3001\u30ea\u30e9\u30c3\u30af\u30b9\u3057\u305f\u3072\u3068\u3068\u304d\u3092\u3054\u63d0\u4f9b\u3057\u307e\u3059\u3002\n <\/p>\n <\/div>\n <\/div>\n\n {\/* Reason 3 *\/}\n <div className=\"bg-white rounded-3xl p-6 md:p-12 shadow-lg max-w-5xl mx-auto flex flex-col md:flex-row items-center gap-8 md:gap-16\">\n <div className=\"md:w-1\/2\">\n <div className=\"bg-green-100 w-full h-64 rounded-2xl flex items-center justify-center shadow-inner\">\n <div className=\"text-center\">\n <p className=\"text-stone-600 text-sm mb-2\">\u767d\u9aea\u67d3\u3081\uff08\u30ea\u30bf\u30c3\u30c1\uff09<\/p>\n <p className=\"text-5xl font-bold text-green-700 maru-gothic tracking-tighter\">\n \u00a53,850~\n <\/p>\n <p className=\"text-stone-500 text-xs mt-2\">\u203b\u7a0e\u8fbc\u4fa1\u683c\u30fb\u30b7\u30e3\u30f3\u30d7\u30fc\u8fbc<\/p>\n <\/div>\n <\/div>\n <\/div>\n <div className=\"md:w-1\/2 text-left\">\n <h3 className=\"text-2xl font-bold text-green-800 mb-4 flex items-center\">\n <span className=\"bg-green-700 text-white text-lg rounded-full w-10 h-10 flex items-center justify-center mr-3 font-serif\">3<\/span>\n \u901a\u3044\u7d9a\u3051\u3089\u308c\u308b\u9069\u6b63\u4fa1\u683c\n <\/h3>\n <p className=\"text-lg text-stone-600 leading-loose\">\n \u30d6\u30ed\u30fc\u3092\u304a\u5ba2\u69d8\u3054\u81ea\u8eab\u3067\u884c\u3063\u3066\u3044\u305f\u3060\u304f\u300c\u30bb\u30eb\u30d5\u30d6\u30ed\u30fc\u300d\u65b9\u5f0f\u3092\u63a1\u7528\u3059\u308b\u3053\u3068\u3067\u3001\u85ac\u5264\u3084\u30b1\u30a2\u306e\u54c1\u8cea\u306f\u843d\u3068\u3055\u305a\u306b\u3001\u30ea\u30fc\u30ba\u30ca\u30d6\u30eb\u306a\u4fa1\u683c\u3092\u5b9f\u73fe\u3057\u307e\u3057\u305f\u3002<br\/>\n <strong className=\"text-green-700 bg-green-50 px-1\">\u300c\u7dba\u9e97\u300d\u3092\u6211\u6162\u305b\u305a\u3001\u6c17\u306b\u306a\u3063\u305f\u6642\u306b\u3059\u3050\u901a\u3048\u308b<\/strong>\u4fa1\u683c\u8a2d\u5b9a\u3067\u3059\u3002\n <\/p>\n <\/div>\n <\/div>\n\n <\/div>\n <\/section>\n\n {\/* Voice \/ Repeat Rate *\/}\n <section className=\"py-20 bg-green-900 text-white relative overflow-hidden\">\n <div className=\"absolute top-0 left-0 w-full h-full opacity-10 pointer-events-none\">\n <svg width=\"100%\" height=\"100%\">\n <pattern id=\"leaf\" x=\"0\" y=\"0\" width=\"40\" height=\"40\" patternUnits=\"userSpaceOnUse\">\n <path d=\"M20 0C10 0 0 10 0 20s10 20 20 20 20-10 20-20S30 0 20 0z\" fill=\"currentColor\"\/>\n <\/pattern>\n <rect width=\"100%\" height=\"100%\" fill=\"url(#leaf)\"\/>\n <\/svg>\n <\/div>\n <div className=\"container mx-auto px-4 text-center relative z-10\">\n <h2 className=\"text-3xl md:text-5xl font-serif font-bold mb-8 text-yellow-50\">\n \u304a\u304b\u3052\u3055\u307e\u3067\u3001<br\/>\n \u30ea\u30d4\u30fc\u30c8\u7387 <span className=\"text-6xl md:text-7xl\">80%<\/span> \u8d85\u3002\n <\/h2>\n <p className=\"text-lg md:text-xl leading-loose max-w-3xl mx-auto mb-10 text-green-100\">\n \u300c\u3082\u3046\u4ed6\u306e\u5e97\u306b\u306f\u884c\u3051\u306a\u3044\u300d\u300c\u9aea\u306e\u8abf\u5b50\u304c\u826f\u304f\u306a\u3063\u305f\u300d\u3068\u3001<br\/>\n \u591a\u304f\u306e\u304a\u5ba2\u69d8\u306b\u9577\u304f\u611b\u7528\u3057\u3066\u3044\u305f\u3060\u3044\u3066\u304a\u308a\u307e\u3059\u3002<br\/>\n \u305d\u306e\u305f\u3081\u3001\u3054\u4e88\u7d04\u67a0\u304c\u57cb\u307e\u308a\u3084\u3059\u304f\u306a\u3063\u3066\u304a\u308a\u307e\u3059\u3002\n <\/p>\n \n {\/* Reviews Grid *\/}\n <div className=\"max-w-6xl mx-auto px-2\">\n <div className=\"grid md:grid-cols-2 lg:grid-cols-3 gap-6 text-left\">\n {displayedReviews.map((review, idx) => (\n <div key={idx} className=\"bg-white text-stone-800 p-6 rounded-lg shadow-lg relative transform transition hover:-translate-y-1\">\n <div className=\"flex justify-between items-start mb-2\">\n <div className=\"flex text-yellow-400\">\n {[...Array(review.stars)].map((_, i) => <StarIcon key={i} \/>)}\n <\/div>\n <span className=\"text-xs text-stone-400\">{review.date}<\/span>\n <\/div>\n <p className=\"text-sm font-bold text-green-800 mb-1\">{review.name}<\/p>\n <p className=\"text-sm text-stone-600 leading-relaxed\">{review.content}<\/p>\n <\/div>\n ))}\n <\/div>\n \n {reviewsData.length > 6 && (\n <button \n onClick={() => setShowAllReviews(!showAllReviews)}\n className=\"mt-10 bg-white\/20 hover:bg-white\/30 text-white border border-white\/50 px-8 py-3 rounded-full font-bold transition-all\"\n >\n {showAllReviews ? \"\u53e3\u30b3\u30df\u3092\u9589\u3058\u308b\" : \"\u3059\u3079\u3066\u306e\u304a\u5ba2\u69d8\u306e\u58f0\u3092\u898b\u308b\"}\n <\/button>\n )}\n <\/div>\n\n <\/div>\n <\/section>\n\n {\/* Menu \/ Price *\/}\n <section className=\"py-20 bg-white\" id=\"menu\">\n <div className=\"container mx-auto px-4 max-w-3xl\">\n <div className=\"text-center mb-12\">\n <h2 className=\"text-3xl font-serif font-bold text-green-800\">Menu & Price<\/h2>\n <p className=\"text-stone-500 mt-2\">\u308f\u304b\u308a\u3084\u3059\u3044\u30e1\u30cb\u30e5\u30fc\u3068\u30aa\u30d7\u30b7\u30e7\u30f3<\/p>\n <\/div>\n \n <div className=\"space-y-4\">\n {\/* Item 1 *\/}\n <div className=\"flex justify-between items-end border-b-2 border-dotted border-stone-300 pb-4\">\n <div>\n <h4 className=\"text-xl font-bold text-stone-700\">\u6839\u5143\u67d3\u3081\uff08\u30ea\u30bf\u30c3\u30c1\uff09<\/h4>\n <p className=\"text-sm text-stone-500 mt-1\">\u6839\u51432cm\u307e\u3067 \/ \u30b7\u30e3\u30f3\u30d7\u30fc\u4ed8<\/p>\n <\/div>\n <div className=\"text-2xl font-bold text-green-700\">\u00a53,850<span className=\"text-sm text-stone-500 font-normal ml-1\">\uff08\u7a0e\u8fbc\uff09<\/span><\/div>\n <\/div>\n {\/* Item 2 *\/}\n <div className=\"flex justify-between items-end border-b-2 border-dotted border-stone-300 pb-4\">\n <div>\n <h4 className=\"text-xl font-bold text-stone-700\">\u5168\u4f53\u67d3\u3081\uff08\u30b7\u30e7\u30fc\u30c8\uff09<\/h4>\n <p className=\"text-sm text-stone-500 mt-1\">\u984e\u30e9\u30a4\u30f3\u307e\u3067 \/ \u30b7\u30e3\u30f3\u30d7\u30fc\u4ed8<\/p>\n <\/div>\n <div className=\"text-2xl font-bold text-green-700\">\u00a54,400<span className=\"text-sm text-stone-500 font-normal ml-1\">\uff08\u7a0e\u8fbc\uff09<\/span><\/div>\n <\/div>\n {\/* Item 3 *\/}\n <div className=\"flex justify-between items-end border-b-2 border-dotted border-stone-300 pb-4\">\n <div>\n <h4 className=\"text-xl font-bold text-stone-700\">\u5168\u4f53\u67d3\u3081\uff08\u30df\u30c7\u30a3\u30a2\u30e0\uff09<\/h4>\n <p className=\"text-sm text-stone-500 mt-1\">\u80a9\u306b\u3064\u304f\u30e9\u30a4\u30f3 \/ \u30b7\u30e3\u30f3\u30d7\u30fc\u4ed8<\/p>\n <\/div>\n <div className=\"text-2xl font-bold text-green-700\">\u00a54,950<span className=\"text-sm text-stone-500 font-normal ml-1\">\uff08\u7a0e\u8fbc\uff09<\/span><\/div>\n <\/div>\n {\/* Item 4 *\/}\n <div className=\"flex justify-between items-end border-b-2 border-dotted border-stone-300 pb-4\">\n <div>\n <h4 className=\"text-xl font-bold text-stone-700\">\u5168\u4f53\u67d3\u3081\uff08\u30ed\u30f3\u30b0\uff09<\/h4>\n <p className=\"text-sm text-stone-500 mt-1\">\u80a9\u4e0b\u30e9\u30a4\u30f3 \/ \u30b7\u30e3\u30f3\u30d7\u30fc\u4ed8<\/p>\n <\/div>\n <div className=\"text-2xl font-bold text-green-700\">\u00a55,500<span className=\"text-sm text-stone-500 font-normal ml-1\">\uff08\u7a0e\u8fbc\uff09<\/span><\/div>\n <\/div>\n <\/div>\n\n <div className=\"mt-8 bg-green-50 p-6 rounded-xl border border-green-100\">\n <h4 className=\"text-lg font-bold text-green-800 mb-4 text-center border-b border-green-200 pb-2\">\u304a\u5f97\u306a\u30aa\u30d7\u30b7\u30e7\u30f3\u30b3\u30fc\u30b9<\/h4>\n <div className=\"space-y-3\">\n <div className=\"flex justify-between items-center\">\n <span className=\"font-medium text-stone-700\">\u70ad\u9178\u30b7\u30e3\u30ef\u30fc\u30b3\u30fc\u30b9<\/span>\n <span className=\"font-bold text-green-700\">\uff0b\u00a51,100<\/span>\n <\/div>\n <div className=\"flex justify-between items-center\">\n <span className=\"font-medium text-stone-700\">\u7f8e\u9aea\u30c8\u30ea\u30fc\u30c8\u30e1\u30f3\u30c8\u30b3\u30fc\u30b9<\/span>\n <span className=\"font-bold text-green-700\">\uff0b\u00a52,200<\/span>\n <\/div>\n <div className=\"flex justify-between items-center\">\n <span className=\"font-medium text-stone-700\">\u30b9\u30da\u30b7\u30e3\u30ea\u30c6\u30b3\u30fc\u30b9<\/span>\n <span className=\"font-bold text-green-700\">\uff0b\u00a53,300<\/span>\n <\/div>\n <\/div>\n <\/div>\n \n <div className=\"mt-4 bg-stone-100 p-6 rounded-xl text-center\">\n <p className=\"text-stone-600 font-medium\">\n \u203b \u304a\u652f\u6255\u3044\u306f\u73fe\u91d1\u3001\u307e\u305f\u306fPayPay\u304c\u3054\u5229\u7528\u3044\u305f\u3060\u3051\u307e\u3059\u3002\n <\/p>\n <\/div>\n <\/div>\n <\/section>\n\n {\/* Flow *\/}\n <section className=\"py-20 bg-stone-50\">\n <div className=\"container mx-auto px-4 max-w-4xl\">\n <div className=\"text-center mb-16\">\n <h2 className=\"text-3xl font-serif font-bold text-green-800\">\u3054\u5229\u7528\u306e\u6d41\u308c<\/h2>\n <\/div>\n\n <div className=\"grid gap-8 md:grid-cols-4\">\n {[\n { step: \"01\", title: \"\u4e88\u7d04\", desc: \"LINE\u3067\u7c21\u5358\u4e88\u7d04\u3002\u7a7a\u304d\u72b6\u6cc1\u304c\u3072\u3068\u76ee\u3067\u308f\u304b\u308a\u307e\u3059\u3002\" },\n { step: \"02\", title: \"\u6765\u5e97\u30fb\u7cbe\u7b97\", desc: \"\u53d7\u4ed8\u306b\u3066\u304a\u4f1a\u8a08\u3002\u660e\u6717\u4f1a\u8a08\u3067\u5b89\u5fc3\u3067\u3059\u3002\" },\n { step: \"03\", title: \"\u30ab\u30e9\u30fc\u30fbSP\", desc: \"\u30d7\u30ed\u304c\u4e01\u5be7\u306b\u65bd\u8853\u3002\u6975\u4e0a\u306e\u30b7\u30e3\u30f3\u30d7\u30fc\u3067\u30ea\u30e9\u30c3\u30af\u30b9\u3002\" },\n { step: \"04\", title: \"\u30bb\u30eb\u30d5\u30d6\u30ed\u30fc\", desc: \"\u304a\u597d\u304d\u306a\u30b9\u30bf\u30a4\u30ea\u30f3\u30b0\u5264\u3067\u4ed5\u4e0a\u3052\u3066\u7d42\u4e86\u3067\u3059\u3002\" }\n ].map((item, idx) => (\n <div key={idx} className=\"relative text-center\">\n <div className=\"w-16 h-16 mx-auto bg-green-200 rounded-full flex items-center justify-center text-green-800 font-bold text-xl mb-4 shadow-sm border-4 border-white\">\n {item.step}\n <\/div>\n <h4 className=\"font-bold text-lg text-stone-800 mb-2\">{item.title}<\/h4>\n <p className=\"text-stone-600 text-sm leading-relaxed\">{item.desc}<\/p>\n {idx !== 3 && (\n <div className=\"hidden md:block absolute top-8 -right-1\/2 w-full h-0.5 bg-green-200 -z-10\"><\/div>\n )}\n <\/div>\n ))}\n <\/div>\n <\/div>\n <\/section>\n\n {\/* CTA Section *\/}\n <section className=\"py-24 bg-white text-center\" id=\"reservation\">\n <div className=\"container mx-auto px-4\">\n <div className=\"max-w-3xl mx-auto border-4 border-green-600\/20 p-8 md:p-12 rounded-3xl relative\">\n <div className=\"absolute top-0 left-1\/2 transform -translate-x-1\/2 -translate-y-1\/2 bg-white px-6 py-2 text-green-700 font-bold text-xl tracking-widest whitespace-nowrap\">\n \u3054\u4e88\u7d04\u306f\u3053\u3061\u3089\u304b\u3089\n <\/div>\n \n <h2 className=\"text-3xl md:text-4xl font-serif font-bold text-stone-800 mb-6\">\n \u7f8e\u3057\u3044\u9aea\u8272\u3067\u3001<br\/>\n \u6bce\u65e5\u3092\u3082\u3063\u3068\u697d\u3057\u304f\u3002\n <\/h2>\n <p className=\"text-lg text-stone-600 mb-10 leading-relaxed\">\n \u73fe\u5728\u3001\u3054\u4e88\u7d04\u304c\u5927\u5909\u6df7\u307f\u5408\u3063\u3066\u304a\u308a\u307e\u3059\u3002<br\/>\n \u3054\u5e0c\u671b\u306e\u65e5\u6642\u304c\u304a\u6c7a\u307e\u308a\u3067\u3057\u305f\u3089\u3001\u304a\u65e9\u3081\u306bLINE\u3088\u308a\u3054\u4e88\u7d04\u304f\u3060\u3055\u3044\u3002\n <\/p>\n \n <a\n href=\"https:\/\/lin.ee\/hKNtKLt\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n onClick={() => {\n if (typeof window.ytag === \"function\") {\n window.ytag({\n type: \"yss_conversion\",\n config: {\n yahoo_conversion_id: \"1001380770\",\n yahoo_conversion_label: \"3a9ZCNfahOwbEJy0uOxB\",\n yahoo_conversion_value: \"0\",\n },\n });\n }\n }}\n className=\"inline-block w-full md:w-auto bg-[#06C755] hover:bg-[#05b34c] text-white text-2xl font-bold py-5 px-12 rounded-2xl shadow-xl transform transition hover:-translate-y-1 flex items-center justify-center gap-4\"\n>\n <LineIcon \/>\n <span>LINE\u3067\u7a7a\u304d\u72b6\u6cc1\u3092\u898b\u308b<\/span>\n<\/a>\n <p className=\"mt-4 text-sm text-stone-500\">\u203b24\u6642\u9593\u3044\u3064\u3067\u3082\u4e88\u7d04\u53ef\u80fd\u3067\u3059<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n {\/* Footer *\/}\n <footer className=\"bg-stone-800 text-stone-300 py-12 pb-32 md:pb-12 text-sm\">\n <div className=\"container mx-auto px-4 grid md:grid-cols-2 gap-8\">\n <div>\n <h2 className=\"text-2xl font-bold text-white mb-4 flex items-center gap-2\">\n <span className=\"bg-stone-600 text-white w-8 h-8 rounded-full flex items-center justify-center text-sm font-serif\">\u529b<\/span>\n \u30ab\u30e9\u30fc\u306e\u3061\u304b\u3089\u65e5\u9032\u7c73\u91ce\u6728\u99c5\u524d\u5e97\n <\/h2>\n <p className=\"mb-4 leading-loose\">\n \u767d\u9aea\u67d3\u3081\u5c02\u9580\u5e97<br\/>\n \u55b6\u696d\u6642\u9593\uff1a9:00 - 17:00\uff08\u6700\u7d42\u53d7\u4ed8 16:00\uff09<br\/>\n \u5b9a\u4f11\u65e5\uff1a\u4e0d\u5b9a\u4f11\n <\/p>\n <\/div>\n <div className=\"md:text-right\">\n <ul className=\"space-y-2\">\n <li><a href=\"https:\/\/nisshin.color-chikara.jp\/\" className=\"hover:text-white transition\">\u30db\u30fc\u30e0<\/a><\/li>\n <li><a href=\"https:\/\/nisshin.color-chikara.jp\/menu\/\" className=\"hover:text-white transition\">\u30e1\u30cb\u30e5\u30fc\u30fb\u6599\u91d1<\/a><\/li>\n <li><a href=\"https:\/\/nisshin.color-chikara.jp\/\" className=\"hover:text-white transition\">\u5e97\u8217\u30a2\u30af\u30bb\u30b9<\/a><\/li>\n \n <\/ul>\n <\/div>\n <\/div>\n <div className=\"text-center mt-12 pt-8 border-t border-stone-700\">\n © 2024 Color no Chikara. All Rights Reserved.\n <\/div>\n <\/footer>\n\n {\/* Mobile Floating CTA *\/}\n <div className=\"fixed bottom-0 left-0 w-full bg-white p-4 shadow-[0_-4px_6px_-1px_rgba(0,0,0,0.1)] md:hidden z-50\">\n <a\n href=\"https:\/\/lin.ee\/hKNtKLt\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n onClick={() => {\n if (typeof window.ytag === \"function\") {\n window.ytag({\n type: \"yss_conversion\",\n config: {\n yahoo_conversion_id: \"1001380770\",\n yahoo_conversion_label: \"3a9ZCNfahOwbEJy0uOxB\",\n yahoo_conversion_value: \"0\",\n },\n });\n }\n }}\n className=\"block w-full bg-[#06C755] text-white text-center py-4 rounded-xl font-bold text-lg shadow-lg flex items-center justify-center gap-2 animate-pulse\"\n>\n <LineIcon \/>\n LINE\u3067\u4eca\u3059\u3050\u4e88\u7d04\u3059\u308b\n<\/a>\n <\/div>\n\n <\/div>\n );\n };\n\n ReactDOM.createRoot(document.getElementById('root')).render(<App \/>);\n <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\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>\u767d\u9aea\u67d3\u3081\u5c02\u9580\u5e97 \u30ab\u30e9\u30fc\u306e\u3061\u304b\u3089\u65e5\u9032\u7c73\u91ce\u6728\u99c5\u524d\u5e97<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"_glsr_average":0,"_glsr_ranking":0,"_glsr_reviews":0,"footnotes":""},"class_list":["post-366","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/nisshin.color-chikara.jp\/wp\/wp-json\/wp\/v2\/pages\/366","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nisshin.color-chikara.jp\/wp\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nisshin.color-chikara.jp\/wp\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nisshin.color-chikara.jp\/wp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nisshin.color-chikara.jp\/wp\/wp-json\/wp\/v2\/comments?post=366"}],"version-history":[{"count":19,"href":"https:\/\/nisshin.color-chikara.jp\/wp\/wp-json\/wp\/v2\/pages\/366\/revisions"}],"predecessor-version":[{"id":389,"href":"https:\/\/nisshin.color-chikara.jp\/wp\/wp-json\/wp\/v2\/pages\/366\/revisions\/389"}],"wp:attachment":[{"href":"https:\/\/nisshin.color-chikara.jp\/wp\/wp-json\/wp\/v2\/media?parent=366"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}