@charset "UTF-8";

/*フォーム用*/

/* ************************************************
* form
* ************************************************ */

/*----------- フォームコンポーネント -----------*/
#mfp_overlay_inner h4 {
  margin-top: 1em;
  margin-bottom: 1em;
}

form {
  margin: 0 auto;
}

.mfp {
  margin-bottom: 30px;
}

.mfp--pp {
  font-size: 1.2rem;
  margin-bottom: 1em;
  text-align: center;
}

.mfp--pp a {
  text-decoration: underline;
  transition: opacity 0.3s;
}

.mfp--pp a:hover {
  opacity: 0.7;
}

.mfp--check {
  text-align: center;
}

.check {
  width: 1.8em;
}
/*エラー表示 color*/
div.mfp_err {
  color: #39b6ff;
}

.btn--ghost--Mr {
  margin-right: 30px;
}

.btn--ghost--second {
  border: 1px solid #37beec;
  border-radius: 0;
}

button[type="submit"].btn--ghost--W,
button[type="reset"].btn--ghost--W {
  padding: 15px 8%;
  color: #37beec;
  transition: background-color 0.3s, color 0.3s;
}

button[type="submit"].btn--ghost--W:hover,
button[type="reset"].btn--ghost--W:hover {
  background-color: #37beec;
  color: #fff;
}

.mfp_buttons {
  color: #37beec;
}

div.mfp_buttons button#mfp_button_send,
div.mfp_buttons button#mfp_button_cancel {
  border: 1px solid #4dc5ee;
  transition: background-color 0.3s, color 0.3s;
}

div.mfp_thanks p.mfp_thanks__desc {
  line-height: 2.2em;
  font-size: 1.5rem;
  letter-spacing: 0.1em;
  color: #46b2fb;
  font-weight: bold;
}

div#mfp_thanks {
  text-align: center;
  font-size: 18px;
  padding: 20px 0px;
  color: #46b2fb;
}

div.mfp_buttons button#mfp_button_send:hover,
div.mfp_buttons button#mfp_button_cancel:hover {
  opacity: 1;
  background-color: #4dc5ee;
  color: #fff;
}

@media screen and (max-width: 600px) {
  .mfp {
    margin-bottom: 20px;
  }
  .mfp--pp {
    line-height: 2;
  }
  div.mfp_thanks p {
    margin-bottom: 100px;
  }
  div.mfp_thanks p.mfp_thanks__desc {
    font-size: 1.2rem;
    text-align: left;
  }
}