カフェのホームページ

atomic.studio/s/3104

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

<div class="min-h-screen bg-zinc-950 text-white"><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 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>