{"id":17,"date":"2026-05-16T16:12:07","date_gmt":"2026-05-16T07:12:07","guid":{"rendered":"https:\/\/2nd-night.com\/?page_id=17"},"modified":"2026-05-16T16:12:07","modified_gmt":"2026-05-16T07:12:07","slug":"2nd-%e4%bb%8a%e3%81%99%e3%81%90%e8%bf%91%e3%81%8f%e3%81%ae2%e8%bb%92%e7%9b%ae%e3%82%92%e6%8e%a2%e3%81%99","status":"publish","type":"page","link":"https:\/\/2nd-night.com\/?page_id=17","title":{"rendered":"2nd &#8211; \u4eca\u3059\u3050\u8fd1\u304f\u306e2\u8ed2\u76ee\u3092\u63a2\u3059"},"content":{"rendered":"\n<p><code>    <div class=\"second-app-wrapper\">\r\n        <div class=\"second-app-bg-overlay\"><\/div>\r\n        \r\n        <div class=\"second-app-content-container\">\r\n            <button id=\"find-shops-btn\">\r\n                <span>\u73fe\u5728\u5730\u304b\u3089\u8fd1\u30442\u8ed2\u76ee\u3092\u63a2\u3059<\/span>\r\n            <\/button>\r\n            \r\n            <div id=\"shops-loading\">\r\n                <span class=\"spinner\"><\/span>\r\n                <span class=\"loading-text\">\u591c\u306e\u6771\u4eac\u3092\u30ca\u30d3\u30b2\u30fc\u30c8\u4e2d...<\/span>\r\n            <\/div>\r\n            \r\n            <ul id=\"shops-results-list\"><\/ul>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <style>\r\n    \/* 1. \u30da\u30fc\u30b8\u5168\u4f53\u306e\u80cc\u666f\u3068\u30bf\u30a4\u30c8\u30eb\u306e\u8abf\u6574 *\/\r\n    .entry-content, .post, .page, body, #container, .main {\r\n        background-color: #0c0d10 !important; \/* \u6697\u3044\u30b0\u30ec\u30fc\/\u9ed2 *\/\r\n        color: #f0f1f3 !important;\r\n    }\r\n    \r\n    .entry-title {\r\n        color: #ffffff !important;\r\n        text-align: center;\r\n        font-weight: 700 !important;\r\n        letter-spacing: 0.1em;\r\n        margin-bottom: 50px !important;\r\n        font-size: 32px !important;\r\n        text-transform: uppercase;\r\n        border-bottom: 2px solid rgba(255,255,255,0.1);\r\n        padding-bottom: 15px;\r\n    }\r\n\r\n    \/* 2. \u30a2\u30d7\u30ea\u5168\u4f53\u306e\u30ec\u30a4\u30a2\u30a6\u30c8\u3068\u80cc\u666f\u753b\u50cf *\/\r\n    .second-app-wrapper {\r\n        position: relative;\r\n        width: 100%;\r\n        min-height: 400px;\r\n        padding: 50px 20px;\r\n        border-radius: 12px;\r\n        overflow: hidden;\r\n        \/* \ud83d\udc47 \u3053\u3053\u306b\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u3057\u305f\u753b\u50cf\u306eURL\u3092\u8cbc\u308a\u4ed8\u3051\u307e\u3059 \ud83d\udc47 *\/\r\n        background-image: url('http:\/\/2nd-night.com\/wp-content\/uploads\/2026\/05\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-2026-05-16-16.31.12.png');\r\n        background-size: cover;\r\n        background-position: center;\r\n    }\r\n    \r\n    \/* \u80cc\u666f\u753b\u50cf\u3092\u30e2\u30ce\u30c8\u30fc\u30f3\uff06\u6697\u304f\u3059\u308b\u30aa\u30fc\u30d0\u30fc\u30ec\u30a4 *\/\r\n    .second-app-bg-overlay {\r\n        position: absolute;\r\n        top: 0; left: 0;\r\n        width: 100%; height: 100%;\r\n        background-color: rgba(0, 0, 0, 0.85); \/* \u5f37\u3044\u9ed2\u306e\u30aa\u30fc\u30d0\u30fc\u30ec\u30a4 *\/\r\n        filter: grayscale(100%); \/* \u30e2\u30ce\u30c8\u30fc\u30f3\u5316 *\/\r\n        z-index: 1;\r\n    }\r\n    \r\n    .second-app-content-container {\r\n        position: relative;\r\n        text-align: center;\r\n        margin: 0 auto;\r\n        max-width: 450px;\r\n        font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\r\n        z-index: 2; \/* \u30aa\u30fc\u30d0\u30fc\u30ec\u30a4\u3088\u308a\u4e0a\u306b *\/\r\n    }\r\n    \r\n    \/* 3. \u30b9\u30de\u30fc\u30c8\u306a\u767d\u9ed2\u30dc\u30bf\u30f3 *\/\r\n    #find-shops-btn {\r\n        background-color: #ffffff;\r\n        color: #0c0d10;\r\n        border: none;\r\n        padding: 18px 30px;\r\n        font-size: 16px;\r\n        font-weight: 700;\r\n        border-radius: 8px; \/* \u4e38\u307f\u3092\u6291\u3048\u308b *\/\r\n        cursor: pointer;\r\n        box-shadow: 0 4px 15px rgba(255, 255, 255, 0.1);\r\n        transition: all 0.3s ease;\r\n        width: 100%;\r\n        letter-spacing: 0.05em;\r\n        border: 2px solid #ffffff;\r\n    }\r\n    \r\n    \/* \u30db\u30d0\u30fc\uff08\u30de\u30a6\u30b9\u30db\u30d0\u30fc\uff09\u6642\u306e\u52d5\u304d\uff1a\u53cd\u8ee2\u3055\u305b\u308b *\/\r\n    #find-shops-btn:hover {\r\n        background-color: transparent;\r\n        color: #ffffff;\r\n    }\r\n    \r\n    #find-shops-btn:active {\r\n        transform: scale(0.98);\r\n        box-shadow: 0 2px 5px rgba(255, 255, 255, 0.05);\r\n    }\r\n    \r\n    #find-shops-btn:disabled {\r\n        border-color: #3d414a;\r\n        background-color: #1a1c22;\r\n        box-shadow: none;\r\n        color: #6a717e;\r\n        cursor: not-allowed;\r\n    }\r\n    \r\n    \/* 4. \u30ed\u30fc\u30c7\u30a3\u30f3\u30b0\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\uff08\u30e2\u30ce\u30c8\u30fc\u30f3\uff09 *\/\r\n    #shops-loading {\r\n        display: none;\r\n        margin-top: 30px;\r\n        font-size: 14px;\r\n        color: #9da3b1;\r\n    }\r\n    .spinner {\r\n        display: inline-block;\r\n        width: 18px;\r\n        height: 18px;\r\n        border: 2px solid rgba(255,255,255,0.1);\r\n        border-top-color: #ffffff;\r\n        border-radius: 50%;\r\n        animation: spin 0.8s linear infinite;\r\n        vertical-align: middle;\r\n        margin-right: 10px;\r\n    }\r\n    \r\n    \/* 5. \u7d50\u679c\u30ea\u30b9\u30c8 *\/\r\n    #shops-results-list {\r\n        list-style: none;\r\n        padding: 0;\r\n        margin: 40px 0 0 0;\r\n        text-align: left;\r\n    }\r\n    \r\n    @keyframes spin { to { transform: rotate(360deg); } }\r\n    <\/style>\r\n\r\n    <script>\r\n    document.getElementById('find-shops-btn').addEventListener('click', function() {\r\n        const btn = this;\r\n        const loading = document.getElementById('shops-loading');\r\n        const list = document.getElementById('shops-results-list');\r\n        \r\n        list.innerHTML = '';\r\n        loading.style.display = 'block';\r\n        btn.disabled = true;\r\n\r\n        if (!navigator.geolocation) {\r\n            alert('\u304a\u4f7f\u3044\u306e\u30d6\u30e9\u30a6\u30b6\u3084\u7aef\u672b\u306f\u4f4d\u7f6e\u60c5\u5831\u306b\u5bfe\u5fdc\u3057\u3066\u3044\u307e\u305b\u3093\u3002');\r\n            loading.style.display = 'none';\r\n            btn.disabled = false;\r\n            return;\r\n        }\r\n\r\n        navigator.geolocation.getCurrentPosition(function(position) {\r\n            const lat = position.coords.latitude;\r\n            const lng = position.coords.longitude;\r\n\r\n            const formData = new FormData();\r\n            formData.append('action', 'get_nearest_shops');\r\n            formData.append('lat', lat);\r\n            formData.append('lng', lng);\r\n\r\n            fetch('https:\/\/2nd-night.com\/wp-admin\/admin-ajax.php', {\r\n                method: 'POST',\r\n                body: formData\r\n            })\r\n            .then(response => response.json())\r\n            .then(data => {\r\n                loading.style.display = 'none';\r\n                btn.disabled = false;\r\n                \r\n                if (data.success && data.data.length > 0) {\r\n                    data.data.forEach(shop => {\r\n                        const li = document.createElement('li');\r\n                        \r\n                        \/\/ JS\u5074\u3067\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u751f\u6210\u3059\u308b\u30b9\u30de\u30fc\u30c8\u306a\u767d\u9ed2\u30ab\u30fc\u30c9\u30b9\u30bf\u30a4\u30eb\r\n                        li.style.background = '#1a1c22'; \/* \u6697\u3044\u30b0\u30ec\u30fc *\/\r\n                        li.style.margin = '15px 0';\r\n                        li.style.padding = '20px';\r\n                        li.style.borderRadius = '8px';\r\n                        li.style.border = '1px solid rgba(255,255,255,0.05)';\r\n                        li.style.boxShadow = '0 5px 20px rgba(0,0,0,0.5)';\r\n                        li.style.display = 'flex';\r\n                        li.style.justifyContent = 'space-between';\r\n                        li.style.alignItems = 'center';\r\n                        li.style.transition = 'all 0.2s ease';\r\n                        \r\n                        const walkMin = Math.ceil((shop.distance * 1000) \/ 80);\r\n                        \r\n                        li.innerHTML = `\r\n                            <div>\r\n                                <a href=\"${shop.url}\" style=\"text-decoration: none; color: #ffffff; font-weight: 600; font-size: 16px; letter-spacing:0.02em;\">${shop.title}<\/a>\r\n                                <div style=\"color: #9da3b1; font-size: 12px; margin-top: 5px;\">\u76f4\u7dda\u8ddd\u96e2: ${shop.distance.toFixed(2)} km<\/div>\r\n                            <\/div>\r\n                            <div style=\"text-align: right;\">\r\n                                <span style=\"background: rgba(255, 255, 255, 0.05); color: #f0f1f3; border: 1px solid rgba(255, 255, 255, 0.15); font-weight: 600; font-size: 13px; padding: 5px 12px; border-radius: 6px;\">\u5f92\u6b69 \u7d04${walkMin}\u5206<\/span>\r\n                            <\/div>\r\n                        `;\r\n                        \r\n                        \/\/ \u30db\u30d0\u30fc\u6642\u306e\u52d5\u304d\uff08\u30b7\u30f3\u30d7\u30eb\u306b\uff09\r\n                        li.addEventListener('mouseenter', () => {\r\n                            li.style.transform = 'translateY(-2px)';\r\n                            li.style.borderColor = 'rgba(255,255,255,0.1)';\r\n                        });\r\n                        li.addEventListener('mouseleave', () => {\r\n                            li.style.transform = 'translateY(0)';\r\n                            li.style.borderColor = 'rgba(255,255,255,0.05)';\r\n                        });\r\n                        \r\n                        list.appendChild(li);\r\n                    });\r\n                } else {\r\n                    list.innerHTML = '<li style=\"text-align:center; color:#9da3b1; padding: 25px; background:#1a1c22; border-radius:8px; border: 1px solid rgba(255,255,255,0.05);\">\u4ed8\u8fd1\u306b\u5e97\u8217\u30c7\u30fc\u30bf\u304c\u898b\u3064\u304b\u308a\u307e\u305b\u3093\u3067\u3057\u305f\u3002<\/li>';\r\n                }\r\n            })\r\n            .catch(error => {\r\n                console.error(error);\r\n                loading.style.display = 'none';\r\n                btn.disabled = false;\r\n                alert('\u901a\u4fe1\u30a8\u30e9\u30fc\u304c\u767a\u751f\u3057\u307e\u3057\u305f\u3002');\r\n            });\r\n\r\n        }, function(error) {\r\n            loading.style.display = 'none';\r\n            btn.disabled = false;\r\n            alert('\u4f4d\u7f6e\u60c5\u5831\u306e\u53d6\u5f97\u306b\u5931\u6557\u3057\u307e\u3057\u305f\u3002\u30d6\u30e9\u30a6\u30b6\u306e\u4f4d\u7f6e\u60c5\u5831\u8a2d\u5b9a\u3092ON\u306b\u3057\u3066\u304f\u3060\u3055\u3044\u3002');\r\n        });\r\n    });\r\n    <\/script>\r\n    <\/code><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-17","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/2nd-night.com\/index.php?rest_route=\/wp\/v2\/pages\/17","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/2nd-night.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/2nd-night.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/2nd-night.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/2nd-night.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=17"}],"version-history":[{"count":2,"href":"https:\/\/2nd-night.com\/index.php?rest_route=\/wp\/v2\/pages\/17\/revisions"}],"predecessor-version":[{"id":19,"href":"https:\/\/2nd-night.com\/index.php?rest_route=\/wp\/v2\/pages\/17\/revisions\/19"}],"wp:attachment":[{"href":"https:\/\/2nd-night.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=17"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}