* {
   box-sizing: border-box;
}
body {
   width: 80%;	
   margin-left:auto;
   margin-right: auto;
   gino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", "Helvetica Neue", Helvetica, Arial, sans-serif;
   background-color: #ffffff;
   overflow-x: hidden;
   height: 100%;
}
header {
   padding: 30px 4% 10px;
   top: 0;
   width: 100%;
   background-color: #fff;
   display: flex;
   align-items: center;
}

a {	
   text-decoration: none;
   color: #4b4b4b;
}
nav {
   margin: 0 0 0 auto;
}
ul {
   list-style: none;
   margin: 0;
   display: flex;
}
li {
   margin: 0 0 0 15px;
   font-size: 14px;
}
h1 {
  position: relative;
  padding: 0.5em;
  background: #a6d3c8;
  color: white;
}

h1::before {
  position: absolute;
  content: '';
  top: 100%;
  left: 0;
  border: none;
  border-bottom: solid 15px transparent;
  border-right: solid 20px rgb(149, 158, 155);
}
a{
  position: relative;
  display: inline-block;
  transition: .3s;
}

a::after {
  position: absolute;
  bottom: 0;
  left: 50%;
  content: '';
  width: 0;
  height: 2px;
  background-color: #31aae2;
  transition: .3s;
  transform: translateX(-50%);
}

a:hover::after{
  width: 100%;
}