顧客CRM（テンプレートから）

atomic.studio/s/3733

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

<div class="min-h-screen bg-zinc-950 text-white"><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="美容室の顧客管理CRMダッシュボード" placeholder="検索…" class="w-full sm:w-64 rounded-lg 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-white p-6 md:p-10"><div class="mx-auto max-w-2xl rounded-2xl border border-slate-100 shadow-sm"><div class="flex flex-wrap items-start justify-between gap-3 border-b border-slate-100 p-6"><div><h2 class="text-xl font-bold text-slate-900">ひとりひとりの美しさを、データで叶える。</h2><div class="mt-2 flex flex-wrap gap-2"><span class="rounded-full px-2.5 py-0.5 text-xs font-semibold bg-emerald-100 text-emerald-700">取引中</span><span class="rounded-full bg-indigo-50 px-2.5 py-0.5 text-xs font-medium text-indigo-600">優良顧客</span><span class="rounded-full bg-indigo-50 px-2.5 py-0.5 text-xs font-medium text-indigo-600">更新間近</span></div></div><button class="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-semibold text-white hover:bg-indigo-500 transition">編集</button></div><dl class="grid gap-x-8 gap-y-4 p-6 sm:grid-cols-2"><div><dt class="text-xs font-semibold text-slate-400">業種</dt><dd class="mt-0.5 text-slate-800">卸売・小売</dd></div><div><dt class="text-xs font-semibold text-slate-400">担当者</dt><dd class="mt-0.5 text-slate-800">田中 美咲</dd></div><div><dt class="text-xs font-semibold text-slate-400">電話</dt><dd class="mt-0.5 text-slate-800">03-1234-5678</dd></div><div><dt class="text-xs font-semibold text-slate-400">メール</dt><dd class="mt-0.5 text-slate-800">info@example.co.jp</dd></div><div><dt class="text-xs font-semibold text-slate-400">契約プラン</dt><dd class="mt-0.5 text-slate-800">Pro（月額 ¥48,000）</dd></div><div><dt class="text-xs font-semibold text-slate-400">登録日</dt><dd class="mt-0.5 text-slate-800">2026年1月12日</dd></div></dl></div></section><div class="w-full max-w-4xl mx-auto bg-white rounded-2xl shadow-lg overflow-hidden border border-gray-100"><div class="bg-gradient-to-r from-[#8B6B4D] to-[#A88B6F] px-6 py-5"><div class="flex items-center justify-between"><h2 class="text-white text-xl font-semibold tracking-wide">来店履歴リスト</h2><span class="text-white/80 text-sm bg-white/20 px-3 py-1 rounded-full">全4件</span></div></div><div class="divide-y divide-gray-100"><div class="px-6 py-4 hover:bg-[#F9F6F2] transition-colors duration-200"><div class="flex flex-col md:flex-row md:items-center md:justify-between gap-2"><div class="flex-1 min-w-0"><div class="flex items-center gap-3 mb-1"><span class="text-sm font-medium text-[#8B6B4D] bg-[#F0EAE3] px-3 py-0.5 rounded-full whitespace-nowrap">2026-05-28</span><span class="text-base font-semibold text-gray-800 truncate">カット・カラー</span></div><div class="flex items-center gap-4 text-sm text-gray-500"><span class="flex items-center gap-1"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>佐藤</span><span class="font-semibold text-[#8B6B4D]">¥12,000</span></div></div><div class="md:text-right flex-shrink-0"><span class="inline-block text-xs text-gray-400 bg-gray-50 px-3 py-1 rounded-md border border-gray-100 max-w-[200px] truncate">次回はトリートメント推奨</span></div></div></div><div class="px-6 py-4 hover:bg-[#F9F6F2] transition-colors duration-200"><div class="flex flex-col md:flex-row md:items-center md:justify-between gap-2"><div class="flex-1 min-w-0"><div class="flex items-center gap-3 mb-1"><span class="text-sm font-medium text-[#8B6B4D] bg-[#F0EAE3] px-3 py-0.5 rounded-full whitespace-nowrap">2026-04-15</span><span class="text-base font-semibold text-gray-800 truncate">カット・パーマ</span></div><div class="flex items-center gap-4 text-sm text-gray-500"><span class="flex items-center gap-1"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>田中</span><span class="font-semibold text-[#8B6B4D]">¥15,000</span></div></div><div class="md:text-right flex-shrink-0"><span class="inline-block text-xs text-gray-400 bg-gray-50 px-3 py-1 rounded-md border border-gray-100 max-w-[200px] truncate">毛量調整希望</span></div></div></div><div class="px-6 py-4 hover:bg-[#F9F6F2] transition-colors duration-200"><div class="flex flex-col md:flex-row md:items-center md:justify-between gap-2"><div class="flex-1 min-w-0"><div class="flex items-center gap-3 mb-1"><span class="text-sm font-medium text-[#8B6B4D] bg-[#F0EAE3] px-3 py-0.5 rounded-full whitespace-nowrap">2026-03-10</span><span class="text-base font-semibold text-gray-800 truncate">カラー</span></div><div class="flex items-center gap-4 text-sm text-gray-500"><span class="flex items-center gap-1"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>佐藤</span><span class="font-semibold text-[#8B6B4D]">¥8,000</span></div></div><div class="md:text-right flex-shrink-0"><span class="inline-block text-xs text-gray-300 italic">メモなし</span></div></div></div><div class="px-6 py-4 hover:bg-[#F9F6F2] transition-colors duration-200"><div class="flex flex-col md:flex-row md:items-center md:justify-between gap-2"><div class="flex-1 min-w-0"><div class="flex items-center gap-3 mb-1"><span class="text-sm font-medium text-[#8B6B4D] bg-[#F0EAE3] px-3 py-0.5 rounded-full whitespace-nowrap">2026-02-20</span><span class="text-base font-semibold text-gray-800 truncate">カット</span></div><div class="flex items-center gap-4 text-sm text-gray-500"><span class="flex items-center gap-1"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>山田</span><span class="font-semibold text-[#8B6B4D]">¥5,500</span></div></div><div class="md:text-right flex-shrink-0"><span class="inline-block text-xs text-gray-400 bg-gray-50 px-3 py-1 rounded-md border border-gray-100 max-w-[200px] truncate">前回より2cmカット</span></div></div></div></div><div class="px-6 py-3 bg-gray-50 border-t border-gray-100 text-center"><button class="text-sm text-[#8B6B4D] hover:text-[#6F523B] font-medium transition-colors">すべての来店履歴を見る →</button></div></div><div class="w-full max-w-5xl mx-auto bg-white rounded-xl shadow-lg border border-gray-200 overflow-hidden"><div class="bg-gradient-to-r from-[#1e293b] to-[#334155] px-4 md:px-6 py-3 md:py-4"><div class="flex items-center justify-between"><div><h2 class="text-white text-base md:text-lg font-bold tracking-wide">予約カレンダー</h2><p class="text-gray-300 text-xs md:text-sm mt-0.5">2026年6月</p></div><div class="flex gap-1 md:gap-2"><button class="bg-white/10 hover:bg-white/20 text-white text-xs md:text-sm px-2 md:px-3 py-1 rounded-md transition-colors border border-white/20">＜</button><button class="bg-white/10 hover:bg-white/20 text-white text-xs md:text-sm px-2 md:px-3 py-1 rounded-md transition-colors border border-white/20">＞</button></div></div></div><div class="grid grid-cols-7 bg-gray-50 border-b border-gray-200"><div class="text-center text-xs md:text-sm font-semibold py-2 md:py-3 text-red-500">日</div><div class="text-center text-xs md:text-sm font-semibold py-2 md:py-3 text-gray-600">月</div><div class="text-center text-xs md:text-sm font-semibold py-2 md:py-3 text-gray-600">火</div><div class="text-center text-xs md:text-sm font-semibold py-2 md:py-3 text-gray-600">水</div><div class="text-center text-xs md:text-sm font-semibold py-2 md:py-3 text-gray-600">木</div><div class="text-center text-xs md:text-sm font-semibold py-2 md:py-3 text-gray-600">金</div><div class="text-center text-xs md:text-sm font-semibold py-2 md:py-3 text-blue-500">土</div></div><div class="grid grid-cols-7 gap-px bg-gray-200"><div class="p-1 md:p-2 min-h-[60px] md:min-h-[80px]"></div><div class="p-1 md:p-2 border border-gray-200 rounded min-h-[60px] md:min-h-[80px] transition-colors bg-white hover:bg-gray-50"><div class="flex items-center justify-between mb-1"><span class="text-xs md:text-sm font-semibold text-gray-700">1</span></div></div><div class="p-1 md:p-2 border border-gray-200 rounded min-h-[60px] md:min-h-[80px] transition-colors bg-white hover:bg-gray-50"><div class="flex items-center justify-between mb-1"><span class="text-xs md:text-sm font-semibold text-gray-700">2</span></div></div><div class="p-1 md:p-2 border border-gray-200 rounded min-h-[60px] md:min-h-[80px] transition-colors bg-white hover:bg-gray-50"><div class="flex items-center justify-between mb-1"><span class="text-xs md:text-sm font-semibold text-gray-700">3</span></div><div class="bg-[#f0f9ff] border-l-2 border-[#3b82f6] rounded-sm px-1 py-0.5 text-[10px] md:text-xs leading-tight"><div class="font-medium text-[#1e40af]">10:00</div><div class="text-gray-800 truncate">佐藤様</div><div class="text-gray-500 truncate">カット+カラー</div></div></div><div class="p-1 md:p-2 border border-gray-200 rounded min-h-[60px] md:min-h-[80px] transition-colors bg-white hover:bg-gray-50"><div class="flex items-center justify-between mb-1"><span class="text-xs md:text-sm font-semibold text-gray-700">4</span></div></div><div class="p-1 md:p-2 border border-gray-200 rounded min-h-[60px] md:min-h-[80px] transition-colors bg-white hover:bg-gray-50"><div class="flex items-center justify-between mb-1"><span class="text-xs md:text-sm font-semibold text-gray-700">5</span></div></div><div class="p-1 md:p-2 border border-gray-200 rounded min-h-[60px] md:min-h-[80px] transition-colors bg-[#fef3c7] border-[#f59e0b]"><div class="flex items-center justify-between mb-1"><span class="text-xs md:text-sm font-semibold text-[#d97706]">6</span><span class="text-[10px] md:text-xs bg-[#f59e0b] text-white px-1.5 py-0.5 rounded-full font-medium">本日</span></div></div><div class="p-1 md:p-2 border border-gray-200 rounded min-h-[60px] md:min-h-[80px] transition-colors bg-white hover:bg-gray-50"><div class="flex items-center justify-between mb-1"><span class="text-xs md:text-sm font-semibold text-gray-700">7</span></div><div class="bg-[#f0f9ff] border-l-2 border-[#3b82f6] rounded-sm px-1 py-0.5 text-[10px] md:text-xs leading-tight"><div class="font-medium text-[#1e40af]">11:30</div><div class="text-gray-800 truncate">田中様</div><div class="text-gray-500 truncate">パーマ</div></div></div><div class="p-1 md:p-2 border border-gray-200 rounded min-h-[60px] md:min-h-[80px] transition-colors bg-white hover:bg-gray-50"><div class="flex items-center justify-between mb-1"><span class="text-xs md:text-sm font-semibold text-gray-700">8</span></div></div><div class="p-1 md:p-2 border border-gray-200 rounded min-h-[60px] md:min-h-[80px] transition-colors bg-white hover:bg-gray-50"><div class="flex items-center justify-between mb-1"><span class="text-xs md:text-sm font-semibold text-gray-700">9</span></div></div><div class="p-1 md:p-2 border border-gray-200 rounded min-h-[60px] md:min-h-[80px] transition-colors bg-white hover:bg-gray-50"><div class="flex items-center justify-between mb-1"><span class="text-xs md:text-sm font-semibold text-gray-700">10</span></div></div><div class="p-1 md:p-2 border border-gray-200 rounded min-h-[60px] md:min-h-[80px] transition-colors bg-white hover:bg-gray-50"><div class="flex items-center justify-between mb-1"><span class="text-xs md:text-sm font-semibold text-gray-700">11</span></div></div><div class="p-1 md:p-2 border border-gray-200 rounded min-h-[60px] md:min-h-[80px] transition-colors bg-white hover:bg-gray-50"><div class="flex items-center justify-between mb-1"><span class="text-xs md:text-sm font-semibold text-gray-700">12</span></div><div class="bg-[#f0f9ff] border-l-2 border-[#3b82f6] rounded-sm px-1 py-0.5 text-[10px] md:text-xs leading-tight"><div class="font-medium text-[#1e40af]">14:00</div><div class="text-gray-800 truncate">鈴木様</div><div class="text-gray-500 truncate">カット</div></div></div><div class="p-1 md:p-2 border border-gray-200 rounded min-h-[60px] md:min-h-[80px] transition-colors bg-white hover:bg-gray-50"><div class="flex items-center justify-between mb-1"><span class="text-xs md:text-sm font-semibold text-gray-700">13</span></div></div><div class="p-1 md:p-2 border border-gray-200 rounded min-h-[60px] md:min-h-[80px] transition-colors bg-white hover:bg-gray-50"><div class="flex items-center justify-between mb-1"><span class="text-xs md:text-sm font-semibold text-gray-700">14</span></div></div><div class="p-1 md:p-2 border border-gray-200 rounded min-h-[60px] md:min-h-[80px] transition-colors bg-white hover:bg-gray-50"><div class="flex items-center justify-between mb-1"><span class="text-xs md:text-sm font-semibold text-gray-700">15</span></div></div><div class="p-1 md:p-2 border border-gray-200 rounded min-h-[60px] md:min-h-[80px] transition-colors bg-white hover:bg-gray-50"><div class="flex items-center justify-between mb-1"><span class="text-xs md:text-sm font-semibold text-gray-700">16</span></div></div><div class="p-1 md:p-2 border border-gray-200 rounded min-h-[60px] md:min-h-[80px] transition-colors bg-white hover:bg-gray-50"><div class="flex items-center justify-between mb-1"><span class="text-xs md:text-sm font-semibold text-gray-700">17</span></div></div><div class="p-1 md:p-2 border border-gray-200 rounded min-h-[60px] md:min-h-[80px] transition-colors bg-white hover:bg-gray-50"><div class="flex items-center justify-between mb-1"><span class="text-xs md:text-sm font-semibold text-gray-700">18</span></div><div class="bg-[#f0f9ff] border-l-2 border-[#3b82f6] rounded-sm px-1 py-0.5 text-[10px] md:text-xs leading-tight"><div class="font-medium text-[#1e40af]">10:30</div><div class="text-gray-800 truncate">山田様</div><div class="text-gray-500 truncate">トリートメント</div></div></div><div class="p-1 md:p-2 border border-gray-200 rounded min-h-[60px] md:min-h-[80px] transition-colors bg-white hover:bg-gray-50"><div class="flex items-center justify-between mb-1"><span class="text-xs md:text-sm font-semibold text-gray-700">19</span></div></div><div class="p-1 md:p-2 border border-gray-200 rounded min-h-[60px] md:min-h-[80px] transition-colors bg-white hover:bg-gray-50"><div class="flex items-center justify-between mb-1"><span class="text-xs md:text-sm font-semibold text-gray-700">20</span></div></div><div class="p-1 md:p-2 border border-gray-200 rounded min-h-[60px] md:min-h-[80px] transition-colors bg-white hover:bg-gray-50"><div class="flex items-center justify-between mb-1"><span class="text-xs md:text-sm font-semibold text-gray-700">21</span></div></div><div class="p-1 md:p-2 border border-gray-200 rounded min-h-[60px] md:min-h-[80px] transition-colors bg-white hover:bg-gray-50"><div class="flex items-center justify-between mb-1"><span class="text-xs md:text-sm font-semibold text-gray-700">22</span></div></div><div class="p-1 md:p-2 border border-gray-200 rounded min-h-[60px] md:min-h-[80px] transition-colors bg-white hover:bg-gray-50"><div class="flex items-center justify-between mb-1"><span class="text-xs md:text-sm font-semibold text-gray-700">23</span></div></div><div class="p-1 md:p-2 border border-gray-200 rounded min-h-[60px] md:min-h-[80px] transition-colors bg-white hover:bg-gray-50"><div class="flex items-center justify-between mb-1"><span class="text-xs md:text-sm font-semibold text-gray-700">24</span></div></div><div class="p-1 md:p-2 border border-gray-200 rounded min-h-[60px] md:min-h-[80px] transition-colors bg-white hover:bg-gray-50"><div class="flex items-center justify-between mb-1"><span class="text-xs md:text-sm font-semibold text-gray-700">25</span></div><div class="bg-[#f0f9ff] border-l-2 border-[#3b82f6] rounded-sm px-1 py-0.5 text-[10px] md:text-xs leading-tight"><div class="font-medium text-[#1e40af]">13:00</div><div class="text-gray-800 truncate">伊藤様</div><div class="text-gray-500 truncate">カラー</div></div></div><div class="p-1 md:p-2 border border-gray-200 rounded min-h-[60px] md:min-h-[80px] transition-colors bg-white hover:bg-gray-50"><div class="flex items-center justify-between mb-1"><span class="text-xs md:text-sm font-semibold text-gray-700">26</span></div></div><div class="p-1 md:p-2 border border-gray-200 rounded min-h-[60px] md:min-h-[80px] transition-colors bg-white hover:bg-gray-50"><div class="flex items-center justify-between mb-1"><span class="text-xs md:text-sm font-semibold text-gray-700">27</span></div></div><div class="p-1 md:p-2 border border-gray-200 rounded min-h-[60px] md:min-h-[80px] transition-colors bg-white hover:bg-gray-50"><div class="flex items-center justify-between mb-1"><span class="text-xs md:text-sm font-semibold text-gray-700">28</span></div></div><div class="p-1 md:p-2 border border-gray-200 rounded min-h-[60px] md:min-h-[80px] transition-colors bg-white hover:bg-gray-50"><div class="flex items-center justify-between mb-1"><span class="text-xs md:text-sm font-semibold text-gray-700">29</span></div></div><div class="p-1 md:p-2 border border-gray-200 rounded min-h-[60px] md:min-h-[80px] transition-colors bg-white hover:bg-gray-50"><div class="flex items-center justify-between mb-1"><span class="text-xs md:text-sm font-semibold text-gray-700">30</span></div></div></div><div class="bg-gray-50 px-4 md:px-6 py-2 md:py-3 border-t border-gray-200 flex flex-wrap items-center justify-between gap-2 text-xs md:text-sm text-gray-600"><span class="flex items-center gap-1"><span class="inline-block w-2.5 h-2.5 bg-[#f0f9ff] border-l-2 border-[#3b82f6] rounded-sm"></span>予約あり: 5件</span><span class="flex items-center gap-1"><span class="inline-block w-2.5 h-2.5 bg-[#fef3c7] border border-[#f59e0b] rounded-sm"></span>本日</span><span class="text-gray-400">空き枠: 25日</span></div></div><section class="bg-white p-6 md:p-8"><div class="mx-auto max-w-xl rounded-2xl border border-slate-100 p-5 shadow-sm"><h2 class="text-lg font-bold text-slate-900">月別売上 (万円)</h2><svg viewBox="0 0 320 170" class="mt-4 w-full" role="img"><defs><linearGradient id="g-bar" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#6366f1" stop-opacity="0.95"></stop><stop offset="100%" stop-color="#6366f1" stop-opacity="0.5"></stop></linearGradient></defs><g><rect x="32.7" y="85.0" width="31.3" height="59.0" rx="4" fill="url(#g-bar)"></rect><text x="48.3" y="81.0" text-anchor="middle" font-size="8.5" font-weight="600" fill="#475569">62</text><text x="48.3" y="157" text-anchor="middle" font-size="9" fill="#94a3b8">1月</text></g><g><rect x="77.4" y="72.6" width="31.3" height="71.4" rx="4" fill="url(#g-bar)"></rect><text x="93.0" y="68.6" text-anchor="middle" font-size="8.5" font-weight="600" fill="#475569">75</text><text x="93.0" y="157" text-anchor="middle" font-size="9" fill="#94a3b8">2月</text></g><g><rect x="122.0" y="60.3" width="31.3" height="83.7" rx="4" fill="url(#g-bar)"></rect><text x="137.7" y="56.3" text-anchor="middle" font-size="8.5" font-weight="600" fill="#475569">88</text><text x="137.7" y="157" text-anchor="middle" font-size="9" fill="#94a3b8">3月</text></g><g><rect x="166.7" y="76.4" width="31.3" height="67.6" rx="4" fill="url(#g-bar)"></rect><text x="182.3" y="72.4" text-anchor="middle" font-size="8.5" font-weight="600" fill="#475569">71</text><text x="182.3" y="157" text-anchor="middle" font-size="9" fill="#94a3b8">4月</text></g><g><rect x="211.4" y="52.6" width="31.3" height="91.4" rx="4" fill="url(#g-bar)"></rect><text x="227.0" y="48.6" text-anchor="middle" font-size="8.5" font-weight="600" fill="#475569">96</text><text x="227.0" y="157" text-anchor="middle" font-size="9" fill="#94a3b8">5月</text></g><g><rect x="256.0" y="26.0" width="31.3" height="118.0" rx="4" fill="url(#g-bar)"></rect><text x="271.7" y="22.0" text-anchor="middle" font-size="8.5" font-weight="600" fill="#475569">124</text><text x="271.7" y="157" text-anchor="middle" font-size="9" fill="#94a3b8">6月</text></g><line x1="26" y1="144" x2="294" y2="144" stroke="#e2e8f0" stroke-width="1"></line></svg></div></section><div class="min-h-screen bg-[#f7f3ee] flex items-center justify-center p-4"><div class="w-full max-w-2xl bg-white rounded-2xl shadow-lg p-6 md:p-8"><h2 class="text-xl md:text-2xl font-semibold text-gray-800 mb-6 border-b border-[#e8ddd0] pb-3">新規顧客登録フォーム</h2><form noValidate=""><div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4"><div><label class="block text-xs font-medium text-gray-600 mb-1">姓 <span class="text-red-500">*</span></label><input type="text" class="w-full px-3 py-2 border rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-[#c9a96e] focus:border-transparent bg-white border-gray-300" placeholder="山田" name="lastName" value=""/></div><div><label class="block text-xs font-medium text-gray-600 mb-1">名 <span class="text-red-500">*</span></label><input type="text" class="w-full px-3 py-2 border rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-[#c9a96e] focus:border-transparent bg-white border-gray-300" placeholder="太郎" name="firstName" value=""/></div></div><div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4"><div><label class="block text-xs font-medium text-gray-600 mb-1">セイ <span class="text-red-500">*</span></label><input type="text" class="w-full px-3 py-2 border rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-[#c9a96e] focus:border-transparent bg-white border-gray-300" placeholder="ヤマダ" name="lastNameKana" value=""/></div><div><label class="block text-xs font-medium text-gray-600 mb-1">メイ <span class="text-red-500">*</span></label><input type="text" class="w-full px-3 py-2 border rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-[#c9a96e] focus:border-transparent bg-white border-gray-300" placeholder="タロウ" name="firstNameKana" value=""/></div></div><div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4"><div><label class="block text-xs font-medium text-gray-600 mb-1">電話番号 <span class="text-red-500">*</span></label><input type="tel" class="w-full px-3 py-2 border rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-[#c9a96e] focus:border-transparent bg-white border-gray-300" placeholder="090-1234-5678" name="phone" value=""/></div><div><label class="block text-xs font-medium text-gray-600 mb-1">メールアドレス <span class="text-red-500">*</span></label><input type="email" class="w-full px-3 py-2 border rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-[#c9a96e] focus:border-transparent bg-white border-gray-300" placeholder="example@mail.com" name="email" value=""/></div></div><div class="mb-4"><label class="block text-xs font-medium text-gray-600 mb-1">生年月日 <span class="text-red-500">*</span></label><div class="grid grid-cols-3 gap-2"><select name="birthYear" class="w-full px-2 py-2 border rounded-md text-sm bg-white focus:outline-none focus:ring-2 focus:ring-[#c9a96e] border-gray-300"><option value="" selected="">年</option><option value="2025">2025</option><option value="2024">2024</option><option value="2023">2023</option><option value="2022">2022</option><option value="2021">2021</option><option value="2020">2020</option><option value="2019">2019</option><option value="2018">2018</option><option value="2017">2017</option><option value="2016">2016</option><option value="2015">2015</option><option value="2014">2014</option><option value="2013">2013</option><option value="2012">2012</option><option value="2011">2011</option><option value="2010">2010</option><option value="2009">2009</option><option value="2008">2008</option><option value="2007">2007</option><option value="2006">2006</option><option value="2005">2005</option><option value="2004">2004</option><option value="2003">2003</option><option value="2002">2002</option><option value="2001">2001</option><option value="2000">2000</option><option value="1999">1999</option><option value="1998">1998</option><option value="1997">1997</option><option value="1996">1996</option><option value="1995">1995</option><option value="1994">1994</option><option value="1993">1993</option><option value="1992">1992</option><option value="1991">1991</option><option value="1990">1990</option><option value="1989">1989</option><option value="1988">1988</option><option value="1987">1987</option><option value="1986">1986</option><option value="1985">1985</option><option value="1984">1984</option><option value="1983">1983</option><option value="1982">1982</option><option value="1981">1981</option><option value="1980">1980</option><option value="1979">1979</option><option value="1978">1978</option><option value="1977">1977</option><option value="1976">1976</option><option value="1975">1975</option><option value="1974">1974</option><option value="1973">1973</option><option value="1972">1972</option><option value="1971">1971</option><option value="1970">1970</option><option value="1969">1969</option><option value="1968">1968</option><option value="1967">1967</option><option value="1966">1966</option><option value="1965">1965</option><option value="1964">1964</option><option value="1963">1963</option><option value="1962">1962</option><option value="1961">1961</option><option value="1960">1960</option><option value="1959">1959</option><option value="1958">1958</option><option value="1957">1957</option><option value="1956">1956</option><option value="1955">1955</option><option value="1954">1954</option><option value="1953">1953</option><option value="1952">1952</option><option value="1951">1951</option><option value="1950">1950</option><option value="1949">1949</option><option value="1948">1948</option><option value="1947">1947</option><option value="1946">1946</option></select><select name="birthMonth" class="w-full px-2 py-2 border rounded-md text-sm bg-white focus:outline-none focus:ring-2 focus:ring-[#c9a96e] border-gray-300"><option value="" selected="">月</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option></select><select name="birthDay" class="w-full px-2 py-2 border rounded-md text-sm bg-white focus:outline-none focus:ring-2 focus:ring-[#c9a96e] border-gray-300"><option value="" selected="">日</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31</option></select></div></div><div class="mb-4"><label class="block text-xs font-medium text-gray-600 mb-1">性別</label><div class="flex gap-4"><label class="flex items-center gap-1 text-sm text-gray-700"><input type="radio" class="accent-[#c9a96e]" name="gender" value="男性"/>男性</label><label class="flex items-center gap-1 text-sm text-gray-700"><input type="radio" class="accent-[#c9a96e]" name="gender" value="女性"/>女性</label><label class="flex items-center gap-1 text-sm text-gray-700"><input type="radio" class="accent-[#c9a96e]" name="gender" value="その他"/>その他</label></div></div><div class="mb-6"><label class="block text-xs font-medium text-gray-600 mb-1">メモ</label><textarea name="memo" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-[#c9a96e] resize-none bg-white" placeholder="特記事項など"></textarea></div><button type="submit" class="w-full py-3 bg-[#c9a96e] hover:bg-[#b8944f] text-white font-medium rounded-lg transition-colors duration-200 text-sm md:text-base">登録する</button></form></div></div><div class="w-full max-w-4xl mx-auto p-4 md:p-6 lg:p-8"><div class="bg-white rounded-2xl shadow-lg border border-gray-100 overflow-hidden"><div class="bg-gradient-to-r from-[#8B5E3C] to-[#A67B5B] px-5 py-4 md:px-7 md:py-5"><div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3"><div><h2 class="text-white text-xl md:text-2xl font-bold tracking-wide">施術メニュー管理パネル</h2><p class="text-[#F5E6D3] text-sm mt-0.5 opacity-80">全4メニュー</p></div><button class="bg-white text-[#8B5E3C] px-4 py-2 rounded-lg font-semibold text-sm hover:bg-[#F5E6D3] transition-colors shadow-sm flex items-center gap-1.5 self-start sm:self-auto"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path></svg>新規メニュー追加</button></div></div><div class="divide-y divide-[#F0E6DD]"><div class="px-5 py-4 md:px-7 md:py-5 hover:bg-[#FDF8F4] transition-colors"><div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3"><div class="flex-1 min-w-0"><div class="flex items-center gap-2 flex-wrap"><h3 class="text-base md:text-lg font-semibold text-[#3D2B1F] truncate">カット</h3><span class="px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-700">公開中</span><span class="px-2 py-0.5 rounded-full bg-[#F0E6DD] text-[#6B4F3A] text-xs font-medium">カット</span></div><div class="flex items-center gap-4 mt-1.5 text-sm text-[#6B4F3A]"><span class="font-medium">¥5,500</span><span class="flex items-center gap-1"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>60分</span></div></div><div class="flex items-center gap-2 shrink-0"><button class="px-3 py-1.5 rounded-lg text-xs font-medium transition-colors bg-amber-50 text-amber-600 border border-amber-200 hover:bg-amber-100">非公開にする</button><button class="px-3 py-1.5 rounded-lg text-xs font-medium text-red-500 border border-red-200 bg-red-50 hover:bg-red-100 transition-colors">削除</button></div></div></div><div class="px-5 py-4 md:px-7 md:py-5 hover:bg-[#FDF8F4] transition-colors"><div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3"><div class="flex-1 min-w-0"><div class="flex items-center gap-2 flex-wrap"><h3 class="text-base md:text-lg font-semibold text-[#3D2B1F] truncate">カラー</h3><span class="px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-700">公開中</span><span class="px-2 py-0.5 rounded-full bg-[#F0E6DD] text-[#6B4F3A] text-xs font-medium">カラー</span></div><div class="flex items-center gap-4 mt-1.5 text-sm text-[#6B4F3A]"><span class="font-medium">¥8,800</span><span class="flex items-center gap-1"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>90分</span></div></div><div class="flex items-center gap-2 shrink-0"><button class="px-3 py-1.5 rounded-lg text-xs font-medium transition-colors bg-amber-50 text-amber-600 border border-amber-200 hover:bg-amber-100">非公開にする</button><button class="px-3 py-1.5 rounded-lg text-xs font-medium text-red-500 border border-red-200 bg-red-50 hover:bg-red-100 transition-colors">削除</button></div></div></div><div class="px-5 py-4 md:px-7 md:py-5 hover:bg-[#FDF8F4] transition-colors"><div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3"><div class="flex-1 min-w-0"><div class="flex items-center gap-2 flex-wrap"><h3 class="text-base md:text-lg font-semibold text-[#3D2B1F] truncate">パーマ</h3><span class="px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-700">公開中</span><span class="px-2 py-0.5 rounded-full bg-[#F0E6DD] text-[#6B4F3A] text-xs font-medium">パーマ</span></div><div class="flex items-center gap-4 mt-1.5 text-sm text-[#6B4F3A]"><span class="font-medium">¥9,900</span><span class="flex items-center gap-1"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>120分</span></div></div><div class="flex items-center gap-2 shrink-0"><button class="px-3 py-1.5 rounded-lg text-xs font-medium transition-colors bg-amber-50 text-amber-600 border border-amber-200 hover:bg-amber-100">非公開にする</button><button class="px-3 py-1.5 rounded-lg text-xs font-medium text-red-500 border border-red-200 bg-red-50 hover:bg-red-100 transition-colors">削除</button></div></div></div><div class="px-5 py-4 md:px-7 md:py-5 hover:bg-[#FDF8F4] transition-colors"><div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3"><div class="flex-1 min-w-0"><div class="flex items-center gap-2 flex-wrap"><h3 class="text-base md:text-lg font-semibold text-[#3D2B1F] truncate">トリートメント</h3><span class="px-2 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-500">非公開</span><span class="px-2 py-0.5 rounded-full bg-[#F0E6DD] text-[#6B4F3A] text-xs font-medium">トリートメント</span></div><div class="flex items-center gap-4 mt-1.5 text-sm text-[#6B4F3A]"><span class="font-medium">¥4,400</span><span class="flex items-center gap-1"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>30分</span></div></div><div class="flex items-center gap-2 shrink-0"><button class="px-3 py-1.5 rounded-lg text-xs font-medium transition-colors bg-green-50 text-green-600 border border-green-200 hover:bg-green-100">公開する</button><button class="px-3 py-1.5 rounded-lg text-xs font-medium text-red-500 border border-red-200 bg-red-50 hover:bg-red-100 transition-colors">削除</button></div></div></div></div><div class="bg-[#FDF8F4] px-5 py-3 md:px-7 border-t border-[#E8D5C4]"><div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 text-xs text-[#6B4F3A]"><span>公開中: 3 / 全4メニュー</span><span class="opacity-60">最終更新: 2026-06-03</span></div></div></div></div><section class="bg-white p-6 md:p-10"><div class="mx-auto max-w-3xl"><div class="flex items-center justify-between"><h2 class="text-2xl font-bold text-slate-900">週間シフト</h2><span class="rounded-full bg-slate-100 px-3 py-1 text-sm text-slate-600">6/2 - 6/8</span></div><div class="mt-5 overflow-x-auto rounded-2xl border border-slate-100 shadow-sm"><table class="min-w-full text-sm"><thead class="bg-slate-50"><tr><th class="px-4 py-3 text-left font-semibold text-slate-600">スタッフ</th><th class="px-3 py-3 text-center font-semibold text-slate-600 whitespace-nowrap">月</th><th class="px-3 py-3 text-center font-semibold text-slate-600 whitespace-nowrap">火</th><th class="px-3 py-3 text-center font-semibold text-slate-600 whitespace-nowrap">水</th><th class="px-3 py-3 text-center font-semibold text-slate-600 whitespace-nowrap">木</th><th class="px-3 py-3 text-center font-semibold text-slate-600 whitespace-nowrap">金</th><th class="px-3 py-3 text-center font-semibold text-slate-600 whitespace-nowrap">土</th><th class="px-3 py-3 text-center font-semibold text-slate-600 whitespace-nowrap">日</th></tr></thead><tbody class="divide-y divide-slate-100"><tr><td class="px-4 py-3 font-medium text-slate-800 whitespace-nowrap">田中</td><td class="px-3 py-3 text-center"><span class="inline-block rounded px-2 py-0.5 text-xs font-medium bg-indigo-50 text-indigo-700">9-17</span></td><td class="px-3 py-3 text-center"><span class="inline-block rounded px-2 py-0.5 text-xs font-medium bg-indigo-50 text-indigo-700">9-17</span></td><td class="px-3 py-3 text-center"><span class="inline-block rounded px-2 py-0.5 text-xs font-medium bg-slate-100 text-slate-400">休</span></td><td class="px-3 py-3 text-center"><span class="inline-block rounded px-2 py-0.5 text-xs font-medium bg-indigo-50 text-indigo-700">9-17</span></td><td class="px-3 py-3 text-center"><span class="inline-block rounded px-2 py-0.5 text-xs font-medium bg-indigo-50 text-indigo-700">9-17</span></td><td class="px-3 py-3 text-center"><span class="inline-block rounded px-2 py-0.5 text-xs font-medium bg-indigo-50 text-indigo-700">13-21</span></td><td class="px-3 py-3 text-center"><span class="inline-block rounded px-2 py-0.5 text-xs font-medium bg-slate-100 text-slate-400">休</span></td></tr><tr><td class="px-4 py-3 font-medium text-slate-800 whitespace-nowrap">佐藤</td><td class="px-3 py-3 text-center"><span class="inline-block rounded px-2 py-0.5 text-xs font-medium bg-indigo-50 text-indigo-700">13-21</span></td><td class="px-3 py-3 text-center"><span class="inline-block rounded px-2 py-0.5 text-xs font-medium bg-slate-100 text-slate-400">休</span></td><td class="px-3 py-3 text-center"><span class="inline-block rounded px-2 py-0.5 text-xs font-medium bg-indigo-50 text-indigo-700">9-17</span></td><td class="px-3 py-3 text-center"><span class="inline-block rounded px-2 py-0.5 text-xs font-medium bg-indigo-50 text-indigo-700">9-17</span></td><td class="px-3 py-3 text-center"><span class="inline-block rounded px-2 py-0.5 text-xs font-medium bg-indigo-50 text-indigo-700">13-21</span></td><td class="px-3 py-3 text-center"><span class="inline-block rounded px-2 py-0.5 text-xs font-medium bg-indigo-50 text-indigo-700">9-17</span></td><td class="px-3 py-3 text-center"><span class="inline-block rounded px-2 py-0.5 text-xs font-medium bg-indigo-50 text-indigo-700">9-15</span></td></tr><tr><td class="px-4 py-3 font-medium text-slate-800 whitespace-nowrap">鈴木</td><td class="px-3 py-3 text-center"><span class="inline-block rounded px-2 py-0.5 text-xs font-medium bg-slate-100 text-slate-400">休</span></td><td class="px-3 py-3 text-center"><span class="inline-block rounded px-2 py-0.5 text-xs font-medium bg-indigo-50 text-indigo-700">13-21</span></td><td class="px-3 py-3 text-center"><span class="inline-block rounded px-2 py-0.5 text-xs font-medium bg-indigo-50 text-indigo-700">13-21</span></td><td class="px-3 py-3 text-center"><span class="inline-block rounded px-2 py-0.5 text-xs font-medium bg-slate-100 text-slate-400">休</span></td><td class="px-3 py-3 text-center"><span class="inline-block rounded px-2 py-0.5 text-xs font-medium bg-indigo-50 text-indigo-700">9-17</span></td><td class="px-3 py-3 text-center"><span class="inline-block rounded px-2 py-0.5 text-xs font-medium bg-indigo-50 text-indigo-700">9-15</span></td><td class="px-3 py-3 text-center"><span class="inline-block rounded px-2 py-0.5 text-xs font-medium bg-indigo-50 text-indigo-700">13-21</span></td></tr></tbody></table></div><p class="mt-3 text-xs text-slate-400">「休」=休み / それ以外は勤務時間帯</p></div></section><div role="alert" class="flex items-center justify-between gap-3 px-4 py-3 md:px-6 md:py-4 bg-[#fef3e2] border-l-4 border-[#d4a373] shadow-sm rounded-r-md"><div class="flex items-center gap-2 md:gap-3"><span class="text-lg md:text-xl" aria-hidden="true">💇</span><div><h2 class="text-sm md:text-base text-[#5c3a21] font-bold leading-tight">本日、新規予約が3件入っています。確認をお願いします。</h2></div></div><button class="shrink-0 ml-2 p-1 rounded-full text-[#8b5e3c] hover:text-[#5c3a21] hover:bg-[#e8d5c4] transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-[#d4a373]" aria-label="美容室の顧客管理CRMダッシュボード"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 md:h-6 md:w-6" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg></button></div><section class="bg-white p-6 md:p-8"><div class="mx-auto max-w-5xl"><form class="flex flex-col gap-4 rounded-2xl border border-slate-100 bg-slate-50 p-4 md:flex-row md:items-center md:justify-between"><div class="flex flex-wrap gap-2"><button type="button" class="rounded-full px-4 py-1.5 text-sm font-medium transition bg-slate-900 text-white">すべて</button><button type="button" class="rounded-full px-4 py-1.5 text-sm font-medium transition bg-white text-slate-600 border border-slate-200 hover:bg-slate-100">公開中</button><button type="button" class="rounded-full px-4 py-1.5 text-sm font-medium transition bg-white text-slate-600 border border-slate-200 hover:bg-slate-100">下書き</button><button type="button" class="rounded-full px-4 py-1.5 text-sm font-medium transition bg-white text-slate-600 border border-slate-200 hover:bg-slate-100">アーカイブ</button></div><div class="flex items-center gap-3"><input aria-label="美容室の顧客管理CRMダッシュボード" placeholder="検索…" class="w-full rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm outline-none focus:border-indigo-400 md:w-48"/><select aria-label="並び替え" class="rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm text-slate-700 outline-none"><option>新着順</option><option>人気順</option><option>名前順</option></select></div></form><p class="mt-3 px-1 text-sm text-slate-400">248 件中 1-20 件を表示</p></div></section></div>