/* --- 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='time'], 
#custom-form input[type='number'], 
#custom-form input[type='password'] {
  font-family: '游ゴシック体', 'Yu Gothic', YuGothic, sans-serif;
  font-weight:bold;
  padding: 5px;
  border-radius: 5px;
  border: 1px solid #ccc;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

#custom-form .text-wrap { margin:0.5em 0px; user-select:none; cursor:pointer; }
/* ------------------------------------------------------------ */

/* --- 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;
  cursor:pointer;
  user-select:none;
}

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

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


#custom-form .radio-wrap span {
  display:inline-block;
  line-height:1.25;
}


#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: 0.5em 5px;
  display: inline-block;
  font-family: '游ゴシック体', 'Yu Gothic', YuGothic, sans-serif;
  user-select:none; 
  cursor:pointer;
}

#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;
  font-weight:bold;
  outline:none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding: 8px 25px 7px 5px;
  border:1px solid #ccc;
  background: url(./img/arrow.png) right 50% no-repeat;
  background-color: #fff;
  border-radius: 5px;
  cursor: pointer;
}

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

#custom-form select option {
  font-family: '游ゴシック体', 'Yu Gothic', YuGothic, sans-serif;
  font-weight:bold;
}

/* ------------------------------------------------------------ */

/* --- 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='button'].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='button'].confirm:hover, 
#custom-form input[type='submit'].confirm:hover {
  background-color: #5096FF;
}


#custom-form input[type='button'].confirm-half, 
#custom-form input[type='submit'].confirm-half {
  border: none;
  display: inline-block;
  width: 50%;
  max-width: 150px;
  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;
  white-space:nowrap;
}

#custom-form input[type='button'].confirm-half.green:hover, 
#custom-form input[type='submit'].confirm-half.green:hover {
  background-color: #47AE78;
}

#custom-form input[type='button'].confirm-half.red:hover, 
#custom-form input[type='submit'].confirm-half.red:hover {
  background-color: #E44F3A;
}

#custom-form .confirm-half-wrap {
  text-align:center;
}

/* ------------------------------------------------------------ */

/* ------------------------------------------------------------ */
#mukae-list {  }
#mukae-list label { margin:5px 10px !important;}
/* ------------------------------------------------------------ */