<div class="cp_ipcheck08">
  <ul>
    <li class="list_item">
      <input type="checkbox" class="option-input" id="d_ch1" checked />
      <label for="d_ch1">ネコ</label>
    </li>
    <li class="list_item">
      <input type="checkbox" class="option-input" id="d_ch2" />
      <label for="d_ch2">イヌ</label>
    </li>
    <li class="list_item">
      <input type="checkbox" class="option-input" id="d_ch3" />
      <label for="d_ch3">ウサギ</label>
    </li>
    <li class="list_item">
      <input type="radio" class="option-input" name="cpipr08" id="c_rb4" disabled/>
      <label for="c_rb4">リス</label>
    </li>
  </ul>
</div>

.cp_ipcheck08 {
  margin: 2em auto;
}
.cp_ipcheck08 ul {
  list-style: none;
}
.cp_ipcheck08 .list_item {
  margin-bottom: 10px;
}
/*チェックボックスの設定*/
.cp_ipcheck08 .option-input {
  display: none;
}
/*ラベルの設定*/
.cp_ipcheck08 label {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: all 0.25s linear;
}
.cp_ipcheck08 label::before {
  display: block;
  width: 20px;
  height: 20px;
  content: '';
  margin-right: 20px;
  transition: all 0.25s linear;
  border: 4px solid #da3c41;
}
/*hover時のテキスト色と動き*/
.cp_ipcheck08 .list_item:hover label {
  color: #da3c41;
}
.cp_ipcheck08 .list_item:hover label::before {
  margin-right: 40px;
}
/*checked時の設定*/
.cp_ipcheck08 .option-input:checked + label {
  color: #da3c41;
}
.cp_ipcheck08 .option-input:checked + label::before {
  margin-right: 40px;
  background: #da3c41;
}
/*disabledの設定*/
.cp_ipcheck08 .option-input:disabled + label {
  color: #b8b7b7;
  cursor: not-allowed;
}
.cp_ipcheck08 .option-input:disabled + label::before {
  background: #dddddd;
  border: 4px solid #b8b7b7;
}