@charset "utf-8";

/*+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
症例写真
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+*/

/*+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
- Before & After
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+*/
.case-beforeafter-ul {
	display: grid;
	gap: 10px 4%;
}

.case-beforeafter-li {
	display: grid;
	overflow: hidden;
	border-radius: 20px;
	grid-template-columns: 1fr 1fr;
}

.case-beforeafter-li figure {
	position: relative;
}

.case-beforeafter-li .img {
	width: 100%;
	background: var(--color_white);
	object-fit: cover;
	aspect-ratio: 252 / 339;
}

.case-beforeafter-li figcaption {
	position: absolute;
	inset: 0.4em 0.7em auto auto;
	font-size: 16px;
	font-family: var(--font_en);
}

@media (min-width: 560px) {
.case-beforeafter-ul {
	grid-template-columns: 1fr 1fr;
}
}

@media (min-width: 768px) {
.case-beforeafter-ul {
	row-gap: 20px;
}

.case-beforeafter-li figcaption {
	font-size: 19px;
}
}