@charset "UTF-8";

.w1640 {
  max-width: 164rem;
}

#fv {
  padding: 28rem 14rem 27rem;
  /* aspect-ratio: 1850 / 1180; */
  background-image: url(./img/fv1.jpg);
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;

  @media screen and (max-width: 1080px) {
    aspect-ratio: auto;
    padding: 16rem 6rem 10rem;
  }
  @media screen and (max-width: 767px) {
    aspect-ratio: 393 / 667;
    padding: 13.9rem 0 16rem;
    background-image: url(./img/fv1-sp.png);
    background-size: cover;
    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: 77.3rem;

      @media screen and (max-width: 1080px) {
        width: 48%;
      }

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

      .catch {
        @media screen and (max-width: 1080px) {
          width: 109%;
          margin-left: -2.5rem;
        }
      }

      .head {
        width: 100%;
        margin-top: 3.2rem;
        border-top: 0.1rem solid var(--color-border);
        padding-top: 4.5rem;

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

      .text {
        margin-top: 2.6rem;
        margin-bottom: 3.8rem;
        padding-bottom: 3.2rem;
        border-bottom: 0.1rem solid var(--color-border);
        font-weight: 500;
        font-size: 2rem;
        line-height: 180%;
        letter-spacing: 0.09em;
        color: #ffffff;
        font-feature-settings: "palt";

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

      .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;

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

    .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 .1rem;
        }
      }
    }

    .right-image {
      width: 83.6rem;
      transform: translate(8.4rem, 1rem);

      @media screen and (max-width: 1080px) {
        width: 48%;
        transform: none;
      }

      @media screen and (max-width: 767px) {
        margin-top: 2rem;
        width: 111%;
        transform: translate(-2rem, -1.7rem);
      }
    }
  }
}

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

  @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: #e8db23;
  }

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

.title-watermark {
  position: absolute;
  top: 7rem;
  right: 24rem;
  z-index: 5;
  /* font-family: "Inter";
  font-weight: 600;
  font-size: 7.4rem;
  line-height: 1; */

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

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

/* section 1 */
#features {
  position: relative;
  margin-top: -10rem;

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

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

  .inner {
    @media screen and (min-width: 767.01px) and (max-width: 1080px) {
      width: calc(100% - 6rem);
      padding-left: 5rem;
    }
  }
  /* .title-tag {
    top: -7rem;
  } */

  .title-watermark {
    top: 0;
    color: #00eeff;
  }

  .main-row {
    /* background: linear-gradient(180deg, #000519 0%, #000519 30%, #000519 82.69%, #fff44f 100%); */
    padding-bottom: 36rem;
    position: relative;
    background: #000519;
    padding-bottom: 40rem;
    position: relative;

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

    &::after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: 0;
      z-index: 0;
      width: 130rem;
      height: 35rem;
      transform: translateX(-50%);
      background: radial-gradient(
        70% 100% at 50% 100%,
        #fff44f 0%,
        #000519 63.94%
      );
      pointer-events: none;
    }

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

    .bg-stat {
      position: absolute;
      left: 50%;
      top: 18rem;
      transform: translateX(-50%);
      width: 100%;
      max-width: none;
      height: auto;
      z-index: 0;
      pointer-events: none;
    }

    .format {
      .intro {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 8rem;
        @media screen and (max-width: 1080px) {
          flex-direction: column;
          gap: 2.4rem;
        }
        @media screen and (max-width: 767px) {
          gap: 2rem;
        }
      }

      .intro-title {
        flex-shrink: 0;
        font-family: "Noto Sans JP";
        font-weight: 700;
        font-size: 4.4rem;
        line-height: 160%;
        letter-spacing: 0.05em;
        color: #fff;
        text-shadow: none;
        @media screen and (max-width: 1080px) {
          font-size: 3.2rem;
        }
        @media screen and (max-width: 767px) {
          font-size: 2.4rem;
        }
      }

      .intro-desc {
        width: 87.1rem;
        flex: 1;
        min-width: 0;
        font-weight: 600;
        font-size: 1.8rem;
        line-height: 200%;
        letter-spacing: 0.1em;
        color: #fff;
        @media screen and (max-width: 1080px) {
          width: 100%;
        }
        @media screen and (max-width: 767px) {
          font-size: 1.4rem;
        }
      }
      .video-area {
        position: relative;
        z-index: 0;
        margin: auto;
        margin-top: 8rem;
        width: 112rem;
        @media screen and (max-width: 1080px) {
          width: 100%;
          margin-top: 4.8rem;
        }
        @media screen and (max-width: 767px) {
          margin-top: 3rem;
        }

        .video-box {
          position: relative;
          z-index: 1;
          margin: 0 auto;

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

          & iframe {
            width: 100%;
            aspect-ratio: 16 / 9;
          }
        }
      }
    }

    .illusts {
      position: relative;

      .worry {
        width: 100%;
        margin: 8rem auto 0;

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

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

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

        .problem-item {
          background-color: #fff;
          padding: 0 4rem 5rem;
          box-shadow: 0.2rem 0.2rem 0.6rem rgba(0, 0, 0, 0.25);
          position: relative;

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

          .title {
            min-height: 5.4rem;
            margin-top: -2rem;
            font-weight: 700;
            font-size: 2rem;
            line-height: 1.4;
            text-align: center;
            letter-spacing: 0.05em;
            color: #18448e;

            @media screen and (max-width: 767px) {
              min-height: 5rem;
              margin-top: 0;
              margin-left: 6.5rem;
              font-size: 1.6rem;
              text-align: left;
            }
          }

          .desc {
            margin-top: 1.7rem;
            font-weight: 600;
            font-size: 15px;
            line-height: 1.8;
            letter-spacing: 0.05em;
            color: #2f2f2f;

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

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

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

      .problem-item {
        background-color: #1a1d28;
        padding: 3.2rem 2.8rem;
        text-align: left;

        @media screen and (max-width: 767px) {
          display: grid;
          grid-template-columns: 4.8rem 1fr;
          column-gap: 2rem;
          align-items: center;
          padding: 1.6rem 2rem;
        }

        .icon {
          display: block;
          width: 4.8rem;
          height: auto;

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

        .title {
          margin-top: 2.4rem;
          font-family: "Noto Sans JP";
          font-style: normal;
          font-weight: 600;
          font-size: 2.4rem;
          line-height: 140%;
          display: flex;
          align-items: center;
          letter-spacing: 0.1em;
          color: #ffffff;

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

        .desc {
          margin-top: 1.2rem;
          font-family: "Noto Sans JP";
          font-style: normal;
          font-weight: 400;
          font-size: 1.8rem;
          line-height: 180%;
          color: #ffffff;

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

  .sub-row {
    --notch: 28rem;
    margin-top: calc(var(--notch) * -1);
    padding-bottom: 12.8rem;
    position: relative;
    isolation: isolate;

    /* 白線PNGを Figma の #61ffe6 で着色（子要素に影響させない） */
    &::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -2;
      background: linear-gradient(
        90deg,
        rgba(0, 242, 255, 0.5) 0%,
        #fff44f 21%,
        #fff44f 33%,
        #00f2ff 46%,
        #fff44f 58%,
        #fff44f 69%,
        #00f2ff 84%,
        #00f2ff 95%,
        #fff44f 100%
      );
      -webkit-mask: url(./img/bg-wave.png) 0 0 / contain no-repeat;
      mask: url(./img/bg-wave.png) 0 0 / contain no-repeat;
      pointer-events: none;
      transform: translateY(4rem);
    }

    &::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -3;
      background-color: #fff;
      clip-path: polygon(0 0, 50% var(--notch), 100% 0, 100% 100%, 0 100%);
      pointer-events: none;
    }

    @media screen and (max-width: 767px) {
      --notch: 6rem;
      padding-bottom: 5rem;

      &::before {
        transform: translateY(0);
      }
    }

    .special-title {
      text-align: center;
      /* padding-top: 4rem; */

      @media screen and (max-width: 1080px) {
        /* padding-top: 2rem; */
      }

      @media screen and (max-width: 767px) {
        padding-top: 0;
        transform: translateY(-18rem);
      }

      .txt1 {
        font-family: "Noto Sans JP";
        font-style: normal;
        font-weight: 700;
        font-size: 4.4rem;
        line-height: 160%;
        letter-spacing: 0.05em;
        color: #ffffff;

        @media screen and (max-width: 767px) {
          font-size: 2.2rem;
          line-height: 140%;
        }
      }

      .yellow-f {
        color: #fff44f;
      }
    }

    .special-desc {
      margin-top: 2rem;
      font-weight: 400;
      font-size: 1.5rem;
      line-height: 2;
      text-align: center;
      letter-spacing: 0.05em;
      color: #ffffff;

      @media screen and (max-width: 767px) {
        margin-top: 1rem;
        font-size: 1.4rem;
        line-height: 1.6;
        transform: translateY(-18rem);
      }
    }

    .white-cards {
      margin-top: 12rem;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 2rem;

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

      .illust {
        width: 51rem;
        z-index: 1;

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

      .arrow {
        width: 2rem;

        @media screen and (max-width: 767px) {
          width: 1.5rem;
          transform: rotate(90deg);
        }
      }
    }

    .stand1 {
      height: 64.7rem;
      width: auto;
      position: absolute;
      top: 9rem;
      left: 17%;
      transform: translate(-50%, 0);

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

    .stand2 {
      height: 64.7rem;
      width: auto;
      position: absolute;
      top: 9rem;
      right: 17%;
      transform: translate(50%, 0);

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

    .illust-circle {
      padding-top: 6rem;
      padding-bottom: 4rem;
      position: relative;
      width: 82.8rem;
      max-width: none;
      height: auto;
      margin: 0 auto;
      z-index: 0;
      pointer-events: none;

      @media screen and (max-width: 767px) {
        width: calc(100% - 3rem);
        padding-top: 3rem;
        padding-bottom: 2rem;
      }

      & img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .illust-circle-text {
      font-family: "Noto Sans JP";
      font-style: normal;
      font-weight: 400;
      font-size: 1.6rem;
      line-height: 180%;
      letter-spacing: 0.05em;
      color: #1d1e1f;
      display: flex;
      justify-content: center;

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

/* section 2 */
#use-case {
  position: relative;
  background-image: url(./img/bg-stats.png);
  background-size: 100% auto;
  background-position: top center;

  @media screen and (max-width: 767px) {
    background-size: 180% auto;
    background-position: left center;
  }

  .title-tag {
    border-left: 0.1rem solid #fff;
    top: 7rem;

    .en {
      color: #e8db23;
    }

    .ja {
      color: #fff;
    }
  }

  .section-title {
    color: #fff;
  }

  .section-description {
    color: #fff;
    font-weight: 400;
    text-align: center;
  }

  .use-full,
  .use-card {
    position: relative;

    @media screen and (max-width: 767px) {
      overflow: visible;
    }

    .label {
      position: absolute;
      top: -4rem;
      left: -3rem;
      z-index: 2;
      width: 15.6rem;
      height: 15.6rem;
      margin: 0;
      padding: 1.2rem;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(226.99deg, #d8b62b 12.3%, #fff44f 86.26%);
      border-radius: 0;
      text-orientation: mixed;
      font-weight: 700;
      font-size: 2rem;
      line-height: 130%;
      letter-spacing: 0.1em;
      color: #1d1e1f;
      text-align: center;

      @media screen and (max-width: 767px) {
        position: relative;
        top: auto;
        left: auto;
        width: fit-content;
        height: 5rem;
        margin: 0 auto;
        padding: 0 2.8rem 0;
        transform: translateY(60%);
        font-size: 1.8rem;
        line-height: 1.2;
        background: linear-gradient(226.99deg, #d8b62b 12.3%, #fff44f 86.26%);
        color: #1d1e1f;
      }
    }

    .body {
      background-color: #fff;
    }

    .points {
      margin-top: 2.4rem;
      display: flex;
      flex-direction: column;
      gap: 2.4rem;

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

      & > li {
        display: flex;
        align-items: flex-start;
        gap: 1.2rem;

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

      & p {
        font-weight: 500;
        font-size: 1.6rem;
        line-height: 1.7;
        letter-spacing: 0.05em;
        color: #1d1e1f;

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

      & p strong.b-font {
        font-size: 1.8rem;

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

      .pills {
        margin-top: 1.5rem;
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 1rem;
        padding: 0;
        list-style: none;

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

        & li {
          flex: 0 0 auto;
          width: fit-content;
          padding: 1.2rem 2rem;
          font-family: "Noto Sans JP";
          font-style: normal;
          font-weight: 700;
          font-size: 1.8rem;
          line-height: 1.3rem;
          text-align: center;
          letter-spacing: 1.00069px;
          color: #1d1e1f;
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          background: #fff44f;
          border-radius: 999px;

          @media screen and (max-width: 767px) {
            white-space: nowrap;
            padding: 0.7rem 1.4rem;
            font-size: 1.2rem;
            line-height: 1.2;
          }
        }
      }
    }

    .tag {
      flex-shrink: 0;
      min-width: 6.8rem;
      height: 2rem;
      border-radius: 0;
      font-weight: 500;
      font-size: 1.4rem;
      line-height: 1.6;
      text-align: center;
      color: #fff;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;

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

      &.issue,
      &.solution {
        background-color: #1d1e1f;
      }

      &.result {
        background-color: #f51940;
      }
    }
  }

  .use-full {
    margin-top: 6.4rem;

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

    .body {
      padding: 4rem;
      display: flex;
      align-items: flex-start;
      gap: 4.8rem;

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

    .photo {
      width: 49.1rem;
      flex-shrink: 0;

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

    .text {
      flex: 1;
      min-width: 0;
      padding-top: 2rem;

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

    .title {
      font-weight: 700;
      font-size: 3.2rem;
      line-height: 1.6;
      letter-spacing: 0.05em;
      color: #1d1e1f;

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

    .points {
      .flow-arrow {
        justify-content: center;
        padding-left: 7.2rem;

        @media screen and (max-width: 767px) {
          padding-left: 0;
          align-items: center;
        }

        &::before {
          content: "";
          width: 3.4rem;
          height: 1.8rem;
          background: url(./img/icon-arrow-down.svg) no-repeat center / contain;
        }
      }
    }
  }

  .pills {
    margin-top: 4rem;
    display: flex;
    gap: 1rem;

    @media screen and (max-width: 767px) {
      flex-wrap: wrap;
      justify-content: flex-start;
    }

    & li {
      padding: 1.2rem 2rem;
      font-family: "Noto Sans JP";
      font-style: normal;
      font-weight: 700;
      font-size: 1.8rem;
      /* line-height: 1.3rem; */
      text-align: center;
      letter-spacing: 1.00069px;
      color: #1d1e1f;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      background: #fff44f;
      border-radius: 999px;
      /* width: 184px; */
      /* height: 37px; */
    }
  }

  .use-grid {
    margin-top: 10.4rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10.4rem;

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

  .use-card {
    :where(.label) {
      width: 13.6rem;
      height: 13.6rem;
      margin: auto;
      @media screen and (max-width: 767px) {
        top: auto;
        transform: translateY(60%);
      }
    }

    .photo {
      margin-bottom: 2.4rem;

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

    .text {
      padding: 0 4rem 4rem;

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

    .title {
      font-weight: 700;
      font-size: 2.8rem;
      line-height: 1.5;
      letter-spacing: 0.05em;
      color: #1d1e1f;

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

    .points {
      & li {
        align-items: center;

        @media screen and (max-width: 767px) {
          align-items: flex-start;
          gap: 0.5rem;
          padding: 0 2rem;
        }
      }

      & li:last-child {
        padding-top: 2.4rem;
        border-top: 0.1rem solid #9ca3af;
        @media screen and (max-width: 767px) {
          padding-bottom: 2rem;
        }

        & p {
          font-weight: 700;
        }

        & p strong.b-font {
          font-size: 2rem;

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

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

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

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

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

  .title-tag {
    top: 5rem;

    .en {
      color: #e8db23;
    }
  }

  .title-watermark {
    color: #ffffff;
    top: 14rem;
    right: 24rem;
    width: 35.4rem;
    @media screen and (max-width: 1080px) {
      right: 8rem;
    }

    @media screen and (max-width: 767px) {
      display: block;
      font-size: 3.2rem;
      top: 4.5rem;
      right: 1.5rem;
      width: 14.5rem;
    }
  }

  .para1 {
    position: relative;
    display: flex;
    justify-content: flex-end;

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

    .float-texts {
      @media print, screen and (min-width: 767.01px) {
        position: absolute;
        left: 0;
        top: 25%;
      }
      .big-txt-box {
        display: flex;
        flex-direction: column;
        align-items: self-start;
        margin-top: 3.5rem;
        gap: 1.5rem;

        @media screen and (max-width: 767px) {
          margin-top: -3.9rem;
          margin-left: calc(50% - 50vw);
          position: relative;
          z-index: 1;
          gap: 0.5rem;
        }

        .big-txt {
          background-color: #000;
          padding: 0.2em 0.7em 0.3em;
          font-weight: 700;
          font-size: 4.8rem;
          line-height: 1.5;
          letter-spacing: 0.05em;
          color: #ffffff;
          display: inline-block;

          @media screen and (max-width: 767px) {
            font-size: 1.9rem;
            width: fit-content;
            padding: 0.3em 2.3em 0.42em 0.8em;
          }
        }
      }

      .small-txt {
        margin-top: 5rem;
        font-weight: 600;
        font-size: 1.8rem;
        line-height: 180%;
        letter-spacing: 0.05em;
        color: #ffffff;

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

    .image {
      width: 112.8rem;
      padding-top: 5rem;
      padding-right: 5rem;

      @media screen and (max-width: 767px) {
        width: 100%;
        padding-top: 0;
        padding-right: 0;
        margin-bottom: 1rem;
        translate: 1.4rem 0;
      }

      & img {
      }
    }
  }

  .sub-title {
    margin-top: 12rem;
    font-weight: 700;
    font-size: 4rem;
    line-height: 140%;
    text-align: center;
    letter-spacing: 0.05em;
    color: #ffffff;

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

    & span {
      color: #fef02d;
    }
  }

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

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

      .difficulty-item {
        display: flex;

        @media print, screen and (min-width: 767.01px) {
          justify-content: center;
          align-items: center;
          flex-direction: column;
          padding: 7rem;
          gap: 1rem;
          aspect-ratio: 1;
          background: rgba(0, 0, 0, 0.2);
          border-radius: 30rem;
        }

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

        .sp-circle {
          @media screen and (max-width: 767px) {
            flex-shrink: 0;
            width: 8.1rem;
            height: 8.1rem;
            border-radius: 50%;
            background: rgba(0, 0, 0, 0.2);
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            padding-top: 0.5rem;
          }

          .txt1 {
            font-weight: 600;
            font-size: 1.8rem;
            line-height: 1.2;
            text-align: center;
            letter-spacing: 0.05em;
            color: #fef02d;

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

          .txt2 {
            margin-top: 1rem;
            font-family: "Inter";
            font-weight: 600;
            font-size: 2.8rem;
            text-align: center;
            letter-spacing: 0.1em;
            color: #fef02d;

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

        .sp-wrapper {
          margin-top: 1rem;

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

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

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

            & span {
              color: #fef02d;
            }
          }

          .txt4 {
            margin-top: 2rem;
            font-weight: 600;
            font-size: 1.5rem;
            line-height: 2;
            text-align: left;
            letter-spacing: 0.05em;
            color: #ffffff;

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

  .para3 {
    margin-top: 12rem;

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

    .sub-title {
      & span {
        @media screen and (max-width: 767px) {
          margin: calc(50% - 50vw);
        }
      }
    }

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

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

      .advantage-item {
        position: relative;
        background-color: #fff;

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

        .absolute-box {
          width: 10.4rem;
          height: 10.4rem;
          border-radius: 5.2rem;
          background-color: #fef02d;
          position: absolute;
          top: 0;
          left: 50%;
          transform: translate(-50%, -50%);
          z-index: 1;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;

          @media screen and (max-width: 767px) {
            width: 8.8rem;
            height: 8.8rem;
            left: 0;
            transform: translate(-20%, -20%);
          }

          .word {
            font-family: "Inter";
            font-weight: 600;
            font-size: 1.2rem;
            line-height: 1.5;
            letter-spacing: 0.05em;
            color: #1d1e1f;

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

          .number {
            font-family: "Inter";
            font-weight: 600;
            font-size: 3.2rem;
            letter-spacing: 0.05em;
            color: #1d1e1f;

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

        & img {
          @media screen and (max-width: 767px) {
            width: 14.5rem;
            height: 100%;
            object-fit: cover;
          }
        }

        &:nth-child(3) img {
          @media screen and (max-width: 767px) {
            object-position: top center;
          }
        }

        .texts {
          padding: 2.8rem 3.6rem;

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

          .title {
            font-weight: 600;
            font-size: 2rem;
            line-height: 1.65;
            letter-spacing: 0.05em;

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

          .desc {
            margin-top: 1rem;
            font-weight: 500;
            font-size: 1.5rem;
            line-height: 180%;
            letter-spacing: 0.05em;

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

  .para4 {
    margin-top: 12rem;
    padding: 3rem 0;
    border-top: 0.1rem solid #fff;
    border-bottom: 0.1rem solid #fff;

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

    .sub-title {
      margin-top: 0;
    }

    .tiny {
      font-family: "Noto Sans JP";
      font-style: normal;
      font-weight: 500;
      font-size: 2.8rem;
      line-height: 189%;
      text-align: center;
      letter-spacing: 0.05em;
      color: #ffffff;

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

/* section 4 */
#consult {
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    72.52deg,
    #000519 59.5%,
    #918b34 86.1%,
    #fff44f 108.16%
  );

  @media screen and (max-width: 767px) {
    background: linear-gradient(
      17.34deg,
      #000519 77.66%,
      #918b34 92.01%,
      #fff44f 103.91%
    );
  }

  .consult-stat {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
    max-width: none;
    height: 100%;
    z-index: 0;
    pointer-events: none;

    @media screen and (max-width: 767px) {
      height: 28rem;
      top: 0;
      transform: none;
    }
  }

  .inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6rem;

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

  .texts {
    position: relative;
    z-index: 1;
    flex: 1;
  }

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

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

    & span {
      color: #fff44f;
    }
  }

  .desc {
    margin-top: 2.4rem;
    font-weight: 500;
    font-size: 1.8rem;
    line-height: 180%;
    letter-spacing: 0.05em;
    color: #ffffff;

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

  .button {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    width: 64rem;

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

    .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;

      & p {
        color: #000;
      }

      &::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: 1rem 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;
    width: 64rem;
    height: 11.2rem;
    border-radius: 5.6rem;
    display: flex;
    align-items: center;
    justify-content: center;

    @media screen and (max-width: 767px) {
      width: 100%;
      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 */
#product {
  position: relative;
  padding-top: 12.8rem;
  padding-bottom: 0;
  background: #edf3f5;

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

  .title-tag {
    border-left: 0.1rem solid #000;
    top: 8rem;

    .en {
      color: #e8db23;
    }

    .ja {
      color: #000;
    }
  }

  .title-watermark {
    top: 7.5rem;
    right: 4rem;
    color: #7ef0ea;
    writing-mode: vertical-rl;
    letter-spacing: 0.05em;
  }

  .section-title {
    font-family: "Inter";
    color: #131313;
    font-size: 6rem;

    @media screen and (max-width: 767px) {
      /* line-height: 1.2; */
      font-size: 2.2rem;
    }
  }

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

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

#product {
  .product-list {
    .product-item {
      .txt1 {
        margin-top: 2rem;
        margin-bottom: 1rem;
      }
    }
  }
}

#product .make-use {
  background: url(./img/make-use-bg.png) center / cover no-repeat;

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

  .banner p {
    color: #131313;

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

  .boxes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0 7.2rem;
    align-items: start;

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

    .box {
      position: relative;

      .photo {
        position: relative;
      }

      .arrow {
        position: absolute;
        top: 50%;
        right: -3.6rem;
        z-index: 2;
        width: 4.2rem;
        height: auto;
        transform: translate(50%, -50%);
        pointer-events: none;

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

      .texts {
        position: static;
        top: auto;
        left: auto;
        transform: none;
        width: 43.2rem;
        max-width: 100%;
        margin-top: 2.4rem;

        .step {
          margin-bottom: 0.9rem;
          font-family: "Noto Sans JP";
          font-style: normal;
          font-weight: 700;
          font-size: 1.6rem;
          line-height: 2.6rem;
          text-align: left;
          color: #ffffff;

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

        .title {
          width: 21.6rem;
          margin-top: 0;
          margin-bottom: 1.6rem;
          font-family: "Noto Sans JP";
          font-style: normal;
          font-weight: 700;
          font-size: 2.4rem;
          line-height: 2.6rem;
          text-align: left;
          color: #ffffff;

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

        .content {
          width: 43.2rem;
          max-width: 100%;
          margin-top: 0;
          font-family: "Noto Sans JP";
          font-style: normal;
          font-weight: 400;
          font-size: 1.8rem;
          line-height: 160%;
          text-align: left;
          letter-spacing: 0;
          color: #ffffff;

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

    .box:not(:last-child)::after {
      display: none;

      @media screen and (max-width: 767px) {
        display: block;
        content: "";
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        width: 2.4rem;
        height: 2.4rem;
        margin: 1.6rem auto 0;
        transform: rotate(90deg);
        background-image: url(./img/icon-arrow-next.svg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        z-index: 1;
      }
    }
  }
}

#import-flow {
  .title-tag {
    border-left: 0.1rem solid #000;
    top: 8rem;
    .ja {
      color: #000;
    }
  }
}