ポートフォリオ（テンプレートから）

atomic.studio/s/3710

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

<div class="min-h-screen bg-zinc-950 text-white"><div class="rounded-2xl bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-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-white py-20"><div class="mx-auto max-w-7xl px-6"><div class="md:grid md:grid-cols-2 md:gap-16 md:items-center"><div><h2 class="text-4xl font-bold tracking-tight text-gray-900">創業35年、確かな実績と革新性</h2><div class="mt-8 space-y-6 text-gray-700 leading-relaxed"><p>1989年に大阪で創業した当社は、製造業向けの産業用ロボット制御システムの開発からスタートしました。以来、自動車部品メーカーや半導体装置メーカーなど、国内外200社以上の生産ラインに当社の制御システムを導入。特に、高精度な位置決め制御と省エネルギー化を両立した「EcoServoシリーズ」は、業界内で高い評価を得ており、導入先の平均生産効率を23%向上させた実績があります。</p><p>2015年にはドイツ・シュトゥットガルトに技術開発拠点を設立し、欧州の先端技術と日本のものづくりを融合。2021年には、AIを活用した予知保全システム「PredictMinder」をリリースし、突発的なライン停止を最大80%削減することに成功しました。現在では、自動車、電子部品、食品包装、医薬品と4つの主要分野でトップシェアを誇る制御システムを提供しています。</p><p>2023年には、東京証券取引所スタンダード市場に上場。今後も「現場の声を技術に変える」という創業の精神を胸に、カーボンニュートラル対応の次世代ドライブユニット開発に注力し、持続可能な社会とお客様の競争力強化に貢献してまいります。</p></div></div><div class="mt-12 md:mt-0"><div class="bg-gray-100 rounded-2xl h-80 md:h-96 w-full flex items-center justify-center"><span class="text-gray-400 text-lg font-medium">本社技術センター外観</span></div></div></div><div class="mt-16 grid grid-cols-1 gap-8 sm:grid-cols-3"><div class="bg-gray-50 rounded-xl p-8 text-center shadow-sm"><p class="text-4xl font-bold text-gray-900">35年</p><p class="mt-2 text-gray-600 font-medium">創業からの歩み</p><p class="mt-1 text-sm text-gray-500">1989年設立、2024年現在で35期連続黒字経営</p></div><div class="bg-gray-50 rounded-xl p-8 text-center shadow-sm"><p class="text-4xl font-bold text-gray-900">2,800件</p><p class="mt-2 text-gray-600 font-medium">制御システム導入実績</p><p class="mt-1 text-sm text-gray-500">うち大手自動車メーカー系列への導入が1,200件超</p></div><div class="bg-gray-50 rounded-xl p-8 text-center shadow-sm"><p class="text-4xl font-bold text-gray-900">99.7%</p><p class="mt-2 text-gray-600 font-medium">顧客満足度</p><p class="mt-1 text-sm text-gray-500">導入後アンケートで「非常に満足」の回答率</p></div></div></div></section><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-blue-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-blue-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-blue-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-blue-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-blue-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-blue-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="rounded-2xl bg-gray-900 text-gray-100 p-8 md:p-12"><h2 class="text-3xl font-bold mb-6">最先端の設備と上質な空間</h2><p class="text-gray-300 leading-relaxed mb-10 max-w-3xl">当施設は、プロ仕様のトレーニングマシンからリラクゼーションスパまで、ワンランク上の体験を提供します。 清潔で洗練された空間で、心身ともにリフレッシュできるひとときをお過ごしください。</p><div class="grid md:grid-cols-3 gap-6"><div class="bg-gray-800 rounded-xl p-6"><span class="text-4xl block mb-4">🏋️</span><h3 class="text-xl font-semibold mb-2">最新マシン完備</h3><p class="text-gray-400 text-sm leading-relaxed">世界トップブランドのトレーニングマシンを導入。目的に合わせた効果的なワークアウトが可能です。</p></div><div class="bg-gray-800 rounded-xl p-6"><span class="text-4xl block mb-4">🧖</span><h3 class="text-xl font-semibold mb-2">上質スパ&amp;サウナ</h3><p class="text-gray-400 text-sm leading-relaxed">フィンランド式サウナと天然温泉を併設。トレーニング後のクールダウンに最適な空間です。</p></div><div class="bg-gray-800 rounded-xl p-6"><span class="text-4xl block mb-4">🎯</span><h3 class="text-xl font-semibold mb-2">パーソナルサポート</h3><p class="text-gray-400 text-sm leading-relaxed">経験豊富なトレーナーがマンツーマンで指導。初心者からアスリートまで個別の目標をサポートします。</p></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-purple-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-purple-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><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-lg 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-lg 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-lg 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-lg 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-lg 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><section class="bg-gray-900 text-white py-16 px-6 rounded-2xl"><div class="max-w-6xl mx-auto"><h2 class="text-3xl md:text-4xl font-bold mb-4">製品概要</h2><p class="text-gray-300 mb-12 max-w-2xl">当社のプロダクトは、業務効率化とデータ活用をシームレスに実現する統合プラットフォームです。直感的な操作性と高度なセキュリティを両立し、あらゆる規模の企業のDXを加速します。</p><div class="grid md:grid-cols-3 gap-8"><div class="bg-gray-800 p-6 rounded-xl"><span class="text-4xl">⚡</span><h3 class="text-xl font-semibold mt-4 mb-2">高速処理</h3><p class="text-gray-400">独自のアルゴリズムにより、大量データも瞬時に処理。待ち時間を大幅に削減し、業務スピードを最大化します。</p></div><div class="bg-gray-800 p-6 rounded-xl"><span class="text-4xl">🔒</span><h3 class="text-xl font-semibold mt-4 mb-2">堅牢なセキュリティ</h3><p class="text-gray-400">エンドツーエンドの暗号化と多層防御を採用。機密情報を保護し、安心してご利用いただけます。</p></div><div class="bg-gray-800 p-6 rounded-xl"><span class="text-4xl">🔌</span><h3 class="text-xl font-semibold mt-4 mb-2">簡単連携</h3><p class="text-gray-400">既存のツールやシステムとAPIでスムーズに連携。導入後の手間を最小限に抑えます。</p></div></div><div class="mt-12 text-center"><button class="bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-3 px-8 rounded-lg transition-colors">詳細を見る</button></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-zinc-950 text-white py-16 md:py-24"><div class="mx-auto max-w-3xl px-4 md:px-6"><h2 class="text-3xl md:text-4xl font-bold tracking-tight mb-12 text-center">よくある質問</h2><ul class="divide-y divide-zinc-700"><li class="py-5 md:py-6 first:pt-0 last:pb-0"><details class="group"><summary class="flex items-center justify-between cursor-pointer list-none text-base md:text-lg font-medium leading-relaxed text-white hover:text-zinc-300 transition-colors"><span>返品・交換の条件を教えてください。</span><span class="ml-4 shrink-0 text-zinc-400 group-open:rotate-180 transition-transform duration-200"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 md:h-6 md:w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"></path></svg></span></summary><p class="mt-4 text-sm md:text-base leading-relaxed text-zinc-300">商品到着後14日以内、未使用・未開封の状態に限り返品・交換を承ります。返品送料はお客様負担となりますが、不良品の場合は当社が負担いたします。</p></details></li><li class="py-5 md:py-6 first:pt-0 last:pb-0"><details class="group"><summary class="flex items-center justify-between cursor-pointer list-none text-base md:text-lg font-medium leading-relaxed text-white hover:text-zinc-300 transition-colors"><span>注文後に配送先を変更できますか？</span><span class="ml-4 shrink-0 text-zinc-400 group-open:rotate-180 transition-transform duration-200"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 md:h-6 md:w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"></path></svg></span></summary><p class="mt-4 text-sm md:text-base leading-relaxed text-zinc-300">ご注文確認メール送信後1時間以内であれば、マイページまたはカスタマーサポートにて変更が可能です。発送準備に入った後の変更はお受けできませんのでご注意ください。</p></details></li><li class="py-5 md:py-6 first:pt-0 last:pb-0"><details class="group"><summary class="flex items-center justify-between cursor-pointer list-none text-base md:text-lg font-medium leading-relaxed text-white hover:text-zinc-300 transition-colors"><span>支払い方法には何がありますか？</span><span class="ml-4 shrink-0 text-zinc-400 group-open:rotate-180 transition-transform duration-200"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 md:h-6 md:w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"></path></svg></span></summary><p class="mt-4 text-sm md:text-base leading-relaxed text-zinc-300">クレジットカード（Visa, Mastercard, JCB, American Express）、PayPay、Apple Pay、Google Pay、銀行振込、コンビニ払いに対応しております。</p></details></li><li class="py-5 md:py-6 first:pt-0 last:pb-0"><details class="group"><summary class="flex items-center justify-between cursor-pointer list-none text-base md:text-lg font-medium leading-relaxed text-white hover:text-zinc-300 transition-colors"><span>送料はいくらですか？</span><span class="ml-4 shrink-0 text-zinc-400 group-open:rotate-180 transition-transform duration-200"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 md:h-6 md:w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"></path></svg></span></summary><p class="mt-4 text-sm md:text-base leading-relaxed text-zinc-300">全国一律550円（税込）です。ただし、ご注文金額が5,500円（税込）以上の場合は送料無料となります。沖縄・離島へのお届けは別途1,100円（税込）加算されます。</p></details></li><li class="py-5 md:py-6 first:pt-0 last:pb-0"><details class="group"><summary class="flex items-center justify-between cursor-pointer list-none text-base md:text-lg font-medium leading-relaxed text-white hover:text-zinc-300 transition-colors"><span>注文から到着までどのくらいかかりますか？</span><span class="ml-4 shrink-0 text-zinc-400 group-open:rotate-180 transition-transform duration-200"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 md:h-6 md:w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"></path></svg></span></summary><p class="mt-4 text-sm md:text-base leading-relaxed text-zinc-300">通常、ご注文確認後2〜5営業日以内に出荷し、発送からお届けまでは地域により1〜4日程度かかります。在庫切れの場合は別途ご連絡いたします。</p></details></li><li class="py-5 md:py-6 first:pt-0 last:pb-0"><details class="group"><summary class="flex items-center justify-between cursor-pointer list-none text-base md:text-lg font-medium leading-relaxed text-white hover:text-zinc-300 transition-colors"><span>会員登録は必須ですか？</span><span class="ml-4 shrink-0 text-zinc-400 group-open:rotate-180 transition-transform duration-200"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 md:h-6 md:w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"></path></svg></span></summary><p class="mt-4 text-sm md:text-base leading-relaxed text-zinc-300">いいえ、ゲスト購入も可能です。ただし、会員登録いただくと次回以降の購入がスムーズになり、会員限定クーポンやポイント還元などの特典が受けられます。</p></details></li></ul></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-lg 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-lg 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-lg 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-lg 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><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>証明写真</span><span class="text-amber-300">¥1,500〜 ※サンプル</span></li><li class="flex justify-between border-b border-zinc-700 py-3"><span>家族写真</span><span class="text-amber-300">¥12,000〜 ※サンプル</span></li><li class="flex justify-between border-b border-zinc-700 py-3"><span>七五三・記念</span><span class="text-amber-300">¥18,000〜 ※サンプル</span></li><li class="flex justify-between border-b border-zinc-700 py-3"><span>プロフィール</span><span class="text-amber-300">¥8,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-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 class="px-6 py-14 max-w-5xl mx-auto"><h3 class="text-2xl font-bold mb-6">ギャラリー</h3><div class="grid gap-3 grid-cols-2 md:grid-cols-3"><div class="aspect-square rounded-lg bg-zinc-800 flex items-center justify-center text-zinc-500 text-xs">写真 ※サンプル</div><div class="aspect-square rounded-lg bg-zinc-800 flex items-center justify-center text-zinc-500 text-xs">写真 ※サンプル</div><div class="aspect-square rounded-lg bg-zinc-800 flex items-center justify-center text-zinc-500 text-xs">写真 ※サンプル</div><div class="aspect-square rounded-lg bg-zinc-800 flex items-center justify-center text-zinc-500 text-xs">写真 ※サンプル</div><div class="aspect-square rounded-lg bg-zinc-800 flex items-center justify-center text-zinc-500 text-xs">写真 ※サンプル</div><div class="aspect-square rounded-lg bg-zinc-800 flex items-center justify-center text-zinc-500 text-xs">写真 ※サンプル</div></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">スタジオビル2F・予約制 ※サンプル</p></div></div><p class="text-xs text-zinc-500 mt-3 text-center">※営業時間・アクセスはサンプルです。</p></section></div></div>