@charset "UTF-8";

/* **************************************************

Name: procurement-bcp.css

Create: 2025.10.21
Udpade: 2026.2
Copyright Hitachi, Ltd. 2021, 2026. All rights reserved.

***************************************************** */
.BlueBox .CenterAdjust {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.BlueBox img {
	max-width: 100%;
	height: auto;
}

.BlueBox .ImgOnlyStyle {
    margin-top: 30px;
}

.BlueBox h4 {
    margin: 0 0 10px;
    font-size: 96%;
    font-weight: bold;
    color: #222222;
    line-height: 130%;
    padding: 0;
}

.BlueBox h5 {
    margin: 0;
    padding: 0;
    line-height: 160%;
}

.BlueBox .TextStyle1 {
	font-size: 90%;
	margin: 0 0 15px;
    line-height: 140%;
}

.BlueBox ul.ListStyle1 {
	padding: 0;
    line-height: 160%;
    font-size: 90%;
	margin: 0 0 20px;
}

.BlueBox ul.ListStyle1 li, ul.ListStyle2 li {
	list-style-type: none;
    margin: 0 0 5px;
    padding: 0 0 0 1em;
    background: url("/content/dam/hitachi/global/en/procurement/images/icon_list_marker_hd.gif") no-repeat 0 2px;
    background-size: 16px 16px;
    line-height: 140%;
}

.SusResilience .BlueBox {
	border-radius: 10px;
	border:1px solid #FA000F;
	background-color:#f4f4f4;
	padding:25px;
}
.SusResilience .BlueBox > p.ImgOnlyStyle,
.SusResilience .BlueBox > p.ImgOnlyStyle img{
	margin-bottom:0;
}

.SusResilience .BlueBox .System{
	display:flex;
	flex-wrap: nowrap;
	border-top:2px solid #FA000F;
}
.SusResilience .BlueBox .System > div{
	width:calc(100% / 3);
	display:flex;
	flex-direction:column;
}
.SusResilience .BlueBox .System > div h3{
	width:100%;
	/*height:100%;*/
	background-size:contain !important;
	min-height:86px;
	text-align:center;
	position:relative;
    margin-top: 30px;
    margin-bottom: 10px;
}
.SusResilience .BlueBox .System > div h3 > span{
	font-size:1rem;
	font-weight: bold;
	width:100%;
	position:absolute;
	top:50%;
	left:50%;
	transform:translateX(-50%) translateY(-50%);
	line-height: 130%;
}
.SusResilience .BlueBox .System > div h3 > span span{
	font-size:125%;
	display:block;
	margin-left:5px;
	margin-top:5px;
}
.SusResilience .BlueBox .System .sense h3{
	background:url("/content/dam/hitachi/global/en/procurement/images/resilience3.png") no-repeat center center;
}
.SusResilience .BlueBox .System .think h3{
	background:url("/content/dam/hitachi/global/en/procurement/images/resilience4.png") no-repeat center center;
}
.SusResilience .BlueBox .System .act h3{
	background:url("/content/dam/hitachi/global/en/procurement/images/resilience5.png") no-repeat center center;
}
.SusResilience .BlueBox .System > div > div{
	background-color:#fff;
	margin-right:25px;
	padding:25px;
	box-sizing:border-box;
	height:100%;
	display:flex;
	flex-direction:column;
}
.SusResilience .BlueBox .System > div > div > h4{
	min-height:2.6em;
}
.SusResilience .BlueBox .System > div > div > p{
	min-height:5em;
}
.SusResilience .BlueBox .System > div > div > div{
	background-color:#D9D9D9;
	padding:15px;
	min-height:11em;
}
.SusResilience .BlueBox .System > div > div > div h5{
	font-size:95%;
	font-weight:bold;
	margin-bottom:5px;
}
.SusResilience .BlueBox .System > div > div > div .ListStyle1 li:last-child{
	margin-bottom:0;
}
.SusResilience .BlueBox .System > div > div > div .ListStyle1 li{
	word-wrap:break-word;
}
.SusResilience .BlueBox .System > div > .SystemArrow {
	display:none;
}

@media screen and (min-width: 995px) and (max-width: 1304px){
	.SusResilience .BlueBox .System > div > div{
		display:flex;
		flex-direction:column;
		height:65%;
	}
	.SusResilience .BlueBox .System > div > div > div{
		min-height:16em;
	}
	.SusResilience .BlueBox .System > div > div > p{
		min-height:7em;
	}
	/*.SusResilience .BlueBox .System > div h3 > span{
		font-size:100%;
	}*/
	.SusResilience .BlueBox .System > div > div > h4{
		min-height:4em;
	}
	.SusResilience .BlueBox .System > div > div > div h5{
		min-height:3.5em;
	}
}

@media screen and (max-width: 994px) {
	.SusResilience .BlueBox .System > div h3{
		height:auto;
		margin-top:15px !important;
	}
	.SusResilience .BlueBox .System > div > div > h4{
		min-height:4em;
	}
	.SusResilience .BlueBox .System > div > div > p{
		min-height:7em;
	}
	/*.SusResilience .BlueBox .System > div h3 > span{
		font-size:95%;
	}*/
	.SusResilience .BlueBox .System > div h3 > span span{
		font-size:110%;
		margin-top:0;
	}
}

@media screen and (max-width: 767px) {
	.SusResilience .BlueBox .System{
		display:block;
		padding-top:15px;
	}
	.SusResilience .BlueBox .System > div{
		width:100%;
		padding:25px;
		box-sizing:border-box;
	}
	.SusResilience .BlueBox .System > div:not(.sense){
		margin-top:85px;
	}
	.SusResilience .BlueBox .System p.SystemArrow {
		display: inline-block;
		border-style: solid;
		border-width: 60px 150px 0;
		position:absolute;
		left:50%;
		transform:translateX(-50%);
		margin-bottom:85px;
		margin-top:15px;
	}
	.SusResilience .BlueBox .System .sense{
		background-color:#FFCBCD;
	}
	.SusResilience .BlueBox .System .sense + .SystemArrow{
		border-color: #FFCBCD transparent transparent transparent;
	}
	.SusResilience .BlueBox .System .think{
		background-color:#FF979D;
	}
	.SusResilience .BlueBox .System .think + .SystemArrow{
		border-color: #FF979D transparent transparent transparent;
	}
	.SusResilience .BlueBox .System .act{
		background-color:#FF636C;
	}
	.SusResilience .BlueBox .System .act + .SystemArrow{
		border-color: #FF636C transparent transparent transparent;
	}
	.SusResilience .BlueBox .System > div > div{
		margin-right:0;
	}
	.SusResilience .BlueBox .System > div h3{
		min-height:initial;
	}
	/*.SusResilience .BlueBox .System > div h3 > span{
		font-size:120%;
	}*/
	.SusResilience .BlueBox .System > div h3 > span span{
		display:block;
		margin-top:5px;
	}
	.SusResilience .BlueBox .System .sense h3,
	.SusResilience .BlueBox .System .think h3,
	.SusResilience .BlueBox .System .act h3{
		background:none;
		height:auto;
		margin-top:0px !important;
		margin-bottom:15px;
	}
	.SusResilience .BlueBox {
		padding:25px 25px 95px;
	}
	.SusResilience .BlueBox .System > div h3 > span{
		position:initial;
		transform:none;
	}
	.SusResilience .BlueBox .System > div h3 > span span{
		font-size:120%;
	}
	.SusResilience .BlueBox .System > div > div > h4,
	.SusResilience .BlueBox .System > div > div > p,
	.SusResilience .BlueBox .System > div > div > div{
		min-height:initial;
	}
}

@media screen and (max-width: 579px) {
	.SusResilience .BlueBox .System > div > div > div .ListStyle1{
		margin-bottom:0;
	}
}

@media screen and (max-width: 399px) {
	.SusResilience .BlueBox .System p.SystemArrow {
		border-width: 60px 100px 0;
	}
}