イベント（テンプレートから）

atomic.studio/s/3720

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

<div class="min-h-screen bg-zinc-950 text-white"><section class="w-full max-w-3xl mx-auto px-4 py-8 md:py-12 lg:py-16"><div class="bg-[#fef9f0] border border-[#e6d5b8] rounded-2xl shadow-lg p-6 md:p-8 lg:p-10"><h2 class="text-2xl md:text-3xl lg:text-4xl font-bold text-[#3e2c1a] tracking-wide mb-6 border-b-2 border-[#d4b68a] pb-3">フェス概要</h2><dl class="space-y-4 md:space-y-5"><div class="flex flex-col sm:flex-row sm:items-baseline gap-1 sm:gap-3"><dt class="text-sm md:text-base font-semibold text-[#7a5c3a] whitespace-nowrap min-w-[6rem]">イベント名</dt><dd class="text-base md:text-lg text-[#3e2c1a] font-medium">地域の音楽フェス 2026</dd></div><div class="flex flex-col sm:flex-row sm:items-baseline gap-1 sm:gap-3"><dt class="text-sm md:text-base font-semibold text-[#7a5c3a] whitespace-nowrap min-w-[6rem]">開催日</dt><dd class="text-base md:text-lg text-[#3e2c1a]">2026年6月3日（土）・4日（日）</dd></div><div class="flex flex-col sm:flex-row sm:items-baseline gap-1 sm:gap-3"><dt class="text-sm md:text-base font-semibold text-[#7a5c3a] whitespace-nowrap min-w-[6rem]">時間</dt><dd class="text-base md:text-lg text-[#3e2c1a]">開場 10:00 / 開演 11:00</dd></div><div class="flex flex-col sm:flex-row sm:items-baseline gap-1 sm:gap-3"><dt class="text-sm md:text-base font-semibold text-[#7a5c3a] whitespace-nowrap min-w-[6rem]">会場</dt><dd class="text-base md:text-lg text-[#3e2c1a]">○○公園 野外特設ステージ<span class="block text-sm text-[#8a7a66] mt-0.5">〒123-4567 東京都○○区○○町1-2-3</span></dd></div><div class="flex flex-col sm:flex-row sm:items-baseline gap-1 sm:gap-3"><dt class="text-sm md:text-base font-semibold text-[#7a5c3a] whitespace-nowrap min-w-[6rem]">料金</dt><dd class="text-base md:text-lg text-[#3e2c1a]">前売 ￥5,500 / 当日 ￥6,500</dd></div></dl><div class="mt-6 pt-5 border-t border-[#e6d5b8]"><p class="text-sm md:text-base text-[#4d3a28] leading-relaxed whitespace-pre-line">地元アーティストから全国区のゲストまで、多彩な音楽が一堂に集結。
キッチンカーやワークショップも充実。家族みんなで楽しめる2日間。</p></div><div class="mt-5 bg-[#f5ede1] rounded-lg px-4 py-3 text-xs md:text-sm text-[#6b5a44]"><span class="font-semibold">※</span> 雨天決行・荒天中止。チケットは各プレイガイドにて発売中。</div></div></section><section class="w-full max-w-5xl mx-auto px-4 py-12 md:py-16 lg:py-20"><h2 class="text-2xl md:text-3xl lg:text-4xl font-bold tracking-wide text-center mb-10 md:mb-14 lg:mb-16 text-[#f5e6d3] drop-shadow-lg">出演アーティスト一覧</h2><div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5 md:gap-6 lg:gap-8"><div class="relative group bg-[#2a241e]/80 backdrop-blur-sm border border-[#d4a373]/40 rounded-2xl p-5 md:p-6 lg:p-7 shadow-lg hover:shadow-2xl hover:border-[#d4a373]/70 transition-all duration-300 ease-in-out"><div class="absolute top-0 left-6 right-6 h-0.5 bg-gradient-to-r from-transparent via-[#d4a373] to-transparent opacity-60 group-hover:opacity-100 transition-opacity"></div><div class="flex flex-col items-start gap-2"><span class="inline-block text-xs md:text-sm font-mono tracking-widest text-[#d4a373] bg-[#d4a373]/10 px-3 py-1 rounded-full border border-[#d4a373]/20">Day 1 — 7/19</span><h3 class="text-xl md:text-2xl lg:text-3xl font-bold text-[#f5e6d3] mt-1 leading-tight">Luminous Echo</h3><p class="text-sm md:text-base text-[#c4b5a0] font-light tracking-wide">エレクトロポップ</p></div><div class="absolute bottom-3 right-4 flex gap-1.5 opacity-30 group-hover:opacity-70 transition-opacity"><span class="w-1.5 h-1.5 rounded-full bg-[#d4a373]"></span><span class="w-1.5 h-1.5 rounded-full bg-[#d4a373]/60"></span><span class="w-1.5 h-1.5 rounded-full bg-[#d4a373]/30"></span></div></div><div class="relative group bg-[#2a241e]/80 backdrop-blur-sm border border-[#d4a373]/40 rounded-2xl p-5 md:p-6 lg:p-7 shadow-lg hover:shadow-2xl hover:border-[#d4a373]/70 transition-all duration-300 ease-in-out"><div class="absolute top-0 left-6 right-6 h-0.5 bg-gradient-to-r from-transparent via-[#d4a373] to-transparent opacity-60 group-hover:opacity-100 transition-opacity"></div><div class="flex flex-col items-start gap-2"><span class="inline-block text-xs md:text-sm font-mono tracking-widest text-[#d4a373] bg-[#d4a373]/10 px-3 py-1 rounded-full border border-[#d4a373]/20">Day 1 — 7/19</span><h3 class="text-xl md:text-2xl lg:text-3xl font-bold text-[#f5e6d3] mt-1 leading-tight">風の旅団</h3><p class="text-sm md:text-base text-[#c4b5a0] font-light tracking-wide">フォークロック</p></div><div class="absolute bottom-3 right-4 flex gap-1.5 opacity-30 group-hover:opacity-70 transition-opacity"><span class="w-1.5 h-1.5 rounded-full bg-[#d4a373]"></span><span class="w-1.5 h-1.5 rounded-full bg-[#d4a373]/60"></span><span class="w-1.5 h-1.5 rounded-full bg-[#d4a373]/30"></span></div></div><div class="relative group bg-[#2a241e]/80 backdrop-blur-sm border border-[#d4a373]/40 rounded-2xl p-5 md:p-6 lg:p-7 shadow-lg hover:shadow-2xl hover:border-[#d4a373]/70 transition-all duration-300 ease-in-out"><div class="absolute top-0 left-6 right-6 h-0.5 bg-gradient-to-r from-transparent via-[#d4a373] to-transparent opacity-60 group-hover:opacity-100 transition-opacity"></div><div class="flex flex-col items-start gap-2"><span class="inline-block text-xs md:text-sm font-mono tracking-widest text-[#d4a373] bg-[#d4a373]/10 px-3 py-1 rounded-full border border-[#d4a373]/20">Day 2 — 7/20</span><h3 class="text-xl md:text-2xl lg:text-3xl font-bold text-[#f5e6d3] mt-1 leading-tight">Midnight Groove</h3><p class="text-sm md:text-base text-[#c4b5a0] font-light tracking-wide">ファンク／ソウル</p></div><div class="absolute bottom-3 right-4 flex gap-1.5 opacity-30 group-hover:opacity-70 transition-opacity"><span class="w-1.5 h-1.5 rounded-full bg-[#d4a373]"></span><span class="w-1.5 h-1.5 rounded-full bg-[#d4a373]/60"></span><span class="w-1.5 h-1.5 rounded-full bg-[#d4a373]/30"></span></div></div><div class="relative group bg-[#2a241e]/80 backdrop-blur-sm border border-[#d4a373]/40 rounded-2xl p-5 md:p-6 lg:p-7 shadow-lg hover:shadow-2xl hover:border-[#d4a373]/70 transition-all duration-300 ease-in-out"><div class="absolute top-0 left-6 right-6 h-0.5 bg-gradient-to-r from-transparent via-[#d4a373] to-transparent opacity-60 group-hover:opacity-100 transition-opacity"></div><div class="flex flex-col items-start gap-2"><span class="inline-block text-xs md:text-sm font-mono tracking-widest text-[#d4a373] bg-[#d4a373]/10 px-3 py-1 rounded-full border border-[#d4a373]/20">Day 2 — 7/20</span><h3 class="text-xl md:text-2xl lg:text-3xl font-bold text-[#f5e6d3] mt-1 leading-tight">彩音 -Ayane-</h3><p class="text-sm md:text-base text-[#c4b5a0] font-light tracking-wide">J-POP／シティポップ</p></div><div class="absolute bottom-3 right-4 flex gap-1.5 opacity-30 group-hover:opacity-70 transition-opacity"><span class="w-1.5 h-1.5 rounded-full bg-[#d4a373]"></span><span class="w-1.5 h-1.5 rounded-full bg-[#d4a373]/60"></span><span class="w-1.5 h-1.5 rounded-full bg-[#d4a373]/30"></span></div></div><div class="relative group bg-[#2a241e]/80 backdrop-blur-sm border border-[#d4a373]/40 rounded-2xl p-5 md:p-6 lg:p-7 shadow-lg hover:shadow-2xl hover:border-[#d4a373]/70 transition-all duration-300 ease-in-out"><div class="absolute top-0 left-6 right-6 h-0.5 bg-gradient-to-r from-transparent via-[#d4a373] to-transparent opacity-60 group-hover:opacity-100 transition-opacity"></div><div class="flex flex-col items-start gap-2"><span class="inline-block text-xs md:text-sm font-mono tracking-widest text-[#d4a373] bg-[#d4a373]/10 px-3 py-1 rounded-full border border-[#d4a373]/20">Day 3 — 7/21</span><h3 class="text-xl md:text-2xl lg:text-3xl font-bold text-[#f5e6d3] mt-1 leading-tight">The Rustic Waves</h3><p class="text-sm md:text-base text-[#c4b5a0] font-light tracking-wide">サーフロック</p></div><div class="absolute bottom-3 right-4 flex gap-1.5 opacity-30 group-hover:opacity-70 transition-opacity"><span class="w-1.5 h-1.5 rounded-full bg-[#d4a373]"></span><span class="w-1.5 h-1.5 rounded-full bg-[#d4a373]/60"></span><span class="w-1.5 h-1.5 rounded-full bg-[#d4a373]/30"></span></div></div><div class="relative group bg-[#2a241e]/80 backdrop-blur-sm border border-[#d4a373]/40 rounded-2xl p-5 md:p-6 lg:p-7 shadow-lg hover:shadow-2xl hover:border-[#d4a373]/70 transition-all duration-300 ease-in-out"><div class="absolute top-0 left-6 right-6 h-0.5 bg-gradient-to-r from-transparent via-[#d4a373] to-transparent opacity-60 group-hover:opacity-100 transition-opacity"></div><div class="flex flex-col items-start gap-2"><span class="inline-block text-xs md:text-sm font-mono tracking-widest text-[#d4a373] bg-[#d4a373]/10 px-3 py-1 rounded-full border border-[#d4a373]/20">Day 3 — 7/21</span><h3 class="text-xl md:text-2xl lg:text-3xl font-bold text-[#f5e6d3] mt-1 leading-tight">都響 -Tone-</h3><p class="text-sm md:text-base text-[#c4b5a0] font-light tracking-wide">ミニマル／アンビエント</p></div><div class="absolute bottom-3 right-4 flex gap-1.5 opacity-30 group-hover:opacity-70 transition-opacity"><span class="w-1.5 h-1.5 rounded-full bg-[#d4a373]"></span><span class="w-1.5 h-1.5 rounded-full bg-[#d4a373]/60"></span><span class="w-1.5 h-1.5 rounded-full bg-[#d4a373]/30"></span></div></div></div><p class="text-center text-xs md:text-sm text-[#c4b5a0]/60 mt-10 md:mt-14 lg:mt-16 tracking-wider border-t border-[#d4a373]/20 pt-6 max-w-md mx-auto">掲載アーティストは予告なく変更になる場合がございます。</p></section><article class="w-full max-w-sm mx-auto bg-[#0f0f1a] text-gray-100 rounded-2xl shadow-2xl overflow-hidden border border-[#2a2a4a] transition-transform duration-300 hover:scale-[1.02] hover:shadow-[#7b61ff]/30 md:max-w-md lg:max-w-lg"><div class="relative"><img src="https://placehold.co/400x400/1a1a2e/eeeeee?text=MIYABI" alt="ミヤビ・サウンド" class="w-full h-56 object-cover md:h-64 lg:h-72" loading="lazy"/><div class="absolute inset-0 bg-gradient-to-t from-[#0f0f1a] via-transparent to-transparent"></div><span class="absolute bottom-3 left-3 bg-[#7b61ff] text-xs font-bold px-3 py-1 rounded-full tracking-wider uppercase shadow-lg">出演アーティスト</span></div><div class="p-5 space-y-4 md:p-6 lg:p-7"><div><h2 class="text-2xl font-extrabold tracking-tight md:text-3xl">ミヤビ・サウンド</h2><p class="text-sm text-[#a78bfa] mt-1 font-medium">エレクトロ・ポップ / シンセウェイヴ</p></div><p class="text-sm leading-relaxed text-gray-300 md:text-base">静岡県出身。シンセサイザーと和楽器を融合した唯一無二のサウンドで、国内外のフェスを席巻中。2025年最新アルバム『夜光航路』が話題。</p><div class="flex items-center gap-2 bg-[#1a1a30] rounded-xl px-4 py-3 border border-[#2a2a4a]"><svg class="w-5 h-5 text-[#7b61ff] shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg><span class="text-sm font-semibold md:text-base">8月23日(土) 19:00〜 メインステージ</span></div><div class="flex flex-wrap gap-3 pt-1"><a href="https://example.com/miyabi" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-1.5 text-xs font-medium text-[#b8a9ff] hover:text-white transition-colors underline underline-offset-4 decoration-[#7b61ff]/50 hover:decoration-[#7b61ff]"><svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"></path></svg>Official Site</a><a href="https://twitter.com/miyabi_music" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-1.5 text-xs font-medium text-[#b8a9ff] hover:text-white transition-colors underline underline-offset-4 decoration-[#7b61ff]/50 hover:decoration-[#7b61ff]"><svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M22.46 6c-.85.38-1.78.64-2.73.76 1-.6 1.76-1.54 2.12-2.67-.93.55-1.96.95-3.06 1.17-.88-.94-2.13-1.53-3.5-1.53-2.65 0-4.8 2.15-4.8 4.8 0 .38.04.75.12 1.1-4-.2-7.55-2.12-9.93-5.04-.42.72-.66 1.56-.66 2.46 0 1.7.86 3.2 2.17 4.08-.8-.02-1.55-.24-2.2-.6v.06c0 2.37 1.68 4.35 3.92 4.8-.4.1-.83.16-1.27.16-.31 0-.62-.03-.92-.08.63 1.96 2.45 3.38 4.6 3.42-1.68 1.32-3.8 2.1-6.1 2.1-.4 0-.78-.02-1.17-.07 2.17 1.4 4.75 2.22 7.52 2.22 9.02 0 13.96-7.48 13.96-13.96 0-.21 0-.42-.02-.63.96-.7 1.8-1.57 2.46-2.56z"></path></svg>X (Twitter)</a><a href="https://instagram.com/miyabi_official" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-1.5 text-xs font-medium text-[#b8a9ff] hover:text-white transition-colors underline underline-offset-4 decoration-[#7b61ff]/50 hover:decoration-[#7b61ff]"><svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"></path></svg>Instagram</a></div></div></article><div class="w-full max-w-4xl mx-auto px-4 py-10 md:py-16"><h2 class="text-3xl md:text-4xl font-bold text-center text-yellow-300 mb-2 tracking-wide drop-shadow-lg">タイムテーブル</h2><p class="text-center text-sm md:text-base text-yellow-100/80 mb-8 md:mb-10">地域の音楽フェス 2026 — スケジュール</p><div class="space-y-3 md:space-y-4"><div class="flex flex-col sm:flex-row items-start sm:items-center justify-between bg-white/10 backdrop-blur-sm border border-yellow-300/30 rounded-xl px-5 py-4 md:px-6 md:py-5 shadow-lg hover:bg-white/15 transition-colors duration-200"><div class="flex items-center gap-3 mb-2 sm:mb-0"><span class="text-yellow-300 font-mono text-lg md:text-xl font-bold min-w-[5rem]">10:00</span><span class="text-white font-semibold text-base md:text-lg">Opening Act</span></div><div class="flex items-center gap-2 text-sm md:text-base text-yellow-200/90"><svg class="w-4 h-4 md:w-5 md:h-5 text-yellow-300/70" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></svg><span>Sun Stage</span></div></div><div class="flex flex-col sm:flex-row items-start sm:items-center justify-between bg-white/10 backdrop-blur-sm border border-yellow-300/30 rounded-xl px-5 py-4 md:px-6 md:py-5 shadow-lg hover:bg-white/15 transition-colors duration-200"><div class="flex items-center gap-3 mb-2 sm:mb-0"><span class="text-yellow-300 font-mono text-lg md:text-xl font-bold min-w-[5rem]">11:30</span><span class="text-white font-semibold text-base md:text-lg">Local Heroes</span></div><div class="flex items-center gap-2 text-sm md:text-base text-yellow-200/90"><svg class="w-4 h-4 md:w-5 md:h-5 text-yellow-300/70" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></svg><span>Moon Stage</span></div></div><div class="flex flex-col sm:flex-row items-start sm:items-center justify-between bg-white/10 backdrop-blur-sm border border-yellow-300/30 rounded-xl px-5 py-4 md:px-6 md:py-5 shadow-lg hover:bg-white/15 transition-colors duration-200"><div class="flex items-center gap-3 mb-2 sm:mb-0"><span class="text-yellow-300 font-mono text-lg md:text-xl font-bold min-w-[5rem]">13:00</span><span class="text-white font-semibold text-base md:text-lg">The Groove Collective</span></div><div class="flex items-center gap-2 text-sm md:text-base text-yellow-200/90"><svg class="w-4 h-4 md:w-5 md:h-5 text-yellow-300/70" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></svg><span>Sun Stage</span></div></div><div class="flex flex-col sm:flex-row items-start sm:items-center justify-between bg-white/10 backdrop-blur-sm border border-yellow-300/30 rounded-xl px-5 py-4 md:px-6 md:py-5 shadow-lg hover:bg-white/15 transition-colors duration-200"><div class="flex items-center gap-3 mb-2 sm:mb-0"><span class="text-yellow-300 font-mono text-lg md:text-xl font-bold min-w-[5rem]">14:45</span><span class="text-white font-semibold text-base md:text-lg">DJ Sunset</span></div><div class="flex items-center gap-2 text-sm md:text-base text-yellow-200/90"><svg class="w-4 h-4 md:w-5 md:h-5 text-yellow-300/70" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></svg><span>Moon Stage</span></div></div><div class="flex flex-col sm:flex-row items-start sm:items-center justify-between bg-white/10 backdrop-blur-sm border border-yellow-300/30 rounded-xl px-5 py-4 md:px-6 md:py-5 shadow-lg hover:bg-white/15 transition-colors duration-200"><div class="flex items-center gap-3 mb-2 sm:mb-0"><span class="text-yellow-300 font-mono text-lg md:text-xl font-bold min-w-[5rem]">16:30</span><span class="text-white font-semibold text-base md:text-lg">Main Act: 星空バンド</span></div><div class="flex items-center gap-2 text-sm md:text-base text-yellow-200/90"><svg class="w-4 h-4 md:w-5 md:h-5 text-yellow-300/70" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></svg><span>Sun Stage</span></div></div><div class="flex flex-col sm:flex-row items-start sm:items-center justify-between bg-white/10 backdrop-blur-sm border border-yellow-300/30 rounded-xl px-5 py-4 md:px-6 md:py-5 shadow-lg hover:bg-white/15 transition-colors duration-200"><div class="flex items-center gap-3 mb-2 sm:mb-0"><span class="text-yellow-300 font-mono text-lg md:text-xl font-bold min-w-[5rem]">18:15</span><span class="text-white font-semibold text-base md:text-lg">After Party Set</span></div><div class="flex items-center gap-2 text-sm md:text-base text-yellow-200/90"><svg class="w-4 h-4 md:w-5 md:h-5 text-yellow-300/70" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></svg><span>Moon Stage</span></div></div><div class="flex flex-col sm:flex-row items-start sm:items-center justify-between bg-white/10 backdrop-blur-sm border border-yellow-300/30 rounded-xl px-5 py-4 md:px-6 md:py-5 shadow-lg hover:bg-white/15 transition-colors duration-200"><div class="flex items-center gap-3 mb-2 sm:mb-0"><span class="text-yellow-300 font-mono text-lg md:text-xl font-bold min-w-[5rem]">20:00</span><span class="text-white font-semibold text-base md:text-lg">Fire Jam Session</span></div><div class="flex items-center gap-2 text-sm md:text-base text-yellow-200/90"><svg class="w-4 h-4 md:w-5 md:h-5 text-yellow-300/70" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></svg><span>Sun Stage</span></div></div></div><div class="mt-10 text-center text-yellow-200/60 text-xs md:text-sm border-t border-yellow-300/20 pt-6">※ スケジュールは予告なく変更になる場合がございます。</div></div><div class="w-full max-w-4xl mx-auto px-4 py-8"><h2 class="text-2xl md:text-3xl font-bold text-center mb-6 text-[#fbbf24] drop-shadow-lg">🎪 会場マップ</h2><div class="relative w-full aspect-[4/3] bg-gradient-to-b from-[#1e3a5f] to-[#0f1f2e] rounded-2xl border-2 border-[#fbbf24]/40 shadow-2xl overflow-hidden"><div class="absolute inset-0 opacity-10"><div class="grid grid-cols-6 grid-rows-6 h-full"><div class="border border-white/20"></div><div class="border border-white/20"></div><div class="border border-white/20"></div><div class="border border-white/20"></div><div class="border border-white/20"></div><div class="border border-white/20"></div><div class="border border-white/20"></div><div class="border border-white/20"></div><div class="border border-white/20"></div><div class="border border-white/20"></div><div class="border border-white/20"></div><div class="border border-white/20"></div><div class="border border-white/20"></div><div class="border border-white/20"></div><div class="border border-white/20"></div><div class="border border-white/20"></div><div class="border border-white/20"></div><div class="border border-white/20"></div><div class="border border-white/20"></div><div class="border border-white/20"></div><div class="border border-white/20"></div><div class="border border-white/20"></div><div class="border border-white/20"></div><div class="border border-white/20"></div><div class="border border-white/20"></div><div class="border border-white/20"></div><div class="border border-white/20"></div><div class="border border-white/20"></div><div class="border border-white/20"></div><div class="border border-white/20"></div><div class="border border-white/20"></div><div class="border border-white/20"></div><div class="border border-white/20"></div><div class="border border-white/20"></div><div class="border border-white/20"></div><div class="border border-white/20"></div></div></div><div class="absolute transform -translate-x-1/2 -translate-y-1/2 bg-[#f97316] text-white text-xs md:text-sm font-bold px-3 py-1.5 md:px-4 md:py-2 rounded-lg shadow-lg border border-white/30 whitespace-nowrap z-10" style="left:50%;top:20%">⚡ メインステージ</div><div class="absolute transform -translate-x-1/2 -translate-y-1/2 bg-[#8b5cf6] text-white text-xs md:text-sm font-bold px-3 py-1.5 md:px-4 md:py-2 rounded-lg shadow-lg border border-white/30 whitespace-nowrap z-10" style="left:20%;top:55%">⚡ サブステージ</div><div class="absolute transform -translate-x-1/2 -translate-y-1/2 bg-[#10b981] text-white text-xs md:text-sm font-bold px-3 py-1.5 md:px-4 md:py-2 rounded-lg shadow-lg border border-white/30 whitespace-nowrap z-10" style="left:80%;top:55%">⚡ アコースティックステージ</div><div class="absolute transform -translate-x-1/2 -translate-y-1/2 bg-[#ec4899] text-white text-xs md:text-sm font-bold px-3 py-1.5 md:px-4 md:py-2 rounded-lg shadow-lg border border-white/30 whitespace-nowrap z-10" style="left:50%;top:75%">⚡ DJブース</div><div class="absolute transform -translate-x-1/2 -translate-y-1/2 flex flex-col items-center z-20" style="left:50%;top:5%"><span class="text-xl md:text-2xl drop-shadow-lg">🚪</span><span class="text-[10px] md:text-xs text-white/90 bg-black/50 px-1.5 py-0.5 rounded-full mt-0.5 whitespace-nowrap">入場ゲート</span></div><div class="absolute transform -translate-x-1/2 -translate-y-1/2 flex flex-col items-center z-20" style="left:10%;top:80%"><span class="text-xl md:text-2xl drop-shadow-lg">🍔</span><span class="text-[10px] md:text-xs text-white/90 bg-black/50 px-1.5 py-0.5 rounded-full mt-0.5 whitespace-nowrap">フードエリア</span></div><div class="absolute transform -translate-x-1/2 -translate-y-1/2 flex flex-col items-center z-20" style="left:90%;top:80%"><span class="text-xl md:text-2xl drop-shadow-lg">🍺</span><span class="text-[10px] md:text-xs text-white/90 bg-black/50 px-1.5 py-0.5 rounded-full mt-0.5 whitespace-nowrap">ドリンクバー</span></div><div class="absolute transform -translate-x-1/2 -translate-y-1/2 flex flex-col items-center z-20" style="left:5%;top:40%"><span class="text-xl md:text-2xl drop-shadow-lg">🚻</span><span class="text-[10px] md:text-xs text-white/90 bg-black/50 px-1.5 py-0.5 rounded-full mt-0.5 whitespace-nowrap">トイレ</span></div><div class="absolute transform -translate-x-1/2 -translate-y-1/2 flex flex-col items-center z-20" style="left:95%;top:40%"><span class="text-xl md:text-2xl drop-shadow-lg">🏥</span><span class="text-[10px] md:text-xs text-white/90 bg-black/50 px-1.5 py-0.5 rounded-full mt-0.5 whitespace-nowrap">救護所</span></div><div class="absolute transform -translate-x-1/2 -translate-y-1/2 flex flex-col items-center z-20" style="left:50%;top:90%"><span class="text-xl md:text-2xl drop-shadow-lg">🎁</span><span class="text-[10px] md:text-xs text-white/90 bg-black/50 px-1.5 py-0.5 rounded-full mt-0.5 whitespace-nowrap">グッズ販売</span></div><div class="absolute top-2 right-4 text-2xl md:text-3xl opacity-60 animate-pulse">🎆</div><div class="absolute top-6 left-6 text-xl md:text-2xl opacity-40 animate-pulse delay-1000">✨</div></div><div class="mt-6 flex flex-wrap justify-center gap-3 md:gap-6 text-xs md:text-sm"><div class="flex items-center gap-1.5"><span class="w-3 h-3 rounded-sm bg-[#f97316]"></span><span class="text-white/80">メイン</span></div><div class="flex items-center gap-1.5"><span class="w-3 h-3 rounded-sm bg-[#8b5cf6]"></span><span class="text-white/80">サブ</span></div><div class="flex items-center gap-1.5"><span class="w-3 h-3 rounded-sm bg-[#10b981]"></span><span class="text-white/80">アコースティック</span></div><div class="flex items-center gap-1.5"><span class="w-3 h-3 rounded-sm bg-[#ec4899]"></span><span class="text-white/80">DJ</span></div></div><p class="text-center text-white/50 text-xs mt-4">※ マップはイメージです。実際の配置は異なる場合があります。</p></div><section class="bg-white py-20 md:py-28"><div class="mx-auto max-w-6xl px-6"><h2 class="text-3xl md:text-4xl font-bold text-center text-slate-900">チケット</h2><div class="mt-14 grid gap-8 md:grid-cols-3 items-stretch"><div class="rounded-3xl p-8 border bg-white text-slate-900 border-slate-200"><p class="text-sm font-semibold opacity-70">一般</p><p class="mt-4 text-4xl font-bold">¥8,000</p><ul class="mt-6 space-y-3 text-sm"><li class="flex items-center gap-2"><span class="text-indigo-500">✓</span>全セッション聴講</li><li class="flex items-center gap-2"><span class="text-indigo-500">✓</span>ネットワーキング参加</li></ul><a class="mt-8 block rounded-xl py-3 text-center font-semibold transition bg-indigo-600 text-white hover:bg-indigo-500">申し込む</a></div><div class="rounded-3xl p-8 border bg-indigo-600 text-white border-indigo-600 md:scale-105 shadow-2xl"><p class="text-sm font-semibold opacity-70">VIP</p><p class="mt-4 text-4xl font-bold">¥20,000</p><ul class="mt-6 space-y-3 text-sm"><li class="flex items-center gap-2"><span class="text-indigo-200">✓</span>前方優先席</li><li class="flex items-center gap-2"><span class="text-indigo-200">✓</span>登壇者との懇親会</li><li class="flex items-center gap-2"><span class="text-indigo-200">✓</span>限定ノベルティ</li><li class="flex items-center gap-2"><span class="text-indigo-200">✓</span>アーカイブ視聴</li></ul><a class="mt-8 block rounded-xl py-3 text-center font-semibold transition bg-white text-indigo-700 hover:bg-indigo-50">申し込む</a></div><div class="rounded-3xl p-8 border bg-white text-slate-900 border-slate-200"><p class="text-sm font-semibold opacity-70">オンライン</p><p class="mt-4 text-4xl font-bold">¥3,000</p><ul class="mt-6 space-y-3 text-sm"><li class="flex items-center gap-2"><span class="text-indigo-500">✓</span>ライブ配信視聴</li><li class="flex items-center gap-2"><span class="text-indigo-500">✓</span>アーカイブ30日間</li></ul><a class="mt-8 block rounded-xl py-3 text-center font-semibold transition bg-indigo-600 text-white hover:bg-indigo-500">申し込む</a></div></div></div></section><section class="w-full max-w-4xl mx-auto px-4 py-12 md:py-16 lg:py-20"><h2 class="text-2xl md:text-3xl lg:text-4xl font-bold text-center mb-8 md:mb-10 lg:mb-12 tracking-wide text-[#1a1a2e]">アクセス情報表示</h2><div class="grid gap-4 md:gap-6 lg:gap-8 md:grid-cols-2"><div class="flex items-start gap-4 p-4 md:p-5 lg:p-6 rounded-2xl bg-white/80 backdrop-blur-sm border border-[#e0c9a6] shadow-md hover:shadow-lg transition-shadow duration-300"><span class="text-2xl md:text-3xl lg:text-4xl flex-shrink-0 mt-1">📍</span><div class="min-w-0"><p class="text-sm md:text-base font-semibold text-[#6b4f3c] mb-1">会場</p><p class="text-base md:text-lg lg:text-xl text-[#1a1a2e] leading-relaxed break-words">富士山麓 野外特設ステージ</p></div></div><div class="flex items-start gap-4 p-4 md:p-5 lg:p-6 rounded-2xl bg-white/80 backdrop-blur-sm border border-[#e0c9a6] shadow-md hover:shadow-lg transition-shadow duration-300"><span class="text-2xl md:text-3xl lg:text-4xl flex-shrink-0 mt-1">🏠</span><div class="min-w-0"><p class="text-sm md:text-base font-semibold text-[#6b4f3c] mb-1">住所</p><p class="text-base md:text-lg lg:text-xl text-[#1a1a2e] leading-relaxed break-words">〒401-0301 山梨県南都留郡富士河口湖町</p></div></div><div class="flex items-start gap-4 p-4 md:p-5 lg:p-6 rounded-2xl bg-white/80 backdrop-blur-sm border border-[#e0c9a6] shadow-md hover:shadow-lg transition-shadow duration-300"><span class="text-2xl md:text-3xl lg:text-4xl flex-shrink-0 mt-1">🚃</span><div class="min-w-0"><p class="text-sm md:text-base font-semibold text-[#6b4f3c] mb-1">電車でお越しの方</p><p class="text-base md:text-lg lg:text-xl text-[#1a1a2e] leading-relaxed break-words">富士急行線「河口湖」駅下車 シャトルバス約15分</p></div></div><div class="flex items-start gap-4 p-4 md:p-5 lg:p-6 rounded-2xl bg-white/80 backdrop-blur-sm border border-[#e0c9a6] shadow-md hover:shadow-lg transition-shadow duration-300"><span class="text-2xl md:text-3xl lg:text-4xl flex-shrink-0 mt-1">🚗</span><div class="min-w-0"><p class="text-sm md:text-base font-semibold text-[#6b4f3c] mb-1">お車でお越しの方</p><p class="text-base md:text-lg lg:text-xl text-[#1a1a2e] leading-relaxed break-words">中央自動車道「河口湖」ICより約20分 駐車場500台完備</p></div></div><div class="flex items-start gap-4 p-4 md:p-5 lg:p-6 rounded-2xl bg-white/80 backdrop-blur-sm border border-[#e0c9a6] shadow-md hover:shadow-lg transition-shadow duration-300"><span class="text-2xl md:text-3xl lg:text-4xl flex-shrink-0 mt-1">🅿️</span><div class="min-w-0"><p class="text-sm md:text-base font-semibold text-[#6b4f3c] mb-1">駐車場</p><p class="text-base md:text-lg lg:text-xl text-[#1a1a2e] leading-relaxed break-words">無料駐車場あり（台数に限りあり）</p></div></div></div><div class="mt-8 md:mt-10 lg:mt-12 text-center"><p class="text-sm md:text-base text-[#6b4f3c] bg-[#f5ede1] inline-block px-6 py-3 rounded-full border border-[#dcc8ae]">※ 交通状況により所要時間が変わる場合がございます</p></div></section><section class="w-full max-w-5xl mx-auto px-4 py-12 md:py-16"><h2 class="text-2xl md:text-3xl font-bold text-center mb-10 tracking-wide text-[#2d2a24]">お知らせ・ニュース一覧</h2><div class="space-y-5 md:space-y-6"><article class="group relative flex flex-col md:flex-row md:items-start gap-3 md:gap-6 p-5 md:p-6 rounded-2xl bg-white/70 backdrop-blur-sm border border-[#e5d9cc] shadow-sm hover:shadow-md transition-shadow duration-300"><div class="flex md:flex-col md:items-start items-center gap-3 md:gap-1 md:min-w-[110px] shrink-0"><time dateTime="2026-05-15" class="text-sm font-mono text-[#7a6b5a] tracking-wider">2026.05.15</time><span class="inline-block text-xs font-semibold px-3 py-1 rounded-full bg-[#f5efe8] text-[#8b7a64] border border-[#dccfc2]">お知らせ</span></div><div class="flex-1 min-w-0"><h3 class="text-lg md:text-xl font-bold text-[#2d2a24] mb-1.5 leading-snug group-hover:text-[#b87c4b] transition-colors duration-200">第12回 地域音楽フェス 開催決定！</h3><p class="text-sm md:text-base text-[#5e5548] leading-relaxed">今年も夏の風物詩が帰ってくる。8月20日(土)・21日(日) 野外特設ステージにて。</p></div><div class="hidden md:flex items-center self-center md:self-center shrink-0 text-[#c9b6a0] group-hover:text-[#b87c4b] transition-colors duration-200"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"></path></svg></div></article><article class="group relative flex flex-col md:flex-row md:items-start gap-3 md:gap-6 p-5 md:p-6 rounded-2xl bg-white/70 backdrop-blur-sm border border-[#e5d9cc] shadow-sm hover:shadow-md transition-shadow duration-300"><div class="flex md:flex-col md:items-start items-center gap-3 md:gap-1 md:min-w-[110px] shrink-0"><time dateTime="2026-05-10" class="text-sm font-mono text-[#7a6b5a] tracking-wider">2026.05.10</time><span class="inline-block text-xs font-semibold px-3 py-1 rounded-full bg-[#f5efe8] text-[#8b7a64] border border-[#dccfc2]">ニュース</span></div><div class="flex-1 min-w-0"><h3 class="text-lg md:text-xl font-bold text-[#2d2a24] mb-1.5 leading-snug group-hover:text-[#b87c4b] transition-colors duration-200">第一弾ラインナップ発表</h3><p class="text-sm md:text-base text-[#5e5548] leading-relaxed">豪華アーティスト10組が決定。チケット先行予約は6月1日から。</p></div><div class="hidden md:flex items-center self-center md:self-center shrink-0 text-[#c9b6a0] group-hover:text-[#b87c4b] transition-colors duration-200"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"></path></svg></div></article><article class="group relative flex flex-col md:flex-row md:items-start gap-3 md:gap-6 p-5 md:p-6 rounded-2xl bg-white/70 backdrop-blur-sm border border-[#e5d9cc] shadow-sm hover:shadow-md transition-shadow duration-300"><div class="flex md:flex-col md:items-start items-center gap-3 md:gap-1 md:min-w-[110px] shrink-0"><time dateTime="2026-04-28" class="text-sm font-mono text-[#7a6b5a] tracking-wider">2026.04.28</time><span class="inline-block text-xs font-semibold px-3 py-1 rounded-full bg-[#f5efe8] text-[#8b7a64] border border-[#dccfc2]">お知らせ</span></div><div class="flex-1 min-w-0"><h3 class="text-lg md:text-xl font-bold text-[#2d2a24] mb-1.5 leading-snug group-hover:text-[#b87c4b] transition-colors duration-200">ボランティアスタッフ募集中</h3><p class="text-sm md:text-base text-[#5e5548] leading-relaxed">一緒にフェスを作りませんか？ 特典あり。応募締切：6月末日。</p></div><div class="hidden md:flex items-center self-center md:self-center shrink-0 text-[#c9b6a0] group-hover:text-[#b87c4b] transition-colors duration-200"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"></path></svg></div></article><article class="group relative flex flex-col md:flex-row md:items-start gap-3 md:gap-6 p-5 md:p-6 rounded-2xl bg-white/70 backdrop-blur-sm border border-[#e5d9cc] shadow-sm hover:shadow-md transition-shadow duration-300"><div class="flex md:flex-col md:items-start items-center gap-3 md:gap-1 md:min-w-[110px] shrink-0"><time dateTime="2026-04-15" class="text-sm font-mono text-[#7a6b5a] tracking-wider">2026.04.15</time><span class="inline-block text-xs font-semibold px-3 py-1 rounded-full bg-[#f5efe8] text-[#8b7a64] border border-[#dccfc2]">ニュース</span></div><div class="flex-1 min-w-0"><h3 class="text-lg md:text-xl font-bold text-[#2d2a24] mb-1.5 leading-snug group-hover:text-[#b87c4b] transition-colors duration-200">会場アクセス・駐車場情報更新</h3><p class="text-sm md:text-base text-[#5e5548] leading-relaxed">シャトルバス運行決定。詳細はアクセスページをご確認ください。</p></div><div class="hidden md:flex items-center self-center md:self-center shrink-0 text-[#c9b6a0] group-hover:text-[#b87c4b] transition-colors duration-200"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"></path></svg></div></article></div><div class="mt-10 text-center"><a href="#" class="inline-block px-8 py-3 rounded-full bg-[#2d2a24] text-white text-sm font-semibold tracking-wider hover:bg-[#b87c4b] transition-colors duration-300 shadow-md hover:shadow-lg">すべての記事を見る</a></div></section><div class="w-full max-w-4xl mx-auto px-4 py-8 md:py-12 lg:py-16"><div class="text-center mb-8 md:mb-12"><h2 class="text-2xl md:text-3xl lg:text-4xl font-bold tracking-wide text-[#f5e6d3] drop-shadow-lg">イベントカレンダー</h2><div class="mt-2 h-1 w-20 mx-auto bg-gradient-to-r from-[#d4a373] to-[#e9c46a] rounded-full"></div><p class="mt-3 text-sm md:text-base text-[#c4b5a0]">地域の音楽フェス — 夏の思い出を奏でる7日間</p></div><div class="grid gap-4 md:gap-6"><div class="group relative flex flex-col md:flex-row items-start md:items-center gap-4 md:gap-6 p-4 md:p-6 rounded-2xl bg-[#2a2a2a]/80 backdrop-blur-sm border border-[#4a3f35] hover:border-[#d4a373] transition-all duration-300 shadow-lg hover:shadow-[#d4a373]/20"><div class="flex-shrink-0 flex md:flex-col items-center md:items-center gap-2 md:gap-1 w-full md:w-20"><span class="text-3xl md:text-4xl font-bold text-[#e9c46a] leading-none">18</span><span class="text-sm md:text-base text-[#a89b8c] font-medium">土曜日</span></div><div class="w-full h-px md:hidden bg-gradient-to-r from-transparent via-[#4a3f35] to-transparent"></div><div class="flex-1 min-w-0"><h3 class="text-lg md:text-xl font-semibold text-[#f5e6d3] truncate">オープニング・フェス</h3><div class="mt-1 flex flex-wrap items-center gap-x-4 gap-y-1 text-sm text-[#c4b5a0]"><span class="inline-flex items-center gap-1"><svg class="w-4 h-4 text-[#d4a373]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>メインステージ</span><span class="inline-flex items-center gap-1"><svg class="w-4 h-4 text-[#d4a373]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>14:00〜21:00</span></div></div><div class="hidden md:flex flex-shrink-0 items-center"><svg class="w-6 h-6 text-[#d4a373] group-hover:translate-x-1 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div><div class="group relative flex flex-col md:flex-row items-start md:items-center gap-4 md:gap-6 p-4 md:p-6 rounded-2xl bg-[#2a2a2a]/80 backdrop-blur-sm border border-[#4a3f35] hover:border-[#d4a373] transition-all duration-300 shadow-lg hover:shadow-[#d4a373]/20"><div class="flex-shrink-0 flex md:flex-col items-center md:items-center gap-2 md:gap-1 w-full md:w-20"><span class="text-3xl md:text-4xl font-bold text-[#e9c46a] leading-none">19</span><span class="text-sm md:text-base text-[#a89b8c] font-medium">日曜日</span></div><div class="w-full h-px md:hidden bg-gradient-to-r from-transparent via-[#4a3f35] to-transparent"></div><div class="flex-1 min-w-0"><h3 class="text-lg md:text-xl font-semibold text-[#f5e6d3] truncate">アコースティック・ガーデン</h3><div class="mt-1 flex flex-wrap items-center gap-x-4 gap-y-1 text-sm text-[#c4b5a0]"><span class="inline-flex items-center gap-1"><svg class="w-4 h-4 text-[#d4a373]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>芝生広場</span><span class="inline-flex items-center gap-1"><svg class="w-4 h-4 text-[#d4a373]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>11:00〜18:00</span></div></div><div class="hidden md:flex flex-shrink-0 items-center"><svg class="w-6 h-6 text-[#d4a373] group-hover:translate-x-1 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div><div class="group relative flex flex-col md:flex-row items-start md:items-center gap-4 md:gap-6 p-4 md:p-6 rounded-2xl bg-[#2a2a2a]/80 backdrop-blur-sm border border-[#4a3f35] hover:border-[#d4a373] transition-all duration-300 shadow-lg hover:shadow-[#d4a373]/20"><div class="flex-shrink-0 flex md:flex-col items-center md:items-center gap-2 md:gap-1 w-full md:w-20"><span class="text-3xl md:text-4xl font-bold text-[#e9c46a] leading-none">25</span><span class="text-sm md:text-base text-[#a89b8c] font-medium">土曜日</span></div><div class="w-full h-px md:hidden bg-gradient-to-r from-transparent via-[#4a3f35] to-transparent"></div><div class="flex-1 min-w-0"><h3 class="text-lg md:text-xl font-semibold text-[#f5e6d3] truncate">ロック・ナイト</h3><div class="mt-1 flex flex-wrap items-center gap-x-4 gap-y-1 text-sm text-[#c4b5a0]"><span class="inline-flex items-center gap-1"><svg class="w-4 h-4 text-[#d4a373]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>野外特設会場</span><span class="inline-flex items-center gap-1"><svg class="w-4 h-4 text-[#d4a373]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>17:00〜22:30</span></div></div><div class="hidden md:flex flex-shrink-0 items-center"><svg class="w-6 h-6 text-[#d4a373] group-hover:translate-x-1 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div><div class="group relative flex flex-col md:flex-row items-start md:items-center gap-4 md:gap-6 p-4 md:p-6 rounded-2xl bg-[#2a2a2a]/80 backdrop-blur-sm border border-[#4a3f35] hover:border-[#d4a373] transition-all duration-300 shadow-lg hover:shadow-[#d4a373]/20"><div class="flex-shrink-0 flex md:flex-col items-center md:items-center gap-2 md:gap-1 w-full md:w-20"><span class="text-3xl md:text-4xl font-bold text-[#e9c46a] leading-none">26</span><span class="text-sm md:text-base text-[#a89b8c] font-medium">日曜日</span></div><div class="w-full h-px md:hidden bg-gradient-to-r from-transparent via-[#4a3f35] to-transparent"></div><div class="flex-1 min-w-0"><h3 class="text-lg md:text-xl font-semibold text-[#f5e6d3] truncate">ジャズ＆ソウル・ラウンジ</h3><div class="mt-1 flex flex-wrap items-center gap-x-4 gap-y-1 text-sm text-[#c4b5a0]"><span class="inline-flex items-center gap-1"><svg class="w-4 h-4 text-[#d4a373]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>湖畔ステージ</span><span class="inline-flex items-center gap-1"><svg class="w-4 h-4 text-[#d4a373]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>13:00〜20:00</span></div></div><div class="hidden md:flex flex-shrink-0 items-center"><svg class="w-6 h-6 text-[#d4a373] group-hover:translate-x-1 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div><div class="group relative flex flex-col md:flex-row items-start md:items-center gap-4 md:gap-6 p-4 md:p-6 rounded-2xl bg-[#2a2a2a]/80 backdrop-blur-sm border border-[#4a3f35] hover:border-[#d4a373] transition-all duration-300 shadow-lg hover:shadow-[#d4a373]/20"><div class="flex-shrink-0 flex md:flex-col items-center md:items-center gap-2 md:gap-1 w-full md:w-20"><span class="text-3xl md:text-4xl font-bold text-[#e9c46a] leading-none">1</span><span class="text-sm md:text-base text-[#a89b8c] font-medium">土曜日</span></div><div class="w-full h-px md:hidden bg-gradient-to-r from-transparent via-[#4a3f35] to-transparent"></div><div class="flex-1 min-w-0"><h3 class="text-lg md:text-xl font-semibold text-[#f5e6d3] truncate">ファイナル・グランデ</h3><div class="mt-1 flex flex-wrap items-center gap-x-4 gap-y-1 text-sm text-[#c4b5a0]"><span class="inline-flex items-center gap-1"><svg class="w-4 h-4 text-[#d4a373]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>メインステージ</span><span class="inline-flex items-center gap-1"><svg class="w-4 h-4 text-[#d4a373]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>15:00〜23:00</span></div></div><div class="hidden md:flex flex-shrink-0 items-center"><svg class="w-6 h-6 text-[#d4a373] group-hover:translate-x-1 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div></div><div class="mt-8 text-center text-xs md:text-sm text-[#7a6e5e]">※ 天候等により内容が変更になる場合がございます</div></div><div class="w-full bg-[#1a0e0b] py-10 md:py-14"><div class="mx-auto max-w-6xl px-4 text-center"><h2 class="mb-8 text-2xl font-bold tracking-wider text-[#f5d742] md:text-3xl">ソーシャルメディアリンク</h2><div class="flex flex-wrap items-center justify-center gap-4 md:gap-6"><a href="#" target="_blank" rel="noopener noreferrer" class="group flex items-center gap-2 rounded-full border-2 border-[#f5d742] bg-[#2b1a15] px-5 py-2 text-sm font-semibold text-[#f5d742] transition-all duration-300 hover:bg-[#f5d742] hover:text-[#1a0e0b] md:px-6 md:py-3 md:text-base"><span class="text-lg md:text-xl">𝕏</span><span>Twitter</span></a><a href="#" target="_blank" rel="noopener noreferrer" class="group flex items-center gap-2 rounded-full border-2 border-[#f5d742] bg-[#2b1a15] px-5 py-2 text-sm font-semibold text-[#f5d742] transition-all duration-300 hover:bg-[#f5d742] hover:text-[#1a0e0b] md:px-6 md:py-3 md:text-base"><span class="text-lg md:text-xl">📷</span><span>Instagram</span></a><a href="#" target="_blank" rel="noopener noreferrer" class="group flex items-center gap-2 rounded-full border-2 border-[#f5d742] bg-[#2b1a15] px-5 py-2 text-sm font-semibold text-[#f5d742] transition-all duration-300 hover:bg-[#f5d742] hover:text-[#1a0e0b] md:px-6 md:py-3 md:text-base"><span class="text-lg md:text-xl">📘</span><span>Facebook</span></a><a href="#" target="_blank" rel="noopener noreferrer" class="group flex items-center gap-2 rounded-full border-2 border-[#f5d742] bg-[#2b1a15] px-5 py-2 text-sm font-semibold text-[#f5d742] transition-all duration-300 hover:bg-[#f5d742] hover:text-[#1a0e0b] md:px-6 md:py-3 md:text-base"><span class="text-lg md:text-xl">▶️</span><span>YouTube</span></a><a href="#" target="_blank" rel="noopener noreferrer" class="group flex items-center gap-2 rounded-full border-2 border-[#f5d742] bg-[#2b1a15] px-5 py-2 text-sm font-semibold text-[#f5d742] transition-all duration-300 hover:bg-[#f5d742] hover:text-[#1a0e0b] md:px-6 md:py-3 md:text-base"><span class="text-lg md:text-xl">🎵</span><span>TikTok</span></a></div><p class="mt-8 text-xs text-[#b89a7a] md:text-sm">フェスの最新情報をチェック！</p></div></div><footer class="w-full bg-[#1a1a2e] text-gray-300 py-10 px-4 md:px-8 lg:px-16"><div class="max-w-6xl mx-auto flex flex-col md:flex-row justify-between items-center gap-6 md:gap-4"><div class="text-center md:text-left"><h2 class="text-sm font-semibold text-[#e94560] tracking-wider mb-2">お問い合わせ</h2><p class="text-xs md:text-sm leading-relaxed">メール：info@festival.example.com</p><p class="text-xs md:text-sm leading-relaxed">電話：03-1234-5678（平日10:00-18:00）</p></div><div class="text-center md:text-right"><h2 class="text-sm font-semibold text-[#e94560] tracking-wider mb-2">運営情報</h2><p class="text-xs md:text-sm leading-relaxed">主催：地域音楽フェス実行委員会</p><p class="text-xs md:text-sm leading-relaxed">協力：○○市文化振興財団</p></div></div><div class="mt-8 border-t border-gray-700 pt-4 text-center"><p class="text-xs text-gray-500">© 2026 地域音楽フェス実行委員会. All Rights Reserved.</p></div></footer><header class="w-full bg-[#1a1a2e] text-white px-4 py-3 md:px-8 md:py-4 shadow-lg"><div class="max-w-7xl mx-auto flex items-center justify-between"><div class="flex items-center gap-2"><span class="text-2xl md:text-3xl font-bold tracking-tight text-[#f5a623]">🎵</span><span class="text-lg md:text-xl font-semibold">サウンドウェーブ</span></div><nav class="hidden md:flex items-center gap-6 lg:gap-8 text-sm lg:text-base font-medium"><a href="#top" class="hover:text-[#f5a623] transition-colors duration-200">トップ</a><a href="#lineup" class="hover:text-[#f5a623] transition-colors duration-200">ラインナップ</a><a href="#tickets" class="hover:text-[#f5a623] transition-colors duration-200">チケット</a><a href="#access" class="hover:text-[#f5a623] transition-colors duration-200">アクセス</a><a href="#contact" class="hover:text-[#f5a623] transition-colors duration-200">お問い合わせ</a></nav><button class="md:hidden flex flex-col gap-1.5 p-2 rounded hover:bg-white/10 transition-colors" aria-label="メニューを開く"><span class="block w-6 h-0.5 bg-white rounded"></span><span class="block w-6 h-0.5 bg-white rounded"></span><span class="block w-6 h-0.5 bg-white rounded"></span></button></div><h2 class="sr-only">サウンドウェーブ ヘッダー</h2></header></div>