@charset "UTF-8";
/* CSS Document */

.float-nav {display: flex; justify-content: space-between; background: none; padding: 20px; position: fixed; top: 16px; right: 6px; z-index: 650;}
.nav-button {display: none;}
.nav {}
.nav a {color: #000; text-decoration: none; font-size: 14px; color: #448aff;}
.nav li {display: inline-block; margin: 0 10px;}

.nav-wrap.open {display: block;}
.nav-wrap.close {display: none;}

.nav-wrap {display: block;}
.content {padding: 20px;}
.nav-button {display: block; cursor: pointer;}
.nav-button span {box-shadow: 0 0 4px #999;}

.nav-wrap {position: fixed; left: 0; top: 0; display: none; z-index: 600; background-color: rgba(0, 0, 0, 0.7); width: 100%; height: 100%;}
.nav-wrap .nav {height: 100%; position: relative; overflow-x: hidden;  overflow-y: auto;}
.nav-wrap li {display: block; margin: 2em;}
.nav-wrap li a {color: #fff; font-size: 18px;}

/*メニューボタンのエフェクト*/
.nav-button, .nav-button span {display: inline-block; transition: all 0.4s; box-sizing: border-box;}
.nav-button {z-index: 20; position: relative; width: 40px; height: 36px; z-index: 650;}
.nav-button span {position: absolute; left: 0; width: 100%; height: 4px; background-color: #fff; border-radius: 4px;}
.nav-button span:nth-of-type(1) {top: 0;}
.nav-button span:nth-of-type(2) {top: 16px;}
.nav-button span:nth-of-type(3) {bottom: 0;}
.nav-button.active span:nth-of-type(1) {-webkit-transform: translateY(16px) rotate(-45deg); transform: translateY(16px) rotate(-45deg);}
.nav-button.active span:nth-of-type(2) {opacity: 0;}
.nav-button.active span:nth-of-type(3) {-webkit-transform: translateY(-16px) rotate(45deg); transform: translateY(-16px) rotate(45deg);}