@charset "UTF-8";


.contentpage .m_img {
	background-image: url("../images/periodontal/m_img@2x.jpg");
	position: relative;
	z-index: 1;
	overflow: hidden;
}
.contentpage .m_img::before{
	position: absolute;
	content: "";
	background: url("../images/periodontal/m_abs@2x.png") no-repeat bottom right;
	background-size: contain;
	width: 100%;
	height: 100%;
	right: 0;
	bottom: 0;
	z-index: 2;
}

/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
.contentpage .m_img::before{
	background-size: auto 135%;
	right: -1.8%;
	bottom: -12%;
}
}





/*---------------------------------------------------------
pre_style
---------------------------------------------------------*/
.pre_style dt{
	font-size: min(240%,3vw);
	letter-spacing: 0.15em;
	line-height: 1.5em;
	margin-bottom: 0.5em;
}
.pre_style dt small{
	font-size: 50%;
	letter-spacing: 0.15em;
	line-height: 1.5em;
	color:#faa16c; 
	display: block;
	margin-bottom: 0.6em;
}
.pre_style dt span{
	display: block;
}

/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
.pre_style dt{
	font-size: 150%;
	letter-spacing: 0.051em;
}
.pre_style dt small{
	font-size: 60%;
	letter-spacing: 0.1em;
	margin-bottom: 0.4em;
}
}





/*---------------------------------------------------------
point_list
---------------------------------------------------------*/
.point_list{
	display: flex;
	justify-content: space-between;
    flex-wrap: wrap;
}
.point_list > li{
	max-width: 610px;
	width: 48.5%;
	margin-top: 70px;
}
.point_list > li:first-child{
	margin-top: 0;
}
.point_list > li.max{
	max-width: 100%;
	width: 100%;
}
.point_list .com_deco_txt{
	font-size: min(120%,1.9vw);
	margin: 0 auto 3em;
}
.point_list .com_deco_txt::first-letter{
	color: #fab28a;
}
.point_list > li .com_flt .img_l{
	max-width: 560px;
	width: 43.1%;
}
.point_list > li .com_flt .txt_r{
	max-width: 665px;
	width: 51.9%;
	float: right;
}
.point_list > li .img{
	max-width: 484px;
	width: 80%;
	margin: 0 auto 45px;
	text-align: center;
}

/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {
.point_list > li{
	margin-top: 7%;
}
.point_list .com_deco_txt{
	margin-bottom: 2em;
}
.point_list > li .com_flt .txt_r{
	max-width: 100%;
	width: 100%;
	float: none;
}
.point_list > li .img{
	margin: 0 auto 4%;
}
}

/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
.point_list > li{
	max-width: 100%;
	width: 100%;
	margin-top: 10%;
}
.point_list .com_deco_txt{
	font-size: 100%;
	margin-bottom: 1.5em;
}
.point_list > li .com_flt .img_l{
	width: 100%;
}
.point_list > li .com_flt .txt_r{
	max-width: 100%;
	width: 100%;
	float: none;
}
.point_list > li .img{
	width: 90%;
	margin: 0 auto 5%;
}
}





/*---------------------------------------------------------
med_flow_list
---------------------------------------------------------*/
.med_flow_list .txt dt {
	color: #fff;
	font-size: min(1.7vw,135%);
	line-height: 1em;
	padding: 0.5em 0;
	max-width: 9.7em;
	width: 86%;
	box-sizing:border-box;
	margin: 1.2em auto 0.6em;
	position: relative;
}
.med_flow_list li:nth-child(1) .txt dt{
	background-color: #91bf55;
}
.med_flow_list li:nth-child(2) .txt dt{
	background-color: rgba(124,192,199,0.6);
}
.med_flow_list li:nth-child(3) .txt dt{
	background-color: #7cc0c7;
}
.med_flow_list li:nth-child(4) .txt dt{
	background-color: #1ea3b6;
}
.med_flow_list li:nth-child(5) .txt dt{
	background-color: #1e88a8;
}
.med_flow_list .txt dt::before{
	position: absolute;
	content: "";
	background-repeat: no-repeat;
	background-position: right center;
	background-size: 100% 100%;
	width: 2em;
	height: 100%;
	left: 100%;
	top:50%;
	transform: translateY(-50%);
}
.med_flow_list li:nth-child(1) .txt dt::before{
	background-image: url("../images/periodontal/flow_arrow1.svg");
}
.med_flow_list li:nth-child(2) .txt dt::before{
	background-image: url("../images/periodontal/flow_arrow2.svg");
}
.med_flow_list li:nth-child(3) .txt dt::before{
	background-image: url("../images/periodontal/flow_arrow3.svg");
}
.med_flow_list li:nth-child(4) .txt dt::before{
	background-image: url("../images/periodontal/flow_arrow4.svg");
}
.med_flow_list li p.txt{
	max-width: 160px;
	width: 90%;
	margin: 0 auto;
	text-align: left;
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
.med_flow_list .txt dt {
	font-size: 105%;
}
}





/*---------------------------------------------------------
med_col_list
---------------------------------------------------------*/

/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {
.med_col_list.col3 > li:nth-of-type(n+4) {
    margin-top: 6.5%;
}
}




/*---------------------------------------------------------
whi
---------------------------------------------------------*/
.whi{
	position: relative;
	padding-bottom: 60px;
	margin-bottom: 60px;
	z-index: 0;
}
.whi::before{
	position: absolute;
	content: "";
	background: url("../images/periodontal/why_abs_bg@2x.jpg") no-repeat right top;
	background-size: 100% auto;
	max-width: 676px;
	width: 52%;
	max-height: 600px;
	height:100%;
	top: 140px;
	right: 0;
	z-index: -2;
}
.whi::after{
	position: absolute;
	content: "";
	background: #e6e6e6;
	width: 100%;
	height: 1px;
	left: 0;
	bottom: 0;
	z-index: -1;
}
.whi .tit{
	font-size: min(586%,6.8vw);
	letter-spacing: 0.05em;
	line-height: 0.6em;
	color: #e0e3d2;
	text-align: center;
	opacity: 0.5;
	margin-bottom: 0.3em;
}
.whi .tit::first-letter{
	color: #7cc0c7;
}
.whi .lead{
	font-size: min(167%,2vw);
	letter-spacing: 0.1em;
	line-height: 2em;
	text-align: center;
	font-weight: bold;
	margin-bottom: 1.3em;
}
.whi ul{
	font-size: min(147%,1.8vw);
	line-height: 1.5em;
	letter-spacing: 0.08em;
	max-width: 29em;
	display: flex;
	justify-content: space-between;
	
}
.whi ul li{
	width: 8.82em;
	height: 8.82em;
	background: #fff;
	text-align: center;
	border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
	box-shadow: 0px 0px 11px 0px rgba(0,0,0,0.2);
}
.whi ul li span{
	color: #1e88a8;
}
.whi ul:nth-of-type(2){
	margin-left: 5.045em;
}
/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {

}
/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {
.whi{
	padding-bottom: 6%;
	margin-bottom:  6%;
}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
.whi{
	padding-bottom: 10%;
	margin-bottom:  10%;
}
.whi::before{
	width: 75%;
	top: 16%;
	right: -15%;
}
.whi .tit{
	font-size: 400%;
	letter-spacing: 0.05em;
}
.whi .lead{
	font-size: 100%;
	letter-spacing: 0.05em;
	text-align: left;
}
.whi ul{
	font-size: 78%;
	margin: 0 auto;
	
}
.whi ul:nth-of-type(2){
	margin: 2.5% auto 0;
}
}




/*---------------------------------------------------------
fukidashi_tit
---------------------------------------------------------*/
.fukidashi_tit{
	font-size: min(221%,2.8vw);
	letter-spacing: 0.05em;
	line-height: 1em;
	text-align: center;
	padding: 1em 0;
	background-color: #e2e4e1;
	border-radius: 0.9em;
	position: relative;
	margin-bottom: 2.2em;
}
.fukidashi_tit::before{
	position: absolute;
	content: "";
	background: url("../images/periodontal/fukidashi_arrow.svg") no-repeat center bottom;
	background-size: 100% 100%;
	width: 1.055em;
	height: 1.055em;
	left: 0;
	right: 0;
	margin: auto;
	top:100%;
}
.fukidashi_tit::after{
	position: absolute;
	content: "";
	background: url("../images/periodontal/fukidashi_abs@2x.png") no-repeat right center;
	background-size: 100% auto;
	width: 6.78em;
	height: 6.78em;
	left: calc(50% + 11em);
	top:50%;
	transform: translateY(-50%);
}
.fukidashi_tit dt{
	font-size: 105.5%;
	letter-spacing: 0.1em;
	line-height: 1em;
	margin-bottom: 0.2em;
}
.fukidashi_tit dd {
	display: flex;
	justify-content: center;
	align-items: flex-end;
}
.fukidashi_tit dd span{
	font-size: 160%;
	line-height: 1em;
	letter-spacing: 0.05em;
	display: block;
}
.fukidashi_tit dd strong{
	font-size: 193%;
	line-height: 1em;
	letter-spacing: 0.05em;
	font-weight: 500;
	display: block;
}
.fukidashi_tit dd strong.ppl{
	line-height: 0.8em;
}

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

}

/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
.fukidashi_tit{
	font-size: 105%;
	letter-spacing: 0.05em;
	line-height: 1.5em;
}
.fukidashi_tit::after{
	left: calc(50% + 5.65em);
}
.fukidashi_tit dd {
	display: block;
}
.fukidashi_tit dd span{
	letter-spacing: 0.03em;
	display: inline;
}
.fukidashi_tit dd strong{
	letter-spacing: 0.03em;
	display: inline;
}
}





/*---------------------------------------------------------
sub_tit
---------------------------------------------------------*/
.sub_tit{
	font-size: min(187%,2.3vw);
	letter-spacing: 0.1em;
	line-height: 1.5em;
	text-align: center;
	color: #fff;
	padding: 0.8em 0;
	background-color: #1e88a8;
	border-radius: 1.55em;
	box-sizing: border-box;
	margin-bottom: 1.8em;
}

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

}

/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
.sub_tit{
	font-size: 130%;
	letter-spacing: 0.05em;
}

}





/*---------------------------------------------------------
border_top
---------------------------------------------------------*/
.border_top{
	padding-top: 60px;
	margin-top: 60px;
	border-top: 1px solid #E6E6E6;
}

/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {
.border_top{
	padding-top: 6%;
	margin-top: 6%;
}
}

/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
.border_top{
	padding-top: 10%;
	margin-top: 10%;
}
}





/*---------------------------------------------------------
rel
---------------------------------------------------------*/
.rel{
	position: relative;
	z-index:1;
}





/*---------------------------------------------------------
style
---------------------------------------------------------*/
.med_style2 > dt span {
	display: inline-block;
}