*, *::before, *::after { box-sizing: border-box; }
.mask-container {
	container-type: inline-size;
   --mask-head-size: calc(0.05 * 100cqw);
   --mask-foot-size: calc(0.05 * 100cqw);
}
.mask-box {
	margin-block: calc(-1 * var(--mask-head-size) - 1px) calc(-1 * var(--mask-foot-size) - 1px);
	padding-block: calc(var(--mask-head-size) + 1px) calc(var(--mask-foot-size) + 1px);
	mask-image:
		url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100" preserveAspectRatio="none" width="1000" height="50"><g transform="scale(-1,-1)" transform-origin="50%"><path d="M1000 0H0v52C62.49 28.01 125.02 4 250 4c250.03 0 249.97 96 500 96 124.98 0 187.51-24.01 250-48V0Z"/></g></svg>'),
		linear-gradient(transparent calc(var(--mask-head-size) - 1px), black calc(var(--mask-head-size) - 1px), black calc(100% - var(--mask-foot-size) + 1px), transparent calc(100% - var(--mask-foot-size) + 1px)),
		url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100" preserveAspectRatio="none" width="1000" height="50"><g transform="scale(-1,1)" transform-origin="50% 50%"><path d="M1000 0H0v52C62.5 28 125 4 250 4c250 0 250 96 500 96 125 0 187.5-24 250-48V0Z"></path></g></svg>');
	mask-repeat: no-repeat;
	mask-position: top, center, bottom;
	mask-size: 100%;
}
.above-mask-box {
	padding-bottom: var(--mask-head-size);
	display: block;
}
.below-mask-box {
	padding-top: var(--mask-foot-size);
	display: block;
}
.box-wrap {
	padding-bottom: 200px;
}

@media (max-width: 1024px){
	.box-wrap {
		padding-bottom: 120px;
	}
}
@media (max-width: 768px){
	.box-wrap {
		padding-bottom: 100px;
	}
}
@media (max-width: 450px){
	.box-wrap {
		padding-bottom: 40px;
	}
}