@charset "UTF-8";

/* =====================
  01
===================== */
.article[data-id='1'] {
  padding-block: 78px 90px;

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

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

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

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

    p {
      font-size: 15px;

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

  /* ==== author ==== */
  .author {
    margin-inline: auto 0;
    font-size: 15px;
    font-weight: 500;
    text-align: right;

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

  /* ==== section[data-id="1"] ==== */
  section[data-id='1'] {
    display: block grid;
    margin-block-start: 2px;

    @media (width <=768px) {
      gap: var(--nudge-1);
      margin-block-start: 0;
    }

    /* ==== p ==== */
    p {
      font-weight: 500;
    }

    /* ==== ol ==== */
    ol {
      display: block grid;
      gap: 30px;
      margin-block: 40px;
      font-size: 15px;
      font-weight: 500;
      counter-reset: number;

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

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

        @media (width <=768px) {
          padding-inline-start: 5.5vw;
          font-size: calc((100 / 390) * 14 * 1vw);
        }

        &::before {
          position: absolute;
          inset-block-start: 0;
          inset-inline-start: 5px;
          content: counter(number) '.';
          counter-increment: number;

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

  /* ==== table ==== */
  .table {
    display: block grid;
    gap: 25px;

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

    /* ==== table ==== */
    table {
      inline-size: 100%;
      margin-block-start: 15px;
      table-layout: fixed;

      @media (width <=768px) {
        margin-block-start: var(--nudge-1);
      }

      th {
        inline-size: 200px;
        font-weight: 700;
        background: #eee;

        @media (width <=768px) {
          inline-size: 20vw;
        }
      }

      th,
      td {
        padding-block: 14px;
        padding-inline: 17px;
        font-size: 15px;
        font-weight: 500;
        border: 1px solid #c3c4c7;

        @media (width <=768px) {
          padding-block: 3vw;
          padding-inline: calc((100 / 390) * 9 * 1vw);
          font-size: calc((100 / 390) * 13 * 1vw);
          vertical-align: middle;
          word-break: auto-phrase;

          a[href^='tel:'] {
            text-decoration: underline;
          }
        }
      }

      a[href^='mailto:'] {
        text-decoration: underline;
        transition: opacity 250ms ease 0s;

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

    /* ==== p ==== */
    p {
      font-weight: 500;

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

  /* ==== foot ==== */
  .foot {
    display: block flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-block-start: 14px;

    @media (width <=768px) {
      align-items: center;
      margin-block-start: 0;

      img {
        inline-size: calc((100 / 390) * 70 * 1vw);
      }
    }

    .date {
      text-align: right;

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

/* =====================
  action
===================== */
.article[data-id='action'] {
  padding-block-end: 89px;

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

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

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

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

    p {
      font-size: 15px;

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

  /* ==== list ==== */
  .list {
    display: block grid;
    gap: 40px;

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

    section {
      display: block grid;
      gap: 25px;

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

/* =====================
  kpi
===================== */
.article[data-id='kpi'] {
  padding-block-end: 160px;

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

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

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

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

    p {
      font-size: 15px;

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

  /* ==== list ==== */
  .list {
    display: block grid;
    gap: 40px;

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

    section {
      display: block grid;
      gap: 25px;

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