モダン企業（テンプレートから） — Atomic Studio

Atomic Studio /モダン企業（テンプレートから）

12部品・0〜数百トークン ↩ 戻す履歴複製 💬 ことばで直す 🔗 共有 🚀 デプロイ ⏹

atomic.studio/s/3699

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

<link rel="preload" as="image" href="https://placehold.co/600x400/1e293b/94a3b8?text=CNC"/><link rel="preload" as="image" href="https://placehold.co/600x400/1e293b/94a3b8?text=Robot"/><link rel="preload" as="image" href="https://placehold.co/600x400/1e293b/94a3b8?text=Laser"/><link rel="preload" as="image" href="https://placehold.co/600x400/1e293b/94a3b8?text=3D"/><div class="min-h-screen bg-zinc-950 text-white"><section class="bg-white text-gray-100 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-4xl font-bold tracking-tight mb-6">私たちの企業理念</h2><p class="text-lg md:text-xl leading-relaxed text-gray-600 max-w-2xl mx-auto">私たちは、品質と誠実さを最優先に、社会に貢献する価値を創造し続けます。 一人ひとりの可能性を引き出し、持続可能な未来を共に築くことを使命としています。</p></div></section><section class="bg-white py-16 px-4 md:px-8"><div class="mx-auto max-w-7xl"><h2 class="mb-10 text-center text-3xl font-bold tracking-tight text-gray-900 md:text-4xl">工場設備ギャラリー</h2><div class="grid gap-8 sm:grid-cols-2 lg:grid-cols-4"><div class="overflow-hidden rounded-2xl bg-slate-50 shadow-lg transition duration-300 hover:scale-[1.02] hover:shadow-xl"><img src="https://placehold.co/600x400/1e293b/94a3b8?text=CNC" alt="CNC自動旋盤" class="h-48 w-full object-cover md:h-56"/><div class="p-5"><h3 class="mb-2 text-lg font-semibold text-gray-900">CNC自動旋盤</h3><p class="text-sm leading-relaxed text-gray-600">高精度加工を実現する最新鋭のCNC自動旋盤。24時間無人運転に対応し、安定した品質を提供します。</p></div></div><div class="overflow-hidden rounded-2xl bg-slate-50 shadow-lg transition duration-300 hover:scale-[1.02] hover:shadow-xl"><img src="https://placehold.co/600x400/1e293b/94a3b8?text=Robot" alt="産業用ロボットアーム" class="h-48 w-full object-cover md:h-56"/><div class="p-5"><h3 class="mb-2 text-lg font-semibold text-gray-900">産業用ロボットアーム</h3><p class="text-sm leading-relaxed text-gray-600">多関節ロボットアームによる溶接・組立工程の自動化。高速かつ正確な動作で生産性を向上。</p></div></div><div class="overflow-hidden rounded-2xl bg-slate-50 shadow-lg transition duration-300 hover:scale-[1.02] hover:shadow-xl"><img src="https://placehold.co/600x400/1e293b/94a3b8?text=Laser" alt="レーザー加工機" class="h-48 w-full object-cover md:h-56"/><div class="p-5"><h3 class="mb-2 text-lg font-semibold text-gray-900">レーザー加工機</h3><p class="text-sm leading-relaxed text-gray-600">ファイバーレーザー搭載の高精度切断機。金属・樹脂問わず微細加工が可能。</p></div></div><div class="overflow-hidden rounded-2xl bg-slate-50 shadow-lg transition duration-300 hover:scale-[1.02] hover:shadow-xl"><img src="https://placehold.co/600x400/1e293b/94a3b8?text=3D" alt="3D造形装置" class="h-48 w-full object-cover md:h-56"/><div class="p-5"><h3 class="mb-2 text-lg font-semibold text-gray-900">3D造形装置</h3><p class="text-sm leading-relaxed text-gray-600">金属粉末積層造形方式の産業用3Dプリンター。複雑形状の試作から量産まで対応。</p></div></div></div></div></section><section class="bg-white text-gray-900 py-20 md:py-28"><div class="mx-auto max-w-6xl px-6"><h2 class="text-3xl md:text-4xl font-bold">選ばれる3つの強み</h2><p class="mt-3 text-slate-400">小さな工場から世界へ。精密加工で支えるものづくりの力</p><div class="mt-14 grid gap-8 md:grid-cols-3"><div class="rounded-2xl bg-gray-100 border border-gray-200 p-8"><span class="text-4xl font-extrabold text-blue-400/80">01</span><h3 class="mt-3 text-xl font-bold">試作1個から対応</h3><p class="mt-3 text-gray-600 leading-relaxed">小ロット・試作も歓迎。量産を見据えた最適なご提案をします。</p></div><div class="rounded-2xl bg-gray-100 border border-gray-200 p-8"><span class="text-4xl font-extrabold text-blue-400/80">02</span><h3 class="mt-3 text-xl font-bold">短納期・特急対応</h3><p class="mt-3 text-gray-600 leading-relaxed">社内一貫生産だから、急ぎの案件もスピーディに対応可能。</p></div><div class="rounded-2xl bg-gray-100 border border-gray-200 p-8"><span class="text-4xl font-extrabold text-blue-400/80">03</span><h3 class="mt-3 text-xl font-bold">難削材・複雑形状</h3><p class="mt-3 text-gray-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-slate-900 text-center">ギャラリー</h2><div class="mt-12 grid grid-cols-2 md:grid-cols-3 gap-3"><figure class="group overflow-hidden rounded-xl"><img src="https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?w=600" alt="店内の様子" class="w-full aspect-[4/3] object-cover group-hover:scale-105 transition duration-500" loading="lazy"/><figcaption class="mt-1.5 text-center text-xs text-slate-400">くつろぎの空間</figcaption></figure><figure class="group overflow-hidden rounded-xl"><img src="https://images.unsplash.com/photo-1414235077428-338989a2e8c0?w=600" alt="料理" class="w-full aspect-[4/3] object-cover group-hover:scale-105 transition duration-500" loading="lazy"/><figcaption class="mt-1.5 text-center text-xs text-slate-400">こだわりの一品</figcaption></figure><figure class="group overflow-hidden rounded-xl"><img src="https://images.unsplash.com/photo-1555396273-367ea4eb4db5?w=600" alt="カウンター" class="w-full aspect-[4/3] object-cover group-hover:scale-105 transition duration-500" loading="lazy"/><figcaption class="mt-1.5 text-center text-xs text-slate-400">職人の技</figcaption></figure><figure class="group overflow-hidden rounded-xl"><img src="https://images.unsplash.com/photo-1552566626-52f8b828add9?w=600" alt="テーブル席" class="w-full aspect-[4/3] object-cover group-hover:scale-105 transition duration-500" loading="lazy"/><figcaption class="mt-1.5 text-center text-xs text-slate-400">ゆったり席</figcaption></figure><figure class="group overflow-hidden rounded-xl"><img src="https://images.unsplash.com/photo-1424847651672-bf20a4b0982b?w=600" alt="外観" class="w-full aspect-[4/3] object-cover group-hover:scale-105 transition duration-500" loading="lazy"/><figcaption class="mt-1.5 text-center text-xs text-slate-400">店舗外観</figcaption></figure><figure class="group overflow-hidden rounded-xl"><img src="https://images.unsplash.com/photo-1504674900247-0877df9cc836?w=600" alt="おすすめ料理" class="w-full aspect-[4/3] object-cover group-hover:scale-105 transition duration-500" loading="lazy"/><figcaption class="mt-1.5 text-center text-xs text-slate-400">本日のおすすめ</figcaption></figure></div><div class="mt-10 text-center"><a href="#" class="inline-block rounded-xl border border-slate-200 bg-white px-8 py-3 text-sm font-medium text-slate-700 hover:bg-slate-100 transition shadow-sm">私たちを知る</a></div></div></section><section class="bg-gray-50 py-20"><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-gray-900 mb-12">お客様の声</h2><div class="grid md:grid-cols-2 gap-6"><div class="rounded-2xl bg-white shadow-sm p-6 md:p-8 relative"><div class="absolute top-4 left-4 text-6xl leading-none text-gray-200 select-none">“</div><div class="relative z-10"><div class="flex items-center mb-4"><div class="flex mr-2"><svg class="w-5 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-5 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-5 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-5 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-5 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><span class="text-sm text-gray-500 ml-1">5.0</span></div><p class="text-gray-700 leading-relaxed mb-6 italic">導入から3ヶ月で問い合わせ対応時間が60%削減されました。直感的な操作性と充実したAPIにより、既存システムとの連携もスムーズに完了。チーム全体の生産性が劇的に向上し、顧客満足度調査でも過去最高のスコアを記録しています。</p><div class="border-t border-gray-100 pt-4"><p class="font-semibold text-gray-900">佐藤 美咲</p><p class="text-sm text-gray-500">マーケティング部長、株式会社テクノロジー・ソリューションズ</p><p class="text-xs text-gray-400 mt-1">IT・ソフトウェア</p></div></div></div><div class="rounded-2xl bg-white shadow-sm p-6 md:p-8 relative"><div class="absolute top-4 left-4 text-6xl leading-none text-gray-200 select-none">“</div><div class="relative z-10"><div class="flex items-center mb-4"><div class="flex mr-2"><svg class="w-5 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-5 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-5 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-5 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-5 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><span class="text-sm text-gray-500 ml-1">5.0</span></div><p class="text-gray-700 leading-relaxed mb-6 italic">デジタル化に不安がありましたが、サポートチームが丁寧に伴走してくれたおかげで、在庫管理と出荷計画の精度が格段に向上。廃棄ロスが前年比で35%減少し、売上も20%アップしました。農業の未来を変えるツールです。</p><div class="border-t border-gray-100 pt-4"><p class="font-semibold text-gray-900">田中 健一</p><p class="text-sm text-gray-500">代表取締役社長、グリーンフィールド農業協同組合</p><p class="text-xs text-gray-400 mt-1">農業・食品</p></div></div></div><div class="rounded-2xl bg-white shadow-sm p-6 md:p-8 relative"><div class="absolute top-4 left-4 text-6xl leading-none text-gray-200 select-none">“</div><div class="relative z-10"><div class="flex items-center mb-4"><div class="flex mr-2"><svg class="w-5 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-5 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-5 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-5 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-5 h-5 text-gray-200" 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><span class="text-sm text-gray-500 ml-1">4.0</span></div><p class="text-gray-700 leading-relaxed mb-6 italic">プロジェクト管理とクライアントとの共有が圧倒的に楽になりました。特にバージョン管理機能とリアルタイムコメント機能は、リモートワークが主体の私たちのチームに不可欠。UIも美しく、毎日の使用が心地よいです。</p><div class="border-t border-gray-100 pt-4"><p class="font-semibold text-gray-900">山本 由香</p><p class="text-sm text-gray-500">デザインディレクター、アトリエ・ブルー建築設計事務所</p><p class="text-xs text-gray-400 mt-1">建築・デザイン</p></div></div></div><div class="rounded-2xl bg-white shadow-sm p-6 md:p-8 relative"><div class="absolute top-4 left-4 text-6xl leading-none text-gray-200 select-none">“</div><div class="relative z-10"><div class="flex items-center mb-4"><div class="flex mr-2"><svg class="w-5 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-5 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-5 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-5 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-5 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><span class="text-sm text-gray-500 ml-1">5.0</span></div><p class="text-gray-700 leading-relaxed mb-6 italic">患者さんの予約管理と診療記録の一元化が実現し、スタッフの残業時間が月平均25時間削減。カルテの検索性が格段に上がり、診療の質も向上しました。セキュリティ面も安心して任せられるサービスです。</p><div class="border-t border-gray-100 pt-4"><p class="font-semibold text-gray-900">鈴木 大輔</p><p class="text-sm text-gray-500">院長、鈴木歯科クリニック</p><p class="text-xs text-gray-400 mt-1">医療・ヘルスケア</p></div></div></div></div></div></section><section class="bg-white py-16"><div class="mx-auto max-w-7xl px-4"><h2 class="mb-10 text-center text-3xl font-bold text-gray-900 md:text-4xl">拠点所在地</h2><div class="grid gap-6 md:grid-cols-2"><div class="rounded-2xl border border-gray-200 bg-gray-50 p-6"><h3 class="mb-3 text-xl font-semibold text-gray-900">東京本社</h3><div class="mb-4 h-32 rounded-xl bg-gray-200 flex items-center justify-center"><span class="text-2xl">📍 地図</span></div><div class="space-y-2 text-sm text-gray-700"><p class="flex items-start gap-2"><span class="mt-0.5">📍</span><span>〒100-0001 東京都千代田区丸の内1-1-1 東京ビルディング5F</span></p><p class="flex items-center gap-2"><span>📞</span><span>03-1234-5678</span></p><p class="flex items-start gap-2"><span class="mt-0.5">🚃</span><span>JR東京駅 丸の内口より徒歩3分</span></p></div></div><div class="rounded-2xl border border-gray-200 bg-gray-50 p-6"><h3 class="mb-3 text-xl font-semibold text-gray-900">大阪支社</h3><div class="mb-4 h-32 rounded-xl bg-gray-200 flex items-center justify-center"><span class="text-2xl">📍 地図</span></div><div class="space-y-2 text-sm text-gray-700"><p class="flex items-start gap-2"><span class="mt-0.5">📍</span><span>〒530-0001 大阪府大阪市北区梅田2-2-2 大阪駅前ビル8F</span></p><p class="flex items-center gap-2"><span>📞</span><span>06-9876-5432</span></p><p class="flex items-start gap-2"><span class="mt-0.5">🚃</span><span>JR大阪駅 中央北口より徒歩5分</span></p></div></div><div class="rounded-2xl border border-gray-200 bg-gray-50 p-6"><h3 class="mb-3 text-xl font-semibold text-gray-900">名古屋支社</h3><div class="mb-4 h-32 rounded-xl bg-gray-200 flex items-center justify-center"><span class="text-2xl">📍 地図</span></div><div class="space-y-2 text-sm text-gray-700"><p class="flex items-start gap-2"><span class="mt-0.5">📍</span><span>〒460-0008 愛知県名古屋市中区栄3-3-3 名古屋ビル3F</span></p><p class="flex items-center gap-2"><span>📞</span><span>052-111-2222</span></p><p class="flex items-start gap-2"><span class="mt-0.5">🚃</span><span>地下鉄東山線 栄駅 1番出口より徒歩2分</span></p></div></div><div class="rounded-2xl border border-gray-200 bg-gray-50 p-6"><h3 class="mb-3 text-xl font-semibold text-gray-900">福岡支社</h3><div class="mb-4 h-32 rounded-xl bg-gray-200 flex items-center justify-center"><span class="text-2xl">📍 地図</span></div><div class="space-y-2 text-sm text-gray-700"><p class="flex items-start gap-2"><span class="mt-0.5">📍</span><span>〒810-0001 福岡県福岡市中央区天神1-1-1 天神ビル6F</span></p><p class="flex items-center gap-2"><span>📞</span><span>092-333-4444</span></p><p class="flex items-start gap-2"><span class="mt-0.5">🚃</span><span>地下鉄空港線 天神駅 3番出口より徒歩4分</span></p></div></div></div></div></section><section id="main" class="bg-white py-16 md:py-20"><div class="mx-auto max-w-2xl px-6"><h2 class="text-2xl md:text-3xl font-bold text-slate-900">お問い合わせフォーム</h2><p class="mt-2 text-sm text-slate-600"><span class="font-bold text-red-700">*</span> は必須項目です。</p><form class="mt-8 space-y-6" aria-describedby="form-help"><p id="form-help" class="sr-only">必須項目を入力してください。</p><div><label for="af-name" class="block text-base font-semibold text-slate-900">お名前 <span class="text-red-700" aria-hidden="true">*</span></label><input id="af-name" required="" aria-required="true" class="mt-2 w-full rounded-xl border-2 border-slate-400 px-3 py-2.5 text-slate-900 focus:border-blue-400 focus:outline focus:outline-2 focus:outline-blue-700"/></div><div><label for="af-email" class="block text-base font-semibold text-slate-900">メールアドレス <span class="text-red-700" aria-hidden="true">*</span></label><input id="af-email" type="email" required="" aria-required="true" aria-describedby="af-email-hint" class="mt-2 w-full rounded-xl border-2 border-slate-400 px-3 py-2.5 text-slate-900 focus:border-blue-400 focus:outline focus:outline-2 focus:outline-blue-700"/><p id="af-email-hint" class="mt-1 text-sm text-slate-600">例: example@city.lg.jp</p></div><div><label for="af-body" class="block text-base font-semibold text-slate-900">お問い合わせ内容</label><textarea id="af-body" class="mt-2 h-32 w-full rounded-xl border-2 border-slate-400 px-3 py-2.5 text-slate-900 focus:border-blue-400 focus:outline focus:outline-2 focus:outline-blue-700"></textarea></div><button type="submit" class="rounded-xl bg-blue-500 px-8 py-3 text-base font-bold text-gray-900 hover:bg-blue-500 focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-blue-900">送信する</button></form></div></section><section class="w-full max-w-4xl mx-auto px-4 py-8"><h2 class="text-2xl font-bold text-gray-900 dark:text-gray-900 mb-6">製品一覧テーブル</h2><div class="overflow-x-auto rounded-xl shadow-md dark:shadow-gray-800"><table class="w-full text-sm text-left text-gray-700 dark:text-gray-200 bg-white dark:bg-slate-50 rounded-xl"><thead class="text-xs uppercase bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-600"><tr><th scope="col" class="px-6 py-3">製品名</th><th scope="col" class="px-6 py-3">価格</th><th scope="col" class="px-6 py-3">在庫状況</th></tr></thead><tbody><tr class="border-b border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"><td class="px-6 py-4 font-medium whitespace-nowrap">プロダクトA</td><td class="px-6 py-4">¥12,800</td><td class="px-6 py-4"><span class="inline-block px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">在庫あり</span></td></tr><tr class="border-b border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"><td class="px-6 py-4 font-medium whitespace-nowrap">プロダクトB</td><td class="px-6 py-4">¥8,500</td><td class="px-6 py-4"><span class="inline-block px-2 py-1 text-xs font-semibold rounded-full bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200">残りわずか</span></td></tr><tr class="border-b border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"><td class="px-6 py-4 font-medium whitespace-nowrap">プロダクトC</td><td class="px-6 py-4">¥22,000</td><td class="px-6 py-4"><span class="inline-block px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">在庫あり</span></td></tr><tr class="border-b border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"><td class="px-6 py-4 font-medium whitespace-nowrap">プロダクトD</td><td class="px-6 py-4">¥5,200</td><td class="px-6 py-4"><span class="inline-block px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">在庫あり</span></td></tr></tbody></table></div><p class="mt-4 text-xs text-gray-500 dark:text-gray-400 text-right md:text-left">※ 価格はすべて税込表示です。</p></section><section class="bg-white text-gray-900 py-16 px-6 md:py-24 md:px-12 rounded-2xl"><div class="max-w-4xl mx-auto"><h2 class="text-3xl md:text-4xl font-bold mb-6 tracking-tight">採用情報</h2><p class="text-lg md:text-xl text-gray-600 leading-relaxed">私たちは、新しい挑戦を共にできる仲間を募集しています。 あなたのスキルと情熱を、未来の価値創造に活かしてみませんか。 詳細はエントリーページをご確認ください。</p></div></section><section class="rounded-2xl bg-white p-6 md:p-10 text-gray-100"><h2 class="text-2xl md:text-3xl font-bold mb-6 border-b border-gray-700 pb-2">会社概要</h2><table class="w-full text-sm md:text-base"><tbody><tr class="border-b border-gray-700"><th class="py-3 pr-4 text-left font-semibold text-gray-400 whitespace-nowrap align-top">社名</th><td class="py-3">株式会社テクノロジー</td></tr><tr class="border-b border-gray-700"><th class="py-3 pr-4 text-left font-semibold text-gray-400 whitespace-nowrap align-top">設立</th><td class="py-3">2010年4月1日</td></tr><tr class="border-b border-gray-700"><th class="py-3 pr-4 text-left font-semibold text-gray-400 whitespace-nowrap align-top">資本金</th><td class="py-3">1億円</td></tr><tr class="border-b border-gray-700"><th class="py-3 pr-4 text-left font-semibold text-gray-400 whitespace-nowrap align-top">代表者</th><td class="py-3">代表取締役社長 山田 太郎</td></tr><tr class="border-b border-gray-700"><th class="py-3 pr-4 text-left font-semibold text-gray-400 whitespace-nowrap align-top">本社所在地</th><td class="py-3">〒100-0001 東京都千代田区千代田1-1-1</td></tr><tr><th class="py-3 pr-4 text-left font-semibold text-gray-400 whitespace-nowrap align-top">事業内容</th><td class="py-3">Webシステム開発、AIソリューションの提供、クラウドインフラ構築</td></tr></tbody></table></section><section class="relative min-h-[600px] w-full bg-white text-gray-900 rounded-2xl overflow-hidden"><div class="absolute inset-0 bg-gradient-to-br from-gray-800 via-gray-900 to-black opacity-80"></div><div class="absolute top-10 right-10 w-72 h-72 bg-blue-500/10 rounded-full blur-3xl"></div><div class="absolute bottom-10 left-10 w-96 h-96 bg-blue-500/10 rounded-full blur-3xl"></div><div class="relative z-10 flex flex-col items-center justify-center px-6 py-20 md:py-28 lg:py-36 text-center"><h2 class="text-3xl md:text-5xl font-bold tracking-tight mb-4">お問い合わせ</h2><p class="max-w-xl text-base md:text-lg text-gray-600 mb-10">ご質問やご依頼は、以下のフォームよりお気軽にお寄せください。 通常2営業日以内にご返信いたします。</p><form class="w-full max-w-lg bg-gray-100 backdrop-blur-md rounded-2xl p-6 md:p-8 shadow-2xl border border-gray-200"><div class="mb-5 text-left"><label for="name" class="block text-sm font-medium mb-1">お名前</label><input id="name" type="text" placeholder="山田 太郎" class="w-full rounded-xl bg-gray-100 border border-gray-200 px-4 py-3 text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-400"/></div><div class="mb-5 text-left"><label for="email" class="block text-sm font-medium mb-1">メールアドレス</label><input id="email" type="email" placeholder="your@email.com" class="w-full rounded-xl bg-gray-100 border border-gray-200 px-4 py-3 text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-400"/></div><div class="mb-6 text-left"><label for="message" class="block text-sm font-medium mb-1">メッセージ</label><textarea id="message" rows="4" placeholder="お問い合わせ内容をご記入ください" class="w-full rounded-xl bg-gray-100 border border-gray-200 px-4 py-3 text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-400 resize-none"></textarea></div><button type="submit" class="w-full rounded-xl bg-blue-600 hover:bg-blue-500 transition-colors duration-200 py-3 font-semibold text-gray-900 shadow-lg">送信する</button></form></div></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-amber-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-amber-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-amber-300">￥3,000～（※サンプル）※材質・形状により変動</span></li><li class="flex justify-between border-b border-zinc-700 py-3"><span>試作設計（1案件）</span><span class="text-amber-300">￥50,000～（※サンプル）※難易度により見積</span></li><li class="flex justify-between border-b border-zinc-700 py-3"><span>メンテナンス訪問（1回）</span><span class="text-amber-300">￥15,000～（※サンプル）※出張費別途</span></li><li class="flex justify-between border-b border-zinc-700 py-3"><span>オンライン相談（30分）</span><span class="text-amber-300">無料（※サンプル）※初回のみ</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">創業40年の熟練職人が、図面一枚から高精度な加工を実現。難しい形状もお任せください。</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">緊急の試作や小ロット生産も柔軟に対応。通常3営業日からの出荷が可能です（※サンプル）。</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-amber-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-amber-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">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>