diff --git a/frontend/src/app/weather/page.tsx b/frontend/src/app/weather/page.tsx
index 9d8a6be..6b766fe 100644
--- a/frontend/src/app/weather/page.tsx
+++ b/frontend/src/app/weather/page.tsx
@@ -1,14 +1,15 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import {
-  LineChart, Line, BarChart, Bar, ComposedChart,
+  LineChart, Line, ComposedChart, Bar,
   XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer,
 } from 'recharts';
 import { api } from '@/lib/api';
 import Navbar from '@/components/Navbar';
-import { Cloud, Loader2, Sun, Droplets, Thermometer, Wind } from 'lucide-react';
+import { Cloud, Loader2, Sun, Droplets, Thermometer, Wind, Search } from 'lucide-react';
 
+// ─── 型定義 ───────────────────────────────────────
 interface MonthlyRecord {
   month: number;
   temp_mean_avg: number | null;
@@ -21,7 +22,6 @@ interface MonthlyRecord {
   cold_days: number;
   rainy_days: number;
 }
-
 interface AnnualSummary {
   temp_mean_avg: number | null;
   precip_total: number | null;
@@ -29,13 +29,11 @@ interface AnnualSummary {
   hot_days: number;
   cold_days: number;
 }
-
 interface SummaryResponse {
   year: number;
   monthly: MonthlyRecord[];
   annual: AnnualSummary;
 }
-
 interface DailyRecord {
   date: string;
   temp_mean: number | null;
@@ -47,23 +45,33 @@ interface DailyRecord {
   pressure_min: number | null;
 }
 
-const MONTH_LABELS = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
+// ─── ユーティリティ ───────────────────────────────
+const MONTH_LABELS = ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'];
 
 function fmt(val: number | null, digits = 1): string {
   return val == null ? '—' : val.toFixed(digits);
 }
-
-// null を含むグラフデータを安全に変換
-function toChartTemp(monthly: MonthlyRecord[]) {
-  return monthly.map((m) => ({
-    month: MONTH_LABELS[m.month - 1],
-    平均: m.temp_mean_avg,
-    最高: m.temp_max_avg,
-    最低: m.temp_min_avg,
-  }));
+function toIso(d: Date): string {
+  return d.toISOString().slice(0, 10);
+}
+// 2025-03-15 → 3/15
+function fmtAxisDate(dateStr: string): string {
+  const [, m, d] = dateStr.split('-');
+  return `${parseInt(m)}/${parseInt(d)}`;
+}
+// データ点数に応じたX軸ラベル間隔
+function calcInterval(count: number): number {
+  if (count <= 30)  return 2;   // 3日おき
+  if (count <= 90)  return 6;   // 週1
+  if (count <= 180) return 13;  // 2週おき
+  return 29;                    // 月1
 }
 
-function toChartPrecipSunshine(monthly: MonthlyRecord[]) {
+// 月別グラフ用変換
+function toMonthlyTemp(monthly: MonthlyRecord[]) {
+  return monthly.map((m) => ({ month: MONTH_LABELS[m.month - 1], 平均: m.temp_mean_avg, 最高: m.temp_max_avg, 最低: m.temp_min_avg }));
+}
+function toMonthlyPrecip(monthly: MonthlyRecord[]) {
   return monthly.map((m) => ({
     month: MONTH_LABELS[m.month - 1],
     降水量: m.precip_total != null ? Math.round(m.precip_total) : null,
@@ -71,43 +79,155 @@ function toChartPrecipSunshine(monthly: MonthlyRecord[]) {
   }));
 }
 
+// 期間集計
+function calcPeriodStats(records: DailyRecord[]) {
+  const temps = records.map((r) => r.temp_mean).filter((v): v is number => v != null);
+  const avgTemp = temps.length ? temps.reduce((a, b) => a + b, 0) / temps.length : null;
+  const totalPrecip = records.reduce((s, r) => s + (r.precip_mm ?? 0), 0);
+  const totalSunshine = records.reduce((s, r) => s + (r.sunshine_h ?? 0), 0);
+  const hotDays = records.filter((r) => r.temp_max != null && r.temp_max >= 35).length;
+  const coldDays = records.filter((r) => r.temp_min != null && r.temp_min < 0).length;
+  return { avgTemp, totalPrecip, totalSunshine, hotDays, coldDays };
+}
+
+// ─── Tooltip フォーマッター ───────────────────────
+const tempFmt = (v: unknown) => {
+  if (v == null || typeof v !== 'number') return '—';
+  return `${v.toFixed(1)}℃`;
+};
+const precipFmt = (v: unknown, name: unknown) => {
+  if (v == null || typeof v !== 'number') return '—';
+  return name === '降水量' ? `${v} mm` : `${v} h`;
+};
+
+// ─── 共通コンポーネント ───────────────────────────
+function StatCard({ icon, label, value }: { icon: React.ReactNode; label: string; value: React.ReactNode }) {
+  return (
+    <div className="bg-white rounded-lg shadow p-4">
+      <div className="flex items-center gap-1.5 mb-1">{icon}<p className="text-xs text-gray-500">{label}</p></div>
+      <p className="text-2xl font-bold text-gray-900">{value}</p>
+    </div>
+  );
+}
+
+function DailyTable({ records }: { records: DailyRecord[] }) {
+  return (
+    <div className="bg-white rounded-lg shadow overflow-hidden">
+      <div className="overflow-x-auto max-h-[520px] overflow-y-auto">
+        <table className="w-full text-sm">
+          <thead className="bg-gray-50 border-b border-gray-200 sticky top-0 z-10">
+            <tr>
+              {['日付','平均気温','最高','最低','日照h','降水mm','最大風速','最低気圧'].map((h) => (
+                <th key={h} className={`px-3 py-2.5 text-xs font-semibold text-gray-600 whitespace-nowrap ${h === '日付' ? 'text-left' : 'text-right'}`}>{h}</th>
+              ))}
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-gray-100">
+            {records.length === 0 ? (
+              <tr><td colSpan={8} className="px-3 py-8 text-center text-gray-400">データがありません</td></tr>
+            ) : records.map((r) => (
+              <tr key={r.date} className="hover:bg-gray-50">
+                <td className="px-3 py-1.5 font-medium text-gray-900 whitespace-nowrap">{r.date}</td>
+                <td className="px-3 py-1.5 text-right text-gray-700">{fmt(r.temp_mean)}℃</td>
+                <td className="px-3 py-1.5 text-right">
+                  <span className={r.temp_max != null && r.temp_max >= 35 ? 'text-red-500 font-medium' : 'text-gray-500'}>{fmt(r.temp_max)}℃</span>
+                </td>
+                <td className="px-3 py-1.5 text-right">
+                  <span className={r.temp_min != null && r.temp_min < 0 ? 'text-blue-500 font-medium' : 'text-gray-500'}>{fmt(r.temp_min)}℃</span>
+                </td>
+                <td className="px-3 py-1.5 text-right text-gray-700">{fmt(r.sunshine_h)}</td>
+                <td className="px-3 py-1.5 text-right">
+                  <span className={r.precip_mm != null && r.precip_mm >= 10 ? 'text-blue-600 font-medium' : 'text-gray-700'}>{fmt(r.precip_mm)}</span>
+                </td>
+                <td className="px-3 py-1.5 text-right text-gray-500">{fmt(r.wind_max)}</td>
+                <td className="px-3 py-1.5 text-right text-gray-500">{fmt(r.pressure_min, 0)}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+      {records.length > 0 && (
+        <div className="px-3 py-2 bg-gray-50 border-t border-gray-200 text-xs text-gray-400">
+          {records[0].date} 〜 {records[records.length - 1].date}　全{records.length}件
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ─── メインコンポーネント ─────────────────────────
 export default function WeatherPage() {
   const currentYear = new Date().getFullYear();
-  const [year, setYear] = useState(currentYear);
-  const [tab, setTab] = useState<'chart' | 'summary' | 'recent'>('chart');
 
+  // 表示モード
+  const [mode, setMode] = useState<'year' | 'period'>('year');
+
+  // ── 年別モード ──
+  const [year, setYear] = useState(currentYear);
+  const [yearTab, setYearTab] = useState<'chart' | 'summary' | 'recent'>('chart');
   const [summary, setSummary] = useState<SummaryResponse | null>(null);
   const [summaryLoading, setSummaryLoading] = useState(true);
-
   const [recentRecords, setRecentRecords] = useState<DailyRecord[]>([]);
   const [recentLoading, setRecentLoading] = useState(true);
 
+  // ── 期間指定モード ──
+  const defaultEnd   = toIso((() => { const d = new Date(); d.setDate(d.getDate() - 1); return d; })());
+  const defaultStart = toIso((() => { const d = new Date(); d.setMonth(d.getMonth() - 3); return d; })());
+  const [startDate, setStartDate] = useState(defaultStart);
+  const [endDate,   setEndDate]   = useState(defaultEnd);
+  const [periodTab, setPeriodTab] = useState<'chart' | 'list'>('chart');
+  const [periodRecords, setPeriodRecords] = useState<DailyRecord[]>([]);
+  const [periodLoading, setPeriodLoading] = useState(false);
+  const [periodFetched, setPeriodFetched] = useState(false);
+
+  // 年別データ取得
   useEffect(() => {
     setSummaryLoading(true);
     api.get(`/weather/summary/?year=${year}`)
       .then((res) => setSummary(res.data))
-      .catch((err) => console.error(err))
+      .catch(console.error)
       .finally(() => setSummaryLoading(false));
   }, [year]);
 
   useEffect(() => {
     setRecentLoading(true);
-    const end = new Date();
-    end.setDate(end.getDate() - 1);
-    const start = new Date(end);
-    start.setDate(start.getDate() - 13);
-    const fmtDate = (d: Date) => d.toISOString().slice(0, 10);
-    api.get(`/weather/records/?start=${fmtDate(start)}&end=${fmtDate(end)}`)
+    const end = new Date(); end.setDate(end.getDate() - 1);
+    const start = new Date(end); start.setDate(start.getDate() - 13);
+    api.get(`/weather/records/?start=${toIso(start)}&end=${toIso(end)}`)
       .then((res) => setRecentRecords([...res.data].reverse()))
-      .catch((err) => console.error(err))
+      .catch(console.error)
       .finally(() => setRecentLoading(false));
   }, []);
 
-  const years: number[] = [];
-  for (let y = currentYear; y >= 2016; y--) years.push(y);
+  // 期間指定データ取得
+  const fetchPeriod = useCallback(() => {
+    if (!startDate || !endDate) return;
+    setPeriodLoading(true);
+    api.get(`/weather/records/?start=${startDate}&end=${endDate}`)
+      .then((res) => { setPeriodRecords(res.data); setPeriodFetched(true); })
+      .catch(console.error)
+      .finally(() => setPeriodLoading(false));
+  }, [startDate, endDate]);
 
-  const tempData = summary ? toChartTemp(summary.monthly) : [];
-  const precipData = summary ? toChartPrecipSunshine(summary.monthly) : [];
+  const years = Array.from({ length: currentYear - 2015 }, (_, i) => currentYear - i);
+
+  // グラフデータ
+  const monthlyTemp   = summary ? toMonthlyTemp(summary.monthly) : [];
+  const monthlyPrecip = summary ? toMonthlyPrecip(summary.monthly) : [];
+
+  const periodTempData = periodRecords.map((r) => ({
+    date: r.date, label: fmtAxisDate(r.date),
+    平均: r.temp_mean, 最高: r.temp_max, 最低: r.temp_min,
+  }));
+  const periodPrecipData = periodRecords.map((r) => ({
+    date: r.date, label: fmtAxisDate(r.date),
+    降水量: r.precip_mm != null ? Math.round(r.precip_mm * 10) / 10 : null,
+    日照時間: r.sunshine_h != null ? Math.round(r.sunshine_h * 10) / 10 : null,
+  }));
+
+  const interval = calcInterval(periodRecords.length);
+  const showDot  = periodRecords.length <= 60;
+  const periodStats = periodFetched ? calcPeriodStats(periodRecords) : null;
 
   return (
     <div className="min-h-screen bg-gray-50">
@@ -120,309 +240,274 @@ export default function WeatherPage() {
             <Cloud className="h-6 w-6 text-sky-500" />
             <h1 className="text-2xl font-bold text-gray-900">気象データ</h1>
           </div>
-          <select
-            value={year}
-            onChange={(e) => setYear(Number(e.target.value))}
-            className="px-3 py-1.5 border border-gray-300 rounded-md text-sm"
-          >
-            {years.map((y) => (
-              <option key={y} value={y}>{y}年</option>
-            ))}
-          </select>
-        </div>
-
-        {/* 年間サマリーカード（常に表示） */}
-        {!summaryLoading && summary && (
-          <div className="grid grid-cols-2 sm:grid-cols-4 gap-3 mb-6">
-            <div className="bg-white rounded-lg shadow p-4">
-              <div className="flex items-center gap-1.5 mb-1">
-                <Thermometer className="h-4 w-4 text-orange-400" />
-                <p className="text-xs text-gray-500">年間平均気温</p>
-              </div>
-              <p className="text-2xl font-bold text-gray-900">
-                {fmt(summary.annual.temp_mean_avg)}<span className="text-sm font-normal text-gray-500 ml-1">℃</span>
-              </p>
-            </div>
-            <div className="bg-white rounded-lg shadow p-4">
-              <div className="flex items-center gap-1.5 mb-1">
-                <Droplets className="h-4 w-4 text-blue-400" />
-                <p className="text-xs text-gray-500">年間降水量</p>
-              </div>
-              <p className="text-2xl font-bold text-gray-900">
-                {fmt(summary.annual.precip_total, 0)}<span className="text-sm font-normal text-gray-500 ml-1">mm</span>
-              </p>
-            </div>
-            <div className="bg-white rounded-lg shadow p-4">
-              <div className="flex items-center gap-1.5 mb-1">
-                <Sun className="h-4 w-4 text-yellow-400" />
-                <p className="text-xs text-gray-500">年間日照時間</p>
-              </div>
-              <p className="text-2xl font-bold text-gray-900">
-                {fmt(summary.annual.sunshine_total, 0)}<span className="text-sm font-normal text-gray-500 ml-1">h</span>
-              </p>
-            </div>
-            <div className="bg-white rounded-lg shadow p-4">
-              <div className="flex items-center gap-1.5 mb-1">
-                <Wind className="h-4 w-4 text-gray-400" />
-                <p className="text-xs text-gray-500">猛暑日 / 冬日</p>
-              </div>
-              <p className="text-2xl font-bold text-gray-900">
-                {summary.annual.hot_days}<span className="text-sm font-normal text-red-400 ml-1">猛暑</span>
-                <span className="text-sm font-normal text-gray-400 mx-1">/</span>
-                {summary.annual.cold_days}<span className="text-sm font-normal text-blue-400 ml-1">冬</span>
-              </p>
-            </div>
-          </div>
-        )}
-
-        {/* タブ */}
-        <div className="flex border-b border-gray-200 mb-6">
-          {(['chart', 'summary', 'recent'] as const).map((t) => (
+          {/* モード切替 */}
+          <div className="flex rounded-lg border border-gray-300 overflow-hidden text-sm">
             <button
-              key={t}
-              onClick={() => setTab(t)}
-              className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
-                tab === t
-                  ? 'border-sky-500 text-sky-600'
-                  : 'border-transparent text-gray-500 hover:text-gray-700'
-              }`}
-            >
-              {t === 'chart' ? 'グラフ' : t === 'summary' ? '月別サマリー' : '直近14日'}
-            </button>
-          ))}
+              onClick={() => setMode('year')}
+              className={`px-4 py-1.5 transition-colors ${mode === 'year' ? 'bg-sky-500 text-white' : 'bg-white text-gray-600 hover:bg-gray-50'}`}
+            >年別集計</button>
+            <button
+              onClick={() => setMode('period')}
+              className={`px-4 py-1.5 transition-colors ${mode === 'period' ? 'bg-sky-500 text-white' : 'bg-white text-gray-600 hover:bg-gray-50'}`}
+            >期間指定</button>
+          </div>
         </div>
 
-        {/* ===== グラフタブ ===== */}
-        {tab === 'chart' && (
-          summaryLoading ? (
-            <div className="flex justify-center py-20">
-              <Loader2 className="h-6 w-6 animate-spin text-gray-400" />
+        {/* ════════════════════════════════════════
+            年別集計モード
+            ════════════════════════════════════════ */}
+        {mode === 'year' && (
+          <>
+            {/* 年セレクタ */}
+            <div className="flex items-center gap-3 mb-4">
+              <select
+                value={year}
+                onChange={(e) => setYear(Number(e.target.value))}
+                className="px-3 py-1.5 border border-gray-300 rounded-md text-sm"
+              >
+                {years.map((y) => <option key={y} value={y}>{y}年</option>)}
+              </select>
             </div>
-          ) : summary ? (
-            <div className="space-y-6">
 
-              {/* 気温グラフ */}
-              <div className="bg-white rounded-lg shadow p-5">
-                <h3 className="text-sm font-semibold text-gray-700 mb-4">月別気温（℃）</h3>
-                <ResponsiveContainer width="100%" height={280}>
-                  <LineChart data={tempData} margin={{ top: 5, right: 20, left: 0, bottom: 5 }}>
-                    <CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
-                    <XAxis dataKey="month" tick={{ fontSize: 12 }} />
-                    <YAxis
-                      tick={{ fontSize: 12 }}
-                      tickFormatter={(v) => `${v}℃`}
-                      domain={['auto', 'auto']}
-                    />
-                    <Tooltip
-                      formatter={(value: unknown) => {
-                        if (value == null || typeof value !== 'number') return '—';
-                        return `${value.toFixed(1)}℃`;
-                      }}
-                    />
-                    <Legend />
-                    <Line
-                      type="monotone"
-                      dataKey="最高"
-                      stroke="#f97316"
-                      strokeWidth={2}
-                      dot={{ r: 3 }}
-                      connectNulls
-                    />
-                    <Line
-                      type="monotone"
-                      dataKey="平均"
-                      stroke="#22c55e"
-                      strokeWidth={2.5}
-                      dot={{ r: 3 }}
-                      connectNulls
-                    />
-                    <Line
-                      type="monotone"
-                      dataKey="最低"
-                      stroke="#3b82f6"
-                      strokeWidth={2}
-                      dot={{ r: 3 }}
-                      connectNulls
-                    />
-                  </LineChart>
-                </ResponsiveContainer>
-              </div>
-
-              {/* 降水量・日照時間グラフ */}
-              <div className="bg-white rounded-lg shadow p-5">
-                <h3 className="text-sm font-semibold text-gray-700 mb-4">月別降水量（mm）・日照時間（h）</h3>
-                <ResponsiveContainer width="100%" height={280}>
-                  <ComposedChart data={precipData} margin={{ top: 5, right: 40, left: 0, bottom: 5 }}>
-                    <CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
-                    <XAxis dataKey="month" tick={{ fontSize: 12 }} />
-                    <YAxis
-                      yAxisId="precip"
-                      orientation="left"
-                      tick={{ fontSize: 12 }}
-                      tickFormatter={(v) => `${v}`}
-                      label={{ value: 'mm', position: 'insideTopLeft', offset: 5, fontSize: 11, fill: '#6b7280' }}
-                    />
-                    <YAxis
-                      yAxisId="sunshine"
-                      orientation="right"
-                      tick={{ fontSize: 12 }}
-                      tickFormatter={(v) => `${v}h`}
-                    />
-                    <Tooltip
-                      formatter={(value: unknown, name: unknown) => {
-                        if (value == null || typeof value !== 'number') return '—';
-                        return name === '降水量' ? `${value} mm` : `${value} h`;
-                      }}
-                    />
-                    <Legend />
-                    <Bar
-                      yAxisId="precip"
-                      dataKey="降水量"
-                      fill="#93c5fd"
-                      radius={[3, 3, 0, 0]}
-                    />
-                    <Line
-                      yAxisId="sunshine"
-                      type="monotone"
-                      dataKey="日照時間"
-                      stroke="#fbbf24"
-                      strokeWidth={2.5}
-                      dot={{ r: 3 }}
-                      connectNulls
-                    />
-                  </ComposedChart>
-                </ResponsiveContainer>
+            {/* 年間サマリーカード */}
+            {!summaryLoading && summary && (
+              <div className="grid grid-cols-2 sm:grid-cols-4 gap-3 mb-6">
+                <StatCard icon={<Thermometer className="h-4 w-4 text-orange-400" />} label="年間平均気温"
+                  value={<>{fmt(summary.annual.temp_mean_avg)}<span className="text-sm font-normal text-gray-500 ml-1">℃</span></>} />
+                <StatCard icon={<Droplets className="h-4 w-4 text-blue-400" />} label="年間降水量"
+                  value={<>{fmt(summary.annual.precip_total, 0)}<span className="text-sm font-normal text-gray-500 ml-1">mm</span></>} />
+                <StatCard icon={<Sun className="h-4 w-4 text-yellow-400" />} label="年間日照時間"
+                  value={<>{fmt(summary.annual.sunshine_total, 0)}<span className="text-sm font-normal text-gray-500 ml-1">h</span></>} />
+                <StatCard icon={<Wind className="h-4 w-4 text-gray-400" />} label="猛暑日 / 冬日"
+                  value={<>{summary.annual.hot_days}<span className="text-sm font-normal text-red-400 ml-1">猛暑</span><span className="text-sm font-normal text-gray-400 mx-1">/</span>{summary.annual.cold_days}<span className="text-sm font-normal text-blue-400 ml-1">冬</span></>} />
               </div>
+            )}
 
+            {/* タブ */}
+            <div className="flex border-b border-gray-200 mb-6">
+              {(['chart','summary','recent'] as const).map((t) => (
+                <button key={t} onClick={() => setYearTab(t)}
+                  className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${yearTab === t ? 'border-sky-500 text-sky-600' : 'border-transparent text-gray-500 hover:text-gray-700'}`}>
+                  {t === 'chart' ? 'グラフ' : t === 'summary' ? '月別サマリー' : '直近14日'}
+                </button>
+              ))}
             </div>
-          ) : (
-            <div className="py-20 text-center text-gray-500 text-sm">データの取得に失敗しました</div>
-          )
-        )}
 
-        {/* ===== 月別サマリー ===== */}
-        {tab === 'summary' && (
-          summaryLoading ? (
-            <div className="flex justify-center py-20">
-              <Loader2 className="h-6 w-6 animate-spin text-gray-400" />
-            </div>
-          ) : summary ? (
-            <div className="bg-white rounded-lg shadow overflow-hidden">
-              <div className="overflow-x-auto">
-                <table className="w-full text-sm">
-                  <thead className="bg-gray-50 border-b border-gray-200">
-                    <tr>
-                      <th className="px-3 py-2.5 text-left text-xs font-semibold text-gray-600">月</th>
-                      <th className="px-3 py-2.5 text-right text-xs font-semibold text-gray-600">平均気温</th>
-                      <th className="px-3 py-2.5 text-right text-xs font-semibold text-gray-600">最高(avg)</th>
-                      <th className="px-3 py-2.5 text-right text-xs font-semibold text-gray-600">最低(avg)</th>
-                      <th className="px-3 py-2.5 text-right text-xs font-semibold text-gray-600">日照h</th>
-                      <th className="px-3 py-2.5 text-right text-xs font-semibold text-gray-600">降水mm</th>
-                      <th className="px-3 py-2.5 text-right text-xs font-semibold text-gray-600 whitespace-nowrap">猛暑日</th>
-                      <th className="px-3 py-2.5 text-right text-xs font-semibold text-gray-600 whitespace-nowrap">冬日</th>
-                      <th className="px-3 py-2.5 text-right text-xs font-semibold text-gray-600 whitespace-nowrap">雨天日</th>
-                    </tr>
-                  </thead>
-                  <tbody className="divide-y divide-gray-100">
-                    {summary.monthly.map((m) => (
-                      <tr key={m.month} className="hover:bg-gray-50">
-                        <td className="px-3 py-2 font-medium text-gray-900">{MONTH_LABELS[m.month - 1]}</td>
-                        <td className="px-3 py-2 text-right text-gray-700">
-                          {m.temp_mean_avg == null ? '—' : (
-                            <span className={m.temp_mean_avg >= 25 ? 'text-orange-500 font-medium' : m.temp_mean_avg < 5 ? 'text-blue-500 font-medium' : ''}>
-                              {fmt(m.temp_mean_avg)}℃
-                            </span>
-                          )}
-                        </td>
-                        <td className="px-3 py-2 text-right text-gray-500">{fmt(m.temp_max_avg)}℃</td>
-                        <td className="px-3 py-2 text-right text-gray-500">{fmt(m.temp_min_avg)}℃</td>
-                        <td className="px-3 py-2 text-right text-gray-700">{fmt(m.sunshine_total, 0)}</td>
-                        <td className="px-3 py-2 text-right text-gray-700">{fmt(m.precip_total, 0)}</td>
-                        <td className="px-3 py-2 text-right">
-                          {m.hot_days > 0 ? <span className="text-red-500 font-medium">{m.hot_days}</span> : <span className="text-gray-300">0</span>}
-                        </td>
-                        <td className="px-3 py-2 text-right">
-                          {m.cold_days > 0 ? <span className="text-blue-500 font-medium">{m.cold_days}</span> : <span className="text-gray-300">0</span>}
-                        </td>
-                        <td className="px-3 py-2 text-right text-gray-600">{m.rainy_days}</td>
-                      </tr>
-                    ))}
-                  </tbody>
-                </table>
-              </div>
-              <div className="px-3 py-2 bg-gray-50 border-t border-gray-200 text-xs text-gray-400">
-                猛暑日: 最高気温 ≥ 35℃　冬日: 最低気温 &lt; 0℃　雨天日: 降水量 ≥ 1mm
-              </div>
-            </div>
-          ) : (
-            <div className="py-20 text-center text-gray-500 text-sm">データの取得に失敗しました</div>
-          )
-        )}
-
-        {/* ===== 直近14日 ===== */}
-        {tab === 'recent' && (
-          recentLoading ? (
-            <div className="flex justify-center py-20">
-              <Loader2 className="h-6 w-6 animate-spin text-gray-400" />
-            </div>
-          ) : (
-            <div className="bg-white rounded-lg shadow overflow-hidden">
-              <div className="overflow-x-auto">
-                <table className="w-full text-sm">
-                  <thead className="bg-gray-50 border-b border-gray-200">
-                    <tr>
-                      <th className="px-3 py-2.5 text-left text-xs font-semibold text-gray-600">日付</th>
-                      <th className="px-3 py-2.5 text-right text-xs font-semibold text-gray-600">平均気温</th>
-                      <th className="px-3 py-2.5 text-right text-xs font-semibold text-gray-600">最高</th>
-                      <th className="px-3 py-2.5 text-right text-xs font-semibold text-gray-600">最低</th>
-                      <th className="px-3 py-2.5 text-right text-xs font-semibold text-gray-600">日照h</th>
-                      <th className="px-3 py-2.5 text-right text-xs font-semibold text-gray-600">降水mm</th>
-                      <th className="px-3 py-2.5 text-right text-xs font-semibold text-gray-600">最大風速</th>
-                      <th className="px-3 py-2.5 text-right text-xs font-semibold text-gray-600">最低気圧</th>
-                    </tr>
-                  </thead>
-                  <tbody className="divide-y divide-gray-100">
-                    {recentRecords.length === 0 ? (
-                      <tr>
-                        <td colSpan={8} className="px-3 py-8 text-center text-gray-400">データがありません</td>
-                      </tr>
-                    ) : recentRecords.map((r) => (
-                      <tr key={r.date} className="hover:bg-gray-50">
-                        <td className="px-3 py-2 font-medium text-gray-900 whitespace-nowrap">{r.date}</td>
-                        <td className="px-3 py-2 text-right text-gray-700">{fmt(r.temp_mean)}℃</td>
-                        <td className="px-3 py-2 text-right">
-                          <span className={r.temp_max != null && r.temp_max >= 35 ? 'text-red-500 font-medium' : 'text-gray-500'}>
-                            {fmt(r.temp_max)}℃
-                          </span>
-                        </td>
-                        <td className="px-3 py-2 text-right">
-                          <span className={r.temp_min != null && r.temp_min < 0 ? 'text-blue-500 font-medium' : 'text-gray-500'}>
-                            {fmt(r.temp_min)}℃
-                          </span>
-                        </td>
-                        <td className="px-3 py-2 text-right text-gray-700">{fmt(r.sunshine_h)}</td>
-                        <td className="px-3 py-2 text-right">
-                          <span className={r.precip_mm != null && r.precip_mm >= 10 ? 'text-blue-600 font-medium' : 'text-gray-700'}>
-                            {fmt(r.precip_mm)}
-                          </span>
-                        </td>
-                        <td className="px-3 py-2 text-right text-gray-500">{fmt(r.wind_max)}</td>
-                        <td className="px-3 py-2 text-right text-gray-500">{fmt(r.pressure_min, 0)}</td>
-                      </tr>
-                    ))}
-                  </tbody>
-                </table>
-              </div>
-              {recentRecords.length > 0 && (
-                <div className="px-3 py-2 bg-gray-50 border-t border-gray-200 text-xs text-gray-400">
-                  最新: {recentRecords[0].date}　全{recentRecords.length}件表示
+            {/* グラフ */}
+            {yearTab === 'chart' && (summaryLoading
+              ? <div className="flex justify-center py-20"><Loader2 className="h-6 w-6 animate-spin text-gray-400" /></div>
+              : summary ? (
+                <div className="space-y-6">
+                  <ChartCard title="月別気温（℃）">
+                    <ResponsiveContainer width="100%" height={280}>
+                      <LineChart data={monthlyTemp} margin={{ top: 5, right: 20, left: 0, bottom: 5 }}>
+                        <CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
+                        <XAxis dataKey="month" tick={{ fontSize: 12 }} />
+                        <YAxis tick={{ fontSize: 12 }} tickFormatter={(v) => `${v}℃`} domain={['auto','auto']} />
+                        <Tooltip formatter={tempFmt} /><Legend />
+                        <Line type="monotone" dataKey="最高" stroke="#f97316" strokeWidth={2} dot={{ r: 3 }} connectNulls />
+                        <Line type="monotone" dataKey="平均" stroke="#22c55e" strokeWidth={2.5} dot={{ r: 3 }} connectNulls />
+                        <Line type="monotone" dataKey="最低" stroke="#3b82f6" strokeWidth={2} dot={{ r: 3 }} connectNulls />
+                      </LineChart>
+                    </ResponsiveContainer>
+                  </ChartCard>
+                  <ChartCard title="月別降水量（mm）・日照時間（h）">
+                    <ResponsiveContainer width="100%" height={280}>
+                      <ComposedChart data={monthlyPrecip} margin={{ top: 5, right: 40, left: 0, bottom: 5 }}>
+                        <CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
+                        <XAxis dataKey="month" tick={{ fontSize: 12 }} />
+                        <YAxis yAxisId="precip" orientation="left" tick={{ fontSize: 12 }} label={{ value: 'mm', position: 'insideTopLeft', offset: 5, fontSize: 11, fill: '#6b7280' }} />
+                        <YAxis yAxisId="sunshine" orientation="right" tick={{ fontSize: 12 }} tickFormatter={(v) => `${v}h`} />
+                        <Tooltip formatter={precipFmt} /><Legend />
+                        <Bar yAxisId="precip" dataKey="降水量" fill="#93c5fd" radius={[3,3,0,0]} />
+                        <Line yAxisId="sunshine" type="monotone" dataKey="日照時間" stroke="#fbbf24" strokeWidth={2.5} dot={{ r: 3 }} connectNulls />
+                      </ComposedChart>
+                    </ResponsiveContainer>
+                  </ChartCard>
                 </div>
-              )}
+              ) : <div className="py-20 text-center text-gray-500 text-sm">データの取得に失敗しました</div>
+            )}
+
+            {/* 月別サマリー */}
+            {yearTab === 'summary' && (summaryLoading
+              ? <div className="flex justify-center py-20"><Loader2 className="h-6 w-6 animate-spin text-gray-400" /></div>
+              : summary ? (
+                <div className="bg-white rounded-lg shadow overflow-hidden">
+                  <div className="overflow-x-auto">
+                    <table className="w-full text-sm">
+                      <thead className="bg-gray-50 border-b border-gray-200">
+                        <tr>
+                          {['月','平均気温','最高(avg)','最低(avg)','日照h','降水mm','猛暑日','冬日','雨天日'].map((h) => (
+                            <th key={h} className={`px-3 py-2.5 text-xs font-semibold text-gray-600 whitespace-nowrap ${h === '月' ? 'text-left' : 'text-right'}`}>{h}</th>
+                          ))}
+                        </tr>
+                      </thead>
+                      <tbody className="divide-y divide-gray-100">
+                        {summary.monthly.map((m) => (
+                          <tr key={m.month} className="hover:bg-gray-50">
+                            <td className="px-3 py-2 font-medium text-gray-900">{MONTH_LABELS[m.month - 1]}</td>
+                            <td className="px-3 py-2 text-right text-gray-700">
+                              {m.temp_mean_avg == null ? '—' : (
+                                <span className={m.temp_mean_avg >= 25 ? 'text-orange-500 font-medium' : m.temp_mean_avg < 5 ? 'text-blue-500 font-medium' : ''}>
+                                  {fmt(m.temp_mean_avg)}℃
+                                </span>
+                              )}
+                            </td>
+                            <td className="px-3 py-2 text-right text-gray-500">{fmt(m.temp_max_avg)}℃</td>
+                            <td className="px-3 py-2 text-right text-gray-500">{fmt(m.temp_min_avg)}℃</td>
+                            <td className="px-3 py-2 text-right text-gray-700">{fmt(m.sunshine_total, 0)}</td>
+                            <td className="px-3 py-2 text-right text-gray-700">{fmt(m.precip_total, 0)}</td>
+                            <td className="px-3 py-2 text-right">{m.hot_days > 0 ? <span className="text-red-500 font-medium">{m.hot_days}</span> : <span className="text-gray-300">0</span>}</td>
+                            <td className="px-3 py-2 text-right">{m.cold_days > 0 ? <span className="text-blue-500 font-medium">{m.cold_days}</span> : <span className="text-gray-300">0</span>}</td>
+                            <td className="px-3 py-2 text-right text-gray-600">{m.rainy_days}</td>
+                          </tr>
+                        ))}
+                      </tbody>
+                    </table>
+                  </div>
+                  <div className="px-3 py-2 bg-gray-50 border-t border-gray-200 text-xs text-gray-400">
+                    猛暑日: 最高気温 ≥ 35℃　冬日: 最低気温 &lt; 0℃　雨天日: 降水量 ≥ 1mm
+                  </div>
+                </div>
+              ) : <div className="py-20 text-center text-gray-500 text-sm">データの取得に失敗しました</div>
+            )}
+
+            {/* 直近14日 */}
+            {yearTab === 'recent' && (recentLoading
+              ? <div className="flex justify-center py-20"><Loader2 className="h-6 w-6 animate-spin text-gray-400" /></div>
+              : <DailyTable records={recentRecords} />
+            )}
+          </>
+        )}
+
+        {/* ════════════════════════════════════════
+            期間指定モード
+            ════════════════════════════════════════ */}
+        {mode === 'period' && (
+          <>
+            {/* 期間入力 */}
+            <div className="bg-white rounded-lg shadow p-4 mb-6 flex flex-wrap items-end gap-4">
+              <div>
+                <label className="block text-xs text-gray-500 mb-1">開始日</label>
+                <input
+                  type="date"
+                  value={startDate}
+                  max={endDate}
+                  min="2016-01-01"
+                  onChange={(e) => setStartDate(e.target.value)}
+                  className="px-3 py-1.5 border border-gray-300 rounded-md text-sm"
+                />
+              </div>
+              <div>
+                <label className="block text-xs text-gray-500 mb-1">終了日</label>
+                <input
+                  type="date"
+                  value={endDate}
+                  max={defaultEnd}
+                  min={startDate}
+                  onChange={(e) => setEndDate(e.target.value)}
+                  className="px-3 py-1.5 border border-gray-300 rounded-md text-sm"
+                />
+              </div>
+              <button
+                onClick={fetchPeriod}
+                disabled={periodLoading}
+                className="flex items-center gap-2 px-4 py-1.5 bg-sky-500 text-white rounded-md text-sm hover:bg-sky-600 disabled:opacity-50 transition-colors"
+              >
+                {periodLoading ? <Loader2 className="h-4 w-4 animate-spin" /> : <Search className="h-4 w-4" />}
+                表示
+              </button>
             </div>
-          )
+
+            {/* 期間集計カード */}
+            {periodStats && periodRecords.length > 0 && (
+              <div className="grid grid-cols-2 sm:grid-cols-4 gap-3 mb-6">
+                <StatCard icon={<Thermometer className="h-4 w-4 text-orange-400" />} label="期間平均気温"
+                  value={<>{fmt(periodStats.avgTemp)}<span className="text-sm font-normal text-gray-500 ml-1">℃</span></>} />
+                <StatCard icon={<Droplets className="h-4 w-4 text-blue-400" />} label="期間降水量"
+                  value={<>{fmt(periodStats.totalPrecip, 0)}<span className="text-sm font-normal text-gray-500 ml-1">mm</span></>} />
+                <StatCard icon={<Sun className="h-4 w-4 text-yellow-400" />} label="期間日照時間"
+                  value={<>{fmt(periodStats.totalSunshine, 0)}<span className="text-sm font-normal text-gray-500 ml-1">h</span></>} />
+                <StatCard icon={<Wind className="h-4 w-4 text-gray-400" />} label="猛暑日 / 冬日"
+                  value={<>{periodStats.hotDays}<span className="text-sm font-normal text-red-400 ml-1">猛暑</span><span className="text-sm font-normal text-gray-400 mx-1">/</span>{periodStats.coldDays}<span className="text-sm font-normal text-blue-400 ml-1">冬</span></>} />
+              </div>
+            )}
+
+            {/* タブ */}
+            {periodFetched && (
+              <>
+                <div className="flex border-b border-gray-200 mb-6">
+                  {(['chart','list'] as const).map((t) => (
+                    <button key={t} onClick={() => setPeriodTab(t)}
+                      className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${periodTab === t ? 'border-sky-500 text-sky-600' : 'border-transparent text-gray-500 hover:text-gray-700'}`}>
+                      {t === 'chart' ? 'グラフ' : '一覧'}
+                    </button>
+                  ))}
+                </div>
+
+                {/* 期間グラフ */}
+                {periodTab === 'chart' && (
+                  periodRecords.length === 0
+                    ? <div className="py-20 text-center text-gray-500 text-sm">指定期間にデータがありません</div>
+                    : (
+                      <div className="space-y-6">
+                        <ChartCard title={`気温（℃）　${startDate} 〜 ${endDate}`}>
+                          <ResponsiveContainer width="100%" height={300}>
+                            <LineChart data={periodTempData} margin={{ top: 5, right: 20, left: 0, bottom: 5 }}>
+                              <CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
+                              <XAxis dataKey="label" tick={{ fontSize: 11 }} interval={interval} />
+                              <YAxis tick={{ fontSize: 12 }} tickFormatter={(v) => `${v}℃`} domain={['auto','auto']} />
+                              <Tooltip labelFormatter={(_, payload) => payload?.[0]?.payload?.date ?? ''} formatter={tempFmt} />
+                              <Legend />
+                              <Line type="monotone" dataKey="最高" stroke="#f97316" strokeWidth={1.5} dot={showDot ? { r: 2 } : false} connectNulls />
+                              <Line type="monotone" dataKey="平均" stroke="#22c55e" strokeWidth={2} dot={showDot ? { r: 2 } : false} connectNulls />
+                              <Line type="monotone" dataKey="最低" stroke="#3b82f6" strokeWidth={1.5} dot={showDot ? { r: 2 } : false} connectNulls />
+                            </LineChart>
+                          </ResponsiveContainer>
+                        </ChartCard>
+                        <ChartCard title={`降水量（mm）・日照時間（h）　${startDate} 〜 ${endDate}`}>
+                          <ResponsiveContainer width="100%" height={280}>
+                            <ComposedChart data={periodPrecipData} margin={{ top: 5, right: 40, left: 0, bottom: 5 }}>
+                              <CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
+                              <XAxis dataKey="label" tick={{ fontSize: 11 }} interval={interval} />
+                              <YAxis yAxisId="precip" orientation="left" tick={{ fontSize: 12 }} label={{ value: 'mm', position: 'insideTopLeft', offset: 5, fontSize: 11, fill: '#6b7280' }} />
+                              <YAxis yAxisId="sunshine" orientation="right" tick={{ fontSize: 12 }} tickFormatter={(v) => `${v}h`} />
+                              <Tooltip labelFormatter={(_, payload) => payload?.[0]?.payload?.date ?? ''} formatter={precipFmt} />
+                              <Legend />
+                              <Bar yAxisId="precip" dataKey="降水量" fill="#93c5fd" radius={[2,2,0,0]} maxBarSize={12} />
+                              <Line yAxisId="sunshine" type="monotone" dataKey="日照時間" stroke="#fbbf24" strokeWidth={2} dot={showDot ? { r: 2 } : false} connectNulls />
+                            </ComposedChart>
+                          </ResponsiveContainer>
+                        </ChartCard>
+                      </div>
+                    )
+                )}
+
+                {/* 期間一覧 */}
+                {periodTab === 'list' && <DailyTable records={[...periodRecords].reverse()} />}
+              </>
+            )}
+
+            {/* 初期状態 */}
+            {!periodFetched && !periodLoading && (
+              <div className="py-20 text-center text-gray-400 text-sm">
+                開始日・終了日を選択して「表示」を押してください
+              </div>
+            )}
+          </>
         )}
 
       </div>
     </div>
   );
 }
+
+// ─── 小コンポーネント ─────────────────────────────
+function ChartCard({ title, children }: { title: string; children: React.ReactNode }) {
+  return (
+    <div className="bg-white rounded-lg shadow p-5">
+      <h3 className="text-sm font-semibold text-gray-700 mb-4">{title}</h3>
+      {children}
+    </div>
+  );
+}