/*
html body
*/
html > body {
	background-image: url(../image/pc_background.webp);
	background-attachment: fixed;
	background-size: cover;
	background-position: 50% 0;
	display: grid;
	grid-template-columns: 2fr 700px 1fr;
	overflow: hidden;
	@media (width < 1300px) {
		grid-template-columns: 1fr 700px;
	}
	@media (width < 1010px) {
		grid-template-columns: 1fr 700px 1fr;
	}
	@media (width < 700px) {
		grid-template-columns: 1fr;
	}
}
/*
pcArea
*/
section.pcArea {
	@media (width < 1010px) {
		display: none;
	}
	> div {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 100vh;
		padding-inline: 20%;
		> img {
			max-width: 100%;
		}
	}
}
/*
main
*/
main {
	background-color: #fff;
	grid-column: 2/3;
	@media (width < 700px) {
		grid-column: 1/2;
	}
}

section.top {
	> div {
		display: grid;
		grid-template-rows: 1.57fr 1fr 1fr;
		> figure {
			grid-area: 1/1/4/2;
			> img {
				max-width: 100%;
			}
		}
		> a {
			margin-inline: 10%;
			&:nth-of-type(1) {
				margin-bottom: 5%;
				grid-area: 2/1/3/2;
				align-self: end;
			}
			&:nth-of-type(2) {
				margin-bottom: 15%;
				grid-area: 3/1/4/2;
				align-self: end;
			}
			&:hover {
				opacity: 0.7;
			}
			> figure {
				> img {
					max-width: 100%;
				}
			}
		}
	}
}

section.image01 {
	> div {
		> figure {	
			> img {
				max-width: 100%;
			}
		}
	}
}

section.question {
	background-color: #f5efe7;
	> div {
		padding: 70px 5% 70px 5%;
		> h2 {
			padding-bottom: 20px;
			text-align: center;
			color: #333;
			font-size: min(2.4rem, 10vw);
			line-height: 1.5;
			font-weight: 700;
		}
		> div {
			> article {
				background-color: #fff;
				border-radius: 10px;
				margin-top: 20px;
				padding:  30px;
				@media (width < 550px) {
					padding:  20px;
				}
				> input[type="checkbox"] {
					display: none;
					&:checked + label > figure.cross {}
					&:checked + label + div {
						animation-name: moreToggleOpen;
						animation-duration: 0.3s;
						animation-fill-mode: forwards;
						animation-timing-function: ease-in;
					}
					& + label + div {
						animation-name: moreToggleClose;
						animation-duration: 0.3s;
						animation-fill-mode: forwards;
						animation-timing-function: ease-out;
					}
				}
				> label {
					list-style: none;
					display: flex;
					justify-content: space-between;
					align-items: start;
					cursor: pointer;
					> figure.text {
						> img {
							width: 35px;
							@media (width < 550px) {
								width: 25px;
							}
						}
					}
					> h3 {
						padding-left: 20px;
						flex-grow: 1;
						color: #333;
						font-size: min(1.5rem, 5vw);
						line-height: 1.2;
						font-weight: 700;
						letter-spacing: 2px;
						@media (width < 550px) {
							padding-left: 10px;
						}
					}
					> figure.triangle {
						padding-left: 5px;
						padding-top: 7px;
						> img {
							display: block;
							width: min(30px,5vw);
						}
					}
				}
				> div {
					overflow: hidden;
					display: flex;
					justify-content: space-between;
					align-items: start;
					> h4 {
						margin-top: 20px;
						border-top: 2px solid #b7a367;
						padding-top: 15px;
						color: #333;
						font-size: min(1.5rem, 5vw);
						line-height: 1.6;
						font-weight: 500;
						text-align: justify;
					}
				}
			}
		}
	}
}
@keyframes moreToggleOpen {
	0% {
		max-height: 0px;
	}
	80% {
		max-height: 100px;
	}
	90% {
		max-height: 200px;
	}
	100% {
		max-height: 9999px;
	}
}
@keyframes moreToggleClose {
	0% {
		max-height: 9999px;
	}
	10% {
		max-height: 200px;
	}
	20% {
		max-height: 100px;
	}
	100% {
		max-height: 0px;
	}
}

section.image02 {
	> div {
		padding: 80px 5%;
		> figure {	
			> img {
				max-width: 100%;
			}
		}
	}
}

section.block {
	> div {
		padding: 0 5% 0 5%;
		display: grid;
		grid-template-rows: 1.52fr 1fr 1fr;
		> figure {
			grid-area: 1/1/4/2;
			> img {
				max-width: 100%;
			}
		}
		> a {
			margin-inline: 4.5%;
			&:nth-of-type(1) {
				margin-top: 11%;
				grid-area: 2/1/3/2;
				align-self: start;
			}
			&:nth-of-type(2) {
				margin-bottom: 6%;
				grid-area: 3/1/4/2;
				align-self: end;
			}
			&:hover {
				opacity: 0.7;
			}
			> figure {
				> img {
					max-width: 100%;
				}
			}
		}
	}
}

section.text {
	> div {
		padding: 80px 10% 0 10%;
		@media (width < 450px) {
			padding: 80px 5% 0 5%;
		}
		> figure {	
			> img {
				max-width: 100%;
			}
		}
	}
}

section.google_map {
	> div {
		padding: 40px 5% 0 5%;
		> iframe {
			aspect-ratio: 1/1;
			width: 100%;
		}
	}
}

section.instagram {
	> div {
		padding-top: 40px;
		text-align: center;
		> a {
			display: inline-block;
			&:hover {
				opacity: 0.7;
			}
			> figure {
				width: 100px;
				@media (width < 500px) {
					width: 60px;
				}
				> img {
					max-width: 100%;
				}
			}
		}
	}
}


footer {
	padding: 40px 5% 30px 5%;
	> div.info {
		padding-top: 30px;
		border-top: 2px solid #333; 
		> p {
			color: #333;
			font-size: min(1.5rem, 5vw);
			line-height: 1.4;
			font-weight: 500;
			line-height: 1.6;
			&:nth-of-type(4) {
				padding-left: 4.5rem;
				text-indent: -4.5rem;
				@media (width < 380px) {
					padding-left: 2.5rem;
					text-indent: -2.5rem;
				}
			}
		}
	}
	> small {
		display: block;
		margin-top: 40px;
		text-align: center;
		font-weight: 400;
		font-size: min(1.2rem, 4vw);
		color: #aaa;
	}
}