:root {
  --color-body: #434E54;
}

.my-main {
  font-size: 1.5rem;
}

.my-footer-top {
  display: none;
}

#hero {
  background: url(../img/hero-bg01.jpg?v1) center bottom / cover no-repeat;
  height: 47.9375rem;
  .my-cols {
    justify-content: center;
    align-items: flex-end;
    gap: 2.5rem;
    position: absolute;
    inset: auto 0 0.5rem;
    > li {
      text-align: center;
    }
  }
}

#sec01 {
  padding-block: 8.6875rem 10.875rem;
  background: url(../img/sec01-bg01.svg) center top / contain no-repeat,
    url(../img/sec01-bg03.svg) center bottom / contain no-repeat,
    url(../img/sec01-bg02.svg) center bottom 1.625rem / contain no-repeat;
  .-div01 {
    padding-left: 1.5625rem;
    h2 {
      font-family: var(--font-kaku);
      font-size: 2rem;
      font-weight: 600;
      line-height: 1.8;
      letter-spacing: 20%;
      margin-bottom: 2.1875rem;
    }
    .my-rows {
      gap: 0.5rem;
      margin-bottom: 2.1875rem;
      li {
        padding-left: 4.75rem;
        background: url(../img/icon-check01.svg) 1.875rem center / 1.625rem no-repeat;
      }
    }
    .-txt01 {
      text-align: center;
      height: 4.0625rem;
      margin-bottom: 1rem;
      background: url(../img/sec01-bg04.png) center bottom / contain no-repeat;
    }
  }
  .-div02 {
    ul {
      position: relative;
      list-style: none;
      height: 26.25rem;
      padding: 0;
      margin: 0;
      li {
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 15.625rem;
        height: 15.625rem;
        border-radius: 50%;
        background: #AAB9C9;
        color: #fff;
        text-align: center;
        inset: 0 auto auto 14.625rem;
        &::before {
          content: '';
          position: absolute;
          inset: 0;
          width: 100%;
          height: 100%;
          border: max(0.0625rem, 1px) solid #434E54;
          border-radius: 50%;
          margin: -0.3125rem auto auto -0.4375rem;
        }
        &:nth-child(2) {
          background: #C9ACAA;
          inset: 0 auto auto 44.5625rem;
          &::before {
            margin: 0.4375rem auto auto -0.5625rem;
          }
        }
        &:nth-child(3) {
          background: #9FCBAF;
          inset: 8.5rem auto auto 29.8125rem;
          &::before {
            margin: -0.25rem auto auto -0.6875rem;
          }
        }
      }
    }
    .-txt01 {
      font-size: 2rem;
      text-align: center;
      strong {
        display: block;
        font-family: var(--font-kaku);
        font-size: 2.5rem;
        letter-spacing: 20%;
        color: #4FB1EF;
      }
    }
  }
  .-img01 {
    position: absolute;
    inset: 8.3125rem 11.6875rem auto auto;
    width: 17.9375rem;
  }
  .-img02 {
    display: none;
  }
  .-img03 {
    position: absolute;
    inset: 56.75rem 12.0625rem auto auto;
    width: 15.1875rem;
  }
  .-img04 {
    position: absolute;
    inset: 39.1875rem auto auto 11.75rem;
    width: 21.4375rem;
  }
}

#sec02 {
  padding-block: 6.25rem 12.5rem;
  background: url(../img/sec02-bg01.png) center / cover no-repeat;
  h2 {
    font-family: var(--font-kaku);
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.8;
    letter-spacing: 20%;
    text-align: center;
    margin-bottom: 5rem;
    small {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 5.25rem;
      background: url(../img/sec02-bg02.svg) center / contain no-repeat;
      font-family: var(--font-maru);
      font-size: 1.5rem;
      font-weight: 500;
      padding-bottom: 0.2em;
    }
    strong {
      font-weight: inherit;
      color: #FF824C;
    }
    .-l {
      font-size: 2.5rem;
    }
  }
  .my-rows {
    gap: 6.25rem;
    li {
      .-point {
        width: auto;
        height: 3.1875rem;
        margin-bottom: 0.625rem;
      }
      &:nth-child(2n) {
        text-align: right;
      }
      .my-cols {
        gap: 3.4375rem;
        align-items: center;
        dl {
          flex: 1;
          dt {
            font-family: var(--font-maru);
            font-size: 2rem;
            font-weight: 500;
            line-height: 1.5;
            letter-spacing: 30%;
            margin-bottom: 2.1875rem;
          }
          dd {
            text-align: left;
          }
        }
        .-img {
          width: 22.5rem;
          img {
            display: block;
            width: 100%;
          }
        }
      }
      .-link01 {
        text-align: center;
        margin-top: 4.375rem;
        p {
          color: #4FB1EF;
          margin-bottom: 1.25rem;
        }
      }
    }
  }
}

#sec03 {
  padding-top: 5rem;
  height: 35rem;
  text-align: center;
  background: url(../img/sec03-bg02.svg) center / 50rem no-repeat,
    url(../img/sec03-bg01.png) center / contain no-repeat;
  margin-top: -1.5rem;
  h2 {
    font-family: var(--font-maru);
    font-size: 2rem;
    font-weight: 500;
    letter-spacing: 30%;
    margin-bottom: 4rem;
    strong {
      font-size: 2.5rem;
      font-weight: inherit;
      color: #FF824C;
    }
  }
  p {
    margin-bottom: 2.5rem;
    strong {
      font-weight: inherit;
      color: #4FB1EF;
    }
  }
}

#sec04 {
  padding-block: 12.5rem 5rem;
  text-align: center;
  color: #5C4C3E;
  h2 {
    font-family: var(--font-maru);
    font-size: 2.5rem;
    font-weight: 500;
    letter-spacing: 30%;
    line-height: 2;
    margin-bottom: 5rem;
  }
  .my-infinite_gallery {
    margin-bottom: 5rem;
    img {
      width: auto;
      height: 17.1875rem;
    }
  }
  .-txt01 {
    font-size: 2rem;
    margin-bottom: 5rem;
  }
  .-link01 {
    p {
      font-weight: 700;
      color: #10C080;
    }
  }
}

#sec05 {
  padding-block: 7.5rem 0;
  height: 107.125rem;
  background: url(../img/sec05-bg01.png?v1) center top / cover no-repeat;
  h2 {
    font-family: var(--font-kaku);
    font-size: 2.5rem;
    font-weight: 600;
    line-height: 1.8;
    letter-spacing: 20%;
    text-align: center;
    margin-bottom: 5rem;
    small {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 6.6875rem;
      background: url(../img/sec05-bg02.svg) center / contain no-repeat,
        url(../img/sec05-bg02a.png) center -0.3rem / 21.9375rem no-repeat;
      font-size: 2rem;
      padding-bottom: 0.4em;
      margin-bottom: 1.25rem;
    }
  }
  .-txt01 {
    margin-top: 5rem;
    font-family: var(--font-kaku);
    font-size: 2.5rem;
    font-weight: 600;
    letter-spacing: 20%;
    text-align: center;
    color: #1B98E7;
    span {
      background: linear-gradient(transparent 50%, #fff 50%);
    }
  }
}

#sec06 {
  padding-top: 12.5rem;
  margin-top: -2rem;
  color: #5C4C3E;
  background: url(../img/sec06-bg01.png?v1) center top / 100% no-repeat;
  .my-cols {
    margin-bottom: 3.125rem;
    .-txt {
      position: relative;
      flex: 1;
      letter-spacing: 5%;
      strong {
        font-weight: inherit;
        color: #FF824C;
      }
      h2 {
        font-size: 2.5rem;
        line-height: 1.6;
        text-shadow: 0.125rem 0.125rem 0.625rem #fff,
          -0.125rem 0.125rem 0.625rem #fff,
          0.125rem -0.125rem 0.625rem #fff,
          -0.125rem -0.125rem 0.625rem #fff;
        margin-bottom: 3.125rem;
      }
      p {
        margin-block: 1.875rem 0;
      }
    }
    .-img {
      width: 38.875rem;
      margin-left: -9rem;
      img {
        display: block;
        width: 100%;
      }
    }
  }
  .-txt01 {
    text-align: center;
    margin-bottom: 3.125rem;
  }
  .-txt02 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 42.5rem;
    height: 14.4375rem;
    background: #fff url(../img/deco01.png) center 0.4375rem / 7.0625rem no-repeat;
    border-radius: 50%;
    margin: 0 auto 5rem;
    strong {
      font-family: var(--font-maru);
      font-size: 2rem;
      font-weight: 500;
      color: #FF824C;
      letter-spacing: 30%;
    }
  }
  .my-infinite_gallery {
    .-container {
      img {
        height: 18.75rem;
      }
    }
  }
}

#sec07 {
  padding-block: 5.8125rem 6.25rem;
  background: url(../img/sec07-bg03.png?v1) right 10.9375rem bottom 6.1875rem / 22.0625rem no-repeat,
    url(../img/sec07-bg01.png?v1) right bottom 18.6875rem / 10.9375rem no-repeat #FFFBF3;
  .-txt01 {
    margin-bottom: 6.25rem;
    font-weight: 500;
    text-align: center;
  }
  .-txt02 {
    font-size: 2rem;
    strong {
      display: block;
      font-size: 2.5rem;
      font-weight: 500;
      line-height: 1.8;
      color: #FF824C;
      span {
        background: linear-gradient(transparent 50%, #fff 50%);
      }
    }
  }
}

#sec08 {
  padding-block: 6.25rem 11.25rem;
  h2 {
    font-family: var(--font-maru);
    font-size: 2.5rem;
    font-weight: 500;
    text-align: center;
    margin-bottom: 5rem;
  }
}

#sec09 {
  padding-block: 3.75rem;
  height: 66.75rem;
  text-align: center;
  background: url(../img/sec09-bg04.svg) center bottom / contain no-repeat,
    url(../img/sec09-bg03.svg) center bottom 13.375rem / contain no-repeat,
    url(../img/sec09-bg02.svg) center top / contain no-repeat,
    url(../img/sec09-bg01.jpg) center 3.5rem / contain no-repeat;
  h2 {
    width: fit-content;
    margin: 0 0 40rem 8.5rem;
    font-family: var(--font-maru);
    font-size: 2.5rem;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: 30%;
    strong {
      font-size: 3rem;
      color: #4FB1EF;
    }
  }
  .-txt01 {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    color: #FF824C;
    margin-bottom: 1.875rem;
  }
}

@media (max-width: 979.98px) {
  .my-main {
    font-size: 1rem;
  }

  #hero {
    background-image: url(../img/hero-bg01-sp.jpg?v1);
    height: 41.875rem;
    .my-cols {
      flex-direction: column;
      align-items: center;
      gap: 0.75rem;
    }
  }

  #sec01 {
    padding-block: 5.375rem 3.5rem;
    background: url(../img/sec01-bg01-sp.svg) center top / contain no-repeat,
      url(../img/sec01-bg03-sp.svg) center bottom / contain no-repeat,
      url(../img/sec01-bg02-sp.svg) center bottom / contain no-repeat;
    .-div01 {
      padding-left: 0;
      h2 {
        font-size: 1.25rem;
        letter-spacing: 10%;
        margin-bottom: 1.875rem;
      }
      .my-rows {
        gap: 0.625rem;
        margin-bottom: 3.125rem;
        li {
          padding-left: 2rem;
          background-position: 0 0.28125rem;
          background-size: 1.4375rem;
        }
      }
      .-txt01 {
        width: 8.8125rem;
        height: 3.5rem;
        margin: 0 auto 3.5625rem;
        background: #434E54;
        color: #fff;
        line-height: 2.5;
        clip-path: polygon(0 0, 100% 0, 50% 100%);
      }
    }
    .-div02 {
      ul {
        height: 37rem;
        li {
          width: 9.25rem;
          height: 9.25rem;
          inset: 0 auto auto 2.875rem;
          &::before {
            margin: -0.1875rem auto auto -0.25rem;
          }
          &:nth-child(2) {
            width: 9.625rem;
            height: 9.625rem;
            inset: 7.9375rem auto auto 9.5625rem;
            &::before {
              margin: 0.25rem auto auto -0.3125rem;
            }
          }
          &:nth-child(3) {
            width: 10rem;
            height: 10rem;
            inset: 17.1875rem auto auto 3.0625rem;
            &::before {
              margin: -0.1875rem auto auto -0.4375rem;
            }
          }
        }
      }
      .-txt01 {
        font-size: 1.5rem;
        line-height: 1.5;
        strong {
          font-size: 1.5rem;
          font-weight: 600;
          line-height: 2.5;
          letter-spacing: 15%;
        }
      }
    }
    .-img01 {
      inset: 26.9375rem 0.3125rem auto auto;
      width: 9.375rem;
    }
    .-img02 {
      display: block;
      position: absolute;
      inset: 40.6875rem auto auto 1.125rem;
      width: 7.8125rem;
    }
    .-img03 {
      inset: 60.25rem auto auto 0.625rem;
      width: 7.0625rem;
    }
    .-img04 {
      inset: 50.25rem -2.25rem auto auto;
      width: 16.71875rem;
    }
  }

  #sec02 {
    padding-block: 2.5rem 7.2rem;
    background: url(../img/sec02-bg01-sp.png) center top / contain no-repeat,
      url(../img/sec02-bg01a-sp.png) center bottom / contain no-repeat;
    h2 {
      font-size: 1.25rem;
      margin-bottom: 4.375rem;
      small {
        height: 3.5625rem;
        background-image: url(../img/sec02-bg02-sp.svg);
        font-size: 1rem;
        padding-bottom: 0.6em;
      }
      .-l {
        font-size: 2rem;
      }
    }
    .my-rows {
      gap: 3.125rem;
      li {
        .-point {
          height: 2.5rem;
          margin-bottom: 0.3125rem;
        }
        .my-cols {
          dl {
            dt {
              font-size: 1.5rem;
              margin-bottom: 1.25rem;
            }
            dd {
              line-height: 1.8;
            }
          }
          .-img {
            display: none;
          }
        }
        .-link01 {
          margin-top: 1.875rem;
          p {
            margin-bottom: 0.625rem;
          }
        }
      }
    }
  }

  #sec03 {
    padding-top: 4.1875rem;
    height: 26.6875rem;
    background: url(../img/sec03-bg02-sp.svg) center / contain no-repeat,
      url(../img/sec03-bg01-sp.png) center / contain no-repeat;
    h2 {
      font-size: 1.5rem;
      line-height: 1.4;
      margin-bottom: 1.875rem;
      strong {
        font-size: 2rem;
      }
    }
    p {
      margin-bottom: 1.5rem;
      strong {
        font-weight: 700;
      }
    }
  }

  #sec04 {
    padding-block: 4.5rem 5.46875rem;
    background-image: none;
    h2 {
      font-size: 1.5rem;
      line-height: 1.5;
      margin-bottom: 3.125rem;
    }
    .my-infinite_gallery {
      margin-bottom: 3.125rem;
      &:has(.-reverse) {
        margin-bottom: 0.625rem;
      }
      img {
        height: 7.2rem;
        margin-left: -2.1rem;
        .-reverse & {
          margin-left: -2.5rem;
        }
      }
      &.-is_ready {
        .-container {
          animation-duration: 16s; /* 3s*8 */
          &.-reverse {
            animation-duration: 18s; /* 3s*9 */
          }
        }
      }
    }
    .-txt01 {
      font-size: 1rem;
      margin-bottom: 2.5rem;
    }
  }

  #sec05 {
    padding-block: 6rem 6.8rem;
    height: auto;
    background: url(../img/sec05-bg01a-sp.png) right bottom 1.625rem / 9.6875rem no-repeat,
      url(../img/sec05-bg01-sp.png?v1) center top / 100% no-repeat #f2f7fd;
    &::before,
    &::after {
      content: '';
      position: absolute;
      inset: 0 0 auto;
      height: 2rem;
      background: #fff url(../img/sec05-bg01-sp.png) center top / cover no-repeat;
    }
    &::after {
      inset: auto 0 0;
      height: 2rem;
      background-position: center bottom;
    }
    h2 {
      font-size: 1.25rem;
      margin-bottom: 1.875rem;
      small {
        height: 3.6875rem;
        background: url(../img/sec05-bg02-sp.svg) center / contain no-repeat,
          url(../img/sec05-bg02a-sp.png) center -0.2rem / 12.4375rem no-repeat;
        font-size: 1rem;
        padding-bottom: 0.4em;
        margin-bottom: 1rem;
      }
    }
    .-txt01 {
      margin-top: 4rem;
      font-family: var(--font-kaku);
      font-size: 1.25rem;
    }
  }

  #sec06 {
    padding-top: 5rem;
    margin-top: -1.5rem;
    background-image: url(../img/sec06-bg01-sp.png);
    .my-cols {
      position: relative;
      display: block;
      padding-top: 3.125rem;
      margin-bottom: 2.875rem;
      .-txt {
        position: relative;
        letter-spacing: 10%;
        h2 {
          font-size: 2rem;
          margin-bottom: 2.875rem;
        }
        p {
          text-align: right;
          margin-block: 0.625rem 0;
        }
        z-index: 2;
      }
      .-img {
        position: absolute;
        inset: 1.5rem 0 auto auto;
        width: 17.1875rem;
        margin: 0;
      }
    }
    .-txt01 {
      text-align: left;
      margin-bottom: 1.875rem;
    }
    .-txt02 {
      width: 14.4375rem;
      height: 14.4375rem;
      background-size: 4.25rem;
      background-position: center 1.4375rem;
      margin-bottom: 1.875rem;
      text-align: center;
      strong {
        font-size: 1.5rem;
      }
    }
    .my-infinite_gallery {
      .-container {
        img {
          height: 8.9375rem;
        }
      }
    }
  }

  #sec07 {
    padding-block: 3.125rem 3.75rem;
    background: url(../img/sec07-bg03.png?v1) right bottom 5.875rem / 8rem no-repeat #FFFBF3;
    .-txt01 {
      margin-bottom: 4.375rem;
      font-weight: 400;
    }
    .-txt02 {
      font-size: 1rem;
      strong {
        font-size: inherit;
        font-weight: 700;
        line-height: 2;
        span {
          background: none;
        }
      }
    }
  }

  #sec08 {
    padding-block: 3.75rem;
    h2 {
      font-size: 2rem;
      margin-bottom: 3.125rem;
    }
  }

  #sec09 {
    padding-block: 4.125rem 1.875rem;
    height: 44.75rem;
    background: url(../img/sec09-bg04-sp.svg) center bottom / contain no-repeat,
      url(../img/sec09-bg03-sp.svg) center bottom 9.875rem / contain no-repeat,
      url(../img/sec09-bg02a-sp.svg) center 1.5625rem / contain no-repeat,
      url(../img/sec09-bg02-sp.svg) center top / contain no-repeat,
      url(../img/sec09-bg01-sp.jpg) center top / contain no-repeat;
    h2 {
      margin: 0 auto 25.5rem;
      font-size: 1.5rem;
      font-weight: 700;
      line-height: 1.5;
      letter-spacing: 20%;
      strong {
        font-size: 1.875rem;
      }
    }
    .-txt01 {
      font-size: 1.25rem;
      line-height: 1.5;
      margin-bottom: 0.875rem;
    }
  }
}