@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%;}

#img-02 {background-image: url('/images/station_interior-p-1080.jpeg');}
#img-03 {background-image: url('/images/Modern-Tunnel-p-1080.jpeg');}
#img-04 {background-image: url('/images/tunnel_old-p-1080.jpeg');}
}
/* 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%;}
	
	#img-02 {background-image: url('/images/station_interior-p-1600.jpeg');}
	#img-03 {background-image: url('/images/Modern-Tunnel-p-1600.jpeg');}
	#img-04 {background-image: url('/images/tunnel_old-p-1600.jpeg');}
}

@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%;}
	
	#img-02 {background-image: url('/images/station_interior.jpg');}
	#img-03 {background-image: url('/images/Modern-Tunnel.jpg');}
	#img-04 {background-image: url('/images/tunnel_old.jpg');}
	
	@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);}
	}
}