カフェのホームページ

atomic.studio/s/3048

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

<div class="min-h-screen bg-zinc-950 text-white"><section class="relative flex flex-col items-center justify-center min-h-screen bg-[#f5efe6] px-6 py-20 md:py-32 overflow-hidden"><div class="absolute top-[-10%] left-[-10%] w-[300px] h-[300px] md:w-[500px] md:h-[500px] rounded-full bg-[#d9c5b2] opacity-20 blur-3xl pointer-events-none"></div><div class="absolute bottom-[-10%] right-[-10%] w-[250px] h-[250px] md:w-[400px] md:h-[400px] rounded-full bg-[#c7b5a0] opacity-20 blur-3xl pointer-events-none"></div><div class="relative z-10 text-center max-w-3xl mx-auto"><div class="text-6xl md:text-7xl mb-6 select-none" aria-hidden="true">☕</div><h2 class="text-4xl md:text-5xl lg:text-6xl font-serif font-bold text-[#3e2c1b] tracking-wide mb-4">自家焙煎コーヒーと<br class="md:hidden"/>静かなひととき</h2><p class="text-base md:text-lg text-[#5c4a36] leading-relaxed mb-10 max-w-xl mx-auto">街角の小さなカフェ。一杯ごとに心を込めて。<br/>ゆったり流れる時間の中で、あなただけの特別な一杯をお楽しみください。</p><div class="flex flex-col sm:flex-row items-center justify-center gap-4"><a href="#menu" class="inline-block bg-[#3e2c1b] text-[#f5efe6] font-medium px-8 py-3 rounded-full shadow-md hover:bg-[#2f1f12] transition-colors duration-300 text-sm md:text-base">メニューを見る</a><a href="#access" class="inline-block border-2 border-[#3e2c1b] text-[#3e2c1b] font-medium px-8 py-3 rounded-full hover:bg-[#3e2c1b] hover:text-[#f5efe6] transition-colors duration-300 text-sm md:text-base">アクセス</a></div></div><div class="absolute bottom-8 left-1/2 -translate-x-1/2 w-16 h-0.5 bg-[#b8a48e] rounded-full"></div></section><header class="relative w-full bg-[#fef6f0] text-[#3e2c1f] font-sans"><div class="mx-auto flex max-w-6xl 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 leading-none md:text-3xl">☕</span><h1 class="text-xl font-bold tracking-wide md:text-2xl">珈琲 木もれ陽</h1></div><nav class="hidden gap-8 text-sm font-medium md:flex lg:text-base"><a href="#menu" class="transition hover:text-[#a67c52]">メニュー</a><a href="#about" class="transition hover:text-[#a67c52]">お店について</a><a href="#access" class="transition hover:text-[#a67c52]">アクセス</a><a href="#contact" class="transition hover:text-[#a67c52]">お問い合わせ</a></nav><button class="flex flex-col items-center justify-center gap-1 md:hidden" aria-label="カフェ"><span class="block h-0.5 w-6 rounded bg-[#3e2c1f]"></span><span class="block h-0.5 w-6 rounded bg-[#3e2c1f]"></span><span class="block h-0.5 w-6 rounded bg-[#3e2c1f]"></span></button></div><div class="mx-auto h-px w-[calc(100%-3rem)] max-w-5xl bg-gradient-to-r from-transparent via-[#d9b382] to-transparent md:w-[calc(100%-5rem)]"></div><h2 class="sr-only">メインナビゲーション</h2></header><section class="w-full max-w-5xl mx-auto px-4 py-16 md:py-24"><div class="text-center mb-12 md:mb-16"><h2 class="text-3xl md:text-4xl font-serif tracking-wider text-[#3e2c1b] mb-3">メニュー</h2><div class="w-16 h-0.5 bg-[#c8a27b] mx-auto mb-4"></div><p class="text-[#6b5a4a] text-sm md:text-base font-light tracking-wide">心を込めてお届けする、こだわりの一品</p></div><div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8"><div class="bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 p-5 md:p-6 border border-[#f0e6db]"><div class="flex justify-between items-start mb-2"><h3 class="text-lg md:text-xl font-medium text-[#3e2c1b] tracking-wide">ブレンドコーヒー</h3><span class="text-[#c8a27b] font-semibold text-base md:text-lg whitespace-nowrap ml-2">¥480</span></div><p class="text-[#8a7a6a] text-sm md:text-base leading-relaxed">深煎りのオリジナルブレンド</p></div><div class="bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 p-5 md:p-6 border border-[#f0e6db]"><div class="flex justify-between items-start mb-2"><h3 class="text-lg md:text-xl font-medium text-[#3e2c1b] tracking-wide">カフェラテ</h3><span class="text-[#c8a27b] font-semibold text-base md:text-lg whitespace-nowrap ml-2">¥520</span></div><p class="text-[#8a7a6a] text-sm md:text-base leading-relaxed">エスプレッソとたっぷりのミルク</p></div><div class="bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 p-5 md:p-6 border border-[#f0e6db]"><div class="flex justify-between items-start mb-2"><h3 class="text-lg md:text-xl font-medium text-[#3e2c1b] tracking-wide">抹茶ラテ</h3><span class="text-[#c8a27b] font-semibold text-base md:text-lg whitespace-nowrap ml-2">¥580</span></div><p class="text-[#8a7a6a] text-sm md:text-base leading-relaxed">京都宇治抹茶使用</p></div><div class="bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 p-5 md:p-6 border border-[#f0e6db]"><div class="flex justify-between items-start mb-2"><h3 class="text-lg md:text-xl font-medium text-[#3e2c1b] tracking-wide">季節のフルーツタルト</h3><span class="text-[#c8a27b] font-semibold text-base md:text-lg whitespace-nowrap ml-2">¥680</span></div><p class="text-[#8a7a6a] text-sm md:text-base leading-relaxed">旬の果実を贅沢に</p></div><div class="bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 p-5 md:p-6 border border-[#f0e6db]"><div class="flex justify-between items-start mb-2"><h3 class="text-lg md:text-xl font-medium text-[#3e2c1b] tracking-wide">ガトーショコラ</h3><span class="text-[#c8a27b] font-semibold text-base md:text-lg whitespace-nowrap ml-2">¥620</span></div><p class="text-[#8a7a6a] text-sm md:text-base leading-relaxed">濃厚なチョコレートケーキ</p></div><div class="bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 p-5 md:p-6 border border-[#f0e6db]"><div class="flex justify-between items-start mb-2"><h3 class="text-lg md:text-xl font-medium text-[#3e2c1b] tracking-wide">クロックムッシュ</h3><span class="text-[#c8a27b] font-semibold text-base md:text-lg whitespace-nowrap ml-2">¥750</span></div><p class="text-[#8a7a6a] text-sm md:text-base leading-relaxed">とろけるチーズとハム</p></div></div></section><div class="w-full max-w-4xl mx-auto px-4 py-12 md:py-16"><div class="text-center mb-10 md:mb-14"><h2 class="text-3xl md:text-4xl font-serif text-[#4a3728] tracking-wide mb-2">メニュー</h2><div class="w-16 h-0.5 bg-[#c8a27b] mx-auto mb-4"></div><p class="text-[#7a6a5a] text-sm md:text-base">心を込めてお届けする、こだわりの一品</p></div><div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8"><div class="bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 overflow-hidden border border-[#f0e6dc]"><div class="h-2 bg-gradient-to-r from-[#d4b89b] to-[#c8a27b]"></div><div class="p-5 md:p-6"><div class="flex justify-between items-start mb-2"><h3 class="text-lg md:text-xl font-semibold text-[#4a3728]">ブレンドコーヒー</h3><span class="text-[#c8a27b] font-bold text-lg md:text-xl whitespace-nowrap ml-2">¥450</span></div><p class="text-[#8a7a6a] text-sm md:text-base leading-relaxed">深煎りのオリジナルブレンド</p></div></div><div class="bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 overflow-hidden border border-[#f0e6dc]"><div class="h-2 bg-gradient-to-r from-[#d4b89b] to-[#c8a27b]"></div><div class="p-5 md:p-6"><div class="flex justify-between items-start mb-2"><h3 class="text-lg md:text-xl font-semibold text-[#4a3728]">カフェラテ</h3><span class="text-[#c8a27b] font-bold text-lg md:text-xl whitespace-nowrap ml-2">¥500</span></div><p class="text-[#8a7a6a] text-sm md:text-base leading-relaxed">エスプレッソとスチームミルク</p></div></div><div class="bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 overflow-hidden border border-[#f0e6dc]"><div class="h-2 bg-gradient-to-r from-[#d4b89b] to-[#c8a27b]"></div><div class="p-5 md:p-6"><div class="flex justify-between items-start mb-2"><h3 class="text-lg md:text-xl font-semibold text-[#4a3728]">抹茶ラテ</h3><span class="text-[#c8a27b] font-bold text-lg md:text-xl whitespace-nowrap ml-2">¥550</span></div><p class="text-[#8a7a6a] text-sm md:text-base leading-relaxed">宇治抹茶を使用した和風ラテ</p></div></div><div class="bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 overflow-hidden border border-[#f0e6dc]"><div class="h-2 bg-gradient-to-r from-[#d4b89b] to-[#c8a27b]"></div><div class="p-5 md:p-6"><div class="flex justify-between items-start mb-2"><h3 class="text-lg md:text-xl font-semibold text-[#4a3728]">季節のフルーツタルト</h3><span class="text-[#c8a27b] font-bold text-lg md:text-xl whitespace-nowrap ml-2">¥650</span></div><p class="text-[#8a7a6a] text-sm md:text-base leading-relaxed">旬のフルーツをたっぷり</p></div></div><div class="bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 overflow-hidden border border-[#f0e6dc]"><div class="h-2 bg-gradient-to-r from-[#d4b89b] to-[#c8a27b]"></div><div class="p-5 md:p-6"><div class="flex justify-between items-start mb-2"><h3 class="text-lg md:text-xl font-semibold text-[#4a3728]">自家製チーズケーキ</h3><span class="text-[#c8a27b] font-bold text-lg md:text-xl whitespace-nowrap ml-2">¥600</span></div><p class="text-[#8a7a6a] text-sm md:text-base leading-relaxed">なめらかで濃厚な味わい</p></div></div><div class="bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 overflow-hidden border border-[#f0e6dc]"><div class="h-2 bg-gradient-to-r from-[#d4b89b] to-[#c8a27b]"></div><div class="p-5 md:p-6"><div class="flex justify-between items-start mb-2"><h3 class="text-lg md:text-xl font-semibold text-[#4a3728]">クロックムッシュ</h3><span class="text-[#c8a27b] font-bold text-lg md:text-xl whitespace-nowrap ml-2">¥700</span></div><p class="text-[#8a7a6a] text-sm md:text-base leading-relaxed">とろけるチーズとハムのホットサンド</p></div></div></div><div class="text-center mt-10 md:mt-14"><p class="text-[#7a6a5a] text-xs md:text-sm italic">※ 表示価格はすべて税込です</p></div></div><section class="w-full bg-[#faf6f0] py-16 px-4"><div class="max-w-6xl mx-auto"><h2 class="text-3xl md:text-4xl font-serif text-center text-[#4a3728] mb-3 tracking-wide">ギャラリー</h2><p class="text-center text-[#7a6b5a] mb-10 text-sm md:text-base">ゆったりとした空間と、こだわりの一杯をご覧ください</p><div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6"><div class="overflow-hidden rounded-2xl shadow-md hover:shadow-xl transition-shadow duration-300 bg-white"><img src="https://images.unsplash.com/photo-1501339847302-ac426a4a7cbb?w=400&amp;h=300&amp;fit=crop" alt="コーヒーとケーキ" class="w-full h-56 md:h-64 object-cover hover:scale-105 transition-transform duration-500" loading="lazy"/></div><div class="overflow-hidden rounded-2xl shadow-md hover:shadow-xl transition-shadow duration-300 bg-white"><img src="https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?w=400&amp;h=300&amp;fit=crop" alt="ラテアート" class="w-full h-56 md:h-64 object-cover hover:scale-105 transition-transform duration-500" loading="lazy"/></div><div class="overflow-hidden rounded-2xl shadow-md hover:shadow-xl transition-shadow duration-300 bg-white"><img src="https://images.unsplash.com/photo-1445116572660-236099ec97a0?w=400&amp;h=300&amp;fit=crop" alt="カフェの店内" class="w-full h-56 md:h-64 object-cover hover:scale-105 transition-transform duration-500" loading="lazy"/></div><div class="overflow-hidden rounded-2xl shadow-md hover:shadow-xl transition-shadow duration-300 bg-white"><img src="https://images.unsplash.com/photo-1559305616-3f99cd43e353?w=400&amp;h=300&amp;fit=crop" alt="スイーツプレート" class="w-full h-56 md:h-64 object-cover hover:scale-105 transition-transform duration-500" loading="lazy"/></div><div class="overflow-hidden rounded-2xl shadow-md hover:shadow-xl transition-shadow duration-300 bg-white"><img src="https://images.unsplash.com/photo-1509042239860-f550ce710b93?w=400&amp;h=300&amp;fit=crop" alt="コーヒー豆" class="w-full h-56 md:h-64 object-cover hover:scale-105 transition-transform duration-500" loading="lazy"/></div><div class="overflow-hidden rounded-2xl shadow-md hover:shadow-xl transition-shadow duration-300 bg-white"><img src="https://images.unsplash.com/photo-1461023058943-07fcbe16d735?w=400&amp;h=300&amp;fit=crop" alt="カフェラテ" class="w-full h-56 md:h-64 object-cover hover:scale-105 transition-transform duration-500" loading="lazy"/></div></div></div></section><section class="w-full bg-[#faf6f0] py-12 px-4 md:py-20 md:px-8"><div class="mx-auto max-w-6xl"><div class="mb-10 text-center md:mb-16"><h2 class="mb-3 text-2xl font-semibold tracking-wide text-[#3e2c1b] md:text-4xl">ご利用案内</h2><div class="mx-auto h-0.5 w-16 bg-[#b58a5b] md:w-20"></div></div><div class="grid gap-6 md:grid-cols-3 md:gap-8"><div class="rounded-2xl bg-white p-6 shadow-sm md:p-8"><div class="mb-4 flex items-center justify-center"><span class="flex h-12 w-12 items-center justify-center rounded-full bg-[#e8d5c4] text-lg font-bold text-[#3e2c1b] md:h-14 md:w-14 md:text-xl">01</span></div><h3 class="mb-2 text-center text-lg font-semibold text-[#3e2c1b] md:text-xl">営業時間</h3><p class="text-center text-sm leading-relaxed text-[#5c4a36] md:text-base">平日 8:00 – 18:00<br/>土日祝 9:00 – 19:00<br/>定休日：毎週水曜</p></div><div class="rounded-2xl bg-white p-6 shadow-sm md:p-8"><div class="mb-4 flex items-center justify-center"><span class="flex h-12 w-12 items-center justify-center rounded-full bg-[#e8d5c4] text-lg font-bold text-[#3e2c1b] md:h-14 md:w-14 md:text-xl">02</span></div><h3 class="mb-2 text-center text-lg font-semibold text-[#3e2c1b] md:text-xl">アクセス</h3><p class="text-center text-sm leading-relaxed text-[#5c4a36] md:text-base">〒150-0001<br/>東京都渋谷区神宮前1-2-3<br/>地下鉄「表参道駅」徒歩3分</p></div><div class="rounded-2xl bg-white p-6 shadow-sm md:p-8"><div class="mb-4 flex items-center justify-center"><span class="flex h-12 w-12 items-center justify-center rounded-full bg-[#e8d5c4] text-lg font-bold text-[#3e2c1b] md:h-14 md:w-14 md:text-xl">03</span></div><h3 class="mb-2 text-center text-lg font-semibold text-[#3e2c1b] md:text-xl">お問い合わせ</h3><p class="text-center text-sm leading-relaxed text-[#5c4a36] md:text-base">TEL 03-1234-5678<br/>info@cafe-example.jp<br/>お気軽にどうぞ</p></div></div><div class="mt-10 text-center md:mt-14"><p class="inline-block rounded-full bg-[#3e2c1b] px-8 py-3 text-sm font-medium tracking-wide text-white shadow-md transition hover:bg-[#5c4a36] md:text-base">Google マップで見る</p></div></div></section><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-[#6b4f3a] text-sm md:text-base leading-relaxed max-w-md mx-auto">ご予約・ご質問はお気軽にどうぞ</p></div><form class="bg-[#faf6f0] rounded-2xl shadow-md px-6 py-8 md:px-10 md:py-10 space-y-6 border border-[#e6d9cc]"><div class="grid grid-cols-1 md:grid-cols-2 gap-5"><div><label for="name" class="block text-sm font-medium text-[#3e2c1b] mb-1.5">お名前 <span class="text-[#b87c5a]">*</span></label><input id="name" type="text" required="" placeholder="例：山田 花子" class="w-full rounded-lg border border-[#d4c5b5] bg-white px-4 py-2.5 text-sm text-[#3e2c1b] placeholder-[#b09a86] focus:outline-none focus:ring-2 focus:ring-[#b87c5a] focus:border-transparent transition"/></div><div><label for="email" class="block text-sm font-medium text-[#3e2c1b] mb-1.5">メールアドレス <span class="text-[#b87c5a]">*</span></label><input id="email" type="email" required="" placeholder="例：info@cafe.example" class="w-full rounded-lg border border-[#d4c5b5] bg-white px-4 py-2.5 text-sm text-[#3e2c1b] placeholder-[#b09a86] focus:outline-none focus:ring-2 focus:ring-[#b87c5a] focus:border-transparent transition"/></div></div><div><label for="phone" class="block text-sm font-medium text-[#3e2c1b] mb-1.5">電話番号（任意）</label><input id="phone" type="tel" placeholder="例：090-1234-5678" class="w-full rounded-lg border border-[#d4c5b5] bg-white px-4 py-2.5 text-sm text-[#3e2c1b] placeholder-[#b09a86] focus:outline-none focus:ring-2 focus:ring-[#b87c5a] focus:border-transparent transition"/></div><div><label for="guests" class="block text-sm font-medium text-[#3e2c1b] mb-1.5">ご来店人数（任意）</label><select id="guests" class="w-full rounded-lg border border-[#d4c5b5] bg-white px-4 py-2.5 text-sm text-[#3e2c1b] focus:outline-none focus:ring-2 focus:ring-[#b87c5a] focus:border-transparent transition"><option value="" disabled="" selected="">選択してください</option><option value="1">1名様</option><option value="2">2名様</option><option value="3">3名様</option><option value="4">4名様</option><option value="5">5名様</option><option value="6">6名様</option><option value="7">7名様</option><option value="8">8名様</option><option value="more">9名様以上</option></select></div><div><label for="message" class="block text-sm font-medium text-[#3e2c1b] mb-1.5">お問い合わせ内容 <span class="text-[#b87c5a]">*</span></label><textarea id="message" rows="4" required="" placeholder="ご予約希望日時・アレルギーなどお気軽にご記入ください" class="w-full rounded-lg border border-[#d4c5b5] bg-white px-4 py-2.5 text-sm text-[#3e2c1b] placeholder-[#b09a86] focus:outline-none focus:ring-2 focus:ring-[#b87c5a] 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-[#8b6b4d] hover:bg-[#7a5d42] active:bg-[#6a4f37] text-white font-medium rounded-full shadow-sm transition duration-200 text-sm md:text-base tracking-wide">送信する</button></div><p class="text-xs text-[#8f7a68] text-center md:text-left pt-1"><span class="text-[#b87c5a]">*</span> は必須項目です</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>