@charset "UTF-8";
:root {
  --viewport-width: min(100vw, 1600px);
  --b: calc(var(--viewport-width) / 160);
}

/*
Theme Name: Twenty Twenty-one Child
Version: 1.6
Template: twentytwentyone
*/
#environment .breadcrumb {
  margin-bottom: max(6.2rem, 50px);
}
#environment section:nth-of-type(1) {
  padding-bottom: max(15rem, 100px);
  background: linear-gradient(0deg, #E8FDF0, transparent 70%);
}
#environment section:nth-of-type(1) h3 {
  margin-bottom: max(6.6rem, 30px);
  text-align: center;
  line-height: 1.5;
}
#environment section:nth-of-type(1) h3 span {
  display: block;
  font-size: max(1.8rem, 16px);
  font-weight: 400;
}
#environment section:nth-of-type(1) ul.grid {
  grid-template-columns: repeat(3, 1fr);
  gap: max(2rem, 17px);
}
@media screen and (max-width: 1000px) {
  #environment section:nth-of-type(1) ul.grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 550px) {
  #environment section:nth-of-type(1) ul.grid {
    grid-template-columns: 1fr;
  }
}
#environment section:nth-of-type(1) ul.grid li {
  background-color: #FFFFFF;
  border-radius: max(1rem, 10px);
  filter: drop-shadow(0px 5px 15px rgba(0, 0, 0, 0.16));
  padding: max(3.8rem, 30px) max(2rem, 20px) max(3rem, 25px);
}
#environment section:nth-of-type(1) ul.grid li h4 {
  font-family: YakuHanJP, "Noto Sans JP", sans-serif;
  font-weight: 500;
  color: #008062;
  font-size: max(2.5rem, 18px);
  text-align: center;
}
#environment section:nth-of-type(1) ul.grid li h4 span {
  font-family: inherit;
  font-weight: inherit;
}
#environment section:nth-of-type(1) ul.grid li .img {
  width: 50%;
  margin: max(3.4rem, 15px) auto max(4rem, 20px);
}
#environment section:nth-of-type(2) {
  padding-top: max(15rem, 100px);
  padding-bottom: max(15rem, 100px);
  position: relative;
}
#environment section:nth-of-type(2) .bg1,
#environment section:nth-of-type(2) .bg2 {
  position: absolute;
  z-index: -1;
}
#environment section:nth-of-type(2) .bg1 {
  top: 0;
  right: 0;
  width: 33%;
}
#environment section:nth-of-type(2) .bg2 {
  bottom: 15%;
  left: 0;
  width: 31%;
}
#environment section:nth-of-type(2) h3 {
  margin-bottom: max(3rem, 15px);
}
#environment section:nth-of-type(2) h4 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: YakuHanJP, "Noto Sans JP", sans-serif;
  font-size: max(2.5rem, 16px);
  font-weight: 500;
  color: #008062;
  border-bottom: 1px solid;
  margin-top: max(6.8rem, 40px);
  margin-bottom: max(2rem, 15px);
  padding-bottom: max(1.2rem, 10px);
  width: 100%;
}
#environment section:nth-of-type(2) h4 img {
  width: max(3.2rem, 20px);
}
#environment section:nth-of-type(2) ul {
  background: linear-gradient(0deg, #F4FCFF, #E8FDF0);
  padding: max(3rem, 10px);
  display: table;
  border-radius: max(1rem, 10px);
  margin-bottom: max(2rem, 15px);
}
#environment section:nth-of-type(2) ul li {
  font-family: YakuHanJP, "Noto Sans JP", sans-serif;
  color: #008062;
  font-weight: 400;
}
#environment section:nth-of-type(3) {
  background: linear-gradient(180deg, #E8FDF0, transparent);
  padding-top: max(13rem, 60px);
  padding-bottom: max(11.6rem, 60px);
  border-radius: max(2rem, 20px) max(2rem, 20px) 0 0;
}
#environment section:nth-of-type(3) h3 {
  margin-bottom: 0;
}
#environment section:nth-of-type(3) h4 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: YakuHanJP, "Noto Sans JP", sans-serif;
  font-size: max(2.5rem, 18px);
  font-weight: 500;
  color: #008062;
  margin-top: max(6.8rem, 40px);
  margin-bottom: max(2rem, 15px);
  width: 100%;
}
#environment section:nth-of-type(3) h4.border {
  padding-bottom: max(1.2rem, 10px);
  border-bottom: 1px solid;
}
#environment section:nth-of-type(3) h4 img {
  width: max(3.2rem, 20px);
}
#environment section:nth-of-type(3) ul.grid1 {
  grid-template-columns: repeat(3, 1fr);
  gap: max(7rem, 25px);
  margin-top: max(7rem, 70px);
}
@media screen and (max-width: 1000px) {
  #environment section:nth-of-type(3) ul.grid1 {
    grid-template-columns: 1fr;
    gap: max(14rem, 70px);
  }
}
#environment section:nth-of-type(3) ul.grid1 h4 {
  margin-top: 0;
  text-align: center;
  display: block;
}
#environment section:nth-of-type(3) ul.grid1 h4 span {
  font-family: inherit;
  font-size: inherit;
}
#environment section:nth-of-type(3) ul.grid1 .card {
  filter: drop-shadow(0px 0px 15px #CAEBD7);
  background-color: #FFFFFF;
  border-radius: max(1rem, 10px);
  padding: max(2.5rem, 15px) max(2.5rem, 20px) max(5rem, 40px);
  position: relative;
}
@media screen and (max-width: 1000px) {
  #environment section:nth-of-type(3) ul.grid1 .card {
    max-width: 400px;
    margin: 0 auto;
    padding: max(3rem, 25px) max(2.5rem, 20px) max(4rem, 30px);
  }
}
#environment section:nth-of-type(3) ul.grid1 .card::before {
  position: absolute;
  background: linear-gradient(#78E066, #48CC7B 40%, #17B471);
  top: 0;
  transform: translateY(-100%);
  color: #fff;
  font-family: YakuHanJP, "Noto Sans JP", sans-serif;
  font-size: max(1.6rem, 14px);
  font-weight: 500;
  padding: max(0.8rem, 8px) max(3rem, 29px);
  border-radius: max(1rem, 10px) max(1rem, 10px) 0 0;
}
#environment section:nth-of-type(3) ul.grid1 .card:nth-of-type(1)::before {
  content: "約1ヶ月";
}
#environment section:nth-of-type(3) ul.grid1 .card:nth-of-type(2)::before {
  content: "約2ヶ月";
}
#environment section:nth-of-type(3) ul.grid1 .card:nth-of-type(3)::before {
  content: "約3ヶ月";
}
#environment section:nth-of-type(3) ul.grid1 .card::after {
  content: "";
  position: absolute;
  top: 50%;
  right: max(-4rem, -40px);
  width: max(2.7rem, 10px);
  height: max(2.7rem, 10px);
  border-top: 2px solid #008062;
  border-right: 2px solid #008062;
  transform: translateY(-50%) rotate(45deg);
}
@media screen and (max-width: 1000px) {
  #environment section:nth-of-type(3) ul.grid1 .card::after {
    top: auto;
    right: 50%;
    bottom: max(-4rem, -40px);
    transform: translateX(50%) rotate(135deg);
  }
}
@media screen and (max-width: 550px) {
  #environment section:nth-of-type(3) ul.grid1 .card::after {
    bottom: max(-7rem, -40px);
  }
}
#environment section:nth-of-type(3) ul.grid1 .card:last-child::after {
  display: none;
}
#environment section:nth-of-type(3) ul.grid1 .card img {
  width: 60%;
  margin: 0 auto;
  display: block;
}
@media screen and (max-width: 1000px) {
  #environment section:nth-of-type(3) ul.grid1 .card img {
    max-width: 300px;
    margin: 0 auto;
  }
}
#environment section:nth-of-type(3) ul.grid2 {
  grid-template-columns: repeat(2, 1fr);
  gap: max(7rem, 30px);
  margin-top: max(5rem, 50px);
}
@media screen and (max-width: 1000px) {
  #environment section:nth-of-type(3) ul.grid2 {
    grid-template-columns: 1fr;
  }
}
#environment section:nth-of-type(3) ul.grid2 h4 {
  margin-top: 0;
}
#environment section:nth-of-type(3) ul.grid2 .flex {
  gap: max(3.4rem, 15px);
}
@media screen and (max-width: 1000px) {
  #environment section:nth-of-type(3) ul.grid2 .flex {
    flex-direction: row;
  }
}
@media screen and (max-width: 550px) {
  #environment section:nth-of-type(3) ul.grid2 .flex {
    flex-direction: column;
  }
}
#environment section:nth-of-type(3) ul.grid2 .flex p {
  flex: 1;
}
#environment section:nth-of-type(3) ul.grid2 .flex .img {
  width: 40%;
  max-width: 250px;
}
@media screen and (max-width: 1000px) {
  #environment section:nth-of-type(3) ul.grid2 .flex .img {
    width: 100%;
  }
}
#environment section:nth-of-type(3) ul.green {
  background: linear-gradient(0deg, #F4FCFF, #E8FDF0);
  padding: max(3rem, 10px);
  display: table;
  border-radius: max(1rem, 10px);
  margin-bottom: max(2rem, 15px);
}
#environment section:nth-of-type(3) ul.green li {
  font-family: YakuHanJP, "Noto Sans JP", sans-serif;
  color: #008062;
  font-weight: 400;
}