@charset "UTF-8";
@import url('//fonts.googleapis.com/css?family=Amiri');

/*--------------------------------
TITLE: 劇場版『牙狼―薄墨桜―』

--------------------------------*/
a:focus { outline: none; }
img { vertical-align: top; }

body {
	position: relative;
	width: 100%;
	min-width: 1240px;
	font-family: "游明朝", "Yu Mincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "Noto Sans Japanese", "Meiryo UI", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	overflow-y: scroll;
	background: url(../img/top/bg_ptn.png) #000;
}

.cf:after,
.clearfix:after {
	content: "";
	clear: both;
	display: block;
}

/* 190306update */
.bnrArea{
	width: 160px;
	position: absolute;
	bottom: 200px;
	right: 280px;
	opacity: 0;
}
.bnrArea img{
	width: 100%	
}
.bnrArea a{
	opacity: 1;
	-webkit-transition: .25s ease-out;
	   -moz-transition: .25s ease-out;
	    -ms-transition: .25s ease-out;
	     -o-transition: .25s ease-out;
	        transition: .25s ease-out;
}
.bnrArea a:hover{
	opacity: 0.6;
}

/* COMMON -------------------------------------------*/
.mt80{
	margin-top: 80px;
}
.mt40{
	margin-top: 40px;
}
.mt20{
	margin-top: 20px;
}

/* INDEX BLOCK --------------------------------------*/
.indexWrapp {
	position: relative;
	width: 100%;
	min-width: 1240px;
	z-index: 10;
}
	/* INDEX INNER */
	.indexInner {
		position: fixed;
		width: 100%;
		min-width: 1240px;
		height: 100vh;
		min-height: 680px;
		top: 0;
		left: 0;
		/*background: rgba(255, 0, 0, .1);*/
		z-index: 2;
	}
		.indexInner h1 {
			width: 100%;
			margin: 0 0 0 60px;
			padding: 132px 0 0;
			text-align: left;
			opacity: 0;
		}
		.roadshow {
			width: 100%;
			margin: 0 0 29px;
			text-align: center;
			opacity: 0;
			position: absolute;
			bottom: 80px;
		}
		.staff {
			width: 100%;
			text-align: left;
			opacity: 0;
			margin-left: 32px;
		}
		/* COPY */
		.topCopy {
			position: absolute;
			width: 192px;
			height: 100%;
			top: 0;
			right: 40px;
			box-sizing: border-box;
			opacity: 0;
		}
			.topCopy img {
				position: absolute;
				width: 192px;
				height: 484px;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				margin: auto;
			}
			.topCopy:before,
			.topCopy:after {
				position: absolute;
				width: 1px;
				height: 78%;
				background: #fff;
				content: "";
				opacity: .4;
			}
			.topCopy:before {
				top: 0;
				left: 0;
			}
			.topCopy:after {
				bottom: 0;
				right: 0;
			}
		/* TWITTER TL */
		.twitterTL {
			position: absolute;
			width: 200px;
			height: 325px;
			top: 0;
			right: 40px;
			bottom: 0;
			margin: auto 0;
			opacity: 0;
		}
			.tl_TTL {
				width: 100%;
				margin: 0 0 12px;
				text-align: center;
			}
			.tlInner {
				width: 100%;
				height: 280px;
				padding: 20px 0 0;
				background: url(../img/top/twtl_bg.png) no-repeat 0 0;
			}
				.tlBox {
					position: relative;
					width: 160px;
					height: 200px;
					margin: 0 auto 18px;
					overflow: hidden;
					border-bottom: 1px solid #fff;
				}
					.tlBox p {
						position: absolute;
						top: 0;
						left: 0;
					}
				.twtlBtn {
					width: 78px;
					margin: 0 auto;
					padding: 5px 0;
					color: #fff;
					font-family: 'Roboto', sans-serif;
					font-size: 12px;
					font-weight: bold;
					line-height: 1;
					text-align: center;
					background: rgba(0, 0, 0, .6);
					border: 1px solid rgba(255, 255, 255, .4);
					-webkit-transition: background-color .25s ease-out;
					   -moz-transition: background-color .25s ease-out;
					    -ms-transition: background-color .25s ease-out;
					     -o-transition: background-color .25s ease-out;
					        transition: background-color .25s ease-out;
				}
				.twtlBtn:hover {
					background: #ca60df;
				}
				.tlInner a {
					text-decoration: none;
				}
		/* NEWS PICKER */
		.newsPicker {
			position: absolute;
			width: 100%;
			height: 40px;
			left: 0;
			bottom: 40px;
			letter-spacing: -.4em;
			text-align: center;
			opacity: 0;
		}
			.newsPicker:before {
				display: inline-block;
				content: url(../img/top/pickerLbl.png);
				width: 112px;
				height: 40px;
				letter-spacing: normal;
			}
			.newsPicker:after {
				display: inline-block;
				content: url(../img/top/pickerEnd.png);
				width: 52px;
				height: 40px;
				letter-spacing: normal;
			}
			.newsPicker p {
				display: inline-block;
				width: 532px;
				height: 40px;
				padding: 14px 0;
				color: #fff;
				font-size: 12px;
				line-height: 1;
				letter-spacing: normal;
				text-align: left;
				white-space: nowrap;
				background: url(../img/top/pickerBg.png) repeat-x;
				overflow: hidden;
				box-sizing: border-box;
			}
				.newsPicker p .newsDate {
					margin: 0 0.5em 0 0;
					color: #ca60df;
				}
				.newsPicker p .newsLink {
					cursor: pointer;
					color: #fff;
					text-decoration: none;
				}
				.newsPicker p .newsLink:hover {
					text-decoration: underline;
				}
		/* SHARE BTN */
		.shareBtn {
			position: absolute;
			width: 96px;
			right: 0;
			bottom: 40px;
			left: 40px;
			margin: auto 0;
			opacity: 0;
			z-index: 1;
		}
			.shareTTL{
				text-align: center;
			}
			.shareTW,
			.shareFB {
				width: 48px;
				height: 48px;
				margin: 12px 0 0;
				float: left;
			}
			.shareTW {
				background: url(../img/top/share_tw_off.png) no-repeat 0 0;
			}
			.shareFB {
				background: url(../img/top/share_fb_off.png) no-repeat 0 0;
			}
				.shareTW a img,
				.shareFB a img {
					opacity: 0;
					-webkit-transition: opacity .25s ease-out;
					   -moz-transition: opacity .25s ease-out;
					    -ms-transition: opacity .25s ease-out;
					     -o-transition: opacity .25s ease-out;
					        transition: opacity .25s ease-out;
				}
				.shareTW a:hover img,
				.shareFB a:hover img {
					opacity: 1;
				}
			/* COPYRIGHT */
			.copyright {
				position: absolute;
				bottom: 22px;
				right: 34px;
			}
	/* mainVisual */
	.mainVisual {
		width: 100%;
		height: 100vh;
		min-height: 680px;
		z-index: -1;
		box-sizing: border-box;
		overflow: hidden;
		text-align: center;
	}
		.mainVisual img {
			height: 100%;
			opacity: 0;
		}
	/* PARTICLE */
	#particle {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		opacity: 0;
		z-index: 1;
	}
/* NEWS BLOCK ---------------------------------------*/
#news {
	display: none;
}
.newsWrapp {
	position: absolute;
	width: 100%;
	min-height: 100vh;
	top: 0;
	left: 0;
	background: #000;
	z-index: 101;
}
	.newsInner {
		position: relative;
		width: 100%;
		min-height: 100vh;
		padding: 0 0 80px;
		background: url(../img/common/page_bg.jpg) no-repeat 50% 0 fixed;
		background-size: cover;
		box-sizing: border-box;
	}
		.newsInner > h2 {
			position: relative;
			width: 381px;
			height: 140px;
			margin: 0 auto 138px;
			background: url(../img/common/ttl_bg.png) no-repeat 0 0;
		}
			.newsInner > h2 img {
				position: absolute;
				width: 124px;
				height: 38px;
				bottom: -20px;
				left: 50%;
				margin: 0 0 0 -62px;
				opacity: 0;
			}
		.newslogo {
			position: absolute;
			width: 160px;
			height: 107px;
			top: 40px;
			left: 40px;
		}
		.newsInner .CloseBtn {
			position: absolute;
			width: 80px;
			height: 61px;
			top: 40px;
			right: 40px;
			cursor: pointer;
			-webkit-transition: opacity .25s ease-out;
			   -moz-transition: opacity .25s ease-out;
			    -ms-transition: opacity .25s ease-out;
			     -o-transition: opacity .25s ease-out;
			        transition: opacity .25s ease-out;
		}
		.newsInner p.CloseBtn:hover {
			opacity: .7;
		}
		/* NEWS ARTICLE */
		.newsArticle {
			width: 840px;
			margin: 0 auto 80px;
			font-family: "Noto Sans Japanese", "Meiryo UI", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
			opacity: 0;
			-webkit-transform: translate(0, 2%);
			   -moz-transform: translate(0, 2%);
			    -ms-transform: translate(0, 2%);
			     -o-transform: translate(0, 2%);
			        transform: translate(0, 2%);
		}
		.newsArticle:last-child {
			margin: 0 auto 0;
		}
			.newsArticle a {
				color: #ca60df;
				text-decoration: none;
			}
			.newsArticle a:hover {
				text-decoration: underline;
			}
			/* NEWS HEADER */
			.newsArticle h2 {
				width: 100%;
				padding: 0 0 20px;
				border-bottom: 1px solid rgba(255, 255, 255, .4);
			}
				.newsArticle .newsDate {
					margin: 0 0 7px;
					color: #ca60df;
					font-family: 'Amiri', serif;
					font-size: 14px;
					font-weight: 700;
					line-height: 1;
				}
				.newsHeader {
					color: #fff;
					font-size: 18px;
					font-weight: bold;
					line-height: 1.6;
				}
				.newsMainBox {
					color: #fff;
					font-size: 14px;
					line-height: 2.1;
				}
					.newsMainBox p {
						margin: 40px 0 0;
					}
					.mp_img {
						text-align: center;
					}
					.mp_mov {
						width: 560px;
						margin: 40px auto 0;
					}
				.newsSubBox {
					width: 100%;
					margin: 40px 0 0;
					padding: 23px;
					color: #fff;
					font-size: 14px;
					line-height: 2;
					background: rgba(0, 0, 0, .6);
					border: 1px solid rgba(255, 255, 255, .4);
					box-sizing: border-box;
				}
					.newsSubBox h3 {
						display: inline-block;
						margin: 0 0 10px;
						padding: 0px 8px;
						color: #000;
						background: #fff;
					}
					.newsSubBox p {
						margin: 16px 0 0;
					}
				.newsBtn {
					color: #fff;
					font-size: 14px;
					line-height: 2;
				}
					.newsBtn a {
						color: #fff;
						text-decoration: none;
					}
					.newsBtn p {
						display: inline-block;
						margin: 40px 0 0;
						padding: 4px 50px;
						background: rgba(0, 0, 0, .6);
						border: 1px solid rgba(255, 255, 255, .4);
						-webkit-transition: background-color .25s ease-out;
						   -moz-transition: background-color .25s ease-out;
						    -ms-transition: background-color .25s ease-out;
						     -o-transition: background-color .25s ease-out;
						        transition: background-color .25s ease-out;
					}
					.newsBtn a:hover p {
						background: rgba( 202, 96, 223, 1);
					}
/* STORY BLOCK --------------------------------------*/
#story {
	display: none;
}
.storyWrapp {
	position: absolute;
	width: 100%;
	min-height: 680px;
	top: 0;
	left: 0;
	background: #000;
	z-index: 101;
}
	.storyInner {
		position: relative;
		width: 100%;
		min-height: 680px;
		padding: 0 0 160px;
		text-align: center;
		background: url(../img/common/page_bg.jpg) no-repeat 50% 0 fixed;
		background-size: cover;
	}
		.storyInner h2 {
			position: relative;
			width: 381px;
			height: 140px;
			margin: 0 auto 78px;
			background: url(../img/common/ttl_bg.png) no-repeat 0 0;
		}
			.storyInner h2 img {
				position: absolute;
				width: 132px;
				height: 40px;
				bottom: -20px;
				left: 50%;
				margin: 0 0 0 -66px;
			}
		.story_top_copy {
			color: #ca60df;
			font-size: 24px;
			line-height: 1.8;
		}
		.mainTxt {
			margin: 56px 0;
		}
			.story_main_txt {
				color: #fff;
				font-size: 20px;
				line-height: 2.2;
			}
		.story_bottom_copy {
			color: #ca60df;
			font-size: 32px;
			line-height: 1.8;
		}
		.storyInner .CloseBtn {
			position: absolute;
			width: 80px;
			height: 61px;
			top: 40px;
			right: 40px;
			cursor: pointer;
			-webkit-transition: opacity .25s ease-out;
			   -moz-transition: opacity .25s ease-out;
			    -ms-transition: opacity .25s ease-out;
			     -o-transition: opacity .25s ease-out;
			        transition: opacity .25s ease-out;
		}
		.storyInner p.CloseBtn:hover {
			opacity: .7;
		}

/* CHARA BLOCK --------------------------------------*/
#chara {
	display: none;
}
.charaWrapp {
	position: absolute;
	width: 100%;
	min-height: 680px;
	top: 0;
	left: 0;
	background: #000;
	z-index: 101;
}

#chara section {
	position: relative;
}

#chara_list li {
	display: none;
	position: relative;
	z-index: 10;
}
#chara_list li.active {
	display: block;
	z-index: 50;
}
#chara_list li .img,
#chara_list li .detail {
	position: relative;
	/*bottom: -50px;*/
}

/*#chara_list li.active .img,
#chara_list li.active .detail {
	opacity: 1;

}*/


	.charaInner {
		position: relative;
		width: 100%;
		min-height: 680px;
		padding: 0 0 80px;
		text-align: center;
		background: url(../img/common/page_bg.jpg) no-repeat 50% 0 fixed;
		background-size: cover;
	}
		.charaInner h2 {
			position: relative;
			width: 381px;
			height: 140px;
			margin: 0 auto 78px;
			background: url(../img/common/ttl_bg.png) no-repeat 0 0;
		}
			.charaInner h2 img {
				position: absolute;
				width: 254px;
				height: 38px;
				bottom: -20px;
				left: 0;
				right: 0;
				margin: 0 auto;
			}
		.charaInner .CloseBtn {
			position: absolute;
			width: 80px;
			height: 61px;
			top: 40px;
			right: 40px;
			cursor: pointer;
			-webkit-transition: opacity .25s ease-out;
			   -moz-transition: opacity .25s ease-out;
			    -ms-transition: opacity .25s ease-out;
			     -o-transition: opacity .25s ease-out;
			        transition: opacity .25s ease-out;
		}
		.charaInner p.CloseBtn:hover {
			opacity: .7;
		}


	.charaInner .group {
		width: 960px;
		margin: 0 auto;
		color: #FFF;
	}
		.charaInner .group .img {
			width: 520px;
			float: left;
			text-align: center;
			margin-top: -70px;
		}
		.charaInner .group .detail {
			width: 440px;
			float: right;
			text-align: left;
		}
			.charaInner .name {
				font-size: 40px;
				margin-bottom: 10px;
			}
				.charaInner .name em {
					font-size: 24px;
					font-style: normal;
				}
				.charaInner .name .small {
					font-size: 16px;
					margin-left: 15px;
					font-family: 'Amiri';
				}
			.charaInner .cv {
				background-color: #000;
				padding: 4px;
				line-height: 1;
				display: inline-block;
				margin-bottom: 32px;
			}
			.charaInner .txt {
				font-size: 14px;
				line-height: 2;
			}
			.charaInner .up {
				margin-top: 30px;
			}


/*----- 個別調整 -----*/

#c1 .img {
	padding-top: 14px;
}
#c2 .img {
	padding-top: 21px;
}
#c3 .img {
	padding-top: 70px;
}
#c5 .img {
	padding-top: 20px;
}
#c7 .img {
	padding-top: 23px;
}


/*----- キャラリスト -----*/

#chara .list_navi {
	height: 470px;
	box-sizing: border-box;
	position: fixed;
	top: 60px;
	bottom: 0;
	left: 20px;
	margin: auto 0;
	z-index: 500;
	border-left: 1px solid #FFF;
	padding: 108px 20px 0;
}
#chara .list_navi::before,
#chara .list_navi .arrow {
	position: absolute;
	left: -20px;
	height: 0;
	border-top: 1px solid #FFF;
}
#chara .list_navi::before {
	content: "";
	display: block;
	top: 80px;
	width: 80px;
}
#chara .list_navi .arrow {
	top: 149px;
	width: 32px;
}

#chara .list_navi h3 {
	margin-bottom: 18px;
}

#chara .list_navi ul li + li {
	margin-top: 18px;
}

#chara .list_navi ul li a {
	font-size: 14px;
	color: #FFF;
	text-decoration: none;
	transition: color 0.5s ease;
}
#chara .list_navi ul li.active a {
	color: #ca60df;
}


/* CAST-STAFF BLOCK --------------------------------------*/
#cast-staff {
	display: none;
}
.cast-staffWrapp {
	position: absolute;
	width: 100%;
	min-height: 680px;
	top: 0;
	left: 0;
	background: #000;
	z-index: 101;
}

.cast-staffInner {
	position: relative;
	width: 100%;
	min-height: 680px;
	padding: 0 0 80px;
	text-align: center;
	background: url(../img/common/page_bg.jpg) no-repeat 50% 0 fixed;
	background-size: cover;
}
.cast-staffInner h2 {
	position: relative;
	width: 381px;
	height: 140px;
	margin: 0 auto 78px;
	background: url(../img/common/ttl_bg.png) no-repeat 0 0;
}
.cast-staffInner h2 img {
	position: absolute;
	width: 266px;
	height: 39px;
	bottom: -20px;
	left: 0;
	right: 0;
	margin: 0 auto;
}
.cast-staffInner .CloseBtn {
	position: absolute;
	width: 80px;
	height: 61px;
	top: 40px;
	right: 40px;
	cursor: pointer;
	-webkit-transition: opacity .25s ease-out;
	   -moz-transition: opacity .25s ease-out;
	    -ms-transition: opacity .25s ease-out;
	     -o-transition: opacity .25s ease-out;
	        transition: opacity .25s ease-out;
}
.cast-staffInner p.CloseBtn:hover {
	opacity: .7;
}


.cast-staffInner .group {
	width: 960px;
	margin: 0 auto;
	color: #FFF;
	position: relative;
}
.cast-staffInner .group #cast {
	width: 470px;
	float: left;
	text-align: center;
	position: relative;
}
.cast-staffInner .group #staff {
	width: 470px;
	float: right;
	text-align: center;
	position: relative;
}

.cast-staffInner .member li {
	display: table;
	width: 100%;
	position: relative;
}
.cast-staffInner .member li + li {
	margin-top: 30px;
}

.cast-staffInner .member .job,
.cast-staffInner .member .name {
	display: table-cell;
	vertical-align: middle;
	width: 50%;
	box-sizing: border-box;
	padding: 0 24px;
	line-height: 1.4;
}
.cast-staffInner .member .job {
	text-align: right;
	font-size: 16px;
	color: #ca60df;
}
.cast-staffInner .member .name {
	text-align: left;
	font-size: 20px;
}

.cast-staffInner .member li:after {
	content: "";
	display: block;
	width: 20px;
	height: 8px;
	background: url(../img/cast-staff/cross.png) no-repeat;
	background-size: contain;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
}

.cast-staffInner .group h3 {
	font-size: 32px;
	font-family: 'Amiri';
	font-weight: normal;
	padding-bottom: 22px;
	text-align: center;
	background: url(../img/cast-staff/title_decoration.png) 50% 100% no-repeat;
	margin-bottom: 35px;
}


/* THEATER BLOCK --------------------------------------*/
#theater {
	display: none;
}
.theaterWrapp {
	position: absolute;
	width: 100%;
	min-height: 680px;
	top: 0;
	left: 0;
	background: #000;
	z-index: 101;
}

.theaterInner {
	position: relative;
	width: 100%;
	min-height: 680px;
	padding: 0 0 80px;
	text-align: center;
	background: url(../img/common/page_bg.jpg) no-repeat 50% 0 fixed;
	background-size: cover;
}
.theaterInner h2 {
	position: relative;
	width: 381px;
	height: 140px;
	margin: 0 auto 78px;
	background: url(../img/common/ttl_bg.png) no-repeat 0 0;
}
.theaterInner h2 img {
	position: absolute;
	width: 190px;
	height: 39px;
	bottom: -20px;
	left: 0;
	right: 0;
	margin: 0 auto;
}
.theaterInner .CloseBtn {
	position: absolute;
	width: 80px;
	height: 61px;
	top: 40px;
	right: 40px;
	cursor: pointer;
	-webkit-transition: opacity .25s ease-out;
	   -moz-transition: opacity .25s ease-out;
	    -ms-transition: opacity .25s ease-out;
	     -o-transition: opacity .25s ease-out;
	        transition: opacity .25s ease-out;
}
.theaterInner p.CloseBtn:hover {
	opacity: .7;
}


.theaterInner {
	color: #FFF;
}

.theaterInner .areaLink {
	text-align: center;
	margin: 40px 0;
}
.theaterInner .areaLink li {
	display: inline-block;
	padding: 0 20px 0 0;
	border-right: 1px solid #FFF;
	line-height: 1;
	margin-left: 20px;
}
.theaterInner .areaLink li:last-child {
	border-right: 0;
}
.theaterInner .areaLink li a {
	display: inline-block;
	color: #FFF;
}



.theaterInner .teaterTable {
	width: 960px;
	margin: 0 auto;
	background: rgba(0,0,0,0.4);
	color: #FFF;
}
.theaterInner .teaterTable + .teaterTable {
	margin-top: 50px;
}

.theaterInner .teaterTable th,
.theaterInner .teaterTable td {
	padding: 10px 10px;
	border: 1px solid rgba(202,96,223,0.7);
	text-align: center;
	font-weight: normal;
	vertical-align: middle;
}
.theaterInner .tableTtl th {
	background: rgba(255,255,255,0.1);
	color: #FFF;
}
.theaterInner .tableTtl th:nth-child(1) {
	width: 15%;
}
.theaterInner .tableTtl th:nth-child(2) {
	width: 35%;
}
.theaterInner .areaName {
	background: rgba(202,96,223,0.7);
	color: #FFFFFF;
	font-size: 16px;
	font-size: 1.6rem;
	text-align: left !important;
	font-weight: bold !important;
}
.teaterTable a {
	color: #ca60df;
}
.teaterTable a:hover {
	color: #ca60df;
	text-decoration: none;
}



/* NAVIGATION BLOCK ---------------------------------*/
.navigation {
	position: fixed;
	display: none;
	width: 100%;
	min-width: 1240px;
	height: 100px;
	top: 0;
	left: 0;
	background: url(../img/nav/navBg.png) repeat-x;
	opacity: 0;
	z-index: 20;
}
	.nav {
		padding: 29px 0 0;
		text-align: center;
	}
	.nav ul {
		letter-spacing: -.4em;
	}
	.nav li {
		position: relative;
		display: inline-block;
		height: 39px;
		letter-spacing: normal;
		cursor: pointer;
	}
	.nav li.nav01 {
		margin: 0 1px 0 0;
	}
	.nav li.nav02 {
		margin: 0 18px 0 0;
	}
	.nav li.nav03 {
		margin: 0 15px 0 0;
	}
	.nav li.nav04 {
		margin: 0 35px 0 0;
	}
	.nav li.nav05 {
		margin: 0 25px 0 0;
	}
		.nav li img {
			position: relative;
			z-index: 2;
		}
		.nav li:after {
			position: absolute;
			display: block;
			width: 130px;
			height: 39px;
			top: 0;
			left: -20px;
			right: -20px;
			margin: auto;
			background: url(../img/nav/navMarker.png) no-repeat 50% 0;
			content: "";
			z-index: 1;
			opacity: 0;
			-webkit-transition: all .25s ease-out;
			   -moz-transition: all .25s ease-out;
			    -ms-transition: all .25s ease-out;
			     -o-transition: all .25s ease-out;
			        transition: all .25s ease-out;
		}
		.nav li:hover:after,
		.nav li.navOn:after {
			opacity: 1;
		}
		.nav li.navOn {
			cursor: default;
		}