#lp {
  --html-fz: 16;
  --scale: 0.8333; /* 1000 ÷ 1200 */
  --green: #2BF23F;
  --sp: 440;
  --pc: 1200;

  .section {
    padding-block: calc(60 / var(--html-fz) * 1rem);
    padding-inline: calc(20 / var(--html-fz) * 1rem);

    &.howtoSection {
      padding-block: 0;
    }
  }

  .bg-kv {
    background-color: #192C70;
  }

  .bg-blue-1 {
    background-color: #7385C6;
  }

  .bg-blue-2 {
    background-color: #96A6DE;
  }

  .title {
    margin-block-end: calc(40 / var(--html-fz) * 1rem);
    margin-inline: auto;
    width: fit-content;

    img {
      --h: 58;
      width: auto;
      height: calc(var(--h) / var(--html-fz) * 1rem);
    }
  }

  .lpAnchorNav {
    --px: 20;
    --py: 30;
    padding-block: calc(var(--py) / var(--html-fz) * 1rem);
    padding-inline: calc(var(--px) / var(--html-fz) * 1rem);
    background: #101734;
  }

  .lpAnchorNav__list {
    --gap-x: 10;
    --gap-y: 12;
    row-gap: calc(var(--gap-y) / var(--html-fz) * 1rem);
    column-gap: calc(var(--gap-x) / var(--html-fz) * 1rem);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  .lpAnchorNav__link {
    --fz: 15;
    display: grid;
    font-size: calc(var(--fz) / var(--sp) * 100vw);
    padding: calc(6em / var(--fz));
    border: 3px solid #BD993E;
    background: #000;
    min-height: calc(54em / var(--fz));

    &::before {
      content: '';
      grid-area: 1/1;
      z-index: 1;
      place-items: center;
      width: 100%;
      height: 100%;
      border: 1px solid #BA9A3B;
      pointer-events: none;
    }

    > span {
      grid-area: 1/1;
      z-index: 2;
      width: fit-content;
      height: fit-content;
      align-self: center;
      justify-self: center;
      color: #FFF;
      font-weight: 900;
      letter-spacing: calc(1.25em / 15);
    }
  }

  .overview {
    position: relative;
    background-color: #101734;

    &::after {
      --h: 390;
      content: "";
      position: absolute;
      z-index: 1;
      bottom: 0;
      left: 0;
      width: 100%;
      height: calc(var(--h) / var(--html-fz) * 1rem);
      background: url(https://cd-contents.s3.us-east-2.amazonaws.com/feature/2511_blackfriday/img/overview_bg.webp) no-repeat center bottom/cover;
      pointer-events: none;
    }
  }

  .overview__inner {
    position: relative;
    z-index: 2;
  }

  .overview__leadBox {
    --mb: 141;
    margin-block-end: calc(var(--mb) / var(--html-fz) * 1rem);
  }

  .overview__text {
    color: #fff;
    font-size: calc(15 / var(--html-fz) * 1rem);
    font-weight: bold;
    line-height: 2;
    letter-spacing: calc(1.25em / 15);
    text-align: center;
  }

  .overview__card {
    position: relative;
    padding-inline: calc(23 / var(--html-fz) * 1rem);
    background-color: #fff;
    border-radius: 10px;
  }

  .overview__card__topImage {
    --y: calc(-100% + (26 / var(--html-fz) * 1rem));
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, var(--y));
  }

  .overview__card__text {
    --py: 50;
    --fz: 14;
    color: #000;
    font-size: calc(var(--fz) / var(--html-fz) * 1rem);
    font-weight: bold;
    line-height: 2;
    letter-spacing: calc(1.25em / var(--fz));

    &:first-of-type {
      margin-block-end: calc(22 / var(--html-fz) * 1rem + var(--leading-trim));
      padding-block-start: calc(var(--py) / var(--html-fz) * 1rem + var(--leading-trim));
    }

    &:last-of-type {
      margin-block-start: calc(22 / var(--html-fz) * 1rem + var(--leading-trim));
      padding-block-end: calc(var(--py) / var(--html-fz) * 1rem + var(--leading-trim));
    }
  }

  .overview__card__middle {
      img {
        margin-inline: auto;
      }
    }

  .shop {
    background-color: #E5FFE8;
  }

  .shop__text {
    color: #221815;
    line-height: calc(28/16);
    letter-spacing: calc(0.16em / 16);
    text-align: center;
  }

  .shop__list {
    --mt: 74;
    --mb: 40;
    --gap-x: 10;
    --gap-y: 44;
    --col: 1fr;
    display: grid;
    grid-template-columns: repeat(2, var(--col));
    row-gap: calc(var(--gap-y) / var(--sp) * 100vw);
    column-gap: calc(var(--gap-x) / var(--sp) * 100vw);
    margin-block: calc(var(--mt) / var(--html-fz) * 1rem) calc(var(--mb) / var(--html-fz) * 1rem);
  }

  .shop__item-wrap {
    position: relative;
  }

  .shop__labelContainer {
    position: absolute;
    z-index: 1;
    top: calc(-34 / var(--sp) * 100vw);
    right: 0;
    display: flex;
    gap: calc(3 / var(--sp) * 100vw);
  }

  .shop__label {
    --fz: 14;
    --p: 10;
    padding-block-start: calc((var(--p) * 1em) / var(--fz));
    padding-inline: calc((var(--p) * 1em) / var(--fz));
    color: #fff;
    font-size: calc(var(--fz) / var(--sp) * 100vw);
    font-weight: 700;
    line-height: 1;
    border-radius: 5px 5px 0 0;
    background: #D81D00;
    height: calc(50em / var(--fz));
  }

  .shop__label--purple {
    background: #5A1BCF;
  }

  .shop__label--orange {
    background: #F57800;
  }

  .shop__item {
    position: relative;
    z-index: 2;

    > picture {
      img {
        width: 100%;
      }
    }

    a {
      --bottom: calc(15 / var(--html-fz) * 1rem);
      position: absolute;
      left: 50%;
      bottom: var(--bottom);
      transform: translateX(-50%);
      display: block;
      width: calc(135 / 155 * 100%);

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

  .shop__item__logo {
    --mx: calc(10 / 440 * 100vw);
    position: absolute;
    top: calc(15 / 440 * 100vw);
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - var(--mx) * 2);
  }

  .benefit {
    position: relative;
    background-color: #101734;

    &::before {
      content: "";
      position: absolute;
      z-index: 1;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      --bgw: 66;
      background: url('https://cd-contents.s3.us-east-2.amazonaws.com/feature/2511_blackfriday/img/benefit_bg_01.webp') left top/calc(var(--bgw) / var(--html-fz) * 1rem) auto repeat;
      opacity: .3;
      pointer-events: none;
    }
  }

  .benefit__inner {
    position: relative;
    z-index: 2;
  }

  .benefit__card {
    --px: 23;
    --py: 30;
    padding-block: calc(var(--py) / var(--html-fz) * 1rem);
    padding-inline: calc(var(--px) / var(--html-fz) * 1rem);
    background-color: #fff;
    border-radius: 10px;
  }

  .benefit__card__head {
    --fz: 16;
    color: #221815;
    font-size: calc(var(--fz) / var(--html-fz) * 1rem);
    font-weight: bold;
    line-height: 1.75;
    text-align: center;

    .__bar {
      position: relative;
      &::before {
        --h: 4;
        --bottom: -4;
        content: "";
        position: absolute;
        bottom: calc(var(--bottom) / var(--html-fz) * 1rem);
        left: 0;
        width: 100%;
        height: calc(var(--h) / var(--html-fz) * 1rem);
        background-color: var(--green);
        pointer-events: none;
      }
    }
  }

  .benefit__cardBody {
    --mt: 23;
    --px: 10;
    --py: 20;
    margin-block-start: calc(var(--mt) / var(--html-fz) * 1rem);
    margin-inline: auto;
    padding-block: calc(var(--py) / var(--html-fz) * 1rem);
    padding-inline: calc(var(--px) / var(--html-fz) * 1rem);
    max-width: 800px;
    border-radius: 10px;
    background-color: #F2FAA2;
  }

  .benefit__cardBody__text {
    --mb: 15;
    --fz: 14;
    margin-block-end: calc(var(--mb) / var(--html-fz) * 1rem);
    color: #221815;
    font-size: calc(var(--fz) / var(--html-fz) * 1rem);
    font-weight: 500;
    line-height: 1.75;
    letter-spacing: calc(0.16em / var(--fz));
  }

  .benefit__cardBody__picture {
    img {
      width: 100%;
    }
  }

  .benefit__cardBody__middle {
    --py: 15;
    margin-block: calc(var(--py) / var(--html-fz) * 1rem);
  }

  .benefit__cardBody__middleText {
    --mb: 15;
    --fz: 14;
    margin-block-end: calc(var(--mb) / var(--html-fz) * 1rem);
    font-size: calc(var(--fz) / var(--html-fz) * 1rem);
    font-weight: 500;
    color: #221815;
    line-height: 1.75;
    text-align: center;
  }

  .benefit__text {
    --fz: 18;
    --lts: 1.25em;
    margin-block-start: calc(40 / var(--html-fz) * 1rem + var(--leading-trim));
    color: #fff;
    font-size: calc(var(--fz) / var(--html-fz) * 1rem);
    font-weight: bold;
    line-height: 1.75;
    letter-spacing: calc(var(--lts) / var(--fz));
    text-align: center;

    em {
      color: var(--green);
    }
  }

  .howtoSection {
    background-color: #101734;
  }

  .howtoSection__inner {
    padding-block: calc(60 / var(--html-fz) * 1rem);
    overflow: hidden;
  }

  .howtoSection__title {
    --mb: 40;
    margin-block-end: calc(var(--mb) / var(--html-fz) * 1rem);
  }

  .howtoSection__button {
    margin-block-start: calc(40 / var(--html-fz) * 1rem);

    a {
      display: block;
      width: min(100%, calc(450 / var(--html-fz) * 1rem));
      margin-inline: auto;
    }

    img {
      width: 100%;
    }
  }

  /* 注意事項 */
  .precautionsSection {
    --px: 10;
    padding-block-start: calc(60 / var(--html-fz) * 1rem);
    padding-inline: calc(var(--px) / var(--html-fz) * 1rem);

    .c-accordion + .c-accordion {
      --mt:20;
      margin-block-start: calc(var(--mt) / var(--html-fz) * 1rem);
    }
  }

  .precautions {
    font-size: calc(14 / var(--html-fz) * 1rem);

    .precautions__title {
      display: grid;
      column-gap: calc(8 / var(--html-fz) * 1rem);
      grid-template-columns: auto 1fr;
      margin-block: calc(17 / var(--html-fz) * 1rem + var(--leading-trim));
      font-weight: bold;
      letter-spacing: calc(0.15em / var(--fz));
      line-height: 1;

      &::before {
        content: "";
        display: block;
        width: calc(2 / var(--html-fz) * 1rem);
        height: 100%;
        background-color: #F57801;
      }

      &:first-child {
        margin-block-start: 0;
      }
    }

    p {
      letter-spacing: calc(0.25em / var(--fz));

      a {
        text-decoration: underline;
        transition: opacity var(--duration-hover) var(--ease);

        &:where(:any-link, :enabled, summary):focus-visible {
          opacity: 0.8;
        }
      }
    }
  }

  .precautions--shop > * + * {
    --mt: 15;
    margin-block-start: calc(var(--mt) / var(--html-fz) * 1rem + var(--leading-trim));
  }

  .note {
    padding-inline-start: 1.5em;
    text-indent: -1.5em;
  }

  .cta {
    --pt: 10;
    --pb: 20;
    --px: 30;
    padding-block: calc(var(--pt) / var(--html-fz) * 1rem) calc(var(--pb) / var(--html-fz) * 1rem);
    padding-inline: calc(var(--px) / var(--html-fz) * 1rem);

    img {
      width: 100%;
    }
  }

  .hoverLink {
    transition: opacity 0.25s;
    &:where(:any-link, :enabled, summary):focus-visible {
      opacity: 0.6;
    }
  }

  /* utility classes */
  .u-mx-auto {
    margin-inline: auto;
  }
  /* /utility classes */
}

@media not all and (min-width: 769px) {
  #lp {
    .title.title--benefit {
      img {
        --h: 127;
      }
    }

    .overview__card__topImage {
      width: calc(272 / var(--html-fz) * 1rem);
    }

    .overview__card__middle {
      img {
        width: calc(97 / var(--html-fz) * 1rem);
      }
    }

    .shop__text--note {
      font-size: calc(12 / var(--html-fz) * 1rem);
      line-height: calc(20/12);
      letter-spacing: 0;
    }

    .howtoSection__button {
      margin-block-start: calc(80 / var(--html-fz) * 1rem);
    }

    /* utility classes */
    .u-hidden-max-pc {
      display: none;
    }

    .u-none-max-pc {
      display: none;
    }
    /* /utility classes */
  }
}


@media not all and (min-width: 990px) {
  #lp {
    .benefit__cardBody {
      &::before {
        display: none;
      }
    }
  }
}

@media (min-width: 623px) {
  #lp {
    .overview {
      &::after {
        --h: 300;
      }
    }
  }
}

@media (min-width: 769px) {
  #lp {
    --scale: 1;

    .section {
      padding-inline: calc(50 / var(--html-fz) * 1rem);
    }

      .title {
        img {
          --h: 80;
        }
      }

    .lpAnchorNav {
      --py: 60;
    }

    .lpAnchorNav__list {
      --gap-x: 10;
      --gap-y: 12;
      grid-template-columns: repeat(4, 1fr);
      margin-inline: auto;
      max-width: calc(830 / var(--html-fz) * 1rem);
    }

    .lpAnchorNav__link {
      --fz: 17;
      font-size: min(calc(var(--fz) * 1px), calc(var(--fz) / var(--pc) * 100vw));
    }

    .overview__leadBox {
      --mb: 125;
      margin-inline: auto;
      max-width: 600px;
    }

    .overview__text {
      font-size: 1rem;
      letter-spacing: calc(1.25em / 16);
    }

    .overview__card {
      margin-inline: auto;
      max-width: 760px;
    }

    .overview__card__topImage {
      --y: calc(-100% + (42 / var(--html-fz) * 1rem));
    }

    .overview__card__text {
      --py: 60;
      text-align: center;
    }

    .shop__labelContainer {
      top: 0;
      right: min(30px, calc(30 / var(--pc) * 100vw));
      transform: translateY(-100%);
      gap: min(5px, calc(5 / var(--pc) * 100vw));
    }

    .shop__list {
      --mt: 98;
      --gap-x: 40;
      --gap-y: 76;
      row-gap: min(calc(var(--gap-y) * 1px), calc(var(--gap-y) / var(--pc) * 100vw));
      column-gap: min(calc(var(--gap-x) * 1px), calc(var(--gap-x) / var(--pc) * 100vw));
      margin-inline: auto;
      max-width: calc((360 * 2 + 40) / var(--html-fz) * 1rem);
    }

    .shop__label {
      font-size: min(calc(var(--fz) * 1px), calc(var(--fz) / var(--pc) * 100vw));
      padding-block: min(calc(12px), calc(12em / var(--fz))) min(calc(9px), calc(9em / var(--fz)));
      padding-inline: min(calc(var(--p) * 1px), calc((var(--p) * 1em) / var(--fz)));
      min-width: min(calc(90px), calc(90em / var(--fz)));
      height: auto;
      text-align: center;
    }

    .shop__item {
      a {
        --bottom: calc(30 / var(--html-fz) * 1rem);
        bottom: min(var(--bottom), calc(30 / 1130 * 100vw));
        width: calc(290 / 360 * 100%);
      }
    }

    .shop__item__logo {
      top: min(30px, calc(30 / var(--pc) * 100vw));
      width: calc(290 / 360 * 100%);
    }

    .benefit {
      &::before {
        --bgw: 134;
      }
    }

    .benefit__text {
      --fz: 22;
      --lts: 0.22em;
      line-height: calc(28 / var(--fz));
    }

    .benefit__card {
      --py: 50;
      position: relative;
    }

    .benefit__card__head {
      --fz: 20;
      font-size: min(calc(var(--fz) * 1px), calc(var(--fz) / 980 * 100vw));
      line-height: 2.2;
      letter-spacing: calc(0.2em / var(--fz));

      .__bar {
        &::before {
          --bottom: -6;
        }
      }
    }

    .benefit__cardBody {
      --mt: 40;
      --px: 30;
      --py: 30;

      &::before {
        --top: 61;
        --right: 30;
        --w: 167;
        content: '';
        position: absolute;
        top: calc(var(--top) / var(--html-fz) * 1rem);
        right: calc(var(--right) / var(--html-fz) * 1rem);
        width: calc(var(--w) / var(--html-fz) * 1rem);
        aspect-ratio: 167/170;
        background: url('https://cd-contents.s3.us-east-2.amazonaws.com/feature/2511_blackfriday/img/benefit_img_01.webp') no-repeat center/contain;
        pointer-events: none;
      }
    }

    .benefit__cardBody__text {
      --mb: 20;
      --fz: 16;
      line-height: 1.5;
      letter-spacing: calc(0.16em / var(--fz));
    }

    .benefit__cardBody__middleText {
      --mb: 20;
      --fz: 16;
      line-height: 1.5;
      letter-spacing: calc(0.16em / var(--fz));
    }

    .cta {
      display: flex;
      justify-content: center;

      img {
        width: min(450px, calc(450 / var(--pc) * 100vw));
      }
    }

    /* 注意事項 */
    .precautionsSection {
      --px: 50;

      .c-accordion + .c-accordion {
        --mt:40;
      }
    }

    .precautions--shop > * + * {
      --mt: 10;
    }

    /* utility classes */
    .u-max-w-800-pc {
      max-width: calc(800 / var(--html-fz) * 1rem);
    }

    .u-max-w-1100-pc {
      max-width: calc(1100 / var(--html-fz) * 1rem);
    }

    .u-hidden-pc {
      display: none;
    }
    /* /utility classes */
  }
}

@media (min-width: 769px) and (max-width: 1238px) {
  #lp {
    .benefit__cardBody {
      position: relative;

      &::before {
        --top: -65;
        --right: -8;
        --w: 120;
      }
    }
  }
}

@media (hover: hover) and (pointer: fine) {
  #lp {
    .precautions p a:where(:any-link, :enabled, summary):hover {
      opacity: 0.8;
    }

    .hoverLink:where(:any-link, :enabled, summary):hover {
      opacity: 0.6;
    }
  }
}

/* local-sec02 */
#lp {
  .sec02_slider_box {
    position: relative;
  }
  .sec02_slider_box .slide_img {
    position: relative;
    height: calc(400px * var(--scale));
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: calc(27px * var(--scale));
    margin-inline: auto;
    margin-bottom: 50px;
    text-align: center;
  }
  .sec02_slider_box .slide_img:after {
    position: absolute;
    content: "";
    width: calc(400px * var(--scale));
    aspect-ratio: 1;
    border-radius: 50%;
    background-color: rgba(221, 252, 252, 0.20);
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
  }
  .sec02_slider_box .slide_img .images {
    height: calc(240px * var(--scale));
  }
  .sec02_slider_box .slide_img p {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 34%;
    font-size: 13px;
    min-height: 50px;
    color: #fff;
    text-align: center;
  }
  .sec02_slider_box .slide_img .step {
    --left: -28;
    position: absolute;
    width: auto;
    height: calc(70px * var(--scale));
    top: 50%;
    transform: translateY(-50%);
    left: calc(var(--left) / var(--html-fz) * 1rem);
  }
  .sec02_slider_box .swiper-button-next,
  .sec02_slider_box .swiper-button-prev {
    position: absolute;
    top: 40%;
    width: 38px;
    aspect-ratio: 1;
    margin-top: 0;
    background-size: contain;
    background-position: 0;
    background-repeat: no-repeat;
  }
  .sec02_slider_box .swiper-button-next:after,
  .sec02_slider_box .swiper-rtl .swiper-button-prev:after {
    content: "";
  }
  .sec02_slider_box .swiper-button-prev:after,
  .sec02_slider_box .swiper-rtl .swiper-button-next:after {
    content: "";
  }
  .sec02_slider_box .swiper-button-next,
  .sec02_slider_box .swiper-container-rtl .swiper-button-prev {
    background-image: url('https://cd-contents.s3.us-east-2.amazonaws.com/feature/2511_blackfriday/img/arrow-right.webp');
    right: 16%;
    left: auto;
  }
  .sec02_slider_box .swiper-button-prev,
  .sec02_slider_box .swiper-container-rtl .swiper-button-next {
    background-image: url('https://cd-contents.s3.us-east-2.amazonaws.com/feature/2511_blackfriday/img/arrow-left.webp');
    left: 16%;
    right: auto;
  }
  .sec02_slider_box .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    border: 1px solid var(--green);
    background: transparent;
    opacity: 1;
  }
  .sec02_slider_box .swiper-pagination-bullet-active {
    opacity: 1;
    background: var(--green);
  }
}

@media (min-width: 769px) and (max-width: 1239px) {
  #lp {
    .sec02_slider_box .slide_img p {
      width: 364px;
    }
    .sec02_slider_box .slide_img .step {
      --left: 0;
    }
  }
}
@media not all and (min-width: 769px) {
  #lp {
    .sec02_slider_box .slide_img {
      position: relative;
      flex-direction: column-reverse;
      /* height: 83.3vw; */
      height: auto;
      gap: 5.146vw;
      /* margin-bottom: 10vw; */
      margin-bottom: 0;
    }
    .sec02_slider_box .slide_img:after {
      width: 100%;
    }
    .sec02_slider_box .slide_img .images {
      height: 44.16vw;
      /* margin-top: 6.25vw; */
      margin-top: calc(80 / var(--html-fz) * 1rem);
    }
    .sec02_slider_box .slide_img.slide_img04 .images {
      height: 34vw;
      /* margin-top: 10vw; */
      margin-top: calc(96 / var(--html-fz) * 1rem);
      margin-bottom: 5vw;
    }
    .sec02_slider_box .slide_img p {
      position: static;
      width: 100%;
      font-size: 2.916vw;
      min-height: 6.6vw;
    }
    .sec02_slider_box .slide_img .step {
      height: 14.5vw;
      top: -5.2vw;
      left: 50%;
      transform: translate(-50%, 0);
    }
    .sec02_slider_box .swiper-button-next,
    .sec02_slider_box .swiper-button-prev {
      top: 43.5%;
      width: 7.916vw;
    }
    .sec02_slider_box .swiper-button-next,
    .sec02_slider_box .swiper-container-rtl .swiper-button-prev {
      /* right: 4.16vw; */
      right: calc(7 / var(--html-fz) * 1rem);
    }
    .sec02_slider_box .swiper-button-prev,
    .sec02_slider_box .swiper-container-rtl .swiper-button-next {
      /* left: 4.16vw; */
      left: calc(7 / var(--html-fz) * 1rem);
    }
    .sec02_slider_box .swiper-pagination-bullet {
      width: 2.08vw;
      max-width: 50px;
      height: 2.08vw;
      max-height: 50px;
    }
    .swiper-pagination {
      bottom: calc(40 / var(--html-fz) * -1rem);
      font-size: 0;
    }
  }
}