カフェのホームページ

atomic.studio/s/3304

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

<div class="min-h-screen bg-zinc-950 text-white"><header class="relative w-full bg-[#fdf6f0] px-4 py-6 md:px-8 md:py-8 lg:px-16 lg:py-10"><div class="mx-auto flex max-w-6xl 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="font-serif text-xl font-bold tracking-wide text-[#4a2c2a] md:text-2xl lg:text-3xl">喫茶 木もれ陽</h1></div><nav class="hidden gap-6 md:flex lg:gap-10"><a href="#menu" class="font-sans text-sm font-medium text-[#6b4f4a] transition-colors hover:text-[#b87c6b] lg:text-base">メニュー</a><a href="#about" class="font-sans text-sm font-medium text-[#6b4f4a] transition-colors hover:text-[#b87c6b] lg:text-base">お店について</a><a href="#access" class="font-sans text-sm font-medium text-[#6b4f4a] transition-colors hover:text-[#b87c6b] lg:text-base">アクセス</a></nav><button class="block md:hidden" aria-label="メニューを開く" type="button"><svg class="h-6 w-6 text-[#4a2c2a]" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg></button></div><div class="mx-auto mt-4 h-[2px] w-3/4 max-w-4xl bg-gradient-to-r from-transparent via-[#d9b8a8] to-transparent md:mt-6"></div><h2 class="sr-only">喫茶 木もれ陽 ヘッダー</h2></header><section class="relative w-full min-h-[70vh] md:min-h-[80vh] flex items-center justify-center overflow-hidden bg-[#f7f3eb]"><div class="absolute top-[-10%] right-[-10%] w-[60%] h-[60%] rounded-full opacity-20" style="background:radial-gradient(circle, #d4b48c 0%, transparent 70%)"></div><div class="absolute bottom-[-10%] left-[-10%] w-[50%] h-[50%] rounded-full opacity-15" style="background:radial-gradient(circle, #b89a7a 0%, transparent 70%)"></div><div class="relative z-10 text-center px-6 md:px-12 max-w-3xl mx-auto"><div class="flex items-center justify-center gap-3 mb-6"><span class="block w-8 h-px bg-[#8b6f4c]"></span><span class="block w-2 h-2 rounded-full bg-[#8b6f4c]"></span><span class="block w-8 h-px bg-[#8b6f4c]"></span></div><h2 class="text-4xl md:text-5xl lg:text-6xl font-serif tracking-wider text-[#3e2c1b] leading-tight">珈琲と静寂のひととき</h2><p class="mt-6 text-base md:text-lg text-[#5c4a34] leading-relaxed font-light tracking-wide">京都の路地裏にひっそりとたたずむ、大人の隠れ家カフェ。<br class="hidden md:block"/>一杯のコーヒーとともに、ゆるやかな時間をお過ごしください。</p><div class="mt-10"><a href="#menu" class="inline-block px-10 py-3 border border-[#8b6f4c] text-[#3e2c1b] tracking-widest text-sm uppercase hover:bg-[#8b6f4c] hover:text-[#f7f3eb] transition-all duration-300 ease-in-out">メニューを見る</a></div><div class="mt-12 flex items-center justify-center gap-2"><span class="block w-6 h-px bg-[#b89a7a]"></span><span class="block w-1 h-1 rounded-full bg-[#b89a7a]"></span><span class="block w-6 h-px bg-[#b89a7a]"></span></div></div></section><div class="w-full max-w-4xl mx-auto px-4 py-12 md:py-16 lg:py-20"><h2 class="text-2xl md:text-3xl lg:text-4xl font-serif text-center text-[#4a3728] mb-10 md:mb-14 tracking-wide">メニュー</h2><div class="space-y-10 md:space-y-14"><div><h3 class="text-lg md:text-xl font-semibold text-[#6b4f3a] border-b-2 border-[#d4b896] pb-2 mb-5 inline-block">ドリンク</h3><ul class="grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-4 md:gap-y-5"><li class="flex justify-between items-center py-2 px-3 rounded-lg hover:bg-[#f7efe6] transition-colors duration-200"><span class="text-[#3d2b1f] text-base md:text-lg font-medium">ブレンドコーヒー</span><span class="text-[#8b6f50] text-base md:text-lg font-mono whitespace-nowrap ml-4">¥450</span></li><li class="flex justify-between items-center py-2 px-3 rounded-lg hover:bg-[#f7efe6] transition-colors duration-200"><span class="text-[#3d2b1f] text-base md:text-lg font-medium">カフェラテ</span><span class="text-[#8b6f50] text-base md:text-lg font-mono whitespace-nowrap ml-4">¥500</span></li><li class="flex justify-between items-center py-2 px-3 rounded-lg hover:bg-[#f7efe6] transition-colors duration-200"><span class="text-[#3d2b1f] text-base md:text-lg font-medium">抹茶ラテ</span><span class="text-[#8b6f50] text-base md:text-lg font-mono whitespace-nowrap ml-4">¥550</span></li><li class="flex justify-between items-center py-2 px-3 rounded-lg hover:bg-[#f7efe6] transition-colors duration-200"><span class="text-[#3d2b1f] text-base md:text-lg font-medium">アイスコーヒー</span><span class="text-[#8b6f50] text-base md:text-lg font-mono whitespace-nowrap ml-4">¥450</span></li></ul></div><div><h3 class="text-lg md:text-xl font-semibold text-[#6b4f3a] border-b-2 border-[#d4b896] pb-2 mb-5 inline-block">フード</h3><ul class="grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-4 md:gap-y-5"><li class="flex justify-between items-center py-2 px-3 rounded-lg hover:bg-[#f7efe6] transition-colors duration-200"><span class="text-[#3d2b1f] text-base md:text-lg font-medium">季節のフルーツタルト</span><span class="text-[#8b6f50] text-base md:text-lg font-mono whitespace-nowrap ml-4">¥650</span></li><li class="flex justify-between items-center py-2 px-3 rounded-lg hover:bg-[#f7efe6] transition-colors duration-200"><span class="text-[#3d2b1f] text-base md:text-lg font-medium">クロックムッシュ</span><span class="text-[#8b6f50] text-base md:text-lg font-mono whitespace-nowrap ml-4">¥580</span></li><li class="flex justify-between items-center py-2 px-3 rounded-lg hover:bg-[#f7efe6] transition-colors duration-200"><span class="text-[#3d2b1f] text-base md:text-lg font-medium">バスクチーズケーキ</span><span class="text-[#8b6f50] text-base md:text-lg font-mono whitespace-nowrap ml-4">¥600</span></li><li class="flex justify-between items-center py-2 px-3 rounded-lg hover:bg-[#f7efe6] transition-colors duration-200"><span class="text-[#3d2b1f] text-base md:text-lg font-medium">サンドイッチセット</span><span class="text-[#8b6f50] text-base md:text-lg font-mono whitespace-nowrap ml-4">¥850</span></li></ul></div></div><p class="text-center text-sm text-[#8b6f50] mt-10 md:mt-14 italic">※表示価格はすべて税込です</p></div><div class="w-full max-w-xs mx-auto bg-white rounded-2xl shadow-lg overflow-hidden transition-transform duration-300 hover:scale-[1.02] hover:shadow-xl md:max-w-sm"><div class="relative overflow-hidden"><img src="https://images.unsplash.com/photo-1551024506-0bccd828d307?w=400&amp;h=300&amp;fit=crop&amp;auto=format" alt="季節のフルーツパフェ" class="w-full h-48 object-cover md:h-56" loading="lazy"/><div class="absolute top-3 right-3 bg-white/80 backdrop-blur-sm rounded-full px-3 py-1 text-sm font-bold text-[#5D4037] shadow">¥1,200</div></div><div class="p-4 md:p-5"><h2 class="text-lg font-bold text-[#4E342E] mb-2 tracking-wide md:text-xl">季節のフルーツパフェ</h2><p class="text-sm text-[#6D4C41] leading-relaxed md:text-base">厳選された旬のフルーツをたっぷり使用した、自家製ジェラートとサクサクのグラノーラが絶妙な一品。</p><button class="mt-4 w-full bg-[#8D6E63] hover:bg-[#6D4C41] text-white font-medium py-2.5 px-4 rounded-xl transition-colors duration-200 text-sm md:text-base tracking-wide">注文する</button></div></div><section class="w-full max-w-3xl mx-auto px-5 py-12 md:py-16"><h2 class="text-2xl md:text-3xl font-semibold tracking-wide text-[#3e2c1b] mb-8 text-center">アクセス情報</h2><div class="bg-[#f9f5ed] rounded-2xl shadow-md border border-[#e5d9c8] overflow-hidden"><div class="relative w-full h-56 md:h-72 bg-[#d9cdb8] flex items-center justify-center"><div class="text-center text-[#5c4a32]"><svg class="w-12 h-12 mx-auto mb-2 opacity-70" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><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><p class="text-sm md:text-base font-medium">MAP</p><p class="text-xs md:text-sm mt-1 opacity-80">※実際の地図画像が入ります</p></div></div><div class="p-5 md:p-7 space-y-4"><div class="flex flex-col sm:flex-row sm:items-baseline border-b border-[#e5d9c8] pb-3 last:border-b-0 last:pb-0"><span class="text-sm font-semibold text-[#7a654a] w-28 shrink-0">住所</span><span class="text-base md:text-lg text-[#3e2c1b] leading-relaxed">〒150-0001 東京都渋谷区神宮前1-2-3</span></div><div class="flex flex-col sm:flex-row sm:items-baseline border-b border-[#e5d9c8] pb-3 last:border-b-0 last:pb-0"><span class="text-sm font-semibold text-[#7a654a] w-28 shrink-0">営業時間</span><span class="text-base md:text-lg text-[#3e2c1b] leading-relaxed">8:00 – 18:00（ラストオーダー 17:30）</span></div><div class="flex flex-col sm:flex-row sm:items-baseline border-b border-[#e5d9c8] pb-3 last:border-b-0 last:pb-0"><span class="text-sm font-semibold text-[#7a654a] w-28 shrink-0">定休日</span><span class="text-base md:text-lg text-[#3e2c1b] leading-relaxed">毎週水曜日・第3木曜日</span></div><div class="flex flex-col sm:flex-row sm:items-baseline border-b border-[#e5d9c8] pb-3 last:border-b-0 last:pb-0"><span class="text-sm font-semibold text-[#7a654a] w-28 shrink-0">電話番号</span><span class="text-base md:text-lg text-[#3e2c1b] leading-relaxed">03-1234-5678</span></div><div class="flex flex-col sm:flex-row sm:items-baseline border-b border-[#e5d9c8] pb-3 last:border-b-0 last:pb-0"><span class="text-sm font-semibold text-[#7a654a] w-28 shrink-0">席数</span><span class="text-base md:text-lg text-[#3e2c1b] leading-relaxed">店内20席 / テラス6席</span></div><div class="flex flex-col sm:flex-row sm:items-baseline border-b border-[#e5d9c8] pb-3 last:border-b-0 last:pb-0"><span class="text-sm font-semibold text-[#7a654a] w-28 shrink-0">Wi-Fi</span><span class="text-base md:text-lg text-[#3e2c1b] leading-relaxed">あり（パスワード：cafe2026）</span></div></div></div><p class="text-center text-xs md:text-sm text-[#8b7a62] mt-6">※営業時間・定休日は変更になる場合がございます。最新情報はSNSをご確認ください。</p></section><section class="w-full max-w-4xl mx-auto px-4 py-16 md:py-24"><div class="text-center mb-12"><h2 class="text-3xl md:text-4xl font-serif text-[#3e2c1a] tracking-wide mb-3">お問い合わせ</h2><p class="text-[#6b4f32] text-sm md:text-base leading-relaxed max-w-md mx-auto">ご予約・ご質問はこちらからお気軽にどうぞ</p></div><form class="bg-[#faf6f0] rounded-2xl shadow-lg p-6 md:p-10 space-y-6 border border-[#e8dccc]"><div class="grid grid-cols-1 md:grid-cols-2 gap-5"><div><label for="name" class="block text-sm font-medium text-[#3e2c1a] mb-1.5">お名前 <span class="text-[#b8860b]">*</span></label><input type="text" id="name" required="" placeholder="例：山田 花子" class="w-full px-4 py-3 rounded-xl border border-[#d4c5b2] bg-white text-[#3e2c1a] placeholder-[#a08b76] focus:outline-none focus:ring-2 focus:ring-[#b8860b]/40 focus:border-[#b8860b] transition"/></div><div><label for="email" class="block text-sm font-medium text-[#3e2c1a] mb-1.5">メールアドレス <span class="text-[#b8860b]">*</span></label><input type="email" id="email" required="" placeholder="例：info@cafe.example" class="w-full px-4 py-3 rounded-xl border border-[#d4c5b2] bg-white text-[#3e2c1a] placeholder-[#a08b76] focus:outline-none focus:ring-2 focus:ring-[#b8860b]/40 focus:border-[#b8860b] transition"/></div></div><div><label for="phone" class="block text-sm font-medium text-[#3e2c1a] mb-1.5">お電話番号</label><input type="tel" id="phone" placeholder="例：090-1234-5678" class="w-full px-4 py-3 rounded-xl border border-[#d4c5b2] bg-white text-[#3e2c1a] placeholder-[#a08b76] focus:outline-none focus:ring-2 focus:ring-[#b8860b]/40 focus:border-[#b8860b] transition"/></div><div><label for="message" class="block text-sm font-medium text-[#3e2c1a] mb-1.5">お問い合わせ内容 <span class="text-[#b8860b]">*</span></label><textarea id="message" rows="5" required="" placeholder="ご予約希望日時・人数・ご質問などをお書きください" class="w-full px-4 py-3 rounded-xl border border-[#d4c5b2] bg-white text-[#3e2c1a] placeholder-[#a08b76] focus:outline-none focus:ring-2 focus:ring-[#b8860b]/40 focus:border-[#b8860b] transition resize-y"></textarea></div><div class="pt-2"><button type="submit" class="w-full md:w-auto px-10 py-3.5 bg-[#3e2c1a] hover:bg-[#5a3f28] text-white font-medium rounded-xl shadow-md hover:shadow-lg transition-all duration-200 tracking-wide">送信する</button></div><p class="text-xs text-[#8b7355] text-center pt-2 border-t border-[#e8dccc]">送信いただいた情報は、お問い合わせ対応以外の目的では使用いたしません。</p></form></section><footer class="border-t border-amber-200 bg-amber-50/80 text-amber-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-amber-950">Café Luminoso</h3><div class="space-y-2 text-sm leading-relaxed text-amber-800"><p>〒150-0001 東京都渋谷区神宮前1-2-3</p><p><a href="tel:0312345678" class="hover:text-amber-600 transition-colors">03-1234-5678</a></p><p><a href="mailto:info@cafeluminoso.jp" class="hover:text-amber-600 transition-colors">info@cafeluminoso.jp</a></p><p class="pt-1 text-xs text-amber-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-amber-800">メニュー</h4><ul class="space-y-2"><li><a href="#" class="text-sm text-amber-700 hover:text-amber-600 transition-colors">ドリンクメニュー</a></li><li><a href="#" class="text-sm text-amber-700 hover:text-amber-600 transition-colors">フードメニュー</a></li><li><a href="#" class="text-sm text-amber-700 hover:text-amber-600 transition-colors">スイーツ</a></li><li><a href="#" class="text-sm text-amber-700 hover:text-amber-600 transition-colors">季節のおすすめ</a></li></ul></div><div><h4 class="mb-3 text-sm font-semibold uppercase tracking-wider text-amber-800">店舗情報</h4><ul class="space-y-2"><li><a href="#" class="text-sm text-amber-700 hover:text-amber-600 transition-colors">私たちについて</a></li><li><a href="#" class="text-sm text-amber-700 hover:text-amber-600 transition-colors">店舗一覧</a></li><li><a href="#" class="text-sm text-amber-700 hover:text-amber-600 transition-colors">採用情報</a></li><li><a href="#" class="text-sm text-amber-700 hover:text-amber-600 transition-colors">お問い合わせ</a></li></ul></div><div><h4 class="mb-3 text-sm font-semibold uppercase tracking-wider text-amber-800">サポート</h4><ul class="space-y-2"><li><a href="#" class="text-sm text-amber-700 hover:text-amber-600 transition-colors">よくある質問</a></li><li><a href="#" class="text-sm text-amber-700 hover:text-amber-600 transition-colors">プライバシーポリシー</a></li><li><a href="#" class="text-sm text-amber-700 hover:text-amber-600 transition-colors">特定商取引法に基づく表記</a></li><li><a href="#" class="text-sm text-amber-700 hover:text-amber-600 transition-colors">サイトマップ</a></li></ul><div class="mt-6"><h4 class="mb-3 text-sm font-semibold uppercase tracking-wider text-amber-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-amber-200/70 text-amber-800 hover:bg-amber-300 hover:text-amber-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-amber-200/70 text-amber-800 hover:bg-amber-300 hover:text-amber-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-amber-200/70 text-amber-800 hover:bg-amber-300 hover:text-amber-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-amber-200/70 text-amber-800 hover:bg-amber-300 hover:text-amber-950 transition-all"><span class="text-base">💬</span></a></div></div></div></div><div class="mt-10 border-t border-amber-200 pt-6 text-center"><p class="text-xs text-amber-700">© 2026 Café Luminoso. All rights reserved.</p></div></div></footer></div>