@charset "utf-8";
/*
Theme Name: Lightning Child Plus
Template: lightning
Description: ★ イラスト・キャラクター制作　株式会社ルノテオ★
Author: ★ Hiroko Kaimiya ★
Tags: 
Version: 0.1.2
*/

/* ==========================================
   1. ギャラリーコンテナ（全体中央寄せ＆内部左詰め）
   ========================================== */

#artwork,
.artwork-gallery,
div.artwork-gallery {
    display: grid !important;
    /* 180px（画像）+ 10px（左右マージン分）= 190px を最小幅とし、入るだけ並べる */
    grid-template-columns: repeat(auto-fit, 190px) !important;
    /* グリッドブロック全体を親要素（画面）の中央に配置 */
    justify-content: center !important;
    /* 上下の行間を10px空ける */
    grid-gap: 10px 0 !important;
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* WordPressの不要なラッピング要素の影響を打ち消す */
.artwork-gallery p,
.artwork-gallery figure,
.artwork-gallery .wp-block-image {
    display: contents !important; /* グリッド配置を崩さない特殊設定 */
}


/* ==========================================
   2. サムネイル画像スタイル
   ========================================== */

/* #artwork または .artwork-gallery 直下のサムネイル画像にのみ限定適用 */
#artwork img,
.artwork-gallery img {
    width: 180px !important;
    height: 180px !important;
    object-fit: cover !important;        /* 縦横比を崩さず中心で切り抜き */
    object-position: center !important;   /* 画像の中心を基準にして表示 */
    border-radius: 0px !important;       /* 角丸設定 */
    cursor: zoom-in !important;
    transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;

/* ★画像の鮮明化（シャープ化・レンダリング最適化）を追加 */
image-rendering: -webkit-optimize-contrast; /* Edge / Chrome用 */
image-rendering: crisp-edges; /* 標準仕様 */
filter: contrast(1.02) sharpness(1); /* ほんのわずかにコントラストを強調 */


    /* グリッドマスの中で中央に配置 */
    justify-self: center !important;
    align-self: center !important;
    margin: 5px !important;

    /* 二重線枠・影・文字色 */
    border: double 5px #d3bd91 !important;
    box-shadow: 0 0 5px !important;
    color: #fff !important;
}

/* ホバー時の効果 */
#artwork img:hover,
.artwork-gallery img:hover {
    opacity: 0.85 !important;
    box-shadow: 0 0 10px rgba(211, 189, 145, 0.8) !important;
}


/* ==========================================
   3. モーダル（拡大表示）スタイル ★ここを修正しました
   ========================================== */

/* モーダル背景（コンテナ） */
.image-modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background-color: rgba(0, 0, 0, 0.88) !important;
    
    /* 縦並び構造にして上下中央に配置 */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    
    /* 画面からはみ出してもスクロール可能に */
    overflow-y: auto !important;
    padding: 20px 10px !important;
    box-sizing: border-box !important;
    
    z-index: 999999 !important;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    cursor: zoom-out;
}

.image-modal-overlay.active {
    opacity: 1 !important;
    visibility: visible !important;
}

/* ★ モーダル内の拡大画像（サムネイル用CSSの影響を完全にリセット） */
.image-modal-overlay img,
.artwork-gallery .image-modal-overlay img,
#artwork .image-modal-overlay img {
    /* サムネイルの固定サイズ設定（180px）を解除 */
    width: auto !important;
    height: auto !important;
    
    /* 画面に収まるレスポンシブ制限 */
    max-width: 90vw !important;
    max-height: calc(100vh - 120px) !important;
    
    /* サムネイル用の二重線枠・影・余白をクリア */
    border: none !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6) !important;
    margin: 0 0 15px 0 !important; /* 画像下に確実に15pxの余白 */
    border-radius: 4px !important;
    
    object-fit: contain !important;
    transform: scale(0.85);
    transition: transform 0.3s ease;
    cursor: zoom-out !important;
    flex-shrink: 1 !important;
}

.image-modal-overlay.active img,
.artwork-gallery .image-modal-overlay.active img,
#artwork .image-modal-overlay.active img {
    transform: scale(1) !important;
}

/* 「閉じる」ボタン設定 */
.image-modal-close,
.artwork-gallery .image-modal-close,
#artwork .image-modal-close {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: bold !important;
    line-height: 1 !important;
    cursor: pointer !important;
    background: rgba(30, 30, 30, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    padding: 12px 26px !important;
    border-radius: 30px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5) !important;
    transition: background-color 0.2s ease, transform 0.2s ease !important;
    user-select: none !important;
    
    flex-shrink: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 10px !important;
    z-index: 1000001 !important;
}

.image-modal-close:hover {
    background: rgba(255, 255, 255, 0.3) !important;
    transform: scale(1.05) !important;
}

.image-modal-close span {
    font-size: 18px !important;
    line-height: 1 !important;
}

/* ==========================================
【スマホ用設定】画面幅 768px 以下のサイズ調整
========================================== */
@media screen and (max-width: 768px) {
/* 1. スマホのグリッド幅を拡大後のサイズ（220px + マージン分 = 230px）に調整 */
#artwork,
.artwork-gallery,
div.artwork-gallery {
grid-template-columns: repeat(auto-fit, 230px) !important;
grid-gap: 15px 0 !important; /* スマホ時の上下間隔 */
}

/* 2. サムネイル画像自体のサイズを大きく（例: 180px -> 220px）設定 */
#artwork img,
.artwork-gallery img {
width: 220px !important; /* お好みの横幅（例: 200px 〜 240px程度） */
height: 220px !important; /* お好みの高さ */
}
}