@charset "utf-8";

/*----------------------------- light_box -----------------------------*/
/****************************** all ******************************/
@keyframes light_box_animate_spin{
	0%{
		transform:rotate(0deg);
	}
	50%{
		transform:rotate(180deg);
	}
	100%{
		transform:rotate(360deg);
	}
}

.light_box_parent, 
.light_box{
	display:none;
	position:absolute;
}

.light_box_parent{
	width:100%;
	background:rgba(0, 0, 0, .5);
	top:0;
	left:0;
	z-index:100;
	overflow:auto;
}

.light_box{
	background:#fff;
	cursor:unset;
}

.light_box_outer{
	width:100%;
	height:100%;
	overflow:hidden;
}

.light_box_inner{
	width:100%;
}

.light_box_hide_trigger{
	aspect-ratio:1;
	border:solid #fff 2px;
	box-sizing:content-box;
	background:#000;
	border-radius:50%;
	position:absolute;
}

.light_box_hide_trigger::before, 
.light_box_hide_trigger::after{
	content:"";
	background:#fff;
	position:absolute;
	transform:rotate(45deg);
	display:block;
}

.light_box_loader{
	aspect-ratio:1;
	border-radius:50%;
	display:none;
	position:relative;
	top:50%;
	left:50%;
	z-index:1;
}

.light_box_loader::after{
	content:"";
	width:100%;
	height:100%;
	border-right-color:transparent;
	display:block;
	border-radius:50%;
	animation:light_box_animate_spin 1s infinite linear;
}
/****************************** /all ******************************/

/****************************** pc ******************************/
@media screen and (min-width:1280px){
	.light_box{
		box-shadow:0 0 5px rgba(0,0,0,0.3);
	}
	
	.light_box_hide_trigger{
		width:24px;
		top:8px;
		right:8px;
	}
	
	.light_box_hide_trigger::before{
		width:2px;
		height:20px;
		top:2px;
		left:calc(50% - 1px);
	}
	
	.light_box_hide_trigger::after{
		width:20px;
		height:2px;
		top:calc(50% - 1px);
		left:2px;
	}
	
	.light_box_loader{
		width:26px;
		transform:translate(-13px, -13px);
	}
	
	.light_box_loader::after{
		border:solid #fff 2px;
	}
}
/****************************** /pc ******************************/

/****************************** tablet ******************************/
@media screen and (min-width:768px) and (max-width:1280px){
	.light_box{
		box-shadow:0 0 0.5vw rgba(0,0,0,0.3);
	}
	
	.light_box_hide_trigger{
		width:2.4vw;
		top:0.8vw;
		right:0.8vw;
	}
	
	.light_box_hide_trigger::before{
		width:0.2vw;
		height:2.0vw;
		top:0.2vw;
		left:calc(50% - 0.1vw);
	}
	
	.light_box_hide_trigger::after{
		width:2.0vw;
		height:0.2vw;
		top:calc(50% - 0.1vw);
		left:0.2vw;
	}
	
	.light_box_loader{
		width:2.6vw;
		transform:translate(-1.3vw, -1.3vw);
	}
	
	.light_box_loader::after{
		border:solid #fff 0.2vw;
	}
}
/****************************** /tablet ******************************/

/****************************** sp ******************************/
@media screen and (max-width:768px){
	.light_box{
		box-shadow:0 0 1.5vw rgba(0,0,0,0.3);
	}
	
	.light_box_hide_trigger{
		width:8.0vw;
		top:2.0vw;
		right:2.0vw;
	}
	
	.light_box_hide_trigger::before{
		width:0.4vw;
		height:7.0vw;
		top:0.5vw;
		left:calc(50% - 0.2vw);
	}
	
	.light_box_hide_trigger::after{
		width:7.0vw;
		height:0.4vw;
		top:calc(50% - 0.2vw);
		left:0.5vw;
	}
	
	.light_box_loader{
		width:7.0vw;
		transform:translate(-3.5vw, -3.5vw);
	}
	
	.light_box_loader::after{
		border:solid #fff 0.7vw;
	}
}
/****************************** /sp ******************************/
/*----------------------------- /light_box -----------------------------*/