{
+ /** Ordered crumbs from root to current page. */
+ items: BreadcrumbItem[];
+ className?: string;
+}
+
+export function Breadcrumbs(props: BreadcrumbsProps): JSX.Element;
diff --git a/.agents/skills/dads-design/components/navigation/Breadcrumbs.jsx b/.agents/skills/dads-design/components/navigation/Breadcrumbs.jsx
new file mode 100644
index 00000000..d0efe13b
--- /dev/null
+++ b/.agents/skills/dads-design/components/navigation/Breadcrumbs.jsx
@@ -0,0 +1,35 @@
+import React from 'react';
+
+/**
+ * DADS Breadcrumbs — hierarchical location trail.
+ * Pass `items` as an array of { label, href } objects; the last
+ * item is rendered as the current page.
+ */
+export function Breadcrumbs(props) {
+ const { items = [], className = '', ...rest } = props;
+ return (
+
+ );
+}
diff --git a/.agents/skills/dads-design/components/navigation/Breadcrumbs.prompt.md b/.agents/skills/dads-design/components/navigation/Breadcrumbs.prompt.md
new file mode 100644
index 00000000..93899dd9
--- /dev/null
+++ b/.agents/skills/dads-design/components/navigation/Breadcrumbs.prompt.md
@@ -0,0 +1,11 @@
+Breadcrumbs — show where a page sits in the site hierarchy.
+
+```jsx
+
+```
+
+- The last item renders as `aria-current="page"`; earlier items are links separated by a chevron.
diff --git a/.agents/skills/dads-design/guidelines/brand-focus.html b/.agents/skills/dads-design/guidelines/brand-focus.html
new file mode 100644
index 00000000..ef20d32b
--- /dev/null
+++ b/.agents/skills/dads-design/guidelines/brand-focus.html
@@ -0,0 +1,23 @@
+
+
+
+
+
+
+
+
+
+
+ フォーカス時
+
+
+ 2px の黄色いリングを 4px の黒いアウトラインで挟む二重指標。コントラスト環境を問わず視認できます。
+
+
diff --git a/.agents/skills/dads-design/guidelines/brand-logo.html b/.agents/skills/dads-design/guidelines/brand-logo.html
new file mode 100644
index 00000000..fc5c96d7
--- /dev/null
+++ b/.agents/skills/dads-design/guidelines/brand-logo.html
@@ -0,0 +1,28 @@
+
+
+
+
+
+
+
+
+
+
+
+
デジタル庁DIGITAL AGENCY
+
+
+
デジタル庁DIGITAL AGENCY
+
50 — lightest900 = primary1200 — deepest
+
+
+
diff --git a/.agents/skills/dads-design/guidelines/color-neutral.html b/.agents/skills/dads-design/guidelines/color-neutral.html
new file mode 100644
index 00000000..5c8de4c0
--- /dev/null
+++ b/.agents/skills/dads-design/guidelines/color-neutral.html
@@ -0,0 +1,32 @@
+
+
+
+
+
+
+
+
+
+
+ White → 50 · 100 · 200 · 300 · 400 · 420 · 500 · 536 · 600 · 700 · 800 · 900 → Black
+
+
+
diff --git a/.agents/skills/dads-design/guidelines/color-semantic.html b/.agents/skills/dads-design/guidelines/color-semantic.html
new file mode 100644
index 00000000..7d859142
--- /dev/null
+++ b/.agents/skills/dads-design/guidelines/color-semantic.html
@@ -0,0 +1,39 @@
+
+
+
+
+
+
+
+
+
+
+
Success
+
+
#259d63 · #197a4b
+
+
Error
+
+
#ec0000 · #ce0000
+
+
Warning · Yellow
+
+
#b78f00 · #927200
+
+
Warning · Orange
+
+
#fb5b01 · #c74700
+
--link-visited
magenta-800
dns-16N-130テーブルやフォームの密度の高いUIに使用します
+ dns-14B-120注釈・補助テキスト
+ oln-16B-100ボタンラベル
+ mono-16N-150<meta charset="UTF-8">
+
+
diff --git a/.agents/skills/dads-design/guidelines/type-display.html b/.agents/skills/dads-design/guidelines/type-display.html
new file mode 100644
index 00000000..e9f02a76
--- /dev/null
+++ b/.agents/skills/dads-design/guidelines/type-display.html
@@ -0,0 +1,18 @@
+
+
+
+
+
+
+
+
+
+ dsp-64B-140デジタル庁
+ dsp-48B-140デジタル庁 Digital
+ dsp-48N-140デザインシステム
+
+
diff --git a/.agents/skills/dads-design/guidelines/type-standard-body.html b/.agents/skills/dads-design/guidelines/type-standard-body.html
new file mode 100644
index 00000000..97ef1646
--- /dev/null
+++ b/.agents/skills/dads-design/guidelines/type-standard-body.html
@@ -0,0 +1,18 @@
+
+
+
+
+
+
+
+
+
+ std-17N-170デジタル庁デザインシステムは、行政機関のウェブサイトやアプリケーションを、誰もが迷わず使えるようにするための共通基盤です。
+ std-16N-170アクセシビリティと一貫性を担保しながら、開発の効率も高めることを目的としています。
+ std-16N-175長文のコンテンツには、ゆとりのある行間を用いて読みやすさを確保します。
+
+
diff --git a/.agents/skills/dads-design/guidelines/type-standard-heading.html b/.agents/skills/dads-design/guidelines/type-standard-heading.html
new file mode 100644
index 00000000..ae792193
--- /dev/null
+++ b/.agents/skills/dads-design/guidelines/type-standard-heading.html
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+
+
+
+ std-45B-140行政サービス
+ std-36B-140行政サービスの基盤
+ std-28B-150誰一人取り残されない社会
+ std-22B-150人にやさしいデジタル化を、まんなかに。
+ std-18B-160アクセシビリティを最優先に設計する
+
+
diff --git a/.agents/skills/dads-design/lib/dads.jsx b/.agents/skills/dads-design/lib/dads.jsx
new file mode 100644
index 00000000..765caf35
--- /dev/null
+++ b/.agents/skills/dads-design/lib/dads.jsx
@@ -0,0 +1,155 @@
+/*
+ * DADS fallback component library.
+ * The Design System tab injects the compiled _ds_bundle.js and populates
+ * window.DADS_952a55. When a page is opened OUTSIDE that tab (direct serve,
+ * verifier iframe, standalone export) the bundle isn't injected — this file
+ * defines the same components so the page still renders. It NEVER overwrites
+ * the real bundle: every component is registered only if missing.
+ *
+ * Visuals come entirely from styles.css classes, so output is identical.
+ */
+(function () {
+ const NS = (window.DADS_952a55 = window.DADS_952a55 || {});
+ const def = (name, fn) => { if (!NS[name]) NS[name] = fn; };
+ const cx = (...a) => a.filter(Boolean).join(' ');
+
+ def('Button', function Button(props) {
+ const { variant = 'solid-fill', size = 'md', href, disabled = false, className = '', children, ...rest } = props;
+ const cls = cx('dads-btn', `dads-btn--${variant}`, `dads-btn--${size}`, className);
+ if (href && !disabled) return {children};
+ return ;
+ });
+
+ def('Input', function Input(props) {
+ const { blockSize = 'lg', isError = false, disabled = false, className = '', ...rest } = props;
+ return ;
+ });
+
+ def('Textarea', function Textarea(props) {
+ const { isError = false, disabled = false, rows = 4, className = '', ...rest } = props;
+ return ;
+ });
+
+ def('Select', function Select(props) {
+ const { blockSize = 'lg', isError = false, disabled = false, className = '', children, ...rest } = props;
+ return (
+
+
+
+
+ );
+ });
+
+ const choice = (type, boxCls) => function Choice(props) {
+ const { children, isError = false, disabled = false, className = '', ...rest } = props;
+ const input = (
+
+
+
+ );
+ if (!children) return input;
+ return ;
+ };
+ def('Checkbox', choice('checkbox', 'dads-checkbox'));
+ def('Radio', choice('radio', 'dads-radio'));
+
+ def('Label', function Label(props) {
+ const { children, htmlFor, requirement, className = '', ...rest } = props;
+ return (
+
+ );
+ });
+
+ const ICONS = {
+ info1: 'M12 2a10 10 0 100 20 10 10 0 000-20zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z',
+ info2: 'M12 2a10 10 0 100 20 10 10 0 000-20zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z',
+ success: 'M12 2a10 10 0 100 20 10 10 0 000-20zm-2 15l-5-5 1.4-1.4L10 14.2l7.6-7.6L19 8l-9 9z',
+ warning: 'M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z',
+ error: 'M12 2a10 10 0 100 20 10 10 0 000-20zm5 13.6L15.6 17 12 13.4 8.4 17 7 15.6 10.6 12 7 8.4 8.4 7 12 10.6 15.6 7 17 8.4 13.4 12 17 15.6z',
+ };
+ def('NotificationBanner', function NotificationBanner(props) {
+ const { type = 'info1', bannerStyle = 'standard', title, children, className = '', ...rest } = props;
+ return (
+
+
+ {children &&
{children}
}
+
+
+
+ {title}
+
+ {children}
+
+ );
+ });
+
+ def('Breadcrumbs', function Breadcrumbs(props) {
+ const { items = [], className = '', ...rest } = props;
+ return (
+
+ );
+ });
+
+ const MAIN = { gray: 'var(--color-solid-gray-800)', blue: 'var(--color-blue-700)', 'light-blue': 'var(--color-light-blue-800)', cyan: 'var(--color-cyan-900)', green: 'var(--color-green-800)', lime: 'var(--color-lime-900)', yellow: 'var(--color-yellow-1000)', orange: 'var(--color-orange-900)', red: 'var(--color-red-900)', magenta: 'var(--color-magenta-800)', purple: 'var(--color-purple-800)' };
+ const FILL = Object.assign({}, MAIN, { gray: 'var(--color-solid-gray-700)' });
+ const BG50 = { gray: 'var(--color-solid-gray-50)', blue: 'var(--color-blue-50)', 'light-blue': 'var(--color-light-blue-50)', cyan: 'var(--color-cyan-50)', green: 'var(--color-green-50)', lime: 'var(--color-lime-50)', yellow: 'var(--color-yellow-50)', orange: 'var(--color-orange-50)', red: 'var(--color-red-50)', magenta: 'var(--color-magenta-50)', purple: 'var(--color-purple-50)' };
+ def('ChipLabel', function ChipLabel(props) {
+ const { variant = 'text', color = 'gray', className = '', children, style, ...rest } = props;
+ let s = {};
+ if (variant === 'text') s = { color: MAIN[color] };
+ else if (variant === 'outline') s = { color: MAIN[color], borderColor: MAIN[color] };
+ else if (variant === 'filled-outline') s = { color: MAIN[color], borderColor: MAIN[color], background: BG50[color] };
+ else if (variant === 'fill') s = { background: FILL[color] };
+ return {children};
+ });
+
+ def('Table', function Table(props) {
+ const { caption, columns, rows, children, className = '', ...rest } = props;
+ if (children) return {caption && {caption}}{children}
;
+ return (
+
+ {caption && {caption}}
+ {columns.map((c, i) => | {c} | )}
+ {rows.map((row, ri) => {row.map((cell, ci) => | {cell} | )}
)}
+
+ );
+ });
+})();
diff --git a/.agents/skills/dads-design/readme.md b/.agents/skills/dads-design/readme.md
new file mode 100644
index 00000000..294b5331
--- /dev/null
+++ b/.agents/skills/dads-design/readme.md
@@ -0,0 +1,103 @@
+# デジタル庁デザインシステム — DADS
+
+A working design system distilled from the **Digital Agency Design System (DADS) v2** — the open, MIT-licensed design system that the Government of Japan's Digital Agency (デジタル庁) publishes for building accessible, consistent public-sector websites and applications.
+
+This project packages DADS's foundations (color, type, spacing, elevation), a set of React UI primitives, foundation specimen cards, and a full government-portal UI kit, so design agents can produce on-brand DADS interfaces and assets.
+
+> ⚠️ This is a faithful **recreation for design tooling**, not the official package. It is not affiliated with or endorsed by デジタル庁. For production, install the official packages below.
+
+## Sources
+
+Everything here was built by reading the Digital Agency's own open-source repositories. Explore them for deeper fidelity:
+
+- **Components (React):** https://github.com/digital-go-jp/design-system-example-components-react — the React + Tailwind reference implementation; the source of truth for every component's structure, states, and class logic.
+- **Design tokens:** https://github.com/digital-go-jp/design-tokens — `figma/tokens.json` is the canonical source for every color, font size, line-height, radius and shadow value used here.
+- **Tailwind theme plugin:** https://github.com/digital-go-jp/tailwind-theme-plugin / npm `@digital-go-jp/tailwind-theme-plugin` — maps the tokens to the `text-std-16N-170`-style utility names this system reproduces.
+- **HTML reference:** https://github.com/digital-go-jp/design-system-example-components-html — the original HTML/CSS port the React components derive from.
+- **Live docs & Storybook:** https://design.digital.go.jp/dads/ and https://design.digital.go.jp/dads/react/
+
+The official npm packages were **not** installed; values were transcribed from the repos above into plain CSS custom properties so the system is dependency-free.
+
+---
+
+## Content fundamentals
+
+DADS copy is **public-service Japanese**: plain, calm, and respectful, written so anyone can follow it regardless of background.
+
+- **Language & voice.** UI copy is Japanese. The tone is polite-neutral (です・ます調) without being stiff — e.g. *「人にやさしいデジタル化を、まんなかに。」*. It addresses the citizen directly but rarely uses overt "you"; it leads with the action (*「確認画面へ進む」「この内容で申請する」*).
+- **Plain language over jargon.** Procedures are named in everyday terms (*転入届、児童手当、住民票の写し*) and grouped by life event (引越し・住まい / 子育て・教育) rather than by which ministry owns them.
+- **Action-first labels.** Buttons are short imperative verbs ending in する/へ進む: *申請する、検索、お問い合わせ、ホームへ戻る*. Avoid vague labels like "OK".
+- **Honest, reassuring status.** Confirmations are explicit and give the user something to hold on to — a receipt number (*受付番号: 2024-0091*), what happens next, where to check. Errors say what went wrong and how to fix it, never blame.
+- **Required vs optional is always explicit.** Fields carry a 必須 (required) or 任意 (optional) badge; never leave it ambiguous.
+- **Casing & punctuation.** Latin acronyms stay upper-case (SDGs, DADS). Japanese full-width punctuation (、。「」（）) is used in body copy; numbers and dates are half-width, often monospaced (2024.06.01).
+- **No emoji.** The brand does not use emoji in product UI. Iconography carries visual meaning instead.
+- **Vibe.** Trustworthy, quiet, efficient. The opposite of marketing hype — closer to a well-run public counter than a startup landing page.
+
+---
+
+## Visual foundations
+
+The DADS look is **clean, high-contrast, and accessibility-first**. Nothing decorative competes with the task.
+
+- **Color.** Blue is the single brand ("Key") color; `blue-900` (#0017c1) drives every primary action, `blue-1000` powers links, `blue-1200` is the pressed state. Ten further primitive hues (cyan, green, lime, yellow, orange, red, magenta, purple, light-blue) each span a 13-step ramp (50→1200) but are used **sparingly** — for chips, tags, data and status, never as page decoration. Neutrals are a true-gray "Solid Gray" ramp; `solid-gray-536` (#767676) is the documented AA-contrast floor on white. Semantic colors come in two-step pairs (success / error / warning) so a fill and its text both clear contrast.
+- **Type.** Noto Sans JP (sans) and Noto Sans Mono (code). The scale is organised into five intents: **Display** (48–64px hero), **Standard** (the everyday 16–45px UI/body scale), **Dense** (compact tables/forms), **Oneline** (buttons & single-line labels, 100% line-height), and **Mono**. Body text runs long line-heights (170–175%) for Japanese legibility; only Bold (700) and Normal (400) weights are used. Tokens encode size+weight+line-height together, e.g. `std-16N-170`.
+- **Spacing & layout.** A 4px base grid. Generous whitespace, single-column reading measures (~760px for forms), centered max-width containers (~1160px). Layout is calm and predictable — content over chrome.
+- **Corners & cards.** Radii are restrained: 8px for controls (buttons, inputs, selects), 12px for cards, full for pills/avatars. Cards are white with a 1px `solid-gray-100` border and a soft elevation; they lift one elevation step on hover.
+- **Elevation.** Eight shadow levels, each a **pair** of drop shadows (a soft ambient 10%-black + a tighter key 30%-black) — subtle, never glowy. Used for raised cards, menus, and dialogs.
+- **Borders.** Fields use a 1px `solid-gray-600` border that darkens to black on hover; read-only fields switch to a **dashed** border; errors switch to `error-1` red. Dividers are `solid-gray-420`.
+- **The focus indicator (signature).** Every interactive element shows the same dual ring on keyboard focus: a 2px yellow (`yellow-300`) band wrapped by a 4px solid-black outline with a 2px offset. It is deliberately loud and must never be removed — it is the heart of DADS accessibility.
+- **Backgrounds.** Mostly flat white or `solid-gray-50`. The one permitted gradient is a quiet `blue-50 → white` hero wash. No textures, no patterns, no photographic full-bleed behind text.
+- **States.** Hover = darker fill **plus an underline** on buttons/links (color alone is never the only signal); press = the next-darker shade; disabled = `solid-gray-300` fill with `solid-gray-50` text and no pointer events. Solid buttons carry a 4px *double* transparent border — a DADS detail that yields a crisp inner edge.
+- **Motion.** Minimal and functional. Short (~0.08–0.15s) ease transitions on background and the accordion chevron rotation. No bounces, no parallax, no infinite loops. Respect `prefers-reduced-motion`.
+- **Imagery.** When photos appear (news/carousel banners) they are bright, warm, and informative; they never sit behind body text. Iconography does the heavy lifting.
+
+---
+
+## Iconography
+
+- **Style.** Solid (filled) glyphs on a 24×24 grid, single-color via `currentColor` so they inherit text color and the focus treatment. Simple, geometric, legible at small sizes — matching the Material-style line of the official set.
+- **Source.** The official components ship icons as **inline SVG ``s** inside each component (chevrons, the external-link mark, banner status icons, the accordion caret), not as an icon font or sprite. This system follows the same approach: icons are inline SVG drawn from the official path data where reused (select chevron, breadcrumb caret, accordion caret, external-link glyph), so they stay dependency-free and tint with `currentColor`.
+- **No emoji, no unicode-glyph icons.** Meaning is carried by drawn SVG, never by emoji or text symbols.
+- **If you need a broader set:** match the official feel with a **solid/filled** icon library at the same optical weight (e.g. Material Symbols – Filled). Flag any substitution to the user, and keep `currentColor` + 24px grid.
+- **Brand mark.** `assets/favicon.svg` is a simple blue+magenta stacked-bars mark used in the demo lockups. The real デジタル庁 wordmark is a government identity — the lockups here pair this placeholder mark with a `デジタル庁 / DIGITAL AGENCY` text wordmark. **Swap in the official logo** before any real-world use.
+
+---
+
+## What's in here (index)
+
+**Root**
+- `styles.css` — the single entry point consumers link. `@import`-only.
+- `readme.md` — this guide. `SKILL.md` — Agent-Skill manifest.
+
+**`tokens/`** — `colors.css` · `typography.css` (type scale + `text-*` utility classes) · `spacing.css` (spacing, radius, elevation, focus ring) · `fonts.css` (Noto Sans JP/Mono) · `base.css` (resets + focus).
+
+**`components/`** — React primitives + a shared `components.css` (shipped via `styles.css`). Namespace: `window.DADS_952a55`.
+- `forms/` — **Button, Input, Select, Checkbox, Radio, Textarea, Label**
+- `feedback/` — **NotificationBanner, StatusBadge**
+- `navigation/` — **Accordion, Breadcrumbs**
+- `data-display/` — **ChipLabel, Table**
+- Each directory has a `*.card.html` thumbnail registered to the **Components** group.
+
+**`guidelines/`** — foundation specimen cards for the Design System tab: color (key/neutral/semantic/accents/usage), type (display/headings/body/dense-mono), spacing (scale/radius/elevation), brand (logo/focus).
+
+**`ui_kits/gov-portal/`** — interactive government online-services portal (home, services, FAQ, 3-step application). See its `README.md`.
+
+**`assets/`** — `favicon.svg` (brand mark) and `img/` (sample banner photography).
+
+## Using it
+
+Link the stylesheet and use the tokens / classes directly, or consume the React components from the compiled bundle:
+
+```html
+
+```
+```jsx
+const { Button, Input, NotificationBanner } = window.DADS_952a55;
+
+```
+
+## Caveats
+
+- **Fonts** load from Google Fonts (Noto Sans JP / Noto Sans Mono). For production, self-host `.woff2` and replace `tokens/fonts.css` with real `@font-face` rules.
+- **Logo** is a placeholder mark — replace with the official デジタル庁 identity.
+- Values are transcribed from the open token repo; cross-check against the latest `figma/tokens.json` if precision matters.
diff --git a/.agents/skills/dads-design/styles.css b/.agents/skills/dads-design/styles.css
new file mode 100644
index 00000000..cc1cfc02
--- /dev/null
+++ b/.agents/skills/dads-design/styles.css
@@ -0,0 +1,12 @@
+/* =============================================================
+ デジタル庁デザインシステム — DADS
+ Global entry point. Consumers link THIS file only.
+ Keep this as @import lines exclusively.
+ ============================================================= */
+
+@import url('./tokens/fonts.css');
+@import url('./tokens/colors.css');
+@import url('./tokens/typography.css');
+@import url('./tokens/spacing.css');
+@import url('./tokens/base.css');
+@import url('./components/components.css');
diff --git a/.agents/skills/dads-design/tokens/base.css b/.agents/skills/dads-design/tokens/base.css
new file mode 100644
index 00000000..8375bb26
--- /dev/null
+++ b/.agents/skills/dads-design/tokens/base.css
@@ -0,0 +1,55 @@
+/* =============================================================
+ DADS — Base layer
+ Minimal, accessible defaults. DADS favours HTML/CSS-native
+ behaviour, so this stays light: typography defaults, a
+ consistent focus-visible treatment, and a few helpers.
+ ============================================================= */
+
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+}
+
+html {
+ -webkit-text-size-adjust: 100%;
+ text-size-adjust: 100%;
+}
+
+body {
+ margin: 0;
+ font-family: var(--font-sans);
+ font-size: 16px;
+ line-height: 1.7;
+ color: var(--text-body);
+ background: var(--surface-page);
+ -webkit-font-smoothing: antialiased;
+ text-rendering: optimizeLegibility;
+}
+
+/* The DADS focus indicator: yellow ring banded by a black
+ outline, applied consistently to every interactive element. */
+:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
+ outline: 4px solid var(--color-black);
+ outline-offset: 2px;
+ box-shadow: 0 0 0 2px var(--color-focus-yellow);
+ border-radius: var(--radius-4);
+}
+
+:where(h1, h2, h3, h4, h5, h6, p, figure) {
+ margin: 0;
+}
+
+::selection {
+ background: var(--color-blue-200);
+}
+
+/* ---- A couple of structural helpers reused across cards ---- */
+.dads-stack {
+ display: flex;
+ flex-direction: column;
+}
+.dads-row {
+ display: flex;
+ align-items: center;
+}
diff --git a/.agents/skills/dads-design/tokens/colors.css b/.agents/skills/dads-design/tokens/colors.css
new file mode 100644
index 00000000..56055dcf
--- /dev/null
+++ b/.agents/skills/dads-design/tokens/colors.css
@@ -0,0 +1,224 @@
+/* =============================================================
+ DADS — Color tokens
+ Source: digital-go-jp/design-tokens (figma/tokens.json)
+ Primitive scales → Semantic aliases → Usage aliases
+ ============================================================= */
+
+:root {
+ /* ---- Primitive · Blue (the Key / brand color) ---- */
+ --color-blue-50: #e8f1fe;
+ --color-blue-100: #d9e6ff;
+ --color-blue-200: #c5d7fb;
+ --color-blue-300: #9db7f9;
+ --color-blue-400: #7096f8;
+ --color-blue-500: #4979f5;
+ --color-blue-600: #3460fb;
+ --color-blue-700: #264af4;
+ --color-blue-800: #0031d8;
+ --color-blue-900: #0017c1;
+ --color-blue-1000: #00118f;
+ --color-blue-1100: #000071;
+ --color-blue-1200: #000060;
+
+ /* ---- Primitive · Light Blue ---- */
+ --color-light-blue-50: #f0f9ff;
+ --color-light-blue-100: #dcf0ff;
+ --color-light-blue-200: #c0e4ff;
+ --color-light-blue-300: #97d3ff;
+ --color-light-blue-400: #57b8ff;
+ --color-light-blue-500: #39abff;
+ --color-light-blue-600: #008bf2;
+ --color-light-blue-700: #0877d7;
+ --color-light-blue-800: #0066be;
+ --color-light-blue-900: #0055ad;
+ --color-light-blue-1000: #00428c;
+ --color-light-blue-1100: #00316a;
+ --color-light-blue-1200: #00234b;
+
+ /* ---- Primitive · Cyan ---- */
+ --color-cyan-50: #e9f7f9;
+ --color-cyan-100: #c8f8ff;
+ --color-cyan-200: #99f2ff;
+ --color-cyan-300: #79e2f2;
+ --color-cyan-400: #2bc8e4;
+ --color-cyan-500: #01b7d6;
+ --color-cyan-600: #00a3bf;
+ --color-cyan-700: #008da6;
+ --color-cyan-800: #008299;
+ --color-cyan-900: #006f83;
+ --color-cyan-1000: #006173;
+ --color-cyan-1100: #004c59;
+ --color-cyan-1200: #003741;
+
+ /* ---- Primitive · Green ---- */
+ --color-green-50: #e6f5ec;
+ --color-green-100: #c2e5d1;
+ --color-green-200: #9bd4b5;
+ --color-green-300: #71c598;
+ --color-green-400: #51b883;
+ --color-green-500: #2cac6e;
+ --color-green-600: #259d63;
+ --color-green-700: #1d8b56;
+ --color-green-800: #197a4b;
+ --color-green-900: #115a36;
+ --color-green-1000: #0c472a;
+ --color-green-1100: #08351f;
+ --color-green-1200: #032213;
+
+ /* ---- Primitive · Lime ---- */
+ --color-lime-50: #ebfad9;
+ --color-lime-100: #d0f5a2;
+ --color-lime-200: #c0f354;
+ --color-lime-300: #ade830;
+ --color-lime-400: #9ddd15;
+ --color-lime-500: #8cc80c;
+ --color-lime-600: #7eb40d;
+ --color-lime-700: #6fa104;
+ --color-lime-800: #618e00;
+ --color-lime-900: #507500;
+ --color-lime-1000: #3e5a00;
+ --color-lime-1100: #2c4100;
+ --color-lime-1200: #1e2d00;
+
+ /* ---- Primitive · Yellow ---- */
+ --color-yellow-50: #fbf5e0;
+ --color-yellow-100: #fff0b3;
+ --color-yellow-200: #ffe380;
+ --color-yellow-300: #ffd43d;
+ --color-yellow-400: #ffc700;
+ --color-yellow-500: #ebb700;
+ --color-yellow-600: #d2a400;
+ --color-yellow-700: #b78f00;
+ --color-yellow-800: #a58000;
+ --color-yellow-900: #927200;
+ --color-yellow-1000: #806300;
+ --color-yellow-1100: #6e5600;
+ --color-yellow-1200: #604b00;
+
+ /* ---- Primitive · Orange ---- */
+ --color-orange-50: #ffeee2;
+ --color-orange-100: #ffdfca;
+ --color-orange-200: #ffc199;
+ --color-orange-300: #ffa66d;
+ --color-orange-400: #ff8d44;
+ --color-orange-500: #ff7628;
+ --color-orange-600: #fb5b01;
+ --color-orange-700: #e25100;
+ --color-orange-800: #c74700;
+ --color-orange-900: #ac3e00;
+ --color-orange-1000: #8b3200;
+ --color-orange-1100: #6d2700;
+ --color-orange-1200: #541e00;
+
+ /* ---- Primitive · Red ---- */
+ --color-red-50: #fdeeee;
+ --color-red-100: #ffdada;
+ --color-red-200: #ffbbbb;
+ --color-red-300: #ff9696;
+ --color-red-400: #ff7171;
+ --color-red-500: #ff5454;
+ --color-red-600: #fe3939;
+ --color-red-700: #fa0000;
+ --color-red-800: #ec0000;
+ --color-red-900: #ce0000;
+ --color-red-1000: #a90000;
+ --color-red-1100: #850000;
+ --color-red-1200: #620000;
+
+ /* ---- Primitive · Magenta ---- */
+ --color-magenta-50: #f3e5f4;
+ --color-magenta-100: #ffd0ff;
+ --color-magenta-200: #ffaeff;
+ --color-magenta-300: #ff8eff;
+ --color-magenta-400: #f661f6;
+ --color-magenta-500: #f137f1;
+ --color-magenta-600: #db00db;
+ --color-magenta-700: #c000c0;
+ --color-magenta-800: #aa00aa;
+ --color-magenta-900: #8b008b;
+ --color-magenta-1000: #6c006c;
+ --color-magenta-1100: #500050;
+ --color-magenta-1200: #3b003b;
+
+ /* ---- Primitive · Purple ---- */
+ --color-purple-50: #f1eafa;
+ --color-purple-100: #ecddff;
+ --color-purple-200: #ddc2ff;
+ --color-purple-300: #cda6ff;
+ --color-purple-400: #bb87ff;
+ --color-purple-500: #a565f8;
+ --color-purple-600: #8843e1;
+ --color-purple-700: #6f23d0;
+ --color-purple-800: #5c10be;
+ --color-purple-900: #5109ad;
+ --color-purple-1000: #41048e;
+ --color-purple-1100: #30016c;
+ --color-purple-1200: #21004b;
+
+ /* ---- Neutral · Solid Gray ---- */
+ --color-white: #ffffff;
+ --color-black: #000000;
+ --color-solid-gray-50: #f2f2f2;
+ --color-solid-gray-100: #e6e6e6;
+ --color-solid-gray-200: #cccccc;
+ --color-solid-gray-300: #b3b3b3;
+ --color-solid-gray-400: #999999;
+ --color-solid-gray-420: #949494;
+ --color-solid-gray-500: #7f7f7f;
+ --color-solid-gray-536: #767676; /* AA contrast floor on white */
+ --color-solid-gray-600: #666666;
+ --color-solid-gray-700: #4d4d4d;
+ --color-solid-gray-800: #333333;
+ --color-solid-gray-900: #1a1a1a;
+
+ /* ---- Neutral · Opacity Gray (overlays / scrims) ---- */
+ --color-opacity-gray-50: rgba(0, 0, 0, 0.05);
+ --color-opacity-gray-100: rgba(0, 0, 0, 0.1);
+ --color-opacity-gray-200: rgba(0, 0, 0, 0.2);
+ --color-opacity-gray-300: rgba(0, 0, 0, 0.3);
+ --color-opacity-gray-400: rgba(0, 0, 0, 0.4);
+ --color-opacity-gray-420: rgba(0, 0, 0, 0.42);
+ --color-opacity-gray-500: rgba(0, 0, 0, 0.5);
+ --color-opacity-gray-536: rgba(0, 0, 0, 0.536);
+ --color-opacity-gray-600: rgba(0, 0, 0, 0.6);
+ --color-opacity-gray-700: rgba(0, 0, 0, 0.7);
+ --color-opacity-gray-800: rgba(0, 0, 0, 0.8);
+ --color-opacity-gray-900: rgba(0, 0, 0, 0.9);
+
+ /* ---- Semantic ---- */
+ --color-success-1: var(--color-green-600);
+ --color-success-2: var(--color-green-800);
+ --color-error-1: var(--color-red-800);
+ --color-error-2: var(--color-red-900);
+ --color-warning-yellow-1: var(--color-yellow-700);
+ --color-warning-yellow-2: var(--color-yellow-900);
+ --color-warning-orange-1: var(--color-orange-600);
+ --color-warning-orange-2: var(--color-orange-800);
+
+ /* Focus indicators — the dual focus ring is core to DADS a11y */
+ --color-focus-yellow: var(--color-yellow-300);
+ --color-focus-blue: var(--color-blue-900);
+
+ /* ---- Usage aliases (semantic surface / text / border) ---- */
+ --primary: var(--color-blue-900); /* primary action fill */
+ --primary-hover: var(--color-blue-1000);
+ --primary-active: var(--color-blue-1200);
+ --link: var(--color-blue-1000);
+ --link-visited: var(--color-magenta-800);
+
+ --text-body: var(--color-solid-gray-800);
+ --text-heading: var(--color-solid-gray-900);
+ --text-subtle: var(--color-solid-gray-700);
+ --text-placeholder: var(--color-solid-gray-536);
+ --text-disabled: var(--color-solid-gray-420);
+ --text-on-fill: var(--color-white);
+
+ --surface-page: var(--color-white);
+ --surface-subtle: var(--color-solid-gray-50);
+ --surface-card: var(--color-white);
+ --surface-disabled: var(--color-solid-gray-50);
+
+ --border-field: var(--color-solid-gray-600);
+ --border-divider: var(--color-solid-gray-420);
+ --border-subtle: var(--color-solid-gray-100);
+}
diff --git a/.agents/skills/dads-design/tokens/fonts.css b/.agents/skills/dads-design/tokens/fonts.css
new file mode 100644
index 00000000..88869bda
--- /dev/null
+++ b/.agents/skills/dads-design/tokens/fonts.css
@@ -0,0 +1,8 @@
+/* =============================================================
+ DADS — Webfonts
+ The product UI is set in Noto Sans JP (sans) and Noto Sans
+ Mono (mono). Both ship from Google Fonts. If self-hosting,
+ replace these @font-face srcs with local .woff2 files.
+ ============================================================= */
+
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Noto+Sans+Mono:wght@400;700&display=swap');
diff --git a/.agents/skills/dads-design/tokens/spacing.css b/.agents/skills/dads-design/tokens/spacing.css
new file mode 100644
index 00000000..33b516ba
--- /dev/null
+++ b/.agents/skills/dads-design/tokens/spacing.css
@@ -0,0 +1,53 @@
+/* =============================================================
+ DADS — Spacing, Radius & Elevation tokens
+ Spacing is a 4px base grid. Radius & shadow ramps come
+ straight from figma/tokens.json (Size.BorderRadius / Size.Elevation)
+ ============================================================= */
+
+:root {
+ /* ---- Spacing scale (4px base grid) ---- */
+ --space-0: 0;
+ --space-1: 4px;
+ --space-2: 8px;
+ --space-3: 12px;
+ --space-4: 16px;
+ --space-5: 20px;
+ --space-6: 24px;
+ --space-8: 32px;
+ --space-10: 40px;
+ --space-12: 48px;
+ --space-14: 56px;
+ --space-16: 64px;
+ --space-20: 80px;
+ --space-24: 96px;
+
+ /* ---- Border radius ---- */
+ --radius-none: 0;
+ --radius-4: 4px;
+ --radius-6: 6px;
+ --radius-8: 8px; /* default for inputs, buttons */
+ --radius-12: 12px; /* cards */
+ --radius-16: 16px;
+ --radius-24: 24px;
+ --radius-32: 32px;
+ --radius-full: 9999px;
+
+ /* ---- Elevation — paired drop shadows (ambient + key) ---- */
+ --elevation-1: 0 2px 8px 1px rgba(0, 0, 0, 0.1), 0 1px 5px 0 rgba(0, 0, 0, 0.3);
+ --elevation-2: 0 2px 12px 2px rgba(0, 0, 0, 0.1), 0 1px 6px 0 rgba(0, 0, 0, 0.3);
+ --elevation-3: 0 4px 16px 3px rgba(0, 0, 0, 0.1), 0 1px 6px 0 rgba(0, 0, 0, 0.3);
+ --elevation-4: 0 6px 20px 4px rgba(0, 0, 0, 0.1), 0 2px 6px 0 rgba(0, 0, 0, 0.3);
+ --elevation-5: 0 8px 24px 5px rgba(0, 0, 0, 0.1), 0 2px 10px 0 rgba(0, 0, 0, 0.3);
+ --elevation-6: 0 10px 30px 6px rgba(0, 0, 0, 0.1), 0 3px 12px 0 rgba(0, 0, 0, 0.3);
+ --elevation-7: 0 12px 36px 7px rgba(0, 0, 0, 0.1), 0 3px 14px 0 rgba(0, 0, 0, 0.3);
+ --elevation-8: 0 14px 40px 7px rgba(0, 0, 0, 0.1), 0 3px 16px 0 rgba(0, 0, 0, 0.3);
+
+ /* ---- Focus ring — the signature DADS dual indicator ----
+ 2px white/offset gap + 4px black outline + 2px yellow ring */
+ --focus-ring: 0 0 0 2px var(--color-white), 0 0 0 6px var(--color-black),
+ 0 0 0 8px var(--color-focus-yellow);
+
+ /* ---- Layout ---- */
+ --container-max: 1280px;
+ --breakpoint-desktop: 1024px;
+}
diff --git a/.agents/skills/dads-design/tokens/typography.css b/.agents/skills/dads-design/tokens/typography.css
new file mode 100644
index 00000000..3cd07a34
--- /dev/null
+++ b/.agents/skills/dads-design/tokens/typography.css
@@ -0,0 +1,97 @@
+/* =============================================================
+ DADS — Typography tokens
+ Categories: Display (dsp) · Standard (std) · Dense (dns) ·
+ Oneline (oln) · Mono (mono)
+ Class names mirror the official @digital-go-jp tailwind
+ plugin: text-{cat}-{size}{N|B}-{lineheight}
+ N = Normal 400 · B = Bold 700 · trailing num = line-height %
+ ============================================================= */
+
+:root {
+ --font-sans: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN',
+ 'Hiragino Sans', Meiryo, sans-serif;
+ --font-mono: 'Noto Sans Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;
+
+ --font-weight-normal: 400;
+ --font-weight-bold: 700;
+
+ /* Raw size ramp (px) */
+ --font-size-14: 14px;
+ --font-size-16: 16px;
+ --font-size-17: 17px;
+ --font-size-18: 18px;
+ --font-size-20: 20px;
+ --font-size-22: 22px;
+ --font-size-24: 24px;
+ --font-size-26: 26px;
+ --font-size-28: 28px;
+ --font-size-32: 32px;
+ --font-size-36: 36px;
+ --font-size-45: 45px;
+ --font-size-48: 48px;
+ --font-size-57: 57px;
+ --font-size-64: 64px;
+}
+
+/* ---------- Display (dsp) — hero / marketing headers ---------- */
+.text-dsp-64B-140 { font: 700 64px/1.4 var(--font-sans); }
+.text-dsp-57B-140 { font: 700 57px/1.4 var(--font-sans); }
+.text-dsp-48B-140 { font: 700 48px/1.4 var(--font-sans); }
+.text-dsp-64N-140 { font: 400 64px/1.4 var(--font-sans); }
+.text-dsp-57N-140 { font: 400 57px/1.4 var(--font-sans); }
+.text-dsp-48N-140 { font: 400 48px/1.4 var(--font-sans); }
+
+/* ---------- Standard (std) — body & UI headings ---------- */
+.text-std-45B-140 { font: 700 45px/1.4 var(--font-sans); }
+.text-std-36B-140 { font: 700 36px/1.4 var(--font-sans); }
+.text-std-32B-150 { font: 700 32px/1.5 var(--font-sans); }
+.text-std-28B-150 { font: 700 28px/1.5 var(--font-sans); }
+.text-std-24B-150 { font: 700 24px/1.5 var(--font-sans); }
+.text-std-22B-150 { font: 700 22px/1.5 var(--font-sans); }
+.text-std-20B-160 { font: 700 20px/1.6 var(--font-sans); }
+.text-std-18B-160 { font: 700 18px/1.6 var(--font-sans); }
+.text-std-17B-170 { font: 700 17px/1.7 var(--font-sans); }
+.text-std-16B-170 { font: 700 16px/1.7 var(--font-sans); }
+.text-std-16B-175 { font: 700 16px/1.75 var(--font-sans); }
+.text-std-45N-140 { font: 400 45px/1.4 var(--font-sans); }
+.text-std-36N-140 { font: 400 36px/1.4 var(--font-sans); }
+.text-std-32N-150 { font: 400 32px/1.5 var(--font-sans); }
+.text-std-28N-150 { font: 400 28px/1.5 var(--font-sans); }
+.text-std-26N-150 { font: 400 26px/1.5 var(--font-sans); }
+.text-std-24N-150 { font: 400 24px/1.5 var(--font-sans); }
+.text-std-22N-150 { font: 400 22px/1.5 var(--font-sans); }
+.text-std-20N-150 { font: 400 20px/1.5 var(--font-sans); }
+.text-std-18N-160 { font: 400 18px/1.6 var(--font-sans); }
+.text-std-17N-170 { font: 400 17px/1.7 var(--font-sans); }
+.text-std-16N-170 { font: 400 16px/1.7 var(--font-sans); }
+.text-std-16N-175 { font: 400 16px/1.75 var(--font-sans); }
+
+/* ---------- Dense (dns) — tables, compact UI ---------- */
+.text-dns-17B-130 { font: 700 17px/1.3 var(--font-sans); }
+.text-dns-17B-120 { font: 700 17px/1.2 var(--font-sans); }
+.text-dns-16B-130 { font: 700 16px/1.3 var(--font-sans); }
+.text-dns-16B-120 { font: 700 16px/1.2 var(--font-sans); }
+.text-dns-14B-130 { font: 700 14px/1.3 var(--font-sans); }
+.text-dns-14B-120 { font: 700 14px/1.2 var(--font-sans); }
+.text-dns-17N-130 { font: 400 17px/1.3 var(--font-sans); }
+.text-dns-17N-120 { font: 400 17px/1.2 var(--font-sans); }
+.text-dns-16N-130 { font: 400 16px/1.3 var(--font-sans); }
+.text-dns-16N-120 { font: 400 16px/1.2 var(--font-sans); }
+.text-dns-14N-130 { font: 400 14px/1.3 var(--font-sans); }
+.text-dns-14N-120 { font: 400 14px/1.2 var(--font-sans); }
+
+/* ---------- Oneline (oln) — buttons, single-line labels ---------- */
+.text-oln-17B-100 { font: 700 17px/1 var(--font-sans); }
+.text-oln-16B-100 { font: 700 16px/1 var(--font-sans); }
+.text-oln-14B-100 { font: 700 14px/1 var(--font-sans); }
+.text-oln-17N-100 { font: 400 17px/1 var(--font-sans); }
+.text-oln-16N-100 { font: 400 16px/1 var(--font-sans); }
+.text-oln-14N-100 { font: 400 14px/1 var(--font-sans); }
+
+/* ---------- Mono ---------- */
+.text-mono-17B-150 { font: 700 17px/1.5 var(--font-mono); }
+.text-mono-16B-150 { font: 700 16px/1.5 var(--font-mono); }
+.text-mono-14B-150 { font: 700 14px/1.5 var(--font-mono); }
+.text-mono-17N-150 { font: 400 17px/1.5 var(--font-mono); }
+.text-mono-16N-150 { font: 400 16px/1.5 var(--font-mono); }
+.text-mono-14N-150 { font: 400 14px/1.5 var(--font-mono); }
diff --git a/.agents/skills/dads-design/ui_kits/gov-portal/Apply.jsx b/.agents/skills/dads-design/ui_kits/gov-portal/Apply.jsx
new file mode 100644
index 00000000..1cc27e8f
--- /dev/null
+++ b/.agents/skills/dads-design/ui_kits/gov-portal/Apply.jsx
@@ -0,0 +1,125 @@
+// Multi-step online application flow for the gov-portal UI kit.
+const { useState } = React;
+
+function Stepper({ step }) {
+ const steps = ['入力', '確認', '完了'];
+ return (
+
+ {steps.map((s, i) => {
+ const state = i < step ? 'done' : i === step ? 'current' : 'todo';
+ return (
+ -
+
+ {state === 'done' ? '✓' : i + 1}
+ {s}
+
+ {i < steps.length - 1 && }
+
+ );
+ })}
+
+ );
+}
+
+function Field({ label, requirement, children }) {
+ const { Label } = window.DADS_952a55;
+ return (
+
+
+ {children}
+
+ );
+}
+
+function Apply({ onNav }) {
+ const { Input, Select, Radio, Checkbox, Textarea, NotificationBanner, Button } = window.DADS_952a55;
+ const [step, setStep] = useState(0);
+ const [form, setForm] = useState({ name: '山田 太郎', kana: 'ヤマダ タロウ', email: 'taro@example.jp', pref: '東京都', type: '本人', reason: '', agree: false });
+ const [showError, setShowError] = useState(false);
+ const set = (k) => (e) => setForm({ ...form, [k]: e.target.value });
+
+ return (
+
+
+ オンライン申請 / 転入届
+
+ 転入届の申請
+
+
+ {step === 0 && (
+
+ )}
+
+ {step === 1 && (
+
+
+ 内容に誤りがなければ「この内容で申請する」を押してください。
+
+
+ {[['氏名', form.name], ['フリガナ', form.kana], ['メールアドレス', form.email], ['転入先', form.pref], ['区分', form.type], ['備考', form.reason || '—']].map(([k, v], i) => (
+
+
- {k}
+ - {v}
+
+ ))}
+
+
+
+
+
+
+
+
+
+
申請が完了しました
+
受付番号: 2024-0091
+
受付完了のメールをお送りしました。審査の状況はマイページからご確認いただけます。
+
+
+
+
+
+
+
+
デジタル庁
+
DIGITAL AGENCY
+
+
+
+
文字サイズ
+
+
+ English
+
+
+
{title}
+ {desc}
+ 手続きへ進む →
+
+ );
+}
+
+function Home({ onNav }) {
+ const { NotificationBanner, ChipLabel } = window.DADS_952a55;
+ const services = [
+ { icon: 'M12 2L2 7v2h20V7L12 2zm-7 9v7H3v2h18v-2h-2v-7h-2v7h-3v-7h-2v7H9v-7H7v7H5v-7z', title: '引越し・住まい', desc: '転入・転出届、住民票の請求などの手続き' },
+ { icon: 'M20 6h-4V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2H4a2 2 0 00-2 2v11a2 2 0 002 2h16a2 2 0 002-2V8a2 2 0 00-2-2zM10 4h4v2h-4V4z', title: '仕事・退職', desc: '雇用保険、年金、各種給付の申請' },
+ { icon: 'M12 2a7 7 0 00-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 00-7-7zm0 9.5A2.5 2.5 0 1112 6a2.5 2.5 0 010 5.5z', title: '子育て・教育', desc: '児童手当、保育所、就学に関する手続き' },
+ { icon: 'M19 3h-1V1h-2v2H8V1H6v2H5a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2V5a2 2 0 00-2-2zm0 16H5V8h14v11z', title: '税・証明', desc: '確定申告、各種証明書の発行請求' },
+ ];
+
+ return (
+
+ {/* Hero */}
+
+
+
+
オンライン窓口
+
行政手続きを、
もっとかんたんに。
+
引越し、子育て、税の手続きまで。必要な手続きをオンラインでまとめて行えます。
+
+
+
+
+
+
+
+
+ よく検索される手続き：
+ 転入届
+ 児童手当
+ マイナンバー
+
+
+
+ {/* Notice */}
+
+
+ 6月15日（土）2:00〜5:00の間、システムメンテナンスのため一部のサービスをご利用いただけません。
+
+
+
+ {/* Services */}
+
+ カテゴリーから探す
+ ライフイベントに沿って、必要な手続きをまとめています。
+
+ {services.map((s) => )}
+
+
+
+ {/* News */}
+
+
+
+ {[
+ { d: '2024.06.01', t: 'オンライン申請の対象手続きを拡大しました', c: 'blue', tag: '更新' },
+ { d: '2024.05.28', t: '本人確認方法にマイナンバーカードの読み取りを追加', c: 'green', tag: '新着' },
+ { d: '2024.05.20', t: '「子育て」カテゴリーの手続きガイドを公開しました', c: 'gray', tag: 'お知らせ' },
+ ].map((n, i) => (
+ -
+ {n.d}
+ {n.tag}
+ {n.t}
+
+ ))}
+
+
+
+ {mode === 'help' ? 'よくある質問' : '手続き一覧'}
+
+
+ {mode !== 'help' && (
+
+ { e.preventDefault(); onNav('apply'); }}>転入届, '引越し・住まい', '約10分', 受付中],
+ [ { e.preventDefault(); onNav('apply'); }}>児童手当の認定請求, '子育て・教育', '約15分', 受付中],
+ ['印鑑登録', '証明・登録', '約8分', 準備中],
+ ['住民票の写しの請求', '証明・登録', '約5分', 受付中],
+ ['国民健康保険の加入', '保険・年金', '約12分', 受付中],
+ ]}
+ />
+
+ )}
+
+
+ よくあるご質問
+
+
+ マイナンバーカードと、カードの読み取りに対応したスマートフォン、または ICカードリーダーが必要です。一部の手続きは本人確認なしでも申請できます。
+
+
+ クレジットカード、電子マネー、ペイジーに対応しています。手数料が無料の手続きもあります。
+
+
+ マイページの「申請状況」から、審査の進捗と結果をいつでも確認できます。更新時にはメールでもお知らせします。
+
+
+ ログインしている場合、入力内容は自動的に下書き保存されます。後日、続きから再開できます。
+
+
+
+
解決しませんでしたか？
+
サポート窓口がメール・チャットでお答えします。
+
+
+