@CHARSET "UTF-8";
/* ===================================================================
フォントの指定
=================================================================== */
@font-face { font-family: "Yu Gothic M"; src: local("Yu Gothic Medium"); }
@font-face { font-family: "Yu Gothic M"; src: local("Yu Gothic Bold"); font-weight: bold; }

/* ゴシック体 */
html body{
  font-family: -apple-system, BlinkMacSystemFont, "游ゴシック体", YuGothic, "Yu Gothic M", "游ゴシック Medium", "Yu Gothic Medium", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN W3", HiraKakuProN-W3, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "Helvetica Neue", HelveticaNeue, Helvetica, Arial, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

/* 明朝体
html body{
  font-family: "游明朝体", YuMincho, "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", Georgia, Times, "Times New Roman", serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}*/
/* ================================================================ */

html body{ background: #fff;}
html body #container{ line-height: 1; }
html body #container article,
html body #container section,
html body #container footer{ line-height: 1.5; }
img{ display: block; }
header a,
footer a{  text-decoration: none; }

a:not(.button):hover{ color: #ff5b00 ! important; }

/* ===================================================================
ベース
=================================================================== */
article { margin: 1rem auto 0;}

#container.area_flex{
  min-height: 100vh;
  -webkit-box-direction:normal;
  -moz-box-direction:normal;
  -webkit-box-orient:vertical;
  -moz-box-orient:vertical;
  -webkit-flex-direction:column;
  -moz-flex-direction:column;
  flex-direction:column;
}

#container .size {
  margin-left: auto;
  margin-right: auto;
}


#container{}


/* header */
header{
  font-size: 18px !important;
  padding-top: .5rem;
  border-top: 5px solid #87c554;

  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+53,e2f0d9+100 */
  background: rgb(255,255,255); /* Old browsers */
  background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(255,255,255,1) 53%, rgba(226,240,217,1) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 53%,rgba(226,240,217,1) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 53%,rgba(226,240,217,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e2f0d9',GradientType=0 ); /* IE6-9 */
}
header #menu {
  border-bottom: 5px solid #87c554;
  margin-top: 1rem;

}
header #menu ul { border-left: 1px solid #87c554;}
header #menu ul li {
  list-style-type: none;
  font-weight: bold;
  border-right: 1px solid #87c554;
  width: 25%;
}
header #menu ul li a {
  display: block;
  color: #555;
  text-decoration: none;
  padding: 0.5em 0;
}
header #menu ul li a:hover { color: #000;}
header #menu ul li span {
  font-weight: normal;
  color: #548235;
}


/* wrapper */
#container > #wrapper{}
  #wrapper > #main.flex-item,
  #wrapper > #sidebar.flex-item{
    -webkit-align-self:stretch;
    -moz-align-self:stretch;
    -ms-align-self:stretch;
    align-self:stretch;
  }

/* footer */
footer {
  font-size: 16px !important;
  border-top: 3px solid #87c554;
  padding-top: 2rem;
}
footer a { color: #000;}
footer .footer_address { margin-top: .8rem;}
footer .footer_menu { text-align: right;}
footer .footer_menu li + li { margin-left: 1rem;}
footer .footer_menu li + li:before {
  content: '｜';
  margin-right: 1rem;
}
footer .footer_text {
  margin-top: 1rem;
  border: 1px solid #bbb;
  padding: .3rem;
  background-color: #f7fff0;
}
footer .footer_text img {
  position: absolute;
  right: -5px;
}
.f_txt_box { position: relative;}

/* copyright */
#bsc-copyright{ font-size: .7em;}
#copyright {
  background: #87c554;
  color: #fff;
  padding: .2rem;
}


/* sidebar */
#sidebar { margin-right: .8rem; margin-top: 1rem;}

#sidebar .side_menu { border: 2px solid #bbb;}
#sidebar .side_menu h4 {
  background-color: #548235;
  color:#fff;
  padding: .5rem 0;
}
#sidebar .side_menu ul li + li {
  border-top: 2px dashed #bbb;
}
#sidebar .side_menu ul li a {
  display: block;
  padding: .5rem;
  text-decoration: none;
  color: #555;
}
#sidebar .side_menu ul li span { /* アイコン（丸） */
  background-color: #87c554;
  border-radius: 50%;
  box-sizing: border-box;
  display: inline-block;
  height: 10px;
  margin: 0 10px 3px 0;
  position: relative;
  vertical-align: middle;
  width: 10px;
}
#sidebar .side_menu ul li span:before { /* アイコン（三角） */
  border-bottom: 3px solid transparent;
  border-left: 3px solid #fff;
  border-right: 3px solid transparent;
  border-top: 3px solid transparent;
  content: "";
  display: block;
  left: 4px;
  position: absolute;
  top: 2px;
}
#sidebar .side_menu .child_list li a { padding-left: 1.3rem;}
#sidebar .side_menu .child_list li a:before {
  content:'▶';
  color: #87c554;
  font-size: .7rem;
  padding-right: .4rem;
}


#sidebar .side_nanner ul li + li { padding-top: .5rem;}



/* ===================================================================
見出し
=================================================================== */
h1{ font-size: 1.5rem;}
#sp_menu h1 { margin-left: .5em;}

#wrapper *+h2,
#wrapper *+h3,
#wrapper *+h4,
#wrapper *+h5{
  margin-top: 2rem;
}

body:not(#top) h2{
  text-align: right;
  font-size: 1.8rem;
  border-bottom: 3px solid #87c554;
}
body:not(#top) h2 div.bg_img {
  background: url(../img/h2_bg.jpg) no-repeat;
  background-size: 100%;
  padding: 4rem 3rem 4rem 0;
  color: #fff;
  text-shadow: 0px 0px 5px #5c9e2f,0px 0px 5px #5c9e2f;
}
h3{
  text-align: center;
  color: #fff;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#a9d18e+0,74b349+48,4b7430+100 */
  background: rgb(169,209,142); /* Old browsers */
  background: -moz-linear-gradient(top,  rgba(169,209,142,1) 0%, rgba(116,179,73,1) 48%, rgba(75,116,48,1) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  rgba(169,209,142,1) 0%,rgba(116,179,73,1) 48%,rgba(75,116,48,1) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  rgba(169,209,142,1) 0%,rgba(116,179,73,1) 48%,rgba(75,116,48,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9d18e', endColorstr='#4b7430',GradientType=0 ); /* IE6-9 */
  padding: .4rem 0;
  margin-bottom: 1rem;
}
h4{ text-align: center;}
h5{ font-size: 1.2rem; }

/* ===================================================================
section
=================================================================== */
/* #wrapper *+section{ margin-top: 2rem; } */

/* ===================================================================
テキスト
=================================================================== */
.fc_red { color: #f00;}
.bold { font-weight: bold;}


/* ===================================================================
汎用
=================================================================== */
/* ページトップに戻る */
#totop {
  z-index:2147483647;
  display: none;
  position: fixed;
  bottom: 4.3rem;
  right: 1rem;
}

#totop a {
  display: block;
  width: 2rem;
  height: 2rem;
  background: #333;
  text-align: center;
  color: #fff;
  text-decoration: none;
  line-height: 2rem;

  border-radius: 50%;            /* CSS3草案 */  
  -webkit-border-radius: 50%;    /* Safari,Google Chrome用 */
  -moz-border-radius: 50%;       /* Firefox用 */
  text-decoration: none ! important;
}

#totop a:hover{
  -webkit-filter: opacity(0.7);
  -moz-filter: opacity(0.7);
  -o-filter: opacity(0.7);
  -ms-filter: opacity(0.7);
  filter: opacity(0.7);
}


/* ===================================================================
list
=================================================================== */


/* ===================================================================
area
==================================================================== */
/* .button */
ul.area_button{
  margin: 0 !important;
  text-align: center;
}
  ul.area_button > li{ display: inline-block !important; }
  ul.area_button > li{ margin: 1rem; }

.button{ /* 単体でも一応使える(左寄せになる) */
  margin: 1rem auto;
  padding: .75rem 1rem;
  display: inline-block;
  background: #87c554;
  text-decoration: none;
  border: 2px solid #87c554;
  border-radius: 10px;            /* CSS3草案 */  
  -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */
  -moz-border-radius: 10px;       /* Firefox用 */
  /* 文字と文字の間隔をあける */
  line-height: 1;
  letter-spacing: .2em;
  min-width: 10em;
  color: #fff;
}
.button.back{
  background: #fff;
  color: #000;
}
.button:hover{
  background: #fff;
  color: #548235;
  cursor: pointer;
}


/* トップページ */
#top .main-img_area { border-bottom: 3px solid #87c554;}
#top #service {
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+53,e2f0d9+100 */
  background: rgb(255,255,255); /* Old browsers */
  background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(255,255,255,1) 53%, rgba(226,240,217,1) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 53%,rgba(226,240,217,1) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 53%,rgba(226,240,217,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e2f0d9',GradientType=0 ); /* IE6-9 */
}
#top #service h2{
  font-size: 1.3rem;
  color: #548235;
  border-left: 5px solid #548235;
  padding: .2rem 0.5rem;
  margin-bottom: 1rem;
  width: auto;
}
#top #service h2 > span { padding-left: .5rem;}
#top #service .service_item {
  width: 33%;
  border: 1px solid #ddd;
  padding: .5rem;
  background-color: #fff;
}
#top #service .service_item .service_text { height: 6rem;}
#top #service .service_item ul { height: 4.5rem;}
#top #service .service_item ul li a {
  color: #548235;
  text-decoration: none;
}
#top #service .service_item ul li span { /* アイコン（丸） */
  background-color: #548235;
  border-radius: 50%;
  box-sizing: border-box;
  display: inline-block;
  height: 10px;
  margin: 0 5px 3px 0;
  position: relative;
  vertical-align: middle;
  width: 10px;
}
#top #service .service_item ul li span:before { /* アイコン（三角） */
  border-bottom: 3px solid transparent;
  border-left: 3px solid #fff;
  border-right: 3px solid transparent;
  border-top: 3px solid transparent;
  content: "";
  display: block;
  left: 4px;
  position: absolute;
  top: 2px;
}
#top #service .service_item img {
  width: 100%;
  margin: .7rem 0;
}
#top #service .service_item .service_details a {
  text-decoration: none;
  color: #548235;
  font-weight: bold;
}
#top #service .service_item .service_details:after {
  content: '▶';
  color: #548235;
  font-size: .8rem;
  margin-left: .2rem;
}

#info {
  border: 3px solid #bbb;
  margin-top: 2rem;
  margin-bottom: 1rem;
  padding: .5rem;

/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#e2f0d9+0,ffffff+21,ffffff+100 */
background: rgb(226,240,217); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(226,240,217,1) 0%, rgba(255,255,255,1) 21%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(226,240,217,1) 0%,rgba(255,255,255,1) 21%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(226,240,217,1) 0%,rgba(255,255,255,1) 21%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2f0d9', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}
#info h2 {
  color: #548235;
  border-bottom: 2px solid #87c554;
  padding-left: .8rem;
}
#info h2 > span { padding-left: .5rem;}
#info dl {
  padding: .5rem 0;
  overflow: auto;
  height: 17rem;
}
#info dl dt ,#info dl dd { padding: 0 .5rem;}
#info dl dt:before {
  content:'▶';
  color: #548235;
  font-size: .8rem;
}
#info dl dt > .info_title { padding-left: .7rem;}
#info dl dd + dt {
  border-top: 1px solid #bbb;
  padding-top: .3rem;
  margin-top: .3rem;
}


/* 会社案内 */
#overview table { width: 100%;}
#overview table tr th { background-color: #eee;}
#overview table tr th ,#overview table tr td {
  padding: .5rem;
  border: 2px solid #bbb;
  vertical-align: middle;
}
#history table { width: 100%;}
#history table tr th {
  width: 20%;
  padding: .2rem;
  text-align: left;
}


/* 事業内容 */
#plastic ul.kaitori { margin-top: 1rem;}
#plastic ul.kaitori li { border: 1px solid #bbb;}
#plastic ul.kaitori li h4 {
  background-color: #548235;
  color: #fff;
  padding: .2rem 0;
}
#plastic ul.kaitori li p { padding: .3rem;}
#recycle-flow ul.flow li {
  margin: .7rem 0;
  background-color: #d6e9c5;
  border: 1.5px solid #548235;
  padding: .5rem;
}
#recycle-flow ul.flow li h4 {
  text-align:left;
  display: inline-block;
  border-bottom: 2px solid #548235;
  padding: 0 .5rem;
  margin-bottom: .8rem;
  margin-left: .3rem;
}
#recycle-flow ul.flow li p { text-indent: 1rem;}
#handling table { width: 100%; margin-top: 1rem;}
#handling table tr > * {
  border: 1px solid #bbb;
  padding: .3rem;
}
#handling table tr th {
  text-align: left;
  background-color: #d6e9c5;
}
#collection ul li { width: 19%; margin-top: .8rem;}

#boeki h4 {
  text-align: left;
  display: inline-block;
  border-bottom: 2px solid #548235;
  padding: 0 .5rem;
  margin-left: .3rem;
}
#boeki #thai { margin-bottom: 2rem;}
#boeki #thai ul li ,#boeki #diversion ul li { width: 24%; margin-top: .5rem;}


/* 個人情報保護方針 */
#privacy dl dt {
  display: inline-block;
  color: #548235;
  margin-bottom: .3em;
  margin-top: 1em;
}


/* お問い合わせフォーム */
#contact table.formTable{
  margin: 2rem auto;
  width: 100%;
}
  table.formTable tr > *{
    padding: .5rem 1rem;
    border: 1px solid #bbb;
  }
  table.formTable tr > th{
    width: 30%;
    font-size: .8em;
    text-align: left;
    vertical-align: middle;
    background-color: #eee;
  }
  table.formTable tr > td{
    width: 70%;
  }
  table.formTable tr > th.required:after {
    content: '必須';
    color: #fff;
    background-color: #f00;
    font-size: .8em;
    padding: .1rem;
    margin-left: .3rem;
  }
#contact table.formTable.check{
  border: 1px solid #ddd;
}
  table.formTable.check tr > *{
    border: 1px dashed #ddd;
  }
  table.formTable.check tr > th{
    background: #f9f9f9;
  }

table.formTable input[type="text"],
table.formTable input[type="password"],
table.formTable input[type="file"],
table.formTable input[type="tel"],
table.formTable input[type="url"],
table.formTable input[type="email"],
table.formTable input[type="number"],
table.formTable textarea{
  max-width: 100%;
}
table.formTable input[type="text"],
table.formTable input[type="password"],
table.formTable input[type="file"],
table.formTable input[type="tel"],
table.formTable input[type="email"],
table.formTable input[type="number"]{
  width: 18em;
}
table.formTable textarea{
  width: 28em;
}



input[type="submit"],
input[type="button"],
input[type="reset"] {
  -webkit-appearance: none;
}

/* ===================================================================
media screen
=================================================================== */
/* スマホ */
@media screen and (max-width: 640px){
  .size > * {
    padding-left: .5rem;
    padding-right: .5rem;
    width: 100%;
  }
  header { display: none;}

  div.main-img_area img { padding-left: 0; padding-right: 0;}

  #wrapper > div:not(.main-img_area) ,#service > div { display: inline;}
  #service .service_item { width: 90% !important; margin: .8rem auto;}

  #history table tr th { width: 25%;}
  #plastic ul.kaitori { display: inline;}
  #plastic ul.kaitori li { margin-top: 1.5rem;}
  #plastic ul.kaitori li img { margin: .5rem auto;}
  #handling table tr > * { display: block;}
  #collection ul li ,#boeki #thai ul li ,#boeki #diversion ul li  { width: 48%;}

  table.formTable tr > * { display: block; width: 93% !important;}

  body:not(#top) h2 div.bg_img { background-size: cover;}
  body:not(#top) #wrapper > div > div ,#info { width: 100%;}
  
  #sidebar { width: 90% !important; padding-right: 0; margin: 1rem auto; }
  footer > div:first-child { display: inline;}
  footer > div:first-child > div { width: 100%; text-align: center;}
  footer > div:first-child > div img { margin: 0 auto;}
  footer .footer_menu { text-align: center; margin-top: 1rem;}
}

/* タブレット1 */
@media screen and (min-width: 641px){
  #sp_header { display: none;}

  #plastic ul.kaitori li {
    width: 24%;
    height: 19rem;
    position: relative;
  }
  #plastic ul.kaitori li img {
    position: absolute;
    bottom: 5px;
    left: 4px;
  }
  #plastic ul.kaitori li p { font-size: .9rem;}

  footer .footer_text { font-size: .85rem;}
}

/* タブレット2以下 */
@media screen and (max-width: 800px){
  
}


/* タブレット2以上 */
@media screen and (min-width: 801px){
  
}

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

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

/* PC */
@media screen and (min-width: 1025px){
  .size{ width: 1000px; }

  #bsc-copyright{ margin: .25rem .25rem 0; }
}