/*-- esthetic --*/
#low_mi img {
	width: 100%;
	height: auto;
}

@media only screen and (max-width: 768px) {
	#left_column {
		width: 100%;
		grid-row: 2 / 3;
	}

	#right_column {
		width: 100%;
		grid-row: 1 / 2;
	}

	.cont_box.clearfix::after {
		display: none;
	}

	.cont_box.clearfix:has(>#left_column) {
		display: grid;
		grid-template: auto / 100%;
		gap: 2em;
	}
}

#esthetic img {
	float: none;
	margin: 1em auto;
	display: block;
	width: fit-content;
}

#esthetic img {
	max-width: 100%;
	height: auto;
}

#content {
	margin-top: 90px;
}

#b-esthetic #low_mi {
	background: #ece7e1;
	padding: 2em;
	box-sizing: border-box;
	font-size: 0;
}

#esthetic #low_mi img {
	max-width: 100%;
}

#esthetic img.center {
	width: fit-content;
	margin: 1em auto;
}

#esthetic.renewed h2 {
	margin-top: 3em;
	text-align: center;
	color: #523d38;
	padding-bottom: .8em;
	margin-bottom: 1em;
	border-bottom: 3px solid #ad9573;
	font-family: "游明朝 Medium", "Yu Mincho Medium", "YuMincho Medium", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif;
	font-weight: bold;
	font-size: 160%;
	line-height: 1.4;
}

#esthetic .mincho {
	font-family: "游明朝 Medium", "Yu Mincho Medium", "YuMincho Medium", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif;
	font-weight: bold;
}

#esthetic *:is(.ranking, .cases) {
	container-type: inline-size;
	display: grid;
	grid-template: auto / 100%;
	gap: 2em;
}

@media only screen and (min-width: 769px) {
	#esthetic *:is(.ranking, .cases) {
		grid-template: auto / 1fr 1fr;
	}
}

#esthetic *:is(.ranking, .cases) div {
	padding: 3cqw;
	background: #ebe6e0;
	box-sizing: border-box;
	color: #523d38;
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 3;
	gap: .5em;
}

@media only screen and (max-width: 768px) {
	#esthetic *:is(.ranking, .cases) div {
		display: grid;
		grid-template-rows: auto;
		gap: .5em;
		padding: 5cqw;
	}
}

#esthetic *:is(.cases) div {
	/* grid-row: span 7; */
	display: block;
}

#esthetic *:is(.ranking, .cases) div p {
	margin-bottom: 0 !important;
}

#esthetic *:is(.ranking, .cases) div p:first-of-type,
#esthetic *:is(.ranking, .cases) div:has(.hr-dotted) p.mincho {
	font-size: 150%;
	white-space: pre-wrap;
	word-break: keep-all;
	text-align: center;
	line-height: 1.3;
}

#esthetic *:is(.ranking, .cases) div p:first-of-type small {
	display: block;
	margin-top: 4px;
}

#esthetic *:is(.ranking, .cases) div p:has(img) {
	text-align: center;
}

#esthetic *:is(.ranking, .cases) div p:has(img) img {
	width: 100%;
	height: auto;
	margin: 0;
}

#esthetic *:has(>wbr) {
	white-space: pre-wrap;
	word-break: keep-all;
}

#esthetic .cases p {
	text-align: center;
}

#esthetic .cases p span {
	display: inline-block;
}

#esthetic .cases dl {
	width: 90%;
	margin: 1em 5%;
	display: grid;
	grid-template: auto / auto 1fr;
	gap: 1em 0;
}

#esthetic .cases dl *:is(dt, dd):not(:first-of-type) {
	padding-top: 1em;
	border-top: 1px solid #523d38;
}

#esthetic .cases dl dt {
	padding-right: 1em;
	box-sizing: border-box;
	font-weight: 900 !important;
}

#esthetic .cases dl dd span {
	display: inline-flex;
	justify-content: flex-start;
	align-items: flex-start;
}

#esthetic .cases dl dd span::before {
	content: "・";
}

#esthetic .cases dl+p {
	margin-top: 2em !important;
}

#esthetic p b {
	color: black;
	text-shadow: 0 0 .1px black;
}

@media only screen and (max-width: 768px) {
	#b-esthetic #left_column {
		display: none;
	}
}

@media only screen and (min-width: 769px) {
	#esthetic .cases p:has(img) {
		place-self: center;
	}
}

.hr-dotted {
	width: 100%;
	height: 0;
	border: 0;
	border-bottom: 3px dotted #555;
	margin-block: 2em;
}

#esthetic *:is(.cases) div:has(.hr-dotted) {
	grid-row: span 9;
}

#esthetic *:is(.cases) div p.mincho {
	margin-bottom: 1em !important;
}