/* ===== ベース ===== */
.pm-modal{ position:fixed; inset:0; display:none; z-index:2147483647; }
.pm-modal[aria-hidden="false"]{ display:block; }
.pm-overlay{ position:absolute; inset:0; background:rgba(0,0,0,.7); }

/* コンテナ（旧 .pm-panel 相当） */
.pm-content{
  position:relative; margin:auto; inset:0;
  max-width:1200px; max-height:92vh; background:#111; border-radius:14px;
  box-shadow:0 10px 40px rgba(0,0,0,.35); overflow:hidden; z-index:1;
}

/* 閉じるボタン */
.pm-close{
  position:absolute; top:10px; right:12px; font-size:22px; background:#fff;
  border:1px solid #eee; border-radius:10px; padding:.2em .6em; cursor:pointer; z-index:5;
}

body.pm-open{ overflow:hidden; }

/* レイアウト（旧 .pm-wrap 相当） */
.pm-main{
  display:grid;
  grid-template-columns:1.4fr .6fr; /* 左:右 */
  gap:8px;
  height:92vh;
}

.pm-media,.pm-map{ position:relative; min-height:0; }

/* 画像ボックス */
.pm-media{
  position:relative; /* ボタンの基準にする */
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:#000;
  overflow:hidden;
}

/* ナビ矢印：画像の上だけに配置 */
.pm-prev, .pm-next{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid #ddd;
  background:#fff;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  font-weight:700;
  line-height:1;
  box-shadow:0 6px 16px rgba(0,0,0,.18);
  opacity:.94;
  z-index:5;
}
.pm-prev{ left:12px; }
.pm-next{ right:12px; }
.pm-prev:hover, .pm-next:hover{ transform:translateY(-50%) scale(1.05); }


/* キャプション（画像の外側上） */
#pm-caption{
  order:-1;
  position:relative;
  margin:0 0 10px;
  background:rgba(0,0,0,0.85);   /* 濃いめの黒背景 */
  color:#fff;
  padding:0.6em 1em;
  border-radius:8px;
  text-align:center;
  line-height:1.6;
  display:inline-block;
  z-index:4;

  font-size:18px;
  font-weight:700;      /* 太字でしっかり */
  letter-spacing:0.02em;

  /* 文字の縁取りっぽいシャドウでくっきり */
  text-shadow:0 0 4px rgba(0,0,0,0.9),
              0 0 2px rgba(0,0,0,0.7);

  max-width:90%;
  word-wrap:break-word;
}

/* 画像（常に全体表示・JSのvpad/hpad反映） */
#pm-img{
  width:auto; height:auto;
  max-width: calc(100% - var(--hpad, 32px));
  max-height: calc(100% - var(--vpad, 112px));
  object-fit:contain; background:#000; flex:1 1 auto;
}

/* カウンタ（左上） */
.pm-counter{
  position:absolute; top:12px; left:14px; z-index:5; color:#fff;
  background:rgba(0,0,0,.35); padding:.25em .55em; border-radius:8px;
  font-weight:700; letter-spacing:.5px; font-variant-numeric:tabular-nums;
}

/* サムネイルバー */
.pm-thumbs{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:10px; z-index:4; display:flex; gap:8px; align-items:center;
  max-width:calc(100% - 24px); padding:8px; background:rgba(0,0,0,.35);
  border-radius:10px; overflow-x:auto; overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
}
.pm-thumb{ flex:0 0 auto; width:64px; height:48px; border-radius:6px;
  border:2px solid transparent; overflow:hidden; cursor:pointer; background:#111; }
.pm-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.pm-thumb:focus{ outline:2px solid #66aaff; outline-offset:2px; }
.pm-thumb.active{ border-color:#fff; box-shadow:0 0 0 2px rgba(255,255,255,.35) inset; }

/* 「全画面で開く」リンク（HTMLは #pm-openfull） */
.pm-openfull-wrap{ position:absolute; top:50px; right:12px; z-index:4; }
#pm-openfull{
  display:inline-block;
  background:#0078ff;         /* 鮮やかなブルー */
  color:#fff !important;      /* 白文字でコントラスト */
  border:1px solid #005fcc;   /* 少し濃い色で境界 */
  border-radius:6px;
  padding:0.5em 0.9em;
  font-size:15px;
  font-weight:600;
  text-decoration:none;
  box-shadow:0 3px 8px rgba(0,0,0,0.25);
  transition:all 0.2s ease;
}

#pm-openfull:hover{
  background:#005fcc;         /* 濃いブルーに変化 */
  transform:translateY(-2px); /* ホバー時に浮く */
  box-shadow:0 5px 12px rgba(0,0,0,0.35);
}


/* 地図側 */
.pm-sidebar{ position:relative; min-height:0; }
.pm-map{ position:relative; width:100%; height:100%; background:#f5f5f5; }
#pmMapFrame{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* 地図なし時：1カラム */
.pm-modal.pm-no-map .pm-main{ grid-template-columns:1fr; }
.pm-modal.pm-no-map .pm-content{ max-width:880px; }

/* 地図ローディング */
.pm-map .pm-map-loading{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.85); z-index:2; font-weight:600;
}

/* モバイル */
@media (max-width:900px){
  .pm-main{ grid-template-columns:1fr; grid-template-rows:70% 30%; height:88vh; }
  .pm-content{ max-height:88vh; }
  #pm-caption{
    font-size:16px;
    font-weight:600;
    padding:0.45em 0.8em;
  }
  .pm-prev, .pm-next{ width:36px; height:36px; font-size:20px; }
  .pm-thumbs{ gap:6px; padding:4px; }
  .pm-thumb{ width:52px; height:40px; }
    .pm-openfull-wrap{
    top:20px;   /* ← 上寄せにする（デフォ50pxから縮めた） */
    right:10px; /* ← 横位置はそのまま */
  }
  #pm-openfull{
    font-size:13px;   /* 少し小さく */
    padding:0.35em 0.7em;
    border-radius:5px;
  }
}

/* 最前面保険 */
#pm-modal, .pm-modal, .pm-content, .pm-overlay{ z-index:2147483647 !important; }