@charset "utf-8";

/* -----------------------------------------
SERVICE
-------------------------------------------*/
.service__section-title::after {
  margin-left: -183px;
}

.service__wrapper {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 5%;
  margin: 100px 0 60px;
}
.service__img {
  width: 40%;
  max-width: 420px;
  object-fit: contain;
}
.service__inner {
  width: 60%;
}
.service__inner-title {
  font-size: clamp(
    1.25rem,
    1.2rem + 0.25vw,
    1.5rem
  ); /*320px:20px - 1920px:24px*/
  margin-bottom: 40px;
}
.service__wrapper:nth-of-type(2) {
  flex-direction: row-reverse;
}
.service__wrapper:nth-of-type(3) {
  margin-bottom: 150px;
}

@media (max-width: 768px) {
  .service__wrapper {
    flex-direction: column;
    align-items: center;
    gap: 0;
    margin: 100px 0 60px;
  }
  .service__img {
    width: 100%;
  }
  .service__inner {
    width: 100%;
  }
  .service__inner-title {
    margin: 20px 0;
  }
  .service__wrapper:nth-of-type(2) {
    flex-direction: column;
  }
  .service__wrapper:nth-of-type(3) {
    margin-bottom: 80px;
  }
}

/* -----------------------------------------
PROCESS
-------------------------------------------*/
.process {
  width: 100%;
  position: relative;
  background-color: var(--color-bg-black);
  padding-top: 150px;
}
@media (max-width: 768px) {
  .process {
    padding-top: 0;
  }
}
/* ↓↓↓↓↓↓↓↓↓ 上の波 ここから ↓↓↓↓↓↓↓↓↓ */
.custom-shape-divider-bottom-1781589817 {
  position: absolute;
  top: -150px;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  transform: rotate(180deg);
}
.custom-shape-divider-bottom-1781589817 svg {
  position: relative;
  display: block;
  width: calc(133% + 1.3px);
  height: 150px;
}
.custom-shape-divider-bottom-1781589817 .shape-fill {
  fill: #4f545a;
}
@media (max-width: 768px) {
  .custom-shape-divider-bottom-1781589817 {
    top: -49px;
  }
  .custom-shape-divider-bottom-1781589817 svg {
    width: 100%;
    height: 50px;
  }
}
/* ↑↑↑↑↑↑↑↑ 上の波 ここまで ↑↑↑↑↑↑↑↑ */

/* ↓↓↓↓↓↓↓↓↓ PROCESS 中身 ここから ↓↓↓↓↓↓↓↓↓ */
.process__section-title {
  color: var(--color-font-white);
  margin-top: 60px;
}
.process__section-title::after {
  margin-left: -101px;
}
.process__list {
  color: var(--color-font-white);
  margin: 100px 0 0 clamp(0rem, -18.542rem + 24.72vw, 11.125rem);
}
.process__item {
  display: flex;
  align-items: center;
  gap: 40px;
  margin-bottom: 60px;
}
.process__number {
  font-size: clamp(1.125rem, 1.05rem + 0.38vw, 1.5rem);
  border-bottom: 1px solid var(--color-font-white);
  padding-bottom: 4px;
}
.process__img {
  width: clamp(5.375rem, 1.417rem + 5.28vw, 7.75rem);
}

@media (max-width: 768px) {
  .process__section-title {
    margin-top: 0;
  }
  .process__item {
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-bottom: 60px;
  }
  .process__title {
    text-align: center;
  }
}

/* ↑↑↑↑↑↑↑↑ PROCESS 中身 ここまで ↑↑↑↑↑↑↑↑ */

/* ↓↓↓↓↓↓↓↓↓ 下の波 ここから ↓↓↓↓↓↓↓↓↓ */
.custom-shape-divider-top-1781590197 {
  position: absolute;
  bottom: -150px;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
}
.custom-shape-divider-top-1781590197 svg {
  position: relative;
  display: block;
  width: calc(133% + 1.3px);
  height: 150px;
}
.custom-shape-divider-top-1781590197 .shape-fill {
  fill: #4f545a;
}
@media (max-width: 768px) {
  .custom-shape-divider-top-1781590197 {
    bottom: -50px;
  }
  .custom-shape-divider-top-1781590197 svg {
    width: 100%;
    height: 50px;
  }
}

/* -----------------------------------------
FAQ
-------------------------------------------*/
.faq {
  background-color: var(--color-bg-gray);
  padding-top: 150px;
}
.faq__section-title::after {
  background-color: var(--color-bg-black);
  margin-left: -122px;
}
.faq__container {
  font-size: clamp(1rem, 0.583rem + 0.56vw, 1.25rem); /*16px 20px*/
  margin: 100px 0 0 clamp(0rem, -18.542rem + 24.72vw, 11.125rem);
}
.faq__item {
  margin-bottom: 40px;
}
.faq__question {
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: opacity 0.3s;
  margin-bottom: 20px;
}
.faq__question:hover {
  opacity: 0.7;
}
.faq__answer {
  font-size: clamp(1rem, 0.583rem + 0.56vw, 1.25rem); /*16px 20px*/
  padding-left: 3rem;
}

@media (max-width: 768px) {
  .faq {
    padding-top: 60px;
  }
}

/* -----------------------------------------
Works
-------------------------------------------*/
.works__note {
  max-width: 600px;
  font-size: 14px;
  margin: 40px auto;
}
.works__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 330px));
  justify-content: center;
  gap: 80px 46px;
  margin-top: 100px;
}
.works__list-item {
  width: 100%;
}
.works__list-item img {
  width: 100%;
  height: auto;
  display: block;
}
.works__caption {
  margin-top: 20px;
}