@charset "UTF-8";
/* -------------------------------------------------- */
/* PC */
/* -------------------------------------------------- */
/* -------------------------------------------------- */
/* 自然で美しい変化を、確かな医療技術で。 */
/* -------------------------------------------------- */
#change {
	overflow-y: clip;
	padding-block: 115px 170px;
	position: relative;
}
#change::before {
	content: "";
	display: block;
	width: 53%;
	height: 639px;
	background: url(../../img/cosmetic-surgery/bg_change01.png) no-repeat left center/contain;
	position: absolute;
	right: 0;
	bottom: 20px;
	pointer-events: none;
}

#change .inner {
	position: relative;
	z-index: 2;
}

#changeTit {
	margin-bottom: 35px;
	font-weight: 600;
	font-size: 3.4rem;
	line-height: 1.7;
}

#changeTxtBox {
	width: 60%;
}

#change .txt {
	font-size: 1.8rem;
}

#change .txt + .txt {
	margin-top: 1.3em;
}


/* -------------------------------------------------- */
/* 施術一覧 */
/* -------------------------------------------------- */
#treatment {
	margin-bottom: 140px;
	padding-block: 150px;
	background: #fff;
}

#treatmentBtnWrap {
	display: flex;
	justify-content: center;
	gap: 65px;
	margin-top: 75px;
}

#treatment .treatmentBtn {
	width: min(100%, 390px);
}


/* -------------------------------------------------- */
/* 当院の「美容外科」が選ばれる理由 */
/* -------------------------------------------------- */
#reason {
	margin-bottom: 140px;
}


/* -------------------------------------------------- */
/* アフターケア */
/* -------------------------------------------------- */
#support {
	margin-bottom: 60px;
}


/* -------------------------------------------------- */
/* 美容外科の最新症例集 */
/* -------------------------------------------------- */
#cosmetic-surgeryPage #similarCases {
	margin-bottom: 150px;
	padding-block: 150px 180px;
	background: #fff;
}

#similarCasesBtn {
	padding-top: 80px;
}


/* -------------------------------------------------- */
/* PC(調整) */
/* -------------------------------------------------- */
@media screen and (min-width: 1025px) {
	/* -------------------------------------------------- */
	/* 施術一覧 */
	/* -------------------------------------------------- */
	#treatment .treatmentBtn {
		margin-inline: 0;
	}

	#treatment .treatmentBtn .btn1Link {
		min-height: 70px;
	}

	#treatment .treatmentBtn .btn1Icon {
		width: 30px;
		height: 30px;
	}


	/* -------------------------------------------------- */
	/* アフターケア */
	/* -------------------------------------------------- */
	#supportBtn {
		width: min(100%, 390px);
	}

	#supportBtn .btn1Link {
		min-height: 70px;
	}

	#supportBtn .btn1Icon {
		width: 30px;
		height: 30px;
	}

}


/* -------------------------------------------------- */
/* TAB&SP */
/* -------------------------------------------------- */
@media screen and (max-width: 1024px) {
	/* -------------------------------------------------- */
	/* 自然で美しい変化を、確かな医療技術で。 */
	/* -------------------------------------------------- */
	#change {
		padding-block: 0 80px;
	}
	#change::before {
		width: 45%;
		height: auto;
		aspect-ratio: 651/639;
		background-position: center;
		top: 0;
		right: 5%;
		bottom: auto;
	}

	#changeTxtBox {
		width: 100%;
	}

	#change .txt {
		font-size: 1.5rem;
	}


	/* -------------------------------------------------- */
	/* 施術一覧 */
	/* -------------------------------------------------- */
	#treatment {
		margin-bottom: 80px;
		padding-block: 80px;
	}

	#treatmentBtnWrap {
		flex-direction: column;
		gap: 20px;
		margin-top: 40px;
	}


	/* -------------------------------------------------- */
	/* 当院の「美容外科」が選ばれる理由 */
	/* -------------------------------------------------- */
	#reason {
		margin-bottom: 80px;
	}

	
	/* -------------------------------------------------- */
	/* 美容外科の最新症例集 */
	/* -------------------------------------------------- */
	#cosmetic-surgeryPage #similarCases {
		margin-bottom: 80px;
		padding-block: 80px 100px;
	}

}


/* -------------------------------------------------- */
/* TAB(調整) */
/* -------------------------------------------------- */
@media screen and (min-width: 768px) and (max-width: 1024px) {
	/* -------------------------------------------------- */
	/* 自然で美しい変化を、確かな医療技術で。 */
	/* -------------------------------------------------- */
	#changeTit {
		margin-bottom: 10px;
		display: flex;
		align-items: center;
		width: 50%;
		aspect-ratio: 651/639;
		font-size: 2.8rem;
	}

}


/* -------------------------------------------------- */
/* SP(調整) */
/* -------------------------------------------------- */
@media screen and (max-width: 767px) {
	/* -------------------------------------------------- */
	/* 自然で美しい変化を、確かな医療技術で。 */
	/* -------------------------------------------------- */
	#change::before {
		width: min(75%, 400px);
		margin: 0 auto 30px;
		position: static;
	}

	#changeTit {
		margin-bottom: 25px;
		font-size: 2.4rem;
		text-align: center;
	}

}