.lp-first-gift {
  .fv-inner {
    max-width: 1500px;
    margin-inline: auto;
  }

  .fv-section__image {
    display: block;
    width: 100%;
    height: auto;
  }

  /* About Section */
  .about-section {
    max-width: 120rem;
    width: 100%;
    margin-block: 12rem 0;
    margin-inline: auto;
    padding-inline: 1.6rem;
    box-sizing: border-box;

    @media (max-width: 833px) {
      margin-block: 8rem 0;
      margin-inline: auto;
      padding-inline: 1.6rem;
    }
  }

  .about-inner {
    position: relative;
    background-color: #fdf5fa;
    border-radius: 1.6rem;
    padding-block: 9rem;
    padding-inline: 6.4rem;
    text-align: center;
    box-sizing: border-box;
    z-index: 1;
    overflow: hidden;

    @media (max-width: 833px) {
      max-width: 65rem;
      margin-inline: auto;
      padding-block: 4.8rem;
      padding-inline: 1.6rem;
    }

    &::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image: url("../../images/first-gift/img-bg-check.png");
      background-size: 20rem 20rem;
      background-position: top left;
      background-repeat: repeat;
      z-index: 0;
      pointer-events: none;
    }
  }

  .object-kitty {
    position: absolute;
    top: -8rem;
    left: -2rem;
    width: 184px;
    height: 192px;
    object-fit: contain;
    object-position: center;
    z-index: 2;

    @media (max-width: 1280px) {
      top: -7rem;
      left: 1rem;
    }

    @media (max-width: 833px) {
      width: 150px;
      height: 170px;
      top: -70px;
      left: 10px;
    }

    @media (max-width: 600px) {
      width: 130px;
      height: 113px;
    }
  }

  .object-eddy {
    position: absolute;
    bottom: -8rem;
    right: -2rem;
    width: 130px;
    height: 145px;
    object-fit: contain;
    object-position: center;
    z-index: 2;

    @media (max-width: 1280px) {
      bottom: -7rem;
      right: 1rem;
    }

    @media (max-width: 833px) {
      width: 80px;
      height: 90px;
      bottom: -70px;
      right: 10px;
    }

    @media (max-width: 600px) {
      width: 130px;
      height: 113px;
    }
  }

  .about-text {
    position: relative;
    z-index: 1;
    color: #777777;
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 2.3;
    letter-spacing: 0.04em;
    margin-block: 0 6.4rem;
    margin-inline: 0;

    @media (max-width: 833px) {
      font-size: clamp(14px, 3vw, 20px);
      line-height: 2;
      letter-spacing: 0.04em;
      margin-block: 0 3.2rem;
      margin-inline: 0;
    }
  }

  .about-buttons {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 3.2rem;
    justify-content: center;

    @media (max-width: 833px) {
      flex-direction: column;
      gap: 1.4rem;
      align-items: center;
    }
  }

  .lp-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40rem;
    height: 6.4rem;
    border-radius: 3.2rem;
    border: 0.1rem solid transparent;
    font-size: 2rem;
    font-weight: 700;
    color: #ffffff;
    text-decoration: none;
    box-sizing: border-box;
    transition: opacity 0.3s ease;

    &:hover {
      opacity: 0.8;
    }

    &.lp-btn--pink {
      background-color: #e383a8;
      border-color: #e383a8;
    }

    &.lp-btn--blue {
      background-color: #8bd0dd;
      border-color: #8bd0dd;

      .lp-btn__icon {
        filter: hue-rotate(213deg) saturate(82%);
      }
    }

    @media (max-width: 833px) {
      width: 100%;
      height: 4.8rem;
      border-radius: 2.4rem;
      font-size: 1.5rem;
      letter-spacing: 0.08em;
    }
  }

  .lp-btn__icon {
    position: absolute;
    right: 2.4rem;
    top: 50%;
    transform: translateY(-50%);
    width: 2.4rem;
    height: 2.4rem;
    display: block;

    @media (max-width: 833px) {
      right: 2rem;
      width: 2rem;
      height: 2rem;
    }
  }

  /* PC/SP 表示切り替えヘルパー（インライン要素用: br など） */
  .pc-only {
    display: inline;

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

  .sp-only {
    display: none;

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

  /* PC/SP 表示切り替えヘルパー（ブロック要素用: img など） */
  .pc-only-block {
    display: block;

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

  .sp-only-block {
    display: none;

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

  /* Gift Section */
  .gift-section {
    max-width: 120rem;
    width: 100%;
    margin-block: 12rem 0;
    margin-inline: auto;
    padding-inline: 1.6rem;
    box-sizing: border-box;

    @media (max-width: 833px) {
      margin-block: 8rem 0;
      padding-inline: 1.6rem;
    }
  }

  .object-balloon {
    position: absolute;
    top: 7rem;
    left: 4rem;
    width: 200px;
    height: 200px;
    object-fit: contain;
    object-position: center;
    z-index: 2;

    @media (max-width: 1280px) {
      top: -7rem;
      left: 1rem;
    }

    @media (max-width: 833px) {
      width: 150px;
      height: 170px;
      top: -30px;
      left: 10px;
    }

    @media (max-width: 600px) {
      width: 130px;
      height: 113px;
    }
  }

  .object-pompom-purin {
    position: absolute;
    bottom: -6rem;
    right: -3rem;
    width: 165px;
    height: 160px;
    object-fit: contain;
    object-position: center;
    z-index: 2;

    @media (max-width: 1280px) {
      bottom: -7rem;
      right: 1rem;
    }

    @media (max-width: 833px) {
      width: 150px;
      height: 170px;
      bottom: -70px;
      right: 30px;
    }

    @media (max-width: 600px) {
      width: 100px;
      height: 100px;
    }
  }

  .gift-inner {
    position: relative;
    background-color: #f0f9fa;
    border-radius: 1.6rem;
    padding-block: 9rem;
    padding-inline: 6.4rem;
    text-align: center;
    box-sizing: border-box;
    z-index: 1;
    overflow: visible;

    @media (max-width: 833px) {
      max-width: 65rem;
      margin-inline: auto;
      padding-block: 4.8rem;
      padding-inline: 1.6rem;
    }

    &::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image: url("../../images/first-gift/img-bg-check.png");
      background-size: 20rem 20rem;
      background-position: top left;
      background-repeat: repeat;
      z-index: 0;
      pointer-events: none;
      border-radius: 1.6rem;
    }
  }

  .gift-header {
    position: relative;
    z-index: 1;
    margin-block-end: 6.4rem;

    @media (max-width: 833px) {
      margin-block-end: 2.4rem;
    }
  }

  .gift-header__line {
    width: 100%;
    max-width: 107.2rem;
    margin-inline: auto;
    margin-block-end: 2.4rem;

    .pc-only-block,
    .sp-only-block {
      width: 100%;
      height: auto;
    }

    @media (max-width: 833px) {
      margin-block-end: 0.8rem;
    }
  }

  .gift-header__title-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.6rem;

    @media (max-width: 833px) {
      gap: 0.8rem;
    }
  }

  .gift-header__icon {
    width: 4.4rem;
    height: 3.9rem;
    display: block;

    @media (max-width: 833px) {
      width: 3.6rem;
      height: 3.2rem;
    }
  }

  .gift-header__title {
    font-size: 3rem;
    font-weight: 700;
    color: #8bd0dd;
    line-height: 1.4;
    margin: 0;
    letter-spacing: 0.04em;

    @media (max-width: 833px) {
      font-size: 2rem;
      color: #71c6d6;
      line-height: 1.8;
    }
  }

  .gift-subtitle-container {
    position: relative;
    z-index: 1;
    width: 80rem;
    margin-inline: auto;
    margin-block: 0 8rem;
    border-bottom: 0.1rem dashed #e383a8;
    padding-block-end: 1rem;

    @media (max-width: 833px) {
      width: 100%;
      margin-block: 0 4rem;
      padding-block-end: 1rem;
    }
  }

  .gift-subtitle {
    font-size: 2rem;
    font-weight: 700;
    color: #e383a8;
    margin: 0;
    text-align: left;
    letter-spacing: 0.04em;

    @media (max-width: 833px) {
      font-size: 1.6rem;
    }
  }

  .gift-content {
    position: relative;
    z-index: 1;
    width: 80rem;
    margin-inline: auto;

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

  .gift-list {
    display: grid;
    grid-template-columns: repeat(2, 37.2rem);
    align-items: stretch;
    column-gap: 5.6rem;
    row-gap: 5.6rem;
    margin: 0;
    padding: 0;
    list-style: none;

    @media (max-width: 833px) {
      grid-template-columns: 1fr;
      row-gap: 3.2rem;
      column-gap: 0;
    }
  }

  .gift-item {
    position: relative;
    background-color: #ffffff;
    border-radius: 1.6rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 4rem;
    height: 100%;

    @media (max-width: 833px) {
      padding-block: 1.6rem;
      padding-inline: 1.6rem;
    }
  }

  .gift-item__badge {
    position: absolute;
    left: -3.8rem;
    top: -4rem;
    width: 9rem;
    height: 9.2rem;
    display: block;
    z-index: 2;

    @media (max-width: 833px) {
      left: -1.3rem;
      top: -2.4rem;
      width: 7.2rem;
      height: 7.4rem;
    }
  }

  .gift-item__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-align: center;
  }

  .gift-item__title {
    font-size: 1.8rem;
    font-weight: 700;
    color: #e383a8;
    line-height: 1.8;
    letter-spacing: 0.04em;
    margin: 0;

    @media (max-width: 833px) {
      font-size: 1.4rem;
      letter-spacing: 0.04em;
    }
  }

  .gift-item__text {
    font-size: 1.4rem;
    font-weight: 500;
    color: #777777;
    line-height: 2.2;
    letter-spacing: 0.04em;
    margin-block-start: 0.8rem;
    margin-block-end: 0;

    @media (max-width: 833px) {
      font-size: 1.2rem;
      line-height: 1.6;
      letter-spacing: 0.04em;
    }
  }

  .gift-note {
    font-size: 1.4rem;
    color: #777777;
    font-weight: 500;
    margin-block-start: 5.6rem;
    margin-block-end: 0;
    text-align: center;
    letter-spacing: 0.04em;

    @media (max-width: 833px) {
      font-size: 1.4rem;
      margin-block-start: 3.2rem;
    }
  }

  /* Campaign Section */
  .campaign-section {
    max-width: 120rem;
    width: 100%;
    margin-block: 12rem;
    margin-inline: auto;
    padding-inline: 1.6rem;
    box-sizing: border-box;

    @media (max-width: 833px) {
      margin-block: 8rem;
    }
  }

  .campaign-inner {
    position: relative;
    background-color: #fffbef;
    border-radius: 1.6rem;
    padding-block: 9rem;
    padding-inline: 6.4rem;
    text-align: center;
    box-sizing: border-box;
    z-index: 1;
    overflow: visible;

    @media (max-width: 833px) {
      max-width: 65rem;
      margin-inline: auto;
      padding-block: 4.8rem;
      padding-inline: 1.6rem;
    }

    &::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image: url("../../images/first-gift/img-bg-dots.png");
      background-size: 6.3rem 6.3rem;
      background-position: top left;
      background-repeat: repeat;
      z-index: 0;
      pointer-events: none;
      border-radius: 1.6rem;
    }
  }

  .campaign-header {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-block-end: 6.4rem;

    @media (max-width: 833px) {
      margin-block-end: 6.4rem;
    }
  }

  .campaign-header__line {
    width: 100%;
    max-width: 107.2rem;
    margin-inline: auto;
    margin-block-end: 2.4rem;

    .pc-only-block,
    .sp-only-block {
      width: 100%;
      height: auto;
    }

    @media (max-width: 833px) {
      margin-block-end: 0.8rem;
    }
  }

  .campaign-header__title-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.6rem;

    @media (max-width: 833px) {
      gap: 0.8rem;
    }
  }

  .campaign-header__icon {
    width: 4.4rem;
    height: 3.4rem;
    display: block;

    @media (max-width: 833px) {
      width: 3.6rem;
      height: 2.8rem;
    }
  }

  .campaign-header__title {
    font-size: 3rem;
    font-weight: 700;
    color: #e383a8;
    line-height: 1.8;
    margin: 0;
    letter-spacing: 0.04em;

    @media (max-width: 833px) {
      font-size: 2rem;
    }
  }

  .campaign-content {
    position: relative;
    z-index: 1;
    width: 80rem;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: 6.4rem;

    @media (max-width: 833px) {
      width: 100%;
      gap: 6.4rem;
    }
  }

  .campaign-group {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
  }

  .campaign-group__header {
    width: 100%;
    border-bottom: 0.1rem dashed #e383a8;
    padding-block-end: 1rem;
  }

  .campaign-group__title {
    font-size: 2rem;
    font-weight: 700;
    color: #e383a8;
    margin: 0;
    text-align: left;
    letter-spacing: 0.04em;

    @media (max-width: 833px) {
      font-size: 1.6rem;
    }
  }

  .object-pita {
    position: absolute;
    top: -12rem;
    left: -10rem;
    width: 100px;
    height: 100px;
    object-fit: contain;
    object-position: center;
    z-index: 2;

    @media (max-width: 1280px) {
      top: -13rem;
      left: 1rem;
    }

    @media (max-width: 833px) {
      top: -9rem;
      left: 10px;
    }

    @media (max-width: 600px) {
      width: 60px;
      height: 60px;
    }
  }

  .campaign-group__text {
    font-size: 1.6rem;
    font-weight: 500;
    color: #777777;
    line-height: 2.3;
    letter-spacing: 0.04em;
    margin: 0;
    text-align: left;
    width: 100%;

    @media (max-width: 833px) {
      font-size: 1.4rem;
      line-height: 1.8;
    }
  }

  .campaign-card {
    background-color: #ffffff;
    border-radius: 0.8rem;
    padding-block: 2rem 2.4rem;
    padding-inline: 2rem;
    width: 100%;
    box-sizing: border-box;
    text-align: left;

    @media (max-width: 833px) {
      padding-block: 2.4rem;
      padding-inline: 1.6rem;
    }
  }

  .campaign-card__title {
    font-size: 1.6rem;
    font-weight: 700;
    color: #e383a8;
    margin: 0 0 0.8rem 0;

    @media (max-width: 833px) {
      font-size: 1.6rem;
    }
  }

  .campaign-card__text {
    font-size: 1.6rem;
    font-weight: 500;
    color: #666666;
    line-height: 1.5;
    margin: 0;

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

  .campaign-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
  }

  .campaign-list__item {
    font-size: 1.6rem;
    font-weight: 500;
    color: #777777;
    line-height: 2;
    letter-spacing: 0.04em;
    position: relative;
    padding-left: 2.4rem;

    &::before {
      content: "•";
      position: absolute;
      left: 0.8rem;
      color: #777777;
    }

    @media (max-width: 833px) {
      font-size: 1.4rem;
      line-height: 1.8;
      padding-left: 2.1rem;

      &::before {
        left: 0.6rem;
      }
    }
  }

  .campaign-link {
    color: #8bd0dd;
    text-decoration: underline;
    text-underline-position: from-font;
    transition: opacity 0.3s ease;

    &:hover {
      opacity: 0.8;
    }
  }

  .campaign-notes {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
  }

  .object-keroppi {
    position: absolute;
    bottom: -6rem;
    right: -10rem;
    width: 120px;
    height: 150px;
    object-fit: contain;
    object-position: center;
    z-index: 2;

    @media (max-width: 1280px) {
      width: 100px;
      height: 120px;
      bottom: -9rem;
      right: 1rem;
    }

    @media (max-width: 833px) {
      bottom: -9rem;
      right: 10px;
    }

    @media (max-width: 600px) {
      width: 80px;
      height: 100px;
    }
  }
  .campaign-note {
    font-size: 1.4rem;
    font-weight: 400;
    color: #a2a2a2;
    line-height: 1.5;
    letter-spacing: 0.04em;
    margin: 0;
    text-align: left;

    @media (max-width: 833px) {
      font-size: 1.2rem;
    }
  }

  .object-sinamon {
    position: absolute;
    top: -12rem;
    left: -17rem;
    width: 155px;
    height: 145px;
    object-fit: contain;
    object-position: center;
    z-index: 2;

    @media (max-width: 1280px) {
      top: -10rem;
      right: 1rem;
      left: auto;
      width: 120px;
      height: 110px;
    }

    @media (max-width: 833px) {
      top: -6rem;
      right: 10px;
    }

    @media (max-width: 600px) {
      width: 100px;
      height: 90px;
    }
  }

  .campaign-text--pink {
    color: #e383a8;
    font-weight: 700;
  }

  .campaign-buttons {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 3.2rem;
    justify-content: center;
    margin-block-start: 6.4rem;

    @media (max-width: 833px) {
      flex-direction: column;
      gap: 1.6rem;
      align-items: center;
      max-width: 34.3rem;
      width: 100%;
      margin-inline: auto;
      margin-block-start: 4rem;
    }
  }
}

/* First Gift Footer Styles */
.first-gift-footer {
  background-color: #fff;
  padding: 48px 16px;
  width: 100%;
  box-sizing: border-box;

  @media (min-width: 833px) {
    padding: 80px 48px;
  }
}

.first-gift-footer__inner {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 56px;
  box-sizing: border-box;

  @media (min-width: 833px) {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0;
  }
}

.first-gift-footer__logo-area {
  display: flex;
  align-items: center;
}

.first-gift-footer__logo-link {
  display: flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  transition: opacity 0.2s ease;

  &:hover {
    opacity: 0.8;
  }
}

.first-gift-footer__logo-img {
  display: block;
  width: 140px;
  height: auto;

  @media (min-width: 833px) {
    width: 142px;
  }
}

.first-gift-footer__company-name {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.8;
  color: #777;
  white-space: nowrap;

  @media (min-width: 833px) {
    font-size: 16px;
  }
}

.first-gift-footer__info-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  width: 100%;

  @media (min-width: 833px) {
    align-items: flex-end;
    text-align: right;
    width: auto;
  }
}

.first-gift-footer__disclaimer {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.8;
  color: #777;
  margin: 0;

  @media (min-width: 833px) {
    font-size: 14px;
  }
}

.first-gift-footer__privacy-link {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.8;
  color: #777;
  text-decoration: none;
  transition: opacity 0.2s ease;

  &:hover {
    opacity: 0.8;
    text-decoration: underline;
  }

  @media (min-width: 833px) {
    font-size: 14px;
  }
}

.first-gift-footer__copyright {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.8;
  color: #777;
  margin: 0;

  @media (min-width: 833px) {
    font-size: 14px;
  }
}