@media screen and (max-width: 1221px){

  #main {
    width: 100%;
  }
  footer .line:nth-of-type(1) {
    left: calc(100% / 4);
  }
  footer .line:nth-of-type(1)::before {
    left: calc(100% / 2);
  }
  footer .line:nth-of-type(1)::after {
    left: calc((100% * 3) / 4);
  }
  footer .line:nth-of-type(2),
  footer .line:nth-of-type(2)::before,
  footer .line:nth-of-type(2)::after {
    display: none;
  }

}

@media screen and (max-width: 767px){
  #logo {
    margin: 10px 0 0;
  }
  .flex {
    flex-direction: column;
  }
  nav>p {
    margin: 5px 0;
  }
  .work.flex {
    flex-direction: row;
    padding-left: 0;
  }
  .work>.item {
     width: 50%;
    padding: 0 2% 5%;
  }

  .detail.flex {
    flex-direction: column-reverse;
    padding-left: 0;
  }
  .detail>.item {
     width: 100%;
    padding: 0 5% 0;
  }
  .detail>.item:nth-of-type(2) {
     width: 100%;
    padding: 5% 5% 0;
  }

  .profile.flex {
    flex-direction: row;
    padding-left: 0;
  }
  .profile>.item {
     width: 50%;
    padding: 0 2% 5%;
  }

  .backnav {
    position: static;
    left: auto;
    bottom: auto;
  }

  #copyright {
    font-size: 1.2rem;
    text-align: center;
    color: #666;
    margin: 0;
    padding-right: 0;
  }
}
@media screen and (max-width: 480px){
  header {
    padding-left: 5%;
    padding-right: 5%;
    box-sizing: border-box;
  }
  #main {
    padding-top: 24%;
  }
  .work.flex {
    flex-direction: column;
  }
  .work>.item {
     width: 100%;
  }

  .profile.flex {
    flex-direction: column;
  }
  .profile>.item {
     width: 100%;
  }

}