@charset "utf-8";
body {
	background: #000;
	color: #FFF;
	}

#footer {
	    font-family: 'Anton', sans-serif;
		text-align:center;
		padding:2em 0;
	}


#page-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    font-size: 100%;
}
#page-top a {
    background: #ff6e02;
    text-decoration: none;
    color: #fff;
    width: 100px;
    padding: 30px 0;
    text-align: center;
    display: block;
    border-radius: 2px;
	color:#fff;
}
#page-top a:hover {
    text-decoration: none;
    background: #ccc;
	opacity:0.9;
}
	

footer {
	text-align:center;
	}
footer .bar {
	margin-bottom:2em;
	}
	
footer a {
	text-decoration:none;
	color:#fff;
	}


/**************** PC ****************/

/* PC用 */

/**************** PC ****************/

@media only screen and (min-width:751px){

/**************** HEADER ****************/
#header {
	width:1200px;
	height:600px;
	margin:0 auto;
	background-image:url(../images/main/main.jpg);
	background-position:center top;
	position:relative;
	}
#header h1 img { display:none;}
#header .schedule { position:absolute; padding:0; margin:auto; top: 1em; right: 3em;}
#header .start { position:absolute; padding:0; margin:auto; top: 5em; right: 3em;}

#header .txt1 { position:absolute; padding:0; margin:auto; top: 7em; left: 3em;}
#header .txt2 { position:absolute; padding:0; margin:auto; top: 10em; left: 4em;}
#header .txt3 { position:absolute; padding:0; margin:auto; top: 11em; right: 4em;}
#header .txt4 { position:absolute; padding:0; margin:auto; top: 14em; right: 4em;}

#header .txt0 { position:absolute; padding:0; margin:auto; top: 15em; left: 4em;}


#header #sns { position:absolute; padding:0; margin:auto; top: 1em; left: 3em;}
#header #sns p { float:left; margin-right:1em; }

/* css animation (prefixes are cut) */
.appear {
	transform-origin:center top;
	animation:show 1s both;
}
span.appear {display:inline-block;}
.d0 {animation-delay:5s;}

.d1 {animation-delay:1s;}
.d2 {animation-delay:2s;}
.d3 {animation-delay:3s;}
.d4 {animation-delay:4s;}
.d5 {animation-delay:6s;}
.d6 {animation-delay:7s;}
.d8 {animation-delay:8s;}
.d10 {animation-delay:10s;}
.d12 {animation-delay:12s;}
@keyframes show {
	0% {
		transform:translate(0,2em);
		opacity:0;
		text-shadow:0 0 0 #0f0;
	}
	50% {
		text-shadow:0 0 0.5em #0f0;
	}
	100% {
		transform:translate(0,0);
		opacity:1;
		text-shadow:none;
	}

}


/*mbpre*/
#mbpre {
	display:none;
	}
	

/**************** CONTAINER ****************/
.container {
	width:100%;
	padding:60px 0;
	}
.container h2 {
	text-align:center;
	margin-bottom:60px;
}
.container h3 {
	text-align:center;
	margin-bottom:25px;
	}
.column {
	width:1000px;
	margin:0 auto;
	}
	.column:after {content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
	}

/**************** INTRODUCTION ****************/
#introduction {
	background-image:url(../images/main/bg_intro.jpg);
	background-size:cover;
	}
#introduction .column .fL {
	margin-right:0;
	}
#introduction .column .fR {
	margin-left:0;
	}
#introduction .column div {
	width:580px;
	margin-bottom:3em;
	}
#introduction  h3 {
	font-family: 'rounded-mplus-1p';
	font-size:150%;
	width:580px;
	text-align:left;
	line-height:1.2;
	display:inline-block;
	}
#introduction  h3.heart {
	text-indent : -1em;
	padding-left : 1em;
	}
	
	
/**************** STORY ****************/
#story {
	background-image:url(../images/main/bg_story.jpg);
	background-size:contain;
	background-position:center center;
	background-repeat:no-repeat;
	}

#story .swiper-container {
	width:800px;
	margin:auto;
	}

#story dl {
	width:100%;
	margin-top:2em;
	}
#story dl dt {
	width:250px;
	float:left;
	font-size:380%;
	line-height:1.5;
	font-family: 'rounded-mplus-1pb';
	}
	#story dl dt span {
		font-size:150%;
		display:inline-block;
		line-height:1;
		padding-bottom:0.3em;
		}
#story dl dd {
	float:right;
	width:750px;
	}



/********************タブ*********************/

.tab-box {
	clear:both;
	padding-top:3em;
	}

.tab-content {
	width:1000px;
	margin:0 auto 60px;
	}

.tab-content input[type="radio"] {
  display: none;
}

.tab-content label {
	margin:0 0.5em 0.5em 0;
	font-size:120%;
	text-decoration:none;
	background-color:rgba(255,255,255,0.2);
	padding:0.8em 1em;
	line-height:4;
	border:1px solid #fff;
	color:#fff;
	}

.tab-content input[type=radio]:checked + label {
	background-color:rgba(255,255,255,1);
	border:1px solid #000;
	color:#000;
	}


.tab-content .tab-box {
  width: 100%;
}

.tab-content > .tab-box > div {
  display: none;
}

#tab1:checked ~ .tab-box > #tabView1 {
  display: block;
}

#tab2:checked ~ .tab-box > #tabView2 {
  display: block;
}

#tab3:checked ~ .tab-box > #tabView3 {
  display: block;
}

#tab4:checked ~ .tab-box > #tabView4 {
  display: block;
}

#tab5:checked ~ .tab-box > #tabView5 { display: block; }
#tab6:checked ~ .tab-box > #tabView6 { display: block; }
#tab7:checked ~ .tab-box > #tabView7 { display: block; }
#tab8:checked ~ .tab-box > #tabView8 { display: block; }
#tab9:checked ~ .tab-box > #tabView9 { display: block; }
#tab10:checked ~ .tab-box > #tabView10 { display: block; }
#tab11:checked ~ .tab-box > #tabView11 { display: block; }
#tab12:checked ~ .tab-box > #tabView12 { display: block; }
#tab13:checked ~ .tab-box > #tabView13 { display: block; }
#tab14:checked ~ .tab-box > #tabView14 { display: block; }
#tab15:checked ~ .tab-box > #tabView15 { display: block; }
#tab16:checked ~ .tab-box > #tabView16 { display: block; }
#tab17:checked ~ .tab-box > #tabView17 { display: block; }
#tab18:checked ~ .tab-box > #tabView18 { display: block; }
#tab19:checked ~ .tab-box > #tabView19 { display: block; }
#tab20:checked ~ .tab-box > #tabView20 { display: block; }

/**************** CAST ****************/

#cast {
	background-image:url(../images/main/bg_cast.jpg);
	background-size:cover;
	background-position:center center;
	background-repeat:no-repeat;
	}
#cast ul {
	width:1000px;
	margin:0 auto 3em auto;
	}
#cast ul li {
	text-align:center;
	font-size:190%;
	border-bottom:1px solid #fff;
	padding-bottom:0.2em;
	margin-bottom:0.5em;
	}
	#cast ul li span {
		font-size:66%;
		}
}
/**************** MOBILE ****************/

/* モニター幅750px以下 */

/**************** MOBILE ****************/

@media only screen and (max-width:750px){
	

/**************** HEADER ****************/
#header {
	width:100%;
	height:auto;
	margin:0 auto;
	background-image:url(../images/main/main.jpg);
	background-position:center top;
	position:relative;
	}
#header h1 img { width:100%;}

#header .schedule { width:50%; position:absolute; padding:0; margin:0; top: 1em; right: 0.5em;}
	#header .schedule img { width:100%;}
#header .start { width:40%; position:absolute; padding:0; margin:0; top: 4em; right: 0.5em;}
	#header .start img { width:100%;}

#header .txt1 { display:none;}
#header .txt2 { display:none;}
#header .txt3 { display:none;}
#header .txt4 { display:none;}
#header .txt0 { display:none;}



#header #sns { position:absolute; padding:0; margin:auto; top: 1em; left: 0.5em;}
#header #sns p { float:none; margin-right:1em; }


.d0 {animation-delay:5s;}



/* css animation (prefixes are cut) */
.appear {
	transform-origin:center top;
	animation:show 1s both;
}
span.appear {display:inline-block;}
.d1 {animation-delay:1s;}
.d2 {animation-delay:2s;}
.d3 {animation-delay:3s;}
.d4 {animation-delay:4s;}
.d5 {animation-delay:1s;}
.d6 {animation-delay:2s;}
.d8 {animation-delay:8s;}
.d10 {animation-delay:10s;}
.d12 {animation-delay:12s;}
@keyframes show {
	0% {
		transform:translate(0,2em);
		opacity:0;
		text-shadow:0 0 0 #0f0;
	}
	50% {
		text-shadow:0 0 0.5em #0f0;
	}
	100% {
		transform:translate(0,0);
		opacity:1;
		text-shadow:none;
	}
}

/*mbpre*/
#mbpre {
	display:block;
	text-align:center;
	padding:1em 0;
	}

	
/*	グラで
	.sample {
  background: #333;
  background:  -webkit-linear-gradient(45deg, rgba(208,228,247,1) 0%,rgba(115,177,231,1) 24%,rgba(10,119,213,1) 50%,rgba(83,159,225,1) 79%,rgba(135,188,234,1) 100%);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}*/


/**************** CONTAINER ****************/
.container {
	width:100%;
	padding:60px 0;
	}
.container h2 {
	text-align:center;
	margin-bottom:60px;
}
.container h2 img {width:90%;}
.container h3 {
	text-align:center;
	margin-bottom:25px;
	}
.column {
	width:98%;
	margin:0 auto;
	}
	.column:after {content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
	}

/**************** INTRODUCTION ****************/
#introduction {
	background-image:url(../images/main/bg_intro.jpg);
	background-size:cover;
	}
#introduction .column .fL {
	float:none;
	margin-right:0;
	}
#introduction .column .fR {
	float:none;
	margin-left:0;
	}
#introduction .column div {
	width:100%;
	margin-bottom:3em;
	}
#introduction .column img {
	width:100%;
	margin-bottom:1em;}

#introduction  h3 {
	font-family: 'rounded-mplus-1p';
	font-size:150%;
	width:100%;
	text-align:left;
	line-height:1.2;
	display:inline-block;
	}
#introduction  h3.heart {
	text-indent : -1em;
	padding-left : 1em;
	}
	
	
/**************** STORY ****************/
#story {
	background-image:none;
	background-size:contain;
	background-position:center center;
	background-repeat:no-repeat;
	}


#story dl {
	width:100%;
	margin-top:2em;
	}
#story dl dt {
	width:100%;
	float:none;
	font-size:250%;
	line-height:1.5;
	font-family: 'rounded-mplus-1pb';
	}
	#story dl dt span {
		font-size:150%;
		display:inline-block;
		line-height:1;
		padding-bottom:0.3em;
		}
#story dl dd {
	float:none;
	width:100%;
	}

#storylist li {
	float:left;
	margin:0 1em 1em 0;
	color:#fff;
	font-size:120%;
	}
#storylist li a {
	text-decoration:none;
	background-color:rgba(255,255,255,0.2);
	padding:0.8em 1em;
	line-height:1.1;
	border:1px solid #fff;
	color:#fff;
	}
#storylist li a:hover {
	background-color:rgba(255,255,255,1);
	border:1px solid #000;
	color:#000;
	}

/********************タブ*********************/

.tab-box {
	clear:both;
	padding-top:3em;
	}

.tab-content {
	width:100%;
	margin:0 auto 60px;
	}

.tab-content input[type="radio"] {
  display: none;
}

.tab-content label {
	margin:0 1em 1em 0;
	font-size:120%;
	text-decoration:none;
	background-color:rgba(255,255,255,0.2);
	padding:0.8em 1em;
	line-height:1.1;
	border:1px solid #fff;
	color:#fff;
	}

.tab-content .tab-box {
  width: 100%;
}

.tab-content > .tab-box > div {
  display: none;
}

#tab1:checked ~ .tab-box > #tabView1 {
  display: block;
}

#tab2:checked ~ .tab-box > #tabView2 {
  display: block;
}

#tab3:checked ~ .tab-box > #tabView3 {
  display: block;
}

#tab4:checked ~ .tab-box > #tabView4 {
  display: block;
}
#tab5:checked ~ .tab-box > #tabView5 { display: block; }
#tab6:checked ~ .tab-box > #tabView6 { display: block; }
#tab7:checked ~ .tab-box > #tabView7 { display: block; }
#tab8:checked ~ .tab-box > #tabView8 { display: block; }
#tab9:checked ~ .tab-box > #tabView9 { display: block; }
#tab10:checked ~ .tab-box > #tabView10 { display: block; }
#tab11:checked ~ .tab-box > #tabView11 { display: block; }
#tab12:checked ~ .tab-box > #tabView12 { display: block; }
#tab13:checked ~ .tab-box > #tabView13 { display: block; }
#tab14:checked ~ .tab-box > #tabView14 { display: block; }
#tab15:checked ~ .tab-box > #tabView15 { display: block; }
#tab16:checked ~ .tab-box > #tabView16 { display: block; }
#tab17:checked ~ .tab-box > #tabView17 { display: block; }
#tab18:checked ~ .tab-box > #tabView18 { display: block; }
#tab19:checked ~ .tab-box > #tabView19 { display: block; }
#tab20:checked ~ .tab-box > #tabView20 { display: block; }

	
/**************** CAST ****************/

#cast {
	background-image:url(../images/main/bg_cast.jpg);
	background-size:cover;
	background-position:center center;
	background-repeat:no-repeat;
	}
#cast ul {
	width:100%;
	margin:0 auto 3em auto;
	}
#cast ul li {
	text-align:center;
	font-size:120%;
	border-bottom:1px solid #fff;
	padding-bottom:0.2em;
	margin-bottom:0.5em;
	}
	#cast ul li span {
		font-size:80%;
		}

/**************** CHART ****************/

#chart .column img {
	width:100%;}


/**************** FOOTER ****************/
footer .bar img {
	width:100%;
	}





}