カフェのホームページ

atomic.studio/s/3070

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

<div class="min-h-screen bg-zinc-950 text-white"><header class="relative w-full bg-[#faf3eb] text-[#3e2c1f] font-sans"><div class="mx-auto flex max-w-7xl items-center justify-between px-6 py-5 md:px-10 lg:px-16"><div class="flex items-center gap-2"><span class="text-2xl md:text-3xl lg:text-4xl">☕</span><span class="text-xl font-bold tracking-wide md:text-2xl lg:text-3xl">喫茶 ひだまり</span></div><nav class="hidden items-center gap-8 text-base font-medium md:flex lg:gap-12 lg:text-lg"><a href="#" class="transition hover:text-[#b87c4b]">メニュー</a><a href="#" class="transition hover:text-[#b87c4b]">店内</a><a href="#" class="transition hover:text-[#b87c4b]">アクセス</a><a href="#" class="rounded-full bg-[#b87c4b] px-5 py-2 text-white transition hover:bg-[#9e6638]">ご予約</a></nav><button class="flex flex-col gap-1 md:hidden" aria-label="カフェ"><span class="block h-0.5 w-6 bg-[#3e2c1f]"></span><span class="block h-0.5 w-6 bg-[#3e2c1f]"></span><span class="block h-0.5 w-6 bg-[#3e2c1f]"></span></button></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-[#faf6f0]"><div class="absolute inset-0 pointer-events-none"><div class="absolute top-[-10%] left-[-10%] w-[60%] h-[60%] rounded-full bg-[#e8d5c4] opacity-30 blur-3xl"></div><div class="absolute bottom-[-10%] right-[-10%] w-[50%] h-[50%] rounded-full bg-[#d4b8a0] opacity-20 blur-3xl"></div></div><div class="relative z-10 text-center px-6 md:px-12 max-w-4xl mx-auto"><div class="flex items-center justify-center gap-3 mb-6"><span class="block w-8 h-px bg-[#8b6f5c]"></span><span class="text-[#8b6f5c] text-sm tracking-[0.3em] font-light">自家焙煎と静かなひととき</span><span class="block w-8 h-px bg-[#8b6f5c]"></span></div><h2 class="text-5xl md:text-7xl lg:text-8xl font-serif text-[#3e2c1f] tracking-wide leading-tight mb-6">珈琲<span class="block text-2xl md:text-3xl lg:text-4xl font-sans font-light tracking-[0.2em] text-[#6b4f3a] mt-2">木漏れ日</span></h2><p class="text-base md:text-lg text-[#5c4535] max-w-xl mx-auto leading-relaxed mb-10 font-light">一杯の珈琲に、ほんの少しの贅沢を。<br/>ゆっくりと流れる時間の中で、あなただけの特別な味わいをお楽しみください。</p><div class="flex flex-col sm:flex-row items-center justify-center gap-4"><a href="#menu" class="inline-block px-10 py-3.5 bg-[#3e2c1f] text-[#faf6f0] text-sm tracking-widest uppercase hover:bg-[#5c4535] transition-colors duration-300">メニューを見る</a><a href="#access" class="inline-block px-10 py-3.5 border border-[#8b6f5c] text-[#3e2c1f] text-sm tracking-widest uppercase hover:bg-[#8b6f5c] hover:text-[#faf6f0] transition-colors duration-300">アクセス</a></div><div class="mt-12 flex justify-center"><div class="flex items-center gap-2"><span class="w-16 h-px bg-[#d4b8a0]"></span><span class="text-[#b89a82] text-xs tracking-[0.5em]">✦</span><span class="w-16 h-px bg-[#d4b8a0]"></span></div></div></div><div class="absolute bottom-0 left-0 right-0 h-24 bg-gradient-to-t from-[#faf6f0] to-transparent pointer-events-none"></div></section><div class="w-full max-w-4xl mx-auto px-4 py-12 bg-[#faf6f0]"><h2 class="text-3xl md:text-4xl font-serif text-center text-[#4a3728] mb-2 tracking-wide">メニュー</h2><p class="text-center text-[#8b7a6a] text-sm mb-10 font-light">心を込めた一杯と、ほっとするひとときを</p><div class="space-y-10"><div><h3 class="text-xl md:text-2xl font-serif text-[#5c4a3a] border-b border-[#d9c9b8] pb-2 mb-5 inline-block">ドリンク</h3><div class="grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-4"><div class="flex justify-between items-center py-2 border-b border-dashed border-[#e3d6c8]"><span class="text-[#3d2e22] text-base md:text-lg font-medium">ブレンドコーヒー</span><span class="text-[#7a6856] text-base md:text-lg font-semibold whitespace-nowrap ml-4">¥450</span></div><div class="flex justify-between items-center py-2 border-b border-dashed border-[#e3d6c8]"><span class="text-[#3d2e22] text-base md:text-lg font-medium">カフェラテ</span><span class="text-[#7a6856] text-base md:text-lg font-semibold whitespace-nowrap ml-4">¥500</span></div><div class="flex justify-between items-center py-2 border-b border-dashed border-[#e3d6c8]"><span class="text-[#3d2e22] text-base md:text-lg font-medium">抹茶ラテ</span><span class="text-[#7a6856] text-base md:text-lg font-semibold whitespace-nowrap ml-4">¥550</span></div><div class="flex justify-between items-center py-2 border-b border-dashed border-[#e3d6c8]"><span class="text-[#3d2e22] text-base md:text-lg font-medium">ホットチョコレート</span><span class="text-[#7a6856] text-base md:text-lg font-semibold whitespace-nowrap ml-4">¥480</span></div></div></div><div><h3 class="text-xl md:text-2xl font-serif text-[#5c4a3a] border-b border-[#d9c9b8] pb-2 mb-5 inline-block">フード</h3><div class="grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-4"><div class="flex justify-between items-center py-2 border-b border-dashed border-[#e3d6c8]"><span class="text-[#3d2e22] text-base md:text-lg font-medium">季節のフルーツタルト</span><span class="text-[#7a6856] text-base md:text-lg font-semibold whitespace-nowrap ml-4">¥650</span></div><div class="flex justify-between items-center py-2 border-b border-dashed border-[#e3d6c8]"><span class="text-[#3d2e22] text-base md:text-lg font-medium">クロックムッシュ</span><span class="text-[#7a6856] text-base md:text-lg font-semibold whitespace-nowrap ml-4">¥580</span></div><div class="flex justify-between items-center py-2 border-b border-dashed border-[#e3d6c8]"><span class="text-[#3d2e22] text-base md:text-lg font-medium">スコーン（プレーン）</span><span class="text-[#7a6856] text-base md:text-lg font-semibold whitespace-nowrap ml-4">¥350</span></div><div class="flex justify-between items-center py-2 border-b border-dashed border-[#e3d6c8]"><span class="text-[#3d2e22] text-base md:text-lg font-medium">チーズケーキ</span><span class="text-[#7a6856] text-base md:text-lg font-semibold whitespace-nowrap ml-4">¥600</span></div></div></div></div><div class="mt-12 text-center text-[#9b8a7a] text-xs tracking-widest">＊価格はすべて税込です</div></div><div class="w-full max-w-4xl mx-auto px-4 py-8"><h2 class="text-2xl md:text-3xl font-serif text-[#4a3728] text-center mb-8 tracking-wide">メニュー</h2><div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6"><div class="bg-white rounded-2xl shadow-md hover:shadow-lg transition-shadow duration-300 overflow-hidden border border-[#e8dccc]"><div class="h-36 bg-gradient-to-br from-[#f5efe6] to-[#e8dccc] flex items-center justify-center"><span class="text-5xl text-[#b8a48c]">☕</span></div><div class="p-4"><div class="flex items-center justify-between mb-2"><h3 class="text-lg font-semibold text-[#4a3728]">ブレンドコーヒー</h3><span class="text-[#8b6f4e] font-bold text-sm">¥450</span></div><p class="text-sm text-[#7a6b5a] leading-relaxed">深煎りの自家焙煎</p></div></div><div class="bg-white rounded-2xl shadow-md hover:shadow-lg transition-shadow duration-300 overflow-hidden border border-[#e8dccc]"><div class="h-36 bg-gradient-to-br from-[#f5efe6] to-[#e8dccc] flex items-center justify-center"><span class="text-5xl text-[#b8a48c]">☕</span></div><div class="p-4"><div class="flex items-center justify-between mb-2"><h3 class="text-lg font-semibold text-[#4a3728]">カフェラテ</h3><span class="text-[#8b6f4e] font-bold text-sm">¥500</span></div><p class="text-sm text-[#7a6b5a] leading-relaxed">エスプレッソとスチームミルク</p></div></div><div class="bg-white rounded-2xl shadow-md hover:shadow-lg transition-shadow duration-300 overflow-hidden border border-[#e8dccc]"><div class="h-36 bg-gradient-to-br from-[#f5efe6] to-[#e8dccc] flex items-center justify-center"><span class="text-5xl text-[#b8a48c]">☕</span></div><div class="p-4"><div class="flex items-center justify-between mb-2"><h3 class="text-lg font-semibold text-[#4a3728]">抹茶ラテ</h3><span class="text-[#8b6f4e] font-bold text-sm">¥550</span></div><p class="text-sm text-[#7a6b5a] leading-relaxed">京都宇治抹茶使用</p></div></div><div class="bg-white rounded-2xl shadow-md hover:shadow-lg transition-shadow duration-300 overflow-hidden border border-[#e8dccc]"><div class="h-36 bg-gradient-to-br from-[#f5efe6] to-[#e8dccc] flex items-center justify-center"><span class="text-5xl text-[#b8a48c]">☕</span></div><div class="p-4"><div class="flex items-center justify-between mb-2"><h3 class="text-lg font-semibold text-[#4a3728]">季節のフルーツタルト</h3><span class="text-[#8b6f4e] font-bold text-sm">¥650</span></div><p class="text-sm text-[#7a6b5a] leading-relaxed">日替わりフレッシュフルーツ</p></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-[#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-[#e5d9cc]"><div><label for="name" class="block text-sm font-medium text-[#3e2c1b] mb-1.5">お名前 <span class="text-[#b87333]">*</span></label><input id="name" type="text" required="" placeholder="例：山田 花子" class="w-full px-4 py-3 rounded-xl border border-[#d9cdbe] bg-white text-[#3e2c1b] placeholder-[#b3a18c] focus:outline-none focus:ring-2 focus:ring-[#b87333]/40 focus:border-[#b87333] transition"/></div><div><label for="email" class="block text-sm font-medium text-[#3e2c1b] mb-1.5">メールアドレス <span class="text-[#b87333]">*</span></label><input id="email" type="email" required="" placeholder="例：info@cafe.example.com" class="w-full px-4 py-3 rounded-xl border border-[#d9cdbe] bg-white text-[#3e2c1b] placeholder-[#b3a18c] focus:outline-none focus:ring-2 focus:ring-[#b87333]/40 focus:border-[#b87333] transition"/></div><div><label for="tel" class="block text-sm font-medium text-[#3e2c1b] mb-1.5">電話番号</label><input id="tel" type="tel" placeholder="例：090-1234-5678" class="w-full px-4 py-3 rounded-xl border border-[#d9cdbe] bg-white text-[#3e2c1b] placeholder-[#b3a18c] focus:outline-none focus:ring-2 focus:ring-[#b87333]/40 focus:border-[#b87333] transition"/></div><div><label for="message" class="block text-sm font-medium text-[#3e2c1b] mb-1.5">お問い合わせ内容 <span class="text-[#b87333]">*</span></label><textarea id="message" rows="5" required="" placeholder="ご予約希望日時・人数、ご質問などをお書きください" class="w-full px-4 py-3 rounded-xl border border-[#d9cdbe] bg-white text-[#3e2c1b] placeholder-[#b3a18c] focus:outline-none focus:ring-2 focus:ring-[#b87333]/40 focus:border-[#b87333] transition resize-y"></textarea></div><div class="pt-2"><button type="submit" class="w-full md:w-auto px-10 py-3.5 bg-[#b87333] hover:bg-[#a0642a] active:bg-[#8c5523] text-white font-medium rounded-xl shadow-md hover:shadow-lg transition-all duration-200 tracking-wide">送信する</button></div></form></section><section class="w-full max-w-2xl mx-auto px-4 py-10 md:py-16"><h2 class="text-2xl md:text-3xl font-bold text-center text-[#3e2c1a] mb-8 tracking-wide">アクセス情報</h2><div class="bg-[#faf6f0] border border-[#e5d9cc] rounded-2xl shadow-sm p-6 md:p-8 space-y-5"><div class="overflow-hidden rounded-xl mb-2"><iframe title="一杯のコーヒーで、今日がもっと素敵になる。" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.747975468483!2d139.702744!3d35.672655!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188c9f0b0b0b0b%3A0x123456789abcdef!2z44CSMTUwLTAwMDEg5p2x5Lqs6YO95riL6LC35Yy65p2x5YyX5YmN77yR5LiB55uu77yS4oiS77yT!5e0!3m2!1sja!2sjp!4v1688888888888" width="100%" height="240" style="border:0" loading="lazy" referrerPolicy="no-referrer-when-downgrade" class="rounded-xl"></iframe></div><ul class="divide-y divide-[#e5d9cc]"><li class="flex flex-col sm:flex-row sm:items-baseline py-3 gap-1 sm:gap-3"><span class="text-sm font-semibold text-[#7a5c3a] whitespace-nowrap min-w-[6rem]">住所</span><span class="text-[#3e2c1a] text-sm md:text-base leading-relaxed">〒150-0001 東京都渋谷区神宮前1-2-3</span></li><li class="flex flex-col sm:flex-row sm:items-baseline py-3 gap-1 sm:gap-3"><span class="text-sm font-semibold text-[#7a5c3a] whitespace-nowrap min-w-[6rem]">営業時間</span><span class="text-[#3e2c1a] text-sm md:text-base leading-relaxed">平日 8:00 - 18:00 / 土日祝 9:00 - 19:00</span></li><li class="flex flex-col sm:flex-row sm:items-baseline py-3 gap-1 sm:gap-3"><span class="text-sm font-semibold text-[#7a5c3a] whitespace-nowrap min-w-[6rem]">定休日</span><span class="text-[#3e2c1a] text-sm md:text-base leading-relaxed">毎週水曜日・年末年始</span></li><li class="flex flex-col sm:flex-row sm:items-baseline py-3 gap-1 sm:gap-3"><span class="text-sm font-semibold text-[#7a5c3a] whitespace-nowrap min-w-[6rem]">電話番号</span><span class="text-[#3e2c1a] text-sm md:text-base leading-relaxed">03-1234-5678</span></li><li class="flex flex-col sm:flex-row sm:items-baseline py-3 gap-1 sm:gap-3"><span class="text-sm font-semibold text-[#7a5c3a] whitespace-nowrap min-w-[6rem]">席数</span><span class="text-[#3e2c1a] text-sm md:text-base leading-relaxed">店内20席 / テラス6席</span></li><li class="flex flex-col sm:flex-row sm:items-baseline py-3 gap-1 sm:gap-3"><span class="text-sm font-semibold text-[#7a5c3a] whitespace-nowrap min-w-[6rem]">Wi-Fi</span><span class="text-[#3e2c1a] text-sm md:text-base leading-relaxed">全席無料Wi-Fi完備</span></li></ul><div class="pt-2 text-center"><p class="text-xs text-[#9a8a7a]">※最新の情報は各公式サイトをご確認ください</p></div></div></section><footer class="bg-[#2c1810] text-[#f5e6d3] py-10 px-4 md:px-8"><div class="max-w-5xl 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-wide">喫茶 木もれ陽</h2><p class="text-sm text-[#c9a88c] mt-1">小さな隠れ家カフェ</p></div><div class="text-center text-sm space-y-1"><p>営業時間 10:00 – 18:00</p><p>定休日 月曜・火曜</p></div><div class="text-center text-sm"><p>東京都千代田区神田</p><p>猿楽町2-1-3</p></div><div class="text-center text-xs text-[#a0806a] border-t border-[#4a3525] pt-4 md:border-t-0 md:pt-0 md:self-end"><p>© 2026 喫茶 木もれ陽</p></div></div></footer></div>