<section class="s-6">
    <div class="container">
      <nav class="top-nav">
        <ul>
          <li><a href="#">ホーム<span class="nav-komoji">HOME</span></a></li>
          <li><a href="#">会社概要<span class="nav-komoji">COMPANY</span></a></li>
          <li><a href="#">サービス<span class="nav-komoji">SERVICE</span></a></li>
          <li><a href="#">採用情報<span class="nav-komoji">RECRIT</span></a></li>
          <li><a href="#">リンク<span class="nav-komoji">LINK</span></a></li>
          <li><a href="#">お問い合わせ<span class="nav-komoji">CONTACT</span></a></li>
        </ul>
      </nav>
    </div>
  </section>

*{
  box-sizing: border-box;
}

h1,h2,h3,h4,h5,h6,p{
  margin: 0;
  padding: 0;
  font-size: 100%;
  font-weight: 400;
}

li {
  list-style: none;
}

ul,ol{
  margin: 0;
  padding: 0;
  list-style-type: none;
}

a {
  text-decoration: none;
  color: rgb(0, 0, 0);
  transition: 0.6s;
  -webkit-transition: 0.6s;
  -moz-transition: 0.6s;
  -ms-transition: 0.6s;
  -o-transition: 0.6s;
}

html,body{
  width: 100%;
  margin: 0 auto;
  padding: 0;
  text-align: center;
  /* font-size: 16px; */
  /* フォントサイズ1440幅24px320pxで16px基本で変化 */
  /* font-size: calc((100vw - 320px) / 140 + 16px); */
    /* フォントサイズ1500幅16px320pxで14px基本で変化 */
  /* font-size: calc((100vw - 320px) / 590 + 14px); */
  /* フォントサイズ1500幅16px基本770pxで14pxで変化 */
  font-size: calc((100vw - 770px) / 325 + 14px);
  font-family: 'Noto Sans JP', sans-serif;
}

@media screen and (min-width:768px) {
.sp{
  display: none;
}
}

@media screen and (max-width:767px) {
.pc{
  display: none;
}
/* 
html,body{
  font-size: 14px;
} */
}

/* ＊＊＊＊＊
共通部分 
*/

.container{
  max-width: 1500px;
  margin: 0 auto;
}

@media screen and (max-width:767px) {
    section{
        padding: 20px 0 0 0;
    }
}

.header-wrap {
  width: 100%;
}

.top-nav {
  overflow: hidden;
  border-top: 1px solid rgb(210, 210, 210);
  border-bottom: 1px solid rgb(210, 210, 210);
}

.top-nav li{
  width: 16.6%;
  float: left;
  line-height: 1.6;
}
.top-nav li a {
  display: block;
  text-decoration: none;
  text-align: center;
  padding: 12px 0;
  border-left: 1px solid rgb(210, 210, 210);
  font-weight: bold;
  position: relative;
}
.top-nav li:fist-child a {
  border-left: none;
}
.top-nav li:last-child a {
  border-right: 1px solid rgb(210, 210, 210);
}
.top-nav li a span {
  display: block;
  font-size: 9px;
  color: rgb(186, 186, 186);
  font-weight: normal;
  letter-spacing: 0.2em;
}
/* マウスオン時・訪問中ページの動作 ----------------- */
.top-nav li a:hover,
.top-nav li.current a {
  background: rgb(230, 235, 250);
}
.top-nav li a:hover::before,
.top-nav li.current a::before {
  content: "";
  position: absolute;
  left: 5px;
  width: 3px;
  height: 40px;
  background: linear-gradient(rgb(18, 68, 255), rgb(14, 54, 202));
}
.top-nav li a:hover {
  color: rgb(14, 54, 202);
}