/* PCのみで有効化するが、CSS側でも念のため */
@media (hover: hover) and (pointer: fine) and (min-width: 991px) {
  .hzp-wrap {
    position: relative;
    /*
    display: inline-flex;
    align-items: flex-start;
    gap: var(--hzp-gap, 24px);
    */

  }

  .hzp-pane {
    width: var(--hzp-pane-w, 420px);
    height: var(--hzp-pane-h, 420px);
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,.12);
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    box-shadow: 0 6px 18px rgba(0,0,0,.12);
    position: absolute;
    overflow: hidden;
    visibility: hidden;
    left: calc(100% + 15px);
    top: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity .12s ease, visibility .12s ease;
  }

  .hzp-pane.is-active {
    visibility: visible;
    opacity: 1;
  }

  /* 画像側（必要なら調整） */
  .hzp-target {
    display: block;
    max-width: 100%;
    height: auto;
    cursor: zoom-in;
  }

  /* 右側に出せない（横幅が足りない）ケースで下に回す例（任意） */
  .hzp-wrap.hzp-stack {
    flex-direction: column;
    align-items: flex-start;
  }

  /*  画像枠外表示 */
  .p-entry .splide__track {
    overflow: visible !important;
    z-index: 10;
  }
}