<div class="cp_ipcheck">
	<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>
</div>

.cp_ipcheck {
	width: 90%;
	margin: 2em auto;
	text-align: left;
}
@keyframes click-wave {
	0% {
		position: relative;
		width: 30px;
		height: 30px;
		opacity: 0.35;
	}
	100% {
		width: 200px;
		height: 200px;
		margin-top: -80px;
		margin-left: -80px;
		opacity: 0;
	}
}
.cp_ipcheck .option-input02 {
	position: relative;
	top: 13.33333px;
	right: 0;
	bottom: 0;
	left: 0;
	width: 30px;
	height: 30px;
	margin-right: 0.5rem;
	cursor: pointer;
	transition: all 0.15s ease-out 0s;
	color: #ffffff;
	border: none;
	outline: none;
	background: #d7cbcb;
	-webkit-appearance: none;
	        appearance: none;
}
.cp_ipcheck .option-input02:hover {
	background: #d6a9a9;
}
.cp_ipcheck .option-input02:checked {
	background: #da3c41;
}
.cp_ipcheck .option-input02:checked::before {
	font-size: 20px;
	line-height: 30px;
	position: absolute;
	display: inline-block;
	width: 30px;
	height: 30px;
	content: '✔';
	text-align: center;
}
.cp_ipcheck .option-input02:checked::after {
	position: relative;
	display: block;
	content: '';
	-webkit-animation: click-wave 0.65s;
	        animation: click-wave 0.65s;
	background: #da3c41;
}
.cp_ipcheck .option-input02.radio {
	border-radius: 50%;
}
.cp_ipcheck .option-input02.radio::after {
	border-radius: 50%;
}
.cp_ipcheck label {
	line-height: 40px;
	display: block;
}
.cp_ipcheck .option-input02:disabled {
	cursor: not-allowed;
	background: #b8b7b7;
}
.cp_ipcheck .option-input02:disabled::before {
	font-size: 20px;
	line-height: 30px;
	position: absolute;
	display: inline-block;
	width: 30px;
	height: 30px;
	content: '✖︎';
	text-align: center;
}