Atomic Studio
/
カフェ（テンプレートから）
12部品・0〜数百トークン
↩ 戻す
履歴
複製
💬 ことばで直す
▶ Run
🔗 共有
🚀 デプロイ
⏹
☰
▷ プレビュー
</> コード
🖥 PC
📱 スマホ
↻ 新タブ
atomic.studio/s/3709
📄 index.html
コードを直接編集して「適用」でプレビューに反映
適用 ▷
<link rel="preload" as="image" href="https://images.unsplash.com/photo-1501339847302-ac426a4a7cbb?w=800&auto=format&fit=crop"/><link rel="preload" as="image" href="https://images.unsplash.com/photo-1509042239860-f550ce710b93?w=400&h=300&fit=crop"/><link rel="preload" as="image" href="https://images.unsplash.com/photo-1551024601-bec78aea704b?w=400&h=300&fit=crop"/><link rel="preload" as="image" href="https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?w=400&h=300&fit=crop"/><link rel="preload" as="image" href="https://images.unsplash.com/photo-1567620905732-2d1ec7ab7445?w=400&h=300&fit=crop"/><div class="min-h-screen bg-zinc-950 text-white"><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 grid-cols-2 md:grid-cols-3 gap-5"><div class="rounded-2xl bg-white border border-indigo-100 p-5 text-center hover:shadow-md hover:-translate-y-1 transition"><div class="text-4xl">🎂</div><h3 class="mt-3 font-bold text-slate-900 text-sm">ホールケーキ(5号)</h3><p class="mt-1 font-bold text-indigo-600">¥3,800〜</p><p class="mt-2 text-xs text-slate-500 leading-relaxed">記念日・誕生日に。3日前まで予約承り。メッセージ無料。</p></div><div class="rounded-2xl bg-white border border-indigo-100 p-5 text-center hover:shadow-md hover:-translate-y-1 transition"><div class="text-4xl">🕯️</div><h3 class="mt-3 font-bold text-slate-900 text-sm">バースデーケーキ</h3><p class="mt-1 font-bold text-indigo-600">¥5,500〜</p><p class="mt-2 text-xs text-slate-500 leading-relaxed">6号サイズ。写真プリント・デコレーションご相談可。</p></div><div class="rounded-2xl bg-white border border-indigo-100 p-5 text-center hover:shadow-md hover:-translate-y-1 transition"><div class="text-4xl">🍪</div><h3 class="mt-3 font-bold text-slate-900 text-sm">マカロン(6個入)</h3><p class="mt-1 font-bold text-indigo-600">¥2,200</p><p class="mt-2 text-xs text-slate-500 leading-relaxed">季節のフレーバー全6種。ギフトボックス対応。</p></div><div class="rounded-2xl bg-white border border-indigo-100 p-5 text-center hover:shadow-md hover:-translate-y-1 transition"><div class="text-4xl">🍥</div><h3 class="mt-3 font-bold text-slate-900 text-sm">ロールケーキ</h3><p class="mt-1 font-bold text-indigo-600">¥1,650</p><p class="mt-2 text-xs text-slate-500 leading-relaxed">毎朝焼き立て。北海道産生クリーム使用。売り切れ次第終了。</p></div><div class="rounded-2xl bg-white border border-indigo-100 p-5 text-center hover:shadow-md hover:-translate-y-1 transition"><div class="text-4xl">🧁</div><h3 class="mt-3 font-bold text-slate-900 text-sm">焼き菓子セット</h3><p class="mt-1 font-bold text-indigo-600">¥2,750</p><p class="mt-2 text-xs text-slate-500 leading-relaxed">クッキー・フィナンシェ・マドレーヌの詰合せ。贈り物に最適。</p></div><div class="rounded-2xl bg-white border border-indigo-100 p-5 text-center hover:shadow-md hover:-translate-y-1 transition"><div class="text-4xl">💒</div><h3 class="mt-3 font-bold text-slate-900 text-sm">ウエディングケーキ</h3><p class="mt-1 font-bold text-indigo-600">¥33,000〜</p><p class="mt-2 text-xs text-slate-500 leading-relaxed">2段〜5段。試食相談・デザイン無料。地産フルーツ使用可。</p></div></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="py-16 bg-stone-50"><div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8"><h2 class="text-3xl md:text-4xl font-bold text-center text-stone-800 mb-12 tracking-tight">一杯の珈琲で、心ほどける時間を。</h2><div class="grid gap-8 md:grid-cols-3"><div class="bg-white rounded-2xl shadow-md p-8 relative border border-stone-100 hover:shadow-lg transition-shadow duration-300"><div class="absolute -top-4 left-6 text-indigo-200 text-6xl leading-none select-none pointer-events-none">“</div><div class="flex gap-0.5 mb-5"><svg class="w-5 h-5 text-indigo-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg><svg class="w-5 h-5 text-indigo-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg><svg class="w-5 h-5 text-indigo-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg><svg class="w-5 h-5 text-indigo-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg><svg class="w-5 h-5 text-indigo-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg></div><blockquote class="text-stone-600 leading-relaxed mb-6 text-sm md:text-base relative z-10">落ち着いた雰囲気と丁寧なドリップコーヒーに毎回癒されています。窓辺の席で本を読みながら過ごす至福の時間は、私の週末の楽しみです。</blockquote><div class="border-t border-stone-100 pt-4"><p class="font-semibold text-stone-800 text-sm">佐藤 美咲</p><p class="text-stone-400 text-xs mt-0.5">30代・会社員</p></div></div><div class="bg-white rounded-2xl shadow-md p-8 relative border border-stone-100 hover:shadow-lg transition-shadow duration-300"><div class="absolute -top-4 left-6 text-indigo-200 text-6xl leading-none select-none pointer-events-none">“</div><div class="flex gap-0.5 mb-5"><svg class="w-5 h-5 text-indigo-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg><svg class="w-5 h-5 text-indigo-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg><svg class="w-5 h-5 text-indigo-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg><svg class="w-5 h-5 text-indigo-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg><svg class="w-5 h-5 text-indigo-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg></div><blockquote class="text-stone-600 leading-relaxed mb-6 text-sm md:text-base relative z-10">季節のケーキセットが絶品です。特に秋の栗のタルトは何度もリピートしています。スタッフの方の笑顔も素敵で、つい長居してしまいます。</blockquote><div class="border-t border-stone-100 pt-4"><p class="font-semibold text-stone-800 text-sm">田中 健一</p><p class="text-stone-400 text-xs mt-0.5">40代・デザイナー</p></div></div><div class="bg-white rounded-2xl shadow-md p-8 relative border border-stone-100 hover:shadow-lg transition-shadow duration-300"><div class="absolute -top-4 left-6 text-indigo-200 text-6xl leading-none select-none pointer-events-none">“</div><div class="flex gap-0.5 mb-5"><svg class="w-5 h-5 text-indigo-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg><svg class="w-5 h-5 text-indigo-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg><svg class="w-5 h-5 text-indigo-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg><svg class="w-5 h-5 text-indigo-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg><svg class="w-5 h-5 text-gray-200" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg></div><blockquote class="text-stone-600 leading-relaxed mb-6 text-sm md:text-base relative z-10">仕事の合間に立ち寄るのに最適なカフェです。電源席も完備されていて、コーヒーのおかわりもリーズナブル。静かなBGMが集中力を高めてくれます。</blockquote><div class="border-t border-stone-100 pt-4"><p class="font-semibold text-stone-800 text-sm">山田 優子</p><p class="text-stone-400 text-xs mt-0.5">20代・Webエンジニア</p></div></div></div></div></section><section class="bg-indigo-50 py-16 px-4"><div class="max-w-6xl mx-auto"><h2 class="text-3xl md:text-4xl font-bold text-center text-gray-900 mb-12 tracking-tight">お客様の声</h2><div class="grid md:grid-cols-3 gap-6 md:gap-8"><div class="bg-white rounded-2xl shadow-lg p-6 md:p-8 relative border border-indigo-200/50 hover:shadow-xl transition-shadow duration-300"><div class="absolute -top-3 left-6 text-5xl text-indigo-300/40 leading-none select-none">“</div><div class="relative z-10"><div class="flex items-center gap-1 mb-4"><svg class="w-5 h-5 text-indigo-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg><svg class="w-5 h-5 text-indigo-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg><svg class="w-5 h-5 text-indigo-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg><svg class="w-5 h-5 text-indigo-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg><svg class="w-5 h-5 text-indigo-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg></div><p class="text-gray-700 leading-relaxed mb-6 italic">“スープの深みが違います。毎週通いたくなる味わいで、特にチャーシューの燻製香が絶品です。”</p><div class="flex items-center gap-2 border-t border-indigo-100 pt-4"><div class="w-8 h-8 rounded-full bg-indigo-200 flex items-center justify-center text-indigo-700 font-bold text-sm">山</div><span class="text-gray-800 font-semibold">山田 太郎</span></div></div></div><div class="bg-white rounded-2xl shadow-lg p-6 md:p-8 relative border border-indigo-200/50 hover:shadow-xl transition-shadow duration-300"><div class="absolute -top-3 left-6 text-5xl text-indigo-300/40 leading-none select-none">“</div><div class="relative z-10"><div class="flex items-center gap-1 mb-4"><svg class="w-5 h-5 text-indigo-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg><svg class="w-5 h-5 text-indigo-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg><svg class="w-5 h-5 text-indigo-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg><svg class="w-5 h-5 text-indigo-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg><svg class="w-5 h-5 text-indigo-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg></div><p class="text-gray-700 leading-relaxed mb-6 italic">“子供連れでも安心して入れる雰囲気と、とろける味玉が最高でした。また家族で来ます。”</p><div class="flex items-center gap-2 border-t border-indigo-100 pt-4"><div class="w-8 h-8 rounded-full bg-indigo-200 flex items-center justify-center text-indigo-700 font-bold text-sm">佐</div><span class="text-gray-800 font-semibold">佐藤 花子</span></div></div></div><div class="bg-white rounded-2xl shadow-lg p-6 md:p-8 relative border border-indigo-200/50 hover:shadow-xl transition-shadow duration-300"><div class="absolute -top-3 left-6 text-5xl text-indigo-300/40 leading-none select-none">“</div><div class="relative z-10"><div class="flex items-center gap-1 mb-4"><svg class="w-5 h-5 text-indigo-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg><svg class="w-5 h-5 text-indigo-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg><svg class="w-5 h-5 text-indigo-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg><svg class="w-5 h-5 text-indigo-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg><svg class="w-5 h-5 text-indigo-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg></div><p class="text-gray-700 leading-relaxed mb-6 italic">“並んでも食べる価値あり。麺のコシとスープのバランスが完璧で、最後の一滴まで飲み干しました。”</p><div class="flex items-center gap-2 border-t border-indigo-100 pt-4"><div class="w-8 h-8 rounded-full bg-indigo-200 flex items-center justify-center text-indigo-700 font-bold text-sm">鈴</div><span class="text-gray-800 font-semibold">鈴木 一郎</span></div></div></div></div></div></section><section class="bg-rose-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-14 grid md:grid-cols-2 gap-6"><div class="group rounded-2xl bg-white border border-rose-100 p-8 hover:shadow-lg hover:-translate-y-1 transition"><div class="flex items-start justify-between"><div class="flex items-center gap-4"><div class="text-3xl">✨</div><div><h3 class="text-lg font-bold text-slate-900">フェイシャルケア</h3><p class="text-sm text-slate-400 mt-0.5">60分</p></div></div><span class="text-xl font-bold text-rose-600">¥8,800</span></div><p class="mt-5 text-slate-600 text-sm leading-relaxed">クレンジングからパックまで、肌の状態に合わせたオーダーメイドコース。</p><a class="mt-6 inline-block text-sm font-semibold text-rose-600 hover:text-rose-500 transition">詳しく見る →</a></div><div class="group rounded-2xl bg-white border border-rose-100 p-8 hover:shadow-lg hover:-translate-y-1 transition"><div class="flex items-start justify-between"><div class="flex items-center gap-4"><div class="text-3xl">🌿</div><div><h3 class="text-lg font-bold text-slate-900">ボディトリートメント</h3><p class="text-sm text-slate-400 mt-0.5">90分</p></div></div><span class="text-xl font-bold text-rose-600">¥12,100</span></div><p class="mt-5 text-slate-600 text-sm leading-relaxed">アロマオイルを使用した全身リラクゼーション。深い癒しをご体験ください。</p><a class="mt-6 inline-block text-sm font-semibold text-rose-600 hover:text-rose-500 transition">詳しく見る →</a></div><div class="group rounded-2xl bg-white border border-rose-100 p-8 hover:shadow-lg hover:-translate-y-1 transition"><div class="flex items-start justify-between"><div class="flex items-center gap-4"><div class="text-3xl">💆</div><div><h3 class="text-lg font-bold text-slate-900">ヘッドスパ</h3><p class="text-sm text-slate-400 mt-0.5">45分</p></div></div><span class="text-xl font-bold text-rose-600">¥5,500</span></div><p class="mt-5 text-slate-600 text-sm leading-relaxed">頭皮の血行を促進。ストレスや疲れを頭から解放するスペシャルケア。</p><a class="mt-6 inline-block text-sm font-semibold text-rose-600 hover:text-rose-500 transition">詳しく見る →</a></div><div class="group rounded-2xl bg-white border border-rose-100 p-8 hover:shadow-lg hover:-translate-y-1 transition"><div class="flex items-start justify-between"><div class="flex items-center gap-4"><div class="text-3xl">💅</div><div><h3 class="text-lg font-bold text-slate-900">ネイルケア</h3><p class="text-sm text-slate-400 mt-0.5">60分</p></div></div><span class="text-xl font-bold text-rose-600">¥6,600</span></div><p class="mt-5 text-slate-600 text-sm leading-relaxed">甘皮処理からジェルまで。ナチュラルからアートまで幅広く対応。</p><a class="mt-6 inline-block text-sm font-semibold text-rose-600 hover:text-rose-500 transition">詳しく見る →</a></div></div></div></section><footer class="border-t border-indigo-200 bg-indigo-50/80 text-indigo-900"><div class="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8"><div class="grid grid-cols-1 gap-8 md:grid-cols-4"><div class="space-y-4"><h3 class="text-lg font-semibold tracking-tight text-indigo-950">Café Luminoso</h3><div class="space-y-2 text-sm leading-relaxed text-indigo-800"><p>〒150-0001 東京都渋谷区神宮前1-2-3</p><p><a href="tel:0312345678" class="hover:text-indigo-600 transition-colors">03-1234-5678</a></p><p><a href="mailto:info@cafeluminoso.jp" class="hover:text-indigo-600 transition-colors">info@cafeluminoso.jp</a></p><p class="pt-1 text-xs text-indigo-700">平日 8:00-20:00 / 土日祝 9:00-19:00</p></div></div><div><h4 class="mb-3 text-sm font-semibold uppercase tracking-wider text-indigo-800">メニュー</h4><ul class="space-y-2"><li><a href="#" class="text-sm text-indigo-700 hover:text-indigo-600 transition-colors">ドリンクメニュー</a></li><li><a href="#" class="text-sm text-indigo-700 hover:text-indigo-600 transition-colors">フードメニュー</a></li><li><a href="#" class="text-sm text-indigo-700 hover:text-indigo-600 transition-colors">スイーツ</a></li><li><a href="#" class="text-sm text-indigo-700 hover:text-indigo-600 transition-colors">季節のおすすめ</a></li></ul></div><div><h4 class="mb-3 text-sm font-semibold uppercase tracking-wider text-indigo-800">店舗情報</h4><ul class="space-y-2"><li><a href="#" class="text-sm text-indigo-700 hover:text-indigo-600 transition-colors">私たちについて</a></li><li><a href="#" class="text-sm text-indigo-700 hover:text-indigo-600 transition-colors">店舗一覧</a></li><li><a href="#" class="text-sm text-indigo-700 hover:text-indigo-600 transition-colors">採用情報</a></li><li><a href="#" class="text-sm text-indigo-700 hover:text-indigo-600 transition-colors">お問い合わせ</a></li></ul></div><div><h4 class="mb-3 text-sm font-semibold uppercase tracking-wider text-indigo-800">サポート</h4><ul class="space-y-2"><li><a href="#" class="text-sm text-indigo-700 hover:text-indigo-600 transition-colors">よくある質問</a></li><li><a href="#" class="text-sm text-indigo-700 hover:text-indigo-600 transition-colors">プライバシーポリシー</a></li><li><a href="#" class="text-sm text-indigo-700 hover:text-indigo-600 transition-colors">特定商取引法に基づく表記</a></li><li><a href="#" class="text-sm text-indigo-700 hover:text-indigo-600 transition-colors">サイトマップ</a></li></ul><div class="mt-6"><h4 class="mb-3 text-sm font-semibold uppercase tracking-wider text-indigo-800">フォローする</h4><div class="flex flex-wrap gap-3"><a href="#" aria-label="Instagram" class="inline-flex h-9 w-9 items-center justify-center rounded-full bg-indigo-200/70 text-indigo-800 hover:bg-indigo-300 hover:text-indigo-950 transition-all"><span class="text-base">📷</span></a><a href="#" aria-label="Twitter" class="inline-flex h-9 w-9 items-center justify-center rounded-full bg-indigo-200/70 text-indigo-800 hover:bg-indigo-300 hover:text-indigo-950 transition-all"><span class="text-base">🐦</span></a><a href="#" aria-label="Facebook" class="inline-flex h-9 w-9 items-center justify-center rounded-full bg-indigo-200/70 text-indigo-800 hover:bg-indigo-300 hover:text-indigo-950 transition-all"><span class="text-base">📘</span></a><a href="#" aria-label="LINE" class="inline-flex h-9 w-9 items-center justify-center rounded-full bg-indigo-200/70 text-indigo-800 hover:bg-indigo-300 hover:text-indigo-950 transition-all"><span class="text-base">💬</span></a></div></div></div></div><div class="mt-10 border-t border-indigo-200 pt-6 text-center"><p class="text-xs text-indigo-700">© 2026 Café Luminoso. All rights reserved.</p></div></div></footer><section class="relative overflow-hidden rounded-2xl bg-gray-900 text-white md:rounded-2xl"><div class="mx-auto flex max-w-6xl flex-col items-center gap-8 px-6 py-16 md:flex-row md:gap-12 md:py-24"><div class="w-full shrink-0 md:w-1/2"><img class="h-72 w-full rounded-xl object-cover shadow-lg md:h-96 md:rounded-2xl" src="https://images.unsplash.com/photo-1501339847302-ac426a4a7cbb?w=800&auto=format&fit=crop" alt="カフェの店内とコーヒー"/></div><div class="flex flex-col items-center text-center md:items-start md:text-left"><h2 class="text-3xl font-bold tracking-tight md:text-5xl">一杯の<br class="md:hidden"/>しあわせが<br/>ここにある</h2><p class="mt-4 max-w-md text-lg leading-relaxed text-gray-300 md:mt-6 md:text-xl">焙煎したての香りと、穏やかな時間。 日常の小さなヒーローは、いつもそばに。</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-2xl font-bold tracking-wide md:text-3xl">カフェのメニュー一覧表示（ドリンク・フード）</h2><div class="grid gap-8 md:grid-cols-2"><div><h3 class="mb-3 text-xl font-semibold text-indigo-400">☕ ドリンク</h3><ul class="space-y-2"><li class="flex items-center justify-between rounded-xl bg-gray-800 px-4 py-2"><span>ブレンドコーヒー</span><span class="font-mono text-indigo-300">¥450</span></li><li class="flex items-center justify-between rounded-xl bg-gray-800 px-4 py-2"><span>カフェラテ</span><span class="font-mono text-indigo-300">¥500</span></li><li class="flex items-center justify-between rounded-xl bg-gray-800 px-4 py-2"><span>抹茶ラテ</span><span class="font-mono text-indigo-300">¥550</span></li><li class="flex items-center justify-between rounded-xl bg-gray-800 px-4 py-2"><span>オレンジジュース</span><span class="font-mono text-indigo-300">¥400</span></li></ul></div><div><h3 class="mb-3 text-xl font-semibold text-indigo-400">🍽️ フード</h3><ul class="space-y-2"><li class="flex items-center justify-between rounded-xl bg-gray-800 px-4 py-2"><span>クロックムッシュ</span><span class="font-mono text-indigo-300">¥650</span></li><li class="flex items-center justify-between rounded-xl bg-gray-800 px-4 py-2"><span>パンケーキ</span><span class="font-mono text-indigo-300">¥700</span></li><li class="flex items-center justify-between rounded-xl bg-gray-800 px-4 py-2"><span>サンドイッチ</span><span class="font-mono text-indigo-300">¥600</span></li><li class="flex items-center justify-between rounded-xl bg-gray-800 px-4 py-2"><span>ガトーショコラ</span><span class="font-mono text-indigo-300">¥550</span></li></ul></div></div></section><section class="mx-auto max-w-6xl px-4 py-12 md:py-20"><h2 class="mb-8 text-center text-2xl font-bold tracking-wide text-gray-800 md:text-3xl">ギャラリー</h2><div class="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-4"><div class="group relative overflow-hidden rounded-2xl shadow-lg transition-shadow duration-300 hover:shadow-xl"><img src="https://images.unsplash.com/photo-1509042239860-f550ce710b93?w=400&h=300&fit=crop" alt="店内のカウンター席と間接照明" class="h-64 w-full object-cover transition-transform duration-500 group-hover:scale-105 md:h-72"/><div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent"></div><div class="absolute bottom-0 left-0 right-0 p-4"><p class="text-sm font-medium text-white drop-shadow-md md:text-base">落ち着いた店内</p></div></div><div class="group relative overflow-hidden rounded-2xl shadow-lg transition-shadow duration-300 hover:shadow-xl"><img src="https://images.unsplash.com/photo-1551024601-bec78aea704b?w=400&h=300&fit=crop" alt="特製パフェとコーヒー" class="h-64 w-full object-cover transition-transform duration-500 group-hover:scale-105 md:h-72"/><div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent"></div><div class="absolute bottom-0 left-0 right-0 p-4"><p class="text-sm font-medium text-white drop-shadow-md md:text-base">季節のパフェ</p></div></div><div class="group relative overflow-hidden rounded-2xl shadow-lg transition-shadow duration-300 hover:shadow-xl"><img src="https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?w=400&h=300&fit=crop" alt="ラテアートと窓辺の席" class="h-64 w-full object-cover transition-transform duration-500 group-hover:scale-105 md:h-72"/><div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent"></div><div class="absolute bottom-0 left-0 right-0 p-4"><p class="text-sm font-medium text-white drop-shadow-md md:text-base">ラテアート</p></div></div><div class="group relative overflow-hidden rounded-2xl shadow-lg transition-shadow duration-300 hover:shadow-xl"><img src="https://images.unsplash.com/photo-1567620905732-2d1ec7ab7445?w=400&h=300&fit=crop" alt="焼き菓子のディスプレイ" class="h-64 w-full object-cover transition-transform duration-500 group-hover:scale-105 md:h-72"/><div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent"></div><div class="absolute bottom-0 left-0 right-0 p-4"><p class="text-sm font-medium text-white drop-shadow-md md:text-base">焼き菓子</p></div></div></div></section><section class="bg-gray-900 text-gray-100 rounded-2xl p-6 md:p-10 max-w-2xl mx-auto my-8 shadow-lg"><h2 class="text-2xl md:text-3xl font-bold mb-6 border-b border-gray-700 pb-2">カフェの予約フォーム（席予約）</h2><div class="space-y-4"><p class="text-gray-300 text-sm md:text-base">ご希望の日時と人数をお選びいただき、席をご予約ください。</p><form class="space-y-4"><div><label for="date" class="block text-sm font-medium mb-1">日付</label><input type="date" id="date" class="w-full rounded-xl bg-gray-800 border border-gray-600 px-4 py-2 text-gray-100 focus:outline-none focus:ring-2 focus:ring-indigo-400"/></div><div><label for="time" class="block text-sm font-medium mb-1">時間</label><input type="time" id="time" class="w-full rounded-xl bg-gray-800 border border-gray-600 px-4 py-2 text-gray-100 focus:outline-none focus:ring-2 focus:ring-indigo-400"/></div><div><label for="guests" class="block text-sm font-medium mb-1">人数</label><select id="guests" class="w-full rounded-xl bg-gray-800 border border-gray-600 px-4 py-2 text-gray-100 focus:outline-none focus:ring-2 focus:ring-indigo-400"><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></select></div><button type="submit" class="w-full rounded-xl bg-indigo-500 hover:bg-indigo-400 text-gray-900 font-semibold py-3 transition duration-200">予約を確認する</button></form></div></section><section class="bg-gray-900 text-gray-100 py-16 px-4 md:px-8 rounded-2xl max-w-5xl mx-auto"><h2 class="text-3xl md:text-4xl font-bold tracking-tight mb-2">お知らせ</h2><p class="text-gray-400 mb-10 text-sm md:text-base">カフェの最新情報やイベントをお届けします</p><div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3"><article class="bg-gray-800 rounded-xl p-5 hover:bg-gray-700 transition-colors"><time class="text-xs text-gray-400 block mb-2">2025.03.15</time><h3 class="text-lg font-semibold leading-snug mb-2">春の新メニュー「桜ラテ」販売開始</h3><p class="text-sm text-gray-300 leading-relaxed">桜の風味が広がる期間限定ラテが登場。ふわふわの泡と桜の花びらが華やかです。</p></article><article class="bg-gray-800 rounded-xl p-5 hover:bg-gray-700 transition-colors"><time class="text-xs text-gray-400 block mb-2">2025.03.10</time><h3 class="text-lg font-semibold leading-snug mb-2">3月20日(木)は臨時休業とさせていただきます</h3><p class="text-sm text-gray-300 leading-relaxed">設備メンテナンスのため、誠に勝手ながら臨時休業とさせていただきます。</p></article><article class="bg-gray-800 rounded-xl p-5 hover:bg-gray-700 transition-colors"><time class="text-xs text-gray-400 block mb-2">2025.03.05</time><h3 class="text-lg font-semibold leading-snug mb-2">テイクアウト専用メニューがリニューアル</h3><p class="text-sm text-gray-300 leading-relaxed">お家でもカフェの味を楽しめるテイクアウトメニューを刷新しました。</p></article></div></section><div class="text-white"><section class="px-6 py-16 md:py-24 text-center bg-zinc-900"><p class="text-sm tracking-widest text-indigo-400 mb-3">カフェ</p><h2 class="text-3xl md:text-5xl font-bold mb-4">一杯の珈琲で、心ほどける時間を。</h2><p class="text-zinc-300 max-w-2xl mx-auto mb-8">自家焙煎の豆と、季節のスイーツをご用意しています。</p><a href="#contact" class="inline-block px-8 py-3 rounded-full bg-indigo-500 text-zinc-900 font-semibold">メニューを見る</a><p class="text-base text-zinc-400 mt-6">カフェのウェブサイトへようこそ。</p></section><section class="px-6 py-14 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">¥480 ※サンプル</span></li><li class="flex justify-between border-b border-zinc-700 py-3"><span>カフェラテ</span><span class="text-indigo-300">¥550 ※サンプル</span></li><li class="flex justify-between border-b border-zinc-700 py-3"><span>本日のケーキ</span><span class="text-indigo-300">¥450 ※サンプル</span></li><li class="flex justify-between border-b border-zinc-700 py-3"><span>ランチプレート</span><span class="text-indigo-300">¥980 ※サンプル</span></li></ul><p class="text-xs text-zinc-500 mt-3">※価格はサンプルです。実際の料金に差し替えてください。</p></section><section class="px-6 py-14 bg-zinc-900"><div class="max-w-5xl mx-auto"><h3 class="text-2xl font-bold mb-6 text-center">選ばれる特徴</h3><div class="grid gap-4 md:grid-cols-3"><div class="text-center p-6"><div class="text-3xl mb-2">☕</div><h4 class="font-semibold mb-1">自家焙煎</h4><p class="text-sm text-zinc-400">豆の個性を活かした焙煎。</p></div><div class="text-center p-6"><div class="text-3xl mb-2">🍰</div><h4 class="font-semibold mb-1">手作りスイーツ</h4><p class="text-sm text-zinc-400">毎日店内で焼き上げます。</p></div><div class="text-center p-6"><div class="text-3xl mb-2">🪟</div><h4 class="font-semibold mb-1">落ち着く空間</h4><p class="text-sm text-zinc-400">ゆっくり過ごせる店内。</p></div></div></div></section><section class="px-6 py-14 max-w-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">— 常連 N 様</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">— 来店 Y 様</figcaption></figure></div><p class="text-xs text-zinc-500 mt-3">※掲載のお客様の声はサンプルです。</p></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">8:00–20: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">商店街内・駅徒歩4分 ※サンプル</p></div></div><p class="text-xs text-zinc-500 mt-3 text-center">※営業時間・アクセスはサンプルです。</p></section></div></div>
▸ コンソール
12部品・0〜数百トークン
✕