body.is-canvi-ready .canvi-navbar{ display:block; visibility:visible;}
.canvi-navbar,.canvi-overlay{ top:0; bottom:0; visibility:hidden;}
.canvi-navbar{ position:fixed; height:100%; background:#ffffff; width:280px; display:none;
	transition:-webkit-transform .3s cubic-bezier(.42,0,.58,1);
	transition:transform .3s cubic-bezier(.42,0,.58,1);
	transition:transform .3s cubic-bezier(.42,0,.58,1),
	-webkit-transform .3s cubic-bezier(.42,0,.58,1);
	will-change:transform;
	-webkit-overflow-scrolling:touch;
	overflow:auto;
	box-shadow: 0 1px 45px rgba(255,255,255,.4);
}
.canvi-content,.canvi-navbar.is-canvi-open{
	transition:-webkit-transform .3s cubic-bezier(.42,0,.58,1)
}
.canvi-navbar::-webkit-scrollbar{width:0}
.canvi-navbar::-webkit-scrollbar-track{background:#efefef}
.canvi-navbar::-webkit-scrollbar-thumb{background:#ddd;border-radius:2px}
.canvi-navbar.is-canvi-open{
	transition:transform .3s cubic-bezier(.42,0,.58,1);
	transition:transform .3s cubic-bezier(.42,0,.58,1),-webkit-transform .3s cubic-bezier(.42,0,.58,1);
	will-change:transform;
}
.canvi-navbar[data-position=right]{
	right:0;
	-webkit-transform:translate3d(100%,0,0);
	transform:translate3d(100%,0,0);
}
.canvi-navbar[data-position=right].is-canvi-open,.canvi-navbar[data-position=right][data-push-content=true]{
	-webkit-transform:translate3d(0,0,0);
	transform:translate3d(0,0,0);
}
.canvi-navbar[data-position=left]{
	left:0;
	-webkit-transform:translate3d(-100%,0,0);
	transform:translate3d(-100%,0,0);
}
.canvi-navbar[data-position=left].is-canvi-open,.canvi-navbar[data-position=left][data-push-content=true]{
	-webkit-transform:translate3d(0,0,0);
	transform:translate3d(0,0,0);
}
.canvi-navbar[data-push-content=false]{
	z-index:10;
}
.canvi-navbar[data-push-content=true]{
	z-index:1;
}
.canvi-content{
	width: 100%;
	height: 100%;
	position:relative;
	z-index:5;
	transition:transform .3s cubic-bezier(.42,0,.58,1);
	transition:transform .3s cubic-bezier(.42,0,.58,1),-webkit-transform .3s cubic-bezier(.42,0,.58,1);
	overflow:visible;
}
.canvi-content.is-canvi-open{
	transition:-webkit-transform .3s cubic-bezier(.42,0,.58,1);
	transition:transform .3s cubic-bezier(.42,0,.58,1);
	transition:transform .3s cubic-bezier(.42,0,.58,1),-webkit-transform .3s cubic-bezier(.42,0,.58,1);
}
.canvi-overlay{
	position:absolute;
	right:0;
	left:0;
	background:rgba(0,0,0,.4);
	opacity:0;
	z-index:1031;
}
.canvi-content.is-canvi-open .canvi-overlay{
	visibility:visible;
	-webkit-animation-name:canvi-animate-in;
	animation-name:canvi-animate-in;
	-webkit-animation-duration:.3s;
	animation-duration:.3s;
	-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;
	-webkit-animation-timing-function:cubic-bezier(.42,0,.58,1);
	animation-timing-function:cubic-bezier(.42,0,.58,1);
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
}
.canvi-content.is-canvi-open .canvi-overlay.canvi-animate-out{
	-webkit-animation-name:canvi-animate-out;
	animation-name:canvi-animate-out;
	-webkit-animation-duration:.3s;
	animation-duration:.3s;
	-webkit-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
	-webkit-animation-timing-function:cubic-bezier(.42,0,.58,1);
	animation-timing-function:cubic-bezier(.42,0,.58,1);
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
}
.canvi-user-info{
	padding:30px 10px 10px;
	display:-webkit-box;
	display:flex;
	-webkit-box-align:center;
	align-items:center;
	position:relative;
}
.canvi-user-info img{
	max-width:100%;
	height:auto;
}
.canvi-user-info__image{
	width: 40px;
	height: 40px;
	border-radius: 50%;
	overflow:hidden;
	position: absolute;
	display: none;
}
.canvi-user-info__image img{
	width: 40px;
	height: 40px;
	border-radius: 50%;
}
.canvi-user-info__nickname{
	width: 100%;
	height: auto;
	padding-left: 50px;
	box-sizing:border-box;
	overflow: hidden;
	display: none;
}
.canvi-user-info__nickname p{
	width: 100%;
	height: auto;
	overflow: hidden;
	font-size: 14px;
	line-height: 22px;
	color: #ffffff;
}
.canvi-user-info__nickname p a{
	display: inline-block;
	width: auto;
	height: auto;
	margin-top: 10px;
	font-size: 14px;
	line-height: 26px;
	padding: 0px 5px;
	text-align: center;
	color: #01fffc;
	border: 1px solid #01fffc;
	border-radius: 3px;
	box-sizing:border-box;
}

.canvi-user-info_name{
	width: 100%;
	height: auto;
	overflow: hidden;
	border-bottom: 1px solid rgba(0,0,0,.6);
	padding-bottom: 10px;
}
.canvi-user-info_name img{ display: block; width: 50px; height: 50px; border-radius: 50%; margin: 0px auto; border: 1px solid rgba(0,0,0,.3); box-sizing: border-box; float: left; }
.canvi-user-info_name p{
	padding-left: 55px;
	height: 50px;
	font-size: 16px;
	line-height: 25px;
	font-weight: 600;
	color: #000000;
}
.canvi-user-info_name p a{ display: inline-block; width: 20px; height: 20px; background: url(../images/icon_modify.png) no-repeat center center; background-size: 20px 20px; float: right; padding-top: 3px; }


.canvi-user-info__close{
	position:absolute;
	top:10px;
	right:10px;
	background:rgba(0,0,0,.2);
	width:30px;
	height:30px;
	border-radius:2px;
	transition:.3s;
	cursor:pointer;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
}
.canvi-user-info__close:hover{
	background:rgba(0,0,0,.6);
}
.canvi-user-info__close::after,.canvi-user-info__close::before{
	content:'';
	width:20px;
	height:3px;
	background:#fff;
	position:absolute;
	top:13px;
}
.canvi-user-info__close::before{
	left:5px;
	-webkit-transform:rotate(45deg);
	transform:rotate(45deg);
}
.canvi-user-info__close::after{
	right:5px;
	-webkit-transform:rotate(-45deg);
	transform:rotate(-45deg);
}
.canvi-navigation{
	margin:0;
	padding:0;
}
.canvi-navigation li{
	list-style:none;
}
.canvi-navigation__item{
	padding:14px 20px;
	display:-webkit-box;
	display:flex;
	-webkit-box-align:center;
	align-items:center;
	text-decoration:none;
}
.canvi-navigation__item s{
	 float: left;
	 width: 20px;
	 height: 20px;
	 background: url(../images/act_icon01_cur.png) no-repeat center center;
	 background-size: 20px 20px;
	margin-right: 8px;
}
li:nth-child(2) .canvi-navigation__item s{
	 background: url(../images/act_icon02.png) no-repeat center center;
	 background-size: 20px 20px;
}
li:nth-child(3) .canvi-navigation__item s{
	 background: url(../images/act_icon03.png) no-repeat center center;
	 background-size: 20px 20px;
}
li:nth-child(4) .canvi-navigation__item s{
	 background: url(../images/act_icon04.png) no-repeat center center;
	 background-size: 20px 20px;
}
li:nth-child(5) .canvi-navigation__item s{
	 background: url(../images/act_icon06.png) no-repeat center center;
	 background-size: 20px 20px;
}
li:nth-child(6) .canvi-navigation__item s{
	 background: url(../images/act_icon05.png) no-repeat center center;
	 background-size: 20px 20px;
}
.canvi-navigation__item.is-active,.canvi-navigation__item:hover{
	opacity:1;
}
.canvi-navigation__text{
	font-weight:500;
	color:#EB6B19;
	font-size:16px;
	margin:0;
	line-height:1.3em;
	display:block;
}
.canvi-header{
	background:#1ce678;
	display:-webkit-box;
	display:flex;
	-webkit-box-align:center;
	align-items:center;
	-webkit-box-pack:center;
	justify-content:center;
}
.canvi-header__image{
	margin:30px;
	max-width:100px;
	height:auto;
}
@-webkit-keyframes canvi-animate-in{
	0%{opacity:0;}
	100%{opacity:1;}
}
@keyframes canvi-animate-in{
	0%{opacity:0;}
	100%{opacity:1;}
}
@-webkit-keyframes canvi-animate-out{
	0%{opacity:1;}
	100%{opacity:0;}
}
@keyframes canvi-animate-out{
	0%{opacity:1;}
	100%{opacity:0;}
}