@charset "UTF-8";

#fv {
  padding: 28rem 20rem 27rem;
  aspect-ratio: 1920 / 1280;
  background-image: url(./img/fv1.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;

  @media screen and (max-width: 767px) {
    aspect-ratio: 393 / 667;
    padding: 13.9rem 0 16rem;
    background-image: url(./img/fv1-sp.jpg);
    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: 51rem;

      @media screen and (max-width: 767px) {
        width: 100%;
      }
      .catch {
        width: 45.6rem;
        @media screen and (max-width: 767px) {
          width: 23.6rem;
        }
      }

      .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: 1.6rem;
          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;
          translate: 0 0.1rem;

          @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;
        }
      }
    }

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

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

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

.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: 767px) {
    margin-top: -4rem;
  }

  .title-tag {
    top: -7rem;
  }

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

  .main-row {
    background: linear-gradient(
      180deg,
      #14639e 0%,
      #14639e 25%,
      #1082af 74.69%,
      #00fff2 100%
    );
    padding-bottom: 35.8rem;

    @media screen and (max-width: 767px) {
      padding-bottom: 28rem;
      background: linear-gradient(
        180deg,
        #18448e 0%,
        #1082af 70.92%,
        #00fff2 86.57%
      );
    }

    .format {
      display: flex;

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

      .blue-box {
        width: 51rem;
        height: 51rem;
        background-color: #0f326c;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 1.5rem;

        @media screen and (max-width: 767px) {
          margin: 0 auto;
          width: 23rem;
          height: 8rem;
          gap: 0.5rem;
        }

        .txt1 {
          font-family: "Inter";
          font-weight: 600;
          font-size: 2.4rem;
          line-height: 1;
          letter-spacing: 0.05em;
          text-align: center;
          color: #ffffff;

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

        .txt2 {
          font-family: "Inter";
          font-weight: 600;
          font-size: 6.3rem;
          line-height: 1.5;
          text-align: center;
          color: #ffffff;

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

      .video-box {
        margin-top: 18.5rem;
        margin-left: -3rem;
        width: 96rem;

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

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

        & p {
          margin-top: 2rem;
          font-weight: 600;
          font-size: 1.5rem;
          line-height: 1.8;
          letter-spacing: 0.05em;
          color: #ffffff;

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

    .illusts {
      position: relative;

      .worry {
        width: 96rem;
        margin: 8rem auto 0;

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

      .watermark1,
      .watermark2 {
        height: 44rem;
        width: auto;
        position: absolute;
        top: 0;
        z-index: -1;
        filter: brightness(0) saturate(100%) invert(46%) sepia(85%)
          saturate(659%) hue-rotate(170deg) brightness(89%) contrast(100%);

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

      .watermark1 {
        left: 0;
        transform: translate(-50%, 0);
      }

      .watermark2 {
        right: 0;
        transform: translate(50%, 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.6rem 2.6rem 2rem;
        }

        .order {
          background-color: #18448e;
          margin: 0 auto;
          transform: translateY(-50%);
          width: 10rem;
          height: 10rem;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;

          @media screen and (max-width: 767px) {
            position: absolute;
            left: 0;
            top: 0;
            transform: translateY(-1rem);
            width: 7.6rem;
            height: 7.6rem;
          }

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

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

          .number {
            font-family: "Inter";
            font-weight: 500;
            font-size: 3.2rem;
            line-height: 1.5;
            letter-spacing: 0.05em;
            color: #ffffff;

            @media screen and (max-width: 767px) {
              font-size: 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: 7.2rem;
            font-size: 1.6rem;
            text-align: left;
            display: inline-flex;
            align-items: center;
          }
        }

        .desc {
          margin-top: 1.5rem;
          font-weight: 600;
          font-size: 1.5rem;
          line-height: 1.8;
          letter-spacing: 0.05em;
          color: var(--color-primary);

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

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

    /* 白線PNGを Figma の #61ffe6 で着色（子要素に影響させない） */
    &::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -2;
      background-color: #61ffe6;
      -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);
    }

    /* 中央を切り欠き、main-row のシアンを見せる（中身は切らない） */
    &::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;

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

      .txt1 {
        font-family: "Inter";
        font-weight: 600;
        font-size: 6.3rem;
        line-height: 1;
        text-align: center;
        color: #1f488d;

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

      .txt2 {
        font-weight: 700;
        font-size: 1.8rem;
        line-height: 1.5;
        text-align: center;
        letter-spacing: 0.05em;
        color: #1f488d;

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

      .txt3 {
        font-weight: 700;
        font-size: 4.8rem;
        line-height: 1.2;
        text-align: center;
        letter-spacing: 0.05em;
        color: #1f488d;

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

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

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

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

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

      .illust {
        width: 51rem;

        @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: 3rem;
      left: 17%;
      transform: translate(-50%, 0);

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

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

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

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

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

  .section-description {
    @media screen and (max-width: 767px) {
      text-align: center;
    }
  }

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

    .en {
      color: #18448e;
    }

    .ja {
      color: #000;
    }
  }

  .title-watermark {
    color: #a3d1df;
  }

  .section-title {
    color: #1f488d;
  }

  .section-description {
    color: #1f488d;
    font-weight: 600;
  }

  .use-case-list {
    margin-top: 6.4rem;
    display: flex;
    flex-direction: column;
    gap: 3rem;

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

    .use-case-item {
      display: flex;
      justify-content: space-between;

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

      .scene {
        flex-shrink: 0;
        width: 28rem;
        height: 28rem;
        background: linear-gradient(225deg, #18448e 0%, #00caff 100%);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 1;

        @media screen and (max-width: 767px) {
          width: fit-content;
          height: 5rem;
          transform: translateY(60%);
          margin: auto;
          padding-inline: 2.8rem;
        }

        & p {
          font-weight: 600;
          font-size: 2.4rem;
          text-align: center;
          letter-spacing: 0.05em;
          color: #ffffff;

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

      .white-box {
        width: 84rem;
        margin-top: 4rem;
        padding: 3rem;
        display: grid;
        grid-template-columns: 1fr 35rem;
        gap: 2rem;
        background-color: #fff;

        @media screen and (max-width: 767px) {
          width: 100%;
          margin-top: 0;
          padding: 0;
          display: flex;
          flex-direction: column-reverse;
          gap: 0;
        }

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

          .slogan {
            font-weight: 700;
            font-size: 2.2rem;
            line-height: 1.5;
            letter-spacing: 0.05em;
            color: #18448e;

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

          .part {
            margin-top: 3rem;
            display: grid;
            grid-template-columns: 7rem 1fr;

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

            .part-title {
              font-weight: 600;
              font-size: 1.6rem;
              line-height: 1.5;
              letter-spacing: 0.05em;
              color: #1f488d;

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

            .part-description {
              font-weight: 400;
              font-size: 1.6rem;
              line-height: 160%;
              letter-spacing: 0.05em;
              color: #1d1e1f;
              padding-left: 0.5em;
              position: relative;
              border-left: 0.1rem solid #1f488d;

              @media screen and (max-width: 767px) {
                font-size: 1.4rem;
                padding-left: 0;
                margin-top: 0.5rem;
                padding-top: 0.8rem;
                border-left: none;
                border-top: 0.1rem solid #1f488d;
              }

              & p {
                text-indent: -1em;
                padding-left: 1em;

                & span {
                  color: #f51940;
                }
              }
            }
          }

          .righty {
            width: 35rem;

            & img {
            }
          }
        }
      }
    }

    @media print, screen and (min-width: 767.01px) {
      .use-case-item:nth-child(odd) {
        .white-box {
          padding-left: 7rem;
          margin-left: -4rem;
        }
      }

      .use-case-item:nth-child(even) {
        flex-direction: row-reverse;

        .white-box {
          padding-right: 7rem;
          margin-right: -4rem;
        }
      }
    }
  }
}

/* section 3 */
#technology {
  position: relative;
  background: linear-gradient(180deg, #18448e 0%, #1082af 82.69%, #00fff2 100%);
  @media screen and (max-width: 767px) {
    padding-top: 6rem;
    background: linear-gradient(180deg, #18448e 43%, #1082af 92%, #00fff2 100%);
  }

  .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 {
      position: relative;
      z-index: 1;
      @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;
            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-weight: 700;
      font-size: 2.8rem;
      line-height: 180%;
      text-align: center;
      letter-spacing: 0.05em;
      color: #ffffff;

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

/* section 4 */
#product {
  position: relative;
  padding-top: 6.5rem;
  @media screen and (max-width: 767px) {
    padding-bottom: 0;
  }

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

    .en {
      color: #18448e;
    }

    .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: #18448e;
    font-size: 6rem;
    @media screen and (max-width: 767px) {
      font-size: 2.2rem;
    }
  }

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

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

  .make-use {
    background: linear-gradient(180deg, #18448e 0%, #00fff2 91.92%);
    .inner {
      display: flex;
      flex-direction: column;
      align-items: center;
      .boxes {
        width: 96rem;
        max-width: 100%;
        grid-template-columns: repeat(2, 1fr);
        @media screen and (max-width: 767px) {
          grid-template-columns: 100%;
        }
      }
      .box-arrow {
        width: 49.4rem;
        margin-bottom: 1rem;
        @media screen and (max-width: 767px) {
          width: 4.2rem;
          margin-top: 1rem;
        }
      }
      .txt-box {
        width: 96rem;
        max-width: 100%;
        background-color: #126da4;
        padding: 3rem 2rem 2.6rem;
        text-align: center;
        .title {
          color: #fef02d;
          font-size: 2.3rem;
          font-weight: 700;
          @media screen and (max-width: 767px) {
            font-size: 1.7rem;
          }
        }
        .lead {
          margin-top: 1rem;
          font-size: 2rem;
          font-weight: 700;
          color: #fff;
          @media screen and (max-width: 767px) {
            font-size: 1.4rem;
          }
        }
        .desc {
          margin-top: 1.2rem;
          font-size: 1.6rem;
          letter-spacing: 0.1em;
          line-height: 2;
          color: #fff;
          @media screen and (max-width: 767px) {
            font-size: 1rem;
          }
        }
      }
    }
  }
}

/* section 5 */
#price {
  position: relative;
  @media screen and (max-width: 767px) {
    padding-block: 3.2rem;
  }

  .board {
    background-color: #edf3f5;
    border: 0.5rem solid #18448e;
    display: flex;
    justify-content: space-between;
    position: relative;
    aspect-ratio: 1366 / 660;

    @media screen and (max-width: 767px) {
      border-width: 0.2rem;
      aspect-ratio: auto;
    }

    .left-part {
      padding: 6rem 0 6rem 6rem;
      z-index: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;

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

      .txt1 {
        font-weight: 700;
        font-size: 3.6rem;
        line-height: 160%;
        letter-spacing: 0.05em;
        color: #18448e;

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

      .txt2 {
        margin-top: 1.5rem;
        font-weight: 400;
        font-size: 1.8rem;
        line-height: 200%;
        letter-spacing: 0.1em;
        color: var(--color-primary);

        @media screen and (max-width: 767px) {
          margin-top: 1rem;
          font-size: 1.2rem;
          letter-spacing: 0.08em;
        }
      }

      .photos {
        margin-top: 3rem;
        display: flex;
        gap: 3rem;

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

        & img {
          width: 28rem;

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

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

          &::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: 4rem;

            &::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;
          }
        }
      }
    }

    .right-part {
      display: flex;
      @media print, screen and (min-width: 767.01px) {
        & img {
          height: 100%;
          transform: translateX(3rem);
        }
      }

      @media screen and (max-width: 767px) {
        position: absolute;
        top: 0;
        right: -0.8rem;
        width: 19.2rem;
      }
    }
  }
}

#import-flow {
  .title-tag {
    border-left: 0.1rem solid #000;

    .en {
      color: #18448e;
    }

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

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