/* overlay：フェード用 */
.mg-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.8);
  z-index: 9999;

  /* 追加 */
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}

/* 開いてる状態 */
.mg-overlay.is-open{
  opacity: 1;
  visibility: visible;
}

/* modal */
.mg-modal{
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* frame（★固定サイズ） */
.mg-frame{
  position: relative;
  width: min(1200px, calc(100vw - 180px));
  height: calc(100vh - 120px);
}

/* image */
.mg-frame img{
  position: absolute;
  inset: 0;
  margin: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}

.mg-frame img.is-active{
  opacity: 1;
}

/* arrows */
/* arrows (Modaal風) */
.mg-arrow{
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  border-radius: 100%;
  background: rgba(0,0,0,0);
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 10000;
  transition: background .2s ease-in-out, opacity .2s ease-in-out;
}

/* hover/focus で白丸、矢印はグレー寄りに */
.mg-arrow:hover,
.mg-arrow:focus{
  outline: 0;
  background: #fff;
}

/* 文字は使わない（フォント崩れ対策） */
.mg-arrow{
  font-size: 0;
  color: transparent;
}

/* 矢印の2本線（Modaalっぽい） */
.mg-arrow::before,
.mg-arrow::after{
  content: "";
  position: absolute;
  top: 16px;
  left: 25px;
  width: 4px;
  height: 18px;
  border-radius: 4px;
  background: #fff;
  transition: background .2s ease-in-out;
}

/* hover/focus時の色（Modaal風） */
.mg-arrow:hover::before,
.mg-arrow:hover::after,
.mg-arrow:focus::before,
.mg-arrow:focus::after{
  background: #000;
}

/* 右矢印（デフォは > ） */
.mg-next::before{
  transform: rotate(-45deg);
  margin-top: -5px;
}
.mg-next::after{
  transform: rotate(45deg);
  margin-top: 5px;
}

/* 左矢印（<）は線の位置を少し左に */
.mg-prev::before,
.mg-prev::after{
  left: 22px;
}
.mg-prev::before{
  transform: rotate(-45deg);
  margin-top: 5px;
}
.mg-prev::after{
  transform: rotate(45deg);
  margin-top: -5px;
}

.mg-prev{ left: 20px; }
.mg-next{ right: 20px; }

/* ===== SP: 下の方に出す（Modaalっぽく） ===== */
@media (max-width: 768px){
  .mg-arrow{
    top: auto;
    bottom: 20px;
    transform: none;
    background: rgba(0,0,0,.7);
  }
  .mg-arrow::before,
  .mg-arrow::after{
    background: #fff;
  }
  .mg-prev{ left: 20px; }
  .mg-next{ right: 20px; }
}

/* close */
/* close (Modaal風) */
.mg-close{
  position: fixed;
  right: 20px;
  top: 20px;
  width: 50px;
  height: 50px;
  border-radius: 100%;
  background: rgba(0,0,0,0);
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 10000;
  transition: background .2s ease-in-out;
  font-size: 0;       /* テキストは使わない */
  color: transparent;
}

.mg-close:hover,
.mg-close:focus{
  outline: 0;
  background: #fff;   /* ふわっと白丸 */
}

/* × を2本線で描く（Modaalっぽい） */
.mg-close::before,
.mg-close::after{
  content: "";
  position: absolute;
  top: 14px;
  left: 23px;
  width: 4px;
  height: 22px;
  border-radius: 4px;
  background: #fff;
  transition: background .2s ease-in-out;
}

.mg-close::before{ transform: rotate(-45deg); }
.mg-close::after { transform: rotate(45deg); }

.mg-close:hover::before,
.mg-close:hover::after,
.mg-close:focus::before,
.mg-close:focus::after{
  background: #000; /* Modaalのcloseのホバー色っぽい */
}

/* responsive */
@media (max-width: 768px){
  .mg-frame{
    width: calc(100vw - 24px);
    height: calc(100vh - 140px);
  }
}