@charset "UTF-8";

	
/* example
----------------------------------------------- */



header.global ul.menu{ }

header.global ul.menu.listAnim li{}




header.global ul.menu.lineAnim li{ overflow:hidden;
	
	animation-duration:300ms;
	animation-timing-function:ease-in-out;
	animation-fill-mode:forwards;
}




header.global ul.menu.lineAnim li:nth-of-type(1){ animation-name:gmenulist_3_1; animation-delay:3.5s;}
header.global ul.menu.lineAnim li:nth-of-type(2){ animation-name:gmenulist_3_2; animation-delay:3.6s; }
header.global ul.menu.lineAnim li:nth-of-type(3){ animation-name:gmenulist_3_3; animation-delay:3.7s; }
header.global ul.menu.lineAnim li:nth-of-type(4){ animation-name:gmenulist_3_4; animation-delay:3.8s; }
header.global ul.menu.lineAnim li:nth-of-type(5){ animation-name:gmenulist_3_5; animation-delay:3.9s; }


.touchDevice body header.global ul.menu.lineAnim li:nth-of-type(1){ animation-name:gmenulist_3_1sp; animation-delay:3.5s;}
.touchDevice body header.global ul.menu.lineAnim li:nth-of-type(2){ animation-name:gmenulist_3_2sp; animation-delay:3.6s; }
.touchDevice body header.global ul.menu.lineAnim li:nth-of-type(3){ animation-name:gmenulist_3_3sp; animation-delay:3.7s; }
.touchDevice body header.global ul.menu.lineAnim li:nth-of-type(4){ animation-name:gmenulist_3_4sp; animation-delay:3.8s; }
.touchDevice body header.global ul.menu.lineAnim li:nth-of-type(5){ animation-name:gmenulist_3_5sp; animation-delay:3.9s; }



/* show
----------------------------------------------- */
header.global ul.menu.lineAnim li:after{
	animation-name:gmenulist_1;
	animation-duration:500ms;
	animation-timing-function:ease-out;
	animation-fill-mode:forwards;
}

header.global ul.menu.lineAnim li:nth-of-type(1):after{animation-delay:0.5s;}
header.global ul.menu.lineAnim li:nth-of-type(2):after{animation-delay:0.6s;}
header.global ul.menu.lineAnim li:nth-of-type(3):after{animation-delay:0.7s;}
header.global ul.menu.lineAnim li:nth-of-type(4):after{animation-delay:0.8s;}
header.global ul.menu.lineAnim li:nth-of-type(5):after{animation-delay:0.9s;}



/* hide line
----------------------------------------------- */
header.global ul.menu.lineAnim li:before{ 
	content:''; 
	display:block; 
	background-color:#ccc; 
	position:absolute; 
	top:0;
	z-index:6; 
	
	height:100%;
	animation-name:gmenulist_2;
	animation-duration:500ms;
	animation-timing-function:ease;
	animation-fill-mode:forwards;
}



header.global ul.menu.lineAnim li:nth-of-type(1):before{animation-delay:2.5s;}
header.global ul.menu.lineAnim li:nth-of-type(2):before{animation-delay:2.6s;}
header.global ul.menu.lineAnim li:nth-of-type(3):before{animation-delay:2.7s;}
header.global ul.menu.lineAnim li:nth-of-type(4):before{animation-delay:2.8s;}
header.global ul.menu.lineAnim li:nth-of-type(5):before{animation-delay:2.9s;}







@keyframes gmenulist_1 {
  0% { width:100%; right:0;}
  99% { width:0; right:0;}
  100% { width:0; right:0;}
}


@keyframes gmenulist_2 {
  0% { width:0;background-color: #fff; left:0;}
  99% {  width:100%;left:0; opacity:1;}
  100% {  width:100%;left:0;min-height:0px;}
}



@keyframes gmenulist_3_1 {
  0% {}
  100% {top:16px; width:30px; height:3px;}
}

@keyframes gmenulist_3_2 {
  0% {}
  100% {top:22px; width:30px; height:3px;}
}

@keyframes gmenulist_3_3 {
  0% {}
  100% {top:28px; width:30px; height:3px;}
}

@keyframes gmenulist_3_4 {
  0% {}
  100% {top:34px; width:30px; height:3px;}
}

@keyframes gmenulist_3_5 {
  0% {}
  100% {top:40px; width:30px; height:3px;}
}



@keyframes gmenulist_3_1sp {
  0% {}
  100% {top:19px; width:70px; height:6px; }
}

@keyframes gmenulist_3_2sp {
  0% {}
  100% {top:33px; width:70px; height:6px;}
}

@keyframes gmenulist_3_3sp {
  0% {}
  100% {top:47px; width:70px; height:6px; }
}

@keyframes gmenulist_3_4sp {
  0% {}
  100% {top:61px; width:70px; height:6px;}
}

@keyframes gmenulist_3_5sp {
  0% {}
  100% {top:75px; width:70px; height:6px;}
}