/*
Theme Name: Twenty Twenty-one Child
Version: 1.6
Template: twentytwentyone
*/
:root {
  --viewport-width: min(100vw, 2000px);
  --b: calc(var(--viewport-width) / 160);
}

#business .preface__wrapper {
  padding-bottom: max(11rem, 50px);
}
#business .preface__title {
  display: grid;
  gap: max(1rem, 10px);
  margin-bottom: max(5rem, 30px);
}
#business .preface__title--en {
  font-family: YakuHanJP, "Manrope", "Noto Sans JP", sans-serif;
  font-size: max(1.6rem, 14px);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.05em;
}
#business .preface__title--ja {
  font-size: max(2.5rem, 18px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.1em;
}
#business .project__inner {
  padding-bottom: max(15rem, 70px);
}
#business .project__title {
  position: relative;
  padding: max(2rem, 15px) max(7rem, 40px);
  width: calc(90% + 35px);
  margin-left: auto;
  margin-bottom: max(5rem, 30px);
  background: #002353;
  -webkit-clip-path: polygon(35px 0, 100% 0, 100% 100%, 0% 100%);
          clip-path: polygon(35px 0, 100% 0, 100% 100%, 0% 100%);
  z-index: 0;
  -webkit-transform: scaleX(1.1);
          transform: scaleX(1.1);
  -webkit-transform-origin: right;
          transform-origin: right;
  -webkit-transition: -webkit-transform 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: -webkit-transform 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: transform 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: transform 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955), -webkit-transform 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
@media screen and (max-width: 550px) {
  #business .project__title {
    width: calc(95% + 35px);
  }
}
#business .project__title::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: none;
  -webkit-clip-path: polygon(35px 0, 100% 0, 100% 100%, 0% 100%);
          clip-path: polygon(35px 0, 100% 0, 100% 100%, 0% 100%);
  background-color: #DF0234;
  z-index: -1;
  -webkit-transition: width 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: width 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
#business .project__title h2 {
  color: #fff;
  font-size: max(2.5rem, 18px);
  font-weight: 700;
  line-height: 2;
  letter-spacing: 0.1em;
}
#business .project__title.active {
  -webkit-transform: scaleX(1);
          transform: scaleX(1);
}
#business .project__title.active::before {
  width: max(30%, 100px);
}
#business .project__content h3 {
  font-size: max(2.2rem, 16px);
  font-weight: 700;
  line-height: 2;
  letter-spacing: 0.1em;
}
#business .project__content__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: max(2rem, 15px);
  margin-top: max(1rem, 10px);
  margin-bottom: max(4rem, 20px);
}
@media screen and (max-width: 1000px) {
  #business .project__content__list {
    grid-template-columns: repeat(2, 1fr);
  }
}
#business .project__content__list__item {
  -webkit-transform: scale(0.8);
          transform: scale(0.8);
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
  width: 100%;
  height: auto;
  padding: max(2rem, 15px);
  aspect-ratio: 1/1;
  background: rgba(234, 234, 234, 0.5);
  border: max(0.2rem, 2px) solid #002353;
  -webkit-transition: -webkit-transform 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: -webkit-transform 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: transform 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: transform 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955), -webkit-transform 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
#business .project__content__list__item .number {
  position: absolute;
  display: grid;
  place-items: center;
  top: 0;
  left: 0;
  width: auto;
  height: auto;
  padding: max(1.5rem, 5px);
  aspect-ratio: 1/1;
  background: #002353;
  color: #fff;
  font-family: YakuHanJP, "Manrope", "Noto Sans JP", sans-serif;
  font-size: max(4rem, 20px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
}
@media screen and (max-width: 1000px) {
  #business .project__content__list__item .number {
    font-size: max(5vw, 20px);
    padding: max(3rem, 10px);
  }
}
#business .project__content__list__item h4 {
  font-size: max(1.8rem, 15px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.1em;
}
@media screen and (max-width: 1000px) {
  #business .project__content__list__item h4 {
    font-size: max(2.5vw, 15px);
  }
}
@media screen and (max-width: 550px) {
  #business .project__content__list__item h4 {
    font-size: 3.3vw;
  }
}
#business .project__content__list__item.active {
  -webkit-transform: scale(1);
          transform: scale(1);
}