/*
inputフォーム
*/
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="number"] {
  font-size: 1rem;
  padding: 0.55rem;
  border: 1px solid #c5c5c5;
  border-radius: 0.25rem;
  -webkit-appearance: none;
  appearance: none;
  outline: 0;
  color: #555459;
  width: 300px;
  margin: 0 0 0.5rem;
  -webkit-transition: all 0.07s ease-out 0.0000001ms;
  -moz-transition: all 0.07s ease-out 0.0000001ms;
  transition: all 0.07s ease-out 0.0000001ms;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus {
  font-size: 1rem;
  padding: 0.55rem;
  border: 1px solid #73b7e6;
  border-radius: 0.25rem;
  -webkit-appearance: none;
  appearance: none;
  outline: 0;
  color: #555459;
  width: 300px;
  margin: 0 0 0.5rem;
  -webkit-transition: all 0.07s ease-out 0.0000001ms;
  -moz-transition: all 0.07s ease-out 0.0000001ms;
  transition: all 0.07s ease-out 0.0000001ms;
}

/*
ボタン
*/
input[type="submit"],
input[type="button"],
button {
  width: 100px;
  height: 35px;
  font-size: 13px;
  text-align: center;
  padding: 5px 0;
  color: #fff;
  background-color: #42b72a;
  border-color: #42b72a;
  border-radius: 5px;
  border: none;
  -webkit-appearance: none;
}

input[type="submit"]:hover,
input[type="button"]:hover,
button:hover {
  width: 100px;
  height: 35px;
  font-size: 13px;
  text-align: center;
  padding: 5px 0;
  color: #fff;
  background-color: #3ba425;
  border-color: #3ba425;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  -webkit-appearance: none;
}

/*
削除ボタン
*/
.delete input[type="submit"],
.delete input[type="button"],
.delete button {
  color: #fff;
  background: red;
}

.delete input[type="submit"]:hover,
.delete input[type="button"]:hover,
.delete button:hover {
  color: #fff;
  background: #ff4d4d;
}

/*
追加ボタン
*/
.create input[type="submit"],
.create input[type="button"],
.create button {
  color: #fff;
  background-color: #42b72a;
  border-color: #42b72a;
}

.create input[type="submit"]:hover,
.create input[type="button"]:hover,
.create button:hover {
  color: #fff;
  background-color: #3ba425;
  border-color: #3ba425;
}

/*
戻るボタン
*/
.btn_back input[type="button"],
.btn_back button {
  color: #000;
  background: #dddddd;
}

.btn_back input[type="button"]:hover,
.btn_back button:hover {
  color: #000;
  background: #ccc;
}

/*
ローディングボタン
*/
.loading input[type="button"],
.loading button {
  color: #000;
  background: #dddddd;
}

.loading input[type="button"]:hover,
.loading button:hover {
  color: #000;
  background: #ccc;
}

/*
詳細ボタン
*/
.detailButton button {
  color: #42b72a;
  background-color: #fff;
  border: 1px solid #42b72a;
}

.detailButton button:hover {
  color: #fff;
  background-color: #3ba425;
  border: 1px solid #3ba425;
}

.disabledButton button {
  color: #ccc;
  background-color: #eee;
  border: 1px solid #ddd;
}

.disabledButton button:hover {
  color: #ccc;
  background-color: #eee;
  border: 1px solid #ddd;
}

/*
button length
*/
.button_width90 {
  width: 90px;
}
.button_width90:hover {
  width: 90px;
}
.button_width120 {
  width: 120px;
}
.button_width120:hover {
  width: 120px;
}
.button_width180 {
  width: 180px;
}
.button_width180:hover {
  width: 180px;
}
.button_width320 {
  width: 320px;
}
.button_width320:hover {
  width: 320px;
}

/*
input text length
*/
input[type="text"].input_width70 {
  width: 70px;
}
input[type="text"].input_width150,
input[type="tel"].input_width150 {
  width: 150px;
}
input[type="text"].input_width600 {
  width: 600px;
}
input[type="text"].input_width705 {
  width: 705px;
}

/*
郵便番号
*/
input[type="text"].zip {
  width: 70px;
}

/*
select
*/
select {
  font-size: 1rem;
  padding: 0.55rem;
  border: 1px solid #c5c5c5;
  border-radius: 0.25rem;
  -webkit-appearance: none;
  background: #fff;
  appearance: none;
  outline: 0;
  color: #555459;
  width: 100px;
  margin: 0 0 0.5rem;
  -webkit-transition: all 0.07s ease-out 0.0000001ms;
  -moz-transition: all 0.07s ease-out 0.0000001ms;
  transition: all 0.07s ease-out 0.0000001ms;
}

select:focus {
  font-size: 1rem;
  padding: 0.55rem;
  border: 1px solid #73b7e6;
  border-radius: 0.25rem;
  -webkit-appearance: none;
  background: #fff;
  appearance: none;
  outline: 0;
  color: #555459;
  width: 100px;
  margin: 0 0 0.5rem;
  -webkit-transition: all 0.07s ease-out 0.0000001ms;
  -moz-transition: all 0.07s ease-out 0.0000001ms;
  transition: all 0.07s ease-out 0.0000001ms;
}

textarea {
  font-size: 14px;
  padding: 0.75rem;
  border: 1px solid #c5c5c5;
  border-radius: 0.25rem;
  -webkit-appearance: none;
  appearance: none;
  outline: 0;
  color: #555459;
  width: 100%;
  max-width: 90%;
  font-family: "Emoji Passthrough", Lato, appleLogo, sans-serif;
  margin: 0 0 0.5rem;
  -webkit-transition: all 0.07s ease-out 0.0000001ms;
  -moz-transition: all 0.07s ease-out 0.0000001ms;
  transition: all 0.07s ease-out 0.0000001ms;
  height: 100px;
}

textarea:hover {
  font-size: 14px;
  padding: 0.75rem;
  border: 1px solid #73b7e6;
  border-radius: 0.25rem;
  -webkit-appearance: none;
  appearance: none;
  outline: 0;
  color: #555459;
  width: 100%;
  max-width: 90%;
  font-family: "Emoji Passthrough", Lato, appleLogo, sans-serif;
  margin: 0 0 0.5rem;
  -webkit-transition: all 0.07s ease-out 0.0000001ms;
  -moz-transition: all 0.07s ease-out 0.0000001ms;
  transition: all 0.07s ease-out 0.0000001ms;
  height: 100px;
}

input[type="checkbox"] {
  display: inline-block;
  /* position: relative; */
  margin-right: 5px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-appearance: button;
  appearance: button;
  width: 20px;
  height: 20px;
  border: 1px solid #999;
  vertical-align: middle;
}

input[type="checkbox"]:checked::after {
  position: absolute;
  content: "";
  top: -3px;
  left: 3px;
  width: 8px;
  height: 14px;
  border-right: 4px solid #009933;
  border-bottom: 4px solid #009933;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

input[type="radio"] {
  display: none;
}
label.radio_label {
  position: relative;
  display: inline-block;
  padding: 3px 3px 3px 20px;
  cursor: pointer;
}
label.radio_label::before {
  position: absolute;
  content: "";
  top: 50%;
  left: 0;
  width: 14px;
  height: 14px;
  margin-top: -8px;
  background: #eee;
  border: 1px solid #bebebe;
  border-radius: 100%;
}
input[type="radio"]:checked + label::after {
  position: absolute;
  content: "";
  top: 50%;
  left: 4px;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  background: #3498db;
  border-radius: 100%;
}

label.file_label {
  color: white;
  background-color: #42b72a;
  padding: 6px;
  border-radius: 12px;
  cursor: pointer;
  font-size: 14px;
}