{"id":56418,"date":"2025-03-17T11:03:20","date_gmt":"2025-03-17T02:03:20","guid":{"rendered":"https:\/\/single-aiseki.com\/lp-the_single_app\/?post_type=content_block&#038;p=56418"},"modified":"2025-07-22T11:22:13","modified_gmt":"2025-07-22T02:22:13","slug":"cta_%e3%83%8f%e3%83%83%e3%83%94%e3%83%bc%e3%83%a1%e3%83%bc%e3%83%ab_%e3%82%b3%e3%83%94%e3%83%bc%e4%bb%98","status":"publish","type":"content_block","link":"https:\/\/single-aiseki.com\/lp-the_single_app\/content_block\/cta_%e3%83%8f%e3%83%83%e3%83%94%e3%83%bc%e3%83%a1%e3%83%bc%e3%83%ab_%e3%82%b3%e3%83%94%e3%83%bc%e4%bb%98\/","title":{"rendered":"CTA_\u30cf\u30c3\u30d4\u30fc\u30e1\u30fc\u30eb_\u30b3\u30d4\u30fc\u4ed8"},"content":{"rendered":"\n\n\n\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>\u30cf\u30c3\u30d4\u30fc\u30e1\u30fc\u30eb CTA<\/title>\n    <style>\n        .happymail-cta-safe-container {\n            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n            margin: 0;\n            padding: 20px;\n            background-color: #f5f5f7;\n            \/* \u4ed6\u306e\u8981\u7d20\u3078\u306e\u5f71\u97ff\u3092\u9632\u3050 *\/\n            isolation: isolate;\n        }\n        \n        .happymail-cta-safe-container * {\n            \/* CTA\u5185\u306e\u8981\u7d20\u306e\u307f\u306b\u9069\u7528 *\/\n            box-sizing: border-box;\n        }\n        \n        .happymail-cta-safe-container .happymail-cta-safe {\n            background-color: white;\n            border-radius: 16px;\n            padding: 20px;\n            max-width: 500px;\n            margin: 0 auto;\n            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            gap: 16px;\n        }\n        \n        .happymail-cta-safe-container .happymail-header-safe {\n            display: flex;\n            align-items: center;\n            gap: 16px;\n            width: 100%;\n            margin-bottom: 8px;\n        }\n        \n        .happymail-cta-safe-container .happymail-app-icon-safe {\n            width: 80px;\n            height: 80px;\n            border-radius: 18px;\n            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n            object-fit: cover;\n        }\n        \n        .happymail-cta-safe-container .happymail-info-safe {\n            flex: 1;\n        }\n        \n        .happymail-cta-safe-container .happymail-title-safe {\n            font-size: 20px;\n            font-weight: 600;\n            color: #1d1d1f;\n            margin: 0 0 4px 0;\n        }\n        \n        .happymail-cta-safe-container .happymail-subtitle-safe {\n            font-size: 14px;\n            color: #86868b;\n            margin: 0;\n            line-height: 1.4;\n        }\n        \n        .happymail-cta-safe-container .happymail-actions-safe {\n            width: 100%;\n        }\n        \n        .happymail-cta-safe-container .happymail-download-btn-safe {\n            background: linear-gradient(135deg, #007aff 0%, #0056cc 100%);\n            color: white;\n            border: none;\n            border-radius: 25px;\n            padding: 16px 32px;\n            font-size: 18px;\n            font-weight: 600;\n            cursor: pointer;\n            transition: all 0.3s ease;\n            box-shadow: 0 4px 15px rgba(0, 122, 255, 0.4);\n            text-decoration: none;\n            display: block;\n            text-align: center;\n            width: 100%;\n            box-sizing: border-box;\n            position: relative;\n            overflow: hidden;\n        }\n        \n        \/* \u30ad\u30e9\u30c3\u3068\u5149\u308b\u30a8\u30d5\u30a7\u30af\u30c8 *\/\n        .happymail-cta-safe-container .happymail-download-btn-safe::before {\n            content: '';\n            position: absolute;\n            top: 0;\n            left: -100%;\n            width: 100%;\n            height: 100%;\n            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);\n            transition: left 0.6s ease;\n        }\n        \n        .happymail-cta-safe-container .happymail-download-btn-safe:hover::before {\n            left: 100%;\n        }\n        \n        .happymail-cta-safe-container .happymail-download-btn-safe:hover {\n            transform: translateY(-2px);\n            box-shadow: 0 8px 25px rgba(0, 122, 255, 0.5);\n            background: linear-gradient(135deg, #1a8cff 0%, #0062e6 100%);\n        }\n        \n        .happymail-cta-safe-container .happymail-download-btn-safe:active {\n            transform: translateY(0);\n        }\n        \n        .happymail-cta-safe-container .happymail-download-btn-safe:focus {\n            outline: 2px solid #007aff;\n            outline-offset: 2px;\n        }\n        \n        \/* \u5b9a\u671f\u7684\u306b\u5149\u308b\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3 *\/\n        @keyframes shimmer {\n            0% {\n                left: -100%;\n            }\n            100% {\n                left: 100%;\n            }\n        }\n        \n        .happymail-cta-safe-container .happymail-download-btn-safe::after {\n            content: '';\n            position: absolute;\n            top: 0;\n            left: -100%;\n            width: 100%;\n            height: 100%;\n            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);\n            animation: shimmer 3s infinite;\n            animation-delay: 2s;\n        }\n        \n        \/* \u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u5bfe\u5fdc *\/\n        @media (max-width: 480px) {\n            .happymail-cta-safe-container .happymail-cta-safe {\n                padding: 16px;\n                gap: 12px;\n            }\n            \n            .happymail-cta-safe-container .happymail-header-safe {\n                gap: 12px;\n            }\n            \n            .happymail-cta-safe-container .happymail-app-icon-safe {\n                width: 60px;\n                height: 60px;\n            }\n            \n            .happymail-cta-safe-container .happymail-title-safe {\n                font-size: 18px;\n            }\n            \n            .happymail-cta-safe-container .happymail-subtitle-safe {\n                font-size: 13px;\n            }\n            \n            .happymail-cta-safe-container .happymail-download-btn-safe {\n                padding: 14px 24px;\n                font-size: 16px;\n            }\n        }\n    <\/style>\n\n\n    <!-- \u30cf\u30c3\u30d4\u30fc\u30e1\u30fc\u30eb CTA -->\n    <div class=\"happymail-cta-safe-container\">\n        <div class=\"happymail-cta-safe\">\n            <div class=\"happymail-header-safe\">\n                <img decoding=\"async\" data-src=\"https:\/\/single-aiseki.com\/lp-the_single_app\/wp-content\/uploads\/2024\/01\/happymail.jpeg\" alt=\"\u30a2\u30d7\u30ea\u30a2\u30a4\u30b3\u30f3\" class=\"happymail-app-icon-safe\">\n                \n                <div class=\"happymail-info-safe\">\n                    <p class=\"happymail-title-safe\">\u30cf\u30c3\u30d4\u30fc\u30e1\u30fc\u30eb<\/p>\n                    <p class=\"happymail-subtitle-safe\">\u7d2f\u8a08\u4f1a\u54e1\u65703,500\u4e07\u4eba\u3092\u7a81\u7834<\/p>\n                <\/div>\n            <\/div>\n            \n            <div class=\"happymail-actions-safe\">\n                <a href=\"https:\/\/single-aiseki.com\/matchapp\/link\/happymail\/\" class=\"happymail-download-btn-safe\" target=\"_blank\" rel=\"noopener noreferrer\">\u4eca\u3059\u3050\u7121\u6599\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9<\/a>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <script>\n        \/\/ \u30cf\u30c3\u30d4\u30fc\u30e1\u30fc\u30eb\u5c02\u7528\u306e\u30af\u30ea\u30c3\u30af\u30a4\u30d9\u30f3\u30c8\n        document.addEventListener('DOMContentLoaded', function() {\n            const happymailDownloadBtn = document.querySelector('.happymail-cta-safe-container .happymail-download-btn-safe');\n            \n            if (happymailDownloadBtn) {\n                happymailDownloadBtn.addEventListener('click', function(e) {\n                    \/\/ a\u30bf\u30b0\u306e\u901a\u5e38\u52d5\u4f5c\u3092\u8a31\u53ef\n                    console.log('\u30cf\u30c3\u30d4\u30fc\u30e1\u30fc\u30eb CTA\u304c\u30af\u30ea\u30c3\u30af\u3055\u308c\u307e\u3057\u305f');\n                });\n            }\n        });\n    <\/script>\n\n\n","protected":false},"template":"","content_block_category":[],"_links":{"self":[{"href":"https:\/\/single-aiseki.com\/lp-the_single_app\/wp-json\/wp\/v2\/content_block\/56418"}],"collection":[{"href":"https:\/\/single-aiseki.com\/lp-the_single_app\/wp-json\/wp\/v2\/content_block"}],"about":[{"href":"https:\/\/single-aiseki.com\/lp-the_single_app\/wp-json\/wp\/v2\/types\/content_block"}],"wp:attachment":[{"href":"https:\/\/single-aiseki.com\/lp-the_single_app\/wp-json\/wp\/v2\/media?parent=56418"}],"wp:term":[{"taxonomy":"content_block_category","embeddable":true,"href":"https:\/\/single-aiseki.com\/lp-the_single_app\/wp-json\/wp\/v2\/content_block_category?post=56418"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}