@charset "utf-8";
.header__logo {width:auto;height:50px;img{height:auto;width:100%;max-width:200px;}}
/*menu*/
#SP-MENU{
  display:none;
}
.spMenu{
  display:none;
}
@media (max-width:880px){
  .spMenu{
    height:40px;
    width:40px;
    position:absolute;
    right:16px;
    top:10px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:space-around;
    span{
      width:30px;
      height:2px;
      display:block;
      border-radius:1px;
      background-color:#333;
      position: absolute;
      left: 5px;
      transition: top 0.3s 0.3s, transform 0.3s 0s, opacity 0.3s 0.3s;
      &:nth-of-type(1) { top: 10px; }
      &:nth-of-type(2) { top: 19px; }
      &:nth-of-type(3) { top: 28px; }
    }
  }
#SP-MENU:checked+ .spMenu {
    span {
      transition: top 0.3s 0s, transform 0.3s 0.3s, opacity 0.3s 0s;
    }

    span:nth-of-type(1) {
      top: 19px;
      transform: rotate(45deg);
    }

    span:nth-of-type(2) {
      opacity: 0;
    }

    span:nth-of-type(3) {
      top: 19px;
      transform: rotate(-45deg);
    }
  }
  .header__nav{
    height:0;
    padding:0;
    overflow:hidden;
    width:100%;
    position:absolute;
    top:60px;
    left:0;
    right:0;
    background-color:#fff;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:0;
    transition:0.3s;
    z-index:100;
    a{
      height:0;
      padding:0;
      display:block;
      width:80%;
      margin:auto;
      border-bottom:1px solid #333;
      transition:0.3s;
      opacity:0;
      &:last-of-type{
        border-bottom:0;
      }
    }
  }
  #SP-MENU:checked~.header__nav{
    height:auto;
    padding:16px 0;
    a{
      padding:8px 0;
      height:auto;
      opacity:1;
    }
  }
}