カフェのホームページ（複製）

atomic.studio/s/3734

📄 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 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 -left-20 -top-20 h-72 w-72 rounded-full bg-[#e8d5c4] opacity-30 blur-3xl md:-left-32 md:-top-32 md:h-96 md:w-96"></div><div class="pointer-events-none absolute -bottom-16 -right-16 h-56 w-56 rounded-full bg-[#d9c5b0] opacity-25 blur-3xl md:-bottom-24 md:-right-24 md:h-80 md:w-80"></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-[#b8a08e] md:mb-8 md:w-20"></div><h2 class="font-serif text-4xl font-light tracking-widest text-[#3e2c1b] md:text-5xl lg:text-6xl">珈琲と、静かなひととき</h2><p class="mx-auto mt-6 max-w-xl text-base leading-relaxed text-[#5c4a36] md:mt-8 md:text-lg">焙煎したての香りと、やわらかな灯り。<br class="hidden sm:inline"/>日常の喧騒を忘れる、あなただけの場所。</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-48 border border-[#3e2c1b] bg-[#3e2c1b] px-8 py-3 text-center text-sm tracking-widest text-[#faf6f0] transition duration-300 hover:bg-[#5c4a36] hover:border-[#5c4a36] md:w-52 md:text-base">メニューを見る</a><a href="#access" class="inline-block w-48 border border-[#3e2c1b] px-8 py-3 text-center text-sm tracking-widest text-[#3e2c1b] transition duration-300 hover:bg-[#3e2c1b] hover:text-[#faf6f0] md:w-52 md:text-base">アクセス</a></div><div class="mx-auto mt-12 flex items-center justify-center gap-3 text-[#b8a08e] md:mt-16"><span class="block h-px w-8 bg-[#b8a08e]"></span><span class="font-serif text-xs tracking-[0.3em]">C A F E</span><span class="block h-px w-8 bg-[#b8a08e]"></span></div></div></section><div class="w-full max-w-2xl mx-auto px-4 py-8 md:py-12"><div class="bg-[#faf6f0] border border-[#e5d9c8] rounded-2xl shadow-lg p-6 md:p-10"><h2 class="text-2xl md:text-3xl font-serif text-[#4a3b2c] text-center tracking-wide mb-8">店舗情報</h2><div class="space-y-5 md:space-y-6"><div class="flex flex-col md:flex-row md:items-baseline border-b border-[#e5d9c8] pb-4"><span class="text-sm font-semibold text-[#8b7355] w-24 shrink-0">店名</span><span class="text-base md:text-lg text-[#3d2e1f] font-medium">木漏れ日カフェ</span></div><div class="flex flex-col md:flex-row md:items-baseline border-b border-[#e5d9c8] pb-4"><span class="text-sm font-semibold text-[#8b7355] w-24 shrink-0">住所</span><span class="text-base text-[#3d2e1f]">〒150-0001 東京都渋谷区神宮前1-2-3</span></div><div class="flex flex-col md:flex-row md:items-baseline border-b border-[#e5d9c8] pb-4"><span class="text-sm font-semibold text-[#8b7355] w-24 shrink-0">電話</span><a href="tel:0312345678" class="text-base text-[#3d2e1f] hover:text-[#a67c52] transition-colors">03-1234-5678</a></div><div class="flex flex-col md:flex-row md:items-baseline border-b border-[#e5d9c8] pb-4"><span class="text-sm font-semibold text-[#8b7355] w-24 shrink-0">営業時間</span><span class="text-base text-[#3d2e1f]">8:00 - 18:00</span></div><div class="flex flex-col md:flex-row md:items-baseline border-b border-[#e5d9c8] pb-4"><span class="text-sm font-semibold text-[#8b7355] w-24 shrink-0">定休日</span><span class="text-base text-[#3d2e1f]">不定休</span></div><div class="flex flex-col md:flex-row md:items-baseline border-b border-[#e5d9c8] pb-4"><span class="text-sm font-semibold text-[#8b7355] w-24 shrink-0">アクセス</span><span class="text-base text-[#3d2e1f]">東京メトロ「表参道」駅より徒歩3分</span></div><div class="flex flex-col md:flex-row md:items-baseline"><span class="text-sm font-semibold text-[#8b7355] w-24 shrink-0">備考</span><span class="text-sm text-[#6b5a48] italic">※ラストオーダーは閉店30分前</span></div></div><div class="mt-8 pt-6 border-t border-[#e5d9c8] text-center"><p class="text-xs text-[#a0907a]">最新の情報はお電話にてご確認ください</p></div></div></div><div class="min-h-screen bg-[#f5efe6] py-8 px-4 md:px-8 font-sans"><div class="max-w-5xl mx-auto"><div class="text-center mb-10"><h2 class="text-3xl md:text-4xl font-bold text-[#4a3728] tracking-wide">アクセスマップ</h2><div class="w-16 h-0.5 bg-[#b89b7a] mx-auto mt-3 mb-4"></div><p class="text-[#6b5a4a] text-sm md:text-base">各店舗の場所を地図でご確認いただけます</p></div><div class="bg-white rounded-2xl shadow-lg overflow-hidden mb-10 border border-[#e0d4c4]"><div class="relative w-full" style="padding-bottom:56.25%"><iframe title="一杯のコーヒーに、ひとときのしあわせを。" class="absolute top-0 left-0 w-full h-full border-0" src="https://www.openstreetmap.org/export/embed.html?bbox=139.65%2C35.60%2C139.73%2C35.68&amp;layer=mapnik&amp;marker=35.64%2C139.69" allowFullScreen="" loading="lazy"></iframe></div></div><div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6"><div class="bg-white rounded-xl p-5 shadow-md border border-[#e8ddd0] hover:shadow-lg transition-shadow duration-200"><h3 class="text-lg font-semibold text-[#4a3728] mb-2">珈琲 木漏れ日</h3><p class="text-sm text-[#7a6b5a] mb-1 flex items-start gap-1"><span class="inline-block mt-0.5">📍</span>東京都渋谷区神宮前1-2-3</p><p class="text-sm text-[#7a6b5a] flex items-center gap-1"><span>🕐</span>8:00-18:00</p><a href="https://www.openstreetmap.org/?mlat=35.671&amp;mlon=139.702#map=17/35.671/139.702" target="_blank" rel="noopener noreferrer" class="inline-block mt-3 text-xs text-[#b89b7a] hover:text-[#8a7056] underline underline-offset-2 transition-colors">大きな地図で見る →</a></div><div class="bg-white rounded-xl p-5 shadow-md border border-[#e8ddd0] hover:shadow-lg transition-shadow duration-200"><h3 class="text-lg font-semibold text-[#4a3728] mb-2">喫茶 森の音</h3><p class="text-sm text-[#7a6b5a] mb-1 flex items-start gap-1"><span class="inline-block mt-0.5">📍</span>東京都目黒区自由が丘2-4-6</p><p class="text-sm text-[#7a6b5a] flex items-center gap-1"><span>🕐</span>9:00-19:00</p><a href="https://www.openstreetmap.org/?mlat=35.607&amp;mlon=139.668#map=17/35.607/139.668" target="_blank" rel="noopener noreferrer" class="inline-block mt-3 text-xs text-[#b89b7a] hover:text-[#8a7056] underline underline-offset-2 transition-colors">大きな地図で見る →</a></div><div class="bg-white rounded-xl p-5 shadow-md border border-[#e8ddd0] hover:shadow-lg transition-shadow duration-200"><h3 class="text-lg font-semibold text-[#4a3728] mb-2">カフェ 陽だまり</h3><p class="text-sm text-[#7a6b5a] mb-1 flex items-start gap-1"><span class="inline-block mt-0.5">📍</span>東京都世田谷区代沢3-5-7</p><p class="text-sm text-[#7a6b5a] flex items-center gap-1"><span>🕐</span>7:30-17:30</p><a href="https://www.openstreetmap.org/?mlat=35.649&amp;mlon=139.667#map=17/35.649/139.667" target="_blank" rel="noopener noreferrer" class="inline-block mt-3 text-xs text-[#b89b7a] hover:text-[#8a7056] underline underline-offset-2 transition-colors">大きな地図で見る →</a></div><div class="bg-white rounded-xl p-5 shadow-md border border-[#e8ddd0] hover:shadow-lg transition-shadow duration-200"><h3 class="text-lg font-semibold text-[#4a3728] mb-2">茶房 風の庭</h3><p class="text-sm text-[#7a6b5a] mb-1 flex items-start gap-1"><span class="inline-block mt-0.5">📍</span>東京都港区南青山4-8-2</p><p class="text-sm text-[#7a6b5a] flex items-center gap-1"><span>🕐</span>10:00-20:00</p><a href="https://www.openstreetmap.org/?mlat=35.662&amp;mlon=139.714#map=17/35.662/139.714" target="_blank" rel="noopener noreferrer" class="inline-block mt-3 text-xs text-[#b89b7a] hover:text-[#8a7056] underline underline-offset-2 transition-colors">大きな地図で見る →</a></div></div><div class="text-center mt-12 text-xs text-[#a09080] border-t border-[#dccfc0] pt-6">© 2024 カフェのホームページ</div></div></div><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-[#3e2c1b] tracking-wide">お問い合わせ</h2><p class="mt-4 text-[#6b4f32] text-sm md:text-base leading-relaxed">ご予約・ご質問はこちらからお気軽にどうぞ</p></div><form class="bg-[#faf6f0] rounded-2xl shadow-lg p-6 md:p-10 space-y-6 border border-[#e8dccc]"><div><label for="name" class="block text-sm font-medium text-[#3e2c1b] mb-1">お名前 <span class="text-[#b85c3a]">*</span></label><input id="name" type="text" required="" placeholder="例：山田 花子" class="w-full px-4 py-3 rounded-lg border border-[#d4c5b0] bg-white text-[#3e2c1b] placeholder-[#a08b74] focus:outline-none focus:ring-2 focus:ring-[#b85c3a] focus:border-transparent transition"/></div><div><label for="email" class="block text-sm font-medium text-[#3e2c1b] mb-1">メールアドレス <span class="text-[#b85c3a]">*</span></label><input id="email" type="email" required="" placeholder="例：info@cafe.example.com" class="w-full px-4 py-3 rounded-lg border border-[#d4c5b0] bg-white text-[#3e2c1b] placeholder-[#a08b74] focus:outline-none focus:ring-2 focus:ring-[#b85c3a] focus:border-transparent transition"/></div><div><label for="phone" class="block text-sm font-medium text-[#3e2c1b] mb-1">電話番号</label><input id="phone" type="tel" placeholder="例：090-1234-5678" class="w-full px-4 py-3 rounded-lg border border-[#d4c5b0] bg-white text-[#3e2c1b] placeholder-[#a08b74] focus:outline-none focus:ring-2 focus:ring-[#b85c3a] focus:border-transparent transition"/></div><div><label for="subject" class="block text-sm font-medium text-[#3e2c1b] mb-1">お問い合わせ種別 <span class="text-[#b85c3a]">*</span></label><select id="subject" required="" class="w-full px-4 py-3 rounded-lg border border-[#d4c5b0] bg-white text-[#3e2c1b] focus:outline-none focus:ring-2 focus:ring-[#b85c3a] focus:border-transparent transition"><option value="" disabled="" selected="">選択してください</option><option value="reservation">ご予約</option><option value="menu">メニューについて</option><option value="event">イベント・貸切</option><option value="other">その他</option></select></div><div><label for="message" class="block text-sm font-medium text-[#3e2c1b] mb-1">メッセージ <span class="text-[#b85c3a]">*</span></label><textarea id="message" required="" rows="5" placeholder="お問い合わせ内容をご記入ください" class="w-full px-4 py-3 rounded-lg border border-[#d4c5b0] bg-white text-[#3e2c1b] placeholder-[#a08b74] focus:outline-none focus:ring-2 focus:ring-[#b85c3a] 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-[#b85c3a] hover:bg-[#9e4d2f] text-white font-medium rounded-full shadow-md hover:shadow-lg transition duration-200 tracking-wide">送信する</button></div></form></section><footer class="bg-[#2b1a0e] text-[#f5e6d3] py-10 px-4 md:px-8"><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>月〜土 8:00〜18:00 / 日 10:00〜17:00</p></div></div><div class="max-w-6xl mx-auto mt-6 mb-4 border-t border-[#5a3e2b]"></div><p class="text-center text-xs text-[#a0846a] tracking-wide">© 2026 喫茶 琥珀. All rights reserved.</p></footer></div>