@charset "UTF-8";
/* -------------------------------------------------- */
/* PC */
/* -------------------------------------------------- */
/* -------------------------------------------------- */
/* 仕上がりを支える、術後ケアへのこだわり */
/* -------------------------------------------------- */
#care {
	overflow-y: clip;
	padding-block: 45px 140px;
	position: relative;
}
#care::before {
	content: "";
	display: block;
	width: 54%;
	height: 600px;
	background: url(../../img/aftercare/bg_care01.png) no-repeat right bottom / contain;
	position: absolute;
	right: 0;
	bottom: -25px;
	pointer-events: none;
}

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

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

#careTxtBox {
	width: 60%;
}

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

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


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

#treatmentList {
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: 50px;
	margin-bottom: 75px;
}

#treatmentList .item {
	border: 1px solid #998a54;
}

#treatmentList .item a {
	display: grid;
	grid-template-columns: 225px 1fr;
	align-items: center;
	grid-gap: 40px;
	padding: 30px 40px 30px 35px;
}

#treatmentList .img img {
	width: 100%;
}

#treatmentList .txtBox {
	padding-right: 100px;
	position: relative;
}
#treatmentList .txtBox::after {
	content: "";
	display: block;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: #444 url(../../img/common/icon_clinic_arrow.svg) no-repeat center/25%;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}

#treatmentList .tit {
	margin-bottom: 10px;
	font-weight: 600;
	font-size: 2.2rem;
}

#treatmentList .txt {
	font-family: var(--font-family-sub);
}

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

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

#treatmentBtnWrap {
	padding-top: 60px;
}


/* -------------------------------------------------- */
/* 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;
	}

}


/* -------------------------------------------------- */
/* TAB&SP */
/* -------------------------------------------------- */
@media screen and (max-width: 1024px) {
	/* -------------------------------------------------- */
	/* 仕上がりを支える、術後ケアへのこだわり */
	/* -------------------------------------------------- */
	#care {
		padding-block: 0 80px;
	}
	#care::before {
		width: 60%;
		height: auto;
		aspect-ratio: 950/708;
		background-position: center;
		top: 0;
		bottom: auto;
	}

	#careTxtBox {
		width: 100%;
	}

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


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

	#treatmentList {
		margin-bottom: 50px;
		grid-gap: 20px;
	}

	#treatmentList .item a {
		grid-template-columns: 1fr;
		grid-gap: 20px;
		padding: max(20px, 5%);
	}

	#treatmentList .txtBox {
		padding-right: 50px;
	}
	#treatmentList .txtBox::after {
		width: 35px;
		height: 35px;
	}

	#treatmentList .tit {
		font-size: 2rem;
	}

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


	/* -------------------------------------------------- */
	/* アフターケアの症例集 */
	/* -------------------------------------------------- */
	#aftercarePage #similarCases {
		margin-bottom: 80px;
		padding-block: 80px 100px;
	}

}


/* -------------------------------------------------- */
/* TAB(調整) */
/* -------------------------------------------------- */
@media screen and (min-width: 768px) and (max-width: 1024px) {
	/* -------------------------------------------------- */
	/* 仕上がりを支える、術後ケアへのこだわり */
	/* -------------------------------------------------- */
	#careTit {
		margin-bottom: 0;
		display: flex;
		align-items: center;
		width: 67.5%;
		aspect-ratio: 950/708;
		font-size: 2.8rem;
	}

}


/* -------------------------------------------------- */
/* SP(調整) */
/* -------------------------------------------------- */
@media screen and (max-width: 767px) {
	/* -------------------------------------------------- */
	/* 仕上がりを支える、術後ケアへのこだわり */
	/* -------------------------------------------------- */
	#care::before {
		width: 100%;
		margin: 0 auto 30px;
		position: static;
	}

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


}


/* -------------------------------------------------- */
/* hover */
/* -------------------------------------------------- */
@media (hover: hover) {
	/* -------------------------------------------------- */
	/* 施術一覧 */
	/* -------------------------------------------------- */
	#treatmentList .img {
		overflow: hidden;
	}

	#treatmentList .img img {
		transition: transform .4s ease;
	}

	#treatmentList .txtBox::after {
		transition: all .3s;
	}

	#treatmentList .item a:hover .img img {
		transform: scale(1.04);
	}
	#treatmentList .item a:hover .txtBox::after {
		background-color: #998a54;
	}

}