<p class="header_emesg" id="error_summary">ご入力内容に不備がございます。エラーが発生した項目を修正し、送信しなおしてください。</p>

<script>
	document.addEventListener('DOMContentLoaded', function () {
		// エラーメッセージのspan要素をすべて取得
		const errorSpans = document.querySelectorAll('span.msg');

		// エラーメッセージのリストを格納する配列
		let errorLinks = [];

		// エラーがあった項目の数をカウントするカウンター
		let errorCount = 0;

		// 各エラーメッセージのspanをループ処理
		errorSpans.forEach((span, index) => {
			// span内にテキスト（エラーメッセージ）が存在するかチェック
			if (span.innerText.trim() !== '') {
				errorCount++;

				// 親のdl要素（各入力項目のかたまり）を取得
				const parentDl = span.closest('dl');
				if (parentDl) {
					// dl要素にユニークなIDを付与
					const anchorId = `error-item-${index}`;
					parentDl.id = anchorId;

					// dt要素（項目タイトル）を取得
					const titleElement = parentDl.querySelector('dt.title');
					if (titleElement) {
						// dt要素のテキスト（項目名）を取得（内部のspan.needは除外）
						const titleText = titleElement.cloneNode(true);
						const needSpan = titleText.querySelector('.need');
						if (needSpan) {
							needSpan.remove();
						}

						// エラーリストに追加
						errorLinks.push(`<li><a href="#${anchorId}">${titleText.innerText.trim()}</a></li>`);
					}
				}
			}
		});

		// エラーが1つ以上あった場合
		if (errorCount > 0) {
			const errorSummaryEl = document.getElementById('error_summary');
			if (errorSummaryEl) {
				// エラーヘッダーのテキストを更新
				errorSummaryEl.innerHTML = `ご入力内容に ${errorCount} 件の不備がございます。エラーが発生した項目を修正し、送信しなおしてください。<ul style="list-style-type: disc; margin-left: 20px;">${errorLinks.join('')}</ul>`;
			}
		}
	});
</script>