@charset "UTF-8";

/* ===== FAQ ===== */
.faq {
  margin-top: 90px;

  .faq__layout {
    position: relative;
    max-width: 1440px;
    margin-inline: auto;
    padding-left: 70px;
    padding-right: 70px;
    z-index: 1;

    .faq-grid {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 32px;
      margin: 74px 0 50px;

      .faq-item {
        position: relative;
        width: 47%;

        .faq-item__no {
          position: absolute;
          top: -17px;
        }

        .faq-item__link {
          height: 100%;
          display: block;
          padding: 20px;
          border-radius: 24px;
          background: #fff;
          box-shadow: var(--shadow-card);
          margin-left: 18px;

          &:hover {
            .faq-item__arrow {
              opacity: 0.8;
            }
          }

          .faq-item__tags {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 4px;
            list-style: none;
            padding: 0;
            margin: 0 0 22px;

            li {
              line-height: 1.2;
              font-size: var(--text-tags);
              color: var(--color-base-black);

              &.faq-item__tags-bg {
                padding: 5px 12px;
                background: var(--color-gray-60);
                border-radius: 30px;
              }
            }
          }

          .faq-item__image {
            img {
              width: 100%;
            }
          }

          .faq-item__arrow {
            display: flex;
            justify-content: end;
            gap: 8px;

            p {
              margin: 0;
              letter-spacing: 1px;
              font-size: 16px;
              color: var(--color-accent);
            }
          }
        }
      }
    }
  }
}

@media (max-width: 790px) {
  .faq {
    margin-top: 70px;

    .faq__layout {
      max-width: 100%;
      padding-left: 15px;
      padding-right: 15px;

      .faq-grid {
        gap: 30px;
        margin: 43px 0 10px;

        .faq-item {
          width: 100%;
          height: auto;
          padding-left: 10px;

          .faq-item__no {
            top: -10px;
            left: 0;
            width: 40px;
          }

          .faq-item__link {
            padding: 15px 7px;
            margin: 0 auto;
            width: 100%;

            .faq-item__image {
              img {
                width: 100%;
              }
            }

            .faq-item__tags {
              gap: 4px;
              margin: 0 0 12px;

              li {
                &.faq-item__tags-bg {
                  font-size: var(--text-tags);
                  padding: 6px 10px;
                }
              }
            }
            .faq-item__arrow {
              font-size: 14px;
            }
          }
        }
      }
    }
  }
}

/* ===== FLOW ===== */
.flow {
  position: relative;
  width: 100%;
  isolation: isolate;
  inset: 0;
  margin: 130px 0 0;

  .bg_gritty {
    top: 57%;

    &::before {
      top: 0;
      left: 49%;
      height: 12%;
      background-image: url(/assets/img/bg_gritty_05.webp);
    }
  }

  .flow__layout {
    .flow__images {
      display: flex;
      align-items: end;
      flex-wrap: wrap;

      .flow__image {
        margin: 0 auto;
        width: 20%;
        padding-bottom: 70px;

        img {
          width: 100%;
        }
      }

      .clm {
        position: relative;
        display: grid;
        gap: 16px;
        margin: 0;
        padding: 0;
        width: 70%;
        counter-reset: step;
        list-style: none;

        li {
          position: relative;
          background: #fff;
          border-radius: 16px;
          padding: 15px 40px 15px 30px;

          &:last-child .flowBox_step::before {
            display: none;
          }

          .flowBox {
            position: relative;
            display: grid;
            grid-template-columns: max-content auto;
            gap: 30px;
            align-items: center;

            .flowBox_step {
              position: relative;

              &::before {
                content: "";
                position: absolute;
                top: 75px;
                bottom: -80px;
                left: 50%;
                transform: translateX(-50%);
                background-image: radial-gradient(
                  circle,
                  #2e6b3f 1.8px,
                  transparent 1.8px
                );
                background-repeat: repeat-y;
                z-index: 1;
                background-size: 5px 7px;
                inline-size: 5px;
              }

              .listNum {
                counter-increment: step;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                width: 64px;
                height: 64px;
                border-radius: 50%;
                background: var(--color-secondary);
                color: #fff;
                font-family: "DIN 2014";
                font-weight: bold;
                letter-spacing: 1.3px;
                position: relative;
                z-index: 1;

                &::before {
                  content: "STEP";
                  margin-top: 4px;
                  line-height: 1;
                  font-size: 10px;
                }

                &::after {
                  content: counter(step, decimal-leading-zero);
                  line-height: 1;
                  font-size: 30px;
                  font-family: var(--font-din-2014);
                }
              }
            }

            .flowBox_body {
              display: flex;
              justify-content: space-between;
              align-items: center;
              gap: 10px;

              .flowBox_body_text {
                display: grid;
                gap: 6px;
                color: var(--color-secondary);

                h3 {
                  margin: 0;
                  line-height: 1.5;
                  font-size: var(--text-h5-pc);
                  font-weight: 600;
                }
                p {
                  margin: 0;
                  line-height: 1.6;
                  font-size: var(--text-l-pc);
                  font-weight: 400;
                }
              }

              .flowBox_body_image {
                img {
                  width: 100%;
                  max-width: 100px;
                }
              }
            }
          }
        }
      }
    }

    .flow__bottom {
      margin-top: 100px;

      p {
        margin: 0;
        font-size: var(--text-l-pc);
        font-weight: 500;
        color: var(--color-secondary);
      }
    }
  }
}

@media (max-width: 790px) {
  .flow {
    margin: 60px 0 0;

    .bg_gritty {
      top: 1%;

      &::before {
        top: 0;
        left: 200%;
        width: 300%;
      }
    }

    .flow__layout {
      gap: 50px;

      .flow__intro {
        width: 100%;
      }

      .flow__images {
        margin-top: 30px;
        gap: 20px;

        .flow__image {
          display: none;
        }

        .clm {
          gap: 12px;
          padding: 0;
          width: 100%;

          li {
            padding: 15px 10px;

            .flowBox {
              align-items: start;
              gap: 10px;

              .flowBox_step {
                &::before {
                  top: 48px;
                  bottom: -194px;
                  left: 50%;
                  background-size: 5px 5px;
                  inline-size: 5px;
                  background-image: radial-gradient(
                    circle,
                    #2e6b3f 1.5px,
                    transparent 1.5px
                  );
                }

                .listNum {
                  width: 40px;
                  height: 40px;
                  letter-spacing: 0.7px;

                  &::before {
                    font-size: clamp(7px, 1.8vw, 10px);
                  }

                  &::after {
                    font-size: clamp(20px, 5vw, 23px);
                  }
                }
              }

              .flowBox_body {
                flex-direction: column;

                .flowBox_body_text {
                  h3 {
                    font-size: var(--text-h5-sp);
                  }
                  p {
                    font-size: clamp(12px, 4.1vw, 16px);
                  }
                }

                .flowBox_body_image {
                  img {
                    margin-right: 60px;
                  }
                }
              }
            }
          }
        }
      }

      .flow__bottom {
        margin-top: 70px;

        p {
          font-size: var(--text-m-sp);
        }
      }
    }
  }
}

/* ===== LINK-CARD ===== */
.link-card {
  padding: 70px 0 140px;
}

@media (max-width: 790px) {
  .link-card {
    padding: 40px 0 70px;
  }
}