Mint Design System

<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">

/* CSS: 日本語ベース */
body {
  font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3',
               'Hiragino Sans', sans-serif;
}
/* 数字・英字要素に個別指定 */
.number, input { font-family: 'Roboto', sans-serif; }

/* 通常のカード・入力 */
border: 1.5px solid #d4ede3;

/* フォーカス・ハイライト */
border: 2px solid #a8d5ba;

/* 点線（計算式・補足） */
border: 1px dashed #d4ede3;

/* 左アクセントライン */
border-left: 3px solid #a8d5ba;

/* フォーカスリング */
box-shadow: 0 0 0 4px rgba(168,213,186,0.25);

<!-- セグメントコントロール -->
<div class="year-toggle">
  <button class="year-btn"        onclick="setYear(6)">令和6年分</button>
  <button class="year-btn active" onclick="setYear(7)">令和7年分（最新）</button>
</div>

.year-toggle {
  display: flex; gap: 8px; background: var(--mint-pale);
  padding: 5px; border-radius: 14px;
}
.year-btn {
  flex: 1; padding: 10px 8px; border: none; border-radius: 10px;
  cursor: pointer; transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1);
  color: #7a9a8e; background: transparent;
}
.year-btn.active {
  background: var(--card-bg); color: var(--accent-deep);
  box-shadow: 0 2px 10px var(--shadow); transform: scale(1.02);
}

<!-- WarningInline -->
<div class="ds-warning-inline">
  <span class="wi-icon">⚠</span>
  <span>評価額が投資累計額を下回っています</span>
</div>

.ds-warning-inline {
  display: flex; gap: 8px;
  padding: 10px 14px;
  background: rgba(224,122,58,0.08);
  border-left: 3px solid var(--warn-color);
  border-radius: 10px;
  font-size: 12px; color: var(--warn-color);
  line-height: 1.7;
}
/* 表示切り替えは .show クラスで制御 */
.ds-warning-inline { display: none; }
.ds-warning-inline.show { display: flex; }

input[type="text"] {
  padding: 18px 64px 18px 22px;
  font-size: 22px; font-family: 'Roboto'; font-weight: 300;
  border: 2px solid var(--mint-light);
  border-radius: 16px; background: var(--mint-pale);
  transition: all 0.3s ease;
}
input::placeholder {
  color: #b8d4cc; /* 入力値より明確に薄く */
  font-weight: 300;
  font-size: 18px; /* 入力値(22px)より小さく */
}
input:focus {
  border-color: var(--accent);
  background: var(--card-bg);
  box-shadow: 0 0 0 4px rgba(168,213,186,0.25);
}

<!-- InputStepper -->
<div class="ds-val-row">
  <input class="ds-num-edit" type="number" id="inMonthly"
         min="0" max="30" step="0.1" value="5">
  <span class="ds-val-unit">万円</span>
</div>
<div class="ds-input-stepper">
  <button class="ds-pm-btn" data-target="slMonthly" data-step="-0.1">－</button>
  <input class="ds-stepper-range" type="range" id="slMonthly"
         min="0" max="30" step="0.1" value="5">
  <button class="ds-pm-btn" data-target="slMonthly" data-step="0.1">＋</button>
</div>

/* JS: スライダー背景をリアルタイム更新 */
function updateStepperBg(sl) {
  const pct = ((sl.value - sl.min) / (sl.max - sl.min)) * 100;
  sl.style.setProperty('--pct', pct + '%');
}

<!-- SelectUnderline — 生年月日例 -->
<div class="ds-select-row">
  <select class="ds-select-underline" id="dobYear"></select>
  <span class="ds-select-unit">年</span>
  <select class="ds-select-underline" id="dobMonth"></select>
  <span class="ds-select-unit">月</span>
</div>

.ds-select-underline {
  font-size: clamp(1.4rem, 5vw, 1.8rem);
  font-weight: 300;
  border: none;
  border-bottom: 2px solid var(--mint-light);
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  padding: 0 4px 4px;
  transition: border-color .25s ease;
}
.ds-select-underline:focus {
  border-bottom-color: var(--accent-deep);
  outline: none;
}

function onInputChange(el) {
  const pos    = el.selectionStart;
  const oldLen = el.value.length;
  // 数字以外を除去
  const raw = el.value.replace(/[^0-9]/g, '');
  const num = parseInt(raw) || 0;
  el.value = num ? num.toLocaleString('ja-JP') : '';
  // カーソル位置補正（カンマ挿入分のずれ）
  const diff = el.value.length - oldLen;
  el.setSelectionRange(pos + diff, pos + diff);
}

function animateNum(el, from, to, ms) {
  const t0 = performance.now();
  function step(now) {
    const p    = Math.min((now - t0) / ms, 1);
    const ease = 1 - Math.pow(1 - p, 4); // easeOutQuart
    el.textContent = Math.round(from + (to - from) * ease)
                         .toLocaleString('ja-JP');
    if (p < 1) requestAnimationFrame(step);
  }
  requestAnimationFrame(step);
}

function fireConfetti() {
  const wrap   = document.getElementById('confetti-wrap');
  const colors = ['#a8d5ba','#4a8c6f','#d4ede3',
                   '#e8f5f1','#7fc49e','#2d7a5a'];
  for (let i = 0; i < 50; i++) {
    const c = document.createElement('div');
    c.style.cssText = `
      position:absolute;
      left: ${10 + Math.random()*80}%;
      width: ${6 + Math.random()*8}px;
      height: ${6 + Math.random()*8}px;
      background: ${colors[Math.floor(Math.random()*colors.length)]};
      border-radius: ${Math.random() > 0.5 ? '50%' : '2px'};
      animation: confettiFall ${1.2+Math.random()*1.3}s linear forwards;
    `;
    wrap.appendChild(c);
    setTimeout(() => c.remove(), 3000);
  }
}

/* CSS */
.toast {
  position: fixed; bottom: 30px; left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: var(--accent-deep); color: #fff;
  padding: 12px 28px; border-radius: 40px;
  opacity: 0; pointer-events: none;
  transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1), opacity 0.4s ease;
}
.toast.show {
  transform: translateX(-50%) translateY(0); opacity: 1;
}

/* JS */
let toastTimer;
function showToast(msg) {
  const t = document.getElementById('toast');
  t.textContent = msg;
  t.classList.add('show');
  clearTimeout(toastTimer);
  toastTimer = setTimeout(() => t.classList.remove('show'), 2600);
}

<!-- SummaryGrid / StatCard -->
<div class="ds-summary-grid">
  <!-- ハイライトカード（1番目・強調表示） -->
  <div class="ds-stat-card highlight">
    <div class="ds-stat-label">65歳時の資産</div>
    <div><span class="ds-stat-num">4,106</span><span class="ds-stat-unit">万円</span></div>
  </div>
  <!-- 通常カード -->
  <div class="ds-stat-card">
    <div class="ds-stat-label">うち運用収益</div>
    <div><span class="ds-stat-num">2,306</span><span class="ds-stat-unit">万円</span></div>
  </div>
</div>

.ds-summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* モバイル: 2列 */
  gap: 12px;
}
@media (min-width: 480px) {
  .ds-summary-grid {
    grid-template-columns: repeat(3, 1fr); /* タブレット以上: 3列 */
    gap: 14px;
  }
}

function renderSimChart(data, canvas) {
  const dpr  = window.devicePixelRatio || 1;
  const cW   = canvas.parentElement.clientWidth;
  const PAD  = { t:14, r:14, b:42, l:64 };
  const n    = data.length;
  const plotW= cW - PAD.l - PAD.r;
  const BAR  = Math.max(3, plotW/n - Math.max(1, plotW/n*0.28));
  const GAP  = Math.max(1, plotW/n - BAR);

  const ctx = canvas.getContext('2d');
  const max = Math.max(...data.map(d => d.total));

  data.forEach((d, i) => {
    const x        = PAD.l + i * (BAR+GAP);
    const pH       = 300 - PAD.t - PAD.b;
    const totalH   = (d.total     / max) * pH;
    const principH = (d.principal / max) * pH;
    // 元本: --accent
    ctx.fillStyle = '#a8d5ba';
    rRect(ctx, x, baseY-principH, BAR, principH, [0,0,4,4]);
    // 運用収益: --accent-deep
    ctx.fillStyle = '#4a8c6f';
    rRect(ctx, x, baseY-totalH, BAR, totalH-principH, [4,4,0,0]);
  });
}

/* ベース = モバイル（〜479px）に書く */
.card {
  padding: 28px 20px;
  border-radius: 20px;
}

/* タブレット以上に上書き */
@media (min-width: 480px) {
  .card {
    padding: 40px 36px;
    border-radius: 28px;
  }
}

/* PC以上にさらに上書き */
@media (min-width: 768px) {
  .container { max-width: 560px; }
}

/* Apple HIG / Google Material 推奨: 最小 44×44px */

/* ✅ クイックボタン — padding で高さを確保 */
.quick-btn {
  min-height: 44px;
  padding: 11px 20px;
}

/* ✅ スライダーのつまみ — 十分な当たり判定 */
input[type="range"]::-webkit-slider-thumb {
  width: 24px; height: 24px; /* 実サイズ */
  /* 視覚は24pxでも、タップ領域はブラウザが44pxに拡張 */
}

/* ✅ 入力フィールド — 高さを十分に確保 */
input[type="text"] {
  padding: 18px 64px 18px 22px; /* 縦56px相当 */
}

/* clamp(最小, 流動値, 最大) で画面幅に自動追従 */
h1          { font-size: clamp(20px, 5vw, 32px); }
.result-val { font-size: clamp(22px, 6vw, 30px); }
.input-num  { font-size: clamp(18px, 5vw, 22px); }

/* iOS ズーム防止: input は 16px 以上必須 */
input { font-size: 16px; } /* 16px未満だと自動ズームが発生 */

/* NG 例 */
input { font-size: 14px; } /* ← iOS Safariが自動ズームしてしまう */

/* モバイル（ベース） */
.donut-wrap     { flex-direction: column; }
.result-value   { font-size: 24px; }
.card           { border-radius: 20px; padding: 28px 20px; }
.quick-btns     { gap: 8px; }

/* タブレット以上 (min-width: 480px) */
@media (min-width: 480px) {
  .donut-wrap   { flex-direction: row; }
  .result-value { font-size: 30px; }
  .card         { border-radius: 28px; padding: 40px 36px; }
}

/* PCレイアウト: コンテナ幅を制限 */
@media (min-width: 768px) {
  .container    { max-width: 560px; margin: 36px auto; }
}

/* タップ時のハイライト除去 */
button, input, a {
  -webkit-tap-highlight-color: transparent;
}

/* スムーズスクロール */
html { scroll-behavior: smooth; }

/* 数字入力: モバイルキーボードをテンキーに */
<input type="text" inputmode="numeric" />
/* ↑ type="number" より type="text" + inputmode="numeric" が
   カンマ区切り表示のためにベター */

/* overflow: hidden で横スクロール防止 */
body { overflow-x: hidden; }

/* 長押しメニュー抑制（UI要素） */
.card, .result-item {
  -webkit-user-select: none;
  user-select: none;
}

<!-- viewport に viewport-fit=cover を追加 -->
<meta name="viewport"
  content="width=device-width, initial-scale=1.0, viewport-fit=cover">

/* Safe Area 対応: フッター・固定要素に適用 */
footer {
  padding-bottom: calc(40px + env(safe-area-inset-bottom));
}

/* トースト通知 — ホームバーと被らないよう */
.toast {
  bottom: calc(30px + env(safe-area-inset-bottom));
}

/* 固定ナビ等がある場合 */
.fixed-nav {
  padding-top: env(safe-area-inset-top);
}