section.panel {
	@media (width < 580px) {
		padding: 20px 7%;
	}
	> div {
		max-width: 1920px;
		margin-inline: auto;
		display: grid;
		grid-template-columns: 1fr 1.2fr;
		column-gap: 20px;
		@media (width < 580px) {
			grid-template-columns: 1fr;
			row-gap: 30px;
		}
		> figure {
			&:nth-of-type(1) {
				padding-left: 7%;
				align-self: center;
				@media (width < 580px) {
					display: none;
				}
			}
			&:nth-of-type(2) {
				background-color: #fff;
				padding: 10px;
				border-radius: 10px;
				margin-right: -15px;
				justify-self: end;
				@media (width < 580px) {
					margin-right: 0px;
				}
			}
			@media (width < 580px) {
				justify-self: center;
			}
			> img {
				max-width: 100%;
				border-radius: 8px;
			}
		}
	}
}
section.button {
	padding: 80px 7% 80px 7%;
	&.bg_fff {
		background-color: #fff;
	}
	> div {
		max-width: 1000px;
		margin-inline: auto;
		> div {
			max-width: 400px;
			margin-inline: auto;
			> a {
				text-decoration: none;
				text-align: center;
				&:hover {
					opacity: 0.8;
				}
				> p {
					padding-block: 20px;
					border-radius: 60px;
					text-align: center;
					background: linear-gradient(to bottom,#9c626a, #9c626a 50%, #8F5960 50%, #8F5960);
					font-size: 1.8rem;
					line-height: 1;
					color: #fff;
					@media (width < 500px) {
						padding-block: 20px;
						border-radius: 40px;
					}
				}
			}
		}
	}
}
section.recruit {
	padding: 80px 7% 0px 7%;
	> div {
		max-width: 1000px;
		margin-inline: auto;
		> div.title {
			text-align: center;
			padding-bottom: 60px;
			> h1 {
				font-size: 2.5rem;
				line-height: 1.8;
				color: #333;
				font-family: var(--font-en);
				font-weight: 400;
			}
			> p {
				font-size: 1.1rem;
				line-height: 1;
				color: #333;
			}
		}
		> div.content {
			> h2 {
				text-align: center;
				font-size: 2.2rem;
				line-height: 1.3;
				color: #9c626a;
			}
			> p {
				padding-top: 20px;
				font-size: 1.1rem;
				line-height: 2.0;
				color: #333;
				text-align: center;
			}
		}
	}
}
section.work {
	padding: 80px 7% 0px 7%;
	> div {
		background-color: #fff;
		max-width: 1000px;
		margin-inline: auto;
		padding: 0px 7% 30px 7%;
		> h3 {
			margin-inline: auto;
			text-align: center;
			width: 250px;
			background-color: #9c626a;
			font-size: 1.5rem;
			line-height: 1.8;
			color: #fff;
		}
		> div {
			max-width: 800px;
			margin-inline: auto;
		}
		> div.content {
			padding-block: 30px 60px;
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			column-gap: 30px;
			@media (width < 860px) {
				column-gap: 20px;
			}
			@media (width < 650px) {
				grid-template-columns: repeat(1, 1fr);
				row-gap: 30px;
			}
			> article {
				border-radius: 10px;
				padding: 25px;
				background-color: #ebebeb;
				display: grid;
				@media (width < 650px) {
					padding: 15px;
				}
				> p {
					font-size: 1.5rem;
					line-height: 1.2;
					color: #000;
					text-align: center;
					font-weight: 600;
					> small {
						font-size: 1.1rem;
					}
				}
				> div.line {
					margin-block: 10px 20px;
					background-color: #fff;
					width: 150px;
					height: 6px;
					margin-inline: auto;
				}
				> div.block {
					> div {
						display: flex;
						align-items: center;
						column-gap: 5px;
						padding-bottom: 10px;
						> div.circle {
							width: 15px;
							height: 15px;
							border-radius: 8px;
							background-color: #fff;	
						}
						> p {
							font-size: 1.1rem;
							line-height: 1.3;
							color: #333;
							font-weight: 600;
						}
					}
				}
				> figure {
					align-self: end;
					margin-top: 25px;
					> img {
						max-width: 100%;
					}
				}
				&:nth-of-type(1) {
					> div.block {
						width: 200px;
						margin-inline: auto;
						@media (width < 770px) {
							width: 100%;
						}
						@media (width < 650px) {
							width: 200px;
						}
						@media (width < 380px) {
							width: 100%;
						}
					}
				}
				&:nth-of-type(2) {
					> div.block {
						width: 250px;
						margin-inline: auto;
						@media (width < 770px) {
							width: 100%;
						}
						@media (width < 650px) {
							width: 250px;
						}
						@media (width < 380px) {
							width: 100%;
						}
					}
				}
			}
		}
		> div.aptitude {
			padding-bottom: 25px;
			border-top: 2px solid #9c626a;
			border-bottom: 2px solid #9c626a;
			padding-block: 25px;
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			column-gap: 20px;
			@media (width < 810px) {
				grid-template-columns: repeat(1, 1fr);
				row-gap: 20px;
			}
			> p {
				border-radius: 6px;
				padding-block: 10px;
				background-color: rgba(226, 206, 205, 0.5);
				font-size: 1.1rem;
				line-height: 1.3;
				color: #333;
				text-align: center;
				@media (width < 810px) {
					width: min(80% , 300px);
					margin-inline: auto;
				}
				@media (width < 450px) {
					width: min(90% , 300px);
					margin-inline: auto;
				}
			}
		}
	}
}
section.voive {
	padding: 80px 7% 0px 7%;
	> div {
		background-color: rgba(226, 206, 205, 0.5);
		max-width: 1000px;
		margin-inline: auto;
		padding: 0px 7% 50px 7%;
		background-image: url(./image/voice01.svg), url(./image/voice02.svg);
		background-repeat: no-repeat;
		background-position: 35px 30px, calc(100% - 35px) calc(100% - 30px);
		background-size: 200px , 45%;
		@media (width < 800px) {
			padding: 0px 7% 70px 7%;
			background-position: 10px 10px, calc(100% - 10px) calc(100% - 10px);
			background-size: 150px , 60vw;
		}
		> h3 {
			margin-inline: auto;
			text-align: center;
			width: 250px;
			background-color: #9c626a;
			font-size: 1.5rem;
			line-height: 1.8;
			color: #fff;
		}
		> div {
			padding-top: 30px;
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			column-gap: 30px;
			@media (width < 800px) {
				grid-template-columns: repeat(1, 1fr);
				row-gap: 30px;
			}
			> figure {
				justify-self: end;
				width: 80%;
				padding: 10px;
				background-color: #fff;
				box-shadow: 7px 7px 5px rgba(0, 0, 0, 0.3);
				@media (width < 800px) {
					width: 70%;
					justify-self: center;
				}
				@media (width < 450px) {
					width: 100%;
				}
				> img {
					max-width: 100%;
				}
			}
			> div {
				justify-self: start;
				width: 360px;
				@media (width < 800px) {
					width: 100%;
				}
				> h3 {
					font-size: 1.4rem;
					line-height: 1.2;
					color: #000;
					font-weight: 600;
				}
				> p {
					text-align: justify;
					padding-top: 20px;
					font-size: 1.0rem;
					line-height: 1.8;
					color: #000;
				}
			}
		}
	}
}