/* -----------------------------------------------------------
hamburger
----------------------------------------------------------- */
.hamburger {
position: fixed;
top: 7%;
left: 25px;
display: block;
width: 24px;
height: 24px;
z-index: 99999;
box-sizing: border-box;
span {
display: inline-block;
transition: all .4s;
box-sizing: border-box;
position: absolute;
left: 0;
width: 100%;
height: 1px;
background-color: #fff;
margin: 0 auto;
&:nth-of-type(1) {
top: 0;
}
&:nth-of-type(2) {
top: 9px;
}
&:nth-of-type(3) {
bottom: 0;
}
}
}
/*----------ナビゲーション----------*/
#navigation {
position: fixed;
display: none;
width: 100%;
height: 100vh;
top: 0;
@include cV(left,75px,60px,50px);
background: $gray_d;
z-index: 99998;
.navigation_inner {
display: table;
width: 100%;
height: 100%;
.navigation_menu {
display: table-cell;
vertical-align: middle;
.navigation_item {
opacity: 0;
width: 300px;
height: 40px;
margin: 16px auto 0 auto;
&:first-child {
margin-top: 0;
}
a {
display: block;
position: relative;
text-decoration: none;
font-size: 2.4rem;
color: #fff;
line-height: 40px;
text-align: center;
}
}
}
}
&.active {
.navigation_inner {
.navigation_menu {
.navigation_item {
&:nth-child(1) {
animation: humb_in .8s ease-out .5s 1 forwards;
}
&:nth-child(2) {
animation: humb_in .8s ease-out .6s 1 forwards;
}
&:nth-child(3) {
animation: humb_in .8s ease-out .7s 1 forwards;
}
}
}
}
}
&.no_active {
.navigation_inner {
.navigation_menu {
.navigation_item {
opacity: 1;
&:nth-child(1) {
animation: humb_out .8s ease-out .1s 1 forwards;
}
&:nth-child(2) {
animation: humb_out .8s ease-out .1s 1 forwards;
}
&:nth-child(3) {
animation: humb_out .8s ease-out .1s 1 forwards;
}
}
}
}
}
}
@keyframes humb_in {
0% {
opacity: 0;
}
50% {
opacity: .5;
}
100% {
opacity: 1;
}
}
@keyframes humb_out {
0% {
opacity: 1;
}
25% {
opacity: .5;
}
50% {
opacity: 0;
}
100% {
opacity: 0;
}
}