/* Hides from IE Mac \ */
/* End Hack */
.left {
  width: 400px;
  float: left; }

.right {
  width: 580px;
  float: left; }

section:after {
  display: block;
  content: "";
  clear: both; }

section {
  width: 980px;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 140px;
  position: relative;
  left: 0px;
  top: 0px;
  z-index: 1; }
  section h2 {
    font-size: 1.3em;
    font-weight: normal; }
    section h2 svg, section h2 .svg, section h2 > img {
      width: 215px;
      height: 39px;
      margin-bottom: 20px; }
  section .detail {
    width: 300px; }
  section ul.list {
    width: 300px;
    float: left; }
    section ul.list li {
      margin-bottom: 50px; }
      section ul.list li .name {
        margin-bottom: 8px;
        letter-spacing: 0.1em;
        font-size: 1em;
        font-weight: bold;
		line-height: 1.2em;
        filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
        opacity: 0; }
      section ul.list li .exp {
        width: 265px;
        margin-bottom: 15px;
        font-size: 0.8em;
        line-height: 1.5em;
        filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
        opacity: 0; }
        section ul.list li .exp span.pc {
          height: 0px; }
      section ul.list li .more {
        width: 63px;
        height: 12px;
        margin-left: -100px;
        overflow: hidden;
        cursor: pointer;
        filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
        opacity: 0; }
        section ul.list li .more img {
          width: 126px;
          height: 12px;
          vertical-align: top; }
        section ul.list li .more:hover img {
          margin-left: -63px; }
  section .img {
    width: 280px;
    float: right; }
  .ie8 section ul.list li .name, .ie8 section ul.list li .exp, .ie8 section ul.list li .more {
    filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
    opacity: 1; }

svg, .svg {
  fill: none;
  stroke: #88ce02;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round; }

.detail {
  margin-top: 20px;
  margin-bottom: 35px;
  font-size: 0.875em;
  line-height: 20px;
  letter-spacing: 0.04em; }

#movie-window {
  display: none;
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0px;
  top: 0px;
  z-index: 2;
  background-color: rgba(0, 0, 0, 0.8);
  cursor: pointer; }
  #movie-window .movie {
    margin-left: -320px;
    margin-top: -180px;
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 0; }

#contents {
  padding-top: 75px;/*0426*/
  overflow-x: hidden;
  overflow-y: hidden;
  position: relative;
  left: 0px;
  top: 0px;
  z-index: 1; }

#bg {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0px;
  top: 0px;
  z-index: 0;
  background-image: url(/assets/images/common/bg.png);
  background-size: cover; }
  #bg img.bgimg {
    display: none !important; }

.ie8 #bg img.bgimg {
  display: block !important; }

#menu {
  height: 620px; }
  #menu .left {
    width: 716px; }
  #menu .right {
    width: 264px;
    margin-top: 147px; }
  #menu h2 svg, #menu h2 .svg, #menu h2 img {
    width: 274px;
    height: 44px; }
  #menu h2 p {
    width: 100px;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0; }
  #menu .detail {
    width: auto;
    margin-top: 45px;
    margin-bottom: 90px;
    margin-left: 48px;
    position: relative; }
    #menu .detail svg, #menu .detail .svg, #menu .detail img {
      width: 54px;
      height: 76px;
      float: left; }
    #menu .detail p {
      filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
      opacity: 0; }
    #menu .detail .p1 {
      margin-top: 48px;
      margin-left: 5px;
      font-style: italic;
      font-size: 1.4em;
      float: left; }
    #menu .detail .p2 {
      position: absolute;
      left: 208px;
      top: 18px;
      font-size: 1.3em;
      clear: both; }
    #menu .detail .p3 {
      position: absolute;
      left: 232px;
      top: 44px;
      font-size: 1.75em;
      line-height: 1em; }
#menu .movie-team {
    position: absolute;
    left: 0px;
    top: 266px;
    z-index: 10;}

.smartvision_video{
    width: 400px;
    height: 227px;
    border: 2px solid #fff;
    box-sizing: border-box;
}
#smartvision_control_container_vtagid_4ce1b0da{
    width: 400px !important;
    height: 227px !important;
}
#smartvision_control_container_vtagid_4ce1b0da .smartvision_slider_container{
    width: 180px !important;
}
/*　2018/08/22修正
  #menu .movie-thumb {
    width: 300px;
    height: 169px;
    position: absolute;
    left: 40px;
    top: 266px;
    z-index: 10;
    background-color: black;
    cursor: pointer;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0; }
*/


  #menu nav > .name {
    margin-bottom: 24px;
    position: relative; }
    #menu nav > .name svg, #menu nav > .name .svg, #menu nav > .name img {
      position: relative;
      z-index: 0; }
    #menu nav > .name p {
      position: absolute;
      left: 20px;
      top: 6px;
      z-index: 1;
      font-size: 1.2em;
      font-style: italic;
      filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
      opacity: 0; }
  #menu nav li {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    clear: both; }
    #menu nav li svg, #menu nav li .svg, #menu nav li img {
      width: 30px;
      height: 30px;
      float: left; }
    #menu nav li .service-name {
      margin-left: 10px;
      margin-top: -5px;
      margin-bottom: 40px;
      float: left; }
      #menu nav li .service-name .name {
        width: 270px;
        margin-bottom: 8px;
        font-size: 1.1em;
        font-weight: bold; }
      #menu nav li .service-name .name::first-letter {
        color: #d9ff57; }
      #menu nav li .service-name .name:first-letter {
        color: #d9ff57; }
      #menu nav li .service-name .exp {
        font-size: 0.8em; }
    #menu nav li a:hover {
      color: #d9ff57; }
  #menu .navi1 {
    width: 320px;
    position: absolute;
    left: 360px; /*動画入っていた場合の718から修正*/
    top: 265px; }
    #menu .navi1 > .name {
      width: 102px;
      height: 32px; }
      #menu .navi1 > .name svg, #menu .navi1 > .name .svg, #menu .navi1 > .name img {
        width: 130px;
        height: 32px; }
  #menu .navi2 {
    position: absolute;
    left: 50px; /*動画入っていた場合の440から修正*/
    top: 265px; }
    #menu .navi2 > .name {
      width: 262px;
      height: 32px; }
      #menu .navi2 > .name svg, #menu .navi2 > .name .svg, #menu .navi2 > .name img {
        width: 262px;
        height: 32px; }
      #menu .navi2 > .name p {
        letter-spacing: 0.05em; }
  #menu #li-4f .service-name {
    margin-top: 15px;
  }

#menu #btn-4f {
  display: inline-block;
  float: left;
  position: absolute;
  top: 555px;
  left: 547px;
  cursor: pointer;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  clear: both; }
  #menu #btn-4f .pc svg, #menu #btn-4f .pc .svg, #menu #btn-4f .pc img {
    width: 260px;
    height: 46px; }
  #menu #btn-4f .sp svg, #menu #btn-4f .sp .svg, #menu #btn-4f .sp img {
    width: 290px;
    height: 45px; }
  #menu #btn-4f p {
    font-size: 0.85em;
    position: absolute;
    left: 20px;
    top: 15px;
    z-index: 0; }

    #menu #btn-4f:hover {
      color: #d9ff57; }
    #menu #btn-4f:hover svg {
      stroke: #d9ff57; }
    #menu #btn-4f:hover svg polyline {
      stroke: #d9ff57; }

  .ie8 #menu h2 p {
    filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
    opacity: 1; }
  .ie8 #menu .detail {
    filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
    opacity: 1; }
    .ie8 #menu .detail p {
      filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
      opacity: 1; }
  .ie8 #menu nav .name p {
    filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
    opacity: 1; }
  .ie8 #menu nav li {
    filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
    opacity: 1; }
    .ie8 #menu nav li .service-name {
      margin-top: 0px; }

#advancedtechnology h2 svg, #advancedtechnology h2 .svg, #advancedtechnology h2 img {
  width: 236px;
  height: 97px; }
#advancedtechnology h2 p {
  width: 300px;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0; }
#advancedtechnology .detail {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0; }
#advancedtechnology .img svg {
  width: 255px;
  height: 232px; }
  #advancedtechnology .img svg .eye, #advancedtechnology .img svg .tairiku1, #advancedtechnology .img svg .tairiku2, #advancedtechnology .img svg text {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0; }
#advancedtechnology .img .svg, #advancedtechnology .img img {
  width: 253px;
  height: 230px; }
.ie8 #advancedtechnology .left h2 p {
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1; }
.ie8 #advancedtechnology .left .detail {
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1; }
.ie8 #advancedtechnology .right ul.list li .more {
  margin-left: 0px; }

#multideviceuiux h2 svg, #multideviceuiux h2 .svg, #multideviceuiux h2 img {
  width: 180px;
  height: 42px; }
#multideviceuiux h2 p {
  width: 300px;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0; }
#multideviceuiux .detail {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0; }
#multideviceuiux .img svg {
  width: 221px;
  height: 265px; }
  #multideviceuiux .img svg text {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0; }
#multideviceuiux .img .svg, #multideviceuiux .img img {
  width: 216px;
  height: 261px; }
.ie8 #multideviceuiux .left h2 p {
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1; }
.ie8 #multideviceuiux .left .detail {
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1; }
.ie8 #multideviceuiux .right ul.list li .more {
  margin-left: 0px; }

#digitalmarketing h2 svg, #digitalmarketing h2 .svg, #digitalmarketing h2 img {
  width: 193px;
  height: 98px; }
#digitalmarketing h2 p {
  width: 300px;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0; }
#digitalmarketing .detail {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0; }
#digitalmarketing .img svg {
  width: 277px;
  height: 118px; }
#digitalmarketing .img .svg, #digitalmarketing .img img {
  width: 237px;
  height: 108px; }
.ie8 #digitalmarketing .left h2 p {
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1; }
.ie8 #digitalmarketing .left .detail {
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1; }
.ie8 #digitalmarketing .right ul.list li .more {
  margin-left: 0px; }

#development h2 svg, #development h2 .svg, #development h2 img {
  width: 266px;
  height: 51px; }
#development h2 p {
  width: 300px;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0; }
#development .detail {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0; }
#development .img svg {
  width: 222px;
  height: 224px; }
#development .img .svg, #development .img img {
  width: 218px;
  height: 220px; }
.ie8 #development .left h2 p {
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1; }
.ie8 #development .left .detail {
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1; }
.ie8 #development .right ul.list li .more {
  margin-left: 0px; }

#knowledge h2 svg, #knowledge h2 .svg, #knowledge h2 img {
  width: 233px;
  height: 50px; }
#knowledge h2 p {
  width: 300px;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0; }
#knowledge .detail {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0; }
#knowledge .img svg {
  width: 229px;
  height: 253px; }
#knowledge .img .svg, #knowledge .img img {
  width: 225px;
  height: 249px; }
.ie8 #knowledge .left h2 p {
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1; }
.ie8 #knowledge .left .detail {
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1; }
.ie8 #knowledge .right ul.list li .more {
  margin-left: 0px; }

#personalskill h2 svg, #personalskill h2 .svg, #personalskill h2 img {
  width: 260px;
  height: 42px; }
#personalskill h2 p {
  width: 300px;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0; }
#personalskill .detail {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0; }
#personalskill .img > img {
  position: absolute;
  z-index: 0; }
#personalskill .img svg, #personalskill .img .svg, #personalskill .img img {
  position: absolute;
  z-index: 1;
  width: 245px;
  height: 502px; }
  #personalskill .img svg text, #personalskill .img .svg text, #personalskill .img img text {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0; }
.ie8 #personalskill .left h2 p {
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1; }
.ie8 #personalskill .left .detail {
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1; }
.ie8 #personalskill .right ul.list li .more {
  margin-left: 0px; }

@media screen and (max-width: 640px) {
  svg {
    stroke-width: 2; }

  .caption {
    margin-top: 15px;
    margin-bottom: 15px;
    font-size: 1.25em;
    line-height: 1.3em;
    letter-spacing: 0.03em; }

  .detail {
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 15px;
    margin-bottom: 15px;
    font-size: 0.7em;
    line-height: 1.6em;
    letter-spacing: 0.02em; }

  #contents {
    padding-top: 0px;
    top: 80px; }

  #bg {
    background-image: url(/assets/images/common/bg_sp2.png); }

  .left, .right {
    width: 320px;
    float: none; }

  section {
    padding-bottom: 80px; }
    section h2 {
      margin-left: 15px;
      font-size: 0.7em; }
      section h2 svg, section h2 .svg, section h2 img {
        margin-bottom: 10px; }
      section h2 p {
        width: auto;
        line-height: 1.5em; }
    section .detail {
      width: 290px;
      margin-bottom: 30px; }
    section ul.list {
      margin-left: 15px;
      float: none; }
      section ul.list li {
        margin-bottom: 30px; }
        section ul.list li .name {
          font-size: 0.8em; }
        section ul.list li .exp {
          width: 290px;
          font-size: 0.7em; }
    section .img {
      float: none;
      text-align: center; }

  #menu {
    width: 320px;
    height: auto; /* 動画入れてた時は365px */
    padding-bottom: 30px; }
    #menu .left, #menu .right {
      width: 320px;
      float: none; }
    #menu h2 {
      margin-left: 0px;
      text-align: center; }
      #menu h2 svg, #menu h2 .svg, #menu h2 img {
        width: 189px;
        height: 27px;
        stroke-width: 3; }
      #menu h2 p {
        width: auto;
        text-align: center;
        font-size: 1.5em; }
    #menu .detail {
      margin-top: 25px;
      margin-bottom: 0px;
      margin-left: 34px; }
      #menu .detail svg, #menu .detail .svg, #menu .detail img {
        width: 32px;
        height: 44px; }
      #menu .detail .p1 {
        margin-top: 14px; }
      #menu .detail .p2 {
        margin-left: 36px;
        position: static;
        font-size: 1.1em; }
      #menu .detail .p3 {
        margin-left: 50px;
        position: static;
        font-size: 1.4em; }
    #menu .movie-team {
      width: 280px;
      height: 158px;
      top: 197px;
      left: 20px; }
      #menu .movie-team video {
        width: 280px;
        height: 158px; }
    #menu nav, #menu .right {
      display: none; }

  #advancedtechnology h2.title svg, #advancedtechnology h2.title .svg, #advancedtechnology h2.title img {
    width: 142px;
    height: 58px; }
  #advancedtechnology .right .img {
    width: auto; }
    #advancedtechnology .right .img svg, #advancedtechnology .right .img .svg, #advancedtechnology .right .img img {
      position: static; }

  #multideviceuiux h2.title svg, #multideviceuiux h2.title .svg, #multideviceuiux h2.title img {
    width: 145px;
    height: 54px; }
  #multideviceuiux .right .img {
    width: auto; }
    #multideviceuiux .right .img svg, #multideviceuiux .right .img .svg, #multideviceuiux .right .img img {
      position: static; }

  #digitalmarketing h2.title svg, #digitalmarketing h2.title .svg, #digitalmarketing h2.title img {
    width: 116px;
    height: 59px; }
  #digitalmarketing .right .img {
    width: auto; }
    #digitalmarketing .right .img svg, #digitalmarketing .right .img .svg, #digitalmarketing .right .img img {
      position: static; }

  #development h2.title svg, #development h2.title .svg, #development h2.title img {
    width: 159px;
    height: 30px; }
  #development .right .img {
    width: auto; }
    #development .right .img svg, #development .right .img .svg, #development .right .img img {
      position: static; }

  #knowledge h2.title svg, #knowledge h2.title .svg, #knowledge h2.title img {
    width: 135px;
    height: 29px; }
  #knowledge .right .img {
    width: auto; }
    #knowledge .right .img svg, #knowledge .right .img .svg, #knowledge .right .img img {
      position: static; }

  #personalskill h2.title svg, #personalskill h2.title .svg, #personalskill h2.title img {
    width: 156px;
    height: 25px; }
  #personalskill .right .img {
    width: auto;
    margin-bottom: 30px; }
    #personalskill .right .img svg, #personalskill .right .img .svg, #personalskill .right .img img {
      position: static; }


  #sp-4f {
    margin-bottom: 100px;
    margin-top: 80px; }
    #sp-4f hr {
      width: 290px;
      margin: 0 auto;
      border-color: #7d91a3; }
    #sp-4f h2 {
      font-size: 1.6em;
      margin-top: 50px; }
      #sp-4f h2:first-letter {
        color: #d9ff57; }
      #sp-4f h2 p {
        opacity: 1;
        margin-top: 30px;
        font-size: 0.4em; }
      #sp-4f .detailbtn-sp {
        border: 1px solid #fff;
        padding: 15px;
        width: 260px;
        margin: auto;
        margin-top: 20px;
        cursor: pointer;
        position: relative; }
      #sp-4f .detailbtn-sp p {
        font-size: 0.7em;
        text-align: center; }
      #sp-4f .detailbtn-sp:hover {
        border: 1px solid #d9ff57;
        color: #d9ff57; }
      #sp-4f .detailbtn-sp:hover svg polyline {
        stroke: #d9ff57; }
      #sp-4f svg {
        width: 8px;
        height:11px;
        position: absolute;
        top: 15px;
        right: 10px; }
        #sp-4f svg polyline {
          opacity: 1 !important;
          stroke-dashoffset: 0 !important; }




}