/* [ layout_metaljacker_eng.css ] メタルジャッカー英文 スタイルシート */

@charset "utf-8";

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

body{
	background-color: #000;
	font-family: 'Prompt', sans-serif;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}
h1,h2,h3,h4{
	font-family: 'Days One', sans-serif;
}
img{
	vertical-align: bottom;
	-ms-interpolation-mode: bicubic;
}
a{
	text-decoration: none;
}
a:hover{
	opacity: 0.7;
}

table{
	border-collapse: collapse;
	width: 100%;
	margin: 0px;
	padding: 0px;
}
	table span{
		font-weight: bold;
	}
td{
	border: solid 1px #888;
	padding: 10px 10px 9px;
	vertical-align: top;
	text-align: center;
	color: #fff;
}


/* 画面サイズ ( S ) ここから --------------------------------------------------------- */
@media screen and (max-width: 1080px){

body{
	font-size: 15px;
	line-height: 28px;
}

h1{
	font-size: 17px;
	line-height: 17px;
	text-align: center;
	margin: 10px 0px 20px;
}
	h1 span:first-child{
		display: inline-block;
		width: 180px;
	}
	h1 span:last-child{
		display: inline-block;
		font-size: 15px;
		line-height: 20px;
		width: 320px;
	}
h2{
	color: #fff;
	font-size: 16px;
	line-height: 22px;
}
h3{
	color: #fff;
	font-size: 16px;
	line-height: 16px;
	padding: 30px 0px 10px 0px;
}
h4{
	display: inline-block;
	color: #fff;
	font-size: 16px;
	line-height: 16px;
}

header{
	background: url(header_bg.gif);
	background-size: 100%;
	background-repeat: no-repeat;
	width: 100%;
}
	#header_logo{
		background: url(header_lumica.png);
		background-size: 120px 18px;
		background-position: 18px 8px;
		background-repeat: no-repeat;
		width: 100%;
	}
		#header_logo img{
			width: 100%;
			height: 30px;
		}


footer{
	padding: 20px 0px;
}
	#starlite{
		padding: 0px 0px 20px;
		text-align: center;
	}
		#starlite img{
			width: 160px;
		}
	#address{
		width: 90%;
		margin: 0px auto;
		font-size: 11px;
		line-height: 13px;
		color: #fff;
		text-align: center;
	}
		#add_jp{
			
		}
			#add_jp span:nth-child(1){
				display: inline-block;
				width: 200px;
			}
			#add_jp span:nth-child(2){
				display: inline-block;
				width: 290px;
			}
			#add_jp span:nth-child(3){
				display: inline-block;
				width: 130px;
			}
		#add_us{
			padding-top: 8px;
		}
			#add_us span:nth-child(1){
				display: inline-block;
				width: 100px;
			}
			#add_us span:nth-child(2){
				display: inline-block;
				width: 230px;
			}
			#add_us span:nth-child(3){
				display: inline-block;
				width: 110px;
			}
		#add_url{
			padding-top: 8px;
		}
		#copyright{
			padding-top: 20px;
		}

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

#back{
	width: 100%;
	padding: 0px;
	margin: 0px;
}

#main{
	width: 100%;
}

	#box_main_img{
		background: url(main_img_bg.jpg);
		background-size: 300%;
		background-position: left 50% center;
		background-repeat: no-repeat;
		width: 100%;
		animation: anime1 30s linear 0s infinite normal;
	}
	/* ---------------------------------- */
	@keyframes anime1 {
		0% { background-position: left 50% center; }
		10.3% { background-position: left 50% center; }
		10.8% { background-position: left 100% center; }
		36.3% { background-position: left 100% center; }
		36.8% { background-position: left 50% center; }
		62.3% { background-position: left 50% center; }
		62.8% { background-position: left 0% center; }
		88.3% { background-position: left 0% center; }
		88.8% { background-position: left 50% center; }
		100% { background-position: left 50% center; }
	}
	/* ---------------------------------- */
		#main_logo{
			background: url(main_logo.png);
			background-size: 100%;
			background-repeat: no-repeat;
			width: 100%;
		}
			#main_img_2ways{
				background: url(main_img_2ways.png);
				background-size: 300%;
				background-position: left 50% center;
				background-repeat: no-repeat;
				width: 100%;
				animation: anime2 30s linear 0s infinite normal;
			}
			/* ---------------------------------- */
			@keyframes anime2 {
				0% { background-position: left 50% center; }
				10% { background-position: left 50% center; }
				10.3% { background-position: left 48% center; }
				10.8% { background-position: left 63% center; }
				36% { background-position: left 63% center; }
				36.3% { background-position: left 65% center; }
				36.8% { background-position: left 50% center; }
				62% { background-position: left 50% center; }
				62.3% { background-position: left 52% center; }
				62.8% { background-position: left 37% center; }
				88% { background-position: left 37% center; }
				88.3% { background-position: left 35% center; }
				88.8% { background-position: left 50% center; }
				100% { background-position: left 50% center; }
			}
			/* ---------------------------------- */

				#main_img_2ways img{
					width: 100%;
				}

	#box_caption{
		background-color: #fff;
		width: 100%;
	}
		#caption{
			width: 90%;
			margin: 0px;
			padding: 30px 5% 40px;
		}

	#box_type_a{
		background: url(type_a_bg.jpg);
		background-size: 100%;
		background-repeat: no-repeat;
		background-color: #fff;
		width: 100%;
		padding-bottom: 20px;
	}
		#type_a_title{
			width: 65%;
			padding: 40px 10% 10px 25%;
			text-align: left;
		}
		#box_type_a_l{
			display: inline-block;
			width: 80%;
			padding: 0px 10% 0px;
		}
			#box_type_a_l img{ /* original w744px h372px */
				width: 100%;
			}
		#box_type_a_r{
			display: inline-block;
			width: 90%;
			padding: 0px 5% 40px;
		}
			#box_type_a_r h3{
				color: #e500ac;
			}

		#box_lineup_a{
			
		}
			#box_lineup_a div{
				display: inline-block;
				width: 100%;
				text-align: center;
			}
			#box_lineup_a div:nth-child(2n-1){
				margin: 0px;
			}
			#box_lineup_a div:nth-child(2n){
				margin: 0px;
			}
				#box_lineup_a span{
					display: inline-block;
					padding: 8px 15px 6px;
					background-color: #e500ac;
					border-radius: 10px;
					color: #fff;
					font-size: 16px;
					line-height: 20px;
				}
				#box_lineup_a img{
					width: 80%;
					transform: rotate(-15deg);
					padding: 50px 0px 50px 20px;
				}

	#box_type_b{
		background: url(type_b_bg.jpg);
		background-size: 100%;
		background-repeat: no-repeat;
		background-color: #fff;
		width: 100%;
		padding-bottom: 20px;
	}
		#type_b_title{
			width: 65%;
			padding: 40px 25% 10px 10%;
			text-align: left;
		}
		#box_type_b_l{
			display: inline-block;
			width: 80%;
			padding: 0px 10% 0px;
		}
			#box_type_b_l img{ /* original w744px h396px */
				width: 100%;
			}
		#box_type_b_r{
			display: inline-block;
			width: 90%;
			padding: 0px 5% 40px;
		}
			#box_type_b_r h3{
				color: #0063c4;
			}

		#box_lineup_b{
			
		}
			#box_lineup_b div{
				display: inline-block;
				width: 100%;
				text-align: center;
			}
			#box_lineup_b div:nth-child(2n-1){
				margin: 0px;
			}
			#box_lineup_b div:nth-child(2n){
				margin: 0px;
			}
				#box_lineup_b span{
					display: inline-block;
					padding: 8px 15px 6px;
					background-color: #0063c4;
					border-radius: 10px;
					color: #fff;
					font-size: 16px;
					line-height: 20px;
				}
				#box_lineup_b img{
					width: 80%;
					transform: rotate(-15deg);
					padding: 50px 0px 50px 20px;
				}

	#box_2ways{
		background-color: #eee;
		width: 100%;
		padding: 30px 0px;
	}
		#box_2ways h2{
			text-align: center;
			color: #000;
		}
		#box_2ways_caption{
			width: 90%;
			padding: 20px 5% 40px;
		}
			#box_2ways_caption span{
				text-decoration: underline;
			}
		#box_2ways_img{
			text-align: center;
		}
			#box_2ways_img img{
				width: 80%;
			}
		#box_2ways_sub1{
			text-align: center;
			width: 90%;
			padding: 0px 5% 15px;
		}
			#box_2ways_sub1 span{
				display: inline-block;
				background-color: #888;
				color: #fff;
				padding: 6px 15px 5px;
				border-radius: 12px;
			}
		#box_2ways_sub2{
			text-align: center;
			width: 90%;
			padding: 15px 5% 0px;
		}
			#box_2ways_sub2 div{
				display: inline-block;
				background-color: #888;
				color: #fff;
				padding: 6px 15px 5px;
				border-radius: 12px;
			}
				#box_2ways_sub2 div span:first-child{
					display: inline-block;
					width: 126px;
				}
				#box_2ways_sub2 div span:last-child{
					display: inline-block;
					width: 226px;
				}
		#box_2ways_sub3{
			width: 90%;
			padding: 40px 5% 40px;
		}
		#box_2ways_sub4{
			width: 80%;
			padding: 12px 5%;
			margin: 0px 5%;
			background-color: #000;
			color: #fff;
			border-radius: 12px;
		}
			#box_2ways_sub4 div:first-child{
				display: inline-block;
				width: 100%;
				padding: 0px;
			}
			#box_2ways_sub4 div:last-child{
				display: inline-block;
				width: 100%;
				padding: 12px 0px 4px;
				text-align: center;
			}
			#box_2ways_sub4 img{
				height: 115px;
				padding: 0px 15px 3px;
			}

	#box_spec{
		background-color: #000;
		width: 96%;
		padding: 20px 2%;
		text-align: center;
		color: #fff;
	}
		#box_spec h2{
			display: block;
			width: 100%;
			padding: 0px 0px 20px;
		}
		.spec_1{
			border: solid 1px #888;
			padding: 10px 0px 9px;
			margin-bottom: 1px;
		}
		#spec_2a{
			padding: 0px;
			margin-bottom: 19px;
		}
			#spec_2a div{
				display: inline-block;
				width: 100%;
				margin-bottom: 1px;
				vertical-align: bottom;
			}
		#spec_2b{
			padding: 0px;
			margin-bottom: 19px;
		}
			#spec_2b div{
				display: inline-block;
				width: 100%;
				margin-bottom: 1px;
				vertical-align: bottom;
			}

	#box_link{
		background-color: #000;
		width: 100%;
	}
		#box_link div{

		}
			#box_link img{
				width: 100%;
			}

	#box_link2{
		background-color: #fff;
		width: 100%;
		padding-bottom: 15px;
	}
		#box_link2 div{

		}
			#box_link2 img{
				width: 100%;
			}

}
/* 画面サイズ ( S ) ここまで --------------------------------------------------------- */

/* 画面サイズ ( L ) ここから --------------------------------------------------------- */
@media screen and (min-width: 1081px){

body{
	background: url(body_bg.gif);
	background-size: 160px 50px;
	background-position: center top;
	font-size: 18px;
	line-height: 30px;
}

h1{
	font-size: 24px;
	line-height: 24px;
	text-align: center;
	margin: 10px 0px 20px;
}
	h1 span:first-child{
		display: inline-block;
		width: 250px;
	}
	h1 span:last-child{
		display: inline-block;
		font-size: 18px;
		line-height: 18px;
		width: 400px;
	}
h2{
	color: #fff;
	font-size: 20px;
	line-height: 20px;
}
h3{
	color: #fff;
	font-size: 20px;
	line-height: 20px;
	padding: 30px 0px 10px 0px;
}
h4{
	display: inline-block;
	color: #fff;
	font-size: 20px;
	line-height: 20px;
}

header{
	background: url(header_bg.gif);
	width: 1080px;
	height: 54px;
	margin: 0px auto;
}
	#header_logo{
		background: url(header_lumica.png);
		background-size: 240px 36px;
		background-position: 40px 12px;
		background-repeat: no-repeat;
		width: 100%;
	}
		#header_logo img{
			width: 100%;
			height: 54px;
		}

footer{
	padding: 20px 0px 30px;
}
	#starlite{
		padding: 0px 0px 20px;
		text-align: center;
	}
		#starlite img{
			width: 160px;
		}
	#address{
		width: 90%;
		margin: 0px auto;
		font-size: 11px;
		line-height: 13px;
		color: #fff;
		text-align: center;
	}
		#add_jp{
			
		}
			#add_jp span{
				display: inline-block;
				padding: 0px 5px;
			}
		#add_us{
			padding-top: 4px;
		}
			#add_us span{
				display: inline-block;
				padding: 0px 5px;
			}
		#add_url{
			padding-top: 4px;
		}
		#copyright{
			padding-top: 15px;
		}

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

#back{
	background: url(back_bg.png);
	width: 1080px;
	padding: 0px 10px;
	margin: 0px auto;
}

#main{
	width: 100%;
}

	#box_main_img{
		background: url(main_img_bg.jpg);
		background-position: -1080px 0px;
		background-repeat: no-repeat;
		width: 1080px;
		height: 540px;
		animation: anime1 30s linear 0s infinite normal;
	}
	/* ---------------------------------- */
	@keyframes anime1 {
		0% { background-position: -1080px 0px; }
		10.3% { background-position: -1080px 0px; }
		10.8% { background-position: -2160px 0px; }
		36.3% { background-position: -2160px 0px; }
		36.8% { background-position: -1080px 0px; }
		62.3% { background-position: -1080px 0px; }
		62.8% { background-position: 0px 0px; }
		88.3% { background-position: 0px 0px; }
		88.8% { background-position: -1080px 0px; }
		100% { background-position: -1080px 0px; }
	}
	/* ---------------------------------- */
		#main_logo{
			background: url(main_logo.png);
			background-repeat: no-repeat;
			width: 1080px;
			height: 540px;
		}
			#main_img_2ways{
				background: url(main_img_2ways.png);
				background-position: -1080px 0px;
				background-repeat: no-repeat;
				width: 1080px;
				height: 540px;
				animation: anime2 30s linear 0s infinite normal;
			}
			/* ---------------------------------- */
			@keyframes anime2 {
				0% { background-position: -1080px 0px; }
				10% { background-position: -1080px 0px; }
				10.3% { background-position: -1040px 0px; }
				10.8% { background-position: -1360px 0px; }
				36% { background-position: -1360px 0px; }
				36.3% { background-position: -1400px 0px; }
				36.8% { background-position: -1080px 0px; }
				62% { background-position: -1080px 0px; }
				62.3% { background-position: -1120px 0px; }
				62.8% { background-position: -800px 0px; }
				88% { background-position: -800px 0px; }
				88.3% { background-position: -760px 0px; }
				88.8% { background-position: -1080px 0px; }
				100% { background-position: -1080px 0px; }
			}
			/* ---------------------------------- */

	#box_caption{
		background-color: #fff;
		width: 100%;
	}
		#caption{
			width: 900px;
			margin: 0px auto;
			padding: 40px 40px 50px;
		}

	#box_type_a{
		background: url(type_a_bg.jpg);
		background-repeat: no-repeat;
		background-color: #fff;
		width: 1080px;
		padding-bottom: 80px;
	}
		#type_a_title{
			padding: 60px 60px 0px 0px;
			text-align: right;
		}
		#box_type_a_l{
			display: inline-block;
			width: 560px;
			padding: 0px 0px 0px 50px;
		}
			#box_type_a_l img{ /* original w744px h372px */
				width: 558px;
				padding-bottom: 80px;
			}
		#box_type_a_r{
			display: inline-block;
			width: 380px;
			padding: 20px 0px 0px 30px;
		}
		#box_lineup_a{
			
		}
			#box_lineup_a div{
				display: inline-block;
				width: 465px;
				text-align: center;
			}
			#box_lineup_a div:nth-child(2n-1){
				margin: 70px 25px 0px 50px;
			}
			#box_lineup_a div:nth-child(2n){
				margin: 70px 50px 0px 25px;
			}
				#box_lineup_a span{
					display: inline-block;
					padding: 8px 20px 6px;
					background-color: #e500ac;
					border-radius: 10px;
					color: #fff;
					font-size: 16px;
					line-height: 20px;
				}
				#box_lineup_a img{
					width: 450px;
					transform: rotate(-15deg);
					padding: 70px 0px 0px 15px;
				}

	#box_type_b{
		background: url(type_b_bg.jpg);
		background-repeat: no-repeat;
		background-color: #fff;
		width: 1080px;
		padding-bottom: 80px;
	}
		#type_b_title{
			padding: 60px 0px 0px 60px;
		}
		#box_type_b_l{
			display: inline-block;
			width: 560px;
			padding: 0px 0px 0px 50px;
		}
			#box_type_b_l img{ /* original w744px h396px */
				width: 558px;
				padding-bottom: 40px;
			}
		#box_type_b_r{
			display: inline-block;
			width: 380px;
			padding: 20px 0px 0px 30px;
		}
		#box_lineup_b{
			
		}
			#box_lineup_b div{
				display: inline-block;
				width: 465px;
				text-align: center;
			}
			#box_lineup_b div:nth-child(2n-1){
				margin: 70px 25px 0px 50px;
			}
			#box_lineup_b div:nth-child(2n){
				margin: 70px 50px 0px 25px;
			}
				#box_lineup_b span{
					display: inline-block;
					padding: 8px 20px 6px;
					background-color: #0063c4;
					border-radius: 10px;
					color: #fff;
					font-size: 16px;
					line-height: 20px;
				}
				#box_lineup_b img{
					width: 450px;
					transform: rotate(-15deg);
					padding: 70px 0px 0px 15px;
				}

	#box_2ways{
		background-color: #eee;
		width: 980px;
		padding: 50px 50px;
	}
		#box_2ways h2{
			text-align: center;
			color: #000;
		}
		#box_2ways_caption{
			width: 900px;
			padding: 30px 40px 50px;
		}
			#box_2ways_caption span{
				text-decoration: underline;
			}
		#box_2ways_img{
			text-align: center;
		}
		#box_2ways_sub1{
			padding: 0px 0px 20px 80px;
		}
			#box_2ways_sub1 span{
				display: inline-block;
				background-color: #888;
				color: #fff;
				padding: 6px 30px 5px;
				border-radius: 12px;
			}
		#box_2ways_sub2{
			text-align: right;
			padding: 20px 80px 0px 0px;
		}
			#box_2ways_sub2 div{
				display: inline-block;
				background-color: #888;
				color: #fff;
				padding: 6px 30px 5px;
				border-radius: 12px;
			}
		#box_2ways_sub3{
			width: 900px;
			padding: 50px 40px 50px;
		}
		#box_2ways_sub4{
			width: 840px;
			padding: 12px 30px;
			margin: 0px auto;
			background-color: #000;
			color: #fff;
			border-radius: 12px;
		}
			#box_2ways_sub4 div:first-child{
				display: inline-block;
				width: 530px;
				padding: 0px 0px;
			}
			#box_2ways_sub4 div:last-child{
				display: inline-block;
				width: 300px;
				padding: 0px 0px 0px;
				text-align: center;
			}
			#box_2ways_sub4 img{
				height: 115px;
				padding: 0px 15px 3px;
			}

	#box_spec{
		background-color: #000;
		width: 980px;
		padding: 40px 50px;
		text-align: center;
		color: #fff;
	}
		#box_spec h2{
			display: block;
			width: 100%;
			padding: 0px 0px 30px;
		}
		.spec_1{
			border: solid 1px #888;
			padding: 10px 0px 9px;
			margin-bottom: 1px;
		}
		#spec_2a{
			padding: 0px;
			margin-bottom: 20px;
		}
			#spec_2a div{
				display: inline-block;
				width: 326px;
				margin: 0px;
				vertical-align: bottom;
			}
			#spec_2a div:nth-child(2){
				margin: 0px 1px;
			}
		#spec_2b{
			padding: 0px;
			margin-bottom: 20px;
		}
			#spec_2b div:first-child{
				display: inline-block;
				width: 490px;
				vertical-align: bottom;
			}
			#spec_2b div:last-child{
				display: inline-block;
				width: 489px;
				vertical-align: bottom;
				margin-left: 1px;
			}

	#box_link{
		background-color: #fff;
		width: 100%;
		padding: 20px 0px 10px;
	}
		#box_link div{
			width: 1024px;
			padding: 0px 0px 0px;
			margin: 0px auto;
			text-align: center;
		}
			#box_link img{
				width: 485px;
				margin: 0px 5px 10px;
				border-radius: 8px;
			}


}
/* 画面サイズ ( L ) ここまで --------------------------------------------------------- */

/* 画面サイズ ( M ) ここから --------------------------------------------------------- */
@media screen and (min-width: 641px) and (max-width: 1080px){

header{
	background: url(header_bg.gif);
	background-size: 100%;
	background-repeat: no-repeat;
	width: 100%;
}
	#header_logo{
		background: url(header_lumica.png);
		background-size: 180px 27px;
		background-position: 30px 9px;
		background-repeat: no-repeat;
		width: 100%;
	}
		#header_logo img{
			width: 100%;
			height: 40px;
		}

	#box_type_a{
		background: url(type_a_bg.jpg);
		background-size: 100%;
		background-repeat: no-repeat;
		background-color: #fff;
		width: 100%;
		padding-bottom: 20px;
	}
		#type_a_title{
			width: 65%;
			padding: 40px 10% 30px 25%;
			text-align: left;
		}
		#box_type_a_l{
			display: inline-block;
			width: 80%;
			padding: 0px 10% 0px;
			text-align: center;
		}
			#box_type_a_l img{ /* original w744px h372px */
				width: 500px;
			}
		#box_type_a_r{
			display: inline-block;
			width: 90%;
			padding: 0px 5% 40px;
		}
			#box_type_a_r h3{
				color: #e500ac;
			}

		#box_lineup_a{
			
		}
			#box_lineup_a div{
				display: inline-block;
				width: 100%;
				text-align: center;
			}
				#box_lineup_a img{
					width: 500px;
					transform: rotate(-15deg);
					padding: 50px 0px 50px 20px;
				}

	#box_type_b{
		background: url(type_b_bg.jpg);
		background-size: 100%;
		background-repeat: no-repeat;
		background-color: #fff;
		width: 100%;
		padding-bottom: 20px;
	}
		#type_b_title{
			width: 65%;
			padding: 40px 25% 30px 10%;
			text-align: left;
		}
		#box_type_b_l{
			display: inline-block;
			width: 80%;
			padding: 0px 10% 0px;
			text-align: center;
		}
			#box_type_b_l img{ /* original w744px h396px */
				width: 500px;
			}
		#box_type_b_r{
			display: inline-block;
			width: 90%;
			padding: 0px 5% 40px;
		}
			#box_type_b_r h3{
				color: #0063c4;
			}

		#box_lineup_b{
			
		}
			#box_lineup_b div{
				display: inline-block;
				width: 100%;
				text-align: center;
			}
				#box_lineup_b img{
					width: 500px;
					transform: rotate(-15deg);
					padding: 50px 0px 50px 20px;
				}

	#box_2ways{
		background-color: #eee;
		width: 100%;
		padding: 30px 0px;
	}
		#box_2ways_img{
			text-align: center;
		}
			#box_2ways_img img{
				width: 500px;
			}

	#box_spec{
		background-color: #000;
		width: 90%;
		padding: 20px 5%;
		text-align: center;
		color: #fff;
	}

	#box_link{
		background-color: #fff;
		width: 100%;
		padding: 20px 0px 10px;
	}
		#box_link div{
			width: 96%;
			padding: 0px 2% 0px;
			margin: 0px auto;
			text-align: center;
		}
			#box_link img{
				width: 48%;
				margin: 0px 1% 10px;
				border-radius: 8px;
			}


}
/* 画面サイズ ( M ) ここまで --------------------------------------------------------- */