fix(links): repair the broken links on the Japanese site

docs/angular/overview.mdx

@@ -18,7 +18,7 @@ import DocsCards from '@components/global/DocsCards';
 
 ## Angular バージョンサポート
 
-Ionic Angular v9 は Angular バージョン 18 から 22 をサポートしています。サポートされているバージョンおよびサポートポリシーの詳細については、[Ionic Angular サポートポリシー](/docs/reference/support#ionic-angular)を参照してください。
+Ionic Angular v9 は Angular バージョン 18 から 22 をサポートしています。サポートされているバージョンおよびサポートポリシーの詳細については、[Ionic Angular サポートポリシー](/reference/support.mdx#ionic-angular)を参照してください。
 
 ## Angular Tooling
 
@@ -56,11 +56,11 @@ $ ionic serve █
   <p>Discover how to handle routing and navigation in Ionic Angular apps using the Angular Router.</p>
 </DocsCard>
 
-<DocsCard header="Components" href="/docs/components" icon="/icons/guide-components-icon.png">
+<DocsCard header="Components" href="/components" icon="/icons/guide-components-icon.png">
   <p>Explore Ionic's rich library of UI components for building beautiful apps.</p>
 </DocsCard>
 
-<DocsCard header="Theming" href="/docs/theming/basics" icon="/icons/guide-theming-icon.png">
+<DocsCard header="Theming" href="/theming/basics" icon="/icons/guide-theming-icon.png">
   <p>Learn how to customize the look and feel of your app with Ionic's powerful theming system.</p>
 </DocsCard>
 

docs/angular/quickstart.mdx

@@ -172,15 +172,15 @@ And the template, in the `home.page.html` file, uses those components:
 </ion-content>
 ```
 
-これにより、ヘッダーとスクロール可能なコンテンツエリアを持つページが作成されます。2 つ目のヘッダーは、コンテンツの先頭にあるときに iOS デバイスで表示される[折りたたみ可能な大きなタイトル](/docs/api/title.mdx#collapsible-large-titles)を示し、その後スクロールすると最初のヘッダーに小さいタイトルを表示するように縮小されます。
+これにより、ヘッダーとスクロール可能なコンテンツエリアを持つページが作成されます。2 つ目のヘッダーは、コンテンツの先頭にあるときに iOS デバイスで表示される[折りたたみ可能な大きなタイトル](/api/title.mdx#collapsible-large-titles)を示し、その後スクロールすると最初のヘッダーに小さいタイトルを表示するように縮小されます。
 
 :::tip[詳細を学ぶ]
-Ionic のレイアウトコンポーネントに関する詳細情報は、[Header](/docs/api/header.mdx)、[Toolbar](/docs/api/toolbar.mdx)、[Title](/docs/api/title.mdx)、および[Content](/docs/api/content.mdx)のドキュメントを参照してください。
+Ionic のレイアウトコンポーネントに関する詳細情報は、[Header](/api/header.mdx)、[Toolbar](/api/toolbar.mdx)、[Title](/api/title.mdx)、および[Content](/api/content.mdx)のドキュメントを参照してください。
 :::
 
 ## Ionic コンポーネントを追加
 
-より多くの Ionic UI コンポーネントで Home ページを強化できます。たとえば、`ion-content`の最後に[Button](/docs/api/button.mdx)を追加します：
+より多くの Ionic UI コンポーネントで Home ページを強化できます。たとえば、`ion-content`の最後に[Button](/api/button.mdx)を追加します：
 
 ```html title="src/app/home/home.page.html"
 <ion-content>
@@ -211,7 +211,7 @@ ionic generate page new
 
 A route will be automatically added to `app.routes.ts`.
 
-In `new.page.html`, you can add a [Back Button](/docs/api/back-button.mdx) to the [Toolbar](/docs/api/toolbar.mdx):
+In `new.page.html`, you can add a [Back Button](/api/back-button.mdx) to the [Toolbar](/api/toolbar.mdx):
 
 ```html title="src/app/new/new.page.html"
 <ion-header [translucent]="true">
@@ -257,7 +257,7 @@ import { RouterLink } from '@angular/router';
 ```
 
 :::info
-ナビゲーションは、Angular の Router サービスを使用して行うこともできます。詳細については、[Angular ナビゲーションのドキュメント](/docs/angular/navigation.mdx#navigating-to-different-routes)を参照してください。
+ナビゲーションは、Angular の Router サービスを使用して行うこともできます。詳細については、[Angular ナビゲーションのドキュメント](/angular/navigation.mdx#navigating-to-different-routes)を参照してください。
 :::
 
 ## 新しいページにアイコンを追加
@@ -301,7 +301,7 @@ export class NewPage implements OnInit {
 
 または、`app.component.ts`でアイコンを登録して、アプリ全体で使用することもできます。
 
-詳細については、[Icon のドキュメント](/docs/api/icon.mdx)および[Ionicons のドキュメント](https://ionic.io/ionicons/)を参照してください。
+詳細については、[Icon のドキュメント](/api/icon.mdx)および[Ionicons のドキュメント](https://ionic.io/ionicons/)を参照してください。
 
 ## コンポーネントメソッドを呼び出す
 
@@ -387,7 +387,7 @@ Ionic コンポーネントのメソッドを呼び出すには：
 1. コンポーネントの`ViewChild`参照を作成します
 2. コンポーネントインスタンスでメソッドを直接呼び出します
 
-各コンポーネントの利用可能なメソッドは、API ドキュメントの[Methods](/docs/api/content.mdx#methods)セクションで見つけることができます。
+各コンポーネントの利用可能なメソッドは、API ドキュメントの[Methods](/api/content.mdx#methods)セクションで見つけることができます。
 
 ## デバイスで実行
 
@@ -426,11 +426,11 @@ ionic cap open android
   <p>Angular Routerを使用してIonic Angularアプリでルーティングとナビゲーションを処理する方法を発見します。</p>
 </DocsCard>
 
-<DocsCard header="コンポーネント" href="/docs/components" icon="/icons/guide-components-icon.png">
+<DocsCard header="コンポーネント" href="/components" icon="/icons/guide-components-icon.png">
   <p>美しいアプリを構築するためのIonicの豊富なUIコンポーネントライブラリを探索します。</p>
 </DocsCard>
 
-<DocsCard header="テーマ設定" href="/docs/theming/basics" icon="/icons/guide-theming-icon.png">
+<DocsCard header="テーマ設定" href="/theming/basics" icon="/icons/guide-theming-icon.png">
   <p>Ionicの強力なテーマ設定システムを使用してアプリの外観と操作性をカスタマイズする方法を学びます。</p>
 </DocsCard>
 

docs/angular/your-first-app.mdx

@@ -36,7 +36,7 @@ Ionic 4 および Cordova をカバーした前のバージョンのガイドを
 
 - Ionic Framework の[UI コンポーネント](../components.mdx)を使用して、Web、iOS、Android で実行される 1 つの Angular ベースのコードベース。
 - Ionic の公式ネイティブアプリランタイムである[Capacitor](https://capacitorjs.com)を使用して、ネイティブ iOS および Android モバイルアプリとしてデプロイ。
-- Capacitor の[Camera](../native/camera.mdx)、[Filesystem](../native/filesystem.mdx)、[Preferences](../native/preferences.mdx) API によって提供される Photo Gallery 機能。
+- Capacitor の[Camera](/native/camera.mdx)、[Filesystem](/native/filesystem.mdx)、[Preferences](/native/preferences.mdx) API によって提供される Photo Gallery 機能。
 
 このガイドで参照されている[完全なアプリコード](https://github.com/ionic-team/tutorial-photo-gallery-angular)を GitHub で見つけてください。
 
@@ -98,7 +98,7 @@ npm install @capacitor/camera @capacitor/preferences @capacitor/filesystem
 
 ### PWA Elements
 
-[Camera API](../native/camera.mdx)を含む一部の Capacitor プラグインは、Ionic の[PWA Elements ライブラリ](https://github.com/ionic-team/pwa-elements)を介して Web ベースの機能と UI を提供します。
+[Camera API](/native/camera.mdx)を含む一部の Capacitor プラグインは、Ionic の[PWA Elements ライブラリ](https://github.com/ionic-team/pwa-elements)を介して Web ベースの機能と UI を提供します。
 
 これは別の依存関係なので、次にインストールします：
 

docs/api.mdx

@@ -12,6 +12,6 @@ import APIList from '@components/page/api/APIList';
   />
 </head>
 
-各 Ionic の [コンポーネント](/docs/components) は、1 つ以上の [カスタム要素](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) から構成されます。各カスタム要素は順番に、プロパティ、メソッド、イベント、および CSS カスタムプロパティを公開できます。
+各 Ionic の [コンポーネント](/components.mdx) は、1 つ以上の [カスタム要素](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) から構成されます。各カスタム要素は順番に、プロパティ、メソッド、イベント、および CSS カスタムプロパティを公開できます。
 
 <APIList sidebar={require('@site/sidebars.js').default} />

docs/api/app.mdx

@@ -27,7 +27,7 @@ AppはIonicアプリケーションのコンテナ要素です。1つのプロ
 - Android 端末のハードウェアバックボタンの動作をカスタマイズするための [Hardware Back Button Listeners](../developing/hardware-back-button) を使えます
 - Capacitor や Cordova でステータスバーをサポートし、ステータスバーをタップすることでビューの最上部にスクロールできるようになります。
 - テキスト入力が画面上のキーボードにかからないように、コンテンツをスクロールさせるスクロールアシストユーティリティが使えます。
-- Material Design モードでのボタン操作時の[Ripple effect](./リップルエフェクト) が使えます。
+- Material Design モードでのボタン操作時の[Ripple effect](./ripple-effect.mdx) が使えます。
 - Ionicアプリの使用感をよりネイティブなものにする、その他のタップやフォーカスのユーティリティが使えます。
 
 ## プログラムによるフォーカス

docs/api/col.mdx

@@ -27,7 +27,7 @@ Columnは、[Grid](./grid) システムのセルラーコンポーネントで
 
 ## Column Alignment
 
-デフォルトでは、カラムは行の高さ全体を埋めるように引き伸ばされます。カラムは[フレックスアイテム](https://developer.mozilla.org/en-US/docs/Glossary/Flex_Item)なので、この動作をカスタマイズするために、カラムに適用できるいくつかの[CSSクラス](/docs/layout/css-utilities#flex-item-properties) があります。
+デフォルトでは、カラムは行の高さ全体を埋めるように引き伸ばされます。カラムは[フレックスアイテム](https://developer.mozilla.org/en-US/docs/Glossary/Flex_Item)なので、この動作をカスタマイズするために、カラムに適用できるいくつかの[CSSクラス](/layout/css-utilities.mdx#flex-item-properties) があります。
 
 ## プロパティ
 

docs/api/content.mdx

@@ -25,7 +25,7 @@ Contentコンポーネントは、スクロール可能領域を制御するい
 使いやすいコンテンツ領域を提供します。
 1つのビューに表示できるコンテンツは1つだけです。
 
-Contentは、他の多くのIonicコンポーネントと同様に、 [CSS Utilities](/docs/layout/css-utilities) で提供されるグローバルスタイルを使用するか、CSSおよび使用可能な [CSS Custom Properties](#css-custom-properties) を使用して個別にスタイル設定することによって、`padding` や `margin` などを変更するようにカスタマイズできます。
+Contentは、他の多くのIonicコンポーネントと同様に、 [CSS Utilities](/layout/css-utilities.mdx) で提供されるグローバルスタイルを使用するか、CSSおよび使用可能な [CSS Custom Properties](#css-custom-properties) を使用して個別にスタイル設定することによって、`padding` や `margin` などを変更するようにカスタマイズできます。
 
 ## 基本的な使い方
 
@@ -97,7 +97,7 @@ import CSSProps from '@site/static/usage/v9/content/theming/css-properties/index
 
 ### Safe Area Padding
 
-The content component will not automatically apply padding to any of its sides to account for the [safe area](/docs/theming/advanced#safe-area-padding). This is because the content component is often used in conjunction with other components that apply their own padding, such as [headers](./header) and [footers](./footer). However, if the content component is being used on its own, it may be desired to apply padding to the safe area. This can be done through CSS by using the `--ion-safe-area-(dir)` variables described in [Application Variables](../theming/advanced.mdx#application-variables).
+The content component will not automatically apply padding to any of its sides to account for the [safe area](/theming/advanced.mdx#safe-area-padding). This is because the content component is often used in conjunction with other components that apply their own padding, such as [headers](./header) and [footers](./footer). However, if the content component is being used on its own, it may be desired to apply padding to the safe area. This can be done through CSS by using the `--ion-safe-area-(dir)` variables described in [Application Variables](../theming/advanced.mdx#application-variables).
 
 The most common use case for this is to apply padding to the top of the content to account for the status bar. This can be done by setting the `padding-top` property to the value of the `--ion-safe-area-top` variable.
 

docs/api/fab.mdx

@@ -47,7 +47,7 @@ import Positioning from '@site/static/usage/v9/fab/positioning/index.mdx';
 
 ### セーフエリア
 
-`ion-header`コンポーネントや`ion-footer`コンポーネントがない場合、fabはデバイスのノッチやステータスバー、その他のデバイスUIで覆われている可能性があります。このような場合、上下の [safe area](/docs/theming/advanced#safe-area-padding) は考慮されません。これは [`--ion-safe-area-(dir)`変数](/docs/theming/advanced#application-variables) を使って調整することができます。
+`ion-header`コンポーネントや`ion-footer`コンポーネントがない場合、fabはデバイスのノッチやステータスバー、その他のデバイスUIで覆われている可能性があります。このような場合、上下の [safe area](/theming/advanced.mdx#safe-area-padding) は考慮されません。これは [`--ion-safe-area-(dir)`変数](/theming/advanced.mdx#application-variables) を使って調整することができます。
 
 `vertical`を`"top"`に設定したfabを `ion-header` なしで使用する場合は、上マージンを設定する必要があります：
 

docs/api/infinite-scroll-content.mdx

@@ -13,7 +13,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 `ion-infinite-scroll-content` コンポーネントは、`ion-infinite-scroll` で使用されるデフォルトの子コンポーネントです。無限スクロールのスピナーが表示されます。このスピナーはプラットフォームに応じて最適に表示され、無限スクロールの状態に応じて外観が変化します。`loadingSpinner` and `loadingText` プロパティを設定することにより、既定値のスピナーを変更したり、テキストを追加することができます。
 
-詳細および使用方法については、[Infinite Scrollドキュメント](./infinite-scroll.mdx#infinite-scroll-content)を参照してください。
+詳細および使用方法については、[Infinite Scrollドキュメント](./infinite-scroll.mdx#custom-content)を参照してください。
 
 ## プロパティ
 

docs/api/input.mdx

@@ -107,7 +107,7 @@ import HelperError from '@site/static/usage/v9/input/helper-error/index.mdx';
 
 Input Counterは、Inputの下に表示されるテキストで、入力可能な文字数のうち、何文字が入力されたかをユーザーに通知するものです。カウンターを追加する場合、デフォルトの動作は、表示される値を `inputLength` / `maxLength` としてフォーマットすることです。この動作は、`counterFormatter`プロパティにフォーマッタ関数を渡すことでカスタマイズすることができます。
 
-`ion-item`の`counter`と`counterFormatter`プロパティは[Ionic 7で非推奨](/docs/api/input#using-the-modern-syntax)となり、代わりに`ion-input`で直接使用すべきです。
+`ion-item`の`counter`と`counterFormatter`プロパティは[Ionic 7で非推奨](https://ionic-docs-mt82qcyb0-ionic1.vercel.app/docs/v7/api/input#using-the-modern-syntax)となり、代わりに`ion-input`で直接使用すべきです。
 
 import Counter from '@site/static/usage/v9/input/counter/index.mdx';
 

docs/api/item.mdx

@@ -30,7 +30,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 ## 基本的な使い方
 
-アイテムはテキストを左揃えにし、テキストがアイテムより広い場合は折り返されます。この動作は、Ionic Frameworkが提供するCSSユーティリティを使用して変更することができます。以下の例では`.ion-text-nowrap`を使用しています。アイテム内のテキストを変換するために追加できる他のクラスについては、[CSSユーティリティのドキュメント](/docs/layout/css-utilities)を参照してください。
+アイテムはテキストを左揃えにし、テキストがアイテムより広い場合は折り返されます。この動作は、Ionic Frameworkが提供するCSSユーティリティを使用して変更することができます。以下の例では`.ion-text-nowrap`を使用しています。アイテム内のテキストを変換するために追加できる他のクラスについては、[CSSユーティリティのドキュメント](/layout/css-utilities.mdx)を参照してください。
 
 import Basic from '@site/static/usage/v9/item/basic/index.mdx';
 
@@ -253,7 +253,7 @@ import Actions from '@site/static/usage/v9/item/content-types/actions/index.mdx'
   text={
     <>
       Items should typically have no more than two controls. If you need more controls, consider adding the additional
-      controls in a <a href="useBaseUrl('api/modal')">Modal</a> that is accessible from the item.
+      controls in a <a href={useBaseUrl('api/modal')}>Modal</a> that is accessible from the item.
     </>
   }
   doText="Move additional controls to a submenu accessible from the item."

docs/api/refresher-content.mdx

@@ -13,7 +13,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 リフレッシュコンテンツには、プルトゥリフレッシュ時に表示するテキスト、アイコン、スピナーが含まれます。Ionicは、プラットフォームに基づいて、プルアイコンとリフレッシュスピナーを表示します。ただし、デフォルトのアイコン、スピナー、テキストは、リフレッシュの状態に応じてカスタマイズできます。
 
-使用例については、[Refresher](/docs/api/refresher)のドキュメントを参照してください。
+使用例については、[Refresher](/api/refresher.mdx)のドキュメントを参照してください。
 
 ## プロパティ