フィットネスジム（テンプレートから）

atomic.studio/s/3702

📄 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-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="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-white py-16"><div class="max-w-7xl mx-auto px-4"><h2 class="text-3xl font-bold text-gray-900 mb-8 text-center md:text-left">風景ギャラリー</h2><div class="grid grid-cols-2 md:grid-cols-4 gap-4"><div class="aspect-square bg-gray-200 rounded-xl overflow-hidden hover:scale-105 transition-transform duration-300 relative group"><img src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=400&amp;h=400&amp;fit=crop" alt="山岳の朝日" class="w-full h-full object-cover" loading="lazy"/><div class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-3"><span class="text-white text-sm font-medium">山岳の朝日</span></div></div><div class="aspect-square bg-gray-200 rounded-xl overflow-hidden hover:scale-105 transition-transform duration-300 relative group"><img src="https://images.unsplash.com/photo-1518837695005-2083093ee35b?w=400&amp;h=400&amp;fit=crop" alt="海辺の夕焼け" class="w-full h-full object-cover" loading="lazy"/><div class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-3"><span class="text-white text-sm font-medium">海辺の夕焼け</span></div></div><div class="aspect-square bg-gray-200 rounded-xl overflow-hidden hover:scale-105 transition-transform duration-300 relative group"><img src="https://images.unsplash.com/photo-1501785888041-af3ef285b470?w=400&amp;h=400&amp;fit=crop" alt="森林の小道" class="w-full h-full object-cover" loading="lazy"/><div class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-3"><span class="text-white text-sm font-medium">森林の小道</span></div></div><div class="aspect-square bg-gray-200 rounded-xl overflow-hidden hover:scale-105 transition-transform duration-300 relative group"><img src="https://images.unsplash.com/photo-1470071459604-7b8ec44ffd4b?w=400&amp;h=400&amp;fit=crop" alt="滝と虹" class="w-full h-full object-cover" loading="lazy"/><div class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-3"><span class="text-white text-sm font-medium">滝と虹</span></div></div><div class="aspect-square bg-gray-200 rounded-xl overflow-hidden hover:scale-105 transition-transform duration-300 relative group"><img src="https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=400&amp;h=400&amp;fit=crop" alt="紅葉の谷" class="w-full h-full object-cover" loading="lazy"/><div class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-3"><span class="text-white text-sm font-medium">紅葉の谷</span></div></div><div class="aspect-square bg-gray-200 rounded-xl overflow-hidden hover:scale-105 transition-transform duration-300 relative group"><img src="https://images.unsplash.com/photo-1504384308090-c894fdcc538d?w=400&amp;h=400&amp;fit=crop" alt="都市の夜景" class="w-full h-full object-cover" loading="lazy"/><div class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-3"><span class="text-white text-sm font-medium">都市の夜景</span></div></div><div class="aspect-square bg-gray-200 rounded-xl overflow-hidden hover:scale-105 transition-transform duration-300 relative group"><img src="https://images.unsplash.com/photo-1518173946687-a36f968f7e9c?w=400&amp;h=400&amp;fit=crop" alt="砂漠の星空" class="w-full h-full object-cover" loading="lazy"/><div class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-3"><span class="text-white text-sm font-medium">砂漠の星空</span></div></div><div class="aspect-square bg-gray-200 rounded-xl overflow-hidden hover:scale-105 transition-transform duration-300 relative group"><img src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=400&amp;h=400&amp;fit=crop" alt="熱帯のビーチ" class="w-full h-full object-cover" loading="lazy"/><div class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-3"><span class="text-white text-sm font-medium">熱帯のビーチ</span></div></div><div class="aspect-square bg-gray-200 rounded-xl overflow-hidden hover:scale-105 transition-transform duration-300 relative group"><img src="https://images.unsplash.com/photo-1518495973-0e2c7e6e8f1a?w=400&amp;h=400&amp;fit=crop" alt="雪原の樹氷" class="w-full h-full object-cover" loading="lazy"/><div class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-3"><span class="text-white text-sm font-medium">雪原の樹氷</span></div></div></div></div></section><section class="bg-gray-900 py-16 px-6"><div class="max-w-6xl mx-auto"><h2 class="text-3xl font-bold text-white text-center mb-12">チーム紹介</h2><div class="grid grid-cols-1 md:grid-cols-4 gap-8"><div class="bg-gray-800 rounded-xl p-6 flex flex-col items-center text-center"><div class="w-24 h-24 rounded-full bg-gray-600 mb-4"></div><h3 class="text-xl font-semibold text-white">田中 太郎</h3><p class="text-gray-400 mt-1">代表取締役</p></div><div class="bg-gray-800 rounded-xl p-6 flex flex-col items-center text-center"><div class="w-24 h-24 rounded-full bg-gray-600 mb-4"></div><h3 class="text-xl font-semibold text-white">山田 花子</h3><p class="text-gray-400 mt-1">CTO</p></div><div class="bg-gray-800 rounded-xl p-6 flex flex-col items-center text-center"><div class="w-24 h-24 rounded-full bg-gray-600 mb-4"></div><h3 class="text-xl font-semibold text-white">佐藤 健</h3><p class="text-gray-400 mt-1">デザイナー</p></div><div class="bg-gray-800 rounded-xl p-6 flex flex-col items-center text-center"><div class="w-24 h-24 rounded-full bg-gray-600 mb-4"></div><h3 class="text-xl font-semibold text-white">鈴木 美咲</h3><p class="text-gray-400 mt-1">マーケティング</p></div></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-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><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><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="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 aria-label="メール購読" class="w-full max-w-2xl mx-auto px-4 py-12 md:py-16"><div class="bg-white dark:bg-gray-900 rounded-2xl shadow-lg p-6 md:p-10"><h2 class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white mb-3">メール購読</h2><p class="text-gray-600 dark:text-gray-300 mb-6 text-sm md:text-base">最新の記事やお知らせをメールでお届けします。いつでも解除できます。</p><form class="flex flex-col sm:flex-row gap-3" aria-label="メールアドレス登録フォーム"><label for="newsletter-email" class="sr-only">メールアドレス</label><input id="newsletter-email" type="email" required="" placeholder="your@email.com" class="flex-1 px-4 py-3 rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 transition" aria-required="true"/><button type="submit" class="px-6 py-3 rounded-xl bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600 text-white font-semibold shadow-md transition focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:ring-offset-2 dark:focus:ring-offset-gray-900 whitespace-nowrap">登録</button></form></div></section><footer class="bg-gray-900 text-gray-300 border-t border-gray-700 py-12"><div class="max-w-7xl mx-auto px-4 grid md:grid-cols-4 gap-8"><div><h3 class="text-white font-semibold text-lg mb-4">株式会社アークライズ</h3><ul class="space-y-2 text-sm"><li>〒105-0001 東京都港区虎ノ門1-2-3</li><li>代表取締役CEO 佐藤 健一</li><li>設立: 2010年4月1日</li><li>資本金: 1億円</li><li>従業員数: 120名</li></ul></div><div><h3 class="text-white font-semibold text-lg mb-4">サービス</h3><ul class="space-y-2 text-sm"><li><a href="#" class="hover:text-white transition-colors">クラウドプラットフォーム</a></li><li><a href="#" class="hover:text-white transition-colors">AIソリューション</a></li><li><a href="#" class="hover:text-white transition-colors">データ分析基盤</a></li><li><a href="#" class="hover:text-white transition-colors">セキュリティ監査</a></li><li><a href="#" class="hover:text-white transition-colors">コンサルティング</a></li></ul></div><div><h3 class="text-white font-semibold text-lg mb-4">サポート</h3><ul class="space-y-2 text-sm"><li><a href="#" class="hover:text-white transition-colors">ドキュメント</a></li><li><a href="#" class="hover:text-white transition-colors">APIリファレンス</a></li><li><a href="#" class="hover:text-white transition-colors">よくある質問</a></li><li><a href="#" class="hover:text-white transition-colors">コミュニティフォーラム</a></li><li><a href="#" class="hover:text-white transition-colors">お問い合わせ</a></li></ul></div><div><h3 class="text-white font-semibold text-lg mb-4">フォローする</h3><div class="flex space-x-4 mb-6"><a href="#" aria-label="Twitter" class="hover:text-white transition-colors"><svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"></path></svg></a><a href="#" aria-label="Facebook" class="hover:text-white transition-colors"><svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"></path></svg></a><a href="#" aria-label="Instagram" class="hover:text-white transition-colors"><svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"></path></svg></a><a href="#" aria-label="LinkedIn" class="hover:text-white transition-colors"><svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"></path></svg></a><a href="#" aria-label="YouTube" class="hover:text-white transition-colors"><svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"></path></svg></a></div><p class="text-xs text-gray-500">© 2025 株式会社アークライズ. All rights reserved.</p></div></div></footer><div class="text-white"><section class="px-6 py-16 md:py-24 text-center bg-zinc-900"><p class="text-sm tracking-widest text-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">ジムGのウェブサイトへようこそ。</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">¥8,800/月 ※サンプル</span></li><li class="flex justify-between border-b border-zinc-700 py-3"><span>デイ会員</span><span class="text-amber-300">¥6,600/月 ※サンプル</span></li><li class="flex justify-between border-b border-zinc-700 py-3"><span>パーソナル</span><span class="text-amber-300">¥5,500/回 ※サンプル</span></li><li class="flex justify-between border-b border-zinc-700 py-3"><span>体験</span><span class="text-amber-300">¥0 ※サンプル</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">3ヶ月で体が変わりました。※サンプル</blockquote><figcaption class="text-sm text-amber-300">— 会員 T 様</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">— 会員 A 様</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">7:00–23: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">駅直結ビル3F ※サンプル</p></div></div><p class="text-xs text-zinc-500 mt-3 text-center">※営業時間・アクセスはサンプルです。</p></section></div></div>