/* header */
header {
   width: 100%;
   position: relative;
}

.pfix{
    width: 100%;
    position: fixed;
    z-index: 1;
}

/* nav_menu */
.header__nav{
   position: absolute;
   height: 100vh;
   width: 100%;
   left: -100%;
   background: #5D5D67;
   -webkit-transition: 1.5s;
   transition: 1.5s;
   top: 0;
   display: grid;
     place-content: center;
}

.header__nav__list{
    margin: 0;
    padding: 0;
    width: 56vw;
    max-width: 350px;
}

ul.header__nav__list li {
    /*height: calc(100vh/5);*/
    height: 3.6rem;
    line-height: 3.6rem;
    font-size: 3em;
    text-align: center;
    border : 1px solid #FFF;
    border-radius: 1.8rem;
    margin-bottom: 5rem;
}

ul.header__nav__list li > a{
    display: block;
    text-decoration: none;
    color: #fff;
}

/* hamburger_line */
#target {
   width: 22px;
   height: 15px;
   position: absolute;
   top: 15px;
   right: 15px;
   cursor: pointer;
   display: block;
   -webkit-transition: 1.5s;
   transition: 1.5s;
}

.target_inner{
    width: 22px;
    height: 15px;
    position: relative;
}

.target_inner_line {
    display: block;
    width: 22px;
    height: 2px;
    background: #636363;
    -webkit-transition: 1.5s;
    transition: 1.5s;
    border-radius: 50px;
    position: absolute;
}

.target_inner_1 {
    top: 0;
}

.target_inner_2 {
    top: 6.5px;
}

.target_inner_3 {
    top: 13px;
}

/* 動き */
.fadein{
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
}

.linea,.lineb,.linec{
    background: #ffffff;
}

.linea {
    -webkit-transform: rotate(225deg);
    transform: rotate(225deg);
    top: 6.5px;
}

.lineb {
    opacity: 0;
}

.linec {
    -webkit-transform: rotate(-225deg);
    transform: rotate(-225deg);
    top: 6.5px;
}