.contact-form {
  max-width: 1430px;
  margin: 0 auto;
  color: var(--bk);
  font-weight: 700;
  font-size: var(--22);
}

.form-row {
  display: flex;
  gap: 37px;
  margin-bottom: 40px;
}

.form-label {
  width: 30%;
  font-weight: 600;
  display: grid;
  grid-template-columns: 1fr 48px;
  align-items: center;
  gap: 16px;
  font-size: var(--22);
  white-space: nowrap;
}

.form-label.flexStart {
  align-items: self-start;
}

.form-label__title {
  font-size: var(--22);
  text-align: right;
}
    @media(max-width:768px){
      .form-label__title {
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 0.05em;
      }
      p.form-field__P {
        font-size: 14px;
        letter-spacing: 0.05em;
        margin-top: 18px;
        font-weight: 400;
      }
    }


.form-label__required,
.form-label__optional {
  font-size: var(--15);
  text-align: center;
  padding: 4px 6px;
  font-weight: 700;
  border-radius: 5px;
}
    @media(max-width:768px){
      span.form-label__required {
        font-size: 10px;
      }
    }

/* 必須 */
.form-label__required {
  background-color: var(--blue);
  color: var(--wh);
}
/* 必須：空 */
.form-label__required:empty {
  background: none;
  padding: 0;
  border: 0;
  visibility: hidden;
}

/* 任意 */
.form-label__optional {
  background-color: #A3AFAC;
}

.form-field {
  flex: 1;
}

.form-field input,
.form-field select,
.form-field textarea {
  width: calc(100% - 60px);
  padding: 20px 30px;
  border-radius: 5px;
  border: none;
  font-size: var(--22);
  box-shadow: 4px 4px 8px rgba(118, 168, 208, 0.33);
  font-family: var(--font-ja);
}
    @media(max-width:768px){
      .form-field input, .form-field select, .form-field textarea {
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 0.05em;
        padding: 11px 21px;
        width: calc(100% - 42px);
      }
    }


.form-field textarea {
  resize: vertical;
  line-height: 1.5;
  font-size: var(--22);
  font-weight: 500;
}

.form-radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
}

.form-radio-group label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

/* 性別、希望のご連絡方法 */
.form-radio-group.radio-bl {
  flex-direction: column;
  row-gap: 16px;
}
.form-radio-group.radio-bl .radio {
    width: 100%;
}

/* お問い合わせの種類のみ改行 (.line-break) */
.form-radio-group.line-break {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
    @media(max-width:768px){
      .form-radio-group.line-break {
        flex-direction: column;
        margin-top: 18px;
      }
    }



.form-radio-group.line-break .radio {
  width: calc(90% / 3); /* 1段目は3個 */
  box-sizing: border-box;
}
    @media(max-width:768px){
      .form-radio-group.line-break .radio {
        width: 100%;
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 0.05em;
    }
    }


/* 4つ目・5つ目は2段目なので幅を50%にする */
.form-radio-group.line-break .radio:nth-child(n+4) {
  width: 45%;
}
    @media(max-width:768px){
      .form-radio-group.line-break .radio:nth-child(n+4) {
        width: 100%;
    }
    }


/* 住所 */
.address {
  display: grid;
  grid-template-columns: 160px 200px 1fr;
  gap: 12px;
}



/* SP */
    @media (max-width: 768px) {
      .form-row {
        flex-direction: column;
        gap: 14px;
        margin-bottom: 28px;
      }

      .form-row.skill_kinds {
        margin-bottom: 0;
      }

      .form-label {
        width: 100%;
        display: flex;
        font-size: 14px;
      }

      .privacy__inner {
      font-size: 12px;
      }

      .privacy__inner {
      font-size: 12px;
      font-weight: 500;
      }

      .address {
      grid-template-columns: 1fr;
      }
    }

.form-error {
  margin-top: 6px;
  color: var(--red);
  font-size: 13px;
  display: none;
}


.form-field .p-postal-code {
  width: 150px;
  margin-right: 15px;
}
.form-field .p-region {
  width: 180px;
}
.form-field .p-locality {
  width: calc(100% - 60px);
  margin-top: 16px;
}
    @media (max-width: 1024px) {
      .form-field .p-postal-code {
        width: 25%;
      }
      .form-field .p-region {
        width: 25%;
      }
      .form-field .p-locality {
        width: calc(100% - 42px);
        margin-top: 16px;
      }
    }


/* 生年月日 */
.birthday {
  display: flex;
  gap: 12px;
  max-width: 420px;
}

.birthday select {
  flex: 1;
  background-color: var(--wh);
  border-radius: 5px;
  border: none;
  font-size: var(--22);
  box-shadow: 4px 4px 8px rgba(118, 168, 208, 0.33);
  padding: 20px;
  width: 100%;
	/* Safari対応 */
    -webkit-appearance: none;
    appearance: none;
}

/* SP */
@media (max-width: 768px) {
  .birthday {
    max-width: 100%;
  }
  .birthday select {
    padding: 11px 21px;
    font-size: 14px;
}
}


/* 初期表示（未選択） */
select {
  color: #A3AFAC;
}

/* 値が選択されたら文字色を戻す */
select:has(option:checked:not([value=""])) {
  color: var(--bk);
}

option[value=""] {
  color: #A3AFAC;
}


/* :placeholder
================== */
/* Chrome, Edge, Firefox */
input::placeholder,
textarea::placeholder {
  color: #A3AFAC;
  opacity: 1;
}

/* Safari */
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #A3AFAC;
}

/* IE（不要なら省略OK） */
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: #A3AFAC;
}


/* テキストエリア */
.js-textarea-sample {
  color: #A3AFAC;
}
.js-textarea-sample.is-typing {
  color: var(--bk);
}


/* placeholder（見本） */
textarea::placeholder {
  color: #A3AFAC;
  opacity: 1;
}

/* Safari */
textarea::-webkit-input-placeholder {
  color: #A3AFAC;
}

/* 入力文字 */
textarea {
  color: var(--bk);
}





/* プライバシーポリシー本文 */
.privacy-box {
  max-height: 220px;
  overflow-y: auto;
  padding: 30px;
  border-radius: 5px;
  background: #fff;
  box-shadow: 4px 4px 8px rgba(118, 168, 208, 0.33);
  font-size: var(--22);
  line-height: 1.7;
}

/* 見出し */
.privacy-box h4 {
  margin-bottom: 12px;
  font-size: var(--22);
  font-weight: 600;
}

/* チェックボックス */
.privacy-check {
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--22);
  justify-content: center;
}
input#privacy-agree {
  width: 20px;
}

/* 送信ボタン */
.form-submit {
  margin-top: 100px;
  text-align: center;
}

.form-submit button {
  min-width: 220px;
  padding: 14px 24px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

/* 非活性 */
.form-submit button:disabled {
  background: #A3AFAC;
  cursor: not-allowed;
}



/* BUTTON ホバーで背景＋文字色を反転
=========================== */
#confirm-btn {
  background-color: var(--blue);
  color: #fff;
  border: 1px solid var(--blue);
  border-radius: 9999px;
  padding: 14px 48px;
  font-size: var(--22);
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.37);
}

/* hover（wp前検品用） */
#confirm-btn:hover {
  background-color: #fff;
  color: var(--blue);
}

/* hover（有効時のみ） */
#confirm-btn:not(:disabled):hover {
  background-color: #fff;
  color: var(--blue);
}

    @media(max-width:768px){
      .form-submit {
        margin-top: 50px;
      }
      #confirm-btn {
        padding: 8px 0;
        font-size: 13px;
        min-width: 170px;
      }
    }




/* ラジオボタンカスタマイズ
=========================== */
.radio {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: var(--22);
}

/* 元のラジオを消す */
.radio input[type="radio"] {
  position: absolute;
  opacity: 0;
}

/* 外枠 */
.radio__circle {
  width: 20px;
  height: 20px;
  border: 3px solid #707070;
  border-radius: 50%;
  position: relative;
  box-sizing: border-box;
}

/* 中の青丸（非表示） */
.radio__circle::after {
  content: "";
  position: absolute;
  inset: 4px;
  background-color: var(--blue);
  border-radius: 50%;
  opacity: 0;
  transition: opacity .2s;
}

/* チェックON */
.radio input:checked + .radio__circle::after {
  opacity: 1;
}

/* フォーカス（キーボード操作） */
.radio input:focus-visible + .radio__circle {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* 全体のスタイル */
.contact__form {
  padding: 220px 5% 0;
}
.contact__form-inner {
  max-width: 1620px;
  margin: 0 auto;
  width: 75%;
}
    @media(max-width:768px){
      .contact__form-inner {
        width: 100%;
    }
    .contact__form {
          padding: 120px 5% 0;
      }
      .radio {
        font-size: 14px;
      }
    }


.contact__form .under__ttl {
  text-align: center;
}
.contact__form .under__subTtl {
  justify-content: center;
}
.contact__text {
  font-size: var(--22);
  text-align: center;
  line-height: 1.8;
  font-weight: 700;
  letter-spacing: 0.03em;
  margin: 57px auto 100px;
}
    @media(max-width:768px){
      .contact__text {
        font-size: 12px;
        letter-spacing: 0;
        margin: 25px auto 45px;
      }
      .contact__form .under__ttl {
        text-align: center;
      }
      .under__subTtl {
        font-size: 13px;
        font-weight: 700;
      }
      .contact__form .under__subTtl {
        margin-left: -30px;
      }
    }

.agree-check a {
  color: var(--bk);
  text-decoration: underline;
}

/* ===========
    confirm
=========== */
.confirm .contact__form {
  margin-top: 40px;
  padding: 0 5%;
}

.confirm .contact-form {
  margin: 0 auto;
}
    @media(max-width:768px){
      .confirm .contact-form {
        margin: 45px auto 0;
      }
    }

.confirm__form {
  max-width: 820px;
  margin: 0 auto 60px;
}

.confirm__form .form-label {
  width: 40%;
}
.confirm__form .form-radio-group {
  width: 50%;
}
    @media(max-width:768px){
      .confirm__form .form-radio-group {
        width: 100%;
        margin-top: 0;
      }
    }

.confirm__form .form-row {
  gap: 10%;
  margin-bottom: 60px;
}
    @media(max-width:768px){
      .confirm__form .form-row {
        margin-bottom: 37px;
      }
    }

.confirm__form .form-field.address-grid {
  display: grid;
  row-gap: 18px;
}
    @media(max-width:768px){
    .confirm__form .form-field.address-grid {
    row-gap: 0;
    }
    }

.confirm__form .form-field__post {
margin-right: 60px;
}


/* ===========
    thanks
=========== */
.thanks__message {
  font-size: var(--22);
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.03em;
  margin-top: 57px;
}
.thanks .btn-wrapper {
  width: clamp(237px, 19.27vw, 317px);
  height: clamp(49.5px, 3.437vw, 66px);
  margin-top: 60px;
}
.thanks .btn-wrapper a {
  background-color: var(--blue);
  color: #fff;
  border: 1px solid var(--blue);
  border-radius: 9999px;
  padding: 0;
  font-size: var(--22);
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.37);
  display: grid;
  place-content: center;
  height: 100%;
  text-decoration: none;
}

.thanks .btn-wrapper a:hover {
  background: var(--wh);
  color: var(--blue);
  border: solid 1px var(--blue);
}
.thanks .contact__form-inner {
  max-width: 1620px;
  margin: 0 auto;
  width: 75%;
  text-align: center;
}
.thanks .contact__form {
  margin-top: 0;
  padding: 0 5%;
}
    @media(max-width:768px){
      .thanks__message {
        font-size: 12px;
        margin-top: 25px;
      }
      .thanks .btn-wrapper {
        margin-top: 53px;
        height: 35px;
        width: 170px;
      }
      .thanks .btn-wrapper a {
        font-size: 13px;
      }
      .thanks .contact__form-inner {
        width: 100%;
      }
    }






/* ラジオボタンのカスタマイズ 
============================*/
input[type="radio"] {
  width: auto;
  box-shadow: none;
}

.radio-bl input[type="radio"] { position: absolute; opacity: 0; }
.radio-bl .wpcf7-list-item-label::before {
  content: ""; display: inline-block; width: 20px; height: 20px;
  border: 3px solid #707070; border-radius: 50%; margin-right: 8px;
  vertical-align: middle; position: relative;
}
.radio-bl input[type="radio"]:checked + .wpcf7-list-item-label::before {
  background-color: var(--blue);
  border-color: var(--blue);
}

.radio-bl input[type="radio"] {
  position: static;
  opacity: 1;
}
.radio-bl .wpcf7-list-item-label::before {
  content: none;
}


/* ===========================
   チェックボックスカスタム
=========================== */
.agree-check {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-weight: 700;
  font-size: 22px;
  color: var(--bk);
  margin-top: 60px;
  position: relative;
  justify-content: center;
}

/* 元のチェックボックスを非表示 */
.agree-check input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
}

/* 見た目用ボックス */
.agree-check__box {
  width: 18px;
  height: 18px;
  border: 2px solid var(--blue);
  display: inline-block;
  position: relative;
  transition: background-color .2s, border-color .2s;
}

/* チェックON */
.agree-check input:checked ~ .agree-check__box {
  background-color: var(--blue);
}

/* チェックマーク */
.agree-check input:checked ~ .agree-check__box::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 5px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* フォーカス対応（キーボード操作） */
.agree-check input:focus-visible ~ .agree-check__box {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

    /* レスポンシブ */
    @media (max-width:768px) {
      .agree-check {
        font-size: 14px;
        margin-top: 50px;
      }
    }


/* cf7__送信ボタン */
.form-submit input {
  min-width: 220px;
  padding: 14px 24px;
  border-radius: 999px;
  background: #0066cc;
  color: #fff;
  font-size: 16px;
  border: none;
  cursor: pointer;
  border: 1px solid var(--blue);
}
.form-submit input:hover {
  background-color: #fff;
  color: var(--blue);
}


label.agree-check span {
  font-size: var(--22);
}




.h-zip {
  padding-left: 24px; /* 〒の分だけ余白 */
  position: relative;
}

.h-zip::before {
  content: "〒";
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  color: #333;
}



/* =======================
    CSS（ラジオ丸ボタン＋フェード切替）
======================= */
.form-selector {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 20px;
  flex: 1;
}
    @media(max-width:768px){
      .form-selector {
        gap: 17.5px;
        flex-direction: column;
      }
    }

.radio-btn input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.radio-btn__circle {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border: 2px solid var(--blue);
  border-radius: 50%;
  transition: background-color 0.3s, border-color 0.3s;
}

/* フェード切替フォーム */
.contact-form {
  display: none;
}

.contact-form.is-active {
  display: block;
}


.birthday .wpcf7-form-control-wrap.birth-date {
  display: none;
}
.Form__checkbox {
  text-align: center;
}
input.btn-submit {
  min-width: 220px;
  padding: 14px 24px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: 16px;
  border: none;
  cursor: pointer;
  border: 1px solid var(--blue);
  width: 220px;
  height: 52px;
}
input.wpcf7-form-control.wpcf7-previous {
  min-width: 220px;
  padding: 14px 24px;
  border-radius: 999px;
  background: #fff;
  color: var(--blue);
  font-size: 16px;
  border: none;
  cursor: pointer;
  border: 1px solid var(--blue);
  display: block;
  margin: 100px auto 0;
  width: 220px;
  height: 52px;
}
input.wpcf7-form-control.wpcf7-previous:hover {
  background-color: var(--blue);
  color: #fff;
}

.form-submit.confirm {
  margin-top: 30px;
}
.char-count {
  font-size: 13px;
  text-align: right;
}
input[type="checkbox"] {
  margin: auto 10px 3px 0;
}
.md-contact_policyWrap {
  text-align: center;
}
    @media(max-width:768px){
      .Form__checkbox {
        margin-left: -1em;
        margin-top: 50px;
      }
      input.btn-submit {
        min-width: 170px;
        padding: 0;
        font-size: 13px;
        width: 170px;
        height: 35px;
        margin: 0 auto;
      }
      input.wpcf7-form-control.wpcf7-previous {
        min-width: 170px;
        padding: 0;
        font-size: 13px;
        margin: 50px auto 0;
        width: 170px;
        height: 35px;
      }
    }

.form-row.form-kinds {
  display: flex;
  gap: 37px;
  max-width: 1430px;
  margin: 100px auto 40px;
  color: var(--bk);
  font-weight: 700;
  font-size: var(--22);
}
.confirm .radio-btn {
  position: static;
  padding-left: 0;
}
.confirm .form-selector {
  margin-bottom: 0;
}
.btn-submit_wrapper.confirm {
  margin-top: 30px;
  text-align: center;
}

    @media(max-width:768px){
      .form-row.form-kinds {
        margin: 45px auto 28px;
        font-size: 14px;
        gap: 14px;
      }
    }



/* CF7_ラジオボタン
================ */
/* ラジオ全体を横並びに */
.radio-style .wpcf7-form-control {
  display: flex;
  flex-direction: column;
}

/* 1項目ずつ */
.radio-style .wpcf7-list-item {
  margin: 0; /* デフォルトの余白を消す */
}

/* labelを中央揃え */
.radio-style .wpcf7-list-item label {
  display: flex;
  align-items: center; /* ← 縦ズレ解消の要 */
  gap: 8px;
  cursor: pointer;
}

/* 余計なマージン消す */
.radio-style .wpcf7-list-item {
  margin: 0;
}

/* labelを中央揃え */
.radio-style .wpcf7-list-item label {
  display: flex;
  align-items: center;
  line-height: 1.4;
  cursor: pointer;
}

/* 1項目ずつ */
.radio-style .wpcf7-list-item {
  margin: 0 0 12px 0; /* 行間だけ確保 */
}

/* labelを基準にする */
.radio-style .wpcf7-list-item label {
  display: flex;
  align-items: center;   /* 縦中央 */
  cursor: pointer;
}

/* 文字側(span)もflexにする */
.radio-style .wpcf7-list-item-label {
  display: flex;
  align-items: center;
  position: relative;
  line-height: 1.4;
}

/* 元ラジオ非表示 */
.radio-style input[type="radio"] {
  position: absolute;
  opacity: 0;
}

/* 外枠の丸 */
.radio-style .wpcf7-list-item-label::before {
  content: "";
  width: 22px;
  height: 22px;
  border: 1.5px solid #707070;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  margin-right: 8px;   /* 丸と文字の間 */
}

/* 中の青丸 */
.radio-style input[type="radio"]:checked + .wpcf7-list-item-label::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  background: var(--blue);
  border-radius: 50%;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
}
    @media(max-width:768px){
      .radio-style .wpcf7-list-item-label::before {
        width: 14px;
        height: 14px;
        border: .75px solid #707070;
      }
      .radio-style input[type="radio"]:checked + .wpcf7-list-item-label::after {
        width: 7.5px;
        height: 7.5px;
        left: 3px;
      }
      span.wpcf7-list-item-label,
      .form-field textarea {
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 0.05em;
        width: calc(100% - 42px);
      }
    }


/* HTML_ラジオボタン 
  ================ */
  /* 全体ラジオラベル */
.radio-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: var(--22);
    position: relative;
    font-weight: bold;
    user-select: none;
    padding-right: 28px;
}

/* 元のラジオを消す */
.radio-btn input[type="radio"] {
  position: absolute;
  opacity: 0;
}

/* 外枠の丸 */
.radio-btn__circle {
  width: 22px;
  height: 22px;
  border: 1.5px solid #707070;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  position: relative;
}

/* チェックONの中丸 */
.radio-btn input[type="radio"]:checked + .radio-btn__circle::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: var(--blue);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

    @media(max-width:768px){
      .radio-btn {
        font-size: 14px;
        font-weight: 500;
        padding-right: 0;
        letter-spacing: 0.05em;
      }
      .radio-btn__circle {
        width: 14px;
        height: 14px;
        border: .7px solid #707070;
        top: 0;
        transform: translateY(0);
      }
      .form-selector {
        flex-direction: column;
        margin-bottom: 0;
      }
      .radio-btn input[type="radio"]:checked + .radio-btn__circle::after {
        width: 7.5px;
        height: 7.5px;
      }
    }

/* confirm */
.confirm .radio-btn,
.confirm .form-field {
    font-weight: 500;
}

    @media(max-width:768px){
    .confirm .form-field.radio-skill {
        font-size: 14px;
        font-weight: 500;
    }
    .confirm .form-field {
        font-size: 14px;
        font-weight: 500;
    }
    .confirm .form-row.skill_kinds,
    .confirm .form-row {
        margin-bottom: 37px;
    }
    }