@charset "utf-8";

/* 医師のご紹介
------------------------------------------------------------*/
.name{
	width: fit-content;
	display: flex;
}
.name > p{
	background-color: #ffc83e;
	text-align: center;
}
.name > div{padding-left: 20px;}
.name > div p{
	margin-bottom: 8px;
	font-size: clamp(26px, 2.1vw, 35px);
}

/* doctor01 */
.doctor01 .img_box_r{background: url("../images/clinic/shape_bg.webp") no-repeat 58% 80% / 355px;}
.doctor01 .img_box_r,.doctor02 .img_box_l{align-items: flex-start;}
.doctor01 .img_box_r > .img_box_img{width: 550px;}
.doctor01 .img_box_r > .img_box_img .mask,.doctor02 .img_box_l > .img_box_img .mask{margin-bottom: 30px;}
.doctor01 .img_box_r > .img_con{
	width: calc(100% - 550px);
	padding-right: 80px;
}
.doctor01 .img_box_r > .img_con > div{
	border-bottom: 1px #474240 dashed;
	padding-bottom: 55px;
	margin-bottom: 55px;
}
.doctor01 .name{
	align-items: flex-start;
	margin: 0 0 0 auto;
}
.doctor01 .name > p{
	width: 135px;
	border-radius: 80px;
	padding: 5px 0 8px;
	margin-top: 7px;
}
.doctor01 .name > div{
	width: calc(100% - 135px);
	text-align: right;
}

/* doctor02 */
.doctor02.inner_box02{
	width: 100%;
	padding: 150px 0;
}
.doctor02 .img_box_l > .img_box_img{width: 500px;}
.doctor02 .img_box_l > .img_con{
	width: calc(100% - 500px);
	padding-left: 80px;
}

.doctor02 .name{align-items: center;}
.doctor02 .name > p{
	width: 210px;
	padding: 10px 0 13px;
	border-radius: 8px;
}
.doctor02 .name > div{width: calc(100% - 210px);}

/* career_box */
.flex_between.career_box > div{width: 47%;}
.career_box > div,.career_con > div{
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
}
.career_box > div h3{width: 125px;}
.career_con{width: calc(100% - 125px);}
.career_con > div,.career_con > li{
	border-bottom: 1px #474240 dashed;
	padding: 25px 0;
}
.career_con > div:first-child,.career_con > li:first-child{border-top: 1px #474240 dashed;}
.career_con > div dt{width: 100px;}
.career_con > div dd{width: calc(100% - 100px);}
.career_con *{line-height: 1.5;}


/* 施設のご紹介
------------------------------------------------------------*/
.splide{
	margin: 0 auto;
	position: relative;
}
.splide__slide img{
	width: 100%;
	height: auto;
}
.splide_btn{
	background-color: transparent;
	transition: .2s;
	border: none;
}
.splide_btn,.splide_btn::before{
	width: 80px;
	aspect-ratio: 1 / 1;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}
.splide_btn::before{content: '';}
.splide_btn.prev::before{background: url("../images/clinic/splide_prev.webp") no-repeat center / contain;}
.splide_btn.next::before{background: url("../images/clinic/splide_next.webp") no-repeat center / contain;}
.splide_btn.prev,.splide_btn.prev::before{left: 24%;}
.splide_btn.next,.splide_btn.next::before{right: 24%;}

.facility_box .splide__slide p{
	max-width: 300px;
	width: 90%;
	background-color: #cc4640;
	padding: 20px 0;
	border-radius: 80px;
	margin: -33px auto 0;
	position: relative;
	z-index: 1;
}

/* 1025px以下から
------------------------------------------------------------*/
@media only screen and (max-width:1025px){
	
	/* 医師のご紹介
	--------------------------------------*/
	.name > div{padding-left: 10px;}
	.name > div p{
		font-size: 24px;
		margin-bottom: 0;
	}
	.name > div span{font-size: 12px;}
	
	/* doctor01*/
	.doctor01 .img_box_r{
		background-size: 250px;
		background-position: 58% 65%;
	}
	.doctor01 .img_box_r > .img_box_img{width: 350px;}
	.doctor01 .img_box_r > .img_box_img .mask,.doctor02 .img_box_l > .img_box_img .mask{margin-bottom: 20px;}
	.doctor01 .img_box_r > .img_con{
		width: calc(100% - 350px);
		padding-right: 40px;
	}
	.doctor01 .img_box_r > .img_con > div{
		padding-bottom: 40px;
		margin-bottom: 35px;
	}
	.doctor01 .name > p{
		width: 100px;
		margin-top: 4px;
	}
	.doctor01 .name > div{width: calc(100% - 100px);}
	
	/* doctor02 */
	.doctor02.inner_box02{padding: 70px 0;}
	.doctor02 .img_box_l > .img_box_img{width: 300px;}
	.doctor02 .img_box_l > .img_con{
		width: calc(100% - 300px);
		padding-left: 40px;
	}
	.doctor02 .name > p{
		width: 145px;
		padding: 6px 0 8px;
		border-radius: 5px;
	}
	.doctor02 .name > div{width: calc(100% - 145px);}

	/* career_box */
	.flex_between.career_box > div{width: 100%;}
	.flex_between.career_box > div:not(:last-child){margin-bottom: 50px;}
	.career_box > div h3{width: 80px;}
	.career_con{width: calc(100% - 80px);}
	.career_con > div,.career_con > li{padding: 20px 0;}
	.career_con > div dt{width: 70px;}
	.career_con > div dd{width: calc(100% - 70px);}
	
	/* 施設のご紹介
	--------------------------------------*/
	.splide_btn,.splide_btn::before{width: 50px;}
	.splide_btn.prev,.splide_btn.prev::before{left: 7%;}
	.splide_btn.next,.splide_btn.next::before{right: 7%;}
	.facility_box .splide__slide p{
		max-width: 220px;
		padding: 15px 0 18px;
		margin-top: -25px;
	}
}

/* 750px以下から
------------------------------------------------------------*/
@media only screen and (max-width:750px){
	
	/* 医師のご紹介
	--------------------------------------*/
	.doctor01 .img_box_r{background-position: right 25%;}
	.doctor01 .img_box_r > .img_box_img,.doctor02 .img_box_l > .img_box_img{margin-bottom: 50px;}
	.doctor01 .img_box_r > .img_con > div{margin-bottom: 30px;}
	.doctor02 .name{margin: 0 0 0 auto;}
	.doctor02 .name > div{text-align: right;}
	.career_con > div dt,.career_con > div dd{width: 100%;}
	.career_con > div dt{
		color: #cc4640;
		font-weight: bold;
		margin-bottom: 5px;
	}
	
	/* 施設のご紹介
	--------------------------------------*/
	.facility_box .splide__track{
		width: 85%;
		margin: 0 auto;
	}
	.splide_btn,.splide_btn::before{width: 40px;}
	.splide_btn.prev,.splide_btn.prev::before{left: 3%;}
	.splide_btn.next,.splide_btn.next::before{right: 3%;}
}