@charset "UTF-8";
/*----------------------------------------
 TITLE : かくりよの宿飯
 UPDATE ： 2018.01.25
----------------------------------------*/
a:focus { outline: none; }

body {
	width: 100%;
	min-width: 1280px;
	font-family: "游明朝", "Yu Mincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "Meiryo UI", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	overflow-y: scroll;
	background: url(../character/img/character_bg.jpg) no-repeat 0 0 fixed;
	background-size: cover;
	opacity: 0;
}

/* CONTENT ----*/
.content {
	position: relative;
	width: 100%;
}
.content:after {
	display: block;
	content: "";
	clear: both;
	height: 0;
}
	/* LEFT BLOCK ----*/
	.LeftBlock {
		float: left;
		position: relative;
		width: 250px;
		height: 100%;
		padding: 0 0 0 20px;
	}
	/* RIGHT BLOCK ----*/
	.RightBlock {
		float: left;
		width: 100%;
		margin: 0 0 0 -270px;
		padding: 0 0 0 270px;
		box-sizing: border-box;
	}
		.inner {
			width: 900px;
			margin: 0 auto;
			padding: 0 0 180px;
			opacity: 0;
		}
			.inner h2 {
				margin: 20px 0 60px;
			}
			.inner article {
				margin: 0 0 60px;
			}
			.inner article h3 {
				width: 752px;
				margin: 0 auto 20px;
			}
			.chara_list {
				width: 752px;
				margin: 0 auto;
				letter-spacing: -.4em;
			}
				.chara_list li {
					position: relative;
					display: inline-block;
					width: 224px;
					height: 224px;
					margin: 0 40px 40px 0;
					letter-spacing: normal;
				}
				.chara_list li:nth-child( 3n+3 ) {
					margin: 0 0 40px 0;
				}
					.chara_name {
						position: absolute;
						width: 43px;
						height: 212px;
						top: 0;
						right: 0;
					}
					.chara_list li a:hover .chara_img {
						opacity: .7;
					}
				.chara_list li.new a:after {
					position: absolute;
					display: block;
					content: "";
					width: 224px;
					height: 224px;
					top: 0;
					left: 0;
					background: url(../character/img/new.png) no-repeat left bottom;
				}
	/* CHARACTER DETAIL -----*/
	.det_inner {
		position: relative;
		width: 900px;
		height: 758px;
		margin: 0 auto;
		padding: 0 0 135px;
		opacity: 0;
	}
		.det_inner h2 {
			margin: 20px 0 60px;
		}
		.chara01,
		.chara02,
		.chara03,
		.chara04,
		.chara05,
		.chara06,
		.chara07,
		.chara08,
		.chara09,
		.chara10,
		.chara11,
		.chara12,
		.chara13,
		.chara14,
		.chara15,
		.chara16,
		.chara17,
		.chara18,
		.chara19,
		.chara20,
		.chara21,
		.chara22,
		.chara23,
		.chara24,
		.chara25,
		.chara26,
		.chara27,
		.chara28,
		.chara29,
		.chara30,
		.chara31,
		.chara32,
		.chara33,
		.chara34 {
			position: absolute;
			width: 100%;
			height: 563px;
			top: 177px;
			left: 0;
		}
		.chara01,
		.chara02,
		.chara03,
		.chara04,
		.chara05,
		.chara06,
		.chara07,
		.chara08,
		.chara09,
		.chara10,
		.chara11,
		.chara12,
		.chara13,
		.chara14,
		.chara15,
		.chara16,
		.chara17,
		.chara18,
		.chara19,
		.chara20,
		.chara21,
		.chara22,
		.chara23,
		.chara24,
		.chara25,
		.chara26,
		.chara27,
		.chara28,
		.chara29,
		.chara30,
		.chara31,
		.chara32,
		.chara33,
		.chara34 {
			display: none;
		}

		/* CHARA MAIN INMG ----*/
		.chara_det_img {
			position: absolute;
			width: 496px;
			height: 560px;
			top: 0;
			left: 264px;
			z-index: 1;
		}
			.chara_det_img_main,
			.chara_det_img_shadow {
				position: absolute;
				width: 496px;
				height: 563px;
				top: 0;
				left: 10px; /* 0; */
				opacity: 0;
			}
		.chara_face_01 {
			position: absolute;
			width: 200px;
			height: 200px;
			top: 0;
			right: 92px;
			z-index: 2;
			opacity: 0;
		}
		.chara_face_02 {
			position: absolute;
			width: 160px;
			height: 160px;
			top: 180px;
			right: 0;
			z-index: 2;
			opacity: 0;
		}
		.chara_text {
			position: relative;
			width: 320px;
			height: 500px;
			margin: 80px 0 0;
			color: #333;
			font-size: 14px;
			font-weight: bold;
			line-height: 1.7;
			z-index: 3;
			opacity: 0;
		}
			.human .chara_text_header {
				width: 100%;
				height: 21px;
				background: url(../character/img/det/chara_det_txt_header_01.png) no-repeat 0 0;
			}
			.ayakashi .chara_text_header {
				width: 100%;
				height: 21px;
				background: url(../character/img/det/chara_det_txt_header_02.png) no-repeat 0 0;
			}
			.other .chara_text_header {
				width: 100%;
				height: 21px;
				background: url(../character/img/det/chara_det_txt_header_03.png) no-repeat 0 0;
			}
			.human .chara_text_footer {
				width: 100%;
				height: 21px;
				background: url(../character/img/det/chara_det_txt_footer_01.png) no-repeat 0 0;
			}
			.ayakashi .chara_text_footer {
				width: 100%;
				height: 21px;
				background: url(../character/img/det/chara_det_txt_footer_02.png) no-repeat 0 0;
			}
			.other .chara_text_footer {
				width: 100%;
				height: 21px;
				background: url(../character/img/det/chara_det_txt_footer_03.png) no-repeat 0 0;
			}
			.human div {
				width: 100%;
				height: 357px;
				background: url(../character/img/det/chara_det_txt_bg_01.png) repeat-y 0 0;
			}
			.ayakashi div {
				width: 100%;
				height: 357px;
				background: url(../character/img/det/chara_det_txt_bg_02.png) repeat-y 0 0;
			}
			.other div {
				width: 100%;
				height: 357px;
				background: url(../character/img/det/chara_det_txt_bg_03.png) repeat-y 0 0;
			}
				.chara_text div h3 {
					padding: 8px 22px 0 21px;
				}
				.chara_text div p {
					margin: 18px 0 0;
					padding: 0 22px 0 21px;
				}

	.chara_det_pager {
		position: absolute;
		width: 1090px;
		height: 54px;
		bottom: 40px;
		left: 50%;
		-webkit-transform: translate(-50%, 0);
		   -moz-transform: translate(-50%, 0);
		    -ms-transform: translate(-50%, 0);
		     -o-transform: translate(-50%, 0);
		        transform: translate(-50%, 0);
	}
	.chara_det_pager:after {
		display: block;
		content: "";
		clear: both;
		height: 0;
	}
		.chara_prev {
			float: left;
			width: 74px;
			height: 54px;
			cursor: pointer;
		}
			.chara_prev:hover {
				opacity: .7;
			}
		.chara_next {
			float: right;
			width: 74px;
			height: 54px;
			cursor: pointer;
		}
			.chara_next:hover {
				opacity: .7;
			}
	/* BACT LIST ----*/
	.backList {
		position: absolute;
		width: 67px;
		height: 89px;
		bottom: 0;
		left: 50%;
		margin: 0 0 0 -33.5px;
	}
	.backList a:hover {
		opacity: .7;
	}
/* FOOTER ----*/
.footer {
	width: 100%;
	padding: 36px 0;
	color: #fff;
	font-size: 9px;
	line-height: 1;
	text-align: center;
	background: url(../common/img/footer_bg.png);
}

/* BACK TO TOP ----*/
.back_to_top {
	position: fixed;
	display: none;
	width:  69px;
	height: 90px;
	bottom: 35px;
	right: 23px;
	cursor: pointer;
}
.back_to_top:hover {
	opacity: .7;
}