@charset "utf-8";

/** ***************************************************************************
 * ご予約について
 * ************************************************************************* */

/**
 * お問い合わせ
 */

#reservation div.contact .tel {
  line-height: 1;
  font-size: 1.556em;
  font-weight: 700;
}

/** ***************************************************************************
 * 産後ケアのご予約がお済みの方へ
 * ************************************************************************* */

#reserved {
  padding-top: 100px;
  padding-bottom: 100px;
  position: relative;
  z-index: 0;
}

#reserved::after {
  content: '';
  width: var(--innerWidth);
  max-width: none;
  height: 100%;
  background-color: #fff;
  position: absolute;
  z-index: -1;
  top: 0;
  left: var(--innerCenter);
  clip-path: shape(
    from 0 18px,
    curve to 100% 8px with 35% 40px / 65% -17px,
    vline to 100%,
    hline to 0%,
    close
  );
}

@media screen and (min-width:768px) {

  #reserved {
    padding-top: 200px;
    padding-bottom: 200px;
  }

  #reserved::after {
    clip-path: shape(
      from 0 30px,
      curve to 100% 30px with 30% 150px / 65% -70px,
      vline to 100%,
      hline to 0%,
      close
    );
  }

}

/** ***************************************************************************
 * 問診票フォーム
 * ************************************************************************* */

#contact {
  margin-top: -40px;
  padding-top: 80px;
  position: relative;
  z-index: 0;
}

#contact::after {
  content: '';
  width: var(--innerWidth);
  max-width: none;
  height: 100%;
  background-color: rgb(var(--accentcolor-2));
  position: absolute;
  z-index: -1;
  top: 0;
  left: var(--innerCenter);
  clip-path: shape(
    from 0 18px,
    curve to 100% 8px with 35% 40px / 65% -17px,
    vline to 100%,
    hline to 0%,
    close
  );
}

@media screen and (min-width:768px) {

  #contact {
    margin-top: -80px;
    padding-top: 200px;
  }

  #contact::after {
    clip-path: shape(
      from 0 30px,
      curve to 100% 30px with 30% 150px / 65% -70px,
      vline to 100%,
      hline to 0%,
      close
    );
  }

}

/**
 * タイトル
 */

#contact .section-title {
  margin-bottom: 30px;
  font-size: 1.22em;
  font-weight: 500;
  text-align: center;
}

@media screen and (min-width:768px) {

  #contact .section-title {
    margin-bottom: 40px;
  }

}

/**
 * 問診票フォーム
 */

#contact div.contents {
  padding-bottom: 30px;
  border-bottom: 1px dashed rgb(var(--accentcolor-6));
}

#contact div.contents ~ div.contents {
  padding-top: 30px;
}

@media screen and (min-width:768px) {

  #contact div.contents {
    padding-bottom: 60px;
  }

  #contact div.contents ~ div.contents {
    padding-top: 60px;
  }

}

/* 入力要素 */

#contact th[align="right"] {
  text-align: left;
}

#contact td.privacy {
  text-align: center;
}

#contact input[type="text"][name$="_y"] {
  width: 6em;
}

#contact input[type="text"][name$="_m"],
#contact input[type="text"][name$="_d"] {
  width: 4em;
}

#contact input[type="text"][name="age"],
#contact input[type="text"][name*="_age"] {
  width: 6em;
}

#contact input[type="text"][name*="sex"] {
  width: 6em;
}

#contact input[type="text"][name*="experience"] {
  width: 6em;
}

#contact input[type="text"][name*="register"] {
  width: 10em;
}

#contact input[type="text"][name*="relationship"] {
  width: 10em;
}

#contact input[type="text"][name*="tel"] {
  width: 10em;
}

#contact input[type="text"][name*="height"] {
  width: 10em;
}

#contact input[type="text"][name*="weight"] {
  width: 10em;
}

/* 必須エラー */

div.custom-error .wpcf7-not-valid-tip {
  display: none;
}

div.custom-error .error-message {
  color: #dc3232;
  font-size: 1em;
  font-weight: normal;
  display: none;
}

div.custom-error:has(.wpcf7-not-valid-tip) .error-message {
  display: block;
}

@media screen and (min-width:768px) {

  #contact th[align="right"] {
    text-align: right;
  }

  #contact td.privacy {
    text-align: left;
  }

}