{"id":2,"date":"2025-12-30T02:21:23","date_gmt":"2025-12-30T02:21:23","guid":{"rendered":"https:\/\/popchat.jp\/postman2\/?page_id=2"},"modified":"2026-10-15T03:19:29","modified_gmt":"2026-10-15T03:19:29","slug":"sample-page","status":"publish","type":"page","link":"https:\/\/popchat.jp\/postman\/","title":{"rendered":"\u30db\u30fc\u30e0"},"content":{"rendered":"\n<!-- \u2460 UI\u30fb\u6f14\u51fa\u7528CSS -->\n<style>\n  \/* 1. \u753b\u9762\u5168\u4f53\u306e\u30b9\u30af\u30ed\u30fc\u30eb\u3068\u4f59\u767d\u3092\u906e\u65ad *\/\n  html, body {\n      width: 100vw !important;\n      height: 100vh !important;\n      height: 100dvh !important;\n      margin: 0 !important;\n      padding: 0 !important;\n      overflow: hidden !important;\n      background-color: #050510 !important;\n  }\n\n  \/* 2. \u80cc\u666f\u8272\u3068\u5bf8\u6cd5\u306e\u56fa\u5b9a *\/\n  #wrapper, .site-body, .site-body-container, .main-section, #content, .entry-body, .entry-content {\n      background-color: #050510 !important;\n      padding: 0 !important; \n      margin: 0 !important; \n      max-width: 100% !important;\n      width: 100vw !important;\n      height: 100vh !important;\n      height: 100dvh !important;\n      overflow: hidden !important;\n  }\n\n  \/* 3. \u30c6\u30fc\u30de\u67a0\u30fb\u4e0d\u8981\u30d1\u30fc\u30c4\u306e\u5168\u975e\u8868\u793a *\/\n  .site-header, .site-footer, .page-header, .breadSection, .entry-key-target, .eyecatch, \n  .lightning-sub-header, .vk-page-header, .site-body-main-after, .veuu-share,\n  .vk-mobile-nav, .vk-mobile-nav-toggle, #vk-mobile-nav, .vk-mobile-nav-menu-btn,\n  .mobile-fix-nav, .site-header-toggle, .sub-section, .side-section,\n  #page_top, .page_top_btn,\n  .site-body img, .entry-body img, main img, figure, .wp-block-gallery, .wp-block-image { \n      display: none !important; \n  }\n\n  \/* 4. \u9078\u629e\u30fb\u30c9\u30e9\u30c3\u30b0\u7981\u6b62 *\/\n  .hero-bg-image, .notice-trigger, .hero-title, .notice-content, .nav-card {\n      user-select: none !important;\n      -webkit-user-select: none !important;\n      -webkit-user-drag: none !important;\n  }\n\n  \/* 5. \u6307\u5b9a\u306e\u80cc\u666f\u753b\u50cf *\/\n  .hero-bg-image {\n      position: absolute; top: 0; left: 0; width: 100%; height: 100%;\n      background-image: url('https:\/\/popchat.jp\/postman\/wp-content\/uploads\/2026\/09\/placidplace-space-7301998-1024x589.jpg') !important;\n      background-size: cover; background-position: center; opacity: 0.75 !important;\n      z-index: 0; pointer-events: none !important; animation: slowZoom 25s infinite alternate linear;\n  }\n  @keyframes slowZoom { 0% { transform: scale(1); } 100% { transform: scale(1.15); } }\n\n  \/* 6. Three.js\u63cf\u753b\u30ad\u30e3\u30f3\u30d0\u30b9 *\/\n  #glcanvas {\n      position: absolute; top: 0; left: 0; width: 100vw; height: 100vh;\n      z-index: 1; pointer-events: none !important;\n  }\n\n  \/* 7. \u304a\u77e5\u3089\u305b\u30d1\u30cd\u30eb\uff08\u30bf\u30c3\u30d7\u30fb\u30db\u30d0\u30fc\u4e21\u5bfe\u5fdc\uff09 *\/\n  .notice-wrapper {\n      position: absolute; top: 30px; right: 30px; z-index: 20; \n      font-family: 'Noto Sans JP', sans-serif;\n      pointer-events: auto !important;\n  }\n  .notice-trigger {\n      display: flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, 0.15); \n      backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);\n      border: 1px solid rgba(255, 255, 255, 0.25); color: #fff;\n      padding: 10px 20px; border-radius: 30px; cursor: pointer; transition: all 0.3s ease;\n  }\n  .notice-content {\n      position: absolute; top: 55px; right: 0; width: 320px; background: rgba(10, 10, 20, 0.92); \n      backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);\n      border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 12px;\n      padding: 20px; color: #fff; opacity: 0; visibility: hidden; transform: translateY(-10px);\n      transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n      pointer-events: none;\n  }\n\n  \/* \u958b\u9589\u72b6\u614b\u306e\u5236\u5fa1\uff08JS\u306b\u3088\u308b .is-open \u30af\u30e9\u30b9\uff09 *\/\n  .notice-wrapper.is-open .notice-content {\n      opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;\n  }\n  .notice-wrapper.is-open .notice-trigger {\n      background: rgba(221, 0, 127, 0.7); border-color: rgba(221, 0, 127, 1);\n  }\n\n  \/* \u30de\u30a6\u30b9\u64cd\u4f5c\u7aef\u672b\u306e\u307f\u30db\u30d0\u30fc\u3067\u3082\u958b\u304f *\/\n  @media (hover: hover) {\n      .notice-wrapper:hover .notice-content { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }\n      .notice-wrapper:hover .notice-trigger { background: rgba(221, 0, 127, 0.6); border-color: rgba(221, 0, 127, 1); }\n  }\n\n  .notice-content ul { list-style: none; padding: 0; margin: 0; font-size: 0.9rem; }\n  .notice-content li { margin-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 10px; }\n  .notice-content li:last-child { margin-bottom: 0; border-bottom: none; padding-bottom: 0; }\n  .notice-date { display: block; font-size: 0.75rem; color: #aaa; margin-bottom: 4px; }\n\n  \/* 8. \u4e2d\u592e\u30d2\u30fc\u30ed\u30fc\u30a8\u30ea\u30a2 \uff06 \u30e1\u30cb\u30e5\u30fc\u8d77\u52d5\u30dc\u30bf\u30f3 *\/\n  .hero-center-box {\n      position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);\n      z-index: 10; width: 100%; max-width: 650px; text-align: center;\n      pointer-events: none;\n  }\n  .menu-open-btn {\n      pointer-events: auto !important;\n      display: inline-flex; align-items: center; justify-content: center; gap: 12px;\n      margin-top: 35px; padding: 16px 38px;\n      font-size: 1.05rem; font-weight: bold; color: #fff;\n      font-family: 'Noto Sans JP', sans-serif; letter-spacing: 0.08em;\n      background: rgba(221, 0, 127, 0.25);\n      border: 1.5px solid rgba(221, 0, 127, 0.8);\n      border-radius: 40px; cursor: pointer;\n      backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);\n      box-shadow: 0 0 25px rgba(221, 0, 127, 0.35);\n      transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n  }\n  .menu-open-btn:hover {\n      background: rgba(221, 0, 127, 0.75);\n      border-color: rgba(255, 255, 255, 0.9);\n      box-shadow: 0 0 40px rgba(221, 0, 127, 0.85), 0 0 15px rgba(255, 255, 255, 0.5);\n      transform: translateY(-3px) scale(1.03);\n  }\n\n  \/* 9. \u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3\u30e1\u30cb\u30e5\u30fc \u30e2\u30fc\u30c0\u30eb *\/\n  .nav-modal-overlay {\n      position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; height: 100dvh;\n      z-index: 100;\n      background: rgba(5, 5, 16, 0.75);\n      backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);\n      display: flex; align-items: center; justify-content: center;\n      opacity: 0; visibility: hidden; pointer-events: none;\n      transition: opacity 0.4s ease, visibility 0.4s ease;\n  }\n  .nav-modal-overlay.active {\n      opacity: 1; visibility: visible; pointer-events: auto !important;\n  }\n\n  \/* \u30e2\u30fc\u30c0\u30eb\u5185\u90e8\uff1a\u30b9\u30af\u30ed\u30fc\u30eb\u8a31\u53ef \uff06 \u30d0\u30a6\u30f3\u30b9\u9632\u6b62 *\/\n  .nav-modal-content {\n      position: relative; width: 90%; max-width: 800px;\n      max-height: 85vh; max-height: 85dvh;\n      overflow-y: auto !important;\n      -webkit-overflow-scrolling: touch; \/* iOS\u306e\u6163\u6027\u30b9\u30af\u30ed\u30fc\u30eb *\/\n      overscroll-behavior: contain;      \/* \u89aa\u753b\u9762\u3078\u306e\u30b9\u30af\u30ed\u30fc\u30eb\u4f1d\u64ad\u3092\u963b\u6b62 *\/\n      padding: 40px 30px; border-radius: 24px;\n      background: rgba(15, 15, 30, 0.92);\n      border: 1px solid rgba(255, 255, 255, 0.2);\n      box-shadow: 0 0 50px rgba(221, 0, 127, 0.3);\n      transform: scale(0.7) translateY(30px);\n      transition: transform 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n      box-sizing: border-box;\n  }\n  .nav-modal-overlay.active .nav-modal-content {\n      transform: scale(1) translateY(0);\n  }\n\n  \/* \u30b9\u30af\u30ed\u30fc\u30eb\u30d0\u30fc\u88c5\u98fe *\/\n  .nav-modal-content::-webkit-scrollbar { width: 6px; }\n  .nav-modal-content::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); border-radius: 10px; }\n  .nav-modal-content::-webkit-scrollbar-thumb { background: rgba(221, 0, 127, 0.5); border-radius: 10px; }\n\n  .nav-modal-close {\n      position: absolute; top: 18px; right: 20px;\n      background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2);\n      color: #fff; width: 38px; height: 38px; border-radius: 50%;\n      font-size: 1.2rem; cursor: pointer; display: flex; align-items: center; justify-content: center;\n      transition: all 0.3s ease; z-index: 10;\n  }\n  .nav-modal-close:hover {\n      background: rgba(221, 0, 127, 0.8); border-color: #fff; transform: rotate(90deg);\n  }\n\n  .nav-modal-title {\n      color: #fff; font-size: 1.35rem; letter-spacing: 0.1em;\n      margin-bottom: 25px; font-family: 'Lato', 'Noto Sans JP', sans-serif;\n      text-shadow: 0 0 15px rgba(221, 0, 127, 0.6);\n      padding-right: 40px; \/* \u9589\u3058\u308b\u30dc\u30bf\u30f3\u3068\u306e\u88ab\u308a\u3092\u9632\u6b62 *\/\n  }\n\n  .nav-grid {\n      display: grid;\n      grid-template-columns: repeat(2, 1fr);\n      gap: 20px;\n  }\n\n  .nav-card {\n      display: flex; flex-direction: column; align-items: flex-start; justify-content: center;\n      padding: 22px; border-radius: 16px;\n      background: rgba(255, 255, 255, 0.05);\n      border: 1px solid rgba(255, 255, 255, 0.12);\n      color: #fff; text-decoration: none !important;\n      transition: all 0.35s ease;\n      cursor: pointer;\n      box-sizing: border-box;\n  }\n  .nav-card:hover {\n      background: rgba(221, 0, 127, 0.25);\n      border-color: rgba(221, 0, 127, 0.8);\n      transform: translateY(-5px);\n      box-shadow: 0 10px 30px rgba(221, 0, 127, 0.4);\n  }\n  .nav-card-icon {\n      font-size: 1.8rem; color: #ff33a8; margin-bottom: 10px;\n      transition: transform 0.3s ease;\n  }\n  .nav-card:hover .nav-card-icon { transform: scale(1.15); color: #fff; }\n  .nav-card-title {\n      font-size: 1.1rem; font-weight: bold; margin-bottom: 6px;\n      font-family: 'Noto Sans JP', sans-serif;\n  }\n  .nav-card-desc {\n      font-size: 0.8rem; color: #bbb; text-align: left; line-height: 1.4;\n  }\n\n  \/* \u25bc \u30e2\u30d0\u30a4\u30eb\uff08iPhone 13 mini\u30fb\u5e45600px\u4ee5\u4e0b\uff09\u6700\u9069\u5316 \u25bc *\/\n  @media (max-width: 600px) {\n      .notice-wrapper { top: 15px !important; right: 15px !important; }\n      .notice-trigger { padding: 8px 16px !important; font-size: 0.85rem !important; }\n      .notice-content {\n          width: calc(100vw - 30px) !important;\n          max-width: 310px !important;\n          top: 48px !important;\n          right: 0 !important;\n          padding: 16px !important;\n      }\n\n      .hero-center-box {\n          width: 100% !important;\n          padding: 0 16px !important;\n          box-sizing: border-box !important;\n      }\n      .hero-title {\n          font-size: 1.35rem !important;\n          line-height: 1.3 !important;\n          word-break: break-word !important;\n      }\n      .menu-open-btn {\n          width: auto !important;\n          max-width: 100% !important;\n          margin-top: 25px !important;\n          padding: 13px 20px !important;\n          font-size: 0.9rem !important;\n          gap: 8px !important;\n          box-sizing: border-box !important;\n      }\n\n      .nav-modal-content {\n          width: calc(100vw - 24px) !important;\n          max-height: 82dvh !important; \/* \u30a2\u30c9\u30ec\u30b9\u30d0\u30fc\u304c\u3042\u3063\u3066\u3082\u4e0a\u4e0b\u306b\u53ce\u307e\u308b *\/\n          padding: 25px 16px 20px !important;\n      }\n      .nav-modal-title {\n          font-size: 1.05rem !important;\n          margin-bottom: 16px !important;\n      }\n      .nav-grid {\n          grid-template-columns: 1fr !important;\n          gap: 10px !important;\n      }\n      .nav-card {\n          padding: 14px 16px !important;\n      }\n      .nav-card-icon {\n          font-size: 1.4rem !important;\n          margin-bottom: 4px !important;\n      }\n      .nav-card-title {\n          font-size: 0.98rem !important;\n      }\n      .nav-card-desc {\n          font-size: 0.75rem !important;\n          line-height: 1.35 !important;\n      }\n  }\n<\/style>\n\n<!-- \u2461 DOM\u69cb\u9020 -->\n<div class=\"hero-bg-image\"><\/div>\n<canvas id=\"glcanvas\"><\/canvas>\n\n<!-- \u304a\u77e5\u3089\u305b\u30d1\u30cd\u30eb -->\n<div class=\"notice-wrapper\" id=\"noticeWrapper\">\n    <div class=\"notice-trigger\" id=\"noticeTrigger\"><i class=\"fas fa-bell\" aria-hidden=\"true\"><\/i> \u304a\u77e5\u3089\u305b<\/div>\n    <div class=\"notice-content\" id=\"noticeContent\">\n        <ul>\n            <!-- \u25bc \u304a\u77e5\u3089\u305b\u306e\u624b\u52d5\u66f4\u65b0\u30a8\u30ea\u30a2 \u25bc -->\n            <li><span class=\"notice-date\">2026.10.01<\/span>\u65b0\u3057\u3044\u30aa\u30f3\u30e9\u30a4\u30f3\u30de\u30cb\u30e5\u30a2\u30eb\u3092\u516c\u958b<\/li>\n            <li><span class=\"notice-date\">2026.01.15<\/span>POSTMAN\u3078\u5b8c\u5168\u79fb\u884c<\/li>\n            <li><span class=\"notice-date\">2025.04.01<\/span>\u65b0\u7ba1\u7406\u753b\u9762\u300ePOSTMAN\u300f\u30ea\u30ea\u30fc\u30b9<\/li>\n            <!-- \u25b2 \u304a\u77e5\u3089\u305b\u306e\u624b\u52d5\u66f4\u65b0\u30a8\u30ea\u30a2 \u25b2 -->\n        <\/ul>\n    <\/div>\n<\/div>\n\n<!-- \u30e1\u30cb\u30e5\u30fc\u8d77\u52d5\u30dc\u30bf\u30f3 -->\n<div class=\"hero-center-box\">\n    <h1 class=\"hero-title\" style=\"color: #fff; text-shadow: 0 0 20px rgba(221, 0, 127, 0.8); letter-spacing: 0.1em; font-family: 'Lato', sans-serif;\">\n        POSTMAN Navigation Portal\n    <\/h1>\n    <div>\n        <button class=\"menu-open-btn\" id=\"openNavMenu\">\n            <i class=\"fas fa-compass\" aria-hidden=\"true\"><\/i> \u30de\u30cb\u30e5\u30a2\u30eb\u30fb\u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3\u3092\u958b\u304f\n        <\/button>\n    <\/div>\n<\/div>\n\n<!-- \u2605 \u30e1\u30cb\u30e5\u30fc\u30e2\u30fc\u30c0\u30eb -->\n<div class=\"nav-modal-overlay\" id=\"navModalOverlay\">\n    <div class=\"nav-modal-content\">\n        <button class=\"nav-modal-close\" id=\"closeNavMenu\"><i class=\"fas fa-times\" aria-hidden=\"true\"><\/i><\/button>\n        <div class=\"nav-modal-title\">\n            <i class=\"fas fa-book-open\" style=\"color: #dd007f; margin-right: 8px;\" aria-hidden=\"true\"><\/i> \u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u30fb\u30e1\u30cb\u30e5\u30fc\u9078\u629e\n        <\/div>\n        \n        <div class=\"nav-grid\">\n            <!-- 1. \u521d\u3081\u3066\u306e\u65b9 -->\n            <a href=\"https:\/\/popchat.jp\/postman\/what-is-postman\/\" class=\"nav-card\">\n                <div class=\"nav-card-icon\"><i class=\"fas fa-seedling\" aria-hidden=\"true\"><\/i><\/div>\n                <div class=\"nav-card-title\">\u521d\u3081\u3066\u306e\u65b9<\/div>\n                <div class=\"nav-card-desc\">POSTMAN\u306e\u5168\u4f53\u50cf\u3084\u30b3\u30f3\u30bb\u30d7\u30c8\u3001\u6700\u521d\u306b\u304a\u8aad\u307f\u3044\u305f\u3060\u304f\u30ac\u30a4\u30c9\u306f\u3053\u3061\u3089\u3002<\/div>\n            <\/a>\n\n            <!-- 2. \u904b\u7528\u8005\u5411\u3051 -->\n            <a href=\"https:\/\/popchat.jp\/postman\/maintenance_portal\" class=\"nav-card\">\n                <div class=\"nav-card-icon\"><i class=\"fas fa-sliders-h\" aria-hidden=\"true\"><\/i><\/div>\n                <div class=\"nav-card-title\">\u904b\u7528\u8005\u5411\u3051<\/div>\n                <div class=\"nav-card-desc\">\u65e5\u5e38\u306e\u904b\u7528\u7ba1\u7406\u30fb\u8a2d\u5b9a\u5909\u66f4\u30fb\u30c8\u30e9\u30d6\u30eb\u30b7\u30e5\u30fc\u30c6\u30a3\u30f3\u30b0\u306f\u3053\u3061\u3089\u3002<\/div>\n            <\/a>\n\n            <!-- 3. \u5c0e\u5165\u30ac\u30a4\u30c9 -->\n            <a href=\"https:\/\/popchat.jp\/postman\/installation-navi\" class=\"nav-card\">\n                <div class=\"nav-card-icon\"><i class=\"fas fa-rocket\" aria-hidden=\"true\"><\/i><\/div>\n                <div class=\"nav-card-title\">\u5c0e\u5165\u30ac\u30a4\u30c9<\/div>\n                <div class=\"nav-card-desc\">\u958b\u901a\u6642\u306e\u521d\u671f\u30cd\u30c3\u30c8\u30ef\u30fc\u30af\u69cb\u7bc9\u30fb\u6a5f\u5668\u8a2d\u7f6e\u306e\u624b\u9806\u66f8\u306f\u3053\u3061\u3089\u3002<\/div>\n            <\/a>\n\n            <!-- 4. \u30aa\u30f3\u30e9\u30a4\u30f3\u30de\u30cb\u30e5\u30a2\u30eb -->\n            <a href=\"https:\/\/popchat.jp\/postman\/manual\/\" target=\"_blank\" class=\"nav-card\">\n                <div class=\"nav-card-icon\"><i class=\"fas fa-book\" aria-hidden=\"true\"><\/i><\/div>\n                <div class=\"nav-card-title\">\u30aa\u30f3\u30e9\u30a4\u30f3\u30de\u30cb\u30e5\u30a2\u30eb<\/div>\n                <div class=\"nav-card-desc\">\u5168\u6a5f\u80fd\u306e\u691c\u7d22\u30fb\u8a73\u7d30\u30ea\u30d5\u30a1\u30ec\u30f3\u30b9\u30de\u30cb\u30e5\u30a2\u30eb\u30fb\u7d71\u5408\u7d22\u5f15\u3002<\/div>\n            <\/a>\n        <\/div>\n    <\/div>\n<\/div>\n\n<!-- \u2462 Three.js \u30b9\u30af\u30ea\u30d7\u30c8 \uff06 \u30e2\u30fc\u30c0\u30eb\u30fb\u304a\u77e5\u3089\u305b\u5236\u5fa1 -->\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/three.js\/r134\/three.min.js\"><\/script>\n<script>\n(function() {\n    document.addEventListener('DOMContentLoaded', function() {\n        \/\/ --- \u30e2\u30fc\u30c0\u30eb\u958b\u9589\u5236\u5fa1 ---\n        const openBtn = document.getElementById('openNavMenu');\n        const closeBtn = document.getElementById('closeNavMenu');\n        const overlay = document.getElementById('navModalOverlay');\n\n        if (openBtn && overlay) {\n            openBtn.addEventListener('click', function(e) {\n                e.preventDefault();\n                e.stopPropagation();\n                overlay.classList.add('active');\n            });\n        }\n\n        if (closeBtn && overlay) {\n            closeBtn.addEventListener('click', function(e) {\n                e.preventDefault();\n                e.stopPropagation();\n                overlay.classList.remove('active');\n            });\n        }\n\n        if (overlay) {\n            overlay.addEventListener('click', function(e) {\n                if (e.target === overlay) {\n                    overlay.classList.remove('active');\n                }\n            });\n        }\n\n        \/\/ --- \u304a\u77e5\u3089\u305b\u30d1\u30cd\u30eb\u306e\u5236\u5fa1 ---\n        const noticeWrapper = document.getElementById('noticeWrapper');\n        const noticeTrigger = document.getElementById('noticeTrigger');\n\n        if (noticeWrapper && noticeTrigger) {\n            noticeTrigger.addEventListener('click', function(e) {\n                e.preventDefault();\n                e.stopPropagation();\n                noticeWrapper.classList.toggle('is-open');\n            });\n\n            document.addEventListener('click', function(e) {\n                if (!noticeWrapper.contains(e.target)) {\n                    noticeWrapper.classList.remove('is-open');\n                }\n            });\n        }\n    });\n\n    \/\/ Three.js \u5b87\u5b99\u80cc\u666f \uff06 \u30de\u30a6\u30b9\u8ffd\u5f93\n    function initPortal() {\n        if (window._portalInitialized) return;\n        if (typeof THREE === 'undefined') {\n            setTimeout(initPortal, 50);\n            return;\n        }\n        window._portalInitialized = true;\n\n        const canvas = document.querySelector('#glcanvas');\n        if (!canvas) return;\n\n        const scene = new THREE.Scene();\n        const camera = new THREE.PerspectiveCamera(75, window.innerWidth \/ window.innerHeight, 0.1, 1000);\n        const renderer = new THREE.WebGLRenderer({ canvas: canvas, alpha: true });\n        \n        renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));\n        renderer.setSize(window.innerWidth, window.innerHeight);\n        camera.position.z = 50;\n\n        function createRayStarTexture() {\n            const c = document.createElement('canvas');\n            c.width = 64; c.height = 64;\n            const ctx = c.getContext('2d');\n            ctx.strokeStyle = 'rgba(255, 255, 255, 0.95)';\n            ctx.lineWidth = 1.5;\n            ctx.beginPath();\n            ctx.moveTo(32, 2); ctx.lineTo(32, 62);\n            ctx.moveTo(2, 32); ctx.lineTo(62, 32);\n            ctx.stroke();\n\n            ctx.strokeStyle = 'rgba(255, 255, 255, 0.4)';\n            ctx.lineWidth = 1;\n            ctx.beginPath();\n            ctx.moveTo(12, 12); ctx.lineTo(52, 52);\n            ctx.moveTo(52, 12); ctx.lineTo(12, 52);\n            ctx.stroke();\n\n            const g = ctx.createRadialGradient(32, 32, 0, 32, 32, 20);\n            g.addColorStop(0, 'rgba(255, 255, 255, 1)');\n            g.addColorStop(0.2, 'rgba(255, 245, 220, 0.9)');\n            g.addColorStop(0.6, 'rgba(255, 200, 100, 0.25)');\n            g.addColorStop(1, 'rgba(0, 0, 0, 0)');\n            ctx.fillStyle = g;\n            ctx.fillRect(0, 0, 64, 64);\n            return new THREE.CanvasTexture(c);\n        }\n        const rayStarTexture = createRayStarTexture();\n\n        function createGlowTexture() {\n            const c = document.createElement('canvas');\n            c.width = 32; c.height = 32;\n            const ctx = c.getContext('2d');\n            const g = ctx.createRadialGradient(16, 16, 0, 16, 16, 16);\n            g.addColorStop(0, 'rgba(255, 255, 255, 1)');\n            g.addColorStop(0.5, 'rgba(255, 255, 255, 0.3)');\n            g.addColorStop(1, 'rgba(255, 255, 255, 0)');\n            ctx.fillStyle = g;\n            ctx.fillRect(0, 0, 32, 32);\n            return new THREE.CanvasTexture(c);\n        }\n        const glowTexture = createGlowTexture();\n\n        const pinkGroup = new THREE.Group();\n\n        \/\/ \u4e38\u3044\u7c92\u5b50\n        const largeCount = 20; \n        const largeGeo = new THREE.BufferGeometry();\n        const largePos = new Float32Array(largeCount * 3);\n        for(let i = 0; i < largeCount * 3; i++) { largePos[i] = (Math.random() - 0.5) * 110; }\n        largeGeo.setAttribute('position', new THREE.BufferAttribute(largePos, 3));\n        const largeMat = new THREE.PointsMaterial({\n            size: 2.2, color: 0xff007f, transparent: true, opacity: 0.85,\n            map: glowTexture, depthWrite: false, blending: THREE.AdditiveBlending\n        });\n        const largeMesh = new THREE.Points(largeGeo, largeMat);\n        largeMesh.frustumCulled = false;\n        pinkGroup.add(largeMesh);\n\n        \/\/ \u4e38\u3044\u7c92\u5b50(\u5c0f)\n        const smallCount = 380;\n        const smallGeo = new THREE.BufferGeometry();\n        const smallPos = new Float32Array(smallCount * 3);\n        for(let i = 0; i < smallCount * 3; i++) { smallPos[i] = (Math.random() - 0.5) * 110; }\n        smallGeo.setAttribute('position', new THREE.BufferAttribute(smallPos, 3));\n        const smallMat = new THREE.PointsMaterial({\n            size: 0.6, color: 0xdd007f, transparent: true, opacity: 0.75,\n            map: glowTexture, depthWrite: false, blending: THREE.AdditiveBlending\n        });\n        const smallMesh = new THREE.Points(smallGeo, smallMat);\n        smallMesh.frustumCulled = false;\n        pinkGroup.add(smallMesh);\n\n        \/\/ \u81ea\u7531\u306b\u6f02\u3046\u56db\u89d2\u7c92\u5b50\n        const squareCount = 150;\n        const squareGeo = new THREE.BufferGeometry();\n        const squarePos = new Float32Array(squareCount * 3);\n        const squareVelocities = [];\n\n        for(let i = 0; i < squareCount; i++) {\n            squarePos[i * 3]     = (Math.random() - 0.5) * 110;\n            squarePos[i * 3 + 1] = (Math.random() - 0.5) * 110;\n            squarePos[i * 3 + 2] = (Math.random() - 0.5) * 90;\n            squareVelocities.push(new THREE.Vector3(\n                (Math.random() - 0.5) * 0.08,\n                (Math.random() - 0.5) * 0.08,\n                (Math.random() - 0.5) * 0.03\n            ));\n        }\n        squareGeo.setAttribute('position', new THREE.BufferAttribute(squarePos, 3));\n        const squareMat = new THREE.PointsMaterial({\n            size: 1.0, color: 0xff00a0, transparent: true, opacity: 0.8,\n            depthWrite: false, blending: THREE.AdditiveBlending\n        });\n        const squareMesh = new THREE.Points(squareGeo, squareMat);\n        squareMesh.frustumCulled = false;\n        pinkGroup.add(squareMesh);\n\n        scene.add(pinkGroup);\n\n        \/\/ \u30de\u30a6\u30b9\u8ffd\u5f93\u30d1\u30fc\u30c6\u30a3\u30af\u30eb\n        const sparkCount = 600;\n        const sparkGeo = new THREE.BufferGeometry();\n        const sparkPos = new Float32Array(sparkCount * 3);\n        const sparkColors = new Float32Array(sparkCount * 3);\n        const sparkVelocities = [];\n        const sparkLifes = new Float32Array(sparkCount);\n        const sparkBaseColors = [];\n\n        for(let i = 0; i < sparkCount; i++) {\n            sparkPos[i*3] = 0; sparkPos[i*3+1] = 0; sparkPos[i*3+2] = -9999;\n            sparkColors[i*3] = 0; sparkColors[i*3+1] = 0; sparkColors[i*3+2] = 0;\n            sparkVelocities.push(new THREE.Vector3());\n            sparkLifes[i] = 0;\n            const isGold = Math.random() > 0.35;\n            sparkBaseColors.push(isGold ? { r: 1.0, g: 0.92, b: 0.4 } : { r: 0.3, g: 0.95, b: 1.0 });\n        }\n        sparkGeo.setAttribute('position', new THREE.BufferAttribute(sparkPos, 3));\n        sparkGeo.setAttribute('color', new THREE.BufferAttribute(sparkColors, 3));\n\n        const sparkMat = new THREE.PointsMaterial({\n            size: 2.2, vertexColors: true, transparent: true, opacity: 1.0,\n            map: rayStarTexture, depthWrite: false, depthTest: false,\n            blending: THREE.AdditiveBlending\n        });\n        const sparkMesh = new THREE.Points(sparkGeo, sparkMat);\n        sparkMesh.renderOrder = 999;\n        sparkMesh.frustumCulled = false;\n        scene.add(sparkMesh);\n\n        let sparkIdx = 0;\n        let targetMouse = { x: 0, y: 0 };\n        let currentMouse = { x: 0, y: 0 };\n        let lastSpawnMouse = { x: -999, y: -999 };\n        let isMouseInitialized = false;\n\n        function recordMouse(e) {\n            const clientX = e.clientX || (e.touches && e.touches[0] ? e.touches[0].clientX : null);\n            const clientY = e.clientY || (e.touches && e.touches[0] ? e.touches[0].clientY : null);\n            if (clientX === null || clientY === null) return;\n\n            targetMouse.x = (clientX \/ window.innerWidth) * 2 - 1;\n            targetMouse.y = -(clientY \/ window.innerHeight) * 2 + 1;\n\n            if (!isMouseInitialized) {\n                currentMouse.x = targetMouse.x; currentMouse.y = targetMouse.y;\n                lastSpawnMouse.x = targetMouse.x; lastSpawnMouse.y = targetMouse.y;\n                isMouseInitialized = true;\n            }\n        }\n\n        window.addEventListener('pointermove', recordMouse, { passive: true });\n        window.addEventListener('mousemove', recordMouse, { passive: true });\n\n        function animate() {\n            requestAnimationFrame(animate);\n\n            pinkGroup.rotation.y += 0.001;\n            pinkGroup.rotation.x += 0.0005;\n\n            const sqPos = squareMesh.geometry.attributes.position.array;\n            for(let i = 0; i < squareCount; i++) {\n                sqPos[i * 3]     += squareVelocities[i].x;\n                sqPos[i * 3 + 1] += squareVelocities[i].y;\n                sqPos[i * 3 + 2] += squareVelocities[i].z;\n\n                if (Math.abs(sqPos[i * 3]) > 55) sqPos[i * 3] *= -0.95;\n                if (Math.abs(sqPos[i * 3 + 1]) > 55) sqPos[i * 3 + 1] *= -0.95;\n                if (Math.abs(sqPos[i * 3 + 2]) > 45) sqPos[i * 3 + 2] *= -0.95;\n            }\n            squareMesh.geometry.attributes.position.needsUpdate = true;\n\n            if (isMouseInitialized) {\n                currentMouse.x += (targetMouse.x - currentMouse.x) * 0.15;\n                currentMouse.y += (targetMouse.y - currentMouse.y) * 0.15;\n\n                const dx = currentMouse.x - lastSpawnMouse.x;\n                const dy = currentMouse.y - lastSpawnMouse.y;\n                const dist = Math.sqrt(dx * dx + dy * dy);\n\n                if (dist >= 0.025) {\n                    const vFOV = THREE.MathUtils.degToRad(75);\n                    const planeHeight = 2 * Math.tan(vFOV \/ 2) * 50;\n                    const planeWidth = planeHeight * (window.innerWidth \/ window.innerHeight);\n\n                    const worldX = (currentMouse.x * planeWidth) \/ 2;\n                    const worldY = (currentMouse.y * planeHeight) \/ 2;\n\n                    const positions = sparkMesh.geometry.attributes.position.array;\n                    const colors = sparkMesh.geometry.attributes.color.array;\n\n                    for(let i = 0; i < 8; i++) {\n                        const radius = (Math.random() * Math.random()) * 0.12;\n                        const angle = Math.random() * Math.PI * 2;\n\n                        positions[sparkIdx * 3]     = worldX + Math.cos(angle) * radius;\n                        positions[sparkIdx * 3 + 1] = worldY + Math.sin(angle) * radius;\n                        positions[sparkIdx * 3 + 2] = 2.0;\n\n                        const c = sparkBaseColors[sparkIdx];\n                        const coreBoost = 1.0 - (radius \/ 0.12);\n                        colors[sparkIdx * 3]     = Math.min(1.0, c.r + coreBoost * 0.5);\n                        colors[sparkIdx * 3 + 1] = Math.min(1.0, c.g + coreBoost * 0.5);\n                        colors[sparkIdx * 3 + 2] = Math.min(1.0, c.b + coreBoost * 0.5);\n\n                        sparkVelocities[sparkIdx].set(\n                            (Math.random() - 0.5) * 0.1,\n                            (Math.random() - 0.5) * 0.1,\n                            (Math.random() - 0.5) * 0.05\n                        );\n                        sparkLifes[sparkIdx] = 1.0;\n                        sparkIdx = (sparkIdx + 1) % sparkCount;\n                    }\n\n                    lastSpawnMouse.x = currentMouse.x;\n                    lastSpawnMouse.y = currentMouse.y;\n                }\n            }\n\n            const sPos = sparkMesh.geometry.attributes.position.array;\n            const sCol = sparkMesh.geometry.attributes.color.array;\n\n            for(let i = 0; i < sparkCount; i++) {\n                if(sparkLifes[i] > 0) {\n                    sPos[i*3]     += sparkVelocities[i].x;\n                    sPos[i*3 + 1] += sparkVelocities[i].y;\n                    sPos[i*3 + 2] += sparkVelocities[i].z;\n\n                    sparkLifes[i] -= 0.06;\n\n                    const flicker = 0.8 + Math.random() * 0.4;\n                    const intensity = Math.max(0, sparkLifes[i]) * flicker;\n\n                    const c = sparkBaseColors[i];\n                    sCol[i*3]     = c.r * intensity;\n                    sCol[i*3 + 1] = c.g * intensity;\n                    sCol[i*3 + 2] = c.b * intensity;\n                } else {\n                    sPos[i*3 + 2] = -9999;\n                }\n            }\n            sparkMesh.geometry.attributes.position.needsUpdate = true;\n            sparkMesh.geometry.attributes.color.needsUpdate = true;\n\n            renderer.render(scene, camera);\n        }\n        animate();\n\n        window.addEventListener('resize', function() {\n            camera.aspect = window.innerWidth \/ window.innerHeight;\n            camera.updateProjectionMatrix();\n            renderer.setSize(window.innerWidth, window.innerHeight);\n        });\n    }\n\n    if (document.readyState === 'complete' || document.readyState === 'interactive') {\n        initPortal();\n    } else {\n        document.addEventListener('DOMContentLoaded', initPortal);\n    }\n\n    \/\/ Lightbox\u9632\u6b62\uff08UI\u8981\u7d20\u306e\u30af\u30ea\u30c3\u30af\u306f\u4fdd\u8b77\uff09\n    window.addEventListener('click', function(e) {\n        const isUI = e.target.closest('.notice-wrapper') || e.target.closest('.nav-modal-overlay') || e.target.closest('#openNavMenu');\n        if (!isUI) {\n            e.stopPropagation();\n            e.stopImmediatePropagation();\n        }\n    }, true);\n})();\n<\/script>\n\n\n\n<figure class=\"wp-block-gallery alignfull has-nested-images columns-default is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image alignfull size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"589\" data-id=\"564\" src=\"https:\/\/popchat.jp\/postman\/wp-content\/uploads\/2026\/09\/placidplace-space-7301998-1024x589.jpg\" alt=\"\" class=\"wp-image-564\" srcset=\"https:\/\/popchat.jp\/postman\/wp-content\/uploads\/2026\/09\/placidplace-space-7301998-1024x589.jpg 1024w, https:\/\/popchat.jp\/postman\/wp-content\/uploads\/2026\/09\/placidplace-space-7301998-300x172.jpg 300w, https:\/\/popchat.jp\/postman\/wp-content\/uploads\/2026\/09\/placidplace-space-7301998-1536x883.jpg 1536w, https:\/\/popchat.jp\/postman\/wp-content\/uploads\/2026\/09\/placidplace-space-7301998-767x441.jpg 767w, https:\/\/popchat.jp\/postman\/wp-content\/uploads\/2026\/09\/placidplace-space-7301998-2048x1177.jpg 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u304a\u77e5\u3089\u305b 2026.10.01\u65b0\u3057\u3044\u30aa\u30f3\u30e9\u30a4\u30f3\u30de\u30cb\u30e5\u30a2\u30eb\u3092\u516c\u958b 2026.01.15POSTMAN\u3078\u5b8c\u5168\u79fb\u884c 2025.04.01\u65b0\u7ba1\u7406\u753b\u9762\u300ePOSTMAN\u300f\u30ea\u30ea\u30fc\u30b9 POSTMAN Navigation Portal  [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":10,"comment_status":"closed","ping_status":"closed","template":"","meta":{"sns_share_botton_hide":"","vkExUnit_sns_title":"","_vk_print_noindex":"","sitemap_hide":"","vkExUnit_sitemap":"","_veu_custom_css":".site-header, .site-footer, .page-header, .breadSection,\n#page_top, .page_top_btn {\n    display: none !important;\n}\n.site-body, .site-body-container, .main-section {\n    padding: 0 !important;\n    margin: 0 !important;\n    max-width: 100% !important;\n}\n.entry-body {\n    position: relative;\n    width: 100vw;\n    height: 100vh;\n    overflow: hidden;\n    background-color: #050510;\n}\n\n\/* \u30e2\u30fc\u30c0\u30eb\u306e\u7e26\u5e45\u5236\u9650\u3068\u30b9\u30af\u30ed\u30fc\u30eb\u8a31\u53ef *\/\n.nav-modal-content {\n    max-height: 90vh !important; \n    overflow-y: auto !important; \n}\n\n\/* \u30b9\u30af\u30ed\u30fc\u30eb\u30d0\u30fc\u306e\u30c7\u30b6\u30a4\u30f3\uff08Webkit\u7cfb\u30d6\u30e9\u30a6\u30b6\u7528\uff09 *\/\n.nav-modal-content::-webkit-scrollbar {\n    width: 6px;\n}\n.nav-modal-content::-webkit-scrollbar-track {\n    background: rgba(255, 255, 255, 0.05);\n    border-radius: 10px;\n}\n.nav-modal-content::-webkit-scrollbar-thumb {\n    background: rgba(221, 0, 127, 0.5);\n    border-radius: 10px;\n}\n\n\/* \u30e2\u30d0\u30a4\u30eb\u6642\uff08600px\u4ee5\u4e0b\uff09\u306e\u4f59\u767d\u30fb\u6587\u5b57\u30b5\u30a4\u30ba\u7e2e\u5c0f *\/\n@media (max-width: 600px) {\n    \/* 1. \u3059\u3079\u3066\u306eUI\u8981\u7d20\u3067\u30d1\u30c7\u30a3\u30f3\u30b0\u3092\u6a2a\u5e45\u306e\u5185\u5074\u306b\u542b\u3081\u308b *\/\n    .hero-center-box,\n    .menu-open-btn,\n    .nav-modal-content,\n    .nav-card {\n        box-sizing: border-box !important;\n    }\n\n    \/* 2. \u30e1\u30a4\u30f3\u30bf\u30a4\u30c8\u30eb\u306e\u6587\u5b57\u3042\u3075\u308c\u3092\u9632\u6b62 *\/\n    .hero-title {\n        font-size: 1.35rem !important;\n        padding: 0 16px !important;\n        line-height: 1.3 !important;\n        word-break: break-word !important;\n    }\n\n    \/* 3. \u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3\u8d77\u52d5\u30dc\u30bf\u30f3\u3092\u753b\u9762\u5e45\u306b\u53ce\u3081\u308b *\/\n    .menu-open-btn {\n        width: auto !important;\n        max-width: calc(100vw - 32px) !important; \n        padding: 12px 18px !important;  \n        font-size: 0.9rem !important;             \/* \u6587\u5b57\u30b5\u30a4\u30ba\u3092\u8abf\u6574 *\/\n        gap: 8px !important;\n        margin-top: 25px !important;\n    }\n\n    \/* 4. \u30e2\u30fc\u30c0\u30eb\u30a6\u30a3\u30f3\u30c9\u30a6\u81ea\u4f53\u306e\u6a2a\u5e45\u3092\u30d5\u30a3\u30c3\u30c8 *\/\n    .nav-modal-content {\n        width: calc(100vw - 24px) !important;    \n        max-width: 100% !important;\n        padding: 30px 16px 20px !important;\n    }\n\n    \/* 5. \u30e2\u30fc\u30c0\u30eb\u30bf\u30a4\u30c8\u30eb\u3068\u9589\u3058\u308b\u30dc\u30bf\u30f3(\u00d7)\u306e\u88ab\u308a\u3092\u89e3\u6d88 *\/\n    .nav-modal-title {\n        font-size: 1.05rem !important;\n        margin-bottom: 16px !important;\n        padding-right: 35px !important;\n    }\n\n    .nav-grid { \n        grid-template-columns: 1fr !important;\n        gap: 10px !important; \n    }\n\n    .nav-card {\n        padding: 14px !important; \n    }\n}","veu_display_promotion_alert":"","_exclude_from_list_pages":"","vkexunit_cta_each_option":"","vkExUnit_childPageIndex":"","vkExUnit_pageList_ancestor":"","vkExUnit_contact_enable":"","_lightning_design_setting":{"layout":"col-one-no-subsection","hide_site_header":"true","hide_page_header":"true","hide_breadcrumb":"true"},"header_top_description":"","vk_page_header_image":0,"vk_page_header_image_sp":0,"vk_page_header_subtext":"","footnotes":""},"class_list":["post-2","page","type-page","status-publish","hentry"],"veu_head_title_object":{"title":"","add_site_title":""},"_links":{"self":[{"href":"https:\/\/popchat.jp\/postman\/wp-json\/wp\/v2\/pages\/2","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/popchat.jp\/postman\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/popchat.jp\/postman\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/popchat.jp\/postman\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/popchat.jp\/postman\/wp-json\/wp\/v2\/comments?post=2"}],"version-history":[{"count":85,"href":"https:\/\/popchat.jp\/postman\/wp-json\/wp\/v2\/pages\/2\/revisions"}],"predecessor-version":[{"id":1634,"href":"https:\/\/popchat.jp\/postman\/wp-json\/wp\/v2\/pages\/2\/revisions\/1634"}],"wp:attachment":[{"href":"https:\/\/popchat.jp\/postman\/wp-json\/wp\/v2\/media?parent=2"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}