@charset "UTF-8";

/*---------------------------------------------------------
m_img
---------------------------------------------------------*/
.contentpage .m_img > div {
	background-image: url(../../images/medical/implant/m_img@2x.jpg);
}


/*---------------------------------------------------------

---------------------------------------------------------*/
/* med_rsn */
.med_rsn::before {
	background-image: url(../../images/medical/implant/rsn_bg@2x.png);
}
/* med_cnsl */
.med_cnsl::before {
	background-color: #3591B9;
}
.med_cnsl .cnsl_tit .com_deco_txt1 {
	color: #2672A1;
}
/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {

}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
.med_rsn .com_flt .img_l {
	margin-bottom: -6%;
}
}

/*---------------------------------------------------------
reason
---------------------------------------------------------*/
#reason .med_col_list .abs {
	position: absolute;
	width: 48%;
	right: 0;
	top: 0;
	translate: 0 -18%;
}
#reason .med_col_list .com_index_radi {
	display: inline-block;
	font-size: min(1.5vw,112%);
}
#reason .med_col_list dt {
	position: relative;
	text-align: left;
	font-size: min(3.2vw,218%);
	letter-spacing: .08em;
}
#reason .med_col_list dt::after {
	display: none;
}
#reason .med_col_list .com_index_radi span {	color: #74C8B2;}
#reason .med_col_list > li:nth-of-type(2) {background-color: rgba(53,145,185,0.3);}
#reason .med_col_list > li:nth-of-type(2) .com_index_radi span {	color: #3591B9;}

/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {
.med_col_list.col2 {
	grid-template-columns: repeat(2, 48.5%);
}
}
/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {
#reason .med_col_list > li:nth-of-type(2) .abs {
	translate: 12% -18%;
}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
#reason .med_col_list .abs {
	width: 52%;
}
#reason .med_col_list > li:nth-of-type(2) .abs {
	translate: 15% -8%;
}
#reason .med_col_list .com_index_radi {
	font-size: 90%;
}
#reason .med_col_list dt {
	font-size: 140%;
}
}


/*---------------------------------------------------------
compare
---------------------------------------------------------*/
.compare .box_img {
	width: 75%;
	max-width: 240px;
	margin: 1.5em auto 2em;
}
.compare .box_img img {
	border-radius: 50%;
}
.compare > li {
	background-color: #fff;
	box-sizing: border-box;
	padding: 40px 9%;
}
.compare > li > dl {
	text-align: center;
}
.compare > li > dl > dt {
	font-size: min(200%,2.8vw);
	letter-spacing: .06em;
	line-height: 1.4;
	background-color: #E9F1EC;
	padding: .2em;
	border-radius: 2em;
	margin-bottom: .5em;
}
.compare > li > dl > dd {
	font-size: 106%;
	line-height: 1.5;
}
.compare .med_mer_dem {
	margin-top: 1.5em;
}
.compare .med_mer_dem > dl {
	background-color: transparent;
	padding: 0;
}
.compare .med_mer_dem > dl:last-of-type {
	margin-top: 2em;
}
.compare .med_mer_dem {
	display: block;
}
.compare .med_mer_dem > dl {
	width: 100%;
}
.compare .med_mer_dem > dl > dt {
	color: #FFF;
	padding: .4em;
	margin-bottom: .8em;
}

.med_mer_dem .merit dt {background-color: #74C8B2;}
.med_mer_dem .med_mer_list li::before {color: #74C8B2;}
.med_mer_dem .demerit dt {background-color: #C6B583;}
.med_mer_dem .med_dem_list li::before {color: #C6B583;opacity: 1;}

/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {
.compare {
	display: grid;
	justify-content: space-between;
	grid-template-columns: repeat(3,32.5%);
}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
.compare > li {
	padding: 8% 6% 10%;
}
.compare .box_img {
	width: 60%;
	margin-bottom: 6%;
}
.compare > li:not(:last-of-type) {
	margin-bottom: 4%;
}
.compare > li > dl > dt {
	font-size: 130%;
}
}


/*---------------------------------------------------------
guidedent
---------------------------------------------------------*/
#guidedent .point {
	position: absolute;
	width: 15%;
	max-width: 190px;
	right: 7%;
	top: 0;
	translate: 0 -20%;
}
#guidedent .logo {
	width: 40%;
	max-width: 417px;
	margin: 0 auto 1.8em;
}
#guidedent .fw_bold {
	text-align: center;
	font-size: 93%;
	line-height: 1.5;
	margin: 2em auto;
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
#guidedent .point {
	width: 28%;
	right: -4%;
}
#guidedent .logo {
	width: 60%;
	margin: 0 auto 1.8em;
}
#guidedent .fw_bold {
	margin: 1em auto 1.5em;
}
}


/*---------------------------------------------------------

---------------------------------------------------------*/
/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {

}
/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {

}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

}