@charset "utf-8";
/* CSS Document */

@media (any-pointer: coarse) {
.img {
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: 100% 50%;
}

#img-03 {width:115%; background-size: 112.5%; background-position: 50% 100%;}
#img-04 {width:130%; background-size: cover; background-position: 0% 25%;}

}

/* Portrait */
@media (min-aspect-ratio: 1/18) and (max-aspect-ratio: 18/18) {}

/* Landscape */
@media (min-aspect-ratio: 19/18) and (max-aspect-ratio: 54/18) {
	
	.items {height: calc((90vw / 16) * 8);}
	.item {height: calc((90vw / 16) * 8); width:250%; background-size: auto 100%;}
	
}


@media (any-pointer: fine) {
	
	.img {
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: 50% 50%;
	}
	
	.items {height: calc((90vw / 16) * 8);}
	.item {height: calc((90vw / 16) * 8); width:250%; background-size: auto 100%;}
	

	
	@media (min-aspect-ratio: 19/18) and (max-aspect-ratio: 29/18) {
		.projectimg {height: calc((90vw / 16) * 9);}
		#img_cont-01 {height: calc((90vw / 16) * 8);}
	}
	@media (min-aspect-ratio: 29/18) and (max-aspect-ratio: 33/18) {
		.projectimg {height: calc((75vw / 16) * 9);}
	}
	@media (min-aspect-ratio: 33/18) and (max-aspect-ratio: 54/18) {
		.projectimg {height: calc((66vw / 16) * 9);}
	}
}