/* [ layout_x-wing.css ] プニイカエックスウイング スタイルシート */

body,p,h1,h2,h3,h4,h5{
	margin: 0px;
	padding: 0px;
}

body{
	background-color: #000;
	font-family: "メイリオ",Meiryo,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","ＭＳ Ｐゴシック",sans-serif;
	font-size: 15px;
	line-height: 26px;
}

h1{
	font-size: 20px;
	line-height: 20px;
	font-weight: 900;
	margin: 0px 0px 20px;
	padding: 0px 0px 7px;
	border-bottom: solid 1px #000;
}

img{
	vertical-align: bottom;
	-ms-interpolation-mode: bicubic;
}
img.img_r{
	border-radius: 10px;
}

a{
	text-decoration: none;
}
a:hover{
	opacity: 0.7;
}

/* ------------------------------------------------------ */

header{
	background: url(header_bg.gif);
	background-position: center top;
	background-repeat: repeat-x;
	width: 100%;
	height: 54px;
}
	#header_logo{
		background: url(header_logo.png);
		background-position: 30px 10px;
		background-repeat: no-repeat;
		width: 1080px;
		height: 54px;
		margin: 0px auto;
	}

footer{
	padding: 20px 0px;
}
	#copyright{
		font-size: 11px;
		line-height: 11px;
		color: #fff;
		text-align: center;
	}

/* ------------------------------------------------------ */

.box_blank{
	clear: both;
}
.text_color1{
	color: red;
}
.text_price{
	font-weight: 900;
}

/* ------------------------------------------------------ */

#main{
	width: 100%;
}

	#box_anime{
		font-family: "游明朝",YuMincho,"ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","ＭＳ Ｐ明朝","MS PMincho",serif;
		font-weight: 900;
		font-size: 30px;
		line-height: 30px;
		color: #fff;
		text-shadow: 0px 0px 5px #000;
		text-align:center;
		width: 1020px;
		height: 200px;
		margin: 0px auto;
		padding: 0px 30px 0px;
	}
		#box_anime1{
			background-image: url(anime1.jpg);
			background-position: 650px -130px;
 			background-size: 510px 300px;
			background-repeat: no-repeat;
			width: 1020px;
			height: 115px;
			padding: 85px 0px 0px;
			opacity: 0;
			animation: anime1 6s linear 0s 1 normal;
		}
		#box_anime2{
			display: none;
			background-image: url(anime2.jpg);
			background-position: -100px -150px;
 			background-size: 510px 300px;
			background-repeat: no-repeat;
			width: 1020px;
			height: 115px;
			padding: 85px 0px 0px;
			opacity: 0;
		}
		#box_anime3{
			display: none;
			background-image: url(anime3.jpg);
			background-position: center;
 			background-size: 510px 300px;
			background-repeat: no-repeat;
			width: 1020px;
			height: 115px;
			padding: 85px 0px 0px;
			opacity: 0;
		}
		#box_anime4{
			display: none;
			background-image: url(anime4.jpg);
			background-position: center;
 			background-size: 1020px 600px;
			background-repeat: no-repeat;
			width: 1020px;
			height: 200px;
			padding: 0px;
			opacity: 0;
		}
		#box_anime5{
			display: none;
			background-image: url(anime4.jpg);
			background-position: center;
 			background-size: 1020px 600px;
			background-repeat: no-repeat;
			width: 1020px;
			height: 200px;
			padding: 0px;
			opacity: 0;
		}
			/* ---------------------------------- */
			@keyframes anime1 {
			    0% { opacity: 0; }
			    30% { opacity: 1; }
			   	90% { opacity: 1; }
			    100% { opacity: 0; background-size: 1020px 600px; background-position: -300px -100px; }
			}
			@keyframes anime2 {
			    0% { opacity: 0; }
			    30% { opacity: 1; }
			   	90% { opacity: 1; }
			    100% { opacity: 0; background-size: 1020px 600px; background-position: 300px -100px; }
			}
			@keyframes anime3 {
			    0% { opacity: 0; }
			    30% { opacity: 1; }
			   	90% { opacity: 1; }
			    100% { opacity: 0; background-size: 1020px 600px; }
			}
			@keyframes anime4 {
			    0% { opacity: 0; }
			    15% { opacity: 0; }
			   	20% { opacity: 1; }
			    25% { opacity: 0; }
			   	30% { opacity: 1; }
			   	35% { opacity: 0; }
			   	90% { opacity: 1; }
			    100% { opacity: 1; }
			}
			@keyframes anime5 {
			    0% { opacity: 1; }
			   	80% { opacity: 1; }
			    90% { opacity: 0; }
			    100% { opacity: 0; }
			}
			/* ---------------------------------- */

	#caption{
		background-color: #fff;
		width: 100%;
	}
		#caption_body{
			width: 1020px;
			margin: 0px auto;
			padding: 30px;
		}
			.box_left{
				float: left;
				width: 500px;
				max-height: 100%;
			}
			.box_right{
				float: right;
				width: 500px;
			}


	#spec{
		background-image: url(bg_image.jpg);
		background-position: center;
		background-repeat: repeat-x;
		width: 100%;
	}
		#spec_body{
			width: 1020px;
			margin: 0px auto;
			padding: 30px;
		}
			#spec_body_l{
				background-image: url(color10_blink_1.jpg);
				float: left;
				width: 600px;
				height: 600px;
				border-radius: 10px;
				position: relative;
			}
				#spec_body_l2{
					background-image: url(color10_blink_2.png);
					width: 600px;
					height: 600px;
					border-radius: 10px;
					opacity: 0;
					position: absolute;
					animation: anime_blink2 15s linear 0s infinite normal;
				}
					#spec_body_l3{
						background-image: url(color10_blink_3.jpg);
						width: 600px;
						height: 600px;
						border-radius: 10px;
						opacity: 0;
						position: absolute;
						animation: anime_blink3 15s linear 0s infinite normal;
					}

			/* ---------------------------------- */
			@keyframes anime_blink2 {
			    0% { opacity: 0; }
			    33% { opacity: 0; }
			   	35% { opacity: 1; }
			   	80% { opacity: 1; }
			   	81% { opacity: 0; }
			    100% { opacity: 0; }
			}
			@keyframes anime_blink3 {
			    0% { opacity: 0; }
			   	64% { opacity: 0; }
			    66% { opacity: 1; }
			    99% { opacity: 1; }
			    100% { opacity: 0; }
			}
			/* ---------------------------------- */

			#spec_body_r{
				float: right;
				width: 410px;
			}

	#how_to{
		background-color: #fff;
		width: 100%;
		text-align: center;
	}
		#how_to_body{
			width: 1020px;
			margin: 0px auto;
			padding: 30px;
		}
	#photo{
		background-image: url(bg_image_rev.jpg);
		background-position: center;
		background-repeat: repeat-x;
		width: 100%;
	}
		#photo_body{
			width: 1020px;
			margin: 0px auto;
			padding: 30px;
		}
	#shop{
		background-color: #fff;
		width: 100%;
	}
		#shop_body{
			width: 1020px;
			margin: 0px auto;
			padding: 30px;
		}
			#item{
				background-color: orange;
				color: #fff;
				border-radius: 8px;
				padding: 10px 0px 8px;
				margin-bottom: 30px;
				text-align: center;
			}
			#shop_link{
				background-color: orange;
				border-radius: 8px;
				color: #fff;
				padding: 10px;
				margin: 30px 0px;
				text-align: right;
			}
				#shop_link img{
					border: solid 5px #fff;
					border-radius: 8px;
				}


/* ------------------------------------------------------ */