@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;/*追加*/}

/* 費用
------------------------------------------------------------*/
#price input[type="radio"] {display: none;}
.tab_btn_box{display: flex;}
.tab_btn_box label{
	display: block;
	width: calc(100% / 2);
	background-color: #f7f3f2;
	cursor: pointer;
	padding: 25px 0;
	border-radius: 10px 10px 0 0;
}
#clinic_plan:checked ~ .tab_btn_box #clinic_plan_btn,
#grace_plan:checked ~ .tab_btn_box #grace_plan_btn{background-color: #b484bc;}
#clinic_plan:checked ~ .tab_btn_box #clinic_plan_btn p,
#grace_plan:checked ~ .tab_btn_box #grace_plan_btn p{color: #fff;}

.tab_con_box > div{
	display: none;
	padding-top: 35px;
}
#clinic_plan:checked ~ .tab_con_box #clinic_plan_con,
#grace_plan:checked ~ .tab_con_box #grace_plan_con{display: block!important;}
.tab_con_box > div > h2{
	width: fit-content;
	background-color: #897f79;
	padding: 12px 40px 15px;
	border-radius: 8px;
}
.tab_con_li > li:not(:last-child){margin-bottom: 70px;}
.price_dl > div{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	background-color: #f7f3f2;
	padding: 30px 40px;
	border-radius: 10px;
}
.price_dl > div:not(:last-child){margin-bottom: 10px;}
.price_dl dt{width: 55%;}
.price_dl dd{
	width: 45%;
	text-align: right;
	font-family: 'ZenKakuGothicNew-Medium';
	font-weight: 500;
}

/* 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;
	}

	/* 費用
	--------------------------------------*/
	.tab_con_box > div > h2{
		padding: 10px 20px 12px;
		border-radius: 5px;
	}
	.tab_btn_box label{
		padding: 15px 0;
		border-radius: 8px 8px 0 0;
	}
	.tab_con_box > div{padding-top: 35px;}
	.tab_con_li > li:not(:last-child){margin-bottom: 50px;}
	.price_dl > div{
		padding: 25px 20px;
		border-radius: 8px;
	}
}

/* 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;}
	
	/* 費用
	--------------------------------------*/
	.price_dl dt,.price_dl dd{width: 100%;}
	.price_dl dt{
		color: #b484bc;
		margin-bottom: 5px;
	}
	.price_dl dd{text-align: inherit;}
	.tab_con_li .flex_between.c2 > *:not(:last-child){margin-bottom: 40px;}
}

/* 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;
	}
	

}