/* [ layout_puniika_eng.css ] Puni-Ika series style-sheet */

@charset "utf-8";

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

body{
	background-color: #000;
	font-family: 'Prompt', sans-serif;
	font-size: 15px;
	line-height: 26px;
}

h1{
	font-family: 'Days One', sans-serif;
	font-size: 20px;
	line-height: 20px;
	font-weight: 900;
	margin: 0px 0px 20px;
	padding: 0px 0px 7px;
	border-bottom: solid 1px #000;
	text-align: center;
}
h2{
	font-family: 'Days One', sans-serif;
	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: 13px;
		color: #fff;
		text-align: center;
		max-height: 100%;
	}

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

.box_blank{
	clear: both;
}
.text_item{
	color: red;
}
.text_name2{
	color: #eebd25;
}
.text_name4{
	color: #e6680e;
}
.text_name5{
	color: #e51f1b;
}
.text_name_sub{
	font-size: 14px;
	line-height: 24px;
}

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

#main{
	width: 100%;
	background-image: url(bg_main.jpg);
	background-position: center -180px;
	background-repeat: no-repeat;
	animation: anime_main 60s linear 0s infinite normal;
}
		@keyframes anime_main {
		    0% { background-position: center -180px; }
		    25% { background-position: center -330px; }
		    75% { background-position: center -30px; }
		    100% { background-position: center -180px; }
		}

	#box_anime{
		font-family: 'Days One', sans-serif;
		font-weight: 900;
		font-size: 24px;
		line-height: 24px;
		color: #fff;
		text-shadow: 0px 0px 3px #000;
		width: 1020px;
		height: 240px;
		margin: 0px auto;
		padding: 0px 30px 0px;
	}
		#box_anime1{
			display: block;
			background-image: url(anime_puniika.png);
			background-position: 700px -80px;
 			background-size: 300px 200px;
			background-repeat: no-repeat;
			width: 940px;
			height: 200px;
			padding: 40px 0px 0px 80px;
			opacity: 0;
			animation: anime1 6s linear 0s 1 normal;
			max-height: 100%;
		}
			@keyframes anime1 {
			    0% { opacity: 0; }
			    20% { opacity: 1; }
			   	80% { opacity: 1; }
			    100% { opacity: 0; background-size: 600px 400px; background-position: -40px 0px; }
			}
		#box_anime2{
			display: none;
			background-image: url(anime_wave.png);
			background-position: 0px -100px;
 			background-size: 300px 220px;
			background-repeat: no-repeat;
			width: 250px;
			height: 64px;
			padding: 176px 0px 0px 770px;
			opacity: 0;
			max-height: 100%;
		}
			@keyframes anime2 {
			    0% { opacity: 0; }
			    20% { opacity: 1; }
			   	80% { opacity: 1; }
			    100% { opacity: 0; background-size: 600px 440px; background-position: 400px 70px; }
			}
		#box_anime3{
			display: none;
			width: 1020px;
			height: 136px;
			padding: 104px 0px 0px;
			opacity: 0;
			font-family: 'Frank Ruhl Libre', serif;
			text-align: center;
			max-height: 100%;
		}
			@keyframes anime3 {
			    0% { opacity: 0; }
			    30% { opacity: 1; }
			    40% { opacity: 1; padding-top: 104px; }
			    41% { opacity: 1; padding-top: 94px; }
			    42% { opacity: 1; padding-top: 114px; }
			    43% { opacity: 1; padding-top: 94px; }
			    44% { opacity: 1; padding-top: 114px; }
			    44% { opacity: 1; padding-top: 104px; }
			   	70% { opacity: 1; }
			    100% { opacity: 0;}
			}
		#box_anime4{
			display: none;
			background-image: url(anime_shock1.png);
			background-position: 200px -200px;
 			background-size: 600px 400px;
			background-repeat: no-repeat;
			width: 940px;
			height: 138px;
			padding: 102px 0px 0px 80px;
			opacity: 0;
			max-height: 100%;
		}
			@keyframes anime4 {
			    0% { opacity: 0; }
			    20% { opacity: 1; }
			   	80% { opacity: 1; }
			    100% { opacity: 0; background-size: 600px 400px; background-position: 300px 0px; }
			}
		#box_anime5{
			display: none;
			background-image: url(anime_xwing.png);
			background-position: center center;
 			background-size: 400px 200px;
			background-repeat: no-repeat;
			width: 1020px;
			height: 138px;
			padding: 102px 0px 0px;
			opacity: 0;
			text-align: center;
			max-height: 100%;
		}
			@keyframes anime5 {
			    0% { opacity: 0; }
			    20% { opacity: 1; }
			   	80% { opacity: 1; }
			    100% { opacity: 0; background-size: 800px 400px; }
			}
		#box_anime6{
			display: none;
			width: 1020px;
			height: 136px;
			padding: 104px 0px 0px;
			opacity: 0;
			font-family: 'Frank Ruhl Libre', serif;
			text-align: center;
			max-height: 100%;
		}
			@keyframes anime6 {
			    0% { opacity: 0; }
			    30% { opacity: 1; }
			   	60% { opacity: 1; }
			    90% { opacity: 0;}
			    100% { opacity: 0;}
			}
		#box_anime7{
			display: block;
			background-image: url(logo_puniika.png);
			background-position: center 40px;
 			background-size: 300px 70px;
			background-repeat: no-repeat;
			width: 1020px;
			height: 240px;
			padding: 0px 0px;
			opacity: 0;
		}
			@keyframes anime7 {
			    0% { opacity: 0; background-position: center 40px; }
			    4% { opacity: 0.1; background-position: center 43px; }
			    8% { opacity: 0.2; background-position: center 49px; }
			    12% { opacity: 0.4; background-position: center 61px; }
			    16% { opacity: 1; background-size: 300px 70px; background-position: center 80px; }
			    18% { opacity: 1; background-size: 300px 30px; background-position: center 120px; }
			    20% { opacity: 1; background-size: 300px 90px; background-position: center 40px; }
			    22% { opacity: 1; background-size: 300px 50px; background-position: center 40px; }
			    23% { opacity: 1; background-size: 300px 55px; background-position: center 45px; }
			    24% { opacity: 1; background-size: 300px 70px; background-position: center 50px; }
			    25% { opacity: 1; background-size: 300px 70px; background-position: center 60px; }
			    26% { opacity: 1; background-size: 300px 70px; background-position: center 80px; }
			    28% { opacity: 1; background-size: 300px 50px; background-position: center 100px; }
			    30% { opacity: 1; background-size: 300px 80px; background-position: center 70px; }
			    32% { opacity: 1; background-size: 300px 60px; background-position: center 90px; }
			    34% { opacity: 1; background-size: 300px 70px; background-position: center 80px; }
			    90% { opacity: 1; background-size: 300px 70px; background-position: center 80px; }
			    100% { opacity: 0; background-size: 300px 70px; background-position: center 80px; }
			}
		#box_anime8{
			display: none;
			background-image: url(logo_lumica.png);
			background-position: center 100px;
 			background-size: 200px 41px;
			background-repeat: no-repeat;
			width: 1020px;
			height: 240px;
			padding: 0px;
			opacity: 0;
		}
			@keyframes anime8 {
			    0% { opacity: 0; }
			    10% { opacity: 1; }
			    20% { opacity: 1; background-position: center 100px; }
			    25% { opacity: 1; background-position: center 90px; }
			    80% { opacity: 1; background-position: center 90px; }
			    100% { opacity: 0; background-position: center 90px; }
			}
		#box_anime8b{
			display: none;
			background-image: url(logo_japan.png);
			background-position: center 132px;
 			background-size: 260px 20px;
			background-repeat: no-repeat;
			width: 1020px;
			height: 240px;
			padding: 0px;
			opacity: 0;
		}
			@keyframes anime8b {
			    0% { opacity: 0; }
			    25% { opacity: 0; }
			   	30% { opacity: 1; }
			    80% { opacity: 1; }
			    100% { opacity: 0; }
			}

	#caption{
		background-color: #fff;
		width: 100%;
	}
		#caption_body{
			width: 1020px;
			margin: 0px auto;
			padding: 30px;
		}
			.box_left{
				float: left;
				width: 380px;
				max-height: 100%;
			}
			.box_right{
				float: right;
				width: 620px;
				padding: 30px 0px 0px;
			}
				.box_right p{
					background-color: navy;
					color: #fff;
					border-radius: 8px;
					padding: 12px 0px 11px;
					margin: 40px 0px;
					text-align: center;
					font-weight: bold;
					font-size: 18px;
					line-height: 18px;
					max-height: 100%;
				}

	#xwing{
		background-image: url(bg_xwing.jpg);
		background-position: center;
		background-repeat: repeat-x;
		width: 100%;
	}
		#xwing_body{
			width: 530px;
			margin: 0px auto;
			padding: 30px 30px 30px 520px;
			max-height: 100%;
		}

	#wave{
		background-image: url(bg_wave.jpg);
		background-position: center;
		background-repeat: repeat-x;
		width: 100%;
	}
		#wave_body{
			width: 530px;
			margin: 0px auto;
			padding: 30px 520px 30px 30px;
			max-height: 100%;
		}

	#puniika{
		background-image: url(bg_puniika.jpg);
		background-position: center;
		background-repeat: repeat-x;
		width: 100%;
	}
		#puniika_body{
			width: 530px;
			margin: 0px auto;
			padding: 30px 30px 30px 520px;
			max-height: 100%;
		}

	#shock1{
		background-image: url(bg_shock1.jpg);
		background-position: center;
		background-repeat: repeat-x;
		width: 100%;
	}
		#shock1_body{
			width: 530px;
			margin: 0px auto;
			padding: 30px 520px 30px 30px;
			max-height: 100%;
		}

	#spec{
		background-image: url(bg_sub_xwing.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_sub_wave.jpg);
		background-position: center;
		background-repeat: repeat-x;
		width: 100%;
	}
		#photo_body{
			width: 1020px;
			margin: 0px auto;
			padding: 30px;
		}
	#related_content{
		background-color: #fff;
		width: 100%;
		text-align: center;
		padding: 0px 0px 30px;
	}
		#related_content_body{
			width: 1020px;
			margin: 0px auto;
			padding: 30px;
		}
			#box_related_content{
				font-family: 'Days One', sans-serif;
				font-weight: 900;
				font-size: 20px;
				line-height: 20px;
				color: #000;
				width: 1020px;
				max-height: 100%;
				margin: 0px 0px 20px;
			}
				#related_content_body img{
					width: 505px;
					height: 80px;
				}


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