更新

src/layouts/Layout.astro

@@ -104,7 +104,7 @@ const base = import.meta.env.BASE_URL || "/";
 
     <!-- フッター -->
     <footer class="bg-gray-800 text-gray-300 text-sm py-4 text-center">
-      © {currentYear} 202510新建ウェブプロジェクト株式会社 All Rights Reserved.
+      © {currentYear} 株式会社火和 HIYORI All Rights Reserved.
     </footer>
 
     <!-- スクリプト -->

src/pages/about.astro

@@ -40,34 +40,69 @@ import Layout from "../layouts/Layout.astro";
   </section>
 
   <!-- 理念セクション -->
-  <section class="max-w-6xl mx-auto py-20 px-6 text-center">
+  <section id="vision" class="mx-auto py-20 px-6 text-center">
     <h2 class="text-4xl font-bold text-gray-800 mb-8">企業理念</h2>
-    <p class="text-lg leading-relaxed max-w-5xl mx-auto">
+    <p class="text-lg leading-relaxed">
       「株式会社火和
       HIYORI（ひより）は、ITソリューションと飲食サービスを融合し、<br />
-      人々の暮らしに新しい価値と温かさを生み出す企業です。」<br />
+      人々の暮らしに新しい価値と温かさを生み出す企業です。」
-      火のような情熱・エネルギーが、和の心と調和して人や社会を温めるというイメージになります。<br
-      />
-      特に「火」が持つ強さと「和」が持つ優しさがバランスよく調和しており、情熱と調和で価値を作る企業にしたいと思います。
     </p>
+    <p class="text-lg leading-relaxed mb-4">
+      火のような情熱・エネルギーが、和の心と調和して人や社会を温めるというイメージになります。
+    </p>
+    <p class="text-lg leading-relaxed">
+      特に「火」が持つ強さと「和」が持つ優しさがバランスよく調和しており、<br />
+      情熱と調和で価値を作る企業にしたいと思います。
+    </p>
+  </section>
+
+  <!-- MISSION & VISION -->
+  <section class="mx-auto py-20 px-6 text-center">
+    <div class="max-w-4xl mx-auto">
+      <div class="mb-12">
+        <img
+          src={`${import.meta.env.BASE_URL}images/it-business.jpg`}
+          alt="MISSION"
+          class="w-32 h-32 object-cover rounded-full mx-auto mb-6 shadow-lg"
+        />
+        <h2 class="text-4xl font-bold text-gray-800 mb-4">MISSION</h2>
+        <p class="text-lg leading-relaxed text-gray-700">
+          「技術と食文化を通じて、社会に“より良い日和”を創り出す。」
+        </p>
+      </div>
+      <div>
+        <img
+          src={`${import.meta.env.BASE_URL}images/food-business.jpg`}
+          alt="VISION"
+          class="w-32 h-32 object-cover rounded-full mx-auto mb-6 shadow-lg"
+        />
+        <h2 class="text-4xl font-bold text-gray-800 mb-4">VISION</h2>
+        <p class="text-lg leading-relaxed text-gray-700">
+          「ITの未来と、食の豊かさを両立し、人々の生活を支える企業へ。」
+        </p>
+      </div>
+    </div>
   </section>
 
   <!-- 代表挨拶 -->
   <section class="bg-gray-50 py-20">
-    <div class="max-w-5xl mx-auto px-6 grid md:grid-cols-2 gap-10 items-center">
+    <div class="mx-auto px-6 flex items-center justify-center">
       <div>
         <img
           src={`${import.meta.env.BASE_URL}images/ceo.jpg`}
           alt="代表写真"
-          class="w-full h-80 object-cover rounded-lg shadow"
+          class="w-80 h-80 object-cover rounded-lg shadow"
         />
       </div>
-      <div>
+      <div class="ml-4">
         <h2 class="text-4xl font-bold text-gray-800 mb-6">代表挨拶</h2>
         <p class="text-lg leading-relaxed mb-4">
-          平素より格別のご高配を賜り、誠にありがとうございます。<br />
+          平素より格別のご高配を賜り、誠にありがとうございます。
-          当社は創業以来、ITと飲食の二つの分野で地域と共に成長してまいりました。<br
+        </p>
-          />
+        <p class="text-lg leading-relaxed mb-4">
+          当社は創業以来、ITと飲食の二つの分野で地域と共に成長してまいりました。
+        </p>
+        <p class="text-lg leading-relaxed mb-4">
           今後もお客様に満足していただけるサービスを提供し、社会の発展に寄与してまいります。
         </p>
         <p class="mt-6 font-semibold text-gray-800">代表取締役</p>
@@ -105,7 +140,7 @@ import Layout from "../layouts/Layout.astro";
             <th class="bg-gray-100 px-6 py-4 font-medium text-gray-700"
               >代表者</th
             >
-            <td class="px-6 py-4 text-gray-700">朝元　逢心</td>
+            <td class="px-6 py-4 text-gray-700">朝元 逢心</td>
           </tr>
           <tr>
             <th class="bg-gray-100 px-6 py-4 font-medium text-gray-700"

src/pages/index.astro

@@ -21,13 +21,13 @@ const base = import.meta.env.BASE_URL || "/";
         テクノロジーと創造力で、<br />未来をデザインする。
       </h1>
 
-      <p class="!text-yellow-300 text-3xl font-bold">
+      <p class="text-yellow-300! text-3xl font-bold">
         IT × FOOD の力で、人と社会をつなぐ。
       </p>
 
       <a
         href="/about"
-        class="inline-block mt-10 bg-gradient-to-r from-sky-400 to-blue-500 text-white font-semibold px-12 py-4 rounded-full shadow-[0_8px_24px_rgba(56,189,248,0.4)] hover:shadow-[0_10px_28px_rgba(56,189,248,0.5)] hover:scale-[1.06] transition-all duration-300"
+        class="inline-block mt-10 bg-linear-to-r from-sky-400 to-blue-500 text-white font-semibold px-12 py-4 rounded-full shadow-[0_8px_24px_rgba(56,189,248,0.4)] hover:shadow-[0_10px_28px_rgba(56,189,248,0.5)] hover:scale-[1.06] transition-all duration-300"
       >
         会社概要を見る →
       </a>
@@ -50,7 +50,7 @@ const base = import.meta.env.BASE_URL || "/";
         />
         <h3 class="text-2xl font-semibold text-blue-700 mb-4">IT事業部</h3>
         <p class="text-gray-600 leading-relaxed mb-6">
-          システム開発・Web制作・クラウド導入支援など、DX推進をサポートします。
+          情報システム開発・Web制作・クラウド導入支援など、DX推進をサポートします。
         </p>
         <a href={`${base}it/`} class="text-blue-600 font-medium hover:underline"
           >詳しく見る →</a
@@ -80,7 +80,7 @@ const base = import.meta.env.BASE_URL || "/";
 
   <!-- お問い合わせ -->
   <section
-    class="bg-gradient-to-br from-blue-700 via-blue-500 to-blue-400 text-white text-center py-24"
+    class="bg-linear-to-br from-blue-700 via-blue-500 to-blue-400 text-white text-center py-24"
   >
     <h2 class="text-3xl font-bold mb-6">お問い合わせ</h2>
     <p class="text-cyan-300 text-lg mb-10">

src/pages/it.astro

@@ -11,8 +11,8 @@ const base = import.meta.env.BASE_URL || "/";
     <div class="max-w-5xl mx-auto text-center px-6">
       <h1 class="text-4xl sm:text-5xl font-extrabold mb-4">IT事業部</h1>
       <p class="text-lg text-blue-50">
-        システム開発からWeb制作まで。<br />
+        業務効率化から顧客体験の向上まで、<br />
-        テクノロジーでお客様の課題を解決します。
+        技術の力で企業成長を支援します。
       </p>
     </div>
   </section>
@@ -20,10 +20,10 @@ const base = import.meta.env.BASE_URL || "/";
   <!-- サービス紹介 -->
   <section class="max-w-6xl mx-auto py-20 px-6">
     <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">
-      提供サービス
+      ITソリューションサービス
     </h2>
 
-    <div class="grid md:grid-cols-3 gap-10">
+    <div class="grid md:grid-cols-3 gap-10 justify-items-center">
       <div
         class="bg-white rounded-xl shadow hover:shadow-lg p-6 text-center transition"
       >
@@ -32,21 +32,39 @@ const base = import.meta.env.BASE_URL || "/";
           alt="システム開発"
           class="w-full h-40 object-cover rounded-lg mb-5"
         />
-        <h3 class="text-xl font-semibold text-blue-700 mb-2">システム開発</h3>
+        <h3 class="text-xl font-semibold text-blue-700 mb-2">
+          Webシステム・アプリ開発
+        </h3>
         <p class="text-gray-700 text-sm leading-relaxed">
           業務アプリケーションやデータベース連携など、ビジネスに最適化されたシステムを開発します。
         </p>
       </div>
-
+      <div
+        class="bg-white rounded-xl shadow hover:shadow-lg p-6 text-center transition"
+      >
+        <img
+          src={`${import.meta.env.BASE_URL}images/cloud.jpg`}
+          alt="AI分析・自動化ツール開発"
+          class="w-full h-40 object-cover rounded-lg mb-5"
+        />
+        <h3 class="text-xl font-semibold text-blue-700 mb-2">
+          AI分析・自動化ツール開発
+        </h3>
+        <p class="text-gray-700 text-sm leading-relaxed">
+          AWSやAzureを活用したクラウド環境設計や、セキュアなインフラ構築を支援します。
+        </p>
+      </div>
       <div
         class="bg-white rounded-xl shadow hover:shadow-lg p-6 text-center transition"
       >
         <img
           src={`${import.meta.env.BASE_URL}images/web-design.jpg`}
-          alt="Web制作"
+          alt="通訳業及び翻訳業"
           class="w-full h-40 object-cover rounded-lg mb-5"
         />
-        <h3 class="text-xl font-semibold text-blue-700 mb-2">Web制作</h3>
+        <h3 class="text-xl font-semibold text-blue-700 mb-2">
+          通訳業及び翻訳業
+        </h3>
         <p class="text-gray-700 text-sm leading-relaxed">
           ブランドを高める企業サイトやECサイトの設計・開発を行い、ユーザー体験を最適化します。
         </p>
@@ -56,15 +74,31 @@ const base = import.meta.env.BASE_URL || "/";
         class="bg-white rounded-xl shadow hover:shadow-lg p-6 text-center transition"
       >
         <img
-          src={`${import.meta.env.BASE_URL}images/cloud.jpg`}
+          src={`${import.meta.env.BASE_URL}images/cloud1.png  `}
-          alt="クラウド・ITインフラ"
+          alt="クラウド導入支援・DXコンサルティング"
           class="w-full h-40 object-cover rounded-lg mb-5"
         />
         <h3 class="text-xl font-semibold text-blue-700 mb-2">
-          クラウド・ITインフラ
+          クラウド導入支援・DXコンサルティング
         </h3>
         <p class="text-gray-700 text-sm leading-relaxed">
-          AWSやAzureを活用したクラウド環境設計や、セキュアなインフラ構築を支援します。
+          クラウド導入とデジタルトランスフォーメーションのコンサルティングを提供し、業務効率化を支援します。
+        </p>
+      </div>
+
+      <div
+        class="bg-white rounded-xl shadow hover:shadow-lg p-6 text-center transition"
+      >
+        <img
+          src={`${import.meta.env.BASE_URL}images/order.jpg`}
+          alt="飲食店向け予約・注文システム"
+          class="w-full h-40 object-cover rounded-lg mb-5"
+        />
+        <h3 class="text-xl font-semibold text-blue-700 mb-2">
+          飲食店向け予約・注文システム
+        </h3>
+        <p class="text-gray-700 text-sm leading-relaxed">
+          飲食店向けの予約・注文システムを開発し、顧客体験の向上と業務効率化を実現します。
         </p>
       </div>
     </div>

src/styles/global.css

@@ -4,12 +4,16 @@
    （Tailwindと組み合わせて使用）
    Designed for: 202510新建ウェブプロジェクト株式会社
    ========================================================= */
-/* Tailwind 必须在最上方导入 */
+/* ---------------------------------------------------------
-@import "tailwindcss";
+   1️⃣ Google Fonts（最上部に置く必要あり）
-
+   --------------------------------------------------------- */
-/* 🩵 フォント設定 */
 @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&family=Inter:wght@400;500;700&display=swap");
 
+/* ---------------------------------------------------------
+   2️⃣ Tailwind directives（旧 @import → 新 @tailwind）
+   --------------------------------------------------------- */
+@import "tailwindcss";
+
 html {
   font-family: "Inter", "Noto Sans JP", sans-serif;
   scroll-behavior: smooth;
@@ -81,10 +85,7 @@ section h2 {
 }
 
 section p {
-  max-width: 42rem;
+  margin: 0;
-  margin: 0 auto;
-  text-align: center;
-  color: #475569; /* gray-600 */
 }
 
 /* Hero セクションの p を白色に */