@charset "UTF-8";

@layer utility {
  /* =====================
    u-inner
  ===================== */
  .u-inner {
    max-inline-size: 960px;
    margin-inline: auto;
  }

  /* =====================
    u-title
  ===================== */
  .u-title {
    display: block grid;
    gap: 9px;
    justify-content: center;
    inline-size: fit-content;
    margin-inline: auto;

    @media (width <= 768px) {
      gap: 3.3vw;
    }

    & img {
      display: block flow;
    }

    &::after {
      display: block flow;
      inline-size: 120px;
      block-size: 4px;
      margin-inline: auto;
      content: '';
      background: var(--sub);
    }

    @media (width <= 768px) {
      &::after {
        inline-size: calc((100 / 390) * 120 * 1vw);
        block-size: calc((100 / 390) * 4 * 1vw);
      }
    }
  }

  /* =====================
    u-table
  ===================== */
  .u-table {
    --_border-color: #b4b4b4;

    position: relative;
    z-index: 4;
    display: block grid;
    grid-template-columns: 157px 1fr;
    gap: 1px;
    inline-size: 800px;
    padding: 1px;
    margin-inline: auto;
    font-size: 20px;

    @media (width <= 768px) {
      grid-template-columns: calc((100 / 390) * 96 * 1vw) 1fr;
      inline-size: calc((100 / 390) * 350 * 1vw);
      font-size: calc((100 / 390) * 18 * 1vw);
    }

    /* ==== tr ==== */
    .tr {
      display: block grid;
      grid-template-columns: subgrid;
      grid-column: 1 / -1;

      /* ==== a ==== */
      & a:not([href^='tel:']) {
        color: var(--primary);
        text-decoration: underline;

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

        @media (width <= 768px) {
          & a {
            color: var(--primary);
            text-decoration: underline;
          }
        }
      }

      & :where(dt, dd) {
        place-content: center;
        padding-block: 13px;
        letter-spacing: 2.4px;

        @media (width <= 768px) {
          padding-block: 3.3vw;
          letter-spacing: calc((100 / 390) * 2.16 * 1vw);
          background: rgb(255 255 255 / 80%);
        }
      }

      /* ==== dt ==== */
      & dt {
        position: relative;
        padding-inline: 8px;
        font-weight: 700;
        box-shadow: 1px 0 0 1px var(--_border-color);

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

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

        @media (width <= 768px) {
          &::after {
            inline-size: 2px;
            background-color: white;
          }
        }
      }

      /* ==== dd ==== */
      & dd {
        place-content: center;
        padding-inline: 40px;
        box-shadow: -1px 0 0 1px var(--_border-color);

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

  /* =====================
    u-anchor
  ===================== */
  .u-anchor {
    inline-size: fit-content;
  }
}