@charset "UTF-8";

@media screen and (min-width: 751px), print {
  .kv_area{
    min-width:1180px;
  }

  .kv_area .inner{
      position: relative;
    }

  .kv_area .en {
    width: 1180px;
    height: auto;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -590px;
    margin-top: -40px;
    z-index: 10;
  }

  .kv_area .en .svg path {
    stroke-dashoffset: 260px;
    stroke-dasharray: 260px;
    transition-delay: 0.1s;
    stroke-width: 12px;
    fill: none;
    stroke: rgba(255, 255, 255, 1);
    transition: 1.5s;
  }
  .kv_area .en .svg.back path {
    opacity: 0.2;
  }
  .kv_area .en .svg.front path {
    transition-delay: 100ms;
  }

  .kv_area .en .svg path.width2 {
    stroke-width: 9px;
  }

  .kv_area .en path.on {
    stroke-dashoffset: 0px!important;
  }

  .kv_area .jp .bg {
    width: 350px;
    height: 21px;
    position: absolute;
    left: -100%;
    top: 0;
    -webkit-transition: all 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
    -moz-transition: all 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
    transition: all 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
    background-color: #fff;
  }
  .kv_area .jp.on .bg {
    left: 0;
  }
  .kv_area .jp.off .bg {
    left: 105%;
  }

  .kv_area .jp img {
    opacity: 0;
  }
  .kv_area .jp.off img {
    opacity: 1;
  }
}