/* ボタンクリック後表示される画像と周りの指定 */
.lightbox{
	position:fixed;
	inset:0;
	display:flex;
	align-items:center;
	justify-content:center;
	background:rgba(0,0,0,.9);
	opacity:0;
	visibility:hidden;
	transition:.25s;
	z-index:99999;
	cursor:pointer;
	overflow:hidden;
}
.lightbox img{
	max-width:90vw;
	max-height:90vh;
	user-select:none;
	-webkit-user-drag:none;
	cursor:grab;
	transform-origin:center center;
	touch-action:none;
	will-change:transform;
}
.lightbox.is-open{
	opacity:1;
	visibility:visible;
}
.lightbox img:active{
	cursor:grabbing;
}

/* 表示前ボタン部分の指定 */
.has-lightbox .wp-block-image a{
	position:relative;
	display:inline-block;
	overflow:hidden;
}
.has-lightbox .wp-block-image a img{
	display:block;
	transition:transform .3s ease;
}
.has-lightbox .wp-block-image a::after{
	content:"";
	position:absolute;
	inset:0;
	background:rgba(0,0,0,.56);
	opacity:1;
	transition:opacity .3s ease;
	pointer-events:none;
}
.has-lightbox .wp-block-image a:hover img{
	transform:scale(1.05);
}
.has-lightbox .wp-block-image a:hover::after{
	opacity:0.48;
}

.has-lightbox .wp-block-image a::before{
	content:"";
	position:absolute;
	right:8px;
	bottom:8px;
	width:18px;
	height:18px;
	background:url("../images/icons/zoom-in-icon-white.svg") center/contain no-repeat;
	z-index:2;
	pointer-events:none;
	transition:transform .3s ease, opacity .3s ease;
	opacity:.9;
}
.has-lightbox .wp-block-image a:hover::before{
	transform:scale(1.1);
	opacity:1;
}
/* スマホ表示時は2カラムの指定 */
.has-lightbox {
	display: grid !important;
    column-gap: 16px !important;
    row-gap: 24px !important;
	grid-template-columns: repeat(2, 1fr);
  }
/* キャプション部分 */
.has-lightbox figcaption{
    font-size:0.64em;
    letter-spacing:0.1em;
    font-weight:600;
    text-align:left !important;
    margin:2px 0 0;
    color:#333;
    padding:0 0 7px 0;
    border-bottom:0.56px solid rgb(195, 195, 195);
}
/* .has-lightbox .wp-block-column:hover figcaption{
    box-shadow: rgba(33, 35, 38, 0.24) 0px 10px 10px -10px;
} */
  
/* PC表示時は3カラムの指定 */
@media (min-width: 768px) {
.has-lightbox{
      column-gap: 32px !important;
      row-gap: 30px !important;
	}
.has-lightbox.columns3 {
	  grid-template-columns: repeat(3, 1fr);
      column-gap: 32px !important;
      row-gap: 30px !important;
	}
.has-lightbox figcaption{
    font-size:0.72em;
    margin:4px 0 0;
    padding:0 0 10px 0;
}
  }