/* 体験版だけの追加スタイル: DEMO バッジと、ポートフォリオの iframe がスマホ幅まで縮む場合の折返し */
.demo-badge { display: inline-block; margin-left: 10px; padding: 2px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .06em; color: #ffd666;
  border: 1px solid #a67c00; background: #3a2e00; vertical-align: 2px; }
.demo-note { color: var(--text-dim); font-size: 12px; margin: 0 0 12px; }
.board-abs { aspect-ratio: 16 / 9; }
.board-abs > img.bg { position: absolute; inset: 0; width: 100%; height: 100%; }

@media (max-width: 700px) {
  .topbar { gap: 10px; padding: 8px 12px; flex-wrap: wrap; }
  .brand { font-size: 15px; }
  .nav a { padding: 6px 10px; font-size: 13px; }
  .top-right { display: none; }
  .main { padding: 12px 10px 28px; }
  .kpi { min-width: 0; flex: 1 1 40%; padding: 8px 12px; }
  .kpi .k-value { font-size: 20px; }
  .controls { gap: 10px; padding: 10px; }
  .eq-list { min-width: 0; max-width: none; width: 100%; max-height: 220px; }
  .g-name { width: 88px; min-width: 88px; font-size: 11px; }
  .big-link { font-size: 13px; padding: 10px 12px; }
  .board-grid { gap: 8px; }
}