/*
 * reset.css - ブラウザ間のデフォルトスタイル差異を統一するCSSリセット
 *
 * ブラウザはそれぞれ独自のデフォルトスタイル（margin, padding, font-sizeなど）を持っている。
 * このファイルでそれらをリセットし、すべてのブラウザで同じ見た目からスタートできるようにする。
 */

/* すべての要素のmargin・paddingをゼロにし、box-sizingをborder-boxに統一 */
/* border-box: width/heightにpadding・borderを含める計算方式。レイアウトが直感的になる */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* HTML要素: スムーズスクロールを有効化 */
/* ページ内リンク（#aboutなど）クリック時にスーッと移動する */
html {
  scroll-behavior: smooth;
}

/* body: 行間を読みやすい1.6倍に設定し、テキストの描画を最適化 */
body {
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;  /* macOS/iOSでフォントを滑らかに表示 */
  -moz-osx-font-smoothing: grayscale;   /* Firefoxでフォントを滑らかに表示 */
}

/* 画像・動画: コンテナからはみ出さないようにする */
img,
picture,
video,
canvas {
  display: block;
  max-width: 100%;
}

/* フォーム要素: 親要素のフォント設定を継承（ブラウザデフォルトを上書き） */
input,
button,
textarea,
select {
  font: inherit;
}

/* リスト: デフォルトの黒丸（●）を非表示 */
ul,
ol {
  list-style: none;
}

/* リンク: デフォルトの下線を消し、色を親要素から継承 */
a {
  text-decoration: none;
  color: inherit;
}