.bes-data-model-img{
width: 80%;
}
.down-arrow {
display: block;
font-size: 30px;
text-align: center;
width: 30px;
height: 32px;
line-height: 32px;
position: relative;
top: 0px;
margin: 0 auto;
color: #dd9933; }
.arrow-up {
display: block;
font-size: 30px;
text-align: center;
width: 30px;
height: 32px;
line-height: 32px;
position: relative;
top: 0px;
margin: 0 auto;
color: #5b9bd5;
}
.line-vertical {
display: block;
width: 5px;
height: 32px;
background-color: #dd9933;
}
.line-vertical {
position: relative;
}
.line-vertical::before {
content: "";
position: absolute;
width: 8px;
height: 8px;
border-radius: 50%;
top: 0;  }
.box-small-title {
font-style: italic !important;
letter-spacing: 1.8px !important;
font-family: 'Roboto', sans-serif;
font-size: 20px !important; font-weight: 500;
text-align: center;
line-height: 30px;
box-sizing: border-box;
display: inline-block;
color: #ffffff;
margin: 0;
padding: 10px;
}
.box-small-title > span {
display: block;
padding-top: 5px;
font-size: 16px;
font-style: italic;
line-height: 15px;
}
.box-small-body {
visibility: visible !important;
text-align: center !important;
color: #ffffff;
box-sizing: border-box;
margin-top: 0;
margin-bottom: 0px !important;
font-family: Noto Sans JP, sans-serif !important;
font-size: 15px !important;
line-height: 1.2 !important;
font-style: italic !important;
letter-spacing: 1.8px !important;
}
.box-sm-img {
font-family: Verdana, Geneva, sans-serif;
width: 100%;   box-sizing: border-box;
padding: 3px;
}
.box-sm-container {
margin-left: 150px;
margin-right: 150px;
}         .box-diamond {
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom: 70px solid #5b9bd5;;
position: relative;
top: -50px;
}
.box-diamond:after {
content: '';
position: absolute;
left: -50px;
top: 70px;
width: 0;
height: 0;
border: 50px solid transparent;
border-top: 70px solid #5b9bd5;;
}
@media only screen and (max-width: 1000px) {
.tech-item { margin: 0;
}
.box-sm-container {
margin: 0;
}
} .form-chart {
background-color: #5B9BD5;
color: white;
border: 1px solid;
border-radius: 10px;
font-weight: bold;
}
.form_last_child {
background-color: #5B9BD5;
color: white;
border: 1px solid;
border-radius: 10px;
font-weight: bold;
padding: 10px 0;
font-size: 17px;
}
.form_after {
padding: 15px 0;
font-size: 24px;
}
.form_after2 {
padding: 8px 0;
font-size: 24px;
}
.image_chart img {
border-radius: 10px;
width: 97%;
height: 94px;
object-fit: cover;
}
.form_before {
font-size: 20px;
min-height: 100px;
}
.item-title {
font-size: 13px;
}
.image-container {
position: relative;
}
.text-overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 18px;
}
.icon2{
position: absolute;
top: -36%;
left: 46%;
}
.img-icon{
min-height: 72px;
}
.item::before {
content: "";
position: absolute;
top: calc(50% - 2px); left: -10%;
width: 222px;
height: 3px;
background-color: #ED7D31;
transition: opacity 2s ease-in-out;
}
.items::before {
content: "";
position: absolute;
top: calc(50% - 2px); left: 0; 
width: 170px;
height: 3px;
background-color: #ED7D31;
transition: opacity 2s ease-in-out;
}
.items::after {
content: "⬤";
position: absolute;
font-size: 11px;
top: calc(-15% - -35px);
right: calc(91% - 11px);
color: #ED7D31;
transition: opacity 2s ease-in-out;
}
.item_arrow::after {
content: "►";
position: absolute;
font-size: 20px;
top: calc(50% - 16px);
left: -17px;
color: #ED7D31;
transition: opacity 2s ease-in-out;
}
.jamb::after{
content: "";
position: absolute;
top: 32px;
left: 13px;
width: 3px;
height: calc(90% - -8px);
background-color: #ED7D31;
transition: opacity 2s ease-in-out;
}
.item-item-arrow::after{
content: "";
position: absolute;
top: calc(50% - -3px);
left: 50%;
width: 3px;
height: 40px;
background-color: #ED7D31;
transition: opacity 2s ease-in-out;
}
.item-item-arrow::before{
content: "▲";
position: absolute;
font-size: 18px;
top: calc(50% - 9px);
left: calc(50% - 8px);
color: #ED7D31;
transition: opacity 2s ease-in-out;
}
.item-item-arrows::before{
content: "▲";
position: absolute;
font-size: 20px;
top: calc(50% - 9px);
left: calc(50% - 8px);
color: #ED7D31;
transition: opacity 2s ease-in-out;
}
.circle::after {
content: "⬤";
position: absolute;
font-size: 12px;
top: calc(50% - -38px);
left: calc(50% - 4px);
color: #ED7D31;
transition: opacity 2s ease-in-out;
}
.circles::after {
content: "⬤";
position: absolute;
font-size: 12px;
top: calc(50% - -37px);
left: calc(50% - 4px);
color: #ED7D31;
z-index: 999;
}
.diamor::after {
content: "⬤";
position: absolute;
font-size: 12px;
top: calc(50% - 11px);
left: calc(100% - 9px);
color: #ED7D31;
transition: opacity 2s ease-in-out;
}
.diamor-item::after {
content: "";
position: absolute;
top: calc(50% - 3px);
left: calc(75% - 5px);
width: 50px;
height: 3px;
background-color: #ED7D31;
transition: opacity 2s ease-in-out;
}
.diamor::before {
content: "⬤";
position: absolute;
font-size: 12px;
top: calc(50% - 11px);
right: calc(100% - 10px);
color: #ED7D31;
transition: opacity 2s ease-in-out;
}
.diamor-items::after {
content: "";
position: absolute;
top: calc(50% - 3px);
right: calc(75% - 5px);
width: 50px;
height: 3px;
background-color: #ED7D31;
transition: opacity 2s ease-in-out;
}
.diamor-item::before {
content: "";
position: absolute;
top: -20%;
left: calc(75% - -42px);
width: 3px;
height: 65px;
background-color: #ED7D31;
transition: opacity 2s ease-in-out;
}
.diamor-items::before {
content: "";
position: absolute;
top: -20%;
right: calc(75% - -42px);
width: 3px;
height: 65px;
background-color: #ED7D31;
transition: opacity 2s ease-in-out;
}
.arrow-diamor::after {
content: "▲";
position: absolute;
font-size: 20px;
top: calc(-25% - 10px);
right: calc(78% - -4px);
color: #ED7D31;
transition: opacity 2s ease-in-out;
}
.arrow-diamors::after {
content: "▲";
position: absolute;
font-size: 20px;
top: calc(-25% - 10px);
left: calc(78% - -4px);
color: #ED7D31;
transition: opacity 2s ease-in-out;
} @media (max-width: 767px) {
.fz-10{
font-size: 13px;
}
.form_before {
font-size: 14px;
min-height: 244px;
}
.jamb::after{
height: calc( 94% - -3px);
top: 23px !important;
} .items::after {
content: none !important;
}
.items::before {
width: 80px !important;
}
.item::before {
width: 105px !important;
}
.item-item-arrow::before {
left: calc(50% - 8px) !important;
}
.diamor-items::after {
width: 32px !important;
}
.arrow-diamor::after {
right: 94% !important;
}
.item-item-arrows::before {
left: calc(49% - 2px) !important;
}
.diamor-items::before {
left: calc(2% - -8px) !important;
height: 58px !important; 
}
.diamor-items::after {
content: none !important;
}
.img-item{
min-height: 280px;
} .item-item-arrows::before {
left: calc(49% - 5px) !important;
}
.diamor-item::before {
left: calc(96% - 0px) !important;
z-index: 99 ;
height: 58px !important;
}
.arrow-diamors::after {
left: calc(93% - -6px) !important;
}
}
@media (max-width: 1200px) and (min-width: 986px) {
.items::before {
width: 153px !important;
}
.item::before {
width: 205px !important;
}
.diamor-items::after {
right: calc(77% - 5px) !important;
width: 32px !important;
}
.arrow-diamor::after {
right: calc(78% - -7px) !important;
}
.arrow-diamors::after {
left: calc(78% - -7px) !important;
}
.item-item-arrows::before {
left: calc(49% - 0px) !important;
}
}
@media (max-width: 982px) and (min-width: 768px) {
.form_before {
min-height: 181px;
}
.items::before {
width: 114px !important;
}
.item::before {
width: 151px !important;
}
.item-item-arrow::before {
left: calc(50% - 8px) !important;
}
.diamor-items::after {
width: 32px !important;
}
.arrow-diamor::after {
right: calc(84% - -11px) !important;
}
.arrow-diamors::after {
left: calc(85% - -4px) !important;
}
.item-item-arrows::before {
left: calc(49% - -1px) !important;
font-size: 16px !important;
}
.diamor-items::before {
right: calc(81% - -38px) !important;
} .diamor-item::before{
left: calc(81% - -39px) !important;
}
.diamor-items::after {
content: none !important;
}
}   @media (min-width: 768px) and (max-width: 990px) {
.jamb::after {
height: calc(90% - -16px) !important;
}
} @media (min-width: 471px) and (max-width: 767) {
.item-item-arrows::before {
left: calc(49% - 4px) !important;
}
}
@media  (max-width: 390px) {
.img-item{
min-height: 380px;
}
}
@media  (max-width: 502px) {
.diamor-items::before {
left: calc(2% - -8px) !important;
height: 48px !important;
}
.arrow-diamor::after {
right: 93% !important;
}
.diamor-item::before {
left: calc(95% - 1px) !important;
z-index: 99;
height: 47px !important;
}
.arrow-diamors::after {
left: calc(91% - -5px) !important;
}  
}
@media  (max-width: 415px) {
.arrow-diamor::after {
right: calc( 91% - -2px) !important;
}
.diamor-item::before {
left: calc(95% - 3px) !important;
z-index: 99;
height: 40px !important;
}
.arrow-diamors::after {
left: calc(91% - -2px) !important;
}
.diamor-items::before {
left: calc(2% - -11px) !important;
height: 38px !important;
} 
}
@media  (max-width: 386px) {
.arrow-diamor::after {
right: calc( 90% - -1px) !important;
}
.diamor-item::before {
left: calc(94% - 3px) !important;
z-index: 99;
height: 36px !important;
}
.arrow-diamors::after {
left: calc(89% - -3px) !important;
}
.diamor-items::before {
left: calc(2% - -11px) !important;
height: 38px !important;
} 
}