
/******* 新商品紹介：3D-回転型スライドショー ******************/
	/* 表示領域 */
	#stage {
	    position:relative;
	    width: 600px;
	    height: 420px;
	    background: #ffffff;
	    overflow:hidden;
	}
	/* スライド共通 */
	.photo {
	    position: absolute;
	    left: 200px;top:100px;
	    border:#fff 2px solid;
	}
	/* 各スライドのanimation設定 */
	#photo1 {
	    -webkit-animation:slidepass 18s infinite;
	    -webkit-animation-delay:-15s;
	    animation:slidepass 18s infinite;
	    animation-delay:-15s;
	}
	#photo2 {
	    -webkit-animation:slidepass 18s infinite;
	    -webkit-animation-delay:-12s;
	    animation:slidepass 18s infinite;
	    animation-delay:-12s;
	}
	#photo3 {
	    -webkit-animation:slidepass 18s infinite;
	    -webkit-animation-delay:-9s;
	    animation:slidepass 18s　infinite;
	    animation-delay:-9s;
	}
	#photo4 {
	    -webkit-animation:slidepass 18s infinite;
	    -webkit-animation-delay:-6s;
	    animation:slidepass 18s infinite;
	    animation-delay:-6s;
	}
	#photo5 {
	    -webkit-animation:slidepass 18s infinite;
	    -webkit-animation-delay:-3s;
	    animation:slidepass 18s infinite;
	    animation-delay:-3s;
	}
	#photo6 {
	    -webkit-animation:slidepass 18s infinite;
	    -webkit-animation-delay:0s;
	    animation:slidepass 18s infinite;
	    animation-delay:0s;
	}
	/* スライドの動きワンサイクル */
	@-webkit-keyframes slidepass {
	    0% {-webkit-transform:perspective(750px) rotateY(0deg) translateZ(250px);z-index:20;}
	    10% {-webkit-transform:perspective(1000px) rotateY(60deg) translateZ(250px);z-index:18;}
	    16.7% {-webkit-transform:perspective(1000px) rotateY(60deg) translateZ(250px);z-index:18;}
	    26.7% {-webkit-transform:perspective(1000px) rotateY(120deg) translateZ(250px);z-index:14;}
	    33.3% {-webkit-transform:perspective(1000px) rotateY(120deg) translateZ(250px);z-index:14;}
	    43.3% {-webkit-transform:perspective(1000px) rotateY(180deg) translateZ(250px);z-index:8;}
	    50% {-webkit-transform:perspective(1000px) rotateY(180deg) translateZ(250px);z-index:8;}
	    60% {-webkit-transform:perspective(1000px) rotateY(240deg) translateZ(250px);z-index:10;}
	    66.7% {-webkit-transform:perspective(1000px) rotateY(240deg) translateZ(250px);z-index:10;}
	    76.7% {-webkit-transform:perspective(1000px) rotateY(300deg) translateZ(250px);z-index:12;}
	    83.4% {-webkit-transform:perspective(1000px) rotateY(300deg) translateZ(250px);z-index:12;}
	    93.4% {-webkit-transform:perspective(750px) rotateY(360deg) translateZ(250px);z-index:16;}
	    100% {-webkit-transform:perspective(750px) rotateY(360deg) translateZ(250px);z-index:16;}
	}
	@keyframes slidepass {
	    0% {transform:perspective(750px) rotateY(0deg) translateZ(250px);z-index:20;}
	    10% {transform:perspective(1000px) rotateY(60deg) translateZ(250px);z-index:18;}
	    16.7% {transform:perspective(1000px) rotateY(60deg) translateZ(250px);z-index:18;}
	    26.7% {transform:perspective(1000px) rotateY(120deg) translateZ(250px);z-index:14;}
	    33.3% {transform:perspective(1000px) rotateY(120deg) translateZ(250px);z-index:14;}
	    43.3% {transform:perspective(1000px) rotateY(180deg) translateZ(250px);z-index:8;}
	    50% {transform:perspective(1000px) rotateY(180deg) translateZ(250px);z-index:8;}
	    60% {transform:perspective(1000px) rotateY(240deg) translateZ(250px);z-index:10;}
	    66.7% {transform:perspective(1000px) rotateY(240deg) translateZ(250px);z-index:10;}
	    76.7% {transform:perspective(1000px) rotateY(300deg) translateZ(250px);z-index:12;}
	    83.4% {transform:perspective(1000px) rotateY(300deg) translateZ(250px);z-index:12;}
	    93.4% {transform:perspective(750px) rotateY(360deg) translateZ(250px);z-index:16;}
	    100% {transform:perspective(750px) rotateY(360deg) translateZ(250px);z-index:16;}
	}
	
	div.new-item {
		margin-top: 40px;
		margin-right:auto;
		margin-left:auto;
		width:100%;
		position: center;
	}
	img.item-size-top {
		width: 230px;
		height: 230px;
	}

	@keyframes h-arrow {
		from {
			color: #777;
			margin-bottom:50px;
			margin-right:30px;
			font-size: 18pt;
		}
		to {
			color: #999;
			margin-bottom:0px;
			font-size: 30pt;
		}
	}
	span.arrow-down-animation {
		position: absolute;
		animation: h-arrow 0.6s ease 0.5s infinite alternate both;
	}

/**********************************************************************/

/************************* 新商品案内の文字アニメーション ***************************/
.loading span {
  display: inline-block;
  margin: 0 -.05em;
  animation: loading 5s infinite;
}
.loading span:nth-child(2) {
  animation-delay: .1s;
}
.loading span:nth-child(3) {
  animation-delay: .2s;
}
.loading span:nth-child(4) {
  animation-delay: .3s;
}
.loading span:nth-child(5) {
  animation-delay: .4s;
}
@keyframes loading {
  0%, 40% {
    transform: translateY(0);
  }
  10% {
    transform: translateY(15px);
  }
}
/************************* 新商品案内の文字アニメーション たぶんここまで ***************************/

img.close {
   max-width: 20px;
   height: auto;
}



/************************* 追加発注案内の文字アニメーション ***************************/
.loading-add {
  perspective: 1000px;
}
.loading-add span {
  display: inline-block;
  margin: 0 -.05em;
  transform-origin: 50% 50% -25px;
  transform-style: preserve-3d;
  animation: loading-add 6s infinite;
}
.loading-add span:nth-child(2) {
  animation-delay: .1s;
}
.loading-add span:nth-child(3) {
  animation-delay: .2s;
}
.loading-add span:nth-child(4) {
  animation-delay: .3s;
}
.loading-add span:nth-child(5) {
  animation-delay: .4s;
}
.loading-add span:nth-child(6) {
  animation-delay: .5s;
}
@keyframes loading-add {
  0% {
    transform: rotateX(-360deg);
  }
  30% {
    transform: rotateX(0);
  }
}
/************************* 追加発注案内の文字アニメーション たぶんここまで ***************************/
