ラーメン屋のホームページ。高級感のあるデザインで（アレンジ）

atomic.studio/s/3339

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

<div class="min-h-screen bg-zinc-950 text-white"><section class="bg-neutral-950 text-white"><div class="mx-auto max-w-6xl px-6 py-28 md:py-36 grid md:grid-cols-2 gap-12 items-center"><div><p class="inline-block border border-amber-400/40 text-amber-300 px-4 py-1 text-sm tracking-widest uppercase">Premium</p><h1 class="mt-6 text-4xl md:text-6xl font-serif leading-tight">極上の一杯、至福のひととき</h1><p class="mt-6 text-lg text-neutral-300 max-w-md">厳選素材と匠の技が織りなす、大人のためのラーメン体験</p><a class="mt-10 inline-block rounded-none border border-amber-400 text-amber-300 px-10 py-3 font-medium tracking-wider hover:bg-amber-400 hover:text-neutral-950 transition">メニューを見る</a></div><div class="aspect-[4/3] rounded-sm bg-gradient-to-tr from-amber-500/20 to-yellow-200/10 border border-amber-400/20 shadow-2xl shadow-amber-500/10"></div></div></section><div class="rounded-2xl bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 text-center p-6 md:p-8 md:max-w-2xl mx-auto"><h2 class="text-white text-2xl md:text-3xl font-bold mb-2">期間限定キャンペーン</h2><p class="text-white/90 text-sm md:text-base mb-4">今だけ全商品20%OFF！この機会をお見逃しなく。</p><button class="bg-white text-indigo-600 font-semibold px-6 py-2 rounded-full hover:bg-gray-100 transition">詳細を見る</button></div><header class="sticky top-0 z-40 bg-white/80 backdrop-blur border-b border-slate-100"><nav class="mx-auto max-w-6xl px-6 h-16 flex items-center justify-between"><a class="text-xl font-bold tracking-tight text-slate-900">STORE</a><ul class="hidden md:flex items-center gap-8 text-sm font-medium text-slate-600"><li><a class="hover:text-slate-900 transition">商品</a></li><li><a class="hover:text-slate-900 transition">特集</a></li><li><a class="hover:text-slate-900 transition">ストーリー</a></li><li><a class="hover:text-slate-900 transition">店舗</a></li><li><a class="hover:text-slate-900 transition">お問い合わせ</a></li></ul><div class="flex items-center gap-3"><a class="hidden sm:inline rounded-lg border border-slate-200 px-4 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-50 transition">メニューを見る</a><button aria-label="メニュー" class="md:hidden rounded-lg border border-slate-200 p-2"><span class="block h-0.5 w-5 bg-slate-700"></span><span class="mt-1 block h-0.5 w-5 bg-slate-700"></span><span class="mt-1 block h-0.5 w-5 bg-slate-700"></span></button></div></nav></header><section class="bg-white py-20 md:py-28"><div class="mx-auto max-w-6xl px-6 grid md:grid-cols-2 gap-16 items-center"><div class="relative"><div class="aspect-[4/3] rounded-3xl bg-gradient-to-br from-amber-50 to-orange-100 shadow-lg"></div><div class="absolute -bottom-6 -right-6 rounded-2xl bg-neutral-950 text-white px-6 py-5 shadow-xl"><p class="text-sm text-slate-400">地元から信頼される</p><p class="text-2xl font-bold mt-1">老舗の味</p></div></div><div><h2 class="text-3xl md:text-4xl font-bold text-slate-900">私たちについて</h2><p class="mt-6 text-slate-600 leading-relaxed text-lg">創業30年、地元のお客様に愛され続けてきた店です。素材の良さを最大限に引き出すシンプルな調理法にこだわり、毎日丁寧に料理を作り続けています。地元の農家・漁師と直接取引することで、新鮮で安心な食材をお届けします。</p><div class="mt-10 grid grid-cols-3 gap-6"><div class="text-center rounded-2xl bg-slate-50 p-4"><p class="text-2xl font-bold text-amber-400">1994年</p><p class="text-xs text-slate-500 mt-1">創業</p></div><div class="text-center rounded-2xl bg-slate-50 p-4"><p class="text-2xl font-bold text-amber-400">50,000人+</p><p class="text-xs text-slate-500 mt-1">累計来店数</p></div><div class="text-center rounded-2xl bg-slate-50 p-4"><p class="text-2xl font-bold text-amber-400">82%</p><p class="text-xs text-slate-500 mt-1">リピート率</p></div></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-14 grid gap-8 md:grid-cols-3"><div class="rounded-2xl bg-white p-8 shadow-sm border border-slate-100 hover:shadow-md hover:-translate-y-1 transition"><div class="text-4xl">🐟</div><h3 class="mt-5 text-xl font-semibold text-slate-900">朝獲れ直送</h3><p class="mt-3 text-slate-600 leading-relaxed">市場直送で鮮度そのまま。氷詰めで最短当日にお届けします。</p></div><div class="rounded-2xl bg-white p-8 shadow-sm border border-slate-100 hover:shadow-md hover:-translate-y-1 transition"><div class="text-4xl">👨‍🍳</div><h3 class="mt-5 text-xl font-semibold text-slate-900">目利きが厳選</h3><p class="mt-3 text-slate-600 leading-relaxed">30年の職人が一尾ずつ目利き。品質に満たないものは出しません。</p></div><div class="rounded-2xl bg-white p-8 shadow-sm border border-slate-100 hover:shadow-md hover:-translate-y-1 transition"><div class="text-4xl">🚚</div><h3 class="mt-5 text-xl font-semibold text-slate-900">送料無料</h3><p class="mt-3 text-slate-600 leading-relaxed">5,000円以上のご注文で送料無料。クール便で安心の配送。</p></div></div></div></section><section class="bg-neutral-950 text-white py-20 md:py-28"><div class="mx-auto max-w-5xl px-6"><h2 class="text-3xl md:text-4xl font-bold">コースメニュー</h2><div class="mt-12 space-y-4"><div class="group flex flex-col md:flex-row md:items-center justify-between gap-4 rounded-2xl border border-white/10 p-6 hover:border-white/30 hover:bg-white/5 transition"><div><h3 class="text-xl font-semibold">ランチコース</h3><p class="mt-1 text-sm text-slate-400">前菜・メイン・デザート・ドリンク</p></div><div class="flex items-center gap-8 shrink-0"><div class="text-right"><p class="text-xs text-slate-500">提供時間</p><p class="text-sm text-slate-300">11:30-14:00</p></div><div class="text-right min-w-[100px]"><p class="text-2xl font-bold text-white">¥2,200〜</p><p class="text-xs text-slate-500">税込・サービス料別</p></div></div></div><div class="group flex flex-col md:flex-row md:items-center justify-between gap-4 rounded-2xl border border-white/10 p-6 hover:border-white/30 hover:bg-white/5 transition"><div><h3 class="text-xl font-semibold">ディナーコース A</h3><p class="mt-1 text-sm text-slate-400">前菜・スープ・魚料理・肉料理・デザート</p></div><div class="flex items-center gap-8 shrink-0"><div class="text-right"><p class="text-xs text-slate-500">提供時間</p><p class="text-sm text-slate-300">17:00-22:00</p></div><div class="text-right min-w-[100px]"><p class="text-2xl font-bold text-white">¥4,400〜</p><p class="text-xs text-slate-500">税込・サービス料別</p></div></div></div><div class="group flex flex-col md:flex-row md:items-center justify-between gap-4 rounded-2xl border border-white/10 p-6 hover:border-white/30 hover:bg-white/5 transition"><div><h3 class="text-xl font-semibold">ディナーコース B</h3><p class="mt-1 text-sm text-slate-400">全8品・ペアリングワイン付き</p></div><div class="flex items-center gap-8 shrink-0"><div class="text-right"><p class="text-xs text-slate-500">提供時間</p><p class="text-sm text-slate-300">17:00-22:00</p></div><div class="text-right min-w-[100px]"><p class="text-2xl font-bold text-white">¥7,700〜</p><p class="text-xs text-slate-500">税込・サービス料別</p></div></div></div><div class="group flex flex-col md:flex-row md:items-center justify-between gap-4 rounded-2xl border border-white/10 p-6 hover:border-white/30 hover:bg-white/5 transition"><div><h3 class="text-xl font-semibold">お任せコース</h3><p class="mt-1 text-sm text-slate-400">シェフのおまかせ全10品・記念日対応</p></div><div class="flex items-center gap-8 shrink-0"><div class="text-right"><p class="text-xs text-slate-500">提供時間</p><p class="text-sm text-slate-300">要予約</p></div><div class="text-right min-w-[100px]"><p class="text-2xl font-bold text-white">¥12,100〜</p><p class="text-xs text-slate-500">税込・サービス料別</p></div></div></div></div></div></section><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 text-center">ギャラリー</h2><div class="mt-12 grid grid-cols-2 md:grid-cols-3 gap-4"><div class="group relative overflow-hidden rounded-2xl aspect-[4/3] bg-gradient-to-br from-slate-100 to-slate-200"><div class="absolute inset-0 bg-gradient-to-tr from-blue-50/40 to-cyan-50/20"></div><div class="absolute bottom-0 inset-x-0 translate-y-full group-hover:translate-y-0 transition duration-300 bg-neutral-950/80 px-3 py-2"><p class="text-white text-sm font-medium">落ち着いた和の空間</p></div></div><div class="group relative overflow-hidden rounded-2xl aspect-[4/3] bg-gradient-to-br from-slate-100 to-slate-200"><div class="absolute inset-0 bg-gradient-to-tr from-blue-50/40 to-cyan-50/20"></div><div class="absolute bottom-0 inset-x-0 translate-y-full group-hover:translate-y-0 transition duration-300 bg-neutral-950/80 px-3 py-2"><p class="text-white text-sm font-medium">旬の食材を丁寧に</p></div></div><div class="group relative overflow-hidden rounded-2xl aspect-[4/3] bg-gradient-to-br from-slate-100 to-slate-200"><div class="absolute inset-0 bg-gradient-to-tr from-blue-50/40 to-cyan-50/20"></div><div class="absolute bottom-0 inset-x-0 translate-y-full group-hover:translate-y-0 transition duration-300 bg-neutral-950/80 px-3 py-2"><p class="text-white text-sm font-medium">接待・会食にも</p></div></div><div class="group relative overflow-hidden rounded-2xl aspect-[4/3] bg-gradient-to-br from-slate-100 to-slate-200"><div class="absolute inset-0 bg-gradient-to-tr from-blue-50/40 to-cyan-50/20"></div><div class="absolute bottom-0 inset-x-0 translate-y-full group-hover:translate-y-0 transition duration-300 bg-neutral-950/80 px-3 py-2"><p class="text-white text-sm font-medium">一人でも気軽に</p></div></div><div class="group relative overflow-hidden rounded-2xl aspect-[4/3] bg-gradient-to-br from-slate-100 to-slate-200"><div class="absolute inset-0 bg-gradient-to-tr from-blue-50/40 to-cyan-50/20"></div><div class="absolute bottom-0 inset-x-0 translate-y-full group-hover:translate-y-0 transition duration-300 bg-neutral-950/80 px-3 py-2"><p class="text-white text-sm font-medium">開放的な眺め</p></div></div><div class="group relative overflow-hidden rounded-2xl aspect-[4/3] bg-gradient-to-br from-slate-100 to-slate-200"><div class="absolute inset-0 bg-gradient-to-tr from-blue-50/40 to-cyan-50/20"></div><div class="absolute bottom-0 inset-x-0 translate-y-full group-hover:translate-y-0 transition duration-300 bg-neutral-950/80 px-3 py-2"><p class="text-white text-sm font-medium">テイクアウトも好評</p></div></div></div></div></section><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-center text-slate-900">お客様の声</h2><div class="mt-14 grid gap-8 md:grid-cols-3"><figure class="rounded-2xl bg-slate-50 p-8 border border-slate-100"><div class="text-amber-400 text-2xl">“</div><blockquote class="mt-2 text-slate-700 leading-relaxed">スーパーとは鮮度が全然違います。家族みんな大満足でした。</blockquote><figcaption class="mt-6 flex items-center gap-3"><div class="h-10 w-10 rounded-full bg-gradient-to-br from-amber-400 to-yellow-500"></div><div><p class="font-semibold text-slate-900">田中 様</p><p class="text-sm text-slate-500">リピーター</p></div></figcaption></figure><figure class="rounded-2xl bg-slate-50 p-8 border border-slate-100"><div class="text-amber-400 text-2xl">“</div><blockquote class="mt-2 text-slate-700 leading-relaxed">下処理済みで届くので料理が楽。味も間違いなしです。</blockquote><figcaption class="mt-6 flex items-center gap-3"><div class="h-10 w-10 rounded-full bg-gradient-to-br from-amber-400 to-yellow-500"></div><div><p class="font-semibold text-slate-900">佐藤 様</p><p class="text-sm text-slate-500">初回購入</p></div></figcaption></figure><figure class="rounded-2xl bg-slate-50 p-8 border border-slate-100"><div class="text-amber-400 text-2xl">“</div><blockquote class="mt-2 text-slate-700 leading-relaxed">贈答用に使いました。のし対応も丁寧で助かりました。</blockquote><figcaption class="mt-6 flex items-center gap-3"><div class="h-10 w-10 rounded-full bg-gradient-to-br from-amber-400 to-yellow-500"></div><div><p class="font-semibold text-slate-900">鈴木 様</p><p class="text-sm text-slate-500">贈答利用</p></div></figcaption></figure></div></div></section><section class="bg-neutral-950 text-white py-16 px-6"><div class="max-w-6xl mx-auto grid md:grid-cols-2 gap-10 items-center"><div><h2 class="text-3xl font-bold mb-6">アクセス</h2><p class="text-gray-300 leading-relaxed">〒100-0001<br/>東京都千代田区千代田1-1<br/>電話：03-1234-5678</p></div><div class="bg-gray-700 rounded-lg h-64 md:h-80 w-full"><div class="flex items-center justify-center h-full text-gray-400 text-sm">地図が表示されます</div></div></div></section><section class="bg-slate-50 py-20 md:py-28"><div class="mx-auto max-w-3xl px-6"><h2 class="text-3xl md:text-4xl font-bold text-slate-900 text-center">お問い合わせ</h2><p class="mt-4 text-center text-slate-600">ご質問・ご相談はお気軽にどうぞ。2営業日以内にご返信します。</p><form class="mt-10 grid gap-5 rounded-2xl bg-white p-8 shadow-sm border border-slate-100"><div class="grid gap-1"><label class="text-sm font-medium text-slate-700">お名前</label><input type="text" aria-label="お名前" class="rounded-lg border border-slate-200 px-4 py-3 outline-none focus:border-amber-400"/></div><div class="grid gap-1"><label class="text-sm font-medium text-slate-700">メールアドレス</label><input type="email" aria-label="メールアドレス" placeholder="you@example.com" class="rounded-lg border border-slate-200 px-4 py-3 outline-none focus:border-amber-400"/></div><div class="grid gap-1"><label class="text-sm font-medium text-slate-700">電話番号（任意）</label><input type="tel" aria-label="電話番号" class="rounded-lg border border-slate-200 px-4 py-3 outline-none focus:border-amber-400"/></div><div class="grid gap-1"><label class="text-sm font-medium text-slate-700">お問い合わせ内容</label><textarea aria-label="お問い合わせ内容" class="h-32 rounded-lg border border-slate-200 px-4 py-3 outline-none focus:border-amber-400"></textarea></div><button class="mt-2 rounded-xl bg-amber-500 px-7 py-3 font-semibold text-white shadow-lg shadow-blue-600/30 hover:bg-amber-500 transition">送信する</button></form></div></section><footer class="bg-neutral-950 text-slate-300"><div class="mx-auto max-w-6xl px-6 py-16 grid gap-10 md:grid-cols-4"><div class="md:col-span-1"><p class="text-xl font-bold text-white">STORE</p><p class="mt-4 text-sm leading-relaxed text-slate-400 max-w-xs">良いものを、ていねいに。毎日の暮らしに寄り添う品揃え。</p></div><div><p class="text-sm font-semibold text-white">ショップ</p><ul class="mt-4 space-y-2 text-sm"><li><a class="hover:text-white transition">新着</a></li><li><a class="hover:text-white transition">ランキング</a></li><li><a class="hover:text-white transition">セール</a></li><li><a class="hover:text-white transition">ギフト</a></li></ul></div><div><p class="text-sm font-semibold text-white">サポート</p><ul class="mt-4 space-y-2 text-sm"><li><a class="hover:text-white transition">送料・配送</a></li><li><a class="hover:text-white transition">返品・交換</a></li><li><a class="hover:text-white transition">よくある質問</a></li><li><a class="hover:text-white transition">お問い合わせ</a></li></ul></div><div><p class="text-sm font-semibold text-white">会社情報</p><ul class="mt-4 space-y-2 text-sm"><li><a class="hover:text-white transition">私たちについて</a></li><li><a class="hover:text-white transition">採用情報</a></li><li><a class="hover:text-white transition">プライバシー</a></li><li><a class="hover:text-white transition">特定商取引法</a></li></ul></div></div><div class="border-t border-white/10"><div class="mx-auto max-w-6xl px-6 py-6 flex flex-col sm:flex-row items-center justify-between gap-3 text-xs text-slate-500"><p>© 2026 STORE. All rights reserved.</p><p>Made with care in Japan</p></div></div></footer></div>