/* ここにCSSを記述します */
body {
  font-family: 'Noto Sans JP', sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f4f4f4;
  color: #333;
  line-height: 1.6;
}
header {
  background-color: #d90033;
  /* ドコモカラーをイメージ */
  color: white;
  padding: 15px 20px;
  text-align: center;
}
header h1 {
  margin: 0;
  font-size: 1.5em;
}
header p {
  font-size: 0.9em;
  margin-top: 5px;
}
.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}
section {
  background-color: white;
  margin-bottom: 20px;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
h2 {
  color: #000000;
  font-size: 1.3em;
  margin-bottom: 15px;
  border-bottom: 2px solid #eee;
  padding-bottom: 5px;
}
h3 {
  color: #333;
  font-size: 1.1em;
  margin-top: 20px;
  margin-bottom: 10px;
}
h4 {
  color: #d90033;
  font-size: 1.1em;
  margin-top: 20px;
  margin-bottom: 10px;
  text-align: center;
}
ul {
  list-style-type: disc;
  padding-left: 20px;
}
li {
  margin-bottom: 8px;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 20px auto;
  border-radius: 4px;
}
.hero {
  text-align: center;
  padding: 40px 20px;
  background-color: #e0f2f7;
  /* 明るい背景色 */
  margin-bottom: 20px;
  border-radius: 8px;
}
.hero h2 {
  color: #0056b3;
  font-size: 1.8em;
  margin-bottom: 10px;
  border-bottom: none;
  padding-bottom: 0;
}
.caution-list ol {
  list-style-type: decimal;
  padding-left: 20px;
}
.caution-list li {
  margin-bottom: 10px;
}
footer {
  text-align: center;
  padding: 20px;
  font-size: 0.8em;
  color: #777;
  background-color: #f0f0f0;
  margin-top: 30px;
}
img[src="img/accident-warning.webp"] {
  height: 50px;
  /* width: auto; もしくは width: 100%; など、必要に応じて幅も指定して縦横比を調整 */
  /* object-fit: contain; などで、画像の表示方法を調整することも検討 */
}
/* 事故を起こしてしまったら のolタグに適用するスタイル */
.caution-list ol.circle-numbers {
  /* olタグにcircle-numbersクラスを追加した場合 */
  list-style: none;
  /* デフォルトの数字を非表示にする */
  counter-reset: my-counter;
  /* カウンターをリセット */
  padding-left: 0;
  /* 左パディングをリセット */
  margin-left: 0;
  /* マージンをリセット */
}
.caution-list ol.circle-numbers li {
  counter-increment: my-counter;
  /* 各li要素でカウンターを増やす */
  position: relative;
  /* 疑似要素の位置決めのために必要 */
  padding-left: 40px;
  /* 数字とテキストの間にスペースを確保 */
  margin-bottom: 15px;
  /* 各項目の間隔を調整 */
  line-height: 1.4;
  /* 行の高さを調整 */
}
.caution-list ol.circle-numbers li::before {
  content: counter(my-counter);
  /* カウンターの値を表示 */
  position: absolute;
  left: 0;
  top: 0;
  background-color: #d90033;
  /* 赤丸の背景色 */
  color: white;
  /* 白抜きの文字色 */
  width: 28px;
  /* 丸の幅 */
  height: 28px;
  /* 丸の高さ */
  border-radius: 50%;
  /* 丸にする */
  display: flex;
  /* 数字を中央揃えにするため */
  justify-content: center;
  /* 水平方向の中央揃え */
  align-items: center;
  /* 垂直方向の中央揃え */
  font-weight: bold;
  font-size: 0.9em;
  /* 数字のフォントサイズ */
}
.highlight-red {
  color: #d90033;
  /* 赤色 */
  font-weight: bold;
  /* 必要であれば太字にする */
}
.image-container {
  display: flex; /* 画像を横並びにする */
  justify-content: center; /* 画像全体をコンテナの中央に配置する */
  align-items: center; /* 画像を垂直方向の中央に配置する（任意） */
  gap: 10px; /* 画像間のスペース（任意で調整してください） */
}
.image-container img {
  width: 35%; /* 親要素（.image-container）に対しての幅 */
  max-width: 100px; /* 画像が大きくなりすぎるのを防ぐため、最大幅を指定（任意で調整してください） */
  height: auto; /* 高さは自動で調整してアスペクト比を保つ */
  object-fit: contain; /* 画像が指定した幅/高さに収まるように調整し、アスペクト比を保つ */
  /* .image-container 内の img には display: block; や margin: 20px auto; は不要になることが多いので、必要に応じて調整 */
  margin: 0; /* display:flex の影響で auto マージンが不要になるためリセット */
}