/* =====================================================
   蓄電池お問合せフォーム 固有スタイル
   ===================================================== */

/* ── CF7 wpautop リセット（蓄電池固有要素） ── */
.wpcf7-form .sim-section-header > p {
  margin: 0;
}

.wpcf7-form .sim-section-header > p > br {
  display: none;
}

.wpcf7-form .cost-total > p {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  width: 100%;
}

.wpcf7-form .cost-total > p > br {
  display: none;
}

.wpcf7-form .capacity-field > p {
  display: contents;
}

/* ── Simulation セクション見出し ── */
.sim-section-header {
  margin-top: 36px;
  margin-bottom: 24px;
  padding: 14px 20px;
  background: var(--color-navy);
  color: var(--color-white);
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}

.sim-section-header small {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 2px;
}

/* ── CAPEX / OPEX サブ見出し ── */
.cost-section-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-navy);
  margin-top: 28px;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-gray-100);
}

/* ── 数値 + 単位 横並び ── */
.unit-input-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* CF7 autop: <p> が input + 単位を包む */
.wpcf7-form .unit-input-wrap > p {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  width: 100%;
}

.wpcf7-form .unit-input-wrap > p br {
  display: none;
}

.unit-input-wrap .wpcf7-form-control-wrap {
  flex: 0 1 200px;
  min-width: 0;
}

.unit-input-wrap input[type="text"] {
  width: 100%;
}

.unit-suffix {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-gray-500);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── 容量 2列（AC容量（MW） ／ 時間） ── */
.capacity-pair {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.capacity-field {
  flex: 1;
}

.capacity-separator {
  font-size: 20px;
  font-weight: 600;
  color: var(--color-text-light, #666);
  margin-top: 30px;
  flex-shrink: 0;
}

.capacity-field-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-gray-600);
  margin-bottom: 4px;
}

/* ── 合計表示欄 ── */
.cost-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
  padding: 12px 16px;
  background: var(--color-green-pale);
  border: 1px solid var(--color-green);
  border-radius: 6px;
}

.cost-total-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-navy);
}

.cost-total-value {
  font-family: var(--font-en);
  font-size: 18px;
  font-weight: 700;
  color: var(--color-green-dark);
}

.cost-total-value::after {
  content: ' 万円';
  font-size: 13px;
  font-weight: 500;
  color: var(--color-gray-500);
}

.cost-total--opex .cost-total-value::after {
  content: ' 万円/年';
}

.cost-total + .form-field {
  margin-top: 36px;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .capacity-pair {
    flex-direction: column;
    gap: 12px;
  }

  .unit-input-wrap .wpcf7-form-control-wrap {
    flex: 0 1 160px;
  }
}