美容室・サロン（テンプレートから）

atomic.studio/s/3698

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

<div class="min-h-screen bg-zinc-950 text-white"><nav class="bg-white/95 backdrop-blur sticky top-0 z-50 shadow-sm h-16"><div class="max-w-7xl mx-auto px-4 h-full flex justify-between items-center"><a href="/" class="text-xl font-bold text-gray-900 tracking-tight">FlowBoard</a><div class="hidden md:flex items-center gap-8"><a href="/features" class="text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors">Features</a><a href="/pricing" class="text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors">Pricing</a><a href="/docs" class="text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors">Docs</a><a href="/blog" class="text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors">Blog</a><a href="/about" class="text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors">About</a><button class="bg-gray-900 text-white text-sm font-semibold px-5 py-2 rounded-xl hover:bg-gray-800 transition-colors">Get Started</button></div><button class="md:hidden p-2 rounded-xl text-gray-600 hover:text-gray-900 hover:bg-gray-100 transition-colors" aria-label="Toggle menu"><svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg></button></div></nav><section class="relative overflow-hidden bg-white py-24 md:py-32"><div class="absolute inset-0 bg-gradient-to-br from-indigo-50 via-white to-indigo-50 pointer-events-none"></div><div class="relative z-10 mx-auto max-w-7xl px-6 lg:px-8"><div class="grid gap-12 md:grid-cols-2 md:gap-16 items-center"><div class="flex flex-col gap-8"><h2 class="text-4xl font-extrabold tracking-tight text-gray-900 sm:text-5xl lg:text-6xl leading-tight">朝の焼き立てが<br/>街を包む幸せ</h2><p class="text-lg leading-relaxed text-gray-600 sm:text-xl max-w-lg">毎朝3時から職人が丹念に仕込む、国産小麦100%の香り高いパン。 サクサクのクロワッサン、もっちり食パン、季節のデニッシュ。 あなたの一日を、焼き立ての香りではじめませんか。</p><div class="flex flex-wrap gap-4 pt-2"><a href="#" class="inline-flex items-center justify-center rounded-xl bg-indigo-600 px-8 py-4 text-base font-semibold text-white shadow-lg shadow-indigo-200 transition hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:ring-offset-2">オンラインショップを見る</a><a href="#" class="inline-flex items-center justify-center rounded-xl border-2 border-indigo-200 bg-white px-8 py-4 text-base font-semibold text-indigo-800 transition hover:bg-indigo-50 hover:border-indigo-300 focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:ring-offset-2">店舗情報・営業時間</a></div></div><div class="relative flex items-center justify-center bg-gray-100 rounded-2xl min-h-[320px] md:min-h-[480px] overflow-hidden"><div class="absolute inset-0 bg-gradient-to-br from-indigo-100/60 to-indigo-100/40"></div><div class="relative z-10 flex flex-col items-center gap-6"><svg class="w-24 h-24 text-indigo-700/70" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M50 10 C55 20 65 25 70 35 C75 45 70 55 60 60 C50 65 40 60 35 50 C30 40 35 30 45 25 C40 20 45 15 50 10Z" fill="currentColor" opacity="0.9"></path><path d="M50 10 C45 20 35 25 30 35 C25 45 30 55 40 60 C50 65 60 60 65 50 C70 40 65 30 55 25 C60 20 55 15 50 10Z" fill="currentColor" opacity="0.6"></path><line x1="50" y1="60" x2="50" y2="90" stroke="currentColor" stroke-width="4" stroke-linecap="round" opacity="0.8"></line><circle cx="50" cy="88" r="4" fill="currentColor" opacity="0.5"></circle></svg><div class="flex gap-3"><span class="w-3 h-3 rounded-full bg-indigo-400/60"></span><span class="w-3 h-3 rounded-full bg-indigo-500/80"></span><span class="w-3 h-3 rounded-full bg-indigo-600/60"></span></div><p class="text-sm font-medium tracking-widest text-indigo-700/60 uppercase">Boulangerie · 自家製天然酵母</p></div><div class="absolute bottom-4 left-4 right-4 h-12 bg-gradient-to-t from-indigo-200/30 to-transparent rounded-full blur-sm"></div></div></div></div></section><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-indigo-500 transition-colors"><div class="text-4xl mb-4">🔧</div><h3 class="text-xl font-semibold text-white mb-2">システム開発</h3><p class="text-gray-400 leading-relaxed">Webアプリ・業務システムの設計・開発・運用を一貫して支援します。</p></div><div class="bg-gray-800 rounded-2xl p-6 border border-gray-700 hover:border-indigo-500 transition-colors"><div class="text-4xl mb-4">📱</div><h3 class="text-xl font-semibold text-white mb-2">モバイルアプリ開発</h3><p class="text-gray-400 leading-relaxed">iOS/Android対応のネイティブ・クロスプラットフォーム開発。</p></div><div class="bg-gray-800 rounded-2xl p-6 border border-gray-700 hover:border-indigo-500 transition-colors"><div class="text-4xl mb-4">☁️</div><h3 class="text-xl font-semibold text-white mb-2">クラウドインフラ</h3><p class="text-gray-400 leading-relaxed">AWS/GCPを活用したスケーラブルなインフラ構築・移行。</p></div><div class="bg-gray-800 rounded-2xl p-6 border border-gray-700 hover:border-indigo-500 transition-colors"><div class="text-4xl mb-4">🤖</div><h3 class="text-xl font-semibold text-white mb-2">AI・データ分析</h3><p class="text-gray-400 leading-relaxed">機械学習モデル開発・データ可視化・業務効率化。</p></div><div class="bg-gray-800 rounded-2xl p-6 border border-gray-700 hover:border-indigo-500 transition-colors"><div class="text-4xl mb-4">🎨</div><h3 class="text-xl font-semibold text-white mb-2">UI/UXデザイン</h3><p class="text-gray-400 leading-relaxed">ユーザー調査からプロトタイプ・デザインシステムまで。</p></div><div class="bg-gray-800 rounded-2xl p-6 border border-gray-700 hover:border-indigo-500 transition-colors"><div class="text-4xl mb-4">🛡️</div><h3 class="text-xl font-semibold text-white mb-2">セキュリティ診断</h3><p class="text-gray-400 leading-relaxed">脆弱性診断・コードレビュー・セキュリティ設計支援。</p></div></div></div></section><section class="bg-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-indigo-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-indigo-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-indigo-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-indigo-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-indigo-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-indigo-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-indigo-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-indigo-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-indigo-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-indigo-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-indigo-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-indigo-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-indigo-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-indigo-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-indigo-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-indigo-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-indigo-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-indigo-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-indigo-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><div class="rounded-2xl bg-gradient-to-r from-indigo-500 via-indigo-500 to-indigo-500 text-center p-6 md:p-8 md:max-w-2xl mx-auto"><h2 class="text-white text-2xl md:text-3xl font-bold mb-2">期間限定キャンペーン</h2><p class="text-white/90 text-sm md:text-base mb-4">今だけ全商品20%OFF！この機会をお見逃しなく。</p><button class="bg-white text-indigo-600 font-semibold px-6 py-2 rounded-full hover:bg-gray-100 transition">詳細を見る</button></div><section class="rounded-2xl bg-gray-900 text-gray-100 p-6 md:p-8 shadow-lg max-w-md mx-auto my-8"><h2 class="text-2xl font-bold mb-4 border-b border-gray-700 pb-2">営業時間案内</h2><table class="w-full text-left text-sm md:text-base"><thead><tr class="border-b border-gray-700"><th class="py-2 font-semibold">曜日</th><th class="py-2 font-semibold">営業時間</th></tr></thead><tbody><tr class="border-b border-gray-800"><td class="py-2">月曜日</td><td class="py-2">11:00 – 20:00</td></tr><tr class="border-b border-gray-800"><td class="py-2">火曜日</td><td class="py-2">11:00 – 20:00</td></tr><tr class="border-b border-gray-800"><td class="py-2">水曜日</td><td class="py-2">11:00 – 20:00</td></tr><tr class="border-b border-gray-800"><td class="py-2">木曜日</td><td class="py-2">11:00 – 20:00</td></tr><tr class="border-b border-gray-800"><td class="py-2">金曜日</td><td class="py-2">11:00 – 20:00</td></tr><tr class="border-b border-gray-800"><td class="py-2">土曜日</td><td class="py-2">10:00 – 19:00</td></tr><tr><td class="py-2">日曜日</td><td class="py-2">10:00 – 18:00</td></tr></tbody></table><p class="mt-4 text-sm text-gray-400 italic border-t border-gray-700 pt-3">※ 定休日：毎週水曜日（祝日の場合は営業、翌日休み）</p></section><section 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="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="max-w-lg mx-auto rounded-2xl bg-gray-900 text-gray-100 p-6 md:p-8 shadow-xl"><h2 class="text-2xl font-bold mb-6 text-center">無料体験申込・会員登録</h2><form aria-label="申込フォーム" noValidate="" class="space-y-5"><div><label for="name" class="block text-sm font-medium mb-1">お名前 <span aria-hidden="true">*</span></label><input id="name" type="text" required="" aria-required="true" placeholder="山田 太郎" class="w-full rounded-xl bg-gray-800 border border-gray-700 px-4 py-2.5 text-gray-100 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"/></div><div><label for="email" class="block text-sm font-medium mb-1">メールアドレス <span aria-hidden="true">*</span></label><input id="email" type="email" required="" aria-required="true" placeholder="example@mail.com" class="w-full rounded-xl bg-gray-800 border border-gray-700 px-4 py-2.5 text-gray-100 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"/></div><div><label for="phone" class="block text-sm font-medium mb-1">電話番号 <span aria-hidden="true">*</span></label><input id="phone" type="tel" required="" aria-required="true" placeholder="090-1234-5678" class="w-full rounded-xl bg-gray-800 border border-gray-700 px-4 py-2.5 text-gray-100 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"/></div><button type="submit" aria-label="申込を送信" class="w-full rounded-xl bg-indigo-600 hover:bg-indigo-500 focus:ring-2 focus:ring-indigo-400 focus:ring-offset-2 focus:ring-offset-gray-900 py-3 font-semibold text-white transition-colors">申込む</button></form><p class="mt-5 text-xs text-gray-400 leading-relaxed text-center md:text-left">※ ご登録いただいた情報は、本サービスの提供および関連するご連絡のみに使用します。<br/>プライバシーポリシーに同意の上、お申し込みください。</p></section><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><div class="text-white"><section class="px-6 py-16 md:py-24 text-center bg-zinc-900"><p class="text-sm tracking-widest text-indigo-400 mb-3">美容室</p><h2 class="text-3xl md:text-5xl font-bold mb-4">あなたらしさを、もっと美しく。</h2><p class="text-zinc-300 max-w-2xl mx-auto mb-8">髪のお悩みに寄り添う、丁寧なカウンセリングと確かな技術。</p><a href="#contact" class="inline-block px-8 py-3 rounded-full bg-indigo-500 text-zinc-900 font-semibold">ご予約はこちら</a><p class="text-base text-zinc-400 mt-6">美容室のウェブサイトへようこそ。</p></section><section class="px-6 py-14 max-w-3xl mx-auto"><h3 class="text-2xl font-bold mb-6">メニュー・料金</h3><ul class="text-zinc-200"><li class="flex justify-between border-b border-zinc-700 py-3"><span>カット</span><span class="text-indigo-300">¥4,500〜 ※サンプル</span></li><li class="flex justify-between border-b border-zinc-700 py-3"><span>カラー</span><span class="text-indigo-300">¥6,000〜 ※サンプル</span></li><li class="flex justify-between border-b border-zinc-700 py-3"><span>パーマ</span><span class="text-indigo-300">¥7,500〜 ※サンプル</span></li><li class="flex justify-between border-b border-zinc-700 py-3"><span>トリートメント</span><span class="text-indigo-300">¥3,000〜 ※サンプル</span></li></ul><p class="text-xs text-zinc-500 mt-3">※価格はサンプルです。実際の料金に差し替えてください。</p></section><section class="px-6 py-14 max-w-5xl mx-auto"><h3 class="text-2xl font-bold mb-6">サービス一覧</h3><div class="grid gap-4 md:grid-cols-3"><div class="rounded-xl bg-zinc-800 p-6"><h4 class="font-semibold mb-2">カット</h4><p class="text-sm text-zinc-300">骨格と髪質に合わせた再現性の高いスタイル提案。</p></div><div class="rounded-xl bg-zinc-800 p-6"><h4 class="font-semibold mb-2">カラー</h4><p class="text-sm text-zinc-300">ダメージを抑えた薬剤で透明感のある仕上がり。</p></div><div class="rounded-xl bg-zinc-800 p-6"><h4 class="font-semibold mb-2">ヘッドスパ</h4><p class="text-sm text-zinc-300">頭皮環境を整えるリラクゼーションメニュー。</p></div></div></section><section class="px-6 py-14 bg-zinc-900"><div class="max-w-5xl mx-auto"><h3 class="text-2xl font-bold mb-6 text-center">選ばれる特徴</h3><div class="grid gap-4 md:grid-cols-3"><div class="text-center p-6"><div class="text-3xl mb-2">✂️</div><h4 class="font-semibold mb-1">経験豊富なスタイリスト</h4><p class="text-sm text-zinc-400">一人ひとりに合わせた提案を行います。</p></div><div class="text-center p-6"><div class="text-3xl mb-2">🌿</div><h4 class="font-semibold mb-1">髪に優しい薬剤</h4><p class="text-sm text-zinc-400">ダメージレスな施術にこだわります。</p></div><div class="text-center p-6"><div class="text-3xl mb-2">🕒</div><h4 class="font-semibold mb-1">予約優先制</h4><p class="text-sm text-zinc-400">お待たせしない時間設計。</p></div></div></div></section><section class="px-6 py-14 max-w-4xl mx-auto"><h3 class="text-2xl font-bold mb-6">お客様の声</h3><div class="grid gap-4 md:grid-cols-2"><figure class="rounded-xl bg-zinc-800 p-6"><blockquote class="text-zinc-200 mb-3">カウンセリングが丁寧で安心できました。※サンプル</blockquote><figcaption class="text-sm text-indigo-300">— A.K 様</figcaption></figure><figure class="rounded-xl bg-zinc-800 p-6"><blockquote class="text-zinc-200 mb-3">思い通りのスタイルになり満足です。※サンプル</blockquote><figcaption class="text-sm text-indigo-300">— M.S 様</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-4 md:grid-cols-3"><div class="rounded-xl bg-zinc-800 p-6 text-center"><div class="w-20 h-20 mx-auto mb-3 rounded-full bg-zinc-700"></div><h4 class="font-semibold">スタッフ A</h4><p class="text-sm text-zinc-400">担当 / 経験豊富 ※サンプル</p></div><div class="rounded-xl bg-zinc-800 p-6 text-center"><div class="w-20 h-20 mx-auto mb-3 rounded-full bg-zinc-700"></div><h4 class="font-semibold">スタッフ B</h4><p class="text-sm text-zinc-400">担当 / 親切丁寧 ※サンプル</p></div><div class="rounded-xl bg-zinc-800 p-6 text-center"><div class="w-20 h-20 mx-auto mb-3 rounded-full bg-zinc-700"></div><h4 class="font-semibold">スタッフ C</h4><p class="text-sm text-zinc-400">担当 / 笑顔で対応 ※サンプル</p></div></div><p class="text-xs text-zinc-500 mt-3">※スタッフ情報はサンプルです。</p></section><section class="px-6 py-14 max-w-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-xl bg-zinc-800 flex items-center justify-center text-zinc-500 text-xs">写真 ※サンプル</div><div class="aspect-square rounded-xl bg-zinc-800 flex items-center justify-center text-zinc-500 text-xs">写真 ※サンプル</div><div class="aspect-square rounded-xl bg-zinc-800 flex items-center justify-center text-zinc-500 text-xs">写真 ※サンプル</div><div class="aspect-square rounded-xl bg-zinc-800 flex items-center justify-center text-zinc-500 text-xs">写真 ※サンプル</div><div class="aspect-square rounded-xl bg-zinc-800 flex items-center justify-center text-zinc-500 text-xs">写真 ※サンプル</div><div class="aspect-square rounded-xl 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 class="px-6 py-14 max-w-3xl mx-auto"><h3 class="text-2xl font-bold mb-6">よくある質問</h3><div><div class="border-b border-zinc-700 py-4"><p class="font-semibold mb-1">Q. 予約は必要ですか?</p><p class="text-sm text-zinc-300">A. ご予約優先ですが当日も承ります。※サンプル</p></div><div class="border-b border-zinc-700 py-4"><p class="font-semibold mb-1">Q. 駐車場はありますか?</p><p class="text-sm text-zinc-300">A. 近隣に駐車場がございます。※サンプル</p></div><div class="border-b border-zinc-700 py-4"><p class="font-semibold mb-1">Q. 支払い方法は?</p><p class="text-sm text-zinc-300">A. 現金・各種カード・電子マネー対応。※サンプル</p></div></div></section><section id="contact" class="px-6 py-14 bg-zinc-900"><div class="max-w-3xl mx-auto grid gap-6 md:grid-cols-2"><div><h3 class="text-2xl font-bold mb-4">営業時間</h3><p class="text-zinc-200">10:00–19: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">最寄駅より徒歩5分 ※サンプル</p></div></div><p class="text-xs text-zinc-500 mt-3 text-center">※営業時間・アクセスはサンプルです。</p></section></div></div>