section.panel {
	> div {
		margin-inline: auto;
		max-width: 1920px;
		> figure {
			> img {
				max-width: 100%;
			}
		}
	}
}
section.works {
	padding: 60px 5% 100px 5%;
	> div {
		max-width: 1000px;
		margin-inline: auto;
		> h2 {
			font-size: min(3.5rem, 8.0vw);
			line-height: 1.3;
			color: #fff;
			font-weight: 600;
			letter-spacing: 2px;
			text-align: center;
			font-family: var(--font-en);
		}
		> p {
			font-size: min(1.2rem, 5.0vw);
			line-height: 1.8;
			color: #b00;
			text-align: center;
			padding-bottom: 40px;
		}
		> h3 {
			text-align: center;
			font-size: min(1.3rem, 6.0vw);
			line-height: 2.0;
			color: #fff;
		}
		> dl {
			padding-top: 60px;
			display: flex;
			flex-direction: column;
			row-gap: 30px;
			> div {
				display: grid;
				grid-template-columns: 300px 1fr;
				column-gap: 30px;
				row-gap: 10px;
				@media (width < 750px) {
					grid-template-columns: 1fr;
				}
				> dt {
					> img {
						max-width: 100%;
					}
				}
				> dd {
					> a {
						display: block;
						text-decoration: none;
						background-color: #000;
						position: relative;
						transition: color 0.5s ease;
						&:hover {
							&::before {
								transform: scaleX(1);
								transform-origin: left;
							}
							> article {
								background-image: url(./image/arrow_000.svg);
								> p {
									color: #000;
								}
							}
						}
						&::before {
							position: absolute;
							top: 0;
							left: 0;
							content: "";
							display: block;
							width: 100%;
							height: 100%;
							background-color: #ddd;
							transform: scaleX(0);
							transform-origin: right;
							transition: transform 0.5s ease;
						}
						> article {
							height: 169px;
							position: relative;
							padding-block: 10px;
							padding-inline: 20px;
							border: 1px solid #666;
							background-image: url(./image/arrow_fff.svg);
							background-repeat: no-repeat;
							background-position: right 15px top 50%;
							background-size: 12px;
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;
							@media (width < 750px) {
								height: unset;
							}
							> h4 {
								font-size: min(1.5rem, 7vw);
								line-height: 1.0;
								color: #5a524f;
								font-weight: 600;
								text-align: center;
								font-family: var(--font-en);
							}
							> p {
								padding-top: 5px;
								font-size: min(1.0rem, 5.0vw);
								line-height: 1.0;
								color: #fff;
								font-weight: 600;
								text-align: center;
							}
						}
					}
				}
			}
		}
	}
}