@charset "UTF-8";
/*=========================================================


  Site Name   環境ポータル
  File Name   base.css

  Create Date 2011/10/04
  Update Date 2019/11/29


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

/* body
------------------------- */
#green_pankuzu{
  font-size:8pt;
  color:#323232;
  clear: both;
  width: 948px;
  text-align: left;
  margin: 4px auto 2px auto;
  padding-left: 2px;
}
#green_pankuzu ul{
  margin-top: 10px;
}
#green_pankuzu a:link{
  color: #333;
  text-decoration: none;
}
#green_pankuzu a:active{
  color: #333;
  text-decoration: none;
}
#green_pankuzu a:visited{
  color: #333;
  text-decoration: none;
}
#green_pankuzu a:hover{
  color: #38bfef;
  text-decoration: underline;
}
#green_pankuzu li{
  display: inline;
  padding-right: 10px;
  margin-right: 5px;
}
.pan_g{
  background-image: url(/shared/images/pankuzu_icon.gif);
  background-position: right 2px;
  background-repeat: no-repeat;
}
#green_logo{
  width: 940px;
  margin: 0 auto;
  margin-top: 18px;
  /* padding-left: 10px;*/
  margin-bottom: 10px;
}

@media screen and (max-width: 663px) {
  #green_pankuzu{
    text-align: left;
    margin: 4px auto 2px auto;
    padding-left: 2px;
  }
  #green_logo{
    margin: 8px auto 0 auto;
  }
  #green_logo img{
    width: 100%;
    height: auto;
  }
}

.menu {
  position: relative;
  width: 949px;
  height: 40px;
  margin: 0 auto 20px;
  background-color: #f5f5f5;
  font-size: 13px;
  z-index: 1;
}
.menu:before {
  content: "";
  position: absolute;
  left: -5px;
  bottom: -7px;
  display: block;
  width: 959px;
  height: 25px;
  background-color: #f5f5f5;
  z-index: -1;
}
.menu:after {
  content: "";
  display: block;
  clear: both;
}
.menu > li {
  float: left;
  width: 236px; /* グローバルナビ4つの場合 */
  height: 41px;
  background-color: #fff;
  border-right: solid 1px #ddd;
  border-top: solid 1px #ddd;
  border-bottom: solid 1px #ddd;
  line-height: 40px;
  text-align: center;
  font-weight: bold;
  z-index: 1;
}
.menu > li:first-child {
  border-left: solid 1px #ddd;
}
.menu > li a {
  display: block;
  color: #000;
/*font-size: 90%;*/
}/*
.menu > li a span{
    background: url(../../images/index_img2/icon_linkS.gif) no-repeat 12px 50%;
  padding-left: 22px;
}*/
.menu > li a:hover {
  color: #999;
  text-decoration: none;
}
.menu > li > a {
  border-bottom: solid 1px #38beef;
}
ul.menu__second-level,
ul.menu__second-level2 {
  font-size:9pt;
  visibility: hidden;
  opacity: 0;
  z-index: 1;
}
ul.menu__third-level {
  visibility: hidden;
  opacity: 0;
}

ul.menu__fourth-level {
  visibility: hidden;
  opacity: 0;
}
.menu > li:hover {
  -webkit-transition: all .5s;
  transition: all .5s;
}
.menu__second-level li,
.menu__second-level2 li {
  border-top: 1px solid #111;
}
.menu__third-level li {
  border-top: 1px solid #111;
}
.menu__second-level li a:hover,
.menu__second-level2 li a:hover {
  padding-bottom: 1px !important;
  border-bottom: 3px solid #38beef;
  background: #f7f7f7;
}
.menu__third-level li a:hover {
  border-bottom: 3px solid #38beef;
  background: #f7f7f7;
}
.menu__fourth-level li a:hover {
  border-bottom: 3px solid #38beef;
  background: #f7f7f7;
}

/* 下矢印 */
.init-bottom:after {/*
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    margin: 0 0 0 15px;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);*/
}
.menu {
  *zoom: 1;
}

li.menu__mega ul.menu__second-level {
  position: absolute;
  top: 42px;
  left: 0;
  box-sizing: border-box;
  width: 960px;
  padding: 0;
  -webkit-transition: all .2s ease;
  transition: all .2s ease;
  font-weight: normal;
}
li.menu__mega:hover ul.menu__second-level {
  visibility: visible;
  opacity: 1;
}
li.menu__mega ul.menu__second-level > li {
  float: left;
  width: 160px;
  background-color: #fff;
  text-align: center;
  border-top: 1px solid #e2e2e2;
  border-bottom: 1px solid #e2e2e2;
  /*font-size: 80%;*/
}
li.menu__mega ul.menu__second-level > li a{
  padding: 4px 0;
  border-right: 1px solid #e2e2e2;
}
li.menu__mega ul.menu__second-level > li.first {
  width: 159px;
  border-left: 1px solid #e2e2e2;
}
li.menu__mega ul.menu__second-level > li.last {
  width: 159px;
  border-right: none;
}
li.menu__mega ul.menu__second-level > li a:hover {
  color: #000;
  text-decoration: none;
}
li.menu__mega ul.menu__second-level > li:nth-child(3n+2) {
    margin: 0;
}
/**/

li.menu__mega ul.menu__second-level2 {
  position: absolute;
  top: 42px;
  left: 50;
  box-sizing: border-box;
  width: 482px;
  padding: 0;
  -webkit-transition: all .2s ease;
  transition: all .2s ease;
  font-weight: normal;
}
li.menu__mega:hover ul.menu__second-level2 {
  visibility: visible;
  opacity: 1;
}
li.menu__mega ul.menu__second-level2 > li {
  float: left;
  width: 160px;
  background-color: #fff;
  text-align: center;
  border-top: 1px solid #e2e2e2;
  border-bottom: 1px solid #e2e2e2;
  /*font-size: 80%;*/
}
li.menu__mega ul.menu__second-level2 > li a{
  padding: 4px 0;
  border-right: 1px solid #e2e2e2;
}
li.menu__mega ul.menu__second-level2 > li.first {
  width: 159px;
  border-left: 1px solid #e2e2e2;
}
li.menu__mega ul.menu__second-level2 > li.last {
  width: 159px;
  border-right: none;
}
li.menu__mega ul.menu__second-level2 > li a:hover {
  color: #000;
  text-decoration: none;
}
li.menu__mega ul.menu__second-level2 > li:nth-child(3n+2) {
    margin: 0;
}
@media screen and (max-width: 663px) {
  .menu {
    display: none;
  }
  .menu > li {
    display: none;
  }
}
/* content
=================================*/
#green_content{
  width: 950px;
  margin: 0 auto;
  font-size:10pt;
  /*font-size: 75%;*/
  color:#323232;
  line-height: 130%;
}
#green_content a:link,
#green_content a:active,
#green_content a:visited{
  color: #333;
  text-decoration: none;
}
#green_content a:hover{
  color: #38bfef;
  text-decoration: underline;
}

/* showcase 20141022-20171012
-------------------------
#green_showcase{
  margin-top: 5px;
  padding: 15px 0;
  margin-bottom: 30px;
  background-color: #f5f5f5;
  text-align: center;
}
#green_showcase .ecocafeImg{
  width: 1056px;
  text-align: left;
  margin: 0 auto;
}
#green_showcase a:hover img{
  opacity: 0.7;
  filter: alpha(opacity=70);
  -ms-filter: "alpha(opacity=70)"
}*/
/* parts
=================================*/
.img_line{
  padding: 2px;
  border: 1px solid #e5e5e5;
}
.img_line2{
  padding: 1px;
  border: 1px solid #e5e5e5;
}

/* clearFix
=================================*/
.clearfix:after{
  content:".";
  display:block;
  height:0;
  clear:both;
  visibility:hidden;
}
.clearfix{
  display:inline-table;
  min-height:1%;  /* for IE 7*/
}
/* Hides from IE-mac \*/
* html .clearfix{
  height:1px;
}
.clearfix{
  display:block;
}
/* End hide from IE-mac */
* html .clearfix {
  height: 1px;
  /*\*//*/
  height: auto;
  overflow: hidden;
  /**/
}
/* End hide from IE 6 */
.clear{
  float: none;
  clear: both;
}


/* showcase 20151130
-------------------------  */
#green_showcase2{
  height: 350px;
  margin-top: 5px;
  margin-bottom: 30px;
  background: url(../../images/index_img2/mv03_151023.jpg) no-repeat 50% 50%;
}


/* megamenu 20160602update */
/* 20160725 update */

#green_topbanner{
  margin-bottom: 30px;
  text-align: center;
}
#green_topbanner .ecocafeImg{
  width: 1056px;
  margin: 0 auto;
}
#green_topbanner a:hover img{
  opacity: 0.7;
  filter: alpha(opacity=70);
  -ms-filter: "alpha(opacity=70)"
}

#smp_footer{
  display: none;
}
.gsBack01 {
  display: none;
}

@media screen and (max-width: 663px) {
  .gsBack01 {
    display: block;
    text-align: center;
    padding: 10px 0;
    margin: 20px 0;
  }
  .gsBack01 a {
    /*font-size: 78%;*/
    font-weight: bold;
    background: url(../../images/ico_arrow03.png) no-repeat left center;
    background-size: 10px 10px;
    -webkit-background-size: 10px 10px;
    -moz-background-size: 10px 10px;
    padding-left: 18px;
  }
  #smp_footer{
    display: block;
    font-size:10pt;
  }
  .footerBtn {
    display: table;
    table-layout: fixed;
    width: 100%;
    min-width: 320px;
  }
  .footerBtn li {
    display: table-cell;
  }
  .footerBtn li a {
    display: block;
    padding: 34px 2px 7px;
    text-align: center;
    color: #fff;
    text-shadow: 0px -1px 1px #2c2c2c;
    -moz-box-shadow: 0px -1px 1px #2c2c2c;
    -webkit-box-shadow: 0px -1px 1px #2c2c2c;
    /*font-size: 57%;*/
    font-weight: bold;
  }
  .footerBtn li.tlogo a {
    border-left: 1px solid #353535;
    background: url(../../images/bg_footer_btn01.gif) left top repeat-x, url(../../images/ico_footer_home01.gif) center 9px no-repeat, #3F3F3F;
    background-size: 2px 2px, 19px 18px;
  }
  .footerBtn li.green a {
    border-left: 1px solid #353535;
    background: url(../../images/bg_footer_btn01.gif) left top repeat-x, url(../../images/ico_footer_green01.gif) center 9px no-repeat, #3F3F3F;
    background-size: 2px 2px, 19px 18px;
  }
  #smp_footer .footerMenu{
      /*font-size: 86%;*/
      border-top: 1px solid #ccc;
  }
  #smp_footer .footerMenu>li{
    text-align: center;
    border-bottom: 1px solid #ccc;
  }
  #smp_footer .footerMenu li a{
    display: block;
    padding: 1.2em 0;
  }
  #smp_footer .footerMenu>li.fst{
    padding: 0;
    border: none;
  }
  #smp_footer .footerMenu li ul.second{
    overflow: hidden;
    border-bottom: 1px solid #ccc;
  }
  #smp_footer .footerMenu li ul.second li{
    display: block;
    float: left;
    width: 49%;
  }
  #smp_footer .footerMenu li ul.second li.border{
    border-bottom: 1px solid #ccc;
  }
  #smp_footer .footerMenu li ul.second li:nth-child(odd){
    border-right: 1px solid #ccc;
  }
}



/*================================================================================
#productsLink01
*/
/* base
------------------------- */
#productsLink01{
}
#productsLink01 p{
  text-align: center;
}

/* value
------------------------- */
#productsLink01 .contArea01{
  background: url(../../images/productsLink/backgroundImg01.gif) repeat-x 50% 50%;
  width: 100%;
  height: 210px;
  overflow: hidden;
  margin-top: 15px;
}
#productsLink01 a{
  text-decoration: none !important;
}
#productsLink01 a:hover{
  color: #666;
}
#productsLink01 .contArea01 dt{
  margin-left: 60px;
  float: left;
}
#productsLink01 .contArea01 dd{
  width: 400px;
  padding-left: 20px;
  margin: 40px 0 0 auto;
}
#productsLink01 .contArea01 dd span{
  display: block;
  border: 3px solid #01ab64;
  padding: 3px 10px;
  color: #01ab64;
  background: #fff;
  width: 8em;
  text-align: center;
  margin-top: 15px;
}
.mt60{
  margin-top: 60px;
}
.cont_wrap.pLink {
  margin-bottom: 20px;
}

/* story
------------------------- */
#productsLink01 p.story{
  font-size: 117%;
  font-weight: bold;
}
#productsLink01 .contArea02{
  background: url(../../images/productsLink/backgroundImg01.gif) repeat-x 50% 50%;
  width: 100%;
  height: 210px;
  overflow: hidden;
  margin-top: 10px;
}
#productsLink01 a{
  text-decoration: none !important;
  color: #666 !important;
}
#productsLink01 a:hover{
  color: #666;
}
#productsLink01 .contArea02 dt{
  margin-left: 60px;
  float: left;
}
#productsLink01 .contArea02 dd{
  width: 340px;
  padding-left: 20px;
  margin: 45px 0 0 auto;
}
#productsLink01 .contArea02 dd span{
  display: block;
  padding: 3px 10px;
  color: #fff;
  background: #000;
  width: 8em;
  text-align: center;
  margin-top: 15px;
}

@media screen and (max-width: 663px) {
  #productsLink01 p.story{
    font-size: 117%;
    font-weight: bold;
  }
  #productsLink01 .contArea02{
    background: none;
    width: 100%;
    height: auto;
    overflow: hidden;
    margin-top: 0;
  }
  #productsLink01 a{
    text-decoration: none !important;
    color: #666 !important;
  }
  #productsLink01 a:hover{
    color: #666;
  }
  #productsLink01 .contArea02 dt{
    margin-left: 0;
    float: none;
    width: 100%;
  }
  #productsLink01 .contArea02 dt img{
    width: 100%;
    height: auto;
  }
  #productsLink01 .contArea02 dd{
    width: 100%;
    padding-left: 0;
    margin: 10px 0 0 0;
    line-height: 1.2em;
  }
  #productsLink01 .contArea02 dd span{
    display: block;
    padding: 10px 10px;
    color: #fff;
    background: #000;
    width: 100%;
    text-align: center;
    margin-top: 15px;
    margin-bottom: 30px;
  }
}

#productsLink01 .contArea03{
  background: url(../../images/productsLink/backgroundImg01.gif) repeat-x 50% 50%;
  width: 100%;
  height: 210px;
  overflow: hidden;
  margin-top: 10px;
}
#productsLink01 a{
  text-decoration: none !important;
}
#productsLink01 a:hover{
  color: #666;
}
#productsLink01 .contArea03 dt{
  margin-left: 60px;
  float: left;
}
#productsLink01 .contArea03 dd{
  width: 340px;
  padding-left: 20px;
  margin: 45px 0 0 auto;
}
#productsLink01 .contArea03 dd a{
  text-decoration: none !important;
  display: block;
  margin-top: 10px;
  background: #000;
  padding: 3px 10px;
  color: #fff !important;
  width: 16em;
}
#productsLink01 .contArea03 dd a:hover{
  color: #fff !important;
}

@media screen and (max-width: 663px) {
  #productsLink01 .contArea03{
    background: none;
    width: 100%;
    height: auto;
    overflow: hidden;
    margin-top: 10px;
  }
  #productsLink01 a{
    text-decoration: none !important;
  }
  #productsLink01 a:hover{
    color: #666;
  }
  #productsLink01 .contArea03 dt{
    margin-left: 0;
    float: none;
    width: 100%;
  }
  #productsLink01 .contArea03 dd{
    width: 100%;
    height: auto;
    padding-left: 0;
    margin: 10px 0 0 0;
    line-height: 1.2em;
  margin-bottom: 30px;
  }
  #productsLink01 .contArea03 dd a{
    text-decoration: none !important;
    display: block;
    margin-top: 10px;
    background: #000;
    padding: 10px 10px;
    color: #fff !important;
    width: 100%;
  }
  #productsLink01 .contArea03 dd a:hover{
    color: #fff !important;
  }
}

#productsLink01 .contArea04{
background: url(../../images/productsLink/backgroundImg01.gif) repeat-x 50% 50%;
width: 100%;
height: 210px;
overflow: hidden;
margin-top: 10px;
font-size: 12px;
}
#productsLink01 a{
text-decoration: none !important;
}
#productsLink01 a:hover{
color: #666;
}
#productsLink01 .contArea04 dt{
  margin-left: 120px;
  float: left;
}
#productsLink01 .contArea04 dd{
  width: 480px;
  padding-left: 20px;
  margin: 45px 0 0 auto;
  line-height: 1.8;
}
#productsLink01 .contArea04 dd span{
  display: block;
  padding: 3px 10px;
  color: #fff;
  background: #000;
  width: 8em;
  text-align: center;
  margin-top: 15px;
}
#productsLink01 .contArea04 dd span.products{
  display: block;
  float: left;
  width: 12em;
  margin-right: 10px;
}
#productsLink01 .contArea04 dd span.sessui{
  display: block;
  float: left;
  width: 12em;
  background: #30a241 !important;
}
/*================================================================================
/#productsLink01
*/


@media screen and (max-width: 767px) {
  img {
    max-width: 100%;
    height: auto;
  }
  #green_pankuzu {
    display: none;
  }
  #green_logo,
  .menu,
  li.menu__mega ul.menu__second-level,
  li.menu__mega ul.menu__second-level2,
  #green_content,
  #green_showcase .ecocafeImg,
  #green_topbanner .ecocafeImg {
    width: 100%;
    box-sizing: border-box;
  }
  .menu > li {
    width: 25%;
    box-sizing: border-box;
  }
  li.menu__mega ul.menu__second-level > li {
    display: none;
  }
  li.menu__mega ul.menu__second-level2 > li {
    width: 100%;
    box-sizing: border-box;
  }

}


/* showcase 20171012
-------------------------  */
/*
#green_showcase{
  margin-top: 5px;
  padding: 40px 0 50px 0;
  margin-bottom: 30px;
  background: url(../../../images/index_img2/green_showcase_bg.jpg) no-repeat center center;
	background-size: cover;
  text-align: center;
}
#green_showcase .ecocafeImg{
  text-align: center;
  margin: 0 auto;
}
#green_showcase a{
	background: #fff;
	padding: 10px 30px;
	display: inline-block;
	font-size: 120%;
}
#green_showcase a:hover{
  opacity: 0.9;
  filter: alpha(opacity=90);
  -ms-filter: "alpha(opacity=90)";
	  color: #666;
	text-decoration: none;
}

#green_showcase > p,
#green_showcase > a {
  animation: anime1 2s ease;
}
@keyframes anime1 {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
*/


/* 2019.11.27 update *************************************************************************** */
#green_pankuzu {
  width: 960px;
  margin: 1.5em auto;
  font-size: 11px;
}
#green_pankuzu a,
#green_pankuzu a:link {
  color: #1391ce;
}
#green_pankuzu a:visited {
  color: #005e99;
}
#green_pankuzu .pankuzu_list {
  margin-top: 0;
}
#green_pankuzu .pankuzu_list li {
  padding: 0;
  margin: 0;
}
.inner-green {
  position: relative;
  max-width: 960px;
  width: 90.625%;
  margin: auto;
  font-size: 14px;
}
.green_header_ttl {
 padding: .5em 0;
  line-height: 1.5;
  font-size: 171.4%;
  font-weight: bold;
  color: #183089;
}
.green_header nav {
  position: absolute;
  display: none;
  width: 100%;
  z-index: 100;
}
.green_menu .toggle {
  position: relative;
  display: block;
  padding: 1em;
  box-sizing: border-box;
  background-color: #183089;
  border: solid 1px #183089;
  line-height: 1;
  text-align: center;
  color: #fff;
}
.green_menu .toggle::after {
  content: "";
  position: absolute;
  right: 1em;
  top: 0;
  bottom: 0;
  display: block;
  width: 6px;
  height: 5px;
  margin: auto;
  background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%206%205%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20fill%3D%22%23fff%22%20d%3D%22M3.000%2C5.000%20L6.000%2C-0.000%20L0.000%2C-0.000%20L3.000%2C5.000%20Z%22%2F%3E%3C%2Fsvg%3E') no-repeat center;
  background-size: contain;
}
.green_menu dl {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  background-color: #183089;
  vertical-align: middle;
}
.green_menu dt {
  margin: 0;
  padding: .5em;
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  background-color: #183089;
  color: #fff;
}
.green_menu dd {
  margin: 0;
  width: 95%;
  background-color: #fff;
}
.green_menu dd a {
  color: #333;
}
.green_menu_list {
  border-top: solid 1px #183089;
  border-right: solid 1px #183089;
  border-bottom: solid 1px #183089;
}
.green_menu_box {
  padding: 2em 1.5em;
  box-sizing: border-box;
  line-height: 1.4;
}
.green_menu_box:nth-child(odd) {
  background-color: #f6f6f6
}
.green_menu_box figure {
  display: block;
  margin: 0;
}
.green_menu_box img {
  display: block;
  width: 100%;
}
.green_txt {
  position: relative;
  padding: 1.5em 0 0;
}
.green_txt .lbl {
  position: absolute;
  top: -1em;
  left: 0;
  display: inline-block;
  width: 52%;
  padding: .2em 0;
  background-color: #1a328a;
  text-align: center;
  font-size: 85.7%;
  color: #fff;
}
.green_menu_box p {
  margin-bottom: 1em;
}
.green_menu_box ul li a {
  position: relative;
  display: block;
  padding-left: .75em;
}
.green_menu_box ul li a::before {
  content: "";
  position: absolute;
  left: 0;
  top: .5em;
  display: block;
  width: 5px;
  height: 6px;
  margin: auto;
  background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewbox%3D%220%200%205%206%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20fill%3D%22%23666%22%20d%3D%22M5.000%2C2.999%20L-0.000%2C-0.001%20L-0.000%2C5.999%20L5.000%2C2.999%20Z%22%2F%3E%3C%2Fsvg%3E') no-repeat center;
  background-size: contain;
  vertical-align: middle;
}
.green_top {
  border-right: solid 1px #183089;
  border-bottom: solid 1px #183089;
  text-align-last: center;
}
.green_top a {
  display: block;
  padding: .5em 1em;
}
.green_top a::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 6px;
  margin-right: .5em;
  background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewbox%3D%220%200%205%206%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20fill%3D%22%23666%22%20d%3D%22M5.000%2C2.999%20L-0.000%2C-0.001%20L-0.000%2C5.999%20L5.000%2C2.999%20Z%22%2F%3E%3C%2Fsvg%3E') no-repeat center;
  background-size: contain;
  vertical-align: middle;
}
.green_footer {
  margin: 3em 0;
}
@media screen and (min-width: 768px), print {
  .green_menu dl {
    align-items: center;
  }
  .green_menu dt {
    padding: 1em .8em;
    font-size: 128.6%;
  }
  .green_menu .toggle {
    position: absolute;
    top: .6em;
    right: 0;
    display: block;
    width: 15.625%;
    padding: 1em;
    box-sizing: border-box;
    background-color: #183089;
    text-align: left;
    font-size: 114.3%;
    color: #fff;
    cursor: pointer;
  }
  .green_menu_list {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
  }
  .green_menu_box {
    width: 25%;
  }
}