@font-face {font-family:"century gothic";src:url("src/fonts/GOTHICB.TTF");}
@font-face {font-family:"YuMincho";src:url("src/fonts/yumindb.ttf");}
html{width:100%;height:100%;}
*{	font-family:"century","YuMincho","Hiragino Mincho ProN", serif;
	font-weight:bold;
	box-sizing:border-box;
	-webkit-touch-callout:none;
	-webkit-user-select:none; 
	-webkit-appearance: none;
	-moz-appearance: none;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	appearance: none;
	user-select:none;
	outline:none;
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center;
	}
body{margin:0;
		background:#2d2a27;
		overflow:hidden;
		color:#fff;}
a{text-decoration:none;}
::selection {background:#2d2a27;color: #fff;}
::-webkit-scrollbar{width:8px;}
::-webkit-scrollbar-track{background:#1d1a17;}
::-webkit-scrollbar-thumb{background:#3d3a37;border-radius:10px;}

large{	font-size:1.5em;
		text-shadow:0 0 5px #7f3b00,0 0 5px #7f3b00,0 0 2px #fff,0 0 1px #fff;}
p{margin:20px 0;
	line-height:40px;}
hr{border:none;
	height:5px;
	width:60%;
	background:linear-gradient(to left,rgba(255,255,255,0),#fff);
	margin:0;
	text-align:left;}
/*---------HEADER---------*/

#header{width:100%;
		height:80px;
		position:fixed;
		top:0;left:0;
		background:linear-gradient(rgba(0,0,0,1),rgba(0,0,0,0.5) 90%,rgba(0,0,0,0));
		z-index:1;}
#header>div{width:100%;max-width:1080px;
			height:100%;
			margin:auto;
		filter:blur(10px);}
#header>div>div{display:inline-block;
				height:100%;width:160px;
				vertical-align:top;}
#header>div>div:first-child{width:calc(100% - 160px);}

#play{	display:block;
		width:160px;height:120px;
		background-image:url("src/play.png");
		background-position:center bottom;}
#play_sp{display:none;
		width:120px;height:90px;
		background-image:url("src/play.png");
		background-position:center bottom;
		z-index:5;
		position:fixed;
		top:0;left:20px;}

#navi{display:table;
		width:calc(100% - 10px);height:100%;
		table-layout:fixed;
		border-collapse:collapse;
		text-align:center;
		}
		
#navi>a{display:table-cell;
		vertical-align:middle;
		color:#fff;
		background-size:auto 40px;
		background-position:center 45%;
		opacity:0.7;
		position:relative;}
#navi>a:hover{opacity:1;}
#navi>a[active]{opacity:1;
				filter:drop-shadow(0 0 10px #7f3b00) drop-shadow(0 0 2px #fff);}
#navi>a>div{display:block;
			position:absolute;
			background:#fff;
			width:0;height:2px;
			left:0;bottom:10px;}
#navi [navi=home]{background-image:url("src/navi/home.png");}
#navi [navi=about]{background-image:url("src/navi/about.png");}
#navi [navi=chara]{background-image:url("src/navi/chara.png");}
#navi [navi=gallery]{background-image:url("src/navi/gallery.png");}
#navi [navi=special]{background-image:url("src/navi/special.png");}

/*-------------FOOTER-------*/
#footer{background:#000;
			min-height:160px;
			padding:30px;}
#footer_logo{background-image:url("src/footlogo.png");
			width:100px;height:100px;
			margin:auto;
			display:block;
			opacity:0.1;}
#footer_logo:hover{opacity:0.2;}
/*--------------MAIN----------*/
#main{filter:blur(10px);
		width:100%;height:100%;
		position:fixed;
		left:0;top:0;
		overflow:hidden;
		overflow-y:scroll;
		scrollbar-color:#3d3a37 #1d1a17;
		scrollbar-width:thin;}


.content{min-height:calc(100vh - 160px);
		height:100%;}
section{width:100%;
		text-align:center;}
section:first-child{padding-top:120px;}
section>div{width:100%;
			max-width:1080px;
			margin:auto;}
			
split{display:table;
		border-collapse:collapse;
		table-layout:fixed;
		width:100%;}
split>div{display:table-cell;
			vertical-align:middle;
			padding:20px;}
img{max-width:100%;
border:solid 1px #fff;
	box-shadow:0px 0px 5px #fff;}
[sponly]{display:none;}
.keepout{max-width:none;
		background:rgba(0,0,0,0.7);
		padding:50px;
		margin-top:120px;}
/*-----------HOME---------*/
#sect_home{background-image:url("src/bg00.jpg");
			min-height:100%;}

#logo{	opacity:0;
		width:100%;height:60vh;
		max-height:480px;
		background-image:url("src/title.png");
		background-size:auto 90%;
		background-position:center;
		}
#play_area{	background:linear-gradient(to left,rgba(0,0,0,0),rgba(0,0,0,1),rgba(0,0,0,0));
			font-size:36px;
			text-shadow:0 0 2px #fffa,0 0 10px #f00;}
.play_btn{	display:inline-block;
			width:224px;
			height:96px;
			background-image:url("src/play_web.png");
			margin:auto;}
.play_btn:hover{filter:brightness(1.3);}
.play_btn:last-child{
			background-image:url("src/play_dl.png");}
.pickup{width:100%;
		height:300px;
		background:#fff;}
.pickup_title{padding:10px 20px;
				text-align:left;
				font-size:24px;
				font-weight:bold;
				background:linear-gradient(#292624,#0d0c0b);}
.pickup_title>span{font-size:14px;
					padding-left:5px;
					vertical-align:middle;}
/*-----------ABOUT--------*/
#sect_story{background-image:url("src/bg01.jpg");
			min-height:100%;}
#sect_system{min-height:100%;
			background-image:url("src/bg04.jpg");}
.textarea{padding:40px;
			font-size:22px;
			text-shadow:0 0 4px #fffa,0 1px 3px #000;
			text-align:left;}
.textarea>p{opacity:0;margin-left:-20px;margin-right:20px;}
				
h1{	font-size:40px;
	font-family:"century gothic";
	margin:0;
	text-shadow:0 0 5px #7f3b00,0 0 10px #7f3b00;}
	
h1>span{font-size:20px;padding-left:10px;}
	
/*-------------CHARA----------*/
#sect_chara{background-image:url("src/bg02.jpg");
			min-height:100%;}

#chara_list{max-width:100%;width:100%;background:#2d2a27;}
#chara_list>div{display:table;
				height:80px;
				width:100%;max-width:1080px;
				margin:auto;}
#chara_list a{	display:table-cell;
				filter:grayscale(100);
				background-size:cover;
				background-position:15% center;
				border:solid 1px #2d2a27;}
				
#chara_list a:hover{filter:grayscale(0);}
#chara_list a[active]{filter:grayscale(0);filter:brightness(1.1);}

#chara_list a[val="00"]{background-image:url("src/chara/t00.png");}
#chara_list a[val="01"]{background-image:url("src/chara/t01.png");}
#chara_list a[val="02"]{background-image:url("src/chara/t02.png");}
#chara_list a[val="03"]{background-image:url("src/chara/t03.png");}
#chara_list a[val="04"]{background-image:url("src/chara/t04.png");}
#chara_list a[val="05"]{background-image:url("src/chara/t05.png");}
#chara_list a[val="06"]{background-image:url("src/chara/t06.png");}
#chara_list a[val="07"]{background-image:url("src/chara/t07.png");}
#chara_list a[val="08"]{background-image:url("src/chara/t08.png");}
#chara_list a[val="09"]{background-image:url("src/chara/t09.png");}

#chara_area{height:calc(100vh - 280px);
			min-height:500px;
			position:relative;}

.chara{	width:100%;height:100%;
		color:#fff;
		left:0;top:0;
		position:absolute;
}

.chara>div{position:absolute;}
.chara_image{background-size:contain;
			 background-position:center bottom;
			 right:0;top:0;
			 height:100%;
			 width:60%}
			 
.chara_serif{width:100%;height:100%;
			 background-size:contain;
			 background-position:85% top;}

.chara[name="00"] .chara_image{background-image:url("src/chara/c00.png");}
.chara[name="01"] .chara_image{background-image:url("src/chara/c01.png");}
.chara[name="02"] .chara_image{background-image:url("src/chara/c02.png");}
.chara[name="03"] .chara_image{background-image:url("src/chara/c03.png");}
.chara[name="04"] .chara_image{background-image:url("src/chara/c04.png");}
.chara[name="05"] .chara_image{background-image:url("src/chara/c05.png");}
.chara[name="06"] .chara_image{background-image:url("src/chara/c06.png");}
.chara[name="07"] .chara_image{background-image:url("src/chara/c07.png");}
.chara[name="08"] .chara_image{background-image:url("src/chara/c08.png");}
.chara[name="09"] .chara_image{}

.chara[name="00"] .chara_serif{background-image:url("src/chara/s00.png");}
.chara[name="01"] .chara_serif{background-image:url("src/chara/s01.png");}
.chara[name="02"] .chara_serif{background-image:url("src/chara/s02.png");}
.chara[name="03"] .chara_serif{background-image:url("src/chara/s03.png");}
.chara[name="04"] .chara_serif{background-image:url("src/chara/s04.png");}
.chara[name="05"] .chara_serif{background-image:url("src/chara/s05.png");}
.chara[name="06"] .chara_serif{background-image:url("src/chara/s06.png");}
.chara[name="07"] .chara_serif{background-image:url("src/chara/s07.png");}
.chara[name="08"] .chara_serif{background-image:url("src/chara/s08.png");}
.chara[name="09"] .chara_serif{background-image:url("src/chara/s09.png");}

.chara_info{left:0;
			text-align:left;
			width:65%;
			top:10%;
			height:90%;
			padding-left:6vw;
			overflow:hidden;}

.chara_title{font-size:40px;
			text-shadow:0 0 5px #fffa,0 0 10px #7f3b00,0 1px 2px #000;}
.chara_luby{display:inline-block;
			padding-left:10px;
			font-size:16px;
			font-weight:normal;
			font-family:"century gothic","arial",sans-serif;
			}
.chara_text{padding:20px;
			font-size:20px;
			text-shadow:0 0 2px #fffa,0 0 5px #000,0 1px 3px #000;
			}
#chara_prev,#chara_next{width:64px;height:100%;
						display:none;
						background-size:contain;
						background-position:center 40%;
						top:0;
						position:absolute;}
#chara_prev:hover,#chara_next:hover{opacity:0.8;}

#chara_detail{	width:50%;
				left:25%;bottom:50px;
				color:#000;
				font-size:30px;
				background:rgba(255,255,255,0.5);
				padding:10px;
				border-radius:10px;
				position:absolute;}
				
#chara_prev{left:0;background-image:url("src/left.png");}
#chara_next{right:0;background-image:url("src/right.png");}
#chara_zoom{position:absolute;
			left:40px;bottom:40px;
			width:64px;height:64px;
			background-image:url("src/zoomin.png");
			opacity:0.5;
			pointer-events:none;
			display:none;}
			
#chara_area[active] #chara_zoom{background-image:url("src/zoomout.png");}
.chara_staff{font-size:small;
				padding:5px;
				opacity:0.9;}
/*--------GALLERY------*/
#sect_gallery{background-image:url("src/bg03.jpg");
				min-height:100%;}
				
.gallery_area{background-image:linear-gradient(to right,rgba(0,0,0,0) 49%,#000 51%);
				background-repeat:repeat;
				background-size:20px;
				border:solid 0 #000;
				border-width:10px 0;
				height:240px;
				width:110%;
				margin-left:-5%;
				max-width:none;
				margin-top:40px;
				box-shadow:1px 1px 10px #000;
				transform:rotate(-5deg);
				}
.gallery_area:last-child{transform:rotate(-3deg);}
.gallery_area>div{	margin-top:10px;
					height:calc(100% - 20px);
					background:#000;
					overflow:hidden;
					padding:10px 0;}
.gallery_area>div>div{	display:table;
						width:100%;max-width:960px;
						height:100%;
						margin:auto;
						border-collapse:collapse;}

.gallery_item{	display:table-cell;
				border:solid 0 #000;
				border-width:0 20px;}
					
.gallery_item:hover{filter:brightness(1.3);}

.gallery_item[val="00"]{background-image:url("src/gallery/t00.png");}
.gallery_item[val="01"]{background-image:url("src/gallery/t01.png");
						background-position:right;}
.gallery_item[val="02"]{background-image:url("src/gallery/t02.png");
						background-position:right top;}
.gallery_item[val="03"]{background-image:url("src/gallery/t03.png");
						background-position:top;}
.gallery_item[val="04"]{background-image:url("src/gallery/t04.png");
						background-position:left top;}
.gallery_item[val="05"]{background-image:url("src/gallery/t05.png");
						background-position:left top;}

/*-------SYSTEM--------*/
#load{width:100%;height:100%;
			position:fixed;
			top:0;left:0;
			background-color:#161513;
			background-size:64px;
			background-image:url("src/load.gif");
			background-position:center;
			z-index:60;}
			
#alert_bg{
		position:fixed;
		top:0;left:0;
		width:100%;height:100%;
		background:#000;
		opacity:0.6;
		z-index:50;
		display:none;}
		
#alert{position:fixed;
		top:50%;left:0;
		width:100%;height:400px;
		margin-top:-200px;
		background:linear-gradient(rgba(0,0,0,0) 10%,rgba(0,0,0,0.7) 20%,rgba(0,0,0,0.7) 80%,rgba(0,0,0,0) 90%);
		color:#fff;
		text-align:center;
		font-size:24px;
		z-index:51;
		display:none;}
		
#alert>div{display:table;
			width:100%;height:100%;}
#alert>div>div{display:table-cell;
				vertical-align:middle;}
#alert_text{text-shadow:0 0 3px #fff,0 0 10px #000;
			padding:0 20px;}
#btn_enter{	padding:5px 20px;
			display:block;
			width:100%;max-width:500px;
			color:#fff;
			background:linear-gradient(to right,rgba(255,150,200,0),rgba(255,150,200,0.8),rgba(255,150,200,0));
			margin:auto;
			margin-top:20px;}
#btn_enter:hover{text-shadow:0 0 5px #fff;background:linear-gradient(to right,rgba(255,150,200,0),rgba(255,150,200,1),rgba(255,150,200,0));}


spbr{display:none;}
/*----------VIEW----------*/

#view_bg,#spmenu_bg{
			position:fixed;
			left:0;top:0;
			width:100%;height:100%;
			background-color:rgba(22,21,19,0.8);
			display:none;
			cursor:default;}
#view_bg{z-index:6;}

#view{
	position:fixed;
	left:50%;top:50%;
	background-color:#000;
	width:800px;height:600px;
	box-shadow:0 0 50px #000;
	z-index:7;
	margin-left:-400px;
	margin-top:-300px;
	display:none;}
#view_x{position:absolute;
			right:0;top:0;
			width:64px;height:64px;
			background-image:url("src/x.png");
			opacity:0.7;}
#view:hover>#view_x{opacity:1;}

#spmenu_bg{z-index:3;}
#spmenu_btn{width:80px;height:80px;
			position:fixed;
			top:10px;right:10px;
			background-image:url("src/spmenu.png");
			display:none;
			z-index:5;
			opacity:0.8;}
#spmenu_btn[active]{display:block;}
#spmenu_btn:hover{opacity:1;}
			
#spmenu{position:fixed;
		top:0;right:0;
		width:0%;height:100%;
		background:linear-gradient(to right,rgba(0,0,0,0),rgba(0,0,0,0.8) 30px,#000);
		z-index:4;
		padding-top:100px;
		opacity:0;
		}
#spmenu>a{	display:block;
			padding:10px;
			padding-left:40px;
			color:#fff;
			font-size:30px;
			white-space:nowrap;
			border-top:solid 1px rgba(255,255,255,0.2);}
#spmenu>a[active]{background:linear-gradient(to left,rgba(255,255,255,0.5),rgba(255,255,255,0));}
#spmenu>a:hover{text-shadow:0 0 10px #fff;}
#spmenu>a>span{	display:inline-block;
				font-size:14px;
				vertical-align:middle;
				padding-left:5px;}