@charset "UTF-8";
/* 写真の拡大表示（js/photo-viewer.js）
   暗い背景に写真を大きく出し、下に説明、右上に閉じる、左右に送りのボタンを置く */

/* 一覧側: 写真の上に置く、クリックを受けるボタン。乗せたときだけ虫めがねを出す */
.photo-open{position:absolute;inset:0;z-index:2;display:block;width:100%;padding:0;border:0;background:transparent;cursor:zoom-in;-webkit-appearance:none;appearance:none}
.photo-open::after{content:'\f00e';position:absolute;right:14px;top:14px;width:40px;height:40px;display:grid;place-items:center;border-radius:50%;background:rgba(17,18,17,.55);color:#fff;font-family:'Font Awesome 7 Pro';font-weight:300;font-size:1rem;opacity:0;transform:scale(.9);transition:opacity .3s ease,transform .3s ease}
.photo-open:hover::after,.photo-open:focus-visible::after{opacity:1;transform:scale(1)}
.photo-open:focus-visible{outline:2px solid #fff;outline-offset:-4px}

/* 拡大表示
   --viewer-w / --viewer-h が写真を出す枠。どの写真も同じ枠に収めるので、
   縦長・横長や登録した画像の大きさで、出てくる写真の大きさが変わらない */
.photo-viewer{--viewer-w:min(1100px,92vw);--viewer-h:min(72vh,calc(var(--viewer-w) * 2 / 3));position:fixed;inset:0;z-index:1200;display:grid;place-items:center;opacity:0;transition:opacity .24s ease}
/* 閉じているときは完全に消す（display の指定が hidden より強いため、明示する） */
.photo-viewer[hidden]{display:none}
.photo-viewer.is-open{opacity:1}
.photo-viewer__backdrop{position:absolute;inset:0;background:rgba(10,11,10,.92);cursor:zoom-out}
.photo-viewer__stage{position:relative;z-index:1;width:var(--viewer-w);margin:0;display:flex;flex-direction:column;gap:14px;transform:scale(.985);transition:transform .24s ease}
.photo-viewer.is-open .photo-viewer__stage{transform:scale(1)}
.photo-viewer__image{display:block;width:100%;height:var(--viewer-h);margin:0;object-fit:contain}
.photo-viewer__caption{display:flex;align-items:baseline;justify-content:space-between;gap:18px;color:rgba(255,255,255,.82);font-family:'Montserrat',var(--font-gothic,'Zen Kaku Gothic New','Noto Sans JP',sans-serif);font-size:.72rem;font-weight:500;letter-spacing:.12em}
.photo-viewer__count{flex:none;color:rgba(255,255,255,.55)}

.photo-viewer__close,.photo-viewer__nav{position:absolute;z-index:2;display:grid;place-items:center;padding:0;border:1px solid rgba(255,255,255,.4);border-radius:50%;background:transparent;color:#fff;cursor:pointer;transition:background .25s ease,border-color .25s ease,color .25s ease}
.photo-viewer__close{right:clamp(16px,3vw,40px);top:clamp(16px,3vw,40px);width:52px;height:52px;font-size:1.2rem}
.photo-viewer__nav{top:50%;width:58px;height:58px;margin-top:-29px;font-size:1.2rem}
.photo-viewer__nav--prev{left:clamp(12px,3vw,40px)}
.photo-viewer__nav--next{right:clamp(12px,3vw,40px)}
.photo-viewer__close:hover,.photo-viewer__nav:hover,.photo-viewer__close:focus-visible,.photo-viewer__nav:focus-visible{border-color:#fff;background:#fff;color:#111211;outline:0}
.photo-viewer--single .photo-viewer__nav{display:none}

@media(max-width:800px){
  /* 画面が縦長なので、枠の高さは横幅に合わせる（枠だけ高くて写真が小さい、にならないように） */
  .photo-viewer{--viewer-w:92vw;--viewer-h:min(58vh,calc(var(--viewer-w) * .8))}
  .photo-viewer__stage{gap:10px}
  .photo-viewer__close{width:44px;height:44px;font-size:1rem}
  .photo-viewer__nav{width:44px;height:44px;margin-top:-22px;font-size:1rem}
  .photo-open::after{right:10px;top:10px;width:34px;height:34px;font-size:.85rem;opacity:1;transform:none}
}

@media(prefers-reduced-motion:reduce){
  .photo-viewer,.photo-viewer__stage,.photo-open::after{transition:none}
}