input[type="radio"],
input[type="checkbox"] {
margin-right: 0.3em;
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
.ll_radio {
width: 1.4em;
height: 1.4em;
}
ul.check_btns {
width: 95%;
margin: 5px auto;
}
ul.check_flex {
display: flex;
flex-direction: column;
}
ul.check_flex02 {
flex-direction: row;
}
ul.check_flex li {
position: relative;
display: block;
width: 90%;
margin: 0 auto;
font-size: 130%;
line-height: 1.3;
}
ul.check_flex li input[type="radio"] {
position: absolute;
visibility: hidden;
}
ul.check_flex li label {
position: relative;
display: block;
padding: 15px 5px 15px 85px;
border-radius: 10px;
margin: 10px auto;
font-size: 150%;
font-weight: bold;
cursor: pointer;
border: 3px solid #0fbcbf;
-webkit-transition: all 0.25s linear;
}

ul.check_flex02 li label {
margin: 10px;
}

ul.check_flex li label:hover {
color: #fff;
background: #25B2B4;
border: 3px solid #ffe920;
}

.check_btns input[type="radio"]:checked ~ label,
.check_btns input[type="checkbox"]:checked ~ label {
color: #fff;
background: #D3405C;
border: 5px solid #ffe920;
}
.check_btns03 input[type="radio"]:checked ~ label {
background: #E0A9B3;
border: 5px solid #ffe920;
}
.check_btns04 input[type="radio"]:checked ~ label {
background: #1D5DCD;
border: 5px solid #ffe920;
}
.check_btns input[type="radio"],
.check_btns input[type="checkbox"] {
display: none;
}


.check_btns input[type="radio"] + label::before,
.check_btns input[type="checkbox"] + label::before{
position: absolute;
top: 10px;
left: 2%;
display: block;
width: 50px;
height: 50px;
content: "";
background: #fff;
border:4px solid #000;
border-radius: 3px;
transform: translate(0%, 0%);
}
.check_btns input[type="radio"] + label::after,
.check_btns input[type="checkbox"] + label::after {
position: absolute;
top: 10px;
left: 4%;
display: block;
width: 20px;
height: 40px;
content: "";
border-right: 10px solid #ef001d;
border-bottom: 10px solid #ef001d;
transform: rotate(45deg) scale(0, 0) translate(-50%, -50%);
transition: 0.3s;
}
.check_btns02 input[type="radio"] + label::before {
top: 10px;
}
.check_btns02 input[type="radio"] + label::after {
top: 10px;
}
.check_btns input[type="radio"]:checked + label::after,
.check_btns input[type="checkbox"]:checked + label::after {
transform: rotate(45deg) scale(1, 1);
}
/* 無効化されたときの見た目 */
.check_btns input[disabled] + label {
opacity: 0.4;
pointer-events: none;
}
@media screen and (max-width: 600px) {
input[type="radio"],
input[type="checkbox"] {
margin-right: 0.1em;
-webkit-transform: scale(1.1);
transform: scale(1.1);}

.check_btns input[type="radio"] + label::before {
top: 30px;
left: 2%;
}
.check_btns input[type="radio"] + label::after {
top: 30px;
left: 7%;
}
.check_btns02 input[type="radio"] + label::before {
top: 7px;
}
.check_btns02 input[type="radio"] + label::after {
top: 5px;
}
ul.check_flex02 {
flex-direction: column;
}
ul.check_flex02 li label {
margin: 10px auto;
}
ul.check_flex li {
width: 95%;
}
ul.check_flex li label {
padding: 20px 5px 15px 80px;
margin: 10px auto;
font-size: 130%;
font-weight: bold;
cursor: pointer;
border: 3px solid #0fbcbf;
border-radius: 10px;
-webkit-transition: all 0.25s linear;
}
}