@charset "utf-8";
/* CSS Document */
/* ラジオボタンとチェックボックスを装飾するCSS */

/*css radio -------------------------------------------------------- s*/
.radio_style_input{
  display: none;
}
.radio_style_input + label{
  padding-left: 20px;
  position:relative;
  margin-right: 20px;
}
.radio_style_input + label::before{
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 15px;
  height: 15px;
  border: 1px solid #999;
  border-radius: 50%;
}
.radio_style_input:checked + label{
  color: #ff1463; /* ラベルの色 */
}
.radio_style_input:checked + label::after{
  content: "";
  display: block;
  position: absolute;
  top: 2px;
  left: 2px;
  width: 11px;
  height: 11px;
  background: #ff1463; /* ラジオボタンの色 */
  border-radius: 50%;
}


/* css checkbox -------------------------------------------------------- */
.checkbox_style_input{
  display: none;
}
.checkbox_style_parts{
  padding-left: 20px;
  position:relative;
  margin-right: 20px;
}
.checkbox_style_parts::before{
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 15px;
  height: 15px;
  border: 1px solid #999;
  border-radius: 4px;
}
.checkbox_style_input:checked + .checkbox_style_parts{
  color: #ff1463; /* ラベルの色 */
}
.checkbox_style_input:checked + .checkbox_style_parts::after{
  content: "";
  display: block;
  position: absolute;
  top: -2px;
  left: 5px;
  width: 7px;
  height: 14px;
  transform: rotate(40deg);
  border-bottom: 3px solid #ff1463; /* チェックの色 */
  border-right: 3px solid #ff1463; /* チェックの色 */
}