@charset "utf-8";
body{counter-reset: number 0;}

/* 幹細胞治療 */
.stem-cells{padding-bottom: 180px;}
.stem-cells_intro{
	background-image: url("../images/stemcells_bg01.png"),url("../images/stemcells_bg02.png"),url("../images/stemcells_bg03.png"),url("../images/stemcells_bg04.png");
	background-size: min(26%,430px), min(29%,534px), min(31%,495px), min(28%,400px);
	background-position: top left 6% , bottom left 2% , top 10% right , bottom 5% right 5%;
	background-repeat: no-repeat;
}
.stem-cells_intro::after{
	content: "";
	width: 1px;
	height: 70px;
	background: #c1e5e3;
	display: block;
	margin: 80px auto 0;
}
.stem-cells_li{padding-bottom: 80px;}
.stem-cells_li li{
	background: #fff;
	box-shadow: 0 0 10px rgba(167,193,190,.2);
	padding: 50px 40px;
	max-width: 455px;
	width: 30%;
	position: relative;
}
.stem-cells_li li:not(:last-child){margin-right: 4%;}
.stem-cells_li li:nth-child(2){top: 40px;}
.stem-cells_li li:nth-child(3){top: 80px;}
.stem-cells_li li::before{
	counter-increment: number 1;
	content: "features0" counter(number); 
	font-family: "Cormorant Garamond", serif;
	font-size: 14px;
	color: #8db2ab;
	position: absolute;
	top:10px;
	left: 8px;
	writing-mode: vertical-rl;
}
.stem-cells_li h4{
	font-size: 20px;
	text-align: center;
	margin-bottom: 25px;
}
.stem-cells_li li p{
	font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
	line-height: 1.6;
}

/* 当院でできる治療 */
.treatment_li li{
	width: 47%;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
}
.treatment_li li:not(:nth-last-child(-n+2)){margin-bottom: 40px;}
.treatment_li li img{width: 28%;}
.treatment_li li div{
	width: 65%;
	margin-top: 50px;
}
.treatment_li li h3{
	font-size: 18px;
	margin-bottom: 30px;
}
.treatment_li li p{
	margin-bottom: 30px;
	font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
	line-height: 1.6;
}
.treatment_li li a{
	color: #8db2ab;
	font-family: "Cormorant Garamond", serif;
	padding-right: 22px;
	position: relative;
	display: block;
	width: fit-content;
	margin: 0 0 0 auto;
}
.treatment_li li a::after{
	content: "";
	width: 10px;
	height: 10px;
	background: #c1e5e3;
	border-radius: 50%;
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	transition: .3s;
}
.treatment_li li a:hover::after{transform: translateY(-50%) scale(1.8);}

/* 幹細胞治療の流れ */
.flow_wrap{position: relative;}
.flow_wrap .title{
	position: sticky;
	left: 0;
	top: 20vh;
	height: fit-content;
}
.flow_wrap > ul{
	width: calc(96% - 175px);
	position: relative;
}
.flow_wrap > ul::before{
	content: "";
	width: 1px;
	height: calc(100% - 280px);
	position: absolute;
	left: 25px;
	top:50%;
	transform: translateY(-50%);
	background: linear-gradient(to bottom, #a7c1be 50%, transparent 50%);
	background-size: 1px 4px;
	background-repeat: repeat-y;
	z-index: 0;
}
.flow_wrap li{
	display: flex;
	align-items: center;
	justify-content: space-between;
	counter-increment: mycounter;
}
.flow_wrap li::before{
	content: counter(mycounter, decimal-leading-zero);
	font-family: "Cormorant Garamond", serif;
	font-size: 25px;
	color: #fff;
	width: 50px;
	height: 50px;
	background: linear-gradient(to right,#ebede6,#b2bfc5);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	z-index: 1;
	flex-shrink: 0;
}
.flow_wrap li:not(:last-child){margin-bottom: 50px;}
.flow_wrap li > div{
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	width: calc(95% - 50px);
}
.flow_wrap li > div > img{box-shadow: rgba(167,193,190,.2) 0 0 10px;}
.flow_wrap li > div > div{width: calc(95% - 280px);}
.flow_wrap li h3{
	font-size: 18px;
	margin-bottom: 30px;
}
.flow_wrap li p{
	line-height: 1.6;
	font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
}
.flow_wrap li a{
	text-decoration: underline;
	transition: .3s;
}
.flow_wrap li a:hover{opacity: .5;}

.modal-open{
	cursor: pointer;
	margin: 0!important;
	font-size: 18px!important;
	width: 270px!important;
	height: 70px!important;
}
.modal-container{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-align: center;
	background: rgba(0,0,0,.5);
	overflow: auto;
	opacity: 0;
	visibility: hidden;
	transition: .3s;
    box-sizing: border-box;
	z-index: 10;
}
.modal-container:before{
	content: "";
	display: inline-block;
	vertical-align: middle;
	height: 100%;
}
.modal-container.active{
	opacity: 1;
	visibility: visible;
}
.modal-body{
	position: relative;
	display: inline-block;
	vertical-align: middle;
	max-width: 750px;
	width: 90%;
}
.modal-close{
	position: absolute;
	display: flex;
    align-items: center;
    justify-content: center;
	top: -40px;
	right: -40px;
	width: 40px;
	height: 40px;
	font-size: 40px;
	color: #fff;
	cursor: pointer;
}
.modal-content{
	background: #fff;
	text-align: left;
	padding: 60px 40px;
}
.modal-content > div{
	background: linear-gradient(45deg,rgba(255,255,240,.5),rgba(224,236,255,.5));
	padding: 40px 30px;
}
.modal-content h4{margin-bottom: 20px;}
.modal-content li:not(:last-child){margin-bottom: 10px;}

/* 1025px以下から
------------------------------------------------------------*/
@media only screen and (max-width:1025px){
	
	/* 幹細胞治療 */
	.stem-cells{padding-bottom:110px;}
	.stem-cells_intro::after{
		height: 45px;
		margin-top: 45px;
	}
	.stem-cells_li{padding-bottom: 50px;}
	.stem-cells_li li{padding: 35px 30px;}
	.stem-cells_li li:nth-child(2){top: 25px;}
	.stem-cells_li li:nth-child(3){top: 50px;}
	.stem-cells_li li::before{
		font-size: 12px;
		top:7px;
		left: 5px;
	}
	.stem-cells_li h4{
		font-size: 15px;
		margin-bottom: 15px;
	}
	
	/* 当院でできる治療 */
	.treatment_li li:not(:nth-last-child(-n+2)){margin-bottom: 20px;}
	.treatment_li li div{margin-top: 25px;}
	.treatment_li li h3{
		font-size: 15px;
		margin-bottom: 20px;
	}
	.treatment_li li p{margin-bottom: 20px;}
	.treatment_li li a{padding-right: 18px;}
	.treatment_li li a::after{
		width: 7px;
		height: 7px;
	}
	
	/* 幹細胞治療の流れ */
	.flow_wrap > ul{width: calc(96% - 140px);}
	.flow_wrap > ul::before{
		height: calc(100% - 210px);
		left: 19px;
	}
	.flow_wrap li::before{
		font-size: 20px;
		width: 38px;
		height: 38px;
	}
	.flow_wrap li:not(:last-child){margin-bottom: 40px;}
	.flow_wrap li > div{width: calc(95% - 38px);}
	.flow_wrap li > div > img{width: 200px;}
	.flow_wrap li > div > div{width: calc(95% - 200px);}
	.flow_wrap li h3{
		font-size: 15px;
		margin-bottom: 25px;
	}
	.flow_wrap li h3::after{margin-top: 1.5em!important;}
	
	.modal-open{
		font-size: 14px!important;
		width: 210px!important;
		height: 50px!important;
	}
	.modal-body{max-width: 500px;}
	.modal-close{
		top: -30px;
		right: -30px;
		width: 30px;
		height: 30px;
		font-size: 30px;
	}
	.modal-content{padding: 40px 25px;}
	.modal-content > div{padding: 25px 20px;}
	.modal-content h4{margin-bottom: 15px;}
	.modal-content li:not(:last-child){margin-bottom: 6px;}
}

/* 750px以下から
------------------------------------------------------------*/
@media only screen and (max-width:750px){
	
	/* 幹細胞治療 */
	.stem-cells_intro{
		background-image: url("../images/stemcells_bgSP01.png"),url("../images/stemcells_bgSP02.png"),url("../images/stemcells_bgSP03.png"),url("../images/stemcells_bgSP04.png");
		background-size: min(51%,280px), min(58%,300px), min(60%,320px), min(48%,280px);
		background-position: top left, bottom 35% left 2%, top 25% right, bottom 5% right 5%;
	}
	.stem-cells_li{padding: 0;}
	.stem-cells_li li{
		width: 100%;
		top: 0!important;
		margin-right: 0!important;
	}
	.stem-cells_li li:not(:last-child){margin-bottom: 20px!important;}
	
	/* 当院でできる治療 */
	.treatment_li li{
		max-width: 550px;
		width: 100%;
		margin: 0 auto 30px!important;
	}
	.treatment_li li:last-child{margin: 0 auto!important;}
	
	/* 幹細胞治療の流れ */
	.flow_wrap .title{
		position: inherit;
		top: auto;
		margin-bottom: 40px;
	}
	.flow_wrap > ul{width: 100%;}
}

/* 500px以下から
------------------------------------------------------------*/
@media only screen and (max-width:500px){
	
	/* 当院でできる治療 */
	.treatment_li li img{
		width: 120px;
		margin: 0 auto 25px;
	}
	.treatment_li li div{
		width: 100%;
		margin-top: 0;
	}
	
	/* 幹細胞治療の流れ */
	.flow_wrap > ul::before{
		transform: none;
		top:0;
		height: 90%;
	}
	.flow_wrap li{align-items: flex-start;}
	.flow_wrap li > div > img{margin: 0 auto 25px;}
	.flow_wrap li > div > div{width: 100%;}
	.modal-open{margin: 0 auto!important;}
	.modal-close{right: -7px;}
	.modal-content{padding: 35px 20px;}
	.modal-content .subtitle::after{margin-top: 15px!important;}
}