基礎

カラーパレット

tokens.css
ブランドカラー
--base-bg
#e8f5f1
ベース背景（淡いミント）
--accent
#a8d5ba
アクセント（若葉ミント）
--accent-deep
#4a8c6f
アクセント深（深みミント）
テキスト
--text-main
#44504c
メイン文字
--text-sub
#ccd6d1
サブ文字（極薄グレー）
--sub-text
#7a9a8e
セカンダリテキスト
--placeholder
#b8d4cc
プレースホルダー
--label-color
#5a7a70
ラベル
面・背景
--card-bg
#ffffff
カード背景（純白）
--mint-light
#d4ede3
ボーダー・バー背景
--mint-pale
#f0faf5
入力・ホバー背景
Data Colors（データ識別用）
--data-blue-1
#4a7fd4
データ識別用ブルー（濃）
--data-blue-2
#7aa8e8
データ識別用ブルー（中）
--data-blue-3
#aac8f4
データ識別用ブルー（薄）
--data-orange
#e07a3a
データ識別用オレンジ
--data-amber
#f0c060
データ識別用アンバー
セマンティック / システム
--warn-color
#e07a3a
警告・注意（オレンジ）
--shadow
rgba(74,140,111,0.12)
グリーン系シャドウ
--accent-border
rgba(168,213,186,0.5)
アクセントの半透明ボーダー
--sys-sidebar
#f8fcfa
サイドバー背景
--sys-border
#e2f0e9
システムUIボーダー
--sys-code-bg
#1e2d28
コードブロック背景
--sys-code-fg
#a8d5ba
コードブロック文字色

タイポグラフィ

フォントファミリー
'Hiragino Kaku Gothic ProN', 'Hiragino Sans', sans-serif — 和文 / UI
あいうえお　カキクケコ　ABCDEF　１２３４５６
'Roboto', sans-serif — 数値 / 英文 (wt 300 / 400 / 500 / 700)
1,234,567  ¥ 0.05%  億円  ABCDEF
'Roboto Mono', monospace — コード / ラベル (wt 400 / 500)
--accent: #a8d5ba;  function clamp(v, min, max) { … }
サイズスケール
2xl
2rem / 32px
資産運用シミュレーション
xl
1.5rem / 24px
新NISA積立シミュレーター
lg
1.1rem / 17.6px
毎月の積立額
base
1rem / 16px
65歳時の資産合計をシミュレーションします
sm
0.875rem / 14px
想定利回り（年率）のご入力をお願いします
xs
0.75rem / 12px
免責事項・補足テキスト・ラベル
2xs
0.625rem / 10px
BADGE LABEL — SMALL CAPS
入力

ds-input

.ds-input / .ds-input-wrap

フルワイドのボーダー付きテキスト入力。フォーカス時にグリーンのフォーカスリング表示。単位テキストは .ds-input-unit で付与。

万円
%

ds-input-num-underline

.ds-val-row / .ds-val-unit

数値入力（アンダーラインのみ）。3桁ごとにカンマ区切り。ds-val-row 内で ds-input-num-underline と ds-val-unit を組み合わせて使用。type="text" + inputmode="numeric" でカンマ表示。

万円

ds-input-stepper

.ds-pm-btn / .ds-stepper-range / base.js

数値入力 + スライダー + ±ボタンのセット。updateSliderBg(sl) でトラック塗りとシマーオーバーレイを同期。linkInputs(numId, slId, min, max, step, onChange?) で number input とスライダーを双方向同期。.ds-stepper-wrap--no-pill でピル無し版に切り替え。

ピル有り（フローティングピル） .ds-input-stepper .ds-stepper-wrap
万円
10万円
ピル無し .ds-input-stepper .ds-stepper-wrap--no-pill
万円
ds-range（シンプルスライダー） .ds-range-wrap .ds-range
ピル有り（±ボタン無し） .ds-stepper-wrap
万円
10万円

ds-select-underline

.ds-select-underline / .ds-select-unit

アンダーラインスタイルのセレクトボックス。数値として読めるよう大きなフォントで表示。

年 月 （現在 29歳）

ds-chip-scroll

.ds-chip-scroll / .ds-chip

横スクロール可能なプリセットチップ群。initChipScroll() で右端フェードマスクを初期化。.active で選択状態。入力値のクイック選択に使用。

毎月の積立額
想定利回り

ds-segment

.ds-segment / .ds-seg-btn

タブ切り替えコントロール。.active クラスで選択状態。クリックで切り替え可能。表示モードの切り替えに使用（月次 / 年次 / 累計など）。

ds-form-row

.ds-form-rows / .ds-form-row

ラベル＋インプットの横並びグリッドレイアウト。--form-label-w（デフォルト 200px）でラベル幅をカスタマイズ可能。560px 以上で2カラム表示。

毎月の積立額
5 万円
想定利回り（年率） 運用の平均リターン率
5.0 %
結果表示

ds-result

.ds-result / .highlight

KPI単体表示カード。.highlight でグリーン強調表示。ホバーで浮き上がり。少数の指標を横並びで示す場面に使用。

うち運用収益
1,200万円
65歳時の資産
2,346万円

ds-summary-grid

.ds-stat-card / .ds-stat-*

KPI・サマリーグリッドレイアウト。.highlight で強調。ds-stat-num / unit / detail / detail-num / detail-unit の5要素で構成。複数指標を整列して表示する場合は ds-result よりこちらを使用。

65歳時の資産
2,346万円
うち運用収益
1,200万円
新NISA枠使い切り
12年3ヶ月目
37歳3ヶ月

ds-hero-result

.ds-hero-result

手取りヒーローカード。グラデーション背景（#5aaa8e → #6ec4a8）でメイン数値を強調。ページ最上部の1番目立つ結果値に使用。

推定月間手取り
211,317 円

ds-progress

.ds-progress-bg / .ds-progress-fill

グラデーション＋シマーアニメーション付きの進捗バー。width で進捗率を指定。NISA枠充足率などの達成度表示に使用。

30%
65%
100%
データ可視化

ds-donut-summary

.ds-donut-summary

ドーナツグラフ＋内訳凡例を横並びにしたカード。給与シミュレーターの結果表示に使用。

給与の内訳
手取り ¥ 211,317 83%
社会保険料 ¥ 38,079 15%
税金 ¥ 6,604 3%

ds-breakdown-accordion

.ds-breakdown-block / .ds-accordion-trigger

社会保険料・税金の内訳をアコーディオンで表示。クリックで展開・折りたたみ。

月間総支給（額面） ¥ 256,000
健康保険料（協会けんぽ東京） ¥ 12,558
厚生年金保険料 ¥ 23,985
振込額 ¥ 211,317

ds-resident-savings

.ds-resident-savings

住民税を計算から外すON時、振込額直下に表示。月額・年間・手取り比率バーを表示。

🍃 住民税の取り置き目安 翌年払い
毎月の取り置き
13,208 円/月
→
年間合計
158,496 円
6.2%
※ 住民税は前年所得をもとに計算され、翌年6月〜翌々年5月に徴収されます（普通徴収の場合）

ds-explain-panel

.ds-explain-panel

用語・考え方の短い説明（ds-resident-savings と同系の枠・Mint）。インフレ実質の説明などに使用。

💡 実質残高（今日の価値）とは 参考

名目残高は、将来その時点で口座にある金額です。

実質残高は、それを今の物価感覚に直した金額です。

たとえば65歳で4,000万円あっても、物価が上がれば、今の感覚では約3,000万円の価値になることがあります。

※ 物価指数は年1回だけ更新する単純モデルです。実際の物価や制度とは異なる場合があります。

ds-asset-line-chart

.canvasWrap / chart-asset-line.js

名目残高・実質残高・取り崩し額の折れ線グラフ。データに principal を入れ showPrincipalLine: true で元本線（既定色 --accent-deep）を追加可能。ホバーでツールチップ。左から右へアニメーション付き。

名目残高 実質残高 取り崩し（実質）

ds-stacked-bar-chart

chart-stacked-bar.js

元本＋運用収益の積み上げ棒グラフ。ホバーでツールチップ表示。drawStackedBarChart のオプション animate: true で左から右へ棒が伸びるアニメーション（duration はミリ秒、既定 700）。NISA・iDeCo シミュレーター等で使用。

元本 運用収益

ds-calc-basis

.ds-calc-basis / .ds-calc-step / .ds-calc-eq

計算の根拠を番号付きステップで表示。数値は .val でアクセント色にハイライト。要約式は .ds-calc-eq で白背景ボックスに表示。退職金シミュレーター等の計算根拠表示に使用。

📋 計算の根拠（国税庁 No.1420 に基づく）
1
退職金受取額：20,000,000円（一般退職）
2
勤続年数：30年
3
退職所得控除額 ＝ 800万円 ＋ 70万円 × (30年 － 20年) ＝ 15,000,000円
4
課税前金額 ＝ 20,000,000円 － 控除額 15,000,000円 ＝ 5,000,000円
5
課税退職所得 ＝ 5,000,000円 ÷ 2 ＝ 2,500,000円
6
所得税：超過累進税率（速算表）を適用 → 復興特別所得税（×1.021）を加算
7
住民税（目安）＝ 課税退職所得 × 10%（標準税率）
手取り額 ＝ 受取額 20,000,000円 － 所得税等 － 住民税
根拠：国税庁 No.1420 退職金を受け取ったとき（退職所得）
注釈・フィードバック

注釈・警告ボックス

.note-box / .dashed-box / .ds-warning-inline

補足情報・警告のインライン表示コンポーネント群。.note-box は補足・免責（ボーダーレフト付き）、.dashed-box はコード・変数の表示（破線枠・等幅フォント）、.ds-warning-inline は計算上の注意事項（オレンジ系）。

.note-box — 補足・免責
※ 新NISA総枠（1,800万円）到達後は新規積立が停止されます。投資判断はご自身の責任でお願いします。
.dashed-box — コード・変数表示
--form-label-w: 210px;
--card-px: 20px;
.ds-warning-inline — 警告・注意
⚠ 評価額が投資累計額を下回っています（含み損の状態）。入力値を確認してください。

ds-divider

.ds-divider

フェードグラデーション付きの区切り線。

セクション上部のコンテンツ

セクション下部のコンテンツ

ds-badge

.ds-badge

ステータス・ラベル表示用インラインバッジ。pulse アニメーション付き。

NEW UPDATED 🌿 Mint DS v2.0

ds-card

.ds-card

ホワイトカード。上部にアクセントカラーのシマーバー付き。overflow: hidden のため子要素の角丸も適用。

カード内のコンテンツです。シマーバーが上部に表示されます。

secFadeIn でフェードインアニメーション付き表示。

ボタン

.ds-btn-primary / secondary / ghost

3種類のバリアント。ホバー時はスプリング感のあるスケールアニメーション。アクティブ時は押し込み効果。

back-to-index

.back-to-index

各シミュレーター・ツールページ下部に配置する「マネーツール一覧へ戻る」ボタン。href="../index.html" で一覧ページへリンク。

← マネーツールへ戻る
ユーティリティ / JS関数

数値フォーマット

base.js

円単位の数値を「億円 / 万円」形式に変換する関数群。入力値を変えるとリアルタイムに結果が更新されます。

入力値（円）：
fmtYen( n ) → string
→
fmtYenParts( n ) → { num, unit }
→
fmtAxisYen( n ) → string — グラフ軸用短縮
→
clamp( v, min, max ) → number
v = min = max = →

animateNum

base.js

easeOutQuart（700ms）でカウントアップアニメーション。fmt 関数を渡してカスタム表示も可能。

animateNum( el, from, to, ms? = 700, fmt? )
目標値（円）：
toLocaleString
0
fmtYen フォーマット
0万円

showToast

base.js

#ds-toast 要素にメッセージを表示。スプリングアニメーションで出現し、指定時間後に自動消去。

showToast( msg, duration? = 2600, el? )
ms

fireConfetti

base.js

#ds-confetti コンテナにパーティクルを生成。達成イベント・NISA枠到達時などに使用。

fireConfetti( count? = 60 )
パーティクル数：