#lp {
  --html-fz: 16;

  .c-button._lp_ {
    background-color: #BE4914;
    &::before {
      border-color: #BE4914;
    }

    &:where(:any-link, :enabled, summary):focus-visible {
      background-color: var(--white);
    }

    &._pdf_ {
      --px: 30;
      padding-inline: calc(var(--px) / var(--html-fz) * 1rem);
      grid-template-columns: 0.5rem 1fr auto;

      .c-button__arrow {
        mask-image: url("https://cd-contents.s3.us-east-2.amazonaws.com/feature/sotoene_cp_sawayaka/img/icon_pdf.svg");
        mask-size: contain;
        background-color: #fff;
        transition: background-color 0.3s ease-out;
        aspect-ratio: 20/21;
        width: calc(20 / var(--html-fz) * 1rem);
      }

      &:where(:any-link, :enabled, summary):focus-visible {
        .c-button__arrow {
          background-color: var(--black);
          transform: none;
        }
      }
    }
  }

  .lpContainer {
    padding-block-start: var(--pt, calc(60 / var(--html-fz) * 1rem));
    padding-block-end: var(--pb, calc(60 / var(--html-fz) * 1rem));
    padding-inline: var(--px, calc(20 / var(--html-fz) * 1rem));
    background-color: #fff;

    &._mv_ {
      padding: 0;
    }

    &._campaignOverview_ {
      background-color: #FBEFB5;
    }

    &._benefits_ {
      background: url(https://cd-contents.s3.us-east-2.amazonaws.com/feature/sotoene_cp_sawayaka/img/benefits_bg.svg) left top/calc(114 / var(--html-fz) * 1rem) #FFF7E2 repeat;
    }

    &._participation_ {
      background-color: #F1CF53;
    }
  }

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

  .title {
    --fz: 24;
    width: fit-content;
    color: #FF5001;
    font-size: calc(var(--fz) / var(--html-fz) * 1rem);
    font-weight: bold;
    line-height: 1;
    letter-spacing: calc(0.24em / var(--fz));
    background-color: #fff;
    padding-block: calc(4 / var(--fz) * 1em);
    padding-inline: calc(7 / var(--fz) * 1em);
  }

  .campaignInfo {
    --mt: 25;
    --fz: 14;
    display: grid;
    margin-block-start: calc(var(--mt) / var(--html-fz) * 1rem);
    font-size: calc(var(--fz) / var(--html-fz) * 1rem);
    letter-spacing: calc(0.15em / var(--fz));

    dt {
      --gap-x: 6;
      display: grid;
      grid-template-columns: auto 1fr;
      column-gap: calc(var(--gap-x) / var(--fz) * 1rem);
      font-weight: bold;

      &::before {
        --w: 10;
        content: '';
        align-self: center;
        display: block;
        background-color: #864E0F;
        width: calc(var(--w) / var(--html-fz) * 1rem);
      }
    }
  }

  .what {
    --mt: 62;
    margin-block-start: calc(var(--mt) / var(--html-fz) * 1rem + var(--leading-trim));
  }

  .what__sentence {
    --mt: 31;
    --fz: 16;
    color: #221815;
    margin-block-start: calc(var(--mt) / var(--html-fz) * 1rem + var(--leading-trim));
    font-size: calc(var(--fz) / var(--html-fz) * 1rem);
    line-height: calc(28 / 16);
    letter-spacing: calc(0.16em / var(--fz));
  }

  .what__images {
    --mt: 25;
    --max-w: 380;
    margin-block-start: calc(var(--mt) / var(--html-fz) * 1rem);
    margin-inline: auto;
    max-width: calc(var(--max-w) / var(--html-fz) * 1rem);

    img {
      width: 100%;
    }

    figcaption {
      --mt: 10;
      --fz: 12;
      color: #221815;
      margin-block-start: calc(var(--mt) / var(--html-fz) * 1rem);
      font-size: calc(var(--fz) / var(--html-fz) * 1rem);
      line-height: calc(28 / 12);
      letter-spacing: calc(0.12em / var(--fz));
    }
  }

  .what__button {
    --mt: 25;
    margin-block-start: calc(var(--mt) / var(--html-fz) * 1rem + var(--leading-trim));
  }

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

  .point__item {
    --gap-y: 10;
    display: grid;
    row-gap: calc(var(--gap-y) / var(--html-fz) * 1rem);

    p {
      text-align: center;
    }

    > .__imageWrap {
      margin-inline: auto;
      width: fit-content;
    }

    img {
      --w: 337;
      width: calc(var(--w) / var(--html-fz) * 1rem);
    }

    &._02_ {
      --gap-y: 20;

      img {
        --w: 348;
      }
    }

    &._03_ {
      --gap-y: 0;

      img {
        --w: 337;
      }
    }
  }

  .point__moreover {
    --w: 358;
    margin-inline: auto;
    width: calc(var(--w) / var(--html-fz) * 1rem);
  }

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

  .participationList {
    --mt: 40;
    --max-w: 380;
    margin-block-start: calc(var(--mt) / var(--html-fz) * 1rem);
    margin-inline: auto;
    max-width: calc(var(--max-w) / var(--html-fz) * 1rem);
  }

  .participationList__item {
    --p: 30;
    display: grid;
    grid-template-columns: 1fr calc(90 / var(--html-fz) * 1rem);
    align-items: center;
    column-gap: calc(20 / var(--html-fz) * 1rem);
    padding: calc(var(--p) / var(--html-fz) * 1rem);
    border-radius: calc(20 / var(--html-fz) * 1rem);
    background-color: #fff;

    & + & {
      --mt: 34;
      margin-block-start: calc(var(--mt) / var(--html-fz) * 1rem);
    }

    > .__num img {
      --h: 30;
      height: calc(var(--h) / var(--html-fz) * 1rem);
    }

    > p {
      --fz: 14;
      color: #221815;
      font-size: calc(var(--fz) / var(--html-fz) * 1rem);
      line-height: calc(22 / 14);
      letter-spacing: calc(0.14em / var(--fz));

      > .__small {
        font-size: calc(12 / var(--fz) * 1em);
      }

      > .__em {
        color: #FF5001;
        font-weight: bold;
      }
    }

    > .__image {
      --h: 90;
      height: calc(var(--h) / var(--html-fz) * 1rem);
    }
  }

  .participationNote {
    --mt: 25;
    --max-w: 380;
    --fz: 12;
    margin-block-start: calc(var(--mt) / var(--html-fz) * 1rem + var(--leading-trim));
    margin-inline: auto;
    max-width: calc(var(--max-w) / var(--html-fz) * 1rem);
    font-size: calc(var(--fz) / var(--html-fz) * 1rem);
    line-height: calc(20 / 12);
    letter-spacing: calc(0.12em / var(--fz));
  }

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

    h3 {
      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;
        }
      }
    }
  }

  .link__item {
    display: grid;
    grid-template-rows: repeat(2, auto);
    grid-template-columns: auto 1fr;
    row-gap: max(1px, calc(1 / var(--html-fz) * 1rem));
    column-gap: calc(2 / var(--html-fz) * 1rem);
    width: fit-content;
    color: #BE4914;
    margin-block-start: calc(20 / var(--html-fz) * 1rem);
    font-size: calc(15 / var(--html-fz) * 1rem);
    font-weight: bold;
    line-height: 1;
    letter-spacing: calc(-0.45em / 15);
    transition: opacity var(--duration-hover) var(--ease);
    &:where(:any-link, :enabled, summary):focus-visible {
      opacity: 0.8;
    }

    > .__text {
      grid-area: 1/1;
    }

    &::before {
      content: '';
      display: block;
      grid-row: 2;
      grid-column: 1/-1;
      background-color: currentColor;
      height: max(1px, calc(1 / var(--html-fz) * 1rem));
    }

    &::after {
      --w: 13;
      content: "";
      grid-area: 1/2;
      align-self: center;
      display: block;
      width: calc(13 / var(--html-fz) * 1rem);
      aspect-ratio: 13/11;
      mask-image: url("https://cd-contents.s3.us-east-2.amazonaws.com/feature/sotoene_cp_sawayaka/img/arrow_icon.svg");
      mask-size: contain;
      background-color: currentColor;
    }

    &._pdf_ {
      &::before {
        grid-column: 1;
      }

      &::after {
        --w: 17;
        grid-row: 1/-1;
        aspect-ratio: 1;
        mask-image: url("https://cd-contents.s3.us-east-2.amazonaws.com/feature/sotoene_cp_sawayaka/img/pdf_icon.svg");
      }
    }

    &:not(._pdf_)::after {
      margin-block-start: calc(2 / var(--html-fz) * 1rem);
    }
  }

  .stamp {
    --mt: 50;
    margin-block-start: calc(var(--mt) / var(--html-fz) * 1rem);
  }

  .stamp__button:nth-child(2) {
    margin-block-start: calc(20 / var(--html-fz) * 1rem);
  }

  .stampBook {
    position: relative;
    margin-block-start: calc(40 / var(--html-fz) * 1rem);
    margin-inline: auto;
    padding-block-start: calc(30 / var(--html-fz) * 1rem);
    padding-block-end: calc(33 / var(--html-fz) * 1rem);
    max-width: calc(380 / var(--html-fz) * 1rem);
    border-radius: calc(20 / var(--html-fz) * 1rem);
    background-color: #FBEFB5;
  }

  .stampBook__text {
    --fz: 20;
    color: #F57801;
    font-size: calc(var(--fz) / var(--html-fz) * 1rem);
    font-weight: bold;
    text-align: center;
    line-height: 1;
    letter-spacing: calc(0.15em / var(--fz));
  }

  .stampBook__smallText {
    --fz: 11;
    font-size: calc(var(--fz) / var(--html-fz) * 1rem);
    color: #221815;
    line-height: 2.8;
    letter-spacing: calc(0.11em / var(--fz));
    text-align: center;
  }

  .stampBook__body {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    padding-inline-end: calc(91 / var(--html-fz) * 1rem);
    gap: calc(27.25 / var(--html-fz) * 1rem);
  }

  .stampBook__qr {
    margin-inline: auto 0;
    width: calc(100 / var(--html-fz) * 1rem);
  }

  .stampBook__balloon {
    position: absolute;
    top: calc(27 / var(--html-fz) * 1rem);
    right: calc(-96.25 / var(--html-fz) * 1rem);
    width: calc(177 / var(--html-fz) * 1rem);
  }

  .howToPoint {
    --mt: 74;
    margin-block-start: calc(var(--mt) / var(--html-fz) * 1rem);
  }

  .howToPoint__list {
    --gap: 34;
    --mt: 54;
    --max-w: 380;
    display: grid;
    gap: calc(var(--gap) / var(--html-fz) * 1rem);
    margin-block-start: calc(var(--mt) / var(--html-fz) * 1rem);
    margin-inline: auto;
    max-width: calc(var(--max-w) / var(--html-fz) * 1rem);
  }

  .howToPoint__list__item {
    --gap: 20;
    --p: 30;
    display: grid;
    grid-template-columns: 1fr calc(90 / var(--html-fz) * 1rem);
    align-items: center;
    gap: calc(var(--gap) / var(--html-fz) * 1rem);
    padding: calc(var(--p) / var(--html-fz) * 1rem);
    background-color: #fff;
    border-radius: calc(20 / var(--html-fz) * 1rem);

    > p {
      --fz: 14;
      grid-area: 1/1;
      font-size: calc(var(--fz) / var(--html-fz) * 1rem);
      line-height: calc(22 / 14);
      letter-spacing: calc(0.14em / var(--fz));

      > .__small {
        font-size: calc(12 / 14 * 1em);
      }
    }

    > .__image {
      grid-area: 1/2;
    }
  }

  .pointGetText {
    --mt: 40;
    --fz: 18;
    margin-block-start: calc(var(--mt) / var(--html-fz) * 1rem + var(--leading-trim));
    margin-inline: auto;
    width: fit-content;
    font-size: calc(var(--fz) / var(--html-fz) * 1rem);
    line-height: calc(30 / 18);
    letter-spacing: calc(0.18em / 18);

    > em {
      color: #FF5001;
      font-weight: bold;
    }
  }

  .hoverLink {
    transition: opacity var(--duration-hover) var(--ease);
    &:where(:any-link, :enabled, summary):focus-visible {
      opacity: 0.8;
    }
  }

  .u-mx-auto {
    margin-inline: auto;
  }

}

@media not all and (min-width: 769px) {
  #lp {
    .title {
      &:has(.__text) {
        background-color: unset;
        padding-block: unset;
        padding-inline: unset;
        text-align: center;
      }

      &._benefits_ {
        min-width: calc(280 / var(--html-fz) * 1rem);
        text-align: center;
      }

      .__text {
        display: inline-block;
        background-color: #fff;
        padding-block: calc(4 / var(--fz) * 1em);
        padding-inline: calc(7 / var(--fz) * 1em);

        &:nth-child(n+2) {
          margin-block-start: calc(3 / var(--fz) * 1em);
        }
      }
    }

    .campaignInfo {
      grid-template-columns: auto 1fr;
      row-gap: calc(15 / var(--html-fz) * 1rem);
      column-gap: calc(10 / var(--html-fz) * 1rem);

      dt {
        white-space: nowrap;
        align-self: start;

        &::before {
          aspect-ratio: 1;
          border-radius: 50%;
        }
      }

      dd {
        text-align: justify;
      }
    }

    .what__images figure:last-child {
      margin-block-start: calc(10 / var(--html-fz) * 1rem);
    }

    .participationList__item {
      position: relative;

      > .__num {
        position: absolute;
        top: 0;
        left: calc(28 / var(--html-fz) * 1rem);
        transform: translateY(-50%);
      }
    }

    .howToPoint__list__item {
      position: relative;

      > .__num {
        position: absolute;
        top: 0;
        left: calc(28 / var(--html-fz) * 1rem);
        transform: translateY(-50%);
      }
    }

    .point__moreover {
      display: inline-block;
      margin-block: calc(20 / var(--html-fz) * 1rem);
    }

    .u-hidden-max-pc {
      display: none;
    }

    .u-none-max-pc {
      display: none;
    }
  }
}

@media (min-width: 769px) {
  #lp {
    .c-button._lp_ {
      &._pdf_ {
        --px: 40;
      }
    }

    .campaignInfo {
      --mt: 36;
      --fz: 18;

      dt {
        --gap-x: 10;
        line-height: 1;
        
        &::before {
          --w: 2;
          height: 100%;
        }
      }

      dd {
        margin-block-start: calc(17 / var(--html-fz) * 1rem + var(--leading-trim));
        font-size: calc(16 / var(--html-fz) * 1rem);
        line-height: 1.6;
        letter-spacing: calc(0.15 / 16 * 1em);

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

    .what {
      --mt: 67;
    }

    .what__sentence {
      --mt: 31;
      --fz: 18;
      text-align: center;
    }

    .what__images {
      --max-w: 910;
      display: grid;
      grid-template-columns: calc(540 / 910 * 100%) 1fr;
      column-gap: calc(10 / var(--html-fz) * 1rem);
    }

    .what__button {
      --mt: 40;
    }

    .point {
      --mt: 43;
      display: grid;
      grid-template-columns: repeat(5, auto);
      align-items: end;
      column-gap: calc(20 / var(--html-fz) * 1rem);
      margin-inline: auto;
      width: fit-content;
    }

    .point__item {
      --gap-y: 20;
      justify-self: end;

      p {
        grid-area: 2/1;
      }

      img {
        --w: 228;
      }

      > .__imageWrap {
        grid-area: 1/1;
      }

      &._02_ {
        --gap-y: 18;
        justify-self: start;

        img {
          --w: 226;
        }
      }

      &._03_ {
        --gap-y: 20;
        justify-self: start;

        img {
          --w: 266;
        }
      }
    }

    .point__moreover {
      --w: 82;
      align-self: start;
      margin-block-start: calc(143 / var(--html-fz) * 1rem);
      /* margin-inline-start: calc(51 / var(--html-fz) * 1rem);
      margin-inline-end: calc(41 / var(--html-fz) * 1rem); */
    }

    .participationList {
      --mt: 36;
      --max-w: 640;
    }

    .participationList__item {
      --mt: 10;
      grid-template-columns: calc(48 / var(--html-fz) * 1rem) auto 1fr;

      > .__num {
        grid-area: 1/1;
      }

      > p {
        grid-area: 1/3;
      }

      > .__image {
        grid-area: 1/2;
      }
    }

    .participationNote {
      --mt: 45;
      --max-w: 640;
    }

    .howToPoint {
      --mt: 68;
    }

    .howToPoint__list {
      --gap: 10;
      --mt: 36;
      --max-w: 800;
      grid-template-columns: repeat(3, 1fr);
    }

    .howToPoint__list__item {
      grid-template-rows: auto calc(90 / var(--html-fz) * 1rem) 1fr;
      grid-template-columns: none;
      
      > * {
        justify-self: center;
      }

      > p {
        grid-area: 3/1;
        align-self: center;
      }

      > .__image {
        grid-area: 2/1;
      }
    }

    .pointGetText {
      text-align: center;
    }

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

    .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;
    }
  }
}

@media (hover: hover) and (pointer: fine) {
  #lp {
    .c-button._lp_:where(:any-link, :enabled, summary):hover {
      background-color: var(--white);
    }

    .c-button._lp_._pdf_:where(:any-link, :enabled, summary):hover {
      .c-button__arrow {
        background-color: var(--black);
        transform: none;
      }
    }

    .precautions p a:where(:any-link, :enabled, summary):hover {
      opacity: 0.8;
    }

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

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