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

/*
Theme Name: Twenty Twenty-one Child
Version: 1.6
Template: twentytwentyone
*/
#work .breadcrumb {
  margin-bottom: max(6.2rem, 50px);
}
#work section:nth-of-type(1) {
  margin-bottom: max(9rem, 50px);
}
#work section:nth-of-type(1) h3 {
  margin-bottom: max(7.5rem, 30px);
  text-align: center;
}
#work section:nth-of-type(1) ul {
  grid-template-columns: repeat(3, 1fr);
  gap: max(9.6rem, 15px);
}
@media screen and (max-width: 1000px) {
  #work section:nth-of-type(1) ul {
    gap: max(6.6rem, 15px);
  }
}
@media screen and (max-width: 768px) {
  #work section:nth-of-type(1) ul {
    grid-template-columns: 1fr;
  }
}
@media screen and (max-width: 768px) {
  #work section:nth-of-type(1) ul li {
    max-width: 500px;
    margin: 0 auto;
  }
}
@media screen and (max-width: 768px) {
  #work section:nth-of-type(1) ul li .img {
    width: 80%;
    max-width: 300px;
    margin: 0 auto;
  }
}
#work section:nth-of-type(1) ul li h4 {
  color: #008062;
  font-size: max(2.5rem, 17px);
  font-family: YakuHanJP, "Noto Sans JP", sans-serif;
  font-weight: 500;
  text-align: center;
  margin-bottom: max(2.5rem, 10px);
}
#work section:nth-of-type(1) ul li h4 span {
  font-family: inherit;
  display: block;
}
@media screen and (max-width: 768px) {
  #work section:nth-of-type(1) ul li h4 span {
    display: inline-block;
  }
}
#work section:nth-of-type(2) {
  margin-bottom: max(9rem, 50px);
  position: relative;
}
#work section:nth-of-type(2) .bg {
  position: absolute;
  top: 0;
}
#work section:nth-of-type(2) ul {
  grid-template-columns: repeat(2, 1fr);
  gap: max(6rem, 20px) max(5.4rem, 15px);
}
@media screen and (max-width: 768px) {
  #work section:nth-of-type(2) ul {
    grid-template-columns: 1fr;
  }
}
#work section:nth-of-type(2) ul li {
  background-color: #fff;
  filter: drop-shadow(0px 5px 6px rgba(0, 0, 0, 0.16));
  border-radius: max(1rem, 10px);
  padding: max(3rem, 15px) max(3.6rem, 18px) max(5rem, 20px);
  display: flex;
  flex-direction: column;
  gap: max(2.5rem, 15px);
}
@media screen and (max-width: 1000px) {
  #work section:nth-of-type(2) ul li {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    padding: max(3rem, 30px) max(3.6rem, 18px) max(5rem, 25px);
  }
}
#work section:nth-of-type(2) ul li h4 {
  color: #008062;
  font-family: YakuHanJP, "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: max(2rem, 16px);
  text-align: center;
}
#work section:nth-of-type(2) ul li h4 span {
  font-family: inherit;
  font-weight: inherit;
  font-size: max(1.4rem, 12px);
  display: block;
}
@media screen and (max-width: 1000px) {
  #work section:nth-of-type(2) ul li h4 span {
    display: inline;
  }
}
#work section:nth-of-type(3) {
  background: linear-gradient(180deg, #E8FDF0, transparent);
}
#work section:nth-of-type(3) h3 {
  text-align: center;
  margin-top: max(10rem, 100px);
}
#work section:nth-of-type(3) .flex {
  gap: max(4rem, 25px);
  margin-bottom: max(12rem, 100px);
}
#work section:nth-of-type(3) .flex__img {
  width: 43%;
}
@media screen and (max-width: 768px) {
  #work section:nth-of-type(3) .flex__img {
    width: 90%;
    max-width: 500px;
  }
}
#work section:nth-of-type(3) .flex__text {
  flex: 1;
}
@media screen and (max-width: 768px) {
  #work section:nth-of-type(3) .flex__text {
    width: 90%;
    margin: 0 auto;
  }
}
#work section:nth-of-type(3) .flex__text h4 {
  font-family: "Shippori Mincho B1", serif;
  font-size: max(4rem, 25px);
  font-weight: 600;
  color: #008062;
  margin-bottom: max(4rem, 25px);
}
#work section:nth-of-type(3) .flex__text h4 span {
  display: block;
}
@media screen and (max-width: 768px) {
  #work section:nth-of-type(3) .flex__text h4 span {
    display: inline-block;
  }
}
#work section:nth-of-type(3) .flex__text p.name {
  color: #008062;
  font-size: max(1.6rem, 14px);
  margin-top: max(3.7rem, 10px);
}
#work section:nth-of-type(3) .flex__text p.name span {
  display: block;
}
@media screen and (max-width: 768px) {
  #work section:nth-of-type(3) .flex__text p.name span {
    display: inline-block;
  }
}
#work section:nth-of-type(3) .flex:nth-of-type(2) {
  flex-direction: row-reverse;
  margin-left: 10%;
}
@media screen and (max-width: 768px) {
  #work section:nth-of-type(3) .flex:nth-of-type(2) {
    flex-direction: column;
    margin-left: 0%;
  }
  #work section:nth-of-type(3) .flex:nth-of-type(2) .flex__img {
    margin: 0 0 0 auto;
  }
}
#work section:nth-of-type(3) .flex:nth-of-type(3) {
  flex-direction: row;
  margin-right: 10%;
}
@media screen and (max-width: 768px) {
  #work section:nth-of-type(3) .flex:nth-of-type(3) {
    flex-direction: column;
    margin-right: 0%;
  }
  #work section:nth-of-type(3) .flex:nth-of-type(3) .flex__img {
    margin: 0 auto 0 0;
  }
}