/*
  Modern CSS Reset
  ベース: Josh W. Comeau / Andy Bell
*/
*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

body {
  -webkit-font-smoothing: antialiased;

}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

ul, ol {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
}

/* 5. フォーム要素の共通リセット (Safariの独自スタイルを解除) */
input, 
button, 
textarea, 
select {
  font: inherit;
  /* Safari/Chromeのデフォルト装飾をリセット */
  -webkit-appearance: none;
  appearance: none;
  /* 角丸やボーダーを一度フラットにする */
  border-radius: 0;
  border: 1px solid #ccc; /* 完全に消すと見えなくなるので、薄く枠線を引くのが一般的 */
  background-color: transparent;
}

/* チェックボックスやラジオボタンは appearance: none すると消えてしまうので、
   個別にスタイルを当てるか、以下のように除外して書くのが安全です */
input[type="checkbox"],
input[type="radio"] {
  -webkit-appearance: checkbox;
  appearance: checkbox;
}

/* iOS Safariで入力時にズームされるのを防ぐ (フォントサイズ16px以上に設定) */
@media screen and (max-width: 768px) {
  input, textarea, select {
    font-size: 16px;
  }
}