@charset "utf-8";

/* Responsive */

html {
  font-size: 1px;
}

@media (min-width: 769px) and (max-width: 1460px) {
  html {
    font-size: calc(100vw / 1460);
  }
}

@media (max-width: 768px) {
  html {
    font-size: calc(100vw / 375);
  }
}

@media screen and (min-width: 0px) and (max-width: 768px) {
  .pc {
    display: none !important;
  }
}
@media screen and (min-width: 769px) {
  .sp {
    display: none !important;
  }
}


/* Common styles */

html {
  scroll-behavior: smooth;
  scroll-padding-top: 40rem;

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

body {
  color: #1E1E1E;
  font-size: 16rem;
  font-family: "Noto Sans JP", sans-serif;
  line-height: 1.6;
  letter-spacing: 0.03em;
}

.all-wrapper {
  overflow: hidden;
}

p a {
  text-decoration: underline;
  color: #0D4FE3;
}

.common-inquiry-buttons {
  display: flex;
  justify-content: center;
  gap: 60rem;

  li {
    a {
      display: block;
      position: relative;
      width: 520rem;
      height: 88rem;
      padding-left: 96rem;
      border: 2px solid #1E1E1E;
      border-radius: 12rem;
      color: #fff;
      font-size: 26rem;
      font-weight: bold;
      line-height: calc(88rem - 4px);
      background-color: #13671A;
      transition: background-color 300ms;

      &:hover {
        background-color: #1E1E1E;
      }

      &::before {
        content: "";
        position: absolute;
        top: calc(50% - 28rem);
        left: 20rem;
        width: 56rem;
        height: 56rem;
      }

      &::after {
        content: "";
        position: absolute;
        top: calc(50% - 16rem);
        right: 20rem;
        width: 32rem;
        height: 32rem;
        background: url(../images/top/common/arrow-icon-right.svg) no-repeat 0 0 / contain;
      }
    }

    .request::before {
      background: url(../images/top/common/request-icon.svg) no-repeat 0 0 /contain;
    }

    .online::before {
      background: url(../images/top/common/online-icon.svg) no-repeat 0 0 /contain;
    }
  }

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

    li {
      a {
        display: flex;
        align-items: center;
        width: 314rem;
        height: 66rem;
        margin: 0 auto;
        padding-left: 76rem;
        border-radius: 8rem;
        font-size: 18rem;
        line-height: 24rem;

        &::before {
          top: calc(50% - 25rem);
          left: 8rem;
          width: 50rem;
          height: 50rem;
        }

        &::after {
          top: calc(50% - 12rem);
          right: 8rem;
          width: 24rem;
          height: 24rem;
        }
      }
    }
  }
}

/* Layout */
#top {
  padding-bottom: 152rem;

  > .logo {
    position: absolute;
    top: 22rem;
    left: 20rem;
    width: 10.4vw;
    z-index: 2;

    img {
      width: 100%;
      height: auto;
    }
  }

  main {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
    background-color: #EDFFD6;

    .main-visual {
      width: 100%;
      aspect-ratio: 1920 / 800;
      background: url(../images/top/main-visual/bg.png) no-repeat center / cover;

      h1 {
        img {
          width: 100%;
        }
      }
    }

    .contents {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      width: calc(100% - 80px);
      max-width: 1600rem;
      min-width: 1420rem;
      margin: 0 40px;
      padding: 164rem 0 120rem;
      background-color: #fff;

      .inquiry-buttons {
        position: absolute;
        top: -44rem;
        left: 0;
        width: 100%;

        .common-inquiry-buttons {
          gap: 24rem;
        }
      }

      .introduction {
        position: relative;
        width: 1380rem;
        margin: 120rem 0 0;
        padding-bottom: 64rem;
        border-radius: 48rem;
        background-color: #F5F5E5;

        hgroup {
          position: relative;
          width: 800rem;
          margin: -120rem auto 0;
          padding: 32rem 80rem 40rem;
          border: 1px solid #1E1E1E;
          border-radius: 16rem;
          background-color: #fff;

          h2 {
            font-size: 48rem;
            font-weight: bold;
            letter-spacing: 0.02em;
          }

          p {
            margin-top: 24rem;
            text-align: justify;
            font-size: 22rem;
          }
        }

        nav {
          position: relative;
          margin-top: 58rem;

          &::before {
            content: "";
            position: absolute;
            top: -174rem;
            left: calc(50% - 480rem);
            width: 960rem;
            height: 205rem;
            background: url(../images/top/introduction-image01.svg) no-repeat center / contain;
          }

          ul {
            display: flex;
            justify-content: center;
            gap: 16rem;
            position: relative;

            li {
              a {
                display: block;
                width: 356rem;
                height: 88rem;
                padding-left: 23rem;
                border: 1px solid #1E1E1E;
                border-radius: 8rem;
                color: #fff;
                font-size: 22rem;
                font-weight: bold;
                line-height: calc(88rem - 2px);
                background: #4E9B51 url(../images/top/common/arrow-icon-bottom.svg) no-repeat right 20rem center / 32rem;
                transition: background-color 300ms;

                &:hover {
                  background-color: #1E1E1E;
                }
              }
            }
          }
        }
      }

      .common-section {
        width: 1100rem;
        margin-top: 120rem;

        > hgroup {
          display: flex;
          flex-direction: column;
          gap: 16rem;
          padding-bottom: 38px;
          border-bottom: 2px solid #1E1E1E;

          .en {
            color: #939393;
            font-family: Montserrat, sans-serif;
            font-size: 32rem;
            font-weight: bold;
            line-height: 40rem;
            letter-spacing: 0.02em;
          }

          h2 {
            font-size: 48rem;
            font-weight: bold;
          }

          p:last-child {
            font-size: 22rem;
          }
        }
      }

      .join {
        > hgroup {
          height: 240rem;
          padding-top: 32rem;
          background: url(../images/top/join-image01.svg) no-repeat right top / auto 100%;
        }

        > ol {
          display: flex;
          justify-content: space-between;
          margin-top: 72rem;

          > li {
            position: relative;
            width: 540rem;
            height: 587rem;
            border: 1px solid #1E1E1E;
            border-radius: 24rem;
            background-color: #fff;

            .n {
              position: absolute;
              top: -32rem;
              left: calc(50% - 32rem);
              width: 64rem;
              height: 64rem;
              border: 2rem solid #1E1E1E;
              border-radius: 50%;
              text-align: center;
              font-family: Montserrat, sans-serif;
              font-size: 40rem;
              font-weight: bold;
              line-height: 60rem;
              background-color: #FFF507;
            }
          }

          .cond1 {
            padding: 32rem 74rem 0;

            ul {
              display: flex;
              flex-direction: column;

              li {
                padding: 32rem 0 32rem 72rem;
                border-bottom: 1px solid #939393;
                font-size: 36rem;
                font-weight: 600;
                line-height: 44rem;
                background: url(../images/top/join-check-icon.svg) no-repeat 0 center / 48rem;

                span {
                  font-size: 32rem;
                }
              }
            }

            .notice {
              position: relative;
              margin-top: 20rem;
              padding-left: 24rem;
              font-size: 18rem;

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

          .cond2 {
            padding: 64rem 42rem 0;

            > p:not(.notice) {
              text-align: center;
              font-size: 26rem;
              font-weight: 600;
              line-height: 36.4rem;
            }

            ul {
              display: flex;
              flex-direction: column;
              gap: 8rem;
              margin-top: 16rem;

              li {
                height: 136rem;
                padding: 16rem 26rem 0;
                border-radius: 8rem;
                background-color: #EDFFD6;

                p:nth-child(1) {
                  padding-bottom: 6rem;
                  border-bottom: 1px solid #1E1E1E;
                  text-align: center;
                  font-size: 18rem;
                  line-height: 25.2rem;
                }

                p:nth-child(2) {
                  padding-top: 3rem;
                  text-align: center;
                  font-size: 24rem;
                  font-weight: bold;
                  line-height: 40rem;

                  strong {
                    display: inline-block;
                    vertical-align: -2rem;
                    font-size: 40rem;
                  }
                }
              }
            }

            .notice {
              position: relative;
              margin-top: 12rem;
              padding-left: 24rem;
              font-size: 18rem;

              + .notice {
                margin-top: 0;
              }

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

      .membership {
        width: 100%;
        margin-top: 56rem;

        .inner {
          position: relative;
          width: calc(50% + 550rem);
          margin-left: calc(50% - 550rem);
          padding: 46rem 40rem 40rem;
          border-radius: 24rem 0 0 24rem;
          background-color: #F5F5E5;

          &::before {
            content: "";
            position: absolute;
            top: -17rem;
            left: 572rem;
            width: 528rem;
            height: 278rem;
            background: url(../images/top/membership-image01.svg) 0 0 / contain;
          }

          hgroup {
            padding-left: 66rem;
            background: url(../images/top/membership-icon.svg) no-repeat 0 6rem / 54rem auto;

            .en {
              font-family: Montserrat, sans-serif;
              font-size: 16rem;
              font-weight: bold;
            }

            h2 {
              font-size: 30rem;
              font-weight: 600;
            }
          }

          > p {
            width: 484rem;
            margin-top: 16rem;
            padding-left: 66rem;
            font-size: 22rem;
          }
        }
      }

      .features {
        > hgroup {
          height: 196rem;
          padding-top: 38rem;
          background: url(../images/top/features-image01.svg) no-repeat right 0 / auto 100%;
        }

        .anchors {
          display: flex;
          justify-content: center;
          flex-wrap: wrap;
          gap: 16rem;
          margin-top: 40rem;

          li {
            a {
              display: flex;
              align-items: center;
              gap: 20rem;
              width: 356rem;
              height: 100rem;
              padding: 0 16rem;
              border: 1px solid #1E1E1E;
              border-radius: 8rem;
              color: #fff;
              font-size: 22rem;
              font-weight: bold;
              line-height: 30.8rem;
              background: #4E9B51 url(../images/top/common/arrow-icon-bottom.svg) no-repeat right 14rem center / 32rem;
              transition: background-color 300ms;

              &:hover {
                background-color: #1E1E1E;
              }

              img {
                width: 60rem;
                height: auto;
              }
            }
          }

          + section {
            margin-top: 80rem;
            padding-top: 0;
          }
        }

        section {
          min-height: 336rem;
          padding: 48rem 340rem 48rem 0;
          border-bottom: 1px solid #939393;
          background-position: right 48rem;
          background-size: 300rem 240rem;
          background-repeat: no-repeat;

          h3 {
            display: flex;
            gap: 40rem;

            img {
              width: 88rem;
              height: 84rem;
            }

            span {
              position: relative;
              top: -8rem;
              font-size: 32rem;
              font-weight: bold;
            }
          }

          p {
            margin-top: 20rem;
            padding-left: 128rem;
            font-size: 20rem;

            strong {
              color: #D8430C;
            }

            a {
              font-weight: bold;
            }
          }

          .notice {
            font-size: 16rem;
            line-height: 24rem;
          }

          ol {
            counter-reset: ol-number 0;
            display: flex;
            flex-direction: column;
            gap: 16rem;
            margin-top: 16rem;
            padding-left: 128rem;

            li {
              font-size: 20rem;
              font-weight: bold;

              &::before {
                counter-increment: ol-number 1;
                content: counter(ol-number);
                display: inline-block;
                width: 32rem;
                height: 32rem;
                margin-right: 8rem;
                border-radius: 50%;
                text-align: center;
                vertical-align: top;
                color: #fff;
                font-family: Montserrat, sans-serif;
                font-size: 20rem;
                font-weight: bold;
                line-height: 32rem;
                background-color: #4E9B51;
              }
            }
          }
        }

        .feature01 {background-image: url(../images/top/features01-image.svg);}
        .feature02 {background-image: url(../images/top/features02-image.svg);}
        .feature03 {background-image: url(../images/top/features03-image.svg);}
        .feature04 {background-image: url(../images/top/features04-image.svg);}
        .feature05 {background-image: url(../images/top/features05-image.svg);}
        .feature06 {background-image: url(../images/top/features06-image.svg);}
      }

      .voices {
        position: relative;
        width: 1380rem;
        margin-top: 64rem;
        padding-bottom: 80rem;

        &::after {
          content: "";
          position: absolute;
          left: 0;
          bottom: 0;
          width: 100%;
          height: 444rem;
          border-radius: 60rem;
          background-color: #F5F5E5;
          z-index: 0;
        }

        hgroup {
          position: relative;
          text-align: center;

          .en {
            font-family: Montserrat, sans-serif;
            font-size: 48rem;
            font-weight: 100;
            line-height: 1em;
          }

          h2 {
            margin-top: 5rem;
            font-size: 30rem;
            font-weight: 600;
          }
        }

        ul {
          display: flex;
          justify-content: center;
          gap: 20rem;
          position: relative;
          margin-top: 32rem;
          padding-top: 60rem;
          z-index: 1;

          li {
            position: relative;
            width: 354rem;
            padding: 76rem 32rem 98rem;
            border: 4px solid #C9E0C9;
            border-radius: 16rem;
            background-color: #fff;

            .image {
              position: absolute;
              top: -60rem;
              left: calc(50% - 60rem);
              width: 120rem;

              img {
                width: 100%;
                height: auto;
              }
            }

            .title {
              font-size: 26rem;
              font-weight: bold;
            }

            .meta {
              margin-top: 8rem;
              font-size: 18rem;
            }

            .text {
              margin-top: 16rem;
              padding-top: 16rem;
              border-top: 1px solid #939393;
              font-size: 18rem;
            }

            .button {
              position: absolute;
              left: calc(50% - 72rem);
              bottom: 32rem;
              display: block;
              padding-left: 15rem;
              width: 155rem;
              height: 42rem;
              border-radius: 4rem;
              border: 1px solid #1E1E1E;
              color: #fff;
              font-weight: 600;
              line-height: calc(42rem - 2px);
              background: #4E9B51 url(../images/top/common/exlink-icon.svg) no-repeat right 15rem center / 24rem;
              transition: background-color 300ms;

              &:hover {
                background-color: #1E1E1E;
              }
            }
          }
        }
      }

      .receiving {
        min-height: 318rem;

        > hgroup {
          background: url(../images/top/receiving-image01.svg) no-repeat right 0 / 450rem 318rem;

          p {
            width: 640rem;
          }
        }

        .simulation {
          margin-top: 40rem;
          padding: 58rem 0 40rem 144rem;
          border-radius: 24rem;
          background-color: #F5F5E5;
          background-repeat: no-repeat, no-repeat;
          background-position: left 40rem top 48rem, right 40rem bottom 40rem;
          background-image: url(../images/top/simulation-icon.svg), url(../images/top/simulation-image01.svg);
          background-size: 80rem 80rem, 340rem 225rem;

          h3 {
            font-size: 32rem;
            font-weight: 600;
            line-height: 1em;
          }

          p {
            width: 540rem;
            margin-top: 30rem;
            font-size: 22rem;
          }

          .button {
            margin-top: 24rem;

            a {
              display: block;
              width: 300rem;
              height: 58rem;
              padding-left: 23rem;
              border: 1px solid #1E1E1E;
              border-radius: 8rem;
              color: #fff;
              font-size: 18rem;
              font-weight: bold;
              line-height: calc(58rem - 2px);
              background: #4E9B51 url(../images/top/common/exlink-icon.svg) no-repeat right 23rem center / 24rem;
              transition: background-color 300ms;

              &:hover {
                background-color: #1E1E1E;
              }
            }
          }
        }
      }

      .faq {
        position: relative;
        width: 1100rem;
        margin-top: 64rem;
        padding: 56rem 150rem 150rem;
        border: 5rem solid #DDDDDD;
        border-radius: 48rem;

        &::after {
          content: "";
          position: absolute;
          left: calc(50% - 260rem);
          bottom: -5rem;
          width: 520rem;
          height: 120rem;
          background: url(../images/top/faq-image01.svg) no-repeat 0 0 / contain;
        }

        hgroup {
          text-align: center;

          .en {
            font-family: Montserrat, sans-serif;
            font-size: 64rem;
            font-weight: 100;
            line-height: 1em;
          }

          h2 {
            margin-top: 5rem;
            font-size: 30rem;
            font-weight: 600;
          }
        }

        dl {
          display: flex;
          flex-direction: column;
          gap: 40rem;
          margin-top: 40rem;

          div {
            dt {
              position: relative;
              padding-bottom: 10rem;
              border-bottom: 1px solid #1E1E1E;

              span:first-child {
                position: absolute;
                top: 0;
                left: 0;
                color: #4E9B51;
                font-family: Montserrat, sans-serif;
                font-size: 26rem;
                font-weight: bold;
                line-height: 40rem;
              }

              button {
                position: relative;
                width: 100%;
                height: 40rem;
                padding-left: 57rem;
                font-size: 24rem;
                font-weight: bold;
                background-color: transparent;

                i {
                  position: absolute;
                  top: 0;
                  right: 0;
                  width: 40rem;
                  height: 40rem;
                  border-radius: 50%;
                  background-color: #13671A;

                  &::before,
                  &::after {
                    content: "";
                    position: absolute;
                    top: calc(50% - 1px);
                    left: calc(50% - 10rem);
                    width: 20rem;
                    height: 2px;
                    background-color: #fff;
                    transition: transform 300ms;
                  }

                  &::after {
                    transform: rotate(90deg);
                  }
                }
              }
            }

            &:has([aria-hidden="false"]) dt button i::after {
              transform: rotate(0deg);
            }

            dd {
              display: grid;
              grid-template-rows: 0fr;
              position: relative;
              transition: grid-template-rows 300ms, padding 300ms;

              &[aria-hidden="false"] {
                grid-template-rows: 1fr;
                padding-top: 16rem;
              }

              .inner {
                position: relative;
                padding-left: 57rem;
                overflow: hidden;

                span:first-child {
                  position: absolute;
                  top: 0;
                  left: 0;
                  color: #D8430C;
                  font-family: Montserrat, sans-serif;
                  font-size: 26rem;
                  font-weight: bold;
                  line-height: 36rem;
                }

                p {
                  font-size: 20rem;
                  line-height: 32rem;

                  + p {
                    margin-top: 16rem;
                  }

                  a {
                    color: #173CA0;
                    font-weight: bold;
                  }
                }
              }
            }
          }
        }

        .others {
          margin-top: 40rem;

          p {
            width: fit-content;
            margin: 0 auto;
            padding: 15rem 25rem;
            border: 1px solid #939393;
            border-radius: 8rem;
            text-align: center;
            font-size: 20rem;
            line-height: 32rem;
            background-color: #F7F7F5;

            &::before {
              content: "※";
            }

            a {
              font-weight: bold;
            }
          }
        }
      }

      .articles {
        position: relative;
        height: 460rem;
        width: 100%;
        margin-top: 120rem;
        padding-top: 82rem;
        display: none;

        &::before {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: calc(50% + 550rem);
          height: 395rem;
          border-radius: 0 80rem 0 0;
          background-color: #F5F5E5;
          z-index: 0;
        }

        hgroup {
          position: relative;
          width: 1100rem;
          margin: 0 auto;
          z-index: 1;

          .en {
            font-family: Montserrat, sans-serif;
            font-size: 64rem;
            font-weight: 100;
            line-height: 1em;
          }

          h2 {
            font-size: 30rem;
            font-weight: 600;
          }
        }

        .control {
          display: flex;
          gap: 10rem;
          position: relative;
          width: 1100rem;
          margin: 48rem auto 0;
          z-index: 1;

          button {
            width: 48rem;
            height: 48rem;
            white-space: nowrap;
            text-indent: 100%;
            overflow: hidden;
            cursor: pointer;
          }

          .prev-button {
            background: url(../images/top/articles-prev-button.svg) no-repeat 0 0 / contain;
          }

          .next-button {
            background: url(../images/top/articles-next-button.svg) no-repeat 0 0 / contain;
          }

          p {
            padding-left: 14rem;
            font-size: 18rem;
            line-height: 48rem;
          }
        }

        .splide__track {
          position: absolute;
          width: calc(50vw + 264rem);
          height: 377rem;
          top: 84rem;
          left: calc(50% - 264rem);
          overflow: hidden;

          ul {
            li {
              width: 320rem;
              height: 100%;
              padding: 32rem 32rem 0;
              border: 1px solid #707070;
              border-radius: 8rem;
              background-color: #fff;

              .image {
                img {
                  width: 100%;
                  height: auto;
                }
              }

              p {
                height: 58rem;
                margin-top: 16rem;
                font-size: 18rem;
                font-weight: 500;
              }

              a {
                display: block;
                margin: 24rem auto 0;
                padding-left: 15rem;
                width: 155rem;
                height: 42rem;
                border-radius: 4rem;
                border: 1px solid #1E1E1E;
                color: #fff;
                font-weight: 600;
                line-height: calc(42rem - 2px);
                background: #4E9B51 url(../images/top/common/exlink-icon.svg) no-repeat right 15rem center / 24rem;
                transition: background-color 300ms;

                &:hover {
                  background-color: #1E1E1E;
                }
              }
            }
          }
        }
      }
    }
  }

  .top-footer {
    .inquiry {
      display: flex;

      a {
        position: relative;
        width: 50%;
        height: 200rem;
        background-color: #13671A;
        transition: background-color 300ms;

        &:hover {
          background-color: #013E06;
        }

        &.request {
          &::before {
            content: "";
            position: absolute;
            right: 618rem;
            bottom: 0;
            width: 224rem;
            height: 188rem;
            background: url(../images/top/footer-request-image.svg) no-repeat 0 0 / contain;
          }
        }

        &.online {
          border-left: 1px solid #fff;

          &::before {
            content: "";
            position: absolute;
            left: 693rem;
            bottom: 0;
            width: 166rem;
            height: 188rem;
            background: url(../images/top/footer-online-image.svg) no-repeat 0 0 / contain;
          }
        }

        .texts {
          position: absolute;
          top: 44rem;
          width: 494rem;
          height: 113rem;
          padding-left: 104rem;
          color: #fff;

          &::after {
            content: "";
            position: absolute;
            right: 0;
            bottom: 0;
            width: 32rem;
            height: 32rem;
            background: url(../images/top/common/arrow-icon-right.svg) no-repeat 0 0 / contain;
          }

          p:nth-child(1) {
            font-size: 30rem;
            font-weight: 600;
            line-height: 40rem;
          }

          p:nth-child(2) {
            margin-top: 8rem;
            font-size: 20rem;
          }
        }

        &.request .texts {
          right: 55rem;
          background: url(../images/top/common/request-icon.svg) no-repeat 0 0 / 80rem 80rem;
        }

        &.online .texts {
          left: 55rem;
          background: url(../images/top/common/online-icon.svg) no-repeat 0 0 / 80rem 80rem;
        }
      }
    }

    .bottom {
      display: flex;
      gap: 40rem;
      padding: 32rem 40rem;
      background: #4E9B51 url(../images/top/footern-image.svg) no-repeat right bottom / 530rem 146rem;

      .logo {
        width: 195rem;

        img {
          width: 100%;
          height: auto;
        }
      }

      .texts {
        .name {
          color: #fff;
          font-size: 24rem;
          font-weight: bold;
        }

        ul {
          display: flex;
          flex-direction: column;
          gap: 12rem;
          margin-top: 10rem;

          li {
            padding-left: 28rem;
            font-size: 16rem;
            font-weight: 500;
            line-height: 20rem;
            background: url(../images/top/common/arrow-icon-right.svg) no-repeat 0 0 / 20rem;

            a {
              text-decoration: underline;
              color: #fff;

              &:hover {
                text-decoration: none;
              }
            }
          }
        }

        .copyright {
          margin-top: 24rem;
          color: #fff;
          font-size: 16rem;
          font-weight: 500;
        }
      }
    }
  }

  .fixed-footer {
    position: fixed;
    left: 0;
    bottom: -160rem;
    width: 100%;
    height: 152rem;
    padding: 32rem;
    box-shadow: 0px -5px 5px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    z-index: 2;
    transition: bottom 300ms;

    &.show {
      bottom: 0;
    }
  }
}
@media (max-width: 1650px) {
#top {
  & .top-footer {
    & .inquiry {
      & a {
        &.request {
          &::before {
            left: 0;
            bottom: 0;
            width: 198rem;
            height: 166rem;
          }
        }
      }
    }
  }
}
#top {
  & .top-footer {
    & .inquiry {
      & a {
        &.online {
          &::before {
            left: auto;
            right: 0;
            bottom: 0;
            width: 146rem;
            height: 166rem;
          }
        }
      }
    }
  }
}  
}
@media (max-width: 768px) {
  #top {
    padding-bottom: 68rem;

    > .logo {
      top: 10rem;
      left: 10rem;
      width: 70rem;
    }

    main {
      .main-visual {
        aspect-ratio: 375 /666;
        background: url(../images/top/main-visual/bg-sp.png) no-repeat center / cover;
      }

      .contents {
        width: calc(100% - 30rem);
        min-width: 0;
        margin: 0 15rem;
        padding: 98rem 0 90rem;

        .inquiry-buttons {
          top: -106rem;

          .common-inquiry-buttons {
            gap: 8rem;
          }
        }

        .introduction {
          width: calc(100% + 30rem);
          margin: 160rem -15rem 0;
          padding-bottom: 40rem;
          border-radius: 0;

          hgroup {
            width: calc(100% - 50rem);
            margin: -160rem auto 0;
            padding: 24rem 16rem 48rem;

            h2 {
              text-align: center;
              font-size: 26rem;
              line-height: 36rem;
            }

            p {
              margin-top: 8rem;
              letter-spacing: 0;
              font-size: 18rem;
            }
          }

          nav {
            margin-top: 76rem;

            &::before {
              top: -116rem;
              left: calc(50% - 121rem);
              width: 242rem;
              height: 116rem;
              background-image: url(../images/top/introduction-image01-sp.svg);
            }

            ul {
              gap: 8rem;
              flex-direction: column;
              margin: 0 27.5rem;

              li {
                a {
                  width: 100%;
                  height: 80rem;
                  padding-left: 15rem;
                  font-size: 20rem;
                  line-height: calc(80rem - 2px);
                  background-position: right 15rem center;
                }
              }
            }
          }
        }

        .common-section {
          width: 100%;
          margin-top: 64rem;
          padding: 0 20rem;

          > hgroup {
            gap: 8rem;
            padding-bottom: 0;

            .en {
              font-size: 26rem;
            }

            h2 {
              margin-top: 4rem;
              font-size: 32rem;
              line-height: 40rem;
            }

            p:last-child {
              font-size: 18rem;
            }
          }
        }

        .join {
          > hgroup {
            height: auto;
            padding: 0 0 142rem;
            background-size: 240rem 126rem;
            background-position: center bottom;
          }

          > ol {
            flex-direction: column;
            gap: 36rem;
            margin-top: 44rem;

            > li {
              width: 100%;
              height: auto;

              .n {
                top: -20rem;
                left: calc(50% - 20rem);
                width: 40rem;
                height: 40rem;
                font-size: 25rem;
                line-height: 38rem;
              }
            }

            .cond1 {
              padding: 24rem 25rem;

              ul {
                gap: 16rem;

                li {
                  padding: 0 0 0 34rem;
                  border: none;
                  font-size: 18rem;
                  line-height: 26rem;
                  background-size: 26rem;

                  span {
                    font-size: 14rem;
                  }
                }
              }

              .notice {
                margin-top: 16rem;
                padding-left: 18rem;
                font-size: 14rem;
              }
            }

            .cond2 {
              padding: 24rem 25rem;

              > p:not(.notice) {
                font-size: 18rem;
                line-height: 26rem;
                white-space: nowrap;
              }

              ul {
                li {
                  height: auto;
                  padding: 12rem 20rem;

                  p:nth-child(1) {
                    padding-bottom: 12rem;
                    text-align: left;
                    font-size: 16rem;
                    line-height: 22.4rem;
                  }

                  p:nth-child(2) {
                    padding-top: 5rem;
                    font-size: 20rem;
                    line-height: 36rem;

                    strong {
                      font-size: 36rem;
                    }
                  }
                }
              }

              .notice {
                margin-top: 16rem;
                padding-left: 18rem;
                font-size: 14rem;
                line-height: 19.6rem;
              }
            }
          }
        }

        .membership {
          margin-top: 24rem;
          padding-left: 20rem;

          .inner {
            width: calc(100% + 35rem);
            margin-left: 0;
            padding: 24rem 35rem 256rem 25rem;
            border-radius: 24rem 0 0 24rem;

            &::before {
              top: auto;
              left: calc((100% - 35rem) / 2 - 140rem);
              bottom: 24rem;
              width: 280rem;
              height: 224rem;
              background: url(../images/top/membership-image01-sp.svg) no-repeat 0 0 / contain;
            }

            hgroup {
              .en {
              }

              h2 {
                font-size: 24rem;
                line-height: 33.6rem;
              }
            }

            > p {
              width: auto;
              margin-top: 8rem;
              padding-left: 0;
              font-size: 18rem;
            }
          }
        }

        .features {
          > hgroup {
            height: auto;
            padding: 0 0 148rem;
            background-position: left bottom;
            background-size: 100% auto;
          }

          .anchors {
            gap: 8rem;
            margin-top: 24rem;

            li {
              width: 100%;

              a {
                gap: 16rem;
                width: 100%;
                height: 66rem;
                font-size: 18rem;
                line-height: 24rem;

                img {
                  width: 54rem;
                }
              }
            }

            + section {
              margin-top: 0;
              padding-top: 40rem;
            }
          }

          section {
            min-height: 0;
            padding: 40rem 0 308rem;
            background-position: right bottom 40rem;
            background-size: 100% auto;

            h3 {
              flex-direction: column;
              gap: 16rem;

              img {
                display: block;
                width: 64rem;
                height: auto;
                margin: 0 auto;
              }

              span {
                top: 0;
                font-size: 24rem;
                line-height: 32rem;

              }
            }

            p {
              margin-top: 16rem;
              padding-left: 0;
              font-size: 18rem;
            }

            .notice {
            }

            ol {
              gap: 8rem;
              padding-left: 0;

              li {
                font-size: 18rem;
                line-height: 30rem;

                &::before {
                  width: 30rem;
                  height: 30rem;
                  font-size: 17rem;
                  line-height: 30rem;
                }
              }
            }
          }
        }

        .voices {
          position: relative;
          width: 100%;
          margin-top: 40rem;
          padding-bottom: 40rem;

          &::after {
            left: -15rem;
            width: calc(100% + 30rem);
            height: calc(100% - 384rem);
            border-radius: 0;
          }

          hgroup {
            .en {
              font-size: 36rem;
              line-height: 32rem;
            }

            h2 {
              margin-top: 10rem;
              font-size: 28rem;
              line-height: 32rem;
            }
          }

          ul {
            flex-direction: column;
            align-items: center;
            gap: 82rem;
            padding-top: 50rem;

            li {
              width: 305rem;
              padding: 64rem 24rem 86rem;

              .image {
                top: -50rem;
                left: calc(50% - 50rem);
                width: 100rem;
              }

              .title {
                font-size: 20rem;
              }

              .meta {
                margin-top: 4rem;
                font-size: 14rem;
              }

              .text {
                font-size: 16rem;
              }

              .button {
                bottom: 28rem;
              }
            }
          }
        }

        .receiving {
          min-height: 0;

          > hgroup {
            padding-bottom: 158rem;
            background-position: center bottom;
            background-size: 212rem auto;

            p {
              width: auto;
            }
          }

          .simulation {
            margin-top: 24rem;
            padding: 24rem 25rem 148rem;
            background-position: left 25rem top 24rem, center bottom;
            background-image: url(../images/top/simulation-icon.svg), url(../images/top/simulation-image01.svg);
            background-size: 64rem 64rem, 200rem auto;

            h3 {
              padding-left: 72rem;
              font-size: 22rem;
              line-height: 30rem;
            }

            p {
              width: auto;
              margin-top: 16rem;
              font-size: 18rem;
            }

            .button {
              margin-top: 16rem;

              a {
                width: 100%;
                height: 58rem;
                padding: calc(7rem - 1px) 16rem;
                font-size: 16rem;
                line-height: 22rem;
                background-position: right 15rem center;
              }
            }
          }
        }

        .faq {
          width: auto;
          margin: 40rem 20rem 0;
          padding: 32rem 15rem 90rem;
          border: 2rem solid #DDDDDD;
          border-radius: 16rem;

          &::after {
            left: calc(50% - 130rem);
            bottom: -8rem;
            width: 260rem;
            height: 67rem;
          }

          hgroup {
            .en {
              font-size: 36rem;
              line-height: 32rem;
            }

            h2 {
              margin-top: 10rem;
              font-size: 28rem;
              line-height: 32rem;
            }
          }

          dl {
            gap: 32rem;
            margin-top: 32rem;

            div {
              dt {
                padding-bottom: 8rem;

                span:first-child {
                  font-size: 22rem;
                  line-height: 26rem;
                }

                button {
                  height: auto;
                  padding: 0 40rem 0 48rem;
                  font-size: 20rem;
                  line-height: 26rem;

                  i {
                    top: calc(50% - 16rem);
                    width: 32rem;
                    height: 32rem;

                    &::before,
                    &::after {
                      left: calc(50% - 8rem);
                      width: 16rem;
                    }
                  }
                }
              }

              dd {
                &[aria-hidden="false"] {
                  padding-top: 16rem;
                }

                .inner {
                  padding-left: 48rem;

                  span:first-child {
                    font-size: 22rem;
                    line-height: 26rem;
                  }

                  p {
                    font-size: 16rem;
                    line-height: 25.6rem;

                    + p {
                      margin-top: 8rem;
                    }
                  }
                }
              }
            }
          }

          .others {
            margin-top: 32rem;

            p {
              position: relative;
              width: 254rem;
              margin: 0 auto;
              padding: 15rem 15rem 15rem 35rem;
              text-align: left;
              font-size: 16rem;
              line-height: 22.4rem;

              &::before {
                position: absolute;
                top: 15rem;
                left: 15rem;
              }
            }
          }
        }

        .articles {
          position: relative;
          width: 100%;
          height: 517rem;
          margin-top: 40rem;
          padding: 32rem 20rem;

          &::before {
            left: -15rem;
            width: 100vw;
            height: 493rem;
            border-radius: 0 64rem 0 0;
          }

          hgroup {
            width: auto;
            margin: 0;

            .en {
              font-size: 36rem;
              line-height: 32rem;
            }

            h2 {
              margin-top: 10rem;
              font-size: 28rem;
              line-height: 32rem;
            }
          }

          .control {
            position: absolute;
            left: 0;
            bottom: 0;
            justify-content: center;
            gap: 24rem;
            width: 100%;
            margin: 0;

            button {
            }

            .prev-button {
              order: 1;
            }

            .next-button {
              order: 3;
            }

            p {
              order: 2;
              padding-left: 0;
            }
          }

          .splide__track {
            width: 100vw;
            height: 305rem;
            top: 140rem;
            left: -15rem;

            ul {
              li {
                width: 255rem;
                padding: 15rem;

                p {
                  height: 48rem;
                  margin-top: 16rem;
                  font-size: 15rem;
                  line-height: 24rem;
                }

                a {
                  margin: 16rem auto 0;
                  padding-left: 15rem;
                  width: 155rem;
                  height: 42rem;
                }
              }
            }
          }
        }
      }
    }

    .top-footer {
      .inquiry {
        flex-direction: column;

        a {
          width: 100%;
          height: auto;
          padding: 20rem;

          &.request {
            &::before {
              display: none;
            }
          }

          &.online {
            border-top: 2px solid #fff;
            border-left: none;

            &::before {
              display: none;
            }
          }

          .texts {
            position: relative;
            top: auto;
            height: auto;
            width: auto;
            padding: 0 44rem 0 76rem;

            p:nth-child(1) {
              font-size: 26rem;
              line-height: 32rem;
            }

            p:nth-child(2) {
              margin-top: 4rem;
              font-size: 18rem;
              line-height: 24rem;
            }
          }

          &.request .texts {
            right: auto;
            background-size: 64rem;
          }

          &.online .texts {
            left: auto;
            background-size: 64rem;
          }
        }
      }

      .bottom {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16rem;
        padding: 40rem 40rem 143rem;
        background-size: 100% auto;

        .logo {
          width: 130rem;
        }

        .texts {
          .name {
            text-align: center;
            font-size: 20rem;
            line-height: 32rem;
          }

          ul {
            gap: 16rem;
            margin-top: 24rem;

            li {
              font-size: 16rem;
              line-height: 22.4rem;
              background-position: 0 2rem;
            }
          }

          .copyright {
            margin-top: 24rem;
            text-align: center;
            font-size: 12rem;
            line-height: 16rem;
          }
        }
      }
    }

    .fixed-footer {
      bottom: -68rem;
      height: 68rem;
      padding: 0;
      box-shadow: none;

      ul.sp {
        display: flex;
        gap: 2rem;
        height: 100%;
        padding-top: 2rem;
        background-color: #1E1E1E;

        li {
          width: 50%;
          height: 100%;

          a {
            display: flex;
            align-items: center;
            position: relative;
            width: 100%;
            height: 100%;
            padding: 0 10rem;
            color: #1E1E1E;
            font-size: 16rem;
            font-weight: bold;
            line-height: 20rem;
            background: #13671A;
            color: #FFFFFF;

            &::before {
              content: "";
              position: absolute;
              top: calc(50% - 12rem);
              right: 10rem;
              width: 24rem;
              height: 24rem;
              background: url(../images/top/common/arrow-icon-right.svg) no-repeat 0 0 / contain;
            }
          }
        }
      }
    }
  }
}