   /* Lightbox overlay */
   .lightbox-overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100vw;
     height: 100vh;
     background: rgba(0, 0, 0, 0.7);
     display: flex;
     justify-content: center;
     align-items: center;
     opacity: 0;
     visibility: hidden;
     transition: opacity 0.3s ease;
     z-index: 1000;
     /* 重なり順を確実に上に */
   }

   .lightbox-overlay.active {
     opacity: 1;
     visibility: visible;
   }

   /* ★ ブラウザの伸縮に追従する設定 */
   .lightbox-inner {
     position: relative;
     display: flex;
     justify-content: center;
     align-items: center;
     width: 45%;
     /* PC: Max-wide 60% */
     max-height: 90vh;
   }

   .lightbox-target {
     cursor: pointer;
   }

   .lightbox-target img {
     transition: 0.2s ease;
   }

   .lightbox-target:hover img {
     filter: brightness(0.95);
   }

   /* ★ 画像の伸縮設定 */
   .lightbox-inner img {
     width: 100%;
     height: auto;
     max-height: 100vh;
     object-fit: contain;
     display: block;
     border-radius: 0px;
   }

   /* 矢印 */
   .arrow {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     background: rgba(0, 0, 0, 0.4);
     border-radius: 50%;
     width: 50px;
     height: 50px;
     display: flex;
     justify-content: center;
     align-items: center;
     cursor: pointer;
     color: white;
     font-size: 40px;
     user-select: none;
     transition: background 0.2s;
     z-index: 1010;
   }

   .arrow:hover {
     background: rgba(0, 0, 0, 0.7);
   }

   .arrow.left {
     left: 1%;
   }

   .arrow.right {
     right: 1%;
   }

   .item_name {
     font-weight: bold;
     color: #0066cc; line-height: 1.4em;
   }



   
   @media (max-width: 979px) {
     .lightbox-inner {
       width: 55%;
       /* タブレット: 55% */
     }

     .arrow {
       width: 44px;
       height: 44px;
       font-size: 26px;
     }
   }

   @media (max-width: 599px) {
     .lightbox-inner {
       width: 92%;
       /* スマホ: 100% */
     }

     .arrow {
       width: 44px;
       height: 44px;
       font-size: 26px;
     }
   }

