{"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-10-24T08:42:23","modified_gmt":"2026-10-23T23:42:23","slug":"%e7%89%a9%e4%bb%b6%e6%83%85%e5%a0%b1","status":"publish","type":"page","link":"http:\/\/cranere2024.com\/?page_id=53","title":{"rendered":"\u7269\u4ef6\u60c5\u5831"},"content":{"rendered":"\n<!-- React & ReactDOM (\u30d0\u30fc\u30b8\u30e7\u30f3\u56fa\u5b9a\u30fb\u5b89\u5b9a\u7248) -->\n<script src=\"https:\/\/unpkg.com\/react@18.2.0\/umd\/react.production.min.js\"><\/script>\n<script src=\"https:\/\/unpkg.com\/react-dom@18.2.0\/umd\/react-dom.production.min.js\"><\/script>\n<!-- Lucide Icons (\u56fa\u5b9a\u30d0\u30fc\u30b8\u30e7\u30f3\u6307\u5b9a\u3067\u4e0d\u610f\u306e\u969c\u5bb3\u3092\u9632\u6b62) -->\n<script src=\"https:\/\/unpkg.com\/lucide@0.344.0\/dist\/umd\/lucide.min.js\"><\/script>\n\n<style>\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+JP:wght@400;500;700;800;900&display=swap');\n\n  #property-root {\n    font-family: 'Noto Sans JP', sans-serif;\n    max-width: 72rem;\n    margin-left: auto;\n    margin-right: auto;\n    padding: 0.25rem 0.75rem 1.5rem 0.75rem;\n    color: #334155;\n    box-sizing: border-box;\n  }\n  @media (min-width: 768px) {\n    #property-root {\n      padding: 2.5rem 1rem;\n    }\n  }\n  #property-root *, #property-root *::before, #property-root *::after {\n    box-sizing: border-box;\n  }\n\n  \/* \u30bb\u30af\u30b7\u30e7\u30f3\u5171\u901a *\/\n  .crane-section {\n    background-color: #ffffff;\n    border: 1px solid #e2e8f0;\n    border-radius: 0.875rem;\n    padding: 1.25rem 1rem;\n    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n    margin-bottom: 1.75rem;\n  }\n  @media (min-width: 768px) {\n    .crane-section {\n      border-radius: 2rem;\n      padding: 2.5rem;\n      margin-bottom: 3.5rem;\n    }\n  }\n\n  \/* \u30dd\u30fc\u30bf\u30eb\u30bb\u30af\u30b7\u30e7\u30f3 \u898b\u51fa\u3057 *\/\n  .crane-header-title {\n    font-size: 1.125rem !important;\n    font-weight: 800;\n    color: #1e293b;\n    margin-bottom: 0.25rem;\n    text-align: center;\n  }\n  .crane-header-desc {\n    font-size: 0.75rem !important;\n    font-weight: 500;\n    color: #64748b;\n    text-align: center;\n    margin-bottom: 1.25rem;\n  }\n  @media (min-width: 768px) {\n    .crane-header-title {\n      font-size: 1.75rem !important;\n      margin-bottom: 0.5rem;\n    }\n    .crane-header-desc {\n      font-size: 0.9375rem !important;\n      margin-bottom: 2rem;\n    }\n  }\n\n  \/* \u30b0\u30ea\u30c3\u30c9\u30ec\u30a4\u30a2\u30a6\u30c8 *\/\n  .crane-grid-2 {\n    display: grid;\n    grid-template-columns: 1fr;\n    gap: 1rem;\n  }\n  @media (min-width: 768px) {\n    .crane-grid-2 {\n      grid-template-columns: 1fr 1fr;\n      gap: 2rem;\n    }\n  }\n\n  \/* 3\u30ab\u30e9\u30e0\u30b0\u30ea\u30c3\u30c9\u30ec\u30a4\u30a2\u30a6\u30c8\uff08\u30dd\u30fc\u30bf\u30eb\u7528\uff09 *\/\n  .crane-grid-3 {\n    display: grid;\n    grid-template-columns: 1fr;\n    gap: 1rem;\n  }\n  @media (min-width: 768px) {\n    .crane-grid-3 {\n      grid-template-columns: repeat(3, 1fr);\n      gap: 1.25rem;\n    }\n  }\n\n  \/* \u30dd\u30fc\u30bf\u30eb\u898b\u51fa\u3057\u884c *\/\n  .crane-subhead {\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n    font-weight: 800;\n    color: #334155;\n    font-size: 0.9375rem;\n    margin-bottom: 0.625rem;\n  }\n  @media (min-width: 768px) {\n    .crane-subhead {\n      gap: 0.625rem;\n      font-size: 1.05rem;\n      margin-bottom: 0.875rem;\n    }\n  }\n  .crane-icon-badge {\n    padding: 0.3125rem;\n    border-radius: 0.5rem;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n  }\n  @media (min-width: 768px) {\n    .crane-icon-badge {\n      padding: 0.5rem;\n      border-radius: 0.75rem;\n    }\n  }\n\n  \/* \u30dd\u30fc\u30bf\u30eb\u30dc\u30bf\u30f3 *\/\n  .crane-portal-btn {\n    background-color: #ffffff;\n    border-style: solid;\n    border-width: 1.5px;\n    padding: 0.75rem 0.875rem;\n    border-radius: 0.75rem;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    text-decoration: none;\n    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);\n    transition: all 0.25s ease;\n  }\n  @media (min-width: 768px) {\n    .crane-portal-btn {\n      border-width: 2px;\n      padding: 1.125rem 1rem;\n      border-radius: 1rem;\n    }\n  }\n  .crane-portal-btn:hover {\n    transform: translateY(-2px);\n    box-shadow: 0 8px 12px -3px rgba(0, 0, 0, 0.08);\n  }\n\n  .crane-portal-left {\n    display: flex;\n    align-items: center;\n    gap: 0.75rem;\n  }\n  @media (min-width: 768px) {\n    .crane-portal-left {\n      gap: 0.875rem;\n    }\n  }\n\n  .crane-portal-iconbox {\n    padding: 0.4375rem;\n    border-radius: 0.5rem;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n  }\n  @media (min-width: 768px) {\n    .crane-portal-iconbox {\n      padding: 0.625rem;\n      border-radius: 0.625rem;\n    }\n  }\n\n  .crane-portal-name {\n    font-size: 1rem;\n    font-weight: 800;\n    line-height: 1.2;\n    margin-bottom: 0.125rem;\n  }\n  .crane-portal-label {\n    font-size: 0.6875rem;\n    color: #64748b;\n    font-weight: 700;\n  }\n  @media (min-width: 768px) {\n    .crane-portal-name {\n      font-size: 1.15rem;\n    }\n    .crane-portal-label {\n      font-size: 0.8125rem;\n    }\n  }\n\n  \/* \u7269\u4ef6\u30bb\u30af\u30b7\u30e7\u30f3 \u898b\u51fa\u3057 *\/\n  #property-root .crane-lead-title {\n    border-left: 3px solid #2563eb !important;\n    padding-left: 0.625rem !important;\n    margin-bottom: 1rem !important;\n  }\n  #property-root .crane-lead-title h1 {\n    font-size: 1.05rem !important;\n    font-weight: 800 !important;\n    color: #1e293b !important;\n    margin: 0 !important;\n    line-height: 1.3 !important;\n  }\n  #property-root .crane-lead-title p {\n    font-size: 0.625rem !important;\n    font-weight: 700 !important;\n    color: #94a3b8 !important;\n    text-transform: uppercase !important;\n    letter-spacing: 0.08em !important;\n    margin: 0.125rem 0 0 0 !important;\n  }\n  @media (min-width: 768px) {\n    #property-root .crane-lead-title {\n      border-left-width: 5px !important;\n      padding-left: 0.875rem !important;\n      margin-bottom: 1.5rem !important;\n    }\n    #property-root .crane-lead-title h1 {\n      font-size: 1.5rem !important;\n    }\n    #property-root .crane-lead-title p {\n      font-size: 0.75rem !important;\n    }\n  }\n\n  \/* \u7269\u4ef6\u30ab\u30fc\u30c9 *\/\n  .crane-card {\n    background-color: #ffffff;\n    border-radius: 1rem;\n    overflow: hidden;\n    border: 1px solid #f1f5f9;\n    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.04);\n    display: flex;\n    flex-direction: column;\n    transition: all 0.25s ease;\n  }\n  .crane-card:hover {\n    box-shadow: 0 12px 18px -4px rgba(0, 0, 0, 0.08);\n    transform: translateY(-2px);\n  }\n  @media (min-width: 768px) {\n    .crane-card {\n      border-radius: 1.5rem;\n    }\n  }\n\n  .crane-card-imgwrap {\n    position: relative;\n    aspect-ratio: 16 \/ 9;\n    background-color: #f1f5f9;\n    overflow: hidden;\n    cursor: pointer;\n  }\n  .crane-card-imgwrap img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    display: block;\n    transition: transform 0.5s ease;\n  }\n  .crane-card:hover .crane-card-imgwrap img {\n    transform: scale(1.04);\n  }\n\n  .crane-badge-container {\n    position: absolute;\n    top: 0.625rem;\n    left: 0.625rem;\n    display: flex;\n    gap: 0.3125rem;\n  }\n  .crane-tag-badge {\n    background-color: #2563eb;\n    color: #ffffff;\n    font-size: 0.5625rem;\n    font-weight: 800;\n    padding: 0.1875rem 0.5rem;\n    border-radius: 9999px;\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);\n  }\n  .crane-type-badge {\n    background-color: rgba(255, 255, 255, 0.95);\n    color: #334155;\n    font-size: 0.5625rem;\n    font-weight: 800;\n    padding: 0.1875rem 0.5rem;\n    border-radius: 9999px;\n    display: flex;\n    align-items: center;\n    gap: 0.25rem;\n    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);\n  }\n\n  .crane-price-box {\n    position: absolute;\n    bottom: 0.625rem;\n    right: 0.625rem;\n    background-color: rgba(255, 255, 255, 0.95);\n    padding: 0.1875rem 0.5rem;\n    border-radius: 0.5rem;\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);\n  }\n  .crane-price-tax {\n    font-size: 0.5625rem;\n    font-weight: 700;\n    color: #94a3b8;\n    margin-right: 0.1875rem;\n  }\n  .crane-price-num {\n    font-size: 1.125rem;\n    font-weight: 900;\n    color: #2563eb;\n  }\n  .crane-price-unit {\n    font-size: 0.5625rem;\n    font-weight: 800;\n    color: #2563eb;\n    margin-left: 0.125rem;\n  }\n  @media (min-width: 768px) {\n    .crane-price-box {\n      padding: 0.3125rem 0.75rem;\n      border-radius: 0.625rem;\n    }\n    .crane-price-num {\n      font-size: 1.375rem;\n    }\n  }\n\n  .crane-card-body {\n    padding: 0.875rem 1rem 1rem 1rem;\n    flex-grow: 1;\n    display: flex;\n    flex-direction: column;\n    gap: 0.375rem;\n  }\n  @media (min-width: 768px) {\n    .crane-card-body {\n      padding: 1.375rem 1.5rem;\n      gap: 0.75rem;\n    }\n  }\n\n  #property-root .crane-card-title {\n    font-size: 0.875rem !important;\n    font-weight: 700 !important;\n    color: #1e293b !important;\n    margin: 0 !important;\n    line-height: 1.35 !important;\n    min-height: auto !important;\n  }\n  @media (min-width: 768px) {\n    #property-root .crane-card-title {\n      font-size: 1.125rem !important;\n      font-weight: 800 !important;\n      min-height: 2.6rem !important;\n    }\n  }\n\n  .crane-card-address {\n    display: flex;\n    align-items: center;\n    font-size: 0.72rem;\n    color: #64748b;\n    gap: 0.25rem;\n  }\n  @media (min-width: 768px) {\n    .crane-card-address {\n      font-size: 0.8125rem;\n    }\n  }\n\n  .crane-spec-grid {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 0.5rem;\n    margin-top: 0.25rem;\n  }\n  .crane-spec-item {\n    background-color: #f8fafc;\n    padding: 0.4375rem 0.5rem;\n    border-radius: 0.5rem;\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n  }\n  .crane-spec-icon {\n    background-color: #ffffff;\n    padding: 0.25rem;\n    border-radius: 0.375rem;\n    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);\n    color: #3b82f6;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n  .crane-spec-lbl {\n    font-size: 0.5rem;\n    color: #94a3b8;\n    font-weight: 700;\n    text-transform: uppercase;\n    margin: 0;\n    line-height: 1;\n  }\n  .crane-spec-val {\n    font-size: 0.78rem;\n    font-weight: 800;\n    color: #334155;\n    margin: 0.125rem 0 0 0;\n    line-height: 1;\n  }\n\n  .crane-btn-wrap {\n    padding: 0 1rem 1rem 1rem;\n  }\n  @media (min-width: 768px) {\n    .crane-btn-wrap {\n      padding: 0 1.5rem 1.5rem 1.5rem;\n    }\n  }\n  .crane-call-btn {\n    width: 100%;\n    background-color: #0f172a;\n    color: #ffffff;\n    font-weight: 800;\n    padding: 0.625rem;\n    border-radius: 0.625rem;\n    border: none;\n    cursor: pointer;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    gap: 0.125rem;\n    transition: background-color 0.2s;\n  }\n  @media (min-width: 768px) {\n    .crane-call-btn {\n      padding: 0.875rem;\n      border-radius: 0.75rem;\n      gap: 0.25rem;\n    }\n  }\n  .crane-call-btn:hover {\n    background-color: #2563eb;\n  }\n  .crane-call-btn-text {\n    display: flex;\n    align-items: center;\n    gap: 0.3125rem;\n    font-size: 0.8125rem;\n  }\n  .crane-call-btn-sub {\n    font-size: 0.625rem;\n    opacity: 0.75;\n    letter-spacing: 0.05em;\n  }\n\n  \/* \u30e2\u30fc\u30c0\u30eb *\/\n  .crane-modal-bg {\n    position: fixed;\n    inset: 0;\n    z-index: 999999;\n    background-color: rgba(0, 0, 0, 0.9);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 1rem;\n  }\n  .crane-modal-close {\n    position: absolute;\n    top: 1rem;\n    right: 1rem;\n    background: none;\n    border: none;\n    color: #ffffff;\n    cursor: pointer;\n    z-index: 10;\n  }\n  .crane-modal-nav {\n    position: absolute;\n    background: none;\n    border: none;\n    color: #ffffff;\n    cursor: pointer;\n    z-index: 10;\n  }\n  .crane-modal-left { left: 0.5rem; }\n  .crane-modal-right { right: 0.5rem; }\n  @media (min-width: 768px) {\n    .crane-modal-close { top: 1.5rem; right: 1.5rem; }\n    .crane-modal-left { left: 2rem; }\n    .crane-modal-right { right: 2rem; }\n  }\n  .crane-modal-img {\n    max-width: 100%;\n    max-height: 75vh;\n    object-fit: contain;\n    border-radius: 0.5rem;\n    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);\n  }\n\n  .crane-footer-note {\n    text-align: center;\n    padding-top: 1.25rem;\n    border-top: 1px solid #f1f5f9;\n    color: #94a3b8;\n    font-size: 0.6875rem;\n    font-weight: 500;\n  }\n<\/style>\n\n<div id=\"property-root\"><\/div>\n\n<script>\n  const { useState, useEffect, useRef, createElement: h } = React;\n\n  const App = () => {\n    const containerRef = useRef(null);\n    const [selectedGallery, setSelectedGallery] = useState(null);\n    const [currentImgIndex, setCurrentImgIndex] = useState(0);\n\n    const companyInfo = {\n      phone: \"099-201-3909\",\n      name: \"\u682a\u5f0f\u4f1a\u793e\u30af\u30ec\u30a4\u30f3\u4e0d\u52d5\u7523\"\n    };\n\n    \/\/ \u2605 \u30dd\u30fc\u30bf\u30eb\u30b5\u30a4\u30c8\u306eURL\u8a2d\u5b9a\uff08\u3053\u3053\u306b\u5404\u30b5\u30a4\u30c8\u306eURL\u3092\u6307\u5b9a\u3057\u3066\u304f\u3060\u3055\u3044\uff09\n    const portalLinks = {\n      mansion: {\n        athome: \"https:\/\/www.athome.co.jp\/mansion\/estate\/130702\/list\/\"\n      },\n      house: {\n        athome: \"https:\/\/www.athome.co.jp\/kodate\/estate\/130702\/list\/\"\n      },\n      tochi: {\n        athome: \"https:\/\/www.athome.co.jp\/tochi\/estate\/130702\/list\/\" \/\/ \u2190\u571f\u5730\u7528\u306eURL\u306b\u5909\u66f4\u3057\u3066\u304f\u3060\u3055\u3044\n      }\n    };\n\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\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: [\"https:\/\/cranere2024.com\/wp-content\/uploads\/2LDK.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: [\"https:\/\/cranere2024.com\/wp-content\/uploads\/3LDK.jpg\"],\n        isMansion: true\n      },\n      {\n        id: 3,\n        type: \"comingsoon\",\n        tag: \"\u6e96\u5099\u4e2d\",\n        title: \"\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        id: 4,\n        type: \"comingsoon\",\n        tag: \"\u6e96\u5099\u4e2d\",\n        title: \"\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    useEffect(() => {\n      if (window.lucide && containerRef.current) {\n        window.lucide.createIcons({\n          root: containerRef.current\n        });\n      }\n    }, [selectedGallery]);\n\n    const handleCall = () => {\n      window.location.href = `tel:${companyInfo.phone}`;\n    };\n\n    const openGallery = (property) => {\n      setSelectedGallery(property);\n      setCurrentImgIndex(0);\n    };\n\n    const renderPortalBtn = (href, platform, label, color) => (\n      h('a', {\n        href: href,\n        target: '_blank',\n        rel: 'noopener noreferrer nofollow',\n        className: 'crane-portal-btn',\n        style: { borderColor: color }\n      },\n        h('div', { className: 'crane-portal-left' },\n          h('div', { className: 'crane-portal-iconbox', style: { backgroundColor: color } },\n            h('i', { 'data-lucide': 'external-link', style: { color: '#ffffff', width: '18px', height: '18px' } })\n          ),\n          h('div', null,\n            h('div', { className: 'crane-portal-name', style: { color: color } }, platform),\n            h('div', { className: 'crane-portal-label' }, label + '\u3092\u898b\u308b')\n          )\n        ),\n        h('i', { 'data-lucide': 'chevron-right', style: { color: '#cbd5e1', width: '18px', height: '18px' } })\n      )\n    );\n\n    return h('div', { ref: containerRef },\n      h('section', { className: 'crane-section' },\n        h('div', { className: 'crane-header-title' }, '\u5f0a\u793e\u7269\u4ef6\u3092\u30dd\u30fc\u30bf\u30eb\u30b5\u30a4\u30c8\u3067\u78ba\u8a8d'),\n        h('div', { className: 'crane-header-desc' }, '\u6700\u65b0\u306e\u60c5\u5831\u3092\u5404\u30b5\u30a4\u30c8\u304b\u3089\u3054\u89a7\u3044\u305f\u3060\u3051\u307e\u3059'),\n        h('div', { className: 'crane-grid-3' },\n          \/\/ \u30de\u30f3\u30b7\u30e7\u30f3\n          h('div', null,\n            h('div', { className: 'crane-subhead' },\n              h('span', { className: 'crane-icon-badge', style: { backgroundColor: '#dbeafe', color: '#2563eb' } },\n                h('i', { 'data-lucide': 'building-2', style: { width: '16px', height: '16px' } })\n              ),\n              '\u30de\u30f3\u30b7\u30e7\u30f3\u3092\u3054\u691c\u8a0e\u306e\u65b9'\n            ),\n            renderPortalBtn(portalLinks.mansion.athome, 'at home', '\u30de\u30f3\u30b7\u30e7\u30f3\u8a73\u7d30', '#E60012')\n          ),\n          \/\/ \u4e00\u6238\u5efa\u3066\n          h('div', null,\n            h('div', { className: 'crane-subhead' },\n              h('span', { className: 'crane-icon-badge', style: { backgroundColor: '#d1fae5', color: '#059669' } },\n                h('i', { 'data-lucide': 'home', style: { width: '16px', height: '16px' } })\n              ),\n              '\u4e00\u6238\u5efa\u3066\u3092\u3054\u691c\u8a0e\u306e\u65b9'\n            ),\n            renderPortalBtn(portalLinks.house.athome, 'at home', '\u6238\u5efa\u3066\u8a73\u7d30', '#E60012')\n          ),\n          \/\/ \u571f\u5730\n          h('div', null,\n            h('div', { className: 'crane-subhead' },\n              h('span', { className: 'crane-icon-badge', style: { backgroundColor: '#fef3c7', color: '#d97706' } },\n                h('i', { 'data-lucide': 'map', style: { width: '16px', height: '16px' } })\n              ),\n              '\u571f\u5730\u3092\u304a\u63a2\u3057\u306e\u65b9'\n            ),\n            renderPortalBtn(portalLinks.tochi.athome, 'at home', '\u571f\u5730\u8a73\u7d30', '#E60012')\n          )\n        )\n      ),\n\n      h('section', null,\n        h('div', { className: 'crane-lead-title' },\n          h('h1', null, '\u65b0\u7bc9\u30de\u30f3\u30b7\u30e7\u30f3\u3054\u6848\u5185'),\n          h('p', null, 'Recommended Properties')\n        ),\n        h('div', { className: 'crane-grid-2' },\n          properties.map((item) => (\n            h('div', { key: item.id, className: 'crane-card' },\n              h('div', { className: 'crane-card-imgwrap', onClick: () => openGallery(item) },\n                h('img', { src: item.images[0], alt: item.title || '\u7269\u4ef6\u753b\u50cf' }),\n                h('div', { className: 'crane-badge-container' },\n                  item.tag ? h('span', { className: 'crane-tag-badge' }, item.tag) : null,\n                  h('span', { className: 'crane-type-badge' },\n                    item.isMansion ? h('i', { 'data-lucide': 'building-2', style: { width: '11px', height: '11px' } }) : h('i', { 'data-lucide': 'home', style: { width: '11px', height: '11px' } }),\n                    item.type\n                  )\n                ),\n                h('div', { className: 'crane-price-box' },\n                  h('span', { className: 'crane-price-tax' }, '\u7a0e\u8fbc'),\n                  h('span', { className: 'crane-price-num' }, item.price),\n                  h('span', { className: 'crane-price-unit' }, '\u4e07\u5186')\n                )\n              ),\n              h('div', { className: 'crane-card-body' },\n                item.title ? h('h2', { className: 'crane-card-title' }, item.title) : null,\n                h('div', { className: 'crane-card-address' },\n                  h('i', { 'data-lucide': 'map-pin', style: { width: '13px', height: '13px', color: '#cbd5e1' } }),\n                  item.address\n                ),\n                h('div', { className: 'crane-spec-grid' },\n                  h('div', { className: 'crane-spec-item' },\n                    h('div', { className: 'crane-spec-icon' },\n                      h('i', { 'data-lucide': 'bed-double', style: { width: '14px', height: '14px' } })\n                    ),\n                    h('div', null,\n                      h('p', { className: 'crane-spec-lbl' }, 'Layout'),\n                      h('p', { className: 'crane-spec-val' }, item.layout || '-')\n                    )\n                  ),\n                  h('div', { className: 'crane-spec-item' },\n                    h('div', { className: 'crane-spec-icon' },\n                      h('i', { 'data-lucide': 'maximize-2', style: { width: '14px', height: '14px' } })\n                    ),\n                    h('div', null,\n                      h('p', { className: 'crane-spec-lbl' }, 'Area'),\n                      h('p', { className: 'crane-spec-val' }, item.area || '-')\n                    )\n                  )\n                )\n              ),\n              h('div', { className: 'crane-btn-wrap' },\n                h('button', { className: 'crane-call-btn', onClick: handleCall },\n                  h('div', { className: 'crane-call-btn-text' },\n                    h('i', { 'data-lucide': 'phone', style: { width: '14px', height: '14px' } }),\n                    '\u8a73\u7d30\u3092\u96fb\u8a71\u3067\u805e\u304f'\n                  ),\n                  h('div', { className: 'crane-call-btn-sub' }, companyInfo.phone)\n                )\n              )\n            )\n          ))\n        )\n      ),\n\n      selectedGallery ? h('div', { className: 'crane-modal-bg' },\n        h('button', { className: 'crane-modal-close', onClick: () => setSelectedGallery(null) },\n          h('i', { 'data-lucide': 'x', style: { width: '28px', height: '28px' } })\n        ),\n        selectedGallery.images.length > 1 ? h('button', {\n          className: 'crane-modal-nav crane-modal-left',\n          onClick: () => setCurrentImgIndex(prev => prev === 0 ? selectedGallery.images.length - 1 : prev - 1)\n        }, h('i', { 'data-lucide': 'chevron-left', style: { width: '32px', height: '32px' } })) : null,\n        h('div', { style: { display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '1rem', maxWidth: '100%' } },\n          h('img', { src: selectedGallery.images[currentImgIndex], alt: 'Gallery', className: 'crane-modal-img' }),\n          h('div', { style: { color: '#ffffff', textAlign: 'center' } },\n            h('p', { style: { fontSize: '1.125rem', fontWeight: 700, margin: 0 } }, selectedGallery.title),\n            selectedGallery.images.length > 1 ? h('p', { style: { fontSize: '0.8125rem', opacity: 0.7, margin: '0.25rem 0 0 0' } }, (currentImgIndex + 1) + ' \/ ' + selectedGallery.images.length) : null\n          )\n        ),\n        selectedGallery.images.length > 1 ? h('button', {\n          className: 'crane-modal-nav crane-modal-right',\n          onClick: () => setCurrentImgIndex(prev => prev === selectedGallery.images.length - 1 ? 0 : prev + 1)\n        }, h('i', { 'data-lucide': 'chevron-right', style: { width: '32px', height: '32px' } })) : null\n      ) : null,\n\n      h('div', { className: 'crane-footer-note' }, '\u203b\u6700\u65b0\u306e\u72b6\u6cc1\u306b\u3064\u3044\u3066\u306f\u304a\u554f\u3044\u5408\u308f\u305b\u304f\u3060\u3055\u3044\u3002')\n    );\n  };\n\n  const root = ReactDOM.createRoot(document.getElementById('property-root'));\n  root.render(React.createElement(App));\n<\/script>\n\n\n\n<p class=\"has-text-align-center vk_block-margin-0--margin-top wp-block-paragraph\"><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","protected":false},"excerpt":{"rendered":"<p>\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\u7d39\u4ecb\u53ef\u80fd\u3067\u3059\u3002<\/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":"http:\/\/cranere2024.com\/index.php?rest_route=\/wp\/v2\/pages\/53","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/cranere2024.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/cranere2024.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/cranere2024.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/cranere2024.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=53"}],"version-history":[{"count":207,"href":"http:\/\/cranere2024.com\/index.php?rest_route=\/wp\/v2\/pages\/53\/revisions"}],"predecessor-version":[{"id":896,"href":"http:\/\/cranere2024.com\/index.php?rest_route=\/wp\/v2\/pages\/53\/revisions\/896"}],"wp:attachment":[{"href":"http:\/\/cranere2024.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=53"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}