@charset "utf-8";
/* -------------------------------------
     Site CSS
 (c) Copyright 2006 Sketches of Design
     version 2006-09-01
------------------------------------- */

/*  1300
--------------------------------------*/
@media screen and (max-width: 1300px) {


#hdmenu #global-nav ul li{
  margin: 0 0 0 20px;
  font-size: 1.3rem;
}


header p#b-logo,
header p#b-logo a,
header p#b-logo a img{
  width: 212px;
  height: 32px;
}
}


/*  1224
--------------------------------------*/
@media screen and (max-width: 1224px) {

main #navigation li{
  font-size: 1.4rem;
}
body#home main #pickup ul li p.text{
  font-size: 1.5rem;
}

body#home main #pickup ul li p.pic{
  height: 150px;
}
/*
body#home main #pickup ul li{
  width: 18%;
}
body#home main #pickup ul .facility{
  width: 23%;
}*/


}
/*  1024
--------------------------------------*/
@media screen and (max-width: 1024px) {

#hdmenu,
.inner {
  width: 100%;
  padding: 0;
}
main #navigation li,
#hdmenu #global-nav ul li{
  font-size: 1.3rem;
}
/* menu */
header{
  height: 60px;
}
#hdmenu{
    margin-top: 0;
    top: 0;
    position: fixed;
    height: 60px;
    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 #global-nav ul{
  margin: auto;
  top: 0;
  right: 20px;
  bottom: 0;
  height: 20px;
}
#hdmenu p#b-logo{


  position: relative;
  z-index: 1000;

  margin: 17px 0 0 15px !important;
}

#global-nav ul li{
  margin: 0 0 0 10px;
}
#global-nav ul li.staff-blog{
  padding: 0 10px;
}
/*#content .block .inner{
  width: auto;
  padding: 0 5%;
}
*/



#mobile-head{
  position: absolute;
  top: 0;
  background: #fff;
  transition: top 0.65s ease-in;
  -webkit-transition: top 0.65s ease-in;
  -moz-transition: top 0.65s ease-in;
  width: 100%;
  height: 60px;
  z-index: 999;
}
#hdmenu #global-nav{
  position: absolute;
  top: -896px;
  width: 100%;
  padding: 0;
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
}
#hdmenu #global-nav ul,
#hdmenu #global-nav ul li{
  position: static;
}
#hdmenu #global-nav ul{
  list-style: none;
  right: 0;
  bottom: 0;
}
#hdmenu #global-nav ul li{
  margin: 0;
  width: 33.33%;
  background: rgba(255,255,255,.9);
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}
#hdmenu #global-nav ul li.staff-blog{
  border-left: none;
  padding: 0;
}
#hdmenu #global-nav ul li.contact{
  text-align: center;
  width: 66.67%;
}
#hdmenu.fixed #global-nav ul{
  right: 0;
  height: auto;
}
#hdmenu #global-nav ul li a,
#hdmenu.fixed #global-nav ul li a {
  width: 100%;
  display: block;
  padding: 10px;
  line-height: 1.5;
  color: #303130 !important;
}
#global-nav ul li.contact a span {
  background: url("../img/nav-contact.svg") 0 center no-repeat;
}
#nav-toggle,
#nav-toggle span {
  position: absolute;
}
#nav-toggle {
  display: block;
    right: 10px;
    top: 11px;
    width: 40px;
    height: 36px;
    cursor: pointer;
    z-index: 101;
}
#nav-toggle div {
   position: relative;
}
#nav-toggle p{
  font-size: 1.0rem;
  text-align: center;
}
#nav-toggle span {
    display: block;
    height: 2px;
    width: 65%;
    margin: auto;
    background: #595757;
    left: 0;
    right: 0;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
}
#nav-toggle span:nth-child(1) {
  top: 16px;
}
#nav-toggle span:nth-child(2) {
  top: 22px;
}
#nav-toggle span:nth-child(3) {
  top: 28px;
}
.open #nav-toggle span:nth-child(1),
.open #nav-toggle span:nth-child(3) {
  top: 24px;
}
.open #nav-toggle span:nth-child(1) {
  -webkit-transform: rotate(315deg);
  -moz-transform: rotate(315deg);
  transform: rotate(315deg);
}
.open #nav-toggle span:nth-child(2) {
  width: 0;
}
.open #nav-toggle span:nth-child(3) {
  -webkit-transform: rotate(-315deg);
  -moz-transform: rotate(-315deg);
  transform: rotate(-315deg);
}
.open #global-nav {
  -moz-transform: translateY(956px);
  -webkit-transform: translateY(956px);
  transform: translateY(956px);
}
#hdmenu #global-nav ul li a.active{
  padding: 10px 10px 10px 25px;
}
#hdmenu a.active::before{
  top: 0;
  bottom: 0;
  left: 10px;
  right: auto;
}


main section .inner{
  margin: 0 5% 40px 5%;
}
body#home main #ban-area,
body#home main #topics-area,
body#home main #pickup{
  margin: 0;
}
body#home main #pickup ul{
  flex-wrap: wrap;
}
body#home main #pickup ul li{
  margin: 0 0 20px 0;
/*
  width: 33.3% !important;*/
}
body#home main #pickup ul li p.text{
  line-height: 50px;
  font-size: 1.4rem;
}
body#home main #pickup ul li p.pic{
  height: 110px;
}
body#facility-idx main section .inner{
  width: auto;
}
body#facility-idx #content section img{
  max-width: 100%;
  height: auto;
  width /***/:auto;
}


}
/*  960
--------------------------------------*/
@media screen and (max-width: 960px) {
/* font */
/*body#home #content h2{
  font-size: 6.0rem;
}*/
main h1,
body#home main #main-pic h1{
  font-size: 4.0rem;
}
main h2{
  font-size: 2.0rem;
}
main h3{
  font-size: 1.6rem;
}
#hdmenu,
main .more a,
main .link a{
  font-size: 1.4rem;
}
main p,
main dl,
main table,
main ul,
#footer .privacy-area ul li a{
  font-size: 1.3rem;
}



/* menu */

#hdmenu{
  top: 0;
  position: fixed;
  margin-top: 0;
}
#hdmenu.fixed {
  padding-top: 0;
  background: transparent;
}
/**/
main section .inner,
#footer .inner,
#footer .privacy-area ul{
  width: auto;
}
body#home main #main-pic h1{
  top: 60px;
}
body#home main #main-pic img{
  max-width: 432px;
  width: 80%;
}
body#home main #main-pic .izumichan{
  left: 1%;
}
body#home main #main-pic .izumichan img{
  max-width: 216px;
  height: auto;
}

main #navigation li a::after{
  bottom: -12px;
  width: 6px;
  height: 6px;
  border-top: 1px solid #ea1f05;
  border-right: 1px solid #ea1f05;
}
main #navigation li{
  padding: 0 15px;
}
body#home main #news-area{
  margin: 0;
}
main .more a, main .link a{
  padding: 0 20px;
  line-height: 30px;
}
body#home main .block h2{
  margin: 0 0 30px 0;
}
#footer .inner{
  padding: 40px 5%;
}
#footer .privacy-area ul{
  margin: 0 5%;
}
body.blog #main-wrap-inner{
  margin: 0;
  padding: 40px 5%;
}
body.blog #main-wrap-inner:before{
  display: none;
}
body.blog main #content{
  width: 70%;
}
body.blog main aside{
  padding: 20px;
  width: 26%;
}

}
/*  768
--------------------------------------*/
@media screen and (max-width: 768px) {
img{
  max-width: 100%;
  height: auto;
  width /***/:auto;
}

/* diagram */
div.diagram a.sp{
  display: block !important;
}
div.diagram p.image{
  display: none;
}
div.diagram{
  position: relative;
}
div.diagram span{
  display: block;
  position: absolute;
  width: 30px !important;
  height: 30px !important;
  right: 0;
  margin: -40px 0 0 0;
}
div.diagram img{
  max-width: 100%;
  height: auto;
  width /***/:100%;
}

/**/
table tr th, table tr td{
  padding: 10px;
}
main .more a{
  font-family: sans-serif !important;
  padding: 0 20px 1px 20px;
}
body#compost-idx section .inner,
body#corporate-idx section .inner,
body#contact-idx section .inner{
  width: auto;
}
#titlearea{
  padding: 0 5% 30px 5%;
}
#main-wrap{
  padding: 30px 0 0 0;
}
#main-wrap-inner{
  margin: 0 5%;
  padding: 5%;
}
#main-wrap-inner::before{
  right: -5%;
  width: 5%;
}
body#home main #main-pic{
  height: 480px;
}
body#home main #main-pic h1 {
  top: 40px;
}
body#home main .izumichan{
  max-width: 20%;
  bottom: -50px;
  text-align: center;
}
body#home main .izumichan img{
  max-width: 100%;
}
body#home main .izumichan::before{
  width: 94px;
  height: 15px;
  background-size: 94px 15px !important;
}
body#home main #pickup ul li{
  margin: 0 0 15px 0;
  background: #fff;
  width: 100% !important;
}
body#home main #pickup ul li a{
  display: flex;
  align-items: center;
}
body#home main #pickup ul li p.pic{
  position: relative;
  width: 40%;
  height: 80px;
}
body#home main #pickup ul li p.pic img{
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}
body#home main #pickup ul li p.text{
  flex: 1;
  margin: 0;
}
body#home main #pickup ul li:hover p.text{
  width: 90%;
}
body#home main section dl dd{
  margin: -1.6em 0 10px 0;
  padding: 0 0 10px 7em;
}
body#home main #blog-data{
  margin: -160px 0 0 0;
  padding-bottom: 60px;
}
body.blog #main-wrap-inner,
body#home main #blog-data .inner{
  display: block;
}
body#home #content-inner{
  background-size: cover !important;
}
body#home main #blog-data .inner div{
  margin: 40px 0 0 0;
  width: 100%;
}
body#home main #data-area,
body#home main #topics-area .inner {
  padding: 16px;
}

body#home main #blog-data .ecocenter p.izumichan{
  position: absolute;
  right: 0;
  bottom: -100px;
}

body#home main #ban-area .inner a{
  flex-wrap: wrap;
  justify-content: flex-end;
  padding: 16px;
}
body#home main #ban-area .inner h2{
  width: 100%;
}



body#corporate-idx section #maparea,
body#corporate-idx section #maparea iframe{;
  width: 100%;
  height: 300px;
}
body#corporate-idx section #maparea iframe{
  position: static
}
body.blog main aside,
body.blog main #content,
body.blog main aside .newtopics{
  width: 100%;
}
body.blog main aside .category,
body.blog main aside .archive{
  width: 50%;
}
body.blog main aside{
  display: flex;
  flex-wrap: wrap;
  margin: 40px 0 0 0;
}
body.blog main aside ul li{
  margin: 0 0 10px 0;
}
body.blog main aside ul li span{
  display: inline;
  margin: 0 10px 0 0;
}
body.blog main aside{
  padding: 20px 20px 0 20px;
}
body#facility-idx #content #lv02-03 .facility-list p{
  width: 25%;
}
body#enterprise-idx #lv02-02 .sdgs{
  display: block;
  margin: 0 0 10px 0;
}
body#enterprise-idx #lv02-02 .sdgs div{
  margin: 0 0 15px 0;
  width: 100%;
}
body#enterprise-idx #lv02-02 .sdgs h2{
  margin: 0 0 20px 0;
}
body#enterprise-idx #lv02-02 .sdgs .image{
  margin: 0 auto;
  width: 80%;
}


}

/*  480
--------------------------------------*/
@media screen and (max-width: 480px) {
body#home main #main-pic h1{
  font-size: 2.0rem;
}
main h1{
  font-size: 3.0rem;
}
main{
  padding: 0 0 30px 0;
}
body#home main #ban-area .inner .more,
main .more a,
main .link a,
#footer .inner ul li a{
  font-size: 1.3rem;
}

body#home main #main-pic{
  padding: 40px 0 60px 0;
  height: auto;
}



body.blog main #content h2 p{
  font-size: 1.2rem;
}
#content{
  padding: 0 0 20px 0;
}
#main-wrap-inner{
  margin: 0;
}
#main-wrap-inner::before{
  display: none;
}
#hdmenu #global-nav ul li{
  width: 50% !important;
}
#footer #ft-menu{
  flex-wrap: wrap;
/*  display: none;*/
}
#footer #ft-menu ul{
  width: 50%;
}
#footer .privacy-area ul{
  flex-wrap: wrap;
  padding: 0 0 10px 0;
}
#footer .privacy-area ul li{
  padding: 10px 10px 0 0;
  line-height: 1.6;
}
#footer .privacy-area ul li.copy{
  width: 100%;
}
#footer .inner{
  padding: 20px 5%;
}
#footer .inner ul li{
  margin: 0 0 5px 0;
}
#footer .inner ul{
  width: 30%;
}
body#contact-idx #content #contact_submit input,
body#contact-idx #content #contact_submit input.submit,
#footer .inner ul:last-child{
  width: 40%;
}
body#home main #main-pic{
  padding: 40px 0 120px 0;
  background: url("../img/bg-home-main-pic.jpg") center top no-repeat;
  background-size: cover;
}
body#home main #main-pic p.pic{
  display: none;
}
body#home main #main-pic h1{
  position: static;
}
/*body#home main #main-pic{
  padding: 0 5%;
}
body#home main #main-pic ul{
  padding: 80px 0;
}
body#home main #main-pic ul li{
  letter-spacing: 0;
}
body#home main #main-pic ul li.text{
  margin: 10px 0 0 0;
}*/
body#corporate-idx main #lv02-02 table th{
  width: 6em;
}
body.blog main aside{
  margin: 20px 0 0 0;
}
body#enterprise-idx #lv02-02 ul,
body.blog main aside ul li span{
  display: block;
}
body.blog main #content{
  padding: 0 0 20px 0;
}
body.blog #main-wrap-inner{
  padding: 20px 5% 20px 5%;
}
#titlearea{
  padding: 0 5% 20px 5%;
}
body#contact-idx #content table th{
  padding: 20px 10px 20px 0;
}
body#enterprise-idx #lv02-02 ul li{
  margin: 0 0 10px 0 !important;
  padding: 15px;
  width : 100%;
}
body#enterprise-idx #lv02-02 h3{
  margin: 0 0 10px 0;
}
body#facility-idx #content .facility-list p{
  width: 50% !important;
}
body#facility-idx #content .facility-list p img{
  width: 60%;
}
body#facility-idx #content #lv02-01 table th{
  padding: 10px 0;
  width: 7em;
}


}
/*  375
--------------------------------------*/
@media screen and (max-width: 375px) {

body#facility-idx #content h4{
  font-size: 1.8rem;
}


}

/*  320
--------------------------------------*/
@media screen and (max-width: 320px) {

#footer #ft-menu ul{
  width: 100%;
  line-height: 1.2;
}
#footer #ft-menu ul a{
  font-size: 1.1rem;
}
body#facility-idx #content .facility-list p img{
  width: 80%;
}



}