カフェのホームページ

atomic.studio/s/3377

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

<div class="min-h-screen bg-zinc-950 text-white"><header class="w-full bg-[#fef6f0] shadow-sm"><div class="max-w-6xl mx-auto px-4 py-5 md:py-6 flex items-center justify-between"><div class="flex items-center gap-2"><span class="text-2xl md:text-3xl" role="img" aria-label="カフェ">☕</span><h1 class="text-xl md:text-2xl font-serif font-bold tracking-wide text-[#4a2c2a]">珈琲 木もれ陽</h1></div><nav class="hidden md:flex items-center gap-8 text-[#5c3a36] font-medium"><a href="#menu" class="hover:text-[#b87c5a] transition-colors duration-200">メニュー</a><a href="#about" class="hover:text-[#b87c5a] transition-colors duration-200">お店について</a><a href="#access" class="hover:text-[#b87c5a] transition-colors duration-200">アクセス</a><a href="#reserve" class="bg-[#b87c5a] text-white px-5 py-2 rounded-full text-sm hover:bg-[#9e6848] transition-colors duration-200 shadow-sm">ご予約</a></nav><div class="md:hidden flex items-center"><button class="p-2 rounded-md text-[#4a2c2a] hover:bg-[#e8d9ce] transition-colors" aria-label="メニューを開く"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"></path></svg></button></div></div><h2 class="sr-only">木もれ陽のヘッダー</h2></header><section class="relative flex min-h-[70vh] items-center justify-center overflow-hidden bg-[#faf6f0] px-4 py-20 md:min-h-[80vh] md:px-8 lg:px-16"><div class="pointer-events-none absolute inset-0 opacity-10"><div class="absolute left-0 top-0 h-64 w-64 rounded-full bg-[#d4b48c] blur-3xl"></div><div class="absolute bottom-0 right-0 h-80 w-80 rounded-full bg-[#b8a28c] blur-3xl"></div></div><div class="relative z-10 mx-auto max-w-4xl text-center"><div class="mx-auto mb-6 h-0.5 w-16 bg-[#c9a87c] md:mb-8 md:w-20"></div><h2 class="font-serif text-4xl leading-tight tracking-widest text-[#3e2c1b] md:text-5xl lg:text-6xl">珈琲と静寂の<br/>ひととき</h2><p class="mx-auto mt-6 max-w-xl text-base leading-relaxed text-[#6b5a4a] md:mt-8 md:text-lg">木の温もりと珈琲の香りに包まれた、大人の隠れ家。<br/>日常を忘れ、ゆっくりと流れる時間をお楽しみください。</p><div class="mt-10 flex flex-col items-center gap-4 sm:flex-row sm:justify-center md:mt-12"><a href="#menu" class="inline-block w-full rounded-full border-2 border-[#8b7355] bg-[#8b7355] px-10 py-3 text-sm font-medium tracking-widest text-white transition duration-300 hover:bg-[#6b5a4a] hover:border-[#6b5a4a] sm:w-auto">メニューを見る</a><a href="#access" class="inline-block w-full rounded-full border-2 border-[#8b7355] px-10 py-3 text-sm font-medium tracking-widest text-[#8b7355] transition duration-300 hover:bg-[#8b7355] hover:text-white sm:w-auto">アクセス</a></div><div class="mx-auto mt-12 flex items-center justify-center gap-3 text-[#c9a87c] md:mt-16"><span class="block h-px w-8 bg-[#c9a87c]"></span><span class="font-serif text-xs tracking-[0.3em]">Café</span><span class="block h-px w-8 bg-[#c9a87c]"></span></div></div></section><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 md:grid-cols-3 gap-6"><div class="bg-white rounded-2xl shadow-md hover:shadow-lg transition-shadow duration-300 p-5 border border-[#e8dccc] flex flex-col"><div class="flex items-start justify-between mb-2"><h3 class="text-lg font-semibold text-[#3e2c1a] leading-tight">ブレンドコーヒー</h3><span class="text-[#b8860b] font-bold text-base whitespace-nowrap ml-2">¥450</span></div><p class="text-sm text-[#6b5a4a] leading-relaxed mt-1">深煎りの香り豊かな一杯</p></div><div class="bg-white rounded-2xl shadow-md hover:shadow-lg transition-shadow duration-300 p-5 border border-[#e8dccc] flex flex-col"><div class="flex items-start justify-between mb-2"><h3 class="text-lg font-semibold text-[#3e2c1a] leading-tight">カフェラテ</h3><span class="text-[#b8860b] font-bold text-base whitespace-nowrap ml-2">¥500</span></div><p class="text-sm text-[#6b5a4a] leading-relaxed mt-1">エスプレッソとミルクの調和</p></div><div class="bg-white rounded-2xl shadow-md hover:shadow-lg transition-shadow duration-300 p-5 border border-[#e8dccc] flex flex-col"><div class="flex items-start justify-between mb-2"><h3 class="text-lg font-semibold text-[#3e2c1a] leading-tight">抹茶ラテ</h3><span class="text-[#b8860b] font-bold text-base whitespace-nowrap ml-2">¥550</span></div><p class="text-sm text-[#6b5a4a] leading-relaxed mt-1">京都宇治抹茶使用</p></div><div class="bg-white rounded-2xl shadow-md hover:shadow-lg transition-shadow duration-300 p-5 border border-[#e8dccc] flex flex-col"><div class="flex items-start justify-between mb-2"><h3 class="text-lg font-semibold text-[#3e2c1a] leading-tight">季節のフルーツタルト</h3><span class="text-[#b8860b] font-bold text-base whitespace-nowrap ml-2">¥650</span></div><p class="text-sm text-[#6b5a4a] leading-relaxed mt-1">旬の果実を贅沢に</p></div><div class="bg-white rounded-2xl shadow-md hover:shadow-lg transition-shadow duration-300 p-5 border border-[#e8dccc] flex flex-col"><div class="flex items-start justify-between mb-2"><h3 class="text-lg font-semibold text-[#3e2c1a] leading-tight">ガトーショコラ</h3><span class="text-[#b8860b] font-bold text-base whitespace-nowrap ml-2">¥600</span></div><p class="text-sm text-[#6b5a4a] leading-relaxed mt-1">濃厚なチョコレートケーキ</p></div></div></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="w-full max-w-6xl mx-auto px-4 py-12 md:py-20"><div class="text-center mb-10 md:mb-14"><h2 class="text-2xl md:text-4xl font-bold text-[#4a2c1a] tracking-wide">アクセス</h2><div class="w-16 h-0.5 bg-[#b88a5e] mx-auto mt-3 md:mt-4"></div><p class="text-sm md:text-base text-[#6b4c2e] mt-3 md:mt-4">落ち着いた空間で、特別なひとときをお過ごしください</p></div><div class="flex flex-col md:flex-row gap-8 md:gap-12 items-stretch"><div class="w-full md:w-3/5 rounded-2xl overflow-hidden shadow-lg border border-[#e5d5c0]"><iframe title="一杯のコーヒーで、日常にちょっとした贅沢を。" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.747975468483!2d139.743804315258!3d35.658580580199!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188bbd4b9b3b2f%3A0x8f0b5a7b5f5f5f5f!2z5p2x5Lqs6aeF!5e0!3m2!1sja!2sjp!4v1680000000000" class="w-full h-64 md:h-80 lg:h-96" style="border:0" loading="lazy" referrerPolicy="no-referrer-when-downgrade"></iframe></div><div class="w-full md:w-2/5 bg-[#faf6f0] rounded-2xl p-6 md:p-8 shadow-md border border-[#e5d5c0] flex flex-col justify-center"><div class="space-y-5 md:space-y-6"><div><h3 class="text-lg md:text-xl font-semibold text-[#4a2c1a] flex items-center gap-2"><span class="text-[#b88a5e]">📍</span> 住所</h3><p class="text-sm md:text-base text-[#5a3f28] mt-1 ml-7">〒150-0001<br/>東京都渋谷区神宮前1-2-3<br/>カフェビル 1F</p></div><div><h3 class="text-lg md:text-xl font-semibold text-[#4a2c1a] flex items-center gap-2"><span class="text-[#b88a5e]">🚃</span> 最寄り駅</h3><p class="text-sm md:text-base text-[#5a3f28] mt-1 ml-7">東京メトロ「表参道駅」A1出口より徒歩3分</p></div><div><h3 class="text-lg md:text-xl font-semibold text-[#4a2c1a] flex items-center gap-2"><span class="text-[#b88a5e]">🕐</span> 営業時間</h3><p class="text-sm md:text-base text-[#5a3f28] mt-1 ml-7">平日 8:00 – 20:00<br/>土日祝 9:00 – 21:00<br/><span class="text-xs text-[#8a6b4a]">※不定休あり</span></p></div><div><h3 class="text-lg md:text-xl font-semibold text-[#4a2c1a] flex items-center gap-2"><span class="text-[#b88a5e]">📞</span> お問い合わせ</h3><p class="text-sm md:text-base text-[#5a3f28] mt-1 ml-7">03-1234-5678</p></div></div><div class="mt-6 md:mt-8 pt-4 border-t border-[#e5d5c0]"><p class="text-xs md:text-sm text-[#8a6b4a] text-center">※駐車場はございません。公共交通機関をご利用ください。</p></div></div></div></div><section class="min-h-screen flex items-center justify-center bg-[#f5f0eb] px-4 py-12"><div class="bg-white p-8 md:p-12 rounded-2xl shadow-lg max-w-lg w-full"><h2 class="text-2xl md:text-3xl font-light text-[#2c2c2c] mb-2">お問い合わせ</h2><p class="text-[#6b6b6b] text-sm md:text-base mb-8">ご質問・ご依頼はこちらから</p><form noValidate=""><div class="mb-6"><label for="name" class="block text-sm font-medium text-[#4a4a4a] mb-1">お名前</label><input type="text" id="name" required="" class="w-full px-4 py-3 rounded-lg border border-[#d4cfc9] bg-[#faf8f6] text-[#2c2c2c] placeholder-[#b0a8a0] focus:outline-none focus:ring-2 focus:ring-[#c4a88a] focus:border-transparent transition" placeholder="例：山田 太郎" name="name" value=""/></div><div class="mb-6"><label for="email" class="block text-sm font-medium text-[#4a4a4a] mb-1">メールアドレス</label><input type="email" id="email" required="" class="w-full px-4 py-3 rounded-lg border border-[#d4cfc9] bg-[#faf8f6] text-[#2c2c2c] placeholder-[#b0a8a0] focus:outline-none focus:ring-2 focus:ring-[#c4a88a] focus:border-transparent transition" placeholder="example@mail.com" name="email" value=""/></div><div class="mb-8"><label for="message" class="block text-sm font-medium text-[#4a4a4a] mb-1">メッセージ</label><textarea id="message" name="message" rows="5" required="" class="w-full px-4 py-3 rounded-lg border border-[#d4cfc9] bg-[#faf8f6] text-[#2c2c2c] placeholder-[#b0a8a0] focus:outline-none focus:ring-2 focus:ring-[#c4a88a] focus:border-transparent transition resize-none" placeholder="お問い合わせ内容をご記入ください"></textarea></div><button type="submit" class="w-full py-3 px-6 bg-[#2c2c2c] text-white rounded-lg font-medium hover:bg-[#4a4a4a] transition duration-200 tracking-wide">送信する</button></form></div></section><footer class="w-full bg-[#2c1810] text-[#f5e6d3] py-10 px-6 md:px-12 lg:px-20"><h2 class="sr-only">フッター情報</h2><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"><p class="text-lg md:text-xl font-serif tracking-wide">珈琲 木もれ陽</p><p class="text-sm text-[#c9a87c] mt-1">自家焙煎・季節のスイーツ</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>営業時間 10:00 – 18:00（火曜定休）</p></div></div><div class="mt-8 pt-4 border-t border-[#4a3728] text-center text-xs text-[#a08060]"><p>© 2026 珈琲 木もれ陽</p></div></footer></div>