@charset "utf-8";

#main{
	margin-bottom: 150px;
}

section{
	position: relative;
}

#page_mv{
	background-image: url(../../img/pregnant/pc/bg_h2.jpg);
}

#page_mv h2{
	background: url(../../img/pregnant/pc/icon_h2.png) no-repeat top 65px center;
	background-size: 72px 48px;
}

.catch{
	color: #6C5417;
	font-size: 30px;
	letter-spacing: 3px;
	line-height: 1;
	margin-top: 50px;
	margin-bottom: 33px;
	text-align: center;
}

.txt1{
	font-size: 16px;
	line-height: 2.25;
	letter-spacing: 1.28px;
	text-align: center;
}

.txt1 span{
	background: #f0f3d5;
}

#catch{
	border: 1px solid #cdd872;
	border-radius: 20px;
	padding: 120px 0 81px;
	margin-top: 80px;
	box-sizing: border-box;
	background: url(../../img/pregnant/pc/txt_catch.png) no-repeat top 180px center/248px auto,
				url(../../img/pregnant/pc/bg_catch1.jpg) no-repeat left 6% center/23% auto,
				url(../../img/pregnant/pc/bg_catch2.jpg) no-repeat right 6% center/23% auto;
	position: relative;
}

#catch:before{
	content: "";
	position: absolute;
	top: -45px;
	left: 0;
	right: 0;
	margin: auto;
	background: url(../../img/common/pc/icon_kodawari2.png) no-repeat center/cover;
	width: 100px;
	height: 100px;
}

#catch h3{
	font-size: 26px;
	font-weight: bold;
	letter-spacing: 2.6px;
	color: #6C5417;
	line-height: 1;	
	margin: 0;
}

#catch h3 + h3{
	margin-top: 105px;
}

#catch h3 span{
	display: block;
	font-size: 16px;
	letter-spacing: 1.28px;
	margin-top: 10px;
}

#step{
	background: #f1f8fa;
	padding-top: 90px;
	padding-bottom: 100px;
	margin-top: 98px;
}

h3{
	color: #6C5417;
	font-size: 30px;
	letter-spacing: 3px;
	line-height: 1;
	text-align: center;
}

.stepList{
	margin: 56px auto 0;
	max-width: 1000px;
	width: 95%;
	overflow: visible;
}

.stepList li{
	background: #fff;
	padding: 50px 50px 28px;
	box-shadow: 0 0 15px 1px rgba(1,8,33,0.1);
	position: relative;
}

.stepList li:before{
	content: "";
	position: absolute;
	left: -27px;
}

.stepList li:nth-child(1):before{
	width: 103px;
	height: 88px;
	background: url(../../img/pregnant/pc/txt_step1.png) no-repeat center/cover;
	top: -35px;
}
.stepList li:nth-child(2):before{
	width: 120px;
	height: 89px;
	background: url(../../img/pregnant/pc/txt_step2.png) no-repeat center/cover;
	top: -38px;	
}
.stepList li:nth-child(3):before{
	width: 120px;
	height: 92px;
	background: url(../../img/pregnant/pc/txt_step3.png) no-repeat center/cover;
	top: -40px;
}

.stepList li + li{
	margin-top: 66px;
	position: relative;
}

.stepList li + li:after{
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -85px;
	width: 6px;
	height: 81px;
	margin: auto;
	background: url(../../img/pregnant/pc/icon_step.png) no-repeat center/cover;
}

.stepImg{
	width: 38.444%;
	float: left;
	margin-right: 3.555%;
}

.stepTxt{
	width: 57.888%;
	float: left;
}

.stepList h4{
	color: #fff;
	font-size: 22px;
	font-weight: bold;
	letter-spacing: 2.2px;
	line-height: 40px;
	background: #78b7cc;
	width: 145px;
	text-align: center;
	position: relative;
}
.stepList h4:before{
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 20px 0 20px 8.667px;
	border-color: transparent transparent transparent #ffffff;
	position: absolute;
	left: 0;
	top: 0;
}
.stepList h4:after{
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 20px 8.667px 20px 0;
	border-color: transparent #ffffff transparent transparent;
	position: absolute;
	right: 0;
	top: 0;
}

.stepList p{
	font-size: 16px;
	letter-spacing: 0.8px;
	line-height: 1.81;
	margin-top: 20px;
}

.stepList .notes{
	display: block;
	font-size: 13px;
	letter-spacing: 0.65px;
	margin-top: 10px;
}

.iconKodawari{
	position: absolute;
	width: 100px;
	height: 100px;
	top: -21px;
	right: -20px;
	background: url(../../img/common/pc/icon_kodawari.png) no-repeat center/cover;
}

#schedule{
	margin-top: 97px;
}

.scheduleList{
	background: #f5f7e3;
	width: 100%;
	height: 90px;
	text-align: center;
	margin-top: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.scheduleList li{
	font-size: 18px;
	letter-spacing: 1.8px;
	line-height: 1.33;
	width: 23%;
	font-weight: bold;
}

.scheduleList li + li{
	padding-left: 2.2%;
	position: relative;
}

.scheduleList li + li:before{
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 9.565%;
	height: 100%;
	background: url(../../img/pregnant/pc/icon_schedule.png) no-repeat center/contain;
}

.scheduleContent{
	width: 100%;
	box-sizing: border-box;
	margin-top: 25px;
}

.scheduleContent h4{
	color: #fff;
	font-size: 17px;
	font-weight: bold;
	letter-spacing: 1.7px;
	background: #5e503f;
	padding-left: 19px;
	box-sizing: border-box;
	line-height: 50px;
}

.scheduleContent h4 span {
    font-size: 14px;
    letter-spacing: 0.7px;
    margin-left: 5px;
}

.scheduleContentsList{
	display: table;
	width: 100%;
	border: 1px solid #ccc;
	box-sizing: border-box;
}

.scheduleContentsList li{
	display: table-cell;
	width: 25%;
	box-sizing: border-box;
	padding: 25px 25px 23px;
}

.scheduleContentsList li + li{
	border-left: 1px solid #ccc;
}

.scheduleContentsList h5{
	color: #6c5417;
	font-size: 16px;
	font-weight: bold;
	letter-spacing: 0.8px;
	line-height: 40px;
	text-align: center;
	background: #e5e1dc;
}

.scheduleContentsList h5.twoweek{
	background: #f7f3b6;
}

.scheduleContentsList h5.everyweek{
	background: #d6e9f0;
}

.scheduleContentsList li ul{
	margin-top: 15px;
}

.scheduleContentsList li ul li{
	display: block;
	width: 100%;
	font-size: 14px;
	letter-spacing: 0.7px;
	line-height: 1.53;
	padding: 0 0 0 13px;
	font-feature-settings: "palt";
	position: relative;
}

.scheduleContentsList li ul li:before{
	content: "・";
	font-size: 32px;
	color: #ccc;
	position: absolute;
	left: -5px;
	top: -13px;
	line-height: 1.53;
}

.scheduleContentsList li ul li + li{
	border: none;
	margin-top: 4px;
}

.scheduleContent li:first-child ul li:last-child{
	padding-bottom: 20px;
}



@media screen and (max-width: 768px){
	#main{
		margin-bottom: 80px;
	}
	#page_mv{
		background-position: left 36% center;
	}
	.catch{
		font-size: 20px;
		letter-spacing: 2px;
		margin-top: 40px;
		margin-bottom: 25px;
	}
	.catch span{
		font-size: 16px;
		margin-bottom: 10px;
	}
	.txt1{
		font-size: 14px;
		line-height: 2;
		text-align: left;
	}
	#catch{
		max-width: 365px;
		margin-top: 50px;
		padding: 220px 0 180px;
		background-size: 160px auto;
		background-position: top 255px center,
		     				 center top 50px,     
		     				 bottom 10px center;
	}
	#catch:before{
		top: -35px;
		width: 80px;
		height: 80px;
	}
	#catch h3{
		font-size: 18px;
		letter-spacing: 1px;
	}
	#catch h3 + h3{
		margin-top: 53px;
	}
	#catch h3 span{
		font-size: 13px;
	}
	#step{
		margin-top: 50px;
		padding-top: 50px;
		padding-bottom: 60px;
	}
	h3{
		font-size: 20px;
		letter-spacing: 2px;
		margin-top: 0;
		margin-bottom: 30px;
	}
	.stepList{
		margin: 50px auto 0;
		width: 87.5%;
	}
	.stepList li{
		padding: 40px 20px 35px;
	}
	.stepImg{
		float: none;
		width: 100%;
		margin-right: 0;
	}
	.stepTxt{
		float: none;
		width: 100%;
	}
	.stepList h4{
		margin: auto;
		font-size: 18px;
		line-height: 35px;
		width: 135px;
	}
	.stepList h4:before{
		border-width: 17.5px 0 17.5px 7px;
	}
	.stepList h4:after{
		border-width: 17.5px 7px 17.5px 0;
	}
	.stepList p{
		font-size: 14px;
		line-height: 1.9;
		margin-top: 17px;
	}
	.stepList li:before{
		left: -15px;
	}
	.stepList li:nth-child(1):before{
		width: 82.4px;
		height: 70.4px;
	}
	.stepList li:nth-child(2):before{
		width: 96px;
		height: 71.2px;
		top: -33px;
	}
	.stepList li:nth-child(3):before{
		width: 96px;
		height: 73.6px;
		top: -37px;
	}
	.iconKodawari{
		width: 80px;
		height: 80px;
		top: -23px;
		right: -20px;
	}
	.stepList li + li{
		margin-top: 55px;
	}
	.stepList li + li:after{
		width: 4.8px;
		height: 68px;
		top: -72px;
	}
	#schedule{
		margin-top: 50px;
		overflow: hidden;
	}
	#schedule h3{
		line-height: 1.3;
	}
	.scheduleContent{
		width: 100%;
		overflow: scroll;
		padding-top: 110px;
		-webkit-overflow-scrolling: touch;
		-ms-overflow-style: none;
	}
	.scheduleContent::-webkit-scrollbar{
		display: none;
	}
	.scheduleContent h4{
		position: absolute;
		left: 0;
		right: 0;
		font-size: 16px;
		letter-spacing: 1.6px;
		padding-left: 16px;
		pointer-events: none;
	}
	.scheduleContent li:nth-child(2) h4{
		padding-bottom: 22px;
	}
	.scheduleContent h4 span{
		display: block;
		font-size: 12px;
		letter-spacing: 0.6px;
		margin-left: 0;
		position: absolute;
		bottom: 0;
	}
	.scheduleContentsList{
		width: 900px;
	}
	.scheduleContentsList li{
		padding: 65px 12px 20px;
		position: relative;
		z-index: -1;
	}
	.scheduleContent li:nth-child(2) .scheduleContentsList li{
		padding: 87px 12px 20px;
	}
	.scheduleContent li:nth-child(2) .scheduleContentsList li ul li{
		padding: 0 0 0 13px;
	}
	.scheduleContentsList h5{
		font-size: 14px;
		letter-spacing: 0.7px;
		line-height: 35px;
	}
	.scheduleContentsList li ul{
		margin-top: 10px;
	}
	.scheduleContentsList li:before {
	    content: "初 診";
	    position: absolute;
	    top: -110px;
	    left: -2px;
	    width: 225px;
	    height: 90px;
	    display: flex;
	    background: #f5f7e3;
	    border: 1px solid #f5f7e3;
	    font-size: 16px;
	    font-weight: bold;
	    align-items: center;
	    justify-content: center;
	    text-align: center;
	    box-sizing: border-box;
	}
	.scheduleContentsList li:nth-child(2):before{
		content: "妊娠12～23週目\A（4～6ヶ月）";
		white-space: pre;
		background: url(../../img/pregnant/pc/icon_schedule.png) no-repeat left center/auto 40px #f5f7e3;
		width: 236px;
		left: -12px;
		box-sizing: border-box;
		padding-left: 12px;
	}
	.scheduleContentsList li:nth-child(3):before{
		content: "妊娠24～35週\A（7～9ヶ月）";
		white-space: pre;
		background: url(../../img/pregnant/pc/icon_schedule.png) no-repeat left center/auto 40px #f5f7e3;
		width: 236px;
		left: -12px;
		box-sizing: border-box;
		padding-left: 12px;
	}
	.scheduleContentsList li:nth-child(4):before{
		content: "妊娠36週以降\A（妊娠10ヶ月）";
		white-space: pre;
		background: url(../../img/pregnant/pc/icon_schedule.png) no-repeat left center/auto 40px #f5f7e3;
		width: 236px;
		left: -12px;
		box-sizing: border-box;
		padding-left: 12px;
	}
	.scheduleContent li:nth-child(2) .scheduleContentsList li:before{
		display: none;
	}
	.scheduleContentsList li ul li:before{
	    width: auto;
	    height: auto;
	    background: transparent;
	    border: none;
	    display: inline;
	    font-weight: normal;
	    align-items: unset;
	    justify-content: unset;
	}
	.scheduleContentsList li ul li:nth-child(2):before{
		content: "・";
		white-space: pre;
		background: transparent;
		width: auto;
		left: -5px;
		padding-left: 0;
	}
	.scheduleContentsList li ul li:nth-child(3):before{
		content: "・";
		white-space: pre;
		background: transparent;
		width: auto;
		left: -5px;
		padding-left: 0;
	}
	.scheduleContentsList li ul li:nth-child(4):before{
		content: "・";
		white-space: pre;
		background: transparent;
		width: auto;
		left: -5px;
		padding-left: 0;
	}
	.scheduleContent li:nth-child(2) .scheduleContentsList li ul li:before{
		display: inline;
	}
	.scheduleList{
		width: 900px;
		margin-top: 0;
		margin-left: 6.25%;
		position: fixed;
		top: -90px;
		left: 0;
		z-index: 5;
		pointer-events: none;
		display: block;
		box-sizing: border-box;
	}
	.scheduleList.fixed{
		top: 80px;
	}
	.scheduleList.opanone {
		top: -90px;
		transition: 1s;
	}
	.scheduleList:before,.scheduleList:after{
		content: "";
		width: 6.25%;
		height: 90px;
		background: #fff;
		position: fixed;
		left: 0;
		top: -90px;
		z-index: 6;
	}
	.scheduleList:after{
		left: unset;
		right: 0;
	}
	.scheduleList.fixed:before,.scheduleList.fixed:after{
		top: 80px;
	}
	.scheduleList.opanone:before,.scheduleList.opanone:after{
		top: -90px;
		transition: 1s;
	}
	.scheduleList li{
		width: 225px;
		font-size: 16px;
		letter-spacing: inherit;
		line-height: inherit;
		display: flex;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
		float: left;
		height: 90px;
	}
	.scheduleList li + li{
		width: 236px;
		padding-left: 12px;
		margin-left: -12px;
		box-sizing: border-box;
		border-left: 4px solid transparent;
	}
	.scheduleList li + li:before{
		left: -1px;
		background-size: auto 40px;
	}
}