/* --- Custom Form -------------------------------------------- */
#custom-form { 
  text-align:left; 
  margin:0px;
  padding:0px;
}
/* ------------------------------------------------------------ */

/* --- TextBox ------------------------------------------------ */

/*

<input type="text" name="" value="">
<input type="date" value="2020-08-08">
<input type="password" value="1234">

*/

#custom-form input[type='text'], 
#custom-form input[type='date'], 
#custom-form input[type='number'], 
#custom-form input[type='password'] {
  font-family: '游ゴシック体', 'Yu Gothic', YuGothic, sans-serif;
  padding: 5px;
  border-radius: 5px;
  border: 1px solid #ccc;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
/* ------------------------------------------------------------ */

/* --- RadioButton -------------------------------------------- */

/*

<div class="radio-wrap">
  <label>
    <input type="radio" name="radio" value="radiobtn">
    <span>ラジオボタン1</span>
  </label>
  
  <label>
    <input type="radio" name="radio" value="radiobtn">
    <span>ラジオボタン2</span>
  </label>
</div>

*/

#custom-form .radio-wrap label {
  margin: 0.8em 5px;
  display: inline-block;
  font-family: '游ゴシック体', 'Yu Gothic', YuGothic, sans-serif;
}

#custom-form .radio-wrap input {
  display: none;
}

#custom-form .radio-wrap input + span {
  padding-left: 22px;
  position:relative;
}

#custom-form .radio-wrap input + span::before {
  content: "";
  background-image: url(./img/box_off.png);
  background-size: contain;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 18px;
  height: 18px;
}

#custom-form .radio-wrap input:checked + span {
  color: #487cff;
  /* font-weight: bold; */
}

#custom-form .radio-wrap input:checked + span::after {
  content: "";
  background-image: url(./img/box.png);
  background-size: contain;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 18px;
  height: 18px;
}
/* ------------------------------------------------------------ */

/* --- CheckBox ----------------------------------------------- */

/*

<div class="checkbox-wrap">
  <label>
    <input type="checkbox" name="" value="checkbox1">
    <span>チェックボックス1</span>
  </label>
  
  <label>
    <input type="checkbox" name="" value="checkbox2">
    <span>チェックボックス2</span>
  </label>
</div>

*/

#custom-form .checkbox-wrap label {
  margin: 5px 5px 5px 5px;
  display: inline-block;
  font-family: '游ゴシック体', 'Yu Gothic', YuGothic, sans-serif;
}

#custom-form .checkbox-wrap input {
  display: none;
}

#custom-form .checkbox-wrap input + span {
  padding-left: 22px;
  position:relative;
}

#custom-form .checkbox-wrap input + span::before {
  content: "";
  background-image: url(./img/circle_off.png);
  background-size: contain;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 18px;
  height: 18px;
}

#custom-form .checkbox-wrap input:checked + span {
  color: #487cff;
  /* font-weight: bold; */
}

#custom-form .checkbox-wrap input:checked + span::after {
  content: "";
  background-image: url(./img/circle.png);
  background-size: contain;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 18px;
  height: 18px;
}
/* ------------------------------------------------------------ */

/* --- SelectBox ---------------------------------------------- */

/*

<select name="">
  <option value="select1">セレクト1</option>
  <option value="select2">セレクト2</option>
  <option value="select3">セレクト3</option>
  <option value="select4">セレクト4</option>
  <option value="select5">セレクト5</option>
  <option value="select6">セレクト6</option>
</select>

*/

#custom-form select {
  font-family: '游ゴシック体', 'Yu Gothic', YuGothic, sans-serif;
  outline:none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding: 5px 25px 5px 5px;
  border:1px solid #ccc;
  background-color: #fff;
  background: url(./img/arrow.png) right 50% no-repeat #FFFFFF;
  border-radius: 5px;
}

#custom-form select::-ms-expand {
  display: none;
}
/* ------------------------------------------------------------ */

/* --- textarea ----------------------------------------------- */

/*

<textarea name="name" rows="8" cols="80"></textarea>

*/

#custom-form textarea {
  font-family: '游ゴシック体', 'Yu Gothic', YuGothic, sans-serif;
  padding: 5px;
  border-radius: 5px;
  border: 1px solid #ccc;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
/* ------------------------------------------------------------ */

/* --- submit ------------------------------------------------- */

/*

<input type="submit" name="save_code" value="送信" class="confirm">

*/

#custom-form input[type='submit'].confirm {
  border: none;
  display: block;
  width: 100%;
  max-width: 300px;
  padding: 10px;
  border-radius: 5px;
  background-color: #333;
  color: #fff;
  font-weight: bold;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  margin: 0 auto;
  font-family: '游ゴシック体', 'Yu Gothic', YuGothic, sans-serif;
}

#custom-form input[type='submit'].confirm:hover {
  background-color: #5096FF;
}
/* ------------------------------------------------------------ */