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

/*
Theme Name: Twenty Twenty-one Child
Version: 1.6
Template: twentytwentyone
*/
#about .breadcrumb {
  margin-bottom: max(6.2rem, 50px);
}
#about section:nth-of-type(1) {
  margin-bottom: max(12rem, 100px);
}
#about section:nth-of-type(1) .flex {
  gap: max(4.2rem, 20px);
  align-items: center;
}
#about section:nth-of-type(1) .flex__text {
  width: 50%;
}
@media screen and (max-width: 1000px) {
  #about section:nth-of-type(1) .flex__text {
    width: 100%;
  }
}
#about section:nth-of-type(1) .flex__img {
  flex: 1;
  filter: drop-shadow(0px 0px 99px #FFFFFF);
}
@media screen and (max-width: 1000px) {
  #about section:nth-of-type(1) .flex__img {
    max-width: 500px;
    margin: 0 auto;
  }
}
#about section:nth-of-type(2) {
  background: linear-gradient(0deg, #E8FDF0, transparent);
  position: relative;
}
#about section:nth-of-type(2) .bg {
  position: absolute;
  bottom: 0;
}
#about section:nth-of-type(2) .container {
  background-color: #FFFFFF;
  border-radius: max(1rem, 10px);
  filter: drop-shadow(0px 5px 15px rgba(0, 0, 0, 0.16));
  padding: max(6rem, 40px) max(7.8rem, 25px);
}
#about section:nth-of-type(2) .container .h3box {
  text-align: center;
  display: flex;
  justify-content: space-between;
  gap: max(2.9rem, 15px);
  margin-bottom: max(5.8rem, 40px);
}
#about section:nth-of-type(2) .container .h3box h3 {
  margin: 0;
  color: #505050;
}
#about section:nth-of-type(2) .container .h3box h3 span.green {
  color: #008062;
}
@media screen and (max-width: 1000px) {
  #about section:nth-of-type(2) .container .h3box h3 span.green {
    display: block;
  }
}
#about section:nth-of-type(2) .container .h3box div {
  width: max(3rem, 30px);
}
@media screen and (max-width: 550px) {
  #about section:nth-of-type(2) .container .h3box div {
    width: max(3rem, 20px);
  }
}
#about section:nth-of-type(2) .container .h3box div:nth-of-type(2) {
  margin: auto 0 0;
}
#about section:nth-of-type(2) .container .flex {
  gap: max(7rem, 30px);
}
#about section:nth-of-type(2) .container .flex__img {
  width: 36%;
}
@media screen and (max-width: 1000px) {
  #about section:nth-of-type(2) .container .flex__img {
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
  }
}
#about section:nth-of-type(2) .container .flex__text {
  flex: 1;
}
@media screen and (max-width: 550px) {
  #about section:nth-of-type(2) .container .flex__text p span {
    display: inline;
  }
}
#about section:nth-of-type(2) .container .flex__text p.name {
  font-family: "Shippori Mincho B1", serif;
  font-size: max(3rem, 24px);
  line-height: 1;
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: max(2.2rem, 16px);
  margin-top: max(5rem, 20px);
}
#about section:nth-of-type(2) .container .flex__text p.name span {
  display: inline;
  font-size: max(2rem, 14px);
}
#about section:nth-of-type(3) {
  margin-top: max(13.8rem, 100px);
  padding-bottom: max(13.4rem, 100px);
  position: relative;
}
#about section:nth-of-type(3) .bg1, #about section:nth-of-type(3) .bg2, #about section:nth-of-type(3) .bg3 {
  position: absolute;
  z-index: -1;
}
#about section:nth-of-type(3) .bg1 {
  width: 45%;
  top: 0;
  right: 0;
}
#about section:nth-of-type(3) .bg2 {
  width: 23%;
  top: 30%;
  left: 0;
}
#about section:nth-of-type(3) .bg3 {
  width: 50%;
  bottom: 0;
  right: 0;
}
#about section:nth-of-type(3) .container > * {
  margin-bottom: max(9rem, 30px);
}
#about section:nth-of-type(3) .container h3 {
  text-align: center;
}
#about section:nth-of-type(3) .container h4 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Shippori Mincho B1", serif;
  font-size: max(2.5rem, 18px);
  font-weight: 600;
  color: #008062;
  margin-bottom: max(3.5rem, 15px);
}
#about section:nth-of-type(3) .container h4 img {
  width: max(3.6rem, 20px);
}
#about section:nth-of-type(3) .container .flex {
  gap: max(7.4rem, 30px);
  align-items: center;
}
#about section:nth-of-type(3) .container .flex__img {
  flex: 1;
}
@media screen and (max-width: 1000px) {
  #about section:nth-of-type(3) .container .flex__img {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
  }
}
#about section:nth-of-type(3) .container .flex__text {
  width: 50%;
}
@media screen and (max-width: 1000px) {
  #about section:nth-of-type(3) .container .flex__text {
    width: 100%;
  }
}
#about section:nth-of-type(3) .container .flex:nth-of-type(2) {
  flex-direction: row-reverse;
}
@media screen and (max-width: 1000px) {
  #about section:nth-of-type(3) .container .flex:nth-of-type(2) {
    flex-direction: column;
  }
}
#about section:nth-of-type(3) .container .global ul {
  grid-template-columns: repeat(3, 1fr);
  gap: max(2.8rem, 15px);
}
@media screen and (max-width: 1000px) {
  #about section:nth-of-type(3) .container .global ul {
    grid-template-columns: 1fr;
  }
}
#about section:nth-of-type(3) .container .global 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) {
  #about section:nth-of-type(3) .container .global ul li {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    padding: max(3rem, 30px) max(3.6rem, 18px) max(5rem, 25px);
  }
}
#about section:nth-of-type(3) .container .global ul li h5 {
  color: #008062;
  font-family: YakuHanJP, "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: max(2rem, 16px);
  text-align: center;
}
#about section:nth-of-type(3) .container .global ul li h5 span {
  font-family: inherit;
  font-weight: inherit;
  font-size: max(1.4rem, 12px);
  display: block;
}
@media screen and (max-width: 1000px) {
  #about section:nth-of-type(3) .container .global ul li h5 span {
    display: inline;
  }
}