/* ==========================================================================
   Form Layout (Old Visionary class names)
   ========================================================================== */
.contact { max-width: var(--content-max-width); margin: 0 auto; padding: 48px 24px 80px; }
.contact__LeadBlock { text-align: center; margin-bottom: 40px; }
.contact__LeadBlock-title { font-size: 15px; color: var(--color-text-secondary); line-height: 1.9; }
.contact__formBlock { max-width: var(--content-max-width); margin: 0 auto; }
.contact__formBlock-sub { text-align: right; font-size: 13px; color: var(--color-text-secondary); margin-bottom: 16px; }

/* ==========================================================================
   Error Message (com_message)
   ========================================================================== */
.com_message { display: none; background: var(--color-error-bg); border: 1px solid var(--color-error-border); border-left: 4px solid var(--color-error); border-radius: var(--radius-md); padding: 20px 24px; margin-bottom: 24px; font-size: 14px; line-height: 2; color: var(--color-error); animation: slideDown 0.3s ease-out; }
.com_message.is-visible { display: block; }
@keyframes slideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

/* ==========================================================================
   Explain area
   ========================================================================== */
.Explain { background: var(--color-bg-section); border: 1px solid #E8E8E8; border-radius: var(--radius-md); padding: 20px 24px; margin-bottom: 24px; font-size: 14px; color: var(--color-text-secondary); line-height: 1.8; }
.Explain:empty { display: none; }

/* ==========================================================================
   Form Sections (Old Visionary class names + new section-title)
   ========================================================================== */
.contact__formItem { background: var(--color-white); border: 1px solid #ECECEC; border-radius: var(--radius-lg); padding: 48px 40px; margin-bottom: 24px; }
.p-form__section-title { font-size: 16px; font-weight: 700; color: var(--color-primary); border-bottom: 2px solid var(--color-primary); padding-bottom: 12px; margin-bottom: 32px; display: flex; align-items: center; gap: 8px; }
.p-form__section-title::before { content: ''; display: inline-block; width: 4px; height: 20px; background: var(--color-primary-gradient); border-radius: 2px; }

/* ==========================================================================
   Form Fields (Old Visionary class names)
   ========================================================================== */
.contact__formItem-list { list-style: none; padding: 0; margin: 0; }
.contact__formItem-list > li { margin-bottom: 24px; }
.contact__formItem-list > li:last-child { margin-bottom: 0; }
.contact__formItem-list-title { display: block; font-size: 14px; font-weight: 700; color: var(--color-text); margin-bottom: 8px; }
.contact__formItem-list-title label { cursor: pointer; }

/* Badge labels (new classes) */
.p-form__required { display: inline-block; font-size: 11px; font-weight: 700; color: var(--color-white); background: var(--color-required); border-radius: 3px; padding: 1px 6px; margin-left: 8px; vertical-align: middle; }
.p-form__optional { display: inline-block; font-size: 11px; font-weight: 500; color: var(--color-text-secondary); background: #ECECEC; border-radius: 3px; padding: 1px 6px; margin-left: 8px; vertical-align: middle; }

/* --- Text Input --- */
.contact__formItem-list-input input[type="text"],
.contact__formItem-list-input input[type="email"],
.contact__formItem-list-input input[type="tel"] {
  width: 100%; height: 48px; padding: 0 16px; font-family: var(--font-jp); font-size: 15px;
  color: var(--color-text); background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); transition: border-color 0.2s, box-shadow 0.2s; appearance: none;
}
.contact__formItem-list-input input:focus {
  outline: none; border-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(0, 155, 125, 0.12);
}
.contact__formItem-list-input input::placeholder { color: #AAAAAA; font-size: 14px; }
.contact__formItem-list-input input.is-error { border-color: var(--color-error); background: var(--color-error-bg); }
.contact__formItem-list-input input.is-error:focus { box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.12); }

/* --- Name Row (dl/dt/dd grid) --- */
.contact__formItem-list dl { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.contact__formItem-list dt,
.contact__formItem-list dd { margin: 0; padding: 0; }

/* --- Textarea --- */
.contact__formItem-list-textarea textarea {
  width: 100%; min-height: 140px; padding: 14px 16px; font-family: var(--font-jp); font-size: 15px;
  color: var(--color-text); background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); resize: vertical; line-height: 1.7;
  transition: border-color 0.2s, box-shadow 0.2s; appearance: none;
}
.contact__formItem-list-textarea textarea:focus {
  outline: none; border-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(0, 155, 125, 0.12);
}
.contact__formItem-list-textarea textarea::placeholder { color: #AAAAAA; font-size: 14px; }
.contact__formItem-list-textarea textarea.is-error { border-color: var(--color-error); background: var(--color-error-bg); }

/* ==========================================================================
   Checkbox Group
   ========================================================================== */
.contact__formItem-list-checkbox { display: flex; flex-wrap: wrap; gap: 10px; }
.contact__formItem-list-checkbox.p-form__checkbox-group--grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.contact__formItem-list-checkbox.checkboxFour { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.contact__formItem-list-checkbox label {
  display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 10px 14px;
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  transition: border-color 0.2s, background-color 0.2s; font-size: 14px; user-select: none;
}
.contact__formItem-list-checkbox label:hover { border-color: var(--color-primary); background: rgba(0, 155, 125, 0.03); }
.contact__formItem-list-checkbox label:has(input:checked) { border-color: var(--color-primary); background: rgba(0, 155, 125, 0.06); }
.contact__formItem-list-checkbox input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--color-primary); cursor: pointer; flex-shrink: 0; }
.contact__formItem-list-checkbox span { line-height: 1.4; }
.contact__formItem-list-checkbox.is-error label { border-color: var(--color-error-border); }

/* ==========================================================================
   Privacy / Consent
   ========================================================================== */
.contact__formItem-list-text { background: var(--color-bg-section); border: 1px solid #E8E8E8; border-radius: var(--radius-md); padding: 20px 24px; margin-bottom: 20px; }
.p-form__privacy-text { font-size: 13px; color: var(--color-text-secondary); line-height: 1.8; }
.contact__formItem-list-consent { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 0; font-size: 15px; font-weight: 500; cursor: pointer; user-select: none; }
.contact__formItem-list-consent input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--color-primary); cursor: pointer; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.contact__formItem-list-next { text-align: center; margin-top: 40px; }
.contact__formItem-list-next .button_text,
input.contact__formItem-list-next.button_text {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 280px; height: 56px; padding: 0 40px; font-family: var(--font-jp); font-size: 16px;
  font-weight: 700; color: var(--color-white); background: var(--color-primary-gradient);
  border: none; border-radius: 56px; cursor: pointer; transition: opacity 0.2s, transform 0.15s;
  letter-spacing: 0.06em;
}
input.contact__formItem-list-next.button_text:hover { opacity: 0.9; transform: translateY(-1px); }
input.contact__formItem-list-next.button_text:active { transform: translateY(0); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 768px) {
  .contact { padding: 32px 16px 60px; }
  .contact__formItem { padding: 32px 20px; }
  .contact__formItem-list dl { grid-template-columns: 1fr; gap: 20px; }
  .contact__formItem-list-checkbox.p-form__checkbox-group--grid,
  .contact__formItem-list-checkbox.checkboxFour { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  input.contact__formItem-list-next.button_text { width: 100%; min-width: auto; }
  .com_message { padding: 16px; font-size: 13px; }
}
@media (max-width: 480px) {
  .contact__formItem { padding: 24px 16px; }
  .contact__formItem-list-checkbox,
  .contact__formItem-list-checkbox.p-form__checkbox-group--grid,
  .contact__formItem-list-checkbox.checkboxFour { grid-template-columns: 1fr; }
  .contact__formItem-list-checkbox label { padding: 12px 14px; }
  .contact__formItem-list-text { padding: 16px; }
}