@charset "UTF-8";


html {
  height: 100%;
}

body {
  color: #1a1a1a;
  font-family: 'Roboto', 'NotoSansCJKjp', sans-serif;
  font-size: 90%;
  font-weight: 300;
  height: 100%;
  letter-spacing: 1px;
  overflow-x: hidden;
  overflow-y: scroll;
  width: 100%;
}

a, a:visited {
  color: #1a1a1a;
  outline: none;
  text-decoration: none;
}
a:hover {
}
a:focus {
  outline: none;
}

/* placeholder */
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color: #bebebe;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    color: #bebebe;
}
input::-moz-placeholder,
textarea::-moz-placeholder {
    color: #bebebe;
}
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px white inset;
}

.clearfix{ zoom:1}
.clearfix:after{ content:"";  display:block;  clear:both}

.opacity-1 { opacity: 1; }

/* --------------------------------------
  CONTAINER
-------------------------------------- */
#container {
  height: 100%;
  opacity: 0;
  overflow-x: hidden;
  z-index: 100;
  transition: opacity 0.5s;
}
#container.opacity-1 {
  opacity: 1;
}

/* --------------------------------------
  HEADER
-------------------------------------- */
header {
  box-sizing: border-box;
  color: #000;
  height: 68px;
  padding: 24px 30px 0;
  position: relative;
  width: 100%;
}
#top header {
  color: #fff;
}
  /* NAVIGATION ------------------------ */
  nav {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    position: absolute;
    right: 40px;
    top: 31px;
  }

    /* GLOBAL NAVIGATION ------------------------ */
    #gnav {}
      #gnav li {
        display: inline-block;
      }
        #gnav a {
          display: block;
          font-size: 15px;
          font-weight: 500;
          height: 37px;
          letter-spacing: 0;
          line-height: 37px;
          margin: 0 23px;
          position: relative;
        }
        #gnav a:not([href^="mailto"])::after {
          background: #000;
          content: "";
          display: block;
          height: 2px;
          left: 0;
          position: absolute;
          bottom: 4px;
          width: 0%;
          -webkit-transition: all 0.3s;
          -moz-transition: all 0.3s;
          -ms-transition: all 0.3s;
          -o-transition: all 0.3s;
          transition: all 0.3s;
        }
        #gnav a:not([href^="mailto"]):hover::after {
          width: 100%;
        }
        #gnav a:not([href])::after {
          width: 100%;
        }
        #top #gnav a::after {
          background: #fff;
        }

        /* btn - contact */
        #gnav li:last-child a {
          background: #1a1a1a;
          border: 1px solid #000;
          border-radius: 37px;
          color: #fff;
          padding: 0 42px;
        }
        #gnav li:last-child a::after {
          display: none;
        }

        #gnav li:last-child a[href] {
          background: #fff;
          border: 1px solid #000;
          border-radius: 37px;
          color: #1a1a1a;
          padding: 0 42px;
        }
        #gnav li:last-child a[href]:hover {
          background: #1a1a1a;
          color: #fff;
        }

        #top #gnav li:last-child a[href] {
          background: none;
          border-color: #000;
          color: #fff;
        }
        #top #gnav li:last-child a[href] {
          border: 1px solid #fff;
        }
        #top #gnav li:last-child a[href]:hover {
          background: #fff;
          color: #1a1a1a;
        }


    /* SNS ICONS ------------------------ */
    #sns {
      display: flex;
      flex-flow: row wrap;
      font-size: 180%;
      justify-content: space-between;
      width: 90px;
    }
      #sns li {
        line-height: 38px;
      }
      .fa-twitter-square { color: #1DA1F2; }
      .fa-facebook { color: #3B5998; }
      .fa-vimeo { color: #1ab7ea }

      #top .fa-twitter-square,
      #top .fa-facebook,
      #top .fa-vimeo { color: #fff }


/* --------------------------------------
  HAMBURGER MENU
-------------------------------------- */
.hamburger {
  display: block;
}


/* --------------------------------------
  CONTENTS
-------------------------------------- */
#contents, .contents {
  margin: 40px auto;
  width: 1140px;
  max-width: 90%;
}
#top #contents {
  margin: 0;
  width: 100%;
  max-width: 100%;
}

  /* PANKUZU LIST ------------------------ */
  #pankuzu {
    width: 100%;
  }
    #pankuzu li {
      color: #8c8c8c;
      display: inline-block;
      font-size: 80%;
      letter-spacing: 0;
    }
    #pankuzu li:not(:first-child)::before {
      content: "/";
      margin: 0 20px;
    }
      #pankuzu a, #pankuzu a:visited {
        color: #1a1a1a;
      }
      #pankuzu a:hover {
        text-decoration: underline;
      }

/* --------------------------------------
  TOP
-------------------------------------- */
#top {
  background: #000;
  color: #fff;
}
#top a, #top a:visited, #top a:hover {
  color: #fff;
}
  #top #container {
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
  }

    /* LOGO ------------------------ */
    #logo {
      font-size: 140%;
      height: 240px;
      margin: 60px auto 0;
      position: relative;
      text-align: center;
      width: 640px;
    }
    #top #logo {
      left: 50%;
      margin: 0;
      position: absolute;
      top: 50%;
      transform: translate(-290px,-110px);
      -ms-transform: translate(-290px,-110px);
    }
      #logo p {
        margin: 0;
      }
      #logo p:nth-child(1) {
        padding-right: 10px;
      }
      #logo p:nth-child(2) {
        font-size: 160%;
        font-weight: 500;
        margin: 20px 0 6px;
      }
        #logo p:nth-child(3) {
          font-size: 70%;
          font-weight: 500;
          letter-spacing: 3px;
        }

    #top #message {
      left: 50%;
      margin-left: -600px;
      position: absolute;
      bottom: 10%;
      width: 1200px;
    }
      #top #message p {
        border: 2px solid #fff;
        box-sizing: border-box;
        font-size: 150%;
        padding: 8px 30px;
        text-align: center;
      }
        .br-1200 {
          display: none;
        }

@media screen and (max-width: 1600px) {
      #top #logo {
        transform: translate(-320px,-90px);
        width: 300;
      }
        #logo p:nth-child(1) {
          padding-right: 10px;
          margin-bottom: 25px;
        }
        #logo p:nth-child(2) {
          font-size: 130%;
          font-weight: 500;
          margin: 14px 0 11px;
        }
        #logo p:nth-child(3) {
          font-size: 60%;
          font-weight: 500;
        }
          #top #logo .logo img {
            width: 130px;
          }

}

@media screen and (max-width: 1300px) {
      #top #message {
        /*bottom: 70px;*/
        left: 0;
        margin-left: 0;
        width: 100%;
      }
        #top #message p {
          border: 2px solid #fff;
          font-size: 130%;
          margin: 0 auto;
          padding: 8px 30px;
          text-align: center;
          width: 80%;
        }
          .br-1200 {
            display: block;
          }
}

@media screen and (max-width: 480px) {
      #top #message {
        /*bottom: 60px;*/
      }
          .br-1200 {
            display: none;
          }
}
  /* --------------------------------------
    VIDEO - TOP
  -------------------------------------- */
  #top #video {
    background: #000;
  }
  #top #video.opacity-1 {
    opacity: 1;
  } 
  #top #video #vimeo{
    position: fixed;
    z-index: -1;
    top:50%;
    left: 50%;
    transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
  }

  /* half tone */
  #tone {
    background: url(../img/tone.png) 0 0 repeat;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 10;
  }
  
  #black {
    background: #000;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
  }
  #black.remove {
    opacity: 0;
  }

/* --------------------------------------
  ABOUT
-------------------------------------- */
#about {}
  #about #contents {}

    #about #video {
      margin: 0 auto;
      width: 1000px;
    }

    #about .message {
      position: relative;
    }
    #about .concept {
      background: #fff;
      margin: 10px -500% 0;
      padding: 50px 500%;
      text-align: center;
      width: 100%;
      font-size: 120%;
      font-weight: 100;
    }
      #about .concept p {
        font-size: 120%;
        letter-spacing: 0.1em;
        line-height: 2.2em;
      }



    /* #client ------------------------ */
    #about #client {
      border: 1px solid #252525;
      margin: 80px 0;
      position: relative;
      width: 100%;      
    }
      #about #client h2 {
        background: #252525;
        color: #fff;
        font-size: 130%;
        font-weight: 400;
        margin: 0;
        padding: 5px 0;
        text-align: center;
        width: 100%;
      }
      #about #client ul {
        align-items: center;
        display: flex;
        flex-flow: row wrap;
        justify-content: flex-start;
        line-height: 1.5em;
        margin: 30px auto 30px;
        text-align: left;
        width: 90%;
      }
        #about #client li {
          box-sizing: border-box;
          padding: 3px 0 3px 40px;
          width: 50%;
        }
        #about #client li:nth-child(even) {
          padding-left: 90px;
        }

    #about #client::after {
      bottom: 10px;
      content: "（※順不同）";
      display: inline-block;
      position: absolute;
      right: 10px;
    }

    /* #company ------------------------ */
    #about #company {
      padding: 70px 0 30px;
    }
      #about #company h2 {
        border-bottom: 1px solid #252525;
        font-size: 260%;
        font-weight: 700;
        padding-bottom: 5px;
        position: relative;
      }
      #about #company h2::after {
        bottom: 18px;
        content: "会社概要";
        display: inline-block;
        font-size: 30%;
        font-weight: 400;
        letter-spacing: 2px;
        position: absolute;
        right: 10px;
      }
      #about #company dl {
        display: flex;
        flex-flow: row wrap;
        line-height: 1.5em;
        margin: 60px auto 40px;
        width: 100%;
      }
        #about #company dl > * {
          margin: 7px 0;
        }
        #about #company dt {
          box-sizing: border-box;
          font-weight: 700;
          padding-right: 70px;
          text-align: right;
          width: 25%;
        }
        #about #company dd {
          width: 75%;
        }
          #about #company #map {
            display: flex;
            flex-flow: row wrap;
            justify-content: flex-end;
          }
            #map_canvas {
              background: #dedede;
              /*height: 387px;*/
              height: 387px;
              margin: 30px 0;
              width: 100%;
            }
            #about #company #map .gotogmap {
              border: 1px solid #000;
              display: inline-block;
              font-size: 80%;
              font-weight: 400;
              height: 42px;
              line-height: 42px;
              position: relative;
              text-align: center;
              text-indent: 1.2em;
              width: 195px;
            }
            #about #company #map .gotogmap::before {
              border-top: 1px solid #000;
              border-right: 1px solid #000;
              content: "";
              display: block;
              height: 4px;
              left: 30px;
              position: absolute;
              top: 19px;
              transform: rotate(45deg);
              width: 4px;
            }

/* --------------------------------------
  STRONG POINT
-------------------------------------- */
#strongpoint {}
  #strongpoint #contents {}
    #strongpoint .top {
      background: url(../img/LOGO1p.svg) no-repeat center center;
      background-size: 184px 116px;
      margin-top: 20px;
      padding: 70px 0 80px;
      text-align: center;
    }
      #strongpoint h2 {
        font-size: 320%;
        font-weight: 700;
        text-align: center;
      }
      #strongpoint .top p {
        font-size: 160%;
        font-weight: 400;
        margin-top: 230px;
      }

    #strongpoint #main {}
      #strongpoint .point {
        align-items: center;
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
        margin: 30px 0;
      }
      #strongpoint #main .point:nth-child(odd) {
      }
      #strongpoint #main .point:nth-child(even) {
        flex-direction: row-reverse;
      }
        #strongpoint #main .point .img,
        #strongpoint #main .point .video {
          width: 43%;
        }
        #strongpoint #main .point .img img { max-width: 100%;}
        #strongpoint #main .point dl {
          box-sizing: border-box;
          width: 57%;
        }
      #strongpoint #main .point:nth-child(odd) dl { padding-left: 44px;}
      #strongpoint #main .point:nth-child(even) dl { padding-right: 44px;}
          #strongpoint #main .point dt {
            border-bottom: 1px solid #000;
            font-size: 180%;
            font-weight: 500;
            padding: 0 3px 10px;
          }
          #strongpoint #main .point dd {
            padding: 15px 3px;
          }



/* --------------------------------------
  WORKS
-------------------------------------- */
#works {}
  #works #contents {}
    #works h2 {
      font-size: 320%;
      font-weight: 700;
      padding: 50px 0;
      text-align: center;
    }
      #works h2 small {
        display: block;
        font-size: 30%;
        font-weight: 400;
        letter-spacing: .2em;
        margin-top: 5px;
      }


    #works .works {
      width: 100%;
      max-width: 1140px;
      margin: 40px auto 0;
    }
      #works .works li {
        background: #dedede;
        display: none;
        margin: 4px 0 0;
        opacity: 0;
        overflow: hidden;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
      }
      body.category-all #works .works .item-all,
      body.category-impact #works .works .item-impact,
      body.category-real #works .works .item-real,
      body.category-kawaii #works .works .item-kawaii,
      body.category-funny #works .works .item-funny {
        display: block;
        -webkit-animation: show .5s linear 0s forwards;
                animation: show .5s linear 0s forwards;
      }
        #works .works a {
          display: block;
          line-height: 0;
          overflow: hidden;
          position:relative;
          /*height: 260px;*/
          width: 373px;
        }
        #works .works a::after {
          background: none;
          content: "";
          display: block;
          height: 100%;
          left: 0;
          position: absolute;
          top: 0;
          width: 100%;
            -webkit-transition: all .4s ease;
            -moz-transition: all .4s ease;
            -ms-transition: all .4s ease;
            -o-transition: all .4s ease;
        }
          #works .works a img {
            width: 100%;
            transition: all .4s ease;
          }
          #works .works a:hover img {
            -webkit-transform: scale(1.05);
              transform: scale(1.05);
          }
          #works .works a:hover::after {
            background: rgba(0, 0, 0, .3);
          }

@-webkit-keyframes show {
  from {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  }
  to {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  }
}
@keyframes show {
  from {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  }
  to {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  }
}


/* --------------------------------------
  single - WORKS
-------------------------------------- */
#works #single {
  background:  #fff;
  box-sizing: border-box;
  height: 100%;
  overflow-y: scroll;
  orverflow: auto;
  padding: 50px 0 0 100px;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
  -webkit-overflow-scrolling: touch;
}
  #works #single #contents {
    opacity: 0;
    transition: all 1s ease;
    width: 90%;
    max-width: 1140px;
  }
  #works #single #contents.opacity-1 { opacity: 1;}

    #works #single h1 {
      background-image: url(../img/LOGO1p.svg);
      background-size: 107px 67px;
      background-repeat: no-repeat;
      background-position: left center;
      font-size: 380%;
      font-weight: 700;
      height: 67px;
      line-height: 72px;
      padding-left: 133px;
    }
      #works #single h1 small {
        font-size: 20%;
        margin-left: 18px;
        position: relative;
        top: -14px;
      }
    #works #single .video {
      height: 640px;
      margin: 5px auto 30px;
      opacity: 0;
      transition: all 1s ease;
      width: 100%;
    }
    #works #single .video.opacity-1 {
      opacity: 1;
    }
	#works #single .top-comment {
      font-size: 120%;
      line-height: 1.8em;
	}
   #works #single .inner {
      background: #fff;
      box-sizing: border-box;
      height: auto;
      margin: 90px auto 57px;
    }

      #works #single h2 {
        font-size: 240%;
        margin: 20px 0 10px;
        padding: 0;
        text-align: left;
      }
      #works #single .inner ul {
        align-items: center;
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
        list-style-type: none;
        margin: 15px 0 20px;
        padding: 0;
        width: 100%;
      }
      #works #single .inner ul.aline-top { align-items: flex-start;}

        #works #single .inner li {
          margin: 0;
          width: 100%;
        }
        #works #single .inner li.col-2 {
          width: 1140px;
          max-width: 49.8%;
        }
          #works #single .inner .video {
            width: 100%;
          }
          #works #single .inner p {
            font-size: 110%;
            line-height: 1.8em;
            margin: 0;
          }
          #works #single .inner p.txt {
            font-size: 110%;
            line-height: 1.8em;
            padding: 20px;
          }
          #works #single .inner p.medical {
            font-size: 140%;
            line-height: 1.8em;
            padding: 20px 100px;
          }
          #works #single .inner p.right {
			text-align: right;
          }
          #works #single .inner img {
            width: 100%;
          }
		  #works #single .inner li.item1 {order: 1;}
		  #works #single .inner li.item2 {order: 2;}
		  #works #single .inner li.item3 {order: 4;}
		  #works #single .inner li.item4 {order: 3;}
		  #works #single .inner li.item5 {order: 5;}
		  #works #single .inner li.item6 {order: 6;}
		  #works #single .inner li.item7 {order: 8;}
		  #works #single .inner li.item8 {order: 7;}


  #works #single footer {
    padding: 0;
  }




#works #back {
  background: url(../img/works/back_bg.png) repeat 0 0;
  height: 100%;
  position: fixed;
  top: 0;
  transition: left .1s ease-out;
  left: -5px;
  width: 120px;
  z-index: 1001;
}
  #works #back a {
    display: inline-block;
    height: 100%;
    width: 100%;
  }
    #works #back a p {
      font-size: 240%;
      font-weight: 500;
      margin: 160px 0 0 -90px;
      transform: rotate(90deg);
      width: 300px;
    }
    #works #back a p::before {
      border-left: 4px solid #000;
      border-bottom: 4px solid #000;
      content: "";
      display: inline-block;
      height: 14px;
      margin-bottom: 5px;
      margin-right: 37px;
      transform: rotate(-45deg);
      width: 14px;
    }
    #works #back a p::after {
      content: "制作事例";
      display: inline-block;
      font-size: 20%;
      letter-spacing: .3em;
      margin-left: 20px;
      position: absolute;
      top: 16px;
    }

#works #back:hover {
  left: 0px;
}

    @keyframes fadeInRight {
      0%  { opacity: 1; transform: translate3d(100%, 0, 0); }
      /*90%{ opacity: 1; transform: translate3d(0, 0, 0); }*/
      100%{ opacity: 1; transform: translate3d(0, 0, 0); }
    }
    @keyframes fadeOutLeft {
      0%  { opacity: 1; transform: translate3d(0, 0, 0); }
      /*90%{ opacity: 1; transform: translate3d(100%, 0, 0); }*/
      100%{ opacity: 1; transform: translate3d(100%, 0, 0); }
    }
    @keyframes fadeIn {
      0%  { opacity: 0; transform: translate3d(0, 0, 0); }
      /*90%  { opacity: 1; transform: translate3d(0, 0, 0); }*/
      100%{ opacity: 1; transform: translate3d(0, 0, 0); }
    }

    @keyframes fadeInLeft {
      0%  { opacity: 0; transform: translate3d(-100%, 0, 0); }
      /*75%  { opacity: 1; transform: translate3d(-100%, 0, 0); }*/
      100%{ opacity: 1; transform: none; }
    }
    @keyframes fadeOutRight {
      0%  { opacity: 1; transform: none }
      /*75%  { opacity: 1; transform: none }*/
      100%{ opacity: 1; transform: translate3d(-100%, 0, 0); }
    }

    .pjax-element {
      animation-duration: 1.3s;
      transition-timing-function: ease-in;
      animation-fill-mode: both;
    }
    .pjax-element.outSideLeft { transform: translate3d(-100%, 0, 0);}
    .pjax-element.outSideRight { transform: translate3d(100%, 0, 0);}

    .pjax-element.pjax-element--fadeInRight { animation-name: fadeInRight; }
    .pjax-element.pjax-element--fadeOutRight { animation-name: fadeOutRight; }
    .pjax-element.pjax-element--fadeInLeft { animation-name: fadeInLeft; }
    .pjax-element.pjax-element--fadeOutLeft { animation-name: fadeOutLeft; }

    .element--fadeIn { animation-name: fadeIn; }


/* --------------------------------------
  Pjax Parent Contents
-------------------------------------- */
.scrollable {
  margin-right: -17px; /* オーバーレイスクロールバーを消す */
  padding-right: 17px; /* オーバーレイスクロールバーを消す */
  height: 300px;
  overflow: hidden;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}
.scrollable.is-scrollbar {
  padding-right: 0;
}



/* --------------------------------------
  CONTACT
-------------------------------------- */
#contact {
}
    #contact h2 {
      font-size: 320%;
      font-weight: 300;
      padding: 50px 0;
      text-align: center;
    }
      #contact h2 strong {
        font-weight: 700;
      }
      #contact h2 small {
        display: block;
        font-size: 30%;
        font-weight: 400;
        margin-top: 5px;
      }

    #contact #form {
      border: 1px solid #080707;
      padding: 60px 53px;
    }
      #contact #form #mailformpro {}
        #contact #mailformpro .txt p {
          font-size: 120%;
          margin: 5px 0;
          text-align: center;
        }
        #contact .mailform {
          margin-top: 50px;
        }
          #contact .mailform > * {
            background: none;
            border: none;
          }
          #contact .mailform dt {
            font-size: 100%;
            padding: 17px 0;
            width: 240px;
          }
          #contact .mailform dd {
            font-size: 100%;
            padding: 13px 5px 13px 270px;
          }
          #contact .mailform dt,
          #contact .mailform dd {
            background: #fff;
          }
          #contact .mailform dt:nth-of-type(2n),
          #contact .mailform dd:nth-of-type(2n) {
            background: #f5f5f5;
          }
            form#mailformpro label,
            form#mailformpro label.mfp_not_checked,
            form#mailformpro label.mfp_checked {
              background: none;
              border: none;
              box-shadow: none;
            }
            #contact .must {
              display: inline-block;
              background: none;
              border: none;
              font-weight: bold;
              text-shadow: none;
              padding: 2px 0px;
              font-size: 10px;
              color: #e51699;
              float: none;
              margin: 0px 2px;
              box-shadow: none;
            }
            .mfp_element_text, .mfp_element_number, .mfp_element_select-one, .mfp_element_email, .mfp_element_tel, .mfp_element_textarea, .mfp_element_date, .mfp_element_password {
              border: solid 1px #d3d3d3;
              border-radius: 3px;
              box-shadow: 0px 0px 5px #ededec inset;
              padding: 3px 8px;
              margin: 2px;
              vertical-align: middle;
            }
            input[type="radio"] {
              margin: 0;
            }
            div.mfp_err {
              background: none;
              color: #e51699;
              padding-left: 0;
              padding-top: 0;
            }
            .problem {
              background: #fff3fb;
            }

          div.mfp_buttons {
            padding-left: 270px;
            padding-top: 30px;
            text-align: left;
          }
            button.mfp_element_submit {
              background: #1a1a1a;
              border: 1px solid #1a1a1a;
              box-sizing: border-box;
              color: #fff;
              height: 68px;
              line-height: 68px;
              padding: 0;
              text-align: center;
              text-shadow: none;
              width: 295px;
            }
            button.mfp_element_submit:hover {
              background: #000;
              box-shadow: none;
            }

    /* --------------------------------------
      確認画面 - CONTACT
    -------------------------------------- */
    #mfp_phase_confirm {
    }
      div#mfp_phase_confirm h4 {
        font-size: 120%;
        margin-bottom: 50px;
      }
      #mfp_confirm_table {}
        #mfp_confirm_table tr {
        }
        .mfp_colored {
          background: #f5f5f5;
        }
          table#mfp_confirm_table tr th {
            border: none;
            font-size: 100%;
            padding: 17px 0;
            text-align: right;
            vertical-align: top;
            width: 240px;
          }
          table#mfp_confirm_table tr td {
            border: none;
            font-size: 100%;
            padding: 13px 5px 13px 30px;
          }
      /* 送信ボタン */
      #mfp_button_send {
        background: #1a1a1a;
        border: 1px solid #1a1a1a;
        box-sizing: border-box;
        color: #fff;
        height: 68px;
        line-height: 68px;
        padding: 0;
        text-align: center;
        text-shadow: none;
        width: 295px;        
      }
      #mfp_button_send:hover {
        background: #000;
        box-shadow: none;
      }
      /* 戻るボタン */
      #mfp_button_cancel {
        background: #fff;
        border: 1px solid #1a1a1a;
        box-sizing: border-box;
        color: #1a1a1a;
        height: 68px;
        line-height: 68px;
        margin-left: 30px;
        padding: 0;
        text-align: center;
        text-shadow: none;
        width: 193px;        
      }

    /* --------------------------------------
      送信完了画面 - CONTACT
    -------------------------------------- */
    #thanks {
      text-align: center;
    }
      #thanks h3 {
        background: url(../img/contact/send.png) center top no-repeat;
        font-size: 400%;
        margin: 90px 0 10px;
        padding-top: 240px;
      }
        #thanks h3 strong {
          font-weight: 700;
        }
      #thanks .back {
        border: 1px solid #000;
        display: inline-block;
        font-size: 100%;
        font-weight: 500;
        height: 58px;
        line-height: 58px;
        margin-top: 150px;
        position: relative;
        text-align: center;
        text-indent: 1.2em;
        width: 404px;
      }
      #thanks .back::before {
        border-top: 1px solid #000;
        border-right: 1px solid #000;
        content: "";
        display: block;
        height: 5px;
        left: 160px;
        position: absolute;
        top: 26px;
        transform: rotate(-135deg);
        width: 5px;
      }

/* --------------------------------------
  FOOTER
-------------------------------------- */
footer {
  padding: 60px 0;
}
  #copy {
    font-size: 80%;
    font-weight: 400;
    text-align: center;
  }

/* --------------------------------------
  LOADING
-------------------------------------- */
#loading {
  background: #fff;
  display: none;
  height: 100%;
  left: 0;
  opacity: 0;
  position: fixed;
  text-align: center;
  top: 0;
  width: 100%;
}

/* ****************************************************************
  Smart Phone
**************************************************************** */
#sp, .sp,
.hamburger {
  display: none;
}

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

body {
  letter-spacing: 0;
}

/* --------------------------------------
  HEADER [sp]
-------------------------------------- */
header {
  background: #fff;
  box-shadow: 0 0 20px 5px rgba(204, 204, 204, .5);
  box-sizing: border-box;
  color: #1a1a1a;
  height: 50px;
  padding: 11px 8px 0;
  position: fixed;
  width: 100%;
  z-index: 1500;
}
#top header {
  color: #1a1a1a;
}

  /* NAVIGATION ------------------------ */
  nav {
    background-color: #fff;
    display: none;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    height: 100%;
    opacity: 0;
    position: fixed;
    right: 0px;
    top: 0px;
    transition: all .3s ease;
    width: 100%;
  }
  nav.show {
    display: flex;
  }
    #gnav {
      background-image: url(../img/LOGO1p.svg);
      background-position: center top;
      background-repeat: no-repeat;
      background-size: 116px 73px;
      box-sizing: border-box;
      display: flex;
      flex-flow: column nowrap;
      justify-content: flex-end;
      height: 70%;
      position: relative;
      max-height: 420px;
    }
    #gnav::before {
      background-image: url(../img/LOGO4b.svg);
      background-position: center top;
      background-repeat: no-repeat;
      background-size: 117px 21px;
      display: block;
      content: "";
      height: 21px;
      left: 50%;
      margin-left: -57px;
      position: absolute;
      top: 86px;
      width: 117px;
    }
      #gnav li {
        line-height: 1em;
        padding: 15px 0;
        display: block;
      }
        #gnav a {
          color: #1a1a1a;
          display: block;
          font-size: 180%;
          font-weight: 500;
          height: 37px;
          letter-spacing: 0;
          line-height: 37px;
          margin: 0 23px;
          position: relative;
          text-align: center;
        }
        #top #gnav a { color: #1a1a1a }

        #gnav a::after,
        #gnav a:not([href^="mailto"])::after {
          background: none;
          content: attr(data-caption);
          color: #1a1a1a;
          display: block;
          font-size: 30%;
          height: 17px;
          left: auto;
          line-height: 17px;
          position: relative;
          bottom: auto;
          width: 100%;
          transition: none;
        }
        #gnav a:not([href^="mailto"]):hover::after,
        #gnav a:not([href])::after { width: 100%;}
        #top #gnav a::after { background: #fff;}

        /* btn - contact */
        #gnav li:last-child a,
        #gnav li:last-child a[href] {
          background: none;
          border: none;
          border-radius: none;
          color: #1a1a1a;
          padding: 0;
        }
        #gnav li:last-child a::after {
          display: block;
        }
        #gnav li:last-child a[href]:hover,
        #top #gnav li:last-child a[href],
        #top #gnav li:last-child a[href]:hover {
          background: none;
          color: #1a1a1a;
        }

    /* SNS ICONS ------------------------ */
    #sns {
      font-size: 220%;
      margin-top: 5%;
      width: 120px;
    }
      #top .fa-twitter-square { color: #1DA1F2; }
      #top .fa-facebook { color: #3B5998; }
      #top .fa-vimeo { color: #1ab7ea }


/* --------------------------------------
  HAMBURGER MENU
-------------------------------------- */
.hamburger {
  display: block;
  outline: none;
  position: fixed;
  right: 0px;
  top: 0px;
  /*transform: translate3d(0, 0, 0);*/
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  height: 50px;
  padding: 0;
  width: 50px;
  z-index: 1800;
}
.hamburger:hover {
  opacity: 1;
  outline: none;
}

.hamburger:focus {
  outline: none;
}
/* --------------------------------------
  CONTENTS
-------------------------------------- */
#contents, .contents {
  margin: 100px auto 0px;
  max-width: 92%;
}

  /* PANKUZU LIST ------------------------ */
  #pankuzu { display: none;}

/* --------------------------------------
  TOP
-------------------------------------- */
#top {
  background: #000;
  color: #fff;
}

    /* LOGO ------------------------ */
    #logo {
      font-size: 140%;
      height: 240px;
      margin: 60px auto 0;
      position: relative;
      text-align: center;
      width: 400px;
      z-index: 500;
    }
    #top #logo {
      left: 50%;
      margin: 0;
      position: absolute;
      top: 50%;
      transform: translate(-200px,-70px);
    }
      #top #logo p:nth-child(1) {
        margin-bottom: 0px;
      }
        #top #logo p:nth-child(1) img {
          width: 40%;
        }
          #logo p:nth-child(2) {
            font-size: 130%;
            font-weight: 500;
            margin: 8px 0 5px;
          }
          #logo p:nth-child(3) {
            font-size: 80%;
          }

  #top-slide {
    position: fixed;
    height: 100%;
    width: 100%;
  }
    #top-slide img {
      width: 100%;
    }


/* --------------------------------------
  ABOUT
-------------------------------------- */
    #about #contents #logo {
      font-size: 100%;
      height: 200px;
      width: auto;
    }
      #about #contents #logo img {
        width: 40%;
      }
      #about #logo p:nth-child(2) {

      }

    #about #video {
      width: 100%;
    }
    #about .concept {
      font-size: 100%;
      font-weight: 300;
      margin-top: 0;
      padding: 10px 500%;
      text-align: left;
      width: 100%;
    }
      #about .concept p {
        font-size: 100%;
        letter-spacing: 0.1em;
        line-height: 1.6em;
      }


    /* #client ------------------------ */
    #about #client {
      margin: 15px 0;
    }
      #about #client h2 {
        font-size: 100%;
        padding: 3px 0;
      }
      #about #client ul {
        display: block;
        margin: 15px auto 35px;
        text-align: left;
      }
        #about #client li {
          padding: 3px 10px;
          width: 100%;
        }
        #about #client li:nth-child(even) { padding-left: 10px;}

    #about #client::after {
      font-size: 80%;
    }

    /* #company ------------------------ */
    #about #company {
      margin-top: 60px;
      padding: 0;
    }
      #about #company h2 {
        border-bottom: none;
        font-size: 260%;
        font-weight: 700;
        padding-bottom: 5px;
        text-align: center;
      }
      #about #company h2::after {
        bottom: 0px;
        content: "会社概要";
        display: block;
        font-size: 30%;
        position: relative;
        right: auto;
      }
      #about #company dl {
        display: block;
        line-height: 1.5em;
        margin: 10px auto 0px;
      }
        #about #company dl > * {
          margin: 0;
          padding: 5px 0;
        }
        #about #company dt {
          font-weight: 500;
          margin-top: 5px;
          text-align: left;
          width: 100%;
        }
        #about #company dd {
          border-top: 1px solid #bdbdbd;
          padding: 5px 0;
          width: 100%;
        }
        #about #company dd:last-child { border: none;}
          #about #company #map {
            display: block;
          }
            #map_canvas {
              height: 156px;
              margin: 0;
              width: 100%;
            }
            #about #company #map .gotogmap {
              height: 54px;
              line-height: 54px;
              margin-top: 20px;
              width: 100%;
            }
            #about #company #map .gotogmap::before {
              left: 50%;
              margin-left: -70px;
              position: absolute;
              top: 24px;
            }


/* --------------------------------------
  STRONG POINT
-------------------------------------- */
#strongpoint {}
  #strongpoint #contents { max-width: 100%; }
    #strongpoint .top {
      background: url(../img/LOGO1p.svg) no-repeat center center;
      background-size: 100px 63px;
      background-position: center 40%;
      margin: 20px auto 0;
      padding: 0 0 10px;
      text-align: center;
      width: 90%;
    }
      #strongpoint h2 {
        font-size: 200%;
        font-weight: 700;
        text-align: center;
      }
      #strongpoint .top p {
        font-size: 130%;
        font-weight: 400;
        margin-top: 100px;
      }

    #strongpoint #main {}
      #strongpoint .point {
        display: block;
        margin: 30px 0;
      }
        #strongpoint #main .point .img,
        #strongpoint #main .point .video {
          width: 100%;
        }
        #strongpoint #main .point dl {
          margin: 0 auto;
          width: 90%;
        }
      #strongpoint #main .point:nth-child(odd) dl,
      #strongpoint #main .point:nth-child(even) dl { padding: 0;}
          #strongpoint #main .point dt {
            border-bottom: none;
            font-size: 140%;
            font-weight: 500;
            padding: 18px 0 0;
          }
          #strongpoint #main .point dd {
            padding: 5px 0 8px;
          }


/* --------------------------------------
  WORKS
-------------------------------------- */
#works {}
  #works #contents {}
    #works h2 {
      font-size: 280%;
      font-weight: 500;
      padding: 0px 0;
    }
      #works h2 small {
        margin-top: 0;
      }

    #works .works {
      width: 100%;
      max-width: 1140px;
      margin: 40px auto 0;
    }
      #works .works li {
        height: 140px;
        width: 100%;
      }
        #works .works a {
          width: 100%;
        }
          #works .works a img {
            margin-top: -50%;
            transition: none;
          }


/* --------------------------------------
  single - WORKS
-------------------------------------- */
#works #single {
  background:  #fff;
  padding: 0 0 0 0;
  position: fixed;
  z-index: 2000;
}
  #works #single #contents {
    width: 100%;
    max-width: 94%;
    margin-top: 30px;
  }

    #works #single h1 {
      background-size: 52px 33px;
      background-position: center top;
      font-size: 270%;
      font-weight: 500;
      height: auto;
      line-height: 1.1em;
      margin: 0;
      padding: 60px 0 0;
      position: relative;
      text-align: center;
    }
      #works #single h1 small {
        display: block;
        font-size: 30%;
        margin-left: 0;
        position: absolute;
        text-align: center;
        top: 90px;
        width: 100%;
      }
    #works #single .video {
      margin: 50px auto 20px;
    }
    #works #single .video.opacity-1 {
      opacity: 1;
    }
    #works #single .top-comment {
      font-size: 110%;
      line-height: 1.8em;
    }
    #works #single .inner {
      background: #fff;
      box-sizing: border-box;
      height: auto;
      margin: 50px auto 0px;
    }

      #works #single h2 {
        font-size: 200%;
        margin: 20px 0 10px;
        padding: 0;
        text-align: left;
      }
      #works #single .inner ul {
        margin-top: 15px;
		display: block;
		width: 100%;
      }

        #works #single .inner li {
          margin: 0 0 2px;
          max-width: 100% !important;
        }
        #works #single .inner li.col-2 {
          width: 100% !important;
          max-width: 100% !important;
        }
          #works #single .inner .video {
            margin: 0 auto;
            width: 100%;
          }
          #works #single .inner p {
            font-size: 110%;
            line-height: 1.8em;
            margin: 0;
          }
          #works #single .inner p.txt {
            font-size: 110%;
            line-height: 1.8em;
            padding: 0px;
          }
          #works #single .inner p.medical {
            font-size: 110%;
            line-height: 1.8em;
            padding: 0px;
          }
          #works #single .inner p.right {
			text-align: left;
		  }
          #works #single .inner img {
            width: 100%;
          }

  #works #single footer {
    padding: 30px 0;
  }


#works #back {
  background: none;
  height: 100px;
  width: 100px;
  z-index: 2001;
}
    #works #back a p {
      font-size: 0%;
      margin: 35px 0 0 20px;
      width: 30px;
    }
    #works #back a p::after {
      display: none;
    }

#works #back:hover {
  left: 0px;
}


    .pjax-element {
      animation-duration: .6s;
    }

/* --------------------------------------
  Pjax Parent Contents
-------------------------------------- */
.scrollable {
  margin-right: 0; /* オーバーレイスクロールバーを消す */
  padding-right: 0; /* オーバーレイスクロールバーを消す */
  height: 100%;
  overflow: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.scrollable.is-scrollbar {
  padding-right: 0;
}


/* --------------------------------------
  CONTACT
-------------------------------------- */
    #contact h2 {
      font-size: 280%;
      padding: 0;
    }
      #contact h2 strong {
        font-weight: 500;
      }
      #contact h2 small {
        margin-top: 0;
      }


    #contact #form {
      border: none;
      padding: 30px 0 0;
    }

      #contact #form #mailformpro {}
        #contact #mailformpro .txt {
          border: 1px solid #080707;
          box-sizing: border-box;
          padding: 12px;
          width: 100%;
        } 
          #contact #mailformpro .txt p {
            font-size: 90%;
            margin: 5px 0;
            text-align: center;
          }

        #contact .mailform {
          margin: 20px auto 0;
          width: 96%;
        }
          #contact .mailform > * {
            background: none;
            border: none;
          }
          #contact .mailform dt {
            font-size: 100%;
            padding: 10px 0 0;
            width: 100%;
          }
          #contact .mailform dd {
            font-size: 16px;
            padding: 3px 0;
          }
          #contact .mailform dt,
          #contact .mailform dd {
            background: none;
          }
          #contact .mailform dt:nth-of-type(2n),
          #contact .mailform dd:nth-of-type(2n) {
            background: none;
          }
            form#mailformpro label,
            form#mailformpro label.mfp_not_checked,
            form#mailformpro label.mfp_checked {
              background: none;
              border: none;
              box-shadow: none;
            }
            #contact .must {
              display: inline-block;
              background: none;
              border: none;
              font-weight: bold;
              text-shadow: none;
              padding: 2px 0px;
              font-size: 10px;
              color: #e51699;
              float: none;
              margin: 0px 2px;
              box-shadow: none;
            }
            .mfp_element_text, .mfp_element_number, .mfp_element_select-one, .mfp_element_email, .mfp_element_tel, .mfp_element_textarea, .mfp_element_date, .mfp_element_password {
              background: #f7f7f7;
              padding: 12px 12px 10px;
              line-height: 1.6em;
              margin: 2px;
            }
            .mfp_element_all {
              box-sizing: border-box;
              max-width: 100%;
            }

          div.mfp_buttons {
            padding: 30px 0 0;
            text-align: center;
          }
            div.mfp_buttons button {
              font-size: 130%;
          }
            button.mfp_element_submit {
              margin: 0 auto;
              width: 96%;
            }

    /* --------------------------------------
      確認画面 - CONTACT
    -------------------------------------- */
    #mfp_phase_confirm {
    }
      div#mfp_phase_confirm h4 {
        border: 1px solid #080707;
        box-sizing: border-box;
        font-size: 90%;
        margin-bottom: 16px;
        padding: 12px;
        width: 100%;
      }
      #mfp_confirm_table {
        margin: 0 auto;
        width: 94%;
      }
      table#mfp_confirm_table,
      #mfp_confirm_table tbody,
      #mfp_confirm_table tr,
      #mfp_confirm_table th,
      #mfp_confirm_table td {
        display: block;
      }
        #mfp_confirm_table tr {
        }
        table#mfp_confirm_table tr.mfp_colored {
          background: none;
        }
          table#mfp_confirm_table tr th {
            border: none;
            font-size: 100%;
            font-weight: 500;
            padding: 27px 0 3px;
            text-align: left;
            width: 100%;
          }
          table#mfp_confirm_table tr td {
            border: none;
            font-size: 100%;
            padding: 0;
          }
      /* 送信ボタン */
      #mfp_button_send {
        background: #1a1a1a;
        border: 1px solid #1a1a1a;
        box-sizing: border-box;
        color: #fff;
        height: 58px;
        line-height: 58px;
        padding: 0;
        text-align: center;
        text-shadow: none;
        width: 100%;        
      }
      #mfp_button_send:hover {
        background: #000;
        box-shadow: none;
      }
      /* 戻るボタン */
      #mfp_button_cancel {
        background: #fff;
        border: 1px solid #1a1a1a;
        box-sizing: border-box;
        color: #1a1a1a;
        height: 58px;
        line-height: 58px;
        margin-left: 0;
        margin-top: -2px;
        padding: 0;
        text-align: center;
        text-shadow: none;
        width: 100%;        
      }

    /* --------------------------------------
      送信完了画面 - CONTACT
    -------------------------------------- */
      #thanks h3 {
        background-size: 36%;
        box-sizing: border-box;
        font-size: 270%;
        margin: 60px auto 0px;
        padding-top: 160px;
        width: 100%;
      }
        #thanks p {
          font-size: 80%;
        }
      #thanks .back {
        margin-top: 70px;
        width: 94%;
      }
      #thanks .back::before {
        left: 50%;
        margin-left: -40px;
      }

/* --------------------------------------
  FOOTER
-------------------------------------- */
footer {
  padding: 30px 0;
}
  #copy {
    font-size: 70%;
  }


}

/* ****************************************************************
  Smart Phone width-360px
**************************************************************** */
@media screen and (max-width: 360px) {

body {
  font-size: 80%;
}
/* --------------------------------------
  HEADER [sp]
-------------------------------------- */

  /* NAVIGATION ------------------------ */
    #gnav {
      background-size: 92px 58px;
      box-sizing: border-box;
      display: flex;
      flex-flow: column nowrap;
      justify-content: flex-end;
      height: 73%;
      position: relative;
      max-height: 380px;
    }
    #gnav::before {
      background-size: 93px 17px;
      display: block;
      content: "";
      height: 21px;
      left: 50%;
      margin-left: -57px;
      position: absolute;
      top: 75px;
      width: 117px;
    }
      #gnav li { padding: 7% 0;}
        #gnav a {
          height: 30px;
          line-height: 30px;
        }


/* --------------------------------------
  TOP
-------------------------------------- */
    /* LOGO ------------------------ */
    #logo {
    }
    #top #logo {
      transform: translate(-200px,-60px);
    }
      #top #logo p:nth-child(1) {
        margin-bottom: 0px;
      }
        #top #logo p:nth-child(1) img {
          width: 40%;
        }
          #logo p:nth-child(2) {
            font-size: 130%;
            font-weight: 500;
            margin: 10px 0 2px;
          }
          #logo p:nth-child(3) {
            font-size: 90%;
          }

/* --------------------------------------
  STRONG POINT
-------------------------------------- */
#strongpoint {}
    #strongpoint .top {
      background-size: 84px 53px;
    }
      #strongpoint h2 {
        font-size: 200%;
      }
      #strongpoint .top p {
        font-size: 120%;
      }

}