diff --git a/App.js b/App.js
index 028e4cf..0c5f388 100644
--- a/App.js
+++ b/App.js
@@ -194,7 +194,6 @@ const Top = ({
       <Stack.Screen
         name="howto"
         options={{
-          title: "使い方",
           ...optionData,
         }}
       >
@@ -284,6 +283,14 @@ function MenuPage({
       >
         {(props) => <TrainBase {...props} />}
       </Stack.Screen>
+      <Stack.Screen
+        name="howto"
+        options={{
+          ...optionData,
+        }}
+      >
+        {(props) => <HowTo {...props} />}
+      </Stack.Screen>
     </Stack.Navigator>
   );
 }
diff --git a/Apps.js b/Apps.js
index fc05805..df1dd6b 100644
--- a/Apps.js
+++ b/Apps.js
@@ -148,7 +148,7 @@ export default function Apps({
       urlcache = event.url;
 
       if (event.url.includes("https://train.jr-shikoku.co.jp/usage.htm")) {
-        if (Platform.OS === "android") navigate("howto");
+        if (Platform.OS === "android") navigate("howto", { info: event.url });
         webview?.current.goBack();
         //Actions.howto();
       } else if (
@@ -224,6 +224,11 @@ export default function Apps({
         favoriteStation={favoriteStation}
         setFavoriteStation={setFavoriteStation}
         busAndTrainData={busAndTrainData}
+        navigate={navigate}
+        onExit={() => {
+          StationBoardAcSR.current?.setModalVisible();
+          navigate("Apps");
+        }}
       />
     </View>
   );
diff --git a/components/ActionSheetComponents/StationDeteilView.js b/components/ActionSheetComponents/StationDeteilView.js
index fbc4d17..b9dcc6e 100644
--- a/components/ActionSheetComponents/StationDeteilView.js
+++ b/components/ActionSheetComponents/StationDeteilView.js
@@ -29,6 +29,8 @@ export const StationDeteilView = (props) => {
     favoriteStation,
     setFavoriteStation,
     busAndTrainData,
+    navigate,
+    onExit,
   } = props;
   const [trainBus, setTrainBus] = useState();
   useEffect(() => {
@@ -41,7 +43,13 @@ export const StationDeteilView = (props) => {
     }
     setTrainBus(data[0]);
   }, [currentStation]);
-
+  const info =
+    currentStation &&
+    (currentStation[0].StationTimeTable.match(".pdf")
+      ? `https://docs.google.com/viewer?url=${encodeURI(
+          currentStation[0].StationTimeTable
+        )}&embedded=true`
+      : currentStation[0].StationTimeTable);
   return (
     <ActionSheet
       ref={StationBoardAcSR}
@@ -82,7 +90,14 @@ export const StationDeteilView = (props) => {
                 originalStationList={originalStationList}
                 favoriteStation={favoriteStation}
                 setFavoriteStation={setFavoriteStation}
-                oP={() => Linking.openURL(currentStation[0].StationTimeTable)}
+                oP={() => {
+                  navigate("howto", {
+                    info,
+                    onExit,
+                  });
+                  StationBoardAcSR.current?.hide();
+                }}
+                oLP={() => Linking.openURL(currentStation[0].StationTimeTable)}
               />
             </View>
           )}
@@ -99,6 +114,21 @@ export const StationDeteilView = (props) => {
             currentStation[0].JrHpUrl &&
             currentStation[0].StationNumber != "M12" && (
               <駅構内図 //高松/阿波池田&後免&須崎kounai.png児島例外/
+                oP={() => {
+                  navigate("howto", {
+                    info:
+                      currentStation[0].JrHpUrl.replace("/index.html", "/") +
+                      "/kounai_map.html",
+                    onExit,
+                  });
+                  StationBoardAcSR.current?.hide();
+                }}
+                oLP={() => {
+                  Linking.openURL(
+                    currentStation[0].JrHpUrl.replace("/index.html", "/") +
+                      "/kounai_map.html"
+                  );
+                }}
                 uri={currentStation[0].JrHpUrl.replace("/index.html", "/")}
               />
             )}
@@ -109,7 +139,14 @@ export const StationDeteilView = (props) => {
                   backgroundColor={"#AD7FA8"}
                   icon={<Foundation name="web" color="white" size={50} />}
                   flex={1}
-                  onPressButton={() =>
+                  onPressButton={() => {
+                    navigate("howto", {
+                      info: currentStation[0].JrHpUrl,
+                      onExit,
+                    });
+                    StationBoardAcSR.current?.hide();
+                  }}
+                  onLongPressButton={() =>
                     Linking.openURL(currentStation[0].JrHpUrl)
                   }
                 >
@@ -121,7 +158,14 @@ export const StationDeteilView = (props) => {
                   backgroundColor={"#8F5902"}
                   icon={<FontAwesome name="table" color="white" size={50} />}
                   flex={1}
-                  onPressButton={() =>
+                  onPressButton={() => {
+                    navigate("howto", {
+                      info,
+                      onExit,
+                    });
+                    StationBoardAcSR.current?.hide();
+                  }}
+                  onLongPressButton={() =>
                     Linking.openURL(currentStation[0].StationTimeTable)
                   }
                 >
@@ -145,7 +189,14 @@ export const StationDeteilView = (props) => {
                   backgroundColor={"#CE5C00"}
                   icon={<Ionicons name="bus" color="white" size={50} />}
                   flex={1}
-                  onPressButton={() => Linking.openURL(trainBus.address)}
+                  onPressButton={() => {
+                    navigate("howto", {
+                      info: trainBus.address,
+                      onExit,
+                    });
+                    StationBoardAcSR.current?.hide();
+                  }}
+                  onLongPressButton={() => Linking.openURL(trainBus.address)}
                 >
                   並行バス
                 </TicketBox>
@@ -312,7 +363,8 @@ const 駅構内図 = (props) => {
           alignItems: "center",
           margin: 2,
         }}
-        onPress={() => Linking.openURL(props.uri + "/kounai_map.html")}
+        onPress={props.oP}
+        onLongPress={props.oLP}
         //onPress={() => setOpen(!open)}
       >
         <View style={{ flex: 1 }} />
diff --git a/components/atom/TicketBox.js b/components/atom/TicketBox.js
index 6d34b95..8fc3a33 100644
--- a/components/atom/TicketBox.js
+++ b/components/atom/TicketBox.js
@@ -1,7 +1,14 @@
 import { TouchableOpacity, Text } from "react-native";
 
 export const TicketBox = (props) => {
-  const { icon, backgroundColor, flex, onPressButton, children } = props;
+  const {
+    icon,
+    backgroundColor,
+    flex,
+    onPressButton,
+    children,
+    onLongPressButton,
+  } = props;
   return (
     <TouchableOpacity
       style={{
@@ -14,6 +21,7 @@ export const TicketBox = (props) => {
         alignItems: "center",
       }}
       onPress={onPressButton}
+      onLongPress={onLongPressButton}
     >
       <Text style={{ color: "white", fontWeight: "bold", fontSize: 18 }}>
         {children}
diff --git a/components/trainMenu.js b/components/trainMenu.js
index ed6af21..3069e1d 100644
--- a/components/trainMenu.js
+++ b/components/trainMenu.js
@@ -58,7 +58,11 @@ export default function TrainMenu({
           backgroundColor={"#F89038"}
           icon="train-car"
           flex={1}
-          onPressButton={() => navigate("howto")}
+          onPressButton={() =>
+            navigate("howto", {
+              info: "https://train.jr-shikoku.co.jp/usage.htm",
+            })
+          }
         >
           使い方
         </UsefulBox>
diff --git a/components/駅名表/Sign.js b/components/駅名表/Sign.js
index 7316205..943226a 100644
--- a/components/駅名表/Sign.js
+++ b/components/駅名表/Sign.js
@@ -21,6 +21,7 @@ export default function Sign(props) {
     currentStation,
     originalStationList,
     oP,
+    oLP,
     favoriteStation,
     setFavoriteStation,
   } = props;
@@ -91,7 +92,7 @@ export default function Sign(props) {
   };
   const lottieRef = useRef();
   return (
-    <TouchableOpacity style={styleSheet.外枠} onPress={oP}>
+    <TouchableOpacity style={styleSheet.外枠} onPress={oP} onLongPress={oLP}>
       <StationNumberMaker currentStation={currentStation} />
       <StationNameArea currentStation={currentStation} />
       <TouchableOpacity
diff --git a/howto.js b/howto.js
index feb5211..57f0475 100644
--- a/howto.js
+++ b/howto.js
@@ -2,21 +2,22 @@ const WEBVIEW = "WEBVIEW";
 import React, { Component } from "react";
 import { StatusBar, View, TouchableOpacity, Text } from "react-native";
 import { WebView } from "react-native-webview";
-export default ({ navigation: { navigate } }) => (
-  <View style={styles.View}>
-    <WebView
-      useWebKit
-      source={{ uri: "https://train.jr-shikoku.co.jp/usage.htm" }}
-    />
-    <TouchableOpacity style={styles.touch} onPress={() => navigate("Apps")}>
-      <View style={{ flex: 1 }} />
-      <Text style={{ fontSize: 25, fontWeight: "bold", color: "white" }}>
-        閉じる
-      </Text>
-      <View style={{ flex: 1 }} />
-    </TouchableOpacity>
-  </View>
-);
+export default ({ navigation: { navigate }, route }) => {
+  const { info, onExit = () => navigate("Apps") } = route.params;
+
+  return (
+    <View style={styles.View}>
+      <WebView useWebKit source={{ uri: info }} />
+      <TouchableOpacity style={styles.touch} onPress={onExit}>
+        <View style={{ flex: 1 }} />
+        <Text style={{ fontSize: 25, fontWeight: "bold", color: "white" }}>
+          閉じる
+        </Text>
+        <View style={{ flex: 1 }} />
+      </TouchableOpacity>
+    </View>
+  );
+};
 const styles = {
   View: { height: "100%", backgroundColor: "#0099CC" },
   touch: {
diff --git a/menu.js b/menu.js
index 6653032..ff2b52d 100644
--- a/menu.js
+++ b/menu.js
@@ -218,6 +218,11 @@ export default function Menu(props) {
         favoriteStation={favoriteStation}
         setFavoriteStation={setFavoriteStation}
         busAndTrainData={busAndTrainData}
+        navigate={navigate}
+        onExit={() => {
+          StationBoardAcSR.current?.setModalVisible();
+          navigate("menu");
+        }}
       />
       <JRSTraInfo
         JRSTraInfoEXAcSR={JRSTraInfoEXAcSR}