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

/* 1. ボックスモデルの計算を直感的にする */
*, *::before, *::after {
    box-sizing: border-box;
}

/* 2. デフォルトの余白（マージン）をリセット */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
/*    outline: 1px solid red;*/
}

/* 3. リストのデフォルトスタイルを無効化 */
ul, ol {
    list-style: none;
}

/* 4. bodyに基本的なタイポグラフィと行高を設定 */
body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 5. 画像や動画などのメディア要素をレスポンシブ対応にする */
img, picture, video, canvas {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}

/* 6. フォーム要素のフォントを親要素（bodyなど）から継承させる */
input, button, textarea, select {
    font: inherit;
}

/* 7. テキストの折り返しを防ぐ（URLや長過ぎる英単語の突き抜け防止） */
p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}