@charset "utf-8";

/* =======================================================================================
	COMMON
======================================================================================= */

	/*--------------------------
	スワイプ 
--------------------------- */
	.js_swipeMe .pic img{
		width: 100%;
		max-width: none;
	}


/* lNavWrap
---------------------------------------------------- */
	.lNavWrap {
		--M-fluidFontSize-max-fontsize: 26;
		--M-fluidFontSize-min-fontsize: 20;
	}
	.lNavWrap li {
		width: 48%;
	}
@media screen and (max-width: 480px) {
	.lNavWrap {
		font-size: 1.3em;
	}
}




/* =======================================================================================
	PAGE
======================================================================================= */

/* ---------------------------------------------------------------
zeh_introSection
--------------------------------------------------------------- */
	.zeh_introSection h3 .hTxt{
		text-align: center;
	}
	.zeh_introSection .logo-zeh{
		display: block;
		margin: 0 auto;
		text-align: center;
		max-width: 223px;
		width: 34%;
	}
	.zeh_introSection .sentensBox small{
		display: block;
		margin-top: 10px;
		text-align: center;
	}

@media screen and (max-width: 600px) {
	.zeh_introSection .sentensBox small{
		text-align: left;
	}
}

	/*energyBox
	-------------------------------------*/
	.energyBox{
	}
	.energyBox .energy_cont{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		max-width: 900px;
		margin: 0 auto;
	}
	.energyBox .energy_cont{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.energyBox .energy_cont > *{
		width: 46%;
		position: relative;
	}
	.energyBox .energy_cont dl:first-child::after {
		content: "+";
		position: absolute;
		width: 30px;
		height: auto;
		font-size: 3.5em;
		line-height: .8em;
		color: #a5a5a5;
		right: -.9em;
		transform: translateY(-50%);
		top: 66%;
		font-weight: bold;
	}
	.energyBox .energy_cont dt {  
		margin-bottom: .5em;
		text-align: center;
		display: block;
	}
	.energyBox .energy_cont dt em{  
		font-size: 1.2em;
		color: #3f811b;
	}
	.energyBox .energy_cont dd.hTxtStyh6{  
		text-align: center;
		color: #fff;
		background: #649e44;
		margin-bottom: 0;
		padding: .5em;
		line-height: 1.4;
	}
	.energyBox .energy_cont dd.img{  
		display: flex;
		align-items: flex-end;
		margin-top: 2em;
	}
	.energyBox .energy_cont .cap{  
		display: block;
		width:  100%!important;
		margin-top: .65em;
	}
	.energyBox .commentBox{  
		display: block;
		padding: 1em;
		background: #20884b;
		margin: 3em auto 0;
		text-align: center;
	}
	.energyBox .commentBox p{  
		color: #fff;
		margin-bottom: 0;
		text-align: center;
	}
@media screen and (max-width: 1000px) {
	.energyBox .energy_cont dt em{  
		display: block;
	}
}
@media screen and (max-width: 520px) {

	.energyBox .energy_cont{
		display: flex;
	}
	.energyBox .energy_cont > *{
		width: 100%;
	}
	.energyBox .energy_cont dl:first-child::after {
		right: 45%;
		top: auto;
		bottom: -1.65em;
	}
	.energyBox .energy_cont dl:last-child {
		margin-top: 6em;
	}

}





/* ---------------------------------------------------------------
zeh-hMeritSection
--------------------------------------------------------------- */
.zeh-hMeritSection h3{
	margin-bottom:var(--site-marpad-L);
}
.zeh-hMeritSection h3 .hTxt{
	margin-bottom: 0;
	text-align: center;
}
.zeh-hMeritSection .heading_Line01{
	border-color: #20884b;
	padding: 10px 1em;
}


/*-------------------------------------
merit_01Wrap 共通
-------------------------------------*/
	[class*="merit_0"]:not(.merit_02Wrap) {
		margin-bottom:var(--site-marpad-L);
	}

	/* h4 ----------------------*/
	[class*="merit_0"] .hTxtStyh3{
		margin-bottom: .5em;
		text-align: center;
	}
	[class*="merit_0"] .num {
		display: inline-block;
		width: 50px;
		height: 50px;
		border-radius: 50%;
		background: #20884b;
		text-align:center;
		line-height: 46px;
		color: #fff;
		font-family: var(--site-font_family-en_1);
		font-size: clamp(36px, 2.8vw, 43px);
	}
	[class*="merit_0"] .hTxtStyh3 .txt {
		color: #20884b;
		display: block;
		margin-top: .3em;
	}

	/* point_01Box ----------------------*/
	[class*="merit_0"] .pointTitle {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-top: 2em;
	}
	[class*="merit_0"] .pointTitle .en {
		background: #16914e;
		color: #FFF;
		font-family: var(--site-font_family-en_1);
		width: 16%;
		padding: 0.5em;
		text-align: center;
		font-size: clamp(14px, 1.8vw, 22px);
		justify-content: center;
		line-height: 1.2;
	}
	[class*="merit_0"] .pointTitle .ja {
		background: #dbdbdb;
		width: 84%;
		padding: 0.5em 0.5em 0.5em 1em;
		line-height: 1.55;
		margin-bottom: 0;
		text-align: left;
	}
	[class*="merit_0"] .pointTitle > * {
		display: flex;
		align-items: center;
	}

@media screen and (max-width: 600px) {
	/* point_01Box ----------------------*/
	[class*="merit_0"] .pointTitle .en {
		width: 20%; padding: 0.3em;
	}
	[class*="merit_0"] .pointTitle .ja {
		width: 100%;
	}
}




/* merit_01Wrap 
-------------------------------------*/
	.merit_01Wrap .point_01Box .pointItembox{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.merit_01Wrap .point_01Box .pointItembox dl{
		width: 47.5%;
		border: 1px solid #d3d3d3;
		margin-top: 2em;
		text-align: center;
		padding: 1.5em;
	}
	.merit_01Wrap .point_01Box .pointItembox dt{
		margin-bottom: 1em;
	}
	.merit_01Wrap .point_01Box .pointItembox .txt{
		display: block;
		width: 100%;
		margin-top: 1.5em;
	}

	.merit_01Wrap .point_02Box{
		margin-top:var(--site-marpad-L);
	}
	.merit_01Wrap .point_02Box .txt em  {
		font-weight: bold;
		text-decoration: underline;
	}
	.merit_01Wrap .point_02Box .pointItembox  {
		margin-top:var(--site-marpad-S);
	}
	.merit_01Wrap .point_02Box .pointItembox ul{
		border: 1px solid #d3d3d3;
		padding: 1.5em;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-top: 0.5em;
	}
	.merit_01Wrap .point_02Box .pointItembox ul li{
		width: 19%;
		text-align: center;
		position: relative;
	}
	.merit_01Wrap .point_02Box .pointItembox ul li::after {
		content: '';
		position: absolute;
		top: 50%; 
		left: 50%; 
		transform: translate(-50% ,-50%); 
		width: 0;
		height: 0;
		border-left: 18px solid transparent;
		border-right: 18px solid transparent;
		border-top: 18px solid #9e9e9f; 
}
	.merit_01Wrap .point_02Box .pointItembox ul li span{
		display: block;
		padding:1.5em 0.3em;
	}
	.merit_01Wrap .point_02Box .pointItembox ul li span:nth-child(1){
		background: linear-gradient(to top, #e8ecd8 0%, #f1ebdd 100%);
		margin-bottom: 5px;
		border-radius: 10px 10px 0 0;
	}
	.merit_01Wrap .point_02Box .pointItembox ul li span:nth-child(2){
		background: linear-gradient(to top, #f2f6eb  0%, #e8ecd8 100%);
		border-radius: 0 0 10px 10px;
	}

@media screen and (max-width: 1000px) {
	.merit_01Wrap .point_02Box .pointItembox ul{
		justify-content: center;
	}
	.merit_01Wrap .point_02Box .pointItembox ul li{
		width: 31%;
		margin: 0 1%;
	}
	.merit_01Wrap .point_02Box .pointItembox ul li:nth-child(-n+3){
		margin-bottom: 1em;
	}
}
@media screen and (max-width: 600px) {
	.merit_01Wrap .point_02Box .pointItembox ul{
		padding: 1em;
	}
	.merit_01Wrap .point_01Box .pointItembox dl{
		width: 100%;
	}
	.merit_01Wrap .point_02Box .pointItembox ul li{
		width: 48%;
		margin: 0 1%;
	}
	.merit_01Wrap .point_02Box .pointItembox ul li::after {
		border-left: 14px solid transparent;
		border-right: 14px solid transparent;
		border-top: 14px solid #9e9e9f; 
	}
}




/* merit_02Wrap 
-------------------------------------*/
	.merit_02Wrap .point_01Box {
		margin:var(--site-marpad-M) auto var(--site-marpad-L);
	}
	.merit_02Wrap .pointTitle {
		margin-top: 0em;
		margin-bottom: 1em;
	}
	.merit_02Wrap .pointTitle .en {
		width: 100%;
		justify-content:flex-start;
	}
@media screen and (max-width: 900px) {
	.merit_02Wrap .point_01Box .picbox {
		max-width: 470px;
		margin: 0 auto;
	}
	.merit_02Wrap .point_01Box.generalColBox {
	  --base-generalColBox-margin-row: 30px;
	}
}
@media screen and (max-width: 600px) {
	.merit_02Wrap .point_01Box {
		width: 100%;
	}

}

	/*zeh-mEquipmentBox
	-----------------------------------*/
	.zeh-mEquipmentBox h5.ptHeading {
		background: #16914e;
		padding: .5em;
		margin-bottom: 1em;
	}
	.zeh-mEquipmentBox h5.ptHeading .hTxt{
		color: #fff;
		margin-bottom: 0em;
		text-align: center;
	}
	.eqWrap.generalColBox {
		--base-generalColBox-margin-column: 20px;
		--base-generalColBox-margin-row: 30px;
	}
	.eqWrap .ttl {
		padding-top: 1em;
		line-height: 1.4;
		letter-spacing: 0.05em;
		--M-fluidFontSize-min-fontsize: 15;
	}
	.eqWrap .pic{
		position: relative;
	}

	/*col1*/
	.eqWrap.col1{
		margin-bottom: 2em;
	}
	.eqWrap.col1 .pic{
		border: 1px solid #ccc;
		padding: 40px 20px 20px;
		background: #fff;
	}
	.eqWrap.col1 .pic img{
		margin: 0 auto;
		display: block;
	}
@media screen and (max-width: 600px) {
	.eqWrap.col1 .pic{
		padding: 10px;
	}
}


/* zehDeveloperWrap
-------------------------------------*/
	.zehDeveloperWrap{
		border: 0px solid #579448;
		border-width: 2px 0;
		padding: 4em 0;
	}
	.zehDevBox{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
	}
	.zehDevBox .picbox{	width: 16%;	}
	.zehDevBox .txtbox{	width: 75%;	}
	.zehDevBox .hTxt{
		text-align: left;
		margin-bottom: 1.5em;
	}


@media screen and (max-width: 900px) {
	.zehDevBox > *{
		width: 100%!important;
	}
	.zehDevBox .picbox{	
		margin: 0 auto 3em;
		max-width: 150px;
	}
}
@media screen and (max-width: 600px) {
	.zehDevBox{	
		width: 100%;
	}
}



@media screen and (max-width: 1390px) {}
@media screen and (max-width: 1200px) {}
@media screen and (min-width: 900.02px) and (max-width: 1200px) {}
@media screen and (max-width: 900px) {}
@media screen and (max-width: 600px) {}
@media screen and (max-width: 480px) {}
@media screen and (max-width: 359.08px) {}