渋谷

大阪

名古屋

福岡

札幌

仙台

.sv-network-section { position: relative; width: 100%; padding: 20px 20px 0; background: transparent; overflow: hidden; } .sv-network-inner { max-width: 1160px; margin: 0 auto; } /* 地図エリア */ .sv-map-area { position: relative; width: 100%; max-width: 1080px; margin: 0 auto; aspect-ratio: 16 / 7.6; min-height: 410px; background: transparent; border: none; border-radius: 0; overflow: visible; } /* 日本地図画像 */ .sv-japan-map { position: absolute; left: 50%; top: 54%; width: 92%; height: 88%; transform: translate(-50%, -50%) translateY(24px); opacity: 0; background-image: url("/wp/wp-content/uploads/2026/06/japan_map.png"); background-repeat: no-repeat; background-position: center; background-size: contain; filter: drop-shadow(0 26px 20px rgba(243, 152, 0, 0.18)); transition: opacity 0.8s ease, transform 0.8s ease; } .sv-network-section.is-active .sv-japan-map { opacity: 1; transform: translate(-50%, -50%) translateY(0); } /* 拠点共通 */ .sv-office { position: absolute; z-index: 3; opacity: 0; transform: translateY(16px) scale(0.96); } .sv-office-dot { position: absolute; left: 0; top: 0; width: 19px; height: 19px; border-radius: 50%; background: #333; box-shadow: 0 0 0 8px rgba(51, 51, 51, 0.08); } .sv-office-line { position: absolute; left: 9px; top: 8px; display: block; width: 120px; height: 4px; background: #333; transform-origin: left center; } .sv-office-label { position: absolute; display: inline-flex; align-items: center; justify-content: center; min-width: 100px; padding: 11px 20px 10px; border: 4px solid #333; border-radius: 999px; background: #fff; color: #333; font-size: clamp(23px, 2.6vw, 34px); font-weight: 800; line-height: 1.1; white-space: nowrap; } /* ========================= PC位置設定 ※ここは共有いただいたPC位置 ========================= */ /* 渋谷 */ .sv-office-shibuya { left: 55%; top: 63%; } .sv-office-shibuya .sv-office-line { width: 125px; transform: rotate(20deg); } .sv-office-shibuya .sv-office-label { left: 106px; top: 15px; } /* 大阪 */ .sv-office-osaka { left: 42%; top: 63%; } .sv-office-osaka .sv-office-line { width: 105px; transform: rotate(-72deg); } .sv-office-osaka .sv-office-label { left: -50px; top: -138px; } /* 名古屋 */ .sv-office-nagoya { left: 46%; top: 63%; } .sv-office-nagoya .sv-office-line { width: 92px; transform: rotate(68deg); } .sv-office-nagoya .sv-office-label { left: -65px; top: 78px; } /* 福岡 */ .sv-office-fukuoka { left: 26%; top: 60%; } .sv-office-fukuoka .sv-office-line { width: 90px; transform: rotate(-136deg); } .sv-office-fukuoka .sv-office-label { left: -150px; top: -100px; } /* 札幌 */ .sv-office-sapporo { left: 70%; top: 26%; } .sv-office-sapporo .sv-office-line { width: 128px; transform: rotate(180deg); } .sv-office-sapporo .sv-office-label { left: -228px; top: -30px; } /* 仙台 */ .sv-office-sendai { left: 62%; top: 53%; } .sv-office-sendai .sv-office-line { width: 132px; transform: rotate(-20deg); } .sv-office-sendai .sv-office-label { left: 100px; top: -50px; } /* 開設順：渋谷 → 大阪 → 名古屋 → 福岡 → 札幌 → 仙台 */ .sv-network-section.is-active .sv-office { animation: svOfficeIn 0.55s cubic-bezier(.2,.8,.2,1) forwards; } .sv-network-section.is-active .sv-office-shibuya { animation-delay: 0.55s; } .sv-network-section.is-active .sv-office-osaka { animation-delay: 0.95s; } .sv-network-section.is-active .sv-office-nagoya { animation-delay: 1.35s; } .sv-network-section.is-active .sv-office-fukuoka { animation-delay: 1.75s; } .sv-network-section.is-active .sv-office-sapporo { animation-delay: 2.15s; } .sv-network-section.is-active .sv-office-sendai { animation-delay: 2.55s; } @keyframes svOfficeIn { 0% { opacity: 0; transform: translateY(16px) scale(0.96); } 70% { opacity: 1; transform: translateY(-2px) scale(1.02); } 100% { opacity: 1; transform: translateY(0) scale(1); } } /* ========================= タブレット 768px〜1024px専用 ========================= */ @media (min-width: 768px) and (max-width: 1024px) { .sv-network-section { padding: 10px 20px 0; } .sv-map-area { min-height: 370px; } .sv-japan-map { top: 53%; width: 96%; height: 88%; } .sv-office-label { min-width: 82px; padding: 9px 16px 8px; border-width: 3px; font-size: 26px; } .sv-office-dot { width: 17px; height: 17px; } .sv-office-line { left: 8px; top: 7px; height: 3px; } /* タブレット：渋谷 */ .sv-office-shibuya { left: 56%; top: 62%; } .sv-office-shibuya .sv-office-line { width: 96px; transform: rotate(18deg); } .sv-office-shibuya .sv-office-label { left: 82px; top: 6px; } /* タブレット：大阪 */ .sv-office-osaka { left: 42%; top: 61%; } .sv-office-osaka .sv-office-line { width: 86px; transform: rotate(-72deg); } .sv-office-osaka .sv-office-label { left: -38px; top: -112px; } /* タブレット：名古屋 */ .sv-office-nagoya { left: 46%; top: 62%; } .sv-office-nagoya .sv-office-line { width: 78px; transform: rotate(68deg); } .sv-office-nagoya .sv-office-label { left: -52px; top: 64px; } /* タブレット：福岡 */ .sv-office-fukuoka { left: 25%; top: 58%; } .sv-office-fukuoka .sv-office-line { width: 78px; transform: rotate(-130deg); } .sv-office-fukuoka .sv-office-label { left: -122px; top: -88px; } /* タブレット：札幌 */ .sv-office-sapporo { left: 72%; top: 26%; } .sv-office-sapporo .sv-office-line { width: 96px; transform: rotate(180deg); } .sv-office-sapporo .sv-office-label { left: -178px; top: -28px; } /* タブレット：仙台 */ .sv-office-sendai { left: 63%; top: 50%; } .sv-office-sendai .sv-office-line { width: 102px; transform: rotate(-16deg); } .sv-office-sendai .sv-office-label { left: 82px; top: -44px; } } /* ========================= スマホ ※ここから下はスマホだけに効く ========================= */ @media (max-width: 767px) { .sv-network-section { padding: 0 0 0; } .sv-map-area { aspect-ratio: auto; min-height: 300px; } .sv-japan-map { top: 50%; width: 115%; height: 84%; } .sv-office-dot { width: 14px; height: 14px; } .sv-office-line { left: 7px; top: 6px; height: 2px; } .sv-office-label { min-width: 64px; padding: 7px 11px 6px; border-width: 3px; font-size: 18px; } /* スマホ：渋谷 */ .sv-office-shibuya { left: 58%; top: 55%; } .sv-office-shibuya .sv-office-line { width: 72px; transform: rotate(20deg); } .sv-office-shibuya .sv-office-label { left: 56px; top: 8px; } /* スマホ：大阪 */ .sv-office-osaka { left: 35%; top: 55%; } .sv-office-osaka .sv-office-line { width: 66px; transform: rotate(-72deg); } .sv-office-osaka .sv-office-label { left: -4px; top: -70px; } /* スマホ：名古屋 */ .sv-office-nagoya { left: 43%; top: 55%; } .sv-office-nagoya .sv-office-line { width: 58px; transform: rotate(68deg); } .sv-office-nagoya .sv-office-label { left: 0; top: 45px; } /* スマホ：福岡 */ .sv-office-fukuoka { left: 12%; top: 52%; } .sv-office-fukuoka .sv-office-line { width: 56px; transform: rotate(-100deg); } .sv-office-fukuoka .sv-office-label { left: -40px; top: -66px; } /* スマホ：札幌 */ .sv-office-sapporo { left: 78%; top: 27%; } .sv-office-sapporo .sv-office-line { width: 74px; transform: rotate(230deg); } .sv-office-sapporo .sv-office-label { left: -80px; top: -50px; } /* スマホ：仙台 */ .sv-office-sendai { left: 68%; top: 49%; } .sv-office-sendai .sv-office-line { width: 74px; transform: rotate(-20deg); } .sv-office-sendai .sv-office-label { left: 33px; top: -30px; } } (function () { function startNetworkAnimation() { var section = document.querySelector('.sv-network-section'); if (!section) return; if (!('IntersectionObserver' in window)) { section.classList.add('is-active'); return; } var observer = new IntersectionObserver(function (entries) { entries.forEach(function (entry) { if (entry.isIntersecting) { section.classList.add('is-active'); observer.unobserve(section); } }); }, { threshold: 0.25 }); observer.observe(section); } if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', startNetworkAnimation); } else { startNetworkAnimation(); } })();