@charset "UTF-8";

.main {
  position: relative;
  .picture {
    display: block flow;
    flex-shrink: 0;
  }

  /* =====================
    mv
  ===================== */
  .mv {
    position: relative;
    background-color: var(--primary);
    padding-block: 80px;

    @media (width <= 768px) {
      padding-block: calc((100 / 390) * 120 * 1vw) calc((100 / 390) * 80 * 1vw);
    }

    &::before {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      background-image: url('../img/mv_earth.png');
      inline-size: 546px;
      block-size: 498px;
      pointer-events: none;
    }
    @media (width <= 768px) {
      &::before {
        background-image: url('../img/mv_earth_2x.png');
        inline-size: 100%;
        block-size: calc((100 / 390) * 498 * 1vw);
      }
    }
    &::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      background-image: url('../img/logo_bg.png');
      inline-size: 872px;
      block-size: 148px;
      pointer-events: none;
    }

    @media (width <= 768px) {
      &::after {
        background-image: url('../img/logo_bg_2x.png');
        inline-size: 100%;
        block-size: calc((100 / 390) * 148 * 1vw);
      }
    }
    .logo {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 5;

      @media (width <= 768px) {
        & img {
          inline-size: calc((100 / 390) * 274.1 * 1vw);
        }
      }
    }
    .u-inner {
      display: block flex;
      align-items: flex-end;
      justify-content: space-between;

      @media (width <= 768px) {
        flex-direction: column-reverse;
        gap: calc((100 / 390) * 30 * 1vw);
      }
      .wrap {
        padding-inline-start: 24px;

        @media (width <= 768px) {
          padding-inline-start: calc((100 / 390) * 16 * 1vw);
        }
        .title {
          position: relative;
          font-size: 56px;
          font-weight: bold;
          line-height: 1.6;
          color: var(--white);

          @media (width <= 768px) {
            font-size: calc((100 / 390) * 38 * 1vw);
          }
          &::before {
            content: '';
            display: block flow;
            inline-size: 2px;
            block-size: 237px;
            position: absolute;
            top: 20px;
            left: -24px;
            background-color: var(--white);
          }
          @media (width <= 768px) {
            &::before {
              inline-size: calc((100 / 390) * 2 * 1vw);
              block-size: calc((100 / 390) * 166 * 1vw);
              top: calc((100 / 390) * 10 * 1vw);
              left: calc((100 / 390) * -16 * 1vw);
            }
          }
        }
        .description {
          margin-block-start: 20px;
          font-size: 18px;
          font-weight: 500;
          line-height: 1.6;
          color: var(--white);

          @media (width <= 768px) {
            margin-block-start: calc((100 / 390) * 23 * 1vw);
            font-size: calc((100 / 390) * 16 * 1vw);
            line-height: 2;
          }
        }
        .btn-set {
          margin-block-start: 48px;

          @media (width <= 768px) {
            margin-block-start: calc((100 / 390) * 48 * 1vw);
          }

          .u-anchor + .u-anchor {
            margin-block-start: 16px;

            @media (width <= 768px) {
              margin-block-start: calc((100 / 390) * 32 * 1vw);
            }
          }
        }
      }
    }
  }

  /* =====================
    problems
  ===================== */
  .problems {
    position: relative;
    padding-block: 80px;

    @media (width <= 768px) {
      padding-block: calc((100 / 390) * 80 * 1vw);
    }
    .u-inner {
      @media (width <= 768px) {
        padding-inline: 0;
      }
      .problems_wrap {
        position: relative;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        background-image: url('../img/problems_fukidashi.png');
        min-inline-size: 1094px;
        min-block-size: 612px;
        padding-inline: 229px;
        padding-block-start: 96px;
        margin-block-start: 64px;

        @media (width <= 768px) {
          background-image: url('../img/problems_fukidashi_2x.png');
          min-inline-size: 100%;
          min-block-size: calc((100 / 390) * 812 * 1vw);
          padding-inline: calc((100 / 390) * 56 * 1vw);
          padding-block-start: calc((100 / 390) * 32 * 1vw);
          margin-block-start: calc((100 / 390) * 64 * 1vw);
        }
        .problem-list {
          & > li {
            display: block flex;
            gap: 16px;
            margin-block-start: 40px;
            font-size: 24px;
            font-weight: bold;
            line-height: 1.6;

            @media (width <= 768px) {
              font-size: calc((100 / 390) * 22 * 1vw);
            }

            &::before {
              content: '';
              display: block flow;
              background-repeat: no-repeat;
              background-size: contain;
              background-position: center;
              background-image: url('../img/check.svg');
              inline-size: 39px;
              block-size: 38px;
              flex-shrink: 0;
            }

            @media (width <= 768px) {
              &::before {
                inline-size: calc((100 / 390) * 39 * 1vw);
                block-size: calc((100 / 390) * 38 * 1vw);
              }
            }
          }
        }
      }
    }
    & > .picture {
      text-align: center;

      @media (width <= 768px) {
        margin-block-start: calc((100 / 390) * 11 * 1vw);
        & > img {
          inline-size: 100%;
        }
      }
    }
    & > .description {
      margin-block-start: 68px;
      font-size: 32px;
      font-weight: bold;
      line-height: 1.6;
      text-align: center;

      @media (width <= 768px) {
        margin-block-start: calc((100 / 390) * 76 * 1vw);
        font-size: calc((100 / 390) * 24 * 1vw);
      }
    }

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      z-index: 3;
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      background-image: url('../img/tatemoji.png');
      inline-size: 116px;
      block-size: 2070px;
      pointer-events: none;
    }

    @media (width <= 768px) {
      &::before {
        background-image: url('../img/tatemoji_2x.png');
        inline-size: calc((100 / 390) * 52 * 1vw);
        block-size: calc((100 / 390) * 938 * 1vw);
      }
    }
    &::after {
      content: '';
      position: absolute;
      bottom: -40px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 3;
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      background-image: url('../img/problems_tri.svg');
      inline-size: 80px;
      block-size: 60px;
      pointer-events: none;
    }

    @media (width <= 768px) {
      &::after {
        inline-size: calc((100 / 390) * 80 * 1vw);
        block-size: calc((100 / 390) * 60 * 1vw);
        bottom: calc((100 / 390) * -40 * 1vw);
      }
    }
  }

  /* =====================
    solution
  ===================== */
  .solution {
    position: relative;
    padding-block: 160px 200px;
    background-color: var(--primary);

    @media (width <= 768px) {
      padding-block: calc((100 / 390) * 160 * 1vw) calc((100 / 390) * 200 * 1vw);
    }

    &::before {
      content: '';
      position: absolute;
      top: 218px;
      right: 0;
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      background-image: url('../img/content_earth.png');
      inline-size: 420px;
      block-size: 720px;
      pointer-events: none;
    }

    @media (width <= 768px) {
      &::before {
        display: none;
      }
    }

    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      background-image: url('../img/solution_bg.png');
      inline-size: 100%;
      min-block-size: 457px;
      pointer-events: none;
    }

    @media (width <= 768px) {
      &::after {
        background-image: url('../img/solution_bg_2x.png');
        min-block-size: calc((100 / 390) * 229 * 1vw);
      }
    }
    .u-inner {
      & > .picture {
        text-align: center;
        margin-block-start: 80px;

        @media (width <= 768px) {
          margin-block-start: calc((100 / 390) * 80 * 1vw);
          & > img {
            inline-size: calc((100 / 390) * 281 * 1vw);
          }
        }
      }
      .solution-list {
        margin-block-start: 80px;
        padding-inline: 120px;
        counter-reset: number;

        @media (width <= 768px) {
          margin-block-start: calc((100 / 390) * 78 * 1vw);
          padding-inline: calc((100 / 390) * 15 * 1vw);
        }
        & > li {
          background-color: #fff;
          display: block flex;
          align-items: center;
          justify-content: space-between;

          @media (width <= 768px) {
            flex-direction: column-reverse;
            gap: calc((100 / 390) * 24 * 1vw);
          }
          .unit {
            width: 100%;
            padding-inline-start: 40px;

            @media (width <= 768px) {
              padding-inline-start: 0;
              padding-inline: calc((100 / 390) * 8 * 1vw);
              padding-block-end: calc((100 / 390) * 24 * 1vw);
            }
            .title {
              position: relative;
              display: block flex;
              align-items: center;
              gap: 16px;
              font-size: 36px;
              font-weight: bold;
              line-height: 1.6;
              color: #155391;

              @media (width <= 768px) {
                flex-direction: column;
                font-size: calc((100 / 390) * 24 * 1vw);
                gap: 0;
                text-align: center;
              }
              &::before {
                counter-increment: number;
                content: '0' counter(number);
                display: block flow;
                font-family: var(--title);
                font-weight: bold;
                line-height: 1;
                font-size: 80px;
                color: #155391;
              }

              @media (width <= 768px) {
                &::before {
                  font-size: calc((100 / 390) * 64 * 1vw);
                }
              }
            }
            .description {
              margin-block-start: 24px;

              @media (width <= 768px) {
                font-size: calc((100 / 390) * 14 * 1vw);
                line-height: 2;
                margin-block-start: calc((100 / 390) * 16 * 1vw);
                padding-inline: calc((100 / 390) * 16 * 1vw);
              }
            }
          }
          &:nth-child(2n) {
            flex-direction: row-reverse;

            @media (width <= 768px) {
              flex-direction: column-reverse;
            }
          }
          & + li {
            margin-block-start: 80px;

            @media (width <= 768px) {
              margin-block-start: calc((100 / 390) * 80 * 1vw);
            }
          }
          .picture {
            @media (width <= 768px) {
              & > img {
                inline-size: calc((100 / 390) * 359 * 1vw);
              }
            }
          }
        }
      }

      & > .description {
        margin-block-start: 80px;
        font-size: 24px;
        font-weight: bold;
        line-height: 2;
        color: var(--white);
        text-align: center;

        @media (width <= 768px) {
          margin-block-start: calc((100 / 390) * 80 * 1vw);
          font-size: calc((100 / 390) * 20 * 1vw);
        }
      }
    }
  }

  /* =====================
    features
  ===================== */
  .features {
    position: relative;
    padding-block: 80px 480px;

    @media (width <= 768px) {
      padding-block: calc((100 / 390) * 48 * 1vw) calc((100 / 390) * 240 * 1vw);
    }

    &::before {
      content: '';
      position: absolute;
      top: -112px;
      left: 0;
      background-repeat: no-repeat;
      background-size: 100% 112px;
      background-position: center;
      background-image: url('../img/solution_tri.png');
      inline-size: 100%;
      block-size: 112px;
      pointer-events: none;
    }

    @media (width <= 768px) {
      &::before {
        top: calc((100 / 390) * -30 * 1vw);
        background-image: url('../img/solution_tri_2x.png');
        background-size: 100% calc((100 / 390) * 30 * 1vw);
        block-size: calc((100 / 390) * 30 * 1vw);
      }
    }

    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      background-image: url('../img/features_bg.png');
      inline-size: 100%;
      min-block-size: 1183px;
      pointer-events: none;
    }

    @media (width <= 768px) {
      &::after {
        background-image: url('../img/features_bg_2x.png');
        min-block-size: calc((100 / 390) * 591.5 * 1vw);
      }
    }
    .u-inner {
      .features-list {
        margin-block-start: 80px;
        display: block grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
        padding-inline: 78px;
        counter-reset: number;

        @media (width <= 768px) {
          margin-block-start: calc((100 / 390) * 80 * 1vw);
          grid-template-columns: 1fr;
          gap: calc((100 / 390) * 80 * 1vw);
          padding-inline: calc((100 / 390) * 15 * 1vw);
        }

        & > li {
          padding-block: 29px 72px;
          padding-inline: 40px;
          background-color: rgba(234, 234, 234, 0.9);

          @media (width <= 768px) {
            padding-block: calc((100 / 390) * 42 * 1vw) calc((100 / 390) * 40 * 1vw);
            padding-inline: calc((100 / 390) * 24 * 1vw);
          }
          .title {
            position: relative;
            font-size: 36px;
            font-weight: bold;
            line-height: 1.6;
            color: #155391;

            @media (width <= 768px) {
              font-size: calc((100 / 390) * 24 * 1vw);
            }
            &::before {
              counter-increment: number;
              content: '0' counter(number);
              display: block flow;
              font-family: var(--title);
              font-weight: bold;
              line-height: 1;
              font-size: 80px;
              color: #155391;
              margin-block-end: 19px;
            }

            @media (width <= 768px) {
              &::before {
                font-size: calc((100 / 390) * 64 * 1vw);
                margin-block-end: calc((100 / 390) * 22 * 1vw);
              }
            }
            &::after {
              content: '';
              display: block flow;
              background-repeat: no-repeat;
              background-size: contain;
              background-position: center;
              background-image: url('../img/point.png');
              inline-size: 145px;
              block-size: 77px;
              position: absolute;
              top: -43px;
              left: -76px;
            }

            @media (width <= 768px) {
              &::after {
                background-image: url('../img/point_2x.png');
                inline-size: calc((100 / 390) * 140 * 1vw);
                block-size: calc((100 / 390) * 76.5 * 1vw);
                top: calc((100 / 390) * -57 * 1vw);
                left: calc((100 / 390) * -56 * 1vw);
              }
            }
          }
          .description {
            line-height: 2;
            margin-block-start: 31px;

            @media (width <= 768px) {
              margin-block-start: calc((100 / 390) * 28 * 1vw);
            }
          }
          .picture {
            text-align: center;
            margin-block-start: 31px;

            @media (width <= 768px) {
              margin-block-start: calc((100 / 390) * 31 * 1vw);

              img {
                inline-size: calc((100 / 390) * 122 * 1vw);
              }
            }
          }
        }
      }
    }
  }

  /* =====================
    cases
  ===================== */
  .cases {
    position: relative;
    padding-block: 120px 80px;

    @media (width <= 768px) {
      padding-block: calc((100 / 390) * 80 * 1vw) 0;
    }
    .cases_wrap {
      position: relative;
      margin-block-start: 80px;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      background-image: url('../img/cases_bg.png');
      inline-size: 100%;
      min-block-size: 843px;
      padding-block: 80px;

      @media (width <= 768px) {
        background-image: url('../img/cases_bg_2x.png');
        min-block-size: calc((100 / 390) * 882 * 1vw);
        padding-block: calc((100 / 390) * 80 * 1vw);
      }
      .inner {
        inline-size: 1440px;
        padding-inline: 160px;
        margin-inline: auto;

        @media (width <= 768px) {
          inline-size: 100%;
          padding-inline: 0;
        }
        .unit {
          inline-size: 680px;
          background-color: rgba(234, 234, 234, 0.9);
          padding-block: 80px 70px;
          padding-inline: 80px;

          @media (width <= 768px) {
            inline-size: calc((100 / 390) * 238 * 1vw);
            padding-block: calc((100 / 390) * 28 * 1vw) calc((100 / 390) * 21 * 1vw);
            padding-inline: calc((100 / 390) * 24 * 1vw) calc((100 / 390) * 14 * 1vw);
          }
          .title {
            font-size: 36px;
            font-weight: bold;
            line-height: 1;
            color: #155391;

            @media (width <= 768px) {
              font-size: calc((100 / 390) * 24 * 1vw);
            }
          }
          .description {
            line-height: 2;
            margin-block-start: 24px;

            @media (width <= 768px) {
              font-size: calc((100 / 390) * 14 * 1vw);
              line-height: 1.8;
              margin-block-start: calc((100 / 390) * 16 * 1vw);
            }
          }
          &[data-id='1'] {
            margin-inline: auto 0;
          }
          &[data-id='2'] {
            margin-inline: 0 auto;
            margin-block-start: 135px;

            @media (width <= 768px) {
              margin-block-start: calc((100 / 390) * 146 * 1vw);
              padding-block: calc((100 / 390) * 78 * 1vw) calc((100 / 390) * 71 * 1vw);
            }
          }
        }
      }
      &::after {
        content: '';
        position: absolute;
        top: 54%;
        left: 50%;
        translate: -50% -50%;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        background-image: url('../img/circle.svg');
        inline-size: 173px;
        aspect-ratio: 1/1;
        pointer-events: none;
        animation: rotate 18s linear infinite;
      }

      @media (width <= 768px) {
        &::after {
          inline-size: calc((100 / 390) * 155.7 * 1vw);
          top: 44.5%;
        }
      }
    }
  }

  /* =====================
    voice
  ===================== */
  .voice {
    position: relative;
    padding-block: 120px 80px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-image: url('../img/voice_bg.png');
    inline-size: 100%;
    min-block-size: 1602px;

    @media (width <= 768px) {
      padding-block: calc((100 / 390) * 80 * 1vw);
      background-image: url('../img/voice_bg_2x.png');
      min-block-size: calc((100 / 390) * 2846 * 1vw);
    }
    .u-inner {
      .voice-list {
        margin-block-start: 80px;
        display: block grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
        padding-inline: 120px;

        @media (width <= 768px) {
          grid-template-columns: 1fr;
          margin-block-start: calc((100 / 390) * 80 * 1vw);
          gap: calc((100 / 390) * 80 * 1vw);
          padding-inline: calc((100 / 390) * 15 * 1vw);
        }

        & > li {
          background-color: #fff;
          box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.1);
          padding-block: 40px 31px;
          padding-inline: 40px;

          @media (width <= 768px) {
            box-shadow: 0 0 calc((100 / 390) * 16 * 1vw) 0 rgba(0, 0, 0, 0.1);
            padding-block: calc((100 / 390) * 40 * 1vw) calc((100 / 390) * 31 * 1vw);
            padding-inline: calc((100 / 390) * 40 * 1vw);
          }
          .picture {
            text-align: center;

            @media (width <= 768px) {
              & img {
                inline-size: calc((100 / 390) * 140.5 * 1vw);
              }
            }
          }
          .title {
            font-size: 20px;
            font-weight: bold;
            line-height: 2;
            color: #155391;
            text-align: center;
            margin-block-start: 38px;

            @media (width <= 768px) {
              font-size: calc((100 / 390) * 20 * 1vw);
              margin-block-start: calc((100 / 390) * 38 * 1vw);
            }
          }
          .description {
            line-height: 2;
            margin-block-start: 28px;

            @media (width <= 768px) {
              font-size: calc((100 / 390) * 16 * 1vw);
              margin-block-start: calc((100 / 390) * 28 * 1vw);
            }
          }
        }
      }
      & > .description {
        margin-block-start: 80px;
        font-size: 24px;
        font-weight: bold;
        line-height: 2;
        text-align: center;

        @media (width <= 768px) {
          margin-block-start: calc((100 / 390) * 80 * 1vw);
          font-size: calc((100 / 390) * 20 * 1vw);
        }
      }
    }
  }

  /* =====================
    flow
  ===================== */
  .flow {
    position: relative;
    padding-block: 80px 132px;
    background-color: var(--primary);

    @media (width <= 768px) {
      padding-block: calc((100 / 390) * 80 * 1vw) calc((100 / 390) * 160 * 1vw);
    }
    &::before {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      background-image: url('../img/flow_bg.png');
      inline-size: 100%;
      min-block-size: 513px;
      pointer-events: none;
    }

    @media (width <= 768px) {
      &::before {
        background-image: url('../img/flow_bg_2x.png');
        min-block-size: calc((100 / 390) * 213 * 1vw);
      }
    }
    &::after {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      background-image: url('../img/flow_earth.png');
      inline-size: 448px;
      block-size: 720px;
      pointer-events: none;
    }

    @media (width <= 768px) {
      &::after {
        background-image: url('../img/flow_earth_2x.png');
        inline-size: 100%;
        block-size: calc((100 / 390) * 720 * 1vw);
      }
    }
    .u-inner {
      .flow_wrap {
        margin-block-start: 80px;
        padding-inline: 120px;

        @media (width <= 768px) {
          margin-block-start: calc((100 / 390) * 80 * 1vw);
          padding-inline: 0;
        }
        .flow-list {
          padding-inline: 40px;
          padding-block: 40px;
          background-color: #fff;

          @media (width <= 768px) {
            padding-inline: calc((100 / 390) * 16 * 1vw);
            padding-block: calc((100 / 390) * 24 * 1vw);
          }
          & > li {
            display: block flex;
            gap: 20px;
            margin-block-end: 56px;

            @media (width <= 768px) {
              gap: calc((100 / 390) * 16 * 1vw);
              margin-block-end: calc((100 / 390) * 23 * 1vw);
            }

            .left {
              position: relative;
              flex-shrink: 0;
              margin-block-start: 8px;

              @media (width <= 768px) {
                margin-block-start: calc((100 / 390) * 8 * 1vw);
              }
              &::before {
                content: '';
                position: absolute;
                top: 152px;
                left: 50%;
                transform: translateX(-50%);
                width: 1px;
                height: 30%;
                background-image: linear-gradient(to bottom, #444 50%, transparent 50%);
                background-size: 1px 4px; /* 点線の間隔を調整 */
                background-repeat: repeat-y;
                z-index: 1;
              }

              @media (width <= 768px) {
                &::before {
                  top: calc((100 / 390) * 118 * 1vw);
                  height: 52%;
                  background-size: 1px calc((100 / 390) * 4 * 1vw); /* 点線の間隔を調整 */
                }
              }

              .step-no {
                position: relative;
                font-family: var(--title);
                font-size: 24px;
                font-weight: 500;
                line-height: 1;
                text-align: center;
                z-index: 3;

                @media (width <= 768px) {
                  font-size: calc((100 / 390) * 20 * 1vw);
                }
              }
              .icon {
                position: relative;
                inline-size: 100px;
                aspect-ratio: 1/1;
                border-radius: 50rem;
                box-shadow: 0 8px 0 0 rgba(0, 0, 0, 0.25);
                background-color: #155391;
                display: block grid;
                place-content: center;
                margin-block-start: 10px;
                z-index: 3;

                @media (width <= 768px) {
                  inline-size: calc((100 / 390) * 80 * 1vw);
                  box-shadow: 0 calc((100 / 390) * 8 * 1vw) 0 0 rgba(0, 0, 0, 0.25);
                }
                img {
                  inline-size: 100px;
                  aspect-ratio: 1/1;
                  object-fit: contain;
                  object-position: center;

                  @media (width <= 768px) {
                    inline-size: calc((100 / 390) * 80 * 1vw);
                  }
                }
              }
            }
            .right {
              width: 100%;
              .title {
                font-size: 24px;
                font-weight: bold;
                line-height: 2;
                color: #155391;

                @media (width <= 768px) {
                  font-size: calc((100 / 390) * 20 * 1vw);
                }
              }
              .description {
                line-height: 2;
                margin-block-start: 16px;
                padding-inline: 32px;
                padding-block: 32px;
                border-radius: 8px;
                box-shadow: 0 8px 0 0 rgba(68, 68, 68, 0.25);
                background-color: #f4f2ec;

                @media (width <= 768px) {
                  margin-block-start: calc((100 / 390) * 16 * 1vw);
                  padding-inline: calc((100 / 390) * 32 * 1vw);
                  padding-block: calc((100 / 390) * 32 * 1vw);
                  border-radius: calc((100 / 390) * 8 * 1vw);
                  box-shadow: 0 calc((100 / 390) * 8 * 1vw) 0 0 rgba(68, 68, 68, 0.25);
                  font-size: calc((100 / 390) * 14 * 1vw);
                }
              }
            }
            &:last-child .left::before {
              display: none;
            }
          }
        }
      }
      & > .description {
        margin-block-start: 80px;
        font-size: 24px;
        font-weight: bold;
        line-height: 2;
        text-align: center;
        color: var(--white);

        @media (width <= 768px) {
          margin-block-start: calc((100 / 390) * 80 * 1vw);
          font-size: calc((100 / 390) * 20 * 1vw);
        }
      }
    }
  }

  /* =====================
    faq
  ===================== */
  .faq {
    position: relative;
    padding-block: 80px 160px;

    @media (width <= 768px) {
      padding-block: calc((100 / 390) * 80 * 1vw);
    }
    .u-inner {
      .faq-list {
        padding-inline: 160px;

        @media (width <= 768px) {
          padding-inline: calc((100 / 390) * 15 * 1vw);
        }
        & > li {
          margin-block-start: 80px;

          @media (width <= 768px) {
            margin-block-start: calc((100 / 390) * 80 * 1vw);
          }
          & > section {
            position: relative;
            box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.4);
            border-radius: 8px;

            @media (width <= 768px) {
              box-shadow: 0 0 calc((100 / 390) * 16 * 1vw) 0 rgba(0, 0, 0, 0.4);
              border-radius: calc((100 / 390) * 8 * 1vw);
            }

            .question {
              position: relative;
              background-color: var(--primary);
              font-size: 24px;
              font-weight: bold;
              line-height: 2;
              color: var(--white);
              padding-block: 40px;
              padding-inline: 40px;
              cursor: pointer;
              border-radius: 8px;

              @media (width <= 768px) {
                font-size: calc((100 / 390) * 20 * 1vw);
                padding-block: calc((100 / 390) * 24 * 1vw);
                padding-inline: calc((100 / 390) * 24 * 1vw) calc((100 / 390) * 56 * 1vw);
                border-radius: calc((100 / 390) * 8 * 1vw);
                display: block flex;
                align-items: start;
                gap: calc((100 / 390) * 14 * 1vw);
              }
              &::before {
                content: 'Q';
                display: inline-block;
                margin-inline-end: 1.2em;
                flex-shrink: 0;
              }

              @media (width <= 768px) {
                &::before {
                  margin-inline-end: 0;
                }
              }
              /* ==== 右の↑ ==== */
              &:after {
                content: '';
                position: absolute;
                margin: auto;
                box-sizing: border-box;
                vertical-align: middle;
                background-repeat: no-repeat;
                background-size: contain;
                background-position: center;
                background-image: url('../img/icon_arrow.svg');
                width: 20px;
                height: 40px;
                transition: 0.3s;
                right: 77px;
                top: 50%;
                transform: translateY(-50%) rotate(90deg);
              }

              @media (width <= 768px) {
                &:after {
                  width: calc((100 / 390) * 20 * 1vw);
                  height: calc((100 / 390) * 40 * 1vw);
                  right: calc((100 / 390) * 27 * 1vw);
                  top: calc((100 / 390) * 20 * 1vw);
                  transform: translateY(0) rotate(90deg);
                }
              }
            }
            /*　closeというクラスがついたら形状変化　*/
            &.close {
              .question {
                border-radius: 8px 8px 0 0;

                @media (width <= 768px) {
                  border-radius: calc((100 / 390) * 8 * 1vw) calc((100 / 390) * 8 * 1vw) 0 0;
                }
                &:after {
                  transform: translateY(-50%) rotate(-90deg);
                }

                @media (width <= 768px) {
                  &:after {
                    transform: translateY(0) rotate(-90deg);
                  }
                }
              }
            }

            /*アコーディオンで現れるエリア*/
            .answer-box {
              display: none;
              /*はじめは非表示*/
              padding-block: 40px;
              padding-inline: 40px;
              background-color: #fff;
              border-radius: 0 0 8px 8px;
              line-height: 2;

              @media (width <= 768px) {
                padding-block: calc((100 / 390) * 24 * 1vw);
                padding-inline: calc((100 / 390) * 24 * 1vw);
                border-radius: 0 0 calc((100 / 390) * 8 * 1vw) calc((100 / 390) * 8 * 1vw);
              }
            }
          }
        }
      }
    }
  }

  /* =====================
    aside
  ===================== */
  .aside {
    position: relative;
    padding-block: 80px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-image: url('../img/aside_bg.png');
    inline-size: 100%;
    block-size: 550px;
    border-radius: 80px 80px 0 0;

    @media (width <= 768px) {
      background-image: url('../img/aside_bg_2x.png');
      min-block-size: calc((100 / 390) * 681.5 * 1vw);
      border-radius: calc((100 / 390) * 80 * 1vw) calc((100 / 390) * 80 * 1vw) 0 0;
    }
    .u-inner {
      .btn-set {
        display: block flex;
        align-items: center;
        justify-content: center;
        gap: 40px;
        margin-block-start: 80px;

        @media (width <= 768px) {
          flex-direction: column;
          gap: calc((100 / 390) * 40 * 1vw);
        }
      }
      .description {
        font-size: 24px;
        font-weight: bold;
        line-height: 2;
        text-align: center;
        margin-block-start: 80px;

        @media (width <= 768px) {
          font-size: calc((100 / 390) * 20 * 1vw);
          margin-block-start: calc((100 / 390) * 80 * 1vw);
        }
      }
    }
  }

  /* =====================
  footer
===================== */
  .footer {
    position: relative;
    padding-block-start: 40px;
    .u-inner {
      .logo {
        text-align: center;

        @media (width <= 768px) {
          margin-block-start: calc((100 / 390) * 40 * 1vw);
          & img {
            inline-size: calc((100 / 390) * 320 * 1vw);
          }
        }
      }
      .u-anchor {
        margin-block-start: 24px;
        margin-inline: auto;

        @media (width <= 768px) {
          margin-block-start: calc((100 / 390) * 70 * 1vw);
        }
      }
      .address {
        margin-block-start: 31px;
        text-align: center;

        @media (width <= 768px) {
          font-size: calc((100 / 390) * 16 * 1vw);
          margin-block-start: calc((100 / 390) * 30 * 1vw);
        }
      }
    }
    .foot {
      .copyright {
        display: block flow;
        font-size: 14px;
        text-align: center;
        padding-block: 32px;
        margin-block-start: 32px;
        border-top: 1px solid #b7b7b7;

        @media (width <= 768px) {
          font-size: calc((100 / 390) * 14 * 1vw);
          padding-block: calc((100 / 390) * 32 * 1vw);
          margin-block-start: calc((100 / 390) * 32 * 1vw);
        }
      }
    }
  }
}

/* =====================
      to-top
===================== */
.to-top {
  position: absolute;
  right: 77px;
  top: 45px;
  z-index: 19;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-image: url('../img/to-top.svg');
  inline-size: 126px;
  block-size: 126px;
  transition: all 250ms ease 0s;
  @media (any-hover: hover) {
    &:hover {
      background-image: url('../img/to-top_hover.svg');
    }
  }

  @media (width <= 768px) {
    inline-size: calc((100 / 390) * 126 * 1vw);
    block-size: calc((100 / 390) * 126 * 1vw);
    right: calc((100 / 390) * 7 * 1vw);
    top: calc((100 / 390) * -42 * 1vw);
  }
}

/* ==== animation ==== */
@keyframes rotate {
  0% {
    rotate: 0deg;
  }

  100% {
    rotate: -360deg;
  }
}

.js-parallax {
  opacity: 0;
  transition: all 0.5s ease-in-out 0s;
  transform: translateY(0.5em);
  &.on {
    opacity: 1;
    transform: translateY(0);
  }
}