@charset "utf-8";

/*********************************************
 * reset
 ******************************************* */

input[type="radio"]{
  display: none;
}
input[type="radio"] + label{
  padding-left: 20px; position:relative; margin-right: 20px;
}
input[type="radio"] + label::before{
  content: ""; display: block; position: absolute; top: 3px; left: 0; width: 15px; height: 15px;
  border: 1px solid #999; border-radius: 50%; background-color:#f8f8f8;
}
input[type="radio"]:checked + label{ color: #000000; }
input[type="radio"]:checked + label::after{
  content: ""; display: block; position: absolute; top: 6px; left: 3px; width: 11px; height: 11px; background: #666666; border-radius: 50%;
}

input[type="checkbox"]{ display: none;}
.checkbox01-parts{ padding-left: 20px; position:relative; margin-right: 20px; }
.checkbox01-parts::before{
  content: ""; display: block; position: absolute; top: 3px; left: 0px; width: 15px; height: 15px;
  border: 1px solid #999; border-radius: 4px; background-color:#f8f8f8;
}
input[type="checkbox"]:checked + .checkbox01-parts{ color: #000000; }
input[type="checkbox"]:checked + .checkbox01-parts::after{
  content: ""; display: block; position: absolute; top: -2px; left: 5px; width: 7px; height: 14px;
  transform: rotate(40deg);
  border-bottom: 3px solid #333333;
  border-right: 3px solid #333333;
}

select {
  background-color: #f8f8f8;
  border: thin solid #adadad;
/*  border-radius: 4px;*/
  display: inline-block;
  font: inherit;
  line-height: 0.95rem;
  padding: 0.4em 0.5em 0.4em 0.5em;

  /* reset */

  margin: 0;      
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;

  /* arrows */

  background-image:
    linear-gradient(45deg, transparent 50%, gray 50%),
    linear-gradient(135deg, gray 50%, transparent 50%),
    linear-gradient(to right, #ccc, #ccc);
  background-position:
    calc(100% - 20px) calc(0.7em + 2px),
    calc(100% - 15px) calc(0.7em + 2px),
    calc(100% - 2.0em) 0.3em;
  background-size:
    7px 7px,
    7px 7px,
    1px 1.2em;
  background-repeat: no-repeat;
}
select:focus {
  background-image:
    linear-gradient(45deg, green 50%, transparent 50%),
    linear-gradient(135deg, transparent 50%, green 50%),
    linear-gradient(to right, #ccc, #ccc);
  background-position:
    calc(100% - 15px) 0.7em,
    calc(100% - 20px) 0.7em,
    calc(100% - 2.0em) 0.3em;
  background-size:
    7px 7px,
    7px 7px,
    1px 1.2em;
  background-repeat: no-repeat;
  border-color: green;
  outline: 0;
}