@charset "UTF-8";

.contentpage .m_img_area{
	background-image: url(../images/clinic/m_img@2x.jpg);}

.f_bnr{
	border-top:1px solid #d1d3d0;
}

/* sec1
---------------------------------------------------------*/
#sec1 .bg{
	position: relative;
	background:#e6e8e8;
}
#sec1 .bg::before{
	position: absolute;
	display: block;
	content: "";
	background: #fff;
	background-size: 100% 100%;
	width: 100%;
	height: min(290px,22vw);
	top:0;
	left: 0;
}

/*clinic_slide*/
.clinic_slide .dotto,
.clinic_slide2 .dotto,
.clinic_slide3 .dotto{
    width:min(100px,10vw);
    display: flex;
    justify-content: space-between;
	margin-left: auto;
	margin-right: 10px;
	margin-top: min(20px,2vw);
}
.clinic_slide .dotto .swiper-pagination-bullet,
.clinic_slide2 .dotto .swiper-pagination-bullet,
.clinic_slide3 .dotto .swiper-pagination-bullet{
	cursor: pointer;
	display: block;
	width: 8px!important;
    height: 8px!important;
	border-radius: 50%;
	background:rgba(0,0,0,0.3);
	background-size: 100% auto;
	transition: all 0.4s;
}
.clinic_slide .dotto .swiper-pagination-bullet-active,
.clinic_slide2 .dotto .swiper-pagination-bullet-active,
.clinic_slide3 .dotto .swiper-pagination-bullet-active{
	background: #b7d219;
}

#sec1 .clinic_slide,
#family .clinic_slide3{
	position: relative;
}
#sec1 .ro70,
#family .box1 .ro70{
	position: absolute;
	bottom: -0.15em;
	left: .4em;
	z-index: 5;
}
#sec1 .txt,
#family .box1 .txt{
	max-width: 1100px;
	margin: 0 auto;
}

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

/* Mobile (Portrait) 
------------------------------------------*/ 
@media only screen and (max-width: 767px) { 
#sec1 .bg::before{
	height: 20vw;
}

/*clinic_slide*/
.clinic_slide .dotto,
.clinic_slide2 .dotto,
.clinic_slide3 .dotto{
    width: 15vw;
	margin-right: 0;
	margin-top: 2.5vw;
}
}





/* sec2
---------------------------------------------------------*/
#sec2 .bg{
	background:#e6e8e8;
}
#sec2 .inbox{
	position: relative;
}
#sec2 .titlebox{
	position: absolute;
	top:0;
	right: 0;
	text-align: center;
	width: 48.5%;
}
#sec2 .titlebox_inbox{
	max-width: 570px;
	margin: 0 auto;
	text-align: right;
}

#sec2 .flex_box{
	align-items: flex-end;	
}
#sec2 .flex_box .flex_l{
	width: 48.5%;
}
#sec2 .flex_box .flex_l .txt{
	max-width: 570px;
	margin: 0 auto;
}
#sec2 .flex_box .flex_r{
	width: 48.5%;
	display: flex;
    justify-content: space-between;
}
#sec2 .flex_box .flex_r div{
	width: 47%;
}

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

/* Mobile (Portrait) 
------------------------------------------*/ 
@media only screen and (max-width: 767px) { 
#sec2 .titlebox{
	position: static;
	width: 100%;
	margin-bottom: 6%;
}
#sec2 .titlebox .ro70.com_btm_30{
	margin-bottom: 0.5%;
}
#sec2 .titlebox_inbox{
	max-width: 100%;
}
#sec2 .flex_box{
	display: block;
}
#sec2 .flex_box .flex_l{
	width: 100%;
}
#sec2 .flex_box .flex_l .txt{
	max-width: 100%;
}
#sec2 .flex_box .flex_r{
	width: 100%;
	margin-top: 6%;
}
#sec2 .flex_box .flex_r div{
	width: 49%;
}
}





/* sec3
---------------------------------------------------------*/
#sec3 .box1 .ro70,
#sec4 .ro70{
	position: relative;
	z-index: 2;
	margin-bottom: -0.7em;
	margin-left: .4em;
	mix-blend-mode: difference;
}
#sec3 .box1 .txt{
	max-width: 1100px;
	margin: 0 auto;
}
.cl_index1{
	margin-bottom: min(1em,0.7vw);
}
#sec3 .box2 li{
	width: 48.5%;
}
#sec3 .box2 li .txt{
	max-width: 530px;
	margin: 0 auto;
}

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

/* Mobile (Portrait) 
------------------------------------------*/ 
@media only screen and (max-width: 767px) { 
.cl_index1{
	margin-bottom: .5em;
}
#sec3 .box2 .flex_box{
	display: block;
}
#sec3 .box2 li{
	width: 100%;
	margin-bottom: 10%;
}
#sec3 .box2 li:last-child{
	margin-bottom: 0;
}
#sec3 .box2 li .img{
	width: 70%;
	margin-left: auto;
	margin-right: auto;
}
#sec3 .box2 li .txt{
	max-width: 100%;
}
}






/* sec4
---------------------------------------------------------*/
#sec4 .img li{
	width: 49.6%;
}
#sec4 .txt{
	max-width: 1100px;
	margin: 0 auto;
}

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

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





/* family
---------------------------------------------------------*/
#family .bg{
	background: #f69658;
	border-radius: 50px;
	padding-top: min(150px,7vw);
	padding-bottom: min(150px,7vw);
}
#family .box1 .txt_l{
	width: 71%;
}
#family .box1 .txt_r{
	width: 25%;
}
#family .box1 .kids_btn{
	position: relative;
	max-width: 273px;
	aspect-ratio: 273 / 151;
	filter: drop-shadow(15px 15px 5px rgba(0,0,0,0.2));
	z-index: 10;
	transition: 0.4s;
}
#family .box1 .kids_btn i{
	position: absolute;
	bottom: 3%;
	right: 10%;
	font-size:min(80%,1vw);
	background: #5fc423;
	border:none;
	color: #fff;
}

#family .box2 li{
	width: 48.5%;
}
#family .box2 li .img{
	position: relative;
}
#family .box2 li .img .abs{
	position: absolute;
	width: 30%;
	max-width: 133px;
	aspect-ratio: 133 / 137;
}
#family .box2 li:nth-child(1) .img .abs{
	bottom: 5%;
	right: 5%;
}
#family .box2 li:nth-child(2) .img .abs{
	top: 5%;
	left: 5%;
}
#family .box2 li .txt{
	max-width: 530px;
	margin: 0 auto;
}

/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) { 
#family .bg{
	border-radius: 30px;
}
}

/* Mobile (Portrait) 
------------------------------------------*/ 
@media only screen and (max-width: 767px) { 
#family .bg{
	border-radius: 20px;
	padding-top: 8vw;
	padding-bottom: 8vw;
}
#family .box1 .txt{
	display: block;
}
#family .box1 .txt_l{
	width: 100%;
}
#family .box1 .txt_r{
	width:60%;
	margin: 4% auto 0;
}
#family .box1 .kids_btn{
	filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.2));
	z-index: 10;
}
#family .box1 .kids_btn i{
	bottom: 3%;
	right: 8%;
	font-size:2.3vw;
}

#family .box2 .flex_box{
	display: block;
}
#family .box2 li{
	width: 100%;
	margin-bottom: 10%;
}
#family .box2 li:last-child{
	margin-bottom:0;
}
#family .box2 li .img{
	width:80%;
	margin: 0 auto 5%;
}
#family .box2 li .img .abs{
	width: 35%;
}
#family .box2 li:nth-child(1) .img .abs{
	bottom: 4%;
	right: 4%;
}
#family .box2 li:nth-child(2) .img .abs{
	top: 4%;
	left: 4%;
}
#family .box2 li .txt{
	max-width: 100%;
}
}






/* sec5
---------------------------------------------------------*/
#sec5 li{
	width: 32%;
	max-width: 407px;
}
#sec5 li .img{
	position: relative;
}
#sec5 li .img .abs{
	position: absolute;
	width: 45%;
	max-width: 133px;
	aspect-ratio: 133 / 133;
}
#sec5 li:nth-child(1) .img .abs{
	top: 50%;
	transform: translateY(-50%);
	right: 5%;
}
#sec5 li:nth-child(3) .img .abs{
	top: 5%;
	left: 5%;
}

/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) { 
#sec5 li p{
	letter-spacing: normal;
}
#sec5 li p.com_btm_30{
	margin-bottom: 1.2rem;
}
}

/* Mobile (Portrait) 
------------------------------------------*/ 
@media only screen and (max-width: 767px) { 
#sec5 .flex_box{
	display: block;
}
#sec5 li{
	width: 100%;
	max-width:100%;
	margin-bottom: 10%;
}
#sec5 li:last-child{
	margin-bottom: 0;
}
#sec5 li .img{
	width: 70%;
	margin: 0 auto 4%;
}
#sec5 li:nth-child(1) .img .abs{
	right: 4%;
}
#sec5 li:nth-child(3) .img .abs{
	top: 4%;
	left: 4%;
}
}