@charset "UTF-8";

main {
  padding: 0;
}


h2 {
  margin-bottom: 15px;
  font-weight: 500;
  padding-right: 50px;
  text-align: left;
}

.side {
  padding-left: 15px;
}

.side_recycle {
  border-left: #94C9D0 solid 25px;
}

.side_eco {
  border-left: #DC696D solid 25px;
}

.side_bio {
  border-left: #A6D68C solid 25px;

}

.side_other {
  border-left: #F7D046 solid 25px;

}

.top {
  background-image: url(../img/main_bg.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  text-align: left;
  padding: 2%;
  padding-top: 40px;
  padding-bottom: 0;
}

.flex {
  justify-content: space-evenly;
}

.main_ttl {
  display: inline-block;
  max-width: 600px;
  margin-top: 40px;
}

.main_btn {
  max-width: 290px;
}

.top_p {
  font-size: 20px;
  letter-spacing: 1px;
  margin: 30px 0;
}

.btn_area{
  justify-content: space-between;
}

.btn_area a:hover{
  transform: scale(1.1);
}

.img_area img{
  max-width: 450px;;
}

.all_section {
  padding: 30px 4% 0 4%;
  text-align: center;
  margin-bottom: 50px;
}

.search-form {
  display: flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid #dfe1e5;
  border-radius: 24px;
  min-width: 60%;
}

.search-form:hover {
  box-shadow: 0 1px 6px rgb(32 33 36 / 28%);
}

.search-form::before {
  width: 45px;
  height: 15px;
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%20%3Cpath%20d%3D%22M23.7%2020.8%2019%2016.1c-.2-.2-.5-.3-.8-.3h-.8c1.3-1.7%202-3.7%202-6C19.5%204.4%2015.1%200%209.7%200S0%204.4%200%209.7s4.4%209.7%209.7%209.7c2.3%200%204.3-.8%206-2v.8c0%20.3.1.6.3.8l4.7%204.7c.4.4%201.2.4%201.6%200l1.3-1.3c.5-.5.5-1.2.1-1.6zm-14-5.1c-3.3%200-6-2.7-6-6s2.7-6%206-6%206%202.7%206%206-2.6%206-6%206z%22%20fill%3D%22%239aa0a6%22%3E%3C%2Fpath%3E%20%3C%2Fsvg%3E');
  background-position: center;
  background-repeat: no-repeat;
  content: '';
}

.search-form input {
  width: 250px;
  height: 40px;
  padding: 5px 25px 5px 0;
  border: none;
  box-sizing: border-box;
  outline: none;
}

.btn_list-all {
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  padding: 18px 30px;
  border-radius: 6px;
  transition: .3s;
}

.btn_list-all:hover {
  opacity: 0.6;
}

.btn_recycle {
  background-color: #94C9D0;
}

.btn_eco {
  background-color: #DC696D;
}

.btn_bio {
  background-color: #A6D68C;
}

.btn_other {
  background-color: #F7D046;
}



@media screen and (max-width: 767px) {

  .top {
    text-align: center;
  }

  .main_img-sp{
    max-width: 90%;
    margin: auto;
  }

  h1 {
    font-size: 24px;
  }

  h2 {
    font-size: 20px;
  }

  .btn_list-all {
    font-size: 12px;
    padding: 3% 3%;
  }

  .table-wrapper {
    overflow-x: auto;
    max-width: 100%;
    display: block;
    margin-bottom: 20px;
  }

  table {
    width: max-content;
    border-collapse: collapse;
  }

  th,
  td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
  }

  .btn_other {
    display: block;
  }


}