カフェのホームページ

atomic.studio/s/3412

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

<div class="min-h-screen bg-zinc-950 text-white"><header class="w-full bg-[#faf3e8] text-[#3e2c1a] font-sans"><div class="max-w-6xl mx-auto px-4 py-5 md:py-6 flex flex-col md:flex-row items-center justify-between gap-2"><div class="text-2xl md:text-3xl tracking-wide font-semibold">☕ 喫茶 木もれ陽</div><nav class="flex flex-wrap justify-center gap-x-6 gap-y-1 text-sm md:text-base"><a href="#" class="hover:text-[#a67c52] transition-colors duration-200">メニュー</a><a href="#" class="hover:text-[#a67c52] transition-colors duration-200">お知らせ</a><a href="#" class="hover:text-[#a67c52] transition-colors duration-200">店舗案内</a><a href="#" class="hover:text-[#a67c52] transition-colors duration-200">お問い合わせ</a></nav></div><h2 class="sr-only">喫茶 木もれ陽 ヘッダー</h2></header><section class="relative flex min-h-[70vh] items-center justify-center overflow-hidden bg-[#f5f0eb] px-4 py-20 md:min-h-[80vh] md:px-8 lg:px-16"><div class="pointer-events-none absolute -left-20 -top-20 h-72 w-72 rounded-full bg-[#d9c8b2] opacity-30 blur-3xl md:h-96 md:w-96 lg:-left-32 lg:-top-32"></div><div class="pointer-events-none absolute -bottom-16 -right-16 h-64 w-64 rounded-full bg-[#cbb59b] opacity-25 blur-3xl md:h-80 md:w-80 lg:-bottom-24 lg:-right-24"></div><div class="relative z-10 mx-auto max-w-4xl text-center"><div class="mb-6 flex items-center justify-center gap-3 md:mb-8"><span class="block h-px w-12 bg-[#8b7355] md:w-16"></span><span class="font-serif text-2xl italic tracking-[0.3em] text-[#6b5a44] md:text-3xl">&amp;</span><span class="block h-px w-12 bg-[#8b7355] md:w-16"></span></div><h2 class="font-serif text-4xl font-light tracking-widest text-[#4a3f35] md:text-5xl lg:text-6xl">木漏れ日カフェ</h2><p class="mt-4 font-sans text-sm tracking-[0.25em] text-[#7a6b58] md:mt-6 md:text-base lg:text-lg">静かな時間が流れる、小さな隠れ家</p><div class="mx-auto my-8 flex items-center justify-center gap-4 md:my-10"><span class="block h-px w-8 bg-[#b8a48c] md:w-12"></span><span class="block h-2 w-2 rotate-45 border border-[#8b7355]"></span><span class="block h-px w-8 bg-[#b8a48c] md:w-12"></span></div><p class="mx-auto max-w-xl font-sans text-sm leading-relaxed text-[#6b5a44] md:text-base">一杯のコーヒーとともに、日常を少しだけ忘れるひとときを。 やわらかな日差しが差し込む店内で、心ほどける時間をお過ごしください。</p><div class="mt-10 md:mt-12"><a href="#menu" class="inline-block border border-[#8b7355] px-10 py-3 font-sans text-xs tracking-[0.2em] text-[#5a4a38] transition-colors duration-300 hover:bg-[#8b7355] hover:text-white md:px-12 md:py-4 md:text-sm">メニューを見る</a></div></div></section><section class="w-full max-w-5xl mx-auto px-4 py-16 md:py-24"><div class="text-center mb-12 md:mb-16"><h2 class="text-3xl md:text-4xl lg:text-5xl font-serif tracking-wide text-[#3e2c1b] mb-3">メニュー</h2><div class="w-16 h-0.5 bg-[#c8a27b] mx-auto mb-4"></div><p class="text-[#6b4f3a] text-sm md:text-base font-light tracking-wider">心を込めた一杯と、ほっとするひとときを</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/80 backdrop-blur-sm rounded-2xl shadow-md hover:shadow-xl transition-shadow duration-300 p-6 md:p-8 border border-[#e8d5c4] flex flex-col"><div class="flex items-start justify-between mb-3"><h3 class="text-lg md:text-xl font-medium text-[#3e2c1b] tracking-wide">ブレンドコーヒー</h3><span class="text-[#c8a27b] font-semibold text-base md:text-lg whitespace-nowrap ml-3">¥480</span></div><p class="text-[#7a5f4a] text-sm md:text-base leading-relaxed font-light">深煎りの自家焙煎</p></div><div class="bg-white/80 backdrop-blur-sm rounded-2xl shadow-md hover:shadow-xl transition-shadow duration-300 p-6 md:p-8 border border-[#e8d5c4] flex flex-col"><div class="flex items-start justify-between mb-3"><h3 class="text-lg md:text-xl font-medium text-[#3e2c1b] tracking-wide">カフェラテ</h3><span class="text-[#c8a27b] font-semibold text-base md:text-lg whitespace-nowrap ml-3">¥550</span></div><p class="text-[#7a5f4a] text-sm md:text-base leading-relaxed font-light">エスプレッソとスチームミルク</p></div><div class="bg-white/80 backdrop-blur-sm rounded-2xl shadow-md hover:shadow-xl transition-shadow duration-300 p-6 md:p-8 border border-[#e8d5c4] flex flex-col"><div class="flex items-start justify-between mb-3"><h3 class="text-lg md:text-xl font-medium text-[#3e2c1b] tracking-wide">抹茶ラテ</h3><span class="text-[#c8a27b] font-semibold text-base md:text-lg whitespace-nowrap ml-3">¥580</span></div><p class="text-[#7a5f4a] text-sm md:text-base leading-relaxed font-light">京都宇治抹茶使用</p></div><div class="bg-white/80 backdrop-blur-sm rounded-2xl shadow-md hover:shadow-xl transition-shadow duration-300 p-6 md:p-8 border border-[#e8d5c4] flex flex-col"><div class="flex items-start justify-between mb-3"><h3 class="text-lg md:text-xl font-medium text-[#3e2c1b] tracking-wide">季節のフルーツタルト</h3><span class="text-[#c8a27b] font-semibold text-base md:text-lg whitespace-nowrap ml-3">¥650</span></div><p class="text-[#7a5f4a] text-sm md:text-base leading-relaxed font-light">日替わりフレッシュフルーツ</p></div><div class="bg-white/80 backdrop-blur-sm rounded-2xl shadow-md hover:shadow-xl transition-shadow duration-300 p-6 md:p-8 border border-[#e8d5c4] flex flex-col"><div class="flex items-start justify-between mb-3"><h3 class="text-lg md:text-xl font-medium text-[#3e2c1b] tracking-wide">ガトーショコラ</h3><span class="text-[#c8a27b] font-semibold text-base md:text-lg whitespace-nowrap ml-3">¥600</span></div><p class="text-[#7a5f4a] text-sm md:text-base leading-relaxed font-light">濃厚なチョコレートケーキ</p></div><div class="bg-white/80 backdrop-blur-sm rounded-2xl shadow-md hover:shadow-xl transition-shadow duration-300 p-6 md:p-8 border border-[#e8d5c4] flex flex-col"><div class="flex items-start justify-between mb-3"><h3 class="text-lg md:text-xl font-medium text-[#3e2c1b] tracking-wide">クロックムッシュ</h3><span class="text-[#c8a27b] font-semibold text-base md:text-lg whitespace-nowrap ml-3">¥680</span></div><p class="text-[#7a5f4a] text-sm md:text-base leading-relaxed font-light">とろけるチーズとハム</p></div></div><div class="text-center mt-12 md:mt-16"><p class="text-[#8b6f56] text-xs md:text-sm font-light tracking-widest">表示価格はすべて税込です</p></div></section><section class="bg-[#faf7f2] py-16 px-4"><div class="max-w-6xl mx-auto"><h2 class="text-3xl md:text-4xl font-serif text-center text-[#3e2c1b] mb-3 tracking-wide">ギャラリー</h2><p class="text-center text-[#7a6b5a] mb-10 text-sm md:text-base">ゆったりとした時間が流れる、私たちの空間</p><div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6"><div class="overflow-hidden rounded-2xl shadow-md hover:shadow-xl transition-shadow duration-300 bg-white"><img src="https://images.unsplash.com/photo-1501339847302-ac426a4a7cbb?w=600&amp;h=400&amp;fit=crop" alt="カフェの店内" class="w-full h-56 md:h-64 object-cover hover:scale-105 transition-transform duration-500" loading="lazy"/></div><div class="overflow-hidden rounded-2xl shadow-md hover:shadow-xl transition-shadow duration-300 bg-white"><img src="https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?w=600&amp;h=400&amp;fit=crop" alt="ラテアート" class="w-full h-56 md:h-64 object-cover hover:scale-105 transition-transform duration-500" loading="lazy"/></div><div class="overflow-hidden rounded-2xl shadow-md hover:shadow-xl transition-shadow duration-300 bg-white"><img src="https://images.unsplash.com/photo-1445116572660-236099ec97a0?w=600&amp;h=400&amp;fit=crop" alt="ケーキとコーヒー" class="w-full h-56 md:h-64 object-cover hover:scale-105 transition-transform duration-500" loading="lazy"/></div><div class="overflow-hidden rounded-2xl shadow-md hover:shadow-xl transition-shadow duration-300 bg-white"><img src="https://images.unsplash.com/photo-1559305616-3f99cd43e353?w=600&amp;h=400&amp;fit=crop" alt="パンケーキ" class="w-full h-56 md:h-64 object-cover hover:scale-105 transition-transform duration-500" loading="lazy"/></div><div class="overflow-hidden rounded-2xl shadow-md hover:shadow-xl transition-shadow duration-300 bg-white"><img src="https://images.unsplash.com/photo-1498804103079-a6351b050096?w=600&amp;h=400&amp;fit=crop" alt="コーヒー豆" class="w-full h-56 md:h-64 object-cover hover:scale-105 transition-transform duration-500" loading="lazy"/></div><div class="overflow-hidden rounded-2xl shadow-md hover:shadow-xl transition-shadow duration-300 bg-white"><img src="https://images.unsplash.com/photo-1453614512568-c4024d13c247?w=600&amp;h=400&amp;fit=crop" alt="カフェの外観" class="w-full h-56 md:h-64 object-cover hover:scale-105 transition-transform duration-500" loading="lazy"/></div></div></div></section><section class="w-full bg-[#faf6f0] py-16 px-4 md:px-8 lg:px-16"><div class="mx-auto max-w-6xl"><div class="mb-12 text-center"><h2 class="text-3xl font-light tracking-widest text-[#3e2c1b] md:text-4xl lg:text-5xl">アクセス</h2><div class="mx-auto mt-3 h-px w-16 bg-[#b8a58a]"></div></div><div class="flex flex-col items-center gap-8 md:flex-row md:items-start md:justify-center md:gap-12 lg:gap-20"><div class="h-64 w-full max-w-md overflow-hidden rounded-lg shadow-md md:h-72 md:w-80 lg:h-80 lg:w-96"><iframe title="一杯のコーヒーで、日常をちょっと特別に。" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3240.828030192588!2d139.764936!3d35.681236!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188bfbd89f700b%3A0x277c49ad62f72e!2sTokyo+Station!5e0!3m2!1sja!2sjp!4v1680000000000" class="h-full w-full border-0" loading="lazy" referrerPolicy="no-referrer-when-downgrade"></iframe></div><div class="flex flex-col items-center text-center md:items-start md:text-left"><div class="space-y-4 text-[#4a3728]"><div><p class="text-sm tracking-widest text-[#8b7a66]">住所</p><p class="mt-1 text-base font-light md:text-lg">〒100-0005<br/>東京都千代田区丸の内1-9-1</p></div><div><p class="text-sm tracking-widest text-[#8b7a66]">電話番号</p><p class="mt-1 text-base font-light md:text-lg">03-1234-5678</p></div><div><p class="text-sm tracking-widest text-[#8b7a66]">営業時間</p><p class="mt-1 text-base font-light md:text-lg">8:00 – 18:00（L.O. 17:30）<br/>定休日：水曜日</p></div></div><div class="mt-8"><a href="https://maps.google.com/?q=東京駅" target="_blank" rel="noopener noreferrer" class="inline-block rounded-full border border-[#b8a58a] px-8 py-3 text-sm tracking-widest text-[#4a3728] transition-colors duration-300 hover:bg-[#b8a58a] hover:text-white">Google Mapsで見る</a></div></div></div></div></section><section class="w-full bg-[#faf6f0] py-16 px-4 md:px-8 lg:px-16"><div class="max-w-4xl mx-auto text-center"><h2 class="text-3xl md:text-4xl lg:text-5xl font-serif text-[#4a3728] mb-4 tracking-wide">お問い合わせ</h2><p class="text-[#6b5a4a] text-base md:text-lg mb-10 leading-relaxed">ご予約・お問い合わせはお電話またはメールにて承ります。</p><div class="flex flex-col md:flex-row justify-center items-center gap-6 md:gap-12 mb-10"><div class="flex items-center gap-3"><span class="text-[#8b6f47] text-xl">📞</span><a href="tel:03-1234-5678" class="text-[#4a3728] text-lg md:text-xl font-medium hover:text-[#8b6f47] transition-colors">03-1234-5678</a></div><div class="flex items-center gap-3"><span class="text-[#8b6f47] text-xl">✉️</span><a href="mailto:info@cafe-example.jp" class="text-[#4a3728] text-lg md:text-xl font-medium hover:text-[#8b6f47] transition-colors">info@cafe-example.jp</a></div></div><div class="bg-white/70 backdrop-blur-sm rounded-2xl p-6 md:p-8 shadow-sm border border-[#e8ddd0] max-w-lg mx-auto"><p class="text-[#6b5a4a] text-sm md:text-base mb-2">〒150-0001</p><p class="text-[#4a3728] text-base md:text-lg font-medium">東京都渋谷区神宮前1-2-3</p><p class="text-[#6b5a4a] text-sm md:text-base mt-2">カフェビル 2F</p><div class="mt-4 pt-4 border-t border-[#e8ddd0]"><p class="text-[#6b5a4a] text-sm">営業時間 10:00 – 18:00（L.O. 17:30）</p><p class="text-[#6b5a4a] text-sm">定休日 毎週水曜日</p></div></div><div class="mt-10"><a href="#" class="inline-block bg-[#8b6f47] text-white px-8 py-3 rounded-full text-base md:text-lg font-medium hover:bg-[#6b5a4a] transition-colors shadow-sm">お問い合わせフォームへ</a></div></div></section><footer class="bg-[#2c1810] text-[#f5e6d3] py-8 md:py-12 px-4"><div class="max-w-6xl mx-auto flex flex-col md:flex-row items-center justify-between gap-6"><div class="text-center md:text-left"><h2 class="text-lg md:text-xl font-serif tracking-wider">喫茶 木もれ陽</h2><p class="text-sm text-[#c9a96e] mt-1">Komorebi Coffee</p></div><div class="text-center md:text-right text-sm space-y-1"><p>〒150-0001 東京都渋谷区神宮前1-2-3</p><p>03-1234-5678</p><p>月〜土 8:00〜18:00 / 日祝 10:00〜17:00</p></div></div><div class="border-t border-[#4a3728] mt-6 pt-4 text-center text-xs text-[#a08060]"><p>© 2026 喫茶 木もれ陽. All rights reserved.</p></div></footer></div>