/* =====================================================================
   記事画像クリック拡大ライトボックス スタイル
   本番の置き場所:
     https://file001.shop-pro.jp/PA01124/421/asset202107/css/media-lightbox.css
   ===================================================================== */

#area_main a.hf-lb-trigger{cursor:zoom-in;}
#area_main .hf-lb-cell{cursor:pointer;}
#area_main .hf-lb-cell:hover{opacity:.9;transition:opacity .15s;}
#area_main .hf-lb-autobtn{margin:8px 0 0;}
#area_main div.area_media img{max-width:100%;height:auto;}

.hf-lb{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;
  background:rgba(0,0,0,.88);padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;
  overscroll-behavior:contain;}
.hf-lb.is-open{display:flex;}

.hf-lb__stage{position:relative;width:96vw;height:90vh;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  touch-action:none;z-index:1;}
.hf-lb__img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  background:#fff;border-radius:2px;box-shadow:0 6px 40px rgba(0,0,0,.5);
  transform-origin:center center;opacity:0;transition:opacity .2s;
  will-change:transform;-webkit-user-drag:none;user-select:none;-webkit-user-select:none;}
.hf-lb__img.is-ready{opacity:1;}
.hf-lb.is-zoomed{cursor:move;}

.hf-lb__cap{position:absolute;left:0;right:0;bottom:14px;padding:0 16px;text-align:center;
  color:#fff;font-size:13px;line-height:1.5;text-shadow:0 1px 3px rgba(0,0,0,.8);
  pointer-events:none;z-index:3;}
.hf-lb__hint{position:absolute;top:14px;left:50%;transform:translateX(-50%);
  background:rgba(0,0,0,.55);color:#fff;font-size:12px;line-height:1;
  padding:7px 14px;border-radius:20px;white-space:nowrap;
  pointer-events:none;opacity:0;transition:opacity .3s;z-index:3;}
.hf-lb__hint.show{opacity:1;}

.hf-lb__btn{position:absolute;padding:0;width:44px;height:44px;border:0;border-radius:50%;
  background:rgba(0,0,0,.45);color:#fff;font-size:22px;line-height:44px;cursor:pointer;z-index:4;}
.hf-lb__btn:hover{background:rgba(0,0,0,.8);}
.hf-lb__close{top:12px;right:12px;font-size:24px;}
.hf-lb__prev{left:10px;top:50%;margin-top:-22px;}
.hf-lb__next{right:10px;top:50%;margin-top:-22px;}

.hf-lb__spin{position:absolute;width:38px;height:38px;border:3px solid rgba(255,255,255,.3);
  border-top-color:#fff;border-radius:50%;animation:hf-lb-spin .8s linear infinite;z-index:2;}
@keyframes hf-lb-spin{to{transform:rotate(360deg);}}

@media(max-width:767px){
  .hf-lb__stage{width:100vw;height:86vh;}
  .hf-lb__prev{left:4px;}
  .hf-lb__next{right:4px;}
}