diff --git a/src/components/Schedule.tsx b/src/components/Schedule.tsx
index 4db7360..33cdbbe 100644
--- a/src/components/Schedule.tsx
+++ b/src/components/Schedule.tsx
@@ -11,6 +11,7 @@ import { isMobile } from "react-device-detect";
 
 import { ScheduleType } from "@/types/schedule";
 import { schedules } from "@/db/schedule";
+import { useEffect, useState } from "react";
 
 interface GroupType {
   id: number;
@@ -27,96 +28,98 @@ interface TimelineDataType {
   itemProps?: { [key: string]: string };
 }
 
-export const Schedule = () => {
-  const sortedPlaceSchedule = schedules.sort((a, b) => {
-    // 先に 'place' プロパティを比較
-    const placeA = a.place.toLowerCase();
-    const placeB = b.place.toLowerCase();
-
-    if (placeA < placeB) {
-      return -1; // aをbの前に配置
-    }
-    if (placeA > placeB) {
-      return 1; // bをaの前に配置
-    }
-
-    // 'place' プロパティが同じ場合、'startDate' プロパティを比較
-    const startDateA = a.startDate.getTime();
-    const startDateB = b.startDate.getTime();
-
-    if (startDateA < startDateB) {
-      return -1; // aをbの前に配置
-    }
-    if (startDateA > startDateB) {
-      return 1; // bをaの前に配置
-    }
-
-    return 0; // 順序を変更しない
-  });
-  //placeが重複している要素をまとめた配列
-  const uniqueSortedPlaceSchedule: ScheduleType[] = sortedPlaceSchedule.filter(
-    (item, i, self) => {
-      // 同じ場所を持つアイテムを重複とみなす
-      return (
-        self.findIndex((otherItem) => otherItem.place === item.place) === i
-      );
-    },
-  );
+const sortedPlaceSchedule = schedules.sort((a, b) => {
+  // 先に 'place' プロパティを比較
+  const placeA = a.place.toLowerCase();
+  const placeB = b.place.toLowerCase();
 
-  const scheduleGroup: GroupType[] = uniqueSortedPlaceSchedule.map(
-    (items, i) => {
-      return {
-        id: i + 1,
-        title: items.place,
-        rightTitle: items.title,
-      };
-    },
-  );
+  if (placeA < placeB) {
+    return -1; // aをbの前に配置
+  }
+  if (placeA > placeB) {
+    return 1; // bをaの前に配置
+  }
+
+  // 'place' プロパティが同じ場合、'startDate' プロパティを比較
+  const startDateA = a.startDate.getTime();
+  const startDateB = b.startDate.getTime();
+
+  if (startDateA < startDateB) {
+    return -1; // aをbの前に配置
+  }
+  if (startDateA > startDateB) {
+    return 1; // bをaの前に配置
+  }
+
+  return 0; // 順序を変更しない
+});
+//placeが重複している要素をまとめた配列
+const uniqueSortedPlaceSchedule: ScheduleType[] = sortedPlaceSchedule.filter(
+  (item, i, self) => {
+    // 同じ場所を持つアイテムを重複とみなす
+    return self.findIndex((otherItem) => otherItem.place === item.place) === i;
+  },
+);
+
+const scheduleGroup: GroupType[] = uniqueSortedPlaceSchedule.map((items, i) => {
+  return {
+    id: i + 1,
+    title: items.place,
+    rightTitle: items.title,
+  };
+});
+
+const timelineData: TimelineDataType[] = sortedPlaceSchedule.map((item, i) => {
+  //constで条件演算子を使いgroupを割り振り
+  const before = i == 0 ? sortedPlaceSchedule[0] : sortedPlaceSchedule[i - 1];
+
+  let id: number;
+
+  if (before.place == item.place) {
+    id = before.group ? before.group : 1;
+  } else {
+    id = before.group ? before.group + 1 : 1;
+  }
+
+  item.group = id;
 
-  const timelineData: TimelineDataType[] = sortedPlaceSchedule.map(
-    (item, i) => {
-      //constで条件演算子を使いgroupを割り振り
-      const before =
-        i == 0 ? sortedPlaceSchedule[0] : sortedPlaceSchedule[i - 1];
-
-      let id: number;
-
-      if (before.place == item.place) {
-        id = before.group ? before.group : 1;
-      } else {
-        id = before.group ? before.group + 1 : 1;
-      }
-
-      item.group = id;
-
-      //時間修正
-      const fixedStartDate = new Date(
-        item.startDate.setMonth(item.startDate.getMonth() - 1),
-      );
-      const fixedEndDate = new Date(
-        item.endDate.setMonth(item.endDate.getMonth() - 1),
-      );
-      const epochStartDate = fixedStartDate.getTime();
-      const epochDndDate = fixedEndDate.getTime();
-      const epochDiff = epochDndDate - epochStartDate;
-      const groupId = item.group != null ? item.group : 1;
-      return {
-        id: i,
-        group: groupId,
-        title: item.title,
-        start_time: moment(epochStartDate).valueOf(),
-        end_time: moment(epochStartDate + epochDiff).valueOf(),
-        itemProps: { "date-tip": item.title },
-      };
-    },
+  //時間修正
+  const fixedStartDate = new Date(
+    item.startDate.setMonth(item.startDate.getMonth() - 1),
   );
+  const fixedEndDate = new Date(
+    item.endDate.setMonth(item.endDate.getMonth() - 1),
+  );
+  const epochStartDate = fixedStartDate.getTime();
+  const epochDndDate = fixedEndDate.getTime();
+  const epochDiff = epochDndDate - epochStartDate;
+  const groupId = item.group != null ? item.group : 1;
+  return {
+    id: i,
+    group: groupId,
+    title: item.title,
+    start_time: moment(epochStartDate).valueOf(),
+    end_time: moment(epochStartDate + epochDiff).valueOf(),
+    itemProps: { "date-tip": item.title },
+  };
+});
+
+export const Schedule = () => {
+  // 事前レンダリング時の日時とブラウザでレンダリング日時を一致させる。
+  const [MobileOrPc, setIsMobile] = useState<boolean>(false);
+
+  // useEffectを使いハイドレーション後にレンダリングがトリガーされるようにする。
+  useEffect(() => {
+    setIsMobile(isMobile);
+  }, []);
+
+  const fesScope = MobileOrPc
+    ? new Date(2023, 9, 27, 12).getTime()
+    : new Date(2023, 9, 27, 21).getTime();
+
   //UnixTimeが1月ずれているため9月にする
   const fesStart = new Date(2023, 9, 27, 9, 0);
   const fesEnd = new Date(2023, 9, 29, 21, 0);
-  const fesScope = isMobile
-    ? new Date(2023, 9, 27, 12).getTime()
-    : new Date(2023, 9, 27, 21).getTime();
-  console.log(isMobile);
   const minTime = fesStart.getTime();
   const maxTime = fesEnd.getTime();
   return (
@@ -124,13 +127,13 @@ export const Schedule = () => {
       <Timeline
         groups={scheduleGroup}
         items={timelineData}
-        sidebarWidth={isMobile ? 100 : 130}
+        sidebarWidth={MobileOrPc ? 100 : 130}
         canResize={false} //サイズ固定
         canMove={false} //位置固定
-        defaultTimeStart={moment(fesScope).add(isMobile ? -6 : -12, "hour")}
-        defaultTimeEnd={moment(fesScope).add(isMobile ? 6 : 12, "hour")}
-        minZoom={!isMobile ? 24 * 60 * 60 * 1000 : 3 * 60 * 60 * 1000}
-        maxZoom={!isMobile ? 24 * 60 * 60 * 1000 : 12 * 60 * 60 * 1000}
+        defaultTimeStart={moment(fesScope).add(MobileOrPc ? -6 : -12, "hour")}
+        defaultTimeEnd={moment(fesScope).add(MobileOrPc ? 6 : 12, "hour")}
+        minZoom={!MobileOrPc ? 24 * 60 * 60 * 1000 : 3 * 60 * 60 * 1000}
+        maxZoom={!MobileOrPc ? 24 * 60 * 60 * 1000 : 12 * 60 * 60 * 1000}
         minResizeWidth={100}
         onTimeChange={function (
           visibleTimeStart,
@@ -157,24 +160,14 @@ export const Schedule = () => {
         <TimelineHeaders>
           <SidebarHeader>
             {({ getRootProps }) => {
-              return (
-                <div
-                  {...getRootProps()}
-                  style={{
-                    color: "white",
-                    width: isMobile ? "100px" : "130px",
-                  }}
-                >
-                  場所
-                </div>
-              );
+              return <div {...getRootProps()}>Left</div>;
             }}
           </SidebarHeader>
           <DateHeader unit="primaryHeader" />
           <DateHeader />
         </TimelineHeaders>
       </Timeline>
-      <p>{isMobile ? "true" : "false"}</p>
+      <p suppressHydrationWarning={true}>{MobileOrPc ? "true" : "false"}</p>
     </>
   );
 };