@charset "UTF-8";

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

Name: procurement-bcp.css

Description: BoxFlow

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

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


.BoxFlow{
	display:flex;
	flex-wrap: nowrap;
	justify-content: center;
}
.BoxFlow li {
	font-weight:bold;
	font-size:100%;
	text-align:center;
	padding:15px;
	line-height: 1.5;
	word-wrap:break-word;

	position: relative;
	z-index: 0;
	clear: both;

	min-height:2em;
	box-sizing:border-box;
}
.BoxFlow li:not(:last-child):after {
	content: "";
	position: absolute;
	display: block;
	border-style: solid;
}

.SusSocial .BoxFlow{
	margin-bottom:15px;
}
.SusSocial .BoxFlow li span{
	display:block;
	margin:auto;
	width:calc(100% - 30px);
	padding:15px;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	text-shadow:none !important;
}
.SusSocial .BoxFlow li{
	border-radius:5px;
	font-size:75%;
	width:calc(100% - 10px - 3em*4 - 15em - 9em*3);
	background: #f4f4f4;
	border: 1px solid #FA000F;
	color:#fff;
	background-color:#FA000F;
	min-height:calc(4em + 10px);
}
.SusSocial .BoxFlow li:not(:last-child) {
	margin-right:3em;
}
.SusSocial .BoxFlow li:nth-child(1){
	min-width:19em;
}
.SusSocial .BoxFlow li:nth-child(2){
	width:15em;
	min-width:10em;
}
.SusSocial .BoxFlow li:nth-child(3),
.SusSocial .BoxFlow li:nth-child(4){
	width:9em;
	min-width:8em;
}
.SusSocial .BoxFlow li:nth-child(5){
	width:9em;
	min-width:9em;
}
.SusSocial .BoxFlow li:after {
	top: 50%;
	margin-top: -1.5em;
	border-width: 1.5em 0 1.5em 1.5em;
	right: calc(-1.5em - 10px);
	z-index: -1;
	border-color: transparent transparent transparent #000;
}


.SusResilience .BoxFlow li span{
	display:block;
	margin:auto;
	width:calc(100% - 30px);
	padding:15px;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	box-sizing: content-box;
}
.SusResilience .BoxFlow li{
	width:calc((100% - 10px - 3em*4)/5);
	background: #f4f4f4;
	border: 1px solid #FA000F;
	color:#000;
	background-color:#f4f4f4;
	min-height:calc(6em + 10px);
}
.SusResilience .BoxFlow li:not(:last-child) {
	margin-right:3em;
}
.SusResilience .BoxFlow li:nth-child(2),
.SusResilience .BoxFlow li:nth-child(3),
.SusResilience .BoxFlow li:nth-child(4){
	color:#fff;
	background: #000;
}
.SusResilience .BoxFlow li:after {
	top: 50%;
	margin-top: -1.5em;
	border-width: 1.5em 0 1.5em 1.5em;
	right: calc(-1.5em - 15px);
	z-index: -1;
	border-color: transparent transparent transparent #FA000F;
}


@media screen and (min-width: 995px) and (max-width: 1304px){
    .SusSocial .BoxFlow li{
		min-height:6em;
	}
}

@media screen and (max-width: 994px) {
    .SusSocial .BoxFlow{
		flex-wrap:wrap;
		justify-content: flex-start;
	}
	.SusSocial .BoxFlow li{
		margin-bottom:15px;
		min-height:6em;
	}

    .SusResilience .BoxFlow li{
		min-height: 8em;
		line-height: 1.3;
	}
}

@media screen and (max-width: 767px) {
    .BoxFlow{
		display:block;
	}
	.SusSocial .BoxFlow{
		margin-bottom:30px;
	}
	.SusSocial .BoxFlow li{
		font-size:90%;
	}
	.SusSocial .BoxFlow li,
	.SusResilience .BoxFlow li{
		width:80% !important;
		margin-left:auto;
		margin-right:auto;
		min-height:4em;
	}
	.SusSocial .BoxFlow li:not(:last-child),
	.SusResilience .BoxFlow li:not(:last-child) {
		margin-right:auto;
		margin-bottom:3em;
	}
	.SusSocial .BoxFlow li:after,
	.SusResilience .BoxFlow li:after {
		margin-top:initial;
		top:initial;
		left: 50%;
		margin-left: -1.5em;
		border-width: 1.5em 1.5em 0 1.5em;
		right: auto;
		bottom: calc(-1.5em - 15px);
		border-color: #FA000F transparent transparent transparent;
	}
	.SusSocial .BoxFlow li:after{
		bottom: calc(-1.5em - 10px);
		border-color: #000 transparent transparent transparent;
	}
}

@media screen and (max-width: 399px) {
    .SusSocial .BoxFlow li{
		width:100% !important;
	}
	.SusSocial .BoxFlow li:nth-child(1){
		min-width:auto;
	}
}