<div class="cp_ipradio">
	<ul>
		<li class="list_item">
		<label>
		<input type="radio" class="option-input"  name="cpipr05" checked>
		ネコ
		</label>
		</li>
		<li class="list_item">
		<label>
		<input type="radio" class="option-input" name="cpipr05">
		イヌ
		</label>
		</li>
		<li class="list_item">
		<label>
		<input type="radio" class="option-input" name="cpipr05">
		ウサギ
		</label>
		</li>
	</ul>
</div>

.cp_ipradio05 {
	width: 90%;
	margin: 2em auto;
	text-align: left;
}
.cp_ipradio05 ul {
	margin: 0.5rem 0.5rem 2rem 0.5rem;
	padding: 0.5rem 1rem;
	list-style: none;
	border: 1px solid #cccccc;
}
.cp_ipradio05 .list_item {
	margin: 0 0 0.5rem 0;
	padding: 0;
}
.cp_ipradio05 label {
	line-height: 135%;
	position: relative;
	margin: 0.5rem;
	cursor: pointer;
}
.cp_ipradio05 .option-input {
	position: relative;
	margin: 0 1rem 0 0;
	cursor: pointer;
}
.cp_ipradio05 .option-input:before {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0.125rem;
	width: 0.75rem;
	height: 0.75rem;
	content: '';
	-webkit-transition: -webkit-transform 0.4s cubic-bezier(0.45, 1.8, 0.5, 0.75);
	        transition:         transform 0.4s cubic-bezier(0.45, 1.8, 0.5, 0.75);
	-webkit-transform: scale(0, 0);
	        transform: scale(0, 0);
	border-radius: 50%;
	background: #da3c41;
}
.cp_ipradio05 .option-input:checked:before {
	-webkit-transform: scale(1, 1);
	        transform: scale(1, 1);
}
.cp_ipradio05 .option-input:after {
	position: absolute;
	top: -0.25rem;
	left: -0.125rem;
	width: 1rem;
	height: 1rem;
	content: '';
	border: 2px solid #f2f2f2;
	border-radius: 50%;
	background: #ffffff;
}