/*
 * ===============================================
 * Modern CSS Reset
 * ===============================================
 */

/*
  1. box-sizingをborder-boxに設定。
     widthやheightにpaddingとborderが含まれるようになり、レイアウト計算が直感的になる。
*/
*,
*::before,
*::after {
  box-sizing: border-box;
}

/*
  2. デフォルトのmarginを削除。
     意図しない余白をなくし、コンポーネントごとの余白管理がしやすくなる。
*/
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/*
  3. リスト要素からデフォルトのpaddingを削除。
*/
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none; /* リストマーカー（・や数字）をリセット */
}

/*
  4. bodyの最小の高さをビューポートの100%に設定し、読みやすい行間を確保。
*/
body {
  min-height: 100vh;
  line-height: 1.5; /* 文字の行間を少し広げる */
  -webkit-font-smoothing: antialiased; /* フォントを滑らかに表示(macOS) */
}

/*
  5. メディア要素（画像や動画など）が親要素からはみ出ないようにする。
     display: block; は、imgタグの下にできる謎の隙間を防ぐ効果もある。
*/
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/*
  6. フォーム要素に親のフォントスタイルを継承させる。
     ボタンやインプットのフォントが他と変わるのを防ぐ。
*/
input,
button,
textarea,
select {
  font: inherit;
}

/*
  7. テキストの折り返しを制御。
     長い英単語などがコンテナからはみ出すのを防ぐ。
*/
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

/*
  8. aタグの基本的なスタイルをリセット。
*/
a {
  text-decoration: none;
  color: inherit;
}