/*--------------------------------------------------------header*/

.logo .title{
  opacity: 0;
  animation:title 2s 3s forwards;
}
@keyframes title{
  0%{opacity:0;}
  100%{opacity:1;}
}
.title.noMotion{
  animation:none;
  opacity:1;
}
nav{
  position:absolute;
  left:40px;
  bottom:-22px;
  opacity: 0;
  animation:nav 2s 4s forwards;
}
@keyframes nav{
  0%{opacity:0;}
  100%{opacity:1;}
}
nav.noMotion{
  animation: none;
  opacity:1;
}
nav ul{
  display: flex;
}
/*nav ul li:first-child::after{
  content:"/";
  color:#a580b2;
  margin:0 0.6rem;
}*/

@media(max-width:767px){
  header{
    padding:21px 24px 87px;
  }
  .navSp{
    display: block;
    position:absolute;
    right:28px;
    top:28px;
    opacity: 0;
    animation:nav 2s 3s forwards;
  }
  .navSp ul{
    display: flex;
    font-size:1.8rem;
  }
 /* .navSp ul li:first-child::after{
    content:"/";
    color:#a580b2;
    margin:0 0.6rem;
  }*/
  nav{
    display: none;
  }
  .logo{
  position: relative;
    width:100%;
    margin-top:111px;
  }
  .logo .title{
    position:absolute;
    left:13%;
    bottom:21%;
    width:45.4%;
    height:auto;
  }
  
}


/*--------------------------------------------------------main*/
main{
  padding-left:40px;
}
.secNewWorks .boxWorks{
  display:flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
}
.secNewWorks .work{
  width:77.3%;
}
.secNewWorks .firstWork{
  opacity: 0;
  animation:nav 2s 4s forwards;
}
.secNewWorks .firstWork.noMotion{
  opacity:1;
  animation:none;
}
.workImg{
  width:100%;
  overflow: hidden;
}
.workImg img{
  transition:0.3s;
}
.workImg img:hover{
  transform: scale(1.05, 1.05);
}
.workCaption{
  position:relative;
  left:-60px;
}
.workCaption a{
  display: inline-block;
  margin:15px 0 58px 0;
  padding-left:60px;
  background: url(../images/arrow.svg) no-repeat;
  background-position:left -25px bottom 7px;
  background-size:auto 5px;
  transition: 0.5s ease;
  color:#9572ae;
 }
.workCaption a:hover{
  background: url(../images/arrow_hover.svg) no-repeat;
  background-position:left -11px bottom 7px;
  background-size:auto 5px;
  color:#333;
}
/**/
.workImg img:hover + .workCaption a{
  background: url(../images/arrow_hover.svg) no-repeat;
  background-position:-11px bottom;
  background-size:auto 5px;
  color:#333;
}

@media(max-width:767px){
  main{
    margin-bottom:56px;
    padding:0 28px;
  }  
  .secNewWorks{
    
  }
  .secNewWorks .work {
    width: 100%;
  }
.workCaption{
  left:0;
}
.workCaption a{
  margin:4px 0 48px 0;
  padding-left:0;
  padding-bottom:16px;
 }
}

/*oldWorks*/
.secOldWorks{
  display: flex;
  justify-content: flex-end;
}
.secOldWorks .boxWorks{
  display:flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width:77.3%;
}
.secOldWorks .work{
  width:28.29%;
}
@media(max-width:767px){
  .secOldWorks .boxWorks{
    display:block;
    width:100%;
  }
  .secOldWorks .boxWorks::after{
    content:"";
    display: block;
    clear: left;
  }
  .secOldWorks .boxWorks .work{
    float:left;
    width:47.3%;
  }
  .secOldWorks .boxWorks .work:nth-child(odd){
    margin-right:5.4%;
  }
  .secOldWorks .workCaption a{
    font-size:1.3rem;
   }
  
  
}