学習塾・教育（テンプレートから）

atomic.studio/s/3707

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

<div class="min-h-screen bg-zinc-950 text-white"><section class="bg-indigo-50 py-20 md:py-28"><div class="mx-auto max-w-5xl px-6"><h2 class="text-3xl md:text-4xl font-bold text-slate-900 text-center">小学生コース</h2><div class="mt-14 grid md:grid-cols-2 gap-6"><div class="rounded-2xl bg-white border border-indigo-100 p-8 hover:shadow-md transition"><div class="flex items-center gap-4"><span class="text-4xl">✏️</span><div><div class="flex items-center gap-2 flex-wrap"><h3 class="font-bold text-slate-900">算数・国語 基礎コース</h3><span class="rounded-full bg-indigo-100 text-indigo-700 text-xs px-2 py-0.5">小1〜小3</span></div><p class="text-xs text-slate-400 mt-0.5">週2回 各50分</p></div><p class="ml-auto font-bold text-indigo-700 shrink-0">¥11,000/月</p></div><p class="mt-5 text-sm text-slate-600 leading-relaxed">かけ算・分数・漢字・文章読解の基礎を丁寧に積み上げ。苦手を作らない指導。</p></div><div class="rounded-2xl bg-white border border-indigo-100 p-8 hover:shadow-md transition"><div class="flex items-center gap-4"><span class="text-4xl">🎯</span><div><div class="flex items-center gap-2 flex-wrap"><h3 class="font-bold text-slate-900">中学受験 準備コース</h3><span class="rounded-full bg-indigo-100 text-indigo-700 text-xs px-2 py-0.5">小4〜小6</span></div><p class="text-xs text-slate-400 mt-0.5">週3回 各80分</p></div><p class="ml-auto font-bold text-indigo-700 shrink-0">¥24,200/月</p></div><p class="mt-5 text-sm text-slate-600 leading-relaxed">4大塾との違いは個別対応。進度・難易度を一人ひとりに最適化して志望校へ。</p></div><div class="rounded-2xl bg-white border border-indigo-100 p-8 hover:shadow-md transition"><div class="flex items-center gap-4"><span class="text-4xl">🌍</span><div><div class="flex items-center gap-2 flex-wrap"><h3 class="font-bold text-slate-900">英語 先取りコース</h3><span class="rounded-full bg-indigo-100 text-indigo-700 text-xs px-2 py-0.5">小1〜小6</span></div><p class="text-xs text-slate-400 mt-0.5">週1回 60分</p></div><p class="ml-auto font-bold text-indigo-700 shrink-0">¥8,800/月</p></div><p class="mt-5 text-sm text-slate-600 leading-relaxed">中学英語の先取りと英検対策。楽しく続けて中学入学時に周囲と差をつけます。</p></div><div class="rounded-2xl bg-white border border-indigo-100 p-8 hover:shadow-md transition"><div class="flex items-center gap-4"><span class="text-4xl">💻</span><div><div class="flex items-center gap-2 flex-wrap"><h3 class="font-bold text-slate-900">プログラミング</h3><span class="rounded-full bg-indigo-100 text-indigo-700 text-xs px-2 py-0.5">小2〜小6</span></div><p class="text-xs text-slate-400 mt-0.5">週1回 60分</p></div><p class="ml-auto font-bold text-indigo-700 shrink-0">¥8,800/月</p></div><p class="mt-5 text-sm text-slate-600 leading-relaxed">Scratch・マイクラでロジカル思考を養成。2025年から本格化するコード教育に備えます。</p></div></div></div></section><section class="bg-white py-16"><div class="max-w-6xl mx-auto px-4"><h2 class="text-3xl font-bold text-center mb-12 text-gray-800">講師紹介</h2><div class="bg-gray-50 rounded-2xl p-6"><div class="grid md:grid-cols-2 gap-6"><div class="bg-white rounded-xl p-6 shadow-sm border border-gray-100 flex flex-col items-center text-center"><div class="bg-gray-100 rounded-full w-24 h-24 mb-4 flex items-center justify-center text-gray-400 text-sm">写真</div><h3 class="text-xl font-semibold text-gray-800 mb-1">佐藤 優子</h3><p class="text-indigo-600 font-medium text-sm mb-3">英語 / 国語</p><div class="text-gray-600 text-sm space-y-1 mb-3"><p>TESOL資格取得、TOEIC990点</p><p>指導歴12年、英検1級保持</p></div><div class="bg-gray-50 rounded-xl p-3 w-full mb-4"><p class="text-sm font-medium text-gray-700">指導実績</p><p class="text-sm text-gray-600">早稲田大学 合格実績 23名、MARCH 合格実績 45名</p></div><a href="#" class="inline-block bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-medium py-2 px-6 rounded-full transition-colors">プロフィール詳細を見る</a></div><div class="bg-white rounded-xl p-6 shadow-sm border border-gray-100 flex flex-col items-center text-center"><div class="bg-gray-100 rounded-full w-24 h-24 mb-4 flex items-center justify-center text-gray-400 text-sm">写真</div><h3 class="text-xl font-semibold text-gray-800 mb-1">田中 大輔</h3><p class="text-indigo-600 font-medium text-sm mb-3">数学 / 物理</p><div class="text-gray-600 text-sm space-y-1 mb-3"><p>東京大学大学院修了、教員免許(理科)</p><p>指導歴8年、物理オリンピック指導経験</p></div><div class="bg-gray-50 rounded-xl p-3 w-full mb-4"><p class="text-sm font-medium text-gray-700">指導実績</p><p class="text-sm text-gray-600">東大合格 7名、東工大合格 12名、医学部合格 5名</p></div><a href="#" class="inline-block bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-medium py-2 px-6 rounded-full transition-colors">指導実績を確認する</a></div><div class="bg-white rounded-xl p-6 shadow-sm border border-gray-100 flex flex-col items-center text-center"><div class="bg-gray-100 rounded-full w-24 h-24 mb-4 flex items-center justify-center text-gray-400 text-sm">写真</div><h3 class="text-xl font-semibold text-gray-800 mb-1">鈴木 美咲</h3><p class="text-indigo-600 font-medium text-sm mb-3">化学 / 生物</p><div class="text-gray-600 text-sm space-y-1 mb-3"><p>薬剤師免許、医学部受験指導専門</p><p>指導歴15年、模試作成委員経験</p></div><div class="bg-gray-50 rounded-xl p-3 w-full mb-4"><p class="text-sm font-medium text-gray-700">指導実績</p><p class="text-sm text-gray-600">国公立医学部合格 18名、私立医学部合格 32名</p></div><a href="#" class="inline-block bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-medium py-2 px-6 rounded-full transition-colors">合格体験記を読む</a></div><div class="bg-white rounded-xl p-6 shadow-sm border border-gray-100 flex flex-col items-center text-center"><div class="bg-gray-100 rounded-full w-24 h-24 mb-4 flex items-center justify-center text-gray-400 text-sm">写真</div><h3 class="text-xl font-semibold text-gray-800 mb-1">山本 健一</h3><p class="text-indigo-600 font-medium text-sm mb-3">社会 / 小論文</p><div class="text-gray-600 text-sm space-y-1 mb-3"><p>早稲田大学政治経済学部卒、新聞記者経験</p><p>指導歴10年、小論文添削累計3000本</p></div><div class="bg-gray-50 rounded-xl p-3 w-full mb-4"><p class="text-sm font-medium text-gray-700">指導実績</p><p class="text-sm text-gray-600">早慶上智 合格 28名、GMARCH 合格 40名</p></div><a href="#" class="inline-block bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-medium py-2 px-6 rounded-full transition-colors">無料相談を予約する</a></div></div></div></div></section><section class="bg-white py-20 md:py-28"><div class="mx-auto max-w-6xl px-6"><div class="max-w-2xl"><h2 class="text-3xl md:text-4xl font-bold text-slate-900">学年・レベル別カリキュラム</h2><p class="mt-4 text-slate-600">一人ひとりの理解度に合わせた指導で、成績アップを応援。</p></div><div class="mt-14 grid gap-6 md:grid-cols-3"><div class="rounded-2xl border border-slate-200 p-8 hover:border-indigo-300 hover:shadow-lg transition"><div class="flex items-center gap-3"><span class="flex h-10 w-10 items-center justify-center rounded-xl bg-indigo-600 font-bold text-white">1</span><div><h3 class="font-bold text-slate-900">入門</h3><p class="text-xs text-slate-500">小1〜小3</p></div></div><p class="mt-5 text-sm text-slate-600 leading-relaxed">学ぶ楽しさを育てる基礎づくり。読み書き計算の土台を固めます。</p></div><div class="rounded-2xl border border-slate-200 p-8 hover:border-indigo-300 hover:shadow-lg transition"><div class="flex items-center gap-3"><span class="flex h-10 w-10 items-center justify-center rounded-xl bg-indigo-600 font-bold text-white">2</span><div><h3 class="font-bold text-slate-900">標準</h3><p class="text-xs text-slate-500">小4〜小6</p></div></div><p class="mt-5 text-sm text-slate-600 leading-relaxed">考える力を伸ばす演習中心。中学進学に向けた応用力を養います。</p></div><div class="rounded-2xl border border-slate-200 p-8 hover:border-indigo-300 hover:shadow-lg transition"><div class="flex items-center gap-3"><span class="flex h-10 w-10 items-center justify-center rounded-xl bg-indigo-600 font-bold text-white">3</span><div><h3 class="font-bold text-slate-900">発展</h3><p class="text-xs text-slate-500">中1〜中3</p></div></div><p class="mt-5 text-sm text-slate-600 leading-relaxed">定期テスト・受験対策。志望校に合わせた個別最適化を行います。</p></div></div></div></section><section class="bg-slate-50 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><p class="mt-4 text-center text-slate-600">一人ひとりの理解度に合わせた指導で、成績アップを応援。</p><div class="mt-14 grid gap-8 md:grid-cols-3 items-stretch"><div class="rounded-2xl p-8 border bg-white text-slate-900 border-slate-200"><p class="text-sm font-medium opacity-70">週1コース</p><p class="mt-4 text-4xl font-bold">¥8,800<span class="text-base font-medium opacity-60">/月</span></p><ul class="mt-6 space-y-3 text-sm"><li class="flex items-center gap-2"><span class="text-indigo-500">✓</span>60分×月4回</li><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-2xl p-8 border bg-indigo-600 text-white border-indigo-600 md:scale-105 shadow-2xl"><p class="text-sm font-medium opacity-70">週2コース</p><p class="mt-4 text-4xl font-bold">¥15,400<span class="text-base font-medium opacity-60">/月</span></p><ul class="mt-6 space-y-3 text-sm"><li class="flex items-center gap-2"><span class="text-indigo-200">✓</span>60分×月8回</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-2xl p-8 border bg-white text-slate-900 border-slate-200"><p class="text-sm font-medium opacity-70">受験対策</p><p class="mt-4 text-4xl font-bold">¥22,000<span class="text-base font-medium opacity-60">/月</span></p><ul class="mt-6 space-y-3 text-sm"><li class="flex items-center gap-2"><span class="text-indigo-500">✓</span>90分×月8回</li><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><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><p class="mt-8 text-center text-sm text-slate-500">別途入会金 11,000円（兄弟姉妹は無料）。</p></div></section><section class="bg-white py-20 md:py-28"><div class="mx-auto max-w-5xl px-6 grid md:grid-cols-2 gap-12"><div><h2 class="text-3xl font-bold text-slate-900">ご予約・ご相談</h2><p class="mt-4 text-slate-600 leading-relaxed">ご予約はお電話またはフォームから。前日18時までにお申し込みください。</p><div class="mt-8 rounded-2xl bg-slate-900 text-white p-6"><p class="text-sm text-slate-300">お電話でのご予約</p><a href="tel:03-1234-5678" class="mt-2 block text-3xl font-bold hover:text-indigo-300 transition">03-1234-5678</a><p class="mt-2 text-xs text-slate-400">受付時間: 9:00〜20:00（年中無休）</p></div></div><form class="rounded-2xl bg-slate-50 border border-slate-100 p-8 space-y-5"><h3 class="text-lg font-bold text-slate-900">Webから予約する</h3><div><label class="block text-sm font-medium text-slate-700 mb-1.5">お名前 <span class="text-red-500">*</span></label><input type="text" aria-label="お名前" required="" class="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm focus:border-indigo-400 focus:outline-none" placeholder="山田 花子"/></div><div><label class="block text-sm font-medium text-slate-700 mb-1.5">メールアドレス <span class="text-red-500">*</span></label><input type="email" aria-label="メールアドレス" required="" class="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm focus:border-indigo-400 focus:outline-none" placeholder="example@email.com"/></div><div><label class="block text-sm font-medium text-slate-700 mb-1.5">ご希望メニュー</label><select aria-label="ご希望メニュー" class="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm focus:border-indigo-400 focus:outline-none"><option>カット</option><option>カラー</option><option>パーマ</option><option>トリートメント</option><option>その他</option></select></div><div><label class="block text-sm font-medium text-slate-700 mb-1.5">ご希望日時</label><input type="datetime-local" aria-label="ご希望日時" class="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm focus:border-indigo-400 focus:outline-none"/></div><div><label class="block text-sm font-medium text-slate-700 mb-1.5">備考・ご要望</label><textarea aria-label="備考" rows="3" class="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm focus:border-indigo-400 focus:outline-none resize-none"></textarea></div><button type="submit" class="w-full rounded-xl bg-indigo-600 text-white py-3.5 font-semibold hover:bg-indigo-500 transition">予約リクエストを送る</button></form></div></section><section class="bg-white py-16"><div class="max-w-7xl mx-auto px-4"><h2 class="text-3xl font-bold text-gray-900 mb-8 text-center md:text-left">風景ギャラリー</h2><div class="grid grid-cols-2 md:grid-cols-4 gap-4"><div class="aspect-square bg-gray-200 rounded-xl overflow-hidden hover:scale-105 transition-transform duration-300 relative group"><img src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=400&amp;h=400&amp;fit=crop" alt="山岳の朝日" class="w-full h-full object-cover" loading="lazy"/><div class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-3"><span class="text-white text-sm font-medium">山岳の朝日</span></div></div><div class="aspect-square bg-gray-200 rounded-xl overflow-hidden hover:scale-105 transition-transform duration-300 relative group"><img src="https://images.unsplash.com/photo-1518837695005-2083093ee35b?w=400&amp;h=400&amp;fit=crop" alt="海辺の夕焼け" class="w-full h-full object-cover" loading="lazy"/><div class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-3"><span class="text-white text-sm font-medium">海辺の夕焼け</span></div></div><div class="aspect-square bg-gray-200 rounded-xl overflow-hidden hover:scale-105 transition-transform duration-300 relative group"><img src="https://images.unsplash.com/photo-1501785888041-af3ef285b470?w=400&amp;h=400&amp;fit=crop" alt="森林の小道" class="w-full h-full object-cover" loading="lazy"/><div class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-3"><span class="text-white text-sm font-medium">森林の小道</span></div></div><div class="aspect-square bg-gray-200 rounded-xl overflow-hidden hover:scale-105 transition-transform duration-300 relative group"><img src="https://images.unsplash.com/photo-1470071459604-7b8ec44ffd4b?w=400&amp;h=400&amp;fit=crop" alt="滝と虹" class="w-full h-full object-cover" loading="lazy"/><div class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-3"><span class="text-white text-sm font-medium">滝と虹</span></div></div><div class="aspect-square bg-gray-200 rounded-xl overflow-hidden hover:scale-105 transition-transform duration-300 relative group"><img src="https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=400&amp;h=400&amp;fit=crop" alt="紅葉の谷" class="w-full h-full object-cover" loading="lazy"/><div class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-3"><span class="text-white text-sm font-medium">紅葉の谷</span></div></div><div class="aspect-square bg-gray-200 rounded-xl overflow-hidden hover:scale-105 transition-transform duration-300 relative group"><img src="https://images.unsplash.com/photo-1504384308090-c894fdcc538d?w=400&amp;h=400&amp;fit=crop" alt="都市の夜景" class="w-full h-full object-cover" loading="lazy"/><div class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-3"><span class="text-white text-sm font-medium">都市の夜景</span></div></div><div class="aspect-square bg-gray-200 rounded-xl overflow-hidden hover:scale-105 transition-transform duration-300 relative group"><img src="https://images.unsplash.com/photo-1518173946687-a36f968f7e9c?w=400&amp;h=400&amp;fit=crop" alt="砂漠の星空" class="w-full h-full object-cover" loading="lazy"/><div class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-3"><span class="text-white text-sm font-medium">砂漠の星空</span></div></div><div class="aspect-square bg-gray-200 rounded-xl overflow-hidden hover:scale-105 transition-transform duration-300 relative group"><img src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=400&amp;h=400&amp;fit=crop" alt="熱帯のビーチ" class="w-full h-full object-cover" loading="lazy"/><div class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-3"><span class="text-white text-sm font-medium">熱帯のビーチ</span></div></div><div class="aspect-square bg-gray-200 rounded-xl overflow-hidden hover:scale-105 transition-transform duration-300 relative group"><img src="https://images.unsplash.com/photo-1518495973-0e2c7e6e8f1a?w=400&amp;h=400&amp;fit=crop" alt="雪原の樹氷" class="w-full h-full object-cover" loading="lazy"/><div class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-3"><span class="text-white text-sm font-medium">雪原の樹氷</span></div></div></div></div></section><aside class="hidden md:flex w-60 shrink-0 flex-col bg-slate-900 text-slate-300 min-h-screen"><div class="px-6 py-5 text-lg font-bold text-white border-b border-white/10">Console</div><nav class="flex-1 px-3 py-4 space-y-1"><a class="flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-medium transition bg-indigo-600 text-white"><span class="w-5 text-center opacity-80">▣</span>ダッシュボード</a><a class="flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-medium transition hover:bg-white/5 hover:text-white"><span class="w-5 text-center opacity-80">◔</span>顧客管理</a><a class="flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-medium transition hover:bg-white/5 hover:text-white"><span class="w-5 text-center opacity-80">▤</span>受注・請求</a><a class="flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-medium transition hover:bg-white/5 hover:text-white"><span class="w-5 text-center opacity-80">▦</span>在庫</a><a class="flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-medium transition hover:bg-white/5 hover:text-white"><span class="w-5 text-center opacity-80">◧</span>レポート</a><a class="flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-medium transition hover:bg-white/5 hover:text-white"><span class="w-5 text-center opacity-80">⚙</span>設定</a></nav><div class="px-3 py-4 border-t border-white/10"><a class="flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm hover:bg-white/5 hover:text-white transition"><span class="w-5 text-center">↩</span>ログアウト</a></div></aside><section class="bg-gray-900 text-white py-16 px-6 md:py-24 md:px-12 rounded-2xl"><div class="max-w-4xl mx-auto text-center"><h2 class="text-3xl md:text-5xl font-bold mb-6 leading-tight">塾のトップヒーロー</h2><p class="text-lg md:text-xl text-gray-300 mb-10 max-w-2xl mx-auto">一人ひとりの可能性を引き出す、最高の学習環境。 合格へ導くプロ講師陣が、あなたの目標達成を徹底サポートします。</p><a href="#" class="inline-block bg-indigo-400 hover:bg-indigo-300 text-gray-900 font-semibold text-lg md:text-xl px-10 py-4 rounded-full transition duration-300 shadow-lg">無料体験申し込み</a></div></section><section class="rounded-2xl bg-gray-900 text-gray-100 px-6 py-12 md:px-12 lg:px-20"><h2 class="text-3xl font-bold tracking-tight mb-8 md:text-4xl">塾の特徴・強み</h2><div class="grid gap-8 md:grid-cols-3"><div class="rounded-xl bg-gray-800 p-6 shadow-lg"><h3 class="text-xl font-semibold mb-3">個別最適カリキュラム</h3><p class="leading-relaxed text-gray-300">一人ひとりの理解度・目標に合わせたオーダーメイドの学習計画で、無理なく成績アップを実現します。</p></div><div class="rounded-xl bg-gray-800 p-6 shadow-lg"><h3 class="text-xl font-semibold mb-3">プロ講師の徹底指導</h3><p class="leading-relaxed text-gray-300">経験豊富な専任講師が、丁寧な解説と的確なアドバイスで、生徒のやる気を引き出します。</p></div><div class="rounded-xl bg-gray-800 p-6 shadow-lg"><h3 class="text-xl font-semibold mb-3">充実のフォロー体制</h3><p class="leading-relaxed text-gray-300">授業外の質問対応や自習室の無料開放など、学習を徹底サポート。安心して通える環境です。</p></div></div></section><section class="bg-gray-900 text-white py-16 px-4 md:px-8 rounded-2xl"><div class="max-w-6xl mx-auto"><h2 class="text-3xl md:text-4xl font-bold text-center mb-4">合格実績・成績アップ事例</h2><p class="text-gray-400 text-center mb-12 max-w-2xl mx-auto">多くの受講生が目標を達成。その実績と感動の声をご紹介します。</p><div class="grid grid-cols-2 md:grid-cols-4 gap-6 mb-16"><div class="bg-gray-800 rounded-xl p-6 text-center"><div class="text-3xl md:text-4xl font-bold text-indigo-400 mb-1">98.5%</div><div class="text-sm text-gray-300 mb-1">合格率</div><div class="text-xs text-gray-500">志望校合格率</div></div><div class="bg-gray-800 rounded-xl p-6 text-center"><div class="text-3xl md:text-4xl font-bold text-indigo-400 mb-1">平均+42点</div><div class="text-sm text-gray-300 mb-1">成績アップ</div><div class="text-xs text-gray-500">模試偏差値向上</div></div><div class="bg-gray-800 rounded-xl p-6 text-center"><div class="text-3xl md:text-4xl font-bold text-indigo-400 mb-1">3,200人</div><div class="text-sm text-gray-300 mb-1">受講者数</div><div class="text-xs text-gray-500">累計受講者</div></div><div class="bg-gray-800 rounded-xl p-6 text-center"><div class="text-3xl md:text-4xl font-bold text-indigo-400 mb-1">96%</div><div class="text-sm text-gray-300 mb-1">満足度</div><div class="text-xs text-gray-500">受講者アンケート</div></div></div><h3 class="text-2xl font-semibold mb-6">合格者インタビュー</h3><div class="grid md:grid-cols-3 gap-6"><div class="bg-gray-800 rounded-xl p-6 flex flex-col"><div class="flex items-center gap-3 mb-4"><div class="w-12 h-12 bg-indigo-500 rounded-full flex items-center justify-center text-gray-900 font-bold text-lg">A</div><div><div class="font-semibold text-lg">Aさんさん</div><div class="text-sm text-indigo-400">東京大学 理科一類</div></div></div><div class="flex gap-4 mb-4 text-sm"><div class="bg-gray-700 px-3 py-1 rounded-full">偏差値58</div><div class="text-indigo-400 font-bold">→</div><div class="bg-indigo-500 text-gray-900 px-3 py-1 rounded-full font-semibold">偏差値72</div></div><p class="text-gray-300 text-sm italic">“苦手だった物理が得意科目に！”</p></div><div class="bg-gray-800 rounded-xl p-6 flex flex-col"><div class="flex items-center gap-3 mb-4"><div class="w-12 h-12 bg-indigo-500 rounded-full flex items-center justify-center text-gray-900 font-bold text-lg">B</div><div><div class="font-semibold text-lg">Bさんさん</div><div class="text-sm text-indigo-400">京都大学 法学部</div></div></div><div class="flex gap-4 mb-4 text-sm"><div class="bg-gray-700 px-3 py-1 rounded-full">偏差値62</div><div class="text-indigo-400 font-bold">→</div><div class="bg-indigo-500 text-gray-900 px-3 py-1 rounded-full font-semibold">偏差値74</div></div><p class="text-gray-300 text-sm italic">“記述力が飛躍的に向上しました”</p></div><div class="bg-gray-800 rounded-xl p-6 flex flex-col"><div class="flex items-center gap-3 mb-4"><div class="w-12 h-12 bg-indigo-500 rounded-full flex items-center justify-center text-gray-900 font-bold text-lg">C</div><div><div class="font-semibold text-lg">Cさんさん</div><div class="text-sm text-indigo-400">早稲田大学 政治経済学部</div></div></div><div class="flex gap-4 mb-4 text-sm"><div class="bg-gray-700 px-3 py-1 rounded-full">偏差値55</div><div class="text-indigo-400 font-bold">→</div><div class="bg-indigo-500 text-gray-900 px-3 py-1 rounded-full font-semibold">偏差値70</div></div><p class="text-gray-300 text-sm italic">“英語の長文読解が劇的に改善”</p></div></div></div></section><section class="bg-gray-900 text-white rounded-2xl p-6 md:p-10 max-w-2xl mx-auto my-8 shadow-lg"><h2 class="text-2xl md:text-3xl font-bold mb-4">無料体験授業 受付中</h2><p class="text-base md:text-lg leading-relaxed">初回限定！60分の個別指導を完全無料でご体験いただけます。 お子さまの学習スタイルに合わせた丁寧な指導で、やる気と自信を引き出します。 お気軽にお申し込みください。</p><div class="mt-6"><span class="inline-block bg-indigo-400 text-gray-900 font-semibold px-5 py-2 rounded-full text-sm md:text-base">お申し込みはこちら</span></div></section><section class="mx-auto max-w-3xl px-4 py-12 md:py-16"><h2 class="mb-8 text-center text-2xl font-bold text-gray-900 dark:text-white md:text-3xl">よくある質問（FAQ）</h2><div class="space-y-4"><details class="group rounded-xl border border-gray-200 bg-white shadow-sm transition hover:shadow-md dark:border-gray-700 dark:bg-gray-800"><summary class="flex cursor-pointer items-center justify-between px-5 py-4 text-base font-medium text-gray-800 dark:text-gray-100 md:text-lg">サービスの利用料金は無料ですか？<span class="ml-2 shrink-0 text-gray-400 transition group-open:rotate-180 dark:text-gray-500"><svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg></span></summary><div class="border-t border-gray-100 px-5 py-4 text-sm leading-relaxed text-gray-600 dark:border-gray-700 dark:text-gray-300 md:text-base">基本機能は無料でご利用いただけます。一部のプレミアム機能については、月額または年額の有料プランをご用意しております。</div></details><details class="group rounded-xl border border-gray-200 bg-white shadow-sm transition hover:shadow-md dark:border-gray-700 dark:bg-gray-800"><summary class="flex cursor-pointer items-center justify-between px-5 py-4 text-base font-medium text-gray-800 dark:text-gray-100 md:text-lg">アカウントの削除方法を教えてください。<span class="ml-2 shrink-0 text-gray-400 transition group-open:rotate-180 dark:text-gray-500"><svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg></span></summary><div class="border-t border-gray-100 px-5 py-4 text-sm leading-relaxed text-gray-600 dark:border-gray-700 dark:text-gray-300 md:text-base">設定画面の「アカウント管理」より削除手続きを行えます。削除後、データは復元できませんのでご注意ください。</div></details><details class="group rounded-xl border border-gray-200 bg-white shadow-sm transition hover:shadow-md dark:border-gray-700 dark:bg-gray-800"><summary class="flex cursor-pointer items-center justify-between px-5 py-4 text-base font-medium text-gray-800 dark:text-gray-100 md:text-lg">対応しているブラウザは何ですか？<span class="ml-2 shrink-0 text-gray-400 transition group-open:rotate-180 dark:text-gray-500"><svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg></span></summary><div class="border-t border-gray-100 px-5 py-4 text-sm leading-relaxed text-gray-600 dark:border-gray-700 dark:text-gray-300 md:text-base">最新のChrome、Firefox、Safari、Edgeに対応しております。Internet Explorerはサポート対象外です。</div></details><details class="group rounded-xl border border-gray-200 bg-white shadow-sm transition hover:shadow-md dark:border-gray-700 dark:bg-gray-800"><summary class="flex cursor-pointer items-center justify-between px-5 py-4 text-base font-medium text-gray-800 dark:text-gray-100 md:text-lg">データの保存期間はどのくらいですか？<span class="ml-2 shrink-0 text-gray-400 transition group-open:rotate-180 dark:text-gray-500"><svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg></span></summary><div class="border-t border-gray-100 px-5 py-4 text-sm leading-relaxed text-gray-600 dark:border-gray-700 dark:text-gray-300 md:text-base">無料プランでは最終アクセスから1年間、有料プランでは契約期間中は無期限で保存されます。</div></details></div></section><section class="bg-gray-900 text-white rounded-2xl p-6 md:p-10 max-w-2xl mx-auto my-12"><h2 class="text-2xl md:text-3xl font-bold mb-4">お問い合わせ</h2><p class="text-gray-300 mb-6 leading-relaxed">ご質問やご依頼は、以下のフォームよりお気軽にお寄せください。内容を確認後、担当者よりご連絡いたします。</p><form class="space-y-4"><div><label for="name" class="block text-sm font-medium mb-1">お名前</label><input id="name" type="text" class="w-full rounded-xl bg-gray-800 border border-gray-700 px-4 py-2 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="山田 太郎"/></div><div><label for="email" class="block text-sm font-medium mb-1">メールアドレス</label><input id="email" type="email" class="w-full rounded-xl bg-gray-800 border border-gray-700 px-4 py-2 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="example@mail.com"/></div><div><label for="message" class="block text-sm font-medium mb-1">お問い合わせ内容</label><textarea id="message" rows="4" class="w-full rounded-xl bg-gray-800 border border-gray-700 px-4 py-2 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 resize-none" placeholder="お問い合わせ内容をご記入ください"></textarea></div><button type="submit" class="w-full rounded-xl bg-indigo-600 hover:bg-indigo-700 transition-colors py-3 font-semibold text-white">送信する</button></form></section><footer class="bg-gray-900 text-gray-300 rounded-2xl px-6 py-10 md:px-12 md:py-14"><div class="max-w-6xl mx-auto grid gap-8 md:grid-cols-3"><div><h2 class="text-white text-lg font-semibold mb-3">所在地</h2><address class="not-italic leading-relaxed">〒100-0001<br/>東京都千代田区千代田1-1-1<br/>サンプルビル 5F</address></div><div><h2 class="text-white text-lg font-semibold mb-3">お問い合わせ</h2><p class="leading-relaxed">TEL: <a href="tel:03-1234-5678" class="hover:text-white transition-colors">03-1234-5678</a><br/>受付時間: 平日 9:00〜18:00</p></div><div><h2 class="text-white text-lg font-semibold mb-3">リンク</h2><ul class="space-y-2"><li><a href="#" class="hover:text-white transition-colors">会社概要</a></li><li><a href="#" class="hover:text-white transition-colors">サービス一覧</a></li><li><a href="#" class="hover:text-white transition-colors">採用情報</a></li><li><a href="#" class="hover:text-white transition-colors">プライバシーポリシー</a></li></ul></div></div><div class="mt-10 pt-6 border-t border-gray-700 text-center text-sm text-gray-500"><p>© 2025 Sample Company. All rights reserved.</p></div></footer><div class="text-white"><section class="px-6 py-16 md:py-24 text-center bg-zinc-900"><p class="text-sm tracking-widest text-indigo-400 mb-3">学習塾</p><h2 class="text-3xl md:text-5xl font-bold mb-4">「わかる」を、「できる」に変える。</h2><p class="text-zinc-300 max-w-2xl mx-auto mb-8">一人ひとりの理解度に合わせた指導で、成績アップを応援。</p><a href="#contact" class="inline-block px-8 py-3 rounded-full bg-indigo-500 text-zinc-900 font-semibold">無料体験授業を申し込む</a><p class="text-base text-zinc-400 mt-6">塾のウェブサイトへようこそ。</p></section><section class="px-6 py-14 max-w-3xl mx-auto"><h3 class="text-2xl font-bold mb-6">メニュー・料金</h3><ul class="text-zinc-200"><li class="flex justify-between border-b border-zinc-700 py-3"><span>個別指導(週1)</span><span class="text-indigo-300">¥12,000/月 ※サンプル</span></li><li class="flex justify-between border-b border-zinc-700 py-3"><span>集団授業</span><span class="text-indigo-300">¥15,000/月 ※サンプル</span></li><li class="flex justify-between border-b border-zinc-700 py-3"><span>季節講習</span><span class="text-indigo-300">応相談 ※サンプル</span></li><li class="flex justify-between border-b border-zinc-700 py-3"><span>入会金</span><span class="text-indigo-300">¥10,000 ※サンプル</span></li></ul><p class="text-xs text-zinc-500 mt-3">※価格はサンプルです。実際の料金に差し替えてください。</p></section><section class="px-6 py-14 bg-zinc-900"><div class="max-w-5xl mx-auto"><h3 class="text-2xl font-bold mb-6 text-center">選ばれる特徴</h3><div class="grid gap-4 md:grid-cols-3"><div class="text-center p-6"><div class="text-3xl mb-2">📚</div><h4 class="font-semibold mb-1">個別カリキュラム</h4><p class="text-sm text-zinc-400">理解度に合わせて最適化。</p></div><div class="text-center p-6"><div class="text-3xl mb-2">🧑‍🏫</div><h4 class="font-semibold mb-1">経験豊富な講師</h4><p class="text-sm text-zinc-400">丁寧な指導。</p></div><div class="text-center p-6"><div class="text-3xl mb-2">📈</div><h4 class="font-semibold mb-1">進捗の見える化</h4><p class="text-sm text-zinc-400">定期面談で共有。</p></div></div></div></section><section class="px-6 py-14 max-w-4xl mx-auto"><h3 class="text-2xl font-bold mb-6">お客様の声</h3><div class="grid gap-4 md:grid-cols-2"><figure class="rounded-xl bg-zinc-800 p-6"><blockquote class="text-zinc-200 mb-3">子どもが自分から勉強するように。※サンプル</blockquote><figcaption class="text-sm text-indigo-300">— 保護者 様</figcaption></figure><figure class="rounded-xl bg-zinc-800 p-6"><blockquote class="text-zinc-200 mb-3">苦手だった数学が好きに。※サンプル</blockquote><figcaption class="text-sm text-indigo-300">— 生徒 様</figcaption></figure></div><p class="text-xs text-zinc-500 mt-3">※掲載のお客様の声はサンプルです。</p></section><section id="contact" class="px-6 py-14 bg-zinc-900"><div class="max-w-3xl mx-auto grid gap-6 md:grid-cols-2"><div><h3 class="text-2xl font-bold mb-4">営業時間</h3><p class="text-zinc-200">15:00–22:00 ※サンプル</p><p class="text-zinc-400 text-sm mt-1">日曜定休 ※サンプル</p></div><div><h3 class="text-2xl font-bold mb-4">アクセス</h3><p class="text-zinc-200">駅前・自転車置場あり ※サンプル</p></div></div><p class="text-xs text-zinc-500 mt-3 text-center">※営業時間・アクセスはサンプルです。</p></section></div></div>