カフェのホームページ

atomic.studio/s/3081

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

<div class="min-h-screen bg-zinc-950 text-white"><header class="w-full bg-[#fdf6f0] border-b border-[#e8d5c4] px-4 py-4 md:py-5 lg:py-6"><div class="max-w-6xl mx-auto flex items-center justify-between"><div class="flex items-center gap-2"><span class="text-2xl md:text-3xl lg:text-4xl" role="img" aria-label="カフェ">☕</span><h1 class="text-lg md:text-xl lg:text-2xl font-serif tracking-wide text-[#4a3728]">喫茶 木もれ陽</h1></div><nav class="hidden md:flex items-center gap-6 lg:gap-8"><a href="#menu" class="text-sm lg:text-base text-[#5c4a3a] hover:text-[#a67c52] transition-colors duration-200">メニュー</a><a href="#about" class="text-sm lg:text-base text-[#5c4a3a] hover:text-[#a67c52] transition-colors duration-200">お店について</a><a href="#access" class="text-sm lg:text-base text-[#5c4a3a] hover:text-[#a67c52] transition-colors duration-200">アクセス</a></nav><button class="md:hidden flex flex-col gap-1.5 p-1" aria-label="メニューを開く"><span class="block w-6 h-0.5 bg-[#4a3728] rounded-full"></span><span class="block w-6 h-0.5 bg-[#4a3728] rounded-full"></span><span class="block w-6 h-0.5 bg-[#4a3728] rounded-full"></span></button></div><h2 class="sr-only">喫茶 木もれ陽 ヘッダー</h2></header><section class="relative flex flex-col items-center justify-center min-h-screen bg-[#f5efe6] px-6 py-20 md:py-32 overflow-hidden"><div class="absolute top-[-10%] left-[-10%] w-[300px] h-[300px] md:w-[500px] md:h-[500px] rounded-full bg-[#d9c5b2] opacity-20 blur-3xl pointer-events-none"></div><div class="absolute bottom-[-10%] right-[-10%] w-[250px] h-[250px] md:w-[400px] md:h-[400px] rounded-full bg-[#c7b5a0] opacity-20 blur-3xl pointer-events-none"></div><div class="relative z-10 text-center max-w-3xl mx-auto"><div class="text-6xl md:text-7xl mb-6 select-none" aria-hidden="true">☕</div><h2 class="text-4xl md:text-5xl lg:text-6xl font-serif font-bold text-[#3e2c1b] tracking-wide mb-4">自家焙煎コーヒーと<br class="md:hidden"/>静かなひととき</h2><p class="text-base md:text-lg text-[#5c4a36] leading-relaxed mb-10 max-w-xl mx-auto">街角の小さなカフェ。一杯ごとに心を込めて。<br/>ゆったり流れる時間の中で、あなただけの特別な一杯をお楽しみください。</p><div class="flex flex-col sm:flex-row items-center justify-center gap-4"><a href="#menu" class="inline-block bg-[#3e2c1b] text-[#f5efe6] font-medium px-8 py-3 rounded-full shadow-md hover:bg-[#2f1f12] transition-colors duration-300 text-sm md:text-base">メニューを見る</a><a href="#access" class="inline-block border-2 border-[#3e2c1b] text-[#3e2c1b] font-medium px-8 py-3 rounded-full hover:bg-[#3e2c1b] hover:text-[#f5efe6] transition-colors duration-300 text-sm md:text-base">アクセス</a></div></div><div class="absolute bottom-8 left-1/2 -translate-x-1/2 w-16 h-0.5 bg-[#b8a48e] rounded-full"></div></section><div class="w-full max-w-4xl mx-auto px-4 py-12 md:py-16"><div class="text-center mb-10 md:mb-14"><h2 class="text-3xl md:text-4xl font-serif text-[#4a3728] tracking-wide mb-2">メニュー</h2><div class="w-16 h-0.5 bg-[#c8a27b] mx-auto mb-4"></div><p class="text-[#7a6a5a] text-sm md:text-base">心を込めてお届けする、こだわりの一品</p></div><div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8"><div class="bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 overflow-hidden border border-[#f0e6dc]"><div class="h-2 bg-gradient-to-r from-[#d4b89b] to-[#c8a27b]"></div><div class="p-5 md:p-6"><div class="flex justify-between items-start mb-2"><h3 class="text-lg md:text-xl font-semibold text-[#4a3728]">ブレンドコーヒー</h3><span class="text-[#c8a27b] font-bold text-lg md:text-xl whitespace-nowrap ml-2">¥450</span></div><p class="text-[#8a7a6a] text-sm md:text-base leading-relaxed">深煎りのオリジナルブレンド</p></div></div><div class="bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 overflow-hidden border border-[#f0e6dc]"><div class="h-2 bg-gradient-to-r from-[#d4b89b] to-[#c8a27b]"></div><div class="p-5 md:p-6"><div class="flex justify-between items-start mb-2"><h3 class="text-lg md:text-xl font-semibold text-[#4a3728]">カフェラテ</h3><span class="text-[#c8a27b] font-bold text-lg md:text-xl whitespace-nowrap ml-2">¥500</span></div><p class="text-[#8a7a6a] text-sm md:text-base leading-relaxed">エスプレッソとスチームミルク</p></div></div><div class="bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 overflow-hidden border border-[#f0e6dc]"><div class="h-2 bg-gradient-to-r from-[#d4b89b] to-[#c8a27b]"></div><div class="p-5 md:p-6"><div class="flex justify-between items-start mb-2"><h3 class="text-lg md:text-xl font-semibold text-[#4a3728]">抹茶ラテ</h3><span class="text-[#c8a27b] font-bold text-lg md:text-xl whitespace-nowrap ml-2">¥550</span></div><p class="text-[#8a7a6a] text-sm md:text-base leading-relaxed">宇治抹茶を使用した和風ラテ</p></div></div><div class="bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 overflow-hidden border border-[#f0e6dc]"><div class="h-2 bg-gradient-to-r from-[#d4b89b] to-[#c8a27b]"></div><div class="p-5 md:p-6"><div class="flex justify-between items-start mb-2"><h3 class="text-lg md:text-xl font-semibold text-[#4a3728]">季節のフルーツタルト</h3><span class="text-[#c8a27b] font-bold text-lg md:text-xl whitespace-nowrap ml-2">¥650</span></div><p class="text-[#8a7a6a] text-sm md:text-base leading-relaxed">旬のフルーツをたっぷり</p></div></div><div class="bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 overflow-hidden border border-[#f0e6dc]"><div class="h-2 bg-gradient-to-r from-[#d4b89b] to-[#c8a27b]"></div><div class="p-5 md:p-6"><div class="flex justify-between items-start mb-2"><h3 class="text-lg md:text-xl font-semibold text-[#4a3728]">自家製チーズケーキ</h3><span class="text-[#c8a27b] font-bold text-lg md:text-xl whitespace-nowrap ml-2">¥600</span></div><p class="text-[#8a7a6a] text-sm md:text-base leading-relaxed">なめらかで濃厚な味わい</p></div></div><div class="bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 overflow-hidden border border-[#f0e6dc]"><div class="h-2 bg-gradient-to-r from-[#d4b89b] to-[#c8a27b]"></div><div class="p-5 md:p-6"><div class="flex justify-between items-start mb-2"><h3 class="text-lg md:text-xl font-semibold text-[#4a3728]">クロックムッシュ</h3><span class="text-[#c8a27b] font-bold text-lg md:text-xl whitespace-nowrap ml-2">¥700</span></div><p class="text-[#8a7a6a] text-sm md:text-base leading-relaxed">とろけるチーズとハムのホットサンド</p></div></div></div><div class="text-center mt-10 md:mt-14"><p class="text-[#7a6a5a] text-xs md:text-sm italic">※ 表示価格はすべて税込です</p></div></div><div class="w-full max-w-2xl mx-auto px-4 py-8"><h2 class="text-2xl md:text-3xl font-serif text-center text-[#4a3728] mb-8 tracking-wide">メニュー</h2><div class="mb-10"><h3 class="text-lg md:text-xl font-semibold text-[#6b4f3a] border-b-2 border-[#d4b896] pb-2 mb-4">ドリンク</h3><ul class="space-y-3"><li class="flex justify-between items-center py-2 px-3 rounded-lg bg-[#f9f3ed] hover:bg-[#f0e6db] transition-colors"><span class="text-[#3d2b1f] text-base md:text-lg font-medium">ブレンドコーヒー</span><span class="text-[#8b6f4c] text-base md:text-lg font-semibold whitespace-nowrap ml-4">¥450</span></li><li class="flex justify-between items-center py-2 px-3 rounded-lg bg-[#f9f3ed] hover:bg-[#f0e6db] transition-colors"><span class="text-[#3d2b1f] text-base md:text-lg font-medium">カフェラテ</span><span class="text-[#8b6f4c] text-base md:text-lg font-semibold whitespace-nowrap ml-4">¥500</span></li><li class="flex justify-between items-center py-2 px-3 rounded-lg bg-[#f9f3ed] hover:bg-[#f0e6db] transition-colors"><span class="text-[#3d2b1f] text-base md:text-lg font-medium">抹茶ラテ</span><span class="text-[#8b6f4c] text-base md:text-lg font-semibold whitespace-nowrap ml-4">¥550</span></li></ul></div><div class="mb-10"><h3 class="text-lg md:text-xl font-semibold text-[#6b4f3a] border-b-2 border-[#d4b896] pb-2 mb-4">フード</h3><ul class="space-y-3"><li class="flex justify-between items-center py-2 px-3 rounded-lg bg-[#f9f3ed] hover:bg-[#f0e6db] transition-colors"><span class="text-[#3d2b1f] text-base md:text-lg font-medium">季節のフルーツタルト</span><span class="text-[#8b6f4c] text-base md:text-lg font-semibold whitespace-nowrap ml-4">¥650</span></li><li class="flex justify-between items-center py-2 px-3 rounded-lg bg-[#f9f3ed] hover:bg-[#f0e6db] transition-colors"><span class="text-[#3d2b1f] text-base md:text-lg font-medium">クロックムッシュ</span><span class="text-[#8b6f4c] text-base md:text-lg font-semibold whitespace-nowrap ml-4">¥600</span></li><li class="flex justify-between items-center py-2 px-3 rounded-lg bg-[#f9f3ed] hover:bg-[#f0e6db] transition-colors"><span class="text-[#3d2b1f] text-base md:text-lg font-medium">自家製スコーン</span><span class="text-[#8b6f4c] text-base md:text-lg font-semibold whitespace-nowrap ml-4">¥400</span></li></ul></div><p class="text-center text-sm text-[#8b6f4c] mt-6 italic">すべて税込価格です</p></div><div class="w-full max-w-2xl mx-auto px-4 py-8 md:py-12"><div class="bg-white/80 backdrop-blur-sm rounded-3xl shadow-lg border border-amber-200/60 p-6 md:p-10"><h2 class="text-2xl md:text-3xl font-serif tracking-wide text-amber-900 text-center mb-6">木もれびカフェ</h2><div class="w-16 h-0.5 bg-amber-300 mx-auto mb-8"></div><div class="space-y-5 text-sm md:text-base text-stone-700"><div class="flex items-start gap-3"><span class="text-amber-600 shrink-0 mt-0.5"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></svg></span><span class="leading-relaxed">〒150-0001 東京都渋谷区神宮前4-12-8</span></div><div class="flex items-start gap-3"><span class="text-amber-600 shrink-0 mt-0.5"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path></svg></span><span class="leading-relaxed">03-1234-5678</span></div><div class="flex items-start gap-3"><span class="text-amber-600 shrink-0 mt-0.5"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg></span><div class="leading-relaxed"><p>11:00 - 19:00（L.O. 18:30）</p><p class="text-amber-700 mt-1">水曜定休</p></div></div><div class="flex items-start gap-3"><span class="text-amber-600 shrink-0 mt-0.5"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path></svg></span><span class="leading-relaxed">東京メトロ「表参道」駅 A2出口より徒歩3分</span></div></div><div class="mt-8 pt-6 border-t border-amber-200/60"><p class="text-xs md:text-sm text-stone-500 italic text-center leading-relaxed">※ランチタイムは混雑が予想されます。お電話でのご予約をおすすめします。</p></div></div></div><div class="min-h-screen bg-[#fdf6f0] flex items-center justify-center p-4 md:p-8"><div class="w-full max-w-5xl bg-white rounded-3xl shadow-xl overflow-hidden"><div class="bg-[#d9b99b] px-6 py-4 md:px-10 md:py-6"><h1 class="text-2xl md:text-3xl font-serif text-white tracking-wide">カフェ アクセスマップ</h1><p class="text-white/80 text-sm md:text-base mt-1">静かな街角で、ほっと一息。</p></div><div class="p-6 md:p-10"><div class="relative w-full h-64 md:h-96 bg-[#e8ddd0] rounded-2xl overflow-hidden"><svg viewBox="0 0 800 400" class="w-full h-full" preserveAspectRatio="xMidYMid meet"><rect width="800" height="400" fill="#e8ddd0"></rect><rect x="0" y="180" width="800" height="40" fill="#c4b5a0"></rect><rect x="350" y="0" width="40" height="400" fill="#c4b5a0"></rect><rect x="60" y="60" width="120" height="90" rx="6" fill="#b8a48c"></rect><rect x="420" y="60" width="140" height="100" rx="6" fill="#b8a48c"></rect><rect x="600" y="220" width="130" height="80" rx="6" fill="#b8a48c"></rect><rect x="80" y="260" width="100" height="70" rx="6" fill="#b8a48c"></rect><circle cx="400" cy="200" r="28" fill="#d9b99b" stroke="#b38b6d" stroke-width="3"></circle><circle cx="400" cy="200" r="10" fill="#8b6f50"></circle><text x="400" y="160" text-anchor="middle" fill="#5c4a3a" font-size="14" font-weight="bold" font-family="serif">カフェ</text><rect x="680" y="30" width="70" height="50" rx="8" fill="#a0937d"></rect><text x="715" y="62" text-anchor="middle" fill="#fff" font-size="12" font-weight="bold">駅</text><line x1="400" y1="228" x2="400" y2="380" stroke="#8b6f50" stroke-width="2" stroke-dasharray="6,4"></line><line x1="400" y1="380" x2="715" y2="380" stroke="#8b6f50" stroke-width="2" stroke-dasharray="6,4"></line><line x1="715" y1="380" x2="715" y2="80" stroke="#8b6f50" stroke-width="2" stroke-dasharray="6,4"></line></svg><div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none"><div class="w-8 h-8 bg-[#d9b99b] rounded-full flex items-center justify-center shadow-lg border-2 border-white"><span class="text-white text-lg leading-none">☕</span></div></div></div><div class="mt-6 md:mt-8 grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6"><div class="bg-[#f5ede4] rounded-xl p-4 md:p-5"><h2 class="text-lg font-serif text-[#5c4a3a] mb-2">電車でお越しの方</h2><p class="text-[#6b5a4a] text-sm leading-relaxed">○○駅 東口より徒歩3分。<br/>改札を出て左に進み、信号を渡るとすぐです。</p></div><div class="bg-[#f5ede4] rounded-xl p-4 md:p-5"><h2 class="text-lg font-serif text-[#5c4a3a] mb-2">お車でお越しの方</h2><p class="text-[#6b5a4a] text-sm leading-relaxed">専用駐車場はございません。<br/>近隣のコインパーキング（徒歩1分）をご利用ください。</p></div></div><div class="mt-4 md:mt-6 text-center text-[#6b5a4a] text-sm">〒123-4567 東京都○○区○○町1-2-3<br/>TEL: 03-1234-5678</div><div class="mt-6 md:mt-8 pt-4 border-t border-[#d9b99b]/30 text-center text-[#8b7a6a] text-xs">© 2026 カフェ アクセスマップ</div></div></div></div><section class="w-full max-w-4xl mx-auto px-4 py-12 md:py-20"><div class="text-center mb-10 md:mb-14"><h2 class="text-3xl md:text-4xl font-serif tracking-wide text-[#3e2c1b] mb-3">お問い合わせ</h2><p class="text-[#6b4f3a] text-sm md:text-base leading-relaxed max-w-md mx-auto">ご予約・ご質問はお気軽にどうぞ</p></div><form class="bg-[#faf6f0] rounded-2xl shadow-md px-6 py-8 md:px-10 md:py-10 space-y-6 border border-[#e6d9cc]"><div class="grid grid-cols-1 md:grid-cols-2 gap-5"><div><label for="name" class="block text-sm font-medium text-[#3e2c1b] mb-1.5">お名前 <span class="text-[#b87c5a]">*</span></label><input id="name" type="text" required="" placeholder="例：山田 花子" class="w-full rounded-lg border border-[#d4c5b5] bg-white px-4 py-2.5 text-sm text-[#3e2c1b] placeholder-[#b09a86] focus:outline-none focus:ring-2 focus:ring-[#b87c5a] focus:border-transparent transition"/></div><div><label for="email" class="block text-sm font-medium text-[#3e2c1b] mb-1.5">メールアドレス <span class="text-[#b87c5a]">*</span></label><input id="email" type="email" required="" placeholder="例：info@cafe.example" class="w-full rounded-lg border border-[#d4c5b5] bg-white px-4 py-2.5 text-sm text-[#3e2c1b] placeholder-[#b09a86] focus:outline-none focus:ring-2 focus:ring-[#b87c5a] focus:border-transparent transition"/></div></div><div><label for="phone" class="block text-sm font-medium text-[#3e2c1b] mb-1.5">電話番号（任意）</label><input id="phone" type="tel" placeholder="例：090-1234-5678" class="w-full rounded-lg border border-[#d4c5b5] bg-white px-4 py-2.5 text-sm text-[#3e2c1b] placeholder-[#b09a86] focus:outline-none focus:ring-2 focus:ring-[#b87c5a] focus:border-transparent transition"/></div><div><label for="guests" class="block text-sm font-medium text-[#3e2c1b] mb-1.5">ご来店人数（任意）</label><select id="guests" class="w-full rounded-lg border border-[#d4c5b5] bg-white px-4 py-2.5 text-sm text-[#3e2c1b] focus:outline-none focus:ring-2 focus:ring-[#b87c5a] focus:border-transparent transition"><option value="" disabled="" 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="more">9名様以上</option></select></div><div><label for="message" class="block text-sm font-medium text-[#3e2c1b] mb-1.5">お問い合わせ内容 <span class="text-[#b87c5a]">*</span></label><textarea id="message" rows="4" required="" placeholder="ご予約希望日時・アレルギーなどお気軽にご記入ください" class="w-full rounded-lg border border-[#d4c5b5] bg-white px-4 py-2.5 text-sm text-[#3e2c1b] placeholder-[#b09a86] focus:outline-none focus:ring-2 focus:ring-[#b87c5a] focus:border-transparent transition resize-y"></textarea></div><div class="pt-2"><button type="submit" class="w-full md:w-auto px-10 py-3 bg-[#8b6b4d] hover:bg-[#7a5d42] active:bg-[#6a4f37] text-white font-medium rounded-full shadow-sm transition duration-200 text-sm md:text-base tracking-wide">送信する</button></div><p class="text-xs text-[#8f7a68] text-center md:text-left pt-1"><span class="text-[#b87c5a]">*</span> は必須項目です</p></form></section><footer class="bg-[#2c1810] text-[#f5e6d3] py-8 md:py-12 px-4 md:px-8"><h2 class="sr-only">カフェ 木もれ陽 フッター</h2><div class="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-12"><div><h3 class="text-lg md:text-xl font-semibold mb-3 tracking-wide border-b border-[#8b6f5e] pb-2 inline-block">カフェ 木もれ陽</h3><p class="text-sm md:text-base leading-relaxed mt-3 text-[#d4c5b5]">〒150-0001<br/>東京都渋谷区神宮前1-2-3<br/>TEL: 03-1234-5678</p></div><div><h4 class="text-base md:text-lg font-medium mb-3 tracking-wide border-b border-[#8b6f5e] pb-2 inline-block">営業時間</h4><ul class="text-sm md:text-base space-y-1 text-[#d4c5b5]"><li>月〜金: 7:00 - 20:00</li><li>土日祝: 8:00 - 18:00</li><li class="mt-2 text-[#c9a96e] text-xs">※ラストオーダーは閉店30分前</li></ul></div><div><h4 class="text-base md:text-lg font-medium mb-3 tracking-wide border-b border-[#8b6f5e] pb-2 inline-block">メニュー</h4><nav class="text-sm md:text-base space-y-1"><a href="#" class="block hover:text-[#c9a96e] transition-colors duration-200 text-[#d4c5b5]">トップ</a><a href="#" class="block hover:text-[#c9a96e] transition-colors duration-200 text-[#d4c5b5]">メニュー</a><a href="#" class="block hover:text-[#c9a96e] transition-colors duration-200 text-[#d4c5b5]">アクセス</a><a href="#" class="block hover:text-[#c9a96e] transition-colors duration-200 text-[#d4c5b5]">お問い合わせ</a></nav></div></div><div class="max-w-6xl mx-auto mt-8 md:mt-12 pt-6 border-t border-[#5a3e2e] text-center"><p class="text-xs md:text-sm text-[#a08b7a] tracking-wide">© 2026 カフェ 木もれ陽. All rights reserved.</p></div></footer></div>