@import url("https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;500&family=Noto+Serif+JP:wght@400;600&family=Zen+Kaku+Gothic+New:wght@400;500;700;900&display=swap");
@import url("global.css");
.sec_sdgs {
  margin-bottom: 100px;
}
.sec_sdgs .sec_title {
  text-align: center;
}
.sec_sdgs .text_area {
  width: 80%;
  margin: 0 auto 50px;
}
.sec_sdgs .text_area p + p {
  margin-top: 1em;
}
.sec_sdgs .detail_area {
  background: #f2f2f2;
  padding: 50px;
}
.sec_sdgs .detail_area .catch {
  text-align: center;
  margin-bottom: 30px;
  font-size: clamp(16px, 2.1vw, 20px);
}
.sec_sdgs .detail_area .logo_sdgs {
  width: 450px;
  margin: 0 auto 30px;
}
.sec_sdgs .detail_area figure {
  width: 70%;
  margin: 0 auto;
}

.sec_csr {
  margin-bottom: 80px;
}
.sec_csr .sec_title {
  text-align: center;
}
.sec_csr .list_csr li.list_csr_inner {
  margin-bottom: 50px;
}
.sec_csr .list_csr li.list_csr_inner .img_area {
  width: 40%;
}
.sec_csr .list_csr li.list_csr_inner .text_area {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding-left: 50px;
}
.sec_csr .list_csr li.list_csr_inner .text_area .detail_title {
  margin-bottom: 20px;
}
.sec_csr .list_csr li.list_csr_inner .text_area .detail_title::after {
  width: 0;
  height: 0;
}
.sec_csr .text {
  text-align: center;
}

/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-1 (1200px)

------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-2 ( 960px )

------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 959px) {
  .sec_sdgs {
    margin-bottom: 80px;
  }
  .sec_sdgs .text_area {
    width: 100%;
  }
  .sec_sdgs .detail_area {
    padding: 40px;
  }
  .sec_sdgs .detail_area .logo_sdgs {
    width: 60%;
  }
  .sec_sdgs .detail_area figure {
    width: 80%;
  }
  .sec_csr .list_csr li.list_csr_inner {
    margin-bottom: 40px;
  }
  .sec_csr .list_csr li.list_csr_inner .text_area {
    padding-left: 30px;
  }
}
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-3 ( 644px )

------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 644px) {
  .sec_sdgs {
    margin-bottom: 60px;
  }
  .sec_sdgs .text_area {
    margin: 0 auto 30px;
  }
  .sec_sdgs .detail_area {
    padding: 20px;
  }
  .sec_sdgs .detail_area .catch {
    margin-bottom: 20px;
  }
  .sec_sdgs .detail_area .logo_sdgs {
    width: 90%;
    margin: 0 auto 20px;
  }
  .sec_sdgs .detail_area figure {
    width: 100%;
  }
  .sec_csr {
    margin-bottom: 50px;
  }
  .sec_csr .list_csr li.list_csr_inner .img_area {
    width: 100%;
    margin: 0 auto 10px;
  }
  .sec_csr .list_csr li.list_csr_inner .text_area {
    padding-left: 0;
  }
  .sec_csr .list_csr li.list_csr_inner .text_area .detail_title {
    margin-bottom: 10px;
  }
  .sec_csr .text {
    text-align: justify;
  }
}