@charset "UTF-8";

/* **************************************************
Name: sustainable-procurement-top-list.css
***************************************************** */
.SusBoxLink{
	margin-top:40px;
}
.SusBoxLink ul{
	display:flex;
	flex-wrap: wrap;
	justify-content: center;
}
.SusBoxLink ul li:not(:last-child){
	margin-right:25px;
}

.SusBoxLink ul li{
	display:flex;
	width:calc((1275px - 110px)/5);
	border:1px solid #cdcdcd;
	margin-bottom:25px;
	background-size: 100%;
}

.SusBoxLink ul li:nth-child(1){
	background:url("/content/dam/hitachi/global/en/procurement/images/icon_guide.png") no-repeat bottom 6em center;
}
.SusBoxLink ul li:nth-child(2){
	background:url("/content/dam/hitachi/global/en/procurement/images/icon_env.png") no-repeat bottom 6em center;
}
.SusBoxLink ul li:nth-child(3){
	background:url("/content/dam/hitachi/global/en/procurement/images/icon_social.png") no-repeat bottom 6em center;
}
.SusBoxLink ul li:nth-child(4){
	background:url("/content/dam/hitachi/global/en/procurement/images/icon_rm.png") no-repeat bottom 6em center;
}
.SusBoxLink ul li:nth-child(5){
	background:url("/content/dam/hitachi/global/en/procurement/images/icon_resi.png") no-repeat bottom 6em center;
}


.SusBoxLink ul li a{
	display:block;
	width:100%;
	padding: 25px 15px 15px;
	color:#000;
	font-weight:bold;
	text-align:center;
	text-decoration: none;
	min-height:350px;
	box-sizing:border-box;
	background:url("/content/dam/hitachi/global/en/procurement/images/icon_link_left.png") no-repeat bottom 25px center;
}

.SusBoxLink ul li a:hover{
	background:url("/content/dam/hitachi/global/en/procurement/images/icon_link_left_hover.png") no-repeat bottom 25px center;
}




/* for 995px - 1304px
=========================================================================================== */
@media screen and (min-width: 995px) and (max-width: 1304px){
	.SusBoxLink ul li a{
		min-height:340px;
	}
	.SusBoxLink ul li:first-child{
		margin-left:25px;
	}

}


/* for - 994px
=========================================================================================== */

@media screen and (max-width: 994px) {

	.SusBoxLink ul li:nth-child(1){
		margin-left:25px;
	}




}


/* for - 767px
=========================================================================================== */

@media screen and (max-width: 767px) {


	.SusBoxLink ul li{
		width:calc((100% - 4px - 25px)/2);
	}
	.SusBoxLink ul li:first-child{
		margin-left:0;
	}
	.SusBoxLink ul li:nth-child(2n){
		margin-right:0;
	}

}


/* for - 579px
=========================================================================================== */

@media screen and (max-width: 579px) {

	.SusBoxLink ul li{
		width:100%;
	background-size: 40%!important;
	}
	.SusBoxLink ul li:first-child,
	.SusBoxLink ul li:not(:last-child){
		margin-right:0;
	}
	.SusBoxLink ul li br{
		display:none;
	}
	.SusBoxLink ul li:first-child a br:first-child{
		display:block;
	}
	.SusBoxLink ul li a{
		min-height:300px;
	}
	.SusBoxLink ul li:first-child a{
		min-height:325px;
	}


}


/* for - 399px
=========================================================================================== */

@media screen and (max-width: 399px) {

.SusBoxLink ul li{
	background-size: 60%!important;
}

}