@charset "utf-8";

section{
	text-align: center;
	position: relative;
}

#mv{
	height: 680px;
	background: url(../../img/home/pc/img_mv.jpg) no-repeat center;
	background-size: cover;
}

#about h2,#facility h2,#obstetrics h2,#gynecology h2{
	color: #483826;
	font-size: 40px;
	letter-spacing: 4px;
	line-height: 1;
}

#obstetrics h3,#gynecology h3{
	color: #6c5417;
	font-size: 22px;
	letter-spacing: 3.3px;
	line-height: 1;
}

#about p,#facility p,#obstetrics p,#gynecology p{
	font-size: 16px;
	line-height: 2;
	letter-spacing: 1.28px;
}

#about{
	background: url(../../img/home/pc/bg_about.png) no-repeat right 10% bottom;
	background-size: 45.434% auto;
}
@media screen and (min-width: 1380px) {
	#about{
		background-size: 627px 520px;
	}
}

#about h2{
	margin: auto;
	margin-top: -62px;
	margin-bottom: -54px;
	padding-top: 138px;
	width: 450px;
	height: 270px;
	box-sizing: border-box;
	background: url(../../img/home/pc/icon_about.png) no-repeat center;
	background-size: cover;
}

#about h2 .oldCap{
	position: relative;
}

#about h2 .oldCap span{
	position: absolute;
    left: 0;
    bottom: -1.2em;
    width: 100%;
    font-size: 12px;
    letter-spacing: .05em;
    line-height: 1;
}

#about .inner {
    text-align: initial;
}

#about p + p{
	margin-top: 2.5em;
}

#about p + p + p{
	margin-top: 1em;
}
#about p.aboutTtl {
	color: #b1c55d;
}

#about .pageBtn{
	width: 280px;
	max-width: 280px;
	margin-top: 40px;
	margin-bottom: 80px;
}

#facility{
	background: url(../../img/home/pc/bg_facility.jpg) no-repeat center;
	background-size: cover;
}

#facility h2{
	padding-top: 145px;
	background: url(../../img/home/pc/icon_facility.png) no-repeat top 74px center;
	background-size: 56px 51px;
}

#facility p{
	margin-top: 30px;
	margin-bottom: 38px;
}

.facilityImg{
	width: 100%;
	height: 260px;
	background: url(../../img/home/pc/img_slide.jpg) repeat-x 0;
	background-size: auto 100%;
	animation: slide 50s linear infinite;
}

@keyframes slide{
	from{
		background-position: 0 0;
	}
	to{
		background-position: -1800px 0;
	}
}

#facility .pageBtn{
	width: 280px;
	max-width: 280px;
	margin-top: 50px;
	margin-bottom: 80px;
}

#obstetrics h2{
	padding-top: 174px;
	background: url(../../img/home/pc/icon_obstetrics.png) no-repeat top 95px center;
	background-size: 72px 55px;
	position: relative;
	z-index: 1;
}

#obstetrics h3{
	margin-top: 37px;
	margin-bottom: 10px;
	position: relative;
	z-index: 1;
}

#obstetrics p{
	position: relative;
	z-index: 1;
}

.obstetricsMenu{
	margin-top: -180px;
	height: 0;
	padding-top: 130.22%;
	background: url(../../img/home/pc/bg_ob.png) no-repeat top center;
	background-size: cover;
	position: relative;
}

.obBtn1{
	width: 22.058%;
	height: auto;
	display: block;
	position: absolute;
	left: 58.345%;
	top: 12.14%;
	transition: .5s ease-in-out;
}

.obBtn2{
	width: 22.058%;
	height: auto;
	display: block;
	position: absolute;
	left: 21.36%;
	top: 41.445%;
	transition: .5s ease-in-out;
}

.obBtn3{
	width: 18.382%;
	height: auto;
	display: block;
	position: absolute;
	left: 50%;
	top: 77.329%;
	transition: .5s ease-in-out;
}

.obBtn1:hover,.obBtn2:hover{
	transform: scale(1.08);
}

.obBtn3:hover{
	transform: scale(1.1);
}

#gynecology h2{
	padding-top: 203px;
	background: url(../../img/home/pc/icon_gynecology.png) no-repeat top 127px center;
	background-size: 67px 46px;
}

#gynecology h3{
	margin-top: 35px;
	margin-bottom: 10px;
}

#gynecology p{
	margin-bottom: 75px;
}

.gynecology{
	display: inline-block;
	width: 280px;
	max-width: 280px;
	margin-right: 7.246%;
}

.gynecology:last-child{
	margin-right: 0;
}

.gynecology h4{
	font-size: 30px;
	letter-spacing: 3px;
	margin-top: 28px;
	margin-bottom: 15px;
	line-height: 1;
}

#gynecology .gynecology p{
	letter-spacing: 0.8px;
	line-height: 1.75;
	margin-bottom: 26px;
	text-align: left;
	padding: 0 6.428%;
}

.gynecologyBtn{
	display: inline-block;
	width: 72.428%;
	max-width: 200px;
	color: #fff;
	font-size: 18px;
	letter-spacing: 0.9px;
	line-height: 50px;
	background: url(../../img/common/pc/icon_btn.png) no-repeat right 15px center #78bacf;
	background-size: 8px 11px;
	margin-bottom: 64px;
	transition: .4s ease-in-out;
}

.gynecologyBtn:hover{
	color: #fff;
	background-position: right 12px center;
	opacity: 0.8;
}

#gynecology:before{
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 375px;
	background-color: #e4f1f5;
	z-index: -1;
}

/* .postsWrap layout */
.postsWrap {
	display: grid;
	grid-template-columns: 465px 485px;
	grid-template-rows: auto 280px;
	justify-content: space-between;
	align-content: space-between;
	margin-top: 130px;
	margin-bottom: 132px;
}
#gallery {
	grid-row: span 2;
}

.news{
	height: 280px;
	box-sizing: border-box;
	border: 1px solid #666;
	text-align: right;
}

.news h3{
	display: block;
	text-align: center;
	margin: 52px 0 28px;
	padding-left: 50px;
	color: #483826;
	font-size: 31px;
	letter-spacing: 3.1px;
	line-height: 26px;
	height: 32px;
	background: url(../../img/home/pc/icon_news.png) no-repeat left 154px center;
	background-size: 32px 28px;
}

.newsList li{
	text-align: left;
	font-size: 16px;
	line-height: 1;
	letter-spacing: 0.8px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding: 0 70px 15px 80px;
}

.newsList li span{
	margin-right: 25px;
	font-size: 15px;
	line-height: 1;
	letter-spacing: 0.75px;
	color: #808080;
}

.newsList a{
	color: #4d4d4d;	
	transition: .3s;
}

.newsList a:hover{
	opacity: 0.8;
}

.newsAll{
	display: inline-block;
	color: #B1C55D;
	font-size: 16px;
	letter-spacing: 0.8px;
	line-height: 1;
	position: relative;
	padding-right: 21px;
	margin-top: 14px;
	margin-right: 80px;
	transition: .3s;
}

.newsAll:after{
	content: "";
	width: 14px;
	height: 9px;
	background: url(../../img/home/pc/icon_news_all.png) no-repeat center;
	background-size: cover;
	position: absolute;
	right: 0;
	top: 3px;
}

.newsAll:hover{
	color: #B1C55D;
	opacity: 0.8;
}

.insta a{
	display: block;
	height: 280px;
	box-sizing: border-box;
	border: 1px solid #666;
	background: url(../../img/home/pc/bnr_insta.jpg) no-repeat center;
	background-size: cover;
}

.gallery {
	background-color: rgba(239,243,223,.5);
	background-image: url(../../img/home/pc/mv_gallery.png);
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: 0 0;
	padding: 42% 30px 30px;
	color: #4D4D4D;
}

.gallery h3{
	display: block;
	text-align: center;
	padding-left: 40px;
	font-size: 24px;
	letter-spacing: 2.1px;
	height: 32px;
	background: url(../../img/home/pc/icon_gallery.png) no-repeat 55px 10px;
	background-size: 23px 18px;
}

.gallery p{
	margin: 22px 0 30px;
    line-height: 2;
	font-size: 16px;
    text-align: justify;
}

.galleryListBox{
	border-radius: 10px;
	background: #fff;
	padding: 30px;
	padding-bottom: 20px;
}

.galleryList li{
    padding-bottom: 16px;
	text-align: left;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.galleryList a{
	padding-left: 15px;
	background-image: url(../../img/gallery/pc/icon-arrow.svg);
	background-size: 7.1188px;
	background-repeat: no-repeat;
	background-position: 0px 3px; 
	color: #4d4d4d;	
	transition: .3s;
}

.galleryList a:hover{
	opacity: 0.8;
}

.galleryAll{
	position: relative;
	text-align: right;
}

.galleryAll a{
	display: inline-block;
	line-height: 1;
	font-size: 16px;
	letter-spacing: 0.8px;
	color: #B1C55D;
	position: relative;
	transition: .3s;
}

.galleryAll a:after{
	content: "";
    display: inline-block;
	width: 14px;
	height: 9px;
	background: url(../../img/home/pc/icon_news_all.png) no-repeat center;
	background-size: cover;
	position: relative;
	right: 0;
	top: -2px;
}

.galleryAll:hover{
	color: #B1C55D;
	opacity: 0.8;
}

@media screen and (max-width: 1400px) {
	.obstetricsMenu{
		margin-top: -90px;
	}
}

/* sp */
@media screen and (max-width: 768px) {
	#mv{
		height: 300px;
		margin-top: 80px;
		background: url(../../img/home/sp/img_mv.jpg) no-repeat center;
		background-size: cover;
	}
	#about h2, #facility h2, #obstetrics h2, #gynecology h2{
		font-size: 25px;
		letter-spacing: 2.5px;
	}
	#about p, #facility p, #obstetrics p, #gynecology p{
		font-size: 14px;
		letter-spacing: 1.12px;
		line-height: 1.92;
	}
	#about{
		background: url(../../img/home/sp/bg_about.png) no-repeat bottom center;
		background-size: contain;
	}
	#about h2{
		margin-top: -36px;
		margin-bottom: 0;
		padding-top: 90px;
		background: url(../../img/home/sp/icon_about.png) no-repeat top center;
		background-size: 260px 156px;
		width: 100%;
		height: auto;
	}
	#about h2 .oldCap span{
		bottom: -1.5em;
		font-size: 10px;
	}
	#about .inner {
	    text-align: inherit;
	}
	#about p{
		/*margin-top: 22px;*/
		margin-top: 30px;
	}
	#about .pageBtn{
		width: 78.125%;
		max-width: 250px;
		margin-top: 32px;
		margin-bottom: 58%;
	}
	#facility{
		background: url(../../img/home/sp/bg_facility.jpg) no-repeat center;
		background-size: cover;
	}
	#facility h2{
		padding-top: 97px;
		background: url(../../img/home/sp/icon_facility.png) no-repeat top 40px center;
		background-size: 51px 41px;
	}
	#facility p{
		margin-top: 20px;
		margin-bottom: 32px;
	}
	.facilityImg{
		height: 140px;
	}
	#facility .pageBtn{
		width: 78.125%;
		max-width: 250px;
		margin-top: 40px;
		margin-bottom: 46px;
	}
	#obstetrics h2{
		padding-top: 101px;
		background: url(../../img/home/sp/icon_obstetrics.png) no-repeat top 44px center;
		background-size: 67px 43px;
	}
	#obstetrics h3, #gynecology h3{
		font-size: 16px;
		letter-spacing: 1.6px;
	}
	#obstetrics h3{
		margin-top: 23px;
	}
	.obstetricsMenu{
		margin-top: -30px;
		background: url(../../img/home/sp/bg_ob.png) no-repeat top center;
		background-size: cover;
		padding-top: 240.625%;
	}
	.obBtn1{
		width: 37.5%;
	    left: 56.25%;
	    top: 20.779%;
	}
	.obBtn2{
		width: 37.5%;
	    left: 5.937%;
	    top: 36.493%;
	}
	.obBtn3{
		width: 37.5%;
	    left: 54.062%;
	    top: 84.415%;
	}
	#gynecology:before{
		display: none;
	}
	#gynecology h2{
		padding-top: 92px;
		background: url(../../img/home/sp/icon_gynecology.png) no-repeat top 43px center;
		background-size: 63px 40px;
	}
	#gynecology h3{
		margin-top: 23px;
	}
	#gynecology p{
		margin-bottom: 38px;
	}
	.gynecology{
		background-color: #e4f1f5;
		width: 100%;
		max-width: none;
		margin-right: 0;
		padding-top: 40px;
	}
	.gynecology:last-child{
		padding-top: 45px;
		padding-bottom: 43px;
	}
	.gynecology img{
		width: 87.5%;
		height: auto;
	}
	.gynecology h4{
		font-size: 25px;
		letter-spacing: 2.5px;
		margin-top: 25px;
	}
	#gynecology .gynecology p{
		letter-spacing: 0.7px;
		line-height: 1.92;
		margin-bottom: 20px;
		padding: 0 6.25%;
		text-align: center;
	}
	.gynecologyBtn{
		width: 78.125%;
		max-width: 250px;
		margin-bottom: 0;
	}

	.postsWrap {
	    display: block;
	    max-width: 540px;
	}
	#gallery {
	    margin: 50px auto;
	}
	.news{
		width: 100%;
		height: 340px;
		text-align: center;
	}
	.news h3 {
	    margin: 40px 0 30px;
	    padding-left: 25px;
	    font-size: 25px;
	    letter-spacing: 2.5px;
	    line-height: 18px;
	    height: 24px;
	    background: url(../../img/home/pc/icon_news.png) no-repeat left calc(50% - 55px) center;
	    background-size: 28px 24px;
	}
	.newsList li{
		padding: 0 14% 28px 14%;
		font-size: 14px;
		letter-spacing: 0.7px;
	}
	.newsList li span{
		display: block;
		margin-right: 0;
		font-size: 12px;
		letter-spacing: 0.6px;
		margin-bottom: 10px;
	}
	.newsAll{
		margin-top: 0;
		margin-right: 0;
		font-size: 14px;
		letter-spacing: 0.7px;
	}
	.newsAll:after{
		top: 2px;
	}
	.gallery h3{
		padding-left: 0;
		padding-top: 23px;
		font-size: 22px;
		height: auto;
		background: url(../../img/home/pc/icon_gallery.png) no-repeat center top;
		background-size: 8.4%;
	}
	.gallery p {
	    margin: 20px 0;
	    font-size: 14px;
	}
	.galleryAll a {
	    font-size: 12px;
	}
	.galleryAll a:after {
	    width: 12px;
	    height: 6px;
	}
	.insta a {
		padding-top: 60%;
	    height: 0;
	}
}

@media screen and (max-width: 414px) {
	#gynecology .gynecology p{
		text-align: left;
	}
}