@charset "UTF-8";
header {
  width: 100%;
  text-align: center;
  padding: 10px;
  /* background-color: #00295b; */
}

header img {
  width: 220px;
  margin: 0 auto;
}

article {
  font-size: 1.7rem;
  width: 100%;
  /* padding: 20px 25px 40px; */
  padding: 0px 25px;
}

fieldset {
  font-size: 1.3rem;
  width: 100%;
  margin: 0 auto 20px;
}
fieldset div {
  width: 50%;
  float: left;
}
fieldset span {
  padding: 0 5px;
}

/* label {
  display: block;
  font-weight: bold;
  font-size: 1.3rem;
  text-align: left;
  margin-bottom: 8px;
}
label.required:after {
  font-size: 1.2rem;
  content: '必須';
  color: white;
  background-color: #dd4b39;
  margin-left: 10px;
  padding: 3px 5px;
} */

/* input[type=text], select, input[type=tel], input[type=email] {
  font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
  font-size: 1.3rem;
  text-align: left;
  margin-right: auto;
  height: 36px;
  padding: 6px;
  border: 1px solid #d9d9d9;
  -webkit-appearance: none;
} */

/* input[type=text], input[type=tel], input[type=email] {
  width: 100%;
  border-radius: 0;
  border-top: 1px solid #c0c0c0;
}
fieldset div input[type=text], fieldset div input[type=tel], fieldset div input[type=email] {
  width: 90%;
}
input[type=text]:focus , input[type=tel]:focus, input[type=email]:focus{
  border: 1px solid #1771fe;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.2);
}
input[type=text] + button , input[type=tel] + button, input[type=email] + button {
  margin-left: 10px;
}
input[type=checkbox] {
  margin-right: 10px;
} */

select {
  width: 50%;
  background: #f4f4f4 url(../img/select_arr.png) no-repeat right 7px center;
  background-size: 10px auto;
  border-radius: 3px;
}

button {
  display: block;
  font-size: 1.2rem;
  font-weight: bold;
  line-height: 38px;
  color: white;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  padding: 0 10px;
  background-color: #4c8efb;
  border: 1px solid #1771fe;
  border-radius: 3px;
}
button.zip_btn {
  display: inline-block;
  line-height: 34px;
  width: 30%;
  max-width: 150px;
}

.thanks_msg {
  font-weight: bold;
}

#sign_field {
  width: 100%;
  margin-bottom: 20px;
  display: none;
}

#sign_btn {
  display: none;
  position: fixed;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
}

#sign_img {
  max-width: 100%;
  border: 1px solid #d9d9d9;
}

#sign_modal {
  display: none;
  z-index: 99;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #fff;
}
#sign_modal #sign_guidance {
  display: none;
  font-size: 1.8rem;
  font-weight: bold;
  color: #fff;
  padding: 15px;
  background-color: rgba(0, 0, 0, 0.8);
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#overlay {
  visibility: hidden;
  z-index: 100;
  position: fixed;
  font-size: 1.8rem;
  font-weight: bold;
  color: #fff;
  width: 100%;
  height: 100%;
  background-color: black;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-transform: translate3d(0, 0, 0);
}

#face_modal{
  display: none;
  z-index: 99;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #fff;
}

#face_btn {
  position: fixed;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
}

#face_field {
  width: 100%;
  margin-bottom: 20px;
  display: none;
}

#face_canvas {
  display: none;
}

#face_img {
  max-width: 100%;
  border: 1px solid #d9d9d9;
  transform: scale(-1, 1);
}

#face_video {
  transform: scale(-1, 1);
}

#face_img_tag {
  transform: scale(-1, 1);
}

/* 画面前面の全体に表示 */
#loading_box {
  width: 100%;
  height: 100%;
  background: #FFF;
  opacity: 0.8;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
}

/* 画面の中心にローディング画像を表示する */
#loading_box img {
  width: auto;
  /* margin: -40px 0 0 -40px; */
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);

  /* animation: fadeUpAnime 1s ease-in-out infinite alternate-reverse; */
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
    /* transform: translateY(100px); */
  }

  to {
    opacity: 0.5;
    /* transform: translateY(0); */
  }
}

#loading_box p {
  position: absolute;
  font-size: 25px;
  top: 65%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  z-index: 200;
}



form.cmxform label.error, label.error, alert-danger {
  color: red;
}