.p-underArea {
  position: relative;
  overflow-x: clip;
  @media all and (min-width: 1024px) {
    padding: 200px 0 0;
  }
  @media not all and (min-width: 1024px) {
    padding: 160px 0 0;
  }
}

.p-underArea__links {
  z-index: 1;
  position: relative;
  @media all and (min-width: 1024px) {
    display: flex;
    justify-content: space-between;
    padding: 0 30px;
    max-width: 1260px;
    margin: 0 auto 250px;
  }
  @media not all and (min-width: 1024px) {
    margin: 0 30px 180px;
  }
}

.p-underArea__link {
  @media all and (min-width: 1024px) {
    width: calc((100% - 40px) / 2);
    &:nth-of-type(2) {
      margin-top: 70px;
    }
  }
  @media not all and (min-width: 1024px) {
    &:not(:last-of-type) {
      margin-bottom: 40px;
    }
  }
  & a {
    width: 100%;
    border: var(--secondary-color) solid 0.3rem;
    border-radius: 40px;
    background: #fff;
    box-shadow: 0 0.8rem 0 var(--secondary-color);
    transition: all 0.12s ease 0s;
    transition-property: all;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    @media (any-hover: hover) {
      &:hover {
        transform: translateY(0.5rem);
        box-shadow: 0 0 0 var(--secondary-color);
      }
      & .c-button__circle {
        scale: var(--button-circle-scale);
      }
    }
  }
  & div {
    margin-bottom: 15px;
  }
  & span {
    display: flex;
    align-items: center;
  }
  & i {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--secondary-color);
    transition: scale var(--button-circle-duration) linear;
    &:before {
      content: '';
      width: 11px;
      height: 11px;
      display: block;
      background: url('../../../images/common/right-arrow.svg') center no-repeat;
    }
  }
  @media all and (min-width: 1024px) {
    & a {
      height: 264px;
      padding: 0px 25px 0.3em;
    }
    & span {
      font-size: 32px;
      gap: 0 20px;
    }
    & img {
      width: 65px;
    }
  }
  @media not all and (min-width: 1024px) {
    & a {
      padding: 0px 20px 0.3em;
      height: 180px;
    }
    & span {
      font-size: 18px;
      gap: 0 16px;
    }
    & b {
      flex: 1;
    }
    & img {
      width: 60px;
    }
  }
}

.p-underArea__downloads {
  background: #ffffff;
  box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.08);
  max-width: 1200px;
  z-index: 1;
  position: relative;
  @media all and (min-width: 1024px) {
    border-radius: 100px;
    margin: 0 auto 130px;
    .p-downloads {
      padding-bottom: 70px;
    }
    .p-downloads dt img {
      margin-top: -100px;
    }
    .p-downloads dt {
      margin-bottom: 20px;
    }
  }
  @media not all and (min-width: 1024px) {
    margin: 0 auto 130px;
    margin-bottom: 40px;
    border-radius: 40px;
    .p-downloads {
      padding-bottom: 30px;
    }
    .p-downloads dt img {
      margin-top: -100px;
    }
    .p-downloads dt {
      margin-bottom: 10px;
    }
  }
}

.p-underArea__toTop {
  position: absolute;
  top: -300px;
  left: 666px;
  width: 148px;
  margin: 0 auto;
  & .p-underArea__toTopButton {
    width: 148px;
    display: block;
    transition: scale 0.2s ease 0s;
    @media (any-hover: hover) {
      &:hover {
        scale: 1.1;
      }
    }
  }
}

.p-underArea__dropFruits {
  position: absolute;
  top: 105px;
  left: -55px;
  width: 86px;
  visibility: hidden;
  transform-origin: left top;
}

.p-underArea__shinkaFruits {
  position: absolute;
  top: 204px;
  left: -55px;
  width: 93px;
  visibility: hidden;
  transform-origin: center bottom;
}

/* Floating Fruits */
.p-underArea__floatingFruits {
  @media all and (min-width: 1024px) {
    position: absolute;
    width: 1px;
    height: 100%;
    left: 0;
    right: 0;
    top: 0;
    margin: auto;
  }
}

.p-underArea__floatingFruit {
  position: absolute;
  max-width: inherit;
}

.p-underArea__floatingFruit--1 {
  @media all and (min-width: 1024px) {
    width: 90px;
    left: -670px;
    top: 550px;
    rotate: 60deg;
  }
  @media not all and (min-width: 1024px) {
    width: 65px;
    top: 20px;
    left: 10px;
    rotate: 60deg;
  }
}

.p-underArea__floatingFruit--2 {
  @media all and (min-width: 1024px) {
    width: 190px;
    right: -470px;
    top: -31px;
    rotate: -170deg;
  }
  @media not all and (min-width: 1024px) {
    width: 130px;
    top: -30px;
    right: 70px;
    rotate: 160deg;
  }
}

.p-underArea__floatingFruit--3 {
  @media all and (min-width: 1024px) {
    width: 90px;
    right: -710px;
    top: 660px;
    rotate: -50deg;
  }
  @media not all and (min-width: 1024px) {
    width: 50px;
    top: 100px;
    right: 10px;
    rotate: -40deg;
  }
}