:root {
  --color-body: #70472E;
}

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

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

#hero {
  background: url(../img/hero-bg01.jpg?v2) center top / 100% no-repeat;
  height: 52rem;
  .my-cols {
    position: relative;
    justify-content: center;
    align-items: flex-end;
    gap: 2.5rem;
    position: absolute;
    inset: auto 0 0;
    background: #FCDEB3;
    padding-block: 5rem 2rem;
    > li {
      text-align: center;
      .-comment {
        position: absolute;
        inset: 2rem 0 auto;
        font-family: var(--font-maru);
        font-weight: 500;
        line-height: 1.5;
        margin: 0;
        color: #70472E;
      }
    }
  }
}

#sec01 {
  padding-block: 11.125rem 10rem;
  background: url(../img/sec01-bg01.png) top center / contain no-repeat,
    #FFFBF3 url(../img/sec01-bg02.png) bottom center / contain no-repeat;
  text-align: center;
  > hgroup {
    font-family: var(--font-maru);
    font-weight: 500;
    h2 {
      font-size: 2.5rem;
      line-height: 1;
      margin-bottom: 1.125rem;
    }
    p {
      font-size: 2rem;
    }
  }
  .-balloons {
    position: relative;
    width: 74.625rem;
    height: 29.3125rem;
    margin: 5rem auto;
    .-img01 {
      position: absolute;
      inset: 13rem auto auto 27.5rem;
      width: 21.75rem;
    }
    p {
      position: absolute;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      font-family: var(--font-maru);
      font-size: 1.5rem;
      line-height: 1.5;
      background: center / contain no-repeat;
      &.-balloon01 {
        background-image: url(../img/sec01-balloon01.png?v1);
        width: 23.34375rem;
        height: 19.65625rem;
        top: -2.5rem;
        left: 21.4375rem;
        span {
          margin: 0 2rem 6rem 0;
        }
      }
      &.-balloon02 {
        background-image: url(../img/sec01-balloon02.png?v1);
        width: 29.875rem;
        height: 21.40625rem;
        top: 7.9375rem;
        left: 0;
        span {
          margin: 4rem 3rem 0 0;
        }
      }
      &.-balloon03 {
        background-image: url(../img/sec01-balloon03.png?v1);
        width: 27.625rem;
        height: 26.78125rem;
        top: 0;
        left: 47.125rem;
        span {
          margin: -3rem -3rem 0 0;
        }
      }
    }
  }
  .-txt01 {
    margin-bottom: 5rem;
    line-height: 1.3;
    .-line01 {
      display: block;
      font-family: var(--font-maru);
      font-size: 2.5rem;
      font-weight: 700;
      line-height: 2;
      color: #F78A23;
      background: url(../img/sec01-line01.svg) bottom center / 22.75rem no-repeat;
    }
  }
  .-txt02 {
    strong {
      font-weight: 500;
    }
    .-line02 {
      display: inline-block;
      padding-left: 0.5em;
      background: url(../img/sec01-line02.svg) bottom 0.4em center / contain no-repeat;
    }
  }
}

#sec02 {
  padding-top: 7.875rem;
  height: 121.1875rem;
  background: url(../img/sec02-bg01.png) center / cover no-repeat;
  h2 {
    font-family: var(--font-maru);
    font-size: 2.5rem;
    font-weight: 700;
    text-align: center;
    line-height: 1.6;
    padding-bottom: 0.8em;
    background: url(../img/sec02-line01.svg) bottom center / 7rem no-repeat;
    margin-bottom: 5rem;
    small {
      display: block;
      font-size: inherit;
    }
    strong {
      font-weight: inherit;
      color: #F78A23;
    }
  }
  .my-container {
    .my-rows {
      gap: 6.25rem;
      li {
        position: relative;
        width: 100%;
        img {
          display: block;
          width: 24rem;
          margin-inline: auto 0;
        }
        dl {
          position: absolute;
          inset: 0 0 auto;
          display: flex;
          flex-direction: column;
          gap: 1.875rem;
          dt {
            font-family: var(--font-maru);
            font-size: 2rem;
            font-weight: 500;
            line-height: 1.5;
            letter-spacing: 5%;
            strong {
              font-weight: 500;
              color: #FF6F87;
            }
          }
          dd {
            width: 22em;
          }
        }
        &.-list02 {
          img {
            margin-inline: 0 auto;
          }
          dl {
            align-items: flex-end;
            dt {
              strong {
                color: #41DC2C;
              }
            }
            dd {
              width: 22em;
            }
          }
        }
        &.-list03 {
          img {
            margin-top: 4rem;
          }
          dl {
            dt {
              strong {
                color: #F78A23;
              }
            }
          }
        }
      }
    }
  }
}

#sec03 {
  background: #fff;
  z-index: 2;
  &::before,
  &::after {
    content: '';
    position: relative;
    display: block;
    background: #fff;
    width: 106.875rem;
    height: 12.375rem;
    border-radius: 50%;
    margin: -6.1875rem auto -6.1875rem -6.75rem;
    z-index: 1;
  }
  .my-container {
    text-align: center;
    z-index: 2;
    h2 {
      font-size: 2rem;
      font-weight: 700;
      line-height: 1.5;
      margin-bottom: 5rem;
      strong {
        font-weight: inherit;
        color: #F78A23;
      }
    }
    p {
      margin-bottom: 5rem;
    }
  }
}

#sec04 {
  padding-top: 14.375rem;
  background: url(../img/sec04-bg01.png) center / cover no-repeat;
  height: 50.75rem;
  .my-container {
    text-align: center;
    h2 {
      font-family: var(--font-maru);
      font-size: 2.5rem;
      font-weight: 700;
      padding-bottom: 1em;
      background: url(../img/line01.svg) bottom center / 8.625rem no-repeat;
      margin-bottom: 5rem;
    }
    .-txt01 {
      font-family: var(--font-maru);
      font-size: 2rem;
      font-weight: 700;
      line-height: 1.5;
      margin-block: 3.125rem;
      .-color01 {
        color: #FF6F87;
      }
      .-color02 {
        color: #F78A23;
      }
    }
  }
}

#sec05 {
  padding-block: 2.5rem 8.5rem;
  .my-rows {
    gap: 3.125rem;
    li {
      --color01: #FF6F87;
      --color02: #FF4362;
      &.-list02 {
        --color01: #64D1FF;
        --color02: #3DC5FF;
      }
      &.-list03 {
        --color01: #42D49F;
        --color02: #1FCF8F;
      }
      > dl {
        margin-inline: -1.875rem;
        > dt {
          position: relative;
          font-family: var(--font-maru);
          font-size: 2.5rem;
          font-weight: 700;
          letter-spacing: 40%;
          text-align: center;
          line-height: 1;
          width: 21.25rem;
          height: 12.75rem;
          background: var(--color01);
          color: #fff;
          border-radius: 50%;
          padding-top: 2rem;
          padding-left: 0.4em;
          margin: 0 auto -8rem;
          clip-path: rect(0 100% 50% 0);
          z-index: 1;
          small {
            display: block;
            font-size: 1.5rem;
            line-height: 1.5;
            letter-spacing: 20%;
            padding-right: 0.4em;
          }
          &:has(small) {
            padding-top: 1.5rem;
          }
        }
        > dd {
          position: relative;
          background: #fff;
          border: 1.875rem solid var(--color01);
          border-radius: 3.125rem;
          > picture > img {
            position: absolute;
            width: 19.8125rem;
            inset: 0 auto 0 2.5rem;
            margin-block: auto;
          }
          > dl {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1.5625rem;
            width: 38.75rem;
            margin: 1.875rem 0 1.875rem auto;
            > dt {
              font-family: var(--font-kaku);
              font-size: 2rem;
              font-weight: 700;
              line-height: 1.3;
              text-align: center;
              color: var(--color01);
            }
            > dd {
              width: 31.25rem;
              .-btn {
                position: relative;
                > a {
                  position: relative;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  gap: 0.75rem;
                  width: 24.0625rem;
                  height: 3.4375rem;
                  border-radius: var(--border-radius-pill);
                  margin: 1.5625rem auto 0;
                  background: var(--color02);
                  color: #fff;
                  font-family: var(--font-kaku);
                  font-size: 1.5rem;
                  font-weight: 700;
                  z-index: 2;
                  svg {
                    width: 1.875rem;
                    height: auto;
                    path {
                      stroke: var(--color02);
                    }
                  }
                  &:hover {
                    background: var(--color01);
                  }
                }
                > img {
                  position: absolute;
                  inset: auto 0 0 auto;
                  width: 4rem;
                  transition: all ease-out .3s;
                  transform: scale(0) translateX(-4rem);
                  transform-origin: bottom left;
                  z-index: 1;
                  .-list02 & {
                    width: 5.5rem;
                  }
                  .-list03 & {
                    width: 4rem;
                    right: .5rem;
                  }
                }
                > a:hover + img {
                  transform: scale(1) translateX(0);
                }
              }
            }
          }
        }
      }
    }
  }
}

#sec06 {
  padding-block: 6.25rem;
  background: url(../img/sec06-bg01.png) center / cover no-repeat;
  text-align: center;
  h2 {
    font-family: var(--font-maru);
    font-size: 2.5rem;
    font-weight: 700;
    color: #F78A23;
    margin-bottom: 1.875rem;
  }
  img {
    display: block;
    width: 19.8125rem;
    margin: 0 auto 1.875rem;
  }
}

#sec07 {
  padding-top: 6.25rem;
  background: url(../img/sec07-bg01.png) top center / cover no-repeat;
  text-align: center;
  &::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 6.25rem;
    background: linear-gradient(180deg, #FFFBF3 0%, rgba(255, 255, 255, 0) 100%);
  }
  h2 {
    font-family: var(--font-maru);
    font-size: 2rem;
    font-weight: 500;
    line-height: 1.5;
    padding-bottom: 1em;
    background: url(../img/line01.svg) bottom center / 8.625rem no-repeat;
    margin-bottom: 5rem;
    strong {
      display: block;
      font-size: 2.5rem;
      font-weight: 700;
    }
  }
  p {
    margin-bottom: 1.875rem;
  }
}

#sec08 {
  --max-width-container: 50rem;
  padding-block: 5rem 6.25rem;
  background: url(../img/sec08-bg01.png) bottom center / cover no-repeat;
  .my-container {
    text-align: center;
    .-box {
      position: relative;
      padding-block: 5rem;
      &::before,
      &::after {
        content: '';
        position: absolute;
        inset: 0 0 auto;
        height: 0.3125rem;
        background: url(../img/line02.svg) center / cover no-repeat;
      }
      &::after {
        inset: auto 0 0;
      }
      h2 {
        font-family: var(--font-maru);
        font-size: 2rem;
        font-weight: 700;
        line-height: 1.5;
        margin-bottom: 3.125rem;
      }
      p {
        margin-bottom: 3.125rem;
      }
    }
  }
}

#sec09 {
  padding-block: 6.0625rem 5.625rem;
  background: #FFFBF3;
  h2 {
    font-family: var(--font-maru);
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 5rem;
    text-align: center;
    .-balloon {
      display: inline-block;
      width: 14.1875rem;
      height: 4.375rem;
      line-height: 1;
      white-space: nowrap;
      vertical-align: middle;
      text-indent: -0.4em;
      background: url(../img/sec09-bg01.svg) center / contain no-repeat;
      padding-top: 0.1em;
      margin: 0.1em 0.2em 0;
      overflow: hidden;
      strong {
        color: #F78A23;
      }
    }
  }
}

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

#sec11 {
  padding-block: 5.25rem;
  background: url(../img/sec11-bg02.png?v1) 62.625rem 17.5625rem / 16.25rem no-repeat,
    url(../img/sec11-bg03.png?v1) 16.0625rem 34rem / 16.4375rem no-repeat,
    url(../img/sec11-bg04.png?v1) 57.625rem 45.75rem / 17.8125rem no-repeat,
    url(../img/sec11-bg01.png) top center / cover no-repeat;
  text-align: center;
  h2 {
    font-family: var(--font-maru);
    font-size: 2.5rem;
    font-weight: 500;
    letter-spacing: 30%;
    width: fit-content;
    margin: 0 auto 5rem;
    padding-left: 0.3em;
    padding-bottom: 1.25rem;
    background: url(../img/line03.svg) bottom center / auto 0.1875rem no-repeat;
    strong {
      font-weight: inherit;
      color: #F78A23;
    }
  }
  .-txt01 {
    p {
      margin-bottom: 1.875rem;
    }
  }
  .-txt02 {
    p {
      margin-bottom: 4rem;
      strong {
        color: #F78A23;
        font-weight: inherit
      }
      .-l {
        font-size: 2rem;
        strong {
          font-weight: 700;
        }
      }
    }
  }
  .-txt03 {
    p {
      display: inline-flex;
      align-items: center;
      padding-inline: 3.125rem;
      min-height: 3.125rem;
      background: url(../img/sec11-img01.svg) center left / 3.125rem no-repeat,
        url(../img/sec11-img02.svg) center right / 3.125rem no-repeat;
      margin-bottom: 1.5rem;
    }
  }
}

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

  #hero {
    background-image: url(../img/hero-bg01-sp.jpg?v2);
    height: 45rem;
    .my-cols {
      flex-direction: column;
      align-items: center;
      gap: 0.75rem;
      padding-top: 2.5rem;
      padding-bottom: 1rem;
      > li {
        .-comment {
          top: 1rem;
          font-weight: 500;
          line-height: 1;
          margin-bottom: 0.75rem;
        }
      }
    }
  }

  #sec01 {
    padding-block: 4.8125rem 5rem;
    background-image: url(../img/sec01-bg01-sp.png), url(../img/sec01-bg02-sp.png);
    > hgroup {
      h2 {
        font-size: 2rem;
        margin-bottom: 0.375rem;
      }
      p {
        font-size: 1.25rem;
        line-height: 1.3;
      }
    }
    .-balloons {
      position: relative;
      width: 100%;
      height: 28rem;
      margin-block: 3.125rem;
      .-img01 {
        inset: auto 0 0 0;
        margin-inline: auto;
        width: 18.625rem;
      }
      p {
        font-size: 1rem;
        letter-spacing: 0;
        &.-balloon01 {
          background-image: url(../img/sec01-balloon01-sp.png);
          width: 15.125rem;
          height: 9.4375rem;
          top: 0;
          left: 4.7rem;
          span {
            margin: 0 0 3rem 0;
          }
        }
        &.-balloon02 {
          background-image: url(../img/sec01-balloon02-sp.png);
          width: 11.3125rem;
          height: 11.0625rem;
          top: 3.5rem;
          left: 0;
          span {
            margin: 0 0 1.5rem -0.8rem;
          }
        }
        &.-balloon03 {
          background-image: url(../img/sec01-balloon03-sp.png);
          width: 9.1875rem;
          height: 9.3125rem;
          top: 3.5rem;
          left: 14.5rem;
          span {
            margin: 0 0 1rem 0;
          }
        }
      }
    }
    .-txt01 {
      font-size: 1.25rem;
      margin-bottom: 3.125rem;
      line-height: 1.5;
      .-line01 {
        font-size: 2rem;
        font-weight: 500;
        line-height: 1.6;
        background-size: 15.25rem;
      }
    }
    .-txt02 {
      strong {
        font-weight: 500;
      }
      .-line02 {
        display: inline-block;
        padding-left: 0.5em;
        background: url(../img/sec01-line02.svg) bottom 0.4em center / contain no-repeat;
      }
    }
  }

  #sec02 {
    padding-block: 3.75rem 6.25rem;
    height: auto;
    background-image: url(../img/sec02-bg01-sp.png);
    h2 {
      font-size: 2rem;
      font-weight: 500;
      line-height: 1.6;
      padding-bottom: 0.6em;
      background-size: 5rem;
      margin-bottom: 3.125rem;
      small {
        font-size: 1.25rem;
      }
    }
    .my-container {
      .my-rows {
        gap: 4.375rem;
        li {
          img {
            width: 100%;
            margin: 0;
          }
          dl {
            position: static;
            gap: 1.875rem;
            margin-bottom: 1.25rem;
            dt {
              font-size: 1.5rem;
              letter-spacing: 20%;
            }
            dd {
              width: auto;
            }
          }
          &.-list02 {
            img {
              margin: 0;
            }
            dl {
              align-items: normal;
            }
          }
          &.-list03 {
            img {
              margin: 0;
            }
          }
        }
      }
    }
  }

  #sec03 {
    &::before,
    &::after {
      width: 28.9375rem;
      height: 9rem;
      margin: -4.5rem auto -4.5rem -2.3125rem;
      z-index: 1;
    }
    .my-container {
      h2 {
        font-size: 1.5rem;
        letter-spacing: 20%;
        margin-bottom: 3.125rem;
      }
      p {
        margin-bottom: 3.125rem;
      }
    }
  }

  #sec04 {
    padding-block: 7.875rem 4.25rem;
    background-image: url(../img/sec04-bg01-sp.png);
    background-position: bottom center;
    height: auto;
    .my-container {
      h2 {
        font-size: 2rem;
        font-weight: 500;
        padding-bottom: 1em;
        background-size: 3.875rem;
        margin-bottom: 1.875rem;
      }
      .-txt01 {
        font-size: 1.25rem;
        font-weight: 500;
      }
    }
  }

  #sec05 {
    padding-block: 0;
    .my-container {
      padding: 0;
    }
    .my-rows {
      gap: 0;
      li {
        position: relative;
        > img {
          position: absolute;
          inset: 0 auto auto 18.1875rem;
          width: 4.09375rem;
          z-index: 2;
        }
        > dl {
          margin-inline: 0;
          padding: 0 1.25rem 1.25rem;
          background: var(--color01);
          > dt {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            position: relative;
            font-size: 2rem;
            letter-spacing: 10%;
            line-height: 1.5;
            width: 100%;
            height: 5rem;
            border-radius: 0;
            padding: 0;
            margin: 0;
            clip-path: none;
            small {
              font-size: 1rem;
              letter-spacing: 10%;
              padding-right: 0;
            }
            &:has(small) {
              padding-top: 0;
            }
          }
          > dd {
            border: none;
            border-radius: 1.25rem;
            > picture > img {
              position: static;
              width: 100%;
              margin-block: 1.25rem;
            }
            > dl {
              gap: 1.25rem;
              width: 100%;
              margin: 0;
              > dt {
                font-size: 1.25rem;
              }
              > dd {
                width: 100%;
                padding: 0 1.25rem 1.25rem;
                .-btn {
                  > a {
                    gap: 0.2rem;
                    width: 100%;
                    height: 3.125rem;
                    margin-top: 1.875rem;
                    font-size: 1.25rem;
                  }
                }
              }
            }
          }
        }
        &.-list02 {
          > img {
            width: 5rem;
            top: -1.25rem;
            left: 2rem;
          }
          > dl {
            > dd {
              > dl {
                > dt {
                  letter-spacing: 0;
                  white-space: nowrap;
                }
              }
            }
          }
        }
        &.-list03 {
          > img {
            width: 4.75rem;
            top: -1.5625rem;
            left: 17.6875rem;
          }
        }
      }
    }
  }

  #sec06 {
    padding-block: 3.75rem;
    background: #FFFBF3;
    h2 {
      font-size: 2rem;
      font-weight: 500;
      margin-bottom: 1.25rem;
    }
    img {
      width: 14.9375rem;
      margin-bottom: 1.25rem;
    }
  }

  #sec07 {
    padding-top: 3.75rem;
    background-image: url(../img/sec07-bg01-sp.png);
    &::before {
      height: 10.1875rem;
      background: linear-gradient(180deg, #FFFBF3 17.79%, rgba(255, 255, 255, 0) 117.79%);
    }
    h2 {
      font-size: 1.5rem;
      padding-bottom: 1em;
      background-size: 3.875rem;
      margin-bottom: 3.125rem;
      strong {
        font-size: 2rem;
      }
    }
    p {
      margin-bottom: 1.25rem;
    }
    .my-infinite_gallery {
      .-container img {
        height: 11.625rem;
      }
    }
  }

  #sec08 {
    padding-block: 3.125rem 3.75rem;
    background-image: url(../img/sec08-bg01-sp.png);
    .my-container {
      .-box {
        padding-block: 3.125rem;
        &::before,
        &::after {
          height: 0.1875rem;
        }
        h2 {
          font-size: 1.25rem;
          font-weight: 500;
          margin-bottom: 1.875rem;
        }
        p {
          margin-bottom: 1.875rem;
        }
      }
    }
  }

  #sec09 {
    padding-block: 3.4375rem;
    h2 {
      font-size: 1.25rem;
      font-weight: 500;
      margin-bottom: 2.5rem;
      .-balloon {
        width: 7.125rem;
        height: 2.75rem;
        padding-top: 0.3em;
      }
    }
  }

  #sec10 {
    padding-block: 3.75rem;
    h2 {
      font-size: 2rem;
      font-weight: 500;
      margin-bottom: 3.75rem;
    }
  }

  #sec11 {
    padding-block: 3.75rem;
    background: url(../img/sec11-bg02-sp.png) 0 14rem / 5.5625rem no-repeat,
      url(../img/sec11-bg03-sp.png) 1.6875rem 17.125rem / 5.8125rem no-repeat,
      url(../img/sec11-bg04-sp.png?v1) 17.125rem 23.25rem / 5.73438rem no-repeat,
      url(../img/sec11-bg05-sp.png?v1) 0.875rem 34.125rem / 5.73438rem no-repeat,
      url(../img/sec11-bg06-sp.png) 15rem 53.5rem / 6.25rem no-repeat,
      url(../img/sec11-bg07-sp.png) 14.1875rem 55.4375rem / 4.4375rem no-repeat,
      url(../img/sec11-bg01-sp.png) top center / cover no-repeat;
    h2 {
      font-size: 1.5rem;
      width: 20.3125rem;
      margin-bottom: 3.125rem;
      padding-bottom: 0;
      background: none;
      line-height: 1.8;
      > span {
        display: block;
        background: url(../img/line03.svg) bottom center / auto 0.1875rem no-repeat;
      }
    }
    .-txt02 {
      p {
        margin-bottom: 3.125rem;
        strong {
          font-weight: 700;
        }
        .-l {
          font-size: 1.25rem;
        }
      }
    }
    .-txt03 {
      p {
        padding-inline: 2.4375rem;
        background-size: 2.4375rem, 2.4375rem;
        margin-bottom: 0.625rem;
      }
    }
  }
}