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

.global-nav {
position:fixed;
left:-320px;
top:0;
width:250px;
height:100vh;
padding-top:60px;
background-color:#b69198;
transition:all .3s;
z-index:200;
overflow-y:auto;
font-size:20px;
line-height:27px;
font-family:"Zen Maru Gothic N L";
}

.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:#45443e;
opacity:0;
visibility:hidden;
transition:all .3s;
cursor:pointer;
}

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

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

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

@media (max-width:640px) {

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

.hamburger__line {
position:absolute;
left:0;
width:25px;
height:2px;
background-color:#fff;
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-family: 'Jost', sans-serif;
font-size:16px;
font-weight:300;
}

}

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

@media (min-width:641px) {

.hamburger {
position:fixed;
left:15px;
top:15px;
width:40px;
height:40px;
cursor:pointer;
z-index:300;
}

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

.hamburger__line--1 {top:0;}
.hamburger__line--2 {top:10px;}
.hamburger__line--3 {top:20px;}

.nav-open .hamburger__line--1 {
transform:rotate(45deg);
top:10px;
}

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

.nav-open .hamburger__line--3 {
transform:rotate(-45deg);
top:10px;
}

}