@charset 'UTF-8';
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+2:wght@100..900&display=swap');
/* =======================================
  BASE
 ======================================= */

 body {
  width: 100%;
  margin: 0 auto;
  background-color: #F6F6F6;
  font-family: "M PLUS 2", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 500;
  font-size: 1.6rem;
 }

 /* header */
 header {
  padding: 3rem 2.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
 }
 .hd_btn {
  padding: 10px 42px 14px;
  color: #F6F6F6;
  background-color: #00BFA8;
  border: solid 4px #00BFA8;
  border-radius: 60px;
  text-decoration: none;
  font-size: 2.4rem;
  transition: .3s;
 }
 .hd_btn:hover {
  color: black;
  background-color: #F6F6F6;
 }
 .login_btn {
  margin-left: 3rem;
  color: black;
  background-color: #F6F6F6;
  transition: .3s;
 }
 .login_btn:hover {
  color: #F6F6F6;
  background-color: #00BFA8;
 }

 /* footer */
 footer {
  padding-top: 7rem;
  padding-bottom: 5rem;
  text-align: center;
  background-color: #DAF1F0;
  display: flex;
  flex-direction: column;
  border-radius: 4rem 4rem 0 0;
 }
 .footer_flexwrap {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
 }
 .survice_link {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
 }
 .survice_link::after {
  position: absolute;
  top: -75%;
  left: 100%;
  margin: 0 2rem;
  content: "";
  width: 1px;
  height: 250%;
  background-color: black;
 }
 .sdgs_logo {
  margin-left: 2rem;
 }
 footer p {
  margin-top: 2rem;
  font-size: 1.2rem;
  font-weight: 400;
  letter-spacing: 0.25em;
 }
 footer small {
  margin-top: 2rem;
  padding-right: 2rem;
  text-align: right;
 }

 /* icon */
 .icon_wrap {
  position: absolute;
  top: 3rem;
  left: 4rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 2rem;
  z-index: 2;
 }
 .backhome_icon {
  font-size: 1.6rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  color: black;
 }
 .back_icon {
  font-size: 1.6rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  color: black;
 }
 .backhome_icon::before {
  content: url(/img/backhome_icon.svg);
  width: 5rem;
  height: 5rem;
  margin-bottom: 0.5rem;
  /* padding: 0.2rem 0.8rem 0.3rem; */
}
.back_icon::before {
  content: url(/img/back_icon.svg);
  width: 5rem;
  height: 5rem;
  margin-bottom: 0.5rem;
  /* padding: 0.2rem 0.8rem 0.3rem; */
}