@charset "UTF-8";

body.toppage {
	.midashi1 {
		text-align: center;
		margin-bottom: 40px;
		p {
			font-family: "interstate-mono", monospace;
			font-size: 4.375rem;
			font-style: normal;
			font-weight: 300;
			line-height: .75;
			letter-spacing: -2px;
		}
		h2 {
			font-size: 1.5rem;
			font-weight: 700;
		}
	}
	#mainv {
		width: 100%;
		height: 630px;
		background: url(../images/toppage/mainv.png) no-repeat center bottom/cover;
		padding-top: 310px;
		position: relative;
		z-index: 2;
		.text {
			margin-top: 50px;
		}
	}
	#staff {
		background: url(../images/toppage/staff_s_01.png) no-repeat center top, linear-gradient(to bottom,  #fcfef9 0%,#def3da 100%);
		margin: 0 0 -30px;
		padding: 90px 0 60px;
		position: relative;
		top: -30px;
		.midashi1 {
			& p {
				background: linear-gradient(to bottom, rgba(225,244,229,1) 30%, rgba(225,244,229,.2) 100%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
		}
		.inner {
			margin-bottom: 40px;
			display: flex;
			justify-content: space-between;
			& figure {
				width: 325px;
			}
			.text {
				width: 400px;
			}
		}
		.btns {
			position: relative;
			display: flex;
			justify-content: center;
			& div {
				margin: 0 10px;
			}
		}
	}
	#animal {
		background: linear-gradient(to bottom, var(--color-pink) 0%,#fff 100%);
		padding: 60px 0 60px;
		.midashi1 {
			& p {
				background: linear-gradient(to bottom, rgba(247,208,208,1) 30%, rgba(247,208,208,.2) 100%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
		}
		.inner {
			margin-bottom: 40px;
			display: flex;
			justify-content: space-between;
			& figure {
				width: 325px;
			}
			.text {
				width: 400px;
			}
		}
	}
	#facilities {
		background: linear-gradient(to bottom,  #f9fceb 0%,#e2f4e4 50%,#ffffff 100%);
		.inner2 {
			background: #fff;
			padding: 60px 90px 60px;
			.midashi1 {
				& p {
					background: linear-gradient(to bottom, rgba(225,244,229,1) 30%, rgba(225,244,229,.2) 100%);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
				}
			}
			.lead {
				text-align: center;
				margin: 40px 0 30px;
			}
			.facilityList {
				& ul {
					display: flex;
					justify-content: space-between;
					& li {
						width: 325px;
						& figure {
							margin-bottom: 15px;
						}
						h3 {
							font-weight: bold;
							text-align: center;
							margin-bottom: 20px;
						}
					}
				}
			}
		}
	}
}



@media screen and (max-width:756px) {
	body.toppage{
		.midashi1 {
			margin-bottom: 10vw;
			p {
				font-size: 4rem;
			}
			h2 {
				font-size: 1.375rem;
			}
		}
		#mainv {
			width: 100vw;
			height: auto;
			background: url(../images/toppage/mainv_sp.webp) no-repeat center top/100% auto;
			padding-top: 37vw;
			z-index: 2;
			h1 {
				width: 60vw;
				margin: 0 auto;
			}
			.text {
				font-size: 1.0725rem;
				font-weight: 700;
				text-align: center;
				margin: 36vw 5vw 0;
				padding-bottom: 15vw;
			}
		}
		#staff {
			background: url(../images/toppage/staff_s_01_sp.png) no-repeat right 100vw/25vw auto, linear-gradient(to bottom,  #fcfef9 0%,#def3da 100%);
			margin: 0;
			padding: 0 0 10vw;
			position: relative;
			top: 0;
			.inner {
				margin-bottom: 10vw;
				display: block;
				& figure {
					width: 100%;
					margin-bottom: 5vw;
				}
				.text {
					width: 100%;
				}
			}
			.btns {
				text-align: center;
				display:block;
				& div {
					margin: 0 0 5vw;
				}
			}
		}
		#animal {
			padding: 10vw 0 10vw;
			.inner {
				margin-bottom: 10vw;
				display: block;
				& figure {
					width: 100%;
					margin-bottom: 5vw;
				}
				.text {
					width: 100%;
				}
			}
		}
		#facilities {
			.inner2 {
				padding: 10vw 5vw;
				.midashi1 {
					p {
						font-size: 3.25rem;
					}
				}
				.lead {
					margin: 8vw 0 5vw;
				}
				.facilityList {
					& ul {
						display: block;
						& li {
							width: 100%;
							margin-bottom: 6vw;
							& figure {
								margin-bottom: 3vw;
							}
							h3 {
								margin-bottom: 3vw;
							}
						}
					}
				}
			}
		}
	}

}