@charset "UTF-8";




.global-nav {
position:fixed;
right: -100vw; /* これで隠れる */
top: 0;
width: 100vw; /* スマホに収まるくらい */
height: 100vh;
padding-top: 40px;
background-color: #f7bfc0;
transition: all .6s;
z-index: 200;
overflow-y: auto;/*display: none;*/
}



.hamburger {
position: absolute;
left: 6px;
top: 3px;
width: 40px;
height: 40px;
cursor: pointer;
z-index: 300;
}



.global-nav__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.global-nav__item {
text-align: center;
padding: 0 5px;
color: #000;
}
.global-nav__item a {
display: block;
padding-top: 8px;
padding-right: 0;
padding-left: 10px;
padding-bottom: 8px;
/*border-bottom: 1px solid #F704AF;*/
text-decoration: none;
color: #E74382;
}
.global-nav__item a:hover {
background-color: #F704AF;
color: #FFFFFF;
}
.hamburger__line {
position: absolute;
left: 1px;
width: 30px; /*18*/
height: 1px;/*1*/
background-color: #E74382;
transition: all .6s;
}
.hamburger__line--1 {
  top: 10px;
}
.hamburger__line--2 {
  top: 20px;/*20*/
}
.hamburger__line--3 {
  top: 30px;/*26*/
}
.black-bg {
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
z-index: 100;
background-color: #000;
opacity: 0;
visibility: hidden;
transition: all .6s;
cursor: pointer;

}
/* 表示された時用のCSS */
.nav-open .global-nav {
  right: 0;
}
.nav-open .black-bg {
  opacity: .8;
  visibility: visible;
}


.nav-open .hamburger__line {
position: fixed;
}
.nav-open .hamburger__line--1 {
  transform: rotate(45deg);
  top: 20px;
}
.nav-open .hamburger__line--2 {
  width: 0;
  left: 50%;
}
.nav-open .hamburger__line--3 {
  transform: rotate(-45deg);
  top: 20px;
}