.main-visual {
  background-image: url(../img/recycling/recycling01.jpg); }

.section01 {
  width: 1120px;
  margin: 0 auto 120px;
  text-align: center; }
  .section01 h2 .br-01 {
    display: none; }
  .section01 img {
    margin: 0 0 30px 0; }
  .section01 > p {
    margin: 0 0 35px 0;
    text-align: center; }
    .section01 > p:nth-last-of-type(1) {
      margin: 0 0 70px 0; }
  .section01 > h3 {
    margin: 0 0 30px 0; }
    .section01 > h3 span {
      font-size: 24px;
      color: #20b378; }
  .section01 .container {
    display: flex;
    justify-content: space-between; }
    .section01 .container .box {
      width: 540px;
      height: 250px;
      color: white;
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat; }
      .section01 .container .box:nth-of-type(1) {
        background-image: url(../img/recycling/recycling03.jpg); }
      .section01 .container .box:nth-of-type(2) {
        background-image: url(../img/recycling/recycling04.jpg); }
      .section01 .container .box h3 {
        margin: 65px 0 10px 0; }
      .section01 .container .box p {
        margin: 0 0 25px 0;
        text-align: center; }
      .section01 .container .box .btn {
        position: relative;
        width: 315px;
        text-align: center;
        margin: 0 auto 60px; }
        .section01 .container .box .btn:before {
          content: "";
          position: absolute;
          width: 0;
          height: 100%;
          top: 0;
          left: 0;
          background: white;
          transition: all .2s; }
        .section01 .container .box .btn:after {
          content: '';
          position: absolute;
          top: 0;
          bottom: 0;
          right: 20px;
          margin: auto 0;
          width: 10px;
          height: 10px;
          border-right: solid 2px white;
          border-top: solid 2px white;
          transform: rotate(45deg);
          transition: all .2s; }
        .section01 .container .box .btn:hover:before {
          content: "";
          position: absolute;
          width: 0;
          height: 100%;
          top: 0;
          left: 0;
          background: white;
          transition: all .2s; }
        .section01 .container .box .btn:hover:after {
          content: '';
          position: absolute;
          top: 0;
          bottom: 0;
          right: 20px;
          margin: auto 0;
          width: 10px;
          height: 10px;
          border-right: solid 2px white;
          border-top: solid 2px white;
          transform: rotate(45deg);
          transition: all .2s; }
        .section01 .container .box .btn a {
          display: block;
          padding: 20px 0;
          color: white;
          font-size: 18px;
          font-weight: bold;
          border: 2px solid white;
          transition: all .2s; }
          .section01 .container .box .btn a:hover {
            position: relative;
            z-index: 1;
            color: black; }

@media screen and (max-width: 767px) {
  .section01 {
    width: 100%;
    margin: 0 auto 90px; }
    .section01 > p {
      width: 90%;
      margin: 0 auto 20px;
      text-align: left; }
      .section01 > p:nth-last-of-type(1) {
        margin: 0 auto 60px; }
    .section01 > h3 {
      width: 90%;
      margin: 0 auto 30px;
      text-align: left;
      line-height: 1.2; }
      .section01 > h3 span {
        font-size: 22px; }
    .section01 .container {
      display: block; }
      .section01 .container .box {
        width: 80%;
        height: auto;
        margin: 0 auto; }
        .section01 .container .box h3 {
          margin: 20px 0 10px 0;
          padding: 15px 0 0 0; }
        .section01 .container .box p {
          margin: 0; }
        .section01 .container .box .btn {
          width: 265px;
          padding: 15px 0; } }
@media screen and (max-width: 414px) {
  .section01 {
    margin: 0 auto 60px; }
    .section01 h2:after {
      top: 40px; }
    .section01 > h3 span {
      font-size: 20px; }
    .section01 .container .box {
      width: 90%; }
      .section01 .container .box .btn {
        width: 70%;
        margin: 0 auto; }
        .section01 .container .box .btn:hover:before {
          width: 0%; }
        .section01 .container .box .btn:hover:after {
          border-right: solid 2px white;
          border-top: solid 2px white; }
        .section01 .container .box .btn a {
          font-size: 14px;
          padding: 15px 0; }
          .section01 .container .box .btn a:hover {
            color: white; } }
.br-01 {
  display: none; }

@media screen and (max-width: 374px) {
  .section01 h2 {
    line-height: 1.2; }
    .section01 h2 .br-01 {
      display: block; }
    .section01 h2:after {
      top: 60px; } }
.section02 {
  width: 1120px;
  margin: 0 auto 120px;
  text-align: center; }
  .section02 h2 .br-02 {
    display: none; }
  .section02 p {
    margin: 0 0 25px 0;
    text-align: center; }
  .section02 img {
    margin: 0 0 35px 0; }

@media screen and (max-width: 767px) {
  .section02 {
    width: 100%;
    margin: 0 auto 90px; }
    .section02 h2 {
      line-height: 1.2; }
      .section02 h2 .br-02 {
        display: block; }
      .section02 h2:after {
        top: 70px; }
    .section02 p {
      width: 90%;
      margin: 0 auto 25px;
      text-align: left; }
      .section02 p:last-child {
        margin: 0 auto; }
    .section02 img {
      width: 90%; } }
@media screen and (max-width: 414px) {
  .section02 {
    margin: 0 auto 60px; }
    .section02 h2:after {
      top: 60px; } }
.section03 {
  width: 1120px;
  margin: 0 auto 120px; }
  .section03 > p {
    text-align: center;
    margin: 0 0 40px 0; }
  .section03 .container {
    display: flex;
    justify-content: space-between;
    margin: 0 0 55px 0; }
    .section03 .container img {
      width: 480px;
      height: 300px;
      object-fit: cover; }
    .section03 .container .box {
      width: 585px; }
      .section03 .container .box h3 {
        color: #20b378;
        margin: 0 0 20px 0; }

@media screen and (max-width: 767px) {
  .section03 {
    width: 100%;
    margin: 0 auto 90px; }
    .section03 > p {
      width: 90%;
      text-align: left;
      margin: 0 auto 20px; }
    .section03 .container {
      display: block;
      margin: 0 0 30px 0;
      text-align: center; }
      .section03 .container img {
        width: 80%;
        margin: 0 0 20px 0; }
      .section03 .container .box {
        width: 80%;
        margin: 0 auto; }
        .section03 .container .box h3 {
          margin: 0 0 15px 0;
          text-align: left;
          line-height: 1.2; } }
@media screen and (max-width: 414px) {
  .section03 {
    margin: 0 auto 60px; }
    .section03 h2:after {
      top: 40px; }
    .section03 .container img {
      width: 90%; }
    .section03 .container .box {
      width: 90%; } }