@keyframes a{
	0%{opacity:0}
	to{opacity:1}
}
@keyframes b{
	0%{
		opacity:0;
		transform:scale(.5)
	}
	to{
		opacity:1;
		transform:scale(1)
	}
}

@keyframes c{
	0%{transform:translate(-50%,-50%) rotate(0)}
	50%{transform:translate(-50%,-50%) rotate(-180deg)}
	to{transform:translate(-50%,-50%) rotate(-1turn)}
}

@keyframes d{
	0%{transform:scale(1)}
	10%{transform:scale(1.2) translateX(6px)}
	25%{transform:scale(1.3) translateX(8px)}
	40%{transform:scale(1.2) translateX(6px)}
	50%{transform:scale(1)}
	60%{transform:scale(.8) translateX(6px)}
	75%{transform:scale(.7) translateX(8px)}
	90%{transform:scale(.8) translateX(6px)}
	to{transform:scale(1)}
}

@keyframes e{
	0%{transform:scale(1)}
	10%{transform:scale(1.2) translateX(-6px)}
	25%{transform:scale(1.3) translateX(-8px)}
	40%{transform:scale(1.2) translateX(-6px)}
	50%{transform:scale(1)}
	60%{transform:scale(.8) translateX(-6px)}
	75%{transform:scale(.7) translateX(-8px)}
	90%{transform:scale(.8) translateX(-6px)}
	to{transform:scale(1)}
}

	.lum-lightbox{background:rgba(0,0,0,.6)}
	.lum-lightbox-inner{bottom:2.5%;left:2.5%;right:2.5%;top:2.5%}
	.lum-lightbox-inner img{position:relative}
	.lum-lightbox-inner .lum-lightbox-caption{color:#fff;margin:0 auto;max-width:700px;text-align:center}
	.lum-loading .lum-lightbox-loader{
		animation:c 1.8s infinite linear;
		display:block;
		height:20px;
		left:50%;
		position:absolute;
		top:50%;
		transform:translate(-50%,-50%);
		width:66px
	}
	.lum-lightbox-loader:after,.lum-lightbox-loader:before{
		background:hsla(0,0%,100%,.9);
		border-radius:20px;
		content:"";
		display:block;
		height:20px;
		margin-top:-10px;
		position:absolute;
		top:50%;
		width:20px
	}
	.lum-lightbox-loader:before{
		animation:d 1.8s infinite linear;
		left:0
	}
	.lum-lightbox-loader:after{
		animation:e 1.8s infinite linear;
		animation-delay:-.9s;
		right:0
	}
	.lum-lightbox.lum-opening{
		animation:a .18s ease-out
	}
	.lum-lightbox.lum-opening .lum-lightbox-inner{
		animation:b .18s ease-out
	}
	.lum-lightbox.lum-closing{
		animation:a .3s ease-in;
		animation-direction:reverse
	}
	.lum-lightbox.lum-closing .lum-lightbox-inner{
		animation:b .3s ease-in;
		animation-direction:reverse
	}
	.lum-img{
		transition:opacity .12s ease-out
	}
	.lum-loading .lum-img{opacity:0}
	.lum-gallery-button{
		background:transparent;
		border:0;
		cursor:pointer;
		height:100px;
		margin:0;
		max-height:100%;
		outline:0;
		overflow:hidden;
		padding:0;
		position:absolute;
		text-indent:150%;
		top:50%;
		transform:translateY(-50%);
		white-space:nowrap;
		width:60px
	}
	.lum-close-button{
		height:32px;
		opacity:.3;
		position:absolute;
		right:5px;
		top:5px;
		width:32px
	}
	.lum-close-button:hover{opacity:1}
	.lum-close-button:after,.lum-close-button:before{
		background-color:#fff;
		content:" ";
		height:33px;
		left:15px;
		position:absolute;
		width:2px
	}
	.lum-close-button:before{transform:rotate(45deg)}
	.lum-close-button:after{transform:rotate(-45deg)}
	.lum-previous-button{left:12px}
	.lum-next-button{right:12px}
	.lum-gallery-button:after{
		border-top:4px solid hsla(0,0%,100%,.8);
		content:"";
		display:block;
		height:36px;
		position:absolute;
		top:50%;width:36px
	}
	.lum-previous-button:after{
		border-left:4px solid hsla(0,0%,100%,.8);
		border-radius:3px 0 0 0;
		box-shadow:-2px 0 rgba(0,0,0,.2);
		left:12%;
		transform:translateY(-50%) rotate(-45deg)
	}
	.lum-next-button:after{
		border-radius:0 3px 0 0;
		border-right:4px solid hsla(0,0%,100%,.8);
		box-shadow:2px 0 rgba(0,0,0,.2);
		right:12%;
		transform:translateY(-50%) rotate(45deg)
	}
	
@media (max-width:460px){
	.lum-lightbox-image-wrapper{
		-webkit-overflow-scrolling:touch;
		display:flex;
		overflow:auto
	}
	.lum-lightbox-caption{
		bottom:0;
		position:absolute;
		width:100%
	}
	.lum-lightbox-position-helper{
		margin:auto
	}
	.lum-lightbox-inner img{
		max-height:none;
		max-width:none
	}
}

@media screen and (max-width: 730px) {
  .lum-lightbox-inner img {
    max-width: 160vw !important;  /* 軽くスワイプで左端から右端まで動かせる量 */
    max-height: 85vh !important;  /* 上下に適度に余白 */
  }
}