@charset "utf-8";

/* ページ内リンク
------------------------------------------------------------*/
.page_link > li{
	width: 23.5%;
	margin: 0 0.5%;
}
.page_link > li:not(:nth-last-child(-n+3)){margin-bottom: 15px;}
.page_link > li a{
	display: block;
	background: #f7f3f2 url("../images/btn_icon_btm_p.webp") no-repeat 93% center / 9px;
	padding: 20px 40px 20px 25px;
	border-radius: 80px;
}
@media (any-hover: hover){.page_link > li a:hover{background-color: #eae3dc;}}

/* 妊活プレチェックをご希望の方
------------------------------------------------------------*/
.bridal_box{padding: 70px 0;}
.bridal_box h2{
	border-top: 1px #fff dashed;
	border-bottom: 1px #fff dashed;
	padding: 25px 0;
}

/* 初診予約が可能な日時
------------------------------------------------------------*/
.hours_dl{
	max-width: 800px;
	width: 100%;
	margin: 0 auto;
}
.hours_dl dl > div{
	border-bottom: 1px #897f79 dashed;
	padding: 35px 0;
}
.hours_dl dl > div:first-child{border-top: 1px #897f79 dashed;}
.hours_dl dl > div,.hours_dl li,.hours_dl li > div > div{align-items: center;}
.hours_dl dl > div:last-child ul{align-items: flex-start;}
.hours_dl ul,.hours_dl li,.hours_dl li > div > div{
	display: flex;
	flex-wrap: wrap;
}
.hours_dl li:not(:last-child){margin-right: 40px;}
.hours_dl dt{
	width: 125px;
	background-color: #eae3dc;
	border-radius: 80px;
	padding: 5px 0 8px;
}
.hours_dl dd{
	width: calc(100% - 125px);
	padding-left: 40px;
}
.hours_dl dd span.bgp_dark{
	width: 54px;
	padding: 5px 0 8px;
	border-radius: 3px;
}
.hours_dl dd p.fs30{
	width: calc(100% - 54px);
	padding-left: 15px;
}

/* 初診予約の方法
------------------------------------------------------------*/
.sticky_title h3.tel_icon::before,.sticky_title h3.net_icon::before{
	width: 40px;
	aspect-ratio: 1 / 1;
}
.sticky_title h3.tel_icon::before{background: url("../images/beginner/tel_icon.webp") no-repeat center / contain;}
.sticky_title h3.net_icon::before{background: url("../images/beginner/net_icon.webp") no-repeat center / contain;}

/* 初診時に行うこと
------------------------------------------------------------*/
.case img{
	display: block;
	width: 100%;
}
.sticky_title h3.insurance_icon::before{
	width: 48px;
	aspect-ratio: 8 / 9;
}
.sticky_title h3.pay_icon::before{
	width: 58px;
	aspect-ratio: 29 / 35;
}
.sticky_title h3.insurance_icon::before{background: url("../images/beginner/insurance_icon.webp") no-repeat center / contain;}
.sticky_title h3.pay_icon::before{background: url("../images/beginner/self-pay_icon.webp") no-repeat center / contain;}
.more_con{margin-top: 60px;}

/* 必要な持ち物
------------------------------------------------------------*/
.bring_flex > p,.bring_flex > p span{width: 240px;}
.bring_flex > div{
	width: calc(100% - 240px);
	padding-left: 70px;
}

/* 問診票
------------------------------------------------------------*/
#m_form .title_flex .title{width: 660px;}
#m_form .title_flex .side_con{width: calc(100% - 660px);}

/* 様式集
------------------------------------------------------------*/
#forms .bgw_c1{margin-bottom: 40px;}

/* 1025px以下から
------------------------------------------------------------*/
@media only screen and (max-width:1025px){
	
	/* ページ内リンク
	--------------------------------------*/
	.page_link > li{width: 31.5%;}
	.page_link > li:not(:nth-last-child(-n+2)){margin-bottom: 10px;}
	.page_link > li a{
		background-position: 95% center;
		padding: 15px 30px 15px 25px;
	}
	
	/* 妊活プレチェックをご希望の方
	--------------------------------------*/
	.bridal_box{padding: 45px 0;}
	.bridal_box h2{padding: 15px 0;}

	/* 初診予約が可能な日時
	--------------------------------------*/
	.hours_dl{max-width: 600px;}
	.hours_dl dl > div{padding: 25px 0;}
	.hours_dl li:not(:last-child){margin-right: 30px;}
	.hours_dl dt{width: 100px;}
	.hours_dl dd{
		width: calc(100% - 100px);
		padding-left: 30px;
	}
	.hours_dl dd span.bgp_dark{padding: 3px 0 5px;}
	.hours_dl dd p.fs30{padding-left: 10px;}
	
	/* 初診予約の方法
	--------------------------------------*/
	.sticky_title h3.tel_icon::before,.sticky_title h3.net_icon::before{width: 27px;}
	
	/* 初診時に行うこと
	--------------------------------------*/
	.more_con{margin-top: 35px;}
	.sticky_title h3.insurance_icon::before{width: 35px;}
	.sticky_title h3.pay_icon::before{width: 37px;}
	
	/* 必要な持ち物
	--------------------------------------*/
	.bring_flex > p,.bring_flex > p span{width: 180px;}
	.bring_flex > div{
		width: calc(100% - 180px);
		padding-left: 40px;
	}
	.bring_flex .li_mb10 > li:not(:last-child){margin-bottom: 8px!important;}

	/* 問診票
	--------------------------------------*/
	#m_form .title_flex .title{width: 350px;}
	#m_form .title_flex .side_con{width: calc(100% - 350px);}
	
	/* 初診予約から治療の流れ
	--------------------------------------*/
	#flow img{width: 500px;}
	
	/* 一般不妊治療（タイミング法・人工授精）をご希望の方へ
	--------------------------------------*/
	#care p.center_l{text-align: inherit;}
	#care p.center_l br{display: none;}
}

/* 750px以下から
------------------------------------------------------------*/
@media only screen and (max-width:750px){
	
	/* ページ内リンク
	--------------------------------------*/
	.page_link.flex_start{justify-content: space-between;}
	.page_link > li{
		width: 49%;
		margin: 0;
	}
	.page_link > li:not(:last-child){margin-bottom: 10px;}
	
	/* 初診時に行うこと
	--------------------------------------*/
	.case li:not(:last-child){margin-bottom: 40px;}
	.more_btn{margin: 0 auto;}
	
	/* 必要な持ち物
	--------------------------------------*/
	.bring_flex > p,.bring_flex > div{width: 100%;}
	.bring_flex > p span{width: fit-content;}
	.bring_flex > p{margin-bottom: 8px;}
	.bring_flex > div{padding-left: 0;}
	
	/* 問診票
	--------------------------------------*/
	#m_form .title_flex .title,#m_form .title_flex .side_con{width: 100%;}
	
	/* 不妊治療助成の案内 / パンフレット
	--------------------------------------*/
	#subsidy .title,#brochure .title{margin-bottom: 20px;}
	
	/* 様式集
	--------------------------------------*/
	#forms .bgw_c1{margin-bottom: 30px;}
}

/* 500px以下から
------------------------------------------------------------*/
@media only screen and (max-width:500px){
	
	/* ページ内リンク
	--------------------------------------*/
	.page_link > li{width: 100%;}
	
	/* 妊活プレチェックをご希望の方
	--------------------------------------*/
	.bridal_box h2.lh1-8{line-height: 1.6;}
	
	/* 初診予約が可能な日時
	--------------------------------------*/
	.hours_dl dt{margin-bottom: 5px;}
	.hours_dl dd{width: 100%;}
	.hours_dl dd{padding-left: 0;}
	.hours_dl li{margin-top: 10px;}
	.hours_dl li:not(:last-child){margin-right: 20px;}
	.hours_dl dd span.bgp_dark{width: 40px;}
	.hours_dl dd p.fs30{width: calc(100% - 40px);}
	.hours_dl dd .mb10{margin-bottom: 5px!important;}
}