/* PV公式サイトのフォーム（@emdash-cms/plugin-forms が出す .ec-form）用。
   プラグイン同梱の forms.css は読み込まず、ここで本文の色（#00A4CB）に合わせて整える。
   フォームを埋め込んだ固定ページだけが読み込む（src/pages/[slug].astro） */
.ec-form { display: flex; flex-direction: column; gap: 32px; margin-bottom: 2em; }
.ec-form-page { display: flex; flex-wrap: wrap; gap: 24px 20px; min-width: 0; margin: 0; padding: 0; border: none; }
.ec-form-field { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.ec-form-field[hidden] { display: none; }
.ec-form-field--half { width: calc(50% - 10px); }

.ec-form-label { font-weight: bold; line-height: 1.5; }
/* 必須の「*」を「必須」の札にする */
.ec-form-required { margin-left: 8px; font-size: 0; }
.ec-form-required::after {
  content: "必須"; display: inline-block; padding: 2px 6px; border-radius: 3px;
  background: #ff6200; color: #fff; font-size: 12px; line-height: 1.4; vertical-align: 2px;
}

.ec-form .ec-form-input {
  width: 100%; box-sizing: border-box; padding: 10px 12px;
  border: 1px solid #c8c8c8; border-radius: 4px; background: #fff;
  font: inherit; font-size: 16px; line-height: 1.5; color: #333;
}
.ec-form .ec-form-input:focus { border-color: #00A4CB; outline: 2px solid #00A4CB; outline-offset: -1px; }
.ec-form textarea.ec-form-input { min-height: 12em; resize: vertical; }

.ec-form-radio-group, .ec-form-checkbox-group {
  display: flex; flex-wrap: wrap; gap: 8px 24px; min-width: 0; margin: 0; padding: 0; border: none;
}
.ec-form-radio-label, .ec-form-checkbox-label { display: inline-flex; align-items: center; gap: 8px; line-height: 1.6; cursor: pointer; }
.ec-form-radio-label input, .ec-form-checkbox-label input { flex-shrink: 0; width: 18px; height: 18px; margin: 0; accent-color: #00A4CB; }
/* 同意のチェックは中央に置く。上のリンクは FormJa.astro が足す */
.ec-form-field--checkbox { align-items: center; }
.pv-privacy-link { color: #00A4CB; text-decoration: underline; }

.ec-form-help { font-size: 14px; color: #666; }
.ec-form-error { font-size: 14px; color: #d32f2f; }
.ec-form-error:empty { display: none; }

.ec-form-nav { display: flex; justify-content: center; gap: 12px; }
.ec-form-submit {
  min-width: 260px; padding: 16px 40px; border: none; border-radius: 40px;
  background: #00A4CB; color: #fff; font: inherit; font-size: 18px; font-weight: bold; letter-spacing: 0.1em;
  cursor: pointer; transition: opacity 0.2s;
}
.ec-form-submit:hover { opacity: 0.8; }
.ec-form-submit:disabled { opacity: 0.5; cursor: not-allowed; }

/* 送信後のメッセージ（フォームの設定の confirmationMessage）は改行をそのまま出す */
.ec-form-status { padding: 16px 20px; border-radius: 4px; line-height: 1.8; white-space: pre-line; }
.ec-form-status:empty { display: none; }
.ec-form-status--success { border: 1px solid #00A4CB; background: #eef9fc; color: #333; }
.ec-form-status--error { border: 1px solid #d32f2f; background: #fdf0f0; color: #b71c1c; }

/* 確認画面（FormJa.astro が「送信」の後に入力内容の表を出す。11/8 MT の依頼で足した） */
.ec-form.pv-confirming .ec-form-page { display: none; }
.pv-confirm-lead { margin: 0 0 16px; line-height: 1.8; }
.ec-form .pv-confirm-list { width: 100%; margin: 0; border-collapse: collapse; table-layout: fixed; }
.ec-form .pv-confirm-list th, .ec-form .pv-confirm-list td { padding: 12px 16px; border: 1px solid #c8c8c8; line-height: 1.6; text-align: left; vertical-align: top; }
.ec-form .pv-confirm-list th { width: 35%; background: #eef9fc; font-weight: bold; }
.ec-form .pv-confirm-list td { background: #fff; color: #333; white-space: pre-wrap; overflow-wrap: anywhere; }
/* 「修正する」はページ移動のボタンと同じ青（body.css のボタンの色の決め方）を枠と文字に使う */
.pv-confirm-back {
  min-width: 260px; padding: 16px 40px; border: 2px solid #1D84DB; border-radius: 40px;
  background: #fff; color: #1D84DB; font: inherit; font-size: 18px; font-weight: bold; letter-spacing: 0.1em;
  cursor: pointer; transition: opacity 0.2s;
}
.pv-confirm-back:hover { opacity: 0.8; }

@media only screen and (max-width: 768px) {
  .ec-form-field--half { width: 100%; }
  .ec-form-submit { width: 100%; min-width: 0; }
  .ec-form.pv-confirming .ec-form-nav { flex-direction: column; } /* 確認画面の2つのボタンは縦に並べる */
  .pv-confirm-back { width: 100%; min-width: 0; }
  .ec-form .pv-confirm-list th, .ec-form .pv-confirm-list td { display: block; width: auto; border-top: 0; } /* 狭い幅では項目名の下に内容を置く */
  .ec-form .pv-confirm-list tr:first-child th { border-top: 1px solid #c8c8c8; }
}