// Variation WARM — 温かみのある和風エディトリアル // アースカラー × 明朝体 × 手書き感 × フルレスポンシブ /* ─── Design tokens ─── */ const W = { cream: '#faf6f0', paper: '#fffdf9', ink: '#2d2218', inkMid: '#5a3e2b', inkSoft: '#7a5d45', terra: '#b85c38', terraL: '#e8c4ae', sage: '#4a6741', sageL: '#ccdfc8', rule: '#e8ddd0', serif: '"Shippori Mincho", "Times New Roman", serif', hand: '"Caveat", cursive', sans: '"Noto Sans JP", sans-serif', latin: '"Cormorant Garamond", serif', }; /* ─── Global CSS ─── */ function WarmStyles() { return ( ); } /* ─── Hooks ─── */ function useReveal() { React.useEffect(() => { const els = document.querySelectorAll('.w-reveal'); const obs = new IntersectionObserver( (entries) => entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add('vis'); obs.unobserve(e.target); } }), { threshold: 0.1 } ); els.forEach((el) => obs.observe(el)); return () => obs.disconnect(); }, []); } function useStickyNav() { React.useEffect(() => { const nav = document.querySelector('.w-nav'); if (!nav) return; const fn = () => nav.classList.toggle('scrolled', window.scrollY > 10); window.addEventListener('scroll', fn, { passive: true }); return () => window.removeEventListener('scroll', fn); }, []); } /* ─── Tiny bits ─── */ function SectionLabel({ text, light }) { return (
{text}
); } function WarmPhoto({ id, alt, h = 220, focal = '50% 50%' }) { return (
{alt}
); } /* ─── Paper texture SVG ─── */ function PaperTexture() { return ( ); } /* ─── Marquee ─── */ function WarmMarquee() { const items = ['LP制作', 'ホームページ制作', 'SEO基本設定', '保守・ドメイン管理', 'スマホ最適化', 'LINE・メール完結', '全国対応', '24時間返信', '完全オンライン']; const chunk = items.map((t) => ( {t} )); return (
{chunk} {chunk}
); } /* ─── News (Notion-driven) ─── */ function WarmNews() { const [items, setItems] = React.useState(null); React.useEffect(() => { let cancelled = false; fetch('/api/news') .then(r => r.ok ? r.json() : { items: [] }) .then(d => { if (!cancelled) setItems(d.items || []); }) .catch(() => { if (!cancelled) setItems([]); }); return () => { cancelled = true; }; }, []); // 配列が無い or 空ならセクション自体を出さない if (!items || items.length === 0) return null; const splitDate = (iso) => { if (!iso) return null; const d = new Date(iso); if (isNaN(d)) return null; return { year: d.getFullYear(), month: String(d.getMonth() + 1).padStart(2, '0'), day: String(d.getDate()).padStart(2, '0'), }; }; return (
{/* 装飾円 */}
{/* セクションヘッダ */}

お知らせ

最新の更新は Notion から自動で取得しています

{/* 投稿カード一覧 */}
{items.slice(0, 5).map((it, i) => { const dt = splitDate(it.date); const isLatest = i === 0; return (
{/* 左アクセントライン */}
{/* NEW バッジ */} {isLatest && ( ★ New )} {/* 日付スタンプ */}
{dt ? ( <>
{dt.year}
{dt.month}/{dt.day}
posted
) : (
—
)}
{/* 本文 */}

{it.title}

{it.body && (

{it.body}

)}
); })}
{/* フッタ装飾 */}
✎ お知らせは Notion で更新されると、約10分以内にサイトへ反映されます
); } /* ─── Decorative hand-drawn underline ─── */ function Squiggle({ color = W.terra, w = 120 }) { return ( ); } /* ─── Hero trust-stat icons ─── */ function StatIcon({ name }) { const c = W.terra; const p = { fill: 'none', stroke: c, strokeWidth: 1.7, strokeLinecap: 'round', strokeLinejoin: 'round' }; const wrap = (kids) => ( ); if (name === 'hand') { // 「丸投げOK」＝おまかせ → チェック付きハート/手のひら（シンプルなチェック丸） return wrap(<> ); } if (name === 'clock') { return wrap(<> ); } // pin return wrap(<> ); } /* ─── LINE consultation button ─── */ function LineButton({ size = 'md', full = false }) { const big = size === 'lg'; return ( LINE で無料相談する ); } /* ─── Field ─── */ function Field({ label, placeholder, area, name, required, type }) { const base = { display: 'block', width: '100%', marginTop: 6, background: W.cream, border: `1.5px solid ${W.rule}`, borderRadius: 8, padding: '12px 14px', fontFamily: W.sans, fontSize: 16, color: W.ink, boxSizing: 'border-box', outline: 'none', transition: 'border-color .2s ease', }; return (