/* ========= Gallery Layout (DW safe / NO grid) ========= */
#detail .galmm{
  list-style: none;
  margin: 16px 0 0;
  padding: 0;

  display: flex;
  flex-wrap: wrap;

  /* gap代替（DWでも安全） */
  margin-left: -5px;
  margin-right: -5px;
}

#detail .galmm > li{
  margin: 5px;
  padding: 0;
  box-sizing: border-box;

  /* スマホ2列 */
  width: calc(50% - 10px);
}

/* タブレット3列 */
@media (min-width: 768px){
  #detail .galmm > li{
    width: calc(33.333% - 10px);
  }
}

/* PC4列 */
@media (min-width: 1024px){
  #detail .galmm > li{
    width: calc(25% - 10px);
  }
}

/* 広い画面6列 */
@media (min-width: 1280px){
  #detail .galmm > li{
    width: calc(16.666% - 10px);
  }
}

/* 正方形サムネ（DW安全：aspect-ratio不使用） */
#detail .galmm a.enlarge{
  display: block;
  position: relative;
  width: 100%;
  padding-top: 100%; /* 正方形 */
  /*border-radius: 10px;*/
  overflow: hidden;
  background: #f4f4f4;
  box-shadow: 0 1px 10px rgba(0,0,0,.06);
  transform: translateZ(0);
}

#detail .galmm a.enlarge img{
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  transition: transform .25s ease, filter .25s ease;
}

@media (hover:hover){
  #detail .galmm a.enlarge:hover img{
    transform: scale(1.05);
    filter: contrast(1.02) saturate(1.03);
  }
  #detail .galmm a.enlarge:hover{
    box-shadow: 0 10px 24px rgba(0,0,0,.14);
  }
}

/* “拡大”アイコン（place-items不使用） */
#detail .galmm a.enlarge::after{
  content: "＋";
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 26px;
  height: 26px;
  display: block;
  text-align: center;
  line-height: 26px;
  border-radius: 999px;
  background: rgba(0,0,0,.55);
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .2s ease, transform .2s ease;
}

@media (hover:hover){
  #detail .galmm a.enlarge:hover::after{
    opacity: 1;
    transform: translateY(0);
  }
}

/* ========= Colorbox Arrows (robust override) ========= */
#cboxContent{
  position: relative !important;
}

#cboxPrevious,
#cboxNext{
  display: block !important;
  visibility: visible !important;
  opacity: .95 !important;

  position: absolute !important;
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;

  width: 52px !important;
  height: 52px !important;
  border-radius: 999px !important;

  background: rgba(0,0,0,.55) !important;
  background-image: none !important;

  text-indent: -9999px !important;
  overflow: hidden !important;
  border: 0 !important;

  box-shadow: 0 8px 22px rgba(0,0,0,.25) !important;
  z-index: 2147483647 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
    
    
}

#cboxPrevious{ left: 10px !important; right: auto !important; }
#cboxNext{ right: 10px !important; left: auto !important; }

#cboxPrevious::before,
#cboxNext::before{
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 12px !important;
  height: 12px !important;
  transform: translate(-50%, -50%) rotate(45deg) !important;
}

#cboxPrevious::before{
  border-left: 3px solid #fff !important;
  border-bottom: 3px solid #fff !important;
  margin-left: -2px !important;
}
#cboxNext::before{
  border-right: 3px solid #fff !important;
  border-top: 3px solid #fff !important;
  margin-left: 2px !important;
}

@media (hover:hover){
  #cboxPrevious:hover,
  #cboxNext:hover{
    background: rgba(0,0,0,.80) !important;
    opacity: 1 !important;
  }
}

@media (max-width: 767px){
  #cboxPrevious,
  #cboxNext{
    width: 44px !important;
    height: 44px !important;
  }
  #cboxPrevious{ left: 6px !important; }
  #cboxNext{ right: 6px !important; }
}









/* =========================================
   Colorbox：矢印UI（黒丸含む）を完全に消す
   ※移動の動作（←→キー/スワイプ）は残す
   ========================================= */

/* ボタン本体を消す */
#cboxPrevious,
#cboxNext{
  display: none !important;
}


#cboxPrevious,
#cboxNext{
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 0 !important;
  width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* 擬似要素で黒丸/矢印を描いている場合も潰す */
#cboxPrevious::before,
#cboxPrevious::after,
#cboxNext::before,
#cboxNext::after{
  content: none !important;
  display: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* テーマによっては “その外側” にクリック領域がある場合 */
#colorbox #cboxPrevious,
#colorbox #cboxNext,
#cboxContent #cboxPrevious,
#cboxContent #cboxNext{
  display: none !important;
}