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

.global-nav {
position:fixed;
right:-250px;
top:0;
width:250px;
height:100vh;
padding-top:60px;
background-color:#4fb2ff;
transition:all .3s;
z-index:200;
overflow-y:auto;
font-size:20px;
line-height:27px;
}

.global-nav__list {
margin:15px;
padding:0 0 0 20px;
list-style:none;
}

.global-nav__item {
text-align:left;
padding:10px 0;
letter-spacing:0.1em;
}

.global-nav__item span {letter-spacing:0;}

.global-nav__item a {
display:block;
padding:0;
text-decoration:none;
color:#fff;
}

.global-nav__item a:hover {}

.black-bg {
position:fixed;
left:0;
top:0;
width:100vw;
height:100vh;
z-index:100;
background-color:#fff;
opacity:0;
visibility:hidden;
transition:all .3s;
cursor:pointer;
}

.nav-open .global-nav {right:0;}

.nav-open .black-bg {
opacity:.8;
visibility:visible;
}

/*==================== for Smartphone ====================*/

@media (max-width:640px) {

.hamburger {
position:fixed;
right:15px;
top:20px;
width:25px;
height:35px;
cursor:pointer;
z-index:300;
}

.hamburger__line {
position:absolute;
left:0;
width:25px;
height:2px;
background-color:#000;
transition:all .3s;
}

.hamburger__line--1 {top:0;}
.hamburger__line--2 {top:8px;}
.hamburger__line--3 {top:16px;}

.nav-open .hamburger__line--1 {
background-color:#fff;
transform:rotate(45deg);
top:8px;
}

.nav-open .hamburger__line--2 {
width:0;
left:50%;
}

.nav-open .hamburger__line--3 {
background-color:#fff;
transform:rotate(-45deg);
top:8px;
}

.global-nav__item {
font-size:16px;
}

}

/*==================== for PC ====================*/

@media (min-width:641px) {

.hamburger {
display:none;
}

}