<div class="cp_ipcheck02">
  <label><input type="checkbox" class="option-input02 checkbox" checked />ネコ</label>
  <label><input type="checkbox" class="option-input02 checkbox" />イヌ</label>
  <label><input type="checkbox" class="option-input02 checkbox" />ウサギ</label>
  <label><input type="checkbox" class="option-input02 checkbox" disabled />リス</label>
</div>

.cp_ipcheck02 label {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.cp_ipcheck02 .option-input02 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  color: #ffffff;
  background: #d7cbcb;
  cursor: pointer;
  transition: all 0.15s ease-out;
  /*デフォルト値を無効に*/
  border: none;
  outline: none;
  appearance: none;
}
/*hover時のチェックボックスの色*/
.cp_ipcheck02 .option-input02:hover {
  background: #d6a9a9;
}
/*checked時のチェックボックスの色*/
.cp_ipcheck02 .option-input02:checked {
  display: flex;
  width: 30px;
  height: 30px;
  background: #da3c41;
}
/*checked時のチェックボックスのチェックマーク*/
.cp_ipcheck02 .option-input02:checked::before {
  position: absolute;
  font-size: 130%;
  content: '✔';
}
.cp_ipcheck02 .option-input02:checked::after {
  position: relative;
  content: '';
  display: block;
  background: #da3c41;
  animation: click-wave 0.8s ease;
}
/*disabled時の設定*/
.cp_ipcheck02 .option-input02:disabled {
  display: flex;
  cursor: not-allowed;
  background: #b8b7b7;
}
.cp_ipcheck02 .option-input02:disabled::before {
  position: absolute;
  font-size: 130%;
  content: '✖︎';
}
/*クリックした時のアニメーション*/
@keyframes click-wave {
  0% {
    width: 30px;
    height: 30px;
    opacity: 0.35;
    border-radius: 40%;
  }
  100% {
    transform: scale(8);
    opacity: 0;
    border-radius: 50%;
  }
}