予約管理（テンプレートから）

atomic.studio/s/3711

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

<div class="min-h-screen bg-zinc-950 text-white"><section class="bg-white py-20 md:py-28"><div class="mx-auto max-w-5xl px-6 grid md:grid-cols-2 gap-12"><div><h2 class="text-3xl font-bold text-slate-900">ご予約・ご相談</h2><p class="mt-4 text-slate-600 leading-relaxed">ご予約はお電話またはフォームから。前日18時までにお申し込みください。</p><div class="mt-8 rounded-2xl bg-slate-900 text-white p-6"><p class="text-sm text-slate-300">お電話でのご予約</p><a href="tel:03-1234-5678" class="mt-2 block text-3xl font-bold hover:text-indigo-300 transition">03-1234-5678</a><p class="mt-2 text-xs text-slate-400">受付時間: 9:00〜20:00（年中無休）</p></div></div><form class="rounded-2xl bg-slate-50 border border-slate-100 p-8 space-y-5"><h3 class="text-lg font-bold text-slate-900">Webから予約する</h3><div><label class="block text-sm font-medium text-slate-700 mb-1.5">お名前 <span class="text-red-500">*</span></label><input type="text" aria-label="お名前" required="" class="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm focus:border-indigo-400 focus:outline-none" placeholder="山田 花子"/></div><div><label class="block text-sm font-medium text-slate-700 mb-1.5">メールアドレス <span class="text-red-500">*</span></label><input type="email" aria-label="メールアドレス" required="" class="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm focus:border-indigo-400 focus:outline-none" placeholder="example@email.com"/></div><div><label class="block text-sm font-medium text-slate-700 mb-1.5">ご希望メニュー</label><select aria-label="ご希望メニュー" class="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm focus:border-indigo-400 focus:outline-none"><option>カット</option><option>カラー</option><option>パーマ</option><option>トリートメント</option><option>その他</option></select></div><div><label class="block text-sm font-medium text-slate-700 mb-1.5">ご希望日時</label><input type="datetime-local" aria-label="ご希望日時" class="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm focus:border-indigo-400 focus:outline-none"/></div><div><label class="block text-sm font-medium text-slate-700 mb-1.5">備考・ご要望</label><textarea aria-label="備考" rows="3" class="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm focus:border-indigo-400 focus:outline-none resize-none"></textarea></div><button type="submit" class="w-full rounded-xl bg-indigo-600 text-white py-3.5 font-semibold hover:bg-indigo-500 transition">予約リクエストを送る</button></form></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-yellow-50 border border-yellow-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-white py-20 md:py-28"><div class="mx-auto max-w-3xl px-6"><h2 class="text-3xl md:text-4xl font-bold text-slate-900 text-center">ご予約</h2><p class="mt-4 text-center text-slate-600">ご希望の日時をお選びください。確認のご連絡を差し上げます。</p><form class="mt-10 grid gap-5 md:grid-cols-2 rounded-2xl bg-slate-50 p-8 border border-slate-100"><div class="grid gap-1"><label class="text-sm font-medium text-slate-700">お名前</label><input type="text" aria-label="お名前" class="rounded-xl border border-slate-200 px-4 py-3 outline-none focus:border-indigo-400"/></div><div class="grid gap-1"><label class="text-sm font-medium text-slate-700">メールアドレス</label><input type="email" aria-label="メールアドレス" placeholder="you@example.com" class="rounded-xl border border-slate-200 px-4 py-3 outline-none focus:border-indigo-400"/></div><div class="grid gap-1"><label class="text-sm font-medium text-slate-700">ご希望日</label><input type="date" aria-label="ご希望日" class="rounded-xl border border-slate-200 px-4 py-3 outline-none focus:border-indigo-400"/></div><div class="grid gap-1"><label class="text-sm font-medium text-slate-700">人数</label><input type="number" aria-label="人数" min="1" class="rounded-xl border border-slate-200 px-4 py-3 outline-none focus:border-indigo-400" value="2"/></div><div class="md:col-span-2 grid gap-1"><label class="text-sm font-medium text-slate-700">ご要望（任意）</label><textarea aria-label="ご要望" class="h-24 rounded-xl border border-slate-200 px-4 py-3 outline-none focus:border-indigo-400"></textarea></div><button class="md:col-span-2 rounded-xl bg-indigo-600 px-7 py-3 font-semibold text-white shadow-lg shadow-indigo-600/30 hover:bg-indigo-500 transition">予約を申し込む</button></form></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-8 border border-slate-100 shadow-sm"><h2 class="text-2xl font-bold text-slate-900">ご利用プラン</h2><div class="mt-5 flex flex-wrap items-center justify-between gap-4 rounded-2xl bg-indigo-600 p-6 text-white"><div><p class="text-sm text-indigo-200">現在のプラン</p><p class="text-2xl font-bold">Pro</p><p class="mt-1 text-sm text-indigo-100">次回更新: 2026年7月1日</p></div><div class="text-right"><p class="text-2xl font-bold">¥4,980 / 月</p><button class="mt-2 rounded-xl bg-white px-4 py-2 text-sm font-semibold text-indigo-600 hover:bg-indigo-50 transition">プラン変更</button></div></div><div class="mt-8 grid gap-6 sm:grid-cols-3"><div><div class="flex items-baseline justify-between text-sm"><span class="font-medium text-slate-700">ユーザー</span><span class="text-slate-400">70%</span></div><div class="mt-2 h-2 overflow-hidden rounded-full bg-slate-100"><div class="h-full rounded-full bg-indigo-500" style="width:70%"></div></div><p class="mt-1 text-xs text-slate-400">14 / 20</p></div><div><div class="flex items-baseline justify-between text-sm"><span class="font-medium text-slate-700">ストレージ</span><span class="text-slate-400">62%</span></div><div class="mt-2 h-2 overflow-hidden rounded-full bg-slate-100"><div class="h-full rounded-full bg-indigo-500" style="width:62%"></div></div><p class="mt-1 text-xs text-slate-400">62 / 100</p></div><div><div class="flex items-baseline justify-between text-sm"><span class="font-medium text-slate-700">API呼び出し</span><span class="text-slate-400">84%</span></div><div class="mt-2 h-2 overflow-hidden rounded-full bg-slate-100"><div class="h-full rounded-full bg-rose-500" style="width:84%"></div></div><p class="mt-1 text-xs text-slate-400">8400 / 10000</p></div></div></div></section><section class="rounded-xl bg-white p-6 shadow dark:bg-gray-800 dark:text-gray-100"><h2 class="mb-4 text-xl font-bold">予約一覧</h2><div class="overflow-x-auto"><table class="w-full text-left text-sm"><thead><tr class="border-b border-gray-300 dark:border-gray-600"><th class="py-2 pr-4 font-semibold">日付</th><th class="py-2 pr-4 font-semibold">顧客</th><th class="py-2 font-semibold">ステータス</th></tr></thead><tbody><tr class="border-b border-gray-200 dark:border-gray-700 md:hover:bg-gray-50 md:dark:hover:bg-gray-700"><td class="py-3 pr-4">2025-04-10</td><td class="py-3 pr-4">田中 太郎</td><td class="py-3"><span class="inline-block rounded-full px-3 py-1 text-xs font-medium bg-yellow-100 text-yellow-700 dark:bg-yellow-900 dark:text-yellow-300">確認中</span></td></tr><tr class="border-b border-gray-200 dark:border-gray-700 md:hover:bg-gray-50 md:dark:hover:bg-gray-700"><td class="py-3 pr-4">2025-04-11</td><td class="py-3 pr-4">鈴木 花子</td><td class="py-3"><span class="inline-block rounded-full px-3 py-1 text-xs font-medium bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300">確定</span></td></tr><tr class="border-b border-gray-200 dark:border-gray-700 md:hover:bg-gray-50 md:dark:hover:bg-gray-700"><td class="py-3 pr-4">2025-04-12</td><td class="py-3 pr-4">佐藤 次郎</td><td class="py-3"><span class="inline-block rounded-full px-3 py-1 text-xs font-medium bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-300">キャンセル</span></td></tr><tr class="border-b border-gray-200 dark:border-gray-700 md:hover:bg-gray-50 md:dark:hover:bg-gray-700"><td class="py-3 pr-4">2025-04-13</td><td class="py-3 pr-4">山田 美咲</td><td class="py-3"><span class="inline-block rounded-full px-3 py-1 text-xs font-medium bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300">確定</span></td></tr></tbody></table></div></section><section 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"><div class="flex justify-between"><span class="text-gray-500 dark:text-gray-400">予約番号</span><span class="font-medium">#12345</span></div><div class="flex justify-between"><span class="text-gray-500 dark:text-gray-400">日付</span><span class="font-medium">2025年4月15日</span></div><div class="flex justify-between"><span class="text-gray-500 dark:text-gray-400">時間</span><span class="font-medium">14:00 〜 16:00</span></div><div class="flex justify-between"><span class="text-gray-500 dark:text-gray-400">人数</span><span class="font-medium">2名</span></div><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">金額</span><span class="font-medium">¥8,000（税込）</span></div></div><div class="mt-6 flex flex-col gap-3 md:flex-row md:justify-end"><button class="rounded-xl bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600">編集する</button><button class="rounded-xl border border-red-500 px-4 py-2 text-sm font-medium text-red-500 hover:bg-red-50 dark:border-red-400 dark:text-red-400 dark:hover:bg-red-900/20">キャンセルする</button></div></section><section class="bg-gray-900 text-gray-100 p-6 md:p-8 rounded-2xl shadow-lg max-w-4xl mx-auto"><h2 class="text-2xl md:text-3xl font-bold mb-6 border-b border-gray-700 pb-2">顧客管理リスト</h2><div class="space-y-6"><div class="bg-gray-800 rounded-xl p-4 md:p-6 shadow-md"><div class="flex flex-col md:flex-row md:items-center md:justify-between mb-4"><div><h3 class="text-lg md:text-xl font-semibold">田中 太郎</h3><p class="text-sm text-gray-400 mt-1">tanaka@example.com / 090-1234-5678</p></div><span class="mt-2 md:mt-0 text-xs bg-gray-700 px-3 py-1 rounded-full">来店 2 回</span></div><div class="overflow-x-auto"><table class="w-full text-sm text-left"><thead><tr class="border-b border-gray-700 text-gray-400"><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-700/50"><td class="py-2 pr-4">2024-01-15</td><td class="py-2 pr-4">カット</td><td class="py-2">¥4,500</td></tr><tr class="border-b border-gray-700/50"><td class="py-2 pr-4">2024-03-02</td><td class="py-2 pr-4">カラー</td><td class="py-2">¥8,000</td></tr></tbody></table></div></div><div class="bg-gray-800 rounded-xl p-4 md:p-6 shadow-md"><div class="flex flex-col md:flex-row md:items-center md:justify-between mb-4"><div><h3 class="text-lg md:text-xl font-semibold">佐藤 花子</h3><p class="text-sm text-gray-400 mt-1">sato@example.com / 080-9876-5432</p></div><span class="mt-2 md:mt-0 text-xs bg-gray-700 px-3 py-1 rounded-full">来店 1 回</span></div><div class="overflow-x-auto"><table class="w-full text-sm text-left"><thead><tr class="border-b border-gray-700 text-gray-400"><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-700/50"><td class="py-2 pr-4">2024-02-20</td><td class="py-2 pr-4">パーマ</td><td class="py-2">¥6,500</td></tr></tbody></table></div></div><div class="bg-gray-800 rounded-xl p-4 md:p-6 shadow-md"><div class="flex flex-col md:flex-row md:items-center md:justify-between mb-4"><div><h3 class="text-lg md:text-xl font-semibold">鈴木 一郎</h3><p class="text-sm text-gray-400 mt-1">suzuki@example.com / 070-5555-1234</p></div><span class="mt-2 md:mt-0 text-xs bg-gray-700 px-3 py-1 rounded-full">来店 0 回</span></div><p class="text-sm text-gray-500 italic">予約履歴はありません</p></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-2xl bg-gray-900 p-6 text-gray-100 shadow-lg md:p-8"><h2 class="mb-4 text-xl font-bold tracking-wide md:text-2xl">ダッシュボード（本日の予約数・売上・空き状況を表示）</h2><div class="grid grid-cols-1 gap-4 md:grid-cols-3"><div class="rounded-xl bg-gray-800 p-4"><p class="text-sm text-gray-400">本日の予約数</p><p class="mt-1 text-3xl font-bold text-indigo-400">12</p><p class="mt-1 text-xs text-gray-500">2026年6月2日</p></div><div class="rounded-xl bg-gray-800 p-4"><p class="text-sm text-gray-400">本日の売上</p><p class="mt-1 text-3xl font-bold text-emerald-400">¥84,500</p><p class="mt-1 text-xs text-gray-500">税込</p></div><div class="rounded-xl bg-gray-800 p-4"><p class="text-sm text-gray-400">空き状況</p><p class="mt-1 text-3xl font-bold text-amber-400">残り 3 枠</p><p class="mt-1 text-xs text-gray-500">最終更新: 10:30</p></div></div></section><section class="rounded-2xl bg-gray-900 p-6 text-gray-100 shadow-lg md:p-8"><h2 class="mb-6 text-xl font-bold tracking-tight md:text-2xl">通知設定フォーム（予約確認・リマインダー通知の設定）</h2><div class="space-y-5"><label class="flex items-center justify-between rounded-xl bg-gray-800 px-4 py-3"><span class="text-sm font-medium md:text-base">予約確認メール</span><input type="checkbox" class="h-5 w-5 rounded border-gray-600 bg-gray-700 text-indigo-500 focus:ring-2 focus:ring-indigo-400" checked=""/></label><label class="flex items-center justify-between rounded-xl bg-gray-800 px-4 py-3"><span class="text-sm font-medium md:text-base">リマインダー通知（前日）</span><input type="checkbox" class="h-5 w-5 rounded border-gray-600 bg-gray-700 text-indigo-500 focus:ring-2 focus:ring-indigo-400" checked=""/></label><label class="flex items-center justify-between rounded-xl bg-gray-800 px-4 py-3"><span class="text-sm font-medium md:text-base">リマインダー通知（1時間前）</span><input type="checkbox" class="h-5 w-5 rounded border-gray-600 bg-gray-700 text-indigo-500 focus:ring-2 focus:ring-indigo-400"/></label><div class="pt-2"><button type="button" class="w-full rounded-xl bg-indigo-600 px-4 py-2.5 text-sm font-semibold transition hover:bg-indigo-500 md:text-base">設定を保存</button></div></div></section><section class="bg-slate-50 py-20 md:py-28"><div class="mx-auto max-w-5xl px-6"><h2 class="text-3xl md:text-4xl font-bold text-slate-900">アクセス</h2><div class="mt-10 grid gap-8 overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm md:grid-cols-2"><div class="min-h-[16rem] bg-gradient-to-br from-slate-200 to-slate-300 bg-[length:24px_24px] bg-[image:linear-gradient(#ffffff55_1px,transparent_1px),linear-gradient(90deg,#ffffff55_1px,transparent_1px)]"></div><dl class="space-y-5 p-8"><div><dt class="text-sm font-semibold text-slate-400">住所</dt><dd class="mt-1 text-slate-800">東京都渋谷区神南1-2-3 キャピタルビル4F</dd></div><div><dt class="text-sm font-semibold text-slate-400">最寄駅</dt><dd class="mt-1 text-slate-800">JR渋谷駅 ハチ公口より徒歩5分</dd></div><div><dt class="text-sm font-semibold text-slate-400">営業時間</dt><dd class="mt-1 text-slate-800">平日 10:00 - 19:00 / 土日祝休</dd></div><div><dt class="text-sm font-semibold text-slate-400">電話</dt><dd class="mt-1 text-lg font-bold text-slate-900">03-1234-5678</dd></div></dl></div></div></section><section class="bg-gray-900 text-white py-16 px-6"><div class="max-w-5xl mx-auto grid md:grid-cols-2 items-center gap-10"><div><h2 class="text-3xl md:text-4xl font-bold mb-4">アプリをダウンロード</h2><p class="text-gray-300 mb-8 leading-relaxed">いつでもどこでも、スマートフォンから簡単アクセス。<br/>今すぐアプリを入手して、便利な機能をお試しください。</p><div class="flex flex-wrap gap-4"><a href="#" class="inline-flex items-center gap-2 bg-black border border-gray-600 rounded-xl px-6 py-3 hover:bg-gray-800 transition"><svg class="w-6 h-6 fill-current" viewBox="0 0 24 24"><path d="M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z"></path></svg><span class="text-sm leading-tight"><span class="block text-xs">Download on the</span><span class="font-semibold">App Store</span></span></a><a href="#" class="inline-flex items-center gap-2 bg-black border border-gray-600 rounded-xl px-6 py-3 hover:bg-gray-800 transition"><svg class="w-6 h-6 fill-current" viewBox="0 0 24 24"><path d="M3.609 1.814L13.792 12 3.61 22.186a.996.996 0 01-.61-.92V2.734a1 1 0 01.609-.92zm10.89 10.893l2.302 2.302-10.937 6.333 8.635-8.635zm3.199-3.199l2.807 1.626a1 1 0 010 1.732l-2.807 1.626L15.206 12l2.492-2.492zM5.864 2.658L16.8 8.99l-2.302 2.302-8.634-8.634z"></path></svg><span class="text-sm leading-tight"><span class="block text-xs">Get it on</span><span class="font-semibold">Google Play</span></span></a></div></div><div class="flex justify-center"><div class="relative w-48 h-96 bg-gray-800 rounded-[2.5rem] border-4 border-gray-600 shadow-xl"><div class="absolute top-0 left-1/2 -translate-x-1/2 w-24 h-6 bg-gray-900 rounded-b-xl"></div><div class="mt-8 mx-3 p-3 bg-gray-700 rounded-xl h-3/4 flex flex-col gap-2"><div class="h-3 w-3/4 bg-gray-500 rounded"></div><div class="h-3 w-1/2 bg-gray-500 rounded"></div><div class="mt-4 h-20 bg-gray-600 rounded"></div><div class="h-3 w-full bg-gray-500 rounded"></div><div class="h-3 w-2/3 bg-gray-500 rounded"></div></div><div class="absolute bottom-4 left-1/2 -translate-x-1/2 w-10 h-10 border-2 border-gray-500 rounded-full"></div></div></div></div></section></div>