@charset "utf-8";

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

/*+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
- ページヘッダー
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+*/
.case-header {
	--content-width: var(--content-width_large);
	padding-top: var(--padding-block);
}

.case-header .post-heading {
	font-size: 32px;
	line-height: 1.3;
	letter-spacing: var(--letter-spacing);
}

@media (min-width: 768px) {
.case-header .post-heading {
	font-size: 64px;
}
}

/*+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
- Before & After
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+*/
.case-beforeafter {
	padding-top: var(--padding-block);
}

/*+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
- 料金
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+*/
.case-price {
	padding-bottom: initial;
}

/*+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
- 詳細
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+*/
.case-detail {
	display: grid;
	padding-bottom: initial;
	row-gap: 30px;
}

.case-detail .img {
	width: calc(100% - var(--padding-inline));
	border-radius: 100vw 0 0 100vw;
	object-fit: cover;
	aspect-ratio: 700 / 466;
	justify-self: end;
}

.case-detail .heading_large:not(:first-child) {
	margin-top: 2.2em;
}

.case-effect-ul {
	display: flex;
	position: relative;
	padding-left: 0.8em;
	flex-flow: wrap;
}

.case-effect-ul::before {
	position: absolute;
	inset: 0.7em auto auto 0;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--color_main);
	content: "";
}

.case-effect-li:not(:last-child)::after {
	content: "、";
}

@media (min-width: 768px) {
.case-detail {
	grid-template-columns: minmax(auto, 555px) 50%;
	justify-content: end;
}

.case-detail .img {
	width: 100%;
	height: 466px;
	grid-row: 1;
	grid-column: 2;
}

.case-detail .inner {
	padding-right: 13%;
}
}

/*+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
- 術後経過
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+*/
.case-postoperative-ul {
	display: grid;
	overflow: hidden;
	width: fit-content;
	margin-inline: auto;
	border-radius: 20px;
}

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

.case-postoperative-li .img {
	width: 193px;
	background: var(--color_white);
	object-fit: cover;
	aspect-ratio: 252 / 339;
}

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

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

@media (min-width: 768px) {
.case-postoperative-li .img {
	width: 252px;
}

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