#work {
  padding: 0 15px; }
  #work .work_navi {
    display: flex;
    flex-wrap: wrap;
    -webkit-justify-content: center;
    justify-content: center;
    padding-bottom: 40px; }
    #work .work_navi li {
      width: calc(20% - 16px);
      margin-left: 20px;
      margin-bottom: 20px; }
      #work .work_navi li:nth-child(5n+1) {
        margin-left: 0; }
      #work .work_navi li a {
        display: block;
        border-radius: 9px;
        text-align: center;
        font-size: 20px;
        font-size: 2.0rem;
        line-height: 1;
        letter-spacing: 0.1em;
        padding: 25px 0;
        background-color: #DFDFDF; }
        #work .work_navi li a:hover, #work .work_navi li a.current {
          background-color: #AC2F37;
          color: #fff; }
  #work .work_block {
    width: calc(25% - 15px);
    margin-left: 20px;
    margin-bottom: 65px; }
    #work .work_block:nth-of-type(4n+1) {
      margin-left: 0px; }
    #work .work_block img {
      width: 100%; }
    #work .work_block .date {
      padding-top: 0.5em; }

@media screen and (max-width: 768px) {
  #work .work_navi {
    padding-bottom: 20px; }
    #work .work_navi li {
      width: calc(50% - 10px);
      margin-left: 20px;
      margin-bottom: 20px; }
      #work .work_navi li:nth-child(5n+1) {
        margin-left: 20px; }
      #work .work_navi li:nth-child(2n+1) {
        margin-left: 0; }
      #work .work_navi li a {
        border-radius: 5px;
        font-size: 16px;
        font-size: 1.6rem;
        padding: 15px 0; }
  #work .work_block {
    width: 100%;
    margin-left: 0px;
    margin-bottom: 30px; }
    #work .work_block:nth-of-type(4n+1) {
      margin-left: 0px; } }
@media (orientation: portrait) and (min-width: 767px) {
  #work .work_block {
    width: calc(50% - 10px);
    margin-left: 20px;
    margin-bottom: 65px; }
    #work .work_block:nth-of-type(2n+1) {
      margin-left: 0px; } }