html {
	font-size: 62.5%;
}
body {
	margin: 0;
	font-size: 1.5rem;
}

p {
	margin: 0 0 1em;
}
*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
.contents {
	max-width: 630px;
	margin: 0 auto;
	padding: 20px 40px;
	background: #f2f2f2;
}
.title {
	margin: 0 0 1em;
	font-weight: bold;
}

.div-parent {
	position: relative;
	width: 100%;
	max-width: 350px;
	margin: 0 auto 2em;
}
.div-child {
  height: 100px;
  position: relative;
  z-index: 0;
}
.mask-before::before {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, #0016A7 -0.28%, #007FF9 99.93%);
}
.mask-top::before {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, #0016A7 -0.28%, #007FF9 99.93%);
  mask-image: repeating-linear-gradient(90deg, #fff 0 4px, transparent 4px 8px);
  mask-size: 100% 2px;
  mask-repeat: no-repeat;
  mask-position: top;
}
.mask-bottom::after {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, #0016A7 -0.28%, #007FF9 99.93%);
  mask-image: repeating-linear-gradient(90deg, #fff 0 4px, transparent 4px 8px);
  mask-size: 100% 2px;
  mask-repeat: no-repeat;
  mask-position: bottom;
}

.copyright {
	text-align: center;
	padding-top: 1em;
	font-size: 14px;
}