@import url(http://fonts.googleapis.com/css?family=Special+Elite);
@font-face {
	font-family: '7seg';
	src: url('../fonts/7seg/7seg.eot');
	src: url('../fonts/7seg/7seg.eot?#iefix') format('embedded-opentype'),
	     url('../fonts/7seg/7seg.woff') format('woff'),
	     url('../fonts/7seg/7seg.ttf') format('truetype');
	font-weight:normal;
	font-style:normal;
	}

.phoneStatus {
	width:76px;
	height:32px;
	display:block;
	opacity:0.6;
	background-repeat:no-repeat;
	background-image:url(../images/pc/phone_deactivate.png);
	background-size:contain;
	background-position:left;
	}

.phoneActivated .phoneStatus {
	opacity:1;
	background-image:url(../images/pc/phone_active.png);
	}

.phone .phoneStatus {
	position: absolute;
	top:16px;
	right:8px;
	background-image:url(../images/phone/phone_deactivate.png);}

.phone .phoneActivated .phoneStatus {
	background-image:url(../images/phone/phone_activate.png);
	}

.phone header .phoneStatus {
	z-index: 1000;
	position: absolute;
	-webkit-transition: right 0.3s ease-in-out 0s;
	   -moz-transition: right 0.3s ease-in-out 0s;
	    -ms-transition: right 0.3s ease-in-out 0s;
	     -o-transition: right 0.3s ease-in-out 0s;
	        transition: right 0.3s ease-in-out 0s;
	right: 46px;
	top: 8px;
	}

.phone header.active .phoneStatus{
	right: 6px;
	top: 8px;
	}
.pc #home .phoneStatus{
	top: 15px;
	right: 15px;
	position: absolute;
	}

a.linkToTwitter {
	background-repeat:no-repeat;
	background-image:url(../images/pc/nav_twttr.png);
	background-size:contain;
	background-position:left;
	width:82px;height:32px;
	position: absolute;
	top:15px;
	right:100px;
	display: block;
	overflow: hidden;
	text-indent: -200px;
	}


.phone #home a.linkToTwitter {
	left: 8px;
right: auto;
top:16px;}
.phone a.linkToTwitter {
	background-image:url(../images/phone/nav_twttr.png);
	}
	a.linkToTwitter:hover{-webkit-transform: scale(1.05);
	   -moz-transform: scale(1.05);
	    -ms-transform: scale(1.05);
	     -o-transform: scale(1.05);
	        transform: scale(1.05);}

header.phone a.linkToTwitter{
	top:8px;right: 126px;
	-webkit-transition: right 0.3s ease-in-out 0s;
	   -moz-transition: right 0.3s ease-in-out 0s;
	    -ms-transition: right 0.3s ease-in-out 0s;
	     -o-transition: right 0.3s ease-in-out 0s;
	        transition: right 0.3s ease-in-out 0s;
	    }

header.phone.active a.linkToTwitter{right: 86px;}

#counters {
	}

#counter-tab {
	margin:0;
	padding:16px;
	position: absolute;
	bottom: 0;
	left: 0;
	}

#counter-tab li {
	font-family: sans-serif;
	font-size: 12px;
	font-weight: bold;
	line-height: 1.1em;
	display: block;
	padding: 9px 12px;
	border-radius: 4px;
	background-color: rgba(0, 0, 0, 0.58);
	margin: 5px 0;
	box-shadow: 0 2px 3px rgba(0,0,0,0.5) , 0 -16px 16px rgba(0, 0, 0, 0.2) inset;
	width: 160px;
	text-shadow: 0 1px 0 #000;
	color: #FFF;
	-webkit-transition: color 0.3s ease-in-out,background-color 0.2s ease-in-out 0s;
	   -moz-transition: color 0.3s ease-in-out,background-color 0.2s ease-in-out 0s;
	    -ms-transition: color 0.3s ease-in-out,background-color 0.2s ease-in-out 0s;
	     -o-transition: color 0.3s ease-in-out,background-color 0.2s ease-in-out 0s;
	        transition: color 0.3s ease-in-out,background-color 0.2s ease-in-out 0s;
	}

	#counter-tab li small{
		font-size:10px;
		font-weight:normal;
		color: #E42D2D;
	-webkit-transition:background-color 0.2s ease-in-out 0s;
	   -moz-transition:background-color 0.2s ease-in-out 0s;
	    -ms-transition:background-color 0.2s ease-in-out 0s;
	     -o-transition:background-color 0.2s ease-in-out 0s;
	        transition:background-color 0.2s ease-in-out 0s;
		}
	#counter-tab li.event small{color: #FFD500;}
	#counter-tab li.event small{}
	#counter-tab li.break small{color: #00D030;}

#counter-tab li.active{
	background-color: rgba(185, 0, 0, 0.82);
	}

	#counter-tab li.active.event{
	background-color: rgba(224, 179, 0, 0.82);
	}

	#counter-tab li.active.break{
	background-color: rgba(32, 180, 32, 0.82);
	}

	#counter-tab li.active small{color:#FFF;}



#counter , #counter li {list-style-type:none;}

#counter li{
	  -webkit-animation:blinking 0.8s ease-in-out infinite alternate;
    -moz-animation:blinking 0.8s ease-in-out infinite alternate;
    animation:blinking 0.8s ease-in-out infinite alternate;
}

@-webkit-keyframes blinking{
    0% {opacity:1;}
    100% {opacity:0.5;}
}
@-moz-keyframes blinking{
    0% {opacity:1;}
    100% {opacity:0.5;}
}
@keyframes blinking{
    0% {opacity:1;}
    100% {opacity:0.5;}
}

/*
.pc #counter {
	margin:-50px 0 0 0;
	padding:8px 16px;
	background-color:#333;
	color:#FFF;
	position:absolute;
	left: 208px;
	border-radius:4px;}
.pc #counter:before {
	content:url(../images/pc/baloon_countdown_tab.png);
	position:absolute;left:-6px;top:6px;
	}
*/

#counter li {position:absolute;top:9px;left:16px;display:block;height:1em;width:300px}

span.timer {font-size:40px;font-family:sans-serif;display:block;float:left;line-height: 1em;}
span.timer > span.num,
span.timer > span.colon {font-family:"7seg",sans-serif;font-size:40px;color:red;float:left;}

.phone #counters{
	position: absolute;
	bottom:0;
	width: 100%;
	}
.phone #counter-tab {
	position:relative;
	padding:8px;
	bottom:0px;
	}

.phone #counter-tab li {width:auto;}
.phone #counter-tab li.active{padding-bottom: 32px;}
	.phone #counter-tab li small{margin-right:8px;}
		.phone #counter-tab li small br{display:none;}
.phone #counter {
	position:absolute;
	left:auto;
	right:0;
	padding-right:8px;
	}

.phone #counter li{
	left:auto;
	right: 0px;
	width: 160px;
	text-align:right;
	}

.phone span.timer > span.num,
.phone span.timer > span.colon {
	font-size:28px;
	position: relative;
	display:inline-block;
	top:-10px;
	text-shadow:0 1px 0 #000
	}

.pc #counters{
	position: absolute;
	bottom: 0;
	width: 380px;
	left: 20px;
	right: auto;
	}
.pc #counter-tab {
	position:relative;
	padding:8px;
	bottom:0px;
	}

.pc #counter-tab li {width:auto;}
.pc #counter-tab li.active{padding-bottom: 48px;}
	.pc #counter-tab li small{margin-right:8px;}
		.pc #counter-tab li small br{display:none;}
.pc #counter {
	position:absolute;
	left:auto;
	right:0;
	top: 0;
	padding-right:8px;
	}

.pc #counter li{
	left:auto;
	right: 0px;
	width: 240px;
	text-align:right;
	}

.pc span.timer > span.num,
.pc span.timer > span.colon {
	font-size:44px;
	position: relative;
	display:inline-block;
	top:0px;
	text-shadow:0 1px 0 #000
	}


/**/

body , html {height:100%;width:100%;margin:0;padding:0;}
body.phone {overflow-x:hidden;}
// body.pc {overflow: hidden;}
section {width:100%;display:block;}
.pc section {
// height:100%;
 min-width:960px;
// overflow:scroll;
 padding:50px 0;
}
.phone section {height:auto;padding-top:52px;position: relative;z-index:100;}
.phone section#home {padding-top:0px;}
.pc section#home {
 height:465px;
// margin-top:40px;
 padding:0px;
 overflow:hidden;
 position: relative;
}

.pc .highlight {
		position: absolute;
		bottom:10px;
		right: 16px;
		display: block;
		z-index:200;
		}
	.phone .highlight {display:block;text-align:center;}
	
.pc section div.inner{
	max-width:960px;
	min-height:100%;
	margin: 0 auto 20px auto;
	}

.phone section div.inner{padding:8px}

body ,
div.background-sp {
	background-image:url(../images/pc/bg_main.jpg);
	background-size:cover;
	background-position:center center;
	}

body.pc {background-attachment: fixed;}

	body.phone {
		background-image:url(../images/phone/bg_main.png);
		background-size:160px 160px;
		background-attatchment:none;
		background-repeat:repeat;
		}
.pc div.background-sp {display: none;}
.phone div.background-sp {display:none;width:100%;height:100%;position: fixed;top:0;left: 0;z-index:10}

/* ########## Navigations ##########*/

	/* for PC*/
	nav#main-nav li , nav#main-nav ul{margin:0;padding:0;list-style-type:none;display: block;}
	nav#main-nav li > a {font-family: sans-serif;color:#FFF;text-decoration:none;}

	body.pc nav#main-nav {
		width:100%;
		height:42px;
		position:fixed;
		top:0;
		left:0;
		border-top:1px solid #333;
		z-index:1000;
		}
	body.pc nav#main-nav ul {
		background-color:rgba(0,0,0,0.5)
		}
	body.pc nav#main-nav ul:after{content:"";clear:both;display:block;}

	body.pc nav#main-nav li > a {
		line-height:42px;
		font-size:14px;
		display:block;
		text-align:center;
		border-right:1px solid #333;
		border-right: 1px dotted #333;
		}
	body.pc nav#main-nav li{
		background-color:rgba(0,0,0,0);
		-webkit-transition: background-color 0.3s ease-in-out 0s;
		   -moz-transition: background-color 0.3s ease-in-out 0s;
		    -ms-transition: background-color 0.3s ease-in-out 0s;
		     -o-transition: background-color 0.3s ease-in-out 0s;
		        transition: background-color 0.3s ease-in-out 0s;
		}
	body.pc nav#main-nav li:hover{
		background-color:#FFF;
		}
	body.pc nav#main-nav li:hover > a {
		color:#666;
		}

	body.pc nav#main-nav li {
		/*width:20%;*/
		width: 12.5%;
		float:left;}
	body.phone nav#main-nav {
		position: relative;
		z-index:100;
		}
	body.phone nav#main-nav li , 
	body.phone nav#main-nav ul {
		list-style-type: none;
		margin: 0;
		padding: 0;
		}
	body.phone nav#main-nav ul {
		padding: 4px;
		}
	body.phone nav#main-nav ul:after {
		content: "";
		display: block;
		clear: both;
		}
	body.phone nav#main-nav li {
		width:50%;float:left;
		}
		body.phone nav#main-nav li > a {
			margin:2px;
			padding:8px 6px;
			line-height:1em;
			border-radius:2px;
			border:1px solid #999;
			box-shadow:0 1px 4px rgba(0,0,0,0.5);
			background: rgba(0,0,0,0.5);
			display: block;
			font-color:#FFF;
			font-size:12px;
			text-decoration: none;
			color:#FFF;
			}

	/* Active navigation for Phone */
	.pc header.phone {display: none;}
	.phone header.phone {
			z-index:3000;
			display:block;
			position:fixed;
			overflow:hidden;
			height:48px;
			background-color: rgba(0,0,0,0.6);
			top:-48px;
			-webkit-transition: top 0.3s ease-in-out 0s;
			   -moz-transition: top 0.3s ease-in-out 0s;
			    -ms-transition: top 0.3s ease-in-out 0s;
			     -o-transition: top 0.3s ease-in-out 0s;
			        transition: top 0.3s ease-in-out 0s;
			}

		.phone header.phone.show{
			top:0px;
			}

		.phone header.phone.show.active{
			height:auto;
			padding-bottom:48px;
			}
			.phone header.phone h1{
				margin: 0;
				padding: 9px 8px 12px  8px;
				height: 25px;
				}
				.phone header.phone h1 a img{float: left;}

				.phone header.phone ul,
				.phone header.phone ul li{
					margin: 0;
					padding: 0;
					list-style-type: none;
					}

				.phone header.phone ul {
					padding:0 2px
					}
				.phone header.phone ul:after{
					content:"";
					clear:both;
					display: block;
					}
					.phone header.phone ul li{
						width:50%;
						float:left;
						}
						.phone header.phone ul li a {
							margin:2px;
							padding:6px 6px;
							line-height:1em;
							border-radius:2px;
							border:1px solid #999;
							box-shadow:0 1px 4px rgba(0,0,0,0.5);
							background: rgba(0,0,0,0.5);
							display: block;
							font-color:#FFF;
							font-size:12px;
							text-decoration: none;
							color:#FFF;
							}

			.phone header.phone a.handle {
				display: block;
				position: absolute;
				-webkit-border-radius: 4px;
				        border-radius: 4px;
				width:30px;
				height:30px;
				background-color:#FFF;
				border:1px solid #FFF;
				color:#000;
				background-image:url(../images/phone/menu.png);
				background-size:contain;
				background-repeat:no-repeat;
				overflow: hidden;
				text-indent: -100px;
				font-size:10px;
				top:8px;
				right:8px;
				-webkit-transition: transform 0.3s ease-in-out 0s;
				   -moz-transition: transform 0.3s ease-in-out 0s;
				    -ms-transition: transform 0.3s ease-in-out 0s;
				     -o-transition: transform 0.3s ease-in-out 0s;
				        transition: transform 0.3s ease-in-out 0s;
				}

			.phone header.phone.active a.handle {
				top:auto;
				bottom:8px;
				-webkit-transform: rotate(180deg);
				   -moz-transform: rotate(180deg);
				    -ms-transform: rotate(180deg);
				     -o-transform: rotate(180deg);
				        transform: rotate(180deg);
				}

body.pc #home {
//	background:url(../images/pc/main_catch.png) center left no-repeat;
	background-size:contain;
	}

body.pc #home h1 {
	display:block;
	margin: 0;
	padding: 0;
//	top:55px;
//	left: 40px;
	top:70px;
	left: 130px;
	position: absolute}
	
body.phone #home h1 {margin: 0;padding: 8px 0;width:100%;text-align:center;top:6px;}

div.pc .illust .img {display:none}

body.pc #main-vis div.pc .illust {
 position:absolute;
 width:40%;
 top:35px;
 right:20px;}
body.pc #main-vis div.pc .illust img {
 position:absolute;
 display:block;
// top:0;
 left:0;
 width:100%;
}
body.pc #main-vis div.phone {display:none;}
body.phone #main-vis div.pc {display:none;}

body.phone #main-vis div.phone .illust {width:320px;margin:0 auto; padding-bottom: 20px;}
body.phone #main-vis div.phone .illust img {max-width:100%;}


/* ######################## */

/* note unit for Concept and Prologue*/
div.note {
	font-family:serif;
	display: block;
	text-shadow:0 1px 1px rgba(0,0,0,0.1);
	padding: 32px 128px;
	background-color:#FFF;
	font-size: 16px;
	line-height:1.4em;
	margin:0 92px;
	letter-spacing:1.5px;
	box-shadow:
		0 -1px 18px rgba(0,0,0,0.2) inset ,
		0 2px 8px rgba(0,0,0,0.4);
	-webkit-border-radius: 2px;
	        border-radius: 2px;
	}

.phone div.note {
	font-size:13px;
	line-height:1.8em;
	padding: 16px 10px;
	font-family:serif;
	letter-spacing:0px;
	margin:0 auto;
	}
	div.note h1 {
		border-bottom:1px solid #666;
		margin-bottom: 3em;
		}
		div.note h1 img{max-width:100%;}
	div.note h2{
		display: block;
		padding: 10px 0;
		background-color: #333;
		border-radius: 32px;
		text-align: center;
		color: #FFF;
		font-size: 18px;
		line-height: 1em;
		}
	div.note h3{
		margin:15px 50px;
		display: block;
		padding: 10px 0;
		background-color: rgba(15, 66, 112, 0.75);
		border-radius: 10px;
		text-align: center;
		color: #FFF;
		font-size: 18px;
		line-height: 1.3em;

border: 1px solid #f0f0f0;
-moz-box-shadow: 0 3px 5px rgba(0, 0, 0, .3);
-webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, .3);
box-shadow:0 3px 5px rgba(0, 0, 0, 0.3);
filter: progid:DXImageTransform.Microsoft.Shadow(color=#777777, direction=0, strength=3, enabled=true);

		}
		div.note a{
		text-decoration: none;
		}
		div.note a:hover{
		text-decoration: underline;
		color: #FFF;
		}
	div.note blockquote{
		border:1px dotted #ccc;
		font-family:serif;
		padding:16px;
		margin: 16px;
		}

	.phone div.note blockquote{
		margin:2em 0;
		padding:8px;
		}

	div.note p {margin:2em auto; max-width: 460px;}

	div.note div.part{
		margin: 0;
		padding: 0;
		}
	
	div.note hr {
		border:none;
		border-top:dotted 1px black;
		margin-left: 2em;
		margin-right: 2em;
	}
	
	div.note span.dash {
		letter-spacing: -1px;
		}
	div.video {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
overflow: hidden;
	}
	.phone div.video {
		left: -8px;
		overflow: visible;
	}
	div.video iframe,
	div.video object,
	div.video embed,
        div.video div {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

/* #charactors */

.pc #charactors .inner ,.pc #charactors{margin:0 auto;padding:0;position: relative;}
#charactors ul.charactors ,
	#charactors ul.charactors li{
		list-style-type: none;
		margin: 0;
		padding: 0;
		}

	#charactors ul.charactors {
		height:100%;
		
		}

	.pc #charactors ul.charactors {padding-top:30%;}
	#charactors ul.charactors li{
		min-width:300px;
		max-width:480px;
		margin:0;
		height:400px;
		display: block;
		width:33%;
		position: relative;
		float:left;
		}

	.pc #charactors ul.charactors li{margin:-200px 0 200px 0;}

	.phone #charactors ul.charactors li{
		width:100%;
		max-width:300px;
		min-height:200px;
		float:none;
		margin:0 auto;
		}

		#charactors ul.charactors li dl{
			}

			#charactors ul.charactors li dl dt{
				position: absolute;
				bottom: 230px;
				left: 32px;
				}

				#charactors ul.charactors li dl dt img{
					width:100px;
					height:100px;
					display: block;
					overflow:hidden;
					}

			#charactors ul.charactors li dl dd{
				margin:0;
				padding:0;
				}
			#charactors ul.charactors li dl dd.puppet {
				
				}
				#charactors ul.charactors li dl dd.puppet img{
					width:300px;
					}
			#charactors ul.charactors li dl dd.card {
				position: absolute;
				bottom:0px;
				width:100%;
				}
				#charactors ul.charactors li dl dd.card > div{
					display: block;
					padding: 16px;
					background-color:#FFF;
					font-size: 12px;
					margin-right:64px;
					box-shadow:
						0 -1px 18px rgba(0,0,0,0.2) inset ,
						0 2px 8px rgba(0,0,0,0.4);
					-webkit-border-radius: 2px;
					        border-radius: 2px;
					}
					#charactors ul.charactors li dl dd.card p{
						margin: 0;
						padding: 0;
						background: url(../images/test_notebg_b.png) center -2px;
						background-size:318px auto;
						line-height: 21px;
						padding-bottom: 21px;
						}
					#charactors ul.charactors li dl dd.card p:last-child{
						padding-bottom:0;
						}


/* Space */

.pc div#top {
    padding: 20px 0;
    position: relative;
    width: 100%;
    }

.pc div#bar {
    background-color: rgba(6, 27, 46, 0.66);
    padding: 5px 0 5px 0;
    position: relative;
    width: 100%;
    z-index: 100;
    color: #fff;
    font-size: 16px;
    text-align: center;
    margin-bottom: 50px;
    }
.pc div#bar div#presented {
	text-align: right;
	padding: 0 22px 0 0;
	}
.phone div#bar {
    padding: 5px 0;
    position: relative;
    width: 100%;
    z-index: 100;
    color: #fff;
    font-size: 16px;
    text-align: center;
    }



/* Footer */

.pc footer {
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 16px;
    margin: 800px auto 0px;
    padding: 6px 0;
    position: relative;
    text-align: center;
    text-indent: 10px;
    width: 100%;
    z-index: 100;
    }


.phone footer{
	position: relative;
	z-index:100;
	width:100%;
//	height:1em;
    text-align: center;
	font-size:14px;
	color:#FFF;
	padding:6px 0;
	text-indent:10px;
	background-color:rgba(0,0,0,0.5)}
footer span{
	font-size:x-small;
	}