@charset "UTF-8";
a:focus { outline: none; }

body {
	position: relative;
	width: 100%;
	min-width: 1240px;
	font-family: "Noto Sans Japanese", "Meiryo UI", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	background: url(../img/bg01.jpg);
}

/*
 INTRODUCTION
-----------------------------------------------------*/
h1 {
	position: relative;
	width: 1240px;
	margin: 0 auto;
	padding: 120px 0 68px;
}
	.h1logo {
		position:absolute;
		width:225px;
		height:132px;
		top: 119px;
		right: 40px;
	}

	/* MOVIE BLOCK --*/
	.chara_block {
		width: 1240px;
		margin: 0 auto 180px;
	}
		.chara_block h2 {
			margin: 0 0 80px;
			text-align: center;
		}
		.chara_block h2.enemyH2 {
			margin: 80px 0 80px;
		}
		#chara {
			position: relative;
			width: 1240px;
			height: 768px;
			background: url(../img/character/chara_list_bg.jpg) no-repeat 0 0;
		}
			.charaImg_box,
			.charaList_box {
				position: absolute;
				width: 1240px;
				height: 768px;
				top: 0;
				left: 0;
			}
				.charaImg_lbl {
					position: absolute;
					width: 1240px;
					height: 768px;
					top: 0;
					left: 0;
				}
				.charaList {
					position: absolute;
					width: 1240px;
					height: 768px;
					top: 0;
					left: 0;
				}
					.charaList li {
						position: absolute;
						width: 194px;
						height: 80px;
						padding: 8px 0;
					}
					.c01 { top: 124px; left: 40px; }
					.c02 { top: 212px; left: 40px; }
					.c03 { top: 300px; left: 40px; }
					.c04 { top: 388px; left: 40px; }
					.c05 { top: 476px; left: 40px; }
					.c06 { top: 566px; left: 40px; }

					.c07 { top: 80px; left: 201px; }
					.c08 { top: 168px; left: 201px; }
					.c09 { top: 256px; left: 201px; }
					.c10 { top: 344px; left: 201px; }
					.c11 { top: 432px; left: 201px; }
					.c12 { top: 520px; left: 201px; }
					.c13 { top: 608px; left: 201px; }

					.c14 { top: 566px; left: 362px; }
					.c15 { top: 608px; left: 523px; }
					.c16 { top: 566px; left: 684px; }

					.c17 { top: 80px; left: 845px; }
					.c18 { top: 168px; left: 845px; }
					.c19 { top: 256px; left: 845px; }
					.c20 { top: 344px; left: 845px; }
					.c21 { top: 432px; left: 845px; }
					.c22 { top: 520px; left: 845px; }
					.c23 { top: 608px; left: 845px; }

					.c24 { top: 124px; left: 1006px; }
					.c25 { top: 212px; left: 1006px; }
					.c26 { top: 300px; left: 1006px; }
					.c27 { top: 388px; left: 1006px; }
					.c28 { top: 476px; left: 1006px; }
					.c29 { top: 566px; left: 1006px; }
						.up a:after {
							position: absolute;
							display: block;
							content: "";
							width: 38px;
							height: 32px;
							top: 14px;
							right: 5px;
							background: url(../img/character/up.png);
						}
		#enemy {
			position: relative;
			width: 1240px;
			height: 328px;
			background: url(../img/character/enemy_list_bg.jpg) no-repeat 0 0;
		}
			.enemyList_box {
				position: absolute;
				width: 1240px;
				height: 328px;
				top: 0;
				left: 0;
			}
				.enemyList {
					position: absolute;
					width: 1240px;
					height: 328px;
					top: 0;
					left: 0;
				}
					.enemyList li {
						position: absolute;
						width: 194px;
						height: 80px;
					}
					.e01 { top: 124px; left: 200px; }
					.e02 { top: 80px; left: 362px; }
					.e03 { top: 168px; left: 362px; }
					.e04 { top: 124px; left: 845px; }
					.e05 { top: 80px; left: 684px; }
					.e06 { top: 168px; left: 684px; }
					.e07 { top: 124px; left: 523px; }
/* DETAILE ---------------------------------------*/
	.chara_det {
		width: 100%;
		/*height: 1060px;*/
		margin: 0 0 80px;
	}
	/* CHARACTER */
	.c_det_01 {
		background: url(../img/character/det/c01_main_img01.png) no-repeat 50% 0;
	}
	.c_det_02 {
		background: url(../img/character/det/c02_main_img01.png) no-repeat 50% 0;
	}
	.c_det_03 {
		background: url(../img/character/det/c03_main_img01.png) no-repeat 50% 0;
	}
	.c_det_04 {
		background: url(../img/character/det/c04_main_img01.png) no-repeat 50% 0;
	}
	.c_det_05 {
		background: url(../img/character/det/c05_main_img01.png) no-repeat 50% 0;
	}
	.c_det_06 {
		background: url(../img/character/det/c06_main_img01.png) no-repeat 50% 0;
	}
	.c_det_07 {
		background: url(../img/character/det/c07_main_img01.png) no-repeat 50% 0;
	}
	.c_det_08 {
		background: url(../img/character/det/c08_main_img01.png) no-repeat 50% 0;
	}
	.c_det_09 {
		background: url(../img/character/det/c09_main_img01.png) no-repeat 50% 0;
	}
	.c_det_10 {
		background: url(../img/character/det/c10_main_img01.png) no-repeat 50% 0;
	}
	.c_det_11 {
		background: url(../img/character/det/c11_main_img01.png) no-repeat 50% 0;
	}
	.c_det_12 {
		background: url(../img/character/det/c12_main_img01.png) no-repeat 50% 0;
	}
	.c_det_13 {
		background: url(../img/character/det/c13_main_img01.png) no-repeat 50% 0;
	}
	.c_det_14 {
		background: url(../img/character/det/c14_main_img01.png) no-repeat 50% 0;
	}
	.c_det_15 {
		background: url(../img/character/det/c15_main_img01.png) no-repeat 50% 0;
	}
	.c_det_16 {
		background: url(../img/character/det/c16_main_img01.png) no-repeat 50% 0;
	}
	.c_det_17 {
		background: url(../img/character/det/c17_main_img01.png) no-repeat 50% 0;
	}
	.c_det_18 {
		background: url(../img/character/det/c18_main_img01.png) no-repeat 50% 0;
	}
	.c_det_19 {
		background: url(../img/character/det/c19_main_img01.png) no-repeat 50% 0;
	}
	.c_det_20 {
		background: url(../img/character/det/c20_main_img01.png) no-repeat 50% 0;
	}
	.c_det_21 {
		background: url(../img/character/det/c21_main_img01.png) no-repeat 50% 0;
	}
	.c_det_22 {
		background: url(../img/character/det/c22_main_img01.png) no-repeat 50% 0;
	}
	.c_det_23 {
		background: url(../img/character/det/c23_main_img01.png) no-repeat 50% 0;
	}
	.c_det_24 {
		background: url(../img/character/det/c24_main_img01.png) no-repeat 50% 0;
	}
	.c_det_25 {
		background: url(../img/character/det/c25_main_img01.png) no-repeat 50% 0;
	}
	.c_det_26 {
		background: url(../img/character/det/c26_main_img01.png) no-repeat 50% 0;
	}
	.c_det_27 {
		background: url(../img/character/det/c27_main_img01.png) no-repeat 50% 0;
	}
	.c_det_28 {
		background: url(../img/character/det/c28_main_img01.png) no-repeat 50% 0;
	}
	.c_det_29 {
		background: url(../img/character/det/c29_main_img01.png) no-repeat 50% 0;
	}
	/* ENEMY */
	.e_det_01 {
		height: 822px;
		background: url(../img/character/det/e01_main_img01.png) no-repeat 50% 0;
	}
	.e_det_02 {
		height: 822px;
		background: url(../img/character/det/e02_main_img01.png) no-repeat 50% 0;
	}
	.e_det_03 {
		height: 822px;
		background: url(../img/character/det/e03_main_img01.png) no-repeat 50% 0;
	}
	.e_det_04 {
		height: 822px;
		background: url(../img/character/det/e04_main_img01.png) no-repeat 50% 0;
	}
	.e_det_05 {
		height: 822px;
		background: url(../img/character/det/e05_main_img01.png) no-repeat 50% 0;
	}
	.e_det_06 {
		height: 822px;
		background: url(../img/character/det/e06_main_img01.png) no-repeat 50% 0;
	}
	.e_det_07 {
		height: 822px;
		background: url(../img/character/det/e07_main_img01.png) no-repeat 50% 0;
	}

		.chara_det_inner {
			position: relative;
			width: 1240px;
			margin: 0 auto;
			padding: 0 0 72px;
		}
			.chara_det_inner h1 {
				margin: 0 0 26px;
				padding: 0;
				z-index: -1;
			}
			/* CAHARA PROFILE */
			.chara_det_box {
				width: 400px;
				margin: 0 0 0 50px;
				padding: 60px 60px 20px;
				background-image: url(../img/frame_top.png), url(../img/frame_middle02.png), url(../img/frame_bottom.png);
				background-position: center top, left center, center bottom;
				background-repeat: no-repeat;
				background-color: rgba(0, 0, 0, .6);
			}
				.chara_det_box h2 {
					margin: 0 0 26px;
				}
				.chara_det_box p {
					margin: 0 0 40px;
					color: #fff;
					font-size: 16px;
					line-height: 2;
				}
				.chara_det_img {
					width: 200px;
					margin: 40px auto 0;
				}
			/* L4 WEPON */
			.chara_det_wepon {
				position: relative;
				width: 1160px;
				margin: 200px auto 180px;
				background: rgba(0, 0, 0, .8);
			}
				.wepon_frame {
					width: 1160px;
				}
					.wepon_frame:before {
						content: "";
						display: block;
						/*display: table-cell;*/
						width: 100%;
						height: 76px;
						background: url(../img/character/det/wepon_frame_top.png) no-repeat 0 0;
					}
					.wepon_content {
						position: relative;
						width: 100%;
						padding: 48px 0 0;
						background: url(../img/character/det/wepon_frame_middle.png) repeat-y 0 0;
					}
						.wepon_content h2 {
							position: absolute;
							width: 100%;
							top: -16px;
							color: #d0a731;
							font-size: 24px;
							line-height: 1;
							text-align: center;
						}
						.wepon_list {
							height: 48px;
							padding: 0 62px;
							letter-spacing: -.4em;
							text-align: left;
						}
							.wepon_list li {
								display: inline-block;
								margin: 0 6px;
								background: rgba( 0, 0, 0, .8);
								cursor: pointer;
							}
							.wepon_list li.act_wepon {
								background: rgba( 127, 103, 30, 1);							
							}
							.wepon_list li:not(.act_wepon):hover {
								background: rgba( 127, 103, 30, 1);
							}
								.wepon_list li:before {
									content: "";
									display: inline-block;
									width: 10px;
									height: 48px;
									letter-spacing: normal;
									background: url(../img/character/det/wepon_tab_bg_left.png) no-repeat 0 0;
								}
								.wepon_list li:after {
									content: "";
									display: inline-block;
									width: 10px;
									height: 48px;
									letter-spacing: normal;
									background: url(../img/character/det/wepon_tab_bg_right.png) no-repeat 0 0;
								}
								.wepon_list li p {
									display: inline-block;
									height: 32px;
									padding: 16px 10px 0;
									color: #fff;
									font-size: 16px;
									line-height: 1;
									letter-spacing: normal;
									text-align: center;
									vertical-align: top;
									background: url(../img/character/det/wepon_tab_bg_center.png) repeat-x 0 0;
								}
						.weponBox{
							position: relative;
							width: 1036px;
							height: 434px;
							margin: 40px auto 0;
						}
							.wepon01,
							.wepon02,
							.wepon03,
							.wepon04,
							.wepon05,
							.wepon06 {
								position: absolute;
								width: 1036px;
								top: 0;
								left: 0;
							}
							.wepon02,
							.wepon03,
							.wepon04,
							.wepon05,
							.wepon06 {
								display: none;
							}
								.wepon_det {
									float: left;
									width: 250px;
								}
									.wepon_det h3 {
										margin: 0 0 20px;
										letter-spacing: -.4em;
										vertical-align: top;
									}
										.wepon_det h3 p:last-child {
											display: none;
											color: #d4ab32;
											font-size: 24px;
											line-height: 126px;
											letter-spacing: normal;
											vertical-align: middle;
										}
										.wepon_det h3 p:first-child {
											margin: 0 20px 0 0;
											line-height: 1;
										}
									.wepon_det > p {
										color: #fff;
										font-size: 16px;
										line-height: 2;
										display: none;
									}
								.wepon_img {
									float: right;
									width: 770px;
								}
									.wepon_img img {
										width: 100%;
									}



					.wepon_frame:after {
						content: "";
						/*display: table-cell;*/
						display: block;
						width: 100%;
						height: 76px;
						background: url(../img/character/det/wepon_frame_bottom.png) no-repeat 0 0;
					}

			.localNav {
				position: absolute;
				width: 70px;
				top: 36px;
				right: 46px;
			}
				.closeBtn {
					position: relative;
					width: 69px;
					height: 101px;
					margin: 0 0 285px;
				}
					.closeCross {
						position: absolute;
						width: 70px;
						height: 70px;
						top: 0;
						left: 0;
					}
				.closeBtn:hover .closeCross{
					-webkit-transform: rotate(0);
					   -moz-transform: rotate(0);
					    -ms-transform: rotate(0);
					     -o-transform: rotate(0);
					        transform: rotate(0);
					animation: closeBtn 0.5s ease-out 0s;
				}
				@keyframes closeBtn {
					0% { transform: rotate(0); }
					100% {transform:rotate(359deg);}
				}
			.next_btn {
				position: relative;
				width: 70px;
				height: 99px;
				margin: 0 0 27px;
			}
				.next_btn p {
					position: absolute;
					width: 70px;
					height: 99px;
					top: 0;
					left: 0;
				}
			.next_btn:hover > p {
				left: 8px;
				animation: nextBtn 0.3s linear 0s;
			}
			@keyframes nextBtn {
				0% { left: 0; }
				100% { left: 8px; }
			}
			.prev_btn {
				position: relative;
				width: 70px;
				height: 99px;
			}
				.prev_btn p {
					position: absolute;
					width: 70px;
					height: 99px;
					top: 0;
					left: 0;
				}
			.prev_btn:hover > p {
				left: -8px;
				animation: prevBtn 0.3s linear 0s;
			}
			@keyframes prevBtn {
				0% { left: 0; }
				100% { left: -8px; }
			}



/* TOP BACKGROUND --------------------------------*/
.clearfix:after {
	display: block;
	content: "";
	clear: both;
	height: 0;
}