.nav-utility {
  position: fixed;
  top: 310px;
  right: 0;
  z-index: 10;
}

.nav-utility-list {
  color: #fff;
  background-color: #505050;
  overflow: hidden;
  padding: 10px 0 !important;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  width: 245px;
}

.nav-utility-list a {
  display: block;
  color: #fff;
  line-height: 1.4;
  padding: 10px 10px 10px 50px;
  background-size: 35px 35px;
  background-position: 8px 7px;
  background-repeat: no-repeat;
  overflow: hidden;
}

.nav-utility-list a:link {
  text-decoration: none;
}

.nav-utility-list-ttl {
  font-size: 14px;
  margin-bottom: 5px;
}

.nav-utility-list-desc {
  font-size: 12px;
}

.nav-utility-list-item--support a {
  background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='50px' height='50px' x='0px' y='0px' viewBox='0 0 50 50'%3E%3Cpath fill='%23fff' d='M39.1,31.6c0,1.5-1.2,2.6-2.6,2.6h-0.2c-1.5,0-2.6-1.2-2.6-2.6v-8.2c0-1.5,1.2-2.6,2.6-2.6h0.2 c1.5,0,2.6,1.2,2.6,2.6V31.6z'/%3E%3Cpath fill='%23fff' d='M16.3,31.6c0,1.5-1.2,2.6-2.6,2.6h-0.2c-1.5,0-2.6-1.2-2.6-2.6v-8.2c0-1.5,1.2-2.6,2.6-2.6h0.2 c1.5,0,2.6,1.2,2.6,2.6V31.6z'/%3E%3Cpath fill='%23fff' d='M42.8,23.6h-2.3c-0.1-8.3-6.8-15.1-15.2-15.1h-0.6c-8.3,0-15.2,6.8-15.2,15.1H7.3c0-9.6,7.8-17.4,17.4-17.4h0.6 C35,6.2,42.8,14,42.8,23.6'/%3E%3Cpath fill='%23fff' d='M39.7,22.7v9.4c0,0,3.4-0.1,3.4-2.1v-5.8C43.1,24.3,43.1,22.7,39.7,22.7'/%3E%3Cpath fill='%23fff' d='M10.3,22.7v9.4c0,0-3.4-0.1-3.4-2.1v-5.8C6.9,24.3,6.9,22.7,10.3,22.7'/%3E%3Cpath fill='%23fff' d='M26.7,41.3c0,1.4-1.1,2.5-2.5,2.5c-1.4,0-2.5-1.1-2.5-2.5c0-1.4,1.1-2.5,2.5-2.5C25.6,38.8,26.7,39.9,26.7,41.3 '/%3E%3Cpath fill='%23fff' d='M22.3,42.6h-9.4c-1.3,0-2.3-0.4-3.1-1.2c-1.4-1.4-1.4-3.6-1.4-3.6V33h1.5v4.8c0,0,0,1.6,1,2.6 c0.5,0.5,1.2,0.8,2.1,0.8h9.4V42.6z'/%3E%3C/svg%3E");
}

.nav-utility-list-item--search a {
  background-image: url("data:image/svg+xml,%0A%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='50px' height='50px' x='0px' y='0px' viewBox='0 0 50 50'%3E%3Cpath fill='%23fff' d='M26.4,39.9c-9.8,0-17.8-8-17.8-17.8s8-17.8,17.8-17.8c9.8,0,17.8,8,17.8,17.8S36.2,39.9,26.4,39.9z M26.4,6.3 c-8.7,0-15.8,7.1-15.8,15.8s7.1,15.8,15.8,15.8c8.7,0,15.8-7.1,15.8-15.8S35.1,6.3,26.4,6.3z'/%3E%3Cpath fill='%23fff' d='M7.5,45.5c-0.5,0-1-0.2-1.4-0.6c-0.8-0.8-0.8-2,0-2.8l7.3-7.3c0.8-0.8,2-0.8,2.8,0c0.8,0.8,0.8,2,0,2.8 l-7.3,7.3C8.5,45.3,8,45.5,7.5,45.5z'/%3E%3Cpolygon fill='%23fff' points='33.3,15.5 19.4,15.5 16.8,21.7 18.8,21.7 18.8,29.8 22,29.8 22,22.9 24.4,22.9 24.4,29.8 28.4,29.8 28.4,22.9 30.9,22.9 30.9,29.8 33.9,29.8 33.9,21.7 35.9,21.7'/%3E%3C/svg%3E");
}

.nav-utility-list-item--navigate a {
  background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='50px' height='50px' x='0px' y='0px' viewBox='0 0 50 50'%3E%3Cpath fill='%23fff' d='M25,39.6c-0.5,0-1.1-0.2-1.5-0.6l-5.3-5.7H9.7c-1.1,0-2.1-1-2.1-2.1V11.4c0-1.2,0.9-2.1,2.1-2.1H34 c1.1,0,2,0.9,2.2,2v20c0,1.1-1,2.1-2.1,2.1h-7v4.2c0,0.8-0.6,1.6-1.3,1.9C25.5,39.6,25.3,39.6,25,39.6z M10.2,30.8h9.2l5.3,5.7v-5.7 h9v-19H10.2V30.8z'/%3E%3Cpath fill='%23fff' d='M16.5,18.3c-0.8,0-1.5-0.6-1.5-1.5s0.6-1.5,1.5-1.5c0.8,0,1.5,0.6,1.5,1.5S17.3,18.3,16.5,18.3z'/%3E%3Cpath fill='%23fff' d='M20.1,18.3c-0.8,0-1.5-0.6-1.5-1.5s0.6-1.5,1.5-1.5s1.5,0.6,1.5,1.5S21,18.3,20.1,18.3z'/%3E%3Cpath fill='%23fff' d='M23.7,18.3c-0.8,0-1.5-0.6-1.5-1.5s0.6-1.5,1.5-1.5s1.5,0.6,1.5,1.5C25.2,17.6,24.5,18.3,23.7,18.3z'/%3E%3Cpath fill='%23fff' d='M27.4,18.3c-0.8,0-1.5-0.6-1.5-1.5s0.6-1.5,1.5-1.5s1.5,0.6,1.5,1.5C28.8,17.6,28.2,18.3,27.4,18.3z'/%3E%3Cpath fill='%23fff' d='M16.5,22.7c-0.8,0-1.5-0.6-1.5-1.5c0-0.8,0.6-1.5,1.5-1.5c0.8,0,1.5,0.6,1.5,1.5S17.3,22.7,16.5,22.7z'/%3E%3Cpath fill='%23fff' d='M20.1,22.7c-0.8,0-1.5-0.6-1.5-1.5c0-0.8,0.6-1.5,1.5-1.5s1.5,0.6,1.5,1.5S21,22.7,20.1,22.7z'/%3E%3Cpath fill='%23fff' d='M23.7,22.7c-0.8,0-1.5-0.6-1.5-1.5c0-0.8,0.6-1.5,1.5-1.5s1.5,0.6,1.5,1.5C25.2,22.1,24.5,22.7,23.7,22.7z'/%3E%3Cpath fill='%23fff' d='M27.4,22.7c-0.8,0-1.5-0.6-1.5-1.5c0-0.8,0.6-1.5,1.5-1.5s1.5,0.6,1.5,1.5C28.8,22.1,28.2,22.7,27.4,22.7z'/%3E%3Cpath fill='%23fff' d='M16.5,27.2c-0.8,0-1.5-0.6-1.5-1.5s0.6-1.5,1.5-1.5c0.8,0,1.5,0.6,1.5,1.5S17.3,27.2,16.5,27.2z'/%3E%3Cpath fill='%23fff' d='M20.1,27.2c-0.8,0-1.5-0.6-1.5-1.5s0.6-1.5,1.5-1.5s1.5,0.6,1.5,1.5S21,27.2,20.1,27.2z'/%3E%3Cpath fill='%23fff' d='M23.7,27.2c-0.8,0-1.5-0.6-1.5-1.5s0.6-1.5,1.5-1.5s1.5,0.6,1.5,1.5C25.2,26.5,24.5,27.2,23.7,27.2z'/%3E%3Cpath fill='%23fff' d='M27.4,27.2c-0.8,0-1.5-0.6-1.5-1.5s0.6-1.5,1.5-1.5s1.5,0.6,1.5,1.5C28.8,26.5,28.2,27.2,27.4,27.2z'/%3E%3Cpath fill='%23fff' d='M31.3,40.8c-0.3,0-0.6,0-0.8-0.2c-0.7-0.2-1.3-1.1-1.3-1.9V37h-3.1v-2.5h5.5v3.1l2.9-3.1h5.4v-11h-5V21h5.4 c1.1,0,2.1,0.9,2.2,2.1v11.7c0,1.1-1,2.1-2.1,2.1h-4.7L32.7,40C32.4,40.5,31.9,40.8,31.3,40.8z'/%3E%3C/svg%3E");
}

.nav-utility-spBtn {
  width: 37px;
  height: 37px;
  position: absolute;
  top: 0;
  left: -37px;
}

.nav-utility-spBtn button {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
  background-color: #21439c;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  cursor: pointer;
}

.nav-utility-spBtn span {
  text-align: center;
  line-height: 17px;
  font-size: size(12);
  font-weight: bold;
  display: block;
  width: 17px;
  height: 17px;
  border-radius: 100%;
  color: #21439c;
  background-color: #fff;
  display: block;
}

.nav-utility,
.nav-utility-list-item a {
  -webkit-transition: .5s;
  transition: .5s;
}

.nav-utility:not(.is-hide) .nav-utility-spBtn {
  display: none;
}

@media screen and (max-width: 767px) {
  .nav-utility {
    top: 25%;
  }
  .nav-utility-list {
    background-color: #21439c;
  }
  .nav-utility.is-hide {
    right: -245px;
  }
}

@media screen and (min-width: 768px), print {
  .nav-utility-list a {
    height: 85px;
  }
  .nav-utility-list a:hover {
    background-color: #9cc715;
  }
  .nav-utility-spBtn {
    display: none;
  }
  .nav-utility.is-hide {
    right: -195px;
  }
  .nav-utility.is-hide .nav-utility-list-item a {
    height: 45px;
  }
}