@charset "utf-8";

/* 将来を見据えた妊活
------------------------------------------------------------*/
.cycle_bg{background: url("../images/oc/cycle_bg.webp") no-repeat center 25% / 100%;}
.fertility_li > li:not(:nth-child(2)){width: 44.5%;}
.fertility_li > li:nth-child(2){
	width: 10%;
	text-align: center;
	align-self: center;
}
.fertility_li figure{text-align: center;}
.fertility_now{
	border-top: 1px #897f79 solid;
	border-bottom: 1px #897f79 solid;
}
.fertility_future{
	border-top: 1px #b484bc solid;
	border-bottom: 1px #b484bc solid;
}
.fertility_now > ul,.fertility_future > ul{padding: 40px 0 80px;}
.fertility_now h3,.fertility_future h3{
	width: 140px;
	padding: 5px 0 8px;
	border-radius: 5px;
	margin-top: -22px;
	position: relative;
	z-index: 1;
}
.fertility_now h3{background-color: #897f79;}
.fertility_future h3{background: linear-gradient(90deg,rgba(197, 157, 206, 1) 0%, rgba(249, 175, 186, 1) 100%);}
.fertility_con > li:last-child::before{
	content: '';
	width: 100%;
	height: 21px;
	display: block;
	margin: 50px auto 40px;
}
.fertility_now .fertility_con > li:last-child::before{background: url("../images/oc/fertility_now_arrow.webp") no-repeat center bottom / 100% 100%;}
.fertility_future .fertility_con > li:last-child::before{background: url("../images/oc/fertility_future_arrow.webp") no-repeat center bottom / 100% 100%;}
.fertility_con > li > div{padding: 0 40px;}
.fertility_li .img_box_l{align-items: center;}
.fertility_li .img_box_l > img{margin-right: 30px;}
.fertility_li .img_box_l h4{margin-bottom: 10px;}
.fertility_li .img_box_l p{
	font-size: 14px;
	letter-spacing: 0.05rem;
}

/* 通院スケジュール（例）
------------------------------------------------------------*/
.schedule_li,.schedule_li > li{position: relative;}
.schedule_li{padding: 55px 0;}
.schedule_li::before,.schedule_li > li::before{
	content: '';
	position: absolute;
	top: 0;
}
.schedule_li::before{
	width: 1px;
	height: 100%;
	border-left: 1px #b484bc dashed;
	left: 5px;
}
.schedule_li > li::before{
	width: 10px;
	aspect-ratio: 1 / 1;
	background-color: #b484bc;
	border-radius: 50%;
	left: 0;
}
.schedule_li > li{padding-left: 85px;}
.schedule_li > li:not(:last-child){margin-bottom: 90px;}
.schedule_title{margin-bottom: 15px;}
.schedule_title p{
	width: 140px;
	padding: 5px 0;
	border-radius: 3px;
}
.schedule_title h3{
	width: calc(100% - 140px);
	padding-left: 25px;
	line-height: 1.5;
}
.schedule_li .img_box_l{align-items: center;}
.schedule_li .img_box_l > img{margin-right: 60px; border-radius: 8px;/*追加*/}



/* 1025px以下から
------------------------------------------------------------*/
@media only screen and (max-width:1025px){
	
	/* 将来を見据えた妊活
	--------------------------------------*/
	.cycle_bg{background-position: center 5%;}
	.fertility_li > li:nth-child(2) img{width: 50px;}
	.fertility_li figure img{width: 140px;}
	.fertility_now > ul,.fertility_future > ul{padding: 25px 0 40px;}
	.fertility_now h3,.fertility_future h3{
		width: 100px;
		margin-top: -15px;
		border-radius: 3px;
	}
	.fertility_con > li:last-child::before{
		height: 15px;
		margin: 35px auto 30px;
	}
	.fertility_con > li > div{padding: 0 20px;}
	.fertility_li .img_box_l > img{
		width: 140px;
		margin-right: 20px;
	}
	.fertility_li .img_box_l h4{margin-bottom: 5px;}
	.fertility_li .img_box_l p{font-size: 12px;}
	
	/* 通院スケジュール（例）
	--------------------------------------*/
	.schedule_li{padding: 30px 0;}
	.schedule_li::before{left: 3px;}
	.schedule_li > li::before{width: 7px;}
	.schedule_li > li{padding-left: 40px;}
	.schedule_li > li:not(:last-child){margin-bottom: 50px;}
	.schedule_title p{
		width: 90px;
		font-size: 12px;
	}
	.schedule_title h3{
		width: calc(100% - 90px);
		padding-left: 13px;
	}
	.schedule_li .img_box_l > img{
		width: 240px;
		margin-right: 30px;
	}


}

/* 750px以下から
------------------------------------------------------------*/
@media only screen and (max-width:750px){
	
	/* 将来を見据えた妊活
	--------------------------------------*/
	.cycle_bg{background: transparent;}
	.cycle_bg .inner_box01{width: 100%;}
	.cycle_bg .title,.fertility_now,.fertility_future{
		width: 90%;
		margin: 0 auto;
	}
	.fertility_li > li:first-child,.fertility_li > li:last-child{background: url("../images/oc/cycle_bg.webp") no-repeat center top / 780px;}
	.fertility_li > li{width: 100%!important;}
	.fertility_li > li:nth-child(2){margin: 30px auto;}
	.fertility_li > li:nth-child(2) img{width: 35px;}
	.fertility_con > li:last-child::before{
		height: 20px;
		margin-bottom: 20px;
	}
	.fertility_li .img_box_l,.schedule_li .img_box_l{flex-wrap: nowrap;}
	
}

/* 500px以下から
------------------------------------------------------------*/
@media only screen and (max-width:500px){
	
	/* 将来を見据えた妊活
	--------------------------------------*/
	.fertility_li > li:first-child,.fertility_li > li:last-child{
		background-size: 580px;
		background-position: 60% top;
	}
	.fertility_con > li:last-child::before{
		height: 15px;
		margin-bottom: 25px;
	}
	.fertility_li .img_box_l,.schedule_li .img_box_l{flex-wrap: wrap;}
	.fertility_li .img_box_l{margin-bottom: 15px!important;}
	.fertility_li .img_box_l > img{margin: 0 auto 20px;}
	
	/* 通院スケジュール（例）
	--------------------------------------*/
	.schedule_li > li{padding-left: 30px;}
	.schedule_li .img_box_l > img{
		width: 200px;
		margin: 0 0 20px;
	}
	

}