@charset "utf-8";
/* -------------------------------------
     Site CSS
 (c) Copyright 2006 Sketches of Design
     version 2006-09-01
------------------------------------- */
*{
  margin: 0;
  padding: 0;
    box-sizing: border-box;
}
/*  General Rules
--------------------------------------*/
body{
  font-family: 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック','ヒラギノ角ゴ Pro W3', 'Noto Sans', 'Hiragino Kaku Gothic Pro', sans-serif;
  line-height: 1.6;
}
/* Defalut Settings */
.box{
  margin: 15px 0 !important;
  padding: 20px 20px 10px 20px;
  background: #f3f5f9;
  border: 1px solid #8498c6;
}
img{
  margin: 0 0 1em 0;
  border: 0;
  vertical-align: bottom;
}
br{
  letter-spacing: 0;
}
.first{
  margin-left: 0 !important;
}
main p{
  margin-top: 0;
  margin-bottom: 0.7em;
  letter-spacing:0.06em;
  line-height: 1.7;
}
p.image{
  margin:0;
  text-indent:0;
  text-align:center;
}
p.copy{
  text-indent:0;
  text-align:center;
  font-size: 1.1rem;
}
p.posted{
  margin-top: 2em !important;
  text-indent:0;
  text-align:right;
 /* font-size: 93%;*/
}
p.fLeft{
  float: left;
  display: inline;
  margin: 0 1.5em 0.5em 0;
}
p.fRight{
  float: right;
  display: inline;
  margin: 0 0 0.5em 1.5em;
}
#btt{
  position: fixed;
  right: 0;
  bottom: 0;
  margin: 0;
  z-index: 5000;
  width: 50px;
  height: 50px;
}
#btt a{
  background: url("../img/nav-btt.svg") 0 0 no-repeat;
}
#btt a:hover{
  filter: alpha(opacity=60);
  -moz-opacity:0.60;
  opacity:0.60;
}
.external {
    background: url("../img/nav_external.png") right center no-repeat;
    margin-right: 4px;
    padding-right: 14px;
}
.news-list a[href$=".pdf"],
a[href$=".pdf"]{   
  background: url("../img/nav-pdf.svg") no-repeat 100% 50%; 
  padding-right: 20px; 
}
a[target="_blank"]{
  background: url("../img/nav-blank.svg") no-repeat 100% 50%; 
  padding-right: 14px; 
}
span.arrow{
  font-family: Verdana, sans-serif;
  font-weight: bold;
}
/* Accessibility */
.skip{
  position:absolute;
  left:-10000px;
  width:0;
  /* \*/
  overflow: hidden !important;
  /* */
}
.accesibilty{
  display:none;
}
/* Form */
form{
  margin: 0 0 1em 0;
}
fieldset{
  padding: 0.25em 0.5em;
}
form dl{
  margin: 0 0 0.5em 0;
}
form dl dt{
  font-weight: normal;
}
form dl dd{
  margin-left: 0;
}
/* Defalut Link Design */
a{
  transition: .3s;
}
a:link,
a:visited,
a:active{
  color: #09318e;
  text-decoration: underline;
}
a:hover{
  color: #09318e;
  text-decoration: none;
/*  opacity: 0.5;*/
}
/* list */
ul{
  margin: 0 0 0.5em 0;
  padding-left: 1.5em;
  list-style:disc;
}
ul ul{
  margin:0;
  list-style:circle;
  padding-left:1em;
}
ol{
  margin: 0 0 0.5em 0;
  list-style: decimal;
  padding-left: 2.5em;
}
dl{
  margin: 0 0 0.5em 0;
}
dt{
  font-weight: bold;
}
dd{
  padding-left:1em;
}
main ul,
main ol{
  margin: 0 0 0 1em;
  padding: 0;
}
main ul{
  list-style-type: none;
}
main ol{
  margin: 0 0 1em 40px;
  list-style-position: outside;
}
main ol li,
main ul li{
  margin: 0 0 0.6em 0;
}
main ul li{
  position: relative;
  padding: 0 0 0 15px;
/*  background: url("../img/nav-bullet.png") 0 0.5em no-repeat;*/
}
main ul li:before{
  position: absolute;
  content: "";
  background-color: #8ac000;
  left: 0;
  top: 0.55em;
  margin: auto;
  height: 5px;
  width: 5px;
}
#bc-area{
}
ol.bc{
  margin: 20px 0 0 0 !important;
  padding: 0;
/*  width: 1000px;*/
  font-size: 1.1rem;
  list-style: none;
  border-bottom: none;
/*  text-align: right;*/
}
ol.bc li span.arrow{
  margin: 0 0 0 0.2em;
}
ol.bc li a{
  position: relative;
  padding-right: 1em;
  color: #fff;
}
ol.bc li a:hover{
}
ol.bc li{
  display: inline;
  color: #fff;
  margin: 0;
  padding: 0;
  margin-left: 0.5em;
}
ol.bc li a::after{
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    content: "";
    vertical-align: middle;
    right: 0;
    width: 4px;
    height: 4px;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
ol.bc li.first{
  background: none;
  padding-left: 0;
}
ol.bc li strong{
  color: #333;
  font-weight: normal;
}
ol.bc span{
  margin: 0 0 0 5px;
}
ul.flat{
  margin: 0 !important;
  list-style: none !important;
}
ul.flat li{
  display: inline;
}
/* table */
table{
  margin: 0 0 10px 0;
  border: none;
  border-collapse: collapse;
  border-spacing: 0;
  empty-cells: show;
  line-height: 1.25;
  /* \*/
  width: 100%;
  /* */
}
table col.digit{
  text-align: right;
}
table col.centering{
  text-align: center;
}
/*table tr.odd{
  background: #F7F7F7;
}
table tr.even{
  background: #fff;
}*/
table thead{
  border-bottom: 1px solid #c6c9c6;
}
table thead tr th,
table thead tr td{
  margin: 1px;
  color: #1E1F1E;
  text-align: left;
  font-weight: bold;
  border: none;
}
table thead tr th{
}
table tr th,
table tr td{
  border: none;
  border-bottom: 1px solid #c6c9c6;
  padding: 18px 20px;
  text-align: left;
  font-weight: normal;
}
table tr th{
  color: #000;
  vertical-align: top;
}
caption{
  text-align: left;
}
/*th, td{
  border: none;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
  padding: 0.1em 0.4em;
}*/
table ul, table ol, table dl{
  margin: 0;
}
table ul{
  padding: 0;
  list-style: none;
}
table caption{
  text-align: center;
}
table p.nav{
  margin-bottom: 0 !important;
}
table tr .left{
  text-align: left;
}
table tr .center{
  text-align: center;
}
table tr .right{
  text-align: right;
}
table tr p{
  margin: 0 0 15px 0 !important;
  padding: 0 !important;
}
table tr .text,
table tr .list{
  padding: 15px 15px 0 15px;
}
table ul li{
  margin: 0 0 15px 0 !important;
}
main table tr td ol{
  margin: 0 0 0 20px;
}
/* headline */
h1, h2, h3, h4, h5, h6{
  position: relative;
  font-weight: normal;
  text-align: left;
}
h1{
  margin: 0 auto;
  color: #fff;
  line-height: 1.4;
  font-size: 5.0rem;
}
h1 span{
  display: inline-block;
  background: #fff;
  padding: 0 10px 5px 10px;
  color: #303130;
}
#titlearea{
  padding: 0 60px 60px 60px;
}
main h2{
  margin: 60px 0 40px 0;
  padding: 0 0 15px 0;
  font-size: 3.0rem;
  color: #303130;
  letter-spacing: 0.1em;
}
main #content #lv02-01 h2{
  margin: 0 0 40px 0;
}
main h2:before,
main h3:before{
  position: absolute;
  content: "";
  left: 0;
}
main h2:before{
  background-color: #09318e;
  margin: auto;
  bottom: 0;
  height: 3px;
  width: 30px;
}
main h3{
  margin: 60px 0 20px 0;
  padding: 0 0 0 24px;
  color: #303130;
  font-size: 2.4rem;
}
main h3:before{
  background-color: #8ac000;
  top: 0.8em;
  height: 2px;
  width: 14px;
}
main h4{
  margin: 0 0 10px 0;
  color: #303130;
}
main h3,
main h4{
  letter-spacing: 0.05em;
  font-weight: 400;
}
/* decoration */
.banners a:hover,
.banners a:hover img{
  filter: alpha(opacity=75);
  -moz-opacity:0.75;
  opacity:0.75;
}
em{
  color: #303130;
  font-weight: bold;
  font-style: normal;
}
strong{
  color: #303130;
  font-size: 108%;
  font-weight: bold;
}
.nav{
  text-align: right;
/*  font-size: 85%;*/
}
.nav a{
  padding: 0 0 0 12px;
  background: url("../img/nav-arrow.png") left center no-repeat;
}
.weak{
  font-size: 85%;
  _font-size: small;
}
main blockquote{
  background-color: #f4f5f5;
  border: 1px solid #d2d2d2;
  color: #677880;
  margin: 1em 0 1.5em 0;
  padding: 0.5em 1em;
}
*:focus {
  outline: none;
}
/*----- clearfix -----*/
/* for modern browsers: Firefox, Safari, Opera */
.CFX:after{
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
/* for win IE7 ,mac IE */
.CFX{
  display: inline-table;
  min-height: 1%;
}
/* for win IE6 */
/* \*/
* html .CFX{height: 1% !important;}
.CFX{display: block;}
/* */

/*----- FIR -----*/
.FIR{
  text-indent: -10000px !important;
  /* \*/
  overflow: hidden !important;
  /* */
  background-repeat: no-repeat;
  background-position: 0 0;
}
.FIR a{
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  outline: 0;
}
ul.FIR, ol.FIR{
  margin: 0;
  padding: 0;
  list-style: none;
}
/*  Font
////////////////////////////////////////// */
html { font-size: 62.5%; } /* 10px */
body { font-size: 1.6rem; } /* 16px */

/*{
  font-family: 'Noto Sans JP', sans-serif;
  font-family: 'NotoSans-Light'\9;
  font-weight: 300;
}
*/
#hdmenu a,
h1,h2, h3, h4,
#footer ul li a,
main .link a,
body#facility-idx #content #lv02-03 p,
body#facility-idx #content #lv02-04 p,
body#home main #ban-area .inner,
body#home main #pickup ul li{
  font-family: 'Noto Sans JP', sans-serif;
  font-family: 'NotoSans-Regular'\9;
  font-weight: 400;
}
main #navigation li,
body#contact-idx #content #contact_submit input,
body#corporate-idx section .posted,
body#home main #main-pic ul li.text{
  font-family: 'Noto Sans JP', sans-serif;
  font-family: 'NotoSans-Medium'\9;
  font-weight: 500;
}
#hdmenu a.active,
#hdmenu a:hover{
  font-family: 'Noto Sans JP', sans-serif;
  font-family: 'NotoSans-Bold'\9;
  font-weight: 700;
}
main .more a{
  font-family: 'OpenSans-Regular';
}




/*  Layout
////////////////////////////////////////// */
/* body */
body{
  background: #fff;
  text-align: center;
  color: #666766;
  word-wrap: break-word;
}

/* wrapper */
#wrapper{
  margin: 0 auto !important;
  width: 100%;
  height: 100%;
  text-align: left;
}

/* header */
header{
  position: relative;
  margin: 0 auto;
  padding: 0;
  width: auto;
}
header p#b-logo{
  margin: 0 0 0 30px;
}
header p#b-logo,
header p#b-logo a{
  width: 265px;
  height: 40px;
}
header p#b-logo img{
  margin: 0;
  max-width: 100%;
}

/*----- hdmenu -----*/
#hdmenu {
  position: fixed;
  top: 0;
  margin: auto 0;
  padding: 27px 0 0 0;
  width: 100%;
  line-height: 1;
  z-index: 999;
  height: 90px;
}
#hdmenu a.active,
#hdmenu a:hover,
#hdmenu a{
  position: relative;
  display: block;
  color: #303130;
}
body#home #hdmenu a.active,
body#home #hdmenu a:hover,
body#home #hdmenu a{
  color: #fff;
}

#hdmenu a.active:before{
  position: absolute;
  content: "";
  bottom: -15px;
  left: 0;
  right: 0;
  margin: auto;
  background: #ea1f05;
  width: 6px;
  height: 6px;
  border-radius: 100px; 
  -webkit-border-radius: 100px; 
  -moz-border-radius: 100px; 
}
#hdmenu a,
#hdmenu{
  text-decoration: none;
}
#hdmenu .inner,
#global-nav ul li{
  position: relative;
}
#global-nav ul,
#global-nav ul li{
  margin: 0;
  background: none;
  padding: 0;
  list-style-type: none;
}
#global-nav ul{
  position: absolute;
  right: 20px;
  top: 30px;
  bottom: 0;
}
#global-nav ul li{
  float: left;
  margin: 0 0 0 30px;
  transition: transform .3s;
}
#global-nav ul li a{
  line-height: 20px;
}
body#home .fixed #global-nav ul li.staff-blog,
#global-nav ul li.staff-blog{
  border-right: 1px solid #ccc;
  border-left: 1px solid #ccc;
  padding: 0 15px;
}
body#home #global-nav ul li.staff-blog{
  border-right: 1px solid #fff;
  border-left: 1px solid #fff;
}
#global-nav ul li.contact a span{
  background: url("../img/nav-contact-wh.svg") 0 center no-repeat;
  padding: 0 0 0 30px;
}
body:not(#home) #global-nav ul li.contact a span,
.fixed #global-nav ul li.contact a span{
  background: url("../img/nav-contact.svg") 0 center no-repeat;
}
#nav-toggle{
  display: none;
}

/**/
#hdmenu.fixed {
    margin-top: 0;
    top: 0;
    position: fixed;
    padding: 0;
    height: 54px;
    background: #fff;
/*    background: rgba(255,255,255,.9);*/
    transition: top 0.65s ease-in;
    -webkit-transition: top 0.65s ease-in;
    -moz-transition: top 0.65s ease-in;
}
#hdmenu.fixed #global-nav ul{
  margin: auto;
  top: 0;
  right: 20px;
  bottom: 0;
  height: 20px;
}
#hdmenu.fixed #global-nav ul li a{
  line-height: 20px;
  color: #303130 !important;
}
#hdmenu.fixed #global-nav ul li{
  font-size: 1.3rem;
}
#hdmenu.fixed p#b-logo,
#hdmenu.fixed p#b-logo a,
#hdmenu.fixed p#b-logo a img{
  width: 169px;
  height: 25px;
}
#hdmenu.fixed  p#b-logo{
  margin: 15px 0 0 30px;
}
#hdmenu a.active:before{
  bottom: -10px;
}

/* diagram */
div.diagram a.sp,
div.diagram a.FIR,
div.diagram span{
  display: none;
}
div.diagram p.image{
  margin: 20px auto !important;
}
div.diagram{
  text-align: center;
}

/* footer */
#footer{
  margin: 0;
  background: #f2f2f2;
  width: 100%;
  overflow: hidden;
}
#footer .inner{
  margin: auto;
  padding: 60px 0;
  width: 960px;
}
#footer #ft-menu{
  display: flex;
}
#footer ul,
#footer ul li{
  margin: 0;
  background: none;
  padding: 0;
  list-style-type: none;
}
#footer ul li a{
  text-decoration: none;
}
#footer ul li a:hover{
  color: #09318e !important;
  text-decoration: underline;
}
#footer .inner ul{
  width: 33.33%;
}
#footer .inner ul li{
  margin: 0 0 10px 0;
}
#footer .inner ul li a{
    position: relative;
  padding: 0 0 0 14px;
  font-size: 1.4rem;
  color: #666766;
}
body.blog main aside ul li a::after,
#footer .inner ul li a::before{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    content: "";
    width: 6px;
    height: 6px;
    border-top: 1px solid #ea1f05;
    border-right: 1px solid #ea1f05;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
#footer .privacy-area{
  background: #fff;
}
#footer .privacy-area ul{
  display: flex;
  margin: auto;
  width: 960px;
}
#footer .privacy-area ul li{
  padding: 0 20px 0 0;
  line-height: 50px;
}
#footer .privacy-area ul li a{
  color: #666766;
  font-size: 1.4rem;
}
#footer .privacy-area ul li.copy{
  margin-left: auto;
  font-size: 1.1rem;
  padding: 0;
}



/*  content
////////////////////////////////////////// */

body#home #content-inner{
  background: url("../img/bg-home-02.jpg") left 0 no-repeat;
   background-size: contain !important;
   padding: 80px 0;
}
#titlearea{
  background: url("../img/bg-home-02.jpg") left 0 no-repeat;
  background-size: cover !important;
  padding: 60px 60px 120px 60px;
}
main{
  background: url("../img/bg-ft.svg") center bottom repeat-x;
  padding: 90px 0 60px 0;
  
}
body#home main{
  overflow: hidden;
  padding-top: 0;
}
#main-wrap-inner{
  position: relative;
  margin: -80px 40px 0 40px;
  background: #fff;
  padding: 60px;
}
main section .inner{
  margin: auto;
  width: 1100px;
}
main section .col2{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
body#corporate-idx section .inner,
body#compost-idx section .inner,
body#contact-idx section .inner{
  width: 700px;
} 
main #navigation{
  text-align: center;
  font-size: 1.8rem;
  margin: 0;
}
main #navigation li{
  display: inline;
  margin: 0;
  padding: 20px;
}
main #navigation li::before{
  display: none;
}
main #navigation li a{
  position: relative;
  top: 0;
  text-decoration: none;
  color: #303130;
  transition: all 0.3s;
}
main #navigation li a::after{
  content: "";
  display: block;
  position: absolute;
  bottom: -15px;
  left: 50%;
  margin: auto;
  width: 10px;
  height: 10px;
  border-top: 2px solid #ea1f05;
  border-right: 2px solid #ea1f05;
  transform: translateX(-50%) rotate(135deg);
}
main #navigation li a:hover{
  top: 5px;
  color: #ea1f05;
}
/**/

body#home main #ban-area .inner .more,
body#home main #blog-data .ecocenter .balloon p.more,
main .more a,
main .more a::before,
main .link a{
  border-radius: 50px; 
  -webkit-border-radius: 50px; 
  -moz-border-radius: 50px; 
}
body#home main #ban-area .inner .more,
main .more a{
  width: 140px;
}

body#home main #ban-area .inner .more,
body#home main #blog-data .ecocenter .balloon p.more,
main .more a,
main .link a{
  position: relative;
  display: inline-block;
  border: 1px solid #c6c9c6;
  background: #fff;
  color: #1e1f1e;
  text-decoration: none;
  padding: 0;
  line-height: 36px;
  font-size: 1.6rem;
  text-align: center;
}
main h2,
main .link a span{
  position: relative;
}
body#home main #ban-area .inner .more::before,
main #data-area p.arrow a::before,
body#home main #blog-data .ecocenter .balloon p.more::before,
main h2 .more,
main .more a::before,
main .link a span::before{
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
}

body#home main #ban-area .inner .more::before,
body#home main #blog-data .ecocenter .balloon p.more::before,
main .more a::before{
  right: 10px;
  margin: auto;
  content: "";
  width: 5px;
  height: 5px;
  background: #ea1f05;
}
main .more a:hover{
  letter-spacing: 0.3em;
}
main h2 .more a:hover{
  background: #fde9e6;
}
main .link a{
  display: block;
  text-align: center;
  padding: 5px;
}
main .link a span{
  padding: 0 15px 0 0;
}
main .link a span::before{
    margin: auto;
    content: "";
    width: 6px;
    height: 6px;
    border-top: 1px solid #ea1f05;
    border-right: 1px solid #ea1f05;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
main .link a:hover{
  letter-spacing: 0.2em;
  background: #fde9e6;
}

/**/
.effect-fade{
  opacity: 0;
  transform: translate(0, 50px);
  transition: all 1200ms;
}
.effect-fade.effect-scroll {
  opacity: 1;
  transform: translate(0, 0);
}





/*  home
--------------------------------------*/
body#home main #main-pic{
  position: relative;
  padding: 0;
  background: url("../img/bg-home-main-pic.jpg") center bottom no-repeat;
  background-size: cover;
  height: 620px;
}
body#home main #main-pic p{
  margin: 0;
}
body#home main #main-pic img{
  max-width: 100%;
  margin: 0;
}
body#home main #main-pic h1{
  position: absolute;
  top: 150px;
  left: 0;
  right: 0;
  margin: auto;
  font-size: 4.6rem;
  text-align: center;
  letter-spacing: 0.2em;
}
body#home main #main-pic h1 span{
  display: inline-block;
  animation-duration: 2s;
  animation-name: fadein01;
}
body#home main #main-pic .izumichan{
  position: absolute;
  bottom: -30px;
  left: 10%;
}
body#home main .izumichan img{
  animation: floating-y 1.8s ease-in-out infinite alternate-reverse;

}
@keyframes floating-y{
  0% {
    transform: translateY(-30px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes fadein01 {
  from {opacity: 0; transform: translate(0, 60px);}
  to   {opacity: 1; transform: translate(0, 0);}
}
@keyframes fadein02 {
  from {opacity: 0; transform: translate(0, 60px);}
  20%  {opacity: 0; transform: translate(0, 60px);}
  to   {opacity: 1; transform: translate(0, 0);}
}

body#home main .izumichan::before{
  position: absolute;
  content: "";
  bottom: -30px;
  left: 0;
  right: 0;
  margin: auto;
  width: 188px;
  height: 30px;
  background: url("../img/bg-kage-01.png") 0 0 no-repeat;
    background-size: auto;
  background-size: 188px 30px !important;
  animation: kage 1.8s ease-in-out infinite alternate-reverse;
}
@keyframes kage {
  0% {
    transform:scale(1);
    opacity: 0.5;
  }
  100% {
    transform:scale(1.7,1.2);
    opacity: 1;
  }
}

/**/
body#home main section{
  margin: 0 60px;
}
body#home main #pickup{
  margin: 0 40px 60px 40px;
  background: none;
  padding: 0;
}
body#home main #pickup ul,
body#home main #pickup ul li{
  margin: 0;
  padding: 0;
}
body#home main #pickup ul{
  display: flex;
}
body#home main #pickup ul li:last-child{
  margin-left: auto;
}
body#home main #pickup ul li{
  overflow: hidden;
  margin-right: 10px;
  border: 2px solid #fff;
  border-radius: 10px;
  box-shadow: 10px 10px 0 #278957;
  width: 23.5%;
}
body#home main #pickup ul li:last-of-type{
  margin-right: 0;
}
body#home main #pickup ul li:before{
  display: none;
}
body#home main #pickup ul li a{
  color: #303130;
  text-decoration: none;
}
body#home main #pickup ul li p.pic{
  margin: 0;
  width: 100%;
  overflow: hidden;
}
body#home main #pickup ul li p.pic img{
  margin: 0;
  max-width: 100%;
  height: auto;
  width /***/:auto;
  transition: .3s;
}
body#home main #pickup ul li p.text{
  position: relative;
  background: #fff;
  margin: 0 auto;
  padding: 16px 20px;
  transition: .3s;
  letter-spacing: 0;
}
body#home main #pickup ul li p.text span{
  position: relative;
  display: block;
  vertical-align: middle;
}
body#home main #pickup ul li p.text span::before{
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    content: "";
    width: 8px;
    height: 8px;
    border-top: 2px solid #ea1f05;
    border-right: 2px solid #ea1f05;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
body#home main #pickup ul li.staff-blog p.text span::before{
    border-top: 2px solid #8ac000;
    border-right: 2px solid #8ac000;
}
body#home main #pickup ul li:hover img{
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
}
body#home main #pickup ul li:hover p.text{
  background: #e8f2cc;
  letter-spacing: 0.1em;
  width: 100%;
}

/**/
body#home main .block h2{
  margin: 0 0 50px 0;
}

body#home main #blog-data{
  margin: -80px 0 0 0;
  background: #fff;
  padding-top: 160px;
}

body#home main #data-area{
  width: 75%;
}
body#home main #data-area h2{
  margin-bottom: 25px;
}
main #data-area p.arrow{
  margin: 0 0 20px 0;
}
main #data-area p.arrow a{
  position: relative;
  background: none;
  padding: 0 0 0 16px;
}
main #data-area p.arrow a::before{
    margin: auto;
    content: "";
    right: auto;
    left: 0;
    width: 6px;
    height: 6px;
    border-top: 1px solid #ea1f05;
    border-right: 1px solid #ea1f05;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
body#home main #blog-data .ecocenter{
  position: relative;
  flex: 1;
  margin-left: 40px;
}
body#home main #blog-data .ecocenter a{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  text-decoration: none;
}
body#home main #blog-data .ecocenter p.izumichan{
  position: relative;
  bottom: -180px;
  animation: floating-y 1.8s ease-in-out infinite alternate-reverse;
  text-align: center;
}
body#home main #blog-data .ecocenter p.izumichan::before{
  bottom: -40px;
}
body#home main #blog-data .ecocenter .balloon{
  position: relative;
  flex: 1;
  border-radius: 30px;
  background: url("/img/bg-factory-wh.svg") center bottom repeat-x #ff8e14;
  padding: 30px;
  color: #fff;
  max-width: 330px;
}
body#home main #blog-data .ecocenter .balloon::before{
  position: absolute;
  content: "";
  right: -30px;
  top: 0;
  bottom: 0;
  margin: auto;
  background-color: #ff8e14;
  width: 30px;
  height: 40px;
  clip-path: polygon(0 0, 0% 100%, 100% 50%);
}
body#home main #blog-data .ecocenter .balloon h3,
body#home main #blog-data .ecocenter .balloon p{
  color: #fff;
}
body#home main #blog-data .ecocenter .balloon h3{
  margin: 0 0 20px 0;
  padding: 0;
  font-size: 2.0rem;
  font-weight: 700;
}
body#home main #blog-data .ecocenter .balloon h3::before{
  content: none;
}
body#home main #blog-data .ecocenter .balloon p:not(.more){
  font-size: 1.8rem;
}

body#home main #blog-data .ecocenter .balloon p.more{
float: right;
  background-color: #fff;
  width: 100px;
  color: #303130;
}

body#home main #data-area,
body#home main #ban-area .inner,
body#home main #topics-area .inner{
  overflow: hidden;
  border: 2px solid #40b15d;
  border-radius: 30px;
  box-shadow: 10px 10px 0 #40b15d;
  background-color: #fff;
  padding: 36px;
}

body#home main #ban-area{
  margin-bottom: 60px;
}
body#home main #ban-area .inner{
  padding: 0;
}
body#home main #ban-area .inner a{
  text-decoration: none;
  padding: 36px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
body#home main #ban-area .inner h2{
  margin: 0;
  padding: 0;
}
body#home main #ban-area .inner h2::before{
  content: none;
}
body#home main #ban-area .inner .more{
  margin-bottom: 0;
  max-height: 38px;
}


body#home main #data-area{
  border: 2px solid #8ac000;
  box-shadow: 10px 10px 0 #8ac000;
}

body#home main #data-area h2::before{
  background-color: #8ac000;

}

body#home main #topics-area h2:before{
  background-color: #40b15d;
}
body#home main #blog-area h2:before{
  background-color: #8ac000;
}
body#home main #topics-area{
  margin: 0 60px 0 60px;
}
body#home main #data-area .link{
  width: 100%;
}


/* blog */

body#testdata-idx main dl.news-list,
main #data-area dl.news-list{
  border-top: 1px solid #e0e0e0;
  padding-top: 20px;
}
main dl.news-list dt{
  font-weight: normal;
}
main dl.news-list dd{
  margin: -1.6em 0 20px 0;
  border-bottom: 1px solid #e0e0e0;
  padding: 0 0 20px 9em;
}


/* article */

body.article main p.more{
  margin: 60px auto 30px auto;
  text-align: center;
}
body.article main ul.pn{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 auto;
}
body.article main ul.pn li{
  max-width: 48%;
}
body.article main ul.pn li::before{
  content: none;
}

body.article main ul.pn li a{
  position: relative;
  display: block;
  padding-left: 16px;
}
body.article main ul.pn li a::before{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  content: "";
  width: 6px;
  height: 6px;
  border-top: 1px solid #ea1f05;
  border-right: 1px solid #ea1f05;
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
}
body.article main ul.pn li.nav-next a{
  padding: 0 16px 0 0;
}
body.article main ul.pn li.nav-next a::before{
  left: auto;
  right: 0;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
body.article main ul.pn li span{
  display: block;
  text-decoration: none;
  font-size: 1.2rem;
  color: #666766;
}



/*  corporate
--------------------------------------*/
body#corporate-idx main{
  overflow: hidden;
}
body#corporate-idx #content #lv02-01 h2{
  margin: 40px 0 40px 0;
}
body#corporate-idx section #maparea{
  position: relative;
  margin: 0 0 20px 0;
  height: 400px;
}
body#corporate-idx section #maparea iframe{
  position: absolute;
  left: -120px;
  width: 100vw;
}
body#corporate-idx section .posted{
  color: #1e1f1e;
}
body#corporate-idx section .posted span{
  font-size: 2.0rem;
}






/*  compost
--------------------------------------*/
body#compost-idx #content .image{
  margin: 0 0 40px 0;
}
body#compost-idx #lv02-01 dl dd{
  margin: -1.6em 0 10px 0;
  padding: 0 0 0 7em;
}
body#compost-idx #lv02-02 dl{
  margin: 40px 0 0 0;
}
body#compost-idx #lv02-02 dl dd{
  margin: -1.6em 0 10px 0;
  padding: 0 0 0 4em;
}
body#compost-idx #lv02-01 table{
  margin: 20px 0 0 0;
  font-size: 1.3rem;
}
body#compost-idx #lv02-01 table th,
body#compost-idx #lv02-01 table td{
  padding: 10px 0;
}
body#compost-idx #lv02-02 .lv03-01{
  margin: 20px 0 0 0;
  background: #f3f9e5;
  padding: 20px;
}
body#compost-idx #lv02-02 .lv03-01 h3{
  margin-top: 0;
}






/*  contact
--------------------------------------*/
body#contact-idx #content table input{
  padding: 2px;
}
body#contact-idx #content table span.text_small{
  display: block;
  margin: 5px 0 0 0;
  font-size: 1.4rem;
}
body#contact-idx #content table th{
  width: 11em;
}
body#contact-idx #content table td textarea,
body#contact-idx #content table td input{
  width: 90%;
}
body#contact-idx #content table tr.name input{
  width: 30%;
}
body#contact-idx #content #contact_submit{
  margin: 20px 0 0 0;
  text-align: center;
}
body#contact-idx #content #contact_submit input{
  position: relative;
  display: inline-block;
  border-radius: 50px; 
  -webkit-border-radius: 50px; 
  -moz-border-radius: 50px; 
  transition: .3s;
  border: none;
  background: #8ac000;
  color: #fff;
  text-decoration: none;
  padding: 0;
  line-height: 50px;
  font-size: 1.6rem;
  width: 140px;
  cursor: pointer;
   -webkit-appearance: none;
   border-radius: 0;
}
body#contact-idx #content #contact_submit input::before{
  position: absolute;
  top: 0;
  bottom: 0;
  right: 10px;
  margin: auto;
  content: "";
  width: 5px;
  height: 5px;
  background: #ea1f05;
}
body#contact-idx #content #contact_submit input.submit{
  background: #ea1f05;
  width: 200px;
}
body#contact-idx #content #contact_submit input:hover{
  color: #1e1f1e;
  letter-spacing: 0.3em;
  background: #e8f2cc;
}
body#contact-idx #content #contact_submit input.submit:hover{
  background: #fbd2cd;
}




/*  facility
--------------------------------------*/
body#facility-idx #content #lv02-01 table th{
  width: 9em;
}
body#facility-idx #content #lv02-03 h2,
body#facility-idx #content #lv02-04 h2{
  padding: 0 0 0 45px;
}
body#facility-idx #content #lv02-03 h2::before,
body#facility-idx #content #lv02-04 h2::before{
  display: none;
}
body#facility-idx #content #lv02-03 h2{
  background: url("../img/h2-round.svg") left center no-repeat;
}
body#facility-idx #content #lv02-04 h2{
  background: url("../img/h2-cross.svg") left center no-repeat;
}
body#facility-idx #content #lv02-03 h3,
body#facility-idx #content #lv02-04 h3{
  margin: 0 0 20px 0;
}
body#facility-idx #content #lv02-03 p,
body#facility-idx #content #lv02-04 p{
  color: #1e1f1e;
}
body#facility-idx #content h4{
  width: 100%;
  font-size: 2.0rem;
  color: #8ac000;
  text-align: center;
}
body#facility-idx #content .facility-list{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 0 20px 0;
  border: 1px solid #c6c9c6;
  padding: 20px;
  text-align: center;
}
body#facility-idx #content #lv02-03 .facility-list p{
  width: 20%;
}
body#facility-idx #content #lv02-04 .lv04-01 p{
  width: 25%;
}
body#facility-idx #content #lv02-03 .lv04-02{
  justify-content: center;
}
body#facility-idx #content .facility-list span{
  display: block;
}
body#facility-idx #content .facility-list img{

}







/*  enterprise
--------------------------------------*/
body#enterprise-idx #content .diagram{
  margin: 60px 0 0 0;
}
body#enterprise-idx #lv02-02 .sdgs{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 60px 0 20px 0;
}
body#enterprise-idx #lv02-02 .sdgs h2{
  margin: 0 0 40px 0;
}
body#enterprise-idx #lv02-02 .sdgs div{
  width : calc(100% - 280px) ;
}
body#enterprise-idx #lv02-02 .sdgs .image{
  width: 260px;
}
body#enterprise-idx #lv02-02 ul{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
body#enterprise-idx #lv02-02 ul,
body#enterprise-idx #lv02-02 ul li{
  margin: 0;
  padding: 0;
}
body#enterprise-idx #lv02-02 ul li{
  margin: 0 0 20px 0 !important;
  padding: 15px;
  width : calc(50% - 10px) ;
  border: 1px solid #8ac000;
}
body#enterprise-idx #lv02-02 ul li p{
  margin: 0;
}
body#enterprise-idx #lv02-02 h3{
  margin: 0 0 10px 0;
  font-size: 1.8rem;
}
body#enterprise-idx #lv02-02 ul li:before{
  display: none;
}


/*  blog
--------------------------------------*/
body.blog #main-wrap-inner{
  display: flex;
}
body.blog main #content{
  width: 76%;
}
body.blog main #content h2{
  margin: 0 0 40px 0;
}
body.blog main #content h2 p{
  display: block;
  color: #666766;
  font-size: 1.3rem;
  letter-spacing: 0.05em;
}
body.blog main #content h2 p span{
  color: #09318e;
  margin: 0 0 0 10px;
}
body.blog main #content .images{
  text-align: center;
}
body.blog main #content img{
  max-width: 100%;
  height: auto;
  width /***/:100%;
}
body.topics main #content .box{
  background: #fef4f2;
  border: 1px solid #f48f82;
}
body.blog main #content .box a[href$=".pdf"]{   
  background-position: 0 50%; 
  padding: 0 0 0 20px; 
}
body.blog main #content .box span{
  display: block;
  padding: 0 0 0 20px; 
  font-size: 1.4rem;
}

/* aside */
body.blog main aside{
  margin-left: auto;
  background: #f3f9e5;
  padding: 30px;
  width: 20%;
  font-size: 1.4rem;
}
body.blog main aside h2{
  margin: 0 0 20px 0;
  font-size: 1.8rem;
  text-align: center;
}
body.blog main aside h2::before{
  right: 0;
}
body.blog main aside .newtopics h2::before{
  background: #ea1f05;
}
body.blog main aside .archive h2::before{
  background: #8ac000;
}
body.blog main aside ul{
  margin: 0 0 40px 0;
}
body.blog main aside ul li{
  margin: 0 0 15px 0;
}
body.blog main aside ul li span{
  display: block;
}
body.blog main aside ul li::before{
  display: none;
}
body.blog main aside ul li a::after{
  border-top: 1px solid #09318e;
  border-right: 1px solid #09318e;
}