* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
}

:root {
     --nav-height: 10vh;
     --nav-background: #ccc;
}

nav {
     display: flex;
     padding: 0 50px;
     align-items: center;
     width: 100%;
     height: var(--nav-height);
     background: var(--nav-background);
}

.logo h1 {
     font-size: 20px;
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 3px;
}

/*検索欄*/
.search {
     float: right;
}

/* nav-links */

.nav-links {
     display: flex;
     height: var(--nav-height);
     align-items: center;
     margin-left: auto;
}

.nav-links li {
     list-style: none;
     margin: 0 15px;
     height: var(--nav-height);
     line-height: var(--nav-height);
     text-align: center;
}

.nav-links li a {
     text-decoration: none;
     color: rgb(99, 99, 99);
     position: relative;
}

/* menu */

.menu {
     cursor: pointer;
     background: var(--nav-background);
     border: none;
     outline: none;
     display: none;
}

.menu .bar {
     width: 20px;
     height: 2px;
     background: #000;
     border-radius: 5px;
     opacity: 1;
     visibility: visible;
     transition: 0.5s ease;
     transform-origin: left;
}

.menu .bar1 {
     margin-bottom: 5px;
}

.menu .bar3 {
     margin-top: 5px;
}

.menu.toggle .bar1 {
     transform-origin: left;
     transform: rotate(45deg);
}

.menu.toggle .bar2 {
     opacity: 0;
     visibility: hidden;
}

.menu.toggle .bar3 {
     transform-origin: left;
     transform: rotate(-45deg);
}

/* responsive */

@media screen and (max-width: 700px) {
     .nav-links {
          flex-direction: column;
          position: fixed;
          top: 0;
          left: 100%;
          width: 300px;
          height: 100%;
          background: var(--nav-background);
          margin-top: var(--nav-height);
          transition: 0.5s ease-out;
     }
     .nav-links li {
          height: var(--nav-height);
          line-height: var(--nav-height);
          text-align: center;
          width: 100%;
          display: block;
     }
     .menu {
          display: block;
          margin-left: auto;
     }

     .menu.toggle + .nav-links {
          transform: translateX(-100%);
     }
}
<!-テーブルを美しく->
.table_01 {
    border: 3px solid gray;
    border-collapse: collapse;
    width: 100%;
    table-layout: fixed;
}
.th_01 {
    border: 3px solid gray;
    padding: 15px;
    background-color: #45c8f1;
    color: aliceblue;
}
.td_01 {
    border: 3px solid gray;
    padding: 20px;
    background-color: whitesmoke;
}
.td_01:hover{
    background-color: #fffeb2;
}

table tr {
  width:100%;
　line-height: 2.5em;
　border: 1px solid #c7c7bc;
　background-color: #ececec;
　text-align: center;
　vertical-align:middle;
　font-size: 12px;
　color: #404040;
}

table tr a{
  display: block;
  width: 100%;
  height: 100%;

}
.over_flow{
	/*text-overflow:	ellipsis;*/
	white-space:	nowrap;
	overflow:	auto;
	max-width:	0;
}

.books h1 {
  color: #55e04d;/*文字色*/
  padding: 0.5em 0;/*上下の余白*/
  border-top: solid 3px #a8dda5;/*上線*/
  border-bottom: solid 3px #a8dda5;/*下線*/
}
.table_01 tr:hover {
  background-color: #fffeb2;
}

/*ボタン用*/
.btn-square-shadow {
  display: inline-block;
  padding: 0.5em 1em;
  text-decoration: none;
  background: #668ad8;/*ボタン色*/
  color: #FFF;
  border-bottom: solid 4px #627295;
  border-radius: 3px;
}
.btn-square-shadow:active {
  /*ボタンを押したとき*/
  -webkit-transform: translateY(4px);
  transform: translateY(4px);/*下に動く*/
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);/*影を小さく*/
  border-bottom: none;
}