@charset "utf-8";

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

　目次

-------------------------------------------------------------------------------

　00. トップ
　01. 中ページ


******************************************************************************* */
html{
	/*-webkit-font-smoothing: antialiased;*/
}

#container{ background:url(/sustainable/eco/products/images/bg.gif) left top repeat-y; }

/*　202303追加 */
#main {	max-width: 730px; }
#fluidVisual {
	background: #73c6e4;
}

.smpVer{
  display: none;
}

/* ==

　00. トップ

=============================================================================== */
#productIndexContainer{
  width: 100%;
}
/* ===============================================
#productHeadline
=============================================== */
#productHeadline{
  overflow: hidden;
  height: 300px;
  background-color: #73c6e4;
  font-size: 0;
  line-height: 0;
}
#productHeadline h1{
  width: 950px;
  height: 300px;
  margin: 0 auto;
  padding: 0;
  border-bottom: 0;
}
#productHeadline h1 img{
  margin: 0 -225px;
}
/* ===============================================
#pageLinkArea
=============================================== */
#pageLinkArea{
  height: 70px;
}
#pageLinkWrap.fixed{
  position: fixed;
  left: 0;
  /*top: 48px; 旧FIXヘッダ高さ */
  top: 60px;
  width: 100%;
  background-color: #fff;
  z-index: 20;
}
#pageLink{
  margin: 0 auto;
  padding: 10px 0 !important;
  display: block;
  width: 100%;
  min-width: 950px;
  max-width: 980px;
  box-sizing:border-box;
  -webkit-box-sizing:border-box;
  font-size: 0;
  line-height: 0;
}
#pageLink li:first-child{
    border-left:solid 1px #d6d6d6;
}
#pageLink li{
  display: inline-block;
  vertical-align: middle;
  width: 33.33%;
  box-sizing:border-box;
  -webkit-box-sizing:border-box;
  border-right:solid 1px #d6d6d6;
  padding: 0 10px;
}
#pageLink li a{
  display: block;
  border-radius: 10px;
}
#pageLink li a span{
  display: block;
  height: 50px;
}
/*#pageLinkZero a span{
  background: url(../images/index/pagelink_nav01.png) center 19px no-repeat;
}
#pageLinkPower a span{
  background: url(../images/index/pagelink_nav02.png) center 19px no-repeat;
}
#pageLinkGreen a span{
  background: url(../images/index/pagelink_nav03.png) center 19px no-repeat;
}
#pageLinkZero a:hover,
#pageLinkZero a.over{
  background-color: #bd9c4f;
}
#pageLinkZero a:hover span,
#pageLinkZero a.over span{
  background: url(../images/index/pagelink_nav01.png) center -31px no-repeat;
}
#pageLinkPower a:hover,
#pageLinkPower a.over{
  background-color: #3a9ed5;
}
#pageLinkPower a:hover span,
#pageLinkPower a.over span{
  background: url(../images/index/pagelink_nav02.png) center -31px no-repeat;
}
#pageLinkGreen a:hover,
#pageLinkGreen a.over{
  background-color: #89ba32;
}
#pageLinkGreen a:hover span,
#pageLinkGreen a.over span{
  background: url(../images/index/pagelink_nav03.png) center -31px no-repeat;
}*/
#pageLinkCarbon a span{
  background: url(../images/index/pagelink_nav01.png) center 19px no-repeat;
}
#pageLinkNature a span{
  background: url(../images/index/pagelink_nav02.png) center 19px no-repeat;
}
#pageLinkCase a span{
  background: url(../images/index/pagelink_nav03.png) center 19px no-repeat;
}
#pageLinkCarbon a:hover,
#pageLinkCarbon a.over{
  background-color: #bd9c4f;
}
#pageLinkCarbon a:hover span,
#pageLinkCarbon a.over span{
  background: url(../images/index/pagelink_nav01.png) center -31px no-repeat;
}
#pageLinkNature a:hover,
#pageLinkNature a.over{
  background-color: #bd9c4f;
}
#pageLinkNature a:hover span,
#pageLinkNature a.over span{
  background: url(../images/index/pagelink_nav02.png) center -31px no-repeat;
}
#pageLinkCase a:hover,
#pageLinkCase a.over{
  background-color: #bd9c4f;
}
#pageLinkCase a:hover span,
#pageLinkCase a.over span{
  background: url(../images/index/pagelink_nav03.png) center -31px no-repeat;
}


/* ===============================================
.categoryTit
=============================================== */
.categoryTit {
	text-align: center;
	margin: 30px auto;
	color: #333;
	font-size: 28px;
	font-weight: bold;
}


/* ===============================================
.productIndexContent
=============================================== */
.productIndexContent{
 /* margin: 0 10px;
  border-radius: 15px;
  padding-bottom: 20px;
  min-width: 910px;
    -webkit-font-smoothing: antialiased;*/
}
#productIndexZero{
  background: url(../images/index/bg_zero.jpg) center top #3b3b3b no-repeat;
  -moz-background-size: 100% auto;
  background-size: 100% auto;
}
#productIndexPower{
  background: url(../images/index/bg_power.jpg) center top #3b3b3b no-repeat;
  -moz-background-size: 100% auto;
  background-size: 100% auto;
}
#productIndexGreen{
  background: url(../images/index/bg_green.jpg) center top #3b3b3b no-repeat;
  -moz-background-size: 100% auto;
  background-size: 100% auto;
}

#productIndexCarbon{
  background: url(../images/index/bg_zero.jpg) center top #3b3b3b no-repeat;
  -moz-background-size: 100% auto;
  background-size: 100% auto;
  margin: 0 20px 20px;
  border-radius: 15px;
  min-width: 910px;
    -webkit-font-smoothing: antialiased;
}
#productIndexNature{
  background: url(../images/index/bg_green.jpg) center top #3b3b3b no-repeat;
  -moz-background-size: 100% auto;
  background-size: 100% auto;
  margin: 0 20px 20px;
  border-radius: 15px;
  min-width: 910px;
    -webkit-font-smoothing: antialiased;
}
#productIndexCase{
  background: #f2f2f2;
  -moz-background-size: 100% auto;
  background-size: 100% auto;
}


.productIndexContent + .productIndexContent{
  margin-top: 30px;
}
/* .indexHeadline
----------------------- */
.productIndexContent .indexHeadline{
  text-align: center;
  font-size: 0;
  line-height: 0;
  display: table;
  width: 100%;
  height: 300px;
}
.productIndexContent .indexHeadline > div{
  display: table-cell;
  vertical-align: middle;
}
/*.productIndexContent .indexHeadline h2{
  background-color:transparent;
  padding: 0;
}
.productIndexContent .moreBt{
  margin-top: 27px;
}
.productIndexContent .moreBt a{
  display: inline-block;
  border: solid 1px #fff;
  box-sizing:border-box;
  -webkit-box-sizing:border-box;
  text-decoration: none;
  color: #fff;
  border-radius: 17px;
  font-size: 15px;
  line-height: 1em;
  padding: 11px 35px 9px 30px;
  background: url(../../../../common/images/ico_arw12.png) calc(100% - 20px) center no-repeat;
}*/
.productIndexContent .indexHeadline h2{
  background-color:transparent;
  text-align: center;
  color: #fff;
  font-size: 42px;
  font-weight: 500;
  margin: 0;
  padding: 0;
}
.productIndexContent .moreBt{
  margin-top: 35px;
  display: flex;
  justify-content: center;
  align-items: stretch;
}
.productIndexContent .moreBt li {
  position: relative;
  display: flex;
  align-items: center;
  width: 280px;
  margin: 0 10px;
  background: #bc9c58;
  border-radius: 10px;
}
.productIndexContent .moreBt li a {
  display: block;
  width: 100%;
  text-align: center;
  line-height: 1.2;
  padding: 25px 0;
  box-sizing:border-box;
  text-decoration: none;
  color: #fff;
  font-size: 15px;
  font-weight: bold;
}
.productIndexContent .moreBt li a:after{
  position: absolute;
  right: 10px;
  top: 45%;
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin: 0;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
}
.productIndexContent .moreBt li a:hover{
  opacity: 70%;
}


/* .indexBox
----------------------- */
.productIndexContent .indexBox{
  background-color: #f2f2f2;
  border-radius: 5px;
  margin: 0 20px;
  padding: 15px 0 40px;
}
.productIndexContent .indexBox + .indexBox{
  margin-top: 20px;
}
#productIndexZero .indexBox{
  border-top:solid 5px #bd9c4f;
}
#productIndexPower .indexBox{
  border-top:solid 5px #3a9ed5;
}
#productIndexGreen .indexBox{
  border-top:solid 5px #89ba32;
}
.productIndexContent .indexBox h3{
  text-align: center;
  font-size: 20px;
  line-height: 1em;
  color: #333333;
  padding-top: 35px;
  border-bottom: none;
}
/* .indexProductList
----------------------- */
.productIndexContent .indexProductListWrap{
  width: 100%;
  background-color: #dfdfdf;
  text-align: center;
  margin-top: 20px;
}
.productIndexContent .indexProductList{
  display: table;
  table-layout: fixed;
  width: 100%;
  font-size: 0;
  line-height: 0;
  margin: 0 auto;
  padding: 0 !important;
}
.productIndexContent .indexProductList.productListCell1{
  width: 25%;
}
.productIndexContent .indexProductList.productListCell2{
  width: 50%;
}
.productIndexContent .indexProductList.productListCell3{
  width: 75%;
}
.productIndexContent .indexProductList li{
  display: table-cell;
  overflow: hidden;
  opacity:0;
  filter: alpha(opacity=0);
  -ms-filter: "alpha(opacity=0)";
}
.productIndexContent .indexProductList li a{
  display: table;
  width: 100%;
  height: 154px;
  text-decoration: none;
  color: #fff;
  font-weight: bold;
  position: relative;
  background-color: #000;
  overflow: hidden;
}
.productIndexContent .indexProductList li a > div{
  display: table-cell;
  vertical-align: middle;
}
.productIndexContent .indexProductList .productImage{
  position: absolute;
  width: 100%;
  height: 154px;
  left: 0;
  top: 0;
  z-index: 1;
  opacity:.55;
  filter: alpha(opacity=55);
  -ms-filter: "alpha(opacity=55)";
	-webkit-transition-duration:.2s;
	transition-duration:.2s;
}
.productIndexContent .indexProductList li a:hover .productImage{
-webkit-transform:scale(1.1,1.1);
transform:scale(1.1,1.1);
}
.productIndexContent .indexProductList .productImage img{
  display: none;
}
.productIndexContent .indexProductList .categoryTxt{
  font-size: 20px;
  line-height: 1.4em;
  z-index: 2;
  position: relative;
}
.productIndexContent .indexProductList .productTtl{
  font-size: 13px;
  line-height: 1.4em;
  z-index: 2;
  position: relative;
}
/* .indexJireiList
----------------------- */
.productIndexContent .indexJireiList{
  font-size: 0;
  line-height: 0;
  display: block;
  padding: 6px 23px 0;
}
.productIndexContent .indexJireiList li{
  display: inline-block;
  vertical-align: top;
  width: 25%;
  padding: 14px 7px 0;
  box-sizing:border-box;
  -webkit-box-sizing:border-box;
}
.productIndexContent .indexJireiList li a{
  background-color: #ffffff;
  border-radius: 5px;
  -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
  mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
  overflow: hidden;
  display: block;
  text-decoration: none;
  color: #244589;
  position: relative;
}
.productIndexContent .indexJireiList .jireiImage{
  overflow: hidden;
}
.productIndexContent .indexJireiList .jireiImage > div{
	-webkit-transition-duration:.2s;
	transition-duration:.2s;
}
.productIndexContent .indexJireiList li a:hover .jireiImage > div{
-webkit-transform:scale(1.1,1.1);
transform:scale(1.1,1.1);
}
.productIndexContent .indexJireiList .jireiImage img{
  width: 100%;
  height: auto;
  opacity:0;
  filter: alpha(opacity=0);
  -ms-filter: "alpha(opacity=0)";
}
.productIndexContent .indexJireiList .categoryTxt{
  position: absolute;
  background-color: rgba(255,255,255,0.80);
  font-size: 12px;
  line-height: 1em;
  color: #333333;
  display: inline-block;
  padding: 6px 10px 4px;
  border-radius: 12px;
  top: 6px;
  left: 6px;
}
.productIndexContent .indexJireiList .newIc a:after{
  content: "NEW!";
  position: absolute;
  background-color: rgba(255,0,0,0.80);
  font-size: 12px;
  line-height: 1em;
  color: #fff;
  display: inline-block;
  padding: 6px 10px 4px;
  border-radius: 12px;
  top: 6px;
  right: 6px;
}
.productIndexContent .indexJireiList .jireiTtl{
  background: url(../../../../common/images/ico_arw12.png) 12px 18px #fff no-repeat;
  padding: 10px 15px 5px 25px;
  /*font-size: 14px;*/
  font-size: 16px;
  font-weight: bold;
  line-height: 1.5em;
}
.productIndexContent .indexJireiList .jireiSTtl{
  font-size: 14px;
  color: #333;
  line-height: 1.5em;
  padding: 0 15px;
  margin-bottom: 10px;
}
.productIndexContent .indexJireiList .jireiIco {
  padding: 0 15px 10px 15px;
}
.productIndexContent .indexJireiList .jireiIco div {
	font-size: 11px;
	color: #666;
	background: #e4f4ca;
	border: solid 1px #c8dea5;
	border-radius: 16px;
	padding: 8px 10px;
	margin: 0 5px 5px 0;
	float: left;
	display: inline-block;
	width: auto;
	line-height: 1;
}
.productIndexContent .indexJireiList .jireiIco::after {
   content: "";
   display: block;
   clear: both;
 }


/* ==

　01. 中ページ

=============================================================================== */

#main h1 span.productsType01, #main h1 span.productsType02,
#main h1 span.productsType03, #main h1 span.productsType04,
#main h1 span.productsType05, #main h1 span.productsType06, #main h1 span.productsType07{
	width:6em;
	margin-bottom:5px;
	margin-right:1em;
	padding:5px 7px;
	color:#fff;
	font-weight:bold;
	text-align:center;
	display:block;
	float:left;
}
#main h1 span.productsType01{ background-color:#d95b81; }
#main h1 span.productsType02{ background-color:#4b861c; }
#main h1 span.productsType03{ width:10em; background-color:#999; }
#main h1 span.productsType04{ background-color:#338bcb; }
#main h1 span.productsType05{ background-color:#b89b4b; }
#main h1 span.productsType06{ background-color:#32a0af; }
#main h1 span.productsType07{ width:10em; background-color:#91b342; }

.smaecoBlock div.tit{
	height:63px;
	margin-bottom:15px;
	border-top:1px solid #008443;
	border-bottom:1px solid #008443;
	clear:both;
}
#main .smaecoBlock div.tit h4{ margin-bottom:0; padding-top:14px; float:left; }
.smaecoBlock div.tit p{ padding-top:4px; float:right; }

.chargeBlock{
	margin:0 0 40px;
	padding:15px;
	background-color:#e4f0d9;
}

.colBlock22sus .col2.colBlock01 div .contCap{ padding-left:5px; padding-right:5px; }