@charset "UTF-8";

:root {
  --color-red: #f51940;
}

#fv {
  position: relative;
  z-index: 1;
  padding: 30rem 20rem;
  background-image: url(./img/fv1.jpg);
  background-size: cover;
  background-repeat: no-repeat;

  @media print, screen and (min-width: 767.01px) {
    /* features の緑へつなぐ。穴を開けるとページ白地が抜ける */
    &::after {
      content: "";
      position: absolute;
      inset: auto 0 0;
      height: 30rem;
      background: linear-gradient(180deg, transparent, #0d6e56);
      pointer-events: none;
      z-index: 1;
    }
  }

  @media screen and (max-width: 767px) {
    padding: 13rem 0 2rem;
    background-size: auto;
    background-position: center top;
  }

  .fv-bg {
    background-position: center top;
  }

  .inner {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    @media screen and (max-width: 767px) {
      flex-direction: column;
      align-items: flex-start;
    }

    .left-texts {
      width: 72rem;

      @media print, screen and (min-width: 767.01px) {
        transform: translateX(-12rem);
      }

      @media screen and (max-width: 767px) {
        width: 100%;
      }

      .catch {
      }

      .head {
        margin-top: 3.2rem;
        border-top: 0.1rem solid var(--color-border);

        @media screen and (max-width: 767px) {
          margin-top: 1.5rem;
        }
      }

      .text5 {
        margin-top: 2rem;
        padding-bottom: 3.2rem;
        border-bottom: 0.1rem solid var(--color-border);
        margin-bottom: 3.2rem;
        font-weight: 500;
        font-size: 2rem;
        line-height: 180%;
        letter-spacing: 0.05em;
        color: #ffffff;

        @media screen and (max-width: 767px) {
          margin-top: 1rem;
          font-size: 1.2rem;
          padding-bottom: 1.5rem;
          margin-bottom: 1.5rem;
        }
      }

      .buttons {
        margin-top: 2.3rem;
        display: flex;
        align-items: center;
        gap: 0.9rem;
        width: 100%;

        .button {
          border-radius: 0.8rem;
          background-color: #fef02d;
          display: flex;
          justify-content: center;
          align-items: center;
          height: 4.6rem;
          gap: 0.4rem;
          flex: 1;

          & span {
            font-family: "Noto Sans JP";
            font-weight: 700;
            font-size: 1.2rem;
            letter-spacing: 0.05em;
            color: var(--color-primary);
          }

          & img {
            width: 1.3rem;
            translate: 0 0.1rem;
          }
        }
      }

      .white-btn {
        width: 100%;
        height: 8rem;
        background-color: #fff;
        border-radius: 4rem;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.8rem;

        @media screen and (max-width: 767px) {
          margin-top: 2rem;
          height: 5rem;
        }

        & span {
          font-weight: 700;
          font-size: 2rem;
          line-height: 140%;
          letter-spacing: 0.1em;
          color: var(--color-primary);

          @media screen and (max-width: 767px) {
            font-size: 1.4rem;
          }
        }

        & img {
          width: 2.4rem;
          translate: 0 0.2rem;

          @media screen and (max-width: 767px) {
            width: 1.6rem;
            translate: 0 0.1rem;
          }
        }
      }
    }

    .right-image {
      width: 60rem;
      transform: translate(6rem, -4rem);

      @media screen and (max-width: 767px) {
        margin-top: 1rem;
        width: 100%;
        transform: none;
      }
    }
  }
}

.title-tag {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  border-left: 0.1rem solid #fff;
  height: 6rem;
  padding-left: 1.2rem;
  transform: rotate(90deg);
  transform-origin: left bottom;
  margin-top: 3rem;

  @media screen and (max-width: 1080px) {
    height: 5rem;
  }

  @media screen and (max-width: 767px) {
    display: none;
  }

  .en {
    font-family: "Inter";
    font-weight: 500;
    font-size: 1.2rem;
    line-height: 1;
    letter-spacing: 0.05em;
    color: #ffffff;
  }

  .ja {
    font-weight: 700;
    font-size: 1.6rem;
    line-height: 1.5;
    letter-spacing: 0.05em;
    color: #ffffff;
  }
}

.c-red {
  color: var(--color-red);
}

.c-yellow {
  color: #fef02d;
}

/* section 1 */
#features {
  position: relative;
  padding-bottom: 18rem;
  margin-top: -10rem;
  background-color: #0d6e56;
  background-image: url(./img/bg-polygon.jpg);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% auto;

  @media screen and (max-width: 767px) {
    margin-top: 0;
    padding-bottom: 10rem;
  }

  .bg-deco1 {
    display: none;
    z-index: 2;
    width: 112rem;
    position: absolute;
    left: 15%;
    top: -40%;
    pointer-events: none;
  }

  .bg-deco2 {
    z-index: 2;
    width: 74rem;
    position: absolute;
    right: 0;
    top: -20%;
    pointer-events: none;

    @media screen and (max-width: 767px) {
      display: none;
    }
  }

  .bg-deco3 {
    mix-blend-mode: color-dodge;
    width: 76rem;
    position: absolute;
    left: 0;
    top: 22%;
    pointer-events: none;

    @media screen and (max-width: 767px) {
      display: none;
    }
  }

  .row1 {
    z-index: 2;
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;

    @media screen and (max-width: 767px) {
      grid-template-columns: 100%;
    }

    .left-img {
    }

    .right-texts {
      padding-left: 8rem;
      padding-right: 24rem;

      @media screen and (max-width: 767px) {
        padding: 3rem 1.5rem;
      }

      .title {
        background-color: #fff;
        padding: 1.3rem 1.6rem 1.6rem;
        font-weight: 700;
        font-size: 5.4rem;
        line-height: 100%;
        letter-spacing: 0.05em;
        color: #0d6e56;
        width: fit-content;

        @media screen and (max-width: 767px) {
          font-size: 2rem;
          padding: 1rem;
        }
      }

      .description {
        margin-top: 6rem;
        font-weight: 400;
        font-size: 1.8rem;
        line-height: 200%;
        letter-spacing: 0.1em;
        color: #ffffff;

        @media screen and (max-width: 767px) {
          margin-top: 1rem;
          font-size: 1.4rem;
        }
      }
    }
  }

  .row2 {
    margin-top: 12rem;

    @media screen and (max-width: 767px) {
      margin-top: 0;
    }
  }

  .row3 {
    margin-top: 4rem;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem 1.6rem;

    @media screen and (max-width: 767px) {
      margin-top: 2rem;
      grid-template-columns: repeat(2, 1fr);
      gap: 1.5rem;
    }

    .item {
      background: rgba(255, 255, 255, 0.1);
      padding: 3.2rem;
      display: flex;
      align-items: center;
      gap: 1.6rem;

      @media screen and (max-width: 767px) {
        flex-direction: column;
        padding: 1.5rem;
        gap: 1rem;
      }

      & img {
        width: 6.4rem;
        flex-shrink: 0;

        @media screen and (max-width: 767px) {
          width: 3rem;
        }
      }

      & p {
        font-weight: 600;
        font-size: 2.4rem;
        line-height: 140%;
        letter-spacing: 0.1em;
        color: #ffffff;

        @media screen and (max-width: 767px) {
          font-size: 1.2rem;
        }
      }
    }
  }

  .row4 {
    margin-top: 10rem;

    @media screen and (max-width: 767px) {
      margin-top: 3rem;
    }

    .small-txt {
      font-weight: 400;
      font-size: 1.8rem;
      line-height: 200%;
      text-align: center;
      letter-spacing: 0.1em;
      color: #ffffff;

      @media screen and (max-width: 767px) {
        font-size: 1.4rem;
      }
    }

    .big-txt {
      margin-top: 2.4rem;
      font-weight: 700;
      font-size: 4.4rem;
      line-height: 160%;
      text-align: center;
      letter-spacing: 0.05em;
      color: #ffffff;

      @media screen and (max-width: 767px) {
        margin-top: 1rem;
        font-size: 2rem;
      }
    }
  }
}

/* section 2 */
#feeling {
  position: relative;
  padding: 7rem 0 12rem;
  background-color: #edf3f5;
  background-image: url(./img/bg-feeling2.jpg);
  background-repeat: no-repeat;
  background-position: center 10rem;
  background-size: 100% auto;

  @media screen and (max-width: 767px) {
    background-image: url(./img/bg-feeling2-sp.jpg);
    padding: 3rem 0 5rem;
    background-position: center 14rem;
  }

  .text-box {
    position: absolute;
    top: 64rem;
    left: 0;
    padding: 2.7rem;
    width: 42.2rem;
    color: #fff;
    font-size: 2.2rem;
    font-weight: 600;
    line-height: 1.8;
    letter-spacing: 0.1em;
    background-color: #0d6e56;
    display: block;
    @media screen and (max-width: 767px) {
      padding: 1.6rem 2rem;
      width: 100%;
      font-size: 1.4rem;
      top: 50rem;
    }
  }

  .red-circles {
    padding-top: 76rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2.4rem;

    @media screen and (max-width: 767px) {
      padding-top: 24rem;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1rem;
      align-items: stretch;
    }

    .red-circle {
      border-radius: 50%;
      background-color: #f51940;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 1.2rem;

      @media print, screen and (min-width: 767.01px) {
        width: 26rem;
        height: 26rem;
        align-items: center;
      }

      @media screen and (max-width: 767px) {
        border-radius: 0.5rem;
        padding: 1rem 0.5rem;
        gap: 0.5rem;
      }

      .text {
        font-weight: 600;
        font-size: 1.6rem;
        line-height: 140%;
        text-align: center;
        color: #ffffff;

        @media screen and (max-width: 767px) {
          font-size: 1rem;
        }
      }

      .number {
        font-weight: 700;
        font-size: 2.4rem;
        line-height: 1;
        text-align: center;
        color: #ffffff;

        @media screen and (max-width: 767px) {
          font-size: 1.3rem;
        }

        & span {
          font-family: "Inter";
          font-size: 4.6rem;
          font-weight: 600;

          @media screen and (max-width: 767px) {
            font-size: 2rem;
          }
        }
      }
    }
  }

  .red-circles-sp {
    margin-top: 46rem;
  }

  .statement {
    margin-top: 3.2rem;
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 180%;
    text-align: center;
    letter-spacing: 0.05em;
    color: var(--color-primary);

    @media screen and (max-width: 767px) {
      margin-top: 2rem;
      font-size: 1.2rem;
    }
  }

  .two-lists {
    margin-top: 4rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4.8rem;

    @media screen and (max-width: 767px) {
      margin-top: 2rem;
      grid-template-columns: 100%;
      gap: 3rem;
    }

    .two-list {
      background-color: #fff;

      .list-title {
        background-color: #0d6e56;
        padding: 2.4rem 5.6rem;
        font-weight: 700;
        font-size: 2.8rem;
        line-height: 100%;
        color: #ffffff;

        @media screen and (max-width: 767px) {
          font-size: 1.6rem;
          padding: 1rem 1.5rem;
          text-align: center;
        }
      }

      .list-content {
        padding: 4rem 5.6rem 5.6rem;

        @media screen and (max-width: 767px) {
          padding: 2rem 1.5rem;
        }

        & p {
          font-weight: 400;
          font-size: 1.8rem;
          line-height: 200%;
          letter-spacing: 0.1em;
          color: var(--color-primary);

          @media screen and (max-width: 767px) {
            font-size: 1.2rem;
          }
        }

        & img {
          margin-top: 3.2rem;

          @media screen and (max-width: 767px) {
            margin-top: 1rem;
          }
        }
      }
    }
  }

  .text01 {
    margin-top: 6.4rem;
    font-weight: 700;
    font-size: 2.4rem;
    line-height: 160%;
    text-align: center;
    color: var(--color-primary);

    @media screen and (max-width: 767px) {
      margin-top: 3rem;
      font-size: 1.6rem;
    }
  }

  .text02 {
    font-weight: 700;
    font-size: 3.2rem;
    line-height: 160%;
    text-align: center;
    color: var(--color-primary);

    @media screen and (max-width: 767px) {
      font-size: 1.8rem;
    }
  }

  .triangle {
    margin: -2rem auto 0;
    width: 38.4rem;
    z-index: -1;

    @media screen and (max-width: 767px) {
      margin: 0 auto 0;
      width: 12rem;
    }
  }
}

/* section 3 */
#use-case {
  position: relative;
  background-image: url(./img/bg-expert.jpg);
  background-repeat: no-repeat;
  background-size: cover;

  .section-title {
    color: #fff;
  }

  .section-description {
    color: #fff;
  }

  .block-list {
    margin-top: 10rem;
    display: flex;
    flex-direction: column;
    gap: 10rem;

    @media screen and (max-width: 767px) {
      margin-top: 7rem;
      gap: 7rem;
    }

    .block-item {
      background-color: #fff;
      padding: 4.8rem;
      position: relative;

      @media screen and (max-width: 767px) {
        padding: 2rem 1.5rem;
      }

      .absolute-tag {
        background-color: #064029;
        position: absolute;
        left: -4rem;
        top: -4rem;
        padding: 2.4rem 4rem;
        display: flex;
        align-items: center;
        gap: 3.2rem;

        @media screen and (max-width: 767px) {
          left: 0;
          top: initial;
          bottom: 100%;
          padding: 1rem 1.5rem;
          gap: 2rem;
        }

        .txt1 {
          position: relative;
          font-weight: 700;
          font-size: 1.4rem;
          line-height: 130%;
          letter-spacing: 0.05em;
          color: #ffffff;

          &::after {
            content: "";
            position: absolute;
            top: 50%;
            right: -1.6rem;
            transform: translateY(-50%);
            height: 3rem;
            width: 0.1rem;
            background-color: #fff;
          }

          @media screen and (max-width: 767px) {
            font-size: 1.3rem;

            &::after {
              height: 1.5rem;
              right: -1rem;
            }
          }
        }

        .txt2 {
          font-weight: 700;
          font-size: 2.2rem;
          line-height: 130%;
          text-align: center;
          letter-spacing: 0.05em;
          color: #ffffff;

          @media screen and (max-width: 767px) {
            font-size: 1.6rem;
          }
        }
      }

      .item-main {
        display: grid;
        grid-template-columns: 46rem 1fr;
        gap: 4.8rem;

        @media screen and (max-width: 767px) {
          grid-template-columns: 100%;
          gap: 2rem;
        }

        .left-image {
        }

        .right-texts {
          .title {
            font-weight: 700;
            font-size: 3.2rem;
            line-height: 140%;
            color: #111111;

            @media screen and (max-width: 767px) {
              font-size: 2rem;
            }
          }

          .table {
            margin-top: 2rem;

            @media screen and (max-width: 767px) {
              margin-top: 1.5rem;
            }

            .pair {
              margin-top: 1rem;
              display: flex;
              align-items: baseline;
              gap: 1.6rem;

              @media screen and (max-width: 767px) {
                flex-direction: column;
                gap: 0.5rem;
              }

              .key {
                flex-shrink: 0;
                width: 6.8rem;
                font-weight: 700;
                font-size: 1.4rem;
                text-align: center;
                line-height: 1.5;
                color: #ffffff;
                background-color: var(--color-primary);
                padding-bottom: 0.1em;

                @media screen and (max-width: 767px) {
                  min-width: 5.6rem;
                  font-size: 1.3rem;
                  padding: 0.2rem 0.4rem 0.3rem;
                }
              }

              .value {
                font-weight: 400;
                font-size: 1.6rem;
                line-height: 180%;
                letter-spacing: 0.05em;
                color: var(--color-primary);

                @media screen and (max-width: 767px) {
                  font-size: 1.4rem;
                }
              }

              .result {
                background-color: var(--color-red);
              }

              .complicate {
                .bold-text {
                  font-weight: 700;
                  font-size: 1.8rem;
                  line-height: 1.7;
                  letter-spacing: 0.05em;
                  color: var(--color-primary);

                  @media screen and (max-width: 767px) {
                    font-size: 1.5rem;
                  }
                }

                .check-list {
                  margin-top: 1.5rem;
                  display: flex;
                  flex-wrap: wrap;
                  gap: 1.5rem 2rem;

                  @media screen and (max-width: 767px) {
                    margin-top: 1rem;
                    gap: 1rem 1.5rem;
                  }

                  .check-item {
                    display: flex;
                    align-items: center;
                    gap: 0.7rem;

                    @media screen and (max-width: 767px) {
                      gap: 0.5rem;
                    }

                    & img {
                      width: 2.4rem;

                      @media screen and (max-width: 767px) {
                        width: 1.8rem;
                      }
                    }

                    & p {
                      font-weight: 700;
                      font-size: 1.8rem;
                      letter-spacing: 0.05em;
                      color: var(--color-primary);

                      @media screen and (max-width: 767px) {
                        font-size: 1.4rem;
                      }
                    }
                  }
                }
              }
            }
          }

          .note {
            margin-top: 2rem;
            font-weight: 400;
            font-size: 1.4rem;
            line-height: 1.5;
            color: var(--color-primary);

            @media screen and (max-width: 767px) {
              margin-top: 1.5rem;
              font-size: 1rem;
            }
          }
        }
      }

      .item-bottom {
        & img {
          width: 10rem;
          margin: 2.5rem auto 0;

          @media screen and (max-width: 767px) {
            width: 6rem;
            margin: 2rem auto 0;
          }
        }

        & p {
          margin-top: 2rem;
          font-weight: 700;
          font-size: 2.2rem;
          line-height: 160%;
          text-align: center;
          letter-spacing: 0.05em;
          color: var(--color-primary);

          @media screen and (max-width: 767px) {
            margin-top: 1.5rem;
            font-size: 1.6rem;
          }
        }
      }
    }
  }

  .summary {
    margin-top: 5rem;
    font-weight: 700;
    font-size: 3.4rem;
    line-height: 180%;
    text-align: center;
    color: #ffffff;

    @media screen and (max-width: 767px) {
      margin-top: 3rem;
      font-size: 1.8rem;
    }

    & span {
      text-decoration: underline dotted;
      text-decoration-thickness: 0.15em;
      text-underline-offset: 0.5em;

      @media screen and (max-width: 767px) {
        display: inline-block;
        margin-bottom: 0.5em;
      }
    }
  }
}

/* section 4 */
#cost-reduction {
  padding-bottom: 0;

  .price-table {
    margin-top: 6.4rem;
    display: grid;
    grid-template-columns: 889fr 511fr;
    gap: 4rem;

    @media screen and (max-width: 767px) {
      margin-top: 3.2rem;
      grid-template-columns: 100%;
      gap: 2rem;
    }
  }

  .remark {
    margin-top: 4rem;
    margin-bottom: 12rem;
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 200%;
    text-align: center;
    letter-spacing: 0.1em;
    color: var(--color-primary);

    @media screen and (max-width: 767px) {
      margin-top: 2rem;
      margin-bottom: 5rem;
      font-size: 1.2rem;
      text-align: left;
    }
  }

  .independent-block {
    background-image: url(./img/bg-skill.jpg);
    background-size: cover;
    background-repeat: no-repeat;

    .inner {
      padding: 8rem 0;
      display: grid;
      grid-template-columns: 1fr 64rem;
      gap: 6.4rem;

      @media screen and (max-width: 767px) {
        padding: 5rem 0;
        grid-template-columns: 100%;
        gap: 1rem;
      }

      .texts {
        .title {
          font-weight: 700;
          font-size: 3.6rem;
          line-height: 160%;
          letter-spacing: 0.05em;
          color: #ffffff;

          @media screen and (max-width: 767px) {
            font-size: 2rem;
          }
        }

        .content {
          margin-top: 2rem;
          font-weight: 400;
          font-size: 1.8rem;
          line-height: 200%;
          letter-spacing: 0.1em;
          color: #ffffff;

          @media screen and (max-width: 767px) {
            margin-top: 1.5rem;
            font-size: 1.4rem;
          }
        }
      }

      .button {
        .button1 {
          margin: 2rem auto -1rem;
          background-color: #fff;
          width: 50.2rem;
          height: 5.8rem;
          border-radius: 2.9rem;
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;

          &::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translate(-50%, 90%);
            width: 0;
            height: 0;
            border: 1.2rem solid transparent;
            border-top: 1.2rem solid #fff;
          }

          @media screen and (max-width: 767px) {
            margin: 1.8rem auto -0.5rem;
            width: 95%;
            height: 3rem;

            &::after {
              border-width: 0.9rem;
              border-top-width: 0.9rem;
            }
          }
        }

        & p {
          font-weight: 700;
          font-size: 1.6rem;
          line-height: 140%;
          text-align: center;
          letter-spacing: 0.1em;
          color: var(--color-primary);

          @media screen and (max-width: 767px) {
            font-size: 1rem;
          }
        }

        .button2 {
          background-color: #f51940;
          height: 11.2rem;
          border-radius: 5.6rem;
          display: flex;
          align-items: center;
          justify-content: center;

          @media screen and (max-width: 767px) {
            height: 4.8rem;
          }

          & p {
            font-weight: 700;
            font-size: 2.4rem;
            line-height: 140%;
            letter-spacing: 0.1em;
            color: #ffffff;

            @media screen and (max-width: 767px) {
              font-size: 1.4rem;
            }
          }
        }
      }
    }
  }
}

/* section 5 */
#technology {
  position: relative;
  background: linear-gradient(180deg, #161616 0%, #353535 100%);

  .title-tag {
    .en {
      color: #0d6e56;
    }
  }

  .section-title {
    color: #fff;
  }

  .section-description {
    color: #fff;
  }

  .point-list {
    margin-top: 10rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6.4rem 4.8rem;

    @media screen and (max-width: 767px) {
      margin-top: 5rem;
      grid-template-columns: 100%;
      gap: 2rem 1.5rem;
    }

    .point-item {
      display: grid;
      grid-template-columns: 5.5rem 1fr;

      @media screen and (max-width: 767px) {
        grid-template-columns: 4rem 1fr;
      }

      .number {
        font-family: "Inter";
        font-weight: 600;
        font-size: 2.8rem;
        line-height: 140%;
        letter-spacing: 0.1em;
        color: #ffffff;

        @media screen and (max-width: 767px) {
          font-size: 1.8rem;
        }
      }

      .content {
        border-left: 0.1rem solid #fff;
        padding-left: 2rem;

        @media screen and (max-width: 767px) {
          padding-left: 1.5rem;
        }

        .title {
          font-weight: 600;
          font-size: 2.6rem;
          line-height: 140%;
          letter-spacing: 0.1em;
          color: #ffffff;

          @media screen and (max-width: 767px) {
            font-size: 1.6rem;
          }
        }

        .desc {
          margin-top: 2rem;
          font-weight: 400;
          font-size: 1.8rem;
          line-height: 200%;
          letter-spacing: 0.1em;
          color: #ffffff;

          @media screen and (max-width: 767px) {
            margin-top: 1.5rem;
            font-size: 1.4rem;
          }
        }
      }
    }
  }

  .square {
    margin-top: 8rem;
    border: 0.1rem solid #fff;
    padding: 3.6rem;

    @media screen and (max-width: 767px) {
      margin-top: 4rem;
      padding: 2rem 1.5rem;
    }

    .txt1 {
      font-weight: 700;
      font-size: 3.2rem;
      line-height: 160%;
      text-align: center;
      color: #fef02d;

      @media screen and (max-width: 767px) {
        font-size: 1.8rem;
      }
    }

    .txt2 {
      margin-top: 1.5rem;
      font-weight: 700;
      font-size: 2.4rem;
      line-height: 160%;
      text-align: center;
      color: #ffffff;

      @media screen and (max-width: 767px) {
        margin-top: 1rem;
        font-size: 1.4rem;
      }
    }
  }
}

/* section 6 */
#product {
  background-color: #edf3f5;
  position: relative;

  .title-tag {
    border-color: var(--color-primary);

    .en {
      color: #0d6e56;
    }

    .ja {
      color: var(--color-primary);
    }
  }

  .section-title {
    font-family: "Inter";
  }

  .additional-title {
    font-weight: 600;
    font-size: 2.4rem;
    line-height: 1;
    text-align: center;
    letter-spacing: 0.05em;
    color: var(--color-primary);

    @media screen and (max-width: 767px) {
      font-size: 1.4rem;
    }
  }

  .product-list {
    margin-top: 6.4rem;

    @media screen and (max-width: 767px) {
      margin-top: 3.2rem;
    }
  }
}

/* section 7 */
#measure {
  background-image: url(./img/bg-measure.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: right bottom;

  @media screen and (max-width: 767px) {
    background-size: auto 100%;
  }

  .section-title {
    font-size: 3.6rem;
    color: #fff;

    @media screen and (max-width: 767px) {
      font-size: 1.9rem;
    }
  }

  .section-description {
    color: #fff;
  }

  .banner {
    padding: 2.6rem 5.6rem;
    background-color: #fff;
    width: fit-content;
    position: relative;

    &::after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: 0;
      width: 0;
      height: 0;
      border: 1.7rem solid transparent;
      border-top: 1.7rem solid #fff;
      transform: translate(-50%, 90%);
    }

    @media screen and (max-width: 767px) {
      padding: 1rem 1.5rem;

      &::after {
        border-width: 1rem;
        border-top-width: 1rem;
      }
    }

    & p {
      font-weight: 700;
      font-size: 4rem;
      line-height: 140%;
      letter-spacing: 0.1em;
      color: #0d6e56;
      text-align: center;
      padding-bottom: 0.1em;

      @media screen and (max-width: 767px) {
        font-size: 1.6rem;
      }
    }
  }

  .banner1 {
    margin: -16rem auto 7rem;

    @media screen and (max-width: 767px) {
      margin: -8rem auto 3.5rem;
    }
  }

  .banner2 {
    margin: 8rem auto 0;

    @media screen and (max-width: 767px) {
      margin: 4rem auto 0;
    }
  }

  .box-group {
    gap: 7rem;
    margin-top: 4rem;

    @media screen and (max-width: 767px) {
      margin-top: 3rem;
    }

    .thing {
      & img {
        width: 6.4rem;

        @media screen and (max-width: 767px) {
          width: 3rem;
        }
      }

      .txt1 {
        margin-top: 1.5rem;
        font-weight: 700;
        font-size: 1.6rem;
        line-height: 1.6;
        color: #ffffff;

        @media screen and (max-width: 767px) {
          margin-top: 1rem;
          font-size: 1.1rem;
        }
      }

      .txt2 {
        font-weight: 700;
        font-size: 2.4rem;
        line-height: 1.5;
        color: #ffffff;

        @media screen and (max-width: 767px) {
          font-size: 1.5rem;
        }
      }

      .txt3 {
        margin-top: 1.5rem;
        font-weight: 400;
        font-size: 1.8rem;
        line-height: 160%;
        color: #ffffff;

        @media screen and (max-width: 767px) {
          margin-top: 1rem;
          font-size: 1.3rem;
        }
      }
    }
  }

  .box-group1 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    @media screen and (max-width: 767px) {
      grid-template-columns: 1fr 1fr;
      gap: 2rem 1rem;
    }

    .thing:not(:last-child) {
      position: relative;

      &::after {
        content: "";
        position: absolute;
        right: -6rem;
        top: 9rem;
        width: 0;
        height: 0;
        border: 1.7rem solid transparent;
        border-left: 1.7rem solid #257c67;
      }

      @media screen and (max-width: 767px) {
        &::after {
          display: none;
        }
      }
    }
  }

  .box-group2 {
    display: flex;
    justify-content: center;

    @media screen and (max-width: 767px) {
      flex-direction: column;
      gap: 2rem;
    }

    .thing {
      width: 49.3rem;
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 2rem;

      @media screen and (max-width: 767px) {
        width: 100%;
        gap: 0;
      }

      .text-area {
      }
    }
  }
}

/* section 8 */
#asset {
  background-image: url(./img/bg-asset.jpg);
  background-size: cover;
  background-repeat: no-repeat;

  .section-title {
    color: #fff;
  }

  .section-description {
    color: #fff;
  }

  .white-block {
    background-color: #fff;
    padding: 5.4rem 6.4rem;
    margin-top: 5.6rem;

    @media screen and (max-width: 767px) {
      padding: 2rem 1.5rem;
      margin-top: 3.2rem;
    }

    .list {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.6rem 4rem;

      @media screen and (max-width: 767px) {
        grid-template-columns: 100%;
        gap: 1rem;
      }

      .item {
        display: flex;
        align-items: center;
        gap: 1.2rem;

        @media screen and (max-width: 767px) {
          gap: 0.6rem;
        }

        & img {
          width: 2.4rem;

          @media screen and (max-width: 767px) {
            width: 1.8rem;
            translate: 0 0.1rem;
          }
        }

        & p {
          font-weight: 600;
          font-size: 2rem;
          line-height: 140%;
          letter-spacing: 0.1em;
          color: #0d6e56;

          @media screen and (max-width: 767px) {
            font-size: 1.6rem;
          }
        }
      }
    }

    .small-txt {
      margin-top: 5.8rem;
      border-top: 0.1rem solid #000;
      padding-top: 2.8rem;
      font-weight: 700;
      font-size: 2.4rem;
      line-height: 160%;
      text-align: center;
      color: var(--color-primary);

      @media screen and (max-width: 767px) {
        margin-top: 2rem;
        padding-top: 1.5rem;
        font-size: 1.4rem;
      }
    }

    .big-txt {
      padding-bottom: 2.8rem;
      border-bottom: 0.1rem solid #000;
      font-weight: 700;
      font-size: 3.2rem;
      line-height: 160%;
      text-align: center;
      color: var(--color-primary);

      @media screen and (max-width: 767px) {
        margin-top: 0.8rem;
        padding-bottom: 1.5rem;
        font-size: 1.7rem;
      }
    }
  }
}

/* section 9 */
#price {
  position: relative;
  background-image: url(./img/bg-invest.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center bottom;

  .section-title {
    color: #fff;
    & span {
      color: #fef02d;
    }
  }

  .section-description {
    color: #fff;
  }

  .price-images {
    text-align: center;
    & .note {
      color: #fff;
    }

    @media print, screen and (min-width: 767.01px) {
      margin-top: 6.4rem;
      .price3 {
        margin-top: 2rem;
        width: 96rem;
        display: inline;
      }
    }

    @media screen and (max-width: 767px) {
      margin-top: 3.2rem;

      & img {
        margin-top: 2rem;
      }
    }
  }
}

#import-flow {
  .title-tag {
    border-color: var(--color-primary);

    .en {
      color: #0d6e56;
    }

    .ja {
      color: var(--color-primary);
    }
  }

  @media print, screen and (min-width: 767.01px) {
    .cards {
      grid-template-columns: repeat(5, 1fr);

      &::before {
        width: calc(100% - 28rem);
      }
    }
  }

  .fast {
    .first-row {
      display: flex;
      align-items: center;
      gap: 2.8rem;

      @media screen and (max-width: 767px) {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
      }

      .text1 {
        flex-shrink: 0;
        font-weight: 700;
        font-size: 2.6rem;
        line-height: 1;
        color: var(--color-primary);

        @media screen and (max-width: 767px) {
          font-size: 1.6rem;
        }
      }

      .text2 {
        font-weight: 400;
        font-size: 1.8rem;
        line-height: 180%;
        color: var(--color-primary);

        @media print, screen and (min-width: 767.01px) {
          padding-left: 2rem;
          border-left: 0.1rem solid #9ca3af;
        }

        @media screen and (max-width: 767px) {
          font-size: 1.4rem;
          padding-top: 1.5rem;
          border-top: 0.1rem solid #9ca3af;
        }
      }
    }

    .list {
      margin-top: 3.2rem;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.6rem 4rem;

      @media screen and (max-width: 767px) {
        margin-top: 2rem;
        grid-template-columns: 100%;
        gap: 1rem;
      }

      .item {
        display: flex;
        align-items: center;
        gap: 1.2rem;

        @media screen and (max-width: 767px) {
          gap: 0.5rem;
        }

        & img {
          width: 2.4rem;

          @media screen and (max-width: 767px) {
            width: 1.8rem;
          }
        }

        & p {
          font-weight: 600;
          font-size: 2rem;
          line-height: 140%;
          letter-spacing: 0.1em;
          color: #0d6e56;

          @media screen and (max-width: 767px) {
            font-size: 1.4rem;
          }
        }
      }
    }
  }
  .white-box {
    background-color: #fff;
    margin-top: 4.8rem;
    padding: 4.8rem;

    @media screen and (max-width: 767px) {
      margin-top: 2rem;
      padding: 2rem 1.5rem;
    }

    .title {
      font-weight: 700;
      font-size: 2.4rem;
      line-height: 1.5;
      text-align: center;
      color: var(--color-primary);

      @media screen and (max-width: 767px) {
        font-size: 1.6rem;
      }
    }

    .equation {
      margin: 2rem auto 0;
      width: 75%;

      @media screen and (max-width: 767px) {
        width: 100%;
      }
    }

    .description {
      margin-top: 2rem;
      font-weight: 400;
      font-size: 1.8rem;
      line-height: 200%;
      text-align: center;
      letter-spacing: 0.1em;
      color: var(--color-primary);

      @media screen and (max-width: 767px) {
        margin-top: 1.5rem;
        font-size: 1.4rem;
        text-align: left;
      }
    }

    .remark {
      margin-top: 2rem;
      font-weight: 400;
      font-size: 1.4rem;
      line-height: 200%;
      text-align: center;
      letter-spacing: 0.1em;
      color: var(--color-primary);

      @media screen and (max-width: 767px) {
        margin-top: 1.5rem;
        font-size: 1.2rem;
        text-align: left;
      }
    }
  }
}

/* section 10 */
#step {
  background-color: #0d6e56;

  .section-title {
    color: #fff;
  }

  .section-description {
    color: #fff;
  }

  .two-steps {
    margin-top: 6.4rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6.4rem;

    @media screen and (max-width: 767px) {
      margin-top: 3.2rem;
      grid-template-columns: 100%;
      gap: 2rem;
    }

    .two-step {
      padding: 4.8rem;
      border-radius: 1.6rem;
      background: #ffffff;
      display: flex;
      flex-direction: column;

      @media screen and (max-width: 767px) {
        padding: 2rem 1.5rem;
        border-radius: 1rem;
      }

      .txt1 {
        font-weight: 700;
        font-size: 1.6rem;
        line-height: 1.6;
        color: #0d6e56;

        @media screen and (max-width: 767px) {
          font-size: 1.2rem;
        }
      }

      .txt2 {
        margin-top: 0.5rem;
        font-weight: 700;
        font-size: 2.4rem;
        line-height: 1;
        color: var(--color-primary);

        @media screen and (max-width: 767px) {
          font-size: 1.6rem;
        }
      }

      .bold-one {
        margin-top: 2rem;
        font-weight: 600;
        font-size: 1.8rem;
        line-height: 200%;
        color: var(--color-primary);

        @media screen and (max-width: 767px) {
          margin-top: 1.5rem;
          font-size: 1.4rem;
        }
      }

      .txt3 {
        flex-grow: 1;
        margin-top: 2rem;
        font-weight: 400;
        font-size: 1.8rem;
        line-height: 160%;
        color: var(--color-primary);

        @media screen and (max-width: 767px) {
          margin-top: 1.5rem;
          font-size: 1.4rem;
        }
      }

      .button {
        margin-top: 3.2rem;

        @media screen and (max-width: 767px) {
          margin-top: 2rem;
        }

        .button1 {
          margin: 2rem auto -1rem;
          background-color: #fff;
          width: 50.2rem;
          height: 5.8rem;
          border-radius: 2.9rem;
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
          border: 0.2rem solid #f51940;

          &::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translate(-50%, 90%);
            width: 0;
            height: 0;
            border: 1.2rem solid transparent;
            border-top: 1.2rem solid #fff;
          }

          @media screen and (max-width: 767px) {
            margin: 0 auto -0.5rem;
            width: 95%;
            height: 3rem;

            &::after {
              border-width: 0.9rem;
              border-top-width: 0.9rem;
            }
          }
        }

        & p {
          font-weight: 700;
          font-size: 1.6rem;
          line-height: 140%;
          text-align: center;
          letter-spacing: 0.1em;
          color: #f51940;

          @media screen and (max-width: 767px) {
            font-size: 1rem;
          }
        }

        .button2 {
          background-color: #f51940;
          height: 8rem;
          border-radius: 5.6rem;
          display: flex;
          align-items: center;
          justify-content: center;

          @media screen and (max-width: 767px) {
            height: 4.8rem;
          }

          & p {
            font-weight: 700;
            font-size: 2.4rem;
            line-height: 140%;
            letter-spacing: 0.1em;
            color: #ffffff;

            @media screen and (max-width: 767px) {
              font-size: 1.4rem;
            }
          }
        }
      }
    }
  }

  .interest {
    margin-top: 6.4rem;
    background-color: #fff;
    padding: 2.8rem;

    @media screen and (max-width: 767px) {
      margin-top: 3.2rem;
      padding: 2rem 1.5rem;
    }

    & p {
      font-weight: 700;
      font-size: 2.4rem;
      line-height: 160%;
      text-align: center;
      color: var(--color-primary);

      @media screen and (max-width: 767px) {
        font-size: 1.6rem;
      }
    }
  }
}

#faq {
  background-color: #edf3f5;
}