/* Modern CSS Reset based on the work of Andy Bell and Eric Meyer */

/* 全ての要素と疑似要素に適用する基本的なリセット */
*,
*::before,
*::after {
  /* paddingとborderをwidth/heightに含めることで、直感的なサイズ指定を可能にする */
  box-sizing: border-box; 
  /* ブラウザがデフォルトで設定するマージンとパディングをリセット */
  margin: 0; 
  padding: 0; 
  /* ブラウザがデフォルトで設定するボーダーをリセット */
  border: 0; 
  /* inputやbuttonなどのフォーム要素が親のフォントスタイルを継承するようにする */
  font: inherit; 
  /* 垂直方向の揃え方を基準線に統一し、意図しないズレを防ぐ */
  vertical-align: baseline; 
}

/* html要素の基本設定 */
html {
  /* 1rem = 10pxとして計算しやすくするため、ルートのフォントサイズを62.5%に設定 (16px * 0.625 = 10px) */
  font-size: 62.5%; 
  /* スマートフォンを横向きにした際の、ブラウザによる自動的な文字サイズ調整を無効化 */
  -moz-text-size-adjust: none; 
  -webkit-text-size-adjust: none; 
  text-size-adjust: none; 
  overscroll-behavior-y: contain;
}

/* body要素の基本設定 */
body {
  /* コンテンツが少なくてもフッターが画面下部に固定されるように、最低限の高さを画面の高さに設定 */
  min-height: 100vh; 
  /* テキストのアンチエイリアシングを有効にし、滑らかに表示する */
  -webkit-font-smoothing: antialiased;
  /* 基本の行の高さをフォントサイズと同じにし、要素ごとの調整を容易にする */
  line-height: 1;
  overscroll-behavior-y: contain;
}

/* 見出し要素の行の高さを調整し、テキストの上下の詰まりをなくす */
h1, h2, h3, h4, button, input, label {
  line-height: 1.1;
}

/* 水平線(hr)のスタイルをリセットし、シンプルな線にする */
hr {
  height: 0; /* 要素自体の高さをなくす */
  color: inherit; /* 親要素の文字色を継承 */
  border-top: 1px solid; /* 上罫線で1pxの線を描画 */
  margin: 1em 0; /* 上下に適切な余白を設ける */
}

/* リスト要素のマーカー（・や数字）を非表示にする */
ul,
ol {
  list-style: none;
}
summary {
  display: block;
  list-style: none;
}
summary::-webkit-details-marker {
  display:none;
}

/* 画像や動画などがコンテナからはみ出さないように設定 */
img,
picture,
video,
canvas,
svg {
  display: block; /* インライン要素の隙間をなくす */
  max-width: 100%; /* 親要素の幅を超えないようにする */
  height: auto;
}

/* テーブルの罫線を二重線からすっきりした一重線にする */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* aタグのデフォルトスタイルをリセット */
a {
  text-decoration: none; /* 下線を非表示に */
  color: inherit; /* 親要素の文字色を継承 */
}

/* ページ内リンクでジャンプした際に、要素が固定ヘッダーなどに隠れるのを防ぐ */
:target {
  scroll-margin-block: 5ex; /* スクロール停止位置を上部に5ex分ずらす */
}