@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');


@font-face {
	font-family:"Noto Sans";
	font-display:swap;
	font-weight:400;
	src:url(/-/media/project/hitachi/sib/fonts/NotoSans/NotoSansCJKjp-Regular.woff2) format("woff2"),
	url(/-/media/project/hitachi/sib/fonts/NotoSans/NotoSansCJKjp-Regular.woff) format("woff")
}
@font-face {
	font-family:"Noto Sans";
	font-display:swap;
	font-weight:700;
	src:url(/-/media/project/hitachi/sib/fonts/NotoSans/NotoSansCJKjp-Bold.woff2) format("woff2"),
	url(/-/media/project/hitachi/sib/fonts/NotoSans/NotoSansCJKjp-Bold.woff) format("woff")
}

/* CSS Document */

/* ---------------------------------------------------------
--------------------------------------------------------- */
.pcOnly { display: block; }
.spOnly { display: none; }
.nowrap { white-space: nowrap; }
#SupportNavi { max-width: 688px;}
#Contents *{ box-sizing: border-box;}
#HeaderArea1 #SupportNavi {
max-width: calc(100% - 105px);
margin-left: 10px;
}
/* ---------------------------------------------------------


--------------------------------------------------------- */
.mvContainer{
padding: 0;
background: transparent url(../image/index_main.png) 50% 50% no-repeat;
background-size: auto;
background-size: cover;
padding-bottom: 60px;
box-sizing: border-box;
}
#mvInner {
justify-content: center;
align-items: center;
padding: 20px;
height: 380px;
text-align: center;
width: 100%;
max-width: 1305px;
margin: 0 auto;
box-sizing: border-box;
transition: .5s;
}
#mvInner h1.mvText{
margin: 0 auto 0 0;
padding: 20px;
text-align: left;
color: #000;
font-size: 32px;
font-weight: bold;
font-family: 'Noto Sans JP', sans-serif;
}
#mvInner h1.mvText span{
font-size: 24px;
font-weight: normal;
line-height: 1.4em;
display: block;
padding-top: 20px;
}
.BrandingCatch{
position: relative;
min-height: 300px;
height: auto;
margin-bottom: 60px;
transition: .5s;
}
.BrandingCatchInner{
position: absolute;
top: -40px;
left: 50%;
transform: translateX(-50%);
background-color: #FFF;
width: 80%;
padding-top: 60px;
box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .25);
transition: .5s;
}
.BrandingCatch p.CatchCopy{
font-size: 128%;
font-weight: bold;
line-height: 1.8;
text-align: left;
margin: 0 auto 60px;
width: 80%;
font-family: 'Noto Sans JP', sans-serif;
color: #444;
transition: .5s;
}
.InnerLinkSection{
text-align: center;
margin-bottom: 60px;
transition: .5s;
}
.InnerLinkSection .BoxPatternC{
margin: 0 auto;
width: 60%;
text-align: left;
background-color: #FFF;
border: 1px solid #5ebc4e;
padding: 15px;
transition: .5s;
}
.InnerLinkSection .VerticalInnerLinks li a:link,
.InnerLinkSection .VerticalInnerLinks li a:visited{
color: #333;
}
.InnerLinkSection .VerticalInnerLinks li a {
background-image: url(../image/icon_link_bottom_hd.png);
}


/*Section*/
.Section h2{
background-image: none;
}
.Section p.TextStyle1{
font-size: 16px;
}
.VerticalInnerLinks li a{
font-size: 16px;
}
.Section .VerticalInnerLinks li a{
padding: 0 0 0 20px;
background-position: left center;
}
.Section p.ImgOnlyStyle{
font-size: 16px;
}


/**/
.RomsSection{
margin-left: 30px;
margin-right: 30px;
position: relative;
padding-bottom: 0;
box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .25);
}
.RomsSection::after{
content: "";
height: 3px;
width: 98%;
position: absolute;
bottom: 5px;
left: 50%;
transform: translateX(-50%);
background-color: #5cb450;
}
.RomsSection h2{
font-size: 28px;
font-family: 'Noto Sans JP', sans-serif;
padding: 28px 0 0 120px;
background-color: #fcfcfc;
margin-bottom: 0;
}
.RomsSection h2 span{
color: #63b46d;
background-color: #fcfcfc;
letter-spacing: 0.1em;
border-radius: 4px;
}
.HeadlineBox{
position: absolute;
left: 21px;
top: -13px;
width: 95px;
height: 134px;
background-color: #5ebc4e;
text-align: center;
padding-top: 8px;
border-radius: 0 0 15px 15px;
background-repeat: no-repeat;
background-position: bottom;
}
.HeadlineBox span{
color: #FFF;
font-size: 18px;
font-weight: bold;
}
#Feature1 .HeadlineBox{
background-image: url(../image/icon_feature_01.png);
}
#Feature2 .HeadlineBox{
background-image: url(../image/icon_feature_02.png);
}
.RomsSection .RomsText{
padding: 70px 60px 40px 60px;
background-color: #fcfcfc;
}
.RomsSection .RomsText p:last-child{
margin-bottom: 0;
}
.RomsSection .ImgOnlyStyle img{
width: 100%;
}
.RomsGridSet1{
width: 100%;
background-color: #efefef;
padding: 60px 0;
}
.RomsGridSet2{
width: 100%;
background-color: #FFF;
padding: 60px 0;
}
.RomsGrid4{
max-width: 1275px;
margin: auto;
}



/*NewsAndNoticedSection*/
.NewsAndNoticedSection{
max-width: 1215px;
margin: auto;
}
.NewsAndNoticedSection h2{
font-size: 16px;
}
.NewsAndNoticedSection .BoxPatternA{
background-color: #fcfcfc;
}
.NewsAndNoticedSection .BoxPatternA h2{
background-color: #efefef;
background-image: url(../image/relatedlinkh2bg.png);
background-position: left, top;
background-repeat: no-repeat;
}

.NewsAndNoticedSection .news_icon01{
border: 1px solid #cc0022;
color: #cc0022;
display: inline-block;
font-size: 83%;
line-height: 1;
margin-left: 10px;
padding: 4px 15px 3px;
position: relative;
top: -1px;
vertical-align: middle;
}
.NewsAndNoticedSection .DateListStyle1 dt{
margin-bottom: 10px;
}
.NewsAndNoticedSection .DateListStyle1 dd{
margin-bottom: 25px;
}
.NewsAndNoticedSection .LinkListStyle1 li{
position: relative;}
.NewsAndNoticedSection .LinkListStyle1 li::before{
content: "";
height: 6px;
width: 6px;
border-radius: 50%;
background-color: #b9d042;
position: absolute;
top: 10px;
left: 0;
display: block;
}
.NewsAndNoticedSection .LinkListStyle1 li a{
font-size: 16px;
padding-left: 1em;
}
.NewsAndNoticedSection .LinkListStyle1 li a:link,
.NewsAndNoticedSection .LinkListStyle1 li a:visited,
.NewsAndNoticedSection .TextStyle1 a:link,
.NewsAndNoticedSection .TextStyle1 a:visited{
color: #333;
}
.NewsAndNoticedSection .TextStyle1{
word-break: break-all;
}



.relatedArea {
width: 100%;
margin-bottom: 100px;
padding: 80px 0 65px 0;
background: #f9f9f9 url("/products/energy/ROMS/image/bg_related.png") top center;
background-size: cover;
}
.RomsRelatedSection{
width: 100%;
margin: 0 auto;
padding-right: 0;
padding-left: 0;
max-width: 1215px;
}
.relatedTitle{
background-color: #efefef;
background-image: url(../image/relatedlinkh2bg.png);
background-position: left, top;
background-repeat: no-repeat;
font-size: 16px;
margin: -15px 0 15px;
padding: 8px 15px;
color: #FFF;
}

.relatedList li {
float: left;
width: 24.235294117%;
margin-right: 1.019607843%;
margin-bottom: 15px;
background-color: #333333;
cursor: pointer;
}
.relatedList li:nth-child(4n) { margin-right: 0; }
.relatedList li img {
width: 100%;
height: auto;
transition: 0.2s;
}
.relatedList li:hover a img { opacity: 0.7; }
.relatedList li:hover .relatedLinkText { text-decoration: underline; }
.relatedList .ImgOnlyStyle,.relatedList .ImgOnlyStyle img { margin-bottom: 0; }
.relatedLinkText {
padding: 10px;
font-size: 14px;
color: #ffffff;
line-height: 150%;
}

/* .bannerLinkList */
.OptionWideRWD #Contents .relatedList.bannerLinkList li a{
display: block;
}
.OptionWideRWD #Contents .relatedList.bannerLinkList img{
height: 100%;
width: 100%;
display: block;
object-position: center;
object-fit: cover;
}
.OptionWideRWD #Contents .relatedList.bannerLinkList li.imgPosRight img{
object-position: right;
}



/*inquiry banner*/
div.inqBanner,
div.inqBanner *{
box-sizing: border-box;
}
div.inqBanner{
position: fixed;
top: 300px;
right: 15px;
background-color: #FFF;
box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .25);
z-index: 9999;
}
.bannerInner{
background-color: #5cb450;
border: 1px solid #5cb450;
position: relative;
width: 3px;
height: 160px;
padding: 0;
transition: .2s;
overflow: hidden;
}
div.inqBanner.active .closeBox{
display: block;
}
div.inqBanner.active .bannerContet{
display: block;
opacity: 1;
}
div.inqBanner .bannerContet a{
position: relative;
display: block;
}
div.inqBanner .bannerContet img{
border: 6px solid #72B353;
}
div.inqBanner .bannerContet:hover img{
border-color: #45ad14;
transition: .5s;
}
div.inqBanner .bannerContet a span{
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 15px;
padding: 10px 15px;
background-color: #72B353;
border: 2px solid #FFF;
border-radius: 25px;
display: block;
width: 226px;
text-align: center;
font-size: 16px;
line-height: 16px;
color: #FFF;
transition: .5s;
}
div.inqBanner .bannerContet:hover span{
background-color: #FFF;
color: #45ad14;
border: 2px solid #45ad14;
}
div.inqBanner.active .bannerInner{
width: 282px;
height: 162px;
border: 1px solid #FFF;
padding: 0;
transition: .5s;
}
div.inqBanner.active .openBox{
display: none;
}
.openBox{
width: 20px;
height: 20px;
background-color: rgba(0, 0, 0, .25);
border: 1px solid #FFF;
border-radius: 3px;
position: absolute;
top: 10px;
right: 10px;
display: block;
cursor: pointer;
transition: .3s;
z-index: 100;
}
.openBox:hover{
background-color: rgba(255, 255, 255, .85);
}
.openBox:hover .openBtn{
color:#444;
}
.openBtn{
color: #FFF;
font-size: 22px;
line-height: 20px;
text-align: center;
}
.closeBox{
width: 20px;
height: 20px;
background-color: #8C8C8C;
border-radius: 3px;
position: absolute;
top: 10px;
right: 10px;
display: none;
cursor: pointer;
transition: .3s;
z-index: 100;
}
.closeBox:hover{
background-color: #505050;
}
.closeBtn::before, .closeBtn::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 2px;
height: 20px;
background: #FFF;
transition: .3s;
}
.closeBtn::before {
transform: translate(-50%,-50%) rotate(45deg);
}
.closeBtn::after {
transform: translate(-50%,-50%) rotate(-45deg);
}
.closeBox:hover .closeBtn::before,
.closeBox:hover .closeBtn::after {
height: 16px;
}
.bannerContet{
display: none;
transition: .7s;
opacity: 0;
}
.bannerContet img{
width: auto;
height: 160px;
}