@media screen and (min-width: 897px) {
  .flexPcrr {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
  }
  .wPC100 {
    width: 100% !important;
  }
  .wPC90 {
    width: 90% !important;
  }
  .wPC80 {
    width: 80% !important;
  }
  .wPC70 {
    width: 70% !important;
  }
  .wPC60 {
    width: 60% !important;
  }
  .wPC50 {
    width: 50% !important;
  }
  .wPC42 {
    width: 42% !important;
  }
  .wPC45 {
    width: 45% !important;
  }
  .wPC40 {
    width: 40% !important;
  }
  .wPC30 {
    width: 30% !important;
  }
  .wPC25 {
    width: 25% !important;
  }
  .wPC20 {
    width: 20% !important;
  }
  .wPC15 {
    width: 15% !important;
  }
  .wPC10 {
    width: 10% !important;
  }
  .boxType01.environment {
    padding: 60px;
  }
  .wPC458 {
    width: 458px;
  }
  .mtP150 {
    margin-top: 150px !important;
  }
  .mbP150 {
    margin-bottom: 150px !important;
  }
}

@media screen and (max-width: 896px) {
  .wSP100 {
    width: 100% !important;
  }
  .wSP90 {
    width: 90% !important;
  }
  .wSP80 {
    width: 80% !important;
  }
  .wSP70 {
    width: 70% !important;
  }
  .wSP60 {
    width: 60% !important;
  }
  .wSP50 {
    width: 50% !important;
  }
  .wSP40 {
    width: 40% !important;
  }
  .wSP30 {
    width: 30% !important;
  }
  .wSP20 {
    width: 20% !important;
  }
  .wSP10 {
    width: 10% !important;
  }
  .mwSP100 {
    width: auto;
    max-width: 100% !important;
  }
  .pbS150 {
    padding-bottom: 150px;
  }
  .mtS120 {
    margin-top: 120px !important;
  }
  .mtS150 {
    margin-top: 150px !important;
  }
  .ttlStyle02 {
    font-weight: 500;
  }
  .mlSP5 {
    margin-left: 5px !important;
  }
  .mrSP5 {
    margin-right: 5px !important;
  }
}

.mt150 {
  margin-top: 150px;
}

.lh1_5 {
  line-height: 1.5 !important;
}

.lh1_7 {
  line-height: 1.7 !important;
}

.lh2 {
  line-height: 2 !important;
}

.lh2_5 {
  line-height: 2.5 !important;
}

.ts04-txt h2 {
  font-size: 20px;
  font-weight: inherit;
}

@media screen and (max-width: 896px) {
  .ts04-txt h2 {
    font-size: 16px;
  }
}

h1.shadow {
  text-shadow: rgba(0, 0, 0, 0.7) 0 0 7px;
}

/*#container{
	overflow: visible;
}
.logo_piomatix{
	width: 60% !important;
	margin: 0 auto;
	position: relative;
}
.logo_piomatix_img{
	
	position: absolute;
	top: 0;
	left: 0;
	img{
		width: 100%;
		opacity: 0;
	}
}
.logo_piomatix_img.anim3{
	img{
		opacity: 1;
		transition: all 1.5s 0.8s ease-out;
	}
}
.logo_piomatix_svg{		
	opacity:0;
}
.logo_piomatix_svg.anim2{		
		opacity:1;
		animation: fadeInOut 300ms linear 0ms ease-in-out 50ms forwards;
}
*/
@-webkit-keyframes fadeInOut {
  0% {
    opacity: 1;
  }
  10% {
    opacity: 0;
  }
  90% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeInOut {
  0% {
    opacity: 1;
  }
  10% {
    opacity: 0;
  }
  90% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.ls1 {
  letter-spacing: 0.07rem;
}

.bgGrad01 {
  /*background-color: #fdf6ff;*/
  /*background-color: #e6e6e7;*/
  /*background-color: #f5f5f5;*/
  background-color: #eeecf2;
  background-color: #f2f2f2;
  background-color: #eeecf2;
  background-color: #eceef7;
  background-image: url("../img/bg_middle_right.png"), url("../img/bg_bottom_left_2.png") !important;
  background-repeat: no-repeat, no-repeat, no-repeat !important;
  background-position: right 95%, bottom left !important;
}

.bgLightPurple {
  background-color: #eeecf2;
  background-color: #f2f2f2;
  background-color: #eceef7;
}

.bgPurple {
  background-color: #7c47a3;
  background-image: url("../img/bg_right.png"), url("../img/bg_top_left.png"), url("../img/bg_bottom_left.png"), url("../img/bg_bottom_right.png"), url("../img/bg_middle.png") !important;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat !important;
  background-position: right center, left top, bottom left, bottom right, center center !important;
}

.bgPurple.anim1 {
  background-color: #fff;
  background-image: none !important;
  -webkit-transition: all 2s 1s ease-out;
  transition: all 2s 1s ease-out;
}

.txtGradation {
  /*text-align:center;
	color: transparent;
	background: repeating-linear-gradient( 95deg, #00cefe 0 35%, #893aba 45% 55% ,#f60062 60% 100%);
	background-clip: text;*/
  background: -webkit-linear-gradient(left, #00cefe, #893aba, #f60062);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@media screen and (max-width: 896px) {
  .txtGradationSP {
    background: -webkit-linear-gradient(left, #00cefe, #893aba, #f60062);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 500;
  }
}

.aboutPiomatix {
  position: relative;
  height: auto;
  overflow: visible;
}

.aboutPiomatix .aboutPiomatix_img {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  display: block;
  width: 100%;
  max-width: 100%;
  overflow: visible;
  margin-top: 50px;
  z-index: 100;
  padding-top: 100px;
}

.aboutPiomatix .pia_text01 {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  display: block;
  width: 100%;
  max-width: 100%;
  overflow: visible;
  margin-top: 50px;
  z-index: 70;
  padding-top: 400px;
}

.aboutPiomatix .pia_text02 {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  display: block;
  width: 100%;
  max-width: 100%;
  overflow: visible;
  margin-top: 50px;
  z-index: 80;
  padding-top: 400px;
}

.aboutPiomatix .pia_text03 {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  display: block;
  width: 100%;
  max-width: 100%;
  overflow: visible;
  margin-top: 50px;
  z-index: 90;
  padding-top: 400px;
}

@media screen and (max-width: 896px) {
  .sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    padding-top: 30px;
    z-index: 50;
  }
  .sticky_container {
    position: relative;
    overflow: visible;
  }
  .spacer {
    height: 400px;
    background: url("../img/bg_sticky.png");
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0;
  }
  .spacer.animTrigger.animation {
    -webkit-animation: spacer_anim 3s ease-in-out forwards;
            animation: spacer_anim 3s ease-in-out forwards;
  }
  @-webkit-keyframes spacer_anim {
    0% {
      opacity: 0;
    }
    30% {
      opacity: 1;
    }
    70% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
  @keyframes spacer_anim {
    0% {
      opacity: 0;
    }
    30% {
      opacity: 1;
    }
    70% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
}

/*p{
	height:1000px;
	background-color:beige;
  }**/
/*note

.pRelative{
	position: relative;
}
@include min-screen($breakpoint-pc) {
	#container .swiper-button-next{
		right: -55px !important;
	}
}*/
/*structure*/
.bgColor01 {
  background: #00cdff;
}

.bgColor02 {
  background: #4b0090;
}

.bgColor03 {
  background: #ff0060;
}

.fColor01 {
  color: #00cdff;
}

.fColor02 {
  color: #4b0090;
}

.fColor03 {
  color: #ff0060;
}

.fWeightNormal {
  font-weight: normal;
}

.fadein {
  opacity: 1;
  -webkit-animation-name: animation01;
          animation-name: animation01;
  -webkit-animation-duration: 4s;
          animation-duration: 4s;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.inview .fadein3 {
  opacity: 0;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.inview.active .fadein3 {
  -webkit-animation-name: animation01;
          animation-name: animation01;
  -webkit-animation-duration: 4s;
          animation-duration: 4s;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@-webkit-keyframes animation01 {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes animation01 {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes animation02 {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes animation02 {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/*
.fadein2{
	opacity: 0;
}
*/
/*.fadein2-anim{
	opacity: 1;
	animation-name: animation02;
	animation-duration: 5s;
	animation-iteration-count: 1;
	animation-timing-function: ease-out;
	animation-fill-mode:forwards;
	animation-delay: 1s;
}*/
.section1_inner {
  position: relative;
}

.covercover {
  position: absolute;
  top: 0;
  left: calc(50% - 50px);
}

.cover {
  position: relative;
  margin: 20px 0 0;
}

.cover-anim {
  opacity: 0;
  -webkit-transition: all .7s ease-out;
  transition: all .7s ease-out;
}

/*
.cover2.cover-anim{
	margin-top: 0;
	transition: all 1s ease-in-out;
	transition-delay: 0.5s;
}*/
.cover__scrollBtn {
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 5px;
  width: 100px;
  margin: auto;
}

.cover__scrollBtn__link {
  display: block;
  text-align: center;
  color: #000;
  font-size: 12px;
  cursor: pointer;
}

.cover__scrollBtn__border {
  position: relative;
  left: 50%;
  overflow: hidden;
  width: 1px;
  height: calc(50px - 1em);
  background-color: rgba(255, 255, 255, 0.4);
}

.cover__scrollBtn__border:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-animation: transrateY-up-down 2s infinite;
          animation: transrateY-up-down 2s infinite;
  background-color: #000;
  content: "";
}

@-webkit-keyframes transrateY-up-down {
  0% {
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }
  100% {
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
  }
}

@keyframes transrateY-up-down {
  0% {
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }
  100% {
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
  }
}

@media screen and (max-width: 896px) {
  .cover__card {
    max-width: 100%;
  }
  .cover__scrollBtn__link {
    font-size: 10px;
  }
}

/*
@media screen and (max-width: 896px){
.section4{
	h3.te{
		background: #666;
		display: inline-block;
		text-align: center;
	}
}
}*/
.border-anim, .border2-anim {
  position: relative;
}

.border {
  display: block;
}

.border-anim:before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  border-bottom: solid 1px #c6c5c5;
  border-bottom: solid 1px #e0e0e0;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  -webkit-animation: border_anim 0.5s ease-in-out forwards;
          animation: border_anim 0.5s ease-in-out forwards;
}

@media screen and (min-width: 897px) {
  .border-anim.coreEngine:before {
    border-bottom: solid 1px #d1bfdc;
  }
}

@media screen and (max-width: 896px) {
  .border-anim.coreEngine:before {
    border-bottom: solid 1px #d6d9ec;
  }
}

@media screen and (min-width: 897px) {
  .border-anim.np1Service:before {
    border-bottom: solid 1px #c0bcde;
    border-bottom: solid 1px #a7b5d7;
  }
}

@media screen and (max-width: 896px) {
  .border-anim.np1Service:before {
    border-bottom: solid 1px #c4b3db;
  }
}

@media screen and (min-width: 897px) {
  .border-anim.vui:before {
    border-bottom: solid 1px #91afd5;
  }
}

@media screen and (max-width: 896px) {
  .border-anim.vui:before {
    border-bottom: solid 1px #8ba9d0;
  }
}

@media screen and (min-width: 897px) {
  .border2-anim:before {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    height: 0;
    border-right: solid 1px #333;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    -webkit-animation: border_anim2 0.5s ease-in-out forwards;
            animation: border_anim2 0.5s ease-in-out forwards;
  }
}

@media screen and (max-width: 896px) {
  .border2-anim:before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0;
    border-bottom: solid 1px #333;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    -webkit-animation: border_anim 0.5s ease-in-out forwards;
            animation: border_anim 0.5s ease-in-out forwards;
  }
}

@-webkit-keyframes border_anim {
  0% {
    width: 0%;
  }
  100% {
    width: 97%;
  }
}

@keyframes border_anim {
  0% {
    width: 0%;
  }
  100% {
    width: 97%;
  }
}

@-webkit-keyframes border_anim2 {
  0% {
    height: 0%;
  }
  100% {
    height: 100%;
  }
}

@keyframes border_anim2 {
  0% {
    height: 0%;
  }
  100% {
    height: 100%;
  }
}

/*Push */
@media screen and (max-width: 896px) {
  .push {
    text-align: center;
  }
  .push img {
    display: block;
    margin: 0 auto;
    width: auto;
  }
  .push img:nth-child(2), .push img:nth-child(5) {
    display: none;
  }
}

/*Core Engine*/
.coreEngine div .bgWhite {
  position: relative;
  -webkit-box-shadow: 3px 3px 3px 0px rgba(0, 0, 0, 0.1);
          box-shadow: 3px 3px 3px 0px rgba(0, 0, 0, 0.1);
}

.coreEngine div .bgWhite h4 {
  background: #00cdff;
  width: 170px;
  height: 170px;
  line-height: 1.3;
  border-radius: 50%;
  color: #fff;
  text-align: center;
  padding-top: 57px;
  position: absolute;
  top: -85px;
  left: calc(50% - 85px);
  -webkit-box-shadow: 3px 3px 3px 0px rgba(0, 0, 0, 0.1);
          box-shadow: 3px 3px 3px 0px rgba(0, 0, 0, 0.1);
}

@media screen and (max-width: 896px) {
  .coreEngine div .bgWhite h4 {
    width: 150px;
    height: 150px;
    padding-top: 50px;
    top: -75px;
    left: calc(50% - 75px);
  }
}

.coreEngine div .bgWhite.workload h4 {
  background: #4b0090;
}

@media screen and (min-width: 897px) {
  .coreEngine div .bgWhite.workload h4 ul {
    margin-bottom: 34px;
  }
}

.coreEngine div .bgWhite.driving h4 {
  text-shadow: rgba(0, 0, 0, 0.2) 0 0 3px;
}

.coreEngine div .bgWhite.driving ul {
  width: 145px;
  margin: 0 auto;
}

.coreEngine div .bgWhite.insight h4 {
  background: #ff0060;
  text-shadow: rgba(0, 0, 0, 0.2) 0 0 3px;
}

.coreEngine div .bgWhite.insight ul {
  width: 160px;
  margin: 0 auto;
}

@media screen and (min-width: 897px) {
  .coreEngine div .bgWhite p {
    height: 85px;
  }
}

.coreEngine div .bgWhite p:first-child {
  height: 25px;
}

.coreEngine div .bgWhite .spacer {
  height: 25px;
}

.coreEngine div .bgWhite h5 {
  border-bottom: solid 1px #dbdbdb;
}

.coreEngine div .bgWhite h5 span {
  background: #dbdbdb;
  display: inline-block;
  padding: 2px 20px 3px 20px;
  text-align: center;
  border-radius: 30px;
  margin: 0 auto;
  position: relative;
  top: 28px;
  border: solid 10px #fff;
}

.coreEngine div .bgWhite .flex5 {
  margin-top: 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.coreEngine div .bgWhite .flex5 div {
  display: inline-block;
  width: 56px;
  height: 56px;
  background: #000;
  color: #fff;
  font-size: 12px;
  text-align: center;
  border-radius: 30px;
  line-height: 1.2;
  vertical-align: middle;
}

@media screen and (max-width: 896px) {
  .coreEngine div .bgWhite .flex5 div {
    width: 50px;
    height: 50px;
    font-size: 11px;
  }
}

.coreEngine div .bgWhite .flex5 div.disabled {
  background: #b4b4b4;
  color: #757575;
}

.coreEngine div .bgWhite .flex5 div p {
  margin-top: 20px;
}

@media screen and (max-width: 896px) {
  .coreEngine div .bgWhite .flex5 div p {
    margin-top: 17px;
  }
}

.coreEngine div .bgWhite .flex5 div:nth-child(4) p, .coreEngine div .bgWhite .flex5 div:nth-child(5) p {
  margin-top: 13px;
}

@media screen and (max-width: 896px) {
  .coreEngine div .bgWhite .flex5 div:nth-child(4) p, .coreEngine div .bgWhite .flex5 div:nth-child(5) p {
    margin-top: 10px;
  }
}

.bgImage {
  background: url("../img/01.jpg") no-repeat right #000;
  background-size: contain;
}

.bgPred {
  background: #b91440;
}

.vuiDesign div div {
  background: #b91440;
  padding: 10px;
  border-radius: 10px;
  -webkit-box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.3);
          box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.3);
}

.vuiDesign p {
  background: #fff;
  padding: 0 20px 20px;
  border-radius: 7px;
  font-size: 16px;
}

.vuiDesign p img {
  display: block;
  text-align: center;
  margin: 0 auto;
}

.vuiDesign2 h4 {
  height: 114px;
  padding-top: 20px;
  font-size: 20px !important;
  -webkit-box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.3);
          box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.3);
}

.vuiDesign2 p {
  background: #fff;
  padding: 0 20px 20px;
  font-size: 16px;
  position: relative;
  top: -72px;
  margin: 30px 20px;
  -webkit-box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.3);
          box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.3);
}

.vuiDesign2 p img {
  display: block;
  text-align: center;
  margin: 0 auto;
}

.vuiDesign3 div div.np1_list {
  background: #fff;
  padding: 10px 10px 20px 10px;
  -webkit-box-shadow: 3px 3px 3px 0px rgba(0, 0, 0, 0.1);
          box-shadow: 3px 3px 3px 0px rgba(0, 0, 0, 0.1);
}

.vuiDesign3 div div.np1_list p {
  background: #fff;
  font-size: 15px;
  text-align: center;
  font-weight: 500;
}

@media screen and (min-width: 897px) {
  .vuiDesign3 div div.np1_list p {
    height: 270px;
  }
}

.vuiDesign3 div div.np1_list p img {
  display: block;
  text-align: center;
  margin: 0 auto;
  margin-bottom: 20px;
}

.bgGray {
  background: #e6e6e7;
}

.bgGray02 {
  background: #eff4f7;
}

/*
fadeanimetion
------------------------------------------------*/
.fadeBlock {
  opacity: 0;
  /*-webkit-transform: translateY(30px);
	transform: translateY(30px);*/
  -webkit-transition: all 1s;
  -webkit-transition: all .8s;
  transition: all .8s;
}

.fadeIn {
  opacity: 1 !important;
  -webkit-transform: translateY(0) !important;
  transform: translateY(0) !important;
}

@media screen and (min-width: 897px) {
  .fadeDelay01 {
    -webkit-transition-delay: 0.1s;
            transition-delay: 0.1s;
    -webkit-animation-delay: 0.1s;
            animation-delay: 0.1s;
  }
  .fadeDelay02 {
    -webkit-transition-delay: 0.2s;
            transition-delay: 0.2s;
    -webkit-animation-delay: 0.2s;
            animation-delay: 0.2s;
  }
  .fadeDelay03 {
    -webkit-transition-delay: 0.3s;
            transition-delay: 0.3s;
    -webkit-animation-delay: 0.3s;
            animation-delay: 0.3s;
  }
  .fadeDelay04 {
    -webkit-transition-delay: 0.4s;
            transition-delay: 0.4s;
    -webkit-animation-delay: 0.4s;
            animation-delay: 0.4s;
  }
  .fadeDelay05 {
    -webkit-transition-delay: 0.5s;
            transition-delay: 0.5s;
    -webkit-animation-delay: 0.5s;
            animation-delay: 0.5s;
  }
  .fadeDelay06 {
    -webkit-transition-delay: 0.6s;
            transition-delay: 0.6s;
    -webkit-animation-delay: 0.6s;
            animation-delay: 0.6s;
  }
  .fadeDelay07 {
    -webkit-transition-delay: 0.7s;
            transition-delay: 0.7s;
    -webkit-animation-delay: 0.7s;
            animation-delay: 0.7s;
  }
  .fadeDelay08 {
    -webkit-transition-delay: 0.8s;
            transition-delay: 0.8s;
    -webkit-animation-delay: 0.8s;
            animation-delay: 0.8s;
  }
  .fadeDelay09 {
    -webkit-transition-delay: 0.9s;
            transition-delay: 0.9s;
    -webkit-animation-delay: 0.9s;
            animation-delay: 0.9s;
  }
  .fadeDelay10 {
    -webkit-transition-delay: 1s;
            transition-delay: 1s;
    -webkit-animation-delay: 1s;
            animation-delay: 1s;
  }
  .fadeDelay12 {
    -webkit-transition-delay: 1.2s;
            transition-delay: 1.2s;
    -webkit-animation-delay: 1.2s;
            animation-delay: 1.2s;
  }
  .fadeDelay14 {
    -webkit-transition-delay: 1.4s;
            transition-delay: 1.4s;
    -webkit-animation-delay: 1.4s;
            animation-delay: 1.4s;
  }
  .fadeDelay16 {
    -webkit-transition-delay: 1.6s;
            transition-delay: 1.6s;
    -webkit-animation-delay: 1.6s;
            animation-delay: 1.6s;
  }
}

@media screen and (max-width: 896px) {
  .fadeDelay01SP {
    -webkit-transition-delay: 0.1s;
            transition-delay: 0.1s;
    -webkit-animation-delay: 0.1s;
            animation-delay: 0.1s;
  }
  .fadeDelay02SP {
    -webkit-transition-delay: 0.2s;
            transition-delay: 0.2s;
    -webkit-animation-delay: 0.2s;
            animation-delay: 0.2s;
  }
  .fadeDelay03SP {
    -webkit-transition-delay: 0.3s;
            transition-delay: 0.3s;
    -webkit-animation-delay: 0.3s;
            animation-delay: 0.3s;
  }
  .fadeDelay04SP {
    -webkit-transition-delay: 0.4s;
            transition-delay: 0.4s;
    -webkit-animation-delay: 0.4s;
            animation-delay: 0.4s;
  }
  .fadeDelay05SP {
    -webkit-transition-delay: 0.5s;
            transition-delay: 0.5s;
    -webkit-animation-delay: 0.5s;
            animation-delay: 0.5s;
  }
  .fadeDelay06SP {
    -webkit-transition-delay: 0.6s;
            transition-delay: 0.6s;
    -webkit-animation-delay: 0.6s;
            animation-delay: 0.6s;
  }
  .fadeDelay07SP {
    -webkit-transition-delay: 0.7s;
            transition-delay: 0.7s;
    -webkit-animation-delay: 0.7s;
            animation-delay: 0.7s;
  }
  .fadeDelay08SP {
    -webkit-transition-delay: 0.8s;
            transition-delay: 0.8s;
    -webkit-animation-delay: 0.8s;
            animation-delay: 0.8s;
  }
  .fadeDelay09SP {
    -webkit-transition-delay: 0.9s;
            transition-delay: 0.9s;
    -webkit-animation-delay: 0.9s;
            animation-delay: 0.9s;
  }
  .fadeDelay10SP {
    -webkit-transition-delay: 1s;
            transition-delay: 1s;
    -webkit-animation-delay: 1s;
            animation-delay: 1s;
  }
  .fadeDelay12SP {
    -webkit-transition-delay: 1.2s;
            transition-delay: 1.2s;
    -webkit-animation-delay: 1.2s;
            animation-delay: 1.2s;
  }
  .fadeDelay14SP {
    -webkit-transition-delay: 1.4s;
            transition-delay: 1.4s;
    -webkit-animation-delay: 1.5s;
            animation-delay: 1.5s;
  }
  .fadeDelay15SP {
    -webkit-transition-delay: 1.5s;
            transition-delay: 1.5s;
    -webkit-animation-delay: 1.5s;
            animation-delay: 1.5s;
  }
  .fadeDelay16SP {
    -webkit-transition-delay: 1.6s;
            transition-delay: 1.6s;
    -webkit-animation-delay: 1.6s;
            animation-delay: 1.6s;
  }
  .fadeDelay20SP {
    -webkit-transition-delay: 2s;
            transition-delay: 2s;
    -webkit-animation-delay: 2s;
            animation-delay: 2s;
  }
}

.box_shadow {
  -webkit-box-shadow: 3px 3px 3px 0px rgba(0, 0, 0, 0.1);
          box-shadow: 3px 3px 3px 0px rgba(0, 0, 0, 0.1);
}

@media only screen and (min-width: 897px) {
  .slick-dots {
    bottom: -45px;
  }
}

.thumbImage .icon-play img {
  -webkit-filter: drop-shadow(0px 0px 5px black);
          filter: drop-shadow(0px 0px 5px black);
}

.mBox1of1 .icon-play.piomatix {
  top: 79%;
}

@media screen and (min-width: 897px) {
  .push_image_wrapper {
    background: url("../img/structure01_white.png") no-repeat top left;
  }
  .push_image_wrapper .push_image {
    position: relative;
    z-index: 3;
    left: 90px;
    /*&::after{
				content: "";
				width: 1000px;
				height: 500px;
				display: block;
				background: url("../img/structure01_white.png") no-repeat bottom right;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 5;
			}*/
  }
  .push_image_wrapper .push_image::before {
    content: "";
    width: 1000px;
    height: 500px;
    display: block;
    background: url("../img/structure01_color.png") no-repeat bottom right;
    position: absolute;
    bottom: -195px;
    right: 0;
    z-index: 1;
  }
}

@media screen and (max-width: 896px) {
  .push_image_wrapper {
    background: url("../img/structure01_white.png") no-repeat top left;
  }
  .push_image_wrapper .push_image {
    position: relative;
    z-index: 3;
    /*left: 35px;*/
    /*&::after{
				content: "";
				width: 1000px;
				height: 500px;
				display: block;
				background: url("../img/structure01_white.png") no-repeat bottom right;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 5;
			}*/
  }
  .push_image_wrapper .push_image::before {
    content: "";
    width: 500px;
    height: 500px;
    display: block;
    background: url("../img/structure01_color.png") no-repeat bottom right;
    position: absolute;
    bottom: -122px;
    right: -100px;
    z-index: 1;
    background-size: 500px;
  }
  .push_image_wrapper img {
    width: 120% !important;
  }
}

.coverWrap {
  position: relative;
}

.whatsNew {
  /*position: fixed;
	top:150px;
	right: 0;*/
  width: 100%;
  height: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  /*z-index: 100;*/
  -webkit-transition: all 1s;
  transition: all 1s;
  -webkit-transform: translateX(0px);
          transform: translateX(0px);
}

@media screen and (max-width: 896px) {
  .whatsNew {
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
    /*transform: translateX(0px);*/
  }
}

@media screen and (min-width: 897px) {
  .whatsNew.run {
    -webkit-transform: translateX(-190px);
            transform: translateX(-190px);
  }
}

@media screen and (max-width: 896px) {
  .whatsNew.run {
    -webkit-transform: translateX(-200px);
            transform: translateX(-200px);
  }
}

@media screen and (min-width: 897px) {
  .whatsNew-first {
    position: fixed;
    bottom: 70px;
    right: 0;
    width: 222px;
    height: 150px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    z-index: 100;
    -webkit-transition: all 1s;
    transition: all 1s;
    -webkit-animation-name: animation_whatsNew1;
            animation-name: animation_whatsNew1;
    -webkit-animation-duration: 3s;
            animation-duration: 3s;
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;
    -webkit-animation-timing-function: ease;
            animation-timing-function: ease;
    -webkit-animation-delay: 4s;
            animation-delay: 4s;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
  }
  @-webkit-keyframes animation_whatsNew1 {
    0% {
      -webkit-transform: translateX(250px);
              transform: translateX(250px);
    }
    20% {
      -webkit-transform: translateX(0px);
              transform: translateX(0px);
    }
    80% {
      -webkit-transform: translateX(0px);
              transform: translateX(0px);
    }
    100% {
      -webkit-transform: translateX(190px);
              transform: translateX(190px);
    }
  }
  @keyframes animation_whatsNew1 {
    0% {
      -webkit-transform: translateX(250px);
              transform: translateX(250px);
    }
    20% {
      -webkit-transform: translateX(0px);
              transform: translateX(0px);
    }
    80% {
      -webkit-transform: translateX(0px);
              transform: translateX(0px);
    }
    100% {
      -webkit-transform: translateX(190px);
              transform: translateX(190px);
    }
  }
}

@media screen and (max-width: 896px) {
  .whatsNew-first {
    position: absolute;
    top: 50px;
    right: 0;
    width: 232px;
    height: 125px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    z-index: 100;
    -webkit-transition: all 1s;
    transition: all 1s;
    -webkit-animation-name: animation_whatsNew1;
            animation-name: animation_whatsNew1;
    -webkit-animation-duration: 3s;
            animation-duration: 3s;
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;
    -webkit-animation-timing-function: ease;
            animation-timing-function: ease;
    -webkit-animation-delay: 4s;
            animation-delay: 4s;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
  }
  @-webkit-keyframes animation_whatsNew1 {
    0% {
      -webkit-transform: translateX(250px);
              transform: translateX(250px);
    }
    20% {
      -webkit-transform: translateX(0px);
              transform: translateX(0px);
    }
    80% {
      -webkit-transform: translateX(0px);
              transform: translateX(0px);
    }
    100% {
      -webkit-transform: translateX(200px);
              transform: translateX(200px);
    }
  }
  @keyframes animation_whatsNew1 {
    0% {
      -webkit-transform: translateX(250px);
              transform: translateX(250px);
    }
    20% {
      -webkit-transform: translateX(0px);
              transform: translateX(0px);
    }
    80% {
      -webkit-transform: translateX(0px);
              transform: translateX(0px);
    }
    100% {
      -webkit-transform: translateX(200px);
              transform: translateX(200px);
    }
  }
}

@media screen and (min-width: 897px) {
  .whatsNew-first:hover {
    opacity: 0.6 !important;
  }
  .whatsNew-btn {
    position: absolute;
    width: 22px;
    height: 240px;
    background: url(/ja/strengths/saastechnologycenter/img/whatsNew2-2.svg) no-repeat 0px 9px;
    background-size: 22px 230px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    -webkit-transition: all 1s;
    transition: all 1s;
  }
  .whatsNew-btn.run {
    background: url(/ja/strengths/saastechnologycenter/img/whatsNew1-2.svg) no-repeat 0px 9px;
    background-size: 22px 230px;
  }
}

@media screen and (max-width: 896px) {
  .whatsNew-btn {
    position: absolute;
    width: 22px;
    height: 125px;
    background: url(/ja/strengths/saastechnologycenter/img/whatsNew2-2.svg) no-repeat 0px 9px;
    background-size: 22px 230px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    -webkit-transition: all 1s;
    transition: all 1s;
  }
  .whatsNew-btn.run {
    background: url(/ja/strengths/saastechnologycenter/img/whatsNew1-2.svg) no-repeat 0px 9px;
    background-size: 22px 230px;
  }
}

.whatsNew-inner {
  position: absolute;
  right: 0;
  width: 200px;
  height: 100%;
  background: #fff;
  /*border: solid 1px #8e24ff;*/
  border-right: none;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-radius: 10px 0 0 10px;
  padding: 10px 20px 5px;
  -webkit-box-shadow: 0 2px 5px #999;
          box-shadow: 0 2px 5px #999;
}

@media screen and (max-width: 896px) {
  .whatsNew-inner {
    width: 210px;
    padding: 10px 15px 5px;
  }
}

.whatsNew-inner img.text_WhatsNew {
  width: 70%;
  display: block;
  margin: 0 auto 3px;
}

.whatsNew-inner img.thum {
  width: 100%;
  /*padding: 15px;*/
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.whatsNew .category {
  color: #ffffff;
  background: #000000;
  width: 79px;
  font-size: 9px;
  text-align: center;
  display: inline-block;
}

.whatsNew .date {
  font-size: 12px;
}

.whatsNew .date.right {
  float: right;
}

.whatsNew .ttl {
  font-size: 12px;
  line-height: 1.3em;
}

.whatsNew .link {
  font-size: 13px;
  line-height: 1.0em;
}

.whatsNew .down {
  background: url(/ja/strengths/saastechnologycenter/img/icon_arrow_down_b.svg) no-repeat;
  width: 10px;
  height: 7px;
  margin: 10px auto 0px;
}
/*# sourceMappingURL=style4.css.map */