html
{
/*
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
*/
	--myLightBox2ScrollbarWidth: 0;

	--myVW: 1vw;
	--myVH: 1vh;
	--myVMIN: 1vmin;
}

@supports (width: 1dvw)
{
	html
	{
		--myVW: 1dvw;
		--myVH: 1dvh;
		--myVMIN: 1dvmin;
	}
}

/* start myLightBox2.js calc scrollbarWidth */
#myLightBox2Area
{
	--parentWidth: calc(var(--myVW) * 100 - var(--myLightBox2ScrollbarWidth));
	--parentHeight: calc(var(--myVH) * 100);
	/*   var(--mySpace) is outer space / =closeIcon size*2 */
	--mySpace: calc(var(--myVMIN) * 5);
}
@media screen and (max-width: 650px)
{
	#myLightBox2Area
	{
		--mySpace: calc(var(--myVMIN) * 10);
	}
}


/* end  myLightBox2.js calc scrollbarWidth */
/* start .myLightBox2Add */
/*   .myLightBox2Add default "display" = "inline-block" */
.myLightBox2Add
{
	display: inline-block;
	position: relative;

	--loupeSize: calc(var(--myVMIN) * 2);
}


.myLightBox2Add:hover
{
	cursor: pointer;
	cursor: zoom-in;
}

.myLightBox2Add *
{
	pointer-events: none;
}

/*   start .myLightBox2Add Loupe Settings */
/*     .myLightBox2Add.loupeTL,TR,CL,CR,BL,BR,IL,IR,noLoupe */
/*       T/C/B/I ... Top/Center/Bottom/Inner, L/R ... Left/Right */
/*       .noLoupe ... not display loupe */
.myLightBox2Add::after
{
	content: '';
	display: inline-block;
	background: url('myLightBox_loupe.png') no-repeat center center;
	background-size: contain;
	width: var(--loupeSize);
	height: var(--loupeSize);
	position: absolute;
	top: auto;
	bottom: auto;
	left: auto;
	right: auto;
}
.myLightBox2Add.noLoupe::after
{
	display: none;
}
.myLightBox2Add:not(.loupeIR):not(.loupeIL):after,
.myLightBox2Add.loupeCR::after,
.myLightBox2Add.loupeBR::after,
.myLightBox2Add.loupeTR::after
{
	right: calc(var(--loupeSize) * -0.5);
}
.myLightBox2Add.loupeCL::after,
.myLightBox2Add.loupeBL::after,
.myLightBox2Add.loupeTL::after
{
	left: calc(var(--loupeSize) * -0.5);
}
.myLightBox2Add.loupeTR::after,
.myLightBox2Add.loupeTL::after
{
	top: calc(var(--loupeSize) * -0.5);
}
.myLightBox2Add.loupeCR::after,
.myLightBox2Add.loupeCL::after
{
	top: 50%;
	transform: translateY(-50%);
}
.myLightBox2Add:not(.loupeIR):not(.loupeIL)::after,
.myLightBox2Add.loupeBR::after,
.myLightBox2Add.loupeBL::after
{
	bottom: calc(var(--loupeSize) * -0.5);
}

/*     start .loupeIR,IL inline middleRight, middleLeft */
.myLightBox2Add.loupeIR
{
	padding-right: calc(var(--loupeSize) * 1.05);
}
.myLightBox2Add.loupeIL
{
	padding-left: calc(var(--loupeSize) * 1.05);
}
.myLightBox2Add.loupeIR::after,
.myLightBox2Add.loupeIL::after
{
	top: 50%;
	transform: translateY(-50%);
}

.myLightBox2Add.loupeIR::after
{
	right: 0dvmin;
}
.myLightBox2Add.loupeIL::after
{
	left: 0dvmin;
}
/*     end   .loupeIR,IL inline middleRight, middleLeft */
/*   end   .myLightBox2Add Loupe Settings */

/* end   .myLightBox2Add */

/* start #myLightBox2 */
#myLightBox2
{
	display: block;
	width: var(--parentWidth);
	height: var(--parentHeight);
	line-height: 0;
	padding: 0;
	margin: 0;
	position: fixed;
	top: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.6);
	-webkit-backdrop-filter: blur(5px);
	-moz-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
	z-index: 2000;
	opacity: 0;
	transition: opacity 0.2s ease;
}
#myLightBox2:hover
{
	cursor: zoom-out;
}

#myLightBox2.hide
{
	opacity: 0;
}
#myLightBox2.view
{
	opacity: 1;
}
#myLightBox2 > .object
{
	display: inline-block;
	aspect-ratio: var(--myWidth) / var(--myHeight);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: min(((var(--parentHeight) - var(--mySpace)) / var(--myHeight) * var(--myWidth)), (var(--parentWidth) - var(--mySpace)));
}

/*   start #myLightBox2 "closeIcon" settings */
#myLightBox2 > .object::before,
#myLightBox2 > .object::after
{
	content: '';
	display: inline-block;
	font-size: calc(var(--mySpace) * 0.4);
	text-align: center;
	width: 1em;
	height: 0.2em;
	line-height: 100%;
	overflow: visible;
	background-color: #FFF;
	position: absolute;
	top: calc(var(--mySpace) * -0.25);
	right: calc(var(--mySpace) * -0.25);
	border-radius: 0.1em;
}
#myLightBox2 > .object::before
{
	transform: translate(0%, 25%) rotate(-45deg);
}
#myLightBox2 > .object::after
{
	transform: translate(0%, 25%) rotate(45deg);
}
/*   end   #myLightBox2 "closeIcon" settings */

/* end   #myLightBox2 */