:root {
  --pink: #ae5527;
  --pink-deep: #a74b20;
  --pink-soft: #edbd94;
  --pink-light: #f4deca;
  --pink-tint: #fff2e5;
  --blue: #5cc0ea;
  --blue-deep: #486665;
  --blue-light: #e4ece6;
  --ink: #483b32;
  --ink-mid: #6e5d50;
  --ink-soft: #78685b;
  --fg: #483b32;
  --sub: #6e5d50;
  --border: #e9dccb;
  --line: #e9dccb;
  --bg: #faf9f4;
  --bg-soft: #fcf0e2;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--bg);
  font-family: "Noto Sans JP", system-ui, sans-serif;
  line-height: 1.85;
  letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: "Noto Sans JP", sans-serif;
}

a {
  color: var(--pink-deep);
}

a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--blue-deep);
  outline-offset: 3px;
  border-radius: 6px;
}