/* ==========================================================================
   contact.css — /contact/ ページ固有（担当D）
   トークンは ennect.css :root を参照（新規変数・新規色は定義しない）
   CF7出力を p-contactForm でFLOCSSラップ（マークアップは cf7_form_definition.md）
   ========================================================================== */

/* --------------------------------------------------------------------------
   リード
   -------------------------------------------------------------------------- */
.p-contact__lead {
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.6;
}
.p-contact__desc {
  margin-top: 20px;
  color: var(--color-text-mute);
}

/* --------------------------------------------------------------------------
   フォーム全体
   -------------------------------------------------------------------------- */
.p-contact__form {
  margin-top: 60px;
}
.p-contactForm__field + .p-contactForm__field {
  margin-top: 28px;
}
.p-contactForm__label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  margin-bottom: 10px;
}
.p-contactForm__required {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 10px;
  border-radius: 30px;
  background: var(--color-panel);
  color: var(--color-invert-text);
  font-size: 1.1rem;
  font-weight: 400;
  letter-spacing: 0.09em;
  flex-shrink: 0;
}
.p-contactForm__note {
  font-size: 1.2rem;
  color: var(--color-text-sub);
  margin-top: 6px;
}

/* --------------------------------------------------------------------------
   入力欄（枠線 --color-border-light・角丸はトークン 30px/16px のみ）
   -------------------------------------------------------------------------- */
.p-contactForm input[type="text"],
.p-contactForm input[type="email"],
.p-contactForm input[type="tel"],
.p-contactForm select,
.p-contactForm textarea {
  width: 100%;
  border: 1px solid var(--color-border-light);
  background: var(--color-bg);
  font-family: var(--font-ja);
  font-size: 1.6rem; /* 16px未満はiOSがフォーカス時に拡大するため下げない */
  letter-spacing: 0.06em;
  color: var(--color-text);
  transition: border-color var(--transition);
}
.p-contactForm input[type="text"],
.p-contactForm input[type="email"],
.p-contactForm input[type="tel"],
.p-contactForm select {
  height: 56px;
  padding: 0 24px;
  border-radius: 30px;
}
.p-contactForm select {
  padding-right: 56px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23000000' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 24px center;
  cursor: pointer;
}
.p-contactForm textarea {
  min-height: 220px;
  padding: 20px 24px;
  border-radius: 16px;
  resize: vertical;
}
.p-contactForm input:focus,
.p-contactForm select:focus,
.p-contactForm textarea:focus {
  outline: none;
  border-color: var(--color-text);
}

/* --------------------------------------------------------------------------
   同意チェック（acceptance整列）
   -------------------------------------------------------------------------- */
.p-contactForm__consent {
  margin-top: 40px;
}
.p-contactForm .wpcf7-acceptance .wpcf7-list-item {
  margin: 0;
}
.p-contactForm .wpcf7-acceptance label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 1.4rem;
}
.p-contactForm .wpcf7-acceptance input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--color-panel);
  flex-shrink: 0;
  cursor: pointer;
}
.p-contactForm .wpcf7-list-item-label a {
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity var(--transition);
}
.p-contactForm .wpcf7-list-item-label a:hover {
  opacity: 0.8;
}

/* --------------------------------------------------------------------------
   送信ボタン（SEND: 黒ピル・英字。input要素のため c-button 相当を直接付与）
   -------------------------------------------------------------------------- */
.p-contactForm__submit {
  margin-top: 46px;
  text-align: center;
}
.p-contactForm__submitBtn {
  display: inline-block;
  border: none;
  border-radius: 60px;
  padding: 18px 72px 16.5px;
  background: var(--color-panel);
  color: var(--color-invert-text);
  font-family: var(--font-en);
  font-size: 1.8rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1.5;
  cursor: pointer;
  transition: opacity var(--transition);
}
.p-contactForm__submitBtn:hover {
  opacity: 0.6;
}
.p-contactForm .wpcf7-spinner {
  display: block;
  margin: 12px auto 0;
}

/* --------------------------------------------------------------------------
   バリデーション・応答メッセージ
   -------------------------------------------------------------------------- */
.p-contactForm .wpcf7-not-valid-tip {
  display: block;
  font-size: 1.2rem;
  margin-top: 8px;
}
.p-contactForm .wpcf7-response-output {
  margin: 40px 0 0;
  padding: 14px 24px;
  border-radius: 16px;
  font-size: 1.3rem;
}

/* --------------------------------------------------------------------------
   SP
   -------------------------------------------------------------------------- */
@media (max-width: 999px) {
  .p-contact__lead {
    font-size: 1.8rem;
  }
  .p-contact__form {
    margin-top: 40px;
  }
  .p-contactForm__field + .p-contactForm__field {
    margin-top: 20px;
  }
  .p-contactForm textarea {
    min-height: 180px;
  }
  .p-contactForm__submitBtn {
    width: 100%;
    padding: 16px 24px;
  }
}