@charset "UTF-8";

/* =====================
  01
===================== */
.tab-antisocial {
  .article[data-id='1'] {
    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);
        }
      }
    }

    /* ==== 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;
        margin-block: 40px 0;
        font-size: 15px;
        font-weight: 500;
        counter-reset: number;

        @media (width <=768px) {
          gap: 0;
          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);
          }
        }
      }
    }
  }
}