@charset "UTF-8";

#design-header {
	background-color: #19d286;
	background-position: 98% 100%;
	background-repeat: no-repeat;
	background-size: 623px auto;
}
.no-webp #design-header {
	background-image: url(../imgs/dtp/hdr-bkg.png);
}
.webp #design-header {
	background-image: url(../imgs/dtp/hdr-bkg.webp);
}
#design-header {
	background-image: image-set(
		url('../imgs/dtp/hdr-bkg.avif') type('image/avif'),
		url('../imgs/dtp/hdr-bkg.webp') type('image/webp'),
		url('../imgs/dtp/hdr-bkg.png') type('image/png')
	);
}
#design-header .wrapper div {
	flex-basis: 80%;
	margin-bottom: initial;
}
header h2 {
	max-width: 143px;
}
.sect-content p {
	margin-bottom: 2rem;
}
.sect-content picture {
	margin: 0 auto;
	max-width: 366px;
}

#ttl-designdtp {
	max-width: 407px;
}

@media screen and (min-height: 500px) and (min-width: 980px) {
	#design-header {
		background-position: 80% 90%;
	}
	#design-header .wrapper div {
		flex-basis: initial;
		margin-bottom: calc((500px - 31px) / 3);
	}
	header p {
		text-shadow: none;
	}
	
	.sect-content {
		display: flex;
		justify-content: space-between;
	}
	.sect-content p {
		flex-basis: 67.5%;
	}
	.sect-content picture {
		flex-basis: 30.5%;
	}
}