/* 色・文字・角丸などの共通のきまり。明るく親しみやすく、でも子どもっぽくしすぎない（中学生向け）。 */
:root {
  --bg: #edf2f8;
  --surface: #ffffff;
  --surface-2: #f4f7fb;
  --border: #d3dbe6;
  --ink: #232833;
  --muted: #646d7c;
  --line: #4e5767;
  --guide: #e5ebf3;

  --a: #e4643b;        /* A の色（コーラル） */
  --a-soft: #fceae3;
  --b: #3568d4;        /* B の色（ブルー） */
  --b-soft: #e4ecfb;
  --accent: #e9ad0c;   /* 目立たせたいところ（マスタード） */
  --accent-soft: #fdf4d3;
  --danger: #c93c3c;

  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(36, 38, 45, 0.06), 0 4px 14px rgba(36, 38, 45, 0.06);
  --font: "Zen Kaku Gothic New", "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 18px;
  line-height: 1.6;
}

button {
  font: inherit;
  cursor: pointer;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  min-height: 48px;
  padding: 0 1.2em;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-weight: 700;
  transition: background 0.15s, border-color 0.15s;
}
.btn:hover { border-color: var(--line); }
.btn:active { background: var(--surface-2); }
.btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.btn-primary { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn-primary:hover { background: #3a3d47; }
.btn-small { min-height: 40px; min-width: 44px; padding: 0 0.9em; font-size: 16px; }