@charset "utf-8";


.nav_btn_anim{
	position: absolute;
	z-index: 1;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
.nav_btn_anim span{
	width: 10px;
	height: 10px;
	position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    display: block;
	visibility: hidden;
	opacity: 0;
}

.nav_btn_anim_01{
	transform: translate(23px, 15px) rotate(107deg) scale(0.1);
}
.nav_btn_anim_02{
	transform: translate(-2px, 35px) rotate(-56deg) scale(0.1);
}
.nav_btn_anim_03{
	transform: translate(-11px, 0px) rotate(122deg) scale(0.1);
}
.nav_btn_anim_04{
	transform: translate(-30px, 14px) rotate(114deg) scale(0.1);
}
.nav_btn_anim_05{
	transform: translate(20px, -35px) rotate(15deg) scale(0.1);
}
.nav_btn_anim_06{
	transform: translate(23px, 5px) rotate(-121deg) scale(0.1);
}
.nav_btn_anim_07{
	transform: translate(-5px, -25px) rotate(71deg) scale(0.1);
}

@keyframes navopa01{
    0%   {transform: translate(20px, 25px) rotate(107deg) scale(0.1);opacity: 0;}
    10%  {transform: translate(20px, 25px) rotate(107deg) scale(0.8);opacity: 1;}
    100% {transform: translate(20px, 25px) rotate(107deg) scale(0.2);opacity: 0;}
}
@keyframes navopa02{
    0%   {transform: translate(-2px, 35px) rotate(-56deg) scale(0.1);opacity: 0;}
    10%  {transform: translate(-2px, 35px) rotate(-56deg) scale(0.6);opacity: 1;}
    100% {transform: translate(-2px, 35px) rotate(-56deg) scale(0.3);opacity: 0;}
}
@keyframes navopa03{
    0%   {transform: translate(-11px, 0px) rotate(122deg) scale(0.1);opacity: 0;}
    10%  {transform: translate(-11px, 0px) rotate(122deg) scale(0.8);opacity: 1;}
    100% {transform: translate(-11px, 0px) rotate(122deg) scale(0.1);opacity: 0;}
}
@keyframes navopa04{
    0%   {transform: translate(-30px, 14px) rotate(114deg) scale(0.1);opacity: 0;}
    10%  {transform: translate(-30px, 14px) rotate(114deg) scale(0.6); opacity: 1;}
    100% {transform: translate(-30px, 14px) rotate(114deg) scale(0.3); opacity: 0;}
}
@keyframes navopa05{
    0%   {transform: translate(20px, -35px) rotate(15deg) scale(0.1); opacity: 0;}
    10%  {transform: translate(20px, -35px) rotate(15deg) scale(0.9); opacity: 1;}
    100% {transform: translate(20px, -35px) rotate(15deg) scale(0.2); opacity: 0;}
}
@keyframes navopa06{
    0%   {transform: translate(23px, 5px) rotate(-121deg) scale(0.1); opacity: 0;}
    10%  {transform: translate(23px, 5px) rotate(-121deg) scale(0.7); opacity: 1;}
    100% {transform: translate(23px, 5px) rotate(-121deg) scale(0.3); opacity: 0;}
}
@keyframes navopa07{
    0%   {transform: translate(-5px, -25px) rotate(71deg) scale(0.1); opacity: 0;}
    10%  {transform: translate(-5px, -25px) rotate(71deg) scale(0.9); opacity: 1;}
    100% {transform: translate(-5px, -25px) rotate(71deg) scale(0.2); opacity: 0;}
}
.is_open_btn .nav_btn_anim{
}
.is_open_btn .nav_btn_anim span{
	visibility: visible;
}
.is_open_btn .nav_btn_anim_01{
	animation:navopa01 2s 0.5s;
}
.is_open_btn .nav_btn_anim_02{
	animation:navopa02 2s 0.3s;
}
.is_open_btn .nav_btn_anim_03{
	animation:navopa03 2s 0.2s;
}
.is_open_btn .nav_btn_anim_04{
	animation:navopa04 2s 0.1s;
}
.is_open_btn .nav_btn_anim_05{
	animation:navopa05 2s 0.2s;
}
.is_open_btn .nav_btn_anim_06{
	animation:navopa06 2s 0.4s;
}
.is_open_btn .nav_btn_anim_07{
	animation:navopa07 2s 0.3s;
}

.pu_wp01,
.pu_wp02,
.pu_wp03,
.pu_wp04,
.pu_wp05,
.pu_wp06,
.pu_wp07,
.pu_wp08,
.pu_wp09,
.pu_wp10,
.pu_wp11,
.pu_wp12,
.pu_wp13,
.pu_wp14,
.pu_wp15,
.pu_wp16,
.pu_wp17,
.pu_wp18,
.pu_wp19,
.pu_wp20,
.fn_wp01_01,
.fn_wp01_02,
.fn_wp01_03,
.fn_wp01,
.fn_wp02,
.fn_wp03,
.fn_wp04,
.fn_wp05,
.fn_wp06,
.fn_wp07,
.fn_wp08,
.fn_wp09,
.fn_wp10,
.fn_wp11,
.fn_wp12,
.fn_wp13,
.fn_wp14,
.fn_wp15{
	opacity:0;
}


.fn_wp01_01{
	transition-delay: 0.1s;
}
.fn_wp01_02{
	transition-delay: 0.4s !important;
}
.fn_wp01_03{
	transition-delay: 0.8s !important;
}
.fn_anim{
	opacity:0;
}
.anim{
    transform: translate3d(0,40px,0);
    opacity: 0;
}
.anim_fadein {
    opacity: 1;
    transform: translate3d(0,0,0);
    transition: 0.8s;
}
.anim_fadein .fn_anim{
	opacity: 1 !important;
    transform: translate3d(0,0,0) !important;
    transition: 0.8s;
}