@charset "UTF-8";

body.therapy {
	#mainv {
		width: 100%;
		height: 300px;
		background: url(../images/therapy/mainv.jpg) no-repeat center center/cover;
		padding-top: 120px;
	}
	#lead {
		background: url(../images/therapy/lead_bg_01.png) no-repeat center 100px;
		padding: 60px 0;
		.subContents2 {
			position: relative;
			.leadtext {
				text-align: center;
			}
			.fig1 {
				width: 400px;
				position: absolute;
				top: 190px;
				left: 0;
				& img {
					width: 100%;
					border-radius: 10px;
				}
			}
			.fig2 {
				width: 320px;
				position: absolute;
				top: 380px;
				right: 0;
				& img {
					width: 100%;
					border-radius: 10px;
				}
			}
			.honbun {
				margin: 400px 50px 0;
				& h3 {
					font-size: 1.25rem;
					font-weight: bold;
					text-align: center;
					margin: 50px 0 10px;
				}
				.photos {
					margin: 30px 70px;
					display: flex;
					justify-content: space-between;
					& li {
						width: 240px;
						& img {
							width: 100%;
							border-radius: 10px;
						}
					}
				}
			}
		}
	}
	#animals {
		background: var(--color-pink);
		padding: 60px 0 60px;
		.leadtext {
			text-align: center;
			margin-bottom: 60px;
		}
		.animals {
			margin-bottom: 60px;
			display: flex;
			justify-content: space-around;
			& li {
				width: 220px;
				& figure {
					margin-bottom: 5px;
					& img {
						width: 100%;
						height: auto;
						aspect-ratio: 1 / 1;
						object-fit: cover;
						border-radius: 10px;
					}
				}
			}
		}
		.btn-wh {
			width: 340px;
			&::after {
				content: none;
			}
		}
	}
}


@media screen and (max-width:756px) {
	body.therapy {
		#mainv {
			width: 100vw;
			height: 32vw;
			background: url(../images/therapy/mainv_sp.jpg) no-repeat center top/100% auto;
			padding-top: 10vw;
			& h1 {
				& img {
					width: auto;
					height: 6.4vw;
				}
			}
		}
		#lead {
			background: url(../images/therapy/lead_bg_01_sp.png) no-repeat center 40vw/100% auto;
			padding: 6vw 0;
			.subContents2 {
				.leadtext {
				}
				.fig1 {
					width: 55vw;
					top: 50vw;
					& img {
						border-radius: 0 10px 10px 0;
					}
				}
				.fig2 {
					width: 40vw;
					top: 80vw;
					& img {
						border-radius: 10px 0 0 10px;
					}
				}
				.honbun {
					margin: 65vw 0 0;
					& h3 {
						margin: 8vw 0 3vw;
					}
				}
			}
		}
		#animals {
			padding: 10vw 0 10vw;
			.leadtext {
				margin-bottom: 10vw;
			}
			.animals {
				margin-bottom: 10vw;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-around;
				& li {
					width: 40vw;
					margin-bottom: 6vw;
				}
			}
			.btn-wh {
				width: 100%;
			}
		}
	}
}