/* イントロテキスト,  privacy-notice, acceptance テキストスタイル */
.contact__content .contact__intro , 
.contact__content .privacy-notice,
.contact__content .wpcf7-acceptance .wpcf7-list-item-label{
  font-family: var(--font-strong);
  font-size: 1.4rem;
  line-height: 1.85;
  color: var(--color-dark);
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.07em;
}

/* 入力フィールド共通 */
.contact__content input[type="text"],
.contact__content input[type="email"],
.contact__content input[type="tel"],
.contact__content textarea {
  width: 100%;
  padding: 1em 2em;
  font-family: var(--font-strong);
  color: #000;
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.62;
  letter-spacing: 0.08em;
  border: 1px solid #000;
  color: var(--color-dark);
}

/* 中国語環境でPCサイズの時のみ幅制限 */
@media screen and (min-width: 751px) {
  :lang(zh) .contact__content .wpcf7-form,
  :lang(zh-CN) .contact__content .wpcf7-form{
    margin: 0 auto;
    max-width: 72rem;
  }
}

/* ラジオ */
.radio-group{
  color: #000;
  font-family: var(--font-strong);
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.62;
  letter-spacing: 0.08em;
}
/* ラジオボタンを横並びに */
.radio-group .wpcf7-radio {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 3em;
}

.radio-group .wpcf7-list-item {
  margin: 0;
}

.radio-group .wpcf7-list-item .wpcf7-list-item-label {
  opacity: 1;
}

/* ラジオボタンのカスタムスタイル */
.radio-group .wpcf7-list-item label {
  display: flex;
  align-items: center;
  gap: 0.7em;
  cursor: pointer;
}

.radio-group input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 1.3em;
  height: 1.3em;
  border: 1px solid var(--color-dark);
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

.radio-group input[type="radio"]:checked::after {
  content: '';
  width: 0.8em;
  height: 0.8em;
  background-color: var(--color-dark);
  border-radius: 50%;
}

.contact__content textarea{
  height: 20em;
}

/* プレースホルダー */
.contact__content ::placeholder {
  opacity: 0.5;
  color: #000;
}

.contact__content .wpcf7-validates-as-required {
  position: relative;
}

/* フォームグループ */
.contact__content .form-group {
  position: relative;
  padding-left: 3em;
}

/* 必須マーク ※ */
.contact__content .form-group.required::before {
  content: '※';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  color: #D90004;
  font-family: var(--font-strong);
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.62;
  letter-spacing: 0.08em;
  margin-right: 1.4em;
}

/* textarea用の必須マーク ※ - placeholderと同じ高さに */
.contact__content .form-group.required:has(textarea)::before {
  top: 1em;
  transform: none;
}

/* 中央揃えグループ */
.contact__content .form-group--center {
  padding-left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}


.contact__content .privacy-notice{
  margin-top: -0.7em;
  margin-bottom: -1em;
}

/* チェックボックス */
.contact__content .wpcf7-acceptance {
  display: flex;
  align-items: center;
  gap: 0.6em;
  background-color: var(--color-bg);
}

/* リストアイテム */
.contact__content .wpcf7-list-item {
  margin: 0;
  display: flex;
  align-items: center;
}
/* ラベル */
.contact__content .wpcf7-acceptance label {
  display: flex;
  align-items: center;
  gap: 0.6em;
  cursor: pointer;
}
.contact__content .wpcf7-acceptance input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 1.6em;
  height: 1.6em;
  aspect-ratio: 1/1;
  cursor: pointer;
  border: 1px solid var(--color-dark);
  background-color: transparent;
  position: relative;
  flex-shrink: 0;
}
/* チェック時 */
.contact__content .wpcf7-acceptance input[type="checkbox"]:checked {
  background-color: var(--color-dark);
  border-color: var(--color-dark);
}

/* チェックマーク */
.contact__content .wpcf7-acceptance input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%) rotate(45deg);
  width: 0.4rem;
  height: 0.8rem;
  border: solid #fff;
  border-width: 0 2px 2px 0;
}


/* ボタン共通スタイル */
.contact__content input[type="submit"],
.contact__content input[type="button"],
.contact__content .wpcf7-previous {
  color: var(--color-dark);
  padding: 0.8em 8.55em;
  border: none;
  cursor: pointer;
  font-family: var(--font-strong);
  font-size: 1.4em;
  text-align: center;
  font-style: normal;
  font-weight: 500;
  line-height: 1.85;
  letter-spacing: 0.07em;
  transition: all 0.3s ease;
  border-radius: 2em;
  border: 1px solid var(--color-dark);
}

.contact__content input[type="submit"]:hover,
.contact__content input[type="button"]:hover,
.contact__content .wpcf7-previous:hover {
  background-color: var(--color-dark);
  color: var(--color-light);
}

/* 戻るボタンと送信ボタンを横並びに配置 */
.contact__content .form-group--center {
  display: flex;
  gap: 2em;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
}


/* ボタンラッパー */
.contact__content .button-wrapper {
  display: inline-block;
}

/* Multi-Step Forms のボタンコンテナ */
.contact__content .wpcf7-form p:has(.wpcf7-previous),
.contact__content .wpcf7-form p:has(input[type="submit"]) {
  display: flex;
  gap: 2em;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
}

/* 戻るボタン (previous) */
.contact__content .wpcf7-previous {
  background-color: transparent;
  margin: 0;
}

/* 送信ボタン */
.contact__content input[type="submit"] {
  background-color: transparent;
  margin: 0;
}

/* 英語環境でボタンの擬似要素を非表示 */
:lang(en) .contact__content input[type="button"]::before,
:lang(en) .contact__content input[type="button"]::after,
:lang(en) .contact__content .wpcf7-previous::before,
:lang(en) .contact__content .wpcf7-previous::after {
  content: none !important;
  display: none !important;
}

/* Individual field error messages */
.wpcf7-not-valid-tip {
  font-family: var(--font-strong);
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.62;
  letter-spacing: 0.08rem;
  margin-top: 0.5em;
}

/* Mobile */
@media screen and (max-width: 750px) {
  /* イントロテキスト,  privacy-notice, acceptance テキストスタイル */
  .contact__content .contact__intro , 
  .contact__content .privacy-notice,
  .contact__content .wpcf7-acceptance .wpcf7-list-item-label{
    letter-spacing: 0.07rem;
  }
  /* 入力フィールド共通 */
  .contact__content input[type="text"],
  .contact__content input[type="email"],
  .contact__content input[type="tel"],
  .contact__content textarea {
    padding: 1rem 2rem 1.4rem;
    letter-spacing: 0.08rem;
  }
  /* ラジオ */
  .radio-group{
    padding: 1rem 2rem 1.4rem;
    letter-spacing: 0.08rem;
  }

  /* ラジオボタンをモバイルで縦並びに */
  .radio-group .wpcf7-radio {
    flex-direction: column;
    gap: 2rem;
  }


  /* ラジオボタンのカスタムスタイル */
  .radio-group .wpcf7-list-item label {
    gap: 1rem;
  }

  .radio-group input[type="radio"] {
    width: 2.2rem;
    height: 2.2rem;
  }

  .radio-group input[type="radio"]:checked::after {
    width: 1.2rem;
    height: 1.2rem;
  }

  .contact__content textarea{
    height: 20rem;
  }
  .contact__content .form-group {
    padding-left: 2.3rem;
  }

  /* 必須マーク ※ */
  .contact__content .form-group.required::before {
    top: 50%;
    transform: translateY(-50%);
    margin-right: 0.5rem;
    margin-left: 0.2rem;
    letter-spacing: 0.08rem;
    margin-right: 1.4rem;
  }

  /* textarea用の必須マーク ※ - placeholderと同じ高さに */
  .contact__content .form-group.required:has(textarea)::before {
    top: 1rem;
    transform: none;
  }

  /* radio-group用の必須マーク ※ - 最初のラベルと同じ高さに */
  .contact__content .form-group.radio-group.required::before {
    top: 1rem;
    transform: none;
  }

  /* チェックボックス */
  .contact__content .wpcf7-acceptance {
    gap: 0.6rem;
  }

  .contact__content .privacy-notice{
    margin-top: -2rem;
    margin-bottom: 0rem;
  }

  /* ラベル */
  .contact__content .wpcf7-acceptance label {
    gap: 0.6rem;
  }

  .contact__content .wpcf7-acceptance input[type="checkbox"] {
    width: 2rem;
    height: 2rem;
  }

  /* 送信ボタン */
  .contact__content input[type="submit"] {
    padding: 0.8rem 8.55rem;
    font-size: 1.4rem;
    letter-spacing: 0.07rem;
    border-radius: 2rem;
  }

  /* Individual field error messages */
  .wpcf7-not-valid-tip {
    font-size: 1rem;
    margin-top: 0.5rem;
  }

  :lang(zh) .contact__content .wpcf7-form,
  :lang(zh-CN) .contact__content .wpcf7-form{
    margin: 0;
    max-width: none;
  }
}
