/*----------------------------------------------------
** WEB COMBO / wcScrollNavi.css
** Ver.6.0.0
** copyright 2020 GRANTEST Inc.
**----------------------------------------------------
** Animation settings
**----------------------------------------------------*/
@keyframes wc-sn-line-l{
	0%{
		opacity:0;
		transform:scale(0) translateY(-50%);
	}
	8%{
		opacity:1;
		transform:scale(1.1) translateY(-50%);
		width:2px;
	}
	10%{
		opacity:1;
		transform:scale(1) translateY(-50%);
		width:2px;
	}
	40%{
		width:60%;
		left:40%;
	}
	90%{
		opacity:1;
	}
	100%{
		opacity:0;
		width:2px;
		left:calc(100% - 2px);
	}
}
@keyframes wc-sn-line-r{
	0%{
		opacity:0;
		transform:scale(0) translateY(-50%);
	}
	8%{
		opacity:1;
		transform:scale(1.1) translateY(-50%);
		width:2px;
	}
	10%{
		opacity:1;
		transform:scale(1) translateY(-50%);
		width:2px;
	}
	40%{
		width:60%;
		right:40%;
	}
	90%{
		opacity:1;
	}
	100%{
		opacity:0;
		width:2px;
		right:calc(100% - 2px);
	}
}
@keyframes wc-sn-arrow-l{
	0%{
		opacity:0;
		width:0;
		height:0;
	}
	20%{
		opacity:1;
		width:6px;
		height:6px;
		border-width:2px;
		border-radius:50%;
	}
	30%{
		border-top-color:transparent;
		border-right-color:transparent;
	}
	40%{
		border-radius:0;
		opacity:1;
	}
	90%{
		opacity:0;
	}
	100%{
		opacity:0;
		border-top-color:transparent;
		border-right-color:transparent;
		width:6px;
		height:6px;
	}
}
@keyframes wc-sn-arrow-l-end{
	0%{
		opacity:0;
		width:0;
		height:0;
	}
	20%{
		opacity:1;
		width:6px;
		height:6px;
		border-width:2px;
		border-radius:50%;
	}
	30%{
		border-top-color:transparent;
		border-right-color:transparent;
	}
	40%{
		border-radius:0;
		opacity:1;
	}
	100%{
		border-top-color:transparent;
		border-right-color:transparent;
		width:6px;
		height:6px;
		border-radius:0;
		opacity:1;
	}
}
@keyframes wc-sn-arrow-r{
	0%{
		opacity:0;
		width:0;
		height:0;
	}
	20%{
		opacity:1;
		width:6px;
		height:6px;
		border-width:2px;
		border-radius:50%;
	}
	30%{
		border-bottom-color:transparent;
		border-left-color:transparent;
	}
	40%{
		border-radius:0;
		opacity:1;
	}
	90%{
		opacity:0;
	}
	100%{
		opacity:0;
		border-bottom-color:transparent;
		border-left-color:transparent;
		width:6px;
		height:6px;
	}
}
@keyframes wc-sn-arrow-r-end{
	0%{
		opacity:0;
		width:0;
		height:0;
	}
	20%{
		opacity:1;
		width:6px;
		height:6px;
		border-width:2px;
		border-radius:50%;
	}
	30%{
		border-bottom-color:transparent;
		border-left-color:transparent;
	}
	40%{
		border-radius:0;
		opacity:1;
	}
	100%{
		border-bottom-color:transparent;
		border-left-color:transparent;
		width:6px;
		height:6px;
		border-radius:0;
		opacity:1;
	}
}
/*----------------------------------------------------
** Design settings
**----------------------------------------------------*/
[wc-scr-pos] .wcscrollnavi {
	position: absolute;
	z-index: 2;
	display: none;
}
[swipe-navi-view="true"][swipe-navi-view-type="top"] .wcscrollinner {
	padding-top: 1.5rem;
}
[swipe-navi-view="true"][swipe-navi-view-type="bottom"] .wcscrollinner {
	padding-bottom: 1.5rem;
}
[swipe-navi-view="true"][swipe-navi-view="true"]:not([swipe-navi-view-type="show"]) .wcscrollnavi {
	display: block;
	mix-blend-mode: var(--naviblendmode,none);
}
[swipe-navi-view="true"][swipe-navi-view-type="top"] .wcscrollnavi,
[swipe-navi-view="true"][swipe-navi-view-type="bottom"] .wcscrollnavi {
	padding: 0 1.5rem;
	height: 1rem;
	transform: translateX(-50%);
}
[swipe-navi-view="true"][swipe-navi-view-type="top"] .wcscrollnavi {
	top: 0.25rem;
	left: 50%;
}
[swipe-navi-view="true"][swipe-navi-view-type="bottom"] .wcscrollnavi {
	top: calc( var(--naviTop) + var(--naviHeight) + 0.25rem);
	left: 50%;
}
[swipe-navi-view="true"][swipe-navi-view-type="side"] .wcscrollnavi {
	top: 0;
	left: 0;
	width: var(--naviWidth,100%);
	height: 0;
}
[swipe-navi-view="true"][swipe-navi-view-type="show"] .wcscrollnavi {
	top: var(--naviTop);
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: var(--naviWidth,100%);
	height: var(--naviHeight);
	transition: opacity 0.3s 1.7s ease;
	opacity: var(--naviopacity,1);
}
[swipe-navi-view="true"][swipe-navi-view-type="show"] .wcscrollnavi.wcscrollnavihidden {
	display: none;
}
[swipe-navi-view="true"][swipe-navi-view-type="show"] .wcscrollnavi::before {
	content: "";
	display: block;
	top: var(--naviTop);
	left: 0;
	width: var(--naviWidth,100%);
	height: var(--naviHeight);
	background-color: var(--navibgcolor,var(--defaultcolor));
	opacity: 0.2;
	position: absolute;
	z-index: 1;
}
[swipe-navi-view="true"][swipe-navi-view-type="top"] .wcscrollnavi .navitext,
[swipe-navi-view="true"][swipe-navi-view-type="bottom"] .wcscrollnavi .navitext,
[swipe-navi-view="true"][swipe-navi-view-type="show"] .wcscrollnavi .navitext {
	display: flex;
	align-items: center;
	white-space: nowrap;
	height: 1.2rem;
	font-family: var(--alphabetType);
	font-size: 0.7rem;
	font-weight: 700;
	color: var(--navicolor,var(--accentcompcolor));
	background-color: var(--navibgcolor,var(--defaultcolor));
	padding: 0 0.75rem;
	border-radius: 0.6rem;
	letter-spacing: 1px;
	margin: -0.1rem 0;
	box-sizing: border-box;
}
[swipe-navi-view="true"][swipe-navi-view-type="show"] .wcscrollnavi .navitext {
	position: relative;
	z-index: 2;
	margin: -0.1rem 0.5rem;
}
body.safari[device-type="touch"] [swipe-navi-view="true"]:not([swipe-navi-view-type="side"]) .wcscrollnavi .navitext::before {
	padding-bottom: 2px;
	display: inline-block;
}
body:not(.safari)[device-type="touch"] [swipe-navi-view="true"]:not([swipe-navi-view-type="side"]) .wcscrollnavi .navitext::before {
	padding-top: 1px;
	display: inline-block;
}
body[device-type="touch"] [swipe-navi-view="true"]:not([swipe-navi-view-type="side"]) .wcscrollnavi .navitext::before {
	content: "SWIPE";
}
body[device-type="mouse"] [swipe-navi-view="true"]:not([swipe-navi-view-type="side"]) .wcscrollnavi .navitext::before {
	content: "SCROLL";
}
[swipe-navi-view="true"] .wcscrollnavi span:not(.navitext) {
	display: flex;
	width: 1rem;
	height: 1rem;
	overflow: hidden;
}
[swipe-navi-view="true"]:not([swipe-navi-view-type="show"]) .wcscrollnavi span:not(.navitext) {
	position: absolute;
	z-index: 1;
	top: 0;
}
[swipe-navi-view="true"][swipe-navi-view-type="side"] .wcscrollnavi span:not(.navitext) {
	margin-top: calc(( var(--naviHeight) - 1rem) * 0.5);
}
[swipe-navi-view="true"][swipe-navi-view-type="show"] .wcscrollnavi span:not(.navitext) {
	position: relative;
	z-index: 2;
	flex: none;
}
html:not(.waiting) [swipe-navi-view="true"] .wcscrollnavi span:not(.navitext) {
	transition: opacity 0.2s ease,transform 0.2s ease;
}
[swipe-navi-view="true"] .wcscrollnavi span.leftnavi {
	left: 0;
}
[swipe-navi-view="true"][swipe-navi-view-type="side"] .wcscrollnavi span.leftnavi {
	margin-left: 0.5rem;
}
[swipe-navi-view="true"] .wcscrollnavi span.rightnavi {
	right: 0;
}
[swipe-navi-view="true"][swipe-navi-view-type="side"] .wcscrollnavi span.rightnavi {
	margin-right: 0.5rem;
}
[swipe-navi-view="true"][wc-scr-pos="left"]:not([swipe-navi-view-type="show"]) .wcscrollnavi span.leftnavi,
[swipe-navi-view="true"][wc-scr-pos="right"]:not([swipe-navi-view-type="show"]) .wcscrollnavi span.rightnavi {
	opacity: 0;
	transform: scale(0);
}
[swipe-navi-view="true"] .wcscrollnavi span:not(.navitext)::before {
	top: 50%;
	width: 2px;
	height: 2px;
	border-radius: 1px;
	transform: translateY(-50%);
	background-color: var(--navibgcolor,var(--defaultcolor));
	transform-origin: left center;
	will-change: transform;
}
[swipe-navi-view="true"] .wcscrollnavi span.leftnavi::before {
	left: calc( 50% - 1px);
}
[swipe-navi-view="true"]:not([swipe-navi-view-type="show"]) .wcscrollnavi span.leftnavi::before {
	animation-name: wc-sn-line-l;
}
[swipe-navi-view="true"]:not([swipe-navi-view-type="show"]) .wcscrollnavi span.leftnavi::after {
	animation-name: wc-sn-arrow-l;
}
[swipe-navi-view="true"] .wcscrollnavi span.rightnavi::before {
	right: calc( 50% - 1px);
}
[swipe-navi-view="true"]:not([swipe-navi-view-type="show"]) .wcscrollnavi span.rightnavi::before {
	animation-name: wc-sn-line-r;
}
[swipe-navi-view="true"]:not([swipe-navi-view-type="show"]) .wcscrollnavi span.rightnavi::after {
	animation-name: wc-sn-arrow-r;
}
[swipe-navi-view="true"][swipe-navi-view-type="show"] .wcscrollnavi span.leftnavi::before {
	animation: wc-sn-line-l 2s forwards;
}
[swipe-navi-view="true"][swipe-navi-view-type="show"] .wcscrollnavi span.leftnavi::after {
	animation: wc-sn-arrow-l-end 2s forwards;
}
[swipe-navi-view="true"][swipe-navi-view-type="show"] .wcscrollnavi span.rightnavi::before {
	animation: wc-sn-line-r 2s forwards;
}
[swipe-navi-view="true"][swipe-navi-view-type="show"] .wcscrollnavi span.rightnavi::after {
	animation: wc-sn-arrow-r-end 2s forwards;
}
[swipe-navi-view="true"] .wcscrollnavi span:not(.navitext)::after {
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	border-radius: 50%;
	transform: translate(-50%,-50%) rotate(45deg);
	border: solid 2px var(--navibgcolor,var(--defaultcolor));
}
[swipe-navi-view="true"] .wcscrollnavi span:not(.navitext)::before,
[swipe-navi-view="true"] .wcscrollnavi span:not(.navitext)::after {
	content: "";
	position: absolute;
	z-index: 1;
	display: block;
}
[swipe-navi-view="true"]:not([swipe-navi-view-type="show"]) .wcscrollnavi span:not(.navitext)::before,
[swipe-navi-view="true"]:not([swipe-navi-view-type="show"]) .wcscrollnavi span:not(.navitext)::after {
	animation-duration: 2s;
	animation-timing-function: ease;
	animation-iteration-count: infinite;
}