@charset "Shift_JIS";
:root {
  --color:#333333;
  --color-white:#fff;
  --color-green:#207A3C;
  --color-green-bg:#fff;
  --color-blue:#6072A1;
  --color-blue-bg:#fff;
  --color-gray:#333333;
	--color-gray2:#f3f7f7;
  --color-hitachi-gray1:#F4F4F4;
  --unit:8px; /* 1.5x(12px) 2x(16px) 2.5x(20px = button) 3x(24px) 4x(32px) 6x(48x) 7x(56px) */
	--font50:3.125rem;
	--font40:2.5rem;
	--font32:2rem;
	--font26:1.625rem;
	--font22:1.375rem;
	--font20:1.25rem;
	--font18:1.125rem;
	--gap:25px;
}
#Contents.enterprise .Grid4{
	max-width:1075px;
	margin:auto;
}
#Contents .enterpriseTop .Grid4{
	max-width:inherit;
}
#Contents[class^="enterprise"] img{
	width:100%;
}
[class^="enterprise"] .Branding {
  padding: 50px 15px;
  box-sizing: border-box;
  margin-left: calc(var(--side-space) * -1);
  margin-right: calc(var(--side-space) * -1);
  background-image: url(/products/it/control_sys/ecoassist/enterprise/image/main.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
[class^="enterprise"] .BrandingContent {
  background-color: rgba(255, 255, 255, 82%);
  border-radius:2px;
  padding: 50px;
  max-width: 750px;
  box-sizing: border-box;
}
[class^="enterprise"] h2{
	font-size: clamp(1.75rem, 5.8vw, 2.5rem);
	font-weight:bold;
	margin:inherit;
	background:none;
}
[class^="enterprise"] h3{
	font-size:var(--font32);
	font-weight:bold;
	color:var(--color);
  text-align: center;
}
[class^="enterprise"] .leadTxt{
  text-align: center;
}
.enterpriseTop [class^="sec"]{
  padding: 40px 0;
}
.sec1,.sec3 > *,.enterpriseTop .sec4,.supporMenu,.sec5 > *, .sec6{
  max-width: 1075px;
  margin: auto;
}
#Contents[class^="enterprise"] .btnList{
	display:flex;
	justify-content: center;
	margin-top:calc(var(--unit) * 4);
}
#Contents[class^="enterprise"] .btn{
  display: inline-block;
  text-align: center;
  background-color: #fff;
  border: 2px solid var(--color-primary-r2);
  color: var(--color-primary-r2);
  font-size: 1.125rem;
  font-weight: bold;
  width: fit-content;
  min-width: 280px;
  max-width: 100%;
  line-height: 1.4;
  padding: var(--unit);
  box-sizing: border-box;
  text-decoration: none !important;
  border-radius: 100vmax;
  margin: 5px;
  transition: all .3s ease;
	background-image:inherit;
}
#Contents[class^="enterprise"] .btn:hover,#Contents[class^="enterprise"] .btn:active {
  color: var(--color-deep-contrast);
  background-color: var(--color-primary-r2);
  border: 2px solid var(--color-primary-r2);
}
#Contents[class^="enterprise"] a{
	background-image:url(/image/jp/r1/icon/icon_link_right_hd.gif);
	background-repeat:no-repeat;
	display:block;
  background-size: 20px;
}
#Contents[class^="enterprise"] .sec2 a{
	background:inherit;
}
#BrandingImgStyle1 a{
	background:none;
}
#Contents[class^="enterprise"] a:not(.btn)[target^="_blank"]{
	background-image:url(/image/jp/r1/icon/icon_new_window_hd.gif);
  background-size: 20px;
}
#Contents[class^="enterprise"] a:not(.btn):link,#Contents[class^="enterprise"] a:not(.btn):visited{
	text-decoration:none;
	color:inherit;
}
#Contents[class^="enterprise"] .sec5 a:hover{
	opacity:0.7;
}
#Contents .frame{
	align-items: stretch;
	display: flex;
}
#Contents .frame > * {
  border: 1px solid #CCC;
  padding: 20px 20px 0 20px;
  margin-bottom: 20px;
	border-radius: var(--unit);
}


/* タイトル背景
-------------------------*/
.titleBg{
	position:relative;
	margin-bottom: 80px;
}
.titleBg:before{
	content:"";
	width:100%;
	position:absolute;
	background-size:cover;
	z-index:1;
}
/*
.enterprise .titleBg:before{
	opacity:0.3;
}
*/
.enterprise .titleBg:after{
	content:"";
	top:0;
	width:100%;
	position:absolute;
	/*;background-color:#fff;
	filter: blur(3px);
	background:linear-gradient(90deg, var(--color-green) 0%, var(--color-blue) 100%);
	mix-blend-mode:screen;*/
	z-index:1;
}
.titleBg > *{
	position:relative;
	z-index:2;
}
.enterpriseTop .titleBg h3{
	color:var(--color-green-bg);
}
.enterprise .sec4:before,.enterprise .sec5:before{
	background-image:url(/products/it/control_sys/ecoassist/enterprise/image/bg03.jpg);
  background-position: center top;
}
.enterpriseTop .sec5:before{
	background-image:url(/products/it/control_sys/ecoassist/enterprise/image/bg02.jpg);
  background-position: bottom;
}
/*
.enterprise .sec5:before{
	background-image:url(/products/it/control_sys/ecoassist/enterprise/image/bg04.jpg);
  background-position: bottom;
}
*/


/* 拠点
-------------------------*/
.sec1{
  box-sizing: border-box;
  text-align: center;
}
.sec1 h3{
	font-size:var(--font26);
	line-height:3rem;
}
.sec1 h3 span{
	color:var(--color-green);
	margin:0 1rem;
}
.sec1 h3 span span{
	font-size:var(--font50);
	margin:0 0.5rem;
}
.sec1 .txt{
	font-size:var(--font22);
	font-weight:bold;
}
.sec1 ul{
	display:flex;
	gap:5px;
	margin:25px 0;
}
.sec1 ul li{
	height:115px;
  display: flex;
	flex:1;
  justify-content:center;
	align-items:center;
  border-radius:100px;
  text-align:center;
  font-size:var(--font18);
  font-weight:bold;
  color:#fff;
	line-height:1.3rem;
	flex-wrap:wrap;
}
.sec1 ul li:nth-of-type(1){background:linear-gradient(90deg, var(--color-green) 0%, var(--color-blue) 800%);}
.sec1 ul li:nth-of-type(2){background:linear-gradient(90deg, var(--color-green) -100%, var(--color-blue) 700%);}
.sec1 ul li:nth-of-type(3){background:linear-gradient(90deg, var(--color-green) -200%, var(--color-blue) 600%);}
.sec1 ul li:nth-of-type(4){background:linear-gradient(90deg, var(--color-green) -300%, var(--color-blue) 500%);}
.sec1 ul li:nth-of-type(5){background:linear-gradient(90deg, var(--color-green) -400%, var(--color-blue) 400%);}
.sec1 ul li:nth-of-type(6){background:linear-gradient(90deg, var(--color-green) -500%, var(--color-blue) 300%);}
.sec1 ul li:nth-of-type(7){background:linear-gradient(90deg, var(--color-green) -600%, var(--color-blue) 200%);}
.sec1 ul li:nth-of-type(8){background:linear-gradient(90deg, var(--color-green) -700%, var(--color-blue) 100%);}
.sec1 ul li:nth-of-type(9){background:linear-gradient(90deg, var(--color-green) -800%, var(--color-blue) 0%);}


/* サポート
-------------------------*/
.sec2{
	display:flex;
	align-items:center;
	margin:auto;
	gap:calc(var(--gap) *2);
}
.sec2 .container1{
	max-width:700px;
}
.sec2 .container2{
	position:relative;
	max-width:80%;
}
.sec2 .container2:before{
	content:url(/products/it/control_sys/ecoassist/enterprise/image/point.svg);
	position:absolute;
	top:-2rem;
	left:-3rem;
}
.sec2 h3{
	font-size:var(--font26);
	color:var(--color-green);
  text-align:left;
}
.sec2 .txt{
	font-size:var(--font18);
}


/* 3つの理由
-------------------------*/
.sec3{
	background-image:url(/products/it/control_sys/ecoassist/enterprise/image/bg01.png);
	background-position:bottom center;
	background-repeat:no-repeat;
	background-size:cover;
}
.sec3 h4{
	background-color:var(--color-green);
	color:var(--color-green-bg);
	font-size:var(--font20);
	padding: 1rem;
	text-align:center;
}
.sec3 .txt{
	padding:10px 25px 25px;
}
.sec3 ul{
	display:flex;
	gap:25px;
}
.sec3 ul li{
	background-color:#fff;
	border-radius:var(--unit);
	flex:1;
}
.sec3 ul li img{
  border-radius: var(--unit) var(--unit) 0 0;
}


/* サポート体制
-------------------------*/
.sec4.titleBg{
	margin-bottom:auto;
}
.sec4 h4{
	font-size:var(--font20);
	padding:25px 25px 0;
}
.sec4 .txt{
	padding:0 25px;
}
.sec4 ul{
	display:flex;
	gap:25px;
	margin:40px auto;
}
.sec4 ul li{
	background-color:#fff;
	border-radius:calc(var(--unit) * 0.5);
}
.sec4 img{
	border-radius: calc(var(--unit)/2);
}


/* 支援メニュー
-------------------------*/
[class^="enterprise"] .supportMenu{
	max-width:1075px;
	margin:auto;
}
[class^="enterprise"] .supportMenu .icon{
	background:#8ea8b5;;
	overflow: hidden;
/*
	border:3px solid #fff;
	background:linear-gradient(90deg, var(--color-green) 0%, var(--color-blue) 100%);
*/
	border-radius:100px;
	width:120px;
	height:120px;
	display:flex;
	align-items:center;
}
.supportMenu h4{
	font-size:var(--font20);
	padding-top:inherit;
}
.supportMenu ul{
	display:flex;
	gap:25px;
	flex-direction: column;
}
.supportMenu ul li{
	display:flex;
	gap:25px;
	align-items: center;
	background:var(--color-gray2);
	/*box-shadow:4px 4px 12px rgb(0 66 136 / 16%);*/
}


/* よくある質問
-------------------------*/
#faq section{
/*
	background:var(--color-gray2);
	box-shadow:4px 4px 12px rgb(0 66 136 / 16%);
*/
  border: 1px solid var(--color-green);
	padding:var(--unit);
	margin-bottom: 25px;
}
.acMenu{
	display:flex;
	gap:25px;
	flex-direction:column;
	margin-bottom:25px;
}
.acMenu *{
	box-sizing:border-box;
}
.acMenu > div{
	box-shadow:4px 4px 12px rgb(0 66 136 / 16%);
	border-radius: calc(var(--unit) * 0.5);
}
.acMenu > div:hover,.acMenu dt.on{
	background:var(--color-gray2);
	transition: all 0.3s;
}
.acMenu dt{
	font-weight:bold;
	display:block;
	width:100%;
	cursor:pointer;
	position:relative;
	padding: calc(var(--unit) * 3)  calc(var(--unit) * 9)  calc(var(--unit) * 3)  calc(var(--unit) * 3);
}
.acMenu dd{
	background:#fff;
	width:100%;
	display:none;
	padding: calc(var(--unit) * 3);
}
.acMenu dt:after,.acMenu dt:before {
	content: "";
	position:absolute;
	right:2rem;
	width:2px;
	height:1.25rem;
	background-color:var(--color-blue);
	border-radius:3px;
	top:36%;
	transition: all 0.3s;
}
.acMenu dt:after {
	transform: rotate(90deg);
}
.acMenu dt.on:before{
	transform: rotate(90deg);
	transition: all 0.3s;
}


/* 導入事例
-------------------------*/
.enterpriseTop .sec5 h3{
	text-shadow: 0px 0px 4px #000;
}
.enterprise .sec5{
}
.sec5 ul{
	display:flex;
	flex-wrap:wrap;
	gap:var(--gap);
	padding:40px 15px;
	margin:auto;
	max-width:1075px;
}
.sec5 ul li{
	background-color:var(--color-hitachi-gray1);
	border-radius:var(--unit);
  width: 100%;
}
.sec5 ul li a{
	display: block;
	width:100%;
	height:100%;
  background-position: right var(--unit) bottom var(--unit);
}
.sec5 ul li .container{
	padding:calc(var(--unit) * 2);
	margin-bottom:calc(var(--unit) * 2);
}
.sec5 ul li .thumb img{
	border-radius:var(--unit) var(--unit) 0 0;
}


/* お知らせ
-------------------------*/
.sec6 .LinkListStyle1 a{
	background-position:right center;
	padding:inherit;
}
.sec6 .LinkListStyle1{
	display:flex;
	flex-direction:column;
}
.sec6 .LinkListStyle1 .newsContainer{
	display:flex;
	gap:var(--gap);
	align-items: center;
}
.sec6 .LinkListStyle1 .newsContainer .thumb img{
	border-radius:var(--unit);
}
.sec6 .NewsCategory{
	font-weight:bold;
	background:inherit;
	font-size:inherit	!important;
  color:inherit;
  display:inherit;
  width:inherit;
  text-align:inherit;
  padding:inherit;
  line-height:inherit;
  margin:inherit;
  border-radius: var(--radius-primary);
	white-space: nowrap;
}
.sec6 .LinkListStyle1{
	font-size:inherit;
}
.sec6 .NewsDate{
	color:var(--color-green);
}
.sec6 .LinkListStyle1 li{
	position:relative;
}
.sec6 .LinkListStyle1 li:not(:last-child):after{
	content:"";
	display:block;
	height:1px;
	background:#D9D9D9;
  position: absolute;
	margin: calc(var(--unit) * 2) 0;
}
.sec6 .NewsTxt{
	padding-right:calc(var(--unit) * 3);
}

/* Web Excel切替
-------------------------*/
.sec2 .out{
  position: relative;
}
.sec2 .in img{
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: .5s;
  z-index: 0;
}
.sec2 img{
  display: block;
  width: 100%;
  height: auto;
}
.sec2 input{
  display: none;
}
.sec2 .in{
  display: flex;
  justify-content: center;
	margin-top:1rem;
}
.sec2 label span{
  display: block;
  width: 100px;
  height: 45px;
  padding: 14px;
  cursor: pointer;
  position: relative;
  z-index: 2;
	font-weight:bold;
	text-align:center;
}
.sec2 label span::before{
	color:#fff;
	border-radius:40px;
	display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  opacity: 0.5;
}
.sec2 .container1 label span.web::before{
  content:"Web";
	background-color:var(--color-blue);
}
.sec2 .container1 label span.excel::before{
  content:"Excel";
	background-color:var(--color-green);
}
.sec2 input:nth-of-type(1):checked ~ .in label:nth-of-type(1) span::before{
  background-color:var(--color-blue);
  opacity: 1;
	box-shadow: 0px 0px 12px rgb(100 100 100 / 100%);
}
.sec2 input:nth-of-type(2):checked ~ .in label:nth-of-type(2) span::before{
  background-color:var(--color-green);
  opacity: 1;
	box-shadow: 0px 0px 12px rgb(100 100 100 / 100%);
}
.sec2 label span::before{
  animation: slidebutton 10s infinite linear;
}
@keyframes slidebutton{
  0%{opacity:0.5;}
  5%{opacity:1; z-index:1; box-shadow: 0px 0px 12px rgb(100 100 100 / 100%);}
  50%{opacity:1;}
  55%{opacity:0.5; z-index:0;}
}
.sec2 label:nth-of-type(2) span::before,.sec2 label:nth-of-type(2) img{
  animation-delay: 5s;
}
.sec2 input:nth-of-type(1):checked ~ .in label:nth-of-type(1) img,
.sec2 input:nth-of-type(2):checked ~ .in label:nth-of-type(2) img{
  opacity: 1;
  z-index: 1;
}
.sec2 .in img{
  animation: slide 10s infinite linear;
  opacity: 0;
}
@keyframes slide{
  0%{opacity: 0;}
  5%{opacity: 1;z-index: 1;}
  50%{opacity: 1;}
  55%{opacity: 0;z-index: 0;}
}
.sec2 input:checked ~ .in img,input:checked ~ .in span::before{
  animation: none;
}
.sec2 .in:hover img,.in:hover span::before{
  animation-play-state:paused;/* マウスを載せると一時停止 */
}
.catalog img{
	box-shadow: 1px 1px 3px rgb(0 0 0 / 50%);
}
.ColumnSet.catalog .ImgSet .csBtnListSide{
	justify-content: space-around;
}
.ColumnSet.catalog .ThumbW180SetStyle .Img{
	float:none;
}
.JS .ColumnSet.catalog .ThumbW180SetStyle .Img{
	width:auto;
	text-align:center;
}

@media screen and (max-width: 1304px) {
  .Branding {
    width: calc(100% + var(--side-space-both));
	}
	.Branding,.sec3,.sec4,.sec5{
	  margin-left: calc(var(--side-space) * -1);
	  margin-right: calc(var(--side-space) * -1);
	}
	.sec3 > *{
	  margin-left: var(--side-space);
	  margin-right: var(--side-space);
	}
}
@media screen and (min-width: 995px) {
	[class^="enterprise"] .leadTxt{
		font-size:var(--font18);
	  padding: 40px 0 0;
	}
	.sec2 .container2{
		position:relative;
		max-width:480px;
	}
	.sec5 ul li{
		width:calc((100% - (var(--gap) * 2)) / 3);
	}
}
@media screen and (max-width: 994px) {
	[class^="enterprise"] .Branding {
	  background-position: center left -150px;
	}
	[class^="enterprise"] .leadTxt,.sec3 ul,.enterprise .sec4 ul,.sec5 ul{
		padding-right: 15px;
		padding-left: 15px;
	}
	.sec1 ul{
		flex-wrap: wrap;
		justify-content: center;
	}
	.sec1 ul li{
		min-width:110px;
		max-width:110px;
		height:110px;
	}
	.sec2{
		flex-direction:column;
		gap:var(--gap);
	}
	.sec2 .container1{
		margin-bottom:calc(var(--unit)*4);
	}
	.sec3 ul,.sec4 ul{
		flex-direction:column;
	}
}
@media screen and (min-width: 768px) {
	[class^="enterprise"] .Branding {
	  width: calc(100% + var(--side-space));
	  display: flex;
	  align-items: center;
		height:580px;
	}
	[class^="enterprise"] .BrandingContent{
		padding: 40px;
	}
	.sec6 .LinkListStyle1 li:not(:last-child):after{
		width:100%;
	}
	.supportMenu ul li{
		padding: calc(var(--unit) * 6);
	}
	.supportMenu ul li > div{
		width:calc(100% - 150px);
	}
	.sec6 .LinkListStyle1{
		gap:var(--gap);
	}
}
@media screen and (max-width: 767px) {
	[class^="enterprise"] .BrandingContent{
		padding: 20px;
	}
	.supportMenu ul li{
		flex-direction:column-reverse;
		padding: calc(var(--unit) * 3);
		
	}
	.supportMenu h4{
		text-align:center;
	}
}
@media screen and (min-width: 580px) {
	.titleBg h3{
		padding-top:80px;
	}
	.titleBg:before,.enterprise .titleBg:after{
		height:330px;
	}
	#Contents[class^="enterprise"] .Branding .btnList li a{
		min-width:224px;
	}
	.LinkListStyle1 .newsContainer .thumb{
		width:200px;
	}
	.LinkListStyle1 .newsContainer .headline{
		width:calc(100% - 200px);
	}
}
@media screen and (max-width: 579px) {
	.titleBg h3{
		padding-top:40px;
	}
	.titleBg:before,.enterprise .titleBg:after{
		height:240px;
	}
	.enterpriseTop [class^="sec"]{
	  padding: 20px 0;
	}
	#Contents[class^="enterprise"] .btnList{
    flex-direction: column;
	}
	.LinkListStyle1 .newsContainer .thumb{
		width:100px;
	}
	.LinkListStyle1 .newsContainer .headline{
		width:calc(100% - 100px);
	  overflow: hidden;
	  display: -webkit-box;
	  -webkit-box-orient: vertical;
	  -webkit-line-clamp: 4; /* 任意の行数を指定 */
	}
	.JS .ColumnSet.catalog .ThumbW180SetStyle .Img{
		width:auto;
	}
}
@media screen and (min-width:400px) {
	[class^="enterprise"] .Branding {
		margin-bottom:40px;
	}
	.sec3{
		margin-bottom:80px;
	}
	.sec3 ul{
		margin:40px auto;
	}
}
@media screen and (max-width: 399px) {
	h3{
		margin:inherit;
	}
	.sec1 ul{
		max-width:300px;
		margin: 0 auto 20px;
	}
	.sec1 ul li{
		min-width:90px;
		max-width:90px;
		height:90px;
	}
	[class^="enterprise"] h3 {
		font-size:1.375rem;
	}
	.sec2 h3{
		font-size:1.25rem;
	}
	[class^="enterprise"] .leadTxt{
	font-size:var(--font16);
	  padding: 20px 0 0;
	}
	.sec3{
		margin-bottom:40px;
	}
	.sec3 ul,.sec4 ul{
		margin:20px auto;
	}
	.enterpriseTop .sec4 ul{
		width:100%;
	}
}