\u7269\u4ef6\u6848\u5185 | CRANE Real Estate<\/title>\n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n \n <script src=\"https:\/\/unpkg.com\/react@18\/umd\/react.development.js\"><\/script>\n <script src=\"https:\/\/unpkg.com\/react-dom@18\/umd\/react-dom.development.js\"><\/script>\n \n <script src=\"https:\/\/unpkg.com\/@babel\/standalone\/babel.min.js\"><\/script>\n \n <script src=\"https:\/\/unpkg.com\/lucide@latest\"><\/script>\n <style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+JP:wght@400;500;700;900&display=swap');\n body { font-family: 'Noto Sans JP', sans-serif; }\n .modal-overlay { background-color: rgba(0, 0, 0, 0.9); }\n <\/style>\n<\/head>\n<body class=\"bg-transparent\">\n <div id=\"property-root\"><\/div>\n\n <script type=\"text\/babel\">\n const { useState, useEffect } = React;\n\n const App = () => {\n \/\/ --- \u30b9\u30c6\u30fc\u30c8\u7ba1\u7406 ---\n const [selectedGallery, setSelectedGallery] = useState(null); \/\/ \u30e2\u30fc\u30c0\u30eb\u3067\u8868\u793a\u4e2d\u306e\u7269\u4ef6\u30c7\u30fc\u30bf\n const [currentImgIndex, setCurrentImgIndex] = useState(0); \/\/ \u73fe\u5728\u8868\u793a\u4e2d\u306e\u5199\u771f\u756a\u53f7\n\n \/\/ \u3010\u5171\u901a\u8a2d\u5b9a\uff1a\u96fb\u8a71\u756a\u53f7\u3011\n const companyInfo = {\n phone: \"099-210-3909\",\n name: \"\u682a\u5f0f\u4f1a\u793e\u30af\u30ec\u30a4\u30f3\u4e0d\u52d5\u7523\"\n };\n\n \/\/ \u3010\u30dd\u30fc\u30bf\u30eb\u30b5\u30a4\u30c8\u306eURL\u8a2d\u5b9a\u3011\n const portalLinks = {\n mansion: {\n athome: \"https:\/\/www.athome.co.jp\/mansion\/estate\/130702\/list\/\", \n suumo: \"https:\/\/suumo.jp\/chukomansion\/__JJ_JJ010FJ001_arz1090z2bsz1011z2kkcz1189503001.html\" \n },\n house: {\n athome: \"https:\/\/www.athome.co.jp\/kodate\/estate\/130702\/list\/\", \n suumo: \"https:\/\/suumo.jp\/ikkodate\/__JJ_JJ010FJ001_arz1090z2bsz1020z2kkcz1189503001.html\" \n }\n };\n\n \/\/ \u3010\u7269\u4ef6\u30c7\u30fc\u30bf\u306e\u914d\u5217\u3011\n \/\/ images: [] \u306e\u4e2d\u306bURL\u3092\u8907\u6570\u5165\u308c\u308b\u3068\u3001\u30af\u30ea\u30c3\u30af\u3057\u305f\u6642\u306b\u30b9\u30e9\u30a4\u30c9\u8868\u793a\u3067\u304d\u307e\u3059\n const [properties] = useState([\n {\n id: 1,\n type: \"\u65b0\u7bc9\u30de\u30f3\u30b7\u30e7\u30f3\",\n tag: \"\u5206\u8b72\u4e2d\",\n title: \"\u30a2\u30eb\u30d5\u30a1\u30b9\u30c6\u30a4\u30c4\u4e0e\u6b21\u90ce\u30b7\u30fc\u30b5\u30a4\u30c9\u30ac\u30fc\u30c7\u30f3\",\n price: \"3,530\uff5e\",\n address: \"\u9e7f\u5150\u5cf6\u5e02\u4e0e\u6b21\u90ce\",\n layout: \"3LDK\",\n area: \"\",\n images: [\"http:\/\/cranere2024.com\/wp-content\/uploads\/C.jpg\"],\n isMansion: true\n },\n {\n id: 2,\n type: \"\u65b0\u7bc9\u30de\u30f3\u30b7\u30e7\u30f3\",\n tag: \"NEW\",\n title: \"\u30a2\u30eb\u30d5\u30a1\u30b9\u30c6\u30a4\u30c4\u8c37\u5c71\u99c5\u524d\",\n price: \"4,330\uff5e\",\n address: \"\u9e7f\u5150\u5cf6\u5e02\u8c37\u5c71\u4e2d\u592e\",\n layout: \"3LDK\",\n area: \"\",\n images: [\"http:\/\/cranere2024.com\/wp-content\/uploads\/3LDK.jpg\"],\n isMansion: true\n },\n {\n id: 3,\n type: \"\u65b0\u7bc9\u30de\u30f3\u30b7\u30e7\u30f3\",\n tag: \"NEW\",\n title: \"\u30a2\u30eb\u30d5\u30a1\u30b9\u30c6\u30a4\u30c4\u8c37\u5c71\u99c5\u524d\",\n price: \"3,750\uff5e\",\n address: \"\u9e7f\u5150\u5cf6\u5e02\u8c37\u5c71\u4e2d\u592e\",\n layout: \"2LDK\",\n area: \"\",\n images: [\"http:\/\/cranere2024.com\/wp-content\/uploads\/2LDK.jpg\"],\n isMansion: true\n },\n {\n id: 4,\n type: \"comingsoon\",\n tag: \"\u6e96\u5099\u4e2d\",\n title: \"\u6b21\u671f\u30d7\u30ed\u30b8\u30a7\u30af\u30c8 \u6e96\u5099\u4e2d\",\n price: \"---\",\n address: \"\u9e7f\u5150\u5cf6\u5e02\u5185\",\n layout: \"- \",\n area: \"- \",\n images: [\"https:\/\/images.unsplash.com\/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&q=80&w=800\"],\n isMansion: true\n }\n ]);\n\n \/\/ \u30a2\u30a4\u30b3\u30f3\u521d\u671f\u5316\n useEffect(() => {\n if (window.lucide) {\n window.lucide.createIcons();\n }\n }, [selectedGallery]); \/\/ \u30e2\u30fc\u30c0\u30eb\u304c\u958b\u3044\u305f\u6642\u306b\u3082\u518d\u5b9f\u884c\n\n const handleCall = () => {\n window.location.href = `tel:${companyInfo.phone}`;\n };\n\n \/\/ \u5199\u771f\u30af\u30ea\u30c3\u30af\u6642\u306e\u51e6\u7406\n const openGallery = (property) => {\n setSelectedGallery(property);\n setCurrentImgIndex(0);\n };\n\n \/\/ \u30dd\u30fc\u30bf\u30eb\u30dc\u30bf\u30f3\u7528\u90e8\u54c1\n const PortalButton = ({ href, platform, typeLabel, color }) => (\n <a \n href={href}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className=\"group relative bg-white border-[3px] p-6 rounded-2xl flex items-center justify-between transition-all duration-300 shadow-sm hover:shadow-xl hover:-translate-y-1\"\n style={{ borderColor: color }}\n >\n <div className=\"flex items-center gap-5\">\n <div className=\"p-4 rounded-xl transition-colors flex items-center justify-center shadow-inner\" style={{ backgroundColor: color }}>\n <i data-lucide=\"external-link\" className=\"text-white w-6 h-6\"><\/i>\n <\/div>\n <div>\n <div className=\"font-black text-2xl tracking-tight leading-none mb-1\" style={{ color: color }}>\n {platform}\n <\/div>\n <div className=\"text-slate-500 text-sm font-bold\">{typeLabel}\u3092\u898b\u308b<\/div>\n <\/div>\n <\/div>\n <i data-lucide=\"chevron-right\" className=\"text-slate-300 group-hover:translate-x-2 transition-transform w-6 h-6\"><\/i>\n <\/a>\n );\n\n return (\n <div className=\"max-w-6xl mx-auto space-y-16 py-10 relative\">\n \n {\/* --- \u30dd\u30fc\u30bf\u30eb\u30b5\u30a4\u30c8\u30bb\u30af\u30b7\u30e7\u30f3 --- *\/}\n <section className=\"bg-white p-10 rounded-[2.5rem] border border-slate-200 shadow-sm\">\n <div className=\"text-center mb-10\">\n <h2 className=\"text-3xl font-black text-slate-800 mb-2\">\u5f0a\u793e\u7269\u4ef6\u3092\u30dd\u30fc\u30bf\u30eb\u30b5\u30a4\u30c8\u3067\u78ba\u8a8d<\/h2>\n <p className=\"text-slate-500 text-base font-medium\">\u6700\u65b0\u306e\u60c5\u5831\u3092\u5404\u30b5\u30a4\u30c8\u304b\u3089\u3054\u89a7\u3044\u305f\u3060\u3051\u307e\u3059<\/p>\n <\/div>\n\n <div className=\"grid grid-cols-1 md:grid-cols-2 gap-10 text-left\">\n {\/* \u30de\u30f3\u30b7\u30e7\u30f3 *\/}\n <div className=\"space-y-5\">\n <div className=\"flex items-center gap-3 mb-2 font-black text-slate-700 text-xl\">\n <div className=\"bg-blue-100 p-2 rounded-xl text-blue-600\">\n <i data-lucide=\"building-2\" className=\"w-6 h-6\"><\/i>\n <\/div>\n \u30de\u30f3\u30b7\u30e7\u30f3\u3092\u3054\u691c\u8a0e\u306e\u65b9\n <\/div>\n <div className=\"space-y-4\">\n <PortalButton href={portalLinks.mansion.athome} platform=\"at home\" typeLabel=\"\u30de\u30f3\u30b7\u30e7\u30f3\u8a73\u7d30\" color=\"#E60012\" \/>\n <PortalButton href={portalLinks.mansion.suumo} platform=\"SUUMO\" typeLabel=\"\u30de\u30f3\u30b7\u30e7\u30f3\u8a73\u7d30\" color=\"#24B500\" \/>\n <\/div>\n <\/div>\n\n {\/* \u6238\u5efa\u3066 *\/}\n <div className=\"space-y-5\">\n <div className=\"flex items-center gap-3 mb-2 font-black text-slate-700 text-xl\">\n <div className=\"bg-emerald-100 p-2 rounded-xl text-emerald-600\">\n <i data-lucide=\"home\" className=\"w-6 h-6\"><\/i>\n <\/div>\n \u4e00\u6238\u5efa\u3066\u3092\u3054\u691c\u8a0e\u306e\u65b9\n <\/div>\n <div className=\"space-y-4\">\n <PortalButton href={portalLinks.house.athome} platform=\"at home\" typeLabel=\"\u6238\u5efa\u3066\u8a73\u7d30\" color=\"#E60012\" \/><PortalButton href={portalLinks.house.suumo} platform=\"SUUMO\" typeLabel=\"\u6238\u5efa\u3066\u8a73\u7d30\" color=\"#24B500\" \/>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n {\/* --- \u7269\u4ef6\u7d39\u4ecb\u30bb\u30af\u30b7\u30e7\u30f3 --- *\/}\n <section>\n <div className=\"text-center md:text-left border-l-8 border-blue-600 pl-6 py-2 mb-10\">\n <h1 className=\"text-3xl md:text-4xl font-black text-slate-800 tracking-tighter\">\n \u65b0\u7bc9\u30de\u30f3\u30b7\u30e7\u30f3\u3054\u6848\u5185\n <\/h1>\n <p className=\"text-slate-500 font-bold mt-1 uppercase tracking-widest text-sm\">Recommended Properties<\/p>\n <\/div>\n\n <div className=\"grid grid-cols-1 md:grid-cols-2 gap-8 lg:gap-10\">\n {properties.map((item) => (\n <div key={item.id} className=\"group bg-white rounded-[2rem] shadow-lg overflow-hidden border border-slate-100 flex flex-col hover:shadow-2xl transition-all duration-500 hover:-translate-y-1\">\n {\/* \u753b\u50cf\u30a8\u30ea\u30a2\uff08\u30af\u30ea\u30c3\u30af\u3067\u30ae\u30e3\u30e9\u30ea\u30fc\u8868\u793a\uff09 *\/}\n <div \n className=\"relative aspect-[16\/9] overflow-hidden bg-slate-100 cursor-pointer\"\n onClick={() => openGallery(item)}\n >\n <img src={item.images[0]} alt={item.title} className=\"w-full h-full object-cover transition-transform duration-700 group-hover:scale-110\" \/>\n <div className=\"absolute inset-0 bg-black\/20 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center\">\n <div className=\"bg-white\/90 p-3 rounded-full shadow-lg\">\n <i data-lucide=\"maximize-2\" className=\"text-slate-800 w-6 h-6\"><\/i>\n <\/div>\n <\/div>\n <div className=\"absolute top-4 left-4 flex gap-2\">\n {item.tag && <span className=\"bg-blue-600 text-white text-[10px] font-black px-3 py-1.5 rounded-full shadow-lg\">{item.tag}<\/span>}\n <span className=\"bg-white\/90 backdrop-blur-md text-slate-700 text-[10px] font-black px-3 py-1.5 rounded-full shadow-sm flex items-center gap-1\">\n {item.isMansion ? <i data-lucide=\"building-2\" className=\"w-3 h-3\"><\/i> : <i data-lucide=\"home\" className=\"w-3 h-3\"><\/i>}\n {item.type}\n <\/span>\n <\/div>\n <div className=\"absolute bottom-4 right-4 bg-white\/95 backdrop-blur-md px-4 py-2 rounded-2xl shadow-xl\">\n <span className=\"text-slate-400 text-xs font-bold mr-1\">\u7a0e\u8fbc<\/span>\n <span className=\"text-2xl font-black text-blue-600\">{item.price}<\/span>\n <span className=\"text-blue-600 font-black text-xs ml-0.5\">\u4e07\u5186<\/span>\n <\/div>\n <\/div>\n\n <div className=\"p-6 md:p-8 flex-grow space-y-4\">\n <h2 className=\"text-xl md:text-2xl font-black text-slate-800 leading-tight min-h-[3rem]\">{item.title}<\/h2>\n <div className=\"flex items-start text-slate-500 text-sm font-medium\">\n <i data-lucide=\"map-pin\" className=\"shrink-0 mr-1.5 text-slate-300 w-4 h-4\"><\/i>{item.address}\n <\/div>\n <div className=\"grid grid-cols-2 gap-3 pt-2\">\n <div className=\"bg-slate-50 p-3 rounded-xl flex items-center gap-3\">\n <div className=\"bg-white p-1.5 rounded-lg shadow-sm text-blue-500 flex items-center justify-center\"><i data-lucide=\"bed-double\" className=\"w-4 h-4\"><\/i><\/div>\n <div>\n <p className=\"text-[10px] text-slate-400 font-bold uppercase tracking-wider\">Layout<\/p>\n <p className=\"font-black text-slate-700\">{item.layout}<\/p>\n <\/div>\n <\/div>\n <div className=\"bg-slate-50 p-3 rounded-xl flex items-center gap-3\">\n <div className=\"bg-white p-1.5 rounded-lg shadow-sm text-blue-500 flex items-center justify-center\"><i data-lucide=\"maximize-2\" className=\"w-4 h-4\"><\/i><\/div>\n <div>\n <p className=\"text-[10px] text-slate-400 font-bold uppercase tracking-wider\">Area<\/p>\n <p className=\"font-black text-slate-700\">{item.area}<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div className=\"px-6 pb-6 md:px-8 md:pb-8\">\n <button onClick={handleCall} className=\"w-full bg-slate-900 hover:bg-blue-600 text-white font-black py-4 rounded-2xl transition-all flex flex-col items-center justify-center gap-1 group\/btn\">\n <div className=\"flex items-center gap-2\"><i data-lucide=\"phone\" className=\"w-4 h-4\"><\/i>\u8a73\u7d30\u3092\u96fb\u8a71\u3067\u805e\u304f<\/div>\n <div className=\"text-[10px] opacity-70 tracking-widest\">{companyInfo.phone}<\/div>\n <\/button>\n <\/div>\n <\/div>\n ))}\n <\/div>\n <\/section>\n\n {\/* --- \u5199\u771f\u62e1\u5927\u30e2\u30fc\u30c0\u30eb\uff08\u30e9\u30a4\u30c8\u30dc\u30c3\u30af\u30b9\uff09 --- *\/}\n {selectedGallery && (\n <div className=\"fixed inset-0 z-[9999] modal-overlay flex items-center justify-center p-4 md:p-10\">\n {\/* \u9589\u3058\u308b\u30dc\u30bf\u30f3 *\/}\n <button \n onClick={() => setSelectedGallery(null)}\n className=\"absolute top-6 right-6 text-white hover:text-blue-400 transition-colors\"\n >\n <i data-lucide=\"x\" className=\"w-10 h-10\"><\/i>\n <\/button>\n\n {\/* \u524d\u3078\u30dc\u30bf\u30f3 *\/}\n {selectedGallery.images.length > 1 && (\n <button \n onClick={() => setCurrentImgIndex((prev) => (prev === 0 ? selectedGallery.images.length - 1 : prev - 1))}\n className=\"absolute left-4 md:left-10 text-white hover:text-blue-400\"\n >\n <i data-lucide=\"chevron-left\" className=\"w-12 h-12\"><\/i>\n <\/button>\n )}\n\n {\/* \u30e1\u30a4\u30f3\u5199\u771f *\/}\n <div className=\"max-w-full max-h-full flex flex-col items-center gap-4\">\n <img \n src={selectedGallery.images[currentImgIndex]} \n className=\"max-w-full max-h-[80vh] object-contain rounded-lg shadow-2xl\"\n alt=\"Gallery\"\n \/>\n <div className=\"text-white text-center\">\n <p className=\"text-xl font-bold\">{selectedGallery.title}<\/p>\n {selectedGallery.images.length > 1 && (\n <p className=\"text-sm opacity-70 mt-1\">{currentImgIndex + 1} \/ {selectedGallery.images.length}<\/p>\n )}\n <\/div>\n <\/div>\n\n {\/* \u6b21\u3078\u30dc\u30bf\u30f3 *\/}\n {selectedGallery.images.length > 1 && (\n <button \n onClick={() => setCurrentImgIndex((prev) => (prev === selectedGallery.images.length - 1 ? 0 : prev + 1))}\n className=\"absolute right-4 md:right-10 text-white hover:text-blue-400\"\n >\n <i data-lucide=\"chevron-right\" className=\"w-12 h-12\"><\/i>\n <\/button>\n )}\n <\/div>\n )}\n\n {\/* \u30d5\u30c3\u30bf\u30fc\u6ce8\u91c8 *\/}\n <div className=\"text-center pt-8 border-t border-slate-100 text-slate-400 text-xs font-medium\">\n \u203b\u6700\u65b0\u306e\u72b6\u6cc1\u306b\u3064\u3044\u3066\u306f\u304a\u554f\u3044\u5408\u308f\u305b\u304f\u3060\u3055\u3044\u3002\n <\/div>\n <\/div>\n );\n };\n\n const root = ReactDOM.createRoot(document.getElementById('property-root'));\n root.render(<App \/>);\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<p class=\"has-text-align-center vk_block-margin-0--margin-top\"><strong>\u3010\u6771\u4eac\u90fd\u5185\u7269\u4ef6\u3082\u3054\u7d39\u4ecb\u53ef\u80fd\u3011<\/strong><br><strong>\u6771\u4eac\u90fd\u5185\u3067\u304a\u63a2\u3057\u306e\u65b9\u306b\u3082\u6761\u4ef6\u306b\u5408\u308f\u305b\u305f\u7269\u4ef6\u3092\u3054\u7d39\u4ecb\u53ef\u80fd\u3067\u3059<\/strong>\u3002<br><strong>\u5c45\u4f4f\u7528\u306f\u3082\u3061\u308d\u3093\u8cc3\u8cb8\u306b\u51fa\u3055\u308c\u308b\u969b(<strong>\u4f4f\u5b85\u30ed\u30fc\u30f3\u8fd4\u6e08\u4e2d\u306f\u5bfe\u5fdc\u4e0d\u53ef<\/strong>)\u306f<\/strong>\u3001<br><strong>\u73fe\u5730\u7ba1\u7406\u4f1a\u793e\u3082\u3054\u7d39\u4ecb\u53ef\u80fd\u3067\u3059\u3002<\/strong><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u7269\u4ef6\u6848\u5185 | CRANE Real Estate \u3010\u6771\u4eac\u90fd\u5185\u7269\u4ef6\u3082\u3054\u7d39\u4ecb\u53ef\u80fd\u3011\u6771\u4eac\u90fd\u5185\u3067\u304a\u63a2\u3057\u306e\u65b9\u306b\u3082\u6761\u4ef6\u306b\u5408\u308f\u305b\u305f\u7269\u4ef6\u3092\u3054\u7d39\u4ecb\u53ef\u80fd\u3067\u3059\u3002\u5c45\u4f4f\u7528\u306f\u3082\u3061\u308d\u3093\u8cc3\u8cb8\u306b\u51fa\u3055\u308c\u308b\u969b(\u4f4f\u5b85\u30ed\u30fc\u30f3\u8fd4\u6e08\u4e2d\u306f\u5bfe\u5fdc\u4e0d\u53ef)\u306f\u3001\u73fe\u5730\u7ba1\u7406\u4f1a\u793e\u3082\u3054 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-53","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/cranere2024.com\/index.php?rest_route=\/wp\/v2\/pages\/53","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cranere2024.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cranere2024.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/cranere2024.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cranere2024.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=53"}],"version-history":[{"count":189,"href":"https:\/\/cranere2024.com\/index.php?rest_route=\/wp\/v2\/pages\/53\/revisions"}],"predecessor-version":[{"id":759,"href":"https:\/\/cranere2024.com\/index.php?rest_route=\/wp\/v2\/pages\/53\/revisions\/759"}],"wp:attachment":[{"href":"https:\/\/cranere2024.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=53"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":53,"date":"2025-03-06T13:48:57","date_gmt":"2025-03-06T04:48:57","guid":{"rendered":"http:\/\/cranere2024.com\/?page_id=53"},"modified":"2026-04-10T13:54:45","modified_gmt":"2026-04-10T04:54:45","slug":"%e7%89%a9%e4%bb%b6%e6%83%85%e5%a0%b1","status":"publish","type":"page","link":"https:\/\/cranere2024.com\/?page_id=53","title":{"rendered":"\u7269\u4ef6\u60c5\u5831"},"content":{"rendered":"\n

<\/p>\n\n\n\n\n\n\n \n \n \u7269\u4ef6\u6848\u5185 | CRANE Real Estate<\/title>\n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n \n <script src=\"https:\/\/unpkg.com\/react@18\/umd\/react.development.js\"><\/script>\n <script src=\"https:\/\/unpkg.com\/react-dom@18\/umd\/react-dom.development.js\"><\/script>\n \n <script src=\"https:\/\/unpkg.com\/@babel\/standalone\/babel.min.js\"><\/script>\n \n <script src=\"https:\/\/unpkg.com\/lucide@latest\"><\/script>\n <style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+JP:wght@400;500;700;900&display=swap');\n body { font-family: 'Noto Sans JP', sans-serif; }\n .modal-overlay { background-color: rgba(0, 0, 0, 0.9); }\n <\/style>\n<\/head>\n<body class=\"bg-transparent\">\n <div id=\"property-root\"><\/div>\n\n <script type=\"text\/babel\">\n const { useState, useEffect } = React;\n\n const App = () => {\n \/\/ --- \u30b9\u30c6\u30fc\u30c8\u7ba1\u7406 ---\n const [selectedGallery, setSelectedGallery] = useState(null); \/\/ \u30e2\u30fc\u30c0\u30eb\u3067\u8868\u793a\u4e2d\u306e\u7269\u4ef6\u30c7\u30fc\u30bf\n const [currentImgIndex, setCurrentImgIndex] = useState(0); \/\/ \u73fe\u5728\u8868\u793a\u4e2d\u306e\u5199\u771f\u756a\u53f7\n\n \/\/ \u3010\u5171\u901a\u8a2d\u5b9a\uff1a\u96fb\u8a71\u756a\u53f7\u3011\n const companyInfo = {\n phone: \"099-210-3909\",\n name: \"\u682a\u5f0f\u4f1a\u793e\u30af\u30ec\u30a4\u30f3\u4e0d\u52d5\u7523\"\n };\n\n \/\/ \u3010\u30dd\u30fc\u30bf\u30eb\u30b5\u30a4\u30c8\u306eURL\u8a2d\u5b9a\u3011\n const portalLinks = {\n mansion: {\n athome: \"https:\/\/www.athome.co.jp\/mansion\/estate\/130702\/list\/\", \n suumo: \"https:\/\/suumo.jp\/chukomansion\/__JJ_JJ010FJ001_arz1090z2bsz1011z2kkcz1189503001.html\" \n },\n house: {\n athome: \"https:\/\/www.athome.co.jp\/kodate\/estate\/130702\/list\/\", \n suumo: \"https:\/\/suumo.jp\/ikkodate\/__JJ_JJ010FJ001_arz1090z2bsz1020z2kkcz1189503001.html\" \n }\n };\n\n \/\/ \u3010\u7269\u4ef6\u30c7\u30fc\u30bf\u306e\u914d\u5217\u3011\n \/\/ images: [] \u306e\u4e2d\u306bURL\u3092\u8907\u6570\u5165\u308c\u308b\u3068\u3001\u30af\u30ea\u30c3\u30af\u3057\u305f\u6642\u306b\u30b9\u30e9\u30a4\u30c9\u8868\u793a\u3067\u304d\u307e\u3059\n const [properties] = useState([\n {\n id: 1,\n type: \"\u65b0\u7bc9\u30de\u30f3\u30b7\u30e7\u30f3\",\n tag: \"\u5206\u8b72\u4e2d\",\n title: \"\u30a2\u30eb\u30d5\u30a1\u30b9\u30c6\u30a4\u30c4\u4e0e\u6b21\u90ce\u30b7\u30fc\u30b5\u30a4\u30c9\u30ac\u30fc\u30c7\u30f3\",\n price: \"3,530\uff5e\",\n address: \"\u9e7f\u5150\u5cf6\u5e02\u4e0e\u6b21\u90ce\",\n layout: \"3LDK\",\n area: \"\",\n images: [\"http:\/\/cranere2024.com\/wp-content\/uploads\/C.jpg\"],\n isMansion: true\n },\n {\n id: 2,\n type: \"\u65b0\u7bc9\u30de\u30f3\u30b7\u30e7\u30f3\",\n tag: \"NEW\",\n title: \"\u30a2\u30eb\u30d5\u30a1\u30b9\u30c6\u30a4\u30c4\u8c37\u5c71\u99c5\u524d\",\n price: \"4,330\uff5e\",\n address: \"\u9e7f\u5150\u5cf6\u5e02\u8c37\u5c71\u4e2d\u592e\",\n layout: \"3LDK\",\n area: \"\",\n images: [\"http:\/\/cranere2024.com\/wp-content\/uploads\/3LDK.jpg\"],\n isMansion: true\n },\n {\n id: 3,\n type: \"\u65b0\u7bc9\u30de\u30f3\u30b7\u30e7\u30f3\",\n tag: \"NEW\",\n title: \"\u30a2\u30eb\u30d5\u30a1\u30b9\u30c6\u30a4\u30c4\u8c37\u5c71\u99c5\u524d\",\n price: \"3,750\uff5e\",\n address: \"\u9e7f\u5150\u5cf6\u5e02\u8c37\u5c71\u4e2d\u592e\",\n layout: \"2LDK\",\n area: \"\",\n images: [\"http:\/\/cranere2024.com\/wp-content\/uploads\/2LDK.jpg\"],\n isMansion: true\n },\n {\n id: 4,\n type: \"comingsoon\",\n tag: \"\u6e96\u5099\u4e2d\",\n title: \"\u6b21\u671f\u30d7\u30ed\u30b8\u30a7\u30af\u30c8 \u6e96\u5099\u4e2d\",\n price: \"---\",\n address: \"\u9e7f\u5150\u5cf6\u5e02\u5185\",\n layout: \"- \",\n area: \"- \",\n images: [\"https:\/\/images.unsplash.com\/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&q=80&w=800\"],\n isMansion: true\n }\n ]);\n\n \/\/ \u30a2\u30a4\u30b3\u30f3\u521d\u671f\u5316\n useEffect(() => {\n if (window.lucide) {\n window.lucide.createIcons();\n }\n }, [selectedGallery]); \/\/ \u30e2\u30fc\u30c0\u30eb\u304c\u958b\u3044\u305f\u6642\u306b\u3082\u518d\u5b9f\u884c\n\n const handleCall = () => {\n window.location.href = `tel:${companyInfo.phone}`;\n };\n\n \/\/ \u5199\u771f\u30af\u30ea\u30c3\u30af\u6642\u306e\u51e6\u7406\n const openGallery = (property) => {\n setSelectedGallery(property);\n setCurrentImgIndex(0);\n };\n\n \/\/ \u30dd\u30fc\u30bf\u30eb\u30dc\u30bf\u30f3\u7528\u90e8\u54c1\n const PortalButton = ({ href, platform, typeLabel, color }) => (\n <a \n href={href}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className=\"group relative bg-white border-[3px] p-6 rounded-2xl flex items-center justify-between transition-all duration-300 shadow-sm hover:shadow-xl hover:-translate-y-1\"\n style={{ borderColor: color }}\n >\n <div className=\"flex items-center gap-5\">\n <div className=\"p-4 rounded-xl transition-colors flex items-center justify-center shadow-inner\" style={{ backgroundColor: color }}>\n <i data-lucide=\"external-link\" className=\"text-white w-6 h-6\"><\/i>\n <\/div>\n <div>\n <div className=\"font-black text-2xl tracking-tight leading-none mb-1\" style={{ color: color }}>\n {platform}\n <\/div>\n <div className=\"text-slate-500 text-sm font-bold\">{typeLabel}\u3092\u898b\u308b<\/div>\n <\/div>\n <\/div>\n <i data-lucide=\"chevron-right\" className=\"text-slate-300 group-hover:translate-x-2 transition-transform w-6 h-6\"><\/i>\n <\/a>\n );\n\n return (\n <div className=\"max-w-6xl mx-auto space-y-16 py-10 relative\">\n \n {\/* --- \u30dd\u30fc\u30bf\u30eb\u30b5\u30a4\u30c8\u30bb\u30af\u30b7\u30e7\u30f3 --- *\/}\n <section className=\"bg-white p-10 rounded-[2.5rem] border border-slate-200 shadow-sm\">\n <div className=\"text-center mb-10\">\n <h2 className=\"text-3xl font-black text-slate-800 mb-2\">\u5f0a\u793e\u7269\u4ef6\u3092\u30dd\u30fc\u30bf\u30eb\u30b5\u30a4\u30c8\u3067\u78ba\u8a8d<\/h2>\n <p className=\"text-slate-500 text-base font-medium\">\u6700\u65b0\u306e\u60c5\u5831\u3092\u5404\u30b5\u30a4\u30c8\u304b\u3089\u3054\u89a7\u3044\u305f\u3060\u3051\u307e\u3059<\/p>\n <\/div>\n\n <div className=\"grid grid-cols-1 md:grid-cols-2 gap-10 text-left\">\n {\/* \u30de\u30f3\u30b7\u30e7\u30f3 *\/}\n <div className=\"space-y-5\">\n <div className=\"flex items-center gap-3 mb-2 font-black text-slate-700 text-xl\">\n <div className=\"bg-blue-100 p-2 rounded-xl text-blue-600\">\n <i data-lucide=\"building-2\" className=\"w-6 h-6\"><\/i>\n <\/div>\n \u30de\u30f3\u30b7\u30e7\u30f3\u3092\u3054\u691c\u8a0e\u306e\u65b9\n <\/div>\n <div className=\"space-y-4\">\n <PortalButton href={portalLinks.mansion.athome} platform=\"at home\" typeLabel=\"\u30de\u30f3\u30b7\u30e7\u30f3\u8a73\u7d30\" color=\"#E60012\" \/>\n <PortalButton href={portalLinks.mansion.suumo} platform=\"SUUMO\" typeLabel=\"\u30de\u30f3\u30b7\u30e7\u30f3\u8a73\u7d30\" color=\"#24B500\" \/>\n <\/div>\n <\/div>\n\n {\/* \u6238\u5efa\u3066 *\/}\n <div className=\"space-y-5\">\n <div className=\"flex items-center gap-3 mb-2 font-black text-slate-700 text-xl\">\n <div className=\"bg-emerald-100 p-2 rounded-xl text-emerald-600\">\n <i data-lucide=\"home\" className=\"w-6 h-6\"><\/i>\n <\/div>\n \u4e00\u6238\u5efa\u3066\u3092\u3054\u691c\u8a0e\u306e\u65b9\n <\/div>\n <div className=\"space-y-4\">\n <PortalButton href={portalLinks.house.athome} platform=\"at home\" typeLabel=\"\u6238\u5efa\u3066\u8a73\u7d30\" color=\"#E60012\" \/><PortalButton href={portalLinks.house.suumo} platform=\"SUUMO\" typeLabel=\"\u6238\u5efa\u3066\u8a73\u7d30\" color=\"#24B500\" \/>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n {\/* --- \u7269\u4ef6\u7d39\u4ecb\u30bb\u30af\u30b7\u30e7\u30f3 --- *\/}\n <section>\n <div className=\"text-center md:text-left border-l-8 border-blue-600 pl-6 py-2 mb-10\">\n <h1 className=\"text-3xl md:text-4xl font-black text-slate-800 tracking-tighter\">\n \u65b0\u7bc9\u30de\u30f3\u30b7\u30e7\u30f3\u3054\u6848\u5185\n <\/h1>\n <p className=\"text-slate-500 font-bold mt-1 uppercase tracking-widest text-sm\">Recommended Properties<\/p>\n <\/div>\n\n <div className=\"grid grid-cols-1 md:grid-cols-2 gap-8 lg:gap-10\">\n {properties.map((item) => (\n <div key={item.id} className=\"group bg-white rounded-[2rem] shadow-lg overflow-hidden border border-slate-100 flex flex-col hover:shadow-2xl transition-all duration-500 hover:-translate-y-1\">\n {\/* \u753b\u50cf\u30a8\u30ea\u30a2\uff08\u30af\u30ea\u30c3\u30af\u3067\u30ae\u30e3\u30e9\u30ea\u30fc\u8868\u793a\uff09 *\/}\n <div \n className=\"relative aspect-[16\/9] overflow-hidden bg-slate-100 cursor-pointer\"\n onClick={() => openGallery(item)}\n >\n <img src={item.images[0]} alt={item.title} className=\"w-full h-full object-cover transition-transform duration-700 group-hover:scale-110\" \/>\n <div className=\"absolute inset-0 bg-black\/20 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center\">\n <div className=\"bg-white\/90 p-3 rounded-full shadow-lg\">\n <i data-lucide=\"maximize-2\" className=\"text-slate-800 w-6 h-6\"><\/i>\n <\/div>\n <\/div>\n <div className=\"absolute top-4 left-4 flex gap-2\">\n {item.tag && <span className=\"bg-blue-600 text-white text-[10px] font-black px-3 py-1.5 rounded-full shadow-lg\">{item.tag}<\/span>}\n <span className=\"bg-white\/90 backdrop-blur-md text-slate-700 text-[10px] font-black px-3 py-1.5 rounded-full shadow-sm flex items-center gap-1\">\n {item.isMansion ? <i data-lucide=\"building-2\" className=\"w-3 h-3\"><\/i> : <i data-lucide=\"home\" className=\"w-3 h-3\"><\/i>}\n {item.type}\n <\/span>\n <\/div>\n <div className=\"absolute bottom-4 right-4 bg-white\/95 backdrop-blur-md px-4 py-2 rounded-2xl shadow-xl\">\n <span className=\"text-slate-400 text-xs font-bold mr-1\">\u7a0e\u8fbc<\/span>\n <span className=\"text-2xl font-black text-blue-600\">{item.price}<\/span>\n <span className=\"text-blue-600 font-black text-xs ml-0.5\">\u4e07\u5186<\/span>\n <\/div>\n <\/div>\n\n <div className=\"p-6 md:p-8 flex-grow space-y-4\">\n <h2 className=\"text-xl md:text-2xl font-black text-slate-800 leading-tight min-h-[3rem]\">{item.title}<\/h2>\n <div className=\"flex items-start text-slate-500 text-sm font-medium\">\n <i data-lucide=\"map-pin\" className=\"shrink-0 mr-1.5 text-slate-300 w-4 h-4\"><\/i>{item.address}\n <\/div>\n <div className=\"grid grid-cols-2 gap-3 pt-2\">\n <div className=\"bg-slate-50 p-3 rounded-xl flex items-center gap-3\">\n <div className=\"bg-white p-1.5 rounded-lg shadow-sm text-blue-500 flex items-center justify-center\"><i data-lucide=\"bed-double\" className=\"w-4 h-4\"><\/i><\/div>\n <div>\n <p className=\"text-[10px] text-slate-400 font-bold uppercase tracking-wider\">Layout<\/p>\n <p className=\"font-black text-slate-700\">{item.layout}<\/p>\n <\/div>\n <\/div>\n <div className=\"bg-slate-50 p-3 rounded-xl flex items-center gap-3\">\n <div className=\"bg-white p-1.5 rounded-lg shadow-sm text-blue-500 flex items-center justify-center\"><i data-lucide=\"maximize-2\" className=\"w-4 h-4\"><\/i><\/div>\n <div>\n <p className=\"text-[10px] text-slate-400 font-bold uppercase tracking-wider\">Area<\/p>\n <p className=\"font-black text-slate-700\">{item.area}<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div className=\"px-6 pb-6 md:px-8 md:pb-8\">\n <button onClick={handleCall} className=\"w-full bg-slate-900 hover:bg-blue-600 text-white font-black py-4 rounded-2xl transition-all flex flex-col items-center justify-center gap-1 group\/btn\">\n <div className=\"flex items-center gap-2\"><i data-lucide=\"phone\" className=\"w-4 h-4\"><\/i>\u8a73\u7d30\u3092\u96fb\u8a71\u3067\u805e\u304f<\/div>\n <div className=\"text-[10px] opacity-70 tracking-widest\">{companyInfo.phone}<\/div>\n <\/button>\n <\/div>\n <\/div>\n ))}\n <\/div>\n <\/section>\n\n {\/* --- \u5199\u771f\u62e1\u5927\u30e2\u30fc\u30c0\u30eb\uff08\u30e9\u30a4\u30c8\u30dc\u30c3\u30af\u30b9\uff09 --- *\/}\n {selectedGallery && (\n <div className=\"fixed inset-0 z-[9999] modal-overlay flex items-center justify-center p-4 md:p-10\">\n {\/* \u9589\u3058\u308b\u30dc\u30bf\u30f3 *\/}\n <button \n onClick={() => setSelectedGallery(null)}\n className=\"absolute top-6 right-6 text-white hover:text-blue-400 transition-colors\"\n >\n <i data-lucide=\"x\" className=\"w-10 h-10\"><\/i>\n <\/button>\n\n {\/* \u524d\u3078\u30dc\u30bf\u30f3 *\/}\n {selectedGallery.images.length > 1 && (\n <button \n onClick={() => setCurrentImgIndex((prev) => (prev === 0 ? selectedGallery.images.length - 1 : prev - 1))}\n className=\"absolute left-4 md:left-10 text-white hover:text-blue-400\"\n >\n <i data-lucide=\"chevron-left\" className=\"w-12 h-12\"><\/i>\n <\/button>\n )}\n\n {\/* \u30e1\u30a4\u30f3\u5199\u771f *\/}\n <div className=\"max-w-full max-h-full flex flex-col items-center gap-4\">\n <img \n src={selectedGallery.images[currentImgIndex]} \n className=\"max-w-full max-h-[80vh] object-contain rounded-lg shadow-2xl\"\n alt=\"Gallery\"\n \/>\n <div className=\"text-white text-center\">\n <p className=\"text-xl font-bold\">{selectedGallery.title}<\/p>\n {selectedGallery.images.length > 1 && (\n <p className=\"text-sm opacity-70 mt-1\">{currentImgIndex + 1} \/ {selectedGallery.images.length}<\/p>\n )}\n <\/div>\n <\/div>\n\n {\/* \u6b21\u3078\u30dc\u30bf\u30f3 *\/}\n {selectedGallery.images.length > 1 && (\n <button \n onClick={() => setCurrentImgIndex((prev) => (prev === selectedGallery.images.length - 1 ? 0 : prev + 1))}\n className=\"absolute right-4 md:right-10 text-white hover:text-blue-400\"\n >\n <i data-lucide=\"chevron-right\" className=\"w-12 h-12\"><\/i>\n <\/button>\n )}\n <\/div>\n )}\n\n {\/* \u30d5\u30c3\u30bf\u30fc\u6ce8\u91c8 *\/}\n <div className=\"text-center pt-8 border-t border-slate-100 text-slate-400 text-xs font-medium\">\n \u203b\u6700\u65b0\u306e\u72b6\u6cc1\u306b\u3064\u3044\u3066\u306f\u304a\u554f\u3044\u5408\u308f\u305b\u304f\u3060\u3055\u3044\u3002\n <\/div>\n <\/div>\n );\n };\n\n const root = ReactDOM.createRoot(document.getElementById('property-root'));\n root.render(<App \/>);\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<p class=\"has-text-align-center vk_block-margin-0--margin-top\"><strong>\u3010\u6771\u4eac\u90fd\u5185\u7269\u4ef6\u3082\u3054\u7d39\u4ecb\u53ef\u80fd\u3011<\/strong><br><strong>\u6771\u4eac\u90fd\u5185\u3067\u304a\u63a2\u3057\u306e\u65b9\u306b\u3082\u6761\u4ef6\u306b\u5408\u308f\u305b\u305f\u7269\u4ef6\u3092\u3054\u7d39\u4ecb\u53ef\u80fd\u3067\u3059<\/strong>\u3002<br><strong>\u5c45\u4f4f\u7528\u306f\u3082\u3061\u308d\u3093\u8cc3\u8cb8\u306b\u51fa\u3055\u308c\u308b\u969b(<strong>\u4f4f\u5b85\u30ed\u30fc\u30f3\u8fd4\u6e08\u4e2d\u306f\u5bfe\u5fdc\u4e0d\u53ef<\/strong>)\u306f<\/strong>\u3001<br><strong>\u73fe\u5730\u7ba1\u7406\u4f1a\u793e\u3082\u3054\u7d39\u4ecb\u53ef\u80fd\u3067\u3059\u3002<\/strong><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u7269\u4ef6\u6848\u5185 | CRANE Real Estate \u3010\u6771\u4eac\u90fd\u5185\u7269\u4ef6\u3082\u3054\u7d39\u4ecb\u53ef\u80fd\u3011\u6771\u4eac\u90fd\u5185\u3067\u304a\u63a2\u3057\u306e\u65b9\u306b\u3082\u6761\u4ef6\u306b\u5408\u308f\u305b\u305f\u7269\u4ef6\u3092\u3054\u7d39\u4ecb\u53ef\u80fd\u3067\u3059\u3002\u5c45\u4f4f\u7528\u306f\u3082\u3061\u308d\u3093\u8cc3\u8cb8\u306b\u51fa\u3055\u308c\u308b\u969b(\u4f4f\u5b85\u30ed\u30fc\u30f3\u8fd4\u6e08\u4e2d\u306f\u5bfe\u5fdc\u4e0d\u53ef)\u306f\u3001\u73fe\u5730\u7ba1\u7406\u4f1a\u793e\u3082\u3054 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-53","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/cranere2024.com\/index.php?rest_route=\/wp\/v2\/pages\/53","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cranere2024.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cranere2024.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/cranere2024.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cranere2024.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=53"}],"version-history":[{"count":189,"href":"https:\/\/cranere2024.com\/index.php?rest_route=\/wp\/v2\/pages\/53\/revisions"}],"predecessor-version":[{"id":759,"href":"https:\/\/cranere2024.com\/index.php?rest_route=\/wp\/v2\/pages\/53\/revisions\/759"}],"wp:attachment":[{"href":"https:\/\/cranere2024.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=53"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}