<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>お問い合わせ - Snapi</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=DotGothic16&family=Inter:wght@800;900&family=Zen+Maru+Gothic:wght@500;700;900&display=swap" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
fontFamily: { sans: ['"Zen Maru Gothic"', 'sans-serif'], english: ['"Inter"', 'sans-serif'] },
colors: { brand: { orange: '#FF8066', pink: '#FF79B0', dark: '#111111' } }
}
}
}
</script>
<style>
.pc-bg-gradient { background: linear-gradient(135deg, #FFF0F0 0%, #FFE4E6 50%, #F3E8FF 100%); }
</style>
</head>
<body class="pc-bg-gradient text-brand-dark selection:bg-brand-pink selection:text-white">
<div class="max-w-md mx-auto min-h-screen bg-white/90 backdrop-blur-md shadow-2xl border-x border-white/40">
<header class="flex items-center justify-between px-6 py-6 border-b border-slate-100 sticky top-0 bg-white/80 backdrop-blur-md z-50">
<a href="index.html" class="w-8 h-8 flex items-center justify-center rounded-full bg-slate-100 hover:bg-slate-200 transition">
<svg class="w-4 h-4 text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
</a>
<span class="font-bold text-sm">お問い合わせ</span>
<div class="w-8"></div>
</header>
<main class="p-8 pb-32">
<h1 class="font-english text-3xl font-black italic mb-2 text-brand-dark">CONTACT</h1>
<p class="text-xs text-slate-500 mb-8">アプリに関するご質問やご要望は、<br>下記フォームよりお気軽にお送りください。</p>
<form class="space-y-6">
<div>
<label class="block text-xs font-bold text-slate-500 mb-2">お名前</label>
<input type="text" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-brand-pink transition" placeholder="山田 太郎">
</div>
<div>
<label class="block text-xs font-bold text-slate-500 mb-2">メールアドレス</label>
<input type="email" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-brand-pink transition" placeholder="info@example.com">
</div>
<div>
<label class="block text-xs font-bold text-slate-500 mb-2">お問い合わせ内容</label>
<textarea rows="5" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-brand-pink transition" placeholder="ご意見・ご要望などをご記入ください"></textarea>
</div>
<button type="button" class="w-full bg-brand-dark text-white font-bold py-4 rounded-xl shadow-lg transform active:scale-95 transition hover:shadow-xl mt-4">
送信する
</button>
</form>
</main>
<footer class="py-8 text-center border-t border-slate-100">
<p class="font-english font-black text-xl text-slate-200">SNAPI</p>
</footer>
</div>
</body>
</html>