#navi{display:block;position:fixed;top:0;right:-420px;bottom:0;max-width:420px;width:100%;color:#fff;padding:20px 25px 20px 20px;background-color:#fff;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;transition:all .5s;z-index:999;opacity:0}#navi ul.nav-menu{margin:60px -8px 0 0}@media (min-width:768px){#navi ul.nav-menu{margin:80px 0 0}}@media (min-width:1250px){#navi ul.nav-menu{margin:100px 0 0}}#navi ul.nav-menu li{text-align:right;opacity:0;padding-right:10px}#navi ul.nav-menu li:nth-child(even) a{color:#17adaa}#navi ul.nav-menu li:nth-child(even) a:hover{color:#27cfcb}#navi ul.nav-menu li:nth-child(odd) a{color:#000}#navi ul.nav-menu li:nth-child(odd) a:hover{color:#959595}#navi ul.nav-menu li a{font-family:'Montserrat',sans-serif;font-size:2.4em;font-style:italic;font-weight:900;line-height:1em;transition:.5s}@media (min-width:768px){#navi ul.nav-menu li a{font-size:3em}}@media (min-width:1250px){#navi ul.nav-menu li a{font-size:3.6em}}#navi ul.nav-menu li p{font-family:'Noto Sans JP',sans-serif;font-weight:400;font-size:.25em;line-height:1em;margin-bottom:5px}#navi ul.submenu{margin-top:20px;border-top:1px solid #cbcbcb;display:flex;justify-content:flex-end;opacity:0}#navi ul.submenu li{text-align:right;padding-top:10px}#navi ul.submenu li:first-child{margin-right:0}#navi ul.submenu li a{font-size:.8em;line-height:1em;transition:.5s}@media (min-width:768px){#navi ul.submenu li a{font-size:1em}}#navi ul.submenu li a:hover{color:#959595}#navi ul.nav-sns{display:flex;justify-content:flex-end;margin-top:45px}#navi ul.nav-sns li{margin-left:15px;opacity:0}#navi ul.nav-sns li a img{width:32px;transition:.5s}#navi ul.nav-sns li a img:hover{opacity:.7}#navi .logo{position:absolute;bottom:20px;left:25px;opacity:0}#navi .logo img{width:60px}@media (min-width:768px){#navi .logo img{width:80px}}.header-menu{position:absolute;top:10px;right:100px}.header-menu ul li a{font-size:1em;position:relative}.header-menu ul li a:after{position:absolute;bottom:0;left:0;content:'';width:100%;height:1px;background:#000;transform:scale(0,1);transform-origin:right top;transition:transform .3s}.header-menu ul li a:hover:after{transform-origin:left top;transform:scale(1,1)}.open #navi{right:0;opacity:1}.open #mask{display:block;position:fixed;top:0;left:0;width:100%;height:100%;background:#000;opacity:.5;z-index:10;cursor:pointer}#navi.panelactive ul.nav-menu li{animation:fadeInRight1 .5s ease forwards;animation-delay:.5s}#navi.panelactive ul.nav-menu li:nth-of-type(2){animation-delay:.55s}#navi.panelactive ul.nav-menu li:nth-of-type(3){animation-delay:.6s}#navi.panelactive ul.nav-menu li:nth-of-type(4){animation-delay:.65s}#navi.panelactive ul.nav-menu li:nth-of-type(5){animation-delay:.7s}#navi.panelactive ul.nav-menu li:nth-of-type(6){animation-delay:.75s}#navi.panelactive ul.nav-menu li:nth-of-type(7){animation-delay:.8s}@keyframes fadeInRight1{0%{opacity:0;transform:translateX(20px)}100%{opacity:1;transform:translateX(0)}}#navi.panelactive ul.submenu{animation:fadeInRight2 .5s ease forwards;animation-delay:.85s}#navi.panelactive ul.nav-sns li{animation:fadeInRight2 .5s ease forwards;animation-delay:.9s}#navi.panelactive ul.nav-sns li:nth-of-type(2){animation-delay:.95s}#navi.panelactive ul.nav-sns li:nth-of-type(3){animation-delay:.1s}#navi.panelactive .logo{animation:fadeInRight2 .5s ease forwards;animation-delay:.95s}@keyframes fadeInRight2{0%{opacity:0;transform:translateY(20px)}100%{opacity:1;transform:translateY(0)}}