@charset "utf-8";
/*-----------------------------
　　css
------------------------------*/

div#introduction #partswrap {
	position: absolute;
    top: 38px;
    left: 21px;
}
div#introduction #partswrap div {
	position: absolute;
}
div#introduction #partswrap #intro_parts_01_basw {
	width: 529px;
	height: 109px;
    top: 87px;
    left: 53px;
}
div#introduction #partswrap #intro_parts_01_01 {
	width: 26px;
	height: 35px;
	background: url(../images/introduction/intro_parts_01_01.png) no-repeat center;
    top: 99px;
    left: 440px;
}
div#introduction #partswrap #intro_parts_01_02 {
	width: 19px;
	height: 28px;
	background: url(../images/introduction/intro_parts_01_02.png) no-repeat center;
    top: 87px;
    left: 466px;
}
div#introduction #partswrap #intro_parts_01_03 {
	width: 43px;
	height: 39px;
	background: url(../images/introduction/intro_parts_01_03.png) no-repeat center;
    top: 98px;
    left: 525px;
}
div#introduction #partswrap #intro_parts_01_text01 {
	width: 529px;
	height: 109px;
	background: url(../images/introduction/intro_parts_01_text01.png) no-repeat center;
    top: 87px;
    left: 53px;
}
div#introduction #partswrap #intro_parts_01_text02 {
	width: 529px;
	height: 109px;
	background: url(../images/introduction/intro_parts_01_text02.png) no-repeat center;
    top: 87px;
    left: 53px;
}

div#introduction #partswrap #intro_parts_02 {
	width: 86px;
	height: 90px;
	background: url(../images/introduction/intro_parts_02.png) no-repeat center;
    top: 236px;
    left: 458px;
}
div#introduction #partswrap #intro_parts_03 {
	width: 59px;
	height: 59px;
	background: url(../images/introduction/intro_parts_03.png) no-repeat center;
    top: 610px;
    left: 276px;
}
div#introduction #partswrap #intro_parts_04 {
	width: 59px;
	height: 59px;
	background: url(../images/introduction/intro_parts_04.png) no-repeat center;
    top: 610px;
    left: 350px;
}
div#introduction #partswrap #intro_parts_05 {
	width: 59px;
	height: 59px;
	background: url(../images/introduction/intro_parts_05.png) no-repeat center;
    top: 657px;
    left: 313px;
}
div#introduction #partswrap #intro_parts_06 {
	width: 153px;
	height: 133px;
	background: url(../images/introduction/intro_parts_06.png) no-repeat center;
    top: 597px;
    left: 463px;
}
div#introduction #partswrap #intro_parts_07 {
	width: 92px;
	height: 92px;
	background: url(../images/introduction/intro_parts_07.png) no-repeat center;
    top: 744px;
    left: 349px;
}
div#introduction #partswrap #intro_parts_08 {
	width: 86px;
	height: 86px;
	background: url(../images/introduction/intro_parts_08.png) no-repeat center;
    top: 856px;
    left: 35px;
}
div#introduction #partswrap #intro_parts_09 {
	width: 73px;
	height: 73px;
	background: url(../images/introduction/intro_parts_09.png) no-repeat center;
    top: 925px;
    left: 157px;
}
div#introduction #partswrap #intro_parts_10 {
	width: 176px;
	height: 176px;
	background: url(../images/introduction/intro_parts_10.png) no-repeat center;
    top: 904px;
    left: 444px;
}
div#introduction #partswrap #intro_parts_11 {
	width: 152px;
	height: 152px;
	background: url(../images/introduction/intro_parts_11.png) no-repeat center;
    top: 1579px;
    left: 397px;
}
div#introduction #partswrap #intro_parts_12 {
	width: 142px;
	height: 142px;
	background: url(../images/introduction/intro_parts_12.png) no-repeat center;
    top: 1323px;
    left: 438px;
}

div#introduction #partswrap div {
	opacity: 0;
}

/* animate
--------------------------------------- */
.animated {
	opacity: 1;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}

/* bounceIn
---------- */
.bounceIn {
	-webkit-animation-duration: 0.5s;
	animation-duration: 0.5s;
	-webkit-animation-name: bounceIn;
	animation-name: bounceIn;
}

@-webkit-keyframes bounceIn {

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  70% {
    -webkit-transform: scale3d(.9, .9, .9);
    transform: scale3d(.9, .9, .9);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes bounceIn {
  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  70% {
    -webkit-transform: scale3d(.9, .9, .9);
    transform: scale3d(.9, .9, .9);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

/* fadeLeft
---------- */
.fadeLeft {
	-webkit-animation-duration: 0.2s;
	animation-duration: 0.2s;
	-webkit-animation-name: fadeLeft;
	animation-name: fadeLeft;
}

@-webkit-keyframes fadeLeft {
  0% {
    opacity: 0;
	margin-left: -20px;
  }
  100% {
    opacity: 1;
	margin-left: 0px;
  }
}

@keyframes fadeLeft {
  0% {
    opacity: 0;
	margin-left: -20px;
  }
  100% {
    opacity: 1;
	margin-left: 0px;
  }
}

/* fadeRight
---------- */
.fadeRight {
	-webkit-animation-duration: 0.2s;
	animation-duration: 0.2s;
	-webkit-animation-name: fadeRight;
	animation-name: fadeRight;
}

@-webkit-keyframes fadeRight {
  0% {
    opacity: 0;
	margin-left: 20px;
  }
  100% {
    opacity: 1;
	margin-left: 0px;
  }
}

@keyframes fadeRight {
  0% {
    opacity: 0;
	margin-left: 20px;
  }
  100% {
    opacity: 1;
	margin-left: 0px;
  }
}

/* bounceIn
---------- */
.bounceUp {
	-webkit-animation-duration: 0.5s;
	animation-duration: 0.5s;
	-webkit-animation-name: bounceUp;
	animation-name: bounceUp;
}

@-webkit-keyframes bounceUp {
  40% {
    opacity: 1;
	margin-top: -20px;
  }
  70% {
    opacity: 1;
	margin-top: 0px;
  }
  100% {
    opacity: 1;
	margin-top: 0px;
  }
}

@keyframes bounceUp {
  40% {
    opacity: 1;
	margin-top: -20px;
  }
  70% {
    opacity: 1;
	margin-top: 0px;
  }
  100% {
    opacity: 1;
	margin-top: 0px;
  }
}