在庫管理（テンプレートから）

atomic.studio/s/3695

📄 index.html コードを直接編集して「適用」でプレビューに反映

<div class="min-h-screen bg-zinc-950 text-white"><section class="bg-slate-50 py-20 md:py-28"><div class="mx-auto max-w-6xl px-6"><h2 class="text-3xl md:text-4xl font-bold text-slate-900">在庫車両</h2><div class="mt-12 grid md:grid-cols-2 lg:grid-cols-3 gap-5"><div class="group rounded-2xl bg-white border border-slate-100 overflow-hidden hover:shadow-lg hover:-translate-y-1 transition"><div class="relative aspect-[4/3] bg-gradient-to-br from-slate-100 to-slate-200 flex items-center justify-center text-7xl">🚗<span class="absolute top-3 left-3 rounded-full text-xs font-bold px-2.5 py-1 bg-indigo-100 text-indigo-700">新着</span></div><div class="p-5"><h3 class="font-bold text-slate-900">プリウス S</h3><p class="text-sm text-slate-400 mt-0.5">2023年式 / 8,200km / パールホワイト</p><p class="mt-3 text-2xl font-bold text-indigo-600">¥2,480,000</p></div></div><div class="group rounded-2xl bg-white border border-slate-100 overflow-hidden hover:shadow-lg hover:-translate-y-1 transition"><div class="relative aspect-[4/3] bg-gradient-to-br from-slate-100 to-slate-200 flex items-center justify-center text-7xl">🚙<span class="absolute top-3 left-3 rounded-full text-xs font-bold px-2.5 py-1 bg-red-100 text-red-700">人気</span></div><div class="p-5"><h3 class="font-bold text-slate-900">ヴェゼル e:HEV</h3><p class="text-sm text-slate-400 mt-0.5">2022年式 / 15,600km / プラチナホワイト</p><p class="mt-3 text-2xl font-bold text-indigo-600">¥2,880,000</p></div></div><div class="group rounded-2xl bg-white border border-slate-100 overflow-hidden hover:shadow-lg hover:-translate-y-1 transition"><div class="relative aspect-[4/3] bg-gradient-to-br from-slate-100 to-slate-200 flex items-center justify-center text-7xl">🚐<span class="absolute top-3 left-3 rounded-full text-xs font-bold px-2.5 py-1 bg-indigo-100 text-indigo-700">高品質</span></div><div class="p-5"><h3 class="font-bold text-slate-900">ランドクルーザー 300</h3><p class="text-sm text-slate-400 mt-0.5">2022年式 / 22,000km / ソリッドブラック</p><p class="mt-3 text-2xl font-bold text-indigo-600">¥7,980,000</p></div></div><div class="group rounded-2xl bg-white border border-slate-100 overflow-hidden hover:shadow-lg hover:-translate-y-1 transition"><div class="relative aspect-[4/3] bg-gradient-to-br from-slate-100 to-slate-200 flex items-center justify-center text-7xl">🚘<span class="absolute top-3 left-3 rounded-full text-xs font-bold px-2.5 py-1 bg-green-100 text-green-700">経済的</span></div><div class="p-5"><h3 class="font-bold text-slate-900">ワゴンR スマイル</h3><p class="text-sm text-slate-400 mt-0.5">2023年式 / 5,100km / ラピスブルー</p><p class="mt-3 text-2xl font-bold text-indigo-600">¥1,280,000</p></div></div><div class="group rounded-2xl bg-white border border-slate-100 overflow-hidden hover:shadow-lg hover:-translate-y-1 transition"><div class="relative aspect-[4/3] bg-gradient-to-br from-slate-100 to-slate-200 flex items-center justify-center text-7xl">🚗<span class="absolute top-3 left-3 rounded-full text-xs font-bold px-2.5 py-1 bg-red-100 text-red-700">人気</span></div><div class="p-5"><h3 class="font-bold text-slate-900">クラウンクロスオーバー</h3><p class="text-sm text-slate-400 mt-0.5">2023年式 / 11,200km / エモーショナルレッド</p><p class="mt-3 text-2xl font-bold text-indigo-600">¥4,580,000</p></div></div><div class="group rounded-2xl bg-white border border-slate-100 overflow-hidden hover:shadow-lg hover:-translate-y-1 transition"><div class="relative aspect-[4/3] bg-gradient-to-br from-slate-100 to-slate-200 flex items-center justify-center text-7xl">🚘<span class="absolute top-3 left-3 rounded-full text-xs font-bold px-2.5 py-1 bg-indigo-100 text-indigo-700">値下げ</span></div><div class="p-5"><h3 class="font-bold text-slate-900">N-BOX カスタム</h3><p class="text-sm text-slate-400 mt-0.5">2022年式 / 18,500km / プレミアムホワイト</p><p class="mt-3 text-2xl font-bold text-indigo-600">¥1,680,000</p></div></div></div></div></section><section class="bg-white p-6 md:p-10"><div class="mx-auto max-w-6xl"><div class="flex flex-wrap items-center justify-between gap-3"><h2 class="text-2xl font-bold text-slate-900">顧客一覧</h2><input aria-label="検索" placeholder="検索…" class="w-full sm:w-64 rounded-xl border border-slate-200 px-3 py-2 text-sm outline-none focus:border-indigo-400"/></div><div class="mt-6 overflow-x-auto rounded-2xl border border-slate-100 shadow-sm"><table class="min-w-full divide-y divide-slate-100 text-sm"><thead class="bg-slate-50"><tr><th class="px-5 py-3 text-left font-semibold text-slate-600 whitespace-nowrap">顧客名</th><th class="px-5 py-3 text-left font-semibold text-slate-600 whitespace-nowrap">ステータス</th><th class="px-5 py-3 text-left font-semibold text-slate-600 whitespace-nowrap">プラン</th><th class="px-5 py-3 text-left font-semibold text-slate-600 whitespace-nowrap">登録日</th><th class="px-5 py-3 text-left font-semibold text-slate-600 whitespace-nowrap">MRR</th></tr></thead><tbody class="divide-y divide-slate-100"><tr class="hover:bg-slate-50/70 transition"><td class="px-5 py-3 text-slate-700 whitespace-nowrap">田中商事</td><td class="px-5 py-3 text-slate-700 whitespace-nowrap"><span class="rounded-full px-2.5 py-0.5 text-xs font-semibold bg-emerald-100 text-emerald-700">稼働中</span></td><td class="px-5 py-3 text-slate-700 whitespace-nowrap">Pro</td><td class="px-5 py-3 text-slate-700 whitespace-nowrap">2026-01-12</td><td class="px-5 py-3 text-slate-700 whitespace-nowrap">¥48,000</td></tr><tr class="hover:bg-slate-50/70 transition"><td class="px-5 py-3 text-slate-700 whitespace-nowrap">佐藤デザイン</td><td class="px-5 py-3 text-slate-700 whitespace-nowrap"><span class="rounded-full px-2.5 py-0.5 text-xs font-semibold bg-emerald-100 text-emerald-700">稼働中</span></td><td class="px-5 py-3 text-slate-700 whitespace-nowrap">Standard</td><td class="px-5 py-3 text-slate-700 whitespace-nowrap">2026-02-03</td><td class="px-5 py-3 text-slate-700 whitespace-nowrap">¥18,000</td></tr><tr class="hover:bg-slate-50/70 transition"><td class="px-5 py-3 text-slate-700 whitespace-nowrap">鈴木工業</td><td class="px-5 py-3 text-slate-700 whitespace-nowrap"><span class="rounded-full px-2.5 py-0.5 text-xs font-semibold bg-rose-100 text-rose-700">停止</span></td><td class="px-5 py-3 text-slate-700 whitespace-nowrap">Pro</td><td class="px-5 py-3 text-slate-700 whitespace-nowrap">2025-11-28</td><td class="px-5 py-3 text-slate-700 whitespace-nowrap">¥0</td></tr><tr class="hover:bg-slate-50/70 transition"><td class="px-5 py-3 text-slate-700 whitespace-nowrap">山本クリニック</td><td class="px-5 py-3 text-slate-700 whitespace-nowrap"><span class="rounded-full px-2.5 py-0.5 text-xs font-semibold bg-emerald-100 text-emerald-700">稼働中</span></td><td class="px-5 py-3 text-slate-700 whitespace-nowrap">Enterprise</td><td class="px-5 py-3 text-slate-700 whitespace-nowrap">2026-03-19</td><td class="px-5 py-3 text-slate-700 whitespace-nowrap">¥120,000</td></tr><tr class="hover:bg-slate-50/70 transition"><td class="px-5 py-3 text-slate-700 whitespace-nowrap">伊藤事務所</td><td class="px-5 py-3 text-slate-700 whitespace-nowrap"><span class="rounded-full px-2.5 py-0.5 text-xs font-semibold bg-emerald-100 text-emerald-700">試用</span></td><td class="px-5 py-3 text-slate-700 whitespace-nowrap">Trial</td><td class="px-5 py-3 text-slate-700 whitespace-nowrap">2026-05-30</td><td class="px-5 py-3 text-slate-700 whitespace-nowrap">¥0</td></tr></tbody></table></div></div></section><section class="bg-slate-50 p-6 md:p-10"><div class="mx-auto max-w-6xl"><div class="flex items-center justify-between gap-4"><h2 class="text-2xl md:text-3xl font-bold text-slate-900">ダッシュボード</h2><span class="rounded-full bg-white border border-slate-200 px-4 py-1.5 text-sm text-slate-600 shadow-sm">今月</span></div><div class="mt-8 grid gap-5 sm:grid-cols-2 lg:grid-cols-4"><div class="rounded-2xl bg-white p-6 border border-slate-100 shadow-sm"><p class="text-sm font-medium text-slate-500">売上</p><p class="mt-3 text-3xl font-bold tracking-tight text-slate-900">¥2,480,000</p><p class="mt-2 inline-flex items-center gap-1 text-sm font-semibold text-emerald-600"><span>▲</span>+12.4%</p></div><div class="rounded-2xl bg-white p-6 border border-slate-100 shadow-sm"><p class="text-sm font-medium text-slate-500">新規顧客</p><p class="mt-3 text-3xl font-bold tracking-tight text-slate-900">318</p><p class="mt-2 inline-flex items-center gap-1 text-sm font-semibold text-emerald-600"><span>▲</span>+5.1%</p></div><div class="rounded-2xl bg-white p-6 border border-slate-100 shadow-sm"><p class="text-sm font-medium text-slate-500">解約率</p><p class="mt-3 text-3xl font-bold tracking-tight text-slate-900">1.8%</p><p class="mt-2 inline-flex items-center gap-1 text-sm font-semibold text-emerald-600"><span>▲</span>-0.3pt</p></div><div class="rounded-2xl bg-white p-6 border border-slate-100 shadow-sm"><p class="text-sm font-medium text-slate-500">稼働中ジョブ</p><p class="mt-3 text-3xl font-bold tracking-tight text-slate-900">47</p><p class="mt-2 inline-flex items-center gap-1 text-sm font-semibold text-rose-600"><span>▼</span>-2</p></div></div></div></section><aside class="hidden md:flex w-60 shrink-0 flex-col bg-slate-900 text-slate-300 min-h-screen"><div class="px-6 py-5 text-lg font-bold text-white border-b border-white/10">Console</div><nav class="flex-1 px-3 py-4 space-y-1"><a class="flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-medium transition bg-indigo-600 text-white"><span class="w-5 text-center opacity-80">▣</span>ダッシュボード</a><a class="flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-medium transition hover:bg-white/5 hover:text-white"><span class="w-5 text-center opacity-80">◔</span>顧客管理</a><a class="flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-medium transition hover:bg-white/5 hover:text-white"><span class="w-5 text-center opacity-80">▤</span>受注・請求</a><a class="flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-medium transition hover:bg-white/5 hover:text-white"><span class="w-5 text-center opacity-80">▦</span>在庫</a><a class="flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-medium transition hover:bg-white/5 hover:text-white"><span class="w-5 text-center opacity-80">◧</span>レポート</a><a class="flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-medium transition hover:bg-white/5 hover:text-white"><span class="w-5 text-center opacity-80">⚙</span>設定</a></nav><div class="px-3 py-4 border-t border-white/10"><a class="flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm hover:bg-white/5 hover:text-white transition"><span class="w-5 text-center">↩</span>ログアウト</a></div></aside><section class="rounded bg-gray-900 p-6 text-gray-100 shadow-lg md:p-8"><h2 class="mb-4 text-xl font-bold md:text-2xl">在庫入出庫フォーム</h2><div class="space-y-3"><div class="flex flex-col gap-2 md:flex-row md:items-center"><label class="w-24 text-sm font-medium text-gray-300">商品名</label><input type="text" placeholder="例：ボルト M6" class="w-full rounded border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-gray-100 placeholder-gray-500 focus:border-indigo-500 focus:outline-none md:w-64"/></div><div class="flex flex-col gap-2 md:flex-row md:items-center"><label class="w-24 text-sm font-medium text-gray-300">数量</label><input type="number" min="0" placeholder="0" class="w-full rounded border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-gray-100 placeholder-gray-500 focus:border-indigo-500 focus:outline-none md:w-32"/></div><div class="flex flex-col gap-2 md:flex-row md:items-center"><label class="w-24 text-sm font-medium text-gray-300">区分</label><select class="w-full rounded border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-gray-100 focus:border-indigo-500 focus:outline-none md:w-40"><option value="入庫">入庫</option><option value="出庫">出庫</option></select></div><div class="flex justify-end pt-2"><button class="rounded bg-indigo-600 px-5 py-2 text-sm font-semibold text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 md:text-base">登録</button></div></div></section><section class="rounded bg-gray-900 p-6 text-gray-100 shadow-lg"><h2 class="mb-4 text-xl font-bold md:text-2xl">在庫アラートパネル</h2><div class="space-y-3"><div class="flex items-center justify-between rounded bg-red-900/40 px-4 py-3"><span class="text-sm font-medium md:text-base">商品A (SKU: 1001)</span><span class="rounded bg-red-600 px-2 py-0.5 text-xs font-bold md:text-sm">残り2個</span></div><div class="flex items-center justify-between rounded bg-indigo-900/40 px-4 py-3"><span class="text-sm font-medium md:text-base">商品B (SKU: 1002)</span><span class="rounded bg-indigo-500 px-2 py-0.5 text-xs font-bold text-gray-900 md:text-sm">残り5個</span></div><div class="flex items-center justify-between rounded bg-gray-800 px-4 py-3"><span class="text-sm font-medium md:text-base">商品C (SKU: 1003)</span><span class="rounded bg-green-600 px-2 py-0.5 text-xs font-bold md:text-sm">在庫十分</span></div></div></section><div class="rounded-xl bg-white p-6 shadow-md dark:bg-gray-800 dark:text-gray-100 md:p-8"><h2 class="mb-4 text-xl font-bold md:text-2xl">在庫詳細</h2><div class="space-y-3 text-sm md:text-base"><div class="flex justify-between"><span class="text-gray-500 dark:text-gray-400">商品名</span><span class="font-medium">プレミアムワイヤレスイヤホン</span></div><div class="flex justify-between"><span class="text-gray-500 dark:text-gray-400">SKU</span><span class="font-medium">WH-1000XM5-BLK</span></div><div class="flex justify-between"><span class="text-gray-500 dark:text-gray-400">在庫数</span><span class="font-medium text-green-600 dark:text-green-400">42 個</span></div><div class="flex justify-between"><span class="text-gray-500 dark:text-gray-400">保管場所</span><span class="font-medium">A-3-12</span></div><div class="flex justify-between"><span class="text-gray-500 dark:text-gray-400">最終更新</span><span class="font-medium">2025-02-18 14:30</span></div></div></div><section class="rounded bg-gray-900 text-gray-100 p-6 md:p-8"><h2 class="text-xl font-bold mb-4 border-b border-gray-700 pb-2">発注管理テーブル</h2><div class="overflow-x-auto"><table class="w-full text-left text-sm"><thead><tr class="border-b border-gray-700"><th class="py-2 px-3">発注ID</th><th class="py-2 px-3">品目</th><th class="py-2 px-3">数量</th><th class="py-2 px-3">納期</th><th class="py-2 px-3">ステータス</th></tr></thead><tbody><tr class="border-b border-gray-800 hover:bg-gray-800"><td class="py-2 px-3">PO-001</td><td class="py-2 px-3">鋼材A</td><td class="py-2 px-3">100</td><td class="py-2 px-3">2025-05-10</td><td class="py-2 px-3 text-indigo-400">発注中</td></tr><tr class="border-b border-gray-800 hover:bg-gray-800"><td class="py-2 px-3">PO-002</td><td class="py-2 px-3">樹脂B</td><td class="py-2 px-3">50</td><td class="py-2 px-3">2025-05-15</td><td class="py-2 px-3 text-green-400">納品済</td></tr><tr class="border-b border-gray-800 hover:bg-gray-800"><td class="py-2 px-3">PO-003</td><td class="py-2 px-3">電子部品C</td><td class="py-2 px-3">200</td><td class="py-2 px-3">2025-05-20</td><td class="py-2 px-3 text-red-400">遅延</td></tr></tbody></table></div></section><section class="rounded-2xl bg-gray-900 p-6 text-white shadow-lg md:p-10"><h2 class="mb-4 text-2xl font-bold tracking-tight md:text-3xl">棚卸し入力フォーム</h2><div class="space-y-4"><div><label class="mb-1 block text-sm font-medium text-gray-300">商品コード</label><input type="text" placeholder="例: ITM-001" class="w-full rounded-xl border border-gray-600 bg-gray-800 px-4 py-2 text-white placeholder-gray-400 focus:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500"/></div><div><label class="mb-1 block text-sm font-medium text-gray-300">実在庫数</label><input type="number" min="0" placeholder="0" class="w-full rounded-xl border border-gray-600 bg-gray-800 px-4 py-2 text-white placeholder-gray-400 focus:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500"/></div><div><label class="mb-1 block text-sm font-medium text-gray-300">備考</label><textarea rows="3" placeholder="破損・期限切れなど" class="w-full rounded-xl border border-gray-600 bg-gray-800 px-4 py-2 text-white placeholder-gray-400 focus:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500"></textarea></div><button type="button" class="rounded-xl bg-indigo-600 px-6 py-2.5 font-semibold text-white transition hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-gray-900">登録する</button></div></section><section class="bg-slate-50 p-6 md:p-10"><div class="mx-auto max-w-2xl rounded-2xl bg-white p-6 md:p-10 border border-slate-100 shadow-sm"><div class="flex flex-wrap items-start justify-between gap-4"><div><h2 class="text-2xl font-bold text-slate-900">請求書</h2><p class="mt-1 text-sm text-slate-500">INV-2026-1042</p></div><div class="text-right text-sm text-slate-600"><p>発行日: 2026年6月1日</p><p>支払期限: 2026年6月30日</p></div></div><p class="mt-6 text-slate-700"><span class="text-sm text-slate-400">請求先</span><br/><span class="font-semibold">田中商事 株式会社</span></p><div class="mt-6 overflow-x-auto"><table class="min-w-full text-sm"><thead><tr class="border-b border-slate-200 text-slate-500"><th class="py-2 text-left font-semibold">項目</th><th class="py-2 text-right font-semibold">数量</th><th class="py-2 text-right font-semibold">単価</th><th class="py-2 text-right font-semibold">金額</th></tr></thead><tbody><tr class="border-b border-slate-100"><td class="py-3 text-slate-800">Pro プラン (月額)</td><td class="py-3 text-right text-slate-600">1</td><td class="py-3 text-right text-slate-600">¥40,000</td><td class="py-3 text-right font-medium text-slate-900">¥40,000</td></tr><tr class="border-b border-slate-100"><td class="py-3 text-slate-800">追加ユーザー</td><td class="py-3 text-right text-slate-600">5</td><td class="py-3 text-right text-slate-600">¥1,200</td><td class="py-3 text-right font-medium text-slate-900">¥6,000</td></tr><tr class="border-b border-slate-100"><td class="py-3 text-slate-800">初期設定サポート</td><td class="py-3 text-right text-slate-600">1</td><td class="py-3 text-right text-slate-600">¥20,000</td><td class="py-3 text-right font-medium text-slate-900">¥20,000</td></tr></tbody></table></div><dl class="mt-6 ml-auto max-w-xs space-y-2 text-sm"><div class="flex justify-between text-slate-600"><dt>小計</dt><dd>¥66,000</dd></div><div class="flex justify-between text-slate-600"><dt>消費税 (10%)</dt><dd>¥6,600</dd></div><div class="flex justify-between border-t border-slate-200 pt-2 text-lg font-bold text-slate-900"><dt>合計</dt><dd>¥72,600</dd></div></dl></div></section><div class="bg-white p-4 md:p-6 rounded-xl shadow-lg max-w-2xl mx-auto"><div class="flex items-center justify-between mb-4"><button class="px-3 py-1 text-sm border rounded hover:bg-gray-100">‹ 前月</button><h2 class="text-lg font-bold">2024年6月</h2><button class="px-3 py-1 text-sm border rounded hover:bg-gray-100">翌月 ›</button></div><div class="flex flex-wrap gap-3 mb-4 text-xs"><span class="flex items-center gap-1"><span class="w-3 h-3 rounded bg-green-50 border border-green-200"></span>空き有</span><span class="flex items-center gap-1"><span class="w-3 h-3 rounded bg-indigo-50 border border-indigo-200"></span>残り少</span><span class="flex items-center gap-1"><span class="w-3 h-3 rounded bg-red-50 border border-red-200"></span>満員</span><span class="flex items-center gap-1"><span class="w-3 h-3 rounded bg-indigo-600"></span>選択中</span><span class="flex items-center gap-1"><span class="w-3 h-3 rounded bg-gray-50 border border-gray-200"></span>過去</span></div><div class="grid grid-cols-7 mb-1"><div class="text-center text-xs font-semibold text-gray-500 py-1">日</div><div class="text-center text-xs font-semibold text-gray-500 py-1">月</div><div class="text-center text-xs font-semibold text-gray-500 py-1">火</div><div class="text-center text-xs font-semibold text-gray-500 py-1">水</div><div class="text-center text-xs font-semibold text-gray-500 py-1">木</div><div class="text-center text-xs font-semibold text-gray-500 py-1">金</div><div class="text-center text-xs font-semibold text-gray-500 py-1">土</div></div><div class="grid grid-cols-7 gap-1"><div class="aspect-square"></div><div class="aspect-square"></div><div class="aspect-square"></div><div class="aspect-square"></div><div class="aspect-square"></div><div class="aspect-square"></div><button class="aspect-square flex flex-col items-center justify-center rounded-xl text-sm transition-colors text-gray-400 cursor-not-allowed bg-gray-50"><span class="font-medium">1</span><span class="text-[10px] leading-tight">過去</span></button><button class="aspect-square flex flex-col items-center justify-center rounded-xl text-sm transition-colors text-gray-400 cursor-not-allowed bg-gray-50"><span class="font-medium">2</span><span class="text-[10px] leading-tight">過去</span></button><button class="aspect-square flex flex-col items-center justify-center rounded-xl text-sm transition-colors text-gray-400 cursor-not-allowed bg-gray-50"><span class="font-medium">3</span><span class="text-[10px] leading-tight">過去</span></button><button class="aspect-square flex flex-col items-center justify-center rounded-xl text-sm transition-colors text-gray-400 cursor-not-allowed bg-gray-50"><span class="font-medium">4</span><span class="text-[10px] leading-tight">過去</span></button><button class="aspect-square flex flex-col items-center justify-center rounded-xl text-sm transition-colors text-gray-400 cursor-not-allowed bg-gray-50"><span class="font-medium">5</span><span class="text-[10px] leading-tight">過去</span></button><button class="aspect-square flex flex-col items-center justify-center rounded-xl text-sm transition-colors text-gray-400 cursor-not-allowed bg-gray-50"><span class="font-medium">6</span><span class="text-[10px] leading-tight">過去</span></button><button class="aspect-square flex flex-col items-center justify-center rounded-xl text-sm transition-colors text-gray-400 cursor-not-allowed bg-gray-50"><span class="font-medium">7</span><span class="text-[10px] leading-tight">過去</span></button><button class="aspect-square flex flex-col items-center justify-center rounded-xl text-sm transition-colors text-gray-400 cursor-not-allowed bg-gray-50"><span class="font-medium">8</span><span class="text-[10px] leading-tight">過去</span></button><button class="aspect-square flex flex-col items-center justify-center rounded-xl text-sm transition-colors text-gray-400 cursor-not-allowed bg-gray-50"><span class="font-medium">9</span><span class="text-[10px] leading-tight">過去</span></button><button class="aspect-square flex flex-col items-center justify-center rounded-xl text-sm transition-colors text-gray-400 cursor-not-allowed bg-gray-50"><span class="font-medium">10</span><span class="text-[10px] leading-tight">過去</span></button><button class="aspect-square flex flex-col items-center justify-center rounded-xl text-sm transition-colors text-gray-400 cursor-not-allowed bg-gray-50"><span class="font-medium">11</span><span class="text-[10px] leading-tight">過去</span></button><button class="aspect-square flex flex-col items-center justify-center rounded-xl text-sm transition-colors text-gray-400 cursor-not-allowed bg-gray-50"><span class="font-medium">12</span><span class="text-[10px] leading-tight">過去</span></button><button class="aspect-square flex flex-col items-center justify-center rounded-xl text-sm transition-colors text-gray-400 cursor-not-allowed bg-gray-50"><span class="font-medium">13</span><span class="text-[10px] leading-tight">過去</span></button><button class="aspect-square flex flex-col items-center justify-center rounded-xl text-sm transition-colors text-gray-400 cursor-not-allowed bg-gray-50"><span class="font-medium">14</span><span class="text-[10px] leading-tight">過去</span></button><button class="aspect-square flex flex-col items-center justify-center rounded-xl text-sm transition-colors text-gray-400 cursor-not-allowed bg-gray-50"><span class="font-medium">15</span><span class="text-[10px] leading-tight">過去</span></button><button class="aspect-square flex flex-col items-center justify-center rounded-xl text-sm transition-colors text-gray-400 cursor-not-allowed bg-gray-50"><span class="font-medium">16</span><span class="text-[10px] leading-tight">過去</span></button><button class="aspect-square flex flex-col items-center justify-center rounded-xl text-sm transition-colors text-gray-400 cursor-not-allowed bg-gray-50"><span class="font-medium">17</span><span class="text-[10px] leading-tight">過去</span></button><button class="aspect-square flex flex-col items-center justify-center rounded-xl text-sm transition-colors text-gray-400 cursor-not-allowed bg-gray-50"><span class="font-medium">18</span><span class="text-[10px] leading-tight">過去</span></button><button class="aspect-square flex flex-col items-center justify-center rounded-xl text-sm transition-colors text-gray-400 cursor-not-allowed bg-gray-50"><span class="font-medium">19</span><span class="text-[10px] leading-tight">過去</span></button><button class="aspect-square flex flex-col items-center justify-center rounded-xl text-sm transition-colors text-gray-400 cursor-not-allowed bg-gray-50"><span class="font-medium">20</span><span class="text-[10px] leading-tight">過去</span></button><button class="aspect-square flex flex-col items-center justify-center rounded-xl text-sm transition-colors text-gray-400 cursor-not-allowed bg-gray-50"><span class="font-medium">21</span><span class="text-[10px] leading-tight">過去</span></button><button class="aspect-square flex flex-col items-center justify-center rounded-xl text-sm transition-colors text-gray-400 cursor-not-allowed bg-gray-50"><span class="font-medium">22</span><span class="text-[10px] leading-tight">過去</span></button><button class="aspect-square flex flex-col items-center justify-center rounded-xl text-sm transition-colors text-gray-400 cursor-not-allowed bg-gray-50"><span class="font-medium">23</span><span class="text-[10px] leading-tight">過去</span></button><button class="aspect-square flex flex-col items-center justify-center rounded-xl text-sm transition-colors text-gray-400 cursor-not-allowed bg-gray-50"><span class="font-medium">24</span><span class="text-[10px] leading-tight">過去</span></button><button class="aspect-square flex flex-col items-center justify-center rounded-xl text-sm transition-colors text-gray-400 cursor-not-allowed bg-gray-50"><span class="font-medium">25</span><span class="text-[10px] leading-tight">過去</span></button><button class="aspect-square flex flex-col items-center justify-center rounded-xl text-sm transition-colors text-gray-400 cursor-not-allowed bg-gray-50"><span class="font-medium">26</span><span class="text-[10px] leading-tight">過去</span></button><button class="aspect-square flex flex-col items-center justify-center rounded-xl text-sm transition-colors text-gray-400 cursor-not-allowed bg-gray-50"><span class="font-medium">27</span><span class="text-[10px] leading-tight">過去</span></button><button class="aspect-square flex flex-col items-center justify-center rounded-xl text-sm transition-colors text-gray-400 cursor-not-allowed bg-gray-50"><span class="font-medium">28</span><span class="text-[10px] leading-tight">過去</span></button><button class="aspect-square flex flex-col items-center justify-center rounded-xl text-sm transition-colors text-gray-400 cursor-not-allowed bg-gray-50"><span class="font-medium">29</span><span class="text-[10px] leading-tight">過去</span></button><button class="aspect-square flex flex-col items-center justify-center rounded-xl text-sm transition-colors text-gray-400 cursor-not-allowed bg-gray-50"><span class="font-medium">30</span><span class="text-[10px] leading-tight">過去</span></button></div><p class="mt-4 text-center text-xs text-gray-400 md:text-sm md:text-gray-500">日付をタップして選択（過去・満員は選択不可）</p></div><section class="bg-gray-900 text-gray-100 rounded-xl p-6 md:p-8 shadow-lg"><h2 class="text-2xl font-bold mb-4 border-b border-gray-700 pb-2">在庫移動履歴リスト</h2><div class="overflow-x-auto"><table class="w-full text-sm text-left"><thead><tr class="border-b border-gray-700 text-gray-400 uppercase"><th class="py-2 pr-4">ID</th><th class="py-2 pr-4">品目</th><th class="py-2 pr-4">移動元</th><th class="py-2 pr-4">移動先</th><th class="py-2 pr-4">数量</th><th class="py-2">日付</th></tr></thead><tbody><tr class="border-b border-gray-800 hover:bg-gray-800"><td class="py-3 pr-4 font-mono">MOV-001</td><td class="py-3 pr-4">アルミニウム板 A級</td><td class="py-3 pr-4">倉庫A</td><td class="py-3 pr-4">工場B</td><td class="py-3 pr-4">50</td><td class="py-3">2025-04-01</td></tr><tr class="border-b border-gray-800 hover:bg-gray-800"><td class="py-3 pr-4 font-mono">MOV-002</td><td class="py-3 pr-4">銅線 2mm</td><td class="py-3 pr-4">倉庫B</td><td class="py-3 pr-4">工場C</td><td class="py-3 pr-4">120</td><td class="py-3">2025-04-02</td></tr><tr class="border-b border-gray-800 hover:bg-gray-800"><td class="py-3 pr-4 font-mono">MOV-003</td><td class="py-3 pr-4">鉄パイプ 1m</td><td class="py-3 pr-4">工場C</td><td class="py-3 pr-4">倉庫A</td><td class="py-3 pr-4">30</td><td class="py-3">2025-04-03</td></tr></tbody></table></div></section><div class="text-white"><section class="px-6 py-16 md:py-24 text-center bg-zinc-900"><p class="text-sm tracking-widest text-indigo-400 mb-3">在庫管理アプリ</p><h2 class="text-3xl md:text-5xl font-bold mb-4">在庫管理をもっとスマートに</h2><p class="text-zinc-300 max-w-2xl mx-auto mb-8">アナログな管理から卒業。直感的な操作で在庫をリアルタイム把握</p><a href="#contact" class="inline-block px-8 py-3 rounded-full bg-indigo-500 text-zinc-900 font-semibold">無料で始める</a><p class="text-base text-zinc-400 mt-6">在庫管理アプリのウェブサイトへようこそ。</p></section><section class="px-6 py-14 bg-zinc-900"><div class="max-w-5xl mx-auto"><h3 class="text-2xl font-bold mb-6 text-center">選ばれる特徴</h3><div class="grid gap-4 md:grid-cols-3"><div class="text-center p-6"><div class="text-3xl mb-2">📦</div><h4 class="font-semibold mb-1">かんたん在庫登録</h4><p class="text-sm text-zinc-400">商品名・数量・バーコードを入力するだけで、すぐに在庫台帳が作成できます（※サンプル）</p></div><div class="text-center p-6"><div class="text-3xl mb-2">📊</div><h4 class="font-semibold mb-1">リアルタイムダッシュボード</h4><p class="text-sm text-zinc-400">在庫数・入出庫履歴・売れ筋ランキングをグラフで一覧表示（※サンプル）</p></div><div class="text-center p-6"><div class="text-3xl mb-2">🔔</div><h4 class="font-semibold mb-1">自動発注アラート</h4><p class="text-sm text-zinc-400">在庫切れを防ぐため、基準値を下回ったら自動で発注リストを生成（※サンプル）</p></div></div></div></section><section class="px-6 py-14 max-w-3xl mx-auto"><h3 class="text-2xl font-bold mb-6">よくある質問</h3><div><div class="border-b border-zinc-700 py-4"><p class="font-semibold mb-1">Q. 予約は必要ですか?</p><p class="text-sm text-zinc-300">A. ご予約優先ですが当日も承ります。※サンプル</p></div><div class="border-b border-zinc-700 py-4"><p class="font-semibold mb-1">Q. 駐車場はありますか?</p><p class="text-sm text-zinc-300">A. 近隣に駐車場がございます。※サンプル</p></div><div class="border-b border-zinc-700 py-4"><p class="font-semibold mb-1">Q. 支払い方法は?</p><p class="text-sm text-zinc-300">A. 現金・各種カード・電子マネー対応。※サンプル</p></div></div></section></div></div>