/* ===== base ===== */
body.gallery-page{
  margin:0;
  min-height:100vh;
  padding: 28px 16px 40px;
  background-image: url('galleryImages/vampairebg.png');
  background-repeat: repeat;
  color:#fff;
}
/* まず全要素をはみ出しにくくする */
*{ box-sizing: border-box; }

html, body{ overflow-x: hidden; } /* 念のため */

/* pc-windowが画面幅を超えないように */
.pc-window{
  width: min(1180px, 100%);
}

/* 画像がカードから突き抜けないように */
.g-card, .g-win{
  overflow: hidden;
}
.g-card img, .g-win img{
  display:block;
  width:100%;
  height:auto;
}

.gallery-page a{ color:#fff; }

/* ===== PC window ===== */
.pc-window{
  max-width:1180px;
  margin: 22px auto;
  border:2px solid #ff2a2a;
  background: rgba(0,0,0,0.72);
  box-shadow: 0 0 0 2px rgba(255,0,0,0.18) inset;
}

.pc-titlebar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 12px;
  background: linear-gradient(#240000,#120000);
  border-bottom:2px solid #ff2a2a;
}

.pc-title{
  font-weight:800;
  color:#ff5a5a;
}

.pc-controls{ display:flex; gap:6px; }
.pc-btn{
  width:14px;height:14px;
  border:1px solid #ff2a2a;
}

/* topline */
.pc-topline{
  padding:8px 12px;
  font-size:12px;
  border-bottom:1px solid rgba(255,42,42,0.6);
}

/* layout */
.pc-body{
  display:grid;
  grid-template-columns:220px 1fr 240px;
  gap:14px;
  padding:14px;
}

.pc-side{}
.pc-main{
  border:1px solid rgba(255,42,42,0.35);
  padding:10px;
}

/* panels */
.pc-panel{
  border:1px solid rgba(255,42,42,0.75);
  background: rgba(0,0,0,0.55);
  margin-bottom:12px;
}

.pc-panel-title{
  padding:8px 10px;
  border-bottom:1px solid rgba(255,42,42,0.65);
  font-weight:800;
  color:#ff5a5a;
  font-size:12px;
}

.pc-small{
  padding:10px;
  font-size:12px;
}

/* nav */
.pc-nav{
  display:block;
  padding:10px;
  text-decoration:none;
}

.pc-nav.is-active{
  background: rgba(255,42,42,0.18);
}

/* chips */
.pc-chip{
  display:inline-block;
  margin:10px 8px 0;
  padding:6px 8px;
  border:1px solid rgba(255,42,42,0.65);
  font-size:12px;
  text-decoration:none;
}

/* ===== gallery inner ===== */
.g-header{
  display:flex;
  justify-content:center;
  gap:18px;
  margin:8px 0 16px;
}

.g-mascot{ width:84px; image-rendering:pixelated; }

.g-title{
  border:2px solid #6e0000;
  padding:14px 22px;
  background: rgba(0,0,0,0.25);
  text-align:center;
}

.g-title-top{ font-size:34px; font-weight:800; }
.g-title-sub{ font-size:12px; }

.g-rule{
  margin-bottom:18px;
  padding:10px;
  border:2px solid #6e0000;
  background: rgba(0,0,0,0.25);
  text-align:center;
}

.g-grid{
  display:grid;
  grid-template-columns: repeat(2,1fr);
  gap:26px;
}

@media(min-width:980px){
  .g-grid{ grid-template-columns: repeat(3,1fr); }
}

.g-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  border:2px solid #6e0000;
  padding:18px 14px;
  text-decoration:none;
  background: rgba(0,0,0,0.20);
}

.g-caption{
  border:2px solid #6e0000;
  padding:6px 10px;
  font-weight:700;
}

.g-card.is-disabled{
  opacity:.6;
}

.g-footer{
  margin-top:22px;
  text-align:center;
}

.g-back{
  border:2px solid #6e0000;
  padding:10px 14px;
  text-decoration:none;
}

/* responsive */
@media(max-width:980px){
  .pc-body{ grid-template-columns:1fr; }
}
/* ===== GIFをウィンドウ化 ===== */
.g-win{
  display:block;
  text-decoration:none;
  border: 2px solid rgba(255,42,42,0.85);
  background: rgba(0,0,0,0.55);
  box-shadow: 0 0 0 2px rgba(255,0,0,0.15) inset;
  transition: transform .12s ease, filter .12s ease;
}

.g-winbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 8px 10px;
  background: linear-gradient(#240000,#120000);
  border-bottom: 2px solid rgba(255,42,42,0.85);
  color: #ffb3b3;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .3px;
}

.g-winbtns{
  display:flex;
  gap:6px;
}
.g-winbtns i{
  width: 12px; height: 12px;
  border: 1px solid rgba(255,42,42,0.85);
  background: rgba(255,255,255,0.06);
  display:inline-block;
}

.g-winbody{
  padding: 10px;
  background: rgba(0,0,0,0.35);
}

.g-winbody img{
  width:100%;
  height:auto;
  display:block;
  image-rendering: pixelated; /* 好みなら */
}

/* ホバー：浮く */
.g-win:hover{
  transform: translateY(-2px);
  filter: drop-shadow(0 0 12px rgba(255,42,42,0.20));
}

/* 工事中 */
.g-win.is-disabled{
  opacity: .65;
  filter: grayscale(.25);
  cursor: default;
}
.g-win.is-disabled:hover{
  transform:none;
  filter:none;
}
.g-lock{
  margin-top: 8px;
  padding: 6px 8px;
  border: 1px dashed rgba(255,42,42,0.8);
  color: rgba(255,200,200,0.9);
  text-align:center;
  font-size: 12px;
}
/* ===== single column layout ===== */
.pc-body--single{
  display:block;
  padding: 16px;
}

.pc-main--wide{
  width: 100%;
  max-width: none;
  border: none;
  background: transparent;
  padding: 0;
}

/* pc-windowをもっとデカく */
.pc-window{
  max-width: 1400px;
  width: min(1400px, 98vw);
}

/* グリッドをでかく：PCは2列で巨大表示 */
.g-grid--big{
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

/* 画面がめちゃ広いなら3列に戻してもいい（任意） */
@media (min-width: 1400px){
  .g-grid--big{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ウィンドウ自体も“厚み”を増やす */
.g-winbody{
  padding: 14px;
}

/* GIFが小さく見える場合：内側の余白を減らすならこれ */
@media (max-width: 700px){
  .g-winbody{ padding: 10px; }
  .g-grid--big{ grid-template-columns: 1fr; }
}