条件分岐フォーム（Conditional Form）— 表示切替

:root {
  --cond-accent: #2B7FE8;
  --cond-bg-disabled: #f4f6f9;
  --cond-border: #d0d7e0;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: sans-serif;
  padding: 24px;
  background: #f0f2f5;
  color: #1a2332;
}

.cond-form {
  max-width: 480px;
  margin: 0 auto 32px;
  background: #fff;
  padding: 24px;
  border-radius: 8px;
}

.cond-question {
  font-weight: 600;
  margin: 0 0 12px;
}

.cond-radio-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.cond-radio-label,
.cond-checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

/* hidden属性はブラウザ標準で display: none になるが、
   flex/blockを持つ要素はCSSの詳細度で上書きされる場合があるため明示しておく */
.cond-textarea[hidden],
.cond-billing-block[hidden] {
  display: none;
}

.cond-textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--cond-border);
  border-radius: 6px;
  font-family: sans-serif;
  font-size: 14px;
  resize: vertical;
  margin-bottom: 12px;
}

.cond-textarea:disabled,
.cond-input:disabled {
  background: var(--cond-bg-disabled);
  color: #9aa5b4;
}

.cond-billing-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.cond-input {
  padding: 10px 12px;
  border: 1.5px solid var(--cond-border);
  border-radius: 6px;
  font-family: sans-serif;
  font-size: 14px;
}

.cond-checkbox-label {
  margin-bottom: 12px;
}

.cond-controls {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.cond-submit-btn {
  padding: 8px 24px;
  background: var(--cond-accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: sans-serif;
  transition: background 0.15s;
}

.cond-submit-btn:hover {
  background: #1a6ed4;
}

.cond-result {
  margin-top: 12px;
  font-size: 14px;
}

.cond-result.has-value {
  border: 1px solid var(--cond-border);
  border-radius: 6px;
  padding: 12px;
  background: #fafbfc;
}

// ===== Pattern 1: お問い合わせ種別（ラジオボタン連動） =====

var inquiryForm = document.getElementById('inquiry-form');
var inquiryDetail = document.getElementById('inquiry-detail');
var inquiryResult = document.getElementById('inquiry-result');

// ラジオボタンの選択状態に応じて自由記入欄の表示・disabled・requiredを切り替える
document.querySelectorAll('input[name="inquiry-type"]').forEach(function (radio) {
  radio.addEventListener('change', function () {
    if (radio.value === 'other' && radio.checked) {
      inquiryDetail.hidden = false;
      inquiryDetail.disabled = false;
      inquiryDetail.setAttribute('required', '');
    } else if (radio.checked) {
      // 非表示にするときは値クリア＋disabled＋required解除をセットで行う
      inquiryDetail.hidden = true;
      inquiryDetail.value = '';
      inquiryDetail.disabled = true;
      inquiryDetail.removeAttribute('required');
    }
  });
});

inquiryForm.addEventListener('submit', function (e) {
  e.preventDefault();
  if (!inquiryForm.checkValidity()) {
    inquiryForm.reportValidity();
    return;
  }
  var checked = inquiryForm.querySelector('input[name="inquiry-type"]:checked');
  var labelMap = { document: '資料請求', quote: '見積依頼', other: 'その他' };
  var text = '種別: ' + labelMap[checked.value];
  if (checked.value === 'other') {
    text += ' / お問い合わせ内容: ' + inquiryDetail.value;
  }
  inquiryResult.textContent = '送信しました（' + text + '）';
  inquiryResult.classList.add('has-value');
});

function resetInquiryForm() {
  inquiryForm.reset();
  inquiryDetail.hidden = true;
  inquiryDetail.value = '';
  inquiryDetail.disabled = true;
  inquiryDetail.removeAttribute('required');
  inquiryResult.textContent = '';
  inquiryResult.classList.remove('has-value');
}

// ===== Pattern 2: 請求先住所（チェックボックス連動） =====

var billingForm = document.getElementById('billing-form');
var billingDiffers = document.getElementById('billing-differs');
var billingBlock = document.getElementById('billing-block');
var billingResult = document.getElementById('billing-result');
var billingFields = ['billing-zip', 'billing-address', 'billing-name'].map(function (id) {
  return document.getElementById(id);
});

// チェック状態に応じて住所ブロックの表示・disabled・requiredを切り替える
billingDiffers.addEventListener('change', function () {
  if (billingDiffers.checked) {
    billingBlock.hidden = false;
    billingFields.forEach(function (field) {
      field.disabled = false;
      field.setAttribute('required', '');
    });
  } else {
    // 非表示にするときは値クリア＋disabled＋required解除をセットで行う
    billingBlock.hidden = true;
    billingFields.forEach(function (field) {
      field.value = '';
      field.disabled = true;
      field.removeAttribute('required');
    });
  }
});

billingForm.addEventListener('submit', function (e) {
  e.preventDefault();
  if (!billingForm.checkValidity()) {
    billingForm.reportValidity();
    return;
  }
  var text;
  if (billingDiffers.checked) {
    text = '請求先住所: ' + billingFields[0].value + ' ' + billingFields[1].value + ' ' + billingFields[2].value + ' 様';
  } else {
    text = '請求先住所: 配送先と同じ';
  }
  billingResult.textContent = '送信しました（' + text + '）';
  billingResult.classList.add('has-value');
});

function resetBillingForm() {
  billingForm.reset();
  billingBlock.hidden = true;
  billingFields.forEach(function (field) {
    field.value = '';
    field.disabled = true;
    field.removeAttribute('required');
  });
  billingResult.textContent = '';
  billingResult.classList.remove('has-value');
}