fix AltAddMethod.mdx and related explanation

src/components/ja/mfa/common/AltAddMethod.mdx

@@ -3,6 +3,11 @@
   * @property {string} selection
   */}
 
+import { Image } from "astro:assets";
+import If from "@components/utils/If.astro"
+import ArrowOverlay from "@components/utils/ArrowOverlay.astro";
+import altAddMethodWindow from "./alt_add_method_window.png";
+
 <li>
   [多要素認証の設定ページ](https://mysignins.microsoft.com/security-info?domain_hint=univtokyo.onmicrosoft.com)にアクセスしてください．
 </li>
@@ -13,5 +18,10 @@
 <li>
   「サインイン方法の追加」欄で{props.selection}を押してください．
   {props.methodSupplement}
-  ![](./alt_add_method_window.png)
+  <If cond={props.selection === "「Microsoft Authenticator」"}>
+    <ArrowOverlay image={altAddMethodWindow} x={420} y={290} />
+    <Fragment slot="else">
+      <Image src={altAddMethodWindow} alt="" />
+    </Fragment>
+  </If>
 </li>

src/components/ja/mfa/ms_auth/index.mdx

@@ -29,7 +29,7 @@ import altApproved from "./alt_approved.png";
 
   <If cond={props.step === "alt"}>
     <Fragment>
-      <AltAddMethod selection="「認証アプリ」" />
+      <AltAddMethod selection="「Microsoft Authenticator」" />
       <li>
         Microsoft Authenticatorの設定をする画面が表示されるので，そのまま「次へ」を押してください．
         ![](./alt_next.png)

src/components/utils/ArrowOverlay.astro

@@ -0,0 +1,113 @@
+---
+import type { ImageMetadata } from "astro";
+import { Image } from "astro:assets";
+
+import If from "@components/utils/If.astro";
+
+type Props = {
+  image: ImageMetadata;
+  x: number | string;
+  y: number | string;
+  scale?: number;
+  reverse?: boolean;
+  vertical?: boolean;
+  color?: string;
+  class?: string;
+} & Record<string, any>;
+
+const {
+  image,
+  x,
+  y,
+  scale: rawScale = 1,
+  reverse = false,
+  vertical = false,
+  color = "#ff3333",
+  tailLength = 130,
+  headLength = 70,
+  tailWidth = 20,
+  headOverhang = 20,
+  ...props
+} = Astro.props;
+
+const defaultWidth = 1280,
+  defaultHeight = 720;
+
+const scale =
+  Math.max(image.width / defaultWidth, image.height / defaultHeight) * rawScale;
+
+function parseCoord(
+  rawX: string | number | null | undefined,
+  rawY: string | number | null | undefined,
+  width?: number,
+  height?: number
+): { x: number; y: number } | undefined {
+  const parse = (coord: number | string | null | undefined, max = 1) =>
+    typeof coord === "string" && coord.endsWith("%")
+      ? (Number(coord.substring(0, coord.length - 1)) * max) / 100
+      : Number(coord);
+
+  const x = parse(rawX, width),
+    y = parse(rawY, height);
+
+  return !Number.isNaN(x) && !Number.isNaN(y) ? { x, y } : undefined;
+}
+
+const pointAt = parseCoord(x, y, defaultWidth, defaultHeight);
+
+const xor = (a: boolean, b: boolean) => (a || b) && !(a && b);
+
+const tl = tailLength * (xor(reverse, vertical) ? -scale : scale);
+const tw = tailWidth * scale;
+const hl = headLength * (xor(reverse, vertical) ? -scale : scale);
+const ho = headOverhang * scale;
+
+const path =
+  pointAt !== undefined
+    ? [
+        `M ${pointAt.x} ${pointAt.y}`,
+        "l",
+        vertical ? `${-ho - tw / 2} ${-hl}` : `${-hl} ${-ho - tw / 2}`,
+        vertical ? "h" : "v",
+        ho,
+        vertical ? "v" : "h",
+        -tl,
+        vertical ? "h" : "v",
+        tw,
+        vertical ? "v" : "h",
+        tl,
+        vertical ? "h" : "v",
+        ho,
+        "Z",
+      ].join(" ")
+    : "";
+---
+
+<If cond={Boolean(path)}>
+  <div class:list={props.class}>
+    <Image src={image} alt={props.alt ?? ""} {...props} />
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox={`0 0 ${image.width} ${image.height}`}
+    >
+      <path d={path} fill={color} stroke="none"></path>
+    </svg>
+  </div>
+  <Fragment slot="else"
+    ><Image src={image} alt={props.alt ?? ""} {...props} /></Fragment
+  >
+</If>
+
+<style>
+  div {
+    position: relative;
+  }
+
+  div > svg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    max-width: 100%;
+    max-height: 100%;
+  }
+</style>