:root {
  /* ブランドカラー */
  --color-primary: #0073b7;
  --color-accent: #00b3a4;
  --color-highlight: #e5ff5e;
  --color-bg-muted: #f5f5f5;
  --color-dark: #130e28;

  /* テキスト・基本カラー */
  --color-text: #333333;
  --color-border: #dddddd;

  /* フォント（IBM Plex Sans JP に統一） */
  --font-base: 'IBM Plex Sans JP', sans-serif;
  --font-heading: 'IBM Plex Sans JP', sans-serif;

  /* フォントサイズ */
  --font-size-base: 16px;
  --line-height-base: 1.6;
}

body {
  font-family: var(--font-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-text);
  background-color: var(--color-bg-muted);
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-heading);
  color: var(--color-primary);
}

a.btn-primary {
  background-color: var(--color-primary);
}

a.btn-accent {
  background-color: var(--color-accent);
}

.notice {
  background-color: var(--color-highlight);
  color: var(--color-dark);
}

.site-main {
  padding-left: 2rem;
  padding-right: 2rem;
  box-sizing: border-box;
}

body.admin-bar .site-header {
  margin-top: 32px; /* 管理バーの高さ */
}

@media screen and (max-width: 782px) {
  body.admin-bar .site-header {
    margin-top: 46px; /* スマホ時の管理バー高さ */
  }
}