@charset "utf-8";

/* ================================== */

.-container {
  max-width: calc(100vw * calc(1616.31 / 1728));
  width: 100%;
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;

  @media (min-width: 1728px) {
    max-width: 1616.31px;
  }
}

.-inner {
  max-width: calc(100vw * calc(1088 / 1728));
  width: 100%;
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;

  @media (min-width: 1728px) {
    max-width: 1088px;
  }

  @media (max-width: 768px) {
    max-width: calc(100% - 32px);
  }
}

main {
  padding-top: var(--header-height);
  overflow: hidden;

  @media (max-width: 768px) {
    padding-top: var(--header-height-sp);
  }
}

.-bg-gray {
  background: var(--bg-gray);
}

section {
  position: relative;
  margin-top: 0;

  &::before {
    content: "";
    position: absolute;
    top: -100px;
    left: 0;
    border-top: 100px solid transparent;
    border-right: 100vw solid #fff;
    width: 0;
    height: 0;

    @media (max-width: 768px) {
      top: -30px;
      border-top: 30px solid transparent;
    }
  }

  &.-bg-gray {
    &::before {
      border-right: 100vw solid var(--bg-gray);
    }
  }
}

.heading {
  >p {
    font-size: calc(100vw * calc(46 / 1728));
    font-style: normal;
    font-weight: 700;
    line-height: 100%;
    margin-bottom: 13.61px;

    @media (max-width: 768px) {
      font-size: 1.8rem;
      margin-bottom: 6px;
    }

    @media (min-width: 1728px) {
      font-size: 46px;
    }
  }

  >h2 {
    font-size: calc(100vw * calc(115.703 / 1728));
    font-style: normal;
    line-height: 100%;

    @media (max-width: 768px) {
      font-size: 46px;
    }

    @media (min-width: 1728px) {
      font-size: 115.703px;
    }
  }

  &.-yellow {
    >h2 {
      color: var(--color-yellow);
    }
  }

  &.-green {
    >h2 {
      color: var(--color-green);
    }
  }

  &.-blue {
    >h2 {
      color: var(--color-blue);
    }
  }
}

.subhead {
  margin-bottom: 80px;

  @media (max-width: 768px) {
    margin-bottom: 40px;
  }

  >h2 {
    font-size: calc(100vw * calc(62 / 1728));
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-bottom: 40px;
    color: var(--color-accent);

    @media (max-width: 768px) {
      font-size: 34px;
      margin-bottom: 16px;
    }

    @media (max-width: 440px) {
      font-size: calc(100vw * calc(34 / 440));
    }

    @media (min-width: 1728px) {
      font-size: 62px;
    }
  }

  >p {
    font-family: var(--noto);
    font-size: 18px;
    font-style: normal;
    font-weight: 300;
    line-height: 190%;

    @media (max-width: 768px) {
      font-size: 1.4rem;
      line-height: 210%;
    }
  }
}

/* Header */
header {
  background: #fff;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  min-height: 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  z-index: 99999;

  @media (max-width: 1080px) {
    display: block;
  }

  @media (max-width: 768px) {
    height: var(--header-height-sp);
    /* padding: 0 0 16px; */
  }

  .js-hum {
    display: none;
    position: absolute;
    top: 16px;
    right: 16px;

    @media (max-width: 1080px) {
      display: block;
    }

    >span {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 36px;
      height: 24px;

      &::before,
      &::after {
        content: "";
        display: block;
        height: 1px;
        background-color: #000;
        transition: all 0.3s ease-out;
      }

      >span {
        position: relative;
        background: #000;
        display: block;
        height: 1px;
      }
    }

    >p {
      margin-top: 4px;
      text-align: center;

      >span {
        font-size: 1.2rem;
        font-style: normal;
        font-weight: 700;
        line-height: normal;

        &:nth-child(2) {
          display: none;
        }
      }
    }
  }

  >div.-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    flex-wrap: wrap;
    padding: 8px 0;
    width: calc(100% - 32px);
    height: var(--header-height);
    min-height: 80px;

    @media (max-width: 1080px) {
      width: 100%;
      padding: 0;
      max-width: 100%;
      height: var(--header-height-sp);
      min-height: 80px;
    }

    a.logo {
      >span {
        &:nth-child(1) {
          display: none;
        }

        &:nth-child(2) {
          >img {
            max-width: calc(100vw * calc(280 / 1728));

            @media (max-width: 1080px) {
              max-width: 261.82px;
              padding: 16px 0 0 16px;
            }

            @media (max-width: 408px) {
              max-width: calc(100vw * calc(241.82 / 408));
            }

            @media (min-width: 1728px) {
              max-width: 280px;
            }
          }
        }
      }
    }

    nav {
      background: #fff;
      transition: all 0.3s ease-out;

      @media (max-width: 1080px) {
        transform: translate(-100%, 0);
        width: 100%;
        overflow-y: auto;
        max-height: 90vh;
      }

      >ul {
        display: flex;
        flex-wrap: wrap;
        gap: 31px;
        align-items: center;

        @media (max-width: 1080px) {
          width: calc(100% - 32px);
          flex-direction: column;
          padding: 40px 16px;
          overflow-y: auto;
          align-items: start;
          gap: 56px;
        }

        >li {
          @media (max-width: 1080px) {
            width: 100%;
          }

          >ul {
            display: flex;
            flex-wrap: wrap;
            gap: 31px;
            align-items: center;

            @media (max-width: 1080px) {
              flex-direction: column;
              align-items: start;
              gap: 59px;
            }

            >li {
              @media (max-width: 1080px) {
                width: 100%;
              }

              >a {
                color: var(--color-text);
                font-size: 1.9rem;
                font-style: normal;
                font-weight: 700;
                line-height: normal;
                position: relative;

                @media (max-width: 1080px) {
                  display: block;
                  width: 100%;
                  font-size: 18.293px;
                }

                >span {
                  display: none;
                  font-family: var(--poppins);
                  font-size: 46.011px;
                  font-style: normal;
                  font-weight: 700;
                  line-height: 100%;
                  margin-bottom: 8px;

                  @media (max-width: 1080px) {
                    display: block;
                  }
                }

                >svg {
                  display: none;
                  width: 13.529px;
                  height: 23.196px;

                  @media (max-width: 1080px) {
                    display: block;
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);
                    right: 4.4px;
                  }
                }
              }

              &:nth-child(1) {
                >a {
                  >span {
                    color: var(--color-yellow);
                  }
                }
              }

              &:nth-child(2) {
                >a {
                  >span {
                    color: var(--color-green);
                  }
                }
              }

              &:nth-child(3) {
                >a {
                  >span {
                    color: var(--color-blue);
                  }
                }
              }

              &:last-child {
                display: none;

                >a {
                  font-size: 18px;
                  font-style: normal;
                  font-weight: 400;
                  line-height: 180%;
                }

                @media (max-width: 1080px) {
                  display: block;
                }
              }
            }
          }

          >a {
            background: var(--color-button);
            border-radius: 8px;
            display: flex;
            padding: 16px 24px;
            align-items: center;
            gap: 19px;
            position: relative;

            @media (max-width: 1080px) {
              background: var(--color-yellow);
              justify-content: center;
            }

            >span {
              display: flex;
              align-items: center;
              gap: 7px;

              @media (max-width: 1080px) {
                gap: 11.03px;
              }

              >svg {
                width: 25.333px;
                height: 19px;

                @media (max-width: 1080px) {
                  width: 28.848px;
                  height: 21.636px;
                }
              }

              >span {
                >span {
                  color: #fff;
                  font-size: 1.7rem;
                  font-style: normal;
                  font-weight: 700;
                  line-height: normal;
                  position: relative;
                  top: -2px;

                  @media (max-width: 1080px) {
                    font-size: 1.8rem;
                    font-style: normal;
                    font-weight: 600;
                    line-height: 180%;
                  }

                  &:nth-child(1) {
                    display: inline;

                    @media (max-width: 1080px) {
                      display: none;
                    }
                  }

                  &:nth-child(2) {
                    display: none;

                    @media (max-width: 1080px) {
                      display: inline;
                    }
                  }
                }
              }
            }

            >svg {
              width: 13px;
              height: 22.289px;

              @media (max-width: 1080px) {
                width: 13.529px;
                height: 23.196px;
                position: absolute;
                right: 42.297px;
                top: 50%;
                transform: translateY(-50%);
              }
            }
          }
        }
      }
    }
  }
}

body.js-open {
  .js-hum {
    >span {
      &::before {
        transform: translateY(11.5px) rotate(45deg);
      }

      &::after {
        transform: translateY(-11.5px) rotate(-45deg);
      }

      >span {
        opacity: 0;
      }
    }

    >p {
      >span {
        &:nth-child(1) {
          display: none;
        }

        &:nth-child(2) {
          display: inline;
        }
      }
    }
  }

  header {
    &>div.-container {
      nav {
        @media (max-width: 1080px) {
          transform: translate(0, 0);
        }
      }
    }
  }
}

/* Footer */
footer {
  background: #545454;
  display: flex;
  padding: 104px 8px 0 8px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;

  @media (max-width: 1080px) {
    padding: 24px 16px 0 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
  }

  .-inner {
    @media (max-width: 1080px) {
      padding-left: 0;
      padding-right: 0;
    }
  }

  .foot-logo {
    display: flex;
    justify-content: center;
    padding-bottom: 36px;

    @media (max-width: 1080px) {
      justify-content: start;
      padding-bottom: 26px;
    }

    >a {
      display: inline-block;

      >img {
        max-width: calc(100vw * calc(295 / 1728));
        margin: 0 auto;

        @media (min-width: 1728px) {
          max-width: 295px;
        }

        @media (max-width: 1080px) {
          max-width: 408px;
        }

        @media (max-width: 408px) {
          max-width: calc(100vw * calc(261.82 / 408));
        }
      }
    }
  }

  .foot-prof {
    text-align: center;

    @media (max-width: 1080px) {
      text-align: left;
      padding-bottom: 30px;
    }

    p {
      color: #fff;
      font-size: 1.8rem;
      font-style: normal;
      font-weight: 300;
      line-height: 190%;
      font-family: var(--noto);

      @media (max-width: 1080px) {
        font-size: 1.4rem;
        line-height: 210%;
      }
    }
  }

  .foot-menu {
    padding: 88px 0;

    @media (max-width: 1080px) {
      display: none;
    }

    >ul {
      display: flex;
      gap: 55px;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;

      >li {
        >a {
          color: #fff;
          font-size: 1.8rem;
          font-style: normal;
          font-weight: 300;
          line-height: 190%;
          text-decoration: none;
          font-family: var(--noto);
        }
      }
    }
  }

  .copyright {
    padding: 24px 8px;
    text-align: center;
    border-top: solid 1px #fff;

    @media (max-width: 1080px) {
      padding: 16px 8px;
    }

    >p {
      color: #fff;
      font-size: 1.8rem;
      font-style: normal;
      font-weight: 300;
      line-height: 190%;
      font-family: var(--noto);

      @media (max-width: 1080px) {
        font-size: 1.2rem;
        line-height: 180%;
      }
    }
  }
}

/* TOP - MainVisual */
#top-mv {
  position: relative;
  padding: calc(100vw * calc(170 / 1728)) 0 calc(100vw * calc(250.38 / 1728));
  z-index: 3;
  margin-top: 0;

  @media (max-width: 768px) {
    padding: 25px 0 316.04px;
  }

  @media (max-width: 440px) {
    padding: calc(100vw * calc(25 / 440)) 0 calc(100vw * calc(316.04 / 440));
  }

  @media (min-width: 1728px) {
    padding: 170px 0 250.38px;
  }

  >h1 {
    opacity: 0;
    font-size: 0;
  }

  .-left {
    position: relative;
    z-index: 2;

    >img {
      max-width: calc(100vw * calc(1071 / 1920));

      @media (max-width: 768px) {
        max-width: 390.94px;
      }

      @media (max-width: 440px) {
        max-width: calc(100vw * calc(390.94 / 440));
      }

      @media (min-width: 1728px) {
        max-width: 1071px;
      }
    }

    >p {
      margin-top: 20.25px;
      font-size: calc(100vw * calc(41.624 / 1920));
      font-style: normal;
      font-weight: 700;
      line-height: 170%;

      @media (max-width: 768px) {
        margin-top: 33.14px;
        font-size: 18px;
        line-height: 190%;
      }

      @media (max-width: 440px) {
        margin-top: calc(100vw * calc(33.14 / 440));
        font-size: calc(100vw * calc(18 / 440));
      }

      @media (min-width: 1728px) {
        font-size: 41.624px;
      }
    }
  }

  .-right {
    position: absolute;
    width: 100%;
    top: 0;
    z-index: 1;

    @media (max-width: 768px) {
      top: 25%;
    }

    >img {
      position: absolute;

      right: 0;
      max-width: 60%;

      &:nth-child(1) {
        max-width: calc(100vw * calc(1156.718 / 1920));
        top: 0;

        @media (max-width: 768px) {
          max-width: 406.892px;
        }

        @media (max-width: 440px) {
          max-width: calc(100vw * calc(406.892 / 440));
        }

        @media (min-width: 1728px) {
          max-width: 1156.718px;
        }
      }

      &:nth-child(2) {
        top: calc(100vw * calc(498.28 / 1728));
        max-width: calc(100vw * calc(762.637 / 1728));
        right: 4vw;

        @media (max-width: 768px) {
          top: 206.86px;
          max-width: 227.702px;
        }

        @media (max-width: 440px) {
          top: calc(100vw * calc(206.86 / 440));
          max-width: calc(100vw * calc(227.702 / 440));
        }

        @media (min-width: 1728px) {
          top: 498.28px;
          max-width: 762.637px;
        }
      }
    }
  }

  &::before {
    display: none;
  }
}

/* TOP - Service */
#top-service {
  padding: 80px 0 0;
  margin-top: 100px;

  @media (max-width: 768px) {
    padding: 48px 0 0;
  }

  .heading {
    margin-bottom: 27.32px;

    @media (max-width: 768px) {
      margin-bottom: 11px;
    }
  }

  .desc {
    margin-bottom: 104px;

    @media (max-width: 768px) {
      margin-bottom: 48px;
    }

    >p {
      font-size: 2rem;
      font-style: normal;
      font-weight: 600;
      line-height: 260%;

      @media (max-width: 768px) {
        font-size: 1.6rem;
        line-height: 180%;
      }
    }
  }

  .contents {
    padding-bottom: 104px;

    @media (max-width: 768px) {
      padding-bottom: 48px;
    }

    >ul {
      display: flex;
      align-items: start;
      gap: 49px;
      align-self: stretch;

      @media (max-width: 768px) {
        flex-direction: column;
        gap: 38px;
      }

      >li {
        width: calc(50% - 19px);
        @media (max-width: 768px) {
          width: 100%;
        }        >h3 {
          text-align: center;
          font-size: 2.8rem;
          font-style: normal;
          font-weight: 600;
          line-height: 140%;
          margin-bottom: 35px;

          @media (max-width: 768px) {
            text-align: left;
            font-size: 2.4rem;
            line-height: 180%;
            margin-bottom: 16px;
          }
        }

        >img {
          margin-bottom: 16px;
        }

        >p {
          font-family: var(--noto);
          font-size: 1.8rem;
          font-style: normal;
          font-weight: 300;
          line-height: 190%;

          @media (max-width: 768px) {
            font-size: 1.4rem;
            line-height: 210%;
          }
        }
      }
    }
  }

  .button {
    text-align: center;
    padding-bottom: 80px;

    @media (max-width: 768px) {
      padding-bottom: 48px;
    }

    >a {
      background: var(--color-yellow);
      display: inline-flex;
      padding: 16px 88px;
      align-items: center;
      gap: 15px;
      border-radius: 8px;

      @media (max-width: 768px) {
        display: flex;
        padding: 16px 0;
        width: 100%;
        justify-content: center;
        position: relative;
      }

      >* {
        color: #fff;
        text-align: center;
        font-size: 2.4rem;
        line-height: 180%;
        font-style: normal;
      }

      >span {
        font-weight: 600;

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

      >i {
        font-weight: 900;
        position: relative;
        top: 2px;

        @media (max-width: 768px) {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          right: 21px;
        }
      }
    }
  }

  .last-contents {
    position: relative;

    &::before {
      content: "";
      position: absolute;
      top: -1px;
      left: 0;
      border-bottom: 100px solid transparent;
      border-left: 100vw solid var(--bg-gray);
      width: 0;
      height: 0;

      @media (max-width: 768px) {
        border-bottom: 30px solid transparent;
      }
    }
  }
}

/* TOP - Conmpany */
#top-company {
  padding: 72px 0 172px;

  @media (max-width: 768px) {
    padding: 64px 0 94px;
  }

  .heading {
    margin-bottom: 65px;

    @media (max-width: 768px) {
      margin-bottom: 24px;
    }
  }

  .prof {
    >dl {
      display: flex;
      padding: 16px 0;
      align-items: start;
      align-self: stretch;
      border-bottom: 1px solid #ccc;

      @media (max-width: 768px) {
        flex-direction: column;
        gap: 8px;
      }

      >dt,
      >dd {
        font-family: var(--noto);
        font-size: 1.8rem;
        font-style: normal;
        line-height: 180%;

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

      >dt {
        width: calc(20% - 10px);
        font-weight: 700;
        padding-right: 10px;

        @media (max-width: 768px) {
          padding-right: 0;
          width: 100%;
        }
      }

      >dd {
        width: 80%;
        font-weight: 400;

        @media (max-width: 768px) {
          width: 100%;
        }

        >ul {
          >li {
            position: relative;
            padding-left: 1.2em;

            &::before {
              content: "・";
              position: absolute;
              top: 0;
              left: 0;
            }
          }
        }
      }
    }
  }
}

/* TOP - Access */
#top-access {
  padding: 160px 0 260px;

  @media (max-width: 768px) {
    padding: 56px 0 86px;
  }

  .heading {
    margin-bottom: 32.12px;

    @media (max-width: 768px) {
      margin-bottom: 24px;
    }
  }

  .contents {
    display: flex;
    align-items: center;
    gap: 48px;
    align-self: stretch;

    @media (max-width: 1180px) {
      flex-direction: column;
      gap: 24px;
      align-items: start;
    }

    >p {
      font-family: var(--noto);
      font-size: 1.8rem;
      font-style: normal;
      font-weight: 300;
      line-height: 190%;

      @media (max-width: 1180px) {
        order: 1;
      }

      @media (max-width: 768px) {
        font-size: 1.4rem;
        line-height: 210%;
      }
    }

    >.-gmap {
      flex: 1 0 0;
      align-self: stretch;

      @media (max-width: 768px) {
        order: 0;
      }

      >iframe {
        width: 100%;
        height: 100%;
        min-height: 392px;
        border: none;
        border-radius: 16px;

        @media (max-width: 768px) {
          min-height: 248px;
        }
      }
    }
  }
}

/* Section - Contact */
#contact {
  padding: 136px 0;

  @media (max-width: 768px) {
    padding: 48px 0;
  }

  .heading {
    margin-bottom: 82px;

    @media (max-width: 768px) {
      margin-bottom: 28px;
    }
  }

  .contents {
    display: flex;
    align-items: center;
    gap: 30px;

    @media (max-width: 1180px) {
      flex-direction: column;
      align-items: start;
      gap: 28px;
    }

    >.-text {
      >h3 {
        font-size: 2.7rem;
        font-style: normal;
        font-weight: 600;
        line-height: 180%;
        margin-bottom: 16px;

        @media (max-width: 768px) {
          font-size: 2.2rem;
          line-height: 180%;
        }
      }

      >p {
        font-family: var(--noto);
        font-size: 1.8rem;
        font-style: normal;
        font-weight: 300;
        line-height: 190%;
        margin-bottom: 16px;

        @media (max-width: 768px) {
          font-size: 1.4rem;
          line-height: 210%;
        }
      }

      >.button {
        >a {
          background: var(--color-yellow);
          border-radius: 8px;
          padding: 8px 61px 8px 24px;
          display: flex;
          justify-content: space-between;
          align-items: center;

          @media (max-width: 768px) {
            padding: 8px 42.3px 8px 24px;
          }

          >span {
            display: flex;
            gap: 11.03px;
            align-items: center;

            >svg {
              position: relative;
              top: 2px;
              width: 28.848px;
              height: 21.636px;

              @media (max-width: 1180px) {
                top: 1px;
              }
            }

            >span {
              color: #fff;
              font-size: 2.6rem;
              font-style: normal;
              font-weight: 600;
              line-height: 180%;

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

          >svg {
            width: 13.529px;
            height: 23.196px;
            flex-shrink: 0;
          }
        }
      }

      @media (max-width: 1180px) {
        order: 1;
      }
    }

    >img {
      max-width: calc(100vw * calc(606 / 1728));
      border-radius: 8px;

      @media (max-width: 1180px) {
        order: 0;
        max-width: 100%;
      }

      @media (min-width: 1728px) {
        max-width: 606px;
      }
    }
  }
}

/* Page - MV */
.page-mv {
  &::before {
    display: none;
  }

  >h1 {
    opacity: 0;
    font-size: 0;
  }

  >.contents {
    >img {
      &:nth-child(1) {
        display: block;

        @media (max-width: 440px) {
          display: none;
        }
      }

      &:nth-child(2) {
        display: none;

        @media (max-width: 440px) {
          display: block;
        }
      }
    }
  }
}

/* Service - First */
#service-first {
  padding: 98px 0;

  @media (max-width: 768px) {
    padding: 32px 0;
  }

  &::before {
    display: none;
  }

  p {
    font-family: var(--noto);
    font-size: 2rem;
    font-style: normal;
    font-weight: 600;
    line-height: 260%;

    @media (max-width: 768px) {
      font-size: 1.4rem;
      font-weight: 700;
      line-height: 230%;
    }
  }
}

/* Service - Main */
#service-main {
  padding-bottom: 100px;

  @media (max-width: 768px) {
    padding-bottom: 30px;
  }

  &::before {
    display: none;
  }

  .contents {
    padding: 0 0 100px;

    @media (max-width: 768px) {
      padding: 0 0 48px;
    }

    .-first {
      margin-bottom: 80px;

      @media (max-width: 768px) {
        margin-bottom: 32px;
      }

      h2 {
        font-size: calc(100vw * calc(62 / 1728));
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        margin-bottom: 40px;
        color: var(--color-accent);

        @media (max-width: 768px) {
          font-size: 34px;
          margin-bottom: 16px;
        }

        @media (max-width: 440px) {
          font-size: calc(100vw * calc(34 / 440));
        }

        @media (min-width: 1728px) {
          font-size: 6.2rem;
        }
      }

      p {
        font-family: var(--noto);
        font-size: 1.8rem;
        font-style: normal;
        font-weight: 300;
        line-height: 190%;

        @media (max-width: 768px) {
          font-size: 1.4rem;
          line-height: 210%;
        }
      }
    }

    .-scroll-head {
      padding-bottom: 32px;

      @media (max-width: 768px) {
        padding-bottom: 16px;
      }

      >.-inner {
        position: relative;

        h3 {
          border-left: 8px solid var(--color-accent);
          padding-left: 24px;
          font-size: calc(100vw * calc(38 / 1728));
          font-style: normal;
          font-weight: 600;
          line-height: 180%;
          color: var(--color-accent);
          margin-bottom: 48px;

          @media (max-width: 768px) {
            font-size: 2.4rem;
            margin-bottom: 17px;
            border-left: 4px solid var(--color-accent);
          }

          @media (max-width: 440px) {
            font-size: calc(100vw * calc(24 / 440));
          }

          @media (min-width: 1728px) {
            font-size: 3.8rem;
          }
        }

        p {
          text-align: right;
          margin-right: 12.5px;
          font-family: var(--noto);
          font-size: 18px;
          font-style: normal;
          font-weight: 300;
          line-height: 190%;

          @media (max-width: 768px) {
            margin-right: 40px;
            font-size: 1.4rem;
            line-height: 210%;
          }
        }

        svg {
          position: absolute;
          right: 0;
          width: 187px;
          height: 15px;
          flex-shrink: 0;
          bottom: -5px;

          @media (max-width: 768px) {
            width: 156px;
            height: 15px;
            right: 16px;
          }
        }
      }
    }

    .-scroll-wrapper {
      position: relative;

      .-scroll-contents {
        position: relative;
        width: 100vw;
        overflow-x: scroll;
        overflow-y: hidden;
        width: 100%;
        -webkit-overflow-scrolling: touch;
        padding-left: clamp(16px, calc((100vw - 769px) * 0.58 + 20px), 260px);
        box-sizing: border-box;
        padding-bottom: 47px;

        @media (max-width: 1080px) {
          padding-left: 16px;
        }

        @media (max-width: 768px) {
          padding-left: 16px;
          padding-bottom: 48px;
        }

        >ul {
          display: flex;
          padding-right: 32px;
          align-items: stretch;
          gap: 32px;
          min-width: 2900px;

          @media (max-width: 1080px) {
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            padding-right: 16px;
            min-width: 2300px;
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
          }

          @media (max-width: 768px) {
            padding-right: 16px;
            gap: 25.806px;
            min-width: 2340px;
          }

          >li {
            display: flex;
            width: calc(100vw * calc(444 / 1728));
            padding: 8px 16px;
            flex-direction: column;
            align-items: flex-start;
            gap: 8px;
            align-self: stretch;
            border-radius: 8px;
            border: 1px solid #a3a3a3;
            box-shadow: 4px 4px 4px 0 rgba(0, 0, 0, 0.25);

            @media (max-width: 768px) {
              width: 336.598px;
              padding: 6.065px 12.13px;
              gap: 6.065px;
              border-radius: 6.065px;
              border: 0.758px solid #a3a3a3;
              box-shadow: 3.032px 3.032px 3.032px 0 rgba(0, 0, 0, 0.25);
            }

            @media (max-width: 440px) {
              width: calc(100vw * calc(336.598 / 440));
            }

            @media (min-width: 1728px) {
              width: 444px;
            }

            >h3 {
              display: flex;
              height: 120px;
              flex-direction: column;
              justify-content: center;
              align-self: stretch;
              font-size: 3.0rem;
              font-style: normal;
              font-weight: 600;
              line-height: 140%;
              color: var(--color-accent);
              @media (max-width: 1080px) {
                font-size: 2.6rem;
              }
              @media (max-width: 768px) {
                height: 90.972px;
                font-size: 2.4rem;
                line-height: 140%;
              }
            }

            >ul {
              >li {
                font-size: 1.8rem;
                font-style: normal;
                font-weight: 300;
                line-height: 190%;
                position: relative;
                padding-left: 28px;
                font-family: var(--noto);

                @media (max-width: 768px) {
                  font-size: 14px;
                  line-height: 210%;
                }

                &::before {
                  content: "";
                  position: absolute;
                  width: 20px;
                  height: 20px;
                  top: 50%;
                  transform: translateY(-50%);
                  left: 0;
                  background: var(--color-accent);
                  border-radius: 50%;

                  @media (max-width: 768px) {
                    width: 15.162px;
                    height: 15.162px;
                  }
                }
              }
            }

            >p {
              font-size: 1.8rem;
              font-style: normal;
              font-weight: 300;
              line-height: 190%;
              font-family: var(--noto);

              @media (max-width: 768px) {
                font-size: 14px;
                line-height: 210%;
              }
            }
          }
        }
      }
    }
  }
}

/* Service - System */
#service-system {
  padding: 88px 0 188px;

  @media (max-width: 768px) {
    padding: 64px 0 94px;
  }

  .contents {
    >ul {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 80px;
      align-self: stretch;

      @media (max-width: 768px) {
        gap: 72px;
      }

      >li {
        >ul {
          display: flex;
          align-items: flex-start;
          gap: 32px;
          align-self: stretch;

          @media (max-width: 1180px) {
            flex-direction: column;
          }

          >li {
            >h3 {
              padding-left: 24px;
              font-size: calc(100vw * calc(32 / 1728));
              font-style: normal;
              font-weight: 600;
              line-height: 140%;
              margin-bottom: 16px;
              color: var(--color-accent);
              border-left: 6px solid var(--color-accent);

              @media (max-width: 768px) {
                font-size: 2.4rem;
                border-left: 4px solid var(--color-accent);
                margin-bottom: 23px;
              }

              @media (max-width: 440px) {
                font-size: calc(100vw * calc(24 / 440));
              }

              @media (min-width: 1728px) {
                font-size: 3.2rem;
              }
            }

            >p {
              font-family: var(--noto);
              font-size: 18px;
              font-style: normal;
              font-weight: 300;
              line-height: 180%;

              @media (max-width: 768px) {
                font-size: 1.4rem;
                line-height: 210%;
              }
            }

            >.point {
              margin-top: 16px;
              display: flex;
              padding: 8px 16px;
              justify-content: center;
              align-items: center;
              gap: 8px;
              align-self: stretch;
              border-radius: 8px;
              background: #fff;
              box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);

              @media (max-width: 768px) {
                height: 64.149px;
                padding: 6.075px 12.149px;
                gap: 6.075px;
                border-radius: 6.075px;
                box-shadow: 0 3.037px 3.037px 0 rgba(0, 0, 0, 0.25);
              }

              >svg {
                width: 16.973px;
                height: 20px;
                flex-shrink: 0;

                @media (max-width: 768px) {
                  width: 12.888px;
                  height: 15.187px;
                }
              }

              >p {
                font-family: var(--noto);
                font-size: 18px;
                font-style: normal;
                font-weight: 300;
                line-height: 180%;

                @media (max-width: 768px) {
                  font-size: 14px;
                  line-height: 210%;
                }
              }
            }
          }
        }

        &:nth-child(even) {
          >ul {
            >li {
              &:nth-child(1) {
                @media (min-width: 1181px) {
                  order: 1;
                }
              }

              &:nth-child(2) {
                @media (min-width: 1181px) {
                  order: 0;
                }
              }
            }
          }
        }
      }
    }
  }
}

/* Service - Plan */
#service-plan {
  padding: 88px 0;

  @media (max-width: 768px) {
    padding: 48px 0;
  }

  .contents {
    >ul {
      display: flex;
      align-items: center;
      gap: 48px;
      align-self: stretch;

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

      >li {
        >ul {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          gap: 40px;
          flex: 1 0 0;
          align-self: stretch;

          @media (max-width: 768px) {
            gap: 31.38px;
          }

          >li {
            >h3 {
              display: flex;
              padding: 8.545px 17.09px;
              justify-content: center;
              align-items: center;
              gap: 8.545px;
              border-radius: 8.545px;
              border: 2.136px solid var(--color-accent);
              margin-bottom: 18.16px;

              @media (max-width: 768px) {
                padding: 6.704px 13.409px;
                gap: 6.704px;
                border-radius: 6.704px;
                border: 1.676px solid var(--color-accent);
                margin-bottom: 14.25px;
              }

              >svg {
                width: 20px;
                height: 21.814px;
                flex-shrink: 0;

                @media (max-width: 768px) {
                  width: 15.692px;
                  height: 17.116px;
                }
              }

              >span {
                font-size: 1.8rem;
                font-style: normal;
                font-weight: 600;
                line-height: 100%;
                color: var(--color-accent);

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

            >p {
              font-size: 1.8rem;
              font-style: normal;
              font-weight: 600;
              line-height: 100%;

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

              >span {
                color: var(--color-accent);
                font-size: 3rem;
                font-style: normal;
                font-weight: 600;
                line-height: 100%;

                @media (max-width: 768px) {
                  font-size: 2.4rem;
                  line-height: 100%;
                }
              }
            }
          }
        }

        >img {
          max-width: calc(100vw * calc(504 / 1728));

          @media (max-width: 1180px) {
            max-width: 100%;
          }

          @media (min-width: 1728px) {
            max-width: 504px;
          }
        }
      }
    }
  }
}

/* Service - Contact */
.page {
  #contact {
    &::before {
      display: none;
    }
  }
}

/* Privacy Policy Main */
#privacy-main {
  padding: 88px 0;

  @media (max-width: 768px) {
    padding: 32px 0;
  }

  .contents {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
    align-self: stretch;

    @media (max-width: 768px) {
      gap: 32px;
    }

    >dl {
      >dt {
        color: var(--color-accent);
        font-size: calc(100vw * calc(32 / 1728));
        font-style: normal;
        font-weight: 600;
        line-height: 140%;
        padding-left: 24px;
        border-left: 6px solid var(--color-accent);
        margin-bottom: 16px;

        @media (max-width: 768px) {
          font-size: 2.4rem;
          line-height: 180%;
          margin-bottom: 18px;
        }

        @media (max-width: 440px) {
          font-size: calc(100vw * calc(24 / 440));
        }

        @media (min-width: 1728px) {
          font-size: 3.2rem;
        }
      }

      >dd {
        padding-left: 24px;
        font-family: var(--noto);
        font-size: 18px;
        font-style: normal;
        font-weight: 300;
        line-height: 190%;

        @media (max-width: 768px) {
          font-size: 14px;
          line-height: 210%;
        }
      }
    }
  }
}