main {
  padding-top: var(--header_h);
}

header.hidden {
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
}

.p-section__inner {
  width: 81%;
  margin-inline: auto;
}
.p-section__title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 10px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.p-section__title--left {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
.p-section__title--center {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.p-section__lead--1 {
  max-width: 94px;
}
@media screen and (max-width: 767px) {
  .p-section__lead--1 {
    max-width: 75.2px;
  }
}
.p-section__lead--2 {
  max-width: 87px;
}
@media screen and (max-width: 767px) {
  .p-section__lead--2 {
    max-width: 69.6px;
  }
}
.p-section__lead--3 {
  max-width: 75px;
}
@media screen and (max-width: 767px) {
  .p-section__lead--3 {
    max-width: 60px;
  }
}
.p-section__lead--4 {
  max-width: 160px;
}
@media screen and (max-width: 767px) {
  .p-section__lead--4 {
    max-width: 128px;
  }
}
.p-section__lead--5 {
  max-width: 121px;
}
@media screen and (max-width: 767px) {
  .p-section__lead--5 {
    max-width: 96.8px;
  }
}
.p-section__subtitle {
  font-size: 28px;
  line-height: 1.3571428571;
  letter-spacing: 0.08em;
}
@media screen and (max-width: 767px) {
  .p-section__subtitle {
    font-size: 22px;
  }
}
.p-section__content {
  max-width: 750px;
  width: 90%;
  margin-inline: auto;
}
.p-section__text {
  font-size: 16px;
  line-height: 2.375;
  letter-spacing: 0.08em;
  letter-spacing: 0.16em;
  margin-top: 70px;
}
@media screen and (max-width: 767px) {
  .p-section__text {
    font-size: 14px;
    margin-top: 30px;
  }
}
.p-section__textBlock--white {
  color: #ffffff;
}
@media screen and (max-width: 767px) {
  .p-section__container {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

.concept {
  position: relative;
  background: rgb(65, 72, 83);
  background: -webkit-gradient(linear, left top, right top, from(rgb(65, 72, 83)), color-stop(25%, rgb(73, 81, 91)), color-stop(50%, rgb(74, 78, 85)), color-stop(75%, rgb(66, 69, 74)), to(rgb(66, 68, 73)));
  background: -webkit-linear-gradient(left, rgb(65, 72, 83) 0%, rgb(73, 81, 91) 25%, rgb(74, 78, 85) 50%, rgb(66, 69, 74) 75%, rgb(66, 68, 73) 100%);
  background: linear-gradient(90deg, rgb(65, 72, 83) 0%, rgb(73, 81, 91) 25%, rgb(74, 78, 85) 50%, rgb(66, 69, 74) 75%, rgb(66, 68, 73) 100%);
}
.concept__area {
  background: url(https://gigaplus.makeshop.jp/kayustyle/craftsman/img/bg_concept.jpg) center/cover, no-repeat;
  width: 100%;
  height: auto;
  padding-block: 120px 180px;
}
@media screen and (max-width: 767px) {
  .concept__area {
    padding-block: 60px 120px;
    aspect-ratio: 1500/660;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom;
  }
}
.concept__container {
  width: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media screen and (max-width: 767px) {
  .concept__container {
    width: 100%;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
}
.concept__left {
  max-width: 480px;
  width: 100%;
}

.material__area {
  margin-top: 65px;
}
@media screen and (max-width: 767px) {
  .material__area {
    margin-top: 30px;
  }
}
.material__container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 50px;
}
@media screen and (max-width: 767px) {
  .material__container {
    gap: 25px;
  }
}
.material__image {
  max-width: 520px;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .material__image {
    max-width: 260px;
    margin-left: auto;
  }
}
.material__left {
  max-width: 538px;
  width: 100%;
  margin-top: 80px;
}
@media screen and (max-width: 767px) {
  .material__left {
    margin-top: 0;
  }
}

.feature__area {
  margin-top: 150px;
  background: #f0efeb;
  padding-top: 60px;
}
.feature__container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 65px;
}
@media screen and (max-width: 767px) {
  .feature__container {
    gap: 30px;
  }
}
.feature__image--1 {
  max-width: 492px;
  width: 100%;
  margin-top: -160px;
}
@media screen and (max-width: 767px) {
  .feature__image--1 {
    max-width: 180px;
  }
}
.feature__image--2 {
  max-width: 610px;
  width: 100%;
  translate: 0 37.16%;
}
@media screen and (max-width: 767px) {
  .feature__image--2 {
    width: 100%;
  }
}
.feature__textBlock {
  max-width: 535px;
}
.ux__area {
  margin-top: 280px;
}
@media screen and (max-width: 767px) {
  .ux__area {
    margin-top: 140px;
  }
}
.ux__textBlock {
  max-width: 720px;
  margin-inline: auto;
}
.ux__imageBlock {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 10px;
  margin-top: 80px;
}
@media screen and (max-width: 767px) {
  .ux__imageBlock {
    margin-top: 40px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
@media screen and (max-width: 767px) {
  .ux__image {
    max-width: 220px;
  }
  .ux__image--1 {
    margin-right: auto;
  }
  .ux__image--2 {
    margin-left: auto;
  }
  .ux__image--3 {
    margin-right: auto;
  }
}

.environment__area {
  background: #f0efeb;
  padding-block: 85px 150px;
  margin-top: 150px;
}
@media screen and (max-width: 767px) {
  .environment__area {
    padding-block: 40px 75px;
    margin-top: 75px;
  }
}
.environment__container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 80px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
@media screen and (max-width: 767px) {
  .environment__container {
    gap: 40px;
  }
}
.environment__textBlock {
  max-width: 550px;
  width: 100%;
  margin-top: 60px;
}
@media screen and (max-width: 767px) {
  .environment__textBlock {
    margin-top: 30px;
  }
}
.environment__image {
  max-width: 520px;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .environment__image {
    max-width: 260px;
    margin-left: auto;
  }
}
/*# sourceMappingURL=style.css.map */