@charset "UTF-8";

/* ユニーク (prefix: un- )
----------------------------------------------------------------- */
.un-side-effectColumn {
  display: grid;
  grid-auto-flow: column;
  justify-content: start;
  gap: 30px;

  @media screen and (max-width: 767px) {
    & {
      grid-auto-flow: unset;
      grid-template-columns: 1fr;
      gap: calc(17px + var(--leading-trim)) 0;
    }
  }
}

.un-side-effectColumn_item {
  &:first-child {
    .bl-list {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: calc(20px + var(--leading-trim)) 0;

      @media screen and (max-width: 767px) {
        & {
          gap: calc(17px + var(--leading-trim)) 0;
        }
      }
    }

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

.un-side-effectAnchor {
  & + .bl-attention {
    margin-block-start: 40px;
  }
}

.un-side-effectAnchor_body {
  position: relative;
}

.un-side-effectAnchor_item {
  --_parrentW: 1120;
  --_parrentH: 561;

  display: grid;
  grid-auto-flow: column;
  line-height: 1;
  position: absolute;

  &.--anchorItem {
    width: calc((213 / var(--_parrentW)) * 100%);
    top: calc((106 / var(--_parrentH)) * 100%);
    left: calc((49 / var(--_parrentW)) * 100%);
  }

  &.--anchorItem2 {
    width: calc((210 / var(--_parrentW)) * 100%);
    top: calc((240 / var(--_parrentH)) * 100%);
    left: calc((49 / var(--_parrentW)) * 100%);
  }

  &.--anchorItem3 {
    width: calc((109 / var(--_parrentW)) * 100%);
    top: calc((281 / var(--_parrentH)) * 100%);
    left: calc((49 / var(--_parrentW)) * 100%);
  }

  &.--anchorItem4 {
    width: calc((88 / var(--_parrentW)) * 100%);
    top: calc((323 / var(--_parrentH)) * 100%);
    left: calc((49 / var(--_parrentW)) * 100%);
  }

  &.--anchorItem5 {
    width: calc((282 / var(--_parrentW)) * 100%);
    top: calc((365 / var(--_parrentH)) * 100%);
    left: calc((49 / var(--_parrentW)) * 100%);
  }

  &.--anchorItem6 {
    width: calc((161 / var(--_parrentW)) * 100%);
    top: calc((164 / var(--_parrentH)) * 100%);
    left: calc((655 / var(--_parrentW)) * 100%);
  }
}

.un-side-effectAnchorSp {
  & + .bl-attention {
    margin-block-start: 40px;
  }
}

.un-side-effectAnchorSp_body {
  width: fit-content;
  max-width: 350px;
  margin-inline: auto;
  position: relative;
}

.un-side-effectAnchorSp_item {
  --_parrentW: 350;
  --_parrentH: 1411;

  display: grid;
  grid-auto-flow: column;
  line-height: 1;
  position: absolute;

  &.--anchorItem {
    width: calc((239 / var(--_parrentW)) * 100%);
    top: calc((350 / var(--_parrentH)) * 100%);
    left: calc((56 / var(--_parrentW)) * 100%);
  }

  &.--anchorItem2 {
    width: calc((227 / var(--_parrentW)) * 100%);
    top: calc((80 / var(--_parrentH)) * 100%);
    left: calc((23 / var(--_parrentW)) * 100%);
  }

  &.--anchorItem3 {
    width: calc((118 / var(--_parrentW)) * 100%);
    top: calc((130 / var(--_parrentH)) * 100%);
    left: calc((23 / var(--_parrentW)) * 100%);
  }

  &.--anchorItem4 {
    width: calc((96 / var(--_parrentW)) * 100%);
    top: calc((183 / var(--_parrentH)) * 100%);
    left: calc((23 / var(--_parrentW)) * 100%);
  }

  &.--anchorItem5 {
    width: calc((305 / var(--_parrentW)) * 100%);
    top: calc((235 / var(--_parrentH)) * 100%);
    left: calc((23 / var(--_parrentW)) * 100%);
  }

  &.--anchorItem6 {
    width: calc((179 / var(--_parrentW)) * 100%);
    top: calc((929 / var(--_parrentH)) * 100%);
    left: calc((119 / var(--_parrentW)) * 100%);
  }
}