/* ========================================
   GLightbox カスタムCSS
   
   目的: 色一覧の拡大アイコン表示とGLightboxのカスタマイズ
   作成日: 2026-01-04
   ======================================== */

/* 色一覧の拡大アイコン（%マーク）を表示 */
#product-content .color-variation a.glightbox[data-gallery="colors"]:after {
    font-family: "linea-basic-10" !important;
    content: "%";
    pointer-events: none !important; /* クリックイベントを透過 */
    position: absolute;
    right: 10px;
    bottom: 10px;
    font-size: 24px;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* GLightbox のオーバーレイ背景色をカスタマイズ */
.glightbox-container {
    background: rgba(0, 0, 0, 0.95) !important;
}

/* 閉じるボタンが確実に表示されるようにする */
.gclose {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: 50px !important;
    height: 50px !important;
    top: 10px !important;
    right: 10px !important;
    background: rgba(0, 0, 0, 0.7) !important;
    border-radius: 50% !important;
    z-index: 99999 !important;
    cursor: pointer !important;
}

.gclose:hover {
    background: rgba(0, 0, 0, 0.9) !important;
}

.gclose svg {
    width: 28px !important;
    height: 28px !important;
    color: #fff !important;
    fill: #fff !important;
}

/* 前へ/次へボタンのスタイル調整 */
.gnext,
.gprev {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: 50px !important;
    height: 50px !important;
    background: rgba(0, 0, 0, 0.7) !important;
    border-radius: 50% !important;
    cursor: pointer !important;
}

.gnext:hover,
.gprev:hover {
    background: rgba(0, 0, 0, 0.9) !important;
}

.gnext svg,
.gprev svg {
    width: 28px !important;
    height: 28px !important;
    color: #fff !important;
    fill: #fff !important;
}

/* スマホでのボタンサイズ調整 */
@media screen and (max-width: 768px) {
    .gclose,
    .gnext,
    .gprev {
        width: 44px !important;
        height: 44px !important;
    }
    
    .gclose svg,
    .gnext svg,
    .gprev svg {
        width: 24px !important;
        height: 24px !important;
    }
    
    #product-content .color-variation a.glightbox[data-gallery="colors"]:after {
        font-size: 20px;
        right: 8px;
        bottom: 8px;
    }
}

/* デバッグ用：ボタンが隠れていないか確認 */
.glightbox-clean .gclose,
.glightbox-clean .gnext,
.glightbox-clean .gprev {
    display: block !important;
}

/* ========================================
   説明:
   
   - GLightbox は Pure JavaScript で動作するため、
     :after 疑似要素との相性問題が発生しない
     
   - pointer-events: none により、疑似要素がクリックを
     妨げることなく、確実にライトボックスが起動する
     
   - タッチデバイスでも正常に動作する
   
   - display/opacity/visibility を明示的に指定して
     ×ボタンが確実に表示されるようにする
   ======================================== */