@charset "UTF-8";

/* =====================
  common
===================== */
.main article {
  /* ==== article ==== */
  &:nth-child(1 of article) {
    margin-block-start: 103px;

    @media (width <= 768px) {
      margin-block-start: 12.6vw;
    }
  }

  &:last-child {
    padding-block-end: 99px;

    @media (width <= 768px) {
      padding-block-end: 17vw;
    }
  }

  & + article {
    margin-block-start: 82px;

    @media (width <= 768px) {
      margin-block-start: 11vw;
    }
  }

  /* ==== inner ==== */
  .u-inner {
    display: block grid;

    @media (width <= 768px) {
      display: block flex;
      flex-direction: column;
    }

    /* ==== list ==== */
    .list {
      display: block grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0 40px;
      margin-block-start: 32px;

      @media (width <= 768px) {
        grid-template-columns: repeat(2, 1fr);
        gap: 0 6.5vw;
        margin-block-start: 4.5vw;
      }

      & .anchor {
        position: relative;
        display: block grid;
        align-items: center;
        padding-block: 9px 13.6px;
        padding-inline: 13px 0;
        line-height: 1.8;
        word-break: break-all;
        transition: all 250ms ease 0s;

        @media (width <= 768px) {
          padding-block: calc((100 / 390) * 6.9 * 1vw);
          padding-inline: calc((100 / 390) * 13 * 1vw) 0;
        }

        &::before {
          position: absolute;
          inset-block-start: 21px;
          inset-inline-start: 0;
          inline-size: 8px;
          aspect-ratio: 1 / 1;
          content: '';
          background: linear-gradient(99deg, #274827 15.76%, #aad59a 97.34%);
          border-radius: calc(infinity * 1px);
        }

        @media (width <= 768px) {
          &::before {
            inset-block-start: calc((100 / 390) * 16.3 * 1vw);
            inline-size: calc((100 / 390) * 7 * 1vw);
          }
        }

        &:is(a) {
          @media (any-hover: hover) {
            &:hover {
              color: var(--green);
              text-decoration: underline;
            }
          }
        }
      }
    }
  }
}