initial commit

2025-12-27 18:03:17 +09:00
parent 111e1ede65
commit 16f5e4564b
26 changed files with 3148 additions and 21 deletions
--- a/.gitignore
+++ b/.gitignore
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -0,0 +1,16 @@
+{
+  // === 格式化设置 ===
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": true,
+
+  // === ESLint 自动修正 ===
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit"
+  },
+
+  // === 让 VS Code 识别 Astro, JS, TS 文件中的 ESLint ===
+  "eslint.validate": ["javascript", "typescript", "astro"],
+
+  // === 自动检测 ESLint 配置文件路径 ===
+  "eslint.workingDirectories": [{ "mode": "auto" }]
+}
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -1,5 +1,12 @@
 // @ts-check
-import { defineConfig } from 'astro/config';
+import { defineConfig } from "astro/config";
+import tailwindcss from "@tailwindcss/vite";

 // https://astro.build/config
-export default defineConfig({});
+export default defineConfig({
+  // 🚀 サブディレクトリ配信用
+  base: "/my-company-site/",
+  vite: {
+    plugins: [tailwindcss()],
+  },
+});
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -0,0 +1,24 @@
+import js from "@eslint/js";
+import tseslint from "typescript-eslint";
+import astro from "eslint-plugin-astro";
+
+export default [
+  js.configs.recommended,
+  ...tseslint.configs.recommended,
+  ...astro.configs.recommended,
+  {
+    files: ["**/*.astro"],
+    languageOptions: {
+      parser: astro.parser,
+      parserOptions: {
+        extraFileExtensions: [".astro"],
+      },
+    },
+    rules: {
+      "no-unused-vars": "off",
+    },
+  },
+  {
+    ignores: ["node_modules", "dist"],
+  },
+];
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -3,12 +3,22 @@
  "type": "module",
  "version": "0.0.1",
  "scripts": {
-    "dev": "astro dev",
+    "dev": "astro dev --host",
    "build": "astro build",
    "preview": "astro preview",
    "astro": "astro"
  },
  "dependencies": {
-    "astro": "^5.15.1"
+    "@tailwindcss/vite": "^4.1.16",
+    "astro": "^5.15.1",
+    "tailwindcss": "^4.1.16"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.38.0",
+    "@typescript-eslint/parser": "^8.46.2",
+    "astro-eslint-parser": "^1.2.2",
+    "eslint": "^9.38.0",
+    "eslint-plugin-astro": "^1.4.0",
+    "typescript-eslint": "^8.46.2"
  }
-}
+}
--- a/public/images/[原始文件]/mmexport1766205956309.jpg
+++ b/public/images/[原始文件]/mmexport1766205956309.jpg
--- a/public/images/ceo.jpg
+++ b/public/images/ceo.jpg
--- a/public/images/cloud.jpg
+++ b/public/images/cloud.jpg
--- a/public/images/food-business.jpg
+++ b/public/images/food-business.jpg
--- a/public/images/hero-bg.png
+++ b/public/images/hero-bg.png
--- a/public/images/it-business.jpg
+++ b/public/images/it-business.jpg
--- a/public/images/logo.jpg
+++ b/public/images/logo.jpg
--- a/public/images/restaurant1.jpg
+++ b/public/images/restaurant1.jpg
--- a/public/images/restaurant2.jpg
+++ b/public/images/restaurant2.jpg
--- a/public/images/restaurant3.jpg
+++ b/public/images/restaurant3.jpg
--- a/public/images/system-dev.jpg
+++ b/public/images/system-dev.jpg
--- a/public/images/web-design.jpg
+++ b/public/images/web-design.jpg
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -0,0 +1,122 @@
+---
+import "../styles/global.css";
+
+const { title } = Astro.props;
+let currentYear = new Date().getFullYear();
+
+// 🔧 ここがポイント！NAS でのサブディレクトリ対応
+const base = import.meta.env.BASE_URL || "/";
+---
+
+<html lang="ja">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>{title}</title>
+  </head>
+
+  <body class="flex flex-col min-h-screen bg-gray-50 text-gray-800">
+    <!-- ヘッダー -->
+    <header
+      class="bg-white/95 backdrop-blur-sm border-b border-gray-200 sticky top-0 z-50 shadow-sm transition-all duration-300"
+    >
+      <div
+        class="max-w-7xl mx-auto flex items-center justify-between py-4 px-6 lg:px-10"
+      >
+        <!-- 会社ロゴ／社名 -->
+        <a
+          href={`${base}`}
+          class="flex items-center text-blue-700 font-extrabold text-xl sm:text-2xl md:text-3xl tracking-wide hover:text-blue-800 transition-colors"
+        >
+          <!-- ロゴ画像 -->
+          <img
+            src={`${base}images/logo.jpg`}
+            alt="HIYORI ロゴ"
+            class="w-10 h-10 sm:w-12 sm:h-12 object-contain mr-2"
+          />
+          <span>株式会社火和 HIYORI</span>
+        </a>
+
+        <!-- PC用ナビ -->
+        <nav
+          class="hidden md:flex space-x-10 text-gray-800 font-semibold text-base md:text-lg"
+        >
+          <a href={`${base}`} class="hover:text-blue-700 transition-colors"
+            >トップ</a
+          >
+          <a
+            href={`${base}about/`}
+            class="hover:text-blue-700 transition-colors">会社概要</a
+          >
+          <a href={`${base}it/`} class="hover:text-blue-700 transition-colors"
+            >IT事業部</a
+          >
+          <a href={`${base}food/`} class="hover:text-blue-700 transition-colors"
+            >飲食事業部</a
+          >
+          <a
+            href={`${base}contact/`}
+            class="hover:text-blue-700 transition-colors">お問い合わせ</a
+          >
+        </nav>
+
+        <!-- モバイル用ハンバーガー -->
+        <button
+          id="menu-toggle"
+          class="md:hidden text-gray-700 hover:text-blue-700 focus:outline-none"
+          aria-label="メニューを開く"
+        >
+          <svg
+            class="w-7 h-7"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            viewBox="0 0 24 24"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M4 6h16M4 12h16M4 18h16"></path>
+          </svg>
+        </button>
+      </div>
+
+      <!-- モバイルメニュー -->
+      <nav
+        id="mobile-menu"
+        class="hidden flex-col space-y-3 px-6 pb-4 text-base font-semibold bg-white border-t border-gray-200 md:hidden"
+      >
+        <a href={`${base}`} class="block hover:text-blue-700">トップ</a>
+        <a href={`${base}about/`} class="block hover:text-blue-700">会社概要</a>
+        <a href={`${base}it/`} class="block hover:text-blue-700">IT事業部</a>
+        <a href={`${base}food/`} class="block hover:text-blue-700">飲食事業部</a
+        >
+        <a href={`${base}contact/`} class="block hover:text-blue-700"
+          >お問い合わせ</a
+        >
+      </nav>
+    </header>
+
+    <!-- メインコンテンツ -->
+    <main class="flex-1">
+      <slot />
+    </main>
+
+    <!-- フッター -->
+    <footer class="bg-gray-800 text-gray-300 text-sm py-4 text-center">
+      © {currentYear} 202510新建ウェブプロジェクト株式会社 All Rights Reserved.
+    </footer>
+
+    <!-- スクリプト -->
+    <script>
+      const btn = document.getElementById("menu-toggle");
+      const menu = document.getElementById("mobile-menu");
+
+      btn?.addEventListener("click", () => {
+        if (menu) {
+          menu.classList.toggle("hidden");
+        }
+      });
+    </script>
+  </body>
+</html>
--- a/src/pages/about.astro
+++ b/src/pages/about.astro
@@ -0,0 +1,122 @@
+---
+import Layout from "../layouts/Layout.astro";
+---
+
+<Layout title="会社概要 - 202510新建ウェブプロジェクト株式会社">
+  <!-- Hero セクション -->
+  <section
+    class="relative bg-linear-to-br from-blue-600 to-blue-400 text-white py-24"
+  >
+    <div class="max-w-5xl mx-auto text-center px-6">
+      <h1 class="text-5xl sm:text-6xl font-extrabold mb-4 drop-shadow-lg">
+        会社概要
+      </h1>
+      <p class="text-xl text-blue-50">
+        テクノロジーと人の力で、より良い未来を創る
+      </p>
+    </div>
+
+    <!-- 下部の波 -->
+    <div class="absolute bottom-0 left-0 w-full overflow-hidden leading-none">
+      <svg
+        class="relative block w-full h-16 text-white"
+        xmlns="http://www.w3.org/2000/svg"
+        preserveAspectRatio="none"
+        viewBox="0 0 1200 120"
+      >
+        <path
+          d="M0,0V46.29c47.79,22.24,103.74,29.33,158,17.39,70.29-15.66,136.56-57.66,207-73.2C438.14-26,511.57,4.09,583,25.13S732.29,74.62,805,58.45C862.73,45.19,913.74,7.57,972,2.3c48.69-4.56,97.61,11.59,144,28.52V0Z"
+          opacity=".25"
+          fill="currentColor"></path>
+        <path
+          d="M0,0V15.81C43.42,36.94,91,51.58,137,52.07c63.39.64,127-19.29,190-33.81,104.26-24.16,208.86-22.2,312,7.14C708.59,51.59,811,113.9,915,111.38c62.73-1.53,125.09-28.05,188-48.35V0Z"
+          opacity=".5"
+          fill="currentColor"></path>
+        <path
+          d="M0,0V5.63C60,21.47,120,42.95,180,48.3c60,5.36,120-5.32,180-19.77C480,10.08,540,0,600,0s120,10.08,180,28.53c60,14.45,120,25.13,180,19.77,60-5.35,120-26.83,180-42.67V0Z"
+          fill="currentColor"></path>
+      </svg>
+    </div>
+  </section>
+
+  <!-- 理念セクション -->
+  <section class="max-w-6xl 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">
+      「株式会社火和
+      HIYORI（ひより）は、ITソリューションと飲食サービスを融合し、<br />
+      人々の暮らしに新しい価値と温かさを生み出す企業です。」<br />
+      火のような情熱・エネルギーが、和の心と調和して人や社会を温めるというイメージになります。<br
+      />
+      特に「火」が持つ強さと「和」が持つ優しさがバランスよく調和しており、情熱と調和で価値を作る企業にしたいと思います。
+    </p>
+  </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>
+        <img
+          src={`${import.meta.env.BASE_URL}images/ceo.jpg`}
+          alt="代表写真"
+          class="w-full h-80 object-cover rounded-lg shadow"
+        />
+      </div>
+      <div>
+        <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="mt-6 font-semibold text-gray-800">代表取締役</p>
+      </div>
+    </div>
+  </section>
+
+  <!-- 会社情報 -->
+  <section class="max-w-5xl mx-auto py-20 px-6">
+    <h2 class="text-4xl font-bold text-center text-gray-800 mb-12">会社情報</h2>
+
+    <div class="bg-white shadow rounded-lg overflow-hidden">
+      <table class="w-full text-left border-collapse text-lg">
+        <tbody>
+          <tr class="border-b border-gray-200">
+            <th class="bg-gray-100 w-40 px-6 py-4 font-medium text-gray-700"
+              >会社名</th
+            >
+            <td class="px-6 py-4 text-gray-700"> 株式会社火和 HIYORI </td>
+          </tr>
+          <tr class="border-b border-gray-200">
+            <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
+            >
+          </tr>
+          <tr class="border-b border-gray-200">
+            <th class="bg-gray-100 px-6 py-4 font-medium text-gray-700">設立</th
+            >
+            <td class="px-6 py-4 text-gray-700">2025年10月</td>
+          </tr>
+          <tr class="border-b border-gray-200">
+            <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>
+          </tr>
+          <tr>
+            <th class="bg-gray-100 px-6 py-4 font-medium text-gray-700"
+              >事業内容</th
+            >
+            <td class="px-6 py-4 text-gray-700">
+              ITソリューション事業・飲食事業
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </section>
+</Layout>
--- a/src/pages/contact.astro
+++ b/src/pages/contact.astro
@@ -0,0 +1,66 @@
+---
+import Layout from "../layouts/Layout.astro";
+---
+
+<Layout title="お問い合わせ - 202510新建ウェブプロジェクト株式会社">
+  <!-- Hero -->
+  <section
+    class="relative bg-linear-to-br from-blue-600 to-blue-400 text-white py-24 text-center"
+  >
+    <h1 class="text-4xl sm:text-5xl font-extrabold mb-4">お問い合わせ</h1>
+    <p class="text-blue-50">
+      お気軽にお問い合わせください。担当者より折り返しご連絡いたします。
+    </p>
+  </section>
+
+  <!-- フォーム -->
+  <section class="max-w-3xl mx-auto py-20 px-6">
+    <div class="bg-white shadow-lg rounded-lg p-8">
+      <form class="space-y-6">
+        <div>
+          <label for="name" class="block font-semibold text-gray-700 mb-2"
+            >お名前</label
+          >
+          <input
+            id="name"
+            type="text"
+            class="w-full border border-gray-300 rounded-md px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-300"
+            placeholder="山田 太郎"
+          />
+        </div>
+
+        <div>
+          <label for="email" class="block font-semibold text-gray-700 mb-2"
+            >メールアドレス</label
+          >
+          <input
+            id="email"
+            type="email"
+            class="w-full border border-gray-300 rounded-md px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-300"
+            placeholder="example@example.com"
+          />
+        </div>
+
+        <div>
+          <label for="message" class="block font-semibold text-gray-700 mb-2"
+            >お問い合わせ内容</label
+          >
+          <textarea
+            id="message"
+            rows="5"
+            class="w-full border border-gray-300 rounded-md px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-300"
+            placeholder="ご質問・ご相談内容を入力してください。"></textarea>
+        </div>
+
+        <div class="text-center">
+          <button
+            type="submit"
+            class="bg-blue-600 text-white font-semibold px-8 py-3 rounded-full hover:bg-blue-700 transition"
+          >
+            送信する
+          </button>
+        </div>
+      </form>
+    </div>
+  </section>
+</Layout>
--- a/src/pages/food.astro
+++ b/src/pages/food.astro
@@ -0,0 +1,74 @@
+---
+import Layout from "../layouts/Layout.astro";
+---
+
+<Layout title="飲食事業部 - 202510新建ウェブプロジェクト株式会社">
+  <!-- Hero -->
+  <section
+    class="relative bg-linear-to-br from-blue-600 to-blue-400 text-white py-24"
+  >
+    <div class="max-w-5xl mx-auto text-center px-6">
+      <h1 class="text-4xl sm:text-5xl font-extrabold mb-4">飲食事業部</h1>
+      <p class="text-lg text-blue-50">
+        「食」を通して笑顔を届ける。<br />
+        地域に愛される店舗運営を目指しています。
+      </p>
+    </div>
+  </section>
+
+  <!-- 店舗紹介 -->
+  <section class="max-w-6xl mx-auto py-20 px-6">
+    <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">店舗紹介</h2>
+
+    <div class="grid md:grid-cols-3 gap-10">
+      <div class="bg-white rounded-xl shadow hover:shadow-lg p-6 transition">
+        <img
+          src={`${import.meta.env.BASE_URL}images/restaurant1.jpg`}
+          alt="レストランA"
+          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 class="bg-white rounded-xl shadow hover:shadow-lg p-6 transition">
+        <img
+          src={`${import.meta.env.BASE_URL}images/restaurant2.jpg`}
+          alt="レストランB"
+          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 class="bg-white rounded-xl shadow hover:shadow-lg p-6 transition">
+        <img
+          src={`${import.meta.env.BASE_URL}images/restaurant3.jpg`}
+          alt="レストランC"
+          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>
+  </section>
+
+  <!-- アクセス -->
+  <section class="bg-gray-50 py-16 text-center">
+    <h2 class="text-3xl font-bold text-gray-800 mb-6">アクセス</h2>
+    <p class="text-gray-700 leading-relaxed">
+      東京都中央区〇〇1-2-3（最寄駅：東京駅より徒歩5分）<br />
+      営業時間：11:00〜22:00（定休日：水曜日）
+    </p>
+  </section>
+</Layout>
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,16 +1,97 @@
 ---
+import Layout from "../layouts/Layout.astro";
+const base = import.meta.env.BASE_URL || "/";
+---

---
+<Layout title="株式会社火和 HIYORI">
+  <!-- Heroセクション -->
+  <section
+    id="hero"
+    class="relative flex flex-col justify-center items-center text-center text-white h-[90vh] bg-cover bg-center"
+    style={`background-image: url('${import.meta.env.BASE_URL}images/hero-bg.png');`}
+  >
+    <!-- 半透明遮罩层（让文字清晰） -->
+    <div class="absolute inset-0 bg-black/50 backdrop-blur-sm"></div>

-<html lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-		<meta name="viewport" content="width=device-width" />
-		<meta name="generator" content={Astro.generator} />
-		<title>Astro</title>
-	</head>
-	<body>
-		<h1>Astro</h1>
-	</body>
-</html>
+    <!-- 文字和按钮 -->
+    <div class="relative z-10 max-w-4xl px-6">
+      <h1
+        class="text-5xl sm:text-6xl font-extrabold mb-8 leading-tight drop-shadow-[0_3px_10px_rgba(0,0,0,0.25)]"
+      >
+        テクノロジーと創造力で、<br />未来をデザインする。
+      </h1>
+
+      <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"
+      >
+        会社概要を見る →
+      </a>
+    </div>
+  </section>
+
+  <!-- 事業紹介 -->
+  <section class="max-w-6xl mx-auto px-6 py-24">
+    <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">事業内容</h2>
+
+    <div class="grid md:grid-cols-2 gap-10">
+      <!-- IT事業部 -->
+      <div
+        class="group bg-white/80 backdrop-blur-lg border border-gray-200 rounded-2xl p-8 shadow-md hover:shadow-2xl transition-all duration-500"
+      >
+        <img
+          src="/my-company-site/images/system-dev.jpg"
+          alt="IT事業部"
+          class="rounded-xl w-full h-56 object-cover mb-6 group-hover:scale-105 transition-transform duration-700"
+        />
+        <h3 class="text-2xl font-semibold text-blue-700 mb-4">IT事業部</h3>
+        <p class="text-gray-600 leading-relaxed mb-6">
+          システム開発・Web制作・クラウド導入支援など、DX推進をサポートします。
+        </p>
+        <a href={`${base}it/`} class="text-blue-600 font-medium hover:underline"
+          >詳しく見る →</a
+        >
+      </div>
+
+      <!-- 飲食事業部 -->
+      <div
+        class="group bg-white/80 backdrop-blur-lg border border-gray-200 rounded-2xl p-8 shadow-md hover:shadow-2xl transition-all duration-500"
+      >
+        <img
+          src={`${import.meta.env.BASE_URL}images/food-business.jpg`}
+          alt="飲食事業部"
+          class="rounded-xl w-full h-56 object-cover mb-6 group-hover:scale-105 transition-transform duration-700"
+        />
+        <h3 class="text-2xl font-semibold text-blue-700 mb-4">飲食事業部</h3>
+        <p class="text-gray-600 leading-relaxed mb-6">
+          地元食材を活かしたカフェ・レストラン経営で地域に笑顔を届けます。
+        </p>
+        <a
+          href={`${base}food/`}
+          class="text-blue-600 font-medium hover:underline">詳しく見る →</a
+        >
+      </div>
+    </div>
+  </section>
+
+  <!-- お問い合わせ -->
+  <section
+    class="bg-gradient-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">
+      サービス・採用・提携に関するご質問など、<br class="hidden sm:block" />
+      お気軽にお問い合わせください。
+    </p>
+    <a
+      href="/my-company-site/contact/"
+      class="inline-block mt-10 bg-white text-blue-700 font-semibold px-8 py-3 rounded-full shadow-lg hover:shadow-xl hover:bg-blue-50 transition-all duration-300 transform hover:-translate-y-1"
+    >
+      お問い合わせフォーム →
+    </a>
+  </section>
+</Layout>
--- a/src/pages/it.astro
+++ b/src/pages/it.astro
@@ -0,0 +1,84 @@
+---
+import Layout from "../layouts/Layout.astro";
+const base = import.meta.env.BASE_URL || "/";
+---
+
+<Layout title="IT事業部 - 202510新建ウェブプロジェクト株式会社">
+  <!-- Hero -->
+  <section
+    class="relative bg-linear-to-br from-blue-600 to-blue-400 text-white py-24"
+  >
+    <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 />
+        テクノロジーでお客様の課題を解決します。
+      </p>
+    </div>
+  </section>
+
+  <!-- サービス紹介 -->
+  <section class="max-w-6xl mx-auto py-20 px-6">
+    <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">
+      提供サービス
+    </h2>
+
+    <div class="grid md:grid-cols-3 gap-10">
+      <div
+        class="bg-white rounded-xl shadow hover:shadow-lg p-6 text-center transition"
+      >
+        <img
+          src={`${import.meta.env.BASE_URL}images/system-dev.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
+        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制作"
+          class="w-full h-40 object-cover rounded-lg mb-5"
+        />
+        <h3 class="text-xl font-semibold text-blue-700 mb-2">Web制作</h3>
+        <p class="text-gray-700 text-sm leading-relaxed">
+          ブランドを高める企業サイトやECサイトの設計・開発を行い、ユーザー体験を最適化します。
+        </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="クラウド・ITインフラ"
+          class="w-full h-40 object-cover rounded-lg mb-5"
+        />
+        <h3 class="text-xl font-semibold text-blue-700 mb-2">
+          クラウド・ITインフラ
+        </h3>
+        <p class="text-gray-700 text-sm leading-relaxed">
+          AWSやAzureを活用したクラウド環境設計や、セキュアなインフラ構築を支援します。
+        </p>
+      </div>
+    </div>
+  </section>
+
+  <!-- CTA -->
+  <section class="bg-blue-50 py-16 text-center">
+    <h2 class="text-2xl font-bold text-gray-800 mb-4">
+      ITに関するご相談はこちら
+    </h2>
+    <a
+      href={`${base}contact/`}
+      class="inline-block bg-blue-600 text-white font-semibold px-8 py-3 rounded-full hover:bg-blue-700 transition"
+      >お問い合わせ →</a
+    >
+  </section>
+</Layout>
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -0,0 +1,153 @@
+/* =========================================================
+   🌐 global.css
+   サイト全体の共通スタイル
+   （Tailwindと組み合わせて使用）
+   Designed for: 202510新建ウェブプロジェクト株式会社
+   ========================================================= */
+/* Tailwind 必须在最上方导入 */
+@import "tailwindcss";
+
+/* 🩵 フォント設定 */
+@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&family=Inter:wght@400;500;700&display=swap");
+
+html {
+  font-family: "Inter", "Noto Sans JP", sans-serif;
+  scroll-behavior: smooth;
+  color-scheme: light dark;
+}
+
+/* ✨ 背景と文字色のデフォルト */
+body {
+  background-color: #f8fafc; /* 灰白ベース */
+  color: #1e293b; /* 濃いグレー文字 */
+  line-height: 1.75;
+}
+
+/* 🧭 ナビゲーション共通設定 */
+header a {
+  transition: color 0.25s ease, border-bottom 0.25s ease;
+}
+
+header a:hover {
+  color: #2563eb; /* blue-600 */
+  border-bottom: 2px solid #2563eb;
+}
+
+/* 💫 フェードインアニメーション */
+.fade-in {
+  opacity: 0;
+  transform: translateY(20px);
+  animation: fadeInUp 0.8s ease forwards;
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* 🌈 ボタン共通スタイル */
+.btn-primary {
+  background: linear-gradient(135deg, #2563eb, #1e40af);
+  color: #fff;
+  font-weight: 500;
+  padding: 0.75rem 2rem;
+  border-radius: 9999px;
+  transition: all 0.3s ease;
+  box-shadow: 0 5px 15px rgba(37, 99, 235, 0.3);
+}
+
+.btn-primary:hover {
+  background: linear-gradient(135deg, #1d4ed8, #1e3a8a);
+  transform: translateY(-2px);
+  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.5);
+}
+
+/* 🔲 セクション共通デザイン */
+section {
+  scroll-margin-top: 80px;
+}
+
+section h2 {
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  text-align: center;
+  margin-bottom: 2rem;
+}
+
+section p {
+  max-width: 42rem;
+  margin: 0 auto;
+  text-align: center;
+  color: #475569; /* gray-600 */
+}
+
+/* Hero セクションの p を白色に */
+#hero p {
+  color: white !important;
+}
+
+/* 🧊 カードスタイル（ガラス風） */
+.card {
+  background: rgba(255, 255, 255, 0.85);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(226, 232, 240, 0.6);
+  border-radius: 1.5rem;
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
+  transition: all 0.4s ease;
+}
+
+.card:hover {
+  transform: translateY(-6px);
+  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
+}
+
+/* 📸 画像ホバー拡大 */
+.img-hover img {
+  transition: transform 0.6s ease;
+}
+
+.img-hover:hover img {
+  transform: scale(1.05);
+}
+
+/* ⚙️ スクロール時のふわっと出現（JSでclass追加） */
+.scroll-show {
+  opacity: 0;
+  transform: translateY(30px);
+  transition: all 0.8s ease;
+}
+
+.scroll-show.show {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/* 🩶 フッター */
+footer {
+  font-size: 0.9rem;
+  letter-spacing: 0.05em;
+  color: #cbd5e1; /* gray-300 */
+}
+
+/* ⚡ ヘッダーシャドウ */
+header {
+  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.08);
+  backdrop-filter: blur(10px);
+  background-color: rgba(255, 255, 255, 0.85);
+}
+
+/* 🧘 スマホ用調整 */
+@media (max-width: 768px) {
+  h1 {
+    font-size: 1.8rem;
+  }
+  .btn-primary {
+    padding: 0.6rem 1.5rem;
+  }
+}
--- a/update_nas.bat
+++ b/update_nas.bat
@@ -0,0 +1,55 @@
+@echo off
+setlocal enabledelayedexpansion
+
+rem =============================================
+rem ? Astro プロジェクトを NAS に自動更新するスクリプト
+rem =============================================
+
+rem === ? 設定 ===
+set NAS_PATH=\\192.168.0.193\web\my-company-site
+set PROJECT_PATH=%~dp0
+
+echo ---------------------------------------------
+echo ? Astro サイト自動デプロイ開始
+echo プロジェクト: %PROJECT_PATH%
+echo NAS 先: %NAS_PATH%
+echo ---------------------------------------------
+echo.
+
+rem === ? 古いビルドフォルダ削除 ===
+if exist "%PROJECT_PATH%dist" (
+    echo ? 旧 dist フォルダを削除中...
+    rmdir /s /q "%PROJECT_PATH%dist"
+)
+if exist "%PROJECT_PATH%.astro" (
+    echo ? 旧 .astro フォルダを削除中...
+    rmdir /s /q "%PROJECT_PATH%.astro"
+)
+
+rem === ?? 新しいビルドを作成 ===
+echo ?? ビルドを実行中...
+call npm run build
+if %errorlevel% neq 0 (
+    echo ? ビルドに失敗しました。処理を終了します。
+    pause
+    exit /b
+)
+echo ? ビルド完了！
+echo.
+
+rem === ? NAS へコピー ===
+echo ? NAS へファイルをコピー中...
+xcopy "%PROJECT_PATH%dist\*" "%NAS_PATH%\" /E /Y /I
+
+if %errorlevel% neq 0 (
+    echo ? NAS へのコピーに失敗しました。
+    pause
+    exit /b
+)
+
+echo ---------------------------------------------
+echo ? アップロード完了！
+echo ? アクセスURL: http://58.159.161.166/my-company-site/
+echo ---------------------------------------------
+pause
+endlocal