/* HAKKENKAN BROKERNET — 共通スタイル（スマホ最優先） */
:root {
  --bn-navy: #16324f;
  --bn-navy-dark: #0d1f33;
  --bn-accent: #c8a24a;
  --bn-bg: #f6f7f9;
  --bn-card: #ffffff;
  --bn-text: #22303f;
  --bn-muted: #6b7785;
  --bn-border: #dde3e9;
  --bn-danger: #b3372c;
  --bn-danger-bg: #fbeceb;
  --bn-ok: #1f7a4d;
  --bn-ok-bg: #eaf6ef;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bn-bg);
  color: var(--bn-text);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif;
  line-height: 1.7;
}

.bn-topbar {
  background: var(--bn-navy-dark);
  color: #fff;
  padding: 14px 16px;
}
.bn-brand { font-size: 15px; letter-spacing: .04em; }
.bn-brand b { color: var(--bn-accent); }

.bn-main {
  max-width: 640px;
  margin: 0 auto;
  padding: 20px 16px 40px;
}

.bn-footer {
  text-align: center;
  color: var(--bn-muted);
  font-size: 12px;
  padding: 20px 16px 40px;
}

h1 { font-size: 20px; margin: 0 0 6px; }
h2 { font-size: 16px; margin: 24px 0 8px; }
p.bn-lead { color: var(--bn-muted); margin-top: 0; }

.bn-card {
  background: var(--bn-card);
  border: 1px solid var(--bn-border);
  border-radius: 12px;
  padding: 18px;
  margin-bottom: 16px;
}

.bn-field { margin-bottom: 14px; }
.bn-field label { display: block; font-size: 13px; color: var(--bn-muted); margin-bottom: 4px; }
.bn-field input[type=text],
.bn-field input[type=email],
.bn-field input[type=tel],
.bn-field input[type=password],
.bn-field select,
.bn-field textarea {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--bn-border);
  border-radius: 8px;
  font-size: 16px; /* iOSでの自動ズーム防止 */
  background: #fff;
  color: var(--bn-text);
}
.bn-field textarea { min-height: 90px; font-family: inherit; }
.bn-hint { font-size: 12px; color: var(--bn-muted); margin-top: 4px; }

.bn-check { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 10px; font-size: 14px; }
.bn-check input { margin-top: 3px; }

.bn-btn {
  display: inline-block;
  width: 100%;
  text-align: center;
  padding: 13px 16px;
  border-radius: 8px;
  border: none;
  background: var(--bn-navy);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.bn-btn:active { background: var(--bn-navy-dark); }
.bn-btn.bn-btn-secondary { background: #fff; color: var(--bn-navy); border: 1px solid var(--bn-navy); }
.bn-btn.bn-btn-danger { background: var(--bn-danger); }
.bn-btn.bn-btn-sm { width: auto; padding: 8px 14px; font-size: 14px; }

.bn-notice { border-radius: 10px; padding: 12px 14px; margin-bottom: 16px; font-size: 14px; }
.bn-notice-info { background: #eef3f8; color: var(--bn-navy); }
.bn-notice-ok { background: var(--bn-ok-bg); color: var(--bn-ok); }
.bn-notice-error { background: var(--bn-danger-bg); color: var(--bn-danger); }

.bn-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.bn-badge-warn { background: #fdf3e3; color: #8a5a00; }
.bn-badge-ok { background: var(--bn-ok-bg); color: var(--bn-ok); }
.bn-badge-muted { background: #eceff2; color: var(--bn-muted); }

.bn-wakekari {
  border: 2px solid var(--bn-accent);
  background: #fffaf0;
  border-radius: 12px;
  padding: 16px;
  margin: 16px 0;
}
.bn-wakekari h3 { margin: 0 0 6px; font-size: 15px; color: #7a5c12; }
.bn-wakekari p { margin: 0 0 6px; font-size: 14px; }

.bn-kv { width: 100%; border-collapse: collapse; font-size: 14px; }
.bn-kv th { text-align: left; color: var(--bn-muted); font-weight: 500; width: 38%; padding: 6px 8px 6px 0; vertical-align: top; }
.bn-kv td { padding: 6px 0; vertical-align: top; }

.bn-doclist { list-style: none; padding: 0; margin: 0; }
.bn-doclist li { padding: 10px 0; border-bottom: 1px solid var(--bn-border); }
.bn-doclist li:last-child { border-bottom: none; }

table.bn-table { width: 100%; border-collapse: collapse; font-size: 13px; }
table.bn-table th, table.bn-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--bn-border); }
table.bn-table th { color: var(--bn-muted); font-weight: 600; background: #f0f2f5; }
.bn-table-wrap { overflow-x: auto; }

.bn-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.bn-stat { background: var(--bn-card); border: 1px solid var(--bn-border); border-radius: 10px; padding: 14px; text-align: center; }
.bn-stat b { display: block; font-size: 24px; color: var(--bn-navy); }
.bn-stat span { font-size: 12px; color: var(--bn-muted); }

a { color: var(--bn-navy); }
.bn-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.bn-nav a { font-size: 13px; text-decoration: none; color: var(--bn-navy); background: #fff; border: 1px solid var(--bn-border); border-radius: 999px; padding: 6px 12px; }