@charset "UTF-8";
.numbers {
  /* ==== local variables ==== */
  --_numbers-color: #074d94;
  max-inline-size: 1140px;
  font-family: 'Noto Sans JP', serif;
  background: #eaf2fa;
  margin-inline: auto;
  border-radius: 48px;
  padding-block: 91px 80px;
  margin-top: 177px;
  @media not all and (min-width: 768px) {
    border-radius: calc((100 / 750) * 48 * 1vw);
    padding-block: calc((100 / 750) * 91 * 1vw) calc((100 / 750) * 80 * 1vw);
    padding-inline: calc((100 / 750) * 80 * 1vw);
    margin-top: calc((100 / 750) * 194 * 1vw);
  }

  /* ==== h2 ==== */
  & h2 {
    font-family: 'Noto Sans JP', sans-serif;
    color: var(--_numbers-color);
    inline-size: fit-content;
    margin-inline: auto;
    margin-block: calc((1em - 1lh) / 2);
    font-size: 32px;
    font-weight: 600;
    letter-spacing: 2.56px;
    text-align: center;
    @media not all and (min-width: 768px) {
      & span {
        display: block;
        line-height: 1.7;
        letter-spacing: calc((100 / 750) * 3.36 * 1vw);
        font-size: calc((100 / 750) * 42 * 1vw);
      }
    }
  }

  /* ==== ul ==== */
  & ul {
    list-style: unset;
    padding: unset;
    margin-block: 42px 0;
    padding-inline: 80px;
    gap: 40px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(auto-fit, auto);
    @media not all and (min-width: 768px) {
      padding-inline: 0;
      margin-block: calc((100 / 750) * 42 * 1vw) 6vw;
      gap: calc((100 / 750) * 48 * 1vw);
      max-inline-size: calc((100 / 750) * 412 * 1vw);
      margin-inline: auto;
      display: flex;
      flex-direction: column;
    }
  }

  /* ==== li ==== */
  & li {
    margin: unset;
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    gap: 32px;
    @media not all and (min-width: 768px) {
      gap: calc((100 / 750) * 32 * 1vw);
    }
  }

  /* ==== h3 ==== */
  & h3 {
    font-family: 'Noto Sans JP', sans-serif;
    display: grid;
    align-self: stretch;
    place-content: center;
    text-align: center;
    inline-size: 100%;
    color: white;
    font-size: 20px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: 1.6px;
    background: var(--_numbers-color);
    border-radius: 8px;
    margin-block: calc((1em - 1lh) / 2);
    padding-block: 9px;

    @media not all and (min-width: 768px) {
      font-size: calc((100 / 750) * 32 * 1vw);
      border-radius: calc((100 / 750) * 8 * 1vw);
      padding-block: 1.9vw;
      letter-spacing: calc((100 / 750) * 2.56 * 1vw);
    }
  }

  /* ==== .image ==== */
  .image {
    inline-size: 194px;
    block-size: 194px;
    position: relative;
    margin-inline: auto;
    touch-action: manipulation;

    @media not all and (min-width: 768px) {
      inline-size: calc((100 / 750) * 396 * 1vw);
      block-size: calc((100 / 750) * 332 * 1vw);
    }

    & img {
      position: absolute;
      inset: 0;
      max-inline-size: 100%;
      block-size: auto;
      object-fit: cover;
      vertical-align: bottom;
      opacity: 0;
      transition: opacity 250ms ease 0s;
      @media print, screen and (min-width: 768px) {
        block-size: 251.5px;
      }
      @media not all and (min-width: 768px) {
        block-size: calc((100 / 750) * 332 * 1vw);
      }

      &.active {
        z-index: 2;
        opacity: 1;
      }
    }
  }

  /* ==== .nav ==== */
  .nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 16px;
    @media not all and (min-width: 768px) {
      gap: calc((100 / 750) * 32 * 1vw);
      margin-block-start: calc((100 / 750) * 20 * 1vw);
    }

    & button {
      touch-action: manipulation;
      box-sizing: border-box;
      cursor: pointer;
      position: relative;
      aspect-ratio: 1 / 1;
      display: inline flex;
      appearance: none;
      border: none;
      border-radius: calc(infinity * 1px);
      background: #ddd;
      transition: background 250ms ease 0s;
      inline-size: 12px;
      @media not all and (min-width: 768px) {
        inline-size: calc((100 / 750) * 24 * 1vw);
      }

      &.active {
        background: var(--_numbers-color);
        pointer-events: none;
      }

      &::before {
        content: '';
        position: absolute;
        left: 5%;
        inline-size: 10px;
        aspect-ratio: 5 / 3;
        bottom: -11px;
        background: var(--_numbers-color);
        transition: opacity 250ms ease 0s;
        clip-path: polygon(50% 0, 0% 100%, 100% 100%);
        pointer-events: none;
        opacity: 0;
        z-index: 1;
      }

      &::after {
        content: attr(data-title);
        box-sizing: border-box;
        white-space: nowrap;
        position: absolute;
        z-index: 1;
        left: 50%;
        translate: -50% 0;
        border: 3px solid var(--_numbers-color);
        color: var(--_numbers-color);
        background: white;
        bottom: -38px;
        font-size: 13px;
        padding: 4px 8px;
        line-height: 1;
        border-radius: 4px;
        transition: opacity 250ms ease 0s;
        pointer-events: none;
        opacity: 0;
      }

      @media (any-hover: hover) {
        &:not(.active):hover {
          background: color-mix(in srgb, #ddd, var(--_numbers-color) 20%);
          &::before {
            opacity: 1;
          }
          &::after {
            opacity: 1;
          }
        }
      }
    }
  }
}