@charset "UTF-8";

/* =====================
  article
===================== */
.article {
  padding-block: 162px 155px;

  @media (width <=768px) {
    padding-block: var(--nudge-7);
  }

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

    @media (width > 768px) {
      padding-inline: 80px;
    }
  }

  /* ==== section-wrap ==== */
  .section-wrap {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 39px;

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

    h2 {
      position: relative;
      padding-block-end: 13px;
      margin-block-end: 14px;
      font-family: var(--serif);
      font-size: 22px;
      font-weight: 600;
      color: var(--primary);

      @media (width <=768px) {
        padding-block-end: var(--nudge-1);
        margin-block-end: var(--nudge-2);
        font-size: calc((100 / 390) * 18 * 1vw);
      }

      &::before,
      &::after {
        position: absolute;
        inset-block-end: 0;
        inset-inline-start: 0;
        display: block flow;
        inline-size: 100%;
        block-size: 2px;
        content: '';
      }

      &::before {
        background: #e6e6e6;
      }

      &::after {
        inline-size: 63px;
        background: var(--primary);

        @media (width <=768px) {
          inline-size: calc((100 / 390) * 30 * 1vw);
        }
      }
    }

    >section {
      display: block grid;
      align-content: start;
      align-items: start;

      section {
        display: block grid;
        gap: 10px;
        align-content: start;
        align-items: start;

        @media (width <=768px) {
          gap: var(--nudge-2);
        }
      }

      h3 {
        font-size: 17px;
        font-weight: 600;
        color: var(--primary);

        @media (width <=768px) {
          font-size: calc((100 / 390) * 15 * 1vw);
        }
      }
    }

    ul {
      display: block grid;
      gap: 10px;
      align-items: start;
      padding-inline-start: 20px;

      @media (width <=768px) {
        gap: var(--nudge-1);
        padding-inline-start: var(--nudge-1);
      }

      li {
        position: relative;
        padding-inline-start: 29px;

        @media (width <=768px) {
          padding-inline-start: 4.3vw;
        }

        &::before {
          position: absolute;
          inset-block-start: 13px;
          inset-inline-start: 0;
          inline-size: 18px;
          block-size: 1px;
          content: '';
          background: var(--primary);

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

        a {
          display: block flow;
          transition: all 250ms ease 0s;

          @media (any-hover: hover) {
            &:hover {
              opacity: 0.7;
            }
          }
        }
      }
    }
  }
}