SaaSプロダクト（テンプレートから）

atomic.studio/s/3721

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

<div class="min-h-screen bg-zinc-950 text-white"><section class="relative min-h-screen flex items-center justify-center overflow-hidden bg-gradient-to-br from-[#0b1120] via-[#0f1a2e] to-[#1a2a44] text-white px-4 sm:px-6 lg:px-8"><div class="absolute inset-0 opacity-10" style="background-image:linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);background-size:60px 60px"></div><div class="relative z-10 max-w-4xl mx-auto text-center"><div class="inline-flex items-center gap-2 px-4 py-1.5 mb-6 rounded-full border border-[#3b82f6]/30 bg-[#3b82f6]/10 text-sm text-[#93c5fd] tracking-wide"><span class="w-2 h-2 rounded-full bg-[#3b82f6] animate-pulse"></span>プロジェクト管理の新しい基準</div><h2 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-extrabold leading-tight tracking-tight mb-6">タスク管理を<br/><span class="bg-gradient-to-r from-[#60a5fa] via-[#a78bfa] to-[#f472b6] bg-clip-text text-transparent">シンプルに、強力に</span></h2><p class="max-w-2xl mx-auto text-base sm:text-lg md:text-xl text-[#94a3b8] mb-10 leading-relaxed">チームの生産性を最大化する次世代タスク管理プラットフォーム。 直感的な操作と高度な自動化で、あなたのワークフローを加速します。</p><div class="flex flex-col sm:flex-row items-center justify-center gap-4"><a href="#" class="w-full sm:w-auto inline-flex items-center justify-center px-8 py-3.5 rounded-xl bg-[#3b82f6] hover:bg-[#2563eb] active:bg-[#1d4ed8] text-white font-semibold text-base shadow-lg shadow-[#3b82f6]/25 transition-all duration-200 hover:scale-105">無料で始める</a><a href="#" class="w-full sm:w-auto inline-flex items-center justify-center px-8 py-3.5 rounded-xl border border-[#334155] hover:border-[#475569] bg-white/5 hover:bg-white/10 text-[#e2e8f0] font-semibold text-base transition-all duration-200">デモを見る</a></div><div class="mt-16 grid grid-cols-2 md:grid-cols-3 gap-6 md:gap-10"><div class="text-center"><div class="text-2xl md:text-3xl font-bold text-white">10,000+</div><div class="text-sm text-[#64748b] mt-1">導入企業数</div></div><div class="text-center"><div class="text-2xl md:text-3xl font-bold text-white">98.5%</div><div class="text-sm text-[#64748b] mt-1">顧客満足度</div></div><div class="text-center col-span-2 md:col-span-1"><div class="text-2xl md:text-3xl font-bold text-white">40%</div><div class="text-sm text-[#64748b] mt-1">生産性向上</div></div></div></div><div class="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-[#0b1120] to-transparent pointer-events-none"></div></section><section class="w-full bg-gradient-to-b from-[#F8FAFC] to-[#EEF2FF] py-16 md:py-24"><div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"><div class="text-center mb-12 md:mb-16"><h2 class="text-3xl md:text-4xl font-bold text-[#1E293B] tracking-tight">タスク管理を、もっと自由に。</h2><p class="mt-4 text-lg md:text-xl text-[#64748B] max-w-2xl mx-auto">プロジェクトの成功に必要な機能をすべて搭載。チームの力を最大限に引き出します。</p></div><div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8"><div class="group bg-white rounded-2xl p-6 md:p-8 shadow-sm hover:shadow-xl transition-all duration-300 border border-[#E2E8F0] hover:border-[#4F46E5]/20 hover:-translate-y-1"><div class="flex items-center justify-center w-14 h-14 rounded-xl bg-[#EEF2FF] group-hover:bg-[#4F46E5]/10 transition-colors mb-5"><svg class="w-8 h-8 text-[#4F46E5]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"></path></svg></div><h3 class="text-xl font-semibold text-[#1E293B] mb-3">タスク管理</h3><p class="text-[#64748B] leading-relaxed text-sm md:text-base">直感的なUIでタスクの作成・割り当て・進捗管理がスムーズに。チーム全体の作業が一目で把握できます。</p></div><div class="group bg-white rounded-2xl p-6 md:p-8 shadow-sm hover:shadow-xl transition-all duration-300 border border-[#E2E8F0] hover:border-[#4F46E5]/20 hover:-translate-y-1"><div class="flex items-center justify-center w-14 h-14 rounded-xl bg-[#EEF2FF] group-hover:bg-[#4F46E5]/10 transition-colors mb-5"><svg class="w-8 h-8 text-[#4F46E5]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" 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></div><h3 class="text-xl font-semibold text-[#1E293B] mb-3">カレンダー連携</h3><p class="text-[#64748B] leading-relaxed text-sm md:text-base">Googleカレンダー・Outlookと同期。締切や予定を一元管理し、スケジュールの二重予約を防止します。</p></div><div class="group bg-white rounded-2xl p-6 md:p-8 shadow-sm hover:shadow-xl transition-all duration-300 border border-[#E2E8F0] hover:border-[#4F46E5]/20 hover:-translate-y-1"><div class="flex items-center justify-center w-14 h-14 rounded-xl bg-[#EEF2FF] group-hover:bg-[#4F46E5]/10 transition-colors mb-5"><svg class="w-8 h-8 text-[#4F46E5]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path></svg></div><h3 class="text-xl font-semibold text-[#1E293B] mb-3">チームコラボレーション</h3><p class="text-[#64748B] leading-relaxed text-sm md:text-base">コメント・ファイル添付・リアルタイム通知で、離れたメンバーともシームレスに連携。会議時間を削減します。</p></div><div class="group bg-white rounded-2xl p-6 md:p-8 shadow-sm hover:shadow-xl transition-all duration-300 border border-[#E2E8F0] hover:border-[#4F46E5]/20 hover:-translate-y-1"><div class="flex items-center justify-center w-14 h-14 rounded-xl bg-[#EEF2FF] group-hover:bg-[#4F46E5]/10 transition-colors mb-5"><svg class="w-8 h-8 text-[#4F46E5]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path></svg></div><h3 class="text-xl font-semibold text-[#1E293B] mb-3">レポート・分析</h3><p class="text-[#64748B] leading-relaxed text-sm md:text-base">プロジェクトの進捗率・メンバー稼働率をグラフで可視化。データに基づいた改善が可能です。</p></div><div class="group bg-white rounded-2xl p-6 md:p-8 shadow-sm hover:shadow-xl transition-all duration-300 border border-[#E2E8F0] hover:border-[#4F46E5]/20 hover:-translate-y-1"><div class="flex items-center justify-center w-14 h-14 rounded-xl bg-[#EEF2FF] group-hover:bg-[#4F46E5]/10 transition-colors mb-5"><svg class="w-8 h-8 text-[#4F46E5]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path></svg></div><h3 class="text-xl font-semibold text-[#1E293B] mb-3">セキュリティ</h3><p class="text-[#64748B] leading-relaxed text-sm md:text-base">エンドツーエンドの暗号化・多要素認証・アクセス権限の細かな設定。企業のセキュリティ基準に対応。</p></div><div class="group bg-white rounded-2xl p-6 md:p-8 shadow-sm hover:shadow-xl transition-all duration-300 border border-[#E2E8F0] hover:border-[#4F46E5]/20 hover:-translate-y-1"><div class="flex items-center justify-center w-14 h-14 rounded-xl bg-[#EEF2FF] group-hover:bg-[#4F46E5]/10 transition-colors mb-5"><svg class="w-8 h-8 text-[#4F46E5]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg></div><h3 class="text-xl font-semibold text-[#1E293B] mb-3">自動化・連携</h3><p class="text-[#64748B] leading-relaxed text-sm md:text-base">Slack・Teams・GitHubなど主要ツールとAPI連携。定型作業を自動化し、チームの生産性を最大化します。</p></div></div><div class="mt-12 text-center"><p class="text-sm text-[#94A3B8]">※ すべてのプランで上記機能をご利用いただけます（一部機能は上位プラン限定）</p></div></div></section><div class="w-full max-w-sm mx-auto bg-white rounded-2xl shadow-lg overflow-hidden transition-transform duration-300 hover:scale-[1.02] hover:shadow-xl md:max-w-md lg:max-w-lg"><div class="flex items-center justify-center h-20 bg-gradient-to-br from-[#4F46E5] to-[#7C3AED]"><svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"></path></svg></div><div class="p-6 text-center md:text-left"><h2 class="text-xl font-bold text-gray-800 mb-2 md:text-2xl">タスク管理を効率化</h2><p class="text-sm text-gray-500 leading-relaxed md:text-base">チームの進捗をリアルタイムで可視化。 ドラッグ＆ドロップで直感的に操作でき、 納期管理もカンタンです。</p></div><div class="px-6 pb-6"><button type="button" class="w-full py-3 rounded-xl bg-[#4F46E5] text-white font-semibold text-sm shadow-md transition-all duration-200 hover:bg-[#4338CA] hover:shadow-lg active:scale-95 focus:outline-none focus:ring-2 focus:ring-[#4F46E5] focus:ring-offset-2 md:text-base">詳しく見る</button></div></div><section class="w-full bg-gradient-to-b from-[#f0f7ff] to-white py-16 md:py-24"><div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"><div class="text-center"><h2 class="text-3xl font-bold tracking-tight text-gray-900 md:text-4xl">シンプルな料金プラン</h2><p class="mx-auto mt-4 max-w-2xl text-lg text-gray-600">あなたのチーム規模に合わせて、最適なプランをお選びください。</p></div><div class="mt-12 grid gap-8 md:grid-cols-3 md:gap-6 lg:gap-8"><div class="relative flex flex-col rounded-2xl border-2 p-6 shadow-sm transition-shadow duration-300 hover:shadow-lg sm:p-8 border-gray-200 bg-white"><h3 class="text-xl font-semibold text-gray-900">スターター</h3><div class="mt-4 flex items-baseline"><span class="text-4xl font-extrabold tracking-tight text-gray-900">¥0</span><span class="ml-1 text-lg text-gray-500">/月</span></div><p class="mt-2 text-sm text-gray-500">個人でのタスク管理に最適</p><ul class="mt-6 flex-1 space-y-3"><li class="flex items-start gap-2"><svg class="mt-0.5 h-5 w-5 flex-shrink-0 text-[#2563eb]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg><span class="text-sm text-gray-700">タスク管理 50件まで</span></li><li class="flex items-start gap-2"><svg class="mt-0.5 h-5 w-5 flex-shrink-0 text-[#2563eb]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg><span class="text-sm text-gray-700">基本のプロジェクト機能</span></li><li class="flex items-start gap-2"><svg class="mt-0.5 h-5 w-5 flex-shrink-0 text-[#2563eb]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg><span class="text-sm text-gray-700">1ユーザー</span></li><li class="flex items-start gap-2"><svg class="mt-0.5 h-5 w-5 flex-shrink-0 text-[#2563eb]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg><span class="text-sm text-gray-700">メールサポート</span></li></ul><div class="mt-8"><a href="#" class="block w-full rounded-lg px-4 py-3 text-center text-sm font-semibold transition-colors duration-200 bg-gray-100 text-gray-900 hover:bg-gray-200">無料で始める</a></div></div><div class="relative flex flex-col rounded-2xl border-2 p-6 shadow-sm transition-shadow duration-300 hover:shadow-lg sm:p-8 border-[#2563eb] bg-white ring-2 ring-[#2563eb]"><span class="absolute -top-3 left-1/2 -translate-x-1/2 rounded-full bg-[#2563eb] px-4 py-1 text-xs font-semibold text-white shadow">おすすめ</span><h3 class="text-xl font-semibold text-gray-900">ビジネス</h3><div class="mt-4 flex items-baseline"><span class="text-4xl font-extrabold tracking-tight text-gray-900">¥1,980</span><span class="ml-1 text-lg text-gray-500">/月</span></div><p class="mt-2 text-sm text-gray-500">チームでの本格的なタスク管理</p><ul class="mt-6 flex-1 space-y-3"><li class="flex items-start gap-2"><svg class="mt-0.5 h-5 w-5 flex-shrink-0 text-[#2563eb]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg><span class="text-sm text-gray-700">タスク管理 無制限</span></li><li class="flex items-start gap-2"><svg class="mt-0.5 h-5 w-5 flex-shrink-0 text-[#2563eb]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg><span class="text-sm text-gray-700">プロジェクト &amp; ガントチャート</span></li><li class="flex items-start gap-2"><svg class="mt-0.5 h-5 w-5 flex-shrink-0 text-[#2563eb]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg><span class="text-sm text-gray-700">10ユーザーまで</span></li><li class="flex items-start gap-2"><svg class="mt-0.5 h-5 w-5 flex-shrink-0 text-[#2563eb]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg><span class="text-sm text-gray-700">優先サポート</span></li><li class="flex items-start gap-2"><svg class="mt-0.5 h-5 w-5 flex-shrink-0 text-[#2563eb]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg><span class="text-sm text-gray-700">API連携</span></li></ul><div class="mt-8"><a href="#" class="block w-full rounded-lg px-4 py-3 text-center text-sm font-semibold transition-colors duration-200 bg-[#2563eb] text-white hover:bg-[#1d4ed8]">無料トライアル</a></div></div><div class="relative flex flex-col rounded-2xl border-2 p-6 shadow-sm transition-shadow duration-300 hover:shadow-lg sm:p-8 border-gray-200 bg-white"><h3 class="text-xl font-semibold text-gray-900">エンタープライズ</h3><div class="mt-4 flex items-baseline"><span class="text-4xl font-extrabold tracking-tight text-gray-900">¥5,980</span><span class="ml-1 text-lg text-gray-500">/月</span></div><p class="mt-2 text-sm text-gray-500">大規模組織向けの最上位プラン</p><ul class="mt-6 flex-1 space-y-3"><li class="flex items-start gap-2"><svg class="mt-0.5 h-5 w-5 flex-shrink-0 text-[#2563eb]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg><span class="text-sm text-gray-700">タスク管理 無制限</span></li><li class="flex items-start gap-2"><svg class="mt-0.5 h-5 w-5 flex-shrink-0 text-[#2563eb]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg><span class="text-sm text-gray-700">全プロジェクト機能 + タイムライン</span></li><li class="flex items-start gap-2"><svg class="mt-0.5 h-5 w-5 flex-shrink-0 text-[#2563eb]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg><span class="text-sm text-gray-700">ユーザー無制限</span></li><li class="flex items-start gap-2"><svg class="mt-0.5 h-5 w-5 flex-shrink-0 text-[#2563eb]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg><span class="text-sm text-gray-700">専任サポート</span></li><li class="flex items-start gap-2"><svg class="mt-0.5 h-5 w-5 flex-shrink-0 text-[#2563eb]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg><span class="text-sm text-gray-700">API連携 &amp; Webhook</span></li><li class="flex items-start gap-2"><svg class="mt-0.5 h-5 w-5 flex-shrink-0 text-[#2563eb]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg><span class="text-sm text-gray-700">カスタム権限設定</span></li><li class="flex items-start gap-2"><svg class="mt-0.5 h-5 w-5 flex-shrink-0 text-[#2563eb]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg><span class="text-sm text-gray-700">SAML/SSO</span></li></ul><div class="mt-8"><a href="#" class="block w-full rounded-lg px-4 py-3 text-center text-sm font-semibold transition-colors duration-200 bg-gray-100 text-gray-900 hover:bg-gray-200">お問い合わせ</a></div></div></div><p class="mt-10 text-center text-xs text-gray-400">※ 表示価格はすべて税抜きです。無料トライアルは14日間、クレジットカード不要でお試しいただけます。</p></div></section><section class="w-full bg-gradient-to-b from-[#0b1120] to-[#111827] py-16 md:py-24"><div class="mx-auto max-w-7xl px-4 md:px-8"><div class="mb-12 text-center md:mb-16"><h2 class="text-3xl font-bold tracking-tight text-white md:text-4xl">シンプルな料金プラン</h2><p class="mt-4 text-base text-gray-400 md:text-lg">あなたのチーム規模に合わせてお選びください</p></div><div class="grid gap-6 md:grid-cols-3 md:gap-8"><div class="relative flex flex-col rounded-2xl border p-6 shadow-lg transition-all duration-200 hover:scale-[1.02] md:p-8 border-gray-700 bg-[#1f2937]"><div class="mb-6"><h3 class="text-lg font-semibold text-white">スターター</h3><div class="mt-4 flex items-baseline"><span class="text-4xl font-extrabold tracking-tight text-white">¥0</span><span class="ml-1 text-sm text-gray-400">/月</span></div></div><ul class="mb-8 flex-1 space-y-3"><li class="flex items-start gap-2 text-sm text-gray-300"><svg class="mt-0.5 h-4 w-4 flex-shrink-0 text-[#6366f1]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg><span>タスク管理 50件まで</span></li><li class="flex items-start gap-2 text-sm text-gray-300"><svg class="mt-0.5 h-4 w-4 flex-shrink-0 text-[#6366f1]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg><span>1プロジェクト</span></li><li class="flex items-start gap-2 text-sm text-gray-300"><svg class="mt-0.5 h-4 w-4 flex-shrink-0 text-[#6366f1]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg><span>基本のダッシュボード</span></li><li class="flex items-start gap-2 text-sm text-gray-300"><svg class="mt-0.5 h-4 w-4 flex-shrink-0 text-[#6366f1]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg><span>メールサポート</span></li></ul><button class="w-full rounded-lg py-3 text-sm font-semibold transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-[#6366f1] focus:ring-offset-2 focus:ring-offset-gray-900 border border-gray-600 bg-transparent text-gray-200 hover:bg-gray-700">無料ではじめる</button></div><div class="relative flex flex-col rounded-2xl border p-6 shadow-lg transition-all duration-200 hover:scale-[1.02] md:p-8 border-[#6366f1] bg-[#1e1b4b] ring-2 ring-[#6366f1]"><span class="absolute -top-3 left-1/2 -translate-x-1/2 rounded-full bg-[#6366f1] px-4 py-1 text-xs font-semibold text-white shadow-md">おすすめ</span><div class="mb-6"><h3 class="text-lg font-semibold text-white">ビジネス</h3><div class="mt-4 flex items-baseline"><span class="text-4xl font-extrabold tracking-tight text-white">¥1,980</span><span class="ml-1 text-sm text-gray-400">/月</span></div></div><ul class="mb-8 flex-1 space-y-3"><li class="flex items-start gap-2 text-sm text-gray-300"><svg class="mt-0.5 h-4 w-4 flex-shrink-0 text-[#6366f1]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg><span>タスク管理 無制限</span></li><li class="flex items-start gap-2 text-sm text-gray-300"><svg class="mt-0.5 h-4 w-4 flex-shrink-0 text-[#6366f1]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg><span>無制限プロジェクト</span></li><li class="flex items-start gap-2 text-sm text-gray-300"><svg class="mt-0.5 h-4 w-4 flex-shrink-0 text-[#6366f1]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg><span>チーム管理機能</span></li><li class="flex items-start gap-2 text-sm text-gray-300"><svg class="mt-0.5 h-4 w-4 flex-shrink-0 text-[#6366f1]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg><span>ガントチャート</span></li><li class="flex items-start gap-2 text-sm text-gray-300"><svg class="mt-0.5 h-4 w-4 flex-shrink-0 text-[#6366f1]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg><span>優先サポート</span></li></ul><button class="w-full rounded-lg py-3 text-sm font-semibold transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-[#6366f1] focus:ring-offset-2 focus:ring-offset-gray-900 bg-[#6366f1] text-white hover:bg-[#4f46e5] shadow-lg shadow-[#6366f1]/30">14日間無料トライアル</button></div><div class="relative flex flex-col rounded-2xl border p-6 shadow-lg transition-all duration-200 hover:scale-[1.02] md:p-8 border-gray-700 bg-[#1f2937]"><div class="mb-6"><h3 class="text-lg font-semibold text-white">エンタープライズ</h3><div class="mt-4 flex items-baseline"><span class="text-4xl font-extrabold tracking-tight text-white">¥5,980</span><span class="ml-1 text-sm text-gray-400">/月</span></div></div><ul class="mb-8 flex-1 space-y-3"><li class="flex items-start gap-2 text-sm text-gray-300"><svg class="mt-0.5 h-4 w-4 flex-shrink-0 text-[#6366f1]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg><span>ビジネスプランの全機能</span></li><li class="flex items-start gap-2 text-sm text-gray-300"><svg class="mt-0.5 h-4 w-4 flex-shrink-0 text-[#6366f1]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg><span>カスタム権限設定</span></li><li class="flex items-start gap-2 text-sm text-gray-300"><svg class="mt-0.5 h-4 w-4 flex-shrink-0 text-[#6366f1]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg><span>APIアクセス</span></li><li class="flex items-start gap-2 text-sm text-gray-300"><svg class="mt-0.5 h-4 w-4 flex-shrink-0 text-[#6366f1]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg><span>専任カスタマーサクセス</span></li><li class="flex items-start gap-2 text-sm text-gray-300"><svg class="mt-0.5 h-4 w-4 flex-shrink-0 text-[#6366f1]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg><span>SAML/SSO</span></li></ul><button class="w-full rounded-lg py-3 text-sm font-semibold transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-[#6366f1] focus:ring-offset-2 focus:ring-offset-gray-900 border border-gray-600 bg-transparent text-gray-200 hover:bg-gray-700">お問い合わせ</button></div></div></div></section><section class="w-full py-16 md:py-24 bg-gradient-to-br from-[#0f172a] via-[#1e293b] to-[#0f172a]"><div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8"><h2 class="text-3xl md:text-4xl font-bold text-center text-white mb-12 md:mb-16 tracking-tight">ユーザーの声</h2><div class="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-8"><div class="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-6 md:p-8 shadow-xl hover:shadow-2xl hover:bg-white/10 transition-all duration-300 flex flex-col"><div class="mb-6"><svg class="w-8 h-8 text-indigo-400/60" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z"></path></svg></div><p class="text-gray-300 text-sm md:text-base leading-relaxed mb-6 flex-grow">導入後、タスクの抜け漏れが劇的に減りました。チーム全体の生産性が2倍になったと実感しています。</p><div class="border-t border-white/10 pt-4 mt-auto"><p class="text-white font-semibold text-sm md:text-base">山田 太郎</p><p class="text-gray-400 text-xs md:text-sm mt-1">株式会社テックイノベーション プロダクトマネージャー</p></div></div><div class="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-6 md:p-8 shadow-xl hover:shadow-2xl hover:bg-white/10 transition-all duration-300 flex flex-col"><div class="mb-6"><svg class="w-8 h-8 text-indigo-400/60" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z"></path></svg></div><p class="text-gray-300 text-sm md:text-base leading-relaxed mb-6 flex-grow">直感的なUIで、メンバー全員がすぐに使いこなせました。リモートワークのタスク管理に最適です。</p><div class="border-t border-white/10 pt-4 mt-auto"><p class="text-white font-semibold text-sm md:text-base">佐藤 花子</p><p class="text-gray-400 text-xs md:text-sm mt-1">フリーランスWebデザイナー</p></div></div><div class="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-6 md:p-8 shadow-xl hover:shadow-2xl hover:bg-white/10 transition-all duration-300 flex flex-col"><div class="mb-6"><svg class="w-8 h-8 text-indigo-400/60" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z"></path></svg></div><p class="text-gray-300 text-sm md:text-base leading-relaxed mb-6 flex-grow">カスタマーサポートの対応が非常に丁寧で、導入時の不安が全くありませんでした。</p><div class="border-t border-white/10 pt-4 mt-auto"><p class="text-white font-semibold text-sm md:text-base">鈴木 一郎</p><p class="text-gray-400 text-xs md:text-sm mt-1">中小企業診断士 / 経営コンサルタント</p></div></div></div></div></section><div class="w-full max-w-md mx-auto md:max-w-lg lg:max-w-xl"><div class="relative bg-white rounded-2xl shadow-lg p-6 md:p-8 lg:p-10 border border-gray-100"><h2 class="sr-only">お客様の声</h2><div class="absolute -top-3 -left-3 md:-top-4 md:-left-4"><div class="w-8 h-8 md:w-10 md:h-10 bg-[#0A66C2] rounded-full flex items-center justify-center shadow-md"><svg class="w-4 h-4 md:w-5 md:h-5 text-white" fill="currentColor" viewBox="0 0 24 24"><path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z"></path></svg></div></div><blockquote class="mt-2 mb-6 md:mb-8"><p class="text-gray-800 text-sm md:text-base lg:text-lg leading-relaxed md:leading-loose font-medium italic">「タスク管理が劇的に効率化され、チームの生産性が30%向上しました。直感的なUIと強力な連携機能が決め手です。」</p></blockquote><div class="flex items-center gap-3 md:gap-4"><div class="flex-shrink-0 w-10 h-10 md:w-12 md:h-12 rounded-full bg-[#1E3A5F] flex items-center justify-center text-white font-bold text-sm md:text-base shadow-sm">山</div><div class="min-w-0"><p class="text-gray-900 font-semibold text-sm md:text-base truncate">山田 太郎</p><p class="text-gray-500 text-xs md:text-sm truncate">株式会社テックイノベーション プロダクトマネージャー</p></div></div><div class="mt-4 md:mt-5 flex items-center gap-1"><svg class="w-4 h-4 md:w-5 md:h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg><svg class="w-4 h-4 md:w-5 md:h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg><svg class="w-4 h-4 md:w-5 md:h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg><svg class="w-4 h-4 md:w-5 md:h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg><svg class="w-4 h-4 md:w-5 md:h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg></div></div></div><section class="relative overflow-hidden bg-gradient-to-br from-[#0b1120] via-[#0f1a2e] to-[#1a2a44] px-6 py-20 md:py-28 lg:py-36"><div class="pointer-events-none absolute inset-0 opacity-[0.03]"><div class="h-full w-full" style="background-image:linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px);background-size:60px 60px"></div></div><div class="pointer-events-none absolute -left-40 -top-40 h-[500px] w-[500px] rounded-full bg-[#3b82f6] opacity-[0.08] blur-[120px]"></div><div class="relative mx-auto max-w-6xl"><div class="flex flex-col items-center text-center"><span class="mb-6 inline-block rounded-full border border-[#3b82f6]/30 bg-[#3b82f6]/10 px-4 py-1.5 text-xs font-semibold tracking-wider text-[#93bbfc] uppercase md:text-sm">今すぐ始める</span><h2 class="mb-6 text-3xl font-extrabold leading-tight tracking-tight text-white md:text-4xl lg:text-5xl">タスク管理の<br class="block md:hidden"/>新しいスタンダード</h2><p class="mb-10 max-w-2xl text-base leading-relaxed text-[#b0c4de] md:text-lg lg:text-xl">煩雑なプロジェクトも、チームの進捗も。<br class="hidden md:block"/>直感的なインターフェースで、すべてがクリアになります。</p><div class="flex flex-col gap-4 sm:flex-row sm:gap-6"><a href="#" class="inline-flex items-center justify-center rounded-xl bg-[#3b82f6] px-8 py-4 text-base font-bold text-white shadow-lg shadow-[#3b82f6]/30 transition-all duration-300 hover:bg-[#2563eb] hover:shadow-[#3b82f6]/50 active:scale-[0.97] md:px-10 md:py-4 md:text-lg">無料で始める<svg class="ml-2 h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6"></path></svg></a><a href="#" class="inline-flex items-center justify-center rounded-xl border border-[#4a5a7a] bg-white/5 px-8 py-4 text-base font-semibold text-[#d0dff0] backdrop-blur-sm transition-all duration-300 hover:bg-white/10 hover:text-white active:scale-[0.97] md:px-10 md:py-4 md:text-lg">デモを見る</a></div><div class="mt-14 flex flex-wrap items-center justify-center gap-x-8 gap-y-3 text-sm text-[#6b7f9e] md:mt-16"><span class="flex items-center gap-1.5"><svg class="h-4 w-4 text-[#3b82f6]" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>導入企業500社以上</span><span class="flex items-center gap-1.5"><svg class="h-4 w-4 text-[#3b82f6]" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>NPS推奨スコア 92</span><span class="flex items-center gap-1.5"><svg class="h-4 w-4 text-[#3b82f6]" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>平均工数 40%削減</span></div></div></div></section><div class="w-full max-w-3xl mx-auto px-4 py-10 md:py-16"><h2 class="text-2xl md:text-3xl font-bold text-[#1e3a5f] mb-8 text-center tracking-wide">よくあるご質問</h2><div class="space-y-3"><div class="border border-[#d4dcec] rounded-lg overflow-hidden bg-white shadow-sm"><button class="w-full flex justify-between items-center px-5 py-4 md:px-6 md:py-5 text-left text-[#1e3a5f] font-semibold text-sm md:text-base hover:bg-[#f4f7fc] transition-colors duration-200" aria-expanded="false"><span>初回のご相談は無料ですか？</span><span class="ml-4 text-[#2b6b9e] transform transition-transform duration-300 text-xl flex-shrink-0 ">▾</span></button><div class="overflow-hidden transition-all duration-300 ease-in-out max-h-0 opacity-0"><div class="px-5 pb-4 md:px-6 md:pb-5 text-sm md:text-base text-[#3d4f66] leading-relaxed border-t border-[#e8edf5] pt-3">はい、初回のご相談は無料で承っております。お気軽にお問い合わせください。</div></div></div><div class="border border-[#d4dcec] rounded-lg overflow-hidden bg-white shadow-sm"><button class="w-full flex justify-between items-center px-5 py-4 md:px-6 md:py-5 text-left text-[#1e3a5f] font-semibold text-sm md:text-base hover:bg-[#f4f7fc] transition-colors duration-200" aria-expanded="false"><span>オンラインでのやり取りは可能ですか？</span><span class="ml-4 text-[#2b6b9e] transform transition-transform duration-300 text-xl flex-shrink-0 ">▾</span></button><div class="overflow-hidden transition-all duration-300 ease-in-out max-h-0 opacity-0"><div class="px-5 pb-4 md:px-6 md:pb-5 text-sm md:text-base text-[#3d4f66] leading-relaxed border-t border-[#e8edf5] pt-3">可能です。Zoomやメール、お電話でのご相談に対応しております。遠方の方もぜひご利用ください。</div></div></div><div class="border border-[#d4dcec] rounded-lg overflow-hidden bg-white shadow-sm"><button class="w-full flex justify-between items-center px-5 py-4 md:px-6 md:py-5 text-left text-[#1e3a5f] font-semibold text-sm md:text-base hover:bg-[#f4f7fc] transition-colors duration-200" aria-expanded="false"><span>決算・申告の料金はどのくらいですか？</span><span class="ml-4 text-[#2b6b9e] transform transition-transform duration-300 text-xl flex-shrink-0 ">▾</span></button><div class="overflow-hidden transition-all duration-300 ease-in-out max-h-0 opacity-0"><div class="px-5 pb-4 md:px-6 md:pb-5 text-sm md:text-base text-[#3d4f66] leading-relaxed border-t border-[#e8edf5] pt-3">お客様の事業規模や取引内容により異なります。初回相談時に詳しいお見積りを提示いたします。</div></div></div><div class="border border-[#d4dcec] rounded-lg overflow-hidden bg-white shadow-sm"><button class="w-full flex justify-between items-center px-5 py-4 md:px-6 md:py-5 text-left text-[#1e3a5f] font-semibold text-sm md:text-base hover:bg-[#f4f7fc] transition-colors duration-200" aria-expanded="false"><span>毎月の記帳代行はお願いできますか？</span><span class="ml-4 text-[#2b6b9e] transform transition-transform duration-300 text-xl flex-shrink-0 ">▾</span></button><div class="overflow-hidden transition-all duration-300 ease-in-out max-h-0 opacity-0"><div class="px-5 pb-4 md:px-6 md:pb-5 text-sm md:text-base text-[#3d4f66] leading-relaxed border-t border-[#e8edf5] pt-3">はい、記帳代行サービスも提供しております。領収書の整理から月次試算表の作成までサポートいたします。</div></div></div><div class="border border-[#d4dcec] rounded-lg overflow-hidden bg-white shadow-sm"><button class="w-full flex justify-between items-center px-5 py-4 md:px-6 md:py-5 text-left text-[#1e3a5f] font-semibold text-sm md:text-base hover:bg-[#f4f7fc] transition-colors duration-200" aria-expanded="false"><span>税務調査が入った場合の対応は？</span><span class="ml-4 text-[#2b6b9e] transform transition-transform duration-300 text-xl flex-shrink-0 ">▾</span></button><div class="overflow-hidden transition-all duration-300 ease-in-out max-h-0 opacity-0"><div class="px-5 pb-4 md:px-6 md:pb-5 text-sm md:text-base text-[#3d4f66] leading-relaxed border-t border-[#e8edf5] pt-3">税務調査の立会いや事前準備のアドバイスをいたします。経験豊富なスタッフが安心して対応できるようサポートいたします。</div></div></div></div></div><div class="w-full max-w-3xl 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 text-gray-900 mb-8 md:mb-12 lg:mb-16">よくある質問</h2><div class="space-y-3 md:space-y-4"><div class="border border-gray-200 rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow duration-200"><button class="w-full flex items-center justify-between px-5 py-4 md:px-6 md:py-5 bg-white hover:bg-gray-50 transition-colors duration-150 text-left" aria-expanded="false"><span class="text-base md:text-lg font-semibold text-gray-800 pr-4">タスク管理SaaSの無料トライアルはありますか？</span><span class="flex-shrink-0 w-6 h-6 flex items-center justify-center rounded-full bg-[#4F46E5] text-white transition-transform duration-200 "><svg class="w-4 h-4" 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="M19 9l-7 7-7-7"></path></svg></span></button><div class="overflow-hidden transition-all duration-300 ease-in-out max-h-0 opacity-0"><div class="px-5 pb-4 md:px-6 md:pb-5 text-sm md:text-base text-gray-600 leading-relaxed border-t border-gray-100 pt-3">はい、14日間の無料トライアルをご用意しております。クレジットカードの登録は不要で、すべての機能をお試しいただけます。</div></div></div><div class="border border-gray-200 rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow duration-200"><button class="w-full flex items-center justify-between px-5 py-4 md:px-6 md:py-5 bg-white hover:bg-gray-50 transition-colors duration-150 text-left" aria-expanded="false"><span class="text-base md:text-lg font-semibold text-gray-800 pr-4">データの保存期間やセキュリティはどうなっていますか？</span><span class="flex-shrink-0 w-6 h-6 flex items-center justify-center rounded-full bg-[#4F46E5] text-white transition-transform duration-200 "><svg class="w-4 h-4" 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="M19 9l-7 7-7-7"></path></svg></span></button><div class="overflow-hidden transition-all duration-300 ease-in-out max-h-0 opacity-0"><div class="px-5 pb-4 md:px-6 md:pb-5 text-sm md:text-base text-gray-600 leading-relaxed border-t border-gray-100 pt-3">すべてのデータはAES-256で暗号化され、国内の安全なサーバーで管理されます。保存期間は無制限で、いつでもエクスポート可能です。</div></div></div><div class="border border-gray-200 rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow duration-200"><button class="w-full flex items-center justify-between px-5 py-4 md:px-6 md:py-5 bg-white hover:bg-gray-50 transition-colors duration-150 text-left" aria-expanded="false"><span class="text-base md:text-lg font-semibold text-gray-800 pr-4">チームメンバーの招待方法を教えてください。</span><span class="flex-shrink-0 w-6 h-6 flex items-center justify-center rounded-full bg-[#4F46E5] text-white transition-transform duration-200 "><svg class="w-4 h-4" 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="M19 9l-7 7-7-7"></path></svg></span></button><div class="overflow-hidden transition-all duration-300 ease-in-out max-h-0 opacity-0"><div class="px-5 pb-4 md:px-6 md:pb-5 text-sm md:text-base text-gray-600 leading-relaxed border-t border-gray-100 pt-3">管理画面の「メンバー管理」から、メールアドレスを入力するだけで簡単に招待できます。権限設定も細かく行えます。</div></div></div><div class="border border-gray-200 rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow duration-200"><button class="w-full flex items-center justify-between px-5 py-4 md:px-6 md:py-5 bg-white hover:bg-gray-50 transition-colors duration-150 text-left" aria-expanded="false"><span class="text-base md:text-lg font-semibold text-gray-800 pr-4">既存のツールからデータを移行できますか？</span><span class="flex-shrink-0 w-6 h-6 flex items-center justify-center rounded-full bg-[#4F46E5] text-white transition-transform duration-200 "><svg class="w-4 h-4" 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="M19 9l-7 7-7-7"></path></svg></span></button><div class="overflow-hidden transition-all duration-300 ease-in-out max-h-0 opacity-0"><div class="px-5 pb-4 md:px-6 md:pb-5 text-sm md:text-base text-gray-600 leading-relaxed border-t border-gray-100 pt-3">対応可能です。CSVやJSON形式でのインポートに対応しており、専任のサポートチームが移行を支援します。</div></div></div></div></div><footer class="bg-[#0f172a] text-gray-300 py-12 px-6 md:px-12 lg:px-20"><div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-10 md:gap-8"><div><h2 class="text-white text-lg font-bold tracking-wide mb-3">TaskFlow</h2><p class="text-sm leading-relaxed text-gray-400">チームの生産性を最大化する<br/>次世代タスク管理プラットフォーム</p></div><div><h3 class="text-white font-semibold mb-4 text-sm uppercase tracking-wider">機能</h3><ul class="space-y-2 text-sm"><li><a href="#" class="hover:text-white transition-colors duration-200">プロジェクト管理</a></li><li><a href="#" class="hover:text-white transition-colors duration-200">ガントチャート</a></li><li><a href="#" class="hover:text-white transition-colors duration-200">タイムトラッキング</a></li><li><a href="#" class="hover:text-white transition-colors duration-200">チームコラボレーション</a></li></ul></div><div><h3 class="text-white font-semibold mb-4 text-sm uppercase tracking-wider">サポート</h3><ul class="space-y-2 text-sm"><li><a href="#" class="hover:text-white transition-colors duration-200">ドキュメント</a></li><li><a href="#" class="hover:text-white transition-colors duration-200">APIリファレンス</a></li><li><a href="#" class="hover:text-white transition-colors duration-200">お問い合わせ</a></li><li><a href="#" class="hover:text-white transition-colors duration-200">プライバシーポリシー</a></li></ul></div></div><div class="mt-10 pt-6 border-t border-gray-700/60 text-center text-sm text-gray-500"><p>© 2026 TaskFlow, Inc. All rights reserved.</p></div></footer><nav class="bg-white/95 backdrop-blur sticky top-0 z-50 shadow-sm h-16"><div class="max-w-7xl mx-auto px-4 h-full flex justify-between items-center"><a href="/" class="text-xl font-bold text-gray-900 tracking-tight">FlowBoard</a><div class="hidden md:flex items-center gap-8"><a href="/features" class="text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors">Features</a><a href="/pricing" class="text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors">Pricing</a><a href="/docs" class="text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors">Docs</a><a href="/blog" class="text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors">Blog</a><a href="/about" class="text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors">About</a><button class="bg-gray-900 text-white text-sm font-semibold px-5 py-2 rounded-lg hover:bg-gray-800 transition-colors">Get Started</button></div><button class="md:hidden p-2 rounded-md text-gray-600 hover:text-gray-900 hover:bg-gray-100 transition-colors" aria-label="タスク管理SaaSツールのランディングページ"><svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg></button></div></nav><div class="w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 md:py-12 lg:py-16"><div class="flex flex-col md:flex-row items-center justify-between gap-6 md:gap-8 lg:gap-12"><div class="flex-1 text-center md:text-left"><h2 class="text-2xl md:text-3xl lg:text-4xl font-bold text-gray-900 mb-4">今すぐ始めよう</h2><p class="text-base md:text-lg text-gray-600 mb-6">シンプルで強力なツールであなたの可能性を広げます</p><button type="button" class="
              relative inline-flex items-center justify-center
              px-6 py-3 md:px-8 md:py-4
              text-base md:text-lg font-bold
              text-white
              bg-gradient-to-r from-[#1E90FF] to-[#00BFFF]
              rounded-xl shadow-lg
              hover:shadow-xl hover:from-[#1C86EE] hover:to-[#00AEEF]
              active:scale-[0.97]
              transition-all duration-200 ease-in-out
              focus:outline-none focus:ring-2 focus:ring-[#1E90FF] focus:ring-offset-2 focus:ring-offset-white
              w-full sm:w-auto
            " aria-label="無料で始める サインアップ"><span class="mr-2 md:mr-3 flex-shrink-0"><svg class="w-5 h-5 md:w-6 md:h-6" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" d="M16 21v-2a4 4 0 00-4-4H6a4 4 0 00-4 4v2M9 11a4 4 0 100-8 4 4 0 000 8zm11 2l-3 3m0 0l-3-3m3 3V3"></path></svg></span><span>無料ではじめる</span><span class="ml-2 md:ml-3 flex-shrink-0"><svg class="w-4 h-4 md:w-5 md:h-5" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6"></path></svg></span></button></div><div class="flex-1"><div class="bg-gradient-to-br from-[#1E90FF]/10 to-[#00BFFF]/10 rounded-2xl p-6 md:p-8 lg:p-10"><div class="grid grid-cols-2 gap-4"><div class="bg-white rounded-xl p-4 shadow-sm"><div class="w-10 h-10 bg-[#1E90FF]/10 rounded-lg flex items-center justify-center mb-3"><svg class="w-5 h-5 text-[#1E90FF]" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg></div><h3 class="text-sm font-semibold text-gray-900">高速処理</h3><p class="text-xs text-gray-500 mt-1">ミリ秒単位の応答</p></div><div class="bg-white rounded-xl p-4 shadow-sm"><div class="w-10 h-10 bg-[#00BFFF]/10 rounded-lg flex items-center justify-center mb-3"><svg class="w-5 h-5 text-[#00BFFF]" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path></svg></div><h3 class="text-sm font-semibold text-gray-900">安全設計</h3><p class="text-xs text-gray-500 mt-1">エンタープライズ級</p></div><div class="bg-white rounded-xl p-4 shadow-sm"><div class="w-10 h-10 bg-[#1E90FF]/10 rounded-lg flex items-center justify-center mb-3"><svg class="w-5 h-5 text-[#1E90FF]" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path></svg></div><h3 class="text-sm font-semibold text-gray-900">自動更新</h3><p class="text-xs text-gray-500 mt-1">常に最新状態</p></div><div class="bg-white rounded-xl p-4 shadow-sm"><div class="w-10 h-10 bg-[#00BFFF]/10 rounded-lg flex items-center justify-center mb-3"><svg class="w-5 h-5 text-[#00BFFF]" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path></svg></div><h3 class="text-sm font-semibold text-gray-900">チーム対応</h3><p class="text-xs text-gray-500 mt-1">最大50人まで</p></div></div></div></div></div></div><a href="/" class="inline-flex items-center gap-2 group" aria-label="タスク管理SaaS ロゴ"><div class="relative flex items-center justify-center w-9 h-9 md:w-10 md:h-10 rounded-xl bg-gradient-to-br from-[#4F46E5] to-[#7C3AED] shadow-md shadow-indigo-500/20 group-hover:shadow-indigo-500/30 transition-shadow duration-300"><svg viewBox="0 0 24 24" fill="none" class="w-5 h-5 md:w-6 md:h-6 text-white" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 13 9 18 20 6"></polyline></svg><span class="absolute -top-0.5 -right-0.5 w-2 h-2 md:w-2.5 md:h-2.5 rounded-full bg-amber-400 border-2 border-white shadow-sm"></span></div><h2 class="text-lg md:text-xl font-bold tracking-tight text-gray-800 dark:text-gray-100">TaskFlow</h2></a><div class="w-full max-w-5xl mx-auto px-4 py-12 md:py-20"><div class="relative mx-auto max-w-[320px] md:max-w-[400px] lg:max-w-[480px]"><div class="rounded-[2.5rem] border-4 border-gray-800 bg-gray-900 shadow-2xl overflow-hidden"><div class="flex justify-center pt-2 pb-1"><div class="w-24 h-5 bg-gray-800 rounded-full"></div></div><div class="flex justify-between items-center px-5 py-2 text-white text-xs"><span>9:41</span><div class="flex gap-1"><div class="w-3 h-3 border border-white rounded-sm"></div><div class="w-3 h-3 border border-white rounded-sm"></div><div class="w-4 h-3 bg-white rounded-sm"></div></div></div><div class="bg-gradient-to-b from-indigo-50 to-white px-4 pt-2 pb-6"><div class="flex justify-between items-center mb-4"><h2 class="text-sm font-bold text-gray-800">タスク管理</h2><div class="flex gap-2"><span class="w-5 h-5 bg-indigo-500 rounded-full flex items-center justify-center text-white text-[10px] font-bold">+</span><span class="w-5 h-5 bg-gray-200 rounded-full flex items-center justify-center text-gray-500 text-[10px]">≡</span></div></div><div class="space-y-2"><div class="flex items-center gap-2 bg-white rounded-lg p-2 shadow-sm border-l-4 border-indigo-500"><div class="w-4 h-4 rounded-full border-2 border-indigo-300 flex-shrink-0"></div><span class="text-xs text-gray-700 flex-1">企画書の作成</span><span class="text-[10px] text-gray-400 bg-gray-100 px-1.5 py-0.5 rounded">今日</span></div><div class="flex items-center gap-2 bg-white rounded-lg p-2 shadow-sm border-l-4 border-emerald-400"><div class="w-4 h-4 rounded-full border-2 border-emerald-300 flex-shrink-0"></div><span class="text-xs text-gray-700 flex-1">MTG資料の準備</span><span class="text-[10px] text-gray-400 bg-gray-100 px-1.5 py-0.5 rounded">明日</span></div><div class="flex items-center gap-2 bg-white rounded-lg p-2 shadow-sm border-l-4 border-amber-400"><div class="w-4 h-4 rounded-full border-2 border-amber-300 flex-shrink-0"></div><span class="text-xs text-gray-700 flex-1">請求書の確認</span><span class="text-[10px] text-gray-400 bg-gray-100 px-1.5 py-0.5 rounded">未設定</span></div><div class="flex items-center gap-2 bg-white rounded-lg p-2 shadow-sm border-l-4 border-rose-400"><div class="w-4 h-4 rounded-full border-2 border-rose-300 flex-shrink-0"></div><span class="text-xs text-gray-700 flex-1">クライアントへの連絡</span><span class="text-[10px] text-gray-400 bg-gray-100 px-1.5 py-0.5 rounded">緊急</span></div></div><div class="mt-4 bg-white rounded-lg p-3 shadow-sm"><div class="flex justify-between text-xs text-gray-500 mb-1"><span>今日の進捗</span><span>3/8</span></div><div class="w-full h-2 bg-gray-100 rounded-full overflow-hidden"><div class="h-full w-[37.5%] bg-gradient-to-r from-indigo-400 to-indigo-600 rounded-full"></div></div></div><div class="mt-4 flex justify-around text-gray-400 text-[10px]"><div class="flex flex-col items-center text-indigo-600"><svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a8 8 0 100 16 8 8 0 000-16zm0 14a6 6 0 110-12 6 6 0 010 12z"></path></svg><span>タスク</span></div><div class="flex flex-col items-center"><svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M5 3a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2V5a2 2 0 00-2-2H5zm0 2h10v10H5V5z"></path></svg><span>カレンダー</span></div><div class="flex flex-col items-center"><svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm0-2a6 6 0 100-12 6 6 0 000 12z" clip-rule="evenodd"></path></svg><span>設定</span></div></div></div><div class="flex justify-center py-2 bg-white"><div class="w-28 h-1 bg-gray-300 rounded-full"></div></div></div><div class="absolute -inset-1 bg-gradient-to-br from-indigo-200/30 to-purple-200/30 rounded-[3rem] -z-10 blur-sm"></div></div><p class="text-center text-xs text-gray-400 mt-4 md:mt-6">タスク管理SaaS アプリ画面イメージ</p></div><section class="w-full bg-[#0f172a] py-12 md:py-16 lg:py-20"><div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"><h2 class="mb-8 text-center text-sm font-semibold tracking-widest text-slate-400 uppercase md:mb-10 lg:mb-12">導入企業（順不同）</h2><div class="flex flex-wrap items-center justify-center gap-x-10 gap-y-6 md:gap-x-14 lg:gap-x-20"><div class="flex items-center justify-center opacity-60 transition duration-300 hover:opacity-100"><div class="flex h-10 items-center justify-center rounded-md bg-white/5 px-4 md:h-12 lg:h-14" style="width:140px"><span class="text-xs font-bold tracking-wider text-slate-300 md:text-sm lg:text-base">株式会社アルファ</span></div></div><div class="flex items-center justify-center opacity-60 transition duration-300 hover:opacity-100"><div class="flex h-10 items-center justify-center rounded-md bg-white/5 px-4 md:h-12 lg:h-14" style="width:120px"><span class="text-xs font-bold tracking-wider text-slate-300 md:text-sm lg:text-base">ベータ商事</span></div></div><div class="flex items-center justify-center opacity-60 transition duration-300 hover:opacity-100"><div class="flex h-10 items-center justify-center rounded-md bg-white/5 px-4 md:h-12 lg:h-14" style="width:130px"><span class="text-xs font-bold tracking-wider text-slate-300 md:text-sm lg:text-base">ガンマ工業</span></div></div><div class="flex items-center justify-center opacity-60 transition duration-300 hover:opacity-100"><div class="flex h-10 items-center justify-center rounded-md bg-white/5 px-4 md:h-12 lg:h-14" style="width:150px"><span class="text-xs font-bold tracking-wider text-slate-300 md:text-sm lg:text-base">デルタシステムズ</span></div></div><div class="flex items-center justify-center opacity-60 transition duration-300 hover:opacity-100"><div class="flex h-10 items-center justify-center rounded-md bg-white/5 px-4 md:h-12 lg:h-14" style="width:110px"><span class="text-xs font-bold tracking-wider text-slate-300 md:text-sm lg:text-base">イプシロン株式会社</span></div></div><div class="flex items-center justify-center opacity-60 transition duration-300 hover:opacity-100"><div class="flex h-10 items-center justify-center rounded-md bg-white/5 px-4 md:h-12 lg:h-14" style="width:135px"><span class="text-xs font-bold tracking-wider text-slate-300 md:text-sm lg:text-base">ゼータテクノロジー</span></div></div></div></div></section><section class="w-full bg-gradient-to-br from-[#0b1a2e] via-[#0f2240] to-[#0b1a2e] py-16 md:py-24"><div class="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8"><h2 class="mb-12 text-center text-2xl font-bold text-white md:text-3xl lg:text-4xl">導入実績</h2><div class="grid grid-cols-2 gap-6 md:grid-cols-4 md:gap-8"><div class="group relative flex flex-col items-center justify-center rounded-2xl border border-[#1e3a5f] bg-[#0f1f3a]/60 p-6 backdrop-blur-sm transition-all duration-300 hover:border-[#3b82f6]/50 hover:shadow-[0_0_30px_-5px_rgba(59,130,246,0.3)] md:p-8"><span class="bg-gradient-to-r from-[#60a5fa] to-[#a78bfa] bg-clip-text text-3xl font-extrabold tracking-tight text-transparent md:text-4xl lg:text-5xl">12,000+</span><span class="mt-2 text-center text-sm font-medium text-[#94a3b8] md:text-base">導入社数</span><div class="mt-3 h-1 w-12 rounded-full bg-gradient-to-r from-[#3b82f6]/40 to-[#8b5cf6]/40 transition-all duration-300 group-hover:w-16 group-hover:from-[#3b82f6] group-hover:to-[#8b5cf6]"></div></div><div class="group relative flex flex-col items-center justify-center rounded-2xl border border-[#1e3a5f] bg-[#0f1f3a]/60 p-6 backdrop-blur-sm transition-all duration-300 hover:border-[#3b82f6]/50 hover:shadow-[0_0_30px_-5px_rgba(59,130,246,0.3)] md:p-8"><span class="bg-gradient-to-r from-[#60a5fa] to-[#a78bfa] bg-clip-text text-3xl font-extrabold tracking-tight text-transparent md:text-4xl lg:text-5xl">94%</span><span class="mt-2 text-center text-sm font-medium text-[#94a3b8] md:text-base">タスク完了率</span><div class="mt-3 h-1 w-12 rounded-full bg-gradient-to-r from-[#3b82f6]/40 to-[#8b5cf6]/40 transition-all duration-300 group-hover:w-16 group-hover:from-[#3b82f6] group-hover:to-[#8b5cf6]"></div></div><div class="group relative flex flex-col items-center justify-center rounded-2xl border border-[#1e3a5f] bg-[#0f1f3a]/60 p-6 backdrop-blur-sm transition-all duration-300 hover:border-[#3b82f6]/50 hover:shadow-[0_0_30px_-5px_rgba(59,130,246,0.3)] md:p-8"><span class="bg-gradient-to-r from-[#60a5fa] to-[#a78bfa] bg-clip-text text-3xl font-extrabold tracking-tight text-transparent md:text-4xl lg:text-5xl">37%</span><span class="mt-2 text-center text-sm font-medium text-[#94a3b8] md:text-base">平均工数削減</span><div class="mt-3 h-1 w-12 rounded-full bg-gradient-to-r from-[#3b82f6]/40 to-[#8b5cf6]/40 transition-all duration-300 group-hover:w-16 group-hover:from-[#3b82f6] group-hover:to-[#8b5cf6]"></div></div><div class="group relative flex flex-col items-center justify-center rounded-2xl border border-[#1e3a5f] bg-[#0f1f3a]/60 p-6 backdrop-blur-sm transition-all duration-300 hover:border-[#3b82f6]/50 hover:shadow-[0_0_30px_-5px_rgba(59,130,246,0.3)] md:p-8"><span class="bg-gradient-to-r from-[#60a5fa] to-[#a78bfa] bg-clip-text text-3xl font-extrabold tracking-tight text-transparent md:text-4xl lg:text-5xl">4.8/5</span><span class="mt-2 text-center text-sm font-medium text-[#94a3b8] md:text-base">ユーザー満足度</span><div class="mt-3 h-1 w-12 rounded-full bg-gradient-to-r from-[#3b82f6]/40 to-[#8b5cf6]/40 transition-all duration-300 group-hover:w-16 group-hover:from-[#3b82f6] group-hover:to-[#8b5cf6]"></div></div></div></div></section><section class="w-full bg-white py-16 md:py-24 lg:py-28"><div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"><div class="text-center mb-12 md:mb-16"><h2 class="text-2xl md:text-3xl lg:text-4xl font-bold text-gray-900 tracking-tight">なぜ選ばれるのか？</h2><p class="mt-4 text-base md:text-lg text-gray-500 max-w-2xl mx-auto">タスク管理の常識を変える、4つの特長</p></div><div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 md:gap-8"><div class="group relative bg-white border border-gray-100 rounded-2xl p-6 md:p-8 shadow-sm hover:shadow-lg transition-all duration-300 hover:-translate-y-1"><div class="flex items-center justify-center w-14 h-14 bg-indigo-50 rounded-xl mb-5 group-hover:bg-indigo-100 transition-colors"><svg class="w-8 h-8 text-[#4F46E5]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"></path></svg></div><h3 class="text-lg md:text-xl font-semibold text-gray-900 mb-3">タスクの一元管理</h3><p class="text-sm md:text-base text-gray-500 leading-relaxed">プロジェクトごとに散らばったタスクを一箇所に集約。チーム全体の進捗がリアルタイムで把握できます。</p><div class="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-[#4F46E5] to-[#7C3AED] rounded-b-2xl opacity-0 group-hover:opacity-100 transition-opacity"></div></div><div class="group relative bg-white border border-gray-100 rounded-2xl p-6 md:p-8 shadow-sm hover:shadow-lg transition-all duration-300 hover:-translate-y-1"><div class="flex items-center justify-center w-14 h-14 bg-indigo-50 rounded-xl mb-5 group-hover:bg-indigo-100 transition-colors"><svg class="w-8 h-8 text-[#4F46E5]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg></div><h3 class="text-lg md:text-xl font-semibold text-gray-900 mb-3">自動リマインダー</h3><p class="text-sm md:text-base text-gray-500 leading-relaxed">期限が近づくと自動で通知。うっかり忘れを防止し、納期厳守のチーム文化を醸成します。</p><div class="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-[#4F46E5] to-[#7C3AED] rounded-b-2xl opacity-0 group-hover:opacity-100 transition-opacity"></div></div><div class="group relative bg-white border border-gray-100 rounded-2xl p-6 md:p-8 shadow-sm hover:shadow-lg transition-all duration-300 hover:-translate-y-1"><div class="flex items-center justify-center w-14 h-14 bg-indigo-50 rounded-xl mb-5 group-hover:bg-indigo-100 transition-colors"><svg class="w-8 h-8 text-[#4F46E5]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path></svg></div><h3 class="text-lg md:text-xl font-semibold text-gray-900 mb-3">チームコラボレーション</h3><p class="text-sm md:text-base text-gray-500 leading-relaxed">コメント・ファイル添付・メンション機能で、タスクに関するコミュニケーションがシームレスに。</p><div class="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-[#4F46E5] to-[#7C3AED] rounded-b-2xl opacity-0 group-hover:opacity-100 transition-opacity"></div></div><div class="group relative bg-white border border-gray-100 rounded-2xl p-6 md:p-8 shadow-sm hover:shadow-lg transition-all duration-300 hover:-translate-y-1"><div class="flex items-center justify-center w-14 h-14 bg-indigo-50 rounded-xl mb-5 group-hover:bg-indigo-100 transition-colors"><svg class="w-8 h-8 text-[#4F46E5]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path></svg></div><h3 class="text-lg md:text-xl font-semibold text-gray-900 mb-3">カスタムダッシュボード</h3><p class="text-sm md:text-base text-gray-500 leading-relaxed">自分だけのビューで優先順位を可視化。ドラッグ&amp;ドロップで直感的にタスクを整理できます。</p><div class="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-[#4F46E5] to-[#7C3AED] rounded-b-2xl opacity-0 group-hover:opacity-100 transition-opacity"></div></div></div></div></section><div class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-gradient-to-r from-[#e0f2fe] to-[#dbeafe] border border-[#b9d4f0] shadow-sm md:px-4 md:py-1.5"><h2 class="sr-only">トライアル情報</h2><svg class="w-3.5 h-3.5 text-[#2563eb] md:w-4 md:h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg><span class="text-xs font-semibold text-[#1e40af] tracking-wide md:text-sm">トライアル期間中</span><span class="hidden md:inline-block text-[10px] font-medium text-[#3b82f6] bg-white/60 px-2 py-0.5 rounded-full border border-[#93c5fd]">残り14日</span></div></div>