/* ------------------------------------------------------------- */
/* 1. CSSリセット & ボックスモデルの設定 */
/* ------------------------------------------------------------- */

/* すべての要素にborder-boxを適用し、paddingやborderがwidth/heightに含まれるように設定 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ------------------------------------------------------------- */
/* 2. マージン・パディングの初期化と基本設定 */
/* ------------------------------------------------------------- */

/* body, h1-h6, pなどのデフォルトマージンを削除し、一貫性を確保 */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
ul,
ol,
dl,
dd {
  margin: 0;
  padding: 0;
}

/* ------------------------------------------------------------- */
/* 3. レイアウトとアクセシビリティの改善 */
/* ------------------------------------------------------------- */

/* bodyに最小高さを設定し、Flexbox/Gridレイアウトの基盤を整える */
body {
  min-height: 100vh;
  line-height: 1.5; /* 基本の行高を設定 */
  text-rendering: optimizeSpeed; /* レンダリング速度を優先 */
}

/* img要素のレスポンシブ対応とブロック化 */
img,
picture,
video,
canvas,
svg {
  max-width: 100%;
  height: auto;
  display: block; /* インライン要素のマージン問題を解消 */
}

/* フォーム要素のフォント継承 */
input,
button,
textarea,
select {
  font: inherit;
}

/* ------------------------------------------------------------- */
/* 4. リストとリンクの整形 */
/* ------------------------------------------------------------- */

/* リストのデフォルトスタイル（ビュレットや番号）を削除 */
ul,
ol {
  list-style: none;
}

/* リンクのデフォルトの下線を削除 (必要な場合は個別に設定) */
a {
  text-decoration: none;
  color: inherit; /* 親要素の色を継承 */
}

/* ------------------------------------------------------------- */
/* 5. 不要なスタイルの抑制 */
/* ------------------------------------------------------------- */

/* スクロールバーが表示されてしまう要素のデフォルト overflow を非表示にする */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

/* buttonのフォーカスアウトラインをリセットし、個別にスタイルを設定できるようにする */
button {
  border: none;
  cursor: pointer;
}