/*--------------------
 contact
--------------------*/
/*---------- CTAエリア ----------*/
.contactSection {
  background-color: var(--wp--preset--color--light-orange);
}

/*スタッフ*/
.contactStaff {
  background: linear-gradient(180deg, #FAF9F7 0%, #FAF9F7 12%, #ffffff 12%, #ffffff 100%);
  padding-block-end: 40px;

  @media screen and (max-width: 999px) {
    margin-inline: 12px !important;
  }

  .contactStaff__titles {
    margin-block-start: 0;
  }

  .contactStaff__titleLine {
    width: 430px;
    margin-block-start: 0;

    @media screen and (max-width: 999px) {
      width: 280px;
    }

    img {
      width: 100%;
    }
  }

  .contactStaff__peoples {
    display: flex;
    column-gap: 30px;
    justify-content: center;

    @media screen and (max-width: 999px) {
      flex-direction: column;
      row-gap: 8px;
      padding-inline: 20px;
    }
  }

  .contactStaff__people {
    width: 50%;
    margin: 0;

    @media screen and (max-width: 999px) {
      width: 100%;
    }

    &.hara {
      .contactStaff__profile {

        @media screen and (max-width: 999px) {
          order: 2;
        }
      }

      .contactStaff__image {

        @media screen and (max-width: 999px) {
          order: 1;
        }
      }

      .contactStaff__name,
      .contactStaff__position {
        text-align: left;
      }
    }

    &.takahashi {
      .contactStaff__profile {
        @media screen and (max-width: 999px) {
          order: 1;
        }
      }

      .contactStaff__image {
        @media screen and (max-width: 999px) {
          order: 2;
        }
      }

      .contactStaff__name,
      .contactStaff__position {
        text-align: right;
      }

      .contactStaff__message {
        text-align: right;

        @media screen and (max-width: 999px) {
          text-align-last: left;
        }
      }
    }
  }

  .contactStaff__peopleInner {
    align-items: flex-end;
  }

  .contactStaff__profile {
    padding-block-end: 12px;

    @media screen and (max-width: 999px) {
      width: 100%;
    }
  }

  .contactStaff__name {
    margin-block-start: 0;
  }

  .contactStaff__position {
    margin-block-start: 0;
  }

  .contactStaff__message {
    margin-block-start: 8px;

    @media screen and (max-width: 999px) {
      padding-inline: 4px;
      padding-block-start: 4px;
      margin-block-start: 12px;
      border-block-start: 1px solid var(--wp--preset--color--gray);
    }
  }

  .contactStaff__image {
    width: 230px;

    @media screen and (max-width: 999px) {
      width: 160%;
    }
  }
}

/*トップページCTA*/
.topCta {
  display: flex;
  align-items: stretch;
  margin-block-start: 60px;

  @media screen and (max-width: 999px) {
    flex-direction: column;
    row-gap: 16px;
  }

  .contactEntry {
    width: calc((100% - 40px) / 3);
    margin: 0;
    background-color: var(--wp--preset--color--white);


    @media screen and (max-width: 999px) {
      width: 100%;
      padding-block-end: 24px;
    }

    &.forBuy {
      border: 1px solid var(--wp--preset--color--orange);
      border-radius: 12px;

      .contactEntry__subTitle {
        color: var(--wp--preset--color--white);
        background-color: var(--wp--preset--color--orange);
        border: 1px solid var(--wp--preset--color--orange);
        border-radius: 11px 11px 0 0;
      }

      .contactEntry__free {
        color: var(--wp--preset--color--orange);
        width: 55px;
        height: 55px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--wp--preset--color--orange);
        border-radius: 30px;
      }

      .contactEntry__title {
        color: var(--wp--preset--color--orange);
      }
    }

    &.forSell {
      border: 1px solid var(--wp--preset--color--blue);
      border-radius: 12px;

      .contactEntry__subTitle {
        color: var(--wp--preset--color--white);
        background-color: var(--wp--preset--color--blue);
        border: 1px solid var(--wp--preset--color--blue);
        border-radius: 11px 11px 0 0;
      }

      .contactEntry__free {
        color: var(--wp--preset--color--blue);
        width: 55px;
        height: 55px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--wp--preset--color--blue);
        border-radius: 30px;
      }

      .contactEntry__title {
        color: var(--wp--preset--color--blue);
      }
    }

    .contactEntry__subTitle {
      padding-block: 4px;
    }

    .contactEntry__inner {
      padding-inline: 25px;
    }

    .contactEntry__titleWrapper {
      padding-block-end: 10px;
      border-block-end: 1px dashed var(--wp--preset--color--gray);
    }

    .contactEntry__lead {
      text-align: justify;
      padding-inline: 4px;
    }

    .contactEntry__pointWrapper {
      display: flex;
      flex-direction: column;
      row-gap: 2px;
      width: 80%;
      padding-block: 8px;
      padding-inline: 20px;
      margin-block-start: 20px;
      background-color: var(--wp--preset--color--gray-white);

      @media screen and (max-width: 999px) {
        width: 90%;
      }
    }

    .contactEntry__point {
      column-gap: 8px;
      width: 100%;
      margin: 0;

      img {
        display: flex;
        width: 16px;
      }
    }

    .contactEntry__button {
      width: 220px;
      height: 64px;
      margin-block-start: 20px;

      .wp-block-button {
        width: 100%;
        height: 100%;
      }
    }
  }

  .topCta__inner {
    width: calc((100% - 40px) / 3);
    margin: 0;
    display: flex;
    flex-direction: column;
    row-gap: 20px;

    @media screen and (max-width: 999px) {
      width: 100%;
      flex-direction: row;
      column-gap: 12px;
      align-items: stretch;
    }

    .topCta__content {
      padding-block: 15px;
      padding-inline: 25px;
      margin-block-start: 0;
      border-radius: 12px;
      flex: 1;

      @media screen and (max-width: 999px) {
        padding-block: 12px;
        padding-inline: 8px;
      }

      .topCta__title {
        padding-block-end: 10px;
        border-block-end: 1px dashed var(--wp--preset--color--gray);

        @media screen and (max-width: 999px) {
          height: 60px;
          padding-block-end: 0;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }

      .topCta__lead {
        text-align: justify;
        padding-inline: 4px;

        @media screen and (max-width: 999px) {
          margin-block-start: 8px;
        }
      }

      .topCta__button {
        @media screen and (max-width: 999px) {
          margin-block-start: 8px;
        }
      }

      &.main {
        background-color: var(--wp--preset--color--light-brown);
        border: 1px solid var(--wp--preset--color--gray);
      }

      &.guideBook {
        background-color: var(--wp--preset--color--dark-navy);
        border: 1px solid var(--wp--preset--color--dark-navy);

        .topCta__title {
          color: var(--wp--preset--color--white);
        }

        .topCta__lead {
          color: var(--wp--preset--color--white);


        }


      }
    }
  }
}

/*買い手向け/売り手向けページCTA*/
.pageCta {
  display: flex;
  align-items: stretch;
  column-gap: 30px;
  margin-block-start: 60px;

  @media screen and (max-width: 999px) {
    flex-direction: column;
    row-gap: 16px;
  }

  .contactEntry {
    width: 50%;
    margin: 0;
    background-color: var(--wp--preset--color--white);


    @media screen and (max-width: 999px) {
      width: 100%;
    }

    &.forBuy {
      border: 1px solid var(--wp--preset--color--orange);
      border-radius: 12px;

      .contactEntry__subTitle {
        color: var(--wp--preset--color--white);
        background-color: var(--wp--preset--color--orange);
        border: 1px solid var(--wp--preset--color--orange);
        border-radius: 11px 11px 0 0;
      }

      .contactEntry__free {
        color: var(--wp--preset--color--orange);
        width: 55px;
        height: 55px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--wp--preset--color--orange);
        border-radius: 30px;
      }

      .contactEntry__title {
        color: var(--wp--preset--color--orange);
      }
    }

    &.forSell {
      border: 1px solid var(--wp--preset--color--blue);
      border-radius: 12px;

      .contactEntry__subTitle {
        color: var(--wp--preset--color--white);
        background-color: var(--wp--preset--color--blue);
        border: 1px solid var(--wp--preset--color--blue);
        border-radius: 11px 11px 0 0;
      }

      .contactEntry__free {
        color: var(--wp--preset--color--blue);
        width: 55px;
        height: 55px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--wp--preset--color--blue);
        border-radius: 30px;
      }

      .contactEntry__title {
        color: var(--wp--preset--color--blue);
      }
    }

    .contactEntry__subTitle {
      padding-block: 4px;
    }

    .contactEntry__inner {
      padding-block-end: 20px;
      padding-inline: 25px;
    }

    .contactEntry__titleWrapper {
      padding-block-end: 10px;
      border-block-end: 1px dashed var(--wp--preset--color--gray);
    }

    .contactEntry__lead {
      text-align: justify;
      padding-inline: 4px;
    }

    .contactEntry__pointButton {
      @media screen and (max-width: 999px) {
        flex-direction: column;
        row-gap: 0;
      }
    }

    .contactEntry__pointWrapper {
      display: flex;
      flex-direction: column;
      row-gap: 2px;
      width: 50%;
      padding-block: 8px;
      padding-inline: 20px;
      background-color: var(--wp--preset--color--gray-white);

      @media screen and (max-width: 999px) {
        width: 90%;
      }
    }

    .contactEntry__point {
      column-gap: 8px;
      width: 100%;
      margin: 0;

      img {
        display: flex;
        width: 16px;
      }
    }

    .contactEntry__button {
      width: 220px;
      height: 64px;
      margin-block-start: 0;

      @media screen and (max-width: 999px) {
        margin-block-start: 16px;
      }

      .wp-block-button {
        width: 100%;
        height: 100%;
      }
    }
  }

  .pageCta__inner {
    width: 50%;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    column-gap: 12px;

    @media screen and (max-width: 999px) {
      width: 100%;
      row-gap: 12px;
    }

    .pageCta__content {
      width: calc(50% - 12px);
      padding-block: 15px;
      padding-inline: 25px;
      margin-block-start: 0;
      border-radius: 12px;
      flex: 1;

      @media screen and (max-width: 999px) {
        padding-block: 12px;
        padding-inline: 8px;
      }

      .pageCta__title {
        padding-block-end: 10px;
        border-block-end: 1px dashed var(--wp--preset--color--gray);

        @media screen and (max-width: 999px) {
          height: 60px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }

      .pageCta__lead {
        text-align: justify;
        padding-inline: 4px;

        @media screen and (max-width: 999px) {
          margin-block-start: 8px;
        }
      }

      .pageCta__button {
        @media screen and (max-width: 999px) {
          margin-block-start: 8px;
        }
      }

      &.main {
        background-color: var(--wp--preset--color--light-brown);
        border: 1px solid var(--wp--preset--color--gray);
      }

      &.forSell {
        background-color: var(--wp--preset--color--navy);
        border: 1px solid var(--wp--preset--color--navy);

        .pageCta__title {
          color: var(--wp--preset--color--white);
          border-block-end: 1px dashed var(--wp--preset--color--light-gray);
        }

        .pageCta__lead {
          color: var(--wp--preset--color--white);
        }
      }

      &.forBuy {
        background-color: var(--wp--preset--color--orange);
        border: 1px solid var(--wp--preset--color--orange);

        .pageCta__title {
          color: var(--wp--preset--color--white);
          border-block-end: 1px dashed var(--wp--preset--color--light-gray);
        }

        .pageCta__lead {
          color: var(--wp--preset--color--white);
        }
      }
    }
  }
}

/*インフォメーション*/
.contactInformation {
  font-family: var(--wp--preset--font-family--outfit), var(--wp--preset--font-family--noto-sans-jp);
  width: 100%;
  padding-block: 16px;
  padding-inline: 24px;
  column-gap: 0;
  border-block: 2px solid var(--wp--preset--color--gray);

  .contactInformation__mainTitle {
    padding-inline-end: 16px;
    border-inline-end: 1px solid var(--wp--preset--color--gray);
  }

  .contactInformation__contents {
    display: flex;
    column-gap: 0;

    @media screen and (max-width: 999px) {
      padding-inline-start: 20px;
      flex-direction: column;
      row-gap: 8px;
    }
  }

  .contactInformation__content {
    column-gap: 8px;
    padding-inline: 16px;
    border-inline-end: 1px solid var(--wp--preset--color--gray);
    margin: 0;

    @media screen and (max-width: 999px) {
      width: 100%;
      padding: 0;
      border: none;
    }
  }

  &.forPage {
    .contactInformation__mainTitle {
      padding-inline-end: 16px;
    }
  }
}

/*---------- コンタクトフォーム ----------*/
.erContactForm {
  max-width: 600px;
  margin-inline: auto;

  @media screen and (max-width: 999px) {
    padding-inline: 20px;
  }

  p {
    margin-block-start: 28px;

    @media screen and (max-width: 999px) {
      margin-block-start: 24px;
    }
  }

  .required {
    color: var(--wp--preset--color--white);
    font-size: 12px;
    padding-block-start: 2px;
    padding-block-end: 3px;
    padding-inline: 6px;
    margin-inline-start: 8px;
    border-radius: 10px;
  }

  .wpcf7-form-control-wrap {

    input,
    textarea {
      font-size: 15px;
      width: 100%;
      padding-block: 8px;
      padding-inline: 6px;
      margin-block-start: 8px;
      border: 1px solid var(--wp--preset--color--gray);
      border-radius: 4px;
      box-sizing: border-box;
    }
  }

  .wpcf7-checkbox {
    .wpcf7-list-item {
      margin-block-start: 8px;

      label {
        display: flex;
        align-items: center;
        column-gap: 6px;

        input {
          width: 16px;
          height: 16px;
          margin: 0;
        }
      }
    }
  }

  .message {
    font-weight: 600;
    text-align: center;
    margin-block-start: 52px;
    position: relative;

    &::before {
      content: "";
      width: 100px;
      height: 1px;
      position: absolute;
      left: 0;
      top: 50%;

      @media screen and (max-width: 999px) {
        width: 35px;
      }
    }

    &::after {
      content: "";
      width: 100px;
      height: 1px;
      background-color: var(--wp--preset--color--orange);
      position: absolute;
      right: 0;
      top: 50%;

      @media screen and (max-width: 999px) {
        width: 35px;
      }
    }
  }

  .wpcf7-submit {
    color: var(--wp--preset--color--white);
    font-size: 16px;
    font-weight: 600;
    width: 100%;
    height: 40px;
    padding-inline: 8px;
    border: none;
    border-radius: 4px;
    cursor: pointer;

    &:hover {
      opacity: 0.8;
    }
  }

  &.forBuy {
    .required {
      background-color: var(--wp--preset--color--orange);
    }

    .message {
      color: var(--wp--preset--color--orange);

      &::before {
        background-color: var(--wp--preset--color--orange);
      }

      &::after {
        background-color: var(--wp--preset--color--orange);
      }
    }

    .wpcf7-submit {
      background-color: var(--wp--preset--color--orange);
    }
  }

  &.forSell {
    .required {
      background-color: var(--wp--preset--color--navy);
    }

    .message {
      color: var(--wp--preset--color--navy);

      &::before {
        background-color: var(--wp--preset--color--navy);
      }

      &::after {
        background-color: var(--wp--preset--color--navy);
      }
    }

    .wpcf7-submit {
      background-color: var(--wp--preset--color--navy);
    }
  }

  &.forContact {
    .required {
      background-color: #C70000;
    }

    .wpcf7-submit {
      background-color: var(--wp--preset--color--charcoal-gray);
    }
  }
}