@charset "UTF-8";

.wrap {
  dl {
    margin: 24px 0;
    display: grid;
    grid-template-columns: [dts]1fr repeat(3, 1fr);
    grid-template-row: repeat(auto-fill, minmax(64px, 2fr)),;

    justify-items: center;
    gap: 10px;
    padding: 6px;
    background: #f5f5f5;

    dt, dd {
      min-height: 64px;
      width: 100%;
      display: grid;
      place-items: center;
    }

    dt {
      grid-column: dts;
      grid-column-start: auto;
      border: 1px solid #00000028;
      padding: 8px;
      text-align: center;
      word-break: auto-phrase;
      font-weight: bold;
      font-size: 1.4rem;
      color: var(--col_Gold);
      background: #ffffff;
      position: sticky;
      left: 0;
      z-index: +1;
      aspect-ratio: unset;

      &:nth-of-type(2), &:nth-of-type(4) {
        grid-row: span 3;
        aspect-ratio: unset;
      }
    }

    dd {
      position: relative;
      background-repeat: no-repeat;
      background-position: 50% 80%;
      background-size: 240% auto;
      border-radius: 16px 0 0 0;
      overflow: hidden;
      z-index: 0;

      a {
        display: grid;
        align-items: center;
        text-align: center;
        width: 100%;
        height: 100%;
        padding: 6px 8px;
        z-index: 10;
        opacity: 100% !important;
        text-decoration: none !important;
        background-color:rgb(255 255 255 /50%);

        &:hover {
          background: 0;
          color: var(--cl-a);

          span {
            backdrop-filter: blur(1.5px) contrast(150%);
          }
        }

        span {
          display: flex;
          align-items: center;
          justify-content: center;
          border: 1px solid rgb(255 255 255 /40%);
          min-height: 4.25em;
          word-break: auto-phrase;
          line-break: anywhere;
          line-height: 1.35;
          letter-spacing: 0.05em;
          font-feature-settings: "palt";
          font-weight: bold;
          font-size: 1.6rem;
          paint-order: stroke;
          background: rgb(255 255 255 /90%);
          backdrop-filter: blur(4px) contrast(350%);
          overflow: hidden;
          transition: 0.6s;
        }
      }
    }
  }
}

@media screen and (max-width: 640px) {
  .wrap {
    dl {
      overflow: scroll hidden;
      overscroll-behavior-x: none;
      grid-template-columns: 1fr 1fr;

      dt {
        grid-column: span 2;
        grid-row: unset;
        margin-top: 12px;
        min-height: unset;

        &:first-child {
          margin: 0;
        }
      }
      dd {
        a {
          span {
            font-size: 1.6rem;
            word-break: auto-phrase;
          }
        }
      }
    }
  }
}