@charset "UTF-8";
/*
formのサイズ 960px
break point1 1007px…formの両脇が狭苦しくなってきたら
break point2 767px…ipad miniのサイズを切ったら
*/

:root {
  --wideContentsWidth: 960px;
}

.contact_section {
  width: 100%;
  max-width: var(--wideContentsWidth);
  margin: 0 auto;
}

.requiredCaution {
  text-align: right;
  font-size: 12px;
  color: #ee0101;
  margin-bottom: 8px;
}

[type="text"],
[type="number"],
[type="email"],
[type="tel"],
[type="date"] {
  width: 100%;
}

dl {
  margin-bottom: 32px;
  div {
    display: flex;
    margin-bottom: 2px;
    &:has(.validate\[required\]) {
      dt:not(.no-asterisk)::after {
        content: "*";
        color: #ee0101;
        margin-left: 2px;
      }
    }
    dt,
    dd {
      display: flex;
      align-items: center;
      height: auto;
      /* font-size: 14px; */
    }
    dt {
      width: 200px;
      padding: 20px 32px 20px 24px;
      margin-right: 2px;
      justify-content: flex-end;
      color: #666;
      background-color: #f0f0f0;

      &.required::after {
        content: "*";
        color: #ee0101;
        margin-left: 2px;
      }
    }
    dd {
      margin: 0px;
      padding: 14px 24px;
      width: 758px;
      /* form のサイズ(960px) - dt のサイズ(200px) - dtの右のmarginのサイズ(2px) */
      background-color: #f9f9f9;
      a {
        color: #999;
        text-decoration: underline;
      }
      ul,
      ol,
      ul li,
      ol li {
        margin: 0px;
        padding: 0px;
      }
      ul,
      ol {
        list-style: none;
      }

      /* 予約希望日のとこで使ってるやつ。一列に並べたいよ、という思い */
      .reservation_inline_wrap {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        margin-right: 16px;
        &:last-of-type {
          margin-right: 0;
        }
        .select_text {
          margin-right: 4px;
        }
      }

      .wpcf7-form-control-wrap {
        margin-right: 16px;
        display: flex;
        &:last-of-type {
          margin-right: 0;
        }
        &:has(textarea) {
          width: 100%;
        }
      }

      [type="text"],
      [type="number"],
      [type="email"],
      [type="tel"],
      [type="date"],
      textarea {
        border: solid 1px #ccc;
        padding: 8px;
        font-size: 0.875rem;
        &:read-only {
          background-color: #f0f0f0;
          border: solid 1px #cfcfcf;
          color: #666;
        }
      }
      textarea {
        width: 100%;
      }
      select {
        border: solid 1px #ccc;
        padding: 8px 0;
      }

      [type="checkbox"],
      [type="radio"] {
        margin: 0px 2px;
      }

      /* contact form7 のバリデーションを消す */
      span.wpcf7-not-valid-tip {
        display: none !important;
      }

      /* jquery-validation-engine のポップアップを調整  */
      .formError .formErrorContent.formErrorContent {
        position: relative;
        border: none;
        box-shadow: none;
        border-radius: 0;
        top: -12px;
      }
      .formError .formErrorContent::after {
        content: "";
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 8px 8px 0 8px;
        border-color: #ee0101 transparent transparent transparent;
        position: absolute;
        bottom: -8px;
        left: 8px;
      }
      .formError .formErrorArrow div {
        display: none !important;
      }
      .formError .formErrorArrowBottom {
        display: none;
      }

      /* 都道府県取得のとき用 */
      &.h-adr {
        div {
          width: 100%;
          display: flex;
          align-items: center;
          margin-bottom: 8px;
          font-size: 14px;
          label {
            width: 64px;
          }
          a {
            margin-left: 8px;
          }
        }
      }
    }
  }
}

[type="submit"],
[type="button"] {
  display: block;
  /* font-size: 16px; */
  margin: 0 auto;
  padding: 16px 96px;
  background: #000;
  color: #fff;
  border: none;
  text-shadow: none;
  border-radius: 0;
  cursor: pointer;
  outline: none;
  text-align: center;
  transition: 0.3s;

  &:hover {
    background-color: #ddd;
    color: #000;
  }
  &:disabled {
    background-color: #ddd;
    color: #666;
    cursor: not-allowed;
  }
}

.previous_submit {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 24px;
  justify-content: space-evenly;
  width: 100%;
  div {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 50%;
  }
  input {
    margin: 0;
    &.wpcf7-previous {
      background-color: #969696;
      &:hover {
        background-color: #ddd;
      }
    }
  }
}

@media screen and (max-width: 1007px) {
  .contact_section {
    width: 100%;
    padding: 0 20px;
  }
  dl div dd {
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;

    .reservation_inline_wrap {
      display: flex;
      width: 100%;
      &:last-of-type {
        margin-right: 0;
      }
      .select_text {
        margin-right: 0;
        width: 96px;
      }
      .wpcf7-form-control-wrap {
        width: auto;
      }
    }

    .wpcf7-form-control-wrap {
      width: 100%;
      margin: 0 0 16px 0;

      &:last-of-type {
        margin-bottom: 0;
      }
    }

    /* 都道府県取得のとき用 */
    &.h-adr {
      div {
        align-items: flex-start;
        flex-direction: column;
        a {
          margin-left: 0;
        }
      }
    }
  }
}

@media screen and (max-width: 767px) {
  dl {
    div {
      flex-direction: column;
      dt {
        width: 100%;
        margin: 0;
        padding: 8px;
        justify-content: flex-start;
      }
      dd {
        width: 100%;
        padding: 20px 10px;
        .reservation_inline_wrap {
          flex-direction: row;
          /* align-items: flex-start; */
        }
      }
    }
  }
}

@media only screen and (max-width: 660px) {
  .previous_submit {
    flex-direction: column;
    align-items: center;
    input.wpcf7-previous {
      margin-bottom: 16px;
    }
  }
}

/* Multi-Step Forms 文字数制限対応の調整 */
.countTxt {
  display: block;
  width: 100%;
}
dl div dd {
  display: flex;
  flex-wrap: wrap;
}

/*中央揃えにする*/
div.wp_cf-turnstile {
    display: flex !important;
    justify-content: center !important;
    margin-bottom: 10px;
}

/*フォーム内のfocus-visibleのカラー変更*/
form a:focus-visible,
form button:focus-visible,
form input:focus-visible,
form textarea:focus-visible {
    outline: 2px solid #CCC;
    outline-offset: 0px;
}