/*----------------------------------------------------
**
** GRANTEST Inc. / swipemenu.css
**
** Ver.1.0.0
**
** copyright 2020 GRANTEST Inc.
**
**----------------------------------------------------
** Common settings
**----------------------------------------------------*/
@keyframes move-btnbg{
  0%{
		height:30px;
		z-index:2;
	}
  10%{
		width:30px;
	}
  20%{
		width:10px;
		height:10px;
		background-color:var(--move-btn-color);
		z-index:3;
	}
  80%{
		width:10px;
		height:10px;
		background-color:var(--move-btn-color);
		z-index:3;
	}
  90%{
		width:30px;
		z-index:2;
	}
  100%{
		height:30px;
	}
}
:root{
  --move-btn-color:#bbb;
}
div.swipemenuwrap div.swipemenucontainer{
	overflow-x:auto;
	padding:0 0 0.5em 0;
	-ms-overflow-style:none;
	scrollbar-width:none;
	-webkit-mask-image:-webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 20%,rgba(0,0,0,1) 80%,rgba(0,0,0,0) 100%);
	mask-image:linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 20%,rgba(0,0,0,1) 80%,rgba(0,0,0,0) 100%);
	position:relative;
	z-index:1;
}
div.swipemenuwrap.swipemove div.swipemenucontainer{
	will-change:scroll-position;
}
div.swipemenuwrap.type_01 div.swipemenucontainer{
	background:-webkit-linear-gradient(top, rgba(187,187,187,0) 0%,rgba(187,187,187,0) 14px,rgba(187,187,187,1) 15px,rgba(187,187,187,0) 16px,rgba(187,187,187,0) 30px);
	background:linear-gradient(to bottom, rgba(187,187,187,0) 0%,rgba(187,187,187,0) 14px,rgba(187,187,187,1) 15px,rgba(187,187,187,0) 16px,rgba(187,187,187,0) 30px);
}
div.swipemenuwrap div.swipemenucontainer::-webkit-scrollbar{
	display:none;
}
div.swipemenuwrap div.swipemenuinner{
	display:flex;
	position:relative;
	z-index:1;
}
div.swipemenuwrap div.swipemenuinner::before,
div.swipemenuwrap div.swipemenuinner::after{
	display:block;
	content:'';
	width:20%;
	flex-shrink:0;
}
div.swipemenuwrap div.swipemenuinner .swipemenu{
	display:inline-block;
	cursor:pointer;
	transition:all 0.6s ease;
	margin:0 0.25em;
	flex-shrink:0;
	line-height:30px;
	height:30px;
	padding:0 1em;
	position:relative;
	z-index:3;
}
div.swipemenuwrap.type_01 div.swipemenuinner .swipemenu{
	background-color:rgba(255,255,255,0);
	color:#445;
}
div.swipemenuwrap.type_02 div.swipemenuinner .swipemenu{
	background-color:#f2f2f6;
	color:#445;
	border-radius:6px;
	box-shadow:3px 3px 6px #bfbfc2,-3px -3px 6px #ffffff;
}
div.swipemenuwrap.type_02 div.swipemenuinner .swipemenu.swipeactive{
	box-shadow:inset 3px 3px 6px #bfbfc2,inset -3px -3px 6px #ffffff;
}
div.swipemenuwrap.type_01 div.swipemenuinner .swipemenu::after{
	position:absolute;
	z-index:-1;
	content:'';
	display:block;
	top:0;
	right:0;
	bottom:0;
	left:0;
	border-radius:15px;
}
div.swipemenuwrap.type_01 div.swipemenuinner .swipemenu::after,
div.swipemenuwrap.type_01 div.swipemenuinner span.btnbg{
	background-color:#bbb;
}
div.swipemenuwrap.type_01 div.swipemenuinner .swipemenu.swipeactive::after{
	background-color:rgba(187,187,187,0);
}
div.swipemenuwrap.type_01 div.swipemenuinner span.btnbg,
div.swipemenuwrap.type_01 div.swipemenuinner span.btnbgmove{
	display:block;
	position:absolute;
	top:50%;
	height:30px;
	border-radius:15px;
	transform:translate3d(-50%,-50%,0);
}
div.swipemenuwrap.type_01 div.swipemenuinner span.btnbg{
	z-index:1;
}
div.swipemenuwrap.type_01 div.swipemenuinner span.btnbgmove{
	transition:all 0.4s ease;
	z-index:2;
}
div.swipemenuwrap.type_01 div.swipemenuinner span.btnbgmove.swipeactive{
	animation:move-btnbg 400ms linear forwards;
}
div.swipemenuwrap.type_01.swipemove div.swipemenuinner span.btnbgmove.swipeactive{
	animation:move-btnbg 200ms linear forwards;
}
.swipechangetarget{
}
.swipechangetarget .swipechangetargetinner{
	overflow:hidden;
	position:relative;
	z-index:1;
}
.swipechangetarget .swipemenuviewarea{
	position:relative;
	z-index:1;
}
.swipechangetarget .swipeitem{
	position:absolute;
	background-color:#FFF;
	width:100%;
	top:0;
	left:0;
	transform:translate3d(-100%,0,0);
	transition:all 0.4s ease;
	z-index:2;
	opacity:0;
	box-shadow:0.5px 0 0.75px -24px rgba(0, 0, 0, 0.057),1.25px 0 1.5px -24px rgba(0, 0, 0, 0.076),2.5px 0 5px -24px rgba(0, 0, 0, 0.086),4.5px 0 4.5px -24px rgba(0, 0, 0, 0.092),7.5px 0 7.5px -24px rgba(0, 0, 0, 0.1),25px 0 15px -24px rgba(0, 0, 0, 0.13);
	will-change:left, top;
}
.swipechangetarget .swipeitem.swipemove{
	transition:all 0s ease !important;
	z-index:3;
	opacity:1;
}
.swipechangetarget .swipeitem.swipeactive ~ .swipeitem{
	transform:translate3d(100%,0,0);
	box-shadow:-0.5px 0 0.75px -24px rgba(0, 0, 0, 0.057),-1.25px 0 1.5px -24px rgba(0, 0, 0, 0.076),-2.5px 0 5px -24px rgba(0, 0, 0, 0.086),-4.5px 0 4.5px -24px rgba(0, 0, 0, 0.092),-7.5px 0 7.5px -24px rgba(0, 0, 0, 0.1),-25px 0 15px -24px rgba(0, 0, 0, 0.13) !important;
	z-index:1;
}
.swipechangetarget .swipeitem.swipeactive{
	transform:translate3d(0,0,0);
	z-index:2;
	opacity:1;
	box-shadow:none;
}
.swipechangetarget .swipeitem.swipedelay{
	transform:translate3d(0,0,0) !important;
	opacity:1 !important;
	transition:all 0s ease !important;
	z-index:1 !important;
}