@import url("global.css");
.introduction {
  display: flex;
  align-items: center;
  gap: min(70px,5vw);
  justify-content: space-between;
  flex-direction: row-reverse;
  margin-bottom: 130px;
}
.introduction .main .catch {
  font-size: min(28px,2.6vw);
  line-height: 1.8;
  color: #639A70;
  margin-bottom: 30px;
}
.introduction .main .text {
  font-size: min(18px,1.6vw);
}
.introduction .main .text p + p {
  margin-top: 30px;
}
.introduction .image {
  width: 43%;
  flex-shrink: 0;
  aspect-ratio: 3 / 2;
}
.introduction .image img {
  border-radius: calc(var(--radius) / 4 * 3);
}

.concept {
  margin-inline: max(0px,calc(((100% - 1400px) / 2 ) - 7vw));
  min-height: min(100vh,900px);
  position: relative;
  color: #fff;
}
.concept .bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: var(--radius);
  overflow: hidden;
}
.concept .bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #000;
  opacity: .5;
  z-index: 1;
}
.concept .wrapper {
  position: relative;
  z-index: 2;
  padding-block: 110px;
}
.concept .text {
  width: 50%;
  min-width: 520px;
}
.concept .text .catch {
  font-size: clamp(16px, 3.5vw, 26px);
  margin-bottom: 70px;
  line-height: 1.9;
}
.concept .text p + p {
  margin-top: 30px;
}

/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint ( 1300px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 1300px) {
  .introduction .main .text p + p {
    margin-top: 20px;
  }
}
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-2 ( 959px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 959px) {
  .introduction {
    display: block;
    margin-bottom: 80px;
  }
  .introduction .main .catch {
    font-size: min(22px,5.2vw);
    margin-bottom: 30px;
  }
  .introduction .main .text {
    font-size: inherit;
  }
  .introduction .image {
    width: 60%;
    margin-bottom: 40px;
  }

  .concept .bg {
    border-radius: 0;
  }
  .concept .wrapper {
    padding-block: 80px;
  }
  .concept .text {
    width: auto;
    min-width: inherit;
  }
  .concept .text .catch {
    margin-bottom: 40px;
  }
  .concept .text p + p {
    margin-top: 20px;
  }
}
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-3 ( 644px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 644px) {
  .introduction {
    margin-bottom: 60px;
  }
  .introduction .main .catch {
    margin-bottom: 25px;
  }
  .introduction .main .text p + p {
    margin-top: 1em;
  }
  .introduction .image {
    width: 80%;
    margin: 0 0 30px auto;
  }

  .concept {
    min-height: min(100vh,600px);
  }
  .concept .wrapper {
    padding-block: 50px;
  }
  .concept .text {
    width: auto;
  }
  .concept .text .catch {
    margin-bottom: 30px;
  }
  .concept .text p + p {
    margin-top: 1em;
  }
}

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