@charset "UTF-8";

#app-header {
	background-position: 50% 100%;
	background-repeat: no-repeat;
	background-size: 387px auto;
}
.no-webp #app-header {
	background-image: url(../imgs/app/hdr-bkg.png);
}
.webp #app-header {
	background-image: url(../imgs/app/hdr-bkg.webp);
}
#app-header {
	background-image: image-set(
		url('../imgs/app/hdr-bkg.avif') type('image/avif'),
		url('../imgs/app/hdr-bkg.webp') type('image/webp'),
		url('../imgs/app/hdr-bkg.png') type('image/png')
	);
}
#app-header .wrapper div {
	flex-basis: 80%;
	margin-bottom: initial;
}
header h2 {
	max-width: 444px;
}

#ttl-kindergartenbustrackingapp {
	max-width: 824px;
}
.wrapper .sect:first-child .sect-content h3 {
	text-align: center;
}
.wrapper .sect:first-child .sect-content p {
	margin-bottom: 1rem;
}
#ttl-appproduction {
	max-width: 413px;
}
@media screen and (min-height: 500px) and (min-width: 980px) {
	#app-header {
		background-position: 80% 100%;
	}
	#app-header .wrapper div {
		flex-basis: initial;
		margin-bottom: calc((500px - 31px) / 3);
	}
	header p {
		text-shadow: none;
	}
	.wrapper .sect:first-child .sect-content picture {
		display: none;
	}
	.wrapper .sect:first-child .sect-content {
		background: url(../imgs/app/enbus.jpg) 100% 0 no-repeat;
		background-size: 74.75% auto;
		height: 574px;
	}
	.wrapper .sect:first-child .sect-content h3 {
		text-align: initial;
	}
	.wrapper .sect:first-child .sect-content p {
		/*margin-bottom: 1rem;*/
		max-width: 750px;
		width: 62.5%;
	}
}