@charset "UTF-8";

/* =====================
  common
===================== */
.main article {
  padding-block: 95px 120px;

  @media (width <= 768px) {
    padding-block: calc((100 / 390) * 40 * 1vw) calc((100 / 390) * 64 * 1vw);
  }

  /* ==== introduction ==== */
  .introduction {
    @media (width <= 768px) {
      line-height: 2;
    }
  }
}

/* =====================
  table
===================== */
.main article .u-scroll-table {
  @media (width <= 768px) {
    &::before {
      inset-block-start: 3%;
    }
  }
}

.main article table {
  position: relative;
  margin-block-start: 56px;

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

  /* ==== th,td ==== */
  & :where(th, td) {
    padding-block: 14.7px 14.53px;
    transition: background 250ms ease 0s;

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

  /* ==== thead ==== */
  & thead {
    @media (width > 768px) {
      position: sticky;
      inset-block-start: 96px;
      z-index: 2;
    }

    /* ==== th ==== */
    & th {
      text-align: center;
    }

    & tr {
      /* ==== first ==== */
      &:first-child {
        & th:nth-child(1) {
          inline-size: 418px;

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

        & th:nth-child(2) {
          @media (width <= 768px) {
            inline-size: calc((100 / 390) * 290 * 1vw);
          }
        }
      }

      /* ==== last ==== */
      &:last-child {
        & th {
          text-align: left;

          &.tac {
            text-align: center;
          }

          /* ==== first ==== */
          &:nth-child(1) {
            inline-size: 192px;

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

          /* ==== other ==== */
          &:nth-child(3),
          &:nth-child(4),
          &:nth-child(5) {
            inline-size: 288px;

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

  /* ==== tbody ==== */
  & tbody {
    & tr {
      & th {
        background: white;
      }

      @media (any-hover: hover) {
        &:has(a) {
          &:hover {
            & td {
              background: var(--lightgreen);
            }
          }
        }
      }

      & td:last-child:not(:has(a))::before,
      & td:nth-last-child(2):not(:has(a))::before {
        display: block flow;
        margin-inline: auto;
        text-align: center;
        pointer-events: none;
        content: '-';
      }
    }
  }

  /* ==== pdf ==== */
  & a {
    position: relative;

    &::after {
      position: absolute;
      inset-block-end: -30px;
      inset-inline-start: 50%;
      padding-block: 6px;
      padding-inline: 10px;
      font-size: 12px;
      line-height: 1;
      color: white;
      white-space: nowrap;
      pointer-events: none;
      content: attr(data-title);
      background: var(--green);
      border-radius: 4px;
      opacity: 0;
      translate: -50% 0;
      transition: all 250ms ease 0s;
    }

    @media (any-hover: hover) {
      &:hover {
        &::after {
          inset-block-end: -25px;
          opacity: 1;
        }

        &::before {
          opacity: 0.7;
        }
      }
    }
  }

  & a[href*='.pdf']::before {
    display: block flow;
    inline-size: 29px;
    block-size: 31px;
    margin-inline: auto;
    content: '';
    background-image: url('../img/_common/pdf.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transition: all 250ms ease 0s;
  }

  @media (width <= 768px) {
    & a[href*='.pdf']::before {
      inline-size: calc((100 / 390) * 23 * 1vw);
      block-size: calc((100 / 390) * 25 * 1vw);
    }
  }
}