/* ==========================================================================
   リセット CSS

   ブラウザのデフォルトスタイルを統一する。
   「何もしていないのに余白がある」「ブラウザによって見た目が違う」を防ぐ。

   なぜ全部消すのか:
     ブラウザ（Chrome/Firefox/Safari）はそれぞれ独自のデフォルトスタイルを持つ。
     リセットで一度フラットにしてから独自スタイルを積み上げる方が、
     「なぜここに余白があるのか分からない」という迷いが減る。
   ========================================================================== */

/* すべての要素に border-box を適用する
   デフォルトの content-box は padding/border を幅に含まないため、
   「width: 100% のはずなのに親からはみ出す」バグの原因になりやすい */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* ブラウザが独自に設定する margin/padding をリセット */
body,
h1, h2, h3, h4, h5, h6,
p,
ul, ol,
figure,
blockquote,
dl, dd,
fieldset {
    margin:  0;
    padding: 0;
}

/* リストの黒丸・数字をリセット（デザインで使う場合は個別に再定義） */
ul,
ol {
    list-style: none;
}

/* 画像のデフォルト「インライン（inline）」を解除し、余計な下余白を防ぐ
   max-width: 100% で親要素をはみ出さないようにする */
img,
picture,
video,
canvas,
svg {
    display:   block;
    max-width: 100%;
    height:    auto;
}

/* フォーム要素はデフォルトで body のフォントを継承しないため明示的に継承させる */
input,
button,
textarea,
select {
    font: inherit;
}

/* テーブルのセル間スペースをリセット */
table {
    border-collapse: collapse;
    border-spacing:  0;
}