/* global React, ReactDOM */ const { useState, useEffect, useRef, useContext, createContext } = React; // ──────────────────────────────────────────────────────────── // Design tokens // ──────────────────────────────────────────────────────────── const C = { cream: '#F4EFE6', creamDeep: '#EBE3D4', ink: '#1A1A1A', ink70: 'rgba(26,26,26,0.7)', ink50: 'rgba(26,26,26,0.5)', ink30: 'rgba(26,26,26,0.3)', ink15: 'rgba(26,26,26,0.15)', teal: '#2C7A7B', tealDeep: '#1F5757', tealInk: '#16403F', tealMist: 'rgba(44,122,123,0.08)', }; const F = { jp: '"Shippori Mincho", "Noto Serif JP", "Hiragino Mincho ProN", serif', brand: '"Cormorant Garamond", "EB Garamond", serif', mono: '"JetBrains Mono", "SFMono-Regular", ui-monospace, monospace', }; // ──────────────────────────────────────────────────────────── // Brand-kit decorations — catalog + Tweaks context // Each deco has a stable id so the Tweaks UI can target it. // Defaults can be overridden per-id via localStorage. // ──────────────────────────────────────────────────────────── // 4 cat poses available for any cat decoration. Used in the Tweaks // panel POSE picker — user can swap a cat's pose without editing code. const CAT_POSES = ['cat-sit', 'cat-walk', 'cat-jump', 'cat-curl']; // All 7 brand-kit images — any slot can be assigned any image via Tweaks. const ALL_KINDS = ['cat-sit','cat-walk','cat-jump','cat-curl','tarot-moon','tarot-cup','tarot-sun']; // User-confirmed per-band tweak values (from Tweaks panel COPY CSS). // These are reference values — actual application via localStorage; band- // specific defaults to be wired up later when band system is implemented. // // ── スマホ全域 (xs + sm, 320〜819px) — finalized 2026-05-13 ── // [data-deco-id="hero-tarot-moon"] translate(0, 0) rot 18 scale 1.35 opacity 0.55 // [data-deco-id="hero-cat-sit"] translate(-8, 0) rot 0 scale 2.40 opacity 0.90 // [data-deco-id="about-cat-walk"] translate(-57, 31) rot 0 scale 2.40 opacity 0.55 // [data-deco-id="menu-morning"] translate(-27, 0) rot 0 scale 1.55 opacity 0.85 // [data-deco-id="menu-lunch"] translate(-41, -8) rot 0 scale 1.95 opacity 0.70 // [data-deco-id="menu-sweets"] translate(-40, 0) rot 0 scale 2.25 opacity 0.80 // [data-deco-id="menu-drinks"] translate(-36, 0) rot 0 scale 2.40 opacity 0.90 // [data-deco-id="footer-cat-sit"] translate(-79, 0) rot 0 scale 2.15 opacity 0.86 // Helper: convert a 375px-baseline size to a fluid clamp() string. // Decorations shrink ~15% at narrow widths (~320), grow ~25% at wide // widths (~480+), and stay readable across the mobile range (320–819). const fluidSize = (base) => { const min = Math.round(base * 0.85); const vw = (base / 3.75).toFixed(1); const max = Math.round(base * 1.25); return `clamp(${min}px, ${vw}vw, ${max}px)`; }; // Helper: anchor-axis value that scales with viewport (for top/left where // content height also scales). Pass the 375px baseline pixel value. const fluidAxis = (base) => { // grow proportionally to viewport, with min 0.85x and max 1.5x of baseline const v = base / 3.75; // vw at baseline 375 const lo = Math.round(base * 0.85); const hi = Math.round(base * 1.5); if (base < 0) return `clamp(${hi}px, ${v.toFixed(1)}vw, ${lo}px)`; return `clamp(${lo}px, ${v.toFixed(1)}vw, ${hi}px)`; }; const DECO_DEFAULTS = { 'hero-tarot-moon': { section: 'hero', label: 'Tarot — Moon', kind: 'tarot-moon', size: fluidSize(150), ratio: 1.5, rotate: 18, opacity: 0.54, color: 'teal', anchor: { top: -10, right: fluidAxis(-28) } }, 'hero-cat-sit': { section: 'hero', label: 'Cat — Sit', kind: 'cat-sit', size: fluidSize(170), ratio: 1, rotate: 0, opacity: 0.9, color: 'teal', anchor: { top: fluidAxis(230), right: fluidAxis(-18) } }, 'about-tarot-cup': { section: 'about', label: 'Tarot — Cup', kind: 'tarot-cup', size: fluidSize(140), ratio: 1.5, rotate: -22, opacity: 0.54, color: 'teal', anchor: { top: 40, left: fluidAxis(-38) } }, 'about-cat-walk': { section: 'about', label: 'Cat — Walk', kind: 'cat-walk', size: fluidSize(110), ratio: 1, rotate: 0, opacity: 0.55, color: 'teal', anchor: { top: 28, right: fluidAxis(-8) } }, // Menu cats are rendered INSIDE each accordion block (not at the // section level) so that their position follows the corresponding // header (モーニング / ランチ / スイーツ / ドリンク) regardless of which // blocks are expanded or folded. 'menu-morning': { section: 'menu', label: 'Morning', kind: 'cat-curl', size: fluidSize(130), ratio: 1, rotate: 0, opacity: 0.54, color: 'teal', perBlock: 'morning', anchor: { top: 0, right: fluidAxis(-20) } }, 'menu-lunch': { section: 'menu', label: 'Lunch', kind: 'cat-walk', size: fluidSize(110), ratio: 1, rotate: 0, opacity: 0.54, color: 'teal', perBlock: 'lunch', anchor: { top: 0, right: fluidAxis(-16) } }, 'menu-sweets': { section: 'menu', label: 'Sweets', kind: 'cat-sit', size: fluidSize(100), ratio: 1, rotate: 0, opacity: 0.54, color: 'teal', perBlock: 'sweets', anchor: { top: 0, right: fluidAxis(-10) } }, 'menu-drinks': { section: 'menu', label: 'Drinks', kind: 'cat-jump', size: fluidSize(110), ratio: 1, rotate: 0, opacity: 0.54, color: 'teal', perBlock: 'drinks', anchor: { top: 0, right: fluidAxis(-12) } }, 'gallery-tarot-moon': { section: 'gallery', label: 'Tarot — Moon', kind: 'tarot-moon', size: fluidSize(130), ratio: 1.5, rotate: -16, opacity: 0.54, color: 'teal', anchor: { top: 30, right: fluidAxis(-28) } }, 'gallery-cat-curl': { section: 'gallery', label: 'Cat — Curl', kind: 'cat-curl', size: fluidSize(120), ratio: 1, rotate: 0, opacity: 0.85, color: 'teal', anchor: { bottom: fluidAxis(80), left: fluidAxis(-22) } }, 'info-cat-curl': { section: 'info', label: 'Cat — Curl', kind: 'cat-curl', size: fluidSize(140), ratio: 1, rotate: 0, opacity: 0.68, color: 'cream', anchor: { bottom: fluidAxis(70), right: fluidAxis(-28) } }, 'info-cat-walk': { section: 'info', label: 'Cat — Walk', kind: 'cat-walk', size: fluidSize(88), ratio: 1, rotate: 0, opacity: 0.68, color: 'cream', anchor: { top: 40, left: fluidAxis(-10) } }, 'footer-cat-sit': { section: 'footer', label: 'Cat — Sit', kind: 'cat-sit', size: fluidSize(72), ratio: 1, rotate: 0, opacity: 0.45, color: 'teal', anchor: { top: 18, right: fluidAxis(-6) } }, }; // Mobile band defaults — baked-in tweaks finalized 2026-05-15. // User tweaks (from Tweaks panel) override these if present. const MOBILE_BAND_DEFAULTS = { 'hero-cat-sit': { x: -54, y: 0, scale: 2.05, opacity: 0.90 }, 'about-cat-walk': { x: -141, y: -68, scale: 2.25, opacity: 0.55 }, 'menu-morning': { x: -84, y: -35, scale: 1.70, opacity: 0.54 }, 'menu-lunch': { x: -85, y: -29, scale: 1.75, opacity: 0.54 }, 'menu-sweets': { x: -80, y: -13, scale: 1.55, opacity: 0.54 }, 'menu-drinks': { x: -68, y: -20, scale: 1.65, opacity: 0.54 }, 'info-cat-curl': { x: -112, y: -243, scale: 2.00, opacity: 0.68 }, 'info-cat-walk': { x: 200, y: -67, scale: 2.05, opacity: 0.68 }, 'footer-cat-sit': { enabled: false }, }; const TWEAKS_KEY = 'cafemicio-mobile-deco-tweaks-v1'; const TweaksContext = createContext({ tweaks: {}, update: () => {}, resetOne: () => {}, resetAll: () => {}, }); function TweaksProvider({ children }) { const [tweaks, setTweaks] = useState(() => { try { const raw = JSON.parse(localStorage.getItem(TWEAKS_KEY) || '{}'); // One-time migration: clear stale state once new band defaults // are baked in — users start fresh from MOBILE_BAND_DEFAULTS. const MIGRATION = 'cafemicio-mobile-band-defaults-v1'; if (!localStorage.getItem(MIGRATION)) { localStorage.setItem(MIGRATION, '1'); localStorage.removeItem(TWEAKS_KEY); return {}; } return raw; } catch { return {}; } }); useEffect(() => { try { localStorage.setItem(TWEAKS_KEY, JSON.stringify(tweaks)); } catch {} }, [tweaks]); const update = (id, patch) => setTweaks(t => ({ ...t, [id]: { ...(t[id] || {}), ...patch } })); const resetOne = (id) => setTweaks(t => { const n = { ...t }; delete n[id]; return n; }); const resetAll = () => setTweaks({}); return ( {children} ); } function BrandDeco({ id }) { const { tweaks } = useContext(TweaksContext); const def = DECO_DEFAULTS[id]; if (!def) return null; // Merge: MOBILE_BAND_DEFAULTS (code-baked) + user tweaks (user wins) const bd = MOBILE_BAND_DEFAULTS[id] || {}; const us = tweaks[id] || {}; const t = { ...bd, ...us }; if (t.enabled === false) return null; const baseColor = def.color === 'cream' ? C.cream : C.teal; // footer-cat-sit X is anchored to "cafemicio" brand text via JS in Footer, // so any saved user x tweak is intentionally ignored. Y / scale are // also locked to a fixed value so the cat sits consistently above the // brand text at all viewports. const tx = (id === 'footer-cat-sit') ? 0 : (t.x != null ? t.x : 0); const ty = (id === 'footer-cat-sit') ? -150 : (t.y != null ? t.y : 0); const scale = (id === 'footer-cat-sit') ? 3.0 : (t.scale != null ? t.scale : 1); const rot = t.rot != null ? t.rot : def.rotate; const opacity = t.opacity != null ? t.opacity : def.opacity; // Image kind can be overridden via Tweaks (any of the 7 brand assets). // `pose` is the legacy/back-compat field used by the IMAGE picker. const kind = (t.pose && ALL_KINDS.includes(t.pose)) ? t.pose : def.kind; const isTarot = kind && kind.startsWith('tarot-'); const aspectRatio = isTarot ? 1.5 : 1; const url = `/assets/brand-kit/individual/${kind}-mask.png`; // Width can be a number (px) or a CSS string (e.g. clamp()). // Height = width * aspectRatio. Aspect derives from the *current* kind // (1 for cats, 1.5 for tarot) so swapping a cat slot to a tarot // automatically gives the right portrait-card proportion. const widthCss = typeof def.size === 'number' ? `${def.size}px` : def.size; const heightCss = aspectRatio === 1 ? widthCss : (typeof def.size === 'number' ? `${def.size * aspectRatio}px` : `calc(${widthCss} * ${aspectRatio})`); return (
); } // ──────────────────────────────────────────────────────────── // Tiny illustrations // ──────────────────────────────────────────────────────────── const CatSilhouette = ({ size = 36, color = C.teal, opacity = 1, style }) => ( {/* Sitting cat silhouette — simple geometric */} ); const WalkingCat = ({ size = 60, color = C.teal, opacity = 0.16, style }) => ( ); const TarotMoon = ({ size = 56, color = C.teal, opacity = 0.45, style }) => ( ); const TarotCup = ({ size = 56, color = C.teal, opacity = 0.45, style }) => ( ); // Image placeholder — striped, with optional label const Placeholder = ({ w = '100%', h = 200, label, tone = 'teal', radius = 0, style, src, alt }) => { const palettes = { teal: { bg: '#E5DDD0', stripe: 'rgba(44,122,123,0.18)', text: C.tealInk }, warm: { bg: '#E8DCC8', stripe: 'rgba(118,76,40,0.18)', text: '#5a3a1c' }, deep: { bg: '#D9CFBE', stripe: 'rgba(31,87,87,0.25)', text: C.tealDeep }, }; const p = palettes[tone] || palettes.teal; return (
{/* striped fallback */}
{src && ( {alt )} {label && (
{label}
)}
); }; // ──────────────────────────────────────────────────────────── // Scroll-reveal helper // ──────────────────────────────────────────────────────────── function Reveal({ children, delay = 0, y = 18, style }) { const ref = useRef(null); const [shown, setShown] = useState(false); useEffect(() => { const el = ref.current; if (!el) return; const root = el.closest('[data-scroll-root]'); const io = new IntersectionObserver(([e]) => { if (e.isIntersecting) { setShown(true); io.disconnect(); } }, { threshold: 0.08, root }); io.observe(el); // Unconditional safety net — guarantees content is never stuck invisible // regardless of iframe visibility state or IO delivery timing. const t = setTimeout(() => { setShown(true); io.disconnect(); }, 600); return () => { io.disconnect(); clearTimeout(t); }; }, []); return (
{children}
); } // ──────────────────────────────────────────────────────────── // Brand mark // ──────────────────────────────────────────────────────────── const BrandMark = ({ size = 18, color = C.tealDeep }) => (
cafemicio
); // ──────────────────────────────────────────────────────────── // Sticky nav // ──────────────────────────────────────────────────────────── function Nav({ onMenu, scrolled }) { return (
); } // ──────────────────────────────────────────────────────────── // Section number heading // ──────────────────────────────────────────────────────────── const SectionHead = ({ num, kanji, latin }) => (
{num}
{latin}

{kanji}

); // ──────────────────────────────────────────────────────────── // HERO // ──────────────────────────────────────────────────────────── function Hero() { return (
{/* Brand-kit decorations (tweakable) */} {/* mono kicker */}
EST. KOBE · NADA
{/* Big vertical kanji title */}

カフェ ミーチョ

cafemicio

神戸・灘の住宅街にひっそり、
猫のグッズと過ごす午後のカフェ。

{/* chips */}
{/* CTA */} Instagramで見る ↗ {/* Storefront photo with vertical caption */}
{/* scattered cat */}
); } const Chip = ({ label, value }) => (
{label} {value}
); // ──────────────────────────────────────────────────────────── // ABOUT // ──────────────────────────────────────────────────────────── function About() { const tags = ['街のちいさなカフェ', '自家製スイーツ', '猫モチーフ', '落ち着いた時間', 'スパイスカレー']; const photos = [ { label: 'fig.01 · interior', tone: 'warm', src: '/assets/photos/interior-window-01.jpg', alt: '窓辺の席' }, { label: 'fig.02 · counter', tone: 'teal', src: '/assets/photos/interior-counter-01.jpg', alt: 'カウンター' }, { label: 'fig.03 · the shelf', tone: 'deep', src: '/assets/photos/interior-shelf.jpg', alt: '本棚' }, ]; return (

神戸・灘の住宅街、坂の途中にある小さな喫茶店。白い壁と、店内に広がる淡いティール色のタイル。丁寧に淹れるコーヒーと、手づくりのケーキ。街の音が遠くなる、ささやかな午後のために。

「ミーチョ (micio)」はイタリア語で猫の愛称。肩の力を抜いて、本を開いて、ひとりでもふたりでも、ゆっくり過ごしてもらえたら。

{/* keyword tags */}
{tags.map(t => ( {t} ))}
{/* horizontal carousel */}
{photos.map((p, i) => (
))}
); } // ──────────────────────────────────────────────────────────── // MENU // ──────────────────────────────────────────────────────────── const menuData = [ { slug: 'morning', title: 'モーニング', latin: 'Morning', hours: '09:30 — 11:30', note: 'ドリンク + ミニサラダ付', items: [ { name: 'トーストセット', en: 'Toast set', price: '¥500' }, { name: '玉子ホットサンドセット', en: 'Egg hot sandwich set', price: '¥600' }, { name: '野菜サラダホットサンドセット', en: 'Veggie hot sandwich set', price: '¥600' }, { name: '玉子サラダトーストセット', en: 'Egg salad toast set', price: '¥600' }, { name: '野菜サラダトーストセット', en: 'Veggie salad toast set', price: '¥600' }, { name: 'ハムチーズトーストセット', en: 'Ham & cheese toast set', price: '¥650' }, ], }, { slug: 'lunch', title: 'ランチ', latin: 'Lunch', hours: '11:30 — 14:30', note: 'ミニサラダ付 / ドリンク追加 +¥350', items: [ { name: 'チキンカレー', en: 'Chicken curry', price: '¥880', desc: 'スパイス、ココナツミルクと生クリーム仕上げ' }, { name: 'キーマカレー', en: 'Keema curry', price: '¥880', desc: '玉ねぎ・人参・ナス・トマト + 目玉焼き' }, { name: 'あいがけカレー', en: 'Combo curry', price: '¥980', desc: 'チキンとキーマの両方' }, { name: '焼きキーマカレー', en: 'Baked keema curry', price: '¥980', desc: 'チーズと半熟玉子' }, ], }, { slug: 'sweets', title: 'スイーツ', latin: 'Sweets', hours: '営業中いつでも', note: 'ケーキセット ¥850（ドリンク付）', items: [ { name: 'チーズケーキ', en: 'Cheesecake', price: '¥500', desc: 'レモンシロップ漬け' }, { name: 'ガトーショコラ', en: 'Gateau chocolat', price: '¥500', desc: '濃厚で食べやすい' }, { name: 'シフォンケーキ', en: 'Chiffon cake', price: '¥500', desc: '自家製ジャム添え' }, { subhead: 'Iced Sweets', jp: '冷たいスイーツ' }, { name: 'じぶんいろクリームソーダ', en: 'Custom cream soda', price: '¥550', desc: '赤・青・黄・緑からお好きな 2 色' }, { name: 'アイスサンデー', en: 'Ice sundae', price: '¥450', desc: 'チョコ／いちご／キャラメル' }, { name: 'スムージーパフェ', en: 'Smoothie parfait', price: '¥660', desc: '5 種のフルーツ・豆乳・蜂蜜・ヨーグルト' }, ], }, { slug: 'drinks', title: 'ドリンク', latin: 'Drinks', hours: 'HOT / ICE', note: 'お選びいただけます', items: [ { name: 'ブレンド', en: 'Blend coffee', opt: 'HOT / ICE', price: '¥450' }, { name: 'カフェオレ', en: 'Café au lait', opt: 'HOT / ICE', price: '¥500' }, { name: '紅茶', en: 'Black tea', opt: 'HOT / ICE', price: '¥450' }, { name: 'ホットジンジャーティー', en: 'Hot ginger tea', opt: 'HOT', price: '¥500' }, { name: 'ジンジャーエール', en: 'Ginger ale', opt: 'ICE', price: '¥500' }, ], }, ]; function Menu() { const [open, setOpen] = useState(0); return (
{menuData.map((sec, i) => { const isOpen = open === i; return (
{/* per-block cat — anchored to this block's header, so it moves with the title (モーニング/ランチ/etc.) but does NOT shift when other blocks expand/collapse. */}
{sec.note && (
※ {sec.note}
)} {sec.items.map((it, j) => { // Sub-heading row (e.g. "Iced Sweets" within Sweets) if (it.subhead) { return (
{it.subhead} {it.jp && ( {it.jp} )}
); } return (
{it.name}
{it.en}
{it.opt && ( {it.opt} )} {it.price}
{it.desc && (
{it.desc}
)}
); })}
); })}
); } // ──────────────────────────────────────────────────────────── // FORTUNE — タロット / 四柱推命 // ──────────────────────────────────────────────────────────── function Fortune() { const services = [ { title: 'タロット', latin: 'Tarot', prices: [{ amount: '¥1,500', unit: '/ 1 回' }], paragraphs: [ '大アルカナ 22 枚・小アルカナ 56 枚の計 78 枚から構成されるカードで、近い未来を占います。', '良い結果のときは、その幸運をさらに呼び寄せるアドバイスを。望まない結果のときも、いまの行動を少し変えることで未来を少しずつ良い方向に導けるよう、寄り添ったアドバイスをお伝えします。', ], meta: { label: '受付', body: 'カフェ営業中、店主の手が空き次第いつでも占います。お気軽にお声がけください。', }, }, { title: '四柱推命', latin: 'Four Pillars', prices: [ { amount: '¥3,000', unit: '/ 30 分' }, { amount: '¥5,000', unit: '/ 1 時間' }, ], paragraphs: [ '生年月日と生まれた時間から、生涯の運勢を観ます。性格・仕事運・家庭運だけでなく、仕事仲間との相性、ご家族との関係性、現在の職業の向き不向き、転職時期や婚期など、さまざまな悩みに対応できる占いです。', '生年月日と生時をお伺いしての鑑定となるため、ご予約制とさせていただきます。ご希望があれば、ご自身以外の方の鑑定もお受けします。', ], reservation: [ '上の LINE ボタンから友だち追加してください', 'LINE にお名前（ニックネーム可）と「四柱推命占い希望」とお送りください', '店主からの返信で予約日時が決まります', ], lineCta: true, }, ]; return (
{services.map((s, i) => (
{s.title} — {s.latin}
{s.prices.map((p, j) => ( {j > 0 && ·} {p.amount} {p.unit} ))}
{s.paragraphs.map((p, j) => (

{p}

))} {s.meta && (
{s.meta.label}
{s.meta.body}
)} {s.reservation && (
ご予約
{s.lineCta && ( LINE で予約・お問い合わせ ↗ )}
    {s.reservation.map((step, j) => (
  1. {j + 1} {step}
    2. ))}
)}
))}
占い日 / Open
水・日 10:00 — 18:00
※ 日程やお時間が合わない場合はお尋ねください
); } // ──────────────────────────────────────────────────────────── // GALLERY — masonry // ──────────────────────────────────────────────────────────── function Gallery() { const items = [ { h: 220, tone: 'teal', src: '/assets/photos/interior-bar.jpg', alt: 'カウンター席（バー）' }, { h: 160, tone: 'warm', src: '/assets/photos/interior-counter-02.jpg', alt: 'カウンター' }, { h: 240, tone: 'teal', src: '/assets/photos/summer-smoothie-parfait.webp', alt: 'スムージーパフェ' }, { h: 200, tone: 'warm', src: '/assets/photos/summer-cream-soda.webp', alt: 'じぶんいろクリームソーダ' }, { h: 160, tone: 'deep', src: '/assets/photos/interior-table-02.jpg', alt: 'テーブル' }, { h: 180, tone: 'teal', src: '/assets/photos/sweets-french-toast.jpg', alt: 'フレンチトースト' }, { h: 220, tone: 'warm', src: '/assets/photos/summer-ice-sundae.webp', alt: 'アイスサンデー' }, { h: 240, tone: 'deep', src: '/assets/photos/fortune-tarot.jpg', alt: 'タロット占いのカード展開' }, { h: 200, tone: 'teal', src: '/assets/photos/sweets-cheesecake-plate.jpg', alt: 'ベイクドチーズケーキ' }, { h: 150, tone: 'warm', src: '/assets/photos/lunch-cheese-rice.jpg', alt: 'チーズライス' }, ]; const colA = items.filter((_, i) => i % 2 === 0); const colB = items.filter((_, i) => i % 2 === 1); return (
{colA.map((it, i) => ( ))}
{colB.map((it, i) => ( ))}
); } // ──────────────────────────────────────────────────────────── // INFO (dark) // ──────────────────────────────────────────────────────────── function Info() { return (
05 / 05
INFO

場所と営業時間

〒657-0823
兵庫県神戸市灘区天城通4丁目1-1
ディアコート天城マンション101 09:30 — 17:30
(L.O. 17:00) 水曜日・日曜日・祝日 070-5043-0126 @cafemicio1121 友だち追加 {/* Map card */}
LOCATION MAP
{/* Google Maps embed */}