@import url('https://fonts.googleapis.com/css?family=Abril+Fatface');
@import url('https://fonts.googleapis.com/css?family=Noto+Serif+TC');

body {
	background:#000;
	color:#fff;
	font-family: 'Noto Serif SC', serif;
}
a {
	color:#99ccff;
}
h2 {
	color:#fb919a;
	font-size:2.2em;
	border-bottom:4px solid #fb919a;
	font-family: 'Roboto Slab', serif;
}
icons {
	display:inline-block;
	position:relative;
	width:32px;
	height:32px;
	top:5px;
	background-image:url('../image/page.png');
	background-size:100%;
	background-repeat:no-repeat;
}

.coming_soon {
	position:relative;
	width:200px;
	left:30px;
	font-size:1.5em;
}
#page {
	display:none;
	position:fixed;
	position:fixed;
	width:105vw;
	height:105vh;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	z-index:200;
}
#page img, #page svg {
	display:none;
	position:relative;
	width:60vh;
	top:50%;
	left:51%;
	transform:translate(-50%, -50%);
}
#page svg path {
	fill:3000;
}
#hide {
	/*display:none;*/
	position:fixed;
	width:105vw;
	height:105vh;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	background:#000;
	z-index:100;
}
#nowloading {
	display:none;
	position:fixed;
	width:100%;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	font-size:2.3em;
	text-align:center;
	z-index:300;
}
#menu {
	display:none;
}
#header {
	position:fixed;
	width:100%;
	height:100vh;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
}
#back_charactor {
	position:fixed;
	width:370px;
	height:100vh;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	background-image:url('../image/theme2.png');
	background-size:100%;
	background-repeat:no-repeat;
	background-position:center;
	z-index:-10;
}
#back_image {
	position:fixed;
	width:120%;
	height:400px;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	background-image:url('../image/back.png');
	background-size:100%;
	background-repeat:no-repeat;
	z-index:-20;
}
@media screen and (max-width:380px) {
	#back_charactor {
		top:55%;
		background-size:110%;
	}
}

#title_p {
	position:fixed;
	width:300px;
	height:145px;
	top:10px;
	left:50%;
	transform:translate(-50%, 0%);
	z-index:10;
	background:#000;
}
#title {
	position:absolute;
	width:295px;
	height:140px;
	background-image:url('../image/title4.png');
	background-size:100%;
	background-repeat:no-repeat;
	border:4px solid #fb919a;
	z-index:12;
	cursor:pointer;
}
#title_c {
	position:absolute;
	width:32px;
	height:32px;
	top:57px;
	left:66px;
	background-image:url('../image/page.png');
	background-size:100%;
	background-repeat:no-repeat;
	z-index:14;
	animation-name:move_title;
	animation-duration:5s;
	animation-timing-function:linear;
	animation-delay:0s;
	animation-iteration-count:infinite;
}
#title_p2 {
	position:fixed;
	width:100%;
	height:60px;
	top:-60px;
	left:50%;
	transform:translate(-50%, 0%);
	z-index:10;
	background:#000;
}
#title2 {
	position:absolute;
	width:295px;
	height:42px;
	top:10px;
	left:50%;
	transform:translate(-50%, 0%);
	background-image:url('../image/title3.png');
	background-size:100%;
	background-repeat:no-repeat;
	border:4px solid #fb919a;
	z-index:12;
}
#title_c2 {
	position:absolute;
	width:18px;
	height:18px;
	top:13px;
	left:94px;
	background-image:url('../image/page.png');
	background-size:100%;
	background-repeat:no-repeat;
	z-index:14;
	animation-name:move_title;
	animation-duration:5s;
	animation-timing-function:linear;
	animation-delay:0s;
	animation-iteration-count:infinite;
}
@keyframes move_title {
	0% {
		transform:rotate(30deg);
	}
	50% {
		transform:rotate(-30deg);
	}
	100% {
		transform:rotate(30deg);
	}
}

#contents {
	position:relative;
	width:100%;
	top:95vh;
	margin:0 auto;
	padding:10px 0px 0px 0px;
	background:#000;
}

/* charactor */
.charactor {
	position:relative;
	left:10px;
	border-bottom:2px dashed #df919a;
}
.charactor_bb {
	position:relative;
	left:10px;
}
.chara_name {
	position:relative;
	width:80%;
	font-size:1.9em;
	font-family: 'Noto Sans TC', sans-serif;
}
.chara_description {
	position:relative;
	width:165px;
	font-size:1.3em;
	line-height:35px;
}
.charactor img, .charactor_bb img {
	position:relative;
	width:170px;
}

/* news */
.news_list {
	position:relative;
	width:90%;
	left:10px;
}
.date {
	position:relative;
	width:160px;
	font-size:1em;
	font-family: 'Abril Fatface', cursive;
	border-top:4px solid #df919a;
	border-bottom:2px dashed #df919a;
	border-left:4px solid #df919a;
	border-right:4px solid #df919a;
	text-align:center;
	background:#000;
	z-index:2;
}
m, d {
	font-size:2em;
}
.cont {
	position:relative;
	top:-20px;
	padding:20px 10px 10px 10px;
	border-top:4px solid #df919a;
	border-bottom:4px solid #df919a;
	border-left:4px solid #df919a;
	border-right:4px solid #df919a;
	z-index:1;
}

/* staff-cast */
.staff_list, .staff_list_o {
	position:relative;
	width:100%;
	left:10px;
	/*font-family: 'Sawarabi Gothic', sans-serif;*/
}
.staff_list p {
	width:90%;
}
position {
	font-size:1.3em;
	color:#df919a;
}

/* footer */
#footer {
	position:relative;
	width:100%;
	height:200px;
	background:#f09199;
	text-align:center;
}
#footer p {
	position:relative;
	width:350px;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
}