/*
* PC Navigation
----------------------------------------*/

#fixed-nav .nav-service.nav-jcom-gas,.nav-service.nav-jcom-gas {
  background: #D4DEF5;
}

#fixed-nav .nav-service.nav-jcom-gas .logo a::before,.nav-service.nav-jcom-gas .logo a::before {
  background-image: url(/common_v10/images/icn-jcom-gas.svg)
}

#fixed-nav .nav-service.nav-jcom-gas .nav-menu .menu-bar .bar-content>ul>li::before,.nav-service.nav-jcom-gas .nav-menu .menu-bar .bar-content>ul>li::before {
  border-color: #0A308F;
}

#fixed-nav .nav-service.nav-jcom-gas .nav-menu .menu-bar .bar-content>ul>li>span::after,.nav-service.nav-jcom-gas .nav-menu .menu-bar .bar-content>ul>li>span::after {
  border-color: #0A308F;
}

#fixed-nav .nav-service.nav-jcom-gas .nav-menu .menu-bar .bar-content>ul>li.is-active,.nav-service.nav-jcom-gas .nav-menu .menu-bar .bar-content>ul>li.is-active {
  background: #F4F7FF;
}

#fixed-nav .nav-service.nav-jcom-gas .nav-menu .menu-bar .bar-content>ul>li.is-active>a span,#fixed-nav .nav-service.nav-jcom-gas .nav-menu .menu-bar .bar-content>ul>li.is-active>span span,.nav-service.nav-jcom-gas .nav-menu .menu-bar .bar-content>ul>li.is-active>a span,.nav-service.nav-jcom-gas .nav-menu .menu-bar .bar-content>ul>li.is-active>span span {
  color: #0A308F;
}

#fixed-nav .nav-service.nav-jcom-gas .nav-menu .menu-bar .bar-content>ul>li.is-active>span::after,.nav-service.nav-jcom-gas .nav-menu .menu-bar .bar-content>ul>li.is-active>span::after {
  border-color: #0A308F;
}

#fixed-nav .nav-service.nav-jcom-gas .nav-menu .menu-content,.nav-service.nav-jcom-gas .nav-menu .menu-content {
  background: #F4F7FF;
}

.link-self-crt-jcom-gas::after {
  background: url(/common_v10/images/icn-link-self-crt-jcom-gas.svg) no-repeat center center/24px 24px;
}

.link-self-jcom-gas::after {
  background: url(/common_v10/images/icn-link-self-jcom-gas.svg) no-repeat center center/contain;
}

/*
* SP Navigation
----------------------------------------*/

@media screen and (max-width: 767px) {
#gnav-sp .menu .menu-label-content>ul>li.nav-label-jcom-gas>span {
  color: #0A308F !important;
}

#gnav-sp .menu .menu-label-content>ul>li.nav-label-jcom-gas>span::after {
  background-image: url(/common_v10/images/icn-jcom-gas.svg)
}

#gnav-sp .menu .menu-label-content>ul>li.nav-label-jcom-gas.is-active>span::after {
  background-image: url(/common_v10/images/icn-jcom-gas-white.svg)
}

#gnav-sp .menu .menu-label-content>ul>li.nav-label-jcom-gas.is-active>span::before {
  background: #0A308F;
  -webkit-box-shadow: 2px 4px 8px 0px rgba(10,48,143,0.4);
  box-shadow: 2px 4px 8px 0px rgba(10,48,143,0.4)
}
#gnav-sp.gnav-sp-jcom-gas .menu .menu-label-content>ul>li.nav-label-sim,#gnav-sp.gnav-sp-jcom-gas .menu .menu-label-content>ul>li.nav-label-entry,#gnav-sp.gnav-sp-jcom-gas .menu .menu-label-content>ul>li.nav-label-faq {
  color: #0A308F !important;
}

#gnav-sp.gnav-sp-jcom-gas .menu .menu-label-content>ul>li.nav-label-sim>a::after,#gnav-sp.gnav-sp-jcom-gas .menu .menu-label-content>ul>li.nav-label-sim>span::after {
  background-image: url(/common_v10/images/sp-menu/jcom-gas/icn-sim.svg)
}

#gnav-sp.gnav-sp-jcom-gas .menu .menu-label-content>ul>li.nav-label-entry>a::after,#gnav-sp.gnav-sp-jcom-gas .menu .menu-label-content>ul>li.nav-label-entry>span::after {
  background-image: url(/common_v10/images/sp-menu/jcom-gas/icn-entry.svg)
}

#gnav-sp.gnav-sp-jcom-gas .menu .menu-label-content>ul>li.nav-label-faq>a::after,#gnav-sp.gnav-sp-jcom-gas .menu .menu-label-content>ul>li.nav-label-faq>span::after {
  background-image: url(/common_v10/images/sp-menu/jcom-gas/icn-faq.svg)
}
}


@media screen and (max-width: 767px) {
#gnav-sp .menu-swiper-sp .swiper-container .swiper-wrapper .swiper-slide.slide-jcom-gas {
    background: #0A308F;
}
}

@media screen and (max-width: 767px) {
  #gnav-sp .menu .menu-label-content .menu-active-upper {
    left: 4px;
  }
}

/* PC時のJ:COM セットでおすすめ・人気サービス スライド2枚の時サイズ調整 */
.swiper.slide-2 .swiper-container {
  max-width: 546px;
}
@media screen and (max-width: 1080px) {
  .swiper.slide-3 .swiper-container {
    max-width: 100%;
  }
  /* PC時のJ:COM セットでおすすめ・人気サービス スライド2枚の時サイズ調整 */
  .swiper.slide-2 .swiper-container {
    max-width: 100%;
  }
}