header{
  position: relative;
  margin-right: 10px;
  height: 100vh;
  &:after{
    position: absolute;
    width: 0%;
    bottom: 0;
    content: "";
  }
  .head{
    width:100%;
    padding-top: 22px;
    nav{
      width: calc((100% / 3) * 2);
      position: relative;
      h2{
        position: absolute;
      }
    }
  }
  .works-mea{
    position: absolute;
    bottom: 20px;
    width: calc((100%) + (10px) );
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    height: 50%;
    .card{
      height: calc(100% - 30px);
      .card-image{
        overflow: hidden;
        height: 100%;
        width: 100%;
        a{
          display: block;
          height: 100%;
          img{
            object-fit: cover;
            width: 100%;
          }
        }
      }
      &:first-child{
        margin-right: 10px;
      }
      &:last-child{
        margin-left: 10px;
      }
    }
  }
  .scroll{
    position: absolute;
    width: 100%;
    bottom: 0;
    height: 20px;
    p{
      svg{
        display: block;
        margin: auto;
      }
    }
  }
}

.item{
  #start{
    margin-top: 115px;
    .cat-list{
      display: none;
    }
  }
}

.down, .item{
  header{
    background: white;
    z-index: 999;
    width: calc(100% - 20px);
    height: 90px;
    position: fixed;
    top: 0;
    &:after{
      width: 100%;
      height: 1px;
      background: black;
    }
    .head{
      nav{
        width: calc((100% / 6));
        min-width: 300px;
        path{
          fill:black!important;
        }
        h2{
          -webkit-transform: translateX(-150%);
                  transform: translateX(-150%);
          -webkit-transition: 2s -webkit-transform ease;
          transition: 2s -webkit-transform ease;
          transition: 2s transform ease;
          transition: 2s transform ease, 2s -webkit-transform ease;
        }
      }
    }
    .works-mea{
      bottom: 65px;
      -webkit-transition: 0s 1s bottom;
      transition: 0s 1s bottom;
      .card{
        opacity: 0;
        margin-top: -20px;
      }
    }
  }
  .scroll{
    opacity: 0;
    margin-bottom: -20px;
    -webkit-transition: 1s all ease;
    transition: 1s all ease;
  }
}

.down{
  header{
    -webkit-transition: 1s 1s height ease;
    transition: 1s 1s height ease;
    &:after{
      -webkit-transition: 1.5s 2s width ease;
      transition: 1.5s 2s width ease;
    }
    .head{
      nav{
        -webkit-transition:1s 1s width ease;
        transition:1s 1s width ease;
        path{
          -webkit-transition:1s 1s fill ease;
          transition:1s 1s fill ease;
        }
      }
    }
    .works-mea{
      bottom: 65px;
      -webkit-transition: 0s 1s bottom;
      transition: 0s 1s bottom;
      .card{
        opacity: 0;
        margin-top: -20px;
        &:nth-child(1){
          -webkit-transition: 0.5s 0.3s all ease;
          transition: 0.5s 0.3s all ease;
        }
        &:nth-child(2){
          -webkit-transition: 0.5s 0.5s all ease;
          transition: 0.5s 0.5s all ease;
        }
        &:nth-child(3){
          -webkit-transition: 0.5s 0.7s all ease;
          transition: 0.5s 0.7s all ease;
        }
      }
    }
  }
}