form チェックボックス

<div class="form__checkbox">
<!-- labelで囲んだ範囲を押すとボタンが反応する -->
  <label>
    <input type="checkbox">
    <span>個人情報保護方針に同意する</span>
  </label>
</div>

.form__checkbox {
  margin-top: 40px;
  text-align: center;
  font-weight: bold;

  [type="checkbox"] {
    // 自由度の低いデフォルトのボタンを見えなくする
    display: none;
  }

  // 擬似要素でチェックボックスを作成する
  span {
    position:  relative;
    font-weight: bold;
    margin-left: 41px;

    // 箱部分
    &::after {
      position: absolute;
      top: 0;
      left: -41px;;
      content: "";
      border: 1px solid #707070;
      width: 20px;
      height: 20px;
    }

    // チェック部分
    // 選択されていない時は見えなくする
    &::before {
      position: absolute;
      top: 0;
      left: -35px;;
      content: "";
      border: 2px solid #3B69FF;
      width: 8px;
      height: 15px;
      border-top: none;
      border-left: none;
      transform: rotate(45deg);
      display: none;
    }
  }

  // チェックされているチェックボックスの次のspan要素
  [type="checkbox"]:checked + span {
    &::before {
      display: block;
    }
  }
}