/* 共通: オーバーレイ/ダイアログ/カウンタ/閉じる/ナビの基本 */
:root { --nav-space: 60px; }
.modal-overlay{
 position:fixed;
 inset:0; 
 background:rgba(0,0,0,0.7); 
 display:flex; 
 align-items:center; 
 justify-content:center; 
 z-index:9999; 
 padding:16px; 
}

.modal-dialog{
 position:relative; 
 background:#fff; 
 border-radius:8px; 
 box-shadow:0 10px 30px rgba(0,0,0,0.5); 
 max-width:92vw; 
 max-height:92vh; 
 overflow:hidden; 
}

.modal-image{
 max-height:80vh; 
 width:auto; 
 height:auto; 
 display:block; 
}

.modal-counter{
 position:absolute; 
 bottom:10px; 
 right:12px; 
 background:rgba(0,0,0,0.6); 
 color:#fff; 
 font-size:12px; 
 padding:4px 8px; 
 border-radius:12px; 
}

.modal-close{
 position:absolute; 
 top:8px; 
 right:8px; 
 border:none; 
 background:rgba(0,0,0,0.5); 
 color:#fff; 
 width:36px; 
 height:36px; 
 border-radius:18px; 
 cursor:pointer; 
 font-size:18px; 
}

.modal-nav{
 position:absolute; 
 top:50%; 
 left:0; 
 width:100%; 
 transform:translateY(-50%); 
 pointer-events:none; 
}

.modal-prev,.modal-next{
 pointer-events:auto; 
 border:none; 
 background:rgba(0,0,0,0.5); 
 color:#fff; 
 width:44px; 
 height:44px; 
 border-radius:22px; 
 cursor:pointer; 
 font-size:20px; 
 position:absolute; 
}

.modal-prev{
 left:8px; 
}

.modal-next{
 right:8px; 
}

@media (max-width:480px){ :root{ --nav-space:44px; } .modal-prev,.modal-next{ width:40px; height:40px; } .modal-close{ width:34px; height:34px; } }

/* リンクの見た目（青・太字・下線） */
a.modal-link{
 color:#0074d9 !important; 
 font-weight:bold; 
 text-decoration:underline; 
}
 a.modal-link:visited,
 a.modal-link:hover,
 a.modal-link:active,
 a.modal-link:focus{
  color:#0074d9 !important; 
  font-weight:bold; 
  text-decoration:underline; 
 }


/* =============================
   パターンB：画像ラップ全面を透過（黒背景なし）
   ============================= */
.modal-image-wrap{ display:flex; align-items:center; justify-content:center; background: transparent; padding:0 var(--nav-space); }
/* 画像はガター分を差し引いた最大幅＋視認性を補う影 */
.modal-image{ max-width: calc(90vw - (var(--nav-space) * 2)); box-shadow: 0 2px 12px rgba(0,0,0,0.45); }