@charset "utf-8";

/* ============================================
   MAILFORMPRO STYLES
   ============================================ */

/* Form Container */
#mailform.p-contact_form {
  margin-top: 6rem;
}

/* Definition List */
#mailform.p-contact_form .p-contact_form__dl dt {
  display: flex;
  gap: 0.4em;
  align-items: center;
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 0.8em;
}

#mailform.p-contact_form .p-contact_form__dl dt.--ul {
  padding-bottom: 1em;
  border-bottom: 1px solid #c3c3c3;
}

#mailform.p-contact_form .p-contact_form__dl dd {
  display: block;
  margin-bottom: 1.5em;
}

#mailform.p-contact_form .p-contact_form__dl dd .radio {
  padding-left: 1em;
}

#mailform.p-contact_form .p-contact_form__dl dd .radio-item label {
  display: flex;
  align-items: center;
  gap: 0.5em;
}

#mailform.p-contact_form .p-contact_form__dl dd .radio-item + .radio-item {
  margin-top: 0.5em;
}

/* Information Text */
#mailform.p-contact_form .p-contact_form__dl-info {
  font-size: 1.6rem;
  color: #fa8c3c;
}

/* Form Inputs */
#mailform.p-contact_form input[type="text"],
#mailform.p-contact_form input[type="email"],
#mailform.p-contact_form input[type="tel"],
#mailform.p-contact_form textarea {
  width: 100%;
  background: #e4f4fc !important;
  border-radius: 5px;
  padding: 0.8em 1em;
  font-size: 1.8rem;
}

#mailform.p-contact_form input[type="text"]:focus,
#mailform.p-contact_form input[type="email"]:focus,
#mailform.p-contact_form input[type="tel"]:focus,
#mailform.p-contact_form textarea:focus {
  border: 1px solid #0090d1;
  /* $aColor */
}

/* Privacy Policy Checkbox */
.pp-check {
  margin-top: 6rem;
  margin-bottom: 6rem;
  text-align: center;
  font-size: 1.6rem;
}

.pp-check label {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 0.3em;
}

.pp-check label .mfp_err {
  text-align: center;
}

.pp-check a {
  color: #0090d1;
  /* $aColor */
  text-decoration: underline;
}

.pp-check a:hover {
  text-decoration: none;
}

/* Button Wrapper */
.c-btnWrap {
  text-align: center;
}

/* Form Information Box */
.p-contact_form__info {
  width: 100%;
  max-width: 1000px;
  margin: 6rem auto;
  background: #f5f5f2;
  text-align: center;
  padding: 2rem;
  border-radius: 20px;
}

.p-contact_form__info i {
  color: #0090d1;
  /* $aColor */
}

.p-contact_form__info a {
  color: #0090d1;
  /* $aColor */
  text-decoration: underline;
}

.p-contact_form__info a:hover {
  text-decoration: none;
}

/* ============================================
   CONFIRM MODAL OVERLAY
   ============================================ */

div#mfp_overlay_background {
  background-color: rgba(0, 0, 0, 0.77);
  /* #000000c4 converted */
}

div#mfp_overlay_inner {
  padding: 4rem;
  border-radius: 20px;
  border: none;
}

div#mfp_overlay_inner h4 {
  margin-bottom: 1em;
}

div#mfp_overlay_inner h4::before {
  content: "●";
  color: #ff6b6b;
  /* $sColor assumed */
  margin-right: 0.2em;
}

/* Confirm Buttons */
.mfp_buttons {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  gap: 1em;
  margin-top: 3rem;
}

.mfp_element_button {
  padding: 0.5em 3em;
  border-radius: 45px;
  border: 1px solid #cccccc;
  /* $fColor assumed */
  transition: all 0.3s ease;
  /* $duration assumed */
}

.mfp_element_button:first-child {
  background: linear-gradient(90deg, #00aeeb 0%, #54cff5 50%, #0090d1 100%);
  background-size: 200% 100%;
  border: none;
  color: #fff;
}

.mfp_element_button:first-child:hover {
  background-position: 100% 0;
}

/* Confirm Table */
#mfp_confirm_table tr {
  text-align: left;
}

#mfp_confirm_table th {
  width: 45%;
  padding-top: 0.8em;
  padding-bottom: 0.8em;
}

#mfp_confirm_table th::after {
  content: ":";
  margin-left: 0.5em;
}

#mfp_confirm_table td {
  width: 55%;
}

/* Error Message */
div.mfp_err {
  display: block;
  width: 100%;
  background-image: none;
  padding-left: 0;
  font-size: 1.6rem;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

/* Small Screen: ss breakpoint */
@media (max-width: 640px) {
  /* Buttons on Small Screen */
  .mfp_buttons {
    gap: 0;
    flex-direction: column-reverse;
  }

  /* Confirm Table on Small Screen */
  #mfp_confirm_table tr {
    display: flex;
    flex-direction: column;
  }

  #mfp_confirm_table th {
    width: 100%;
    padding-bottom: 0;
    font-size: 1.4rem;
  }

  #mfp_confirm_table td {
    width: 100%;
  }

  /* Error Message on Small Screen */
  div.mfp_err {
    font-size: 1.4rem;
  }
}