弁護士・士業（テンプレートから）

atomic.studio/s/3705

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

<div class="min-h-screen bg-zinc-950 text-white"><div class="rounded-2xl bg-gradient-to-r from-indigo-500 via-indigo-500 to-indigo-500 text-center p-6 md:p-8 md:max-w-2xl mx-auto"><h2 class="text-white text-2xl md:text-3xl font-bold mb-2">期間限定キャンペーン</h2><p class="text-white/90 text-sm md:text-base mb-4">今だけ全商品20%OFF！この機会をお見逃しなく。</p><button class="bg-white text-indigo-600 font-semibold px-6 py-2 rounded-full hover:bg-gray-100 transition">詳細を見る</button></div><section class="bg-gray-900 py-16 px-4"><div class="max-w-6xl mx-auto"><h2 class="text-3xl font-bold text-white text-center mb-12">提供サービス</h2><div class="grid md:grid-cols-3 gap-6"><div class="bg-gray-800 rounded-2xl p-6 border border-gray-700 hover:border-indigo-500 transition-colors"><div class="text-4xl mb-4">🔧</div><h3 class="text-xl font-semibold text-white mb-2">システム開発</h3><p class="text-gray-400 leading-relaxed">Webアプリ・業務システムの設計・開発・運用を一貫して支援します。</p></div><div class="bg-gray-800 rounded-2xl p-6 border border-gray-700 hover:border-indigo-500 transition-colors"><div class="text-4xl mb-4">📱</div><h3 class="text-xl font-semibold text-white mb-2">モバイルアプリ開発</h3><p class="text-gray-400 leading-relaxed">iOS/Android対応のネイティブ・クロスプラットフォーム開発。</p></div><div class="bg-gray-800 rounded-2xl p-6 border border-gray-700 hover:border-indigo-500 transition-colors"><div class="text-4xl mb-4">☁️</div><h3 class="text-xl font-semibold text-white mb-2">クラウドインフラ</h3><p class="text-gray-400 leading-relaxed">AWS/GCPを活用したスケーラブルなインフラ構築・移行。</p></div><div class="bg-gray-800 rounded-2xl p-6 border border-gray-700 hover:border-indigo-500 transition-colors"><div class="text-4xl mb-4">🤖</div><h3 class="text-xl font-semibold text-white mb-2">AI・データ分析</h3><p class="text-gray-400 leading-relaxed">機械学習モデル開発・データ可視化・業務効率化。</p></div><div class="bg-gray-800 rounded-2xl p-6 border border-gray-700 hover:border-indigo-500 transition-colors"><div class="text-4xl mb-4">🎨</div><h3 class="text-xl font-semibold text-white mb-2">UI/UXデザイン</h3><p class="text-gray-400 leading-relaxed">ユーザー調査からプロトタイプ・デザインシステムまで。</p></div><div class="bg-gray-800 rounded-2xl p-6 border border-gray-700 hover:border-indigo-500 transition-colors"><div class="text-4xl mb-4">🛡️</div><h3 class="text-xl font-semibold text-white mb-2">セキュリティ診断</h3><p class="text-gray-400 leading-relaxed">脆弱性診断・コードレビュー・セキュリティ設計支援。</p></div></div></div></section><section class="bg-gray-900 text-gray-100 py-16 px-6"><div class="max-w-5xl mx-auto"><h2 class="text-3xl font-bold text-center mb-12 tracking-wide">プロフェッショナル紹介</h2><div class="grid md:grid-cols-2 gap-8"><div class="bg-gray-800 rounded-2xl p-6 flex flex-col items-center text-center shadow-lg"><div class="w-32 h-32 rounded-full bg-gray-600 mb-4 flex items-center justify-center text-5xl font-bold text-gray-400">佐</div><h3 class="text-xl font-semibold mb-1">佐藤 健一</h3><p class="text-indigo-400 text-sm font-medium mb-3">エグゼクティブシェフ</p><p class="text-gray-300 text-sm leading-relaxed">フランス料理の名門で研鑽を積み、ミシュラン一つ星を獲得。地元食材を活かした革新的な料理で、国内外から高い評価を受けています。</p></div><div class="bg-gray-800 rounded-2xl p-6 flex flex-col items-center text-center shadow-lg"><div class="w-32 h-32 rounded-full bg-gray-600 mb-4 flex items-center justify-center text-5xl font-bold text-gray-400">山</div><h3 class="text-xl font-semibold mb-1">山田 花子</h3><p class="text-indigo-400 text-sm font-medium mb-3">パティシエ・講師</p><p class="text-gray-300 text-sm leading-relaxed">製菓学校で教鞭をとりながら、自身のサロンで季節のスイーツを提供。初心者にもわかりやすい指導には定評があり、多くの生徒が独立を果たしています。</p></div></div></div></section><section class="bg-gray-900 text-white py-12 px-4"><h2 class="text-2xl font-bold text-center mb-8">受賞・メディア掲載</h2><div class="grid md:grid-cols-3 gap-4 max-w-4xl mx-auto"><div class="bg-gray-800 rounded-xl p-6 text-center border border-gray-700"><span class="inline-block bg-indigo-500 text-gray-900 text-xs font-semibold px-3 py-1 rounded-full mb-3">2024</span><p class="text-sm font-medium">グッドデザイン賞</p></div><div class="bg-gray-800 rounded-xl p-6 text-center border border-gray-700"><span class="inline-block bg-indigo-500 text-gray-900 text-xs font-semibold px-3 py-1 rounded-full mb-3">2023</span><p class="text-sm font-medium">iFデザイン賞</p></div><div class="bg-gray-800 rounded-xl p-6 text-center border border-gray-700"><span class="inline-block bg-indigo-500 text-gray-900 text-xs font-semibold px-3 py-1 rounded-full mb-3">2023</span><p class="text-sm font-medium">Red Dot Award</p></div><div class="bg-gray-800 rounded-xl p-6 text-center border border-gray-700"><span class="inline-block bg-indigo-500 text-gray-900 text-xs font-semibold px-3 py-1 rounded-full mb-3">2022</span><p class="text-sm font-medium">Webby Awards</p></div><div class="bg-gray-800 rounded-xl p-6 text-center border border-gray-700"><span class="inline-block bg-indigo-500 text-gray-900 text-xs font-semibold px-3 py-1 rounded-full mb-3">2022</span><p class="text-sm font-medium">日本マーケティング大賞</p></div><div class="bg-gray-800 rounded-xl p-6 text-center border border-gray-700"><span class="inline-block bg-indigo-500 text-gray-900 text-xs font-semibold px-3 py-1 rounded-full mb-3">2021</span><p class="text-sm font-medium">CESイノベーション賞</p></div></div></section><blockquote class="mx-auto max-w-2xl text-center text-xl text-gray-300 md:text-3xl"><p class="mb-4 font-serif leading-relaxed">「人生において最も重要なことは、自分が何を信じているかを知ることだ。」</p><footer class="text-base font-semibold text-gray-400 md:text-lg">— マルクス・アウレリウス</footer></blockquote><section class="py-16 px-4 bg-gray-900 text-white"><div class="max-w-6xl mx-auto"><h2 class="text-3xl font-bold text-center mb-12">導入事例・活動実績・成功事例・お客様事例・達成実績</h2><div class="grid md:grid-cols-3 gap-6"><div class="bg-gray-800 rounded-2xl p-6 shadow-lg flex flex-col"><h3 class="text-xl font-semibold mb-4">株式会社テクノロジーA</h3><p class="text-gray-300 mb-4"><span class="font-medium text-gray-100">課題:</span> 業務効率化とデータ統合の課題</p><p class="text-gray-300 mb-4"><span class="font-medium text-gray-100">成果:</span> 作業時間を50%削減</p><div class="mt-auto text-center"><span class="inline-block bg-indigo-600 text-white text-2xl font-bold py-2 px-4 rounded-xl">50%</span></div></div><div class="bg-gray-800 rounded-2xl p-6 shadow-lg flex flex-col"><h3 class="text-xl font-semibold mb-4">NPO法人グリーンネット</h3><p class="text-gray-300 mb-4"><span class="font-medium text-gray-100">課題:</span> 地域連携と資金調達の仕組みづくり</p><p class="text-gray-300 mb-4"><span class="font-medium text-gray-100">成果:</span> 年間寄付額が3倍に増加</p><div class="mt-auto text-center"><span class="inline-block bg-indigo-600 text-white text-2xl font-bold py-2 px-4 rounded-xl">3倍</span></div></div><div class="bg-gray-800 rounded-2xl p-6 shadow-lg flex flex-col"><h3 class="text-xl font-semibold mb-4">メディアスタートアップB</h3><p class="text-gray-300 mb-4"><span class="font-medium text-gray-100">課題:</span> ユーザー獲得とエンゲージメント向上</p><p class="text-gray-300 mb-4"><span class="font-medium text-gray-100">成果:</span> MAUが120%成長</p><div class="mt-auto text-center"><span class="inline-block bg-indigo-600 text-white text-2xl font-bold py-2 px-4 rounded-xl">120%</span></div></div></div></div></section><section class="bg-gray-900 text-white py-16 px-6"><div class="max-w-6xl mx-auto"><h2 class="text-3xl md:text-4xl font-bold mb-10 text-center md:text-left">本日のおすすめ</h2><div class="grid md:grid-cols-2 gap-8"><article class="bg-gray-800 rounded-2xl overflow-hidden shadow-lg hover:shadow-xl transition-shadow"><div class="h-48 bg-gradient-to-br from-indigo-500 to-indigo-600 flex items-center justify-center text-4xl font-bold text-white/80">AI</div><div class="p-6"><span class="inline-block bg-indigo-600 text-white text-xs font-semibold px-3 py-1 rounded-full mb-3">注目製品</span><h3 class="text-xl font-semibold mb-2">革新的AIプラットフォーム</h3><p class="text-gray-400 text-sm leading-relaxed">機械学習モデルを直感的に構築・デプロイ。コード不要で高度な分析を実現します。</p></div></article><article class="bg-gray-800 rounded-2xl overflow-hidden shadow-lg hover:shadow-xl transition-shadow"><div class="h-48 bg-gradient-to-br from-indigo-500 to-indigo-600 flex items-center justify-center text-4xl font-bold text-white/80">活動</div><div class="p-6"><span class="inline-block bg-indigo-600 text-white text-xs font-semibold px-3 py-1 rounded-full mb-3">活動ピックアップ</span><h3 class="text-xl font-semibold mb-2">コミュニティ主導の活動レポート</h3><p class="text-gray-400 text-sm leading-relaxed">月間1000人以上が参加する勉強会・ハッカソンのハイライトを一挙公開。</p></div></article></div></div></section><div class="bg-gray-900 text-white p-6 rounded-xl"><h2 class="text-2xl font-bold mb-4">他社比較表</h2><div class="grid grid-cols-4 gap-0 rounded overflow-hidden border border-gray-700 md:grid-cols-4"><div class="bg-gray-800 p-3 font-semibold border-r border-b border-gray-700">機能</div><div class="bg-gray-800 p-3 font-semibold border-r border-b border-gray-700">自社</div><div class="bg-gray-800 p-3 font-semibold border-r border-b border-gray-700">他社A</div><div class="bg-gray-800 p-3 font-semibold border-b border-gray-700">他社B</div><div class="p-3 border-r border-b border-gray-700">機能A</div><div class="p-3 border-r border-b border-gray-700 text-center text-green-400">○</div><div class="p-3 border-r border-b border-gray-700 text-center text-red-400">×</div><div class="p-3 border-b border-gray-700 text-center text-green-400">○</div><div class="p-3 border-r border-b border-gray-700">機能B</div><div class="p-3 border-r border-b border-gray-700 text-center text-green-400">○</div><div class="p-3 border-r border-b border-gray-700 text-center text-green-400">○</div><div class="p-3 border-b border-gray-700 text-center text-red-400">×</div><div class="p-3 border-r border-b border-gray-700">機能C</div><div class="p-3 border-r border-b border-gray-700 text-center text-red-400">×</div><div class="p-3 border-r border-b border-gray-700 text-center text-green-400">○</div><div class="p-3 border-b border-gray-700 text-center text-green-400">○</div><div class="p-3 border-r border-b border-gray-700">機能D</div><div class="p-3 border-r border-b border-gray-700 text-center text-green-400">○</div><div class="p-3 border-r border-b border-gray-700 text-center text-red-400">×</div><div class="p-3 border-b border-gray-700 text-center text-red-400">×</div><div class="p-3 border-r border-b border-gray-700">機能E</div><div class="p-3 border-r border-b border-gray-700 text-center text-green-400">○</div><div class="p-3 border-r border-b border-gray-700 text-center text-green-400">○</div><div class="p-3 border-b border-gray-700 text-center text-green-400">○</div></div></div><section class="bg-gray-900 py-12"><div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"><h2 class="text-center text-lg font-semibold text-gray-400 tracking-wide uppercase mb-10">導入企業ロゴ一覧</h2><div class="grid grid-cols-2 md:grid-cols-6 gap-8 items-center"><div class="bg-gray-800 rounded-xl h-16 flex items-center justify-center"><span class="text-gray-500 text-sm">Logo 1</span></div><div class="bg-gray-800 rounded-xl h-16 flex items-center justify-center"><span class="text-gray-500 text-sm">Logo 2</span></div><div class="bg-gray-800 rounded-xl h-16 flex items-center justify-center"><span class="text-gray-500 text-sm">Logo 3</span></div><div class="bg-gray-800 rounded-xl h-16 flex items-center justify-center"><span class="text-gray-500 text-sm">Logo 4</span></div><div class="bg-gray-800 rounded-xl h-16 flex items-center justify-center"><span class="text-gray-500 text-sm">Logo 5</span></div><div class="bg-gray-800 rounded-xl h-16 flex items-center justify-center"><span class="text-gray-500 text-sm">Logo 6</span></div></div></div></section><section class="bg-gray-50 py-20" aria-labelledby="contact-heading"><div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"><h2 id="contact-heading" class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">お問い合わせ</h2><p class="mt-4 max-w-2xl text-lg text-gray-600">ご質問、ご依頼、パートナーシップのご相談など、お気軽にご連絡ください。</p><div class="mt-12 grid gap-12 md:grid-cols-2"><div class="rounded-2xl bg-white p-8 shadow-sm ring-1 ring-gray-200"><form noValidate=""><div class="space-y-6"><div><label for="name" class="block text-sm font-medium text-gray-700">お名前</label><input type="text" id="name" required="" aria-required="true" aria-label="お名前" placeholder="山田 太郎" class="mt-1 block w-full rounded-xl border border-gray-300 px-4 py-3 text-gray-900 placeholder-gray-400 shadow-sm focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2" name="name"/></div><div><label for="email" class="block text-sm font-medium text-gray-700">メールアドレス</label><input type="email" id="email" required="" aria-required="true" aria-label="メールアドレス" placeholder="taro.yamada@example.com" class="mt-1 block w-full rounded-xl border border-gray-300 px-4 py-3 text-gray-900 placeholder-gray-400 shadow-sm focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2" name="email"/></div><div><label for="message" class="block text-sm font-medium text-gray-700">お問い合わせ内容</label><textarea id="message" name="message" rows="5" required="" aria-required="true" aria-label="お問い合わせ内容" placeholder="プロジェクトの見積もりをお願いします。" class="mt-1 block w-full rounded-xl border border-gray-300 px-4 py-3 text-gray-900 placeholder-gray-400 shadow-sm focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 resize-y"></textarea></div><div><button type="submit" aria-label="送信する" class="w-full rounded-xl bg-indigo-600 px-6 py-3 text-base font-semibold text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition-colors">送信する</button></div></div></form></div><div class="rounded-2xl bg-white p-8 shadow-sm ring-1 ring-gray-200"><h3 class="text-xl font-semibold text-gray-900">連絡先情報</h3><dl class="mt-6 space-y-6 text-base text-gray-700"><div><dt class="font-medium text-gray-900">所在地</dt><dd class="mt-1">〒150-0001<br/>東京都渋谷区神宮前4丁目12-8<br/>青山プラザビル 5F</dd></div><div><dt class="font-medium text-gray-900">電話番号</dt><dd class="mt-1"><a href="tel:03-1234-5678" class="text-indigo-600 hover:text-indigo-500">03-1234-5678</a><br/>（受付時間 平日 9:00〜18:00）</dd></div><div><dt class="font-medium text-gray-900">メールアドレス</dt><dd class="mt-1"><a href="mailto:contact@example.co.jp" class="text-indigo-600 hover:text-indigo-500">contact@example.co.jp</a><br/>2営業日以内にご返信いたします。</dd></div></dl><div class="mt-8 border-t border-gray-200 pt-6"><p class="text-sm text-gray-500">ご不明な点がございましたら、お気軽に上記連絡先までお問い合わせください。</p></div></div></div></div></section><section class="bg-gray-900 text-white py-16 px-6"><div class="max-w-6xl mx-auto grid md:grid-cols-2 gap-10 items-center"><div><h2 class="text-3xl font-bold mb-6">アクセス</h2><p class="text-gray-300 leading-relaxed">〒100-0001<br/>東京都千代田区千代田1-1<br/>電話：03-1234-5678</p></div><div class="bg-gray-700 rounded-xl h-64 md:h-80 w-full"><div class="flex items-center justify-center h-full text-gray-400 text-sm">地図が表示されます</div></div></div></section><section class="bg-white py-20 md:py-28"><div class="mx-auto max-w-3xl px-6"><h2 class="text-3xl md:text-4xl font-bold text-slate-900 text-center">ご予約</h2><p class="mt-4 text-center text-slate-600">ご希望の日時をお選びください。確認のご連絡を差し上げます。</p><form class="mt-10 grid gap-5 md:grid-cols-2 rounded-2xl bg-slate-50 p-8 border border-slate-100"><div class="grid gap-1"><label class="text-sm font-medium text-slate-700">お名前</label><input type="text" aria-label="お名前" class="rounded-xl border border-slate-200 px-4 py-3 outline-none focus:border-indigo-400"/></div><div class="grid gap-1"><label class="text-sm font-medium text-slate-700">メールアドレス</label><input type="email" aria-label="メールアドレス" placeholder="you@example.com" class="rounded-xl border border-slate-200 px-4 py-3 outline-none focus:border-indigo-400"/></div><div class="grid gap-1"><label class="text-sm font-medium text-slate-700">ご希望日</label><input type="date" aria-label="ご希望日" class="rounded-xl border border-slate-200 px-4 py-3 outline-none focus:border-indigo-400"/></div><div class="grid gap-1"><label class="text-sm font-medium text-slate-700">人数</label><input type="number" aria-label="人数" min="1" class="rounded-xl border border-slate-200 px-4 py-3 outline-none focus:border-indigo-400" value="2"/></div><div class="md:col-span-2 grid gap-1"><label class="text-sm font-medium text-slate-700">ご要望（任意）</label><textarea aria-label="ご要望" class="h-24 rounded-xl border border-slate-200 px-4 py-3 outline-none focus:border-indigo-400"></textarea></div><button class="md:col-span-2 rounded-xl bg-indigo-600 px-7 py-3 font-semibold text-white shadow-lg shadow-indigo-600/30 hover:bg-indigo-500 transition">予約を申し込む</button></form></div></section><div class="max-w-2xl mx-auto px-4 py-12"><div class="bg-gray-900 text-gray-100 rounded-2xl p-8 md:p-12 space-y-12"><section><h2 class="text-2xl font-bold mb-6 border-b border-gray-700 pb-2">特定商取引法に基づく表記</h2><div class="grid grid-cols-1 md:grid-cols-2 gap-4"><div class="font-semibold">販売業者</div><div>株式会社テックスタイル</div><div class="font-semibold">代表責任者</div><div>山田 太郎</div><div class="font-semibold">所在地</div><div>〒150-0001 東京都渋谷区神宮前1-2-3 テックビル5F</div><div class="font-semibold">電話番号</div><div>03-1234-5678（受付時間 10:00～17:00 土日祝除く）</div><div class="font-semibold">メールアドレス</div><div>support@techstyle.example.com</div><div class="font-semibold">販売価格</div><div>各商品ページに表示（税込価格）</div><div class="font-semibold">商品代金以外の必要料金</div><div>消費税、送料（全国一律550円）、振込手数料</div><div class="font-semibold">支払方法</div><div>クレジットカード、銀行振込、コンビニ払い</div><div class="font-semibold">支払時期</div><div>クレジットカード：ご注文時 / 銀行振込：ご注文から7日以内</div><div class="font-semibold">商品の引渡時期</div><div>ご注文から3～7営業日以内に発送</div><div class="font-semibold">返品・交換・キャンセル</div><div>未開封・未使用品に限り商品到着後7日以内にご連絡ください。返送料はお客様負担となります。</div></div></section><section><h2 class="text-2xl font-bold mb-6 border-b border-gray-700 pb-2">プライバシーポリシー</h2><ul class="space-y-3 list-disc pl-5"><li>当社は、お客様の個人情報を適切に収集・利用・管理し、法令に従って保護します。</li><li>収集する情報は、氏名、住所、電話番号、メールアドレス、クレジットカード情報等、サービス提供に必要な範囲に限ります。</li><li>個人情報は、商品の発送、サポート、キャンペーン案内等の目的で利用し、第三者への提供は法令に基づく場合を除き行いません。</li><li>お客様はいつでも個人情報の開示・訂正・削除を請求できます。</li><li>当社は、個人情報保護管理者を任命し、適切な安全管理措置を講じます。</li></ul></section><section><h2 class="text-2xl font-bold mb-6 border-b border-gray-700 pb-2">セキュリティについて</h2><ul class="space-y-3 list-disc pl-5"><li>当サイトはSSL/TLS暗号化通信を採用し、お客様のデータを保護します。</li><li>クレジットカード情報はPCI DSS準拠の決済代行業者を通じて処理され、当社では保持しません。</li><li>サーバーへの不正アクセスを防ぐため、ファイアウォールと定期的な脆弱性診断を実施しています。</li><li>従業員のセキュリティ教育を定期的に行い、内部からの情報漏洩を防止します。</li></ul></section><section><h2 class="text-2xl font-bold mb-6 border-b border-gray-700 pb-2">利用規約</h2><div class="space-y-4"><p>本規約は、当社が提供するサービス（以下「本サービス」）の利用条件を定めるものです。ご利用いただくことで、本規約に同意したものとみなします。</p><div class="grid grid-cols-1 md:grid-cols-2 gap-4"><div class="font-semibold">禁止行為</div><div>法令違反、他人の権利侵害、虚偽情報の投稿、サーバーへの過負荷行為、その他当社が不適切と判断する行為</div><div class="font-semibold">アカウント管理</div><div>お客様ご自身の責任でID・パスワードを管理し、第三者への譲渡・貸与は禁止します</div><div class="font-semibold">免責事項</div><div>天災地変やシステム障害等、当社の責めに帰さない事由による損害については免責されます</div><div class="font-semibold">規約変更</div><div>当社は必要に応じて本規約を変更できるものとし、変更後はサイト上に掲示します</div></div></div></section><section><h2 class="text-2xl font-bold mb-6 border-b border-gray-700 pb-2">法的情報</h2><div class="grid grid-cols-1 md:grid-cols-2 gap-4"><div class="font-semibold">会社名</div><div>株式会社テックスタイル</div><div class="font-semibold">代表者</div><div>山田 太郎</div><div class="font-semibold">住所</div><div>〒150-0001 東京都渋谷区神宮前1-2-3 テックビル5F</div><div class="font-semibold">連絡先</div><div>03-1234-5678</div></div></section></div></div><div class="bg-gray-900 min-h-screen py-12 px-4"><div class="max-w-5xl mx-auto"><h2 class="text-3xl font-bold text-white mb-8 text-center">採用の求人一覧</h2><div class="grid md:grid-cols-2 gap-6"><div class="bg-gray-800 rounded-2xl p-6 shadow-lg border border-gray-700"><h3 class="text-xl font-semibold text-white mb-3">フロントエンドエンジニア</h3><div class="space-y-2 mb-5"><p class="text-gray-300"><span class="text-gray-400">雇用形態：</span>正社員</p><p class="text-gray-300"><span class="text-gray-400">勤務地：</span>東京都渋谷区</p></div><button class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-4 rounded-xl transition-colors duration-200">応募する</button></div><div class="bg-gray-800 rounded-2xl p-6 shadow-lg border border-gray-700"><h3 class="text-xl font-semibold text-white mb-3">バックエンドエンジニア</h3><div class="space-y-2 mb-5"><p class="text-gray-300"><span class="text-gray-400">雇用形態：</span>契約社員</p><p class="text-gray-300"><span class="text-gray-400">勤務地：</span>大阪府大阪市</p></div><button class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-4 rounded-xl transition-colors duration-200">応募する</button></div><div class="bg-gray-800 rounded-2xl p-6 shadow-lg border border-gray-700"><h3 class="text-xl font-semibold text-white mb-3">デザイナー</h3><div class="space-y-2 mb-5"><p class="text-gray-300"><span class="text-gray-400">雇用形態：</span>正社員</p><p class="text-gray-300"><span class="text-gray-400">勤務地：</span>東京都新宿区</p></div><button class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-4 rounded-xl transition-colors duration-200">応募する</button></div><div class="bg-gray-800 rounded-2xl p-6 shadow-lg border border-gray-700"><h3 class="text-xl font-semibold text-white mb-3">マーケティングマネージャー</h3><div class="space-y-2 mb-5"><p class="text-gray-300"><span class="text-gray-400">雇用形態：</span>業務委託</p><p class="text-gray-300"><span class="text-gray-400">勤務地：</span>リモート</p></div><button class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-4 rounded-xl transition-colors duration-200">応募する</button></div></div></div></div><section class="max-w-lg mx-auto rounded-2xl bg-gray-900 text-gray-100 p-6 md:p-8 shadow-xl" aria-labelledby="job-contact-heading"><h2 id="job-contact-heading" class="text-2xl font-bold mb-6 text-center">採用エントリー</h2><form class="space-y-5" aria-label="採用問い合わせフォーム"><div><label for="name" class="block text-sm font-medium mb-1">名前 <span aria-hidden="true">*</span></label><input id="name" type="text" required="" placeholder="例：山田 太郎" class="w-full rounded-xl bg-gray-800 border border-gray-700 px-4 py-2.5 text-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent" aria-required="true"/></div><div><label for="email" class="block text-sm font-medium mb-1">メールアドレス <span aria-hidden="true">*</span></label><input id="email" type="email" required="" placeholder="例：taro@example.com" class="w-full rounded-xl bg-gray-800 border border-gray-700 px-4 py-2.5 text-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent" aria-required="true"/></div><div><label for="position" class="block text-sm font-medium mb-1">希望職種</label><select id="position" class="w-full rounded-xl bg-gray-800 border border-gray-700 px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"><option value="" disabled="" selected="">選択してください</option><option value="エンジニア">エンジニア</option><option value="デザイナー">デザイナー</option><option value="マーケティング">マーケティング</option><option value="営業">営業</option><option value="その他">その他</option></select></div><div><label for="message" class="block text-sm font-medium mb-1">メッセージ <span aria-hidden="true">*</span></label><textarea id="message" required="" rows="4" placeholder="志望動機やご質問など" class="w-full rounded-xl bg-gray-800 border border-gray-700 px-4 py-2.5 text-sm placeholder-gray-400 resize-y focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent" aria-required="true"></textarea></div><button type="submit" class="w-full rounded-xl bg-indigo-600 hover:bg-indigo-500 active:bg-indigo-700 text-white font-semibold py-3 px-6 transition-colors focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:ring-offset-2 focus:ring-offset-gray-900" aria-label="採用エントリーを送信する">送信する</button></form></section><section class="rounded-2xl bg-gray-900 text-gray-100 p-6 md:p-8 shadow-lg max-w-md mx-auto my-8"><h2 class="text-2xl font-bold mb-4 border-b border-gray-700 pb-2">営業時間案内</h2><table class="w-full text-left text-sm md:text-base"><thead><tr class="border-b border-gray-700"><th class="py-2 font-semibold">曜日</th><th class="py-2 font-semibold">営業時間</th></tr></thead><tbody><tr class="border-b border-gray-800"><td class="py-2">月曜日</td><td class="py-2">11:00 – 20:00</td></tr><tr class="border-b border-gray-800"><td class="py-2">火曜日</td><td class="py-2">11:00 – 20:00</td></tr><tr class="border-b border-gray-800"><td class="py-2">水曜日</td><td class="py-2">11:00 – 20:00</td></tr><tr class="border-b border-gray-800"><td class="py-2">木曜日</td><td class="py-2">11:00 – 20:00</td></tr><tr class="border-b border-gray-800"><td class="py-2">金曜日</td><td class="py-2">11:00 – 20:00</td></tr><tr class="border-b border-gray-800"><td class="py-2">土曜日</td><td class="py-2">10:00 – 19:00</td></tr><tr><td class="py-2">日曜日</td><td class="py-2">10:00 – 18:00</td></tr></tbody></table><p class="mt-4 text-sm text-gray-400 italic border-t border-gray-700 pt-3">※ 定休日：毎週水曜日（祝日の場合は営業、翌日休み）</p></section><section aria-label="無料体験・会員登録フォーム" class="max-w-lg mx-auto rounded-2xl bg-gray-900 text-gray-100 p-6 md:p-8 shadow-xl"><h2 class="text-2xl font-bold mb-6 text-center">無料体験申込・会員登録</h2><form aria-label="申込フォーム" noValidate="" class="space-y-5"><div><label for="name" class="block text-sm font-medium mb-1">お名前 <span aria-hidden="true">*</span></label><input id="name" type="text" required="" aria-required="true" placeholder="山田 太郎" class="w-full rounded-xl bg-gray-800 border border-gray-700 px-4 py-2.5 text-gray-100 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"/></div><div><label for="email" class="block text-sm font-medium mb-1">メールアドレス <span aria-hidden="true">*</span></label><input id="email" type="email" required="" aria-required="true" placeholder="example@mail.com" class="w-full rounded-xl bg-gray-800 border border-gray-700 px-4 py-2.5 text-gray-100 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"/></div><div><label for="phone" class="block text-sm font-medium mb-1">電話番号 <span aria-hidden="true">*</span></label><input id="phone" type="tel" required="" aria-required="true" placeholder="090-1234-5678" class="w-full rounded-xl bg-gray-800 border border-gray-700 px-4 py-2.5 text-gray-100 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"/></div><button type="submit" aria-label="申込を送信" class="w-full rounded-xl bg-indigo-600 hover:bg-indigo-500 focus:ring-2 focus:ring-indigo-400 focus:ring-offset-2 focus:ring-offset-gray-900 py-3 font-semibold text-white transition-colors">申込む</button></form><p class="mt-5 text-xs text-gray-400 leading-relaxed text-center md:text-left">※ ご登録いただいた情報は、本サービスの提供および関連するご連絡のみに使用します。<br/>プライバシーポリシーに同意の上、お申し込みください。</p></section><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>初回法律相談（60分）</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">5万円〜（※サンプル）</span></li><li class="flex justify-between border-b border-zinc-700 py-3"><span>遺言書作成サポート</span><span class="text-indigo-300">8万円〜（※サンプル）</span></li><li class="flex justify-between border-b border-zinc-700 py-3"><span>訴訟代理（着手金）</span><span class="text-indigo-300">30万円〜（※サンプル）</span></li></ul><p class="text-xs text-zinc-500 mt-3">※価格はサンプルです。実際の料金に差し替えてください。</p></section><section class="px-6 py-14 max-w-5xl mx-auto"><h3 class="text-2xl font-bold mb-6">サービス一覧</h3><div class="grid gap-4 md:grid-cols-3"><div class="rounded-xl bg-zinc-800 p-6"><h4 class="font-semibold mb-2">企業法務顧問サービス</h4><p class="text-sm text-zinc-300">日常的な法的相談、契約書レビュー、リスク管理を包括的にサポートします</p></div><div class="rounded-xl bg-zinc-800 p-6"><h4 class="font-semibold mb-2">相続・遺言手続き</h4><p class="text-sm text-zinc-300">遺産分割協議書作成や相続放棄手続きなど、家族の未来を守る法的支援</p></div><div class="rounded-xl bg-zinc-800 p-6"><h4 class="font-semibold mb-2">民事訴訟代理</h4><p class="text-sm text-zinc-300">金銭トラブルや不動産紛争など、裁判手続きを全面的に代理します</p></div></div></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">60分の初回面談を無料で実施し、課題を明確にします（※サンプル）</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">Zoomやメールでの相談・書類提出に対応し、遠方の方も安心（※サンプル）</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-5xl mx-auto"><h3 class="text-2xl font-bold mb-6">スタッフ紹介</h3><div class="grid gap-4 md:grid-cols-3"><div class="rounded-xl bg-zinc-800 p-6 text-center"><div class="w-20 h-20 mx-auto mb-3 rounded-full bg-zinc-700"></div><h4 class="font-semibold">スタッフ A</h4><p class="text-sm text-zinc-400">担当 / 経験豊富 ※サンプル</p></div><div class="rounded-xl bg-zinc-800 p-6 text-center"><div class="w-20 h-20 mx-auto mb-3 rounded-full bg-zinc-700"></div><h4 class="font-semibold">スタッフ B</h4><p class="text-sm text-zinc-400">担当 / 親切丁寧 ※サンプル</p></div><div class="rounded-xl bg-zinc-800 p-6 text-center"><div class="w-20 h-20 mx-auto mb-3 rounded-full bg-zinc-700"></div><h4 class="font-semibold">スタッフ C</h4><p class="text-sm text-zinc-400">担当 / 笑顔で対応 ※サンプル</p></div></div><p class="text-xs text-zinc-500 mt-3">※スタッフ情報はサンプルです。</p></section><section class="px-6 py-14 max-w-3xl mx-auto"><h3 class="text-2xl font-bold mb-6">よくある質問</h3><div><div class="border-b border-zinc-700 py-4"><p class="font-semibold mb-1">Q. 予約は必要ですか?</p><p class="text-sm text-zinc-300">A. ご予約優先ですが当日も承ります。※サンプル</p></div><div class="border-b border-zinc-700 py-4"><p class="font-semibold mb-1">Q. 駐車場はありますか?</p><p class="text-sm text-zinc-300">A. 近隣に駐車場がございます。※サンプル</p></div><div class="border-b border-zinc-700 py-4"><p class="font-semibold mb-1">Q. 支払い方法は?</p><p class="text-sm text-zinc-300">A. 現金・各種カード・電子マネー対応。※サンプル</p></div></div></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">10:00–18: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>