/* <!-- LH外部向け　お問い合わせフォーム CSS -- >  */

/* style.css の * { box-sizing } を継承。ここでは body のみ調整 */

/* 他ページと同じ body 幅に揃える（100% だと max-width:767px の body{width:100vw} より詳細度が高く、モバイルで幅がズレる） */
body.inquiry-form-page {
  display: block;
  margin: 0;
  min-height: 100vh;
}

.inquiry-page {
  width: 100%;
}

.inquiryFormArea {
  width: 100%;
  text-align: center;
}

.inquiryPosition {
  display: flex;
  justify-content: center;
  flex-direction: column;
  background: linear-gradient(180deg, #f4fdff 0%, #ffffff 55%, #ffffff 100%);
}

/* フォーム main 内のみ。共通ヘッダー／フッターの a は style.css に任せる */
.inquiry-page a,
.inquiry-page a:hover,
.inquiry-page a:visited {
  color: inherit;
  /* リンクを付け終わったら外す */
  /* text-decoration: none */
}

/* consultation.html のヒーローと同じ余白（固定ヘッダー分） */
.titleArea {
  position: relative;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  background-color: #1a2528;
  background-image: url(../image/consultation/rectangle.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  min-height: 46vh;
  padding: 140px 24px 72px;
  box-sizing: border-box;
}

.titleArea::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
}

.titleArea > * {
  position: relative;
  z-index: 1;
}

.inquiry-line-section {
  padding: 48px 16px 40px;
}

.inquiry-line-inner {
  max-width: 680px;
  margin: 0 auto;
}

/* style.css の LINE ボタン色を、上記 a:visited { color: inherit } より優先 */
.inquiry-line-section a.consultation-card__btn--line,
.inquiry-line-section a.consultation-card__btn--line:visited,
.inquiry-line-section a.consultation-card__btn--line:hover,
.inquiry-line-section a.consultation-card__btn--line:focus {
  color: #ffffff;
}

@media screen and (max-width: 767px) {
  .titleArea {
    padding: 120px 20px 56px;
  }

  .inquiry-line-section {
    padding: 36px 16px 28px;
  }
}

.titleArea h1 {
  font-size: xxx-large;
}

@media screen and (min-width: 811px) {
  .addressArea {
    display: flex;
    flex-direction: row;
    height: auto;
    width: 100%;
    justify-content: center;
  }
}

@media screen and (max-width: 811px) {
  .titleArea h1 {
    margin: 10px;
  }
}

/* ----------------------------------------------------------------------- */

.RequiredMark::after {
  content: "必須";
  font-size: 13px;
  text-align: center;

  height: 20px;
  border-radius: 2px;
  padding: 2px 5px;
  margin-left: 10px;
  color: #ffffff;
  background-color: #ff6565;
}

.error {
  color: red;
  font-weight: bold;
}

/* フォームエリア //////////////////////////////////////////////////////////////////////////*/
.labelGroup {
  display: inline-block;
  width: 220px;
  text-align: left;
  font-weight: bold;
  padding-left: 15px;
}

.addressAddressFieldLabel {
  text-align: left;
  width: 220px;
  height: 100%;
  font-weight: bold;
  margin-top: 5px;
  text-align: left;
  padding-left: 15px;
}

.InputForm {
  margin: auto;
}

.InputSpacing {
  display: flex;
  flex-direction: column;
  padding: 0 0 30px 0px;
  text-align: justify;
}

.InputGroup {
  display: flex;
  flex-direction: row;
  justify-content: left;
  width: 100%;
  height: 100%;
  margin: 10px 0px 10px 0px;
  background-color: #ffffff;
}

.dottedBorder {
  border-bottom: 1px dotted #333333;
  padding-top: 20px;
  margin-left: 4px;
}

.InputArea {
  display: flex;
  flex-direction: column;
  margin-top: 40px;
}

.InputField {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: auto;
  background-color: #ffffff;
}

.addressArea {
  display: flex;
  flex-direction: row;
  height: auto;
  width: 100%;
  justify-content: left;
}

.addressFieldLabel {
  text-align: left;
  margin: 0px 0px 10px 0px;
}

.addressInputArea {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.addressGroup {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  margin-bottom: 30px;
}

.postCodeExplanation {
  text-align: left;
  font-size: 14px;
}

input[type="text"] {
  height: 30px;
  font-size: 14px;
}

.InputSpacingName {
  display: flex;
  flex-direction: row;
}

/* .familyNameInput,
.firstNameInput,
.familyNameKanaInput,
.firstNameKanaInput {
  width: 200px;
} */

.addressInput {
  width: 350px;
  margin: 10px 0px;
}

.addressFieldLabel::before {
  content: "⬛";
  color: black;
  font-size: 13px;
  height: auto;
}

.addressInput,
.prefectureInput,
.cityInput,
.streetInput,
.buildingInput {
  margin: 10px 10px 10px 0px;
}

.prefectureInput,
.cityInput {
  width: 160px;
}

.streetInput {
  width: 132px;
}

.buildingInput {
  width: 192px;
}

.mailInput,
.phoneInput,
.inquiryContentInput {
  width: 375px;
}

.inquiryContentInput {
  height: 189px;
}

.radioArea {
  height: 100%;
  text-align: left;
  padding-bottom: 30px;
}

.radioItem input[type="radio"] {
  transform: scale(1.8);
  accent-color: #333333;
}

.radioLineBreak {
  display: flex;
  flex-direction: row;
  gap: 10px;
  width: 100%;
  height: auto;
  font-size: smaller;
  margin: 0px 10px 20px 0px;
}

.radioItem {
  margin: 10px 0 15px 0;
}

.radioSelect {
  border: 1px solid black;
  border-radius: 5px;
  padding: 7px;
  margin: 0px 10px 10px 7px;
}

.privacyPolicyArea {
  margin-top: 50px;
}

.privacyPolicyArea .privacyPolicyConsentText a {
  color: #0097b2;
  text-decoration: underline;
}

.privacyPolicyArea .privacyPolicyConsentText a:hover {
  opacity: 0.85;
}

.sendButtonArea {
  padding: 20px 0;
}

button[type="submit"] {
  width: 300px;
  height: 60px;
  font-size: 20px;
  text-align: center;
  color: #ffffff;
  background-color: #0097B2;
  border: none;
  border-radius: 13px;
  cursor: pointer;
  margin: 15px 0px 50px 0px;
}

.privacyPolicyCheckbox {
  margin-top: 15px;
  margin-right: 15px;
  transform: scale(2);
  accent-color: #333333;
  color: #ffffff;
}

@media screen and (max-width: 811px) {
  .labelGroup {
    padding-left: 0;
  }

  .addressArea {
    display: block;
    width: 100%;
  }

  .addressAddressFieldLabel {
    text-align: left;
    width: 100%;
    height: auto;
    font-weight: bold;
  }

  .InputSpacing {
    margin: 5px;
  }

  .addressInputArea {
    height: 100%;
    padding: 10px;
  }

  .postCodeExplanation {
    font-size: 11px;
    /* margin-left: 20px; */
  }

  .InputGroup {
    display: flex;
    flex-direction: column;
    height: auto;
    width: 100%;
  }

  input[type="text"] {
    /* margin: 10px 20px 0px; */
    padding-left: 5px;
  }

  input[type="text"],
  textarea {
    width: 90% !important;
  }

  .InputArea {
    justify-content: normal;
  }

  .InputField {
    display: block;
    text-align: left;
    /* margin: 10px; */
    padding-left: 5px;
  }

  .radioArea {
    display: block;
    width: 90%;
    margin: 20px 20px 0 20px;
  }

  .radioLineBreak {
    display: block;

    gap: 0px;
    font-size: medium;
    margin: 20px 10px;
  }

  .radioSelect {
    width: 80%;
    display: flex;
    justify-content: center;
    justify-content: space-between;
  }

  .radioItem {
    margin: 10px 0 30px 0px;
    display: flex;
    flex-direction: row;
    align-items: baseline;
  }

  .inquiryContentInput {
    margin: 20px 10px 10px 10px;
  }

  /* .sendButtonArea {
    margin: 10px;
  } */

  .privacyPolicyArea {
    padding: 15px;
    text-align: center;
  }

  .sendButtonField {
    text-align: center;
    padding: 10px;
  }

  button[type="submit"] {
    width: 90%;
  }
}

@media screen and (max-width: 428px) {
  .labelGroup {
    padding-left: 0;
    padding-bottom: 10px;
  }

  .addressArea {
    display: block;
    width: 100%;
    /* margin-left: 10px; */
    padding: 5px;
  }

  .addressAddressFieldLabel {
    text-align: left;
    width: 100%;
    height: auto;
    font-weight: bold;
    padding-left: 5px;
  }

  .InputSpacing {
    margin: 5px;
    display: flex;
    flex-direction: column;
  }

  .InputSpacingName {
    display: flex;
    flex-direction: row;
  }

  .addressInputArea {
    height: 100%;
  }

  .postCodeExplanation {
    font-size: 11px;
    /* margin-left: 20px; */
  }

  .InputGroup {
    display: flex;
    flex-direction: column;
    height: auto;
    width: 95%;
  }

  input[type="text"],
  textarea {
    width: 90% !important;
  }

  .familyNameInput,
  .firstNameInput,
  .familyNameKanaInput,
  .firstNameKanaInput {
    margin: 0;
  }

  .InputArea {
    justify-content: normal;
  }

  .InputField {
    display: block;
    text-align: left;
    /* margin: 10px; */
  }

  .radioArea {
    display: block;
    width: 90%;
    margin: 20px 20px 0 20px;
  }

  .radioLineBreak {
    display: block;

    gap: 0px;
    font-size: medium;
    margin: 20px 10px;
  }

  .radioSelect {
    width: 80%;
    display: flex;
    justify-content: center;
  }

  .radioItem {
    margin: 10px 0 30px 0px;
    display: flex;
    flex-direction: row;
    align-items: baseline;
  }

  .inquiryContentInput {
    margin: 20px 10px 10px 10px;
  }

  /* .sendButtonArea {
    margin: 10px;
  } */

  .privacyPolicyArea {
    padding: 15px;
    text-align: center;
  }

  .sendButtonField {
    text-align: center;
    padding: 10px;
  }

  button[type="submit"] {
    width: 90%;
  }
}

/* footer--------------------------------------------------------------------- */

footer {
  background-color: #ececec;
}

.freeConsultationLinkField {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: 40px;
  margin: 70px 0px 90px 0px;
}

.fellFreeMassage {
  width: 130px;
  position: relative;
  top: 30px;
  font-size: 14px;
  font-weight: bold;
  color: #333333;
  background-color: #ffffff;
  border: 1px solid #333333;
  border-radius: 13px;
  padding: 2px 0px;
  margin-bottom: 15px;
}

.freeConsultationLink {
  width: 300px;
  height: 50px;
  font-size: 20px;
  font-weight: bold;
  color: #ffffff;
  background-color: #333333;
  border-radius: 40px;
  padding-top: 20px;
  margin: 0 auto;
}

.footerMainArea {
  display: flex;
  flex-direction: row;
  background-color: #ffffff;
}

.LH_ONLINEField {
  font-size: 32px;
  font-weight: bold;

  text-align: left;
  padding: 10px 0px 10px 30px;
}

.footerLinkArea {
  display: flex;
  flex-direction: row;
  font-size: 14px;
  margin-left: auto;
  padding: 25px 40px 0px 0px;
}

.CopyrightField {
  /* height: 20px; */
  font-size: 12px;
  text-align: center;
  color: #ffffff;
  background-color: #333333;
  padding: 5px 0px;
}

@media screen and (max-width: px) {
  .freeConsultationLinkField {
    margin: 70px 20px 90px 20px;
  }

  .freeConsultationLink {
    width: 80%;
  }

  .footerMainArea {
    flex-direction: column;
  }

  .LH_ONLINEField {
    font-size: medium;
    padding: 10px 0px 10px 10px;
  }

  .footerLinkArea {
    padding: 5px;
  }
}

@media screen and (max-width: 428px) {
  .freeConsultationLinkField {
    margin: 70px 20px 90px 20px;
  }

  .freeConsultationLink {
    width: 80%;
  }

  .footerMainArea {
    flex-direction: column;
  }

  .LH_ONLINEField {
    font-size: medium;
    padding: 10px 0px 10px 10px;
  }

  .footerLinkArea {
    padding: 5px;
  }
}

/* 完了画面 //////////////////////////////////////////////////////////////////////////////*/
.completionMainArea {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 80px;
  padding-bottom: 80px;
}

.completionMain {
  display: flex;
  flex-direction: column;
  flex: 1;
  border: 3px solid #ececec;
  /* width: 200px; */
  max-width: 70%;
}

.completionContents {
  width: 100%;
  height: 200px;
  margin: 0 auto;
  align-content: center;
  font-size: large;
  flex: 1;
  min-height: 100%;
  text-align: center;
}

.completionMassage {
  margin: 20px;
  font-size: x-large;
}

.completionMassage2 {
  font-size: medium;
}

.checkMark {
  display: inline-block;
  border: #1cc416 solid 2px;
  border-color: #1cc416;
  font-size: 40px;
  color: #1cc416;
  border-radius: 90px;
  width: 60px;
  height: 60px;
  margin-top: 20px;
}