@charset "UTF-8";
/* form setting
----------------------------------------------------------- */
a:focus,
*:focus {
  outline: none !important;
}

input,
button,
textarea,
select {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font-family: "メイリオ", Meiryo, "Roboto Condensed", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
  background: #fff;
}

input[type=text], input[type=email], input[type=tel], input[type=password], input[type=number] {
  padding: 0 1em;
  font-size: 1.5rem;
  line-height: 3.6em;
  height: 3.6em;
  width: 100%;
  box-sizing: border-box;
  border-radius: 5px;
  border: 1px solid #c9cccd;
}
input[type=text] .error, input[type=email] .error, input[type=tel] .error, input[type=password] .error, input[type=number] .error {
  border: 2px solid #e60012 !important;
  background: #fff5f5 !important;
}
input[type=text]:focus, input[type=email]:focus, input[type=tel]:focus, input[type=password]:focus, input[type=number]:focus {
  border: 2px solid #237bd0;
  background: #fff;
  background: #fff;
}
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input::-webkit-input-placeholder, input::placeholder {
  color: #aaa;
  font-weight: normal;
  padding-top: 0.2em;
}

textarea {
  width: 100%;
  padding: 1.1em;
  box-sizing: border-box;
  border: none;
  font-size: 1.5rem;
  border-radius: 5px;
  border: 1px solid #c9cccd;
}
textarea .error {
  border: 2px solid #e60012 !important;
  background: #fff5f5 !important;
}
textarea:focus {
  border: 2px solid #237bd0;
  background: #fff;
}
textarea::-moz-placeholder {
  color: #aaa;
  font-weight: normal;
  padding-top: 0.2em;
}
textarea::placeholder {
  color: #aaa;
  font-weight: normal;
  padding-top: 0.2em;
}

.error [type=text],
.error [type=email],
.error [type=tel],
.error [type=number],
.error [type=password],
.error select,
.error textarea {
  border: 2px solid #e60012 !important;
  background: #fff5f5 !important;
}

.errorNote {
  display: block;
  font-size: 1.4rem;
  color: #e60012;
  margin-top: 5px;
}

button {
  transition: 0.3s all;
  cursor: pointer;
}

label {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  cursor: pointer;
  vertical-align: bottom;
}

form {
  min-height: 100%;
}

/*---------------------input[type=checkbox]--------------------------*/
input[type=checkbox] {
  display: none;
}
input[type=checkbox] + span {
  position: relative;
  width: 18px;
  height: 18px;
  display: block;
  margin-right: 10px;
  background: #f3f3f3;
  cursor: pointer;
  flex-shrink: 0;
  border: 1px solid #c8c9c9;
}
input[type=checkbox] + span::before {
  content: "";
  display: block;
  position: absolute;
  z-index: 5;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  display: block;
  background: #f3f3f3;
  transform: translate(-50%, -50%) scale(1);
  transition: 0.3s all ease-in-out;
}
input[type=checkbox]:checked + span {
  border-color: #237bd0 !important;
  background: #fff;
}
input[type=checkbox]:checked + span::before {
  background: #237bd0 !important;
  transform: translate(-50%, -50%) scale(0.65);
}

.error input[type=checkbox] + span {
  border-color: #e60012;
}
.error input[type=checkbox] + span::before {
  background: #fff5f5;
}

/*----------------------input[type=radio]-------------------------*/
input[type=radio] {
  display: none;
}
input[type=radio] + span {
  position: relative;
  width: 18px;
  height: 18px;
  display: block;
  margin-right: 10px;
  background: #fff;
  border: 1px solid #c8c9c9;
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
  transition: 0.3s all;
  transform: translateY(0);
}
input[type=radio] + span::after {
  content: "";
  display: block;
  position: absolute;
  width: 18px;
  height: 18px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  border-radius: 50%;
  z-index: 6;
  background: #f3f3f3;
  transition: 0.3s all;
}
input[type=radio]:checked + span {
  border-color: #237bd0 !important;
  background: #fff;
}
input[type=radio]:checked + span::after {
  background: #237bd0 !important;
  transform: translate(-50%, -50%) scale(0.65);
}
input[type=radio].rect_shape + span {
  border-radius: 0;
}
input[type=radio].rect_shape + span::after {
  border-radius: 0;
}

.error input[type=radio] + span {
  border-color: #e60012;
}
.error input[type=radio] + span::after {
  background: #fff5f5;
}

/*----------------------input[type=file]-------------------------*/
#upload {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
#upload #selectFile {
  margin-left: 1em;
}
#upload label {
  height: 33px;
}
#upload label::before {
  content: "ファイルを選択";
  color: #00adee;
  font-size: 15px;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 160px;
  height: 33px;
  border: 1px solid #00adee;
  cursor: pointer;
  transition: 0.3s all;
}
#upload label:hover::before {
  background: #00adee;
  color: #fff;
}
#upload input[type=file] {
  background: none;
  display: flex;
  align-items: center;
  line-height: 1;
  /* for drop area*/
  display: none;
}
#upload input[type=file]::-webkit-file-upload-button {
  width: 170px;
  height: 33px;
  opacity: 0;
  position: relative;
}
#upload input[type=file]::file-selector-button {
  width: 170px;
  height: 33px;
  opacity: 0;
  position: relative;
}

@media screen and (max-width: 767px) {
  #upload input[type=file]::-webkit-file-upload-button {
    width: 135px;
    height: 28px;
  }
  #upload input[type=file]::file-selector-button {
    width: 135px;
    height: 28px;
  }
  #upload input[type=file]::before {
    font-size: 13px;
    border-radius: 3px;
    width: 120px;
    height: 28px;
  }
}
/*---------------------select--------------------------*/
.selectWrap {
  position: relative;
}
.selectWrap::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 15px;
  right: 12px;
  width: 10px;
  height: 10px;
  border-bottom: 1px solid #9a9a9a;
  border-right: 1px solid #9a9a9a;
  transform: rotate(45deg);
  pointer-events: none;
}
.selectWrap select {
  display: block;
  width: 100%;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  padding: 0 30px 0 15px;
  line-height: 3em;
  height: 3em;
  cursor: pointer;
  font-size: 1.5rem;
  box-sizing: border-box;
  border: 1px solid #fff;
}
.selectWrap select::-ms-expand {
  display: none;
}

@media screen and (max-width: 767px) {
  body {
    min-width: auto;
  }
  input,
button,
textarea,
select {
    font-size: 12px;
  }
  input[type=text], input[type=email], input[type=tel], input[type=password], input[type=number] {
    font-size: 1.4rem;
    line-height: 3em;
    height: 3em;
  }
  textarea {
    padding: 14px 10px;
    font-size: 1.4rem;
  }
  .errorNote {
    font-size: 1.3rem;
  }
  /*---------------------input[type=checkbox]--------------------------*/
  input[type=checkbox] + span {
    margin-right: 10px;
  }
  /*----------------------input[type=radio]-------------------------*/
  d input[type=radio] + span {
    width: 20px;
    height: 20px;
  }
  d input[type=radio] + span::after {
    width: 20px;
    height: 20px;
  }
  d input[type=radio]:checked + span::after {
    background: #237bd0;
    width: 12px;
    height: 12px;
    top: 4px;
    left: 4px;
  }
}
/*# sourceMappingURL=form.css.map */