レストラン（テンプレートから）

atomic.studio/s/3700

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

<div class="min-h-screen bg-zinc-950 text-white"><section class="relative bg-stone-900 text-white py-24 md:py-32 overflow-hidden"><div class="absolute inset-0 bg-gradient-to-br from-stone-800/80 to-indigo-900/40"></div><div class="relative mx-auto max-w-6xl px-6 grid md:grid-cols-2 gap-12 items-center"><div><div class="flex flex-wrap gap-2 mb-6"><span class="rounded-full bg-white/10 border border-white/20 text-white text-xs px-3 py-1">Airbnb掲載中</span><span class="rounded-full bg-white/10 border border-white/20 text-white text-xs px-3 py-1">★4.9高評価</span><span class="rounded-full bg-white/10 border border-white/20 text-white text-xs px-3 py-1">Wi-Fi完備</span></div><h1 class="text-4xl md:text-6xl font-bold leading-tight">至極のフレンチ、一皿の芸術</h1><p class="mt-6 text-lg text-stone-300 leading-relaxed">シェフが紡ぐ伝統と革新。特別な日のための本格フレンチ</p><div class="mt-10 flex flex-wrap gap-4"><a class="rounded-xl bg-indigo-500 text-stone-900 px-7 py-3.5 font-bold hover:bg-indigo-400 transition shadow-lg">空室・予約を確認</a><a class="rounded-xl border border-white/30 px-7 py-3.5 font-semibold hover:bg-white/10 transition">施設を見る</a></div></div><div class="grid grid-cols-2 gap-4"><div class="rounded-2xl bg-white/10 border border-white/10 p-5 text-center"><div class="text-3xl">🛏️</div><p class="mt-2 text-sm font-medium">ドミトリー</p></div><div class="rounded-2xl bg-white/10 border border-white/10 p-5 text-center"><div class="text-3xl">🏠</div><p class="mt-2 text-sm font-medium">個室</p></div><div class="rounded-2xl bg-white/10 border border-white/10 p-5 text-center"><div class="text-3xl">🍳</div><p class="mt-2 text-sm font-medium">共有キッチン</p></div><div class="rounded-2xl bg-white/10 border border-white/10 p-5 text-center"><div class="text-3xl">🌿</div><p class="mt-2 text-sm font-medium">庭・縁側</p></div></div></div></section><nav aria-label="パンくず" class="bg-white px-4 md:px-6 py-3 border-b border-slate-100"><ol class="flex flex-wrap items-center gap-2 text-sm"><li class="flex items-center gap-2"><span class="text-slate-500 hover:text-indigo-600 cursor-pointer">ホーム</span></li><li class="flex items-center gap-2"><span class="text-slate-300">/</span><span class="text-slate-500 hover:text-indigo-600 cursor-pointer">顧客管理</span></li><li class="flex items-center gap-2"><span class="text-slate-300">/</span><span class="font-semibold text-slate-900">株式会社サンプル</span></li></ol></nav><section class="bg-white 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 gap-6 md:grid-cols-2 lg:grid-cols-3"><div class="group flex gap-4 rounded-2xl border border-slate-100 p-5 hover:border-indigo-200 hover:bg-indigo-50/40 transition"><div class="h-20 w-20 shrink-0 rounded-xl bg-gradient-to-br from-indigo-100 to-indigo-100"></div><div class="flex-1"><div class="flex items-baseline justify-between gap-2"><h3 class="font-semibold text-slate-900">本マグロ 中トロ</h3><span class="font-bold text-indigo-600">¥2,800</span></div><p class="mt-1 text-sm text-slate-500">とろける旨み</p></div></div><div class="group flex gap-4 rounded-2xl border border-slate-100 p-5 hover:border-indigo-200 hover:bg-indigo-50/40 transition"><div class="h-20 w-20 shrink-0 rounded-xl bg-gradient-to-br from-indigo-100 to-indigo-100"></div><div class="flex-1"><div class="flex items-baseline justify-between gap-2"><h3 class="font-semibold text-slate-900">天然真鯛 一尾</h3><span class="font-bold text-indigo-600">¥1,980</span></div><p class="mt-1 text-sm text-slate-500">刺身・煮付けに</p></div></div><div class="group flex gap-4 rounded-2xl border border-slate-100 p-5 hover:border-indigo-200 hover:bg-indigo-50/40 transition"><div class="h-20 w-20 shrink-0 rounded-xl bg-gradient-to-br from-indigo-100 to-indigo-100"></div><div class="flex-1"><div class="flex items-baseline justify-between gap-2"><h3 class="font-semibold text-slate-900">活〆ブリ 半身</h3><span class="font-bold text-indigo-600">¥3,200</span></div><p class="mt-1 text-sm text-slate-500">脂のり抜群</p></div></div><div class="group flex gap-4 rounded-2xl border border-slate-100 p-5 hover:border-indigo-200 hover:bg-indigo-50/40 transition"><div class="h-20 w-20 shrink-0 rounded-xl bg-gradient-to-br from-indigo-100 to-indigo-100"></div><div class="flex-1"><div class="flex items-baseline justify-between gap-2"><h3 class="font-semibold text-slate-900">車海老 12尾</h3><span class="font-bold text-indigo-600">¥2,400</span></div><p class="mt-1 text-sm text-slate-500">踊り食いも</p></div></div><div class="group flex gap-4 rounded-2xl border border-slate-100 p-5 hover:border-indigo-200 hover:bg-indigo-50/40 transition"><div class="h-20 w-20 shrink-0 rounded-xl bg-gradient-to-br from-indigo-100 to-indigo-100"></div><div class="flex-1"><div class="flex items-baseline justify-between gap-2"><h3 class="font-semibold text-slate-900">生牡蠣 10個</h3><span class="font-bold text-indigo-600">¥1,600</span></div><p class="mt-1 text-sm text-slate-500">産地直送</p></div></div><div class="group flex gap-4 rounded-2xl border border-slate-100 p-5 hover:border-indigo-200 hover:bg-indigo-50/40 transition"><div class="h-20 w-20 shrink-0 rounded-xl bg-gradient-to-br from-indigo-100 to-indigo-100"></div><div class="flex-1"><div class="flex items-baseline justify-between gap-2"><h3 class="font-semibold text-slate-900">旬の鮮魚セット</h3><span class="font-bold text-indigo-600">¥4,500</span></div><p class="mt-1 text-sm text-slate-500">おまかせ詰合せ</p></div></div></div></div></section><section class="bg-white py-16"><div class="max-w-5xl mx-auto px-4"><h2 class="text-3xl font-bold text-gray-800 mb-10 text-center tracking-wide">おすすめメニュー</h2><div class="mb-12 last:mb-0"><h3 class="text-xl font-semibold text-gray-700 mb-4 border-b-2 border-gray-200 pb-2">前菜</h3><div class="grid md:grid-cols-2 gap-4"><div class="flex flex-col"><div class="flex justify-between items-start"><div class="flex-1 pr-2"><p class="text-base font-medium text-gray-800">生ハムとルッコラのサラダ</p><p class="text-sm text-gray-500 mt-0.5">イタリア産生ハムとフレッシュルッコラのハーモニー</p></div><span class="text-base font-semibold text-gray-800 whitespace-nowrap ml-auto">¥1,200</span></div><hr class="mt-3 border-gray-200"/></div><div class="flex flex-col"><div class="flex justify-between items-start"><div class="flex-1 pr-2"><p class="text-base font-medium text-gray-800">海老のアヒージョ</p><p class="text-sm text-gray-500 mt-0.5">ガーリックオイルでじっくり煮込んだプリプリ海老</p></div><span class="text-base font-semibold text-gray-800 whitespace-nowrap ml-auto">¥1,500</span></div><hr class="mt-3 border-gray-200"/></div><div class="flex flex-col"><div class="flex justify-between items-start"><div class="flex-1 pr-2"><p class="text-base font-medium text-gray-800">鴨の燻製と無花果のマリネ</p><p class="text-sm text-gray-500 mt-0.5">スモーキーな鴨と甘い無花果の相性抜群</p></div><span class="text-base font-semibold text-gray-800 whitespace-nowrap ml-auto">¥1,800</span></div><hr class="mt-3 border-gray-200"/></div><div class="flex flex-col"><div class="flex justify-between items-start"><div class="flex-1 pr-2"><p class="text-base font-medium text-gray-800">彩り野菜のテリーヌ</p><p class="text-sm text-gray-500 mt-0.5">季節野菜を重ねた美しい一皿</p></div><span class="text-base font-semibold text-gray-800 whitespace-nowrap ml-auto">¥1,300</span></div><hr class="mt-3 border-gray-200"/></div></div></div><div class="mb-12 last:mb-0"><h3 class="text-xl font-semibold text-gray-700 mb-4 border-b-2 border-gray-200 pb-2">パスタ</h3><div class="grid md:grid-cols-2 gap-4"><div class="flex flex-col"><div class="flex justify-between items-start"><div class="flex-1 pr-2"><p class="text-base font-medium text-gray-800">ボロネーゼ タリアテッレ</p><p class="text-sm text-gray-500 mt-0.5">牛すじと赤ワインを煮込んだ濃厚ミートソース</p></div><span class="text-base font-semibold text-gray-800 whitespace-nowrap ml-auto">¥1,800</span></div><hr class="mt-3 border-gray-200"/></div><div class="flex flex-col"><div class="flex justify-between items-start"><div class="flex-1 pr-2"><p class="text-base font-medium text-gray-800">ズワイガニのトマトクリーム</p><p class="text-sm text-gray-500 mt-0.5">蟹の旨味が凝縮された滑らかなクリームソース</p></div><span class="text-base font-semibold text-gray-800 whitespace-nowrap ml-auto">¥2,200</span></div><hr class="mt-3 border-gray-200"/></div><div class="flex flex-col"><div class="flex justify-between items-start"><div class="flex-1 pr-2"><p class="text-base font-medium text-gray-800">ペペロンチーノ アーリオ・オーリオ</p><p class="text-sm text-gray-500 mt-0.5">唐辛子とニンニクが効いたシンプルな定番</p></div><span class="text-base font-semibold text-gray-800 whitespace-nowrap ml-auto">¥1,400</span></div><hr class="mt-3 border-gray-200"/></div><div class="flex flex-col"><div class="flex justify-between items-start"><div class="flex-1 pr-2"><p class="text-base font-medium text-gray-800">和風きのこバター醤油</p><p class="text-sm text-gray-500 mt-0.5">舞茸・しめじ・エリンギをバター醤油で炒めた和風テイスト</p></div><span class="text-base font-semibold text-gray-800 whitespace-nowrap ml-auto">¥1,600</span></div><hr class="mt-3 border-gray-200"/></div></div></div><div class="mb-12 last:mb-0"><h3 class="text-xl font-semibold text-gray-700 mb-4 border-b-2 border-gray-200 pb-2">メイン</h3><div class="grid md:grid-cols-2 gap-4"><div class="flex flex-col"><div class="flex justify-between items-start"><div class="flex-1 pr-2"><p class="text-base font-medium text-gray-800">国産牛フィレ肉のグリル</p><p class="text-sm text-gray-500 mt-0.5">柔らかなフィレ肉を赤ワインソースで</p></div><span class="text-base font-semibold text-gray-800 whitespace-nowrap ml-auto">¥3,800</span></div><hr class="mt-3 border-gray-200"/></div><div class="flex flex-col"><div class="flex justify-between items-start"><div class="flex-1 pr-2"><p class="text-base font-medium text-gray-800">真鯛のポワレ ブールブラン</p><p class="text-sm text-gray-500 mt-0.5">皮目パリッと、白ワインとバターのソースで</p></div><span class="text-base font-semibold text-gray-800 whitespace-nowrap ml-auto">¥2,800</span></div><hr class="mt-3 border-gray-200"/></div><div class="flex flex-col"><div class="flex justify-between items-start"><div class="flex-1 pr-2"><p class="text-base font-medium text-gray-800">仔羊のロースト ハーブ風味</p><p class="text-sm text-gray-500 mt-0.5">ローズマリーとタイムで香り高く焼き上げました</p></div><span class="text-base font-semibold text-gray-800 whitespace-nowrap ml-auto">¥3,200</span></div><hr class="mt-3 border-gray-200"/></div><div class="flex flex-col"><div class="flex justify-between items-start"><div class="flex-1 pr-2"><p class="text-base font-medium text-gray-800">野菜と豆腐のハンバーグステーキ</p><p class="text-sm text-gray-500 mt-0.5">大豆ミートと野菜たっぷりのヘルシーな一品</p></div><span class="text-base font-semibold text-gray-800 whitespace-nowrap ml-auto">¥1,900</span></div><hr class="mt-3 border-gray-200"/></div></div></div><div class="mb-12 last:mb-0"><h3 class="text-xl font-semibold text-gray-700 mb-4 border-b-2 border-gray-200 pb-2">デザート</h3><div class="grid md:grid-cols-2 gap-4"><div class="flex flex-col"><div class="flex justify-between items-start"><div class="flex-1 pr-2"><p class="text-base font-medium text-gray-800">自家製ティラミス</p><p class="text-sm text-gray-500 mt-0.5">マスカルポーネとエスプレッソの濃厚な層</p></div><span class="text-base font-semibold text-gray-800 whitespace-nowrap ml-auto">¥1,000</span></div><hr class="mt-3 border-gray-200"/></div><div class="flex flex-col"><div class="flex justify-between items-start"><div class="flex-1 pr-2"><p class="text-base font-medium text-gray-800">季節のフルーツタルト</p><p class="text-sm text-gray-500 mt-0.5">旬の苺・ブルーベリー・キウイを贅沢にトッピング</p></div><span class="text-base font-semibold text-gray-800 whitespace-nowrap ml-auto">¥1,200</span></div><hr class="mt-3 border-gray-200"/></div><div class="flex flex-col"><div class="flex justify-between items-start"><div class="flex-1 pr-2"><p class="text-base font-medium text-gray-800">抹茶とホワイトチョコのパンナコッタ</p><p class="text-sm text-gray-500 mt-0.5">ほろ苦い抹茶と甘いホワイトチョコの絶妙バランス</p></div><span class="text-base font-semibold text-gray-800 whitespace-nowrap ml-auto">¥900</span></div><hr class="mt-3 border-gray-200"/></div><div class="flex flex-col"><div class="flex justify-between items-start"><div class="flex-1 pr-2"><p class="text-base font-medium text-gray-800">レモンシャーベット ミント添え</p><p class="text-sm text-gray-500 mt-0.5">爽やかなレモンの酸味が口の中をリセット</p></div><span class="text-base font-semibold text-gray-800 whitespace-nowrap ml-auto">¥700</span></div><hr class="mt-3 border-gray-200"/></div></div></div></div></section><section class="bg-indigo-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 text-center">レッスンメニュー</h2><div class="mt-12 grid md:grid-cols-2 gap-6"><div class="rounded-2xl bg-white border border-indigo-100 p-8 hover:shadow-md transition"><div class="flex items-center gap-4"><span class="text-4xl">🍳</span><div><h3 class="text-lg font-bold text-slate-900">基礎コース</h3><p class="text-sm text-indigo-600 font-semibold">¥3,300/回</p></div></div><p class="mt-3 text-xs text-slate-400">毎週火・木 10:00〜12:30</p><p class="mt-3 text-sm text-slate-600 leading-relaxed">包丁の使い方から基本の和・洋・中を体系的に学ぶ入門コース。</p><a class="mt-5 inline-block text-sm font-semibold text-indigo-600 hover:text-indigo-500 transition">詳細・予約 →</a></div><div class="rounded-2xl bg-white border border-indigo-100 p-8 hover:shadow-md transition"><div class="flex items-center gap-4"><span class="text-4xl">🍱</span><div><h3 class="text-lg font-bold text-slate-900">和食マスター</h3><p class="text-sm text-indigo-600 font-semibold">¥4,400/回</p></div></div><p class="mt-3 text-xs text-slate-400">毎週水 18:30〜21:00</p><p class="mt-3 text-sm text-slate-600 leading-relaxed">出汁の取り方・季節の和食・おせち料理まで。プロの技を伝授。</p><a class="mt-5 inline-block text-sm font-semibold text-indigo-600 hover:text-indigo-500 transition">詳細・予約 →</a></div><div class="rounded-2xl bg-white border border-indigo-100 p-8 hover:shadow-md transition"><div class="flex items-center gap-4"><span class="text-4xl">🥖</span><div><h3 class="text-lg font-bold text-slate-900">パン・スイーツ</h3><p class="text-sm text-indigo-600 font-semibold">¥4,950/回</p></div></div><p class="mt-3 text-xs text-slate-400">毎週土 10:00〜13:00</p><p class="mt-3 text-sm text-slate-600 leading-relaxed">天然酵母パン・フランス菓子・チョコレート細工など。ギフトにも最適。</p><a class="mt-5 inline-block text-sm font-semibold text-indigo-600 hover:text-indigo-500 transition">詳細・予約 →</a></div><div class="rounded-2xl bg-white border border-indigo-100 p-8 hover:shadow-md transition"><div class="flex items-center gap-4"><span class="text-4xl">🌟</span><div><h3 class="text-lg font-bold text-slate-900">ワンデーレッスン</h3><p class="text-sm text-indigo-600 font-semibold">¥5,500/回</p></div></div><p class="mt-3 text-xs text-slate-400">不定期・要予約</p><p class="mt-3 text-sm text-slate-600 leading-relaxed">旬のテーマで開催する単発レッスン。友人同士での参加も歓迎。</p><a class="mt-5 inline-block text-sm font-semibold text-indigo-600 hover:text-indigo-500 transition">詳細・予約 →</a></div></div></div></section><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 text-center">ギャラリー</h2><div class="mt-12 grid grid-cols-2 md:grid-cols-3 gap-3"><figure class="group overflow-hidden rounded-xl"><img src="https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?w=600" alt="店内の様子" class="w-full aspect-[4/3] object-cover group-hover:scale-105 transition duration-500" loading="lazy"/><figcaption class="mt-1.5 text-center text-xs text-slate-400">くつろぎの空間</figcaption></figure><figure class="group overflow-hidden rounded-xl"><img src="https://images.unsplash.com/photo-1414235077428-338989a2e8c0?w=600" alt="料理" class="w-full aspect-[4/3] object-cover group-hover:scale-105 transition duration-500" loading="lazy"/><figcaption class="mt-1.5 text-center text-xs text-slate-400">こだわりの一品</figcaption></figure><figure class="group overflow-hidden rounded-xl"><img src="https://images.unsplash.com/photo-1555396273-367ea4eb4db5?w=600" alt="カウンター" class="w-full aspect-[4/3] object-cover group-hover:scale-105 transition duration-500" loading="lazy"/><figcaption class="mt-1.5 text-center text-xs text-slate-400">職人の技</figcaption></figure><figure class="group overflow-hidden rounded-xl"><img src="https://images.unsplash.com/photo-1552566626-52f8b828add9?w=600" alt="テーブル席" class="w-full aspect-[4/3] object-cover group-hover:scale-105 transition duration-500" loading="lazy"/><figcaption class="mt-1.5 text-center text-xs text-slate-400">ゆったり席</figcaption></figure><figure class="group overflow-hidden rounded-xl"><img src="https://images.unsplash.com/photo-1424847651672-bf20a4b0982b?w=600" alt="外観" class="w-full aspect-[4/3] object-cover group-hover:scale-105 transition duration-500" loading="lazy"/><figcaption class="mt-1.5 text-center text-xs text-slate-400">店舗外観</figcaption></figure><figure class="group overflow-hidden rounded-xl"><img src="https://images.unsplash.com/photo-1504674900247-0877df9cc836?w=600" alt="おすすめ料理" class="w-full aspect-[4/3] object-cover group-hover:scale-105 transition duration-500" loading="lazy"/><figcaption class="mt-1.5 text-center text-xs text-slate-400">本日のおすすめ</figcaption></figure></div><div class="mt-10 text-center"><a href="#" class="inline-block rounded-xl border border-slate-200 bg-white px-8 py-3 text-sm font-medium text-slate-700 hover:bg-slate-100 transition shadow-sm">予約する</a></div></div></section><section class="py-16 px-4 bg-indigo-50"><div class="max-w-6xl mx-auto"><h2 class="text-3xl md:text-4xl font-bold text-center text-indigo-900 mb-12 tracking-tight">至極のフレンチ、一皿の芸術</h2><div class="grid md:grid-cols-3 gap-6"><div class="bg-white rounded-2xl border border-indigo-200 p-6 hover:border-indigo-400 hover:shadow-lg hover:-translate-y-1 transition-all duration-300 cursor-default"><div class="text-4xl mb-4">🌾</div><h3 class="text-xl font-semibold text-indigo-900 mb-2">国産小麦100%</h3><p class="text-indigo-700 leading-relaxed text-sm">厳選した国産小麦のみを使用。風味豊かで安心安全なパンをお届けします。</p></div><div class="bg-white rounded-2xl border border-indigo-200 p-6 hover:border-indigo-400 hover:shadow-lg hover:-translate-y-1 transition-all duration-300 cursor-default"><div class="text-4xl mb-4">🔥</div><h3 class="text-xl font-semibold text-indigo-900 mb-2">石窯直火焼き</h3><p class="text-indigo-700 leading-relaxed text-sm">遠赤外線効果で外はカリッと中はもっちり。職人が一枚一枚丁寧に焼き上げます。</p></div><div class="bg-white rounded-2xl border border-indigo-200 p-6 hover:border-indigo-400 hover:shadow-lg hover:-translate-y-1 transition-all duration-300 cursor-default"><div class="text-4xl mb-4">🌅</div><h3 class="text-xl font-semibold text-indigo-900 mb-2">朝練り・朝焼き</h3><p class="text-indigo-700 leading-relaxed text-sm">毎朝未明から仕込みを開始。焼きたての香りでお客様をお迎えします。</p></div><div class="bg-white rounded-2xl border border-indigo-200 p-6 hover:border-indigo-400 hover:shadow-lg hover:-translate-y-1 transition-all duration-300 cursor-default"><div class="text-4xl mb-4">🧈</div><h3 class="text-xl font-semibold text-indigo-900 mb-2">発酵バター使用</h3><p class="text-indigo-700 leading-relaxed text-sm">北海道産発酵バターを贅沢に使用。コクと香りが際立つリッチな味わい。</p></div><div class="bg-white rounded-2xl border border-indigo-200 p-6 hover:border-indigo-400 hover:shadow-lg hover:-translate-y-1 transition-all duration-300 cursor-default"><div class="text-4xl mb-4">🥖</div><h3 class="text-xl font-semibold text-indigo-900 mb-2">自家製天然酵母</h3><p class="text-indigo-700 leading-relaxed text-sm">レーズンとりんごから起こした自家製酵母。深い旨味と甘みを引き出します。</p></div><div class="bg-white rounded-2xl border border-indigo-200 p-6 hover:border-indigo-400 hover:shadow-lg hover:-translate-y-1 transition-all duration-300 cursor-default"><div class="text-4xl mb-4">♻️</div><h3 class="text-xl font-semibold text-indigo-900 mb-2">環境に優しい包装</h3><p class="text-indigo-700 leading-relaxed text-sm">バイオマス素材の袋や紙箱を採用。地球にも優しいパン屋を目指します。</p></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-[#faf7f2] py-20 px-4" aria-labelledby="contact-heading"><div class="max-w-6xl mx-auto"><div class="text-center mb-14"><h2 id="contact-heading" class="text-4xl md:text-5xl font-serif text-[#4a3728] tracking-wide mb-4">至極のフレンチ、一皿の芸術</h2><p class="text-[#7a6b5a] text-lg max-w-xl mx-auto leading-relaxed">シェフが紡ぐ伝統と革新。特別な日のための本格フレンチ</p></div><div class="grid md:grid-cols-2 gap-10 md:gap-16 items-start"><div class="bg-white rounded-2xl shadow-lg p-8 md:p-10 border border-[#e8ddd0]"><form class="space-y-6" aria-label="お問い合わせフォーム"><div><label for="contact-name" class="block text-sm font-medium text-[#4a3728] mb-1.5">お名前 <span class="text-[#c0392b]">*</span></label><input id="contact-name" type="text" required="" placeholder="例：田中 花子" class="w-full px-4 py-3.5 rounded-xl border border-[#dccfc0] bg-[#fefcf9] text-[#3d2c1e] placeholder-[#b5a694] transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-[#c8a27b] focus:border-[#c8a27b] focus:bg-white" aria-required="true"/></div><div><label for="contact-email" class="block text-sm font-medium text-[#4a3728] mb-1.5">メールアドレス <span class="text-[#c0392b]">*</span></label><input id="contact-email" type="email" required="" placeholder="例：info@example.com" class="w-full px-4 py-3.5 rounded-xl border border-[#dccfc0] bg-[#fefcf9] text-[#3d2c1e] placeholder-[#b5a694] transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-[#c8a27b] focus:border-[#c8a27b] focus:bg-white" aria-required="true"/></div><div><label for="contact-message" class="block text-sm font-medium text-[#4a3728] mb-1.5">お問い合わせ内容 <span class="text-[#c0392b]">*</span></label><textarea id="contact-message" rows="5" required="" placeholder="ご注文のパンの種類、お受け取り希望日時、イベントの詳細などをお書きください。" class="w-full px-4 py-3.5 rounded-xl border border-[#dccfc0] bg-[#fefcf9] text-[#3d2c1e] placeholder-[#b5a694] transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-[#c8a27b] focus:border-[#c8a27b] focus:bg-white resize-y" aria-required="true"></textarea></div><button type="submit" class="w-full bg-[#8b6f4c] hover:bg-[#7a5e3e] active:bg-[#6a4f32] text-white font-medium py-3.5 px-6 rounded-xl transition-all duration-200 shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-[#c8a27b] focus:ring-offset-2 tracking-wide">送信する</button></form></div><div class="bg-white/80 backdrop-blur-sm rounded-2xl p-8 md:p-10 border border-[#e8ddd0] shadow-lg"><h3 class="text-2xl font-serif text-[#4a3728] mb-6 pb-4 border-b border-[#e8ddd0]">店舗情報</h3><div class="space-y-6 text-[#5a4a3a]"><div class="flex items-start gap-4"><span class="text-[#c8a27b] text-xl mt-0.5 shrink-0" aria-hidden="true">📍</span><div><p class="font-medium text-[#4a3728] text-sm mb-0.5">住所</p><p class="leading-relaxed">〒150-0001 東京都渋谷区神宮前1-2-3</p></div></div><div class="flex items-start gap-4"><span class="text-[#c8a27b] text-xl mt-0.5 shrink-0" aria-hidden="true">📞</span><div><p class="font-medium text-[#4a3728] text-sm mb-0.5">電話番号</p><a href="tel:0312345678" class="hover:text-[#8b6f4c] transition-colors focus:outline-none focus:ring-2 focus:ring-[#c8a27b] rounded">03-1234-5678</a><p class="text-sm text-[#8a7a6a] mt-0.5">営業時間内にお願いします</p></div></div><div class="flex items-start gap-4"><span class="text-[#c8a27b] text-xl mt-0.5 shrink-0" aria-hidden="true">✉️</span><div><p class="font-medium text-[#4a3728] text-sm mb-0.5">メール</p><a href="mailto:info@boulangerie-soleil.jp" class="hover:text-[#8b6f4c] transition-colors break-all focus:outline-none focus:ring-2 focus:ring-[#c8a27b] rounded">info@boulangerie-soleil.jp</a></div></div><div class="flex items-start gap-4"><span class="text-[#c8a27b] text-xl mt-0.5 shrink-0" aria-hidden="true">🕐</span><div><p class="font-medium text-[#4a3728] text-sm mb-0.5">営業時間</p><p class="leading-relaxed">火〜日 7:00〜19:00（月曜定休）</p></div></div><div class="pt-4"><a href="https://goo.gl/maps/example" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-2 text-[#8b6f4c] hover:text-[#6a4f32] font-medium transition-colors border border-[#dccfc0] rounded-xl px-5 py-3 hover:bg-[#f5efe8] focus:outline-none focus:ring-2 focus:ring-[#c8a27b]"><span aria-hidden="true">🗺️</span>Googleマップで見る</a></div></div><div class="mt-8 pt-6 border-t border-[#e8ddd0] text-center"><p class="text-sm text-[#b5a694] italic">「焼きたての香りとともに、心を込めてお迎えします」</p><div class="flex justify-center gap-2 mt-3 text-[#dccfc0]" aria-hidden="true"><span>🥖</span><span>🥐</span><span>🍞</span></div></div></div></div></div></section><footer class="bg-slate-100 border-t border-slate-200 py-12"><div class="mx-auto max-w-5xl px-6"><div class="flex flex-col md:flex-row justify-between gap-8"><div><p class="text-xl font-bold text-slate-900">美容室 Lumière</p><p class="mt-2 text-sm text-slate-500">東京都渋谷区代官山町1-2-3</p><p class="text-sm text-slate-500">TEL: 03-5678-9012</p></div><nav class="flex flex-wrap gap-x-8 gap-y-2"><a class="text-sm text-slate-600 hover:text-slate-900 transition">ホーム</a><a class="text-sm text-slate-600 hover:text-slate-900 transition">メニュー</a><a class="text-sm text-slate-600 hover:text-slate-900 transition">スタッフ</a><a class="text-sm text-slate-600 hover:text-slate-900 transition">ギャラリー</a><a class="text-sm text-slate-600 hover:text-slate-900 transition">アクセス</a><a class="text-sm text-slate-600 hover:text-slate-900 transition">プライバシーポリシー</a></nav></div><div class="mt-8 border-t border-slate-200 pt-6 text-center text-xs text-slate-400">© 2024 Lumière. All rights reserved.</div></div></footer><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 max-w-3xl mx-auto"><h3 class="text-2xl font-bold mb-6">メニュー・料金</h3><ul class="text-zinc-200"><li class="flex justify-between border-b border-zinc-700 py-3"><span>アミューズブーシュ</span><span class="text-indigo-300">季節の一口前菜（※サンプル）</span></li><li class="flex justify-between border-b border-zinc-700 py-3"><span>前菜</span><span class="text-indigo-300">フォアグラのテリーヌ いちじくのコンポート添え（※サンプル）</span></li><li class="flex justify-between border-b border-zinc-700 py-3"><span>スープ</span><span class="text-indigo-300">カリフラワーのクリームスープ トリュフオイル（※サンプル）</span></li><li class="flex justify-between border-b border-zinc-700 py-3"><span>魚料理</span><span class="text-indigo-300">北海道産真鯛のポワレ ブールブランソース（※サンプル）</span></li><li class="flex justify-between border-b border-zinc-700 py-3"><span>肉料理</span><span class="text-indigo-300">国産牛フィレ肉のロッシーニ マデラソース（※サンプル）</span></li><li class="flex justify-between border-b border-zinc-700 py-3"><span>デザート</span><span class="text-indigo-300">洋梨のタルトタタン バニラアイス（※サンプル）</span></li><li class="flex justify-between border-b border-zinc-700 py-3"><span>食後のお飲み物</span><span class="text-indigo-300">コーヒーまたは紅茶（※サンプル）</span></li><li class="flex justify-between border-b border-zinc-700 py-3"><span>ディナーコース（税込）</span><span class="text-indigo-300">12,000円（※サンプル）</span></li><li class="flex justify-between border-b border-zinc-700 py-3"><span>ランチコース（税込）</span><span class="text-indigo-300">4,500円（※サンプル）</span></li><li class="flex justify-between border-b border-zinc-700 py-3"><span>ワインペアリング（5杯）</span><span class="text-indigo-300">+5,500円（※サンプル）</span></li></ul><p class="text-xs text-zinc-500 mt-3">※価格はサンプルです。実際の料金に差し替えてください。</p></section><section class="px-6 py-14 max-w-5xl mx-auto"><h3 class="text-2xl font-bold mb-6">サービス一覧</h3><div class="grid gap-4 md:grid-cols-3"><div class="rounded-xl bg-zinc-800 p-6"><h4 class="font-semibold mb-2">ディナーコース</h4><p class="text-sm text-zinc-300">季節の食材を活かした本格フレンチのフルコース（※サンプル）</p></div><div class="rounded-xl bg-zinc-800 p-6"><h4 class="font-semibold mb-2">ランチコース</h4><p class="text-sm text-zinc-300">お手頃価格で楽しめる平日限定コース（※サンプル）</p></div><div class="rounded-xl bg-zinc-800 p-6"><h4 class="font-semibold mb-2">プライベート貸切</h4><p class="text-sm text-zinc-300">記念日や会食に、最大20名様まで対応（※サンプル）</p></div><div class="rounded-xl bg-zinc-800 p-6"><h4 class="font-semibold mb-2">ワインペアリング</h4><p class="text-sm text-zinc-300">ソムリエが選ぶフランスワインとのマリアージュ（※サンプル）</p></div></div></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">シャトー直輸入を含む50種類以上のラインナップ（※サンプル）</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-4xl mx-auto"><h3 class="text-2xl font-bold mb-6">お客様の声</h3><div class="grid gap-4 md:grid-cols-2"><figure class="rounded-xl bg-zinc-800 p-6"><blockquote class="text-zinc-200 mb-3">満足しています。※サンプル</blockquote><figcaption class="text-sm text-indigo-300">— ご利用 様</figcaption></figure><figure class="rounded-xl bg-zinc-800 p-6"><blockquote class="text-zinc-200 mb-3">また利用したいです。※サンプル</blockquote><figcaption class="text-sm text-indigo-300">— ご利用 様</figcaption></figure></div><p class="text-xs text-zinc-500 mt-3">※掲載のお客様の声はサンプルです。</p></section><section class="px-6 py-14 max-w-5xl mx-auto"><h3 class="text-2xl font-bold mb-6">スタッフ紹介</h3><div class="grid gap-4 md:grid-cols-3"><div class="rounded-xl bg-zinc-800 p-6 text-center"><div class="w-20 h-20 mx-auto mb-3 rounded-full bg-zinc-700"></div><h4 class="font-semibold">スタッフ A</h4><p class="text-sm text-zinc-400">担当 / 経験豊富 ※サンプル</p></div><div class="rounded-xl bg-zinc-800 p-6 text-center"><div class="w-20 h-20 mx-auto mb-3 rounded-full bg-zinc-700"></div><h4 class="font-semibold">スタッフ B</h4><p class="text-sm text-zinc-400">担当 / 親切丁寧 ※サンプル</p></div><div class="rounded-xl bg-zinc-800 p-6 text-center"><div class="w-20 h-20 mx-auto mb-3 rounded-full bg-zinc-700"></div><h4 class="font-semibold">スタッフ C</h4><p class="text-sm text-zinc-400">担当 / 笑顔で対応 ※サンプル</p></div></div><p class="text-xs text-zinc-500 mt-3">※スタッフ情報はサンプルです。</p></section><section class="px-6 py-14 max-w-5xl mx-auto"><h3 class="text-2xl font-bold mb-6">ギャラリー</h3><div class="grid gap-3 grid-cols-2 md:grid-cols-3"><div class="aspect-square rounded-xl bg-zinc-800 flex items-center justify-center text-zinc-500 text-xs">写真 ※サンプル</div></div><p class="text-xs text-zinc-500 mt-3">※掲載画像はサンプル枠です。</p></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><section id="contact" class="px-6 py-14 bg-zinc-900"><div class="max-w-3xl mx-auto grid gap-6 md:grid-cols-2"><div><h3 class="text-2xl font-bold mb-4">営業時間</h3><p class="text-zinc-200">10:00–18:00 ※サンプル</p><p class="text-zinc-400 text-sm mt-1">不定休 ※サンプル</p></div><div><h3 class="text-2xl font-bold mb-4">アクセス</h3><p class="text-zinc-200">アクセス情報 ※サンプル</p></div></div><p class="text-xs text-zinc-500 mt-3 text-center">※営業時間・アクセスはサンプルです。</p></section></div></div>