dialog {
	margin: auto;
	padding: 2em;
	border: 2px solid #888;
	border-radius: 0.5em;
	text-align: left;
	font-size: 1.1em;
}
dialog::backdrop {
	background-color: rgba(0, 0, 0, 0.3);
}

/* 画面右上の×印 */
.round_btn {
	display: block;
	position: absolute;
	top: 10px;  /* 上からの距離 */
	right: 10px; /* 右からの距離 */
	top: 10px;
	right: 10px;
	width: 20px;
	height: 20px;
	border: 2px solid #333; /* 枠の調整 */
	border-radius: 50%;  /* 丸みの度合い */
	background: #fff; /* ボタンの背景色 */
}
.round_btn::before, .round_btn::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 2px; /* 棒の幅（太さ） */
	height: 12px; /* 棒の高さ */
	background: #333; /* バツ印の色 */
}
.round_btn::before { transform: translate(-50%,-50%) rotate(45deg); }
.round_btn::after { transform: translate(-50%,-50%) rotate(-45deg); }

.title {
	text-align: center;
	margin-bottom: 1em;
	font-size: 1.5em;
	font-weight: 600;
	border-bottom: 1px solid #000;
}

.hr_pp {
	width: 100%;
	margin: 1em 0;
	border: 1px dotted #000;
}

.pp_text {
	text-indent: 1em;
}

#pp_parent {
	display: flex;
	justify-content: space-around;
}
.pp_img {
	width: 320px;
	border: 1px solid #000;
	border-radius: 8px;
}
.detail {
//	width: 300px;
	padding-left: 1em;
}
.detail p {
	font-weight: 600;
	text-indent: -1em;
}
@media screen and (max-width: 650px) {
	#pp_parent {
		flex-direction: column; /* これにより子要素が縦に並ぶ */
		align-items: flex-start; /* 必要に応じて子要素の揃え方を調整 */
	}
	.pp_img {
		margin-top: 1em;
		width: 100%;
	}
}

.bottom_btn {
	padding: 0.5em 1em;
	border: 1px solid #000;
	border-radius: 0.4rem;
}