@charset "UTF-8";

/* ページトップへのジャンプ防止 */
html.glightbox-open, body.glightbox-open {
    overflow: visible !important;
    height: auto !important;
    position: static !important;
}

/* 1. タイトルの中央揃え */
.gslide-title {
    text-align: center !important;
    width: 100% !important;
    display: block !important;
    font-weight: bold !important;
    margin-top: 20px !important;
    color: #000000 !important;
}

/* 2. 閉じるボタンを「画像の右上」に配置 */
.gclose {
    position: fixed !important;
    /* JSで計算した画像のTOPとRIGHTを基準にする */
    top: calc(var(--img-top) + 10px) !important;
    right: calc(var(--img-right) + 10px) !important;
    background: rgba(0, 0, 0, 0.5) !important;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 99999 !important;
}

/* 3. 矢印を「画像の左右の端」に配置 */
.gprev, .gnext {
    position: fixed !important;
    top: calc(var(--img-top) + (var(--img-height) / 2)) !important;
    transform: translateY(-50%) !important;
    background: rgba(0, 0, 0, 0.4) !important;
    border-radius: 50% !important;
    width: 50px !important;
    height: 50px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 99999 !important;
}

/* 画像の左端・右端に合わせる */
.gprev { left: calc(var(--img-left) + 10px) !important; }
.gnext { right: calc(var(--img-right) + 10px) !important; }

/* アイコンの色とホバー設定 */
.gclose svg, .gprev svg, .gnext svg { fill: #fff !important; width: 20px; }
.gclose:hover, .gprev:hover, .gnext:hover { background: rgba(0,0,0,0.8) !important; }