section.panel {
	background-color: #fff;
	overflow: hidden;
	> div {
		max-width: 1920px;
		margin-inline: auto;
		display: grid;
		> figure {
			grid-area: 1/1/2/2;
			padding-bottom: 50px;
			@media (width < 800px) {
				height: 600px;
				padding-bottom: 15px;
			}
			> img {
				max-width: 100%;
				@media (width < 800px) {
					width: 100%;
					height: 100%;
					object-fit: cover;
					object-position: 30% 50%;
				}
			}
		}
		> div.text {
			grid-area: 1/1/2/2;
			justify-self: end;
			align-self: center;
			padding-right: 5vw;
			pointer-events: none;
			> picture {
				> img {
					@media (width < 1100px) {
						max-width: 150px;
					}
					@media (width < 800px) {
						max-width: 140px;
						margin-top: 150px;
					}
				}
			}
		}
		> div.scroll {
			grid-area: 1/1/2/2;
			justify-self: end;
			align-self: end;
			padding-right: 30vw;
			animation-name: panelarrow;
			animation-duration: 4s;
			pointer-events: none;
			@media (width < 800px) {
				padding-right: unset;
				justify-self: start;
				padding-left: 10px;
			}
		}
	}
}
@keyframes panelarrow {
	0% {
		transform: translateY(0);
	}
	16.6% {
		transform: translateY(-20px);
	}
	33.3% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-20px);
	}
	66.6% {
		transform: translateY(0);
	}
	83.3% {
		transform: translateY(-20px);
	}
	100% {
		transform: translateY(0);
	}
}
section.about {
	padding: 60px 5% 60px 5%;
	> div {
		max-width: 1200px;
		margin-inline: auto;
		> h2 {
			border-left: 2px solid #eec13a;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			row-gap: 5px;
			> div {
				padding-left: 15px;
				font-size: 1.1rem;
				line-height: 1.2;
				color: #111;
			}
			> p {
				padding-left: 15px;
				font-size: 1rem;
				line-height: 1.2;
				color: #aaa;
			}
		}
		> div {
			margin-top: 30px;
			display: grid;
			grid-template-columns: 1fr 1fr;
			column-gap: 60px;
			row-gap: 40px;
			@media (width < 950px) {
				grid-template-columns: 1fr;
			}
			> div {
				> h3 {
					font-size: 1.6rem;
					line-height: 1.8;
					color: #111;
					font-family: var(--font-serif);
					font-weight: 600;
					@media (width < 450px) {
						font-size: min(1.1rem,6vw);
					}
					> b {
						color: var(--color-accent);
					}
				}
				> p {
					margin-top: 50px;
					font-size: 1rem;
					line-height: 2.0;
					color: #111;
					text-align: justify;
					@media (width < 950px) {
						margin-top: 30px;
					}
				}
				> div {
					margin-top: 50px;
					@media (width < 950px) {
						margin-top: 30px;
					}
					> a {
						&:hover {
							opacity: 0.7;
						}
						> img {}
					}
				}
			}
			> figure {
				> img {
					max-width: 100%;
				}
			}
		}
	}
}
section.choose {
	padding: 60px 5% 60px 5%;
	> div {
		max-width: 1200px;
		margin-inline: auto;
		> h2 {
			border-left: 2px solid #eec13a;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			row-gap: 5px;
			> div {
				padding-left: 15px;
				font-size: 1.1rem;
				line-height: 1.2;
				color: #111;
			}
			> p {
				padding-left: 15px;
				font-size: 1rem;
				line-height: 1.2;
				color: #aaa;
			}
		}
		> h3 {
			margin-top: 30px;
			font-size: 1.6rem;
			line-height: 1.8;
			color: #111;
			font-family: var(--font-serif);
			font-weight: 600;
			@media (width < 450px) {
				font-size: min(1.1rem,6vw);
			}
			> b {
				color: var(--color-accent);
			}
		}
		> div {
			margin-top: 50px;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			column-gap: 40px;
			row-gap: 40px;
			> figure {
				box-shadow: 0 0 10px rgba(0,0,0,0.3);
				> img {
					max-width: 100%;
				}
			}
		}
	}
}
section.staff01 {
	padding: 60px 5% 0px 5%;
	> div {
		max-width: 1200px;
		margin-inline: auto;
		> h2 {
			border-left: 2px solid #eec13a;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			row-gap: 5px;
			> div {
				padding-left: 15px;
				font-size: 1.1rem;
				line-height: 1.2;
				color: #111;
			}
			> p {
				padding-left: 15px;
				font-size: 1rem;
				line-height: 1.2;
				color: #aaa;
			}
		}
		> h3 {
			margin-top: 30px;
			font-size: 1.6rem;
			line-height: 1.8;
			color: #111;
			font-family: var(--font-serif);
			font-weight: 600;
			@media (width < 450px) {
				font-size: min(1.1rem,6vw);
			}
			> b {
				color: var(--color-accent);
			}
		}
	}
}
section.staff02 {
	padding: 30px 5% 60px 5%;
	> div {
		max-width: 1200px;
		margin-inline: auto;
		> div.face {
			display: flex;
			column-gap: 20px;
			overflow-x: auto;
			overflow-y: hidden;
			scrollbar-width: thin;
			scrollbar-color: #eec13a #ddd;
			padding-bottom: 30px;
			scroll-behavior: smooth;
			> a {
				> img {
					border-radius: 10px;
					width: 285px;
				}
				> p {
					margin-top: 10px;
					margin-left: 20px;
					font-size: 0.8rem;
					line-height: 1.3;
					color: #111;
					font-family: var(--font-serif);
					font-weight: 600;
				}
				> figcaption {
					margin-top: 6px;
					margin-left: 20px;
					font-size: 1.2rem;
					line-height: 1.3;
					color: #111;
					font-family: var(--font-serif);
					font-weight: 600;
				}
			}
		}
		> div.nav {
			margin-top: 10px;
			display: flex;
			justify-content: space-between;
			visibility: hidden;
			@media (width < 1335px) {
				visibility: visible;
			}
			> label {
				cursor: pointer;
				&:hover {
					opacity: 0.7;
				}
				> img {}
			}
		}
	}
}
section.consultation {
	padding: 60px 5% 100px 5%;
	@media (width < 1100px) {
		padding: 60px 0 100px 0;
	}
	> div {
		max-width: 1200px;
		margin-inline: auto;
		display: grid;
		grid-template-columns: 2fr 1fr 5fr;
		@media (width < 1100px) {
			grid-template-columns: 1fr;
			grid-template-rows: 1fr 1fr auto;
		}
		> div.middle {
			grid-row: 1/2;
			grid-column: 2/3;
			background-color: #e1dec2;
			@media (width < 1100px) {
				grid-row: 2/3;
				grid-column: 1/2;
			}
		}
		> figure {
			grid-row: 1/2;
			grid-column: 1/3;
			transform: translateY(-30px);
			@media (width < 1100px) {
				grid-row: 1/3;
				grid-column: 1/2;
				max-width: 90%;
				margin-inline: auto;
				transform: translateY(0px);
			}
			> img {
				max-width: 100%;
			}
		}
		> div.text {
			grid-row: 1/2;
			grid-column: 3/4;
			background-color: #e1dec2;
			padding-inline: 30px 50px;
			padding-block: 30px;
			@media (width < 1100px) {
				grid-row: 3/4;
				grid-column: 1/2;
				padding-block: 5px 30px;
			}
			> div.title {
				display: flex;
				column-gap: 10px;
				align-items: center;
				@media (width < 1100px) {
					flex-direction: column;
				}
				> figure {
					@media (width < 1100px) {
						margin-right: auto;
					}
					> img {
						max-width: 100%;
					}
				}
				> div {
					margin-top: 5px;
					> h4 {
						font-size: 1.3rem;
						line-height: 1.3;
						color: #111;
						font-family: var(--font-serif);
						font-weight: 600;
						@media (width < 1100px) {
							font-size: 1.2rem;
						}
					}
					> h3 {
						font-size: 2.8rem;
						line-height: 1.3;
						color: #111;
						font-family: var(--font-serif);
						font-weight: 600;
						@media (width < 1100px) {
							font-size: 2.0rem;
						}
					}
				}
			}
			> div.place {
				border-top: solid 2px #fff;
				padding-top: 10px;
				margin-top: 20px;
				> dl {
					margin-top: 10px;
					display: flex;
					column-gap: 10px;
					> dt {
						background-color: #94816b;
						font-size: 1rem;
						line-height: 1;
						color: #fff;
						font-family: var(--font-serif);
						padding-block: 3px;
						padding-inline: 10px;
						white-space: nowrap;
						display: flex;
						align-items: center;
					}
					> dd {
						font-size: 1rem;
						line-height: 1.4;
						color: #000;
						font-family: var(--font-serif);
						font-weight: 600;
					}
				}
				> p {
					margin-top: 10px;
					&:nth-of-type(2) {
						margin-top: 3px;
					}
					font-size: 0.9rem;
					line-height: 1.7;
					color: #111;
					padding-left: 0.5em;
					text-indent: -0.5em;
				}
			}
		}
	}
}
section.service {
	padding: 60px 5% 130px 5%;
	> div {
		max-width: 1200px;
		margin-inline: auto;
		> h2 {
			border-left: 2px solid #eec13a;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			row-gap: 5px;
			> div {
				padding-left: 15px;
				font-size: 1.1rem;
				line-height: 1.2;
				color: #111;
			}
			> p {
				padding-left: 15px;
				font-size: 1rem;
				line-height: 1.2;
				color: #aaa;
			}
		}
		> h3 {
			margin-top: 30px;
			font-size: 1.6rem;
			line-height: 1.8;
			color: #111;
			font-family: var(--font-serif);
			font-weight: 600;
			@media (width < 450px) {
				font-size: min(1.1rem,6vw);
			}
			> b {
				color: var(--color-accent);
			}
		}
		> div {
			margin-top: 30px;
			display: grid;
			grid-template-columns: repeat(4,1fr);
			column-gap: 20px;
			row-gap: 50px;
			@media (width < 900px) {
				grid-template-columns: repeat(2,1fr);
			}
			> a {
				display: grid;
				&:hover {
					opacity: 0.7;
				}
				> img {
					grid-area: 1/1/2/2;
					max-width: 100%;
					&:nth-of-type(1) {
					}
					&:nth-of-type(2) {
						justify-self: center;
						align-self: end;
						margin-bottom: -25px;
					}
				}
			}
		}
	}
}
section.contact {
	padding: 60px 5% 60px 5%;
	background-color: var(--color-accent);
	> div {
		max-width: 1200px;
		margin-inline: auto;
		> h2 {
			border-left: 2px solid #fff;
			display: flex;
			align-items: center;
			column-gap: 15px;
			> div {
				padding-left: 15px;
				font-size: 1.1rem;
				line-height: 1.2;
				color: #fff;
			}
			> p {
				font-size: 1rem;
				line-height: 1.2;
				color: #fff;
			}
		}
		> p {
			margin-top: 10px;
			font-size: 1rem;
			line-height: 1.4;
			color: #fff;
		}
		> div {
			margin-top: 40px;
			display: grid;
			grid-template-columns: 2fr 1fr;
			align-items: center;
			row-gap: 20px;
			@media (width < 1100px) {
				grid-template-columns: 1fr;
			}
			> article {
				@media (width < 1100px) {
					text-align: center;
				}
				> img {
					max-width: 100%;
					display: block;
					@media (width < 1100px) {
						margin-inline: auto;
					}
				}
				> p {
					padding-left: 45px;
					margin-top: 3px;
					font-size: 1rem;
					line-height: 1.6;
					color: #fff;
					@media (width < 1100px) {
						padding-left: 0;
					}
				}
			}
			> div {
				text-align: center;
				> a {
					&:hover {
						opacity: 0.7;
					}
					> img {
						max-width: 100%;
					}
				}
			}
		}
	}
}