header {
width: 100%;

}
#nav-toggle {
position: fixed;
top: 30px;
right: 30px;
height: 32px;
cursor: pointer;
background: #000;/*ハンバーガー背景色*/
width: 50px;
height: 50px;
border-radius:30px;
}
#nav-toggle > div {
width: 20px;
position: absolute;
top: 40%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
-webkit-\ transform: translateY(-50%) translateX(-50%);
}
#nav-toggle > div > span.toggle {
width: 100%;
height: 1px;
left: 0;
display: block;
background: #fff;
position: absolute;
transition: top .5s ease, -webkit-transform .3s ease-in-out;
transition: transform .3s ease-in-out, top .5s ease;
transition: transform .3s ease-in-out, top .5s ease, -webkit-transform .3s ease-in-out;
}
header.deteal_header #nav-toggle > div > span.toggle {
width: 100%;
height: 1px;
left: 0;
display: block;
background: #fff;
position: absolute;
transition: top .5s ease, -webkit-transform .3s ease-in-out;
transition: transform .3s ease-in-out, top .5s ease;
transition: transform .3s ease-in-out, top .5s ease, -webkit-transform .3s ease-in-out;
}
#nav-toggle span.toggle:nth-child(1) {
top: 0;
}
#nav-toggle span.toggle:nth-child(2) {
}
#nav-toggle span.toggle:nth-child(3) {
top: 10px;
}
.open #nav-toggle span.toggle {
background: #fff;
}
.open #nav-toggle span.toggle:nth-child(1) {
top: 5px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.open #nav-toggle span.toggle:nth-child(2) {
top: 10px;
width: 0;
left: 50%;
}
.open #nav-toggle span.toggle:nth-child(3) {
top: 5px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/* z-index */
#nav-toggle {
z-index: 9999;
}
#container {
z-index: 9998;
}
#gloval-nav {
background-color: rgba(0, 0, 0, .8);/*ハンバーガー背景すかし黒*/
color: #fff;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9997;
text-align: center;
display: flex;
visibility: hidden;
flex-direction: column;
justify-content: center;
align-items: center;/*ハンバーガー左右位置 初期設定center*/
font-size: 30px;
opacity: 0;
transition: opacity .3s ease, visibility .3s ease;
}
#gloval-nav a {
display: block;
color: #fff;
text-decoration: none;
padding: 8px 0;
transition: color .3s ease;
font-size: .90em;
font-family: 'Lato', sans-serif;
font-weight: 300;
letter-spacing: .2em;
}
#gloval-nav a:hover {
color: #666;
}
#gloval-nav ul {
list-style: none;
padding: 0;
}
#gloval-nav ul li {
opacity: 0;
-webkit-transform: translateX(200px);
transform: translateX(200px);
transition: opacity .2s ease, -webkit-transform .3s ease;
transition: transform .3s ease, opacity .2s ease;
transition: transform .3s ease, opacity .2s ease, -webkit-transform .3s ease;
}
#gloval-nav ul li:nth-child(2) {
transition-delay: .05s;
}
#gloval-nav ul li:nth-child(3) {
transition-delay: .15s;
}
#gloval-nav ul li:nth-child(4) {
transition-delay: .25s;
}
/* open */
.open {
overflow: hidden;
}
.open #gloval-nav {
visibility: visible;
opacity: 1;
}
.open #gloval-nav li {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
transition: opacity .9s ease, -webkit-transform 1s ease;
transition: transform 1s ease, opacity .9s ease;
transition: transform 1s ease, opacity .9s ease, -webkit-transform 1s ease;
}
@media screen and (max-width: 767px) {
#nav-toggle {
right: 20px;
top: 20px;
}
#gloval-nav a {
padding: 10px 0;
font-size: .5em;
}
}