:root {
  --ci: #004bb4;
  --skyblue: #EAEEF3;
}

/* サムネイル画像モーダル拡大表示add202601 */
a[data-modal-image] {
  cursor: pointer;
  transition: opacity 0.3s;
  &:focus-visible {
    @media (prefers-reduced-motion: no-preference) {
      opacity: 0.6;
    }
  }
}
@media (any-hover: hover) {
  a[data-modal-image]:hover {
    @media (prefers-reduced-motion: no-preference) {
      opacity: 0.6;
    }
  }
}

.data-modal-image-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.7);
  z-index: 9999;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  &.is-active {
    opacity: 1;
  }

  .data-modal-image-overlay__image {
    position: relative;
    max-width: 80vw;
    max-height: 80vh;
    aspect-ratio: 1;
  }
  
  .data-modal-image-overlay__image img {
    max-width: 100%;
    max-height: 100%;
    display: block;
  }
  .data-modal-image-overlay__close {
    position: absolute;
    top: -17px;
    right: -17px;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: var(--ci);
    color: #fff;
    font-size: 28px;
    cursor: pointer;
    transition: opacity 0.3s;
  }
  .data-modal-image-overlay__close:focus-visible {
    @media (prefers-reduced-motion: no-preference) {
      opacity: 0.6;
    }
  }
  
  @media (any-hover: hover) {
    .data-modal-image-overlay__close:hover {
      @media (prefers-reduced-motion: no-preference) {
        opacity: 0.6;
      }
    }
  }
}
/* サムネイル画像モーダル拡大表示ここまで */