/* ギャラリー全体 */
#gallery ul{
    width: 95%;
    margin: 30px auto;
    display:flex;
    flex-wrap:wrap;       /* 折り返し必須なら */
    gap: 2%;              /* お好みで余白 */
    justify-content:space-around;
  }
  
  /* 1枚ずつの枠を正方形に */
  #gallery ul li{
    width:31%;            /* 3枚並べる想定 */
    aspect-ratio:1/1;     /* ←ココだけ追加 */
  }


    
  @media (max-width: 1920px) { }
  @media (max-width: 1440px) { 
   
   }
  @media (max-width: 1280px) {  }
  @media (max-width: 1024px) { 

    #gallery ul{
      width: 95%;
      margin: 20px auto;
      display:flex;
      flex-wrap:wrap;       /* 折り返し必須なら */
      gap: 2%;              /* お好みで余白 */
      justify-content:space-around;
    }


  /* 1枚ずつの枠を正方形に */
  #gallery ul li{
    width:31%;            /* 3枚並べる想定 */
    aspect-ratio:1/1;     /* ←ココだけ追加 */
  }



  }
  @media (max-width: 768px)  {  }
  @media (max-width: 600px)  { }
  @media (max-width: 420px)  {  }

  
  
  
  #gallery ul li img{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius: 20px;
  }

/* ── ラッパーを画像サイズ基準に ── */
#lg-wrap{
  position:relative;
  display:inline-block;      /* 画像サイズと同じ幅 */
}

/* 画像本体 */
#lg-img{
  display:block;
  max-width:90vw; max-height:90vh;
  border-radius:12px;
  object-fit:contain;
  box-shadow:0 10px 30px rgba(0,0,0,.4);
}

/* ナビボタン（画像内のみ） */
.lg-nav{
  position:absolute;
  top:0; bottom:0;
  width:50%;
  background:transparent;
  border:none;
  cursor:pointer;
}


/* ───── モーダル用オーバーレイ（背景を暗く）──────── */
#lg-overlay{
  position:fixed;      /* 画面全域をカバー */
  inset:0;             /* top:0; right:0; bottom:0; left:0 と同義 */
  background:rgba(0,0,0,.75);   /* ← 暗さをここで調整 (.6～.85) */
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0; visibility:hidden;
  transition:opacity .25s;
  z-index:2000;        /* どの要素より前面に */
}
#lg-overlay.show{ opacity:1; visibility:visible; }
.lg-prev{ left:0; }
.lg-next{ right:0; }

/* ホバー矢印（PCのみ） */
@media (any-hover:hover){
  .lg-nav::after{
    content:"";
    position:absolute; top:50%;
    width:24px; height:24px;
    border:solid #fff; border-width:0 4px 4px 0;
    transform:translateY(-50%) rotate(45deg);
    opacity:.7;
  }
  .lg-prev::after{ left:12px; transform:translateY(-50%) rotate(225deg); }
  .lg-next::after{ right:12px; }
}