@media screen and (max-width: 767px){
    #container {
        background: #FFFFFF;
        transition: .2s -webkit-transform ease-in-out;
        -webkit-transition: .2s -webkit-transform ease-in-out;
        -ms-transition: .2s -webkit-transform ease-in-out;
        z-index: 1;
        overflow: hidden;
    }
}
#container.show {
  transform: translate3d(-285px, 0px, 1px);
  -webkit-transform: translate3d(-285px, 0px, 1px);
  -ms-transform: translate3d(-285px, 0px, 1px);
  min-width: 285px;
}
.sp-nav > * {
  -webkit-transform: translateZ(0px);
}
.sp-nav {
  background: #22acce;
  right: 0;
  top: 0;
  position: fixed;
  visibility: hidden;
  z-index: -1;
  transition: visibility 0s linear .2s;
  -webkit-transition: visibility 0s linear .2s;
  -ms-transition: visibility 0s linear .2s;
}
.sp-nav-open{
  height: 100%;
  overflow: hidden;
}
.sp-nav.show {
  width: 285px;
  height: 100%;
  visibility: visible;
  z-index: 1;
  transition: z-index 0s linear .2s;
  -webkit-transition: z-index 0s linear .2s;
  -ms-transition: z-index 0s linear .2s;
}
.sp-nav__wrapper {
  display: none;
  height: 100%;
  position: relative;
  width: 285px;
  padding: 0 0 60px;
  box-sizing: border-box;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  border-left: 1px solid #1f9ab8;
}
.sp-nav .gh-logo p.tagline{
  display: block;
}
.sp-nav .gh-logo{
  position: static;
  -webkit-transform: none; 
  -ms-transform:  none;
  transform:  none;
  background: #ffffff;
  width: 100%;
  margin: 0 0 12px 0;
  text-align: center;
  padding: 12px 3% 13px;
}
.sp-nav .gh-logo h1 {
  margin: 0 auto;
}
.sp-nav .gh-navigation_spnav{
  clear: both;
  padding: 0 3.5%;
}
.sp-nav .menu-upper{
  margin: 0 0 13px 0;
}
.sp-nav .menu-lower{
  border: 1px solid #1f9ab8;
  border-radius: 3px;
  margin: 0 0 15px 0;
}
.sp-nav .menu-lower li a{
  font-size: 15px;
  color: #ffffff;
  display: block;
  border-top: 1px solid #2fbbdd;
  border-bottom: 1px solid #1f9ab8;
  padding: 10px 50px 10px 15px;
  position: relative;
  font-family: 'Noto Sans CJK JP Medium', sans-serif !important;
}
.sp-nav .menu-lower li:last-child a{
  border-bottom: none;
}
.sp-nav .menu-lower li a:after {
  content: "";
  position: absolute;
  right: 15px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-top: 2px solid #FFFFFF;
  border-right: 2px solid #FFFFFF;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  margin-top: -3px;
}
.sp-nav .square-button.menu-upper-button{
  margin-bottom: 5px;
  min-height: 60px;
}
.sp-nav .square-button > span i.ic-apply{
  width: 180px;
  line-height: 1em;
}
.sp-nav .gh-menu .gf-content-link-customer-support{
  border-radius: 2px;
}
/* 追従ボタン */
.footer-btn-sp {
  width: 0;
  height: 0;
  background: rgba(93, 93, 93, 0.9);
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 100;
  opacity: 0;
  overflow: hidden;
  transition: 0.17s;
  -webkit-transition: 0.17s;
  -ms-transition: 0.17s;
  transition-property: opacity,transform;
  -webkit-transition-property: opacity,transform;
  -ms-transition-property: opacity;
  transform: translate3d(0px, 0px, 10px);
  -webkit-transform: translate3d(0px, 0px, 10px);
  -ms-transform: translate3d(0px, 0px, 10px);
}
.footer-btn-sp.sp-nav-open {
  transform: translate3d(-265px, 0px, 1px);
  -webkit-transform: translate3d(-265px, 0px, 1px);
  -ms-transform: translate3d(-265px, 0px, 1px);
}
.footer-btn-visible {
  width: 100%;
  height: 60px;
  opacity: 1;
  display: table;
}
.footer-btn-visible .button-wrap{
  display: table-cell;
  vertical-align: middle;
}
.footer-btn-visible .button-wrap .square-button{
  width: 48%;
  float: left;
  margin: 0 0 0 2%;
}
.footer-btn-visible .button-wrap .square-button.full{
  width: 98%;
}
.footer-btn-visible .gh-menuicon{
  display: table-cell;
  width: 50px;
  vertical-align: middle;
}
.footer-btn-sp .gh-menuicon i {
    top: 28px;
}
.footer-btn-sp .gh-menuicon i,
.footer-btn-sp .gh-menuicon i:before,
.footer-btn-sp .gh-menuicon i:after{
  background: #ffffff;
}
.footer-btn-sp .btn-sp-nav{
  display: block;
  width: 100%;
  height: 100%;
}