#lp {
  --html-fz: 16;

  .sr-only {
    display: none;
  }

  .section {
    --bgc: #FFF6EE;
    --pt: 60;
    --pb: 60;
    padding-block: calc(var(--pt) / var(--html-fz) * 1rem) calc(var(--pb) / var(--html-fz) * 1rem);
    padding-inline: calc(20 / var(--html-fz) * 1rem);
    background-color: var(--bgc);
  }

  .section--point {
    background: url(https://cd-contents.s3.us-east-2.amazonaws.com/feature/cp_tospo/img/point_bg_sp.webp) repeat-y center top/100% auto;
  }

  .title {
    margin-inline: auto;
    width: fit-content;

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

  .kvImage {
    border-top-left-radius: calc(20 / var(--html-fz) * 1rem);
    border-top-right-radius: calc(20 / var(--html-fz) * 1rem);
    width: 100%;
  }

  .infoText {
    --fz: 15;
    margin-block-start: calc((40 / var(--html-fz) * 1rem) + var(--leading-trim));
    font-size: calc(var(--fz) / var(--html-fz) * 1rem);
    font-weight: var(--font-bold);
    line-height: 2;
    letter-spacing: calc(1.25em / var(--fz));
    text-align: center;

    em {
      color: #F55F00;
    }
  }

  .requirements {
    --mt: 40;
    --px: 20;
    --max-w: 600;
    margin-block-start: calc(var(--mt) / var(--html-fz) * 1rem);
    margin-inline: auto;
    padding-block: calc(20 / var(--html-fz) * 1rem);
    padding-inline: calc(var(--px) / var(--html-fz) * 1rem);
    max-width: calc(var(--max-w) / var(--html-fz) * 1rem);
    background-color: #E49736;
    border-radius: calc(10 / var(--html-fz) * 1rem);
  }

  .requirements__title {
    --fz: 17;
    margin-block-end: calc(10 / var(--html-fz) * 1rem);
    color: #fff;
    font-size: calc(var(--fz) / var(--html-fz) * 1rem);
    font-weight: var(--font-bold);
    line-height: calc(22 / 17);
    letter-spacing: calc(0.17em / var(--fz));
    text-align: center;
  }

  .requirements__listItem {
    --fz: 15;
    color: #fff;
    font-size: calc(var(--fz) / var(--html-fz) * 1rem);
    font-weight: var(--font-medium);
    line-height: calc(22 / 15);
    letter-spacing: calc(0.15em / var(--fz));

    > .__tarm {
      display: flex;

      &::before {
        --mr: 8;
        --w: 13;
        content: '';
        display: block;
        margin-inline-end: calc(var(--mr) / var(--html-fz) * 1rem);
        width: calc(var(--w) / var(--html-fz) * 1rem);
        aspect-ratio: 13/19;
        background: url(https://cd-contents.s3.us-east-2.amazonaws.com/feature/cp_tospo/img/requirements_icon_01.svg) no-repeat center/contain;
      }

      &::after {
        content: '：';
        display: block;
      }
    }

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

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

  .button {
    --px: 20;
    --py: 26;
    --fz: 17;
    position: relative;
    display: block;
    padding-block: calc(var(--py) / var(--html-fz) * 1rem);
    padding-inline: calc(var(--px) / var(--html-fz) * 1rem);
    color: #fff;
    font-size: calc(var(--fz) / var(--html-fz) * 1rem);
    font-weight: var(--font-bold);
    line-height: calc(22 / 17);
    letter-spacing: calc(-0.43em / var(--fz));
    text-align: center;
    border-radius: calc(infinity * 1px);
    background-color: #009EC4;
    border: 3px solid #fff;
    transition: background-color var(--duration-hover) var(--ease), color var(--duration-hover) var(--ease);

    &::after {
      --r: 25; 
      position: absolute;
      top: 50%;
      right: calc(var(--r) / var(--html-fz) * 1rem);
      transform: translateY(-50%);
      content: '';
      display: block;
      width: calc(11 / var(--html-fz) * 1rem);
      aspect-ratio: 11/18;
      mask: url(https://cd-contents.s3.us-east-2.amazonaws.com/feature/cp_tospo/img/arrow_icon_01.svg) no-repeat center/contain;
      background: #fff;
      pointer-events: none;
      transition: background-color var(--duration-hover) var(--ease);
    }
  }

  .button:where(:any-link, :enabled, summary):focus-visible {
    background-color: #fff;
    color: #009EC4;

    &::after {
      background-color: #009EC4;
    }
  }

  .info-block {
    margin-block-start: calc((40 / var(--html-fz) * 1rem) + var(--leading-trim));

    > p {
      margin-block-start: calc((18 / var(--html-fz) * 1rem) + var(--leading-trim));
      font-size: calc(14 / var(--html-fz) * 1rem);
      line-height: 1.6;
      letter-spacing: calc(1.25em / 14);
    }
  }

  .info-wrap {
    position: relative;
    width: fit-content;

    &::after {
      --pos: 3;
      content: '';
      display: block;
      width: 100%;
      height: 100%;
      position: absolute;
      bottom: calc(-1 * var(--pos) / var(--html-fz) * 1rem);
      right: calc(-1 * var(--pos) / var(--html-fz) * 1rem);
      background-color: #eee;
      border-radius: calc(5 / var(--html-fz) * 1rem);
      pointer-events: none;
    }

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

  .info {
    --fz: 15;
    --py: 9;
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: auto 1fr;
    font-weight: var(--font-bold);
    border-radius: calc(5 / var(--html-fz) * 1rem);
    overflow: hidden;
  }

  .info__title {
    --px: 10;
    padding-block: calc(var(--py) / var(--html-fz) * 1rem);
    padding-inline: calc(var(--px) / var(--html-fz) * 1rem);
    color: #fff;
    font-size: calc(var(--fz) / var(--html-fz) * 1rem);
    background-color: #F55F00;
    width: fit-content;
    min-width: calc(70 / var(--html-fz) * 1rem);
    text-align: center;
  }

  .info__data {
    --pl-info__data: 16;
    --pr-info__data: 20;
    padding-block: calc(var(--py) / var(--html-fz) * 1rem);
    padding-inline: calc(var(--pl-info__data) / var(--html-fz) * 1rem) calc(var(--pr-info__data) / var(--html-fz) * 1rem);
    width: fit-content;
    color: #221815;
    font-size: calc(var(--fz) / var(--html-fz) * 1rem);
    background-color: #fff;
  }

  .pointBlock-container {
    margin-block-start: 3.8rem;
  }

  .pointBlock {
    position: relative;
    padding-block-start: calc(3.12rem + var(--leading-trim));
    background-color: #fff;
    border-radius: calc(10 / var(--html-fz) * 1rem);
    box-shadow: 0.19rem 0.19rem 0px 0px rgba(238, 238, 238, 1);

    & + & {
      margin-block-start: 3.81rem;
    }
  }

  .pointBlock__title {
    display: flex;
    justify-content: center;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transform: translateY(-50%);

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

  .pointBlock__text {
    --fz: 16;
    font-size: calc(var(--fz) / var(--html-fz) * 1rem);
    font-weight: var(--font-bold);
    line-height: 1.6;
    letter-spacing: calc(1.25em / 15);
    text-align: center;

    em {
      color: #F55F00;
    }
  }

  .pointBlock__image {
    margin-inline: auto;
    width: min(20rem, calc(254 / 320 * 100%));
  }

  .pointBlock__pointImage {
    margin-inline: auto;
    width: min(12.875rem, calc(206 / 320 * 100%));
  }

  .pointBlock__foot {
    margin-block-start: calc(1.25rem + var(--leading-trim));
    padding-block-end: 1.25rem;
  }

  .pointBlock__foot--1 {
    position: relative;

    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      right: 0.25rem;
      display: block;
      width: 4.75rem;
      aspect-ratio: 76/120;
      background: url(https://cd-contents.s3.us-east-2.amazonaws.com/feature/cp_tospo/img/point_img_02.webp) no-repeat right bottom/contain;
    }
  }

  .pointBlock__footText {
    display: grid;
    place-items: center;
    margin-block-start: 1.25rem;
    margin-inline: auto;
    width: min(17rem, calc(278 / 320 * 100%));
    min-height: calc(32 / var(--html-fz) * 1rem);
    color: #1196BF;
    font-size: 1rem;
    font-weight: var(--font-bold);
    line-height: 1;
    letter-spacing: calc(1.25em / 16);
    border-radius: calc(infinity * 1px);
    background-color: #FFF100;
  }

  .aboutImages {
    --gap: 40;
    --mt: 2.5rem;
    margin-block-start: calc(var(--mt) + var(--leading-trim));
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: calc(var(--gap) / var(--html-fz) * 1rem);
    margin-inline: auto;
    width: fit-content;
  }

  .aboutImages__item {
    text-align: center;

    p {
      margin-block-start: 1.88rem;
      font-size: 1rem;
      font-weight: var(--font-bold);
      letter-spacing: calc(1.25em / 16);
      line-height: 1;
      text-align: center;

      em {
        color: #F55F00;
      }
    }
  }

  .aboutImages__image {
    width: auto;
    height: 8.75rem;
    aspect-ratio: 132/140;
  }

  .aboutImages__image--2 {
    aspect-ratio: 117/140;
  }

  .aboutBlock {
    margin-block-start: 1.88rem;
    padding-block: 2.8125rem;
    padding-inline: 1.25rem;
    background-color: #fff;
    border-radius: 1.25rem;
  }

  .aboutBlock__item {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 0.62rem;

    &::before {
      content: '';
      grid-area: 1/1;
      display: block;
      margin-block-start: calc(2 / 16 * 1rem);
      width: 1.3125rem;
      aspect-ratio: 1;
      background: url(https://cd-contents.s3.us-east-2.amazonaws.com/feature/cp_tospo/img/check_icon.svg) no-repeat center/contain;
    }

    & + & {
      --mt: 1.88rem;
      margin-block-start: calc(var(--mt) + var(--leading-trim));
    }
  }

  .aboutBlock__item__title {
    grid-area: 1/2;
    font-size: 1rem;
    font-weight: var(--font-bold);
    letter-spacing: calc(1.25em / 16);
  }

  .aboutBlock__item__text {
    --mt: 0.62rem;
    margin-block-start: calc(var(--mt) + var(--leading-trim));
    grid-area: 2/2;
    font-size: 0.875rem;
    line-height: calc(22/14);
    letter-spacing: calc(0.14em / 14);
  }

  .aboutText {
    --mt: 1.25rem;
    margin-block-start: calc(var(--mt) + var(--leading-trim));
    margin-inline: auto;
    width: fit-content;
    font-size: 0.8125rem;
    line-height: 1.6;
    letter-spacing: calc(0.15em / 13);
  }

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

  .participationList {
    --mt: 40;
    --max-w: 600;
    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 {
    border-radius: calc(10 / var(--html-fz) * 1rem);
    background-color: #fff;
    overflow: hidden;

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

    > .__num {
      --px: 20;
      --py: 6;
      --fz: 16;
      display: inline-flex;
      gap: calc(10 / var(--html-fz) * 1rem);
      padding-block: calc(var(--py) / var(--html-fz) * 1rem);
      padding-inline: calc(var(--px) / var(--html-fz) * 1rem);
      font-size: calc(var(--fz) / var(--html-fz) * 1rem);
      font-weight: var(--font-bold);
      line-height: 1;
      letter-spacing: calc(1.25em / var(--fz));
      color: #fff;
      background-color: #009EC4;
      border-bottom-right-radius: inherit;
    }

    .__contentBlock {
      --px: 20;
      --pt: 12;
      --pb: 20;
      --gap: 10;
      display: grid;
      grid-template-columns: 1fr calc(70 / var(--html-fz) * 1rem);
      align-items: center;
      column-gap: calc(var(--gap) / var(--html-fz) * 1rem);
      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);
    }

    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));
      text-align: left;

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

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

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

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

  /* utility classes */
  .u-indent-1 {
    text-indent: -1em;
    padding-inline-start: 1em;
  }

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

@media not all and (min-width: 769px) {
  #lp {
    .section--point {
      --pb: 35.42;
    }

    .title--about {
      img {
        --h: 90;
      }
    }

    .requirements__listItem {
      > .__data {
        padding-inline-start: calc((13 / var(--html-fz) * 1rem) + (8 / var(--html-fz) * 1rem));
      }
    }

    .button-wrap--about {
      --mt: 30;
    }

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

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

@media (min-width: 769px) {
  #lp {
    .section--point {
      background-image: url(https://cd-contents.s3.us-east-2.amazonaws.com/feature/cp_tospo/img/point_bg_pc.webp);
    }

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

    .requirements {
      --px: 60;
    }

    .requirements__listItem {
      display: grid;
      align-items: start;
      grid-template-columns: calc((13 + 8 + 138) / var(--html-fz) * 1rem) 1fr;

      > .__tarm {
        grid-area: 1/1;

        &::after {
          margin-inline: auto 0;
        }
      }

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

    .participationList__item {
      position: relative;

      .__num {
        position: absolute;
        top: 0;
        left: 0;
      }

      .__contentBlock {
        --px: 60;
        --pt: 20;
        --gap: 20;
      }
    }

    .button {
      --py: 34;
      --fz: 20;
      line-height: 1.6;
      letter-spacing: calc(0.15em / var(--fz));
      &::after {
        --r: 30;
      }
    }

    .infoText {
      --fz: 16;
    }

    .info-block {
      margin-inline: auto;
      width: fit-content;
    }

    .info {
      --py: 8;
      --fz: 16;
    }

    .info__data {
      --pl-info__data: 20;
    }

    .pointBlock-container {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 2.5rem;
      max-width: 47.5rem;
      margin-inline: auto;
    }

    .pointBlock {
        & + & {
        margin-block-start: 0;
      }
    }

    .aboutImages {
      --gap: 70;
      --mt: 3.75rem;
      align-items: end;
    }

    .aboutImages__image {
      height: 11.75rem;
    }

    .aboutImages__image--2 {
      height: 11.5rem;
    }

    .aboutImages__image {
      font-size: 1.25rem;
      letter-spacing: calc(1.25em / 20);
    }

    .aboutBlock {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      row-gap: calc(1.88rem + var(--leading-trim));
      column-gap: 3.12rem;
      max-width: 44.5rem;
      margin-block-start: 2.5rem;
      margin-inline: auto;
      padding-inline: 3.0625rem;
    }

    .aboutBlock__item {
      & + & {
        margin-block-start: 0;
      }
    }

    .aboutBlock__item__text {
      --mt: 0.91rem;
    }

    .aboutText {
      --mt: 1.88rem;
    }

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

    /* 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 (hover: hover) and (pointer: fine) {
  #lp {
    .precautions p a:where(:any-link, :enabled, summary):hover {
      opacity: 0.8;
    }

    .button:where(:any-link, :enabled, summary):hover {
      background-color: #fff;
      color: #009EC4;

      &::after {
        background-color: #009EC4;
      }
    }

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