@charset "UTF-8";

body.animal {
	#mainv {
		width: 100%;
		height: 300px;
		background: url(../images/animal/mainv.jpg) no-repeat center center/cover;
		padding-top: 120px;
	}
	#animal {
		padding: 0 0 60px;
		.subContents2 {
			width: 660px;
			.mainv {
				margin-bottom: 60px;
				& figure {
					margin-bottom: 10px;
					& img {
						width: 100%;
						height: auto;
						aspect-ratio: 660 / 300;
						border-radius: 10px;
						object-fit: cover;
					}
				}
				& h2 {
					font-size: 1.25rem;
					font-weight: 700;
				}
			}
			.honbun {
				margin-bottom: 60px;
				& h3 {
					font-size: 1.125rem;
					font-weight: bold;
					margin-top: 2em;
				}
				& p {
					margin-top: 1.5em;
				}
				& figure {
					margin-top: 1.5em;
				}
			}
			.photos {
				& ul {
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;
					position: relative;
					&::before,
					&::after {
						content: " ";
						width: 200px;
						display: block;
						order: 1;
					}
					& li {
						width: 200px;
						text-align: center;
						margin-bottom: 30px;
						& img {
							width: 100%;
							height: auto;
							aspect-ratio: 1 / 1;
							border-radius: 10px;
							object-fit: cover;
						}
						figcaption {
							color: #999;
							font-size: .75rem;
							margin-top: 5px;
						}
					}
				}
			}
			.bottom {
				text-align: center;
				border-top: dotted 2px #b3b3b3;
				margin: 4em 0 0;
				padding: 30px 0 0 0;
				.btn-back {
					width: 20em;
				}
			}
		}
	}
}


@media screen and (max-width:756px) {
	body.animal {
		#mainv {
			width: 100vw;
			height: 32vw;
			background: url(../images/animal/mainv_sp.jpg) no-repeat center top/100% auto;
			padding-top: 10vw;
			& h1 {
				& img {
					width: auto;
					height: 6.4vw;
				}
			}
		}
		#animal {
			padding: 0 0 6vw;
			.subContents2 {
				width: 100%;
				.mainv {
					width: 100vw;
					margin: 0 -5vw;
					margin-bottom: 6vw;
					& figure {
						& img {
							width: 100%;
							aspect-ratio: 660 / 400;
							border-radius: 0;
						}
					}
					& h2 {
						margin: 0 5vw;
					}
					& p {
						margin: 0 5vw;
					}
				}
				.honbun {
					margin-bottom: 10vw;
				}
				.photos {
					& ul {
						&::before,
						&::after {
							width: 42vw;
						}
						& li {
							width: 42vw;
							margin-bottom: 6vw;
						}
					}
				}
				.bottom {
					.btn-back {
						width: 20em;
					}
				}
			}
		}
	}
}