/* 1. ボックスサイズの定義（パディングとボーダーを幅に含める） */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 2. デフォルトのマージンを削除 */
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd {
  margin: 0;
}

/* 3. リストの点を消す（ナビゲーションなどで邪魔になるため） */
ul,
ol {
  list-style: none;
  padding: 0; /* 必要に応じてマージンも0に */
}

/* 4. bodyの基本設定（読みやすさ重視） */
body {
  background-color: lightblue; /* 背景を黒にする */
  color: white;              /* 文字を赤にする */
}

/* 5. 画像をレスポンシブ対応にし、下部の隙間を消す */
img,
picture {
  max-width: 100%;
  display: block;
}

/* 6. フォーム要素のフォントを親に合わせる */
input,
button,
textarea,
select {
  font: inherit;
}

/* 7. アクセシビリティへの配慮（アニメーション軽減設定の尊重） */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}