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

@media screen and (min-width:425px) {
	body {
		background:#000;
		color:#fff;
		font-family: 'Noto Serif SC', serif;
		overflow-x:hidden;
	}
	a {
		color:#99ccff;
	}
	h2 {
		position:relative;
		color:#fb919a;
		width:60%;
		left:50%;
		transform:translate(-50%, 0%);
		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:90%;
		left:30%;
		font-size:1.5em;
	}
	#menu {
		display:none;
		position:relative;
		width:50%;
		height:500px;
		left:50%;
		transform:translate(-50%, 0%);
	}
	.menu_c {
		position:relative;
		width:100%;
		top:20px;
		margin:20px 0;
		padding:5px;
		font-size:1.8em;
		background:red;
		cursor:pointer;
	}
	#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;
	}
	#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:90%;
		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);
		}
	}
	#back_charactor {
		position:fixed;
		width:80vh;
		height:100vh;
		top:155px;
		left:50%;
		transform:translate(-50%, 0%);
		background-image:url('../image/theme2.png');
		background-position:top;
		background-size:90%;
		background-repeat:no-repeat;
		z-index:-10;
	}
	#back_image {
		position:fixed;
		width:80vh;
		height:100vh;
		top:155px;
		left:50%;
		transform:translate(-50%, 0%);
		background-image:url('../image/back.png');
		background-size:100%;
		background-repeat:no-repeat;
		z-index:-20;
	}
	#contents {
		position:relative;
		width:100%;
		top:150vh;
		margin:0 auto;
		background:#000;
	}
	
	/* charactor */
	.charactor {
		position:relative;
		width:50%;
		left:50%;
		transform:translate(-50%, 0%);
		border-bottom:2px dashed #df919a;
	}
	.charactor_bb {
		position:relative;
		width:50%;
		left:50%;
		transform:translate(-50%, 0%);
	}
	.chara_name {
		position:relative;
		width:80%;
		left:30%;
		font-size:1.9em;
		font-family: 'Noto Sans TC', sans-serif;
	}
	.chara_description {
		position:relative;
		width:50%;
		font-size:1.3em;
		line-height:35px;
	}
	.charactor img, .charactor_bb img {
		position:relative;
		width:60%;
	}
	
	/* news */
	.news_list {
		position:relative;
		width:50%;
		margin:0 auto;
	}
	.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:80%;
		left:30%;
		/*font-family: 'Sawarabi Gothic', sans-serif;*/
	}
	position {
		font-size:1.3em;
		color:#df919a;
	}
	
	/* movie */
	#movie_area {
		position:relative;
		width:50%;
		left:50%;
		transform:translate(-50%, 0%);
		overflow:hidden;
	}
	
	/* footer */
	#footer {
		position:relative;
		width:100%;
		height:200px;
		background:#df919a;
		text-align:center;
	}
	#footer p {
		position:relative;
		width:350px;
		top:50%;
		left:50%;
		transform:translate(-50%, -50%);
	}
}