<body>
	<div class="contentsWrap">
		<div class="header copyNone">
			<div class="headInner">
				<h1 class="headTtl">決済情報通知サービス　<span>メール生成ツール　<span class="version">Ver 0.8 Beta版</span></span></h1>
				<p class="copyright"><a href="https://www.weave.co.jp/" target="_blank">&copy; weave Co., Ltd.</a></p>
			</div>
		</div>
		<div class="toolWrap">
			<div class="tool">
				<div class="oprArea copyNone">
					<div id="dropArea">
						<div class="dropNote">
							<div>
								<p id="failMsg"></p>
								<p>ここにCSVファイルを<br>ドラッグ&amp;ドロップしてください。</p>
							</div>
						</div>
					</div>
					<input type="file" id="fileInput">
					<div id="topicsCheckArea" class="checkArea">
						<p class="checkTtl">異常トピックス選択</p>
						<div class="swiperArea">
							<div class="swiper">
								<div id="checkBoxArea" class="swiper-wrapper">
								</div>
							</div>
							<div class="swiper-button-prev"></div>
							<div class="swiper-button-next"></div>
						</div>
					</div>
					<div id="freeTxtArea" class="checkArea">
						<p class="checkTtl">フリーテキスト入力</p>
						<div class="checkBoxOuter">
							<div class="checkBoxWrap">
								<div class="checkBoxInner">
									<input id="freeTxtCheckbox" class="checkbox" type="checkbox" name="freeTxt" value="フリーテキスト">
									<label for="freeTxtCheckbox" class="checkLabel">フリーテキスト</label>
								</div>
								<div id="freeTxtInputWrap">
									<textarea name="freeTxt" id="freeTxt"></textarea>
									<div class="exampleTtlWrap">
										<p class="exampleTtl">文例</p>
										<p class="exampleNote">下記をクリックすると自動入力されます</p>
									</div>
									<ul id="exampleList">
										<li>未取得のnanacoポイントコードがあります。</li>
										<li>電子マネーへの交換がお済みでないnanacoポイントコードがあります。</li>
										<li>9/16（月）は敬老の日です。是非◯◯さんとコミュニケーションをとってみてください。</li>
										<li>◯/◯は◯◯さんの◯◯歳の誕生日です。是非コミュニケーションをとってみて下さい。</li>
									</ul>
								</div>
							</div>
						</div>
					</div>
					<div id="bannerSelectArea" class="checkArea">
						<p class="checkTtl">バナー選択</p>
						<div class="checkBoxOuter">
							<div class="checkBoxWrap">
								<div class="checkBoxInner">
									<input id="bannerCheckbox" class="checkbox" type="checkbox" name="bannerSelect" value="バナー">
									<label for="bannerCheckbox" class="checkLabel">バナー</label>
								</div>
								<div id="bannerListWrap">
									<ul id="bannerList">
										<li>
											<label>
												<input type="radio" name="banner" value="1" data-href="https://www.7gift.jp/scene/mfgift/early/?utm_source=demo&utm_medium=referral&utm_content=netgift&utm_campaign=mimamori" data-alt="母の日よりちょっと前にお届け 早く届けておトク">
												<span><img src="lib/img/mail/img_banner_haha1.jpg" alt="母の日よりちょっと前にお届け 早く届けておトク"></span>
											</label>
										</li>
										<li>
											<label>
												<input type="radio" name="banner" value="2" data-href="https://www.7gift.jp/scene/mfgift/?utm_source=demo&utm_medium=referral&utm_content=netgift&utm_campaign=mimamori" data-alt="お申込み承り中！母の日ギフト">
												<span><img src="lib/img/mail/img_banner_haha2.jpg" alt="お申込み承り中！母の日ギフト"></span>
											</label>
										</li>
									</ul>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="prevArea">
					<div class="prevBox">
						<div class="prevInner">
							<div class="prevHeader copyNone">
								<p id="sendDate"></p>
							</div>
							<p id="mailTtl" class="copyNone"></p>
							<div id="prev"></div>
							<div id="loading">
								<div class="load-wrapp">
									<div class="load-3">
										<div class="line"></div>
										<div class="line"></div>
										<div class="line"></div>
									</div>
									<div class="load-6">
										<div class="letter-holder">
											<div class="l-1 letter">L</div>
											<div class="l-2 letter">o</div>
											<div class="l-3 letter">a</div>
											<div class="l-4 letter">d</div>
											<div class="l-5 letter">i</div>
											<div class="l-6 letter">n</div>
											<div class="l-7 letter">g</div>
											<div class="l-8 letter">.</div>
											<div class="l-9 letter">.</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="rightColumn copyNone">
						<div id="bccBox">
							<p>To：</p>
							<div id="to"></div>
							<p>BCC：</p>
							<div id="bcc"></div>
						</div>
						<div class="btnArea">
							<div class="btnWrap"><a href="" id="sendMail" class="btn inactive"><span>メールを作成</span></a></div>
							<div class="linkWrap">ファイル保存しておく場合の<a href="" id="dlHtml" class="inactive">ダウンロードはこちら</a></div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	
<script src="lib/js/papaparse.min.js"></script>
<script src="lib/js/swiper-bundle.min.js"></script>
<script>
const sendDate = document.getElementById('sendDate');
const fileArea = document.getElementById('dropArea');
const fileInput = document.getElementById('fileInput');
const failMsg = document.getElementById('failMsg');
const topicsCheckArea = document.getElementById('topicsCheckArea');
const freeTxtArea = document.getElementById('freeTxtArea');
const freeTxtCheckbox = document.getElementById('freeTxtCheckbox');
const freeTxtInputWrap = document.getElementById('freeTxtInputWrap');
const freeTxt = document.getElementById('freeTxt');
const exampleList = document.getElementById('exampleList');
const bannerSelectArea = document.getElementById('bannerSelectArea');
const bannerCheckbox = document.getElementById('bannerCheckbox');
const bannerListWrap = document.getElementById('bannerListWrap');
const bannerList = document.getElementById('bannerList');
const bannerRadio = document.getElementsByName('banner');
const mailTtl = document.getElementById('mailTtl');
const prev = document.getElementById('prev');
const loading = document.getElementById('loading');
const checkBoxArea = document.getElementById('checkBoxArea');
const sendMail = document.getElementById('sendMail');
const dlHtml = document.getElementById('dlHtml');
const bccBox = document.getElementById('bccBox');
const to = document.getElementById('to');
const bcc = document.getElementById('bcc');
let mailAddress = '';
let mailAddForMaler = '';
let bccAddress = '';
let bccAddForMaler = '';
let title = '';
let checked;
let dlFileName = '';
let topicsFlg = '';
let infoArea = '';
let bannerArea = '';
const duration = 600;

const today = new Date();
const year = today.getFullYear().toString();
const month = ('0'+(today.getMonth() + 1).toString()).slice(-2);
const day = ('0'+today.getDate().toString()).slice(-2);
const hours = ('0'+today.getHours().toString()).slice(-2);
const minutes = ('0'+today.getMinutes().toString()).slice(-2);
// プレビュー日付設定
const prevDate = `${year}/${month}/${day}`;
sendDate.innerHTML = prevDate;
// ファイル名日付
const filenameDate = `${year}${month}${day}${hours}${minutes}`;

let checkedArr = []; //異常トピックスnanaco番号ごとのチェック状態

// ファイルパス取得
let href = location.href;
let hrefArr = href.split('/');
hrefArr.splice(0, 3);
hrefArr.splice(-1, 1);
let filePath = '';
hrefArr.forEach(function(elm, i) {
	filePath += `${elm}/`;
});

// ドラッグオーバー時の処理
fileArea.addEventListener('dragover', function(e){
	e.preventDefault();
	fileArea.classList.add('dragover');
});

// ドラッグアウト時の処理
fileArea.addEventListener('dragleave', function(e){
	e.preventDefault();
	fileArea.classList.remove('dragover');
});

// ドロップ時の処理
fileArea.addEventListener('drop', function(e){
	e.preventDefault();
	fileArea.classList.remove('dragover');

	// エラーメッセージ非表示
	failMsg.style.display = 'none';
	// プレビュー非表示
	mailTtl.style.display = 'none';
	prev.style.display = 'none';
	// チェック済み異常トピックスのチェック外す
	checked = document.querySelectorAll('input[name=topics]:checked');
	if(checked.length > 0){
		for(let checkedData of checked) {
			checkedData.checked = false;
		}
	}
	// 異常トピックス選択非表示
	checkedArr = [];
	topicsCheckArea.classList.remove('show');
	checkBoxArea.innerHTML = '';
	// フリーテキストエリア非表示
	freeTxtArea.classList.remove('show');
	freeTxtInputWrap.classList.remove('show');
	freeTxtCheckbox.checked = false;
	freeTxt.value = '';
	// バナー選択エリア非表示
	bannerSelectArea.classList.remove('show');
	bannerListWrap.classList.remove('show');
	bannerCheckbox.checked = false;
	resetBannerList();
	// ボタン非活性
	inactiveBtn();
	// Toリセット
	to.innerHTML = '';
	// BCCリセット
	bcc.innerHTML = '';

	// ドロップしたファイルの取得
	let files = e.dataTransfer.files;
	let filename = files[0].name;

	if(filename.indexOf('.csv') !== -1){ //csvファイルかどうか
		// 取得したファイルをinput[type=file]へ
		fileInput.files = files;
		
		if(typeof files[0] !== 'undefined') {
			//ファイルが正常に受け取れた際の処理
			// CSVデータを配列に変換
			Papa.parse(files[0], {
				header: false,
				complete: function(results) {
					creatHtml(results.data);
				}
			});
			
		} else {
			//ファイルが受け取れなかった際の処理
			// エラーメッセージ表示
			failMsg.innerHTML = 'ファイルを読み込めませんでした。';
			failMsg.style.display = 'block';
		}
	} else{
		// エラーメッセージ表示
		failMsg.innerHTML = 'csv以外を読み込むことはできません。<br>csvファイルを使用してください。';
		failMsg.style.display = 'block';
	}
});


// プレビュー表示
function creatHtml(resultdata){
	let nanacoIndex;
	let res = csvHTML(resultdata);
	
	if(res){ //CSVデータをHTMLに変換できたら

		// ローディング表示
		fadeIn(loading, duration, 'block');

		// メール送信設定
		let mailto;
		if(bccAddForMaler == ''){
			mailto = encodeURI(`mailto:${mailAddForMaler}?subject=${title}`);
		} else{
			mailto = encodeURI(`mailto:${mailAddForMaler}?bcc=${bccAddForMaler}&subject=${title}`);
		}
		sendMail.setAttribute('href', mailto);

		// 異常トピックス追加
		const checkLabels = document.getElementsByClassName('checkLabel');
		const checkboxes = document.querySelectorAll('input[name=topics]');
		checkboxes.forEach(function(elm, i) {
			elm.addEventListener('change',function(){
				nanacoIndex = elm.dataset.index;
				let topicsArea = document.getElementById(`topicsArea${nanacoIndex}`);
				let topicsHTML = '';
				topicsArea.innerHTML = '';

				// 「特段異常のデータが見らせませんでした」と他の選択肢の選択可否の制御
				if(elm.hasAttribute('data-topics') && elm.getAttribute("data-topics") == '1'){
					// 「特段異常のデータが見られませんでした。」にチェック入れた場合
					if(elm.checked){
						for(let checkLabel of checkLabels){
							if(checkLabel.hasAttribute('data-topics') && checkLabel.getAttribute("data-topics") != '1' && checkLabel.hasAttribute('data-index') && checkLabel.getAttribute("data-index") == nanacoIndex){
								checkLabel.classList.add('inactive');
							}
						}
						for(let checkbox of checkboxes){
							if(checkbox.hasAttribute('data-topics') && checkbox.getAttribute("data-topics") != '1' && checkbox.hasAttribute('data-index') && checkbox.getAttribute("data-index") == nanacoIndex){
								checkbox.checked = false;
							}
						}
						document.getElementById(`pointInput${nanacoIndex}`).value = ''; //ポイント入力欄リセット

					// 「特段異常のデータが見られませんでした。」のチェックを外した場合
					} else{
						for(let checkLabel of checkLabels){
							if(checkLabel.hasAttribute('data-topics') && checkLabel.getAttribute("data-topics") != '1' && checkLabel.hasAttribute('data-index') && checkLabel.getAttribute("data-index") == nanacoIndex){
								checkLabel.classList.remove('inactive');
							}
						}
					}
				}

				checked = document.querySelectorAll(`input[data-index="${nanacoIndex}"]:checked`);
				if(checked.length > 0){
					for(let checkedData of checked) {
						if(checkedData.hasAttribute('data-topics') && checkedData.getAttribute("data-topics") == '1'){
							topicsHTML += `<table cellspacing="0" cellpadding="0" width="100%" style="width: 100%;">
															<tbody>
																<tr>
																	<td>
																		<table cellspacing="0" cellpadding="0" width="100%" style="width: 100%;">
																			<tbody>
																				<tr>
																					<td width="44" style="width: 44px;">&nbsp;</td>
																					<td width="512" style="width: 512px; font-size: 24px; font-weight: bold; color: #0098CE; font-family: '游ゴシック体', YuGothic, '游ゴシック', 'Yu Gothic', sans-serif;">${checkedData.value}</td>
																					<td width="44" style="width: 44px;">&nbsp;</td>
																				</tr>
																			</tbody>
																		</table>
																	</td>
																</tr>
															</tbody>
														</table>`;
						} else if(checkedData.hasAttribute('data-topics') && checkedData.getAttribute("data-topics") == '6'){
							let pointVal = Number(document.getElementById(`pointInput${nanacoIndex}`).value).toLocaleString();
							topicsHTML += `<table cellspacing="0" cellpadding="0" width="100%" style="width: 100%; border-collapse: collapse; border-spacing: 0; border:none;">
															<tbody>
																<tr>
																	<td>
																		<table cellspacing="0" cellpadding="0" width="100%" style="width: 100%; border-collapse: collapse; border-spacing: 0; border:none;">
																			<tbody>
																				<tr>
																					<td width="44" style="width: 44px;">&nbsp;</td>
																					<td width="512" style="width: 512px;">
																						<table cellspacing="0" cellpadding="0" width="100%" style="width: 100%; border-collapse: collapse; border-spacing: 0; border:none; background-color: #FEDD5B;">
																							<tbody>
																								<tr>
																									<td width="56" height="50" style="width: 56px; height: 50px; text-align:center; background-color: #FEDD5B;"><img src="${filePath}/lib/img/mail/ico_exclamation_mark${nanacoIndex}_6.jpg" alt="!" width="56" height="50" style="width: 56px; height: 50px;"></td>
																									<td width="456" height="50" style="width: 456px; height: 50px; font-size: 26px; font-weight: bold; font-family: '游ゴシック体', YuGothic, '游ゴシック', 'Yu Gothic', sans-serif;">ポイントコード<span id="point${nanacoIndex}">${pointVal}</span>円分の交換がありました。</span></td>
																								</tr>
																							</tbody>
																						</table>
																					</td>
																					<td width="44" style="width: 44px;">&nbsp;</td>
																				</tr>
																			</tbody>
																		</table>
																	</td>
																</tr>
																<tr>
																	<td height="32" style="height: 32px; line-height: 1;">&nbsp;</td>
																</tr>
															</tbody>
														</table>`;
						} else{
							let topicsIndex = checkedData.getAttribute("data-topics");
							topicsHTML += `<table cellspacing="0" cellpadding="0" width="100%" style="width: 100%; border-collapse: collapse; border-spacing: 0; border:none;">
															<tbody>
																<tr>
																	<td>
																		<table cellspacing="0" cellpadding="0" width="100%" style="width: 100%; border-collapse: collapse; border-spacing: 0; border:none;">
																			<tbody>
																				<tr>
																					<td width="44" style="width: 44px;">&nbsp;</td>
																					<td width="512" style="width: 512px;">
																						<table cellspacing="0" cellpadding="0" width="100%" style="width: 100%; border-collapse: collapse; border-spacing: 0; border:none; background-color: #FEDD5B;">
																							<tbody>
																								<tr>
																									<td width="56" height="50" style="width: 56px; height: 50px; text-align:center; background-color: #FEDD5B;"><img src="${filePath}/lib/img/mail/ico_exclamation_mark${nanacoIndex}_${topicsIndex}.jpg" alt="!" width="56" height="50" style="width: 56px; height: 50px;"></td>
																									<td width="456" height="50" style="width: 456px; height: 50px; font-size: 26px; font-weight: bold; font-family: '游ゴシック体', YuGothic, '游ゴシック', 'Yu Gothic', sans-serif;">${checkedData.value}</td>
																								</tr>
																							</tbody>
																						</table>
																					</td>
																					<td width="44" style="width: 44px;">&nbsp;</td>
																				</tr>
																			</tbody>
																		</table>
																	</td>
																</tr>
																<tr>
																	<td height="32" style="height: 32px; line-height: 1;">&nbsp;</td>
																</tr>
															</tbody>
														</table>`;
						}
					}
					topicsArea.innerHTML = topicsHTML;
					// HTMLダウンロードリンク再生成
					download(new Blob([prev.innerHTML]), `${dlFileName}+${filenameDate}.html`);
					// チェックされている
					checkedArr[nanacoIndex] = true;
					if(checkedArr.indexOf(false) > -1){
						// ボタン非活性
						inactiveBtn();
					} else{
						if((freeTxtCheckbox.checked && freeTxt.value != '') || !freeTxtCheckbox.checked){
							// HTMLダウンロードリンク再生成
							download(new Blob([prev.innerHTML]), `${dlFileName}+${filenameDate}.html`);
							// ボタン活性
							activeBtn();
						} else{
							// ボタン非活性
							inactiveBtn();
						}
					}
				} else{
					// チェックされていない
					checkedArr[nanacoIndex] = false;
					// ボタン非活性
					inactiveBtn();
				}
			});
		});

		// ポイント入力欄
		const pointInput = document.querySelectorAll('input[name=point]');
		pointInput.forEach(function(elm, i) {
			elm.addEventListener('input',function(){
				nanacoIndex = elm.dataset.index;
				let check = document.querySelector(`[data-index="${nanacoIndex}"][data-topics="6"]`);
				if(check.checked){
					let topicsPoint = document.getElementById(`point${nanacoIndex}`);
					topicsPoint.innerHTML = Number(elm.value).toLocaleString();
					// HTMLダウンロードリンク再生成
					download(new Blob([prev.innerHTML]), `${dlFileName}+${filenameDate}.html`);
				}
			});
		});

		// ローディング非表示、プレビュー表示
		setTimeout(() => {
			fadeOut(loading, duration);
			fadeIn(mailTtl, duration, 'block');
			fadeIn(prev, duration, 'block');
		}, '1000');

		// フリーテキストチェックボックス
		freeTxtCheckbox.addEventListener('change',function(){
			if(freeTxtCheckbox.checked){
				// フリーテキスト入力欄表示
				freeTxtInputWrap.classList.add('show');
				// ボタン非活性
				inactiveBtn();
			} else{
				// フリーテキスト入力欄非表示
				freeTxtInputWrap.classList.remove('show');
				freeTxt.value = '';
				infoArea.innerHTML = `<table cellspacing="0" cellpadding="0" width="100%" style="width: 100%; border-collapse: collapse; border-spacing: 0; border:none;">
																					<tbody>
																						<tr>
																							<td width="44" style="width: 44px;">&nbsp;</td>
																							<td width="512" style="width: 512px;">
																								<table cellspacing="0" cellpadding="0" width="100%" style="width: 100%; border-collapse: collapse; border-spacing: 0; border:none;">
																									<tbody>
																										<tr>
																											<td width="512" style="width: 512px; line-height: 0; border-bottom: 3px solid #0098CE">&nbsp;</td>
																										</tr>
																									</tbody>
																								</table>
																							</td>
																							<td width="44" style="width: 44px;">&nbsp;</td>
																						</tr>
																					</tbody>
																				</table>`;
				// HTMLダウンロードリンク再生成
				download(new Blob([prev.innerHTML]), `${dlFileName}+${filenameDate}.html`);
				if(topicsFlg == 0 || checkedArr.indexOf(false) == -1){ //お取引がないまたは異常トピックス選択済みなら
					// ボタン活性
					activeBtn();
				}
			}
		});
		// 文例選択
		const exampleTxt = exampleList.querySelectorAll('li');
		exampleTxt.forEach(function(elm, i) {
			elm.addEventListener('click',function(){
				freeTxt.value = freeTxt.value + elm.textContent;
				creatInfoHtml();
				if(checkedArr.indexOf(false) > -1){
					// ボタン非活性
					inactiveBtn();
				} else{
					// HTMLダウンロードリンク再生成
					download(new Blob([prev.innerHTML]), `${dlFileName}+${filenameDate}.html`);
					// ボタン活性
					activeBtn();
				}
			});
		});
		// フリーテキスト入力
		freeTxt.addEventListener('input',function(){
			creatInfoHtml();
			if(freeTxt.value != ''){
				if(checkedArr.indexOf(false) > -1){
					// ボタン非活性
					inactiveBtn();
				} else{
					// HTMLダウンロードリンク再生成
					download(new Blob([prev.innerHTML]), `${dlFileName}+${filenameDate}.html`);
					// ボタン活性
					activeBtn();
				}
			} else{
				// ボタン非活性
				inactiveBtn();
			}
		});

		// バナー選択チェックボックス
		bannerCheckbox.addEventListener('change',function(){
			if(bannerCheckbox.checked){
				// バナー選択表示
				bannerListWrap.classList.add('show');
				bannerArea.innerHTML = `<table cellspacing="0" cellpadding="0" width="100%" style="width: 100%; border-collapse: collapse; border-spacing: 0; border:none;">
																					<tbody>
																						<tr>
																							<td width="44" style="width: 44px;">&nbsp;</td>
																							<td width="512" style="width: 512px;">
																								<table cellspacing="0" cellpadding="0" width="100%" style="width: 100%; border-collapse: collapse; border-spacing: 0; border:none;">
																									<tbody>
																										<tr>
																											<td height="20" style="height: 20px; line-height: 1;">&nbsp;</td>
																										</tr>
																										<tr>
																										<td style="text-align: center;">
																												<img src="${filePath}/lib/img/mail/img_space.gif" alt="" height="auto">
																											</td>
																										</tr>
																										<tr>
																											<td width="512" height="auto" style="text-align: center; width: 512px; height: auto;">
																												<img src="${filePath}/lib/img/mail/img_banner_haha1.jpg" alt="母の日よりちょっと前にお届け 早く届けておトク" width="100%" height="auto" style="width: 100%; height: auto;">
																											</td>
																										</tr>
																										<tr>
																											<td height="15" style="height: 15px; line-height: 1;">&nbsp;</td>
																										</tr>
																										<tr>
																											<td width="512" height="auto" style="width: 512px; height: auto; font-size: 22px;">
																												<a href="https://www.7gift.jp/scene/mfgift/early/?utm_source=demo&utm_medium=referral&utm_content=netgift&utm_campaign=mimamori" target="_blank">詳しくはこちら</a>
																											</td>
																										</tr>
																									</tbody>
																								</table>
																							</td>
																							<td width="44" style="width: 44px;">&nbsp;</td>
																						</tr>
																					</tbody>
																				</table>`;
			} else{
				// バナー選択非表示
				bannerListWrap.classList.remove('show');
				// バナー選択リセット
				resetBannerList();
				bannerArea.innerHTML = '';
			}
			// HTMLダウンロードリンク再生成
			download(new Blob([prev.innerHTML]), `${dlFileName}+${filenameDate}.html`);
		});
		// バナー選択
		bannerRadio.forEach(function(elm, i) {
			elm.addEventListener('change',function(){
				if(elm.checked){
					let bannerUrl = elm.getAttribute('data-href');
					let bannerAlt = elm.getAttribute('data-alt');
					bannerArea.innerHTML = `<table cellspacing="0" cellpadding="0" width="100%" style="width: 100%; border-collapse: collapse; border-spacing: 0; border:none;">
																					<tbody>
																						<tr>
																							<td width="44" style="width: 44px;">&nbsp;</td>
																							<td width="512" style="width: 512px;">
																								<table cellspacing="0" cellpadding="0" width="100%" style="width: 100%; border-collapse: collapse; border-spacing: 0; border:none;">
																									<tbody>
																										<tr>
																											<td height="20" style="height: 20px; line-height: 1;">&nbsp;</td>
																										</tr>
																										<tr>
																											<td style="text-align: center;">
																												<img src="${filePath}/lib/img/mail/img_space.gif" alt="" height="auto">
																											</td>
																										</tr>
																										<tr>
																											<td width="512" height="auto" style="text-align: center; width: 512px; height: auto;">
																												<img src="${filePath}/lib/img/mail/img_banner_haha${i+1}.jpg" alt="${bannerAlt}" width="100%" height="auto" style="width: 100%; height: auto;">
																											</td>
																										</tr>
																										<tr>
																											<td height="15" style="height: 15px; line-height: 1;">&nbsp;</td>
																										</tr>
																										<tr>
																											<td width="512" height="auto" style="width: 512px; height: auto; font-size: 22px;">
																												<a href="${bannerUrl}" target="_blank">詳しくはこちら</a>
																											</td>
																										</tr>
																									</tbody>
																								</table>
																							</td>
																							<td width="44" style="width: 44px;">&nbsp;</td>
																						</tr>
																					</tbody>
																				</table>`;

				}
				// HTMLダウンロードリンク再生成
				download(new Blob([prev.innerHTML]), `${dlFileName}+${filenameDate}.html`);
			});
		});
	}
}

// ボタン活性
function activeBtn(){
	sendMail.classList.remove('inactive');
	dlHtml.classList.remove('inactive');
}

// ボタン非活性
function inactiveBtn(){	
	sendMail.classList.add('inactive');
	dlHtml.classList.add('inactive');
}

// プレビューにIMFORMAION追加
function creatInfoHtml(){
	let infoHTML = '';
	infoArea.innerHTML = '';
	let  infoTxt = escapeHtml(freeTxt.value);
	infoTxt = infoTxt.replace(/\n/g, '<br>');
	infoHTML += `<table cellspacing="0" cellpadding="0" width="100%" style="width: 100%; border-collapse: collapse; border-spacing: 0; border:none;">
													<tbody>
														<tr>
															<td width="44" style="width: 44px;">&nbsp;</td>
															<td width="512" style="width: 512px;">
																<table cellspacing="0" cellpadding="0" width="100%" style="width: 100%; border-collapse: collapse; border-spacing: 0; border:none;">
																	<tbody>
																		<tr>
																			<td>
																				<table cellspacing="0" cellpadding="0" width="100%" align="center" style="width: 100%; border-collapse: collapse; border-spacing: 0; border:none;">
																					<tbody>
																						<tr>
																							<td width="20" style="width: 20px; background-color: #e6f5fa;">&nbsp;</td>
																							<td width="184" height="36" style="width: 184px; height: 36px; font-size: 20px; font-weight: bold; font-family: '游ゴシック体', YuGothic, '游ゴシック', 'Yu Gothic', sans-serif; background-color: #e6f5fa; line-height: 1.8;">インフォメーション</td>
																							<td width="20" style="width: 20px; background-color: #e6f5fa;">&nbsp;</td>
																							<td width="288" style="width: 288px;">&nbsp;</td>
																						</tr>
																					</tbody>
																				</table>
																			</td>
																		</tr>
																		<tr>
																			<td width="512" heigth="32" style="width: 512px; height: 32px; background-color: #e6f5fa; line-height: 1; border-top: 3px solid #0098CE;">&nbsp;</td>
																		</tr>
																		<tr>
																			<td>
																				<table cellspacing="0" cellpadding="0" width="100%" style="width: 100%; border-collapse: collapse; border-spacing: 0; border:none; background-color: #e6f5fa;">
																					<tbody>
																						<tr>
																							<td width="20" style="width: 20px; background-color: #e6f5fa;">&nbsp;</td>
																							<td width="472" style="width: 472px; font-size: 28px; font-weight: bold; line-height: 1.6; font-family: '游ゴシック体', YuGothic, '游ゴシック', 'Yu Gothic', sans-serif; background-color: #e6f5fa;">${infoTxt}</td>
																							<td width="20" style="width: 20px; background-color: #e6f5fa;">&nbsp;</td>
																						</tr>
																					</tbody>
																				</table>
																			</td>
																		</tr>
																		<tr>
																			<td width="512" heigth="32" style="width: 512px; height: 32px; background-color: #e6f5fa; line-height: 1; border-bottom: 3px solid #0098CE">&nbsp;</td>
																		</tr>
																	</tbody>
																</table>
															</td>
															<td width="44" style="width: 44px;">&nbsp;</td>
														</tr>
													</tbody>
												</table>`;
	infoArea.innerHTML = infoHTML;
}

// バナー選択リセット
function resetBannerList(){
	for (let i = 0; i < bannerRadio.length; i++){
		if (i == 0){
			bannerRadio.item(i).checked = true;
		} else{
			bannerRadio.item(i).checked = false;
		}
	}
}

//CSVデータを変換した配列を元にHTML出力する
function csvHTML(datalist){
	if(datalist[0][0] == '対象期間'){ //UTF8で最初の文字列が「対象期間」かどうか
		let prevHTML = '';
		let prevNanacoInfo = '';
		let prevDealContents = '';
		let checkBoxHTML = '';
		topicsFlg = '';
		let href = location.href;
		href = href.replace('file:///', '');
		href = href.replace('index.html', '');

		// プレビュー用HTML
		prevHTML += `<style>
								*{
									margin: 0;
									padding: 0;
								}
								body {
									font-family: '游ゴシック体', YuGothic, '游ゴシック', 'Yu Gothic', sans-serif;
								}
								</style>
								<table cellspacing="0" cellpadding="0" width="100%" style="width: 100%;">
									<tbody>
										<tr>
											<td>
												<table cellspacing="0" cellpadding="0" width="600" style="width: 600px; margin: 0 auto;">
													<tbody>
														<tr>
															<td>
																<table cellspacing="0" cellpadding="0" width="100%" style="width: 100%;">
																	<tbody>
																		<tr>
																			<td height="48" style="height: 48px; line-height: 1;">&nbsp;</td>
																		</tr>
																		<tr>
																			<td>
																				<table cellspacing="0" cellpadding="0" width="100%" style="width: 100%;">
																					<tbody>
																						<tr>
																							<td width="44" style="width: 44px;">&nbsp;</td>
																							<td width="512" style="width: 512px;">
																								<table cellspacing="0" cellpadding="0" width="100%" style="width: 100%;">
																									<tbody>
																										