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

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

/*common layout*/
/*header
-----------------------------------------*/
#pageHead {
  width: 100vw;
  height: 80px;
  border-bottom: 1px #ddd solid;
  background-color: #fff;
  position: fixed;
  top: 0px;
  z-index: 90; }
  #pageHead .inner {
    width: 94vw;
    margin: 20px auto 0px auto;
    position: relative; }
    #pageHead .inner .social {
      position: absolute;
      top: 0;
      right: 0;
      z-index: 95; }
      #pageHead .inner .social li {
        display: inline-block;
        margin-left: 5px; }
      @media screen and (max-width: 960px) {
        #pageHead .inner .social {
          top: 8px;
          right: 75px; } }
    #pageHead .inner .logo {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 95; }
    #pageHead .inner .spNavIcon {
      display: none;
      z-index: 95;
      cursor: pointer; }
      @media screen and (max-width: 960px) {
        #pageHead .inner .spNavIcon {
          display: block;
          width: 30px;
          height: 30px;
          position: absolute;
          top: 5px;
          right: 15px; }
          #pageHead .inner .spNavIcon img {
            width: 100%;
            height: auto; } }
    #pageHead .inner nav {
      width: 100vw;
      position: absolute;
      top: 24px;
      left: 180px;
      background-color: #fff;
      z-index: 91; }
      #pageHead .inner nav ul {
        width: 100%; }
        #pageHead .inner nav ul li {
          display: inline-block;
          padding-right: 4vw; }
          #pageHead .inner nav ul li a {
            color: #000;
            line-height: 1;
            font-size: 13px;
            text-decoration: none;
            position: relative;
            display: inline-block;
            -webkit-transition: 0.3s ease-in-out;
            -moz-transition: 0.3s ease-in-out;
            -o-transition: 0.3s ease-in-out;
            transition: 0.3s ease-in-out; }
            #pageHead .inner nav ul li a::after {
              content: "";
              position: absolute;
              bottom: -4px;
              left: 50%;
              width: 0;
              height: 2px;
              background-color: #000;
              -webkit-transition: 0.3s ease-in-out;
              -moz-transition: 0.3s ease-in-out;
              -o-transition: 0.3s ease-in-out;
              transition: 0.3s ease-in-out; }
            #pageHead .inner nav ul li a:hover::after {
              width: 100%;
              left: 0; }
      #pageHead .inner nav .jgLogo {
        width: 130px;
        position: fixed;
        top: 24px;
        right: 140px;
        z-index: 95; }
        @media screen and (max-width: 960px) {
          #pageHead .inner nav .jgLogo {
            position: absolute;
            top: 90vh;
            left: calc(50vw - 65px - 2vw); } }
      @media screen and (max-width: 960px) {
        #pageHead .inner nav {
          width: 100vw;
          height: 100vh;
          position: fixed;
          left: 100vw;
          top: 0;
          padding-top: 70px;
          display: none; }
          #pageHead .inner nav ul {
            width: 100vw; }
            #pageHead .inner nav ul li {
              font-size: 16px;
              letter-spacing: 0.2em;
              line-height: 1;
              text-align: center;
              display: block;
              border-bottom: 1px solid #eee; }
              #pageHead .inner nav ul li a {
                display: block;
                padding: 30px 0 20px; } }

/*footer
-----------------------------------------*/
#pageFtr {
  width: 100%;
  border-top: 1px #d6d6d6 solid;
  padding: 30px 0 25px 0;
  background-color: #fff; }
  @media screen and (max-width: 768px) {
    #pageFtr {
      padding: 15px 0 15px 0; } }
  #pageFtr .block {
    width: 94vw;
    margin: 0 auto;
    position: relative; }
    @media screen and (max-width: 768px) {
      #pageFtr .block {
        width: 86vw; } }
    #pageFtr .block .copyright {
      display: inline-block;
      margin-right: 4vw;
      float: left;
      font-size: 12px;
      line-height: 1; }
      @media screen and (max-width: 768px) {
        #pageFtr .block .copyright {
          margin-right: 18vw;
          line-height: 1.3;
          margin-bottom: 10px; } }
    #pageFtr .block .pp {
      display: inline-block;
      float: left;
      font-size: 12px;
      line-height: 1; }
      @media screen and (max-width: 768px) {
        #pageFtr .block .pp {
          line-height: 1.3; } }
      #pageFtr .block .pp a {
        color: #777; }
        #pageFtr .block .pp a:hover {
          color: #000; }
    #pageFtr .block .social {
      position: absolute;
      top: -8px;
      right: 0; }
      @media screen and (max-width: 768px) {
        #pageFtr .block .social {
          top: 0; } }
      #pageFtr .block .social li {
        display: inline-block;
        margin-left: 5px; }