document.addEventListener('DOMContentLoaded', () => {
	const modalDialogTrigger_list = document.getElementsByClassName('areaDialogTrigger');
	if( modalDialogTrigger_list.length > 0 ) {
		for( const modalDialogTrigger of modalDialogTrigger_list ) {
			modalDialogTrigger.addEventListener('click', (cEv)=>{
				const targetID = cEv.currentTarget.dataset.dialogTarget;
				const targetModal = document.getElementById(targetID);
				const modalType = cEv.currentTarget.dataset.dialogType || '';
				//モーダル表示
				targetModal.showModal();

				//閉じるボタン
				const modalDialogClose_list = targetModal.getElementsByClassName('areaDialogClose');
				if( modalDialogClose_list.length > 0 ) {
					for( const modalDialogClose of modalDialogClose_list ) {
						modalDialogClose.addEventListener('click', (evC_close)=>{
							targetModal.close();
						});
					}
				}

				//背景クリック時にモーダル閉じる
				targetModal.addEventListener('click', (evC_bg)=>{
					if( evC_bg.target.tagName.toLowerCase() === 'dialog' ) {
						targetModal.close();
					}
				});
			});
		}
	}
});

.animals_list {
	display: flex;
	flex-wrap: wrap;
	gap: 2%;
	list-style-type: none;
}
.animals_list > [class^="animal"] {
	width: calc((100% - (2% * 2)) / 3);
	text-align: center;
}
.animal_photobox .animal_name .txt__kind {
	font-size: min(3.75vw, 1.6rem);
	font-weight: 700;
	line-height: 1.45;
}
.animal_photobox .animal_name .txt__name {
	font-size: min(3vw, 1.2rem);
}
.areaDialogTrigger {
	cursor: pointer; /* ← */
}
.areaDialogContents {
	border-radius: min(6vw, 3rem);
	border: none;
}
.areaDialogContents .animal_photo_area img {
	width: min(100%, 500px);
	height: auto;
	object-fit: contain;
}
.areaDialogContents .close_btn,
.areaDialogContents .close_icon {
	cursor: pointer; /* ← */
}
.areaDialogContents .close_icon {
	position: absolute;
	top: min(3vw, 1rem);
	right: min(3vw, 2rem);
	font-size: min(5vw, 2rem);
	font-weight: 700;
}
.areaDialogContents .close_btn {
	margin-top: min(6vw, 3rem);
	background: #333;
	color: #fff;
	border-radius: 100vmax;
	width: fit-content;
	margin-inline: auto;
	padding-inline: min(6vw, 4rem);
}
.areaDialog_inner {
	padding-inline: min(6vw, 8rem);
}
.areaDialogContents::backdrop {
	background: rgba(246, 243, 239, 0.7); /* ← */
}

<li class="animal">
	<figure class="animal_photobox areaDialogTrigger" data-dialog-target="areaDialog__itemAnimals01">
		<picture class="photo">
			<img src="" alt="ミニブタ">
		</picture>
		<figcaption class="animal_name">
			<p class="txt__kind">ミニブタ</p>
			<p class="txt__name">のぶお</p>
		</figcaption>
	</figure>
	<dialog class="areaDialogContents" id="areaDialog__itemAnimals01">
		<div class="areaDialog_inner">
			<div class="animal_photo_area">
				<picture class="photo">
			
					<img src="" alt="ミニブタ">
				</picture>
			</div>
			<p class="close_btn areaDialogClose">閉じる</p>
			<p class="close_icon areaDialogClose">×</p>
		</div>
	</dialog>
</li>
<li class="animal">
	<figure class="animal_photobox areaDialogTrigger" data-dialog-target="areaDialog__itemAnimals02">
		<picture class="photo">
			<img src="" alt="モルモット">
		</picture>
		<figcaption class="animal_name">
			<p class="txt__kind">モルモット</p>
			<p class="txt__name">ソフィー</p>
		</figcaption>
	</figure>
	<dialog class="areaDialogContents" id="areaDialog__itemAnimals02">
		<div class="areaDialog_inner">
			<div class="animal_photo_area">
				<picture class="photo">
					<img src="" alt="モルモット">
				</picture>
			</div>
			<p class="close_btn areaDialogClose">閉じる</p>
			<p class="close_icon areaDialogClose">×</p>
		</div>
	</dialog>
</li>
<li class="animal">
	<figure class="animal_photobox areaDialogTrigger" data-dialog-target="areaDialog__itemAnimals03">
		<picture class="photo">
			<img src="" alt="チンチラ">
		</picture>
		<figcaption class="animal_name">
			<p class="txt__kind">チンチラ</p>
			<p class="txt__name">てまり</p>
		</figcaption>
	</figure>
	<dialog class="areaDialogContents" id="areaDialog__itemAnimals03">
		<div class="areaDialog_inner">
			<div class="animal_photo_area">
				<picture class="photo">
					<img src="" alt="チンチラ">
				</picture>
			</div>
			<p class="close_btn areaDialogClose">閉じる</p>
			<p class="close_icon areaDialogClose">×</p>
		</div>
	</dialog>
</li>