@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;
	background: url(../special/img/special_bg.jpg) repeat 0 0;
	opacity: 0;
}

/* CONTENT ----*/
.content {
	position: relative;
	width: 100%;
	/*padding: 0 0 180px;*/
}
.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 110px;
			opacity: 0;
		}
			.inner h2 {
				margin: 20px 0 60px;
			}
		/* STORY */
		.story_tab {
			margin: 0 0 78px;
		}
			.story_tab ul {
				width: 900px;
				margin: 0 auto;
				letter-spacing: -.4em;
			}
			.story_tab li {
				display: inline-block;
				width: 60px;
				height: 20px;
				margin: 0 10px 6px 0;
				letter-spacing: normal;
				cursor: pointer;
			}
			.story_tab li:nth-child(13n+13) {
				margin: 0 0 6px 0;
			}
			.story_tab li:not(.on) {
				opacity: 0.6;
			}
			.story_tab li:not(.on):hover {
				opacity: 1;
			}


		.story_wrapper {
			display: none;
			width: 740px;
			margin: 0 auto;
			padding: 0 0 70px;
		}
			.ttl {
				margin: 0 0 20px;
				color: #fb5693;
				font-size: 24px;
				line-height: 1.6;
			}
			.story_visual {
				position: relative;
				width: 740px;
				height: 450px;
				overflow: hidden;
			}
				.story_visual p {
					position: absolute;
					width: 740px;
					height: 450px;
					top: 0;
					left: 0;
				}
				#story_img_01 {
					z-index: 5;
				}
				#story_img_02,
				#story_img_03,
				#story_img_04,
				#story_img_05,
				#story_img_06 {
					display: none;
					z-index: 10;
				}
			.story_img_nav {
				width: 740px;
				height: 70px;
				margin: 10px 0 0;
				overflow: hidden;
			}
				.story_img_nav li {
					float: left;
					width: 115px;
					height: 70px;
					margin: 0 10px 0 0;
					cursor: pointer;
					overflow: hidden;
				}
				.story_img_nav li:last-child {
					margin: 0;
				}
				.story_img_nav li.img_on {
					cursor: default;
				}
				.story_img_nav li:not(.img_on):hover {
					opacity: 0.7;
				}
			.story_cont {
				width: 740px;
				margin: 30px 0 0;
				color: #001d40;
				font-size: 15px;
				font-weight: bold;
				line-height: 1.8;
			}
				.sotry_staff {
					margin: 34px 0 0;
				}
				.story_paragie {
					margin: 34px 0 0;
					color: #d44247;
				}




/* 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;
}