body {
  padding-top: 20px;
  width: 980px;
}
h1,h2,h3,h4 {
  padding-left: 10px;
}
p {
  padding-left: 20px;
}

ol li {
  list-style-type: none;
  counter-increment: cnt;
}

ol li::before {
  content: "("counter(cnt)") ";
}

.site-header{
  top: 0;
  left: 0;
  width: 980px;
  font-size: 1.2em;
  background-color: #00bcd4;
  position: fixed;
}
.contents{
  margin-top: 20px;
}
.flex-container {
    display:flex;
  }

.shakenhiyou ol{
    list-style-type: none;
    counter-reset: number;/* カウンターを初期化 */
  }
  .shakenhiyou li{
    position: relative;
  }
  /* beforeでカウンターを作成 */
  .shakenhiyou li::before {
    content: counter(number)" ";
    counter-increment: number;
    padding: 0 0.2em;
  }
  /* afterで○を作る */
  .shakenhiyou li::after {
    content: '';
    /* 配置を調整 */
    position: absolute;
    display: block;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    /* ○を作る */
    width: 1em;
    height: 1em;
    border: 1px solid #000;
    border-radius: 50%;
  }
  .color_red{
    color: red;
  }