// Subpage shell: simplified TopNav + Footer + helpers for non-home pages. // Loaded with Babel; depends on React being on window. const { useState: _useS, useEffect: _useE, useRef: _useR } = React; // ─── Language preference (localStorage-backed, shared across pages) ───────── const PAGE_LANG_KEY = 'marip-lang'; const getPageLang = () => { try { const v = localStorage.getItem(PAGE_LANG_KEY); return v === 'en' ? 'en' : 'ja'; } catch (e) { return 'ja'; } }; const setPageLang = (v) => { try { localStorage.setItem(PAGE_LANG_KEY, v === 'en' ? 'en' : 'ja'); } catch (e) {} }; function usePageLang() { const [lang, setLangState] = _useS(getPageLang()); const setLang = (v) => { if (v === lang) return; setPageLang(v); setLangState(v); // Reload so per-page i18n dictionaries pick up the new lang on initial render window.location.reload(); }; return [lang, setLang]; } // ─── PageNav strings ──────────────────────────────────────────────────────── const NAV_I18N = { ja: { contact: 'お問い合わせ' }, en: { contact: 'Contact' }, }; // ─── PageFooter strings (used by every subpage) ───────────────────────────── const FOOTER_I18N = { ja: { brand: '株式会社MARIP', tagline: 'Make Ripples — System Engineering, Web & Software', addrLines: ['〒150-0002', '東京都渋谷区渋谷2-19-15', '宮益坂ビルディング609'], companyInfoLabel: '— Company Information —', companyInfoMore: '会社概要を見る', companyInfo: [ { k: '会社名', v: '株式会社MARIP' }, { k: '代表者', v: '代表取締役 松瀬 仁志' }, { k: '設立', v: '2023年9月12日' }, { k: '資本金', v: '100万円' }, { k: '事業内容', v: 'SES / 受託開発 / Web制作 / エージェント事業' }, { k: '所在地', v: '東京都渋谷区渋谷2-19-15 宮益坂ビルディング609' }, ], links: [ { label: 'サービス', href: 'services/' }, { label: '会社案内', href: 'company/' }, { label: '採用', href: 'careers/' }, { label: 'お知らせ', href: 'news/' }, { label: 'お問い合わせ', href: 'contact/' }, { label: 'プライバシーポリシー', href: 'privacy/' }, ], copy: 'All rights reserved.', }, en: { brand: 'MARIP Inc.', tagline: 'Make Ripples — System Engineering, Web & Software', addrLines: ['Miyamasuzaka Bldg 609', '2-19-15 Shibuya, Shibuya-ku', 'Tokyo 150-0002, Japan'], companyInfoLabel: '— Company Information —', companyInfoMore: 'View company profile', companyInfo: [ { k: 'Company', v: 'MARIP Inc.' }, { k: 'Representative', v: 'Hitoshi Matsuse, CEO' }, { k: 'Founded', v: 'September 12, 2023' }, { k: 'Capital', v: 'JPY 1,000,000' }, { k: 'Business', v: 'SES / Contract Dev / Web / Engineer Agency' }, { k: 'Address', v: 'Miyamasuzaka Bldg 609, 2-19-15 Shibuya, Shibuya-ku, Tokyo 150-0002, Japan' }, ], links: [ { label: 'Services', href: 'services/' }, { label: 'Company', href: 'company/' }, { label: 'Careers', href: 'careers/' }, { label: 'News', href: 'news/' }, { label: 'Contact', href: 'contact/' }, { label: 'Privacy', href: 'privacy/' }, ], copy: 'All rights reserved.', }, }; // ─── Custom cursor (matches TOP page) ─────────────────────────────────────── const PageCursor = ({ accent = '#F4F8F6' }) => { const dotRef = _useR(null); const ringRef = _useR(null); _useE(() => { let mx = -100, my = -100, rx = -100, ry = -100; const onMove = (e) => { mx = e.clientX; my = e.clientY; }; window.addEventListener('mousemove', onMove); let raf; const tick = () => { rx += (mx - rx) * 0.18; ry += (my - ry) * 0.18; if (dotRef.current) dotRef.current.style.transform = `translate(${mx}px, ${my}px) translate(-50%, -50%)`; if (ringRef.current) ringRef.current.style.transform = `translate(${rx}px, ${ry}px) translate(-50%, -50%)`; raf = requestAnimationFrame(tick); }; tick(); return () => { window.removeEventListener('mousemove', onMove); cancelAnimationFrame(raf); }; }, []); return ( <>
); }; // ─── Subpage navigation data (single source of truth) ─────────────────────── // hrefs are relative to project root. Trailing slash directories (no index.html) // keep canonical URL parity with sitemap.xml / canonical tags. const SITE_NAV = [ { label: 'Services', jp: 'サービス', href: 'services/', num: '01' }, { label: 'Mission', jp: 'ミッション', href: 'mission/', num: '02' }, { label: 'Company', jp: '会社案内', href: 'company/', num: '03' }, { label: 'Careers', jp: '採用', href: 'careers/', num: '04' }, { label: 'News', jp: 'お知らせ', href: 'news/', num: '05' }, { label: 'Contact', jp: 'お問い合わせ', href: 'contact/', num: '06' }, ]; // All paths are absolute so links work from any depth. // home prop is the relative path to root (e.g. "../" or "../../") for the brand link. const PageNav = ({ home = '../', current = '' }) => { const [scrolled, setScrolled] = _useS(false); const [menuOpen, setMenuOpen] = _useS(false); const [lang, setLang] = usePageLang(); // Auto-apply scroll-reveal to page sections for all subpages useAutoReveal(); _useE(() => { const onS = () => setScrolled(window.scrollY > 20); onS(); window.addEventListener('scroll', onS); return () => window.removeEventListener('scroll', onS); }, []); _useE(() => { document.body.classList.toggle('no-scroll', menuOpen); return () => document.body.classList.remove('no-scroll'); }, [menuOpen]); _useE(() => { const onKey = (e) => { if (e.key === 'Escape') setMenuOpen(false); }; window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, []); const tNav = NAV_I18N[lang]; const menuLabel = lang === 'en' ? 'Menu' : 'メニュー'; const closeLabel = lang === 'en' ? 'Close' : '閉じる'; const currentKey = (current || '').replace(/^\//, '').replace(/\/$/, ''); return (
MARIP Inc.
/
{tNav.contact}
/
setMenuOpen(false)} > {tNav.contact}
); }; // ─── Sub hero / page header ───────────────────────────────────────────────── const SubHero = ({ eyebrow, en, title, lede, crumbs, theme = 'noir', intensity = 0.7 }) => { const innerRef = _useR(null); _useE(() => { const root = innerRef.current; if (!root) return; const items = root.querySelectorAll('.subhero-crumbs, .subhero-eyebrow, .subhero-title, .subhero-en, .subhero-lede'); items.forEach((el, i) => { el.style.opacity = '0'; el.style.transform = 'translateY(24px)'; el.style.transition = `transform .9s cubic-bezier(.22,1,.36,1) ${i * 0.12}s, opacity .9s ease ${i * 0.12}s`; }); requestAnimationFrame(() => { items.forEach(el => { el.style.opacity = '1'; el.style.transform = 'translateY(0)'; }); }); }, []); return (
{typeof window !== 'undefined' && window.RippleCanvas && (
)}
{crumbs && (
{crumbs.map((c, i) => ( {i > 0 && /} {c.href ? {c.label} : {c.label}} ))}
)} {eyebrow && (
{eyebrow}
)}

{title}

{en &&

{en}

} {lede &&

{lede}

}
); }; // ─── Footer (lighter version, links to all real pages) ────────────────────── const PageFooter = ({ home = '../' }) => { const lang = getPageLang(); const t = FOOTER_I18N[lang]; return ( ); }; // ─── Generic CTA band ─────────────────────────────────────────────────────── const PageCta = ({ title, sub, button, href = '../contact/' }) => { const lang = getPageLang(); const label = button || (lang === 'en' ? 'Contact' : 'お問い合わせ'); return (

{title}

{sub &&

{sub}

}
{label}
); }; // イントロオーバーレイ（marip-intro--lock）が外れるまで実行を待つヘルパ。 // オーバーレイ表示中に IntersectionObserver が幾何的に「見えている」と判定し、 // アニメがオーバーレイの裏で消化されてしまうのを防ぐ。 const _afterIntro = (fn) => { if (!document.documentElement.classList.contains('marip-intro--lock')) { fn(); return () => {}; } const mo = new MutationObserver(() => { if (!document.documentElement.classList.contains('marip-intro--lock')) { mo.disconnect(); fn(); } }); mo.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] }); return () => mo.disconnect(); }; // ─── Reveal-on-scroll wrapper (mirror of TOP page's Reveal) ───────────────── const Reveal = ({ children, delay = 0, y = 40, className = '' }) => { const ref = _useR(null); const [visible, setVisible] = _useS(false); _useE(() => { const el = ref.current; if (!el) return; let obs; const stopWait = _afterIntro(() => { obs = new IntersectionObserver( ([e]) => { if (e.isIntersecting) { setVisible(true); obs.disconnect(); } }, { threshold: 0.15 } ); obs.observe(el); }); return () => { stopWait(); if (obs) obs.disconnect(); }; }, []); return (
{children}
); }; // ─── Auto-reveal: any element with [data-reveal] gets fade-up on scroll ───── // Also auto-targets common page section elements so existing pages get the // TOP-page style fade-up without per-page edits. const useAutoReveal = () => { _useE(() => { let obs; const apply = () => { const selectors = [ '[data-reveal]', '.page-section .page-section-head', '.page-section .prose > *', '.page-section > .def-table', '.page-section > .map-frame', '.page-section > .feature-grid > *', '.page-section > .timeline > *', '.page-section > .step-list > *', '.page-section > .article-meta', '.value-cell', '.mvv-row', '.ripple-diagram', '.article > *', ]; const els = Array.from(new Set(document.querySelectorAll(selectors.join(',')))); if (!els.length) return; els.forEach((el) => { if (el.dataset.revealApplied === '1') return; el.dataset.revealApplied = '1'; el.style.opacity = '0'; el.style.transform = 'translateY(40px)'; el.style.transition = 'transform 1.0s cubic-bezier(.22,1,.36,1), opacity 1.0s ease'; const d = parseFloat(el.dataset.revealDelay || '0'); el.style.transitionDelay = `${d}s`; }); obs = new IntersectionObserver(entries => { entries.forEach(en => { if (en.isIntersecting) { en.target.style.opacity = '1'; en.target.style.transform = 'translateY(0)'; obs.unobserve(en.target); } }); }, { threshold: 0.12, rootMargin: '0px 0px -8% 0px' }); els.forEach(el => obs.observe(el)); }; // Wait two frames so React has flushed the full subtree to the DOM. // さらに、初回訪問時はイントロオーバーレイが消えるまで観測開始を待つ。 let stopWait = () => {}; const r1 = requestAnimationFrame(() => requestAnimationFrame(() => { stopWait = _afterIntro(apply); })); return () => { cancelAnimationFrame(r1); stopWait(); if (obs) obs.disconnect(); }; }, []); }; Object.assign(window, { SITE_NAV, PageNav, PageCursor, SubHero, PageFooter, PageCta, Reveal, useAutoReveal, getPageLang, setPageLang, usePageLang, NAV_I18N, FOOTER_I18N, });