@charset "utf-8";


#nav ul {
margin: 10vw 0 0 50vw;
}
.menu span {
display: inline-block;
-webkit-transition:all .2s;
transition: all .2s;
box-sizing: border-box;
}
.menu {
position: fixed;
top: 14px;
right: 14px;
width: 34px;
height: 17px;
z-index: 100;
border: 0;
background: none;
}
.menu span {
position: absolute;
right: 0;
width: 100%;
height: 2px;
background-color: rgba(0, 0, 0, 0.8);
z-index: 100;
}
.menu span:nth-of-type(1) {
top: 1px;
}
.menu span:nth-of-type(2) {
top: 10px;
}
.menu span:nth-of-type(3) {
bottom: -4px;
width: 70%;
}
.menu:hover span {
width: 70%;
}
.menu:hover span:nth-of-type(3) {
width: 90%;
}

.menu.active span:nth-of-type(1) {
-webkit-transform: translateY(8px) rotate(45deg);
transform: translateY(8px) rotate(25deg);
}
.menu.active span:nth-of-type(2) {
opacity: 0;
}
.menu.active span:nth-of-type(3) {
-webkit-transform: translateY(-10px) rotate(-45deg);
transform: translateY(-10px) rotate(-25deg);
width: 100%;
}
.menu.active:hover span{
width: 100%;
}

#nav {
position: fixed;
top: 0;
right: 0;
z-index: 100;
width: 100%;
height: 100vh;
opacity: 0;
background-color: rgba(255, 255, 255, 0.94);
transition: all 0.3s ease-in-out;
visibility:hidden;
}
#nav.active{
right: 0;
opacity: 1;
-moz-transform: translateX(0);
-webkit-transform: translateX(0);
transform: translateX(0);
visibility: visible;
}
#nav ul li{
list-style-type: none;
}
#nav ul li a {
display: block;
padding: 0;
color: #4c4c4c;
transition: all 0.2s ease-in-out;
text-align: left;
text-decoration: none;
font-size: 2vw;
font-weight: bold;
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", 和文フォント指定, sans-serif;
letter-spacing: .06em;
line-height: 1;
padding: .5em 0;
transition: .1s ease-in;
}
#nav ul li a:hover {
  text-indent: .1em;
}
.active span{
}
@media(max-width:780px){
#nav ul {
margin: 22vw 6vw 2em;
}
.sp_menu li {
max-width: 84vw;
}
li.add {
margin: 42px auto 0;
}
li.add .btn {
background: #fff;
box-shadow: 0 10px 10px rgba(0,0,0,0.1);
color: #f5636e !important;
padding: .9em 0 !important;
}
#nav ul li a {
font-size: 6vw;
}
}/* @media */