@charset "utf-8";

/*----------------------------- loop_slider -----------------------------*/
/****************************** all ******************************/
.loop_slider{
	margin:auto;
	display:flex;
	justify-content:space-between;
	align-items:stretch;
}

.loop_slider_list_wrapper{
	margin:0 auto;
	position:relative;
	overflow:hidden;
}

.loop_slider_list_parent{
	display:flex;
	justify-content:flex-start;
	align-items:flex-start;
	position:absolute;
	top:0;
	left:0;
	z-index:0;
}

.loop_slider_list{
	display:flex;
	justify-content:flex-start;
	align-items:flex-start;
}

.loop_slider_list > li{
	transition:opacity 0.3s;
}

.loop_slider_list:has(.loop_slider_list_active) > li:not(.loop_slider_list_active){
	opacity:0.2;
}

.loop_slider_list > li > *{
	width:95%;
}

.loop_slider_trigger{
	position:relative;
	overflow:hidden;
	display:flex;
	align-items:center;
	justify-content:center;
}

.loop_slider_trigger > span{
	position:absolute;
	width:1px;
	height:1px;
	padding:0;
	margin:-1px;
	overflow:hidden;
	clip:rect(0, 0, 0, 0);
	border:0;
}

.loop_slider_trigger_prev::before, 
.loop_slider_trigger_next::after{
	content:"";
	width:100%;
	aspect-ratio:1;
	border-top:solid #444 1px;
	display:inline-block;
}

.loop_slider_trigger_prev::before{
	border-left:solid #444 1px;
}

.loop_slider_trigger_next::after{
	border-right:solid #444 1px;
}
/****************************** /all ******************************/

/****************************** pc ******************************/
@media screen and (min-width:1280px){
	.loop_slider{
		width:100%;
	}
	
	.loop_slider_list_wrapper{
		width:calc(100% - 60px);
	}
	
	.loop_slider_trigger{
		width:25px;
	}
	
	.loop_slider_trigger_prev::before{
		transform:rotate(-45deg) translate(4px,4px);
	}
	
	.loop_slider_trigger_next::after{
		transform:rotate(45deg) translate(-4px,4px);
	}
}
/****************************** /pc ******************************/

/****************************** tablet ******************************/
@media screen and (min-width:768px) and (max-width:1280px){
	.loop_slider{
		width:100%;
	}
	
	.loop_slider_list_wrapper{
		width:90%;
	}
	
	.loop_slider_trigger{
		width:3.5vw;
	}
	
	.loop_slider_trigger_prev::before{
		transform:rotate(-45deg) translate(0.6vw,0.6vw);
	}
	
	.loop_slider_trigger_next::after{
		transform:rotate(45deg) translate(-0.6vw,0.6vw);
	}
}
/****************************** /tablet ******************************/

/****************************** sp ******************************/
@media screen and (max-width:768px){
	.loop_slider{
		width:100%;
	}
	
	.loop_slider_list_wrapper{
		width:90%;
	}
	
	.loop_slider_trigger{
		width:5.5vw;
	}
	
	.loop_slider_trigger_prev::before{
		transform:rotate(-45deg) translate(1.0vw,1.0vw);
	}
	
	.loop_slider_trigger_next::after{
		transform:rotate(45deg) translate(-1.0vw,1.0vw);
	}
}
/****************************** /sp ******************************/
/*----------------------------- /loop_slider -----------------------------*/