section.panel {
	display: grid;
	> figure {
		grid-area: 1/1/2/2;
		> img {
			max-width: 100%;
		}
	}
	> div {
		grid-area: 1/1/2/2;
		max-height: 95vh;
		background-image: url(../common/image/scroll.svg);
		background-repeat: no-repeat;
		background-position: 95% 100%;
		margin-bottom: 30px;
		animation-name: panelarrow;
		animation-duration: 4s;
		pointer-events: none;
		@media (width < 700px) {
			display: none;
		}
	}
}
@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.localnav {
	padding: 60px 5% 60px 5%;
	> div {
		max-width: 1000px;
		margin-inline: auto;
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		column-gap: 15px;
		row-gap: 15px;
		@media (width < 1070px) {
			grid-template-columns: repeat(2, 1fr);
		}
		@media (width < 410px) {
			grid-template-columns: repeat(1, 1fr);
		}
		> a {
			text-decoration: none;
			&:hover {
				opacity: 0.7;
			}
			> p {
				border: 3px solid #23b6bc;
				background-image: url(./image/linkbuttom_23b6bc.svg);
				background-position: calc(100% - 10px) 50%;
				background-repeat: no-repeat;
				background-size: 20px 20px;
				padding: 10px 20px 10px 10px;
				text-align: center;
				font-size: 1.2rem;
				line-height: 1.3;
				color: #23b6bc;
				font-weight: 500;
			}
		}
	}
}
section.message {
	padding: 60px 0% 0px 15%;
	@media (width < 700px) {
		padding: 60px 5% 0px 5%;
	}
	> div {
		max-width: 1000px;
		margin-inline: auto;
		position: relative;
		> figure {
			&:nth-of-type(2) {
				position: absolute;
				left: -10%;
				top: -8%;
				@media (width < 700px) {
					left: -5%;
				}
				> img {
					width: min(30vw,580px);
					@media (width < 700px) {
						width: 40vw;
					}
				}
			}
			> img {
				max-width: 100%;
			}
		}
	}
}
section.messagetext {
	padding: 40px 20% 60px 27%;
	@media (width < 1900px) {
		padding: 40px 5% 60px 5%;
	}
	> div {
		max-width: 1000px;
		margin-inline: auto;
		> div {
			> p {
				font-size: 1.1rem;
				line-height: 2.2;
				color: #333;
				text-align: justify;
				&:nth-of-type(2) {
					text-align: right;
					padding-top: 30px;
					> small {
						font-size: 1.0rem;
					}
				}
			}
		}
	}
}
section.lineup {
	padding: 60px 5% 100px 5%;
	> div {
		max-width: 1000px;
		margin-inline: auto;
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		column-gap: 5px;
		align-items: end;
		@media (width < 1290px) {
			grid-template-columns: repeat(2, 1fr);
			row-gap: 5px;
		}
		@media (width < 560px) {
			grid-template-columns: repeat(1, 1fr);
		}
		> a {
			text-decoration: none;
			&:hover {
				> figure {
					> img {
						transform: scale(1.1);
					}
				}
			}
			> figure {
				overflow: hidden;
				> img {
					max-width: 100%;
					transition: transform 0.3s;
				}
			}
			> div {
				min-height: 100px;
				padding: 10px;
				background-color: #b7c1a9;
				text-align: center;
				background-image: url(./image/linkbutton_right_mini.svg);
				background-position: calc(100% - 10px) calc(100% - 10px);
				background-repeat: no-repeat;
				background-size: 20px 20px;
				> h3 {
					font-size: 1.2rem;
					line-height: 1.4;
					color: #fff;
					font-weight: 500;
				}
				> p {
					font-size: min(0.9rem, 4.5vw);
					line-height: 1.6;
					color: #000;
				}
			}
		}
	}
}
section.aboutus01 {
	padding: 40px 5% 0px 5%;
	> div {
		max-width: 1000px;
		margin-inline: auto;
		> div {
			position: relative;
			z-index: 2;
			height: 150px;
			display: grid;
			@media (width < 400px) {
				height: 120px;
			}
			> div {
				grid-area: 1/1/2/2;
				&.triangle {
					background-color: #f4f0e8;
					clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
				}
				&.right_bg {
					background-color: #f4f0e8;
					background: linear-gradient(to right, #fff, #fff 50%, #e9e1d1 50%, #e9e1d1);
				}
			}
		}
		> h2 {
			background-color: #f4f0e8;
			margin-top: -50px;
			text-align: center;
			@media (width < 400px) {
				margin-top: -30px;
			}
			> div {
				font-size: 3rem;
				line-height: 1.3;
				color: #000;
				font-weight: 600;
				position: relative;
				z-index: 3;
			}
			> p {
				margin-top: 2px;
				font-size: 1.1rem;
				line-height: 1.3;
				color: var(--color-accent);
				font-weight: 500;
			}
		}
	}
}
section.aboutus02 {
	padding: 0px 5% 0px 5%;
	> div {
		padding-bottom: 80px;
		padding-inline: 5%;
		background-color: #f4f0e8;
		max-width: 1000px;
		margin-inline: auto;
		> p {
			padding-block: 80px 40px;
			font-size: 1.1rem;
			line-height: 2.0;
			color: #333;
			font-weight: 400;
			letter-spacing: 1px;
			text-align: center;
			@media (width < 670px) {
				text-align: justify;
			}
		}
		> article {
			max-width: 800px;
			margin-inline: auto;
			border-bottom: 4px solid #000;
			padding-block: 50px;
			&:last-of-type {
				border-bottom: none;
			}
			> figure {
				text-align: center;
				padding-bottom: 15px;
				&.portrait {
					> img {
						width: 75%;
					}
				}
				> img {
					max-width: 100%;
				}
			}
			> figcaption {
				text-align: justify;
				font-size: 1.1rem;
				line-height: 1.3;
				color: #333;
			}
			> div.twoblock {
				display: grid;
				grid-template-columns: 1fr 1fr;
				column-gap: 50px;
				@media (width < 800px) {
					column-gap: 30px;
				}
				@media (width < 560px) {
					grid-template-columns: 1fr;
					row-gap: 60px;
				}
				> div {
					> figure {
						> img {
							max-width: 100%;
						}
					}
					> figcaption {
						padding-top: 10px;
						text-align: justify;
						font-size: 1.1rem;
						line-height: 1.3;
						color: #333;
					}
				}
			}
			> div.threeblock {
				display: grid;
				grid-template-columns: 1fr 1fr;
				column-gap: 50px;
				@media (width < 800px) {
					column-gap: 30px;
				}
				@media (width < 560px) {
					grid-template-columns: 1fr;
					row-gap: 60px;
				}
				> div:nth-of-type(1) {
					> figure {
						> img {
							max-width: 100%;
						}
					}
					> figcaption {
						padding-top: 15px;
						text-align: justify;
						font-size: 1.1rem;
						line-height: 1.3;
						color: #333;
					}
				}
				> div:nth-of-type(2) {
					> div {
						display: grid;
						grid-template-rows: 1fr 1fr;
						row-gap: 20px;
						> figure {
							> img {
								max-width: 100%;
							}
						}
					}
					> figcaption {
						padding-top: 15px;
						text-align: justify;
						font-size: 1.1rem;
						line-height: 1.3;
						color: #333;
					}
				}
			}
		}
		> div.link {
			display: flex;
			justify-content: center;
			> a {
				text-decoration: none;
				&:hover {
					opacity: 0.7;
				}
				> p {
					padding: 10px 60px;
					text-align: center;
					display: inline-block;
					background-color: var(--color-accent);
					border-radius: 30px;
					background-image: url(./image/arrow_right_fff.svg);
					background-position: right 15px top 50%;
					background-repeat: no-repeat;
					background-size: 10px 20px;
					font-size: 1.1rem;
					line-height: 1.3;
					color: #fff;
					font-weight: 500;
					letter-spacing: 1px;
					@media (width < 800px) {
						padding: 10px 40px;
					}
				}
			}
		}
	}
}
section.company {
	padding: 100px 5% 0px 5%;
	> div {
		max-width: 1000px;
		margin-inline: auto;
		> h2 {
			text-align: center;
			> div {
				font-size: 3rem;
				line-height: 1.3;
				color: #000;
				font-weight: 600;
				position: relative;
				z-index: 3;
			}
			> p {
				margin-top: 2px;
				font-size: 1.1rem;
				line-height: 1.3;
				color: var(--color-accent);
				font-weight: 500;
			}
		}
		> dl {
			padding-block: 50px;
			> div {
				min-height: 80px;
				display: grid;
				grid-template-columns: 200px 1fr;
				&:first-child {
					> dt {
						border-top: 1px solid #333;
						@media (width < 630px) {
							border-top: none;
						}
					}
					> dd {
						border-top: 1px solid #333;
						@media (width < 630px) {
							border-top: none;
						}
					}
				}
				@media (width < 630px) {
					grid-template-columns: 1fr;
					height: auto;
				}
				> dt {
					background-color: #dbe0d4;
					align-content: center;
					font-size: min(1.1rem,4.5vw);
					line-height: 1.3;
					color: #333;
					font-weight: 500;
					padding: 20px 30px 20px 30px;
					border-bottom: 1px solid #333;
					@media (width < 630px) {
						border-bottom: none;
						line-height: 1.1;
						&:empty {
							border-top: 1px solid #333;
							border-bottom: none;
							padding: 0px 40px 0px 40px;
						}
					}
				}
				> dd {
					align-content: center;
					border-bottom: 1px solid #333;
					color: #333;
					font-size: min(1.1rem,5vw);
					line-height: 1.8;
					padding: 20px 30px 20px 30px;
					> p {
						padding-top: 1.5rem;
						&:last-of-type {
							padding-bottom: 1.5rem;
						}
					}
					> span {
						padding-left: -1em;
					}
					@media (width < 630px) {
						border: none;
					}
				}
			}
		}
	}
}
section.business {
	padding: 80px 5% 0px 5%;
	> div {
		max-width: 1000px;
		margin-inline: auto;
		> h2 {
			text-align: center;
			> div {
				font-size: 3rem;
				line-height: 1.3;
				color: #000;
				font-weight: 600;
				position: relative;
				z-index: 3;
			}
			> p {
				margin-top: 2px;
				font-size: 1.1rem;
				line-height: 1.3;
				color: var(--color-accent);
				font-weight: 500;
			}
		}
		> figure {
			padding-top: 30px;
			text-align: center;
			> img {
				max-width: 100%;
			}
		}
	}
}
section.staff {
	padding: 150px 5% 100px 5%;
	> div {
		max-width: 1000px;
		margin-inline: auto;
		> h2 {
			text-align: center;
			> div {
				font-size: 3rem;
				line-height: 1.3;
				color: #000;
				font-weight: 600;
				position: relative;
				z-index: 3;
			}
			> p {
				margin-top: 2px;
				font-size: 1.1rem;
				line-height: 1.3;
				color: var(--color-accent);
				font-weight: 500;
			}
		}
		> div {
			> article {
				position: relative;
				padding-top: 120px;
				&:first-child {
					padding-top: 80px;
				}
				&:nth-of-type(even) {
					> div {
						> div {
							grid-column: 2/3;
							@media (width < 750px) {
								grid-column: 1/2;
							}
						}
						> figure {
							grid-column: 1/2;
						}
					}
				}
				> div {
					display: grid;
					grid-template-columns: repeat(2, 1fr);
					column-gap: 40px;
					@media (width < 750px) {
						grid-template-columns: repeat(1, 1fr);
						row-gap: 20px;
					}
					> div {
						grid-row: 1/2;
						grid-column: 1/2;
						> div {
							display: grid;
							grid-template-columns: 50px 1fr;
							&:nth-of-type(2) {
								> p {
									grid-area: 1/2/2/3;
								}
							}
							> h3 {
								font-size: 1.3rem;
								line-height: 1.3;
								color: #333;
								> small {
									font-size: 1.1rem;
								}
							}
							> p {
								font-size: 1.0rem;
								line-height: 2.0;
								color: var(--color-accent);
							}
						}
						> p {
							padding-top: 20px;
							font-size: 1.0rem;
							line-height: 2.0;
							color: #333;
							font-weight: 500;
							text-align: justify;
							@media (width < 750px) {
								padding-top: 5px;
							}
						}
					}
					> figure {
						grid-row: 1/2;
						grid-column: 2/3;
						@media (width < 750px) {
							grid-row: 2/3;
							grid-column: 1/2;
						}
						> img {
							max-width: 100%;
						}
					}
				}
				> figure {
					position: absolute;
					@media (width < 750px) {
						left: auto !important;
						top: auto !important;
						right: 0 !important;
						bottom: -50px !important;
						> img {
							width: 70vw !important;
						}
					}
					> img {
					}
				}
				&:nth-of-type(1) {
					> figure {
						left: 38%;
						top: calc(80px - 4%);
						> img {
							width: min(224px,15vw);
						}
					}
				}
				&:nth-of-type(2) {
					> figure {
						right: 27%;
						bottom: -4%;
						@media (width < 1080px) {
							bottom: -10%;
						}
						> img {
							width: min(312px,24vw);
						}
					}
				}
				&:nth-of-type(3) {
					> figure {
						left: 20%;
						bottom: -10%;
						@media (width < 1080px) {
							bottom: -20%;
						}
						> img {
							width: min(406px,28vw);
						}
					}
				}
				&:nth-of-type(4) {
					> figure {
						right: 27%;
						bottom: 8%;
						@media (width < 1080px) {
							bottom: -5%;
						}
						> img {
							width: min(312px,24vw);
						}
					}
				}
				&:nth-of-type(5) {
					> figure {
						left: 27%;
						bottom: 8%;
						@media (width < 1080px) {
							bottom: -5%;
						}
						> img {
							width: min(312px,24vw);
						}
					}
				}
				&:nth-of-type(6) {
					> figure {
						right: 20%;
						bottom: 4%;
						@media (width < 1080px) {
							bottom: -5%;
						}
						> img {
							width: min(352px,25vw);
						}
					}
				}
				&:nth-of-type(7) {
					> figure {
						left: 18%;
						bottom: 8%;
						@media (width < 1080px) {
							bottom: -5%;
						}
						> img {
							width: min(312px,25vw);
						}
					}
				}
				&:nth-of-type(8) {
					> figure {
						right: 19%;
						bottom: 3%;
						@media (width < 1080px) {
							bottom: -15%;
						}
						@media (width < 950px) {
							bottom: -5%;
						}
						> img {
							width: min(224px,24vw);
						}
					}
				}
				&:nth-of-type(9) {
					> figure {
						left: 38%;
						top: calc(120px - 4%);
						> img {
							width: 15vw;
						}
					}
				}
			}
		}
	}
}