@font-face {
  font-family: "Noto Sans JP";
  src: url("../assets/fonts/NotoSansJP-VariableFont_wght.woff2") format("woff2 supports variations"), url("../assets/fonts/NotoSansJP-VariableFont_wght.woff2") format("woff2-variations");
  font-weight: 400 500 600 700;
}
section.business {
  background-color: #F4E6C2;
  padding-bottom: clamp(40px, 6vw, 80px);
  margin-top: clamp(100px, 10vw, 180px);
}
section.business .h2-title-group {
  transform: translateY(calc(clamp(4rem, 10vw, 13rem) * -0.5));
}
section.business .h2-title-group h3 {
  margin-bottom: 0.6em;
}
section.business .h2-title-group h4.subtitle {
  font-size: clamp(18px, 2vw, 25px);
  line-height: 190%;
}
section.business p.text-block {
  margin: 0 auto;
  width: 84.6%;
  max-width: 730px;
}
@media screen and (min-width: 801px) {
  section.business p.text-block {
    line-height: 275%;
  }
}

section.project {
  margin: clamp(60px, 10vw, 120px) auto clamp(120px, 15vw, 200px);
  width: 92%;
  max-width: 1240px;
}
section.project .h2-title-group {
  margin-bottom: clamp(40px, 6vw, 100px);
}
section.project .compare-container {
  width: 100%;
  text-align: center;
}
section.project .img-col {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  max-width: 500px;
}
section.project .img-col img, section.project .img-col picture {
  max-width: 460px;
  aspect-ratio: 1/1;
  border-radius: 2.5em;
  object-fit: cover;
}
section.project .img-col h4 {
  font-size: clamp(18px, 2vw, 24px);
  margin: 1.5em 0 1em;
}
section.project .img-col p {
  max-width: 460px;
  line-height: 280%;
}
section.project .arrow-col {
  margin: clamp(40px, 5vw, 60px) 0;
}
@media screen and (min-width: 801px) {
  section.project .compare-container {
    justify-content: space-between;
    align-items: flex-start;
  }
  section.project .img-col {
    width: 40%;
  }
  section.project .arrow-col {
    width: 18%;
    margin-top: 12%;
  }
}

section.project-1 .project-title-group h2,
section.project-2 .project-title-group h2 {
  letter-spacing: 0.02em;
}
section.project-1 .project-title-group h3,
section.project-2 .project-title-group h3 {
  font-family: "toppan-bunkyu-gothic-pr6n", "Noto Sans JP", Noto Sans JP, YuGothic, "Yu Gothic", "Yu Gothic Medium", Meiryo, sans-serif;
  font-weight: 600;
  font-weight: demibold;
  letter-spacing: 0.08em;
}
section.project-1 .project-title-group h3::after, section.project-1 .project-title-group h3::before,
section.project-2 .project-title-group h3::after,
section.project-2 .project-title-group h3::before {
  display: none;
}
section.project-1 picture img,
section.project-2 picture img {
  border-radius: clamp(12px, 2vw, 26px);
}
section.project-1 .text-container p,
section.project-2 .text-container p {
  margin-bottom: 2em;
}
@media screen and (min-width: 801px) {
  section.project-1 .project-title-group,
section.project-2 .project-title-group {
    text-align: start;
    margin: 0 0 0 0;
  }
  section.project-1 .project-title-group h2,
section.project-2 .project-title-group h2 {
    margin-bottom: 0.26em;
  }
  section.project-1 .project-title-group h3,
section.project-2 .project-title-group h3 {
    justify-content: flex-start;
    width: 100%;
    line-height: 100%;
    margin-bottom: 0.75em;
  }
  section.project-1 .text-container p,
section.project-2 .text-container p {
    line-height: 275%;
    margin-bottom: 3.5em;
  }
}

section.project-1 {
  width: 84.6%;
  margin: 0 auto clamp(100px, 15vw, 225px);
}
section.project-1 .text-container {
  max-width: clamp(400px, 40vw, 700px);
}
section.project-1 .text-container h4 {
  margin-bottom: 1em;
}
section.project-1 .text-container p {
  line-height: 200%;
}
@media screen and (max-width: 801px) {
  section.project-1 .grid-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex-wrap: wrap;
  }
  section.project-1 .grid-wrapper .project-title-group {
    order: 1;
    width: 100%;
    margin-bottom: 32px;
  }
  section.project-1 .grid-wrapper .g-1 {
    order: 2;
    margin-bottom: clamp(12px, 3vw, 40px);
    max-width: 400px;
  }
  section.project-1 .grid-wrapper .g-2,
section.project-1 .grid-wrapper .g-3 {
    order: 3;
    width: 46%;
    max-width: 240px;
    margin: 0 auto;
  }
  section.project-1 .grid-wrapper .text-container {
    order: 5;
  }
  section.project-1 .text-container {
    margin: 40px auto 0;
  }
}
@media screen and (min-width: 801px) {
  section.project-1 {
    max-width: 1440px;
    margin: 0 6.5vw clamp(100px, 15vw, 225px) auto;
  }
  section.project-1 .grid-wrapper {
    display: grid;
    grid-template-columns: 1fr 14% 16.9% 3% 20%;
    grid-template-rows: auto auto clamp(20px, 3vw, 40px) clamp(20px, 3vw, 40px) auto;
  }
  section.project-1 .grid-wrapper .project-title-group {
    grid-column: 1/3;
    grid-row: 1/2;
  }
  section.project-1 .grid-wrapper .text-container {
    grid-column: 1/3;
    grid-row: 2/5;
  }
  section.project-1 .grid-wrapper .g-1 {
    grid-column: 3/6;
    grid-row: 2/4;
  }
  section.project-1 .grid-wrapper .g-2 {
    grid-column: 2/4;
    grid-row: 3/6;
  }
  section.project-1 .grid-wrapper .g-3 {
    grid-column: 5/6;
    grid-row: 5/6;
  }
  section.project-1 picture {
    width: 100%;
    height: 100%;
  }
  section.project-1 picture img {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
}
@media screen and (min-width: 1921px) {
  section.project-1 {
    margin-right: auto;
  }
}

section.project-2 {
  width: 84.6%;
  margin-bottom: clamp(80px, 10vw, 130px);
}
section.project-2 .img-banner {
  max-width: 400px;
  margin-bottom: 32px;
}
section.project-2 .text-container {
  max-width: 400px;
}
section.project-2 .text-container h4 {
  margin: 2em 0 1em;
}
section.project-2 .text-container p {
  line-height: 200%;
}
@media screen and (min-width: 801px) {
  section.project-2 {
    width: 100%;
    max-width: 100%;
    align-items: flex-start;
  }
  section.project-2 picture img {
    border-top-left-radius: unset;
    border-bottom-left-radius: unset;
  }
  section.project-2 .img-banner {
    width: 32.8vw;
    max-width: unset;
    margin: 50px 3.5vw 0 0;
  }
  section.project-2 .text-container {
    width: 60vw;
    max-width: 782px;
  }
  section.project-2 .text-container h4 {
    margin: 0 0 1em 0;
  }
  section.project-2 .text-container p {
    max-width: 700px;
    line-height: 275%;
    margin-bottom: 3.5em;
  }
}
@media screen and (min-width: 1601px) {
  section.project-2 .img-banner {
    width: 44.8vw;
  }
  section.project-2 .text-container {
    width: 45vw;
  }
}

/*# sourceMappingURL=business.css.map */