<div class="cp_ipcheck06">
  <ul>
    <li class="list_item">
    <label><input type="checkbox" class="option-input06" checked />ネコ</label>
    </li>
    <li class="list_item">
    <label><input type="checkbox" class="option-input06" />イヌ</label>
    </li>
    <li class="list_item">
    <label><input type="checkbox" class="option-input06" />ウサギ</label>
    </li>
  </ul>
</div>

.cp_ipcheck06 {
  margin: 2em auto;
}
.cp_ipcheck06 ul {
  list-style: none;
}
.cp_ipcheck06 .list_item {
  margin-bottom: 10px;
}
/*ラベルの設定*/
.cp_ipcheck06 label {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
}
/*チェックボックスの設定*/
.cp_ipcheck06 .option-input06 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 22px;
  /*デフォルト値を無効に*/
  outline: none;
  appearance: none;
}
/* ×マークの設定*/
.cp_ipcheck06 .option-input06:before,
.cp_ipcheck06 .option-input06:after {
  position: absolute;
  top: 10px;
  left: -10px;
  width: 20px;
  height: 20px;
  content: '';
  transition: transform 0.4s ease-in-out, border-top 0.4s ease-in-out, border-bottom 0.4s ease-in-out, border-left 0.1s 0.3s ease-in-out, border-right 0.1s 0.3s ease-in-out;
  transform: translateX(0) translateY(-0.5rem);
  border: 2px solid #f2f2f2;
  border-top-style: none;
  border-right-style: none;
}
.cp_ipcheck06 .option-input06:after {
  border: 2px solid #f2f2f2;
  border-bottom-style: none;
  border-left-style: none;
}
/*checked時の設定*/
.cp_ipcheck06 .option-input06:checked:before {
  border-color: #e74c3c;
  border-left-style: none;
  transform: rotate(-45deg) translateX(6px) translateY(-14px);
}
.cp_ipcheck06 .option-input06:checked:after {
  border-color: #e74c3c;
  border-right-style: none;
  transform: rotate(45deg) translateX(-4px) translateY(3px);
}